/* ============================================================================
 * Crane Drawings — DESIGN SYSTEM v6 "Industrial iOS"  (foundation wave)
 * ----------------------------------------------------------------------------
 * Loaded AFTER styles.css. Single source of truth for the v6 token system and
 * the component inventory of plan §7.2. Screen-specific layout belongs in
 * styles/<screen>-v6.css (one owner per file) and must compose these tokens —
 * never redefine them.
 *
 * Contract:
 *   • Every legacy token name keeps its meaning, so the ~1000 existing lines
 *     of styles.css keep working: --bg --surface --surface-2 --surface-3 --txt
 *     --mut --dim --line --hair --acc --acc-ink --acc-t --ok --ok-ink --danger
 *     --danger-ink --fs-12 --fs-13 --fs-15 --fs-17 --fs-20 --r-xs --r-s --r-m
 *     --r-l --r-pill --r-btn --r-input --r-card --sp1..--sp7 --tap --topbar-h
 *     --tabbar-h --dock-h --ease --sh-1 --sh-2 --hair-2 --glass-*.
 *   • Anti-goals (plan §7.5): no decorative gradients, no shadow soup, no glass
 *     on content, no spinners, one accent surface per screen, no font-size
 *     below 12px, no 100vh (dvh only), nothing hides a safety line.
 *   • Amber = action only. Green = verified/ok only. Red = danger only.
 * ==========================================================================*/

/* ==========================================================================
 * 6.1  TOKENS
 * ==========================================================================*/
:root{
  color-scheme:light;

  /* ---- amber ramp (the one accent) ------------------------------------- */
  --amber-50:#FFF8E6; --amber-100:#FDEEBF; --amber-200:#FBDC85; --amber-300:#F8CB52;
  --amber-400:#F6BE1F; --amber-500:#F5B301; --amber-600:#D99E00; --amber-700:#A87A00;
  --amber-800:#8A5E00; --amber-900:#5C3E00;
  --on-accent:#1A1405;                      /* ink that sits on amber */

  /* ---- neutrals --------------------------------------------------------- */
  --n-0:#FFFFFF;  --n-25:#FAFAFC;  --n-50:#F2F2F7;  --n-100:#E9E9EF;
  --n-200:#DCDCE3; --n-300:#C7C7CE; --n-400:#A8A8B0; --n-500:#8A8A92;
  --n-600:#6B6B73; --n-700:#4A4A52; --n-800:#2C2C31; --n-900:#0A0A0B;

  /* ---- semantic (state only, never decoration) -------------------------- */
  --ok:#0E7A4C;      --ok-ink:#0C6B42;
  --warn:#B45309;    --warn-ink:#8A3F06;
  --danger:#C9302C;  --danger-ink:#B12F2F;

  /* ---- legacy aliases (meaning preserved) ------------------------------- */
  --bg:var(--n-50);
  --surface:var(--n-0);
  --surface-2:var(--n-50);
  --surface-3:var(--n-100);
  --txt:var(--n-900);
  --mut:#5F5F66;                            /* secondary text — 5.7:1 on canvas */
  --dim:#6B6B70;                            /* placeholders — 4.75:1 on canvas */
  --hair:rgba(60,60,67,.12);
  --line:rgba(60,60,67,.29);
  --hair-2:rgba(60,60,67,.16);
  --ink-2:#3C3C43;                          /* v5 legacy body-ink alias */
  --acc:var(--amber-500);
  --acc-strong:var(--amber-600);
  --acc-ink:var(--amber-800);               /* readable amber ink on canvas (5.1:1) */
  --acc-t:var(--on-accent);
  --acc-weak:color-mix(in srgb,var(--acc) 14%,var(--surface));
  --link:var(--txt);                        /* links are ink; amber is action */

  /* ---- fonts ------------------------------------------------------------ */
  --f:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --f-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  /* ---- type scale ------------------------------------------------------- */
  --fs-12:12px; --fs-13:13px; --fs-15:15px; --fs-17:17px; --fs-20:20px;
  --fs-22:22px; --fs-24:24px; --fs-28:28px; --fs-34:34px;
  --lh-tight:1.12; --lh-snug:1.28; --lh-body:1.45;
  /* Type roles. NB: --t-micro is 11px by spec and is legal only on >=44px
   * targets; v6 ships no selector that applies it, because the live audit
   * floors computed text at 12px. Use --t-cap for 12px labels. */
  --t-micro:11px/16px; --t-cap:12px/16px; --t-foot:13px/18px; --t-body:15px/22px;
  --t-body-lg:17px/25px; --t-title:20px/26px; --t-h2:24px/30px; --t-h1:28px/34px;
  --t-display:34px/38px;
  --t-num:tabular-nums; --t-mono:var(--f-mono);

  /* ---- spacing (4pt base, 8pt rhythm) ----------------------------------- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:40px; --s8:56px;
  --sp1:var(--s1); --sp2:var(--s2); --sp3:var(--s3); --sp4:var(--s4);
  --sp5:var(--s5); --sp6:var(--s6); --sp7:var(--s7);
  --gutter:var(--s4);                       /* ONE page gutter, everywhere */

  /* ---- radii (child radius = parent radius − padding) ------------------- */
  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:var(--r-lg); --r-pill:999px;
  --r-btn:var(--r-sm); --r-input:var(--r-sm); --r-card:var(--r-md);
  --r-s:var(--r-sm); --r-m:var(--r-md); --r-l:var(--r-lg);

  /* ---- elevation ladder (content surfaces) ------------------------------ */
  --e1:0 1px 2px rgba(0,0,0,.06),0 0 0 .5px rgba(0,0,0,.04);
  --e2:0 2px 8px rgba(0,0,0,.08),0 0 0 .5px rgba(0,0,0,.05);
  --e3:0 8px 24px rgba(0,0,0,.12),0 0 0 .5px rgba(0,0,0,.06);
  --e4:0 16px 48px rgba(0,0,0,.18);
  --sh-1:var(--e1); --sh-2:var(--e3);

  /* ---- motion ----------------------------------------------------------- */
  --dur-1:120ms; --dur-2:200ms; --dur-3:320ms; --dur-4:480ms;
  --ease:cubic-bezier(.32,.72,0,1);
  --ease-out:cubic-bezier(.2,.8,.2,1);
  --ease-in:cubic-bezier(.4,0,1,1);
  --spring:cubic-bezier(.34,1.4,.64,1);

  /* ---- chrome translucency (the ONLY glass in v6) ----------------------- */
  --glass-blur:20px; --glass-sat:180%;
  --glass-bg:rgba(255,255,255,.78);
  --glass-bg-strong:rgba(255,255,255,.72);
  --glass-hi:inset 0 .5px 0 rgba(255,255,255,.9);
  --glass-hi-soft:inset 0 .5px 0 rgba(255,255,255,.5);
  --glass-edge:var(--hair);
  --glass-fill:var(--surface);
  --glass-fill-strong:rgba(255,255,255,.72);
  --glass-shadow:var(--e2);
  --glass-shadow-sm:none;

  /* ---- blueprint motif -------------------------------------------------- */
  --grid-line:color-mix(in srgb,var(--txt) 4%,transparent);
  --grid-size:24px;

  /* ---- metrics (legacy) ------------------------------------------------- */
  --tap:48px; --topbar-h:56px; --tabbar-h:56px; --dock-h:120px;
}

