/* Buildsnapper Support — design system.

   Two registers, the way a building site communicates:
   * INFORMATION is a site document: a ruled white "sheet" on a warm desk,
     whose coloured top edge says what it is: sky = an answer, hazard
     stripes = urgent, green = sent or sorted, stop red = something to fix.
   * SAFETY is site signage: caution, stop, safe-condition and route plates
     (after ISO 7010), in ink frames. Hazard striping appears in exactly two
     places: the evidence-at-risk route and the urgent sheet's edge.

   The logo sets the palette: navy base, sky top, hard-hat amber. Amber is
   kept for caution and focus so its alarm meaning holds; sky carries the
   calm accents. One filled button per screen (filled = what to do next).
   No pills, no shadows, no gradients. Spacing: 8 / 16 / 24 / 40 / 64.
   Everything is scoped under .support-page so it never leaks into the
   assessor/admin chrome. Contrast ratios beside the tokens are computed. */

@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-var.woff2") format("woff2");
  font-weight: 400 800;
  font-stretch: 75% 100%;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("fonts/atkinson-next-var.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Mono";
  src: url("fonts/atkinson-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

.support-page {
  --paper: #ffffff;
  --board: #f2efe9;          /* warm desk: ink 14.34, muted 6.34, link 6.67, control 4.02 */
  --ink: #14202e;            /* 16.46:1 on paper, 8.64:1 on amber */
  --muted: #4a5868;          /* 7.27:1 on paper */
  --control: #6b7685;        /* control edges: 4.61:1 on paper */
  --placeholder: #5f6b7a;    /* 5.43:1 */
  --rule-soft: #c9cfd8;      /* decorative separators only, never a control edge */
  --navy: #1a2b3f;           /* white on navy: 14.37:1 */
  --navy-deep: #0f1e33;
  --link: #34557d;           /* 7.66:1 on paper; links are always underlined */
  --sky: #2e84d2;            /* the logo's sky: decoration only (3.93:1) */
  --sky-light: #9cc9f2;      /* text on navy-deep: 9.61:1 */
  --sky-wash: #e8f2fb;       /* ink on it: 14.52:1 */
  --amber: #faac37;          /* the hard hat: ink on it 8.64:1; never text on paper */
  --amber-ink: #7a4b00;      /* amber-family text: 7.41:1 */
  --stop: #b42318;           /* white on it / it on paper: 6.57:1 */
  --go: #1b7348;             /* white on it: 5.85:1 */
  --hazard: repeating-linear-gradient(135deg, var(--amber) 0 10px, var(--ink) 10px 20px);

  --font-ui: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Atkinson Hyperlegible Next", system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "Atkinson Hyperlegible Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --bs-border-color: var(--control);

  min-height: 100vh;
  background: var(--board);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;      /* 17px */
  line-height: 1.5;
}

/* Resets at (0,1,0): they beat Bootstrap's element margins (p, h1-h6) and
   tie with component classes, which come later in this file and so win. */
.support-page :where(h1, h2, h3, h4) { font-family: var(--font-ui); color: var(--ink); margin: 0; }
.support-page :where(p) { margin: 0; text-wrap: pretty; }
.support-page legend.sup-label { float: none; width: auto; margin: 0; padding: 0; }
.support-page a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; font-weight: 600; }
.support-page .text-secondary { color: var(--muted) !important; }
.support-page .num { font-family: var(--font-ui); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0; white-space: nowrap; }
.support-page .mono { font-family: var(--font-mono); font-weight: 500; }

/* Hi-vis focus: an ink ring with an amber halo, the same everywhere. */
.support-page :focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--amber);
}
.support-page [tabindex="-1"]:focus { outline: none; box-shadow: none; }

@media (hover: hover) {
  .support-page a:hover { color: var(--ink); text-decoration-thickness: 2px; }
}

