/* Field Manual, forest palette (L-30, Oct 13, 2026): core tokens and components.
   Shared by the website and the Cubestead app. Square corners, ink rules, hard shadows. */

@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/space-grotesk-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/space-grotesk-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/space-grotesk-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/ibm-plex-mono-latin-700-normal.woff2") format("woff2")}

[hidden]{display:none!important}

:root{
  /* Brand palette (brand-kit-brief.md section 2) */
  --paper:#f5f3ec; --sheet:#fbfaf6; --warm:#e1e9ea; --mist:#e1e9ea;
  --ink:#172226; --ink-soft:#25343a;
  --pacific:#006c85; --pacific-dark:#004c60; --signal:#1ca9c9; --pacific-light:#79d9eb;
  --steel:#44545a; --warning:#9A5B00; --destructive:#B42318; --white:#FFFFFF;
  --dark-muted:#d3dcdd; --lockup-muted:#d3dcdd;
  --rule:#d3dcdd; --rule-light:rgba(245,243,236,.2);

  /* Roles (light). Components use roles, never raw palette values. */
  --bg:var(--paper); --surface:var(--sheet); --surface-alt:var(--warm); --fill-muted:var(--mist);
  --text:var(--ink); --text-2:var(--steel);
  --line:var(--ink); --hair:var(--rule);
  --accent:var(--pacific); --accent-strong:var(--pacific-dark); --on-accent:var(--white);
  --active:var(--signal);
  --caution:var(--warning); --caution-text:var(--warning);
  --stop:var(--destructive); --stop-text:var(--destructive); --on-stop:var(--white);
  --shadow:var(--ink); --shadow-accent:var(--pacific);
  --focus:var(--ink);
  --nav-on-bg:var(--ink); --nav-on-fg:var(--paper);

  --display:"Space Grotesk","Arial Narrow",Arial,sans-serif;
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  /* Spacing: 4 px base */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;
  --tap:48px;
  --ease:cubic-bezier(.23,1,.32,1);
}

/* Low-light mode for the app: ink field, paper type. Flat, no glow. */
[data-theme="dark"]{
  --bg:var(--ink); --surface:var(--ink-soft); --surface-alt:var(--ink); --fill-muted:var(--ink-soft);
  --text:var(--paper); --text-2:var(--dark-muted);
  --line:var(--dark-muted); --hair:var(--rule-light);
  --accent:var(--pacific-light); --accent-strong:var(--paper); --on-accent:var(--ink);
  --caution-text:var(--paper); --stop-text:var(--paper);
  --shadow:var(--pacific); --shadow-accent:var(--pacific);
  --focus:var(--pacific-light);
  --nav-on-bg:var(--paper); --nav-on-fg:var(--ink);
  color-scheme:dark;
}

/* Scoped role sets for full-width chapters on the website */
.on-dark{--text:var(--paper);--text-2:var(--dark-muted);--line:var(--dark-muted);--hair:var(--rule-light);--accent:var(--pacific-light);--surface:var(--ink-soft);--surface-alt:var(--ink-soft);--focus:var(--pacific-light);color:var(--paper)}
.on-pacific{--text:var(--white);--text-2:var(--mist);--line:var(--ink);--hair:rgba(23,34,38,.4);--accent:var(--white);--focus:var(--white);color:var(--white)}
.on-signal{--text:var(--ink);--text-2:var(--ink);--line:var(--ink);--accent:var(--ink);--focus:var(--ink);color:var(--ink)}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:400 1rem/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
svg.i{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square;stroke-linejoin:miter}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:600;text-wrap:balance}
p,figure,blockquote{margin:0}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit;border-radius:0}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
::selection{background:var(--signal);color:var(--ink)}

/* ---------- Type ---------- */
.t-display{font:600 clamp(2.75rem,1.6rem + 4.7vw,5.25rem)/.95 var(--display);letter-spacing:-.075em}
.t-h1{font:600 clamp(2.25rem,1.55rem + 2.9vw,3.75rem)/1 var(--display);letter-spacing:-.06em}
.t-h2{font:600 clamp(1.75rem,1.4rem + 1.45vw,2.5rem)/1.05 var(--display);letter-spacing:-.055em}
.t-h3{font:600 clamp(1.3125rem,1.24rem + .3vw,1.5rem)/1.2 var(--display);letter-spacing:-.03em}
.t-h4{font:600 1.125rem/1.3 var(--display);letter-spacing:-.02em}
.t-lede{font:400 clamp(1.125rem,1.08rem + .18vw,1.25rem)/1.5 var(--sans);color:var(--text-2)}
.t-body{font:400 1rem/1.6 var(--sans)}
.t-small{font:400 .875rem/1.5 var(--sans)}
.t-label,.kicker{font:700 .8125rem/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.kicker{display:block;color:var(--accent)}
.muted{color:var(--text-2)}
.num{font-family:var(--mono);font-weight:600;letter-spacing:.02em}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Layout helpers ---------- */
.stack>*+*{margin-top:var(--gap,16px)}
.cluster{display:flex;flex-wrap:wrap;gap:8px;align-items:center}

/* ---------- Buttons ---------- */
.btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--tap);padding:0 20px;
  border:2px solid var(--line);background:var(--surface);color:var(--text);
  font:700 .875rem/1.15 var(--mono);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;text-align:center;cursor:pointer;
  transition:transform .14s var(--ease),box-shadow .14s var(--ease),background-color .14s var(--ease)}