/* Explicit dark override only — light is the app default for everyone. */
html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#000000;
  --surface:#141416; --surface-2:#1E1E21; --surface-3:#2A2A2E;
  --txt:#F2F2F7; --mut:#9A9AA2; --dim:#7C7C85;
  --hair:rgba(255,255,255,.09); --line:rgba(255,255,255,.16);
  --hair-2:rgba(255,255,255,.16); --ink-2:#D8D8DE;
  --acc-ink:var(--amber-300);
  --acc-weak:color-mix(in srgb,var(--acc) 20%,var(--surface));
  --ok:#30D158; --ok-ink:#4BD598;
  --warn:#FFB340; --warn-ink:#FFC46B;
  --danger:#FF453A; --danger-ink:#FF8A8A;
  /* dark elevation = inset top highlight (--e1/--e2) + deep shadow (--e3/--e4) */
  --e1:inset 0 .5px 0 rgba(255,255,255,.05);
  --e2:inset 0 .5px 0 rgba(255,255,255,.06),0 2px 8px rgba(0,0,0,.5);
  --e3:0 8px 24px rgba(0,0,0,.6),0 0 0 .5px rgba(255,255,255,.07);
  --e4:0 16px 48px rgba(0,0,0,.72);
  --sh-1:var(--e1); --sh-2:var(--e3);
  --glass-bg:rgba(20,20,22,.72);
  --glass-bg-strong:rgba(20,20,22,.66);
  --glass-fill-strong:rgba(20,20,22,.66);
  --glass-hi:inset 0 .5px 0 rgba(255,255,255,.08);
  --glass-hi-soft:inset 0 .5px 0 rgba(255,255,255,.05);
  --glass-edge:rgba(255,255,255,.10);
}

/* ==========================================================================
 * 6.2  BASE + TYPE UTILITIES
 * ==========================================================================*/
body{background:var(--bg);color:var(--txt);font-size:15px;line-height:var(--lh-body);
  letter-spacing:-.003em}
/* Native-surface mechanics (PWA audit D7): a downward drag at the top of a
 * thread must not trigger Chrome's pull-to-refresh and reload the app, and
 * touch-action:manipulation removes the 300ms double-tap-zoom delay while
 * keeping pinch-zoom available. */
html,body{overscroll-behavior-y:contain}
body{touch-action:manipulation}
/* Engineer-read values: counts, sheet numbers, ratings, device tags. */
.tabular,.num,[data-num]{font-variant-numeric:tabular-nums}
.mono,.tag,.ref,.cite,code,kbd,samp{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
/* Type-role utilities — screens compose these instead of ad-hoc px. */
.t-cap{font-size:12px;line-height:16px;font-weight:600;letter-spacing:.01em}
.t-foot{font-size:13px;line-height:18px;font-weight:400}
.t-body{font-size:15px;line-height:22px;font-weight:400}
.t-body-lg{font-size:17px;line-height:25px;font-weight:400;letter-spacing:-.01em}
.t-title{font-size:20px;line-height:26px;font-weight:600;letter-spacing:-.015em}
.t-h2{font-size:24px;line-height:30px;font-weight:700;letter-spacing:-.02em}
.t-h1{font-size:28px;line-height:34px;font-weight:700;letter-spacing:-.022em}
.t-display{font-size:34px;line-height:38px;font-weight:700;letter-spacing:-.024em}
.sub{font-size:13px;line-height:18px;color:var(--mut)}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:var(--r-xs)}
::selection{background:var(--acc-weak);color:var(--txt)}
/* Highlight = ONE emphasis (the wash). Ink stays ink, weight unchanged. */
mark{background:var(--amber-100);color:var(--n-900);font-weight:inherit;
  border-radius:4px;padding:0 2px}
html[data-theme="dark"] mark{background:var(--amber-900);color:var(--amber-100)}

/* ==========================================================================
 * 6.3  CHROME  (topbar · large title · tab bar · dock · toast · reload bar)
 * ==========================================================================*/
#topbar{
  position:sticky;top:0;z-index:10;
  display:flex;align-items:center;gap:var(--s1);
  min-height:var(--topbar-h);
  padding:calc(4px + env(safe-area-inset-top)) var(--s3) 4px;
  background:var(--surface);border-bottom:1px solid var(--hair);
}
#crumb{font-size:17px;line-height:22px;font-weight:600;letter-spacing:-.015em;
  flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:opacity var(--dur-2) var(--ease-out)}
#crumb:focus{outline:none}
/* Large-title pattern: the big title scrolls away, the bar title fades in.
 * `html.lts` is set by the shell; without JS the crumb simply stays visible. */
html.lts:not(.scrolled) #crumb{opacity:0}
body.inchat #ltbar{display:none}
body.inchat #crumb{opacity:1}
#ltbar{padding:var(--s2) var(--gutter) 0}
#lttitle{margin:0;font-size:34px;line-height:38px;font-weight:700;letter-spacing:-.024em;
  overflow-wrap:break-word}
#ltsub{font-size:13px;line-height:18px;color:var(--mut);margin-top:var(--s1);
  font-variant-numeric:tabular-nums}
#ltsub:empty{display:none}
/* Back chevron + trailing chrome actions: 44pt bare glyph, no pill outline. */
#back,#themebtn,#setbtn,#chatmore{flex:none;min-width:44px;min-height:44px;padding:0;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:0;border-radius:var(--r-sm);
  color:var(--txt);cursor:pointer;
  transition:transform var(--dur-1) var(--spring),background var(--dur-1) var(--ease)}
#back svg,#themebtn svg,#setbtn svg,#chatmore svg{width:22px;height:22px}
#back{color:var(--acc-ink)}
#back[hidden],#chatmore[hidden]{display:none}
#back:active,#themebtn:active,#setbtn:active,#chatmore:active{
  transform:scale(.97);background:var(--surface-2)}
#netdot{display:none;width:9px;height:9px;border-radius:50%;flex:none;
  background:var(--danger);box-shadow:0 0 0 3px color-mix(in srgb,var(--danger) 18%,transparent)}
#netdot.off{display:block}
.nettxt{display:none}
.nettxt.show{display:inline-block;background:color-mix(in srgb,var(--danger) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--danger) 45%,transparent);color:var(--danger-ink);
  border-radius:var(--r-pill);padding:3px 10px;font-size:12px;font-weight:600;white-space:nowrap}

/* Tab bar: Home · Trace · Ask, 49pt + safe area, amber tint on icon AND label. */
#tabbar{
  position:fixed;left:50%;transform:translateX(-50%);width:100%;max-width:760px;
  bottom:0;z-index:25;display:flex;gap:0;justify-content:stretch;
  padding:var(--s1) var(--s2) calc(var(--s1) + env(safe-area-inset-bottom));
  background:var(--surface);border-top:1px solid var(--hair);
}
#tabbar a{flex:1 1 0;min-width:0;position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-height:var(--tap);padding:var(--s1) 0;
  color:var(--mut);text-decoration:none;border-radius:var(--r-sm);
  font-size:12px;line-height:16px;font-weight:600;letter-spacing:.01em;
  transition:transform var(--dur-1) var(--spring),color var(--dur-2) var(--ease)}
#tabbar a svg{width:24px;height:24px}
#tabbar a[aria-current="page"]{color:var(--acc-ink);font-weight:700}
#tabbar a[aria-current="page"] svg{stroke-width:2.2}
#tabbar a[aria-current="page"]::before{content:none;display:none} /* no floating dash */
#tabbar a:active{transform:scale(.97);background:var(--surface-2)}

