/*
Design read: internal status page for Greg and TRC's GM, read on a phone, workshop hang-tag language, leaning warm plaster neutrals (sibling of jmi-wall.gregspero.com).
Tokens: plaster #F2EEE7 ground, ink #211D19, muted #635B53, line #DCD3C6, Jones wine #7B2130 accent; status only: green #2E7147, amber #8A510A, red #A3261F.
Type: Bricolage Grotesque display, IBM Plex Sans body, IBM Plex Mono for owners, keys and dates.
Layout: verdict first, two hang-tag status cards with a red payments strip, a ranked blocker ledger with owner chips, a promise timeline, owner columns.
Signature: hang-tag cards with a punched hole and a large status word, the same tag the wall page uses.
*/
:root{
  --bg:#F2EEE7;--card:#FBF9F5;--ink:#211D19;--muted:#635B53;--line:#DCD3C6;
  --accent:#7B2130;--accent-ink:#FBF9F5;
  --ok:#2E7147;--ok-bg:#E3EFE6;--warn:#8A510A;--warn-bg:#F6E9D3;--bad:#A3261F;--bad-bg:#F6DEDA;
  --tag:#EDE5D8;--shadow:0 1px 0 rgba(33,29,25,.06);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#17140F;--card:#211C17;--ink:#EDE7DD;--muted:#B3A99C;--line:#3A332B;
  --accent:#D9818D;--accent-ink:#1A1512;
  --ok:#7CC596;--ok-bg:#1E3326;--warn:#E7B067;--warn-bg:#3A2A14;--bad:#F2968C;--bad-bg:#3D1C19;
  --tag:#2A241E;--shadow:none;color-scheme:dark;}}
:root[data-theme="dark"]{
  --bg:#17140F;--card:#211C17;--ink:#EDE7DD;--muted:#B3A99C;--line:#3A332B;
  --accent:#D9818D;--accent-ink:#1A1512;
  --ok:#7CC596;--ok-bg:#1E3326;--warn:#E7B067;--warn-bg:#3A2A14;--bad:#F2968C;--bad-bg:#3D1C19;
  --tag:#2A241E;--shadow:none;color-scheme:dark;}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1rem/1.5 "IBM Plex Sans",ui-sans-serif,"Helvetica Neue",sans-serif;-webkit-text-size-adjust:100%;overflow-wrap:anywhere}
.wrap{padding-inline:max(16px,4vw);padding-block:20px 64px}
a{color:var(--accent);text-underline-offset:3px}
a:focus-visible,summary:focus-visible,.btn:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
h1,h2,h3{font-family:"Bricolage Grotesque","IBM Plex Sans",sans-serif;letter-spacing:-.01em;margin:0}
code,.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.9em}
.mast{display:flex;flex-wrap:wrap;gap:.25rem 1rem;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--line);padding-bottom:12px;font-size:.875rem;color:var(--muted)}
.mast b{color:var(--ink);font-weight:600}
.hero{padding-block:28px 8px}
.hero h1{font-size:clamp(2.1rem,6vw,4rem);font-weight:800;line-height:1.02;max-width:20ch}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero .sub{margin:.9rem 0 0;font-size:1.125rem;color:var(--muted);max-width:60ch}
.stamp{display:inline-block;margin-top:14px;font:500 .85rem "IBM Plex Mono",monospace;color:var(--muted);border:1px dashed var(--line);border-radius:6px;padding:3px 8px}
.btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;padding:0 20px;border-radius:999px;font-weight:600;text-decoration:none;border:1.5px solid var(--ink);color:var(--ink);background:transparent;transition:background-color .15s,filter .15s}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn:hover{background:var(--tag)}.btn.primary:hover{filter:brightness(1.08);background:var(--accent)}
section{margin-top:44px}
section>h2{font-size:clamp(1.35rem,3vw,1.75rem);font-weight:700;margin-bottom:14px}
.lab{display:inline-block;font:500 .7rem/1.4 "IBM Plex Mono",monospace;color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:0 5px;margin-left:.35rem;vertical-align:.1em;white-space:nowrap}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:14px;margin-top:30px}
.tagc{position:relative;background:var(--card);border:1px solid var(--line);border-top:6px solid var(--st);border-radius:14px;padding:18px 18px 14px;box-shadow:var(--shadow);min-width:0}
.tagc::before{content:"";position:absolute;top:14px;right:16px;width:14px;height:14px;border-radius:50%;border:2px solid var(--line);background:var(--bg)}
.tagc.ok{--st:var(--ok)}.tagc.warn{--st:var(--warn)}.tagc.bad{--st:var(--bad)}
.tagc h3{font-size:1.05rem;font-weight:600;color:var(--muted);padding-right:28px}
.tagc .state{font:800 clamp(1.6rem,4.6vw,2.2rem)/1.05 "Bricolage Grotesque",sans-serif;color:var(--st);margin:6px 0 10px}
.tagc ul{list-style:none;margin:0;padding:0;font-size:.95rem}
.tagc li{padding:7px 0;border-top:1px dashed var(--line)}
.tagc .more{display:inline-block;margin-top:10px;font-weight:600;min-height:24px}
.pay{margin-top:14px;background:var(--bad-bg);border:1px solid var(--bad);border-radius:14px;padding:16px 18px;display:grid;grid-template-columns:auto 1fr;gap:6px 16px;align-items:baseline}
.pay .state{font:800 clamp(1.5rem,4.4vw,2rem)/1.05 "Bricolage Grotesque",sans-serif;color:var(--bad)}
.pay ul{margin:0;padding:0;list-style:none;font-size:.95rem}
.pay li{padding:3px 0}
.who{display:inline-flex;align-items:center;justify-content:center;min-width:5.6rem;font:500 .78rem/1 "IBM Plex Mono",monospace;padding:6px 8px;border-radius:6px;border:1px solid var(--line);background:var(--tag);color:var(--ink);white-space:nowrap}
.who.darryl{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.grp{font:600 1.05rem "Bricolage Grotesque",sans-serif;margin:18px 0 8px;scroll-margin-top:16px}
.grp:first-of-type{margin-top:0}
.ledger{list-style:none;margin:0;padding:0;background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.ledger li{display:grid;grid-template-columns:2.2rem auto 1fr auto;gap:10px 12px;align-items:center;padding:12px 16px;border-top:1px solid var(--line)}
.ledger li:first-child{border-top:0}
.ledger .n{font:700 1.3rem/1 "Bricolage Grotesque",sans-serif;color:var(--accent);font-variant-numeric:tabular-nums}
.ledger .t{min-width:0}
.ledger .t small{display:block;color:var(--muted);font-size:.875rem}
.ledger .d{font-size:.875rem;font-weight:600;min-height:24px;display:inline-flex;align-items:center}
.ledger li:target{background:var(--tag)}
.time{list-style:none;margin:0;padding:0 0 0 18px;border-left:3px solid var(--line)}
.time li{position:relative;padding:0 0 18px 14px}
.time li::before{content:"";position:absolute;left:-27px;top:6px;width:14px;height:14px;border-radius:50%;background:var(--card);border:3px solid var(--accent)}
.time .dt{font:500 .85rem "IBM Plex Mono",monospace;color:var(--muted)}
.time q{display:block;font:600 clamp(1.1rem,3vw,1.35rem)/1.3 "Bricolage Grotesque",sans-serif;quotes:"\201C" "\201D"}
.time .ctx{color:var(--muted);font-size:.9rem}
.time li.gap::before{border-color:var(--warn);background:var(--warn-bg)}
.time li.gap .silence{display:inline-block;font:700 1.15rem "Bricolage Grotesque",sans-serif;color:var(--warn);background:var(--warn-bg);border-radius:8px;padding:4px 10px}
.owners{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:14px}
.owner{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;min-width:0}
.owner h3{font-size:1.2rem;margin-bottom:8px}
.owner ol{margin:0;padding-left:1.2rem}
.owner li{padding:5px 0}
.owner li small{color:var(--muted)}
details{background:var(--card);border:1px solid var(--line);border-radius:12px}
summary{cursor:pointer;padding:14px 16px;font-weight:600;min-height:44px;list-style-position:inside}
details>div{padding:0 16px 14px}
details ul{margin:0;padding-left:1.1rem}
details li{margin:6px 0}
footer{margin-top:48px;padding-top:14px;border-top:1px solid var(--line);font-size:.9rem;color:var(--muted)}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
footer a{display:inline-flex;min-height:24px;align-items:center}
/* rendered docs */
.doc h1{font-size:clamp(1.8rem,5vw,2.6rem);font-weight:800;line-height:1.05;margin:24px 0 8px}
.doc h2{font-size:clamp(1.3rem,3vw,1.6rem);margin:36px 0 10px;scroll-margin-top:16px;padding-top:8px;border-top:1px solid var(--line)}
.doc h3{font-size:1.15rem;margin:24px 0 8px}
.doc p,.doc li{max-width:60ch}
.doc li{margin:6px 0}
.doc .tbl{overflow-x:auto;background:var(--card);border:1px solid var(--line);border-radius:12px;margin:12px 0}
.doc table{border-collapse:collapse;font-size:.9rem;min-width:620px;width:100%}
.doc th,.doc td{text-align:left;vertical-align:top;padding:8px 12px;border-top:1px solid var(--line)}
.doc th{background:var(--tag);border-top:0;font-weight:600}
.doc pre{overflow-x:auto;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px;font-size:.85rem}
.doc hr{border:0;border-top:1px solid var(--line);margin:28px 0}
.back{display:inline-flex;min-height:44px;align-items:center;font-weight:600}
@media (max-width:640px){
  .btn{flex:1 1 100%}
  .ledger li{grid-template-columns:2rem 1fr;gap:6px 10px}
  .ledger .n{grid-column:1;grid-row:1/span 3;align-self:start}
  .ledger .who{grid-column:2;grid-row:1;justify-self:start}
  .ledger .t{grid-column:2;grid-row:2}
  .ledger .d{grid-column:2;grid-row:3}
  .pay{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}}
.cap{font-size:.9rem;color:var(--muted);margin:8px 0 0;max-width:60ch}