/* ---- Type ------------------------------------------------------------------ */
.t1 { font: 800 3rem/1.05 var(--font-ui); letter-spacing: -.02em; text-wrap: balance; }
.t2 { font: 700 1.625rem/1.2 var(--font-ui); letter-spacing: -.01em; text-wrap: balance; }
.t3 { font: 700 1.25rem/1.25 var(--font-ui); text-wrap: balance; }
.label {
  display: block;
  font: 650 .8125rem/1.2 var(--font-ui);
  font-stretch: 75%;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.b1 { font-size: 1.1875rem; line-height: 1.55; }
.b3 { font-size: .9375rem; line-height: 1.45; }
@media (max-width: 575.98px) {
  .t1 { font-size: 2.125rem; }
  .t2 { font-size: 1.3125rem; }
  .t3 { font-size: 1.125rem; }
  .b1 { font-size: 1.125rem; }
}

/* ==== Top bar ================================================================ */
.sup-topbar { background: var(--navy-deep); color: #fff; border-bottom: 3px solid var(--sky); }
.sup-topbar__inner {
  max-width: 1136px;
  margin: 0 auto;
  padding: 0 16px;
  min-height: 56px;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 16px;
}
.support-page .sup-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
  font: 750 1.0625rem/1 var(--font-ui);
  letter-spacing: -.01em;
}
.sup-brand img { border-radius: 4px; }
.sup-brand__lockup {
  font: 650 .8125rem/1 var(--font-ui);
  font-stretch: 75%;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sky-light);
  padding-left: 10px;
  margin-left: 2px;
  border-left: 1px solid #36506f;
}
.sup-topnav { display: flex; align-items: stretch; gap: 4px; margin-bottom: -3px; }
.support-page .sup-topnav a {
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  color: #dbe5f0;
  font: 650 1rem/1 var(--font-ui);
  text-decoration: none;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
}
@media (hover: hover) {
  .support-page .sup-topnav a:hover { color: #fff; border-bottom-color: var(--sky-light); }
  /* The page-wide link hover turns text to ink, which vanishes on the navy
     bar: the name stays white and takes the nav's sky underline instead. */
  .support-page .sup-brand:hover { color: #fff; }
  .support-page .sup-brand:hover > span:not(.sup-brand__lockup) {
    text-decoration: underline;
    text-decoration-color: var(--sky-light);
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
  }
}
.support-page .sup-topnav a[aria-current="page"] { color: #fff; border-bottom-color: var(--amber); }
.support-page .sup-topbar :focus-visible { outline: 3px solid var(--amber); outline-offset: -3px; box-shadow: none; }
.sup-topnav__short { display: none; }
@media (max-width: 400px) {
  .sup-brand__lockup { display: none; }
  .sup-topnav__long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .sup-topnav__short { display: inline; }
  .support-page .sup-topnav a { padding: 0 10px; }
}

/* ==== Layout ================================================================== */
.sup-wrap { max-width: 1136px; margin: 0 auto; padding: 40px 16px 64px; }
.sup-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.sup-main { min-width: 0; max-width: 704px; width: 100%; }
.sup-side { min-width: 0; max-width: 704px; }
@media (min-width: 992px) {
  .sup-layout { grid-template-columns: minmax(0, 704px) 336px; gap: 64px; justify-content: center; }
  .sup-side { position: sticky; top: 24px; align-self: start; }
}
.sup-narrow { max-width: 736px; width: 100%; }
.sup-center { margin-left: auto; margin-right: auto; }
.sup-help { max-width: 1104px; margin: 0 auto; }
@media (max-width: 575.98px) {
  .sup-wrap { padding: 24px 0 40px; }
  .sup-pad { padding-left: 16px; padding-right: 16px; }
  .sup-side { padding: 0 16px; }
}

.sup-gap { margin-top: 24px; }
.sup-gap-lg { margin-top: 40px; }
.sup-lead { margin-top: 8px; }
.sup-hint { color: var(--muted); }

.sup-enter { animation: supEnter .18s cubic-bezier(.2, 0, 0, 1); }
@keyframes supEnter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ==== Sheets: the information register ======================================= */
.sheet { background: var(--paper); border: 1px solid var(--ink); border-radius: 4px; }
.sheet__head { padding: 16px 24px; border-bottom: 1px solid var(--rule-soft); }
.sheet__body { padding: 24px; }
.sheet__head-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }

/* The status edge: what kind of sheet this is, before a word is read. */
.sheet[data-edge] { border-top: 0; }
.sheet[data-edge]::before {
  content: "";
  display: block;
  height: 6px;
  margin: 0 -1px;
  border-radius: 4px 4px 0 0;
  background: var(--edge, var(--ink));
}
.sheet[data-edge="sky"] { --edge: var(--sky); }
.sheet[data-edge="go"] { --edge: var(--go); }
.sheet[data-edge="stop"] { --edge: var(--stop); }
.sheet[data-edge="hazard"]::before { height: 8px; background: var(--hazard); }
@media (max-width: 575.98px) {
  .sheet { border-left: 0; border-right: 0; border-radius: 0; }
  .sheet:not([data-edge]) { border-top: 0; }
  .sheet[data-edge]::before { margin: 0; border-radius: 0; }
  .sheet__head, .sheet__body { padding: 16px; }
}

.stamp {
  display: inline-block;
  font: 650 .8125rem/1 var(--font-ui);
  font-stretch: 75%;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  padding: 4px 6px 3px;
}

/* Ruled key/value docket: confirmation, ticket page. */
.docket { border: 1px solid var(--ink); border-radius: 2px; margin: 0; }
.docket__row { display: grid; grid-template-columns: 9rem 1fr; align-items: baseline; }
.docket__row + .docket__row { border-top: 1px solid var(--rule-soft); }
.docket dt {
  padding: 12px;
  font: 650 .8125rem/1.35 var(--font-ui);
  font-stretch: 75%;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.docket dd { padding: 12px 12px 12px 0; margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 400px) { .docket__row { grid-template-columns: 6.5rem 1fr; } }
.sup-print .docket__row { animation: supPrint .24s cubic-bezier(.2, 0, 0, 1) both; }
.sup-print .docket__row:nth-child(2) { animation-delay: .06s; }
.sup-print .docket__row:nth-child(3) { animation-delay: .12s; }
@keyframes supPrint { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ==== Plates: the safety register ============================================= */
.plate {
  display: grid;
  grid-template-columns: 64px 1fr;
  border: 2px solid var(--ink);
  border-radius: 4px;
  background: var(--paper);
  overflow: hidden;
}
.plate__sign { display: flex; justify-content: center; padding-top: 16px; }
.plate__body { padding: 16px; min-width: 0; }
.plate__title { font: 750 1.1875rem/1.3 var(--font-ui); font-stretch: 87.5%; color: var(--ink); }
.plate__text { margin-top: 8px; }
.plate__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 16px; }
.plate__more { margin-top: 8px; color: var(--muted); font-size: .9375rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.plate--stop .plate__sign { border-right: 2px solid var(--ink); }
.plate--safe .plate__sign { background: var(--go); color: #fff; font-size: 1.75rem; align-items: center; padding: 0; }

/* Caution: an amber band with the triangle and a label, the sign below. */
.plate--caution { grid-template-columns: 1fr; }
.plate__band {
  display: flex;
  gap: 8px;
  align-items: center;
  min-height: 36px;
  padding: 0 16px;
  background: var(--amber);
  border-bottom: 2px solid var(--ink);
  font: 650 .8125rem/1 var(--font-ui);
  font-stretch: 75%;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
}
.plate__band .bi { font-size: 1rem; }

/* Route: the evidence-at-risk way in. Hazard cell, text, action. */
.plate--route { grid-template-columns: 14px 1fr; align-items: stretch; min-height: 72px; }
.plate--route .plate__sign {
  padding: 0;
  background: var(--hazard);
  border-right: 2px solid var(--ink);
  transition: background-position .3s cubic-bezier(.2, 0, 0, 1);
}
.plate--route:focus-within .plate__sign { background-position: 0 20px; }
@media (hover: hover) { .plate--route:hover .plate__sign { background-position: 0 20px; } }
.plate--route .plate__body { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.plate--route .plate__copy { flex: 1 1 16rem; min-width: 0; }
.plate--route .plate__text { margin-top: 4px; }
.plate--route .sup-btn { flex: 0 0 auto; }
@media (max-width: 575.98px) {
  .plate--route { position: relative; }
  .plate--route .plate__body { display: block; }
  .support-page .plate--route .sup-btn {
    position: static; width: auto; min-height: 32px; margin-top: 4px; padding: 0; border: 0; background: none;
    color: var(--ink); font: 700 1.0625rem/1.3 var(--font-ui);
    text-decoration: underline; text-underline-offset: 3px; justify-content: flex-start;
  }
  .support-page .plate--route .sup-btn::after { content: ""; position: absolute; inset: 0; }
  .support-page .plate--route .sup-btn:focus-visible { outline: none; box-shadow: none; }
  .plate--route:focus-within { outline: 3px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 6px var(--amber); }
  .support-page .sup-ask-form .sup-textarea { min-height: 5.5rem; }
}

/* ISO 7010 prohibition roundel (red ring + bar over a symbol). */
.roundel {
  position: relative;
  width: 44px;
  height: 44px;
  border: 5px solid var(--stop);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--ink);
  font-size: 18px;
  background: var(--paper);
  flex-shrink: 0;
}
.roundel::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 44px;
  background: var(--stop);
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* ==== Buttons ================================================================= */
.support-page .sup-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 24px;
  border: 2px solid var(--navy);
  border-radius: 6px;
  font: 700 1.125rem/1.1 var(--font-ui);
  text-decoration: none;
  text-align: center;
  transition: background-color .12s, color .12s, border-color .12s;
}
.support-page .sup-btn:active { transform: translateY(1px); }
.support-page .sup-btn--primary { background: var(--navy); color: #fff; }
.support-page .sup-btn--secondary { background: var(--paper); color: var(--ink); border-color: var(--ink); }
.support-page .sup-btn--urgent { background: var(--amber); color: var(--ink); border-color: var(--ink); }
@media (hover: hover) {
  .support-page .sup-btn--primary:hover { background: var(--navy-deep); border-color: var(--navy-deep); color: #fff; }
  .support-page .sup-btn--secondary:hover { background: var(--sky-wash); color: var(--ink); }
  .support-page .sup-btn--urgent:hover { background: #f59e1b; color: var(--ink); }
}
.support-page .sup-btn:disabled { cursor: progress; opacity: .8; }
@media (max-width: 575.98px) {
  .support-page .sup-btn { min-height: 56px; width: 100%; }
  .support-page .sup-btn--inline { width: auto; }
  .support-page .sup-final .sup-btn--inline { width: 100%; }
}

/* Text actions: always underlined, never a button lookalike. */
.support-page .sup-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--link);
  font: 600 1.0625rem/1.3 var(--font-body);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer;
}
@media (hover: hover) { .support-page .sup-link:hover { color: var(--ink); text-decoration-thickness: 2px; } }

/* ==== Forms ==================================================================== */
.sup-field { margin-top: 24px; border: 0; padding: 0; min-width: 0; }
.sup-label { display: block; font: 700 1.0625rem/1.3 var(--font-ui); color: var(--ink); }
.sup-label__hint { font: 400 .9375rem/1.45 var(--font-body); color: var(--muted); }
.sup-field-hint { color: var(--muted); font-size: .9375rem; margin-top: 4px; }
.support-page .sup-input,
.support-page .sup-textarea {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 12px 14px;
  border: 2px solid var(--control);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.125rem/1.45 var(--font-body);
  box-shadow: none;
}
.support-page .sup-textarea { resize: vertical; min-height: 7.5rem; }
.support-page .sup-input::placeholder,
.support-page .sup-textarea::placeholder { color: var(--placeholder); opacity: 1; }
.support-page .sup-input:focus,
.support-page .sup-textarea:focus { border-color: var(--ink); }
.support-page .sup-input:focus-visible,
.support-page .sup-textarea:focus-visible { box-shadow: 0 0 0 3px var(--amber); }
@media (hover: hover) {
  .support-page .sup-input:hover, .support-page .sup-textarea:hover { border-color: var(--ink); }
}
.sup-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; align-items: end; }
@media (max-width: 575.98px) { .sup-field-row { grid-template-columns: 1fr; } }

/* Errors: message above the field, a stop-red bar beside it, and a summary
   sheet (red edge) at the top that takes focus and links to each problem. */
.sup-field.has-error { border-left: 4px solid var(--stop); padding-left: 14px; }
.sup-error { display: block; margin-top: 6px; color: var(--stop); font-weight: 700; }
.support-page .sup-field.has-error .sup-input,
.support-page .sup-field.has-error .sup-textarea { border-color: var(--stop); }
.sup-error-summary { margin-bottom: 24px; }
.sup-error-summary .sheet__body { padding: 16px 20px; }
.sup-error-summary__title { font: 700 1.25rem/1.25 var(--font-ui); }
.sup-error-summary ul { margin: 8px 0 0; padding: 0; list-style: none; }
.sup-error-summary li + li { margin-top: 4px; }
.support-page .sup-error-summary a { color: var(--stop); font-weight: 700; }
.sup-alert { border-left: 4px solid var(--stop); padding: 12px 16px; background: var(--paper); font-weight: 600; }

/* Radio rows: visible rings, label only, sky wash when chosen. */
.sup-radios { margin-top: 8px; border-top: 1px solid var(--rule-soft); clear: left; }
.sup-radio {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 56px;
  padding: 8px 8px;
  border-bottom: 1px solid var(--rule-soft);
  cursor: pointer;
}
.sup-radio__input {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  margin: 0;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.sup-radio__input::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ink);
  transform: scale(0);
  transition: transform .12s;
}
.sup-radio__input:checked::before { transform: scale(1); }
.sup-radio:has(.sup-radio__input:checked) { background: var(--sky-wash); font-weight: 700; }
@media (hover: hover) { .sup-radio:hover .sup-radio__input { border-width: 3px; } }
.sup-sla { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-weight: 600; }
.sup-sla .bi { color: var(--muted); }

/* Honeypot: visually gone, still in the DOM for form-filling bots. */
.support-hp { position: absolute; left: -9999px; top: -9999px; height: 1px; width: 1px; overflow: hidden; }

/* ==== Ask ===================================================================== */
.sup-ask-form { margin-top: 24px; }
.sup-ai-notice { margin-top: 4px; color: var(--ink); font-size: .9375rem; max-width: 60ch; }
.sup-ask-actions { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
/* "Ask" is one short word: keep it the widest button on the screen, ahead of "Get urgent help". */
.support-page .sup-ask-actions .sup-btn { min-width: 13rem; }
.sup-questions { margin-top: 40px; }
.sup-questions__list { list-style: none; margin: 8px 0 0; padding: 0; border-top: 2px solid var(--ink); }
.sup-questions__list li { border-bottom: 1px solid var(--rule-soft); }
.support-page .sup-qrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 52px;
  padding: 12px 8px;
  border: 0;
  background: none;
  color: var(--ink);
  font: 400 1.0625rem/1.4 var(--font-body);
  text-align: left;
}
.support-page .sup-qrow .bi { color: var(--muted); flex-shrink: 0; transition: transform .12s; }
@media (hover: hover) {
  .support-page .sup-qrow:hover { background: var(--paper); }
  .support-page .sup-qrow:hover .sup-qrow__text { text-decoration: underline; text-underline-offset: 3px; }
  .support-page .sup-qrow:hover .bi { transform: translateX(3px); color: var(--ink); }
}
.sup-route { margin-top: 24px; }

/* ==== Andrew's pass ============================================================== */
.pass {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 16px;
  padding: 16px;
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: var(--paper);
}
.pass--noimg { grid-template-columns: 1fr; }
.pass__photo { width: 72px; height: 96px; object-fit: cover; border: 1px solid var(--ink); border-radius: 2px; }
.pass__name { font: 750 1.25rem/1.2 var(--font-ui); margin-top: 4px; }
.pass__text { margin-top: 8px; }
/* The card says the right thing for the screen, or nothing. */
.sup-side .pass__text--answer { display: none; }
.sup-side[data-state="answer"] .pass__text--ask { display: none; }
.sup-side[data-state="answer"] .pass__text--answer { display: block; }
.sup-side[data-state="none"], .sup-side[data-state="contact"], .sup-side[data-state="urgent"],
.sup-side[data-state="sent"], .sup-side[data-state="resolved"] { display: none; }
@media (max-width: 991.98px) { .sup-side:not([data-state="ask"]) { display: none; } }

/* ==== Answer ===================================================================== */
.sup-asked { margin-top: 4px; color: var(--muted); overflow-wrap: anywhere; white-space: pre-wrap; }
.sup-answer-h1 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.sup-answer-h1 .stamp { flex-shrink: 0; }
.sup-progress { min-height: 200px; }
.sup-progress__text { font-weight: 600; }
.sup-progress__bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-top: 16px;
  max-width: 18rem;
}
.sup-progress__bar span {
  height: 6px;
  position: relative;
  overflow: hidden;
  /* tape-measure ticks */
  background: repeating-linear-gradient(90deg, var(--rule-soft) 0 1px, transparent 1px 8px), #eef1f5;
}
.sup-progress__bar span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--sky);
  transform: scaleX(0);
  transform-origin: left;
}
.sup-progress__bar span.is-on::after { transform: scaleX(1); transition: transform .6s linear; }
.sup-progress__bar span.is-wait::after { transform: scaleX(1); animation: supWait 1.2s ease-in-out infinite; }
@keyframes supWait { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

.sup-source { margin-top: 16px; color: var(--muted); font-size: .9375rem; }
.sup-source a { font-weight: 600; }
.sup-answer {
  margin-top: 12px;
  font: 500 1.5rem/1.4 var(--font-body);
  max-width: 44ch;
  white-space: pre-wrap;   /* keep any line breaks the verified answer carries */
}
@media (max-width: 575.98px) { .sup-answer { font-size: 1.3125rem; } }
.sup-checked { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-size: .9375rem; color: var(--muted); }
.sup-tick { width: 16px; height: 16px; flex-shrink: 0; }
.sup-tick path { fill: none; stroke: var(--go); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.is-revealed .sup-tick path { animation: supTick .24s .12s cubic-bezier(.2, 0, 0, 1) both; }
@keyframes supTick { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.sup-disclosure { margin-top: 4px; font-size: .9375rem; color: var(--muted); max-width: 62ch; }
.sup-answer-block.is-revealed .sup-answer { animation: supEnter .22s cubic-bezier(.2, 0, 0, 1); }
.sup-warnings { list-style: none; margin: 0; padding: 0; }
.sup-warnings > li + li { margin-top: 16px; }
.sup-warnings-block { margin-top: 24px; }
.sup-cards-block { margin-top: 24px; }
.sup-rows { list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid var(--ink); }
.sup-rows > li { border-bottom: 1px solid var(--rule-soft); padding: 16px 0; }
.sup-row__title { display: block; font: 600 1.0625rem/1.35 var(--font-ui); color: var(--ink); }
.sup-row__summary { margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sup-row__link { display: inline-block; margin-top: 8px; }
.sup-note { font-size: 1.1875rem; line-height: 1.55; margin-top: 16px; }

/* The decision: a navy bar that ends the sheet. Your move. */
.sup-decide {
  margin: 24px -24px -24px;
  padding: 24px;
  background: var(--navy);
  color: #fff;
  border-radius: 0 0 3px 3px;
}
.sup-decide h2 { color: #fff; }
.sup-decide__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; max-width: 34rem; }
.support-page .sup-decide .sup-btn { background: var(--paper); color: var(--navy); border-color: var(--paper); min-height: 56px; padding: 0 12px; }
@media (hover: hover) { .support-page .sup-decide .sup-btn:hover { background: var(--sky-wash); border-color: var(--sky-wash); color: var(--navy); } }
.support-page .sup-decide :focus-visible { outline-color: var(--amber); box-shadow: none; }
.sup-decide__note { margin-top: 12px; color: #c9d6e6; font-size: .9375rem; }   /* 9.9:1 on navy */
@media (max-width: 575.98px) {
  .sup-decide { margin: 24px -16px -16px; padding: 24px 16px; border-radius: 0; }
  .sup-decide__actions { grid-template-columns: 1fr; }
}
.sup-handoff { margin-top: 24px; }
.sup-after { margin-top: 16px; }
@media (max-width: 575.98px) { .sup-after { padding: 0 16px; } }

/* ==== Contact ======================================================================== */
.sup-back { margin-bottom: 8px; }
.sup-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 24px; }
.sup-actions .sup-btn--primary, .sup-actions .sup-btn--urgent { min-width: 240px; }
.sup-echo { margin-top: 24px; color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.sup-echo:not([hidden]) + .sup-actions { margin-top: 12px; }
#resolved-heading { text-wrap: pretty; }
.sup-urgent-notice { min-height: 24px; margin-top: 8px; font-size: .9375rem; color: var(--amber-ink); font-weight: 700; }
.sup-urgent-notice a { color: var(--amber-ink); }
.sup-also { margin-top: 24px; }
.sup-also .sup-rows > li { padding: 12px 0; }
.sup-urgent-plate { margin-top: 24px; }
.sup-urgent-intro { margin-top: 24px; }

/* ==== The bot check: a bottom bar, only when Cloudflare wants a tick ========= */
.sup-check { display: none; }
.sup-check.is-visible {
  display: block;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1050;
  background: var(--paper);
  border-top: 3px solid var(--ink);
  padding: 12px 16px 16px;
}
.sup-check__inner { max-width: 704px; margin: 0 auto; }
.sup-check__hint { font-weight: 700; margin-bottom: 8px; }
body.has-check-bar .support-page { padding-bottom: 180px; }

/* ==== Outcomes =================================================================== */
.sup-final__h1 { font: 800 2.25rem/1.08 var(--font-ui); letter-spacing: -.02em; text-wrap: balance; }
@media (max-width: 575.98px) { .sup-final__h1 { font-size: 1.75rem; } }
.plate--safe.is-new .plate__sign { animation: supSign .2s cubic-bezier(.2, 0, 0, 1); }
@keyframes supSign { from { transform: scale(.92); opacity: 0; } to { transform: none; opacity: 1; } }
.sup-final__section { margin-top: 24px; }
.sup-final__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 16px; align-items: center; }
.sup-store { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 16px; }
.sup-final .pass { margin-top: 24px; }

/* ==== Footer ===================================================================== */
.sup-foot { max-width: 1136px; margin: 0 auto; padding: 0 16px 40px; }
.sup-foot__inner { border-top: 1px solid var(--rule-soft); padding-top: 16px; max-width: 1104px; margin: 0 auto; color: var(--muted); font-size: .9375rem; }
.sup-foot details { margin-top: 4px; max-width: 72ch; }
.sup-foot summary { cursor: pointer; color: var(--link); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; width: max-content; max-width: 100%; }
.sup-foot details p { margin-top: 8px; }

/* ==== Help centre ================================================================ */
.sup-search { margin-top: 24px; max-width: 40rem; }
.sup-search__row { display: flex; margin-top: 8px; }
.sup-search__field { position: relative; flex: 1; min-width: 0; }
.sup-search__icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.support-page .sup-search__input {
  width: 100%;
  height: 56px;
  padding: 0 14px 0 44px;
  border: 2px solid var(--control);
  border-right: 0;
  border-radius: 6px 0 0 6px;
  font: 400 1.125rem/1 var(--font-body);
  color: var(--ink);
  background: var(--paper);
}
.support-page .sup-search__input:focus-visible { box-shadow: 0 0 0 3px var(--amber); }
.support-page .sup-search__row .sup-btn { border-radius: 0 6px 6px 0; min-height: 56px; width: auto; }
@media (max-width: 360px) { .support-page .sup-search__row .sup-btn { padding: 0 14px; } }
.sup-results-count { margin-top: 24px; color: var(--muted); }
.sup-results { margin-top: 8px; border-top: 2px solid var(--ink); }

.sup-sections { margin-top: 40px; }
@media (min-width: 992px) { .sup-sections { columns: 2; column-gap: 48px; } }
.sup-section { break-inside: avoid; margin-bottom: 40px; }
.sup-section__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-bottom: 2px solid var(--ink); padding-bottom: 8px; }
.sup-section__count { color: var(--muted); font-size: .9375rem; }
.sup-section__flag { margin: 8px 0 0; display: flex; gap: 8px; align-items: center; font-size: .9375rem; color: var(--amber-ink); font-weight: 600; }
.sup-article-list { list-style: none; margin: 0; padding: 0; }
.sup-article-list > li { border-bottom: 1px solid var(--rule-soft); }
.support-page .sup-article-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 12px 4px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 400;
}
@media (hover: hover) {
  .support-page .sup-article-link:hover { background: var(--paper); color: var(--ink); }
  .support-page .sup-article-link:hover .sup-article-link__title { text-decoration: underline; text-underline-offset: 3px; }
}
.sup-article-link__title { font: 600 1.0625rem/1.35 var(--font-ui); }
.sup-article-link__summary { display: -webkit-box; color: var(--muted); font-size: .9375rem; margin-top: 2px;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sup-article-link .bi-chevron-right { color: var(--muted); flex-shrink: 0; }
.support-page .sup-article-link.is-safety { border-left: 6px solid var(--amber); padding-left: 10px; }
.sup-tag {
  display: inline-block;
  font: 650 .75rem/1 var(--font-ui);
  font-stretch: 75%;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--amber);
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  padding: 3px 5px 2px;
  margin-left: 6px;
  vertical-align: .1em;
  white-space: nowrap;
}

.sup-crumbs { font-size: .9375rem; margin-bottom: 8px; }
.sup-crumbs span[aria-hidden] { margin: 0 6px; color: var(--muted); }
.sup-meta { margin-top: 8px; color: var(--muted); font-size: .9375rem; }
.sup-article { margin-top: 24px; }
.sup-article__caution { margin-bottom: 24px; }
.sup-related { margin-top: 40px; }
.sup-related__list { margin-top: 8px; border-top: 1px solid var(--ink); }

/* Article body (compiler-emitted HTML). */
.support-page .faq-body { font-size: 1.125rem; line-height: 1.65; max-width: 68ch; }
.support-page .faq-body > :first-child { margin-top: 0; }
.support-page .faq-body p { margin: 0 0 1rem; }
.support-page .faq-body h2 { font: 700 1.25rem/1.25 var(--font-ui); margin: 2rem 0 .75rem; padding-top: .6rem; border-top: 1px solid var(--ink); }
.support-page .faq-body h3 { font: 700 1.125rem/1.3 var(--font-ui); margin: 1.5rem 0 .5rem; }
.support-page .faq-body h4 { font: 650 .8125rem/1.2 var(--font-ui); font-stretch: 75%; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 1.25rem 0 .4rem; }
.support-page .faq-body ul, .support-page .faq-body ol { margin: 0 0 1rem; padding-left: 1.4rem; }
.support-page .faq-body li { margin-bottom: .4rem; }
.support-page .faq-body li::marker { color: var(--ink); }
.support-page .faq-body code { font-family: var(--font-mono); font-size: .9em; background: var(--board); padding: .1em .35em; border-radius: 2px; }
.support-page .faq-body blockquote { margin: 0 0 1rem; padding: .2rem 0 .2rem 1rem; border-left: 3px solid var(--ink); }
.support-page .faq-body .faq-table { margin: 0 0 1.1rem; }
.support-page .faq-body table { width: 100%; border-collapse: collapse; margin: 0; font-size: 1rem; }
.support-page .faq-body th, .support-page .faq-body td { border: 1px solid var(--ink); padding: .5rem .7rem; text-align: left; vertical-align: top; }
.support-page .faq-body thead th { font-family: var(--font-ui); background: var(--board); }
/* Phones: the wrapper scrolls sideways (focusable, labelled, from kb/build.py). */
@media (max-width: 575.98px) {
  .support-page .faq-body .faq-table { overflow-x: auto; }
  .support-page .faq-body table { white-space: nowrap; }
}
.sup-feedback { margin-top: 40px; padding-top: 24px; border-top: 2px solid var(--ink); }
.sup-feedback__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; max-width: 30rem; }
@media (max-width: 575.98px) { .sup-feedback__actions { grid-template-columns: 1fr; } }
.sup-feedback__done { margin-top: 8px; }

/* ==== Ticket page ================================================================= */
.sup-status-line { margin-top: 16px; font-weight: 700; }
.sup-tracker {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  list-style: none;
  margin: 16px 0 24px;
  padding: 0;
  gap: 6px;
}
.sup-tracker__step {
  min-width: 0;
  padding: 8px 0 0;
  border-top: 6px solid var(--rule-soft);
  font: 600 .875rem/1.25 var(--font-ui);
  color: var(--muted);
  text-align: left;
  overflow-wrap: anywhere;
}
.sup-tracker__dot { display: none; }
.sup-tracker__label { display: block; }
.sup-tracker__step--done { border-top-color: var(--navy); color: var(--ink); }
.sup-tracker__step--done .sup-tracker__label::before { content: "\2713\00a0"; }
.sup-tracker__step--current { border-top-color: var(--sky); color: var(--ink); font-weight: 750; }
/* The ticket conversation: a ruled record of who said what, not chat bubbles.
   Andrew's messages carry the sky edge, like the answer sheet. */
.sup-thread { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 12px; }
.sup-msg { border: 1px solid var(--rule-soft); border-left: 4px solid var(--rule-soft); border-radius: 2px; padding: 12px 14px; background: var(--paper); }
.sup-msg--andrew { border-color: var(--sky-light); border-left-color: var(--sky); background: var(--sky-wash); }
.sup-msg__who { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; margin: 0 0 6px; font: 650 .8125rem/1.35 var(--font-ui); font-stretch: 75%; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.sup-msg--andrew .sup-msg__who { color: var(--link); }
.sup-msg__when { font-weight: 500; letter-spacing: .02em; text-transform: none; }
.sup-msg__text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.sup-history { list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid var(--ink); }
.sup-history li { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 0; border-bottom: 1px solid var(--rule-soft); }
.sup-history__when { color: var(--muted); font-size: .9375rem; }
.sup-history__note { grid-column: 1 / -1; color: var(--muted); font-size: .9375rem; }
.sup-addinfo { margin-top: 40px; padding-top: 24px; border-top: 2px solid var(--ink); }
.sup-numbered { list-style: none; margin: 16px 0 0; padding: 0; counter-reset: n; }
.sup-numbered li { counter-increment: n; display: grid; grid-template-columns: 2.25rem 1fr; padding: 12px 0; border-bottom: 1px solid var(--rule-soft); }
.sup-numbered li::before { content: counter(n) "."; font-family: var(--font-ui); font-weight: 700; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .support-page *, .support-page *::before, .support-page *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* Urgent form: the safety notes under Send get their own label. */
.sup-urgent-head { margin-bottom: 4px; }
/* Ticket page: the status sentence is the page's heading. */
.sup-status-h1 { margin-top: 4px; }