#toast{position:fixed;left:50%;transform:translateX(-50%) translateY(16px);
  bottom:calc(var(--tabbar-h) + var(--s5) + env(safe-area-inset-bottom));
  background:var(--txt);color:var(--bg);
  border:0;padding:12px 18px;border-radius:var(--r-md);
  font-size:15px;font-weight:600;opacity:0;pointer-events:none;max-width:92vw;
  box-shadow:var(--e3);z-index:45;
  transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out)}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#toast.has-actions{pointer-events:auto;display:flex;align-items:center;gap:var(--s3)}
.toastbtn{flex:none;background:var(--acc);color:var(--acc-t);border:1px solid transparent;
  border-radius:var(--r-sm);font-weight:700;font-size:15px;
  min-height:44px;min-width:64px;padding:10px 16px;cursor:pointer}
body.inchat #toast,body.inchat #chatfab{
  bottom:calc(var(--dock-h) + var(--s4) + env(safe-area-inset-bottom))}

/* Update banner: in flow UNDER the chrome — it used to be position:fixed;top:0
 * and covered the topbar (measured coversTopbar=true). */
#reloadbar{
  position:sticky;top:calc(var(--topbar-h) + env(safe-area-inset-top));z-index:9;
  display:flex;gap:var(--s2);align-items:center;
  background:var(--amber-50);color:var(--amber-900);
  border-bottom:1px solid color-mix(in srgb,var(--amber-600) 35%,transparent);
  font-size:13px;line-height:18px;font-weight:600;
  padding:var(--s2) var(--gutter);
}
#reloadbar[hidden]{display:none}
#reloadbar button{background:var(--surface);color:var(--amber-900);
  border:1px solid var(--hair-2);border-radius:var(--r-sm);
  font-weight:700;font-size:13px;padding:0 var(--s3);min-height:44px;cursor:pointer;
  transition:transform var(--dur-1) var(--spring)}
#reloadbar button:active{transform:scale(.97)}
#reloadbar button:last-child{background:transparent;border-color:transparent;
  padding:0 var(--s2);min-width:44px;color:var(--amber-900)}
html[data-theme="dark"] #reloadbar{background:var(--amber-900);color:var(--amber-100);
  border-bottom-color:color-mix(in srgb,var(--amber-300) 30%,transparent)}
html[data-theme="dark"] #reloadbar button{background:transparent;color:var(--amber-100);
  border-color:rgba(255,255,255,.18)}

/* Floating layers (menus/popovers — the only non-chrome glass allowed). */
.chatmenu{position:fixed;z-index:45;
  top:calc(var(--topbar-h) + env(safe-area-inset-top) + 4px);
  right:max(var(--s4),calc(50vw - 380px + var(--s4)));
  width:min(260px,calc(100vw - 32px));
  background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-md);
  box-shadow:var(--e3);padding:var(--s1)}
.chatmenu[hidden]{display:none}
.qoverlay{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-md);
  box-shadow:var(--e3);padding:10px var(--s3)}
.ovsec{font-size:12px;line-height:16px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--mut);margin:var(--s3) 0 var(--s2)}
.ovhead{display:flex;align-items:center;justify-content:space-between;gap:var(--s2)}
.ovhead .ovsec{margin:0}
.ovhead .chip{min-height:44px;padding:6px var(--s3)}
#qclose{min-width:44px;min-height:44px;border-radius:50%;border:1px solid var(--line);
  background:var(--surface-2);color:var(--txt);font-size:18px}

/* ==========================================================================
 * 6.4  SURFACES  (cards, inset rows, list rows)
 * ==========================================================================*/
.card,.result{
  display:block;position:relative;
  background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-card);
  box-shadow:var(--e1);color:var(--txt);text-decoration:none;
  transition:transform var(--dur-1) var(--spring),box-shadow var(--dur-2) var(--ease-out),
    background var(--dur-1) var(--ease)}
.card:active,.result:active{transform:scale(.98);box-shadow:var(--e2)}
@media (hover:hover) and (pointer:fine){
  .card:hover,.result:hover{box-shadow:var(--e2)}
}
.card{padding:var(--s4);min-height:0}
.card b{font-size:20px;line-height:26px;font-weight:700;display:block;letter-spacing:-.02em;
  overflow-wrap:anywhere}
