/* CHANGE-ME (branding and layout): colors, type and spacing. Nothing here affects what the API allows. */
:root{--bg:#f5f4f0;--fg:#17181c;--muted:#5f6067;--faint:#8a8b92;--line:#e6e4de;--line2:#d9d6ce;--card:#fff;--sunk:#faf9f6;
--accent:#b4471c;--accent-ink:#8f3815;--accent-soft:#f8e9e1;--ok:#17794a;--ok-soft:#e3f4ea;--warn:#a04b00;--warn-soft:#fdf1e4;
--bad:#b42318;--bad-soft:#fdecea;--r:14px;--shadow:0 1px 2px rgba(20,20,30,.04),0 6px 24px rgba(20,20,30,.06);color-scheme:light dark}
@media (prefers-color-scheme:dark){:root{--bg:#121316;--fg:#ecebe7;--muted:#a3a3aa;--faint:#8c8c93;--line:#26272c;--line2:#34353b;--card:#1a1b1f;
--sunk:#16171a;--accent:#e0703f;--accent-ink:#f0946a;--accent-soft:#3a2117;--ok:#6fd39a;--ok-soft:#14301f;--warn:#ffb06e;--warn-soft:#33230f;
--bad:#ff8a80;--bad-soft:#3a1715;--shadow:none}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.6 Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--accent-ink)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.skip{position:absolute;left:-999px;top:0}.skip:focus{left:16px;top:8px;background:var(--card);padding:8px 12px;border-radius:8px;z-index:9}
header.top{background:var(--card);border-bottom:1px solid var(--line)}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}
.bar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;min-height:60px}
.brand{display:flex;align-items:center;gap:10px;font-weight:650;color:var(--fg);text-decoration:none}
.mark{text-decoration:none;width:30px;height:30px;border-radius:9px;background:#b4471c;color:#fff;display:grid;place-items:center;font-size:14px;font-weight:700}
nav.main{display:flex;gap:4px;flex-wrap:wrap;flex:1}
nav.main a{padding:6px 12px;border-radius:999px;text-decoration:none;color:var(--muted)}
nav.main a[aria-current=page]{background:var(--accent-soft);color:var(--accent-ink);font-weight:600}
.who{display:flex;gap:10px;align-items:center;color:var(--muted);font-size:14px}
.who form{margin:0}
main{padding:24px 0 48px}
h1{font-size:26px;line-height:1.25;margin:0 0 6px}
h2{font-size:19px;margin:28px 0 10px}
h3{font-size:16px;margin:18px 0 6px}
p.lead{color:var(--muted);margin:0 0 18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:18px 20px;margin:0 0 16px}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.count{display:flex;align-items:center;gap:20px}
.count .n{font-size:56px;font-weight:700;line-height:1;color:var(--accent-ink);font-variant-numeric:tabular-nums}
.count .n.zero{color:var(--ok)}
.badge{display:inline-block;min-width:24px;padding:0 8px;border-radius:999px;background:var(--accent);color:var(--card);font-size:13px;font-weight:700;text-align:center;line-height:22px;margin-left:4px}
.pill{display:inline-block;padding:1px 10px;border-radius:999px;font-size:13px;font-weight:600;border:1px solid var(--line2);background:var(--sunk);white-space:nowrap}
.pill.ok{background:var(--ok-soft);color:var(--ok);border-color:transparent}
.pill.warn{background:var(--warn-soft);color:var(--warn);border-color:transparent}
.pill.bad{background:var(--bad-soft);color:var(--bad);border-color:transparent}
.pill.accent{background:var(--accent-soft);color:var(--accent-ink);border-color:transparent}
.muted{color:var(--muted)}.small{font-size:14px}.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;word-break:break-all}
table{border-collapse:collapse;width:100%}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:13px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.03em}
caption{text-align:left;color:var(--muted);font-size:14px;padding-bottom:6px}
.table-wrap{overflow-x:auto}
.side{display:grid;gap:16px;grid-template-columns:1fr 1fr}
@media (max-width:760px){.side{grid-template-columns:1fr}.count .n{font-size:44px}}
.side .card h3{margin-top:0}
.notice{border-radius:10px;padding:12px 14px;margin:0 0 16px;border:1px solid var(--line2);background:var(--sunk)}
.notice.ok{background:var(--ok-soft);border-color:transparent;color:var(--ok)}
.notice.warn{background:var(--warn-soft);border-color:transparent;color:var(--warn)}
.notice.bad{background:var(--bad-soft);border-color:transparent;color:var(--bad)}
.notice strong{display:block}
form.stack{display:grid;gap:14px}
fieldset{border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin:0}
legend{font-weight:600;padding:0 4px}
label{cursor:pointer}
.opts{display:flex;flex-wrap:wrap;gap:6px 18px}
.opts label{display:flex;gap:6px;align-items:center}
input[type=text],input[type=date],input[type=number],select,textarea{width:100%;font:inherit;color:inherit;background:var(--card);border:1px solid var(--line2);border-radius:8px;padding:8px 10px}
textarea{min-height:90px;resize:vertical}
.field label.lbl{display:block;font-weight:600;margin-bottom:4px}
.hint{font-size:13px;color:var(--muted);margin-top:2px}
.btns{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
button,.button{font:inherit;font-weight:600;border-radius:10px;padding:8px 16px;border:1px solid var(--line2);background:var(--card);color:var(--fg);cursor:pointer;text-decoration:none;display:inline-block}
button.primary,.button.primary{background:var(--accent);color:var(--card);border-color:var(--accent)}
button.yes{background:#16a34a;color:#fff;border-color:#16a34a}
button.no{background:#dc2626;color:#fff;border-color:#dc2626}
button.link{background:none;border:none;padding:0;color:var(--accent-ink);text-decoration:underline;font-weight:500}
button[disabled]{opacity:.45;cursor:not-allowed}
dl.kv{display:grid;grid-template-columns:max-content 1fr;gap:4px 16px;margin:0}
dl.kv dt{color:var(--muted)}dl.kv dd{margin:0}
pre.json{background:var(--sunk);border:1px solid var(--line);border-radius:8px;padding:8px 10px;overflow-x:auto;font-size:13px;margin:0;white-space:pre-wrap;word-break:break-word}
.diff-before{border-left:3px solid var(--bad)}.diff-after{border-left:3px solid var(--ok)}
.input-block{border-top:1px solid var(--line);padding-top:10px;margin-top:10px}
.input-block:first-child{border-top:0;margin-top:0;padding-top:0}
.signin{max-width:440px;margin:60px auto}
footer{color:var(--faint);font-size:13px;padding:20px 0 40px}
.mt0{margin-top:0}
a.card.tile{text-decoration:none;color:inherit;display:block}
a.card.tile:hover{border-color:var(--line2)}
.w260{max-width:260px}
form.btns{margin-top:12px}
details.card form{margin-top:12px}
main.wrap{padding-top:24px;padding-bottom:48px}
.who a{margin-left:10px}
/* Grit: the top row matches Grit's pages (shell.css on the main address); the Journal's own sections sit below it. */
[hidden]{display:none !important}
.gritbar{gap:18px}
.gbrand{font-weight:800;letter-spacing:.02em;font-size:18px;color:var(--fg);text-decoration:none}
.gbrand span{color:var(--accent)}
.gnav{display:flex;gap:4px;flex-wrap:wrap}
.gnav a{color:var(--muted);text-decoration:none;padding:6px 10px;border-radius:8px;font-weight:600}
.gnav a:hover,.gnav a[aria-current=page]{color:var(--fg);background:var(--sunk)}
.gritbar .who{margin-left:auto}
.subbar{border-top:1px solid var(--line);background:var(--sunk)}
.subbar .bar{min-height:46px;gap:12px}
.sublabel{font-size:13px;font-weight:600;color:var(--faint);text-transform:uppercase;letter-spacing:.04em}
/* These are in Grit's menu above, so the Journal's row doesn't repeat them. */
nav.main a[href="#/home"],nav.main a[href="#/directory"],nav.main a[href^="#/settings"]{display:none}
@media (max-width:560px){.gritbar .who{margin-left:0;width:100%}}

/* ===== Grit Blueprint brand layer (D-U61) =====================================================================
   Appended to every Grit screen's own stylesheet so all of them read as one app, in the house style of Grit Guide
   (gritguide.com) and Grit's brand sheet (gritblueprint.com colors_and_type.css):
   - a white header with the navy logo and a condensed uppercase menu; the current page underlined in pink;
   - a deep-navy title band under it: breadcrumbs, a pink eyebrow, a big condensed title, one lead line;
   - sections opened by a pink rule with a condensed title, and a small spaced link on the right;
   - square bordered cards and fact strips, no shadows; plaster callouts with a pink left edge;
   - one hot pink for the main action (a pill with a glow), outlined navy for the rest; bright blue for links.
   Headlines: Oswald (the brand sheet's own fallback for Zuume; SIL OFL, self-hosted). Body: Helvetica.
   /grit/records/brand is the brand folder's path on that address, filled in by the build. Only class names already in the
   pages are styled; app code is untouched. */
@font-face { font-family:"Oswald"; src:url("/grit/records/brand/oswald-500.woff2") format("woff2"); font-weight:500; font-display:swap; }
@font-face { font-family:"Oswald"; src:url("/grit/records/brand/oswald-600.woff2") format("woff2"); font-weight:600; font-display:swap; }
@font-face { font-family:"Oswald"; src:url("/grit/records/brand/oswald-700.woff2") format("woff2"); font-weight:700; font-display:swap; }

:root {
  --gb-navy:#18355E; --gb-navy-deep:#0E1E36; --gb-pink:#FF1894; --gb-pink-600:#D40D78; --gb-blue:#0092D6;
  --gb-blue-700:#0F5C97; --gb-plaster:#F6F4EF;
  --display:"Oswald","Zuume","Avenir Next Condensed","Arial Narrow","Roboto Condensed",sans-serif; --body:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --logo:url("/grit/records/brand/logo-navy.png");
  --head-bg:#FFFFFF; --head-fg:#18355E; --head-line:#DCDBD4;
  --band:#0E1E36; --band-fg:#FFFFFF; --band-dim:#B9C6DA;
  /* every app's own token names, mapped to the brand */
  --bg:#FFFFFF; --wash:#FFFFFF; --card:#FFFFFF; --paper:#FFFFFF; --sunk:#F6F4EF;
  --ink:#18355E; --fg:#18355E; --muted:#56637A; --faint:#6F7682;
  --line:#DCDBD4; --line2:#C9C7BF;
  --accent:#D40D78; --accent-ink:#FFFFFF; --accent-soft:#FFE3F1; --link:#0F5C97;
  --soft:#F6F4EF; --tint:#CDEAF7; --tint-ink:#0E1E36;
  --ok:#17794A; --ok-soft:#E3F4EA; --warn:#9A5B00; --warn-soft:#FDF1E4; --bad:#B42318; --bad-soft:#FDECEA;
  --todo:#94989B; --r:0px; --shadow:none;
}
@media (prefers-color-scheme: dark) {
  :root {
    --logo:url("/grit/records/brand/logo-white.png");
    --head-bg:#0B1730; --head-fg:#F3F6FA; --head-line:#1E3A63; --band:#0E1E36;
    --bg:#0B1730; --wash:#0B1730; --card:#12284A; --paper:#12284A; --sunk:#10223F;
    --ink:#F3F6FA; --fg:#F3F6FA; --muted:#B9C6DA; --faint:#8C9BB5;
    --line:#24426E; --line2:#2A5687;
    --accent:#FF1894; --accent-soft:#3A1430; --link:#4FB4E6;
    --soft:#10223F; --tint:#18355E; --tint-ink:#CDEAF7;
    --ok:#6FD39A; --ok-soft:#14301F; --warn:#FFB06E; --warn-soft:#33230F; --bad:#FF8A80; --bad-soft:#3A1715;
    --todo:#7E8FAB;
  }
}

body { font-family:var(--body); background:var(--bg); color:var(--ink); }
a { color:var(--link); }
h1, h2, h3, .greeting { font-family:var(--display); color:var(--ink); letter-spacing:.005em; }
h1, h2, .greeting { font-weight:600; text-transform:uppercase; line-height:1.02; }
h1 { font-size:36px; } h2 { font-size:24px; } h3 { font-weight:500; text-transform:uppercase; font-size:19px; line-height:1.1; }

/* ---- header: white, navy logo, condensed menu (Grit pages: header.top; Journal and admin: .gritbar) ---- */
header.top { background:var(--head-bg); color:var(--head-fg); border-bottom:1px solid var(--head-line); }
body > header.top:not(:has(.gritbar)) { max-width:none; margin:0; padding:0 max(16px, calc((100% - 1120px) / 2 + 16px)); min-height:72px; gap:30px; flex-wrap:nowrap; }
.gritbar { min-height:72px; gap:30px; flex-wrap:nowrap; }
header.top a.brand, .gritbar a.gbrand {
  display:block; flex:none; width:197px; height:21px; overflow:hidden; color:transparent; font-size:0;
  background:var(--logo) left center / contain no-repeat; }
header.top .nav, .gnav { display:flex; gap:4px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; align-self:stretch; align-items:stretch; }
header.top .nav::-webkit-scrollbar, .gnav::-webkit-scrollbar { display:none; }
header.top .nav a, .gnav a {
  display:flex; align-items:center; white-space:nowrap; color:var(--head-fg); text-decoration:none; padding:0 8px;
  border-radius:0; background:none; font:500 18px/1 var(--display); letter-spacing:.01em; text-transform:uppercase;
  border-bottom:3px solid transparent; border-top:3px solid transparent; }
header.top .nav a:hover, .gnav a:hover { color:var(--gb-pink-600); background:none; }
header.top .nav a[aria-current="page"], .gnav a[aria-current="page"] { background:none; border-bottom-color:var(--gb-pink); }
header.top .who, .gritbar .who { margin-left:auto; flex:none; color:var(--muted); font-size:13px; gap:12px; }
header.top .who .me, .gritbar .who a:first-child { color:var(--head-fg); font-weight:700; }
header.top .who a, .gritbar .who a { color:var(--head-fg); text-decoration:none; }
header.top .who .role { color:var(--muted); text-transform:uppercase; letter-spacing:.12em; font-size:11px; font-weight:700; }
header.top .who a.button, header.top .who .button {      /* Grit Guide's "SUBSCRIBE": outlined, square, spaced */
  background:transparent; color:var(--head-fg); border:2px solid var(--head-fg); border-radius:0; box-shadow:none;
  padding:9px 18px; font:700 13px/1 var(--body); letter-spacing:.16em; text-transform:uppercase; }
header.top .who a.button:hover { background:var(--head-fg); color:var(--head-bg); }

/* ---- the second row: one app's own sections (Decision Journal, documents admin) ---- */
.subbar { background:var(--sunk); border-top:1px solid var(--head-line); }
.subbar .bar { min-height:48px; gap:18px; flex-wrap:nowrap; }
.sublabel { flex:none; font:700 11.5px/1 var(--body); letter-spacing:.18em; text-transform:uppercase; color:var(--gb-pink-600); }
.subbar nav { display:flex; gap:2px; overflow-x:auto; scrollbar-width:none; }
.subbar nav a { white-space:nowrap; color:var(--ink); text-decoration:none; padding:14px 10px 11px; border-radius:0; background:none;
  font:700 12px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; border-bottom:3px solid transparent; }
.subbar nav a:hover { color:var(--gb-pink-600); background:none; }
.subbar nav a[aria-current="page"] { background:var(--card); color:var(--gb-pink-600); border-bottom-color:var(--gb-pink); }   /* the selected tab stands out */
/* Settings screens are configuration, not the Decision Journal: no Journal row there (Decisions is in Grit's menu) */
body.in-settings .subbar { display:none; }
.subbar .count, .subbar .badge { background:var(--gb-pink); color:#fff; border-radius:999px; padding:1px 7px; font-size:11px; letter-spacing:0; }

/* ---- title band (Grit Guide's company hero) ---- */
.hero { background:var(--band); color:var(--band-fg);
  background-image:radial-gradient(120% 140% at 85% -20%, rgba(0,146,214,.22) 0%, rgba(14,30,54,0) 55%); }
.hero-in { max-width:1120px; margin:0 auto; padding:30px 16px 36px; }
.crumbs { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 18px; font:700 12px/1 var(--body); letter-spacing:.18em; text-transform:uppercase; color:var(--band-dim); }
.crumbs a { color:var(--band-dim); text-decoration:none; } .crumbs a:hover { color:#fff; }
.crumbs .here { color:var(--gb-pink); }
.eyebrow { margin:0 0 8px; font:700 13px/1 var(--body); letter-spacing:.2em; text-transform:uppercase; color:var(--gb-pink); }
.hero h1, .hero .greeting { color:#fff; font-weight:700; font-size:56px; line-height:.98; margin:0 0 14px; }
.hero-lead { margin:0 0 4px; max-width:68ch; color:rgba(255,255,255,.86); font-size:17px; line-height:1.6; }
.hero .button, .hero form button, .hero .ask button { margin-top:18px; }
.hero .ask { max-width:820px; margin:20px 0 0; display:flex; gap:10px; }
.hero .ask input { flex:1; border:0; border-radius:0; padding:15px 16px; font-size:17px; background:#fff; color:#18355E; }
.hero .ask button { margin-top:0; }
@media (max-width:640px) { .hero h1, .hero .greeting { font-size:40px; } .hero-in { padding:22px 16px 26px; } }

/* ---- page body ---- */
main { max-width:1120px; padding-top:30px; }
.block { margin:0 0 36px; }
.block > h2, .block-head, .prose .block > h2 { border-top:2px solid var(--gb-pink); padding-top:14px; }
.block-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; }
.block-head > h2 { border-top:0; padding-top:0; }
.block > h2, .block-head h2 { font-size:26px; margin:0 0 14px; }
.see-all, .block-head a:not(.button) { font:700 12px/1 var(--body); letter-spacing:.16em; text-transform:uppercase; color:var(--muted); text-decoration:none; }
.see-all:hover, .block-head a:not(.button):hover { color:var(--gb-pink-600); }
.section-note { color:var(--muted); }

/* ---- buttons: pink pill with a glow for the main action; outlined navy for the rest ---- */
.button, button.primary, .button.primary, .ask button, form.find button {
  display:inline-block; background:var(--gb-pink-600); color:#fff; border:0; border-radius:999px;   /* the darker brand pink: 4.9:1 with white */ cursor:pointer; text-decoration:none;
  font:700 13px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; padding:15px 26px;
  box-shadow:0 10px 30px -8px rgba(255,24,148,.45); transition:transform .14s, box-shadow .14s; }
.button:hover, button.primary:hover, .ask button:hover { background:#B80B68; transform:translateY(-1px); box-shadow:0 16px 40px -10px rgba(255,24,148,.6); }
.list .button, .card .button, td .button { padding:10px 18px; font-size:12px; box-shadow:none; white-space:nowrap; }
.button.quiet, button:not(.primary):not(.link):not([class*="kl-"]):not(.ask button) {
  background:transparent; color:var(--ink); border:2px solid var(--ink); border-radius:0; box-shadow:none;
  font:700 12px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; padding:10px 16px; }
.link, button.link { color:var(--link); background:none; border:0; padding:0; font:inherit; letter-spacing:0; text-transform:none; box-shadow:none; }

/* ---- cards, lists, tables: square, bordered, flat ---- */
.card, .list, .answer, table, .prose .block { border-radius:0; border:1px solid var(--line); box-shadow:none; background:var(--card); }
.card h3 { font-size:22px; }
a.card.opens:hover { border-color:var(--gb-pink); box-shadow:none; }
.card .who-sees, .facts dt, th, .cited .check, .meta {
  font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); }
.facts { display:grid; grid-template-columns:1fr; gap:2px; margin-top:6px; }       /* label above value, as Grit Guide's fact strip */
.facts dt { margin-top:8px; } .facts dd { margin:0; color:var(--ink); font-weight:600; font-size:14px; }
.cited .where { color:var(--muted); font-size:14px; }
th { background:var(--soft); }
.list li { padding:14px 18px; }
.badge { border-radius:0; font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; padding:4px 9px; }
.badge.yes { background:var(--ink); color:var(--card); }
.badge.no { background:transparent; color:var(--faint); border:1px solid var(--line2); }

/* ---- callouts: plaster with a pink left edge (Grit Guide's "Why they're listed") ---- */
section.intro, .next, .notice { background:var(--sunk); border:0; border-left:4px solid var(--gb-pink); border-radius:0; box-shadow:none; }
section.intro { padding:20px 24px; margin:0 0 30px; }
section.intro h1 { font:700 13px/1 var(--body); letter-spacing:.2em; color:var(--gb-pink-600); margin:0 0 10px; }
.checks li.done::before { background:var(--gb-pink); border-color:var(--gb-pink); }

/* ---- Ask ---- */
p.intro { background:none; border:0; padding:0; box-shadow:none; }
.examples a { border:1px solid var(--line2); border-radius:0; background:var(--card); color:var(--ink); font-size:13px; }
.examples a:hover { border-color:var(--gb-pink); color:var(--gb-pink-600); }
.hero .examples, .hero .scopes { margin-top:14px; }
.answer { padding:24px 28px; }
.answer h2 { font:700 12px/1 var(--body); letter-spacing:.18em; color:var(--gb-pink-600); }
sup.n a, .nearest a, .cited a, .recent-list a { color:var(--link); }
.pill { border-radius:0; font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; }
.scopes a.current { background:var(--gb-navy); border-color:var(--gb-navy); color:#fff; }
.recent h2 { font-size:22px; }

/* ---- Ask: working state (spinner on the button, progress panel, Stop) ---- */
.ask button.working { position:relative; padding-left:46px; opacity:1; cursor:progress; }
.ask button.working::before { content:""; position:absolute; left:20px; top:50%; width:15px; height:15px; margin-top:-8px;
  border:2px solid rgba(255,255,255,.45); border-top-color:#fff; border-radius:50%; animation:gb-spin .8s linear infinite; }
.ask button.stop, .ask button.stop:hover { background:transparent; color:#fff; border:2px solid rgba(255,255,255,.6); box-shadow:none;
  border-radius:999px; padding:13px 22px; font:700 13px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; transform:none; }
.ask button.stop:hover { border-color:#fff; background:rgba(255,255,255,.08); }
.progress { position:relative; overflow:hidden; background:var(--sunk); border-left:4px solid var(--gb-pink); padding:18px 22px 16px; margin:4px 0 18px; }
.progress .pbar { position:absolute; left:0; right:0; top:0; height:3px; background:linear-gradient(90deg, transparent, var(--gb-pink), transparent);
  background-size:40% 100%; background-repeat:no-repeat; animation:gb-slide 1.4s ease-in-out infinite; }
.progress-head { margin:0 0 4px; display:flex; justify-content:space-between; gap:12px; align-items:baseline;
  font:600 20px/1.1 var(--display); text-transform:uppercase; letter-spacing:.01em; color:var(--ink); }
.progress-head .secs { font:700 12px/1 var(--body); letter-spacing:.14em; color:var(--faint); font-variant-numeric:tabular-nums; }
.progress-line { margin:0; color:var(--muted); }
@keyframes gb-spin { to { transform:rotate(360deg); } }
@keyframes gb-slide { 0% { background-position:-40% 0; } 100% { background-position:140% 0; } }
@media (prefers-reduced-motion: reduce) { .ask button.working::before, .progress .pbar { animation:none; } }

/* ---- guided tour (tour.js) ---- */
.tour-shade { position:fixed; inset:0; z-index:1000; background:transparent; }
.tour-shade.full { background:rgba(14,30,54,.62); }
.tour-spot { position:fixed; z-index:1001; pointer-events:none; outline:2px solid var(--gb-pink); outline-offset:0;
  box-shadow:0 0 0 9999px rgba(14,30,54,.62); transition:all .25s var(--ease, ease); }
.tour-card { position:fixed; z-index:1002; width:min(380px, calc(100vw - 32px)); background:var(--card); color:var(--ink);
  border-top:4px solid var(--gb-pink); padding:18px 20px 16px; box-shadow:0 24px 60px -18px rgba(14,30,54,.55); }
.tour-card h2 { font-size:24px; margin:2px 0 8px; }
.tour-count { margin:0; font:700 11px/1 var(--body); letter-spacing:.18em; text-transform:uppercase; color:var(--gb-pink-600); }
.tour-text { margin:0 0 14px; color:var(--muted); line-height:1.55; }
.tour-actions { display:flex; gap:10px; align-items:center; justify-content:flex-end; }
.tour-actions .link { margin-right:auto; font-size:14px; }
.tour-actions button.primary { padding:12px 20px; box-shadow:none; }
.tour-actions button[disabled] { opacity:.4; cursor:default; }
@media (prefers-reduced-motion: reduce) { .tour-spot { transition:none; } }

/* ---- Ask: sources changed since, and Fresh answer ---- */
.notice.changed { margin:0 0 16px; padding:12px 16px; color:var(--ink); border-left-color:var(--warn); }
.notice.changed ul { margin:6px 0; padding-left:20px; } .notice.changed p { margin:4px 0 0; color:var(--muted); }
.fresh { margin-top:18px; padding-top:14px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; }
.fresh-cost { flex-basis:100%; margin:0; color:var(--muted); } .fresh-cost strong { color:var(--ink); }
.fresh button.primary { padding:11px 18px; box-shadow:none; }

/* ---- inputs ---- */
input[type=text], input[type=search], input[type=url], input[type=number], input[type=date], textarea, select { border-radius:0; border-color:var(--line2); }
input:focus, textarea:focus, select:focus { outline:2px solid var(--gb-blue); outline-offset:1px; }

/* ---- in-page tabs (Settings' own sections; they had no style before) ---- */
nav.tabs { display:flex; gap:4px; flex-wrap:wrap; border-bottom:1px solid var(--line); margin:6px 0 20px; }
nav.tabs a { padding:11px 12px 9px; font:700 12px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--ink);
  text-decoration:none; border-bottom:3px solid transparent; margin-bottom:-1px; }
nav.tabs a:hover { color:var(--gb-pink-600); }
nav.tabs a[aria-current="page"] { color:var(--gb-pink-600); border-bottom-color:var(--gb-pink); }
/* "Full console" leads to /journal/, which only sends people back to Home: Grit's menu replaces it */
.gritbar .who a[href="/journal/"] { display:none; }

/* ---- Help: read as Grit Guide's article sections, aligned with the title band ---- */
main.prose { max-width:1120px; }
main.prose > * { max-width:780px; }
.prose .block { border:0; background:none; padding:0; margin:0 0 30px; }

/* ---- footer ---- */
.foot { max-width:1120px; border-top:1px solid var(--line); padding-top:18px; margin-top:20px; }
@media (max-width:1180px) {   /* the menu takes its own row before it would be cut off */
  body > header.top:not(:has(.gritbar)), .gritbar { flex-wrap:wrap; padding-top:12px; gap:8px 16px; }
  header.top .nav, .gnav { order:3; width:100%; min-height:44px; }
  header.top .who, .gritbar .who { margin-left:auto; }
}
/* ===== end of the brand layer ===== */

/* "To do" in the header, with the count of what's waiting (D-U74) */
header.top .who a.todo, .gritbar > a.todo { display:inline-flex; align-items:center; gap:6px; color:var(--head-fg); font:500 15px/1 var(--display);
  text-transform:uppercase; letter-spacing:.04em; text-decoration:none; }
header.top .who a.todo:hover, .gritbar > a.todo:hover { color:var(--gb-pink-600); }
.who a.todo .count, .gritbar > a.todo .count { min-width:20px; height:20px; padding:0 6px; border-radius:10px; background:#D40D78; color:#fff;
  font:700 12px/20px system-ui, sans-serif; letter-spacing:0; text-align:center; }
.who a.todo .count[hidden], .gritbar > a.todo .count[hidden] { display:none; }
.gritbar > a.todo { margin-left:auto; flex:none; }
.gritbar > a.todo + .who { margin-left:16px; }
header.top .who .role { display:none; }   /* D-U83: no role beside the name (it is on People and You) */
a.todo:has(.count[hidden]) { display:none; }   /* D-U83: To do shows only when something waits */

/* ---- Settings → Knowledge bases (Grit, console 0.23+): toolbar, modals, a change's steps ---- */
.toolbar { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin:0 0 18px; }
.toolbar button.primary { padding:13px 22px; }
nav.seg { display:flex; gap:0; border:2px solid var(--ink); }
nav.seg a { padding:10px 14px; font:700 12px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--ink); text-decoration:none; }
nav.seg a + a { border-left:2px solid var(--ink); }
nav.seg a[aria-current="page"] { background:var(--ink); color:var(--bg); }
.btns.actions { margin:0 0 18px; }
button.danger:not(.primary) { border-color:var(--bad); color:var(--bad); }
button.primary.danger { background:var(--bad); box-shadow:none; }
button[disabled] { opacity:.45; cursor:not-allowed; transform:none; }
td .btns { flex-wrap:nowrap; justify-content:flex-end; }

dialog.modal { border:0; padding:0; width:min(640px, calc(100vw - 32px)); max-height:calc(100vh - 48px); background:var(--card); color:var(--ink);
  border-top:4px solid var(--gb-pink); box-shadow:0 30px 80px -20px rgba(14,30,54,.55); }
dialog.modal::backdrop { background:rgba(14,30,54,.6); }
.m-in { padding:22px 24px 20px; }
.m-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.m-head h2 { font-size:28px; margin:0 0 8px; }
button.m-x { border:0 !important; padding:4px 8px !important; font-size:26px !important; line-height:1 !important; letter-spacing:0 !important; }
.m-in .field { margin:0 0 14px; }
.m-in fieldset.field { border:1px solid var(--line); padding:10px 14px; }
.m-in legend.lbl { font-weight:600; padding:0 4px; }
.checks { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:6px 14px; max-height:220px; overflow:auto; padding:4px 0; }
.check { display:flex; gap:8px; align-items:flex-start; font-weight:400 !important; }
.check input { margin-top:3px; }
.m-plan { border-top:2px solid var(--gb-pink); margin-top:8px; padding-top:10px; }
.m-plan:empty { display:none; }
.m-plan h3 { font-size:18px; margin:0 0 6px; }
.m-foot { justify-content:flex-end; margin-top:14px; }
.m-foot button.primary { padding:13px 22px; }

ol.steps { list-style:none; padding:0; margin:0 0 18px; border:1px solid var(--line); background:var(--card); }
ol.steps li.step { display:flex; gap:12px; align-items:flex-start; padding:12px 16px; border-bottom:1px solid var(--line); }
ol.steps li.step:last-child { border-bottom:0; }
ol.steps .dot { flex:none; width:22px; height:22px; border-radius:50%; border:2px solid var(--todo); font:700 12px/18px var(--body); text-align:center; color:#fff; }
ol.steps li.done .dot { background:var(--ok); border-color:var(--ok); }
ol.steps li.running .dot, ol.steps li.waiting .dot { border-color:var(--gb-pink); border-top-color:transparent; animation:spin 1s linear infinite; }
ol.steps li.failed .dot, ol.steps li.todo_by_hand .dot { background:var(--bad); border-color:var(--bad); }
ol.steps li.skipped .dot { color:var(--todo); }
@keyframes spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { ol.steps .dot { animation:none !important; } }

/* ---- Your memory (Grit, D-U88) ---- */
.memtop { display:grid; gap:14px; margin:0 0 34px; }
.memstate { display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:16px 20px; background:var(--sunk); border-left:4px solid var(--todo); }
.memstate.on { border-left-color:var(--ok); }
.memstate > span:nth-child(2) { flex:1; }
.dotlamp { width:12px; height:12px; border-radius:50%; background:var(--todo); flex:none; }
.memstate.on .dotlamp { background:var(--ok); box-shadow:0 0 0 4px var(--ok-soft); }
.memtop form.find { display:flex; gap:10px; }
.memtop form.find input { flex:1; font:400 16px/1.3 var(--body); padding:13px 14px; border:1px solid var(--line2); border-radius:0; }
.memtop form.find button.primary, .memstate button.primary { padding:13px 22px; }
.block-head a { white-space:nowrap; }
.list li.mem { display:flex; gap:16px; align-items:flex-start; justify-content:space-between; flex-wrap:nowrap; }
.mem-main { min-width:0; display:grid; gap:4px; }
.mem-main .title { font-weight:600; color:var(--ink); text-decoration:none; }
.mem-main .title:hover { color:var(--gb-pink-600); }
.mem-tags { display:flex; gap:6px; flex:none; }
.empty-note { padding:14px 18px; border:1px dashed var(--line2); }

/* ---- Settings -> Handoff (Grit, D-U97) ---- */
nav.ho-docs { flex-wrap:wrap; margin:0 0 22px; }
nav.ho-docs a { border-bottom:0; }
.ho-doc { max-width:960px; }
.ho-doc h2 { border-top:2px solid var(--gb-pink); padding-top:14px; font-size:28px; margin:34px 0 12px; }
.ho-doc h3 { font-size:21px; margin:26px 0 8px; }
.ho-doc table { display:block; overflow-x:auto; border-collapse:collapse; margin:12px 0 18px; font-size:14px; }
.ho-doc th, .ho-doc td { border:1px solid var(--line); padding:7px 10px; vertical-align:top; text-align:left; }
.ho-doc blockquote { margin:0 0 22px; padding:14px 18px; background:var(--sunk); border-left:4px solid var(--gb-pink); }
.ho-doc pre.mermaid { background:var(--card); border:1px solid var(--line); padding:14px; overflow-x:auto; text-align:center; }
.ho-doc pre:not(.mermaid) { background:var(--sunk); padding:12px; overflow-x:auto; }
a.ref { text-decoration:none; border-bottom:1px dotted currentColor; font-weight:600; white-space:nowrap; }
a.ref.screen { color:var(--gb-pink-600); }
a.na { color:var(--muted); pointer-events:none; text-decoration:none; }
dialog.ho-pop { width:min(760px, calc(100vw - 32px)); }
.ho-pop .ho-body { max-height:56vh; overflow:auto; }
.eyebrow-dark { margin:0 0 4px; font:700 12px/1 var(--body); letter-spacing:.16em; text-transform:uppercase; color:var(--gb-pink-600); }
ol.uat { padding-left:20px; display:grid; gap:8px; }

/* ---- Handoff: side list of documents (D-U98) ---- */
.ho-wrap { display:grid; grid-template-columns:230px minmax(0,1fr); gap:36px; align-items:start; }
.ho-side { position:sticky; top:16px; border-left:3px solid var(--line); padding:2px 0 2px 0; }
.ho-group { margin:0 0 6px 14px; font:700 11px/1 var(--body); letter-spacing:.18em; text-transform:uppercase; color:var(--faint); }
.ho-group + .ho-list { margin-bottom:22px; }
.ho-list { display:grid; }
.ho-list a { display:block; margin-left:-3px; padding:8px 12px 8px 14px; border-left:3px solid transparent; color:var(--ink); text-decoration:none;
  font:600 15px/1.25 var(--body); }
.ho-list a:hover { color:var(--gb-pink-600); }
.ho-list a[aria-current="page"] { border-left-color:var(--gb-pink); color:var(--gb-pink-600); background:var(--sunk); }
@media (max-width:900px) {
  .ho-wrap { grid-template-columns:1fr; gap:18px; }
  .ho-side { position:static; border-left:0; border-bottom:1px solid var(--line); display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; padding-bottom:6px; }
  .ho-group { display:none; }
  .ho-list { display:flex; gap:4px; margin:0 !important; }
  .ho-list a { white-space:nowrap; border-left:0; border-bottom:3px solid transparent; margin:0; padding:8px 10px; }
  .ho-list a[aria-current="page"] { border-bottom-color:var(--gb-pink); background:none; }
}
/* diagrams always on white, whatever the page's colour scheme (D-U98) */
.ho-doc pre.mermaid { background:#ffffff !important; color:#18355E; border:1px solid #DCDBD4; color-scheme:light; }
.ho-doc pre.mermaid svg { max-width:100%; height:auto; }
/* diagram labels are HTML inside the SVG: never let the page's dark-mode text colour or prose spacing reach them */
.ho-doc pre.mermaid foreignObject, .ho-doc pre.mermaid foreignObject * { color:#18355E !important; margin:0 !important; line-height:1.35 !important; font-family:"Helvetica Neue", Helvetica, Arial, sans-serif !important; background-color:transparent; }
.ho-doc pre.mermaid .edgeLabel, .ho-doc pre.mermaid .edgeLabel * { background-color:#ffffff !important; }
/* Handoff → Screenshots */
.ho-shots { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:18px; margin:10px 0 26px; }
.ho-shots figure { margin:0; border:1px solid var(--line); background:var(--card); }
.ho-shots img { display:block; width:100%; height:auto; border-bottom:1px solid var(--line); }
.ho-shots figcaption { padding:8px 10px; font-size:14px; text-transform:capitalize; }
/* After a decision (D-U111): one clear result card in place of the form */
.card.decided { border-left:6px solid var(--ok); }
.card.decided.bad { border-left-color:var(--bad); }
.card.decided h2 { font-size:28px; }
.card.decided .btns { margin-top:16px; gap:10px; display:flex; flex-wrap:wrap; }

/* ===== Feedback (D-U113): Your feedback, the board, a card ===== */
.fb-row { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.fb-text { white-space:pre-wrap; font-size:16px; margin:10px 0; }
.fb-note { margin-top:4px; padding:6px 10px; background:var(--sunk); border-left:3px solid var(--accent); white-space:pre-wrap; }
.fb-hist, .fb-msgs { list-style:none; padding:0; margin:8px 0; display:grid; gap:8px; }
.fb-msgs li { padding:8px 10px; border:1px solid var(--line); }
.fb-msgs li.fb-from-reporter { background:var(--sunk); }
.fb-reply textarea, .fb-move textarea { width:100%; box-sizing:border-box; font:inherit; padding:8px; border:1px solid var(--line2); background:var(--card); color:var(--ink); }
.fb-mine.fb-done { opacity:.92; }
.fb-bar { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:0 0 14px; }
.fb-board { display:grid; grid-template-columns:repeat(6, minmax(190px, 1fr)); gap:12px; overflow-x:auto; padding-bottom:6px; }
@media (max-width: 1100px) { .fb-board { grid-template-columns:repeat(3, minmax(190px, 1fr)); } }
@media (max-width: 640px) { .fb-board { grid-template-columns:1fr; } }
.fb-col { background:var(--sunk); border:1px solid var(--line); padding:10px; display:grid; gap:8px; align-content:start; min-height:120px; }
.fb-colh { font-size:15px; margin:0; display:flex; justify-content:space-between; align-items:center; }
.fb-colh .count { font:700 12px/1 var(--body); background:var(--card); border:1px solid var(--line2); padding:3px 8px; }
a.fb-card { display:grid; gap:4px; padding:10px; background:var(--card); border:1px solid var(--line); color:var(--ink); text-decoration:none; }
a.fb-card:hover, a.fb-card:focus-visible { border-color:var(--accent); }
.fb-card-text { font-size:14px; line-height:1.35; }
.fb-claim { color:var(--accent); font-weight:700; }
.fb-shots { display:flex; flex-wrap:wrap; gap:12px; }
.fb-shot { margin:0; display:grid; gap:4px; }
.fb-shot canvas { max-width:320px; height:auto; border:1px solid var(--line); cursor:zoom-in; }
.fb-shot canvas.fb-zoom { max-width:100%; cursor:zoom-out; }
.fb-pre { max-height:320px; overflow:auto; background:var(--sunk); border:1px solid var(--line); padding:10px; font:12px/1.45 ui-monospace, Menlo, Consolas, monospace; white-space:pre-wrap; }
.fb-links { display:grid; gap:8px; } .fb-links label { display:grid; gap:2px; } .fb-links input { font:inherit; padding:6px 8px; border:1px solid var(--line2); background:var(--card); color:var(--ink); }