.btn svg.i{width:18px;height:18px}
.btn:hover{background:var(--surface-alt)}
.btn:active{transform:translate(2px,2px)}
.btn--primary{background:var(--accent);color:var(--on-accent);box-shadow:5px 5px 0 var(--shadow)}
.btn--primary:hover{background:var(--accent-strong)}
.btn--primary:active{box-shadow:3px 3px 0 var(--shadow)}
.btn--ink{background:var(--ink);color:var(--paper);border-color:var(--ink);box-shadow:5px 5px 0 var(--signal)}
.btn--ink:hover{background:var(--ink-soft)}
.btn--ink:active{box-shadow:3px 3px 0 var(--signal)}
.on-signal .btn--ink{box-shadow:5px 5px 0 var(--pacific-dark)}
.btn--ticket{background:var(--signal);color:var(--ink);border-color:var(--ink);border-left:6px double var(--ink)}
.btn--ticket:hover{background:var(--pacific-light)}
.btn--danger{background:var(--stop);color:var(--on-stop);box-shadow:5px 5px 0 var(--shadow)}
.btn--danger:hover{background:#8f1c13}
.btn--quiet{min-height:44px;padding:0 2px;border-color:transparent;background:transparent;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.btn--quiet:hover{background:transparent;color:var(--accent)}
.btn--block{display:flex;width:100%}
.btn--lg{min-height:56px;font-size:.875rem}
.btn[disabled],.btn[aria-disabled="true"]{background:var(--fill-muted);color:var(--text-2);border-color:var(--text-2);box-shadow:none;cursor:not-allowed;transform:none}

.link{color:var(--accent);font-weight:600;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.link:hover{color:var(--text)}
.link--mono{display:inline-flex;align-items:center;gap:8px;min-height:44px;font:700 .875rem/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text);text-underline-offset:6px}
.link--mono:hover{color:var(--accent)}

/* ---------- Status tags (never color alone: every tag carries a glyph and a word) ---------- */
.tag{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:3px 9px;border:2px solid var(--line);background:var(--surface);color:var(--text);
  font:600 .875rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.tag svg.i{width:14px;height:14px;stroke-width:2.5}
.tag--approved{background:var(--pacific);border-color:var(--pacific);color:var(--white)}
.tag--top{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.tag--stop{background:var(--destructive);border-color:var(--destructive);color:var(--white)}
.tag--pending{border-color:var(--caution);color:var(--caution-text);border-style:dashed}
.tag--held{background:var(--surface-alt)}
.tag--example{border-style:dashed;border-color:var(--text-2);color:var(--text-2);background:transparent}
.tag--quiet{border-color:var(--text-2);color:var(--text-2);background:transparent}
[data-theme="dark"] .tag--approved{background:var(--pacific-light);border-color:var(--pacific-light);color:var(--ink)}
[data-theme="dark"] .tag--top{background:var(--paper);border-color:var(--paper);color:var(--ink)}
[data-theme="dark"] .tag--stop{border-color:var(--paper)}

/* ---------- Register: ruled list rows ---------- */
.register{list-style:none;margin:0;padding:0;border-top:2px solid var(--line)}
.register>li{border-bottom:1px solid var(--line)}
.row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 14px;align-items:center;width:100%;min-height:64px;padding:14px 12px;
  background:transparent;border:0;color:inherit;text-align:left;text-decoration:none;cursor:default}
a.row,button.row{cursor:pointer}
a.row:hover,button.row:hover{background:var(--surface-alt)}
.row__index{align-self:start;min-width:26px;padding-top:4px;font:600 .875rem/1.3 var(--mono);letter-spacing:.06em;color:var(--accent)}
.row__icon{align-self:start;padding-top:2px;color:var(--text)}
.row__icon svg.i{width:22px;height:22px}
.row__title{display:block;font:600 1.125rem/1.3 var(--display);letter-spacing:-.02em}
.row__sub{display:block;margin-top:2px;font-size:1rem;line-height:1.45;color:var(--text-2);overflow-wrap:anywhere}
.row__meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.row__end{display:flex;align-items:center;gap:8px;font:600 .875rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-2)}
.row__end svg.i{color:var(--text)}
.row.is-active{background:var(--surface);box-shadow:inset 6px 0 0 var(--active)}
.row--tight{min-height:52px;padding-block:10px}

/* ---------- Sheet: the record frame ---------- */
.sheet{background:var(--surface);border:2px solid var(--line);box-shadow:6px 6px 0 var(--shadow-accent)}
.sheet--ink{box-shadow:6px 6px 0 var(--shadow)}
.sheet--flat{box-shadow:none}
.sheet__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;min-height:40px;padding:8px 16px;background:var(--ink);color:var(--paper);
  font:600 .875rem/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.sheet__bar b{font-weight:600;color:var(--pacific-light)}
.sheet__body{padding:20px 16px}
.sheet__foot{padding:10px 16px;border-top:1px solid var(--line);font:500 .875rem/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-2)}
@media (min-width:768px){
  .sheet{box-shadow:10px 10px 0 var(--shadow-accent)}
  .sheet--ink{box-shadow:10px 10px 0 var(--shadow)}
  .sheet--flat{box-shadow:none}
  .sheet__body{padding:28px}
  .sheet__bar,.sheet__foot{padding-inline:28px}
}

.spec{margin:0;border-top:1px solid var(--line)}
.spec>div{display:grid;grid-template-columns:104px minmax(0,1fr);gap:12px;padding:12px 0;border-bottom:1px solid var(--hair)}
.spec>div:last-child{border-bottom:0}
.spec dt{padding-top:4px;font:600 .875rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}
.spec dd{margin:0;font-size:1.0625rem;font-weight:600;line-height:1.45;overflow-wrap:anywhere}
.spec dd small{display:block;font-size:1rem;font-weight:400;color:var(--text-2)}

/* ---------- Alerts ---------- */
.alert{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;padding:14px 16px;background:var(--surface);border:2px solid var(--line);border-left-width:8px}
.alert>svg.i{width:24px;height:24px;margin-top:1px}
.alert__label{font:700 .875rem/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.alert p+p{margin-top:2px}
.alert--info{border-left-color:var(--accent)}
.alert--info>svg.i,.alert--info .alert__label{color:var(--accent)}
.alert--caution{border-left-color:var(--caution)}
.alert--caution>svg.i,.alert--caution .alert__label{color:var(--caution-text)}
.alert--stop{border-left-color:var(--stop)}
.alert--stop>svg.i,.alert--stop .alert__label{color:var(--stop-text)}
.alert--solid{background:var(--destructive);border-color:var(--line);border-left-color:var(--line);color:var(--white)}
.alert--solid>svg.i,.alert--solid .alert__label{color:var(--white)}

/* ---------- Forms ---------- */
.field{display:grid;gap:8px}
.field__label{font:600 1rem/1.3 var(--sans)}
.field__hint{font-size:1rem;line-height:1.45;color:var(--text-2)}
.input,.select,.textarea{display:block;width:100%;min-height:56px;padding:12px 14px;background:var(--surface);color:var(--text);border:2px solid var(--line);
  font:500 1.125rem/1.35 var(--sans);appearance:none}
.textarea{min-height:120px;resize:vertical}
.input::placeholder,.textarea::placeholder{color:var(--text-2);opacity:1}
.select{padding-right:48px;background-repeat:no-repeat;background-position:right 16px center;background-size:16px 16px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 5l6 6 6-6' fill='none' stroke='%2323372E' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E")}
[data-theme="dark"] .select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 5l6 6 6-6' fill='none' stroke='%23F5F3EC' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E")}
.field--error .input,.field--error .textarea{border-color:var(--stop);box-shadow:inset 0 -4px 0 var(--stop)}
.field__error{display:flex;align-items:flex-start;gap:8px;font-size:1rem;font-weight:600;line-height:1.4;color:var(--stop-text)}
.field__error svg.i{margin-top:1px}

.choices{display:grid;margin:0;padding:0;border:0}
.choices legend{padding:0;margin-bottom:8px;font:600 1rem/1.3 var(--sans)}
.choice{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center;min-height:56px;padding:12px 14px;margin-top:-2px;background:var(--surface);border:2px solid var(--line);cursor:pointer}
.choice input{appearance:none;display:grid;place-content:center;width:24px;height:24px;margin:0;background:var(--surface);border:2px solid var(--line);cursor:pointer}
.choice input::before{content:"";width:12px;height:12px;background:var(--line);transform:scale(0)}
.choice input:checked::before{transform:scale(1)}
.choice:has(input:checked){background:var(--surface-alt);box-shadow:inset 6px 0 0 var(--active)}
.choice b{display:block;font-weight:600}
.choice small{display:block;font-size:1rem;color:var(--text-2)}

.switch{appearance:none;position:relative;flex:none;width:76px;height:44px;padding:0;background:var(--surface);border:2px solid var(--line);cursor:pointer}
.switch::before{content:"";position:absolute;top:4px;left:4px;width:32px;height:32px;background:var(--line);transition:transform .16s var(--ease)}
.switch[aria-checked="true"]{background:var(--accent)}
.switch[aria-checked="true"]::before{background:var(--on-accent);transform:translateX(32px)}

/* ---------- Search ---------- */
.search{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:stretch;min-height:60px;background:var(--surface);border:2px solid var(--line);box-shadow:5px 5px 0 var(--shadow)}
.search:focus-within{outline:3px solid var(--focus);outline-offset:3px}
.search__icon{display:grid;place-items:center;width:50px}
.search__icon svg.i{width:22px;height:22px}
.search__input{width:100%;min-width:0;padding:0;background:transparent;border:0;outline:0;color:var(--text);font:600 1.375rem/1.2 var(--mono);letter-spacing:.01em}
.search__input::placeholder{color:var(--text-2);opacity:1;font-weight:500;font-size:1.0625rem}
.search__go{display:grid;place-items:center;min-width:60px;padding:0;background:var(--accent);color:var(--on-accent);border:0;border-left:2px solid var(--line);cursor:pointer}
.search__go svg.i{width:22px;height:22px}
.search--plain{box-shadow:none}

/* ---------- Tabs ---------- */
.tabs{display:flex;border-bottom:2px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 16px;margin-bottom:-2px;background:transparent;border:0;border-bottom:4px solid transparent;
  color:var(--text-2);font:600 .875rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;cursor:pointer}
.tab:hover{color:var(--text)}
.tab[aria-selected="true"],.tab[aria-current="page"]{background:var(--surface);border-bottom-color:var(--line);color:var(--text);font-weight:700}
.tab .count{color:var(--accent)}

/* ---------- Empty and error states ---------- */
.empty{display:grid;gap:12px;justify-items:start;padding:28px 20px;background:var(--surface);border:2px dashed var(--line)}
.empty__code{font:700 .875rem/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-2)}
.empty h1,.empty h2{font:600 1.5rem/1.15 var(--display);letter-spacing:-.035em}
.empty p{color:var(--text-2);max-width:34em}
.empty h1,.empty h2,.empty p{min-width:0;overflow-wrap:anywhere}

/* ---------- Small parts ---------- */
.stamp{display:inline-block;padding:8px 10px;border:2px solid var(--pacific);color:var(--pacific);font:700 .875rem/1.35 var(--mono);letter-spacing:.1em;text-transform:uppercase;transform:rotate(-3deg)}
.photo{background:var(--surface-alt);border:2px solid var(--line)}
.photo svg,.photo img{width:100%;height:auto}
.photo figcaption{padding:8px 12px;border-top:2px solid var(--line);font:500 .875rem/1.45 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-2)}
.checks{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.checks li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start}
.checks li>svg.i{width:22px;height:22px;padding:3px;margin-top:2px;background:var(--signal);color:var(--ink);border:2px solid var(--ink);stroke-width:3}
.source{display:grid;gap:4px;padding:14px 16px;background:var(--surface-alt);border:2px solid var(--line)}
.source__label{font:700 .875rem/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.source b{font-weight:600}
.source small{font-size:1rem;color:var(--text)} /* --text-2 on the warm surface is 3.9:1; the row, revision and review line must read at 4.5:1 */
a.source{color:inherit;text-decoration:none}
a.source:hover{background:var(--surface)}
a.source b{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .btn:active{transform:none}
}

/* ---------- Utilities ---------- */
.mt-4{margin-top:4px}.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-20{margin-top:20px}.mt-28{margin-top:28px}.mt-40{margin-top:40px}
/* Reset to light roles for a sheet that sits inside an ink, Pacific or signal chapter */
.light{--bg:var(--paper);--surface:var(--sheet);--surface-alt:var(--warm);--text:var(--ink);--text-2:var(--steel);--line:var(--ink);--hair:var(--rule);--accent:var(--pacific);--focus:var(--ink);color:var(--ink)}
.search__static{display:flex;align-items:center;font:600 1.375rem/1.2 var(--mono)}
.search__static--ask{font:600 1.125rem/1.3 var(--sans)}
.search__input{appearance:none;-webkit-appearance:none}
.tabs+.register,.tabs+[data-tab-target]>.register{border-top:0}

/* Optional dropdown above a list. One per screen at most; the list works without touching it. */
.pick{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px;margin-bottom:16px}
.pick__label{font:700 .875rem/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-2)}
.pick .select{min-height:48px;padding-block:8px;font-weight:600}

/* Cubestead app shell. Mobile first.
   Field roles (team members, public demo): top bar with one menu, content, the ask field docked at the bottom. No tab bar.
   Office roles (manager, owner): top bar, content, docked action, bottom tabs.
   From 1024 px, every role: ink rail on the left, content column on the right. */

body.app{min-height:100vh;min-height:100dvh;font-size:1.0625rem}
.skip{position:absolute;left:12px;top:-80px;z-index:60;padding:12px 16px;background:var(--signal);color:var(--ink);font-weight:600;text-decoration:none;border:2px solid var(--ink)}
.skip:focus{top:8px}

.shell{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;padding-bottom:calc(64px + env(safe-area-inset-bottom))}

/* ---------- Top bar ---------- */
.appbar{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:60px;padding:6px 6px 6px 16px;background:var(--ink);color:var(--paper)}
.appbar__ctx{display:flex;align-items:center;gap:12px;min-width:0;min-height:48px;color:inherit;text-decoration:none}
.appbar__ctx img{width:36px;height:36px;flex:none}
.appbar__title{display:block;font:700 1.0625rem/1.2 var(--display);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.appbar__sub{display:block;margin-top:2px;font:500 .875rem/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--dark-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.appbar__tools{display:flex;align-items:center;flex:none}
.appbar__user{display:none}
.iconbtn{display:inline-grid;place-items:center;width:48px;height:48px;padding:0;background:transparent;color:inherit;border:0;cursor:pointer}
.iconbtn svg.i{width:22px;height:22px}
.iconbtn[aria-pressed="true"]{background:var(--paper);color:var(--ink)}
.appbar :focus-visible{outline-color:var(--pacific-light);outline-offset:-3px}

/* ---------- Menu: the one dropdown. Everything that is not "ask" lives here on a phone. ---------- */
.menu{position:static}
.menu>summary{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 12px;list-style:none;cursor:pointer;font:700 .875rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;user-select:none}
.menu>summary::-webkit-details-marker{display:none}
.menu>summary svg.i{width:22px;height:22px}
.menu[open]>summary{background:var(--paper);color:var(--ink)}
.menu__panel{position:absolute;left:0;right:0;top:100%;z-index:40;max-height:calc(100vh - 60px);max-height:calc(100dvh - 60px);overflow:auto;background:var(--surface);color:var(--text);border-bottom:2px solid var(--line);box-shadow:0 6px 0 var(--shadow)}
.menu__link{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:14px;min-height:56px;padding:0 16px;color:var(--text);text-decoration:none;border-bottom:1px solid var(--hair);font-weight:600;font-size:1.0625rem}
.menu__link:last-child{border-bottom:0}
.menu__link svg.i{width:22px;height:22px}
.menu__link:hover{background:var(--surface-alt)}
.menu__link[aria-current="page"]{background:var(--nav-on-bg);color:var(--nav-on-fg);box-shadow:inset 6px 0 0 var(--signal)}
.menu__link--quiet{font-weight:500;color:var(--text-2)}
.menu__panel :focus-visible{outline-color:var(--focus);outline-offset:-3px}
.shell--menu{padding-bottom:0}
.shell--menu .appbar{position:sticky;top:0;z-index:30}
.shell--menu .navbar{display:none}
.shell--menu .actionbar{bottom:0;padding-bottom:calc(14px + env(safe-area-inset-bottom))}

.strip{display:flex;align-items:center;justify-content:center;gap:8px;min-height:30px;padding:5px 12px;background:var(--fill-muted);color:var(--text);border-bottom:1px solid var(--line);
  font:600 .875rem/1.3 var(--mono);letter-spacing:.07em;text-transform:uppercase;text-align:center}
.strip svg.i{width:14px;height:14px}

/* ---------- Navigation: bottom tabs on phone, rail on desktop ---------- */
.navbar{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--surface);border-top:2px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.navbar__brand,.navbar__foot{display:none}
.navbar__links{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
.navlink{display:grid;justify-items:center;align-content:center;gap:5px;min-height:62px;padding:6px 2px;color:var(--text);text-decoration:none;border-right:1px solid var(--hair);
  font:600 .875rem/1 var(--mono);letter-spacing:.02em;text-transform:uppercase}
.navlink:last-child{border-right:0}
.navlink svg.i{width:22px;height:22px}
.navlink b{display:none;font-weight:600}
.navlink[aria-current="page"]{background:var(--nav-on-bg);color:var(--nav-on-fg);box-shadow:inset 0 4px 0 var(--signal)}
.navlink .badge{position:absolute}
.navlink{position:relative}
.navlink .badge{top:6px;left:calc(50% + 8px);min-width:20px;height:20px;padding:0 5px;display:grid;place-items:center;background:var(--signal);color:var(--ink);border:2px solid var(--ink);font:700 .875rem/1 var(--mono)}

/* ---------- Screen ---------- */
.screen{flex:1;width:100%;max-width:720px;padding:20px 16px 28px}
.screen__head{margin-bottom:20px}
.screen__head p{margin-top:8px;color:var(--text-2)}
.app-h1{font:600 1.75rem/1.1 var(--display);letter-spacing:-.04em}
.app-h2{font:600 1.3125rem/1.2 var(--display);letter-spacing:-.03em}
.back{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:-8px 0 4px;color:var(--text);text-decoration:none;font:700 .875rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.back:hover{color:var(--accent)}
.block{margin-top:28px}
.block__title{margin-bottom:10px;font:700 .875rem/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-2)}
.note{font-size:1rem;line-height:1.5;color:var(--text-2)}
.verify-line{display:flex;gap:10px;align-items:flex-start;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:1rem;line-height:1.45}
.verify-line svg.i{margin-top:1px;color:var(--accent)}

.actionbar{position:sticky;bottom:calc(64px + env(safe-area-inset-bottom));z-index:10;display:grid;gap:4px;margin:28px -16px -28px;padding:12px 16px 14px;background:var(--bg);border-top:2px solid var(--line)}
.actionbar .btn--primary,.actionbar .btn--danger{width:100%;min-height:56px;font-size:.875rem}
.actionbar .btn--quiet{justify-self:center}
.actionbar--inline{position:static;margin:20px 0 0;padding:0;background:transparent;border:0}

/* Record */
.record{display:grid;gap:20px}
.record__name{font:600 2rem/1.05 var(--display);letter-spacing:-.045em}
.record__sub{margin-top:6px;font-size:1.125rem;font-weight:500}
.record .spec{margin-top:18px}
.tagline{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}

/* Chart excerpt: a real table that stacks on phones */
.chart{width:100%;border-collapse:collapse;border-top:2px solid var(--line);font-size:1rem}
.chart th{padding:10px 12px 10px 0;border-bottom:1px solid var(--line);text-align:left;font:600 .875rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}
.chart td{padding:13px 12px 13px 0;border-bottom:1px solid var(--hair);vertical-align:top}
.chart tr.is-source td{background:var(--surface);font-weight:600}
.chart td a.link{display:inline-block;padding:10px 0;margin:-10px 0}
.chart tr.is-source td:first-child{padding-left:14px;box-shadow:inset 6px 0 0 var(--active)}
@media (max-width:719px){
  .chart thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .chart tr{display:block;padding:12px 0;border-bottom:1px solid var(--line)}
  .chart tr.is-source{padding-left:14px;background:var(--surface);box-shadow:inset 6px 0 0 var(--active)}
  .chart td,.chart tr.is-source td:first-child{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;padding:3px 0;border:0;box-shadow:none;background:transparent}
  .chart td::before{content:attr(data-label);padding-top:3px;font:600 .875rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}
}

/* Audit ledger */
.ledger-time{font:600 .875rem/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-2)}
.settings-row{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:12px 12px}
.settings-row b{display:block;font-weight:600}
.settings-row small{display:block;font-size:1rem;color:var(--text-2)}
.state{font:700 .875rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;min-width:28px;text-align:right}

/* ---------- Sign-in and invite ---------- */
.auth{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
.auth__bar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px;padding:8px 16px;background:var(--ink);color:var(--paper)}
.auth__brand{display:inline-flex;align-items:center;gap:12px;min-height:48px;color:inherit;text-decoration:none}
.auth__brand img{width:40px;height:40px}
.auth__brand b{display:block;font:700 1.0625rem/1.15 var(--display);letter-spacing:.01em}
.auth__brand small{display:block;margin-top:2px;font:500 .875rem/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dark-muted)}
.auth__main{flex:1;width:100%;max-width:480px;margin:0 auto;padding:28px 16px 36px}
.auth__main>*+*{margin-top:20px}
.auth__main .kicker+h1{margin-top:10px}
.auth__main h1{font:600 2rem/1.05 var(--display);letter-spacing:-.045em}
.auth__main .btn--primary{width:100%;min-height:56px;font-size:.875rem}
.auth__links{display:grid;gap:0;border-top:1px solid var(--line)}
.auth__links a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;border-bottom:1px solid var(--line);color:var(--text);text-decoration:none;font-weight:600}
.auth__links a:hover{color:var(--accent)}
.auth__foot{padding:14px 16px 20px;border-top:1px solid var(--line);text-align:center;font:500 .875rem/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-2)}
.steps{display:flex;gap:6px;align-items:center;font:700 .875rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-2)}
.steps i{display:block;width:28px;height:6px;background:var(--fill-muted);border:1px solid var(--line)}
.steps i.on{background:var(--accent)}
.device{display:grid;gap:10px;padding:14px;background:var(--surface-alt);border:2px dashed var(--line)}
.device__label{font:700 .875rem/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-2)}
.device__sheet{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center;padding:16px;background:var(--surface);border:2px solid var(--line)}
.device__sheet svg.i{width:40px;height:40px;stroke-width:1.5}
.device__sheet b{display:block;font-weight:600;line-height:1.3}
.device__sheet small{display:block;margin-top:2px;font-size:1rem;color:var(--text-2)}
.bigmark{display:grid;place-items:center;width:64px;height:64px;background:var(--accent);color:var(--on-accent);border:2px solid var(--line);box-shadow:5px 5px 0 var(--shadow)}
.bigmark svg.i{width:32px;height:32px;stroke-width:3}
.bigmark--stop{background:var(--stop);color:var(--on-stop)}