.card small{color:var(--mut);display:block;margin-top:var(--s1);font-size:13px;line-height:18px;
  font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.result{padding:12px var(--s4);margin:0 0 var(--s2)}
.result .t{font-size:15px;line-height:22px;font-weight:600}
.result .m{color:var(--mut);font-size:13px;line-height:18px;margin-top:2px;
  font-family:var(--f-mono);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.result .s{color:var(--mut);font-size:13px;line-height:18px;margin-top:6px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.result .why{display:none}
.result .tag{display:inline-block;background:transparent;border:0;padding:0;margin-right:var(--s2);
  color:var(--mut);font-family:var(--f-mono);font-variant-numeric:tabular-nums;
  font-size:12px;font-weight:600;letter-spacing:.02em}

/* Inset list rows: one rhythm, hairline separators, no card-in-card. */
.file,.sheetrow,.hrow,.chatrow{
  display:flex;align-items:center;gap:var(--s3);
  background:transparent;border:0;border-bottom:1px solid var(--hair);border-radius:0;
  padding:12px 0;margin:0;min-height:56px;color:var(--txt);text-decoration:none;
  transition:background var(--dur-1) var(--ease)}
.file:first-of-type,.sheetrow:first-of-type,.hrow:first-of-type,.chatrow:first-child{
  border-top:1px solid var(--hair)}
.file:active,.sheetrow:active,.hrow:active,.chatrow:active{background:var(--surface-2)}
.hrow{align-items:baseline;font-size:15px;line-height:22px;padding:10px 0}
.file .n{background:transparent;color:var(--mut);font-weight:600;border:0;
  min-width:36px;height:36px;flex:none;display:flex;align-items:center;justify-content:center;
  font-size:13px;font-variant-numeric:tabular-nums}
.file .n svg{width:20px;height:20px;display:block}
.file b{font-size:15px;line-height:22px;font-weight:600;display:block}
.file small{color:var(--mut);font-size:13px;line-height:18px}
.file .ftxt{flex:1;min-width:0}
.file::after{content:"\203A";color:var(--dim);font-size:20px;line-height:1;flex:none}
/* Manuals "Save": a quiet ink label, not a bordered pill fighting the title. */
.file .pg{margin-left:auto;color:var(--mut);font-size:13px;flex:none;
  font-variant-numeric:tabular-nums}
.file .pg .btn{width:auto;min-height:44px;min-width:44px;padding:0 var(--s2);margin:0;
  background:transparent;border:0;border-radius:var(--r-sm);color:var(--txt);
  font-size:15px;font-weight:600;box-shadow:none}
.file .pg .btn:active{background:var(--surface-2);transform:scale(.97)}
.sheetrow{align-items:flex-start}
.sheetrow .srow-txt{flex:1;min-width:0}
.sheetrow .srow-top{display:block;font-size:15px;line-height:22px;font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sheetrow .srow-top b{font-weight:600;color:var(--mut);margin-right:6px;
  font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.sheetrow small{display:block;color:var(--mut);font-size:13px;line-height:18px;margin-top:1px;
  font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sheetrow .p,.hrow .p{color:var(--mut);font-weight:600;flex:none;min-width:46px;
  font-size:13px;line-height:18px;font-family:var(--f-mono);
  font-variant-numeric:tabular-nums}
.sheetrow .t{font-size:15px;line-height:22px;min-width:0}
.sheetrow .p,.sheetrow .t,.sheetrow .tag{display:none}
.sheetrow::after{content:"\203A";color:var(--dim);font-size:20px;line-height:1;flex:none}
.chatrow{display:block;padding:12px 0}
.chatrow a{color:var(--txt);text-decoration:none;display:block;min-width:0}
.chatrow a b{font-size:15px;line-height:22px;font-weight:600;display:block;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chatrow a small{color:var(--mut);font-size:13px;line-height:18px}
.chatrow .crow-act{display:flex;gap:2px;justify-content:flex-end;margin-top:2px}
.chatrow .crow-act button{min-height:44px;min-width:44px;padding:0 6px;border:0;
  background:transparent!important;color:var(--mut);font-size:13px;font-weight:500;
  border-radius:var(--r-sm);cursor:pointer}
.chatrow .crow-act button:active{color:var(--txt);background:var(--surface-2)!important}

/* ==========================================================================
 * 6.5  COMPONENTS (plan §7.2)
 * ==========================================================================*/
/* .tile — crane tile: mono code, tabular meta, foot badge + offline ring. */
.tile{
  position:relative;display:flex;flex-direction:column;gap:var(--s1);
  min-height:96px;padding:var(--s4);
  background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-md);
  box-shadow:var(--e1);color:var(--txt);text-decoration:none;
  transition:transform var(--dur-1) var(--spring),box-shadow var(--dur-2) var(--ease-out)}
.tile:active{transform:scale(.98);box-shadow:var(--e2)}
.tile .code{font-family:var(--f-mono);font-variant-numeric:tabular-nums;
  font-size:28px;line-height:34px;font-weight:700;letter-spacing:-.02em}
.tile .meta{font-size:13px;line-height:18px;color:var(--mut);
  font-variant-numeric:tabular-nums}
.tile .foot{display:flex;align-items:center;gap:var(--s2);margin-top:auto}
.tile .ring{position:absolute;top:var(--s3);right:var(--s3);width:10px;height:10px;
  border-radius:50%;border:2px solid var(--n-300)}
.tile .ring.on{border-color:var(--ok)}
.tile .ring.off{border-color:var(--danger)}

/* .row — inset list row >=52px (leading mono index, title, sub, chevron).
 * Legacy `.row` is a flex BUTTON row (.row .btn{flex:1}); :has() restores it. */
.row{display:flex;align-items:center;gap:var(--s3);min-height:52px;padding:10px 0;
  border-bottom:1px solid var(--hair);color:var(--txt);text-decoration:none}
.row:last-child{border-bottom:0}
.row .idx{flex:none;min-width:44px;color:var(--mut);font-family:var(--f-mono);
  font-variant-numeric:tabular-nums;font-size:13px;font-weight:600}
.row .rtxt{flex:1;min-width:0}
.row .rtxt b{display:block;font-size:17px;line-height:22px;font-weight:600;
  letter-spacing:-.015em}
.row .rtxt small{display:block;color:var(--mut);font-size:13px;line-height:18px;margin-top:1px}
.row .chev{flex:none;color:var(--dim);font-size:20px;line-height:1}
.row:has(>.btn){border-bottom:0;padding:0;min-height:0;gap:var(--s2)}
.row>.btn{flex:1}

/* .sec / .sechead — 12/600 uppercase mut, one gutter, no 2px drift. */
.sec,.sechead{font-size:12px;line-height:16px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--mut);margin:var(--s5) 0 var(--s2);padding:0}
.sec:first-child,.sechead:first-child{margin-top:var(--s2)}
.sechead{position:sticky;top:calc(var(--topbar-h) + env(safe-area-inset-top));z-index:4;
  padding:var(--s2) 0;background:var(--bg)}

/* .badge — 12/600 tinted pill (ok / warn / muted / accent). */
.badge{display:inline-flex;align-items:center;gap:4px;min-height:22px;padding:0 8px;
  margin-top:var(--s2);border:1px solid transparent;border-radius:var(--r-pill);
  font-size:12px;line-height:16px;font-weight:600;letter-spacing:.005em;
  background:var(--surface-2);color:var(--mut)}
.badge.ok{background:color-mix(in srgb,var(--ok) 12%,var(--surface));color:var(--ok-ink)}
.badge.ok::before{content:"\2713";font-size:12px;color:var(--ok-ink)}
.badge.warn{background:color-mix(in srgb,var(--warn) 14%,var(--surface));color:var(--warn-ink)}
.badge.warn::before{content:"!";display:inline-flex;align-items:center;justify-content:center;
  width:14px;height:14px;border-radius:50%;background:var(--warn);color:var(--n-0);
  font-size:12px;font-weight:700;line-height:1}
.badge.accent,.badge.acc{background:var(--acc-weak);color:var(--acc-ink)}
.badge.dim{background:var(--surface-2);color:var(--mut)}
.card .badge .dim{color:var(--mut);font-weight:600}
.badges{display:flex;flex-wrap:wrap;gap:6px;margin:var(--s3) 0 var(--s1);align-items:center;
  font-variant-numeric:tabular-nums}
.badges>*+*::before{content:"\00B7";color:var(--dim);margin-right:6px}
.badges .badge{margin-top:0}
/* Chat status badges stay quiet ink (they are facts, not decoration). */
.badge-ai,.badge-phone,.badge-fallback,.badge-ver,.badge-conf,.badge-template{
  border:0;background:transparent;border-radius:0;padding:0;
  font-size:12px;line-height:16px;font-weight:600;color:var(--mut)}
.badge-ai,.badge-fallback{color:var(--mut)}
.badge-ver-ok{color:var(--ok-ink);font-weight:600}
.badge-caveat{color:var(--acc-ink);font-weight:600}
.badge-conf{letter-spacing:0;text-transform:none}
.badge-conf[data-conf="high"],.badge-conf[data-conf="low"]{color:var(--mut);border:0}
.qpill{display:inline-block;background:var(--acc-weak);color:var(--acc-ink);
  border-radius:var(--r-xs);padding:1px 6px;font-size:12px;font-weight:600;white-space:nowrap}

/* .chip — pill, surface-2, active = accent-weak + accent-ink. 44px tap floor. */
.chip{flex:0 1 auto;max-width:100%;min-width:44px;min-height:44px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--surface-2);border:1px solid var(--hair);color:var(--txt);
  border-radius:var(--r-pill);font-size:15px;line-height:22px;font-weight:600;
  padding:8px 14px;cursor:pointer;white-space:normal;overflow-wrap:anywhere;
  transition:transform var(--dur-1) var(--spring),background var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease)}
.chips{display:flex;flex-wrap:wrap;gap:var(--s2);margin:var(--s2) 0}
.chips .chip{text-align:left}
.chip:active{transform:scale(.97)}
.chip[aria-pressed="true"],.chip.on{background:var(--acc-weak);border-color:var(--acc);
  color:var(--acc-ink)}

/* .btn / .btn-primary / .btn-quiet — one geometry (48px, r-sm), one ladder.
 * Amber buttons keep --acc-t ink in BOTH themes (--txt is near-white in dark
 * and measured 1.66:1 on amber). */
.btn{display:flex;align-items:center;justify-content:center;gap:var(--s2);width:100%;
  min-height:48px;padding:11px var(--s4);margin:var(--s2) 0;
  background:var(--acc);color:var(--acc-t);border:1px solid transparent;
  border-radius:var(--r-btn);font-size:15px;line-height:22px;font-weight:600;
  text-align:center;text-decoration:none;cursor:pointer;box-shadow:none;
  transition:transform var(--dur-1) var(--spring),filter var(--dur-1) var(--ease),
    background var(--dur-1) var(--ease)}
.btn:active{transform:scale(.97);filter:brightness(.96)}
.btn:disabled{opacity:.45}
.btn:not(.ghost):not(#dl),.btn-primary{background:var(--acc);color:var(--acc-t);
  border-color:transparent;font-weight:700}
.btn-quiet,.btn.ghost{background:transparent;border-color:transparent;color:var(--acc-ink);
  font-weight:600;box-shadow:none}
.btn-quiet:active,.btn.ghost:active{background:var(--surface-2)}
.btn.ghost{color:var(--txt);background:var(--surface-2)}
#dl{background:var(--surface-2);color:var(--txt);border-color:transparent}
#dl:active{background:var(--surface-3)}
.scopeseg{display:flex;gap:0;margin:var(--s3) 0 var(--s1);padding:2px;
  background:var(--surface-2);border:1px solid var(--hair);border-radius:var(--r-sm)}
.scopeseg button{flex:1;min-height:44px;padding:8px var(--s3);
  background:transparent;border:0;border-radius:calc(var(--r-sm) - 2px);
  color:var(--mut);font-size:15px;font-weight:500;cursor:pointer;
  transition:transform var(--dur-1) var(--spring),background var(--dur-1) var(--ease)}
.scopeseg button[aria-selected="true"]{background:var(--surface);color:var(--txt);
  font-weight:600;box-shadow:var(--e1)}
.scopeseg button:active{transform:scale(.97)}
.fixin,.srow input,.searchbar input{width:100%;min-height:48px;padding:12px var(--s4);
  background:var(--surface-2);border:1px solid transparent;border-radius:var(--r-input);
  color:var(--txt);font-size:17px;line-height:22px;-webkit-appearance:none;appearance:none}
.fixin{border-color:var(--line);background:var(--surface);min-height:52px}
.fixin:focus,.srow input:focus,.searchbar input:focus{border-color:var(--acc);outline:none}
.srow input::placeholder,.searchbar input::placeholder{color:var(--dim)}
#faults{flex:none;width:auto;margin:0;min-height:48px;padding:0 var(--s4);white-space:nowrap;
  border-radius:var(--r-input);background:var(--surface-2);color:var(--txt);
  font-size:15px;font-weight:500}
.searchbar{position:sticky;top:calc(var(--topbar-h) + env(safe-area-inset-top));z-index:5;
  background:var(--bg);padding:var(--s2) 0}
.srow{display:flex;gap:var(--s2)}

/* .sheet — bottom sheet: r-lg top, --e4, grab handle, safe-area, spring in. */
.sheet{position:fixed;left:50%;transform:translateX(-50%);width:100%;max-width:760px;
  bottom:0;z-index:60;background:var(--surface);
  border-radius:var(--r-lg) var(--r-lg) 0 0;box-shadow:var(--e4);
  padding:var(--s2) var(--gutter) calc(var(--s4) + env(safe-area-inset-bottom));
  max-height:88dvh;overflow:auto;
  animation:sheetin var(--dur-3) var(--spring) both}
.sheet[hidden]{display:none}
.sheet .grab{width:36px;height:5px;border-radius:var(--r-pill);background:var(--n-300);
  margin:var(--s1) auto var(--s3)}
.sheet .sheettitle{font-size:20px;line-height:26px;font-weight:600;letter-spacing:-.015em;
  margin:0 0 var(--s3)}
.sheet .setrow{display:flex;align-items:center;gap:var(--s3);min-height:52px;
  padding:10px 0;border-bottom:1px solid var(--hair)}
.sheet .setrow:last-child{border-bottom:0}
.sheet .setrow .stxt{flex:1;min-width:0}
/* A .btn inside a flex setrow must size to its content: width:100% made the
 * confirmation sheets render their label one character per line and pushed
 * Cancel off-screen (app critic P0). */
.sheet .setrow .btn{width:auto;flex:0 0 auto;min-width:112px;margin:0}
.sheet .setrow .stxt b{display:block;font-size:17px;line-height:22px;font-weight:600}
.sheet .setrow .stxt small{display:block;color:var(--mut);font-size:13px;line-height:18px}
.scrim{position:fixed;inset:0;z-index:55;background:rgba(0,0,0,.32);
  animation:fadein var(--dur-2) var(--ease-out)}
.scrim[hidden]{display:none}
@keyframes sheetin{from{transform:translateX(-50%) translateY(16px);opacity:.6}
  to{transform:translateX(-50%) translateY(0);opacity:1}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
/* Switch (settings + chat display menu). */
.sw{position:relative;flex:none;width:46px;height:28px;border-radius:var(--r-pill);
  background:var(--surface-3);transition:background var(--dur-2) var(--ease)}
.sw::after{content:"";position:absolute;top:2px;left:2px;width:24px;height:24px;
  border-radius:50%;background:var(--n-0);box-shadow:0 1px 3px rgba(0,0,0,.25);
  transition:transform var(--dur-2) var(--spring)}
[aria-pressed="true"] .sw{background:var(--ok-ink)}
[aria-pressed="true"] .sw::after{transform:translateX(18px)}
.togglerow{display:flex;flex-direction:column;gap:1px}
.togglerow .mi{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  width:100%;min-height:48px;padding:10px var(--s3);border:0;border-radius:var(--r-sm);
  background:transparent;color:var(--txt);font-size:15px;font-weight:600;
  text-align:left;cursor:pointer}
.togglerow .mi:active{background:var(--surface-2)}

/* .skeleton — shimmer block, never a spinner. */
.skl,.skeleton{height:14px;margin:6px 0;border-radius:var(--r-xs);
  background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3) 37%,var(--surface-2) 63%);
  background-size:400% 100%;animation:sklshimmer 1.4s var(--ease) infinite}
@keyframes sklshimmer{0%{background-position:100% 0}100%{background-position:0 0}}
.result.sk{pointer-events:none}
@keyframes skpulse{0%,100%{opacity:.5}50%{opacity:.95}}

/* .empty — icon + title + one hint + one action, never a bare sentence. */
.empty{display:flex;flex-direction:column;align-items:center;gap:var(--s2);
  padding:var(--s6) var(--s4);margin:var(--s3) 0;text-align:center;
  background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-card);
  box-shadow:var(--e1);color:var(--mut);font-size:15px;line-height:22px}
.empty b{font-size:20px;line-height:26px;font-weight:600;color:var(--txt);
  letter-spacing:-.015em}
.empty .et{font-size:20px;line-height:26px;font-weight:600;color:var(--txt)}
.empty .hint{font-size:13px;line-height:18px;color:var(--mut);margin:0;max-width:42ch}
.empty .row{width:100%;margin-top:var(--s2)}

/* .hero — large-title block with optional blueprint grid + plate ticks. */
.hero{position:relative;padding:var(--s5) 0 var(--s4)}
.hero h1,.hero .htitle,.lt{font-size:34px;line-height:38px;font-weight:700;
  letter-spacing:-.024em;margin:0}
.hero .hsub{font-size:15px;line-height:22px;color:var(--mut);margin:var(--s2) 0 0;
  max-width:46ch}
.hero.blueprint{padding:var(--s5) var(--s4) var(--s4);border-radius:var(--r-card)}

/* .plate — spec plate: hairline box, corner ticks, mono metadata. */
.plate{position:relative;border:1px solid var(--hair);border-radius:var(--r-sm);
  padding:var(--s3) var(--s4);background:var(--surface);
  font-family:var(--f-mono);font-variant-numeric:tabular-nums;
  font-size:13px;line-height:18px;color:var(--mut)}