@media (min-width:1024px){
  .shell{display:grid;grid-template-columns:264px minmax(0,1fr);grid-template-rows:auto auto 1fr;padding-bottom:0}
  .navbar{position:sticky;top:0;grid-column:1;grid-row:1 / -1;display:flex;flex-direction:column;height:100vh;height:100dvh;padding:0;background:var(--ink);color:var(--paper);border-top:0;border-right:2px solid var(--line)}
  .navbar__brand{display:flex;align-items:center;gap:12px;min-height:76px;padding:12px 20px;color:var(--paper);text-decoration:none;border-bottom:1px solid var(--rule-light)}
  .navbar__brand img{width:40px;height:40px}
  .navbar__brand b{display:block;font:700 1.0625rem/1.15 var(--display);letter-spacing:.01em}
  .navbar__brand small{display:block;margin-top:2px;font:500 .875rem/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--lockup-muted)}
  .navbar__links{display:flex;flex-direction:column}
  .navlink{display:flex;justify-items:start;align-items:center;gap:14px;min-height:54px;padding:0 20px;color:var(--dark-muted);border-right:0;border-bottom:1px solid var(--rule-light);font-size:.875rem;letter-spacing:.08em}
  .navlink b{display:inline;min-width:22px;color:var(--pacific-light)}
  .navlink:hover{color:var(--paper)}
  .navlink[aria-current="page"],[data-theme="dark"] .navlink[aria-current="page"]{background:var(--ink-soft);color:var(--paper);box-shadow:inset 6px 0 0 var(--signal)}
  .navlink .badge{position:static;margin-left:auto}
  .navbar__foot{display:block;margin-top:auto;padding:16px 20px 20px;border-top:1px solid var(--rule-light);font-size:1rem;line-height:1.4;color:var(--dark-muted)}
  .navbar__foot b{display:block;color:var(--paper);font-weight:600}
  .navbar__foot .link{color:var(--pacific-light)}
  .navbar__foot .link:hover{color:var(--paper)}
  .navbar :focus-visible{outline-color:var(--pacific-light);outline-offset:-3px}

  .appbar{grid-column:2;grid-row:1;min-height:76px;padding:10px 40px;background:var(--bg);color:var(--text);border-bottom:2px solid var(--line)}
  .appbar__ctx img{display:none}
  .appbar__title{font-size:1.25rem}
  .appbar__sub{color:var(--text-2)}
  .appbar__user{display:block;margin-right:8px;font:600 .875rem/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-2)}
  .appbar .iconbtn{border:2px solid var(--line)}
  .appbar .iconbtn[aria-pressed="true"]{background:var(--text);color:var(--bg)}
  .appbar :focus-visible{outline-color:var(--focus);outline-offset:3px}
  .menu{display:none}
  .shell--menu .navbar{display:flex}
  .shell--menu .appbar{position:static}
  .strip{grid-column:2;grid-row:2;justify-content:flex-start;padding-inline:40px}
  .screen{grid-column:2;grid-row:3;max-width:820px;padding:36px 40px 72px}
  .screen--wide{max-width:1180px}
  .app-h1{font-size:2.25rem}
  .actionbar{position:static;display:flex;align-items:center;gap:20px;margin:32px 0 0;padding:0;background:transparent;border:0}
  .actionbar .btn--primary,.actionbar .btn--danger{width:auto;min-width:260px}
  .record{grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:36px;align-items:start}
  .record__name{font-size:2.5rem}
  .cols-2{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start}
  .cols-2>.block{margin-top:0}
  .auth__main{padding-top:72px}
}
.cols-2{margin-top:4px}