.plate::before,.plate::after{content:"";position:absolute;width:8px;height:8px;
  border:1px solid var(--line);opacity:.7}
.plate::before{top:-1px;left:-1px;border-right:0;border-bottom:0;
  border-top-left-radius:var(--r-sm)}
.plate::after{bottom:-1px;right:-1px;border-left:0;border-top:0;
  border-bottom-right-radius:var(--r-sm)}
.blueprint{
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:var(--grid-size) var(--grid-size)}

/* ==========================================================================
 * 6.6  CHAT SURFACES (the chat wave owns chat.js; this is the shared base)
 * ==========================================================================*/
.msg{font-size:17px;line-height:25px}
.msg.me{background:var(--surface-2);border-radius:var(--r-l) var(--r-l) var(--r-xs) var(--r-l);
  padding:11px 15px}
.msg.ai{max-width:68ch}
.msg.ai.acard,.msg.ai.ladder,.msg.ai.ecard{background:transparent;border:0;
  box-shadow:none;border-radius:0}
.acard .action,.ladder .action,.ecard .action{font-size:20px;line-height:26px;font-weight:600;
  letter-spacing:-.02em}
.acard .body{font-size:17px;line-height:25px}
.acard .steps li,.acard ul.isolist li{font-size:17px;line-height:25px}
.msg.ai .refcard{padding:12px 0;border-top:1px solid var(--hair)}
.msg.ai .refcard .t{font-size:15px;line-height:22px;font-weight:500}
.msg.ai .refcard .t b{font-weight:600}
.msg.ai .refcard .tag{background:transparent;color:var(--mut);padding:0;
  font-family:var(--f-mono);font-variant-numeric:tabular-nums;font-size:12px;font-weight:600;
  letter-spacing:.02em}
.msg.ai .refcard .m{color:var(--mut);font-size:13px;line-height:18px;
  font-family:var(--f-mono);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.msg.ai .refcard::after{font-size:20px;color:var(--dim)}
.trust{font-size:13px;line-height:18px;font-weight:500;color:var(--mut);
  padding-top:10px;margin-top:var(--s3);border-top:1px solid var(--hair);
  font-variant-numeric:tabular-nums}
.banner-isolate,.banner-weak,.banner-stale{border-left-width:3px;
  border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:15px;line-height:22px;font-weight:500;
  padding:9px var(--s3);min-height:48px}
.banner-unver{background:color-mix(in srgb,var(--danger) 8%,var(--surface));
  border-left:3px solid var(--danger);color:var(--danger-ink);
  border-radius:0 var(--r-sm) var(--r-sm) 0;padding:9px var(--s3);font-size:15px;
  line-height:22px;font-weight:600}
.fbrow{display:flex;gap:0;margin-top:var(--s5);padding-top:2px;flex-wrap:nowrap;
  border-top:1px solid var(--hair)}
.fbbtn{flex:1 1 0;min-height:44px;padding:10px 4px;border:0;border-right:1px solid var(--hair);
  border-radius:0;background:transparent;color:var(--mut);
  font-size:13px;line-height:18px;font-weight:500;white-space:nowrap;cursor:pointer;
  transition:transform var(--dur-1) var(--spring),background var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease)}
.fbbtn:last-child{border-right:0}
.fbbtn[data-fixyes]{color:var(--txt);font-weight:600}
.fbbtn:active{background:var(--surface-2);color:var(--txt)}
.fbbtn[data-thumbup],.fbbtn[data-thumbdown]{font-size:0}
.fbbtn[data-thumbup]::after{content:"Helpful";font-size:13px;font-weight:600}
.fbbtn[data-thumbdown]::after{content:"Not for me";font-size:13px;font-weight:600}
.soup summary{min-height:48px;font-size:15px;font-weight:500;color:var(--mut)}
.soup div{font-size:15px;line-height:22px}
.dock{position:fixed;left:50%;transform:translateX(-50%);width:100%;max-width:760px;
  bottom:0;z-index:30;background:var(--surface);border-top:1px solid var(--hair);
  padding:var(--s2) var(--gutter) calc(var(--s2) + env(safe-area-inset-bottom))}
.composer{display:flex;align-items:center;gap:var(--s2);background:var(--surface-2);
  border:1px solid var(--hair);border-radius:var(--r-pill);
  padding:4px 4px 4px var(--s3);min-height:56px;
  transition:border-color var(--dur-2) var(--ease)}
.composer:focus-within{border-color:color-mix(in srgb,var(--acc) 55%,var(--line))}
.composer #qin{flex:1;min-width:0;background:transparent;border:0;outline:0;color:var(--txt);
  font-size:17px;line-height:22px;padding:10px 4px;min-height:46px}
.composer #qin::placeholder{color:var(--dim)}
.composer #qin:focus-visible{outline:none}
#qsend{flex:none;border:0;border-radius:var(--r-pill);background:var(--acc);color:var(--acc-t);
  font-weight:700;font-size:15px;padding:0 20px;min-width:76px;min-height:48px;cursor:pointer;
  transition:transform var(--dur-1) var(--spring),filter var(--dur-1) var(--ease)}
#qsend:active{transform:scale(.97);filter:brightness(.95)}
#qsend:disabled{opacity:.4}
.composer #qsend{min-height:48px}
.cbtn{flex:none;min-width:44px;min-height:44px;border-radius:50%;border:0;padding:0;
  background:transparent;color:var(--mut);display:flex;align-items:center;
  justify-content:center;cursor:pointer;
  transition:transform var(--dur-1) var(--spring),background var(--dur-1) var(--ease)}
.cbtn svg{width:22px;height:22px}
.cbtn:active{background:var(--surface-3);transform:scale(.97)}
.cbtn[hidden]{display:none}
#sendstate{font-size:13px;line-height:18px;font-weight:500}
.cancelbtn{min-height:44px;min-width:88px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--surface-2);color:var(--txt);
  font-size:15px;font-weight:700;padding:10px 18px}
#netnote:not(:empty){display:flex;align-items:center;gap:var(--s2);
  background:var(--acc-weak);border:1px solid var(--hair);color:var(--txt);
  border-radius:var(--r-md);padding:10px var(--s3);font-size:13px;font-weight:600;
  margin:0 0 var(--s2)}
.unverbanner{font-size:14px;font-weight:700;color:var(--danger-ink);margin-top:var(--s1)}
.linkbtn{display:block;width:100%;min-height:44px;background:transparent;border:0;
  color:var(--mut);font-size:13px;font-weight:500;padding:8px;cursor:pointer;
  border-radius:var(--r-sm)}
.linkbtn.danger{color:var(--danger-ink)}
.linkbtn:active{background:var(--surface-2)}
.lookchip{display:flex;gap:var(--s2);align-items:center;background:var(--surface-2);
  border:1px solid transparent;border-radius:var(--r-md);padding:10px var(--s3);
  font-size:13px;font-weight:600;margin:0 0 var(--s2);min-height:56px}
.lookchip.warn{border-color:var(--acc)}
.contcard,.lookrow{display:grid;grid-template-columns:1fr auto;align-items:center;
  gap:10px;width:100%;text-align:left;background:var(--surface);border:1px solid var(--hair);
  border-radius:var(--r-card);padding:12px var(--s4);margin:0 0 var(--s2);color:var(--txt);
  cursor:pointer;box-shadow:var(--e1);font:inherit}
.contcard:active,.lookrow:active{background:var(--surface-2);transform:scale(.98)}
.contcard .conttitle{font-size:17px;line-height:22px;font-weight:600;letter-spacing:-.015em}
.contcard .contsub{grid-column:1;color:var(--mut);font-size:13px;line-height:18px;
  margin:2px 0 0}
.chev{color:var(--dim);font-size:20px;line-height:1}

/* ==========================================================================
 * 6.7  MOTION  (press · route · stagger · reduced-motion)
 * ==========================================================================*/
/* Route change = 200ms fade. NB: never animate `transform` on #view or on
 * #view>* — the chat `.dock` is a fixed child of #view and a transformed
 * ancestor becomes its containing block (measured: the dock jumped 195px). */
#view>*{animation:viewfade var(--dur-2) var(--ease-out) both}
@keyframes viewfade{from{opacity:0}to{opacity:1}}
/* Content rise: 4px, on real content only. */
.msg{animation:fadeup var(--dur-3) var(--ease-out) both;
  animation-delay:calc(var(--i,0) * 24ms)}
@keyframes fadeup{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
/* List stagger: 24ms/item, capped at 8. */
.grid>*{animation:staggerin var(--dur-2) var(--ease-out) both}
.grid>*:nth-child(1){animation-delay:0ms}
.grid>*:nth-child(2){animation-delay:24ms}
.grid>*:nth-child(3){animation-delay:48ms}
.grid>*:nth-child(4){animation-delay:72ms}
.grid>*:nth-child(5){animation-delay:96ms}
.grid>*:nth-child(6){animation-delay:120ms}
.grid>*:nth-child(7){animation-delay:144ms}
.grid>*:nth-child(8){animation-delay:168ms}
.grid>*:nth-child(n+9){animation-delay:168ms}
@keyframes staggerin{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
#chatfab{position:fixed;z-index:40;
  right:max(var(--s4),calc(50vw - 380px + var(--s4)));
  bottom:calc(var(--tabbar-h) + var(--s5) + env(safe-area-inset-bottom));
  width:56px;height:56px;border-radius:50%;border:0;
  background:var(--acc);color:var(--acc-t);display:flex;align-items:center;
  justify-content:center;box-shadow:var(--e3);
  transition:transform var(--dur-1) var(--spring)}
#chatfab:active{transform:scale(.94)}
#chatfab[hidden]{display:none}
#chatfab.hasq::after{content:"";position:absolute;top:6px;right:6px;width:10px;height:10px;
  border-radius:50%;background:var(--danger);box-shadow:0 0 0 2px var(--bg)}

/* ==========================================================================
 * 6.8  LAYOUT RHYTHM  (one gutter, one vertical rhythm, no 2px drift)
 * ==========================================================================*/
#view{padding:var(--s3) var(--gutter) 0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--s3)}
.hint,footer.note{font-size:13px;line-height:18px;color:var(--mut);margin:var(--s2) 0}
footer.note{margin:var(--s5) 0}
.biglink{display:inline-block;min-height:44px;padding:12px 0;color:var(--txt);font-weight:600;
  text-decoration:underline;text-decoration-color:var(--hair-2);text-underline-offset:2px}
.disclose{font-size:13px;font-weight:600;color:var(--acc-ink);margin:var(--s2) 0}
.zerotitle{font-size:20px;line-height:26px;font-weight:600;margin:0 0 var(--s1);
  letter-spacing:-.015em}
.zerosub{font-size:15px;line-height:22px;color:var(--mut);margin:0 0 var(--s1);max-width:46ch}
.zerohero{margin:var(--s1) 0 0}
#installhint{background:var(--surface-2);border:0;border-radius:var(--r-card);
  padding:10px 6px 10px var(--s4);display:flex;align-items:center;gap:var(--s1);
  margin:0 0 var(--s3)}
#installhint .insttxt{flex:1;min-width:0}
#installhint b{font-size:15px;font-weight:600;display:block}
#installhint small{font-size:13px;color:var(--mut);margin-top:1px;display:block;line-height:1.35}
#installhint .instx{min-width:44px;min-height:44px;border:0;background:transparent;
  color:var(--mut);font-size:17px;line-height:1;border-radius:50%;flex:none;padding:0;
  cursor:pointer}
#installhint .instx:active{background:var(--surface-3)}
#storline{font-size:13px;color:var(--mut)}
.sibbadge{font-size:13px;font-weight:600;color:var(--acc-ink);margin-top:var(--s1)}
.ref-sib{border-style:dashed;border-color:var(--acc)}
.ref-unver{background:color-mix(in srgb,var(--danger) 8%,var(--surface));
  border-color:var(--danger)}
.ref-stale{opacity:.6}
.laddersub{font-size:15px;color:var(--txt);margin:0 0 var(--s2)}
.refusebody p{margin:0 0 var(--s2);font-size:15px}
#foundline{font-size:13px;font-weight:500;color:var(--mut);margin:0 0 var(--s2)}
.streamprev{white-space:pre-wrap;color:var(--mut)}
.citelink{color:var(--txt);text-decoration:underline;
  text-decoration-color:color-mix(in srgb,var(--txt) 30%,transparent);text-underline-offset:2px}
input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;
  width:18px;height:18px;border-radius:50%;background:var(--surface-3);cursor:pointer}

/* ==========================================================================
 * 6.9  A11Y MODES
 * ==========================================================================*/
/* Big type: scale the TOKENS, not individual selectors, so every screen that
 * composes var(--fs-*) actually grows (the chat wave found the old per-selector
 * rules left most app text unchanged). html.bigtype is accepted as an alias. */
body.bigtype,html.bigtype{--fs-12:14px;--fs-13:16px;--fs-15:18px;--fs-17:20px;
  --fs-20:24px;--fs-22:26px;--fs-24:28px;--fs-28:32px;--fs-34:38px}
body.bigtype{font-size:19px}
body.bigtype .msg,body.bigtype .acard .body,body.bigtype .acard .steps li,
body.bigtype ul.isolist li{font-size:19px;line-height:27px}
body.bigtype .acard .action,body.bigtype .ladder .action,body.bigtype .ecard .action{
  font-size:22px;line-height:29px}
body.bigtype .card b,body.bigtype .file b,body.bigtype .sheetrow .t,
body.bigtype .result .t,body.bigtype .row .rtxt b{font-size:18px;line-height:24px}
body.bigtype .sec,body.bigtype .sechead,body.bigtype .ovsec{font-size:13px}
body.bigtype .t-cap{font-size:13px}
body.bigtype .t-foot{font-size:14px}
body.bigtype .t-body{font-size:16px}
body.bigtype .t-body-lg{font-size:19px}
body.bigtype .t-title{font-size:22px}
body.bigtype .t-h2{font-size:26px}
body.bigtype .t-h1{font-size:30px}
body.bigtype .t-display,body.bigtype #lttitle{font-size:36px;line-height:40px}
body.bigtype .file small,body.bigtype .card small,body.bigtype .chatrow a small{
  font-size:14px;line-height:19px}