/* ---------- Ask and answer: one field (type or speak), one answer in the standard template ---------- */
.askdock{position:fixed;left:0;right:0;bottom:0;z-index:20;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:var(--bg);border-top:2px solid var(--line)}
.askdock>*{max-width:688px}
.askdock__hint{margin-top:8px;font-size:.875rem;line-height:1.4;color:var(--text-2)}
.askdock__hint:empty{display:none}
.ask-out{padding-bottom:132px}
.search--ask{grid-template-columns:auto minmax(0,1fr) auto auto}
.search--ask .search__input{font:500 1.125rem/1.3 var(--sans);letter-spacing:0;padding-left:12px}
.search--ask .search__input::placeholder{font-size:1.0625rem}
.search--ask .search__icon+.search__input{padding-left:0}
.search__mic{display:grid;place-items:center;min-width:56px;padding:0;background:var(--surface);color:var(--text);border:0;border-right:2px solid var(--line);cursor:pointer}
.search__mic svg.i{width:24px;height:24px}
.search__mic[aria-pressed="true"],.search__mic.is-on{background:var(--signal);color:var(--ink)}
.search__clear{display:grid;place-items:center;min-width:48px;padding:0;background:transparent;border:0;color:var(--text);cursor:pointer}
.search__input::-webkit-search-cancel-button{display:none}

.asked{display:flex;gap:10px;align-items:baseline;margin-bottom:14px;font-size:1rem;line-height:1.4;color:var(--text-2)}
.asked b{font:700 .875rem/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-2);flex:none}
.asked span{min-width:0;overflow-wrap:anywhere;color:var(--text);font-weight:600}
.answer__ctx{margin-bottom:8px;font:700 .875rem/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.answer__title{font:600 1.75rem/1.1 var(--display);letter-spacing:-.04em}
.steplist{list-style:none;margin:16px 0 0;padding:0;border-top:2px solid var(--line)}
.step{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 14px;align-items:start;padding:14px 0;border-bottom:1px solid var(--line);color:inherit;text-decoration:none}
a.step:hover{background:var(--surface-alt)}
.step__n{padding-top:6px;font:600 .875rem/1.3 var(--mono);letter-spacing:.06em;color:var(--accent)}
.step__name{display:block;font:600 1.375rem/1.2 var(--display);letter-spacing:-.03em}
.step__sub{display:block;margin-top:2px;font-weight:600;line-height:1.35}
.step__where{display:block;margin-top:6px;font-size:1rem;line-height:1.45}
.steplist:last-child>li:last-child .step{border-bottom:0}
.step .row__meta{margin-top:10px}
.step__thumb{display:block;width:84px;border:2px solid var(--line);background:var(--surface-alt)}
.step__thumb svg{display:block;width:100%;height:auto}
.answer__impact{margin-top:14px;font-weight:600;line-height:1.45}
/* The answer card (October 21, 2026): one template for every preset, the app's answer card. Hazard line, title, "Do this",
   two folds that start closed (Shutoffs, View source), then the buttons. Fits one phone screen at 390 px. */
.sheet--card .sheet__body{padding:18px 16px 16px}
@media (min-width:768px){.sheet--card .sheet__body{padding:24px 28px}}
.card-hazard{display:flex;gap:8px;align-items:flex-start;margin:0 0 10px;font-weight:700;line-height:1.4;color:var(--stop-text)}
.card-hazard svg.i{flex:none;width:20px;height:20px;margin-top:1px;color:var(--stop)}
.card-label{margin:14px 0 0;font:700 .8125rem/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-2)}
.card-steps,.card-list{margin:0;padding-left:1.375rem;font-size:1rem;line-height:1.45}
.card-steps li,.card-list li{margin:6px 0 0;padding-left:2px;overflow-wrap:anywhere}
.card-steps li::marker{font-weight:700;color:var(--accent)}
.nowrap{white-space:nowrap}
.card-text{margin:10px 0 0;font-size:1rem;line-height:1.45}
.fold{border-top:1px solid var(--hair)}
.fold--source{border-bottom:1px solid var(--hair)}
.card-steps+.fold,.card-list+.fold,.card-text+.fold{margin-top:14px}
.fold>summary{display:flex;align-items:center;gap:10px;min-height:44px;font-weight:600;line-height:1.3;cursor:pointer;list-style:none}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary svg.i{flex:none;width:20px;height:20px;color:var(--accent)}
.fold>summary svg.i:last-child{width:18px;height:18px;margin-left:auto;color:var(--text);transition:transform .15s var(--ease)}
.fold[open]>summary svg.i:last-child{transform:rotate(90deg)}
.fold>summary:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.shutoffs{list-style:none;margin:0;padding:0}
.shutoff{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--hair);color:inherit;text-decoration:none;line-height:1.4}
.shutoff:hover{background:var(--surface-alt)}
.shutoff>span>span{display:block;overflow-wrap:anywhere}
.shutoff__serves,.shutoff__rule{font-size:.9375rem;color:var(--text-2)}
.shutoff svg.i{width:18px;height:18px}
.fold__note,.fold__doc{margin:0;padding:10px 0 12px;font-size:.9375rem;line-height:1.45;overflow-wrap:anywhere}
.fold__note{border-top:1px solid var(--hair)}
.fold__doc{padding-top:0}
.card-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.card-actions .btn{min-height:44px;padding:0 14px;white-space:normal}
/* Without JavaScript, the fixed example's "Wrong or missing" opens its form as a plain disclosure. */
.report-fold{flex:1 1 100%}
.report-fold>summary{list-style:none}
.report-fold>summary::-webkit-details-marker{display:none}
.tryrows .row__title{font-size:1.0625rem;letter-spacing:-.01em}
@media (min-width:1024px){
  .askdock{position:static;margin:0 0 28px;padding:0;background:transparent;border:0}
  .askdock>*{max-width:none}
  .ask-out{padding-bottom:0}
  .answer__title{font-size:2.25rem}
  .step__thumb{width:112px}
}

/* A list split by a plain heading (dates: passed, next 30 days, later). */
.grouphead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:28px 0 10px;font:700 .875rem/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-2)}
.grouphead:first-of-type{margin-top:0}
.grouphead .count{color:var(--accent)}
.step>span:last-child>svg.i{margin-top:6px}

/* Programmatic focus lands on headings after a screen change. They are not controls, so no ring. */
h1[tabindex="-1"]:focus{outline:0}
.tagline+.spec{margin-top:18px}
/* Pieces shown on the design system page */
.askdock.askdock--specimen{position:static;padding:0;background:transparent;border:0}
.menu__panel.menu__panel--specimen{position:static;max-height:none;box-shadow:none;border-bottom:0}

.empty--plain{padding:0;background:transparent;border:0}
.block--first{margin-top:0}
.settings-row .cluster{flex:none;flex-wrap:nowrap}
/* Keyboard focus never lands under the sticky top bar or the docked ask field. */
@media (max-width:1023px){html{scroll-padding-top:76px;scroll-padding-bottom:168px}}

/* Public demo only: parts the interactive demo adds on top of the app shell. */

/* With JavaScript on, the interactive view replaces the static example. Without it, the static example stays. */
.js #demo-static{display:none}
html:not(.js) .js-only{display:none}


.note svg.i{display:inline-block;width:16px;height:16px;vertical-align:-3px;margin-right:4px}

/* Picture zoom */
.zoom{overflow:auto;max-height:70vh;background:var(--surface-alt)}
.zoom__in{width:100%}
.zoom--2 .zoom__in{width:170%}
.zoom--3 .zoom__in{width:260%}
.zoomtools{display:flex;align-items:center;gap:10px;padding:10px 12px;border-top:2px solid var(--line)}
.zoomtools .btn{min-width:48px;padding:0 12px}
.zoomtools .state{min-width:48px;text-align:left}

/* Source page stand-in */
.page{padding:20px 18px 24px;background:var(--surface);border:2px solid var(--line);box-shadow:6px 6px 0 var(--shadow-accent)}
.page__head{display:flex;justify-content:space-between;gap:12px;padding-bottom:12px;margin-bottom:16px;border-bottom:1px solid var(--line);font:600 .875rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}
.page__line{display:block;height:10px;margin:12px 0;background:var(--fill-muted)}
.page__line--short{width:62%}
.page__hit{margin:18px 0;padding:12px 14px;background:var(--surface-alt);border-left:8px solid var(--active);font-weight:600;line-height:1.45}

/* Seasonal plan: each item lists the records behind it */
.plan{margin:16px 0 0;padding:0;list-style:none;border-top:2px solid var(--line)}
.plan>li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;padding:16px 12px 8px;border-bottom:1px solid var(--line)}
.plan .row__title{margin:0}
.linklist{margin:10px 0 0;padding:0;list-style:none;border-top:1px solid var(--hair)}
.linklist a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;min-height:48px;padding:8px 0;border-bottom:1px solid var(--hair);color:var(--text);text-decoration:none;font-weight:600;font-size:1rem;line-height:1.35}
.linklist li:last-child a{border-bottom:0}
.linklist a:hover{color:var(--accent)}
.linklist small{display:block;font-size:.875rem;font-weight:400;color:var(--text-2)}

.handoff{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 20px;margin-top:28px;padding-top:16px;border-top:2px solid var(--line);font-weight:600}
.chart .tag{margin-left:6px;vertical-align:middle}
#main:focus{outline:0}
.handoff--after{margin-top:32px;font-size:1rem}
.step__thumb img,.zoom__in img{display:block;width:100%;height:auto}
.navbar__foot .link{display:inline-flex;align-items:center;min-height:44px}
/* Live presentation of preset answers (simulated). Reduced motion skips all of it in script. */
.player{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:12px 0}
.player .btn{min-height:44px}
.player__count{font:600 .875rem/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-2)}
.asked__q [data-typed].is-typing::after{content:"";display:inline-block;width:2px;height:1em;margin-left:2px;vertical-align:-2px;background:currentColor;animation:caret .8s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.checking{display:flex;gap:10px;align-items:flex-start;margin-top:16px;padding:14px 16px;border:2px dashed var(--line);color:var(--text)}
.checking b{display:block;font:600 .875rem/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-2);margin-bottom:4px}
.checking .i{animation:pulse 1s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}
.reveal{opacity:0;transform:translateY(8px);visibility:hidden;transition:opacity .35s ease,transform .35s ease,visibility 0s .35s}
.reveal.is-in{opacity:1;transform:none;visibility:visible;transition:opacity .35s ease,transform .35s ease,visibility 0s}
.plainlist{margin:8px 0 0;padding-left:20px;line-height:1.5}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1;transform:none;visibility:visible;transition:none}.checking .i,.asked__q [data-typed].is-typing::after{animation:none}}
.player{flex-wrap:nowrap}.player .btn{padding:0 12px;gap:6px}.player__count{margin-left:auto;white-space:nowrap}
/* Narrow phones (320 to 375 CSS px): the showcase bar overflowed by up to 57px. Tighten the buttons, keep their labels on one line, and let the count drop to a second line when it has to. */
@media (max-width:400px){.player{flex-wrap:wrap;gap:6px}.player .btn{padding:0 10px;white-space:nowrap}}

/* L-32 type scale: body 17px mobile, 18px desktop; nothing under 14px; 13px only for tracked uppercase labels */
body,body.app,.t-body{font-size:1.0625rem;line-height:1.6}
@media (min-width:701px){body,body.app,.t-body{font-size:1.125rem}}
/* L-32 icon set: one line family, 1.6px stroke, round caps and joins, forest */
svg.i{stroke-linecap:round!important;stroke-linejoin:round!important;stroke-width:1.6px!important}
svg.i *{vector-effect:non-scaling-stroke}
.row__icon svg.i,.navlink svg.i,.menu__link svg.i,.alert--info>svg.i,.row__end svg.i,.btn--quiet svg.i{color:var(--accent)}
.navbar__brand img,.appbar__ctx img{border-radius:9px;box-shadow:0 0 0 1px rgba(245,243,236,.32)}
.photo figcaption{color:#4f5d62}
[data-theme="dark"] .photo figcaption{color:var(--text-2)}
/* L-32 pass 2: Wisdom Systems icon set (cube angles, gold top-face diamond) */
svg.i .g{fill:var(--signal);stroke:none!important}
svg.i .f{fill:currentColor;stroke:none!important}

/* Pacific blue again (2026-10-20). The desktop sidebar is ink, so its icons use the light Pacific, never the dark one. */
@media (min-width:1024px){.navbar .navlink .i{color:var(--pacific-light)}.navbar .navlink[aria-current="page"] .i{color:var(--paper)}}
/* A photo opens from its button in a popup, never inline (2026-10-20). */
.photo-dialog{width:min(92vw,960px);max-width:none;padding:0;border:0;border-radius:14px;background:var(--surface);color:var(--text);box-shadow:0 24px 60px rgba(10,18,21,.45)}
.photo-dialog::backdrop{background:rgba(10,18,21,.72)}
.photo-dialog__bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 6px 6px 16px;font-weight:600}
.photo-dialog img{display:block;width:100%;height:auto;max-height:72vh;object-fit:contain;background:#0a1215}
.photo-dialog__note{margin:0;padding:12px 16px 16px;font-size:.9375rem;line-height:1.45;color:var(--text-2)}
/* 2026-10-21: "Wrong or missing" and "Report missing info" open the report form under the card (a mock: nothing is sent) */
.report-mock{margin-top:14px;padding:14px;border:2px solid var(--line);background:var(--surface)}
.report-mock__title{margin:0 0 10px;font-weight:700;font-size:1rem;line-height:1.4}
.report-mock__title:focus{outline:none}
.report-mock__title:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.report-mock__box{min-height:88px;margin:0 0 12px;padding:10px 12px;border:2px dashed var(--line);background:var(--bg);color:var(--text-2);font-size:1rem;line-height:1.45}
.report-mock__note{margin:12px 0 0;font-size:1rem;line-height:1.45;color:var(--text-2)}

/* October 22, 2026: the answer card is the app's valve card, drawn inline (Dylan: "make it the template we use"). The same
   template and words as the homepage cards: the title, the first thing to do (amber; red on the gas card's hazard line),
   one row per supply with its valve tiles (tag number above COLD, HOT or RETURN), where the valves are, the plain note
   lines (the app's ans-note: the safety and impact lines of the card on main, word for word), the call block (the green
   button and Other contacts; display only: the numbers are invented and never dial), Source (a fold with the source
   text and View), the confirm line, then Photo and Wrong or missing. Tile colors, type scale and spacing follow the approved mockup, in the app's own system font stack.
   Light and low-light both keep every text pair at 4.5:1 or more. */
.vc{--vc-bg:#fff;--vc-ink:#13212a;--vc-muted:#47575f;--vc-line:#e2e8eb;--vc-edge:#d5dde1;--vc-accent:#0a6c88;--vc-btn-edge:#6c7c81;
  --vc-first-bg:#fdf3e2;--vc-first-ink:#7a4400;--vc-first-bar:#d48a1a;--vc-stop-bg:#fdecea;--vc-stop-ink:#9b1c13;--vc-stop-bar:#c62828;
  --vc-cold:#1559b7;--vc-hot:#c62828;--vc-ret:#b45309;--vc-gas:#f2c230;--vc-date:#33444a;--vc-call:#17784a;
  container-type:inline-size;min-width:0;margin:0;padding:18px 18px 14px;border:1px solid var(--vc-edge);border-radius:22px;background:var(--vc-bg);color:var(--vc-ink);
  box-shadow:0 1px 2px rgba(19,33,42,.05),0 12px 28px -14px rgba(19,33,42,.28);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:16px;line-height:1.4}
[data-theme="dark"] .vc{--vc-bg:#15212a;--vc-ink:#e9f1f4;--vc-muted:#a9bcc4;--vc-line:#2b3d47;--vc-edge:#3a4f59;--vc-accent:#4db2cf;--vc-btn-edge:#8fa3a8;
  --vc-first-bg:#3a2a12;--vc-first-ink:#f5c27a;--vc-first-bar:#f0a546;--vc-stop-bg:#3d1714;--vc-stop-ink:#ffb4a8;--vc-stop-bar:#ef5350;--vc-date:#4a5f68;
  box-shadow:0 1px 2px rgba(0,0,0,.3),0 14px 30px -16px rgba(0,0,0,.7)}
.vc .vc-title{margin:0;font-family:inherit;font-size:26px;font-weight:800;line-height:1.12;letter-spacing:-.01em;color:var(--vc-ink)}
.vc-first{display:flex;gap:8px;align-items:flex-start;margin:12px 0 4px;padding:9px 12px;border-left:4px solid var(--vc-first-bar);border-radius:10px;
  background:var(--vc-first-bg);color:var(--vc-first-ink);font-size:16px;font-weight:700;line-height:1.4}
.vc-first--stop{border-left-color:var(--vc-stop-bar);background:var(--vc-stop-bg);color:var(--vc-stop-ink)}
.vc-first svg.i{width:20px;height:20px;margin-top:1px;color:currentColor}
.vc-first svg.i .g{fill:currentColor}
.vc-call svg.i .g{display:none}
.vc-list{list-style:none;margin:4px 0 0;padding:0}
.vc-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 12px;padding:12px 0;border-bottom:1px solid var(--vc-line)}
.vc-what{display:grid;gap:2px;flex:1 1 140px;min-width:0}
.vc-label{font-size:17px;font-weight:800;line-height:1.25;overflow-wrap:anywhere}
.vc-units{font-size:14px;line-height:1.4;color:var(--vc-muted);overflow-wrap:anywhere}
.vc-text{font-size:16px;font-weight:500;line-height:1.45;overflow-wrap:anywhere}
.vc-rule{flex-basis:100%;font-size:14px;font-weight:700;line-height:1.4;color:var(--vc-stop-ink)}
.vc-tags{display:flex;flex-wrap:wrap;gap:7px}
.vc-tag{display:grid;place-content:center;justify-items:center;min-width:56px;height:58px;padding:0 7px;border-radius:13px;background:var(--vc-date);color:#fff;
  text-align:center;box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)}
[data-theme="dark"] .vc-tag{box-shadow:inset 0 -3px 0 rgba(0,0,0,.25),0 0 0 1px rgba(255,255,255,.16)}
.vc-tag b{font-size:24px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.vc-tag small{margin-top:4px;font-size:12px;font-weight:700;line-height:1;letter-spacing:.06em;text-transform:uppercase}
.vc-tag.cold{background:var(--vc-cold)}
.vc-tag.hot{background:var(--vc-hot)}
.vc-tag.ret{background:var(--vc-ret)}
.vc-tag.gas{background:var(--vc-gas);color:#13212a}
.vc-loc{flex-wrap:nowrap;justify-content:flex-start;gap:12px;border-bottom:0;font-size:16px;font-weight:600;line-height:1.4}
.vc-loc svg.i{width:22px;height:22px;color:var(--vc-accent)}
/* A note line is the app's ans-note: plain ink text under the rows and the location, never a colored box. */
.vc-note{margin:6px 0 0;font-size:.9rem;line-height:1.45;color:var(--vc-ink);overflow-wrap:anywhere}
/* The call block (Dylan, October 22, 2026: in a leak the first tap does exactly what the button says). The green button
   is the first contact's own. In the app it dials; here it never dials and shows that number under it, with "Shown for
   the demo; it does not dial." "Other contacts (N)" is a quiet row that opens the rest. Both are native details: they
   work without script and from the keyboard; demo.js adds aria-expanded and a polite announcement. No number shows
   while both are closed, and a number is plain text, never a link. */
.vc-note+.vc-call{margin-top:12px}
.vc-call{margin:6px 0 0}
.vc-call>summary{display:flex;align-items:center;justify-content:center;gap:12px;min-height:58px;padding:8px 20px;border-radius:999px;
  background:var(--vc-call);color:#fff;line-height:1.25;text-align:center;cursor:pointer;list-style:none}
.vc-call>summary::-webkit-details-marker{display:none}
.vc-call>summary:hover{background:#13663f}
.vc-call>summary:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.vc-call>summary svg.i{flex:none;width:20px;height:20px;color:#fff}
.vc-call-text{min-width:0}
.vc-call-text b{display:block;font-size:17px;font-weight:800}
.vc-call-text small{display:block;margin-top:1px;font-size:14px;font-weight:600}
.vc-call-reveal{margin:8px 0 0;padding:10px 14px 12px;border:1px solid var(--vc-edge);border-radius:16px;background:var(--vc-bg);text-align:center}
.vc-call-reveal .vc-num{display:block;margin:0;font-size:24px;font-weight:800;line-height:1.25}
.vc-call-reveal .vc-call-note{margin:4px 0 0}
.vc-others{margin:4px 0 0}
.vc-others>summary{display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 10px;border-radius:12px;
  font-size:15px;font-weight:700;color:var(--vc-accent);cursor:pointer;list-style:none}
.vc-others>summary::-webkit-details-marker{display:none}
.vc-others>summary:hover{color:var(--vc-ink)}
.vc-others>summary:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.vc-others>summary svg.i{width:16px;height:16px;color:inherit;transform:rotate(90deg);transition:transform .15s}
.vc-others[open]>summary svg.i{transform:rotate(-90deg)}
.vc-call-list{list-style:none;margin:0;padding:2px 16px;border:1px solid var(--vc-edge);border-radius:16px;background:var(--vc-bg)}
.vc-call-list li{display:grid;gap:2px;padding:10px 0;border-bottom:1px solid var(--vc-line)}
.vc-call-list li:last-child{border-bottom:0}
.vc-who{font-size:15px;line-height:1.4;color:var(--vc-ink);overflow-wrap:anywhere}
.vc-who b{font-weight:800}
.vc-who small{margin-left:6px;font-size:14px;color:var(--vc-muted)}
.vc-num{font-size:17px;font-weight:700;line-height:1.3;font-variant-numeric:tabular-nums;color:var(--vc-ink);text-decoration:none;white-space:nowrap}
.vc-call-note{margin:8px 2px 0;font-size:13px;line-height:1.4;color:var(--vc-muted)}
/* Source is a fold, like the app's (Dylan: "Source could just remain under view if that makes it cleaner"). It opens to
   the source text, word for word, and View. */
.vc-src{margin:8px 0 0;font-size:14px;line-height:1.4;color:var(--vc-muted)}
.vc-src>summary{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 6px 0 2px;border-radius:6px;font-size:15px;font-weight:700;
  color:var(--vc-muted);cursor:pointer;list-style:none}
.vc-src>summary::-webkit-details-marker{display:none}
.vc-src>summary:hover{color:var(--vc-ink)}
.vc-src>summary:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.vc-src>summary svg.i{width:16px;height:16px;color:inherit;transition:transform .15s}
.vc-src[open]>summary svg.i{transform:rotate(90deg)}
.vc-src-body{display:flex;align-items:center;justify-content:space-between;gap:2px 14px;margin:0 0 4px 2px}
.vc-src-body>span{min-width:0}
@media (prefers-reduced-motion:reduce){.vc-others>summary svg.i,.vc-src>summary svg.i{transition:none}}
.vc-view{display:inline-flex;align-items:center;flex:none;min-height:44px;padding:0 2px;color:var(--vc-accent);font-weight:700;
  text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.vc-view:hover{color:var(--vc-ink)}
.vc-confirm{display:flex;gap:8px;align-items:flex-start;margin:4px 0 0;padding-top:12px;border-top:1px solid var(--vc-line);font-size:15px;font-weight:600;line-height:1.4}
.vc-confirm svg.i{width:20px;height:20px;color:var(--vc-accent)}
.vc .card-actions{margin-top:12px}
.vc .card-actions .btn,.vc .report-fold>summary.btn,.vc .report-mock .btn{min-height:44px;padding:0 16px;border:1px solid var(--vc-btn-edge);border-radius:999px;background:var(--vc-bg);color:var(--vc-ink);
  box-shadow:none;font-family:inherit;font-size:15px;font-weight:600;letter-spacing:0;text-transform:none}
.vc .card-actions .btn:hover{background:var(--vc-line)}
.vc .card-actions .btn svg.i{width:18px;height:18px;color:var(--vc-accent)}
.vc .report-mock .btn--primary{border-color:var(--vc-accent);background:var(--vc-accent);color:var(--vc-bg)}
.vc .report-mock{margin-top:12px;padding:14px;border:1px solid var(--vc-edge);border-radius:14px;background:var(--vc-bg);font-family:inherit}
.vc .report-mock__box{border:1px dashed var(--vc-btn-edge);border-radius:10px;background:transparent;color:var(--vc-muted)}
.vc .report-mock__note{color:var(--vc-muted)}
.vc :focus-visible{outline:3px solid var(--focus);outline-offset:2px}
/* A narrow card (a phone) puts each supply's tiles under its label, the same way on every row. */
@container (max-width:360px){.vc-row:not(.vc-row--date) .vc-what{flex-basis:100%}}
/* A dates row puts its date tile first, like a calendar badge, and keeps it beside the record line on a phone. */
.vc-row--date{flex-wrap:nowrap;justify-content:flex-start;align-items:flex-start}
.vc-row--date .vc-tags{order:-1}
.vc-row--date .vc-what{flex:1 1 auto}
@media (min-width:768px){.vc{max-width:600px;padding:22px 24px 18px}.vc .vc-title{font-size:28px}}
/* The desktop rail's brand line fits on one line. */
@media (min-width:1024px){.navbar__brand{gap:10px;padding-inline:18px}.navbar__brand small{font-size:.8125rem;letter-spacing:.04em;white-space:nowrap}}

/* The public demo has no docked ask field, so the answer needs no room kept for one under it. */
#demo-out.ask-out{padding-bottom:0}

/* Narrow phones (320 to 400 CSS px): the top bar keeps "Demo · No live AI" whole (the menu shows its icon only, its name
   stays for screen readers), the fictional strip breaks at its dot rather than inside "field-approved", and a call
   button's role never splits across lines. */
.appbar__ctx>span{min-width:0}
.strip{text-wrap:balance}
.vc-call-text small{white-space:nowrap}
@media (max-width:400px){
  .menu>summary{padding:0 11px}
  .menu>summary span{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
}
@media (max-width:360px){.appbar__sub{font-size:.8125rem;letter-spacing:.04em}}

/* The Cubestead app icon (the icon on team members' phones, from the app's main branch): rounded like a phone icon, with a
   hairline edge so it holds its shape on the ink bar. */
.appbar__ctx img.app-icon,.navbar__brand img.app-icon{border-radius:22.5%;box-shadow:0 0 0 1px rgba(245,243,236,.3)}

/* October 22, 2026 contrast pass: muted text (--steel) is 7.1:1 on paper (was #55666c, 5.4:1); the current menu item's
   icon reads on its ink (light) or paper (low-light) fill (was 2.7:1 and 1.5:1). */
.menu__link[aria-current="page"] svg.i{color:var(--pacific-light)}
[data-theme="dark"] .menu__link[aria-current="page"] svg.i{color:var(--pacific)}
h1.asked{font-family:inherit;font-weight:inherit;text-wrap:wrap}
.doc-page p+p{margin-top:.6em}