/* Maximum contrast: token-level, opaque, no translucency. */
body.contrast{
  --bg:#000; --txt:#fff; --mut:#fff; --dim:#d0d0d0;
  --surface:#000; --surface-2:#000; --surface-3:#111;
  --line:#fff; --hair:#fff; --hair-2:#fff;
  --acc-ink:#ffff00; --ok-ink:#00ff00; --danger-ink:#ffff00; --warn-ink:#ffff00;
  --acc-weak:#000; --e1:none; --e2:none; --e3:none; --e4:none;
  background:#000;color:#fff}
body.contrast .card,body.contrast .result,body.contrast .tile,body.contrast .empty,
body.contrast .msg.ai.acard,body.contrast .msg.ai.ladder,body.contrast .msg.ai.ecard,
body.contrast .sheet,body.contrast .composer,body.contrast .chatmenu{
  background:#000;border-color:#fff;box-shadow:none}
body.contrast a,body.contrast .citelink,body.contrast .btn-quiet{color:#ff0}
body.contrast .chip,body.contrast .fbbtn,body.contrast .msg.me,body.contrast .cbtn,
body.contrast #back,body.contrast #themebtn,body.contrast #setbtn{
  background:#000;color:#fff;border-color:#fff}
body.contrast .btn,body.contrast #qsend,body.contrast #chatfab{
  background:var(--acc);color:var(--acc-t);border-color:#fff}
body.contrast .badge,body.contrast .badge-ai,body.contrast .badge-phone,
body.contrast .badge-ver,body.contrast .badge-conf{background:#000;color:#fff;border:0}
body.contrast mark{background:#ff0;color:#000}
body.contrast #tabbar,body.contrast #topbar{background:#000;border-color:#fff}
body.contrast #tabbar a[aria-current="page"]{color:#ff0}
body.contrast #reloadbar{background:#000;color:#ff0;border-color:#fff}
/* OS-level contrast preference: the v6 token block re-declares :root, so the
 * styles.css preferences must be re-asserted AFTER it. */
@media (prefers-contrast:more){
  :root{--line:rgba(60,60,67,.42);--hair:rgba(60,60,67,.28);--mut:var(--n-700)}
  html[data-theme="dark"]{--line:rgba(255,255,255,.44);--hair:rgba(255,255,255,.28);
    --mut:#D6D6DB}
  .card,.result,.searchbar input,.msg.ai .refcard{border-width:1.5px}
}
/* Reduced motion: everything stops, nothing hides. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;
    animation-iteration-count:1!important;transition-duration:.001ms!important;
    scroll-behavior:auto!important}
  .skl,.skeleton{animation:none;opacity:.7}
  #sendstate:not(:empty)::before{animation:none;opacity:.8}
  #view>*,.msg,.grid>*,#reloadbar,.sheet{animation:none;opacity:1;transform:none}
  .sheet{transform:translateX(-50%)}
}
/* Low-end kill switch + OS reduced transparency: chrome becomes solid. */
html.noglask #topbar,html.noglask #tabbar,html.noglask #reloadbar,html.noglask #toast,
html.noglask .dock,html.noglask .qoverlay,html.noglask .chatmenu{
  background:var(--surface);box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none}
@media (prefers-reduced-transparency:reduce){
  #topbar,#tabbar,#reloadbar,#toast,.dock,.qoverlay,.chatmenu{
    background:var(--surface);-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* ==========================================================================
 * 6.10  RESPONSIVE  (320 · short/landscape · tablet · desktop)
 * ==========================================================================*/
@media (max-width:359px){
  :root{--gutter:14px;--s4:14px;--sp4:14px}
  .grid{grid-template-columns:1fr;gap:var(--s2)}
  .card b{font-size:17px}
  .msg.me{max-width:92%}
  .composer #micbtn{display:none}
}
@media (max-height:520px){
  :root{--topbar-h:46px;--tabbar-h:48px}
  #topbar{padding-top:calc(3px + env(safe-area-inset-top));padding-bottom:3px}
  #ltbar{display:none}
  #crumb{opacity:1;font-size:15px}
  #tabbar{padding:2px var(--s2) calc(2px + env(safe-area-inset-bottom))}
  #tabbar a{min-height:44px;font-size:12px}
  #tabbar a svg{width:20px;height:20px}
  .dock{padding:var(--s1) var(--gutter) calc(var(--s1) + env(safe-area-inset-bottom))}
  .composer{min-height:50px}
  .composer #qin{min-height:44px;font-size:16px;padding:8px 4px}
  .composer #qsend{min-height:48px;padding:0 16px}
  .cbtn{min-width:44px;min-height:44px}
  .chatmenu{max-height:calc(100dvh - var(--topbar-h) - 24px);overflow:auto}
  #netnote:not(:empty){display:none}
  #view{padding:var(--s3) var(--gutter) 0}
  .sec,.sechead{margin:var(--s4) 0 var(--s2)}
  .grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:var(--s2)}
  .card{min-height:64px;padding:var(--s3)}
  #chatfab{width:52px;height:52px;
    bottom:calc(var(--tabbar-h) + var(--s3) + env(safe-area-inset-bottom))}
  #toast{bottom:calc(var(--tabbar-h) + var(--s3) + env(safe-area-inset-bottom))}
}
@media (min-width:600px) and (max-height:520px){
  body{max-width:none}
  /* The right rail belongs to the chat dock only. Unconditionally reserving
     356px on every route threw away 40% of a 844x390 screen (app critic P1). */
  body.inchat #view{padding-right:calc(340px + var(--gutter))}
  .dock{left:auto;right:0;transform:none;width:340px;top:var(--topbar-h);bottom:0;
    border-top:0;border-left:1px solid var(--hair);
    display:flex;flex-direction:column;justify-content:flex-end;gap:var(--s2);
    padding:var(--s3) var(--gutter) calc(var(--s3) + env(safe-area-inset-bottom))}
  .dock .composer{width:100%}
  #msgs{padding-bottom:var(--s4)}
  #netnote:not(:empty){display:flex}
  #toast{left:calc(50% - 170px)}
  #chatfab{right:calc(340px + var(--gutter))}
  #tabbar{padding-right:calc(340px + var(--gutter))}
  .chatmenu{right:calc(340px + var(--gutter))}
}
@media (max-height:380px){#netnote{display:none}}
@media (min-width:700px){
  :root{--glass-blur:24px;--topbar-h:56px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
  .card{padding:var(--s5)}
  .msg.me{max-width:70%}
  .fbbtn{flex:1}
}
@media (min-width:900px){
  body{max-width:920px}
  #tabbar{max-width:920px}
  #ltbar{padding-left:var(--s5);padding-right:var(--s5)}
  .grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:var(--s3)}
  #view{padding:var(--s4) var(--s5) 0}
  .dock{max-width:920px}
  #chatfab{right:max(var(--s4),calc(50vw - 460px + var(--s4)))}
  .chatmenu{right:max(var(--s4),calc(50vw - 460px + var(--s4)))}
}
@media (hover:hover) and (pointer:fine){
  .chip:hover,.btn.ghost:hover{background:var(--surface-3)}
  #tabbar a:hover{color:var(--txt)}
  .file:hover,.sheetrow:hover,.hrow:hover,.chatrow:hover{background:var(--surface-2)}
}