/* GermanMed platform — app styles.
   Visual language: MAXIMALISM + CLAYMORPHISM on the locked palette (red/black/yellow/white).
   Craft language: Emil — motion has a reason, every state exists, focus is visible, AA or better.

   Two rules carry the whole system:
   1. COLOUR CARRIES STRUCTURE. Zones are capped by full-bleed colour bands (ink/red/gold);
      cards are extruded out of tinted wells. Colour is never decoration.
   2. CLAY IS RATIONED. Depth belongs to few LARGE objects (cards, wells, toolbars).
      Repeated rows stay FLAT — the contact register is 226 rows and shadows there would
      cost real scroll performance for no legibility gain.

   Every class name from the previous sheet is preserved so app.js keeps working. */

*{box-sizing:border-box}
body{margin:0;font-family:var(--font);background:var(--gm-canvas);color:var(--gm-ink);
  font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
.tabular{font-variant-numeric:tabular-nums}          /* Western digits, both scripts */
a{color:var(--gm-red-ink);text-decoration:none}
a:hover{text-decoration:underline}
.hidden{display:none!important}

/* ── form controls, EVERYWHERE: same face, same height, round edges.
      Raw inputs fell back to the browser's default font (the monospace look) and
      square corners; this floor styles every control once. :where() keeps the
      specificity at zero so any deliberate rule below still wins. ── */
input,select,textarea,button{font:inherit}
:where(input:not([type=checkbox],[type=radio],[type=file],[type=range]),textarea){
  border:1px solid var(--gm-line-2);border-radius:var(--r-m);background:var(--gm-canvas);
  color:var(--gm-ink);padding:9px 12px;font-size:13px}
:where(textarea){resize:vertical;line-height:1.5}
:where(input[type=date]){min-height:38px}

/* header */
header{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:18px;padding:11px 22px;background:var(--gm-band-ink);color:#fff}
[data-theme="dark"] header{background:#0A0809;border-bottom:1px solid var(--gm-line)}
.brand{display:flex;align-items:center;gap:0}
.logo{font-family:var(--font-brand);font-weight:700;font-size:21px;letter-spacing:-.3px;line-height:1;display:inline-flex;align-items:center}
.logo .g{color:#fff}
.logo .pill{background:var(--gm-red);color:#fff;border-radius:var(--r-pill);padding:2px 11px 3px;margin-inline-start:2px}
.logo .dot{color:var(--gm-gold);margin-inline-start:3px;font-weight:800}
header .spacer{flex:1}
.ctl{display:flex;align-items:center;gap:8px}
.btn-ghost{background:rgba(255,255,255,.10);color:#fff;border:1px solid rgba(255,255,255,.20);border-radius:var(--r-s);padding:6px 10px;font:inherit;font-size:13px;cursor:pointer}
.btn-ghost:hover{background:rgba(255,255,255,.18)}
/* selects live on CARDS (light or dark), not the dark header — theme them from tokens.
   A shared rule once painted them white-on-white in the Light view (invisible options). */
select{background:var(--gm-canvas);color:var(--gm-ink);border:1px solid var(--gm-line-2);border-radius:var(--r-m);padding:8px 11px;font:inherit;font-size:13px;cursor:pointer}
header select{background:rgba(255,255,255,.10);color:#fff;border:1px solid rgba(255,255,255,.20)}
#install{background:var(--gm-gold);color:#2A1F00;border:0;font-weight:700}
.who{display:flex;align-items:center;gap:8px;font-size:13px;min-width:0}
.who .wholink{display:inline-flex;align-items:center;gap:8px;color:inherit;text-decoration:none;cursor:pointer;min-width:0}
.who .wholink:hover .whoname{text-decoration:underline}
.who .whoname{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px}
.who .av{flex:none;width:28px;height:28px;border-radius:50%;background:var(--gm-red);color:#fff;display:grid;place-items:center;font-weight:700}
.flagbar{display:flex;height:3px}
.flagbar span:first-child{flex:1;background:var(--gm-red)}
.flagbar span:last-child{width:46px;background:var(--gm-gold)}

/* strip */
.strip{display:flex;align-items:center;gap:12px;padding:8px 22px;background:var(--gm-surface);border-bottom:1px solid var(--gm-line);font-size:12.5px;color:var(--gm-ink-70);flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:var(--r-pill);font-size:11.5px;font-weight:500;border:1px solid var(--gm-line-2)}
.chip.restricted{color:#fff;background:var(--gm-band-ink);border-color:transparent}
.chip .dot{width:7px;height:7px;border-radius:50%;background:var(--gm-red)}
.muted{color:var(--gm-ink-50)}

/* layout */
main{max-width:1180px;margin:0 auto;padding:22px 22px 92px}
/* ^ extra bottom padding so the fixed "?" help button (bottom-right) never sits on top of the
   last table row's Edit link — content can always be scrolled clear of it. */
.grid{display:grid;grid-template-columns:1.55fr 1fr;gap:18px;align-items:start}
@media(max-width:880px){.grid{grid-template-columns:1fr}}
.grid-metrics{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;align-items:stretch}
.grid-metrics>.scanline{grid-column:1/-1}
.grid-metrics>.card{display:flex}
.grid-metrics .tile{display:flex;flex-direction:column;flex:1;width:100%}
.grid-metrics .tile h3{min-height:2.6em}
.grid-metrics .tile .row{margin-top:2px}
.grid-metrics .tile .note{margin-top:auto;padding-top:6px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
@media(max-width:880px){.grid-2{grid-template-columns:1fr}}
.col{display:flex;flex-direction:column;gap:18px}

/* ── the clay card ─────────────────────────────────────────────────────
   Hairline edge + two-layer shadow. The edge is what makes it read as an
   extruded object; the shadow alone was too timid in light mode. */
.card{background:var(--gm-surface);border:var(--gm-clay-edge);border-radius:var(--r-l);
  box-shadow:var(--gm-shadow);overflow:hidden;overflow-x:auto}
/* ^ overflow-x:auto: a wide table scrolls INSIDE its card — overflow:hidden alone
   clipped columns (incl. the Edit buttons) invisibly on register pages. */
.card.pick{overflow:visible}
/* ^ a card hosting a dropdown picker (task assignee suggestions) must NOT clip. */
.card>.hd{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--gm-line)}
.card>.hd h2{margin:0;font-size:17px;font-weight:700;letter-spacing:-.01em}
.card>.hd .sub{font-size:12px;color:var(--gm-ink-50);margin-top:2px}
.card>.hd .spacer{flex:1}

/* ── ZONE BANDS: colour carries structure (the approved cockpit direction).
      A band caps a group and states what KIND of attention it needs. ── */
.card>.hd.band-ink,.card>.hd.band-red,.card>.hd.band-gold{border-bottom:0;color:#fff}
.card>.hd.band-ink{background:var(--gm-band-ink)}
.card>.hd.band-red{background:var(--gm-band-red)}
.card>.hd.band-gold{background:var(--gm-gold);color:#2A1F00}
.card>.hd.band-ink .sub,.card>.hd.band-red .sub{color:rgba(255,255,255,.72)}
.card>.hd.band-gold .sub{color:rgba(42,31,0,.72)}
/* recessed ground — cards extrude OUT of this */
.well{background:var(--gm-surface-2);box-shadow:var(--gm-well);padding:14px}
.pill-c{font-size:11px;font-weight:500;padding:4px 10px;border-radius:var(--r-pill);background:var(--gm-surface-2);color:var(--gm-ink-70)}
.band-ink .pill-c,.band-red .pill-c{background:rgba(255,255,255,.14);color:#fff}

/* ── the decision sheet: zones capped by a colour band, items EXTRUDED out of a well.
      This is the approved cockpit direction — colour states what kind of attention a
      group needs, before a single word is read. ── */
.zone{border-bottom:1px solid var(--gm-line)}
.zone:last-child{border-bottom:0}
.zone>.hd{display:flex;align-items:center;gap:10px;padding:14px 20px;color:#fff}
.zone>.hd h2{margin:0;font-size:16px;font-weight:700;letter-spacing:-.01em}
.zone>.hd .sub{font-size:12px;margin-top:2px;color:rgba(255,255,255,.74)}
.zone>.hd.band-ink{background:var(--gm-band-ink)}
.zone>.hd.band-red{background:var(--gm-band-red)}
.zone>.hd.band-green{background:var(--gm-band-green)}
.zone>.hd.band-gold{background:var(--gm-gold);color:#2A1F00}
.zone>.hd.band-gold .sub{color:rgba(42,31,0,.74)}
.zone>.hd .pill-c{background:rgba(255,255,255,.16);color:#fff}
.zone>.hd.band-gold .pill-c{background:rgba(42,31,0,.14);color:#2A1F00}
.zone>.well{display:flex;flex-direction:column;gap:10px}
/* inside a well the item becomes a raised card, not a list row */
.zone .item{background:var(--gm-surface);border:var(--gm-clay-edge);border-radius:var(--r-m);
  box-shadow:var(--gm-shadow);border-bottom:0;padding:14px 16px}

/* action sheet items */
.item{display:flex;gap:12px;padding:14px 20px;border-bottom:1px solid var(--gm-line);transition:opacity .2s var(--ease-out)}
.item:last-child{border-bottom:0}
.sev{width:4px;border-radius:var(--r-pill);flex:none}
.sev.red{background:var(--gm-danger)}
.sev.amber{background:var(--gm-gold)}
.sev.blue{background:var(--gm-ink-30)}      /* "normal" = neutral, not a colour */
.sev.green{background:var(--gm-green)}      /* traffic light: good / done */
.item .ibody{flex:1;min-width:0}
.item .t{font-weight:700;color:var(--gm-ink)}
.item .why{font-size:12.5px;color:var(--gm-ink-70);margin-top:3px}
.item .meta{font-size:11.5px;color:var(--gm-ink-50);margin-top:6px;display:flex;gap:12px;flex-wrap:wrap}
.item.done{opacity:.5}

/* tags — gold means ATTENTION, never an action */
.tag{font-size:10.5px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;padding:3px 9px;border-radius:var(--r-pill);white-space:nowrap}
.tag.red{color:var(--gm-red-ink);background:var(--gm-red-wash)}
.tag.amber{color:var(--gm-gold-ink);background:var(--gm-gold-wash)}
.tag.grey{color:var(--gm-ink-70);background:var(--gm-surface-2)}
.tag.decision{color:#fff;background:var(--gm-band-ink)}

/* ── buttons: rest / hover / press / focus / disabled / loading ────────
      Press is a real clay push: scale down + inset shadow. */
.acts{display:flex;gap:8px;align-items:center;margin-top:10px;flex-wrap:wrap}
.b{font:inherit;font-size:12.5px;font-weight:500;border-radius:var(--r-m);padding:8px 15px;cursor:pointer;
  border:var(--gm-clay-edge);background:var(--gm-surface);color:var(--gm-ink);box-shadow:var(--gm-shadow);
  transition:transform var(--dur-press) var(--ease-out),box-shadow var(--dur-state) var(--ease-out)}
.b:hover{box-shadow:var(--gm-shadow-2);transform:translateY(-1px)}
.b:active{transform:scale(.985);box-shadow:var(--gm-press)}
.b.primary{background:var(--gm-red-solid);color:#fff;border-color:transparent}
.b.ghost{background:transparent;color:var(--gm-ink-70);border-color:var(--gm-line-2);box-shadow:none}
.b.ghost:hover{background:var(--gm-surface-2);box-shadow:none;transform:none}
.b.dark{background:var(--gm-band-ink);color:#fff;border-color:transparent}
[data-theme="dark"] .b.dark{background:var(--gm-surface-3);color:var(--gm-ink)}
.b.green{background:var(--gm-green);color:#fff;border-color:transparent}   /* mark done / approve */
.b.green:hover{filter:brightness(.94)}
/* dark green is LIGHT, so it carries dark text (white on it is 2.25:1 and fails) */
[data-theme="dark"] .b.green{color:#16181C}
.b.danger{background:transparent;color:var(--gm-red-ink);border-color:var(--gm-line-2);box-shadow:none}
.b.danger:hover{background:var(--gm-red-wash);border-color:var(--gm-red-wash)}
.b[disabled],.b.is-disabled{opacity:.42;cursor:not-allowed;box-shadow:none;transform:none;
  background:var(--gm-surface-2);color:var(--gm-ink-50)}
.b.is-loading{position:relative;color:transparent;pointer-events:none}
.b.is-loading::after{content:"";position:absolute;inset:0;margin:auto;width:14px;height:14px;
  border:2px solid var(--gm-ink-50);border-top-color:transparent;border-radius:50%;animation:gmspin .7s linear infinite}
@keyframes gmspin{to{transform:rotate(360deg)}}

/* tiles + ticker */
.tile{padding:16px 20px;border-bottom:1px solid var(--gm-line)}
.tile:last-child{border-bottom:0}
.tile .row{display:flex;align-items:baseline;gap:8px}
.tile h3{margin:0;font-size:13px;color:var(--gm-ink-70);font-weight:500}
.tile .big{font-size:30px;font-weight:700;color:var(--gm-ink);letter-spacing:-.02em}
.tile .note{font-size:12px;color:var(--gm-ink-50);margin-top:4px}
.ticker .e{display:flex;gap:9px;font-size:12.5px;color:var(--gm-ink-70);padding:7px 0;border-bottom:1px solid var(--gm-line)}
.ticker .e:last-child{border-bottom:0}
.ticker .e .d{color:var(--gm-ink-50);flex:none;font-size:11.5px;width:120px}
#acWho .e{display:flex;gap:10px;padding:7px 0;font-size:13px;border-bottom:1px solid var(--gm-line)}
#acWho .e:last-child{border-bottom:0}
#acWho .e .d{flex:none}

/* type scale utilities (the system's ladder — display / h1 / h2 / h3 / body / small / micro) */
.t-display{font-size:40px;line-height:1.08;font-weight:700;letter-spacing:-.022em}
.t-h1{font-size:30px;line-height:1.15;font-weight:700;letter-spacing:-.015em}
.t-h2{font-size:22px;line-height:1.25;font-weight:700;letter-spacing:-.01em}
.t-h3{font-size:17px;line-height:1.35;font-weight:500}
.t-body{font-size:15px;line-height:1.55}
.t-small{font-size:13.5px;line-height:1.5}
.t-micro{font-size:12px;line-height:1.4;font-weight:500;text-transform:uppercase;letter-spacing:.07em}

/* ── the register MASTHEAD (Register C): a full-bleed red band opens the register
      with its name and a big record count; a black owner strip beneath it; then the
      floating toolbar. One treatment, every register. ── */
.mast{display:flex;align-items:flex-end;gap:16px;padding:22px 24px;color:#fff}
.mast.band-red{background:var(--gm-band-red)}
.mast .t-micro{color:rgba(255,255,255,.66)}
.mast h1{margin:2px 0 0;font-size:30px;font-weight:700;letter-spacing:-.018em;color:#fff}
.mast p{margin:4px 0 0;font-size:13.5px;color:rgba(255,255,255,.78);max-width:60ch}
.mast-count{text-align:end;flex:none}
.mast-num{display:block;font-size:40px;font-weight:700;line-height:1;letter-spacing:-.02em}
.ownerstrip{padding:9px 24px;background:var(--gm-band-ink);color:rgba(255,255,255,.82);font-size:12.5px}
@media(max-width:640px){.mast{flex-wrap:wrap;padding:16px}.mast-num{font-size:30px}.ownerstrip{padding:9px 16px}}

/* page head */
.ph{display:flex;align-items:flex-end;gap:12px;margin-bottom:16px}
.ph h1{margin:0;font-size:30px;font-weight:700;letter-spacing:-.018em}
.ph p{margin:4px 0 0;color:var(--gm-ink-50);font-size:13.5px;max-width:74ch}
/* ^ without a cap the page intro ran the full window width, jutting far past the cards below it. */
.ph .spacer{flex:1}
.legend{display:flex;gap:14px;font-size:11.5px;color:var(--gm-ink-50);margin-bottom:14px;flex-wrap:wrap}
.callout{display:flex;gap:12px;padding:15px 18px;background:var(--gm-surface-2);border-inline-start:4px solid var(--gm-gold);border-radius:0 var(--r-m) var(--r-m) 0;margin-bottom:18px;font-size:13px}

/* ── dense data: rows stay FLAT. The card is the only clay object here. ── */
table{width:100%;border-collapse:collapse}
/* The header band was --gm-surface-2 (#EDE7E4), a hair off the page canvas (#F4F0EE), so the row
   of column labels read as a faint smudge rather than a deliberate header. --gm-surface-3 is a
   clear step darker than both the white card it sits in and the page behind it, and a 2px rule
   in the stronger line colour anchors it as the top of the table. */
th{text-align:start;font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--gm-ink-70);
  font-weight:600;padding:12px 16px;background:var(--gm-surface-3);border-bottom:2px solid var(--gm-line-2)}
/* ^ headers may wrap to two lines: nowrap forced each column as wide as its full header
   text, pushing tables past the card edge on ordinary laptop screens. */
td{padding:12px 16px;border-bottom:1px solid var(--gm-line);vertical-align:top;font-size:13px}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--gm-surface-2)}
td .nm{font-weight:500}
td .sub{color:var(--gm-ink-50);font-size:11.5px;margin-top:1px}

/* status pills */
.s{display:inline-block;font-size:11px;font-weight:500;padding:3px 10px;border-radius:var(--r-pill);white-space:nowrap}
.s.green{color:var(--gm-green-ink);background:var(--gm-green-wash)}   /* verified / done */
.s.red{color:var(--gm-red-ink);background:var(--gm-red-wash)}
.s.amber{color:var(--gm-gold-ink);background:var(--gm-gold-wash)}
.s.grey,.s.none{color:var(--gm-ink-70);background:var(--gm-surface-2)}
.prov{display:inline-block;font-size:10px;font-weight:500;padding:2px 8px;border-radius:var(--r-s);text-transform:uppercase;letter-spacing:.4px}
.prov.confirmed{color:var(--gm-green-ink);background:var(--gm-green-wash)}
.prov.assumed{color:var(--gm-gold-ink);background:var(--gm-gold-wash)}
.prov.closed{color:var(--gm-ink-50);background:var(--gm-surface-2)}

footer{max-width:1180px;margin:0 auto;padding:8px 22px 34px;color:var(--gm-ink-50);font-size:11.5px;display:flex;align-items:center;gap:8px}

/* login */
.login-wrap{min-height:100vh;display:grid;place-items:center;background:var(--gm-band-ink);padding:20px}
.login-card{background:var(--gm-surface);border-radius:var(--r-xl);box-shadow:0 24px 70px rgba(0,0,0,.45);width:100%;max-width:380px;overflow:hidden}
.login-top{background:var(--gm-band-ink);padding:26px;text-align:center}
.login-body{padding:26px}
.login-body label{display:block;font-size:12px;font-weight:500;color:var(--gm-ink-70);margin:12px 0 5px}
.login-body input{width:100%;padding:11px 13px;border:1px solid var(--gm-line-2);border-radius:var(--r-s);font:inherit;font-size:14px;background:var(--gm-canvas);color:var(--gm-ink)}
.login-body .b.primary{width:100%;justify-content:center;margin-top:18px;padding:12px}
.err{color:var(--gm-danger);font-size:12.5px;margin-top:10px;min-height:16px}
.note{font-size:11.5px;color:var(--gm-ink-50);margin-top:14px;text-align:center}

/* ── the TOP PANE: parent areas as pills, one level lifted out of the sidebar ──
      Pinned pages first, a separator, then one pill per area. The active area is
      red (brand); the "waiting on you" badge rides its area pill. ── */
.topnav{position:sticky;top:55px;z-index:4;display:flex;align-items:center;gap:4px;
  padding:8px 18px;background:var(--gm-surface);border-bottom:1px solid var(--gm-line);
  overflow-x:auto;white-space:nowrap;scrollbar-width:thin;
  /* twelve areas don't fit below ~1450px. It scrolls, but with no gutter the last pill was
     sliced flush against the window edge and looked cut off. A right gutter keeps the last
     pill clear, and the fade signals there is more to scroll to. */
  padding-inline-end:34px;
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent);
  mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent)}
.tn-item{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:var(--r-pill);
  font-size:12.5px;font-weight:500;color:var(--gm-ink-70);text-decoration:none;flex:none;
  transition:background var(--dur-press) var(--ease-out)}
.tn-item:hover{background:var(--gm-surface-2);color:var(--gm-ink);text-decoration:none}
.tn-item.on{background:var(--gm-red-wash);color:var(--gm-red-ink);font-weight:700}
.tn-sep{width:1px;height:20px;background:var(--gm-line-2);margin:0 6px;flex:none}
@media(max-width:640px){.topnav{padding:8px 12px}}

/* ---- sidebar shell, registers, conflicts, documents ---- */
.shell{display:flex;align-items:flex-start}
.side{width:244px;flex:none;padding:14px 10px;border-inline-end:1px solid var(--gm-line);background:var(--gm-surface);position:sticky;top:101px;height:calc(100vh - 101px);overflow-y:auto}
.content{flex:1;min-width:0;max-width:none;margin:0;padding:22px 22px 92px}
/* ^ bottom clearance so the fixed "?" button never covers the last row's actions (see main{}). */
.navpinned{margin-bottom:6px}
/* Domain accordion (DR-0018): pinned links, a "Find a page" filter, then always-visible
   group headers you click to open/close. Every area lives in exactly one place. */
.navfilter{width:100%;margin:8px 0 10px;padding:9px 12px;border:1px solid var(--gm-line-2);border-radius:var(--r-s);font:inherit;font-size:12.5px;background:var(--gm-canvas);color:var(--gm-ink)}
/* ^ full width, no side margin — was inset 4px from the nav rows below it, so no edge lined up. */
.navfilter::placeholder{color:var(--gm-ink-50)}
.navtree{display:flex;flex-direction:column;gap:1px}
.navg-h{display:flex;align-items:center;gap:8px;width:100%;padding:9px 11px;border:0;border-radius:var(--r-s);background:none;font:inherit;font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.6px;color:var(--gm-ink-50);cursor:pointer;text-align:start}
.navg-h:hover{background:var(--gm-surface-2);color:var(--gm-ink)}
.navg-t{flex:1;min-width:0}
.navg-n{flex:none;font-size:11px;font-weight:500;color:var(--gm-ink-50);text-transform:none;letter-spacing:0}
.navg-h .chev{flex:none;font-size:10px;color:var(--gm-ink-30);transition:transform 150ms var(--ease-out)}
.navgroup.open .navg-h .chev,.navgroup.filter-open .navg-h .chev{transform:rotate(90deg)}
.navg-body{display:grid;grid-template-rows:0fr;grid-template-columns:minmax(0,1fr);overflow:hidden}
.navgroup.open .navg-body,.navgroup.filter-open .navg-body{grid-template-rows:1fr}
.navgroup.animate .navg-body{transition:grid-template-rows 180ms var(--ease-out)}
.navg-body > div{min-height:0;min-width:0;padding-bottom:4px}
.navg-body .navitem{padding-inline-start:22px;font-size:12.5px}
@media (prefers-reduced-motion: reduce){.navgroup.animate .navg-body{transition:none}.navg-h .chev{transition:none}}
.navitem{position:relative;display:flex;align-items:center;gap:8px;padding:8px 11px;border-radius:var(--r-s);color:var(--gm-ink-70);font-size:13px;font-weight:400;text-decoration:none;border-inline-start:3px solid transparent}
.navitem .nl{flex:1;min-width:0;line-height:1.3}
.navitem:hover{background:var(--gm-surface-2);color:var(--gm-ink)}
.navitem:hover{text-decoration:none}
.navitem.on{background:var(--gm-red-wash);color:var(--gm-red-ink);font-weight:500;border-inline-start-color:var(--gm-red)}
/* The "holds your data" dot sits in the side-panel's start padding (absolute), so a row WITH a
   dot and a row WITHOUT one share the same label left-edge — before, the dot pushed its label
   ~14px right and the list read as a ragged two-indent staircase. */
.navg-body .navitem{padding-inline-start:24px}
.navg-body .navitem .dot{position:absolute;inset-inline-start:9px;top:50%;transform:translateY(-50%)}
.navitem .dot{flex:none;width:6px;height:6px;border-radius:50%;background:var(--gm-ink-30)}
.navitem.on .dot{background:var(--gm-red)}
/* empty registers stay visible and dignified — regulated scaffolding, not clutter */
.navitem.is-empty{color:var(--gm-ink-50);font-weight:400}
.navitem.is-empty:hover{color:var(--gm-ink-70)}
.setup-tag{flex:none;font-size:10px;font-weight:500;color:var(--gm-ink-50);border:1px solid var(--gm-line-2);border-radius:var(--r-s);padding:1px 7px}
.nb{flex:none;font-size:12px;font-weight:500;color:var(--gm-ink-50)}
.nb.urgent{background:var(--gm-red);color:#fff;font-weight:700;border-radius:var(--r-pill);padding:1px 8px}
@media(max-width:820px){.shell{display:block}.side{width:auto;position:static;height:auto;border-inline-end:0;border-bottom:1px solid var(--gm-line)}}
@media(max-width:640px){header{gap:10px;padding:11px 14px}.who{display:none}}

.toolbar{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.search{flex:1;max-width:280px;padding:9px 13px;border:1px solid var(--gm-line-2);border-radius:var(--r-m);font:inherit;font-size:13px;background:var(--gm-surface);color:var(--gm-ink)}

.conflict{background:var(--gm-surface);border:var(--gm-clay-edge);border-inline-start:4px solid var(--gm-ink-30);border-radius:var(--r-l);box-shadow:var(--gm-shadow);padding:16px 20px;margin-bottom:12px}
.conflict.red{border-inline-start-color:var(--gm-danger)}
.conflict.amber{border-inline-start-color:var(--gm-gold)}
.conflict .ch{font-size:16px;font-weight:700;margin-bottom:6px}
.conflict .cnote{color:var(--gm-ink-70);font-size:13px}
.conflict .cparties{display:flex;gap:7px;margin:10px 0;flex-wrap:wrap}
.conflict .caction{font-size:12.5px;color:var(--gm-ink-50)}
.scanline{padding:14px 17px;background:var(--gm-surface-2);border-radius:var(--r-m);margin-bottom:16px;font-size:13px;color:var(--gm-ink-70)}

.doc{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--gm-line);font-size:13px}
.doc:last-child{border-bottom:0}
.doc .docname{flex:1;font-weight:500;color:var(--gm-ink)}

/* ---- edit forms, approvals, team ---- */
.modal-bg{position:fixed;inset:0;background:rgba(20,16,15,.5);display:grid;place-items:center;z-index:20;padding:16px}
.modal{background:var(--gm-surface);border-radius:var(--r-xl);box-shadow:0 24px 70px rgba(0,0,0,.45);width:100%;max-width:460px;max-height:88vh;overflow:auto}
.modal .mh{display:flex;align-items:center;gap:10px;padding:16px 22px;border-bottom:1px solid var(--gm-line)}
.modal .mh h3{margin:0;font-size:17px;font-weight:700}
.modal .mh .spacer{flex:1}
.modal .x{cursor:pointer;color:var(--gm-ink-50);font-size:22px;line-height:1;background:none;border:0}
.modal .mb{padding:8px 22px 18px}
.modal label{display:block;font-size:11.5px;font-weight:500;color:var(--gm-ink-70);margin:12px 0 4px}
.modal input,.modal textarea,.modal select{width:100%;padding:10px 12px;border:1px solid var(--gm-line-2);border-radius:var(--r-s);font:inherit;font-size:13px;background:var(--gm-canvas);color:var(--gm-ink)}
.modal .mf{display:flex;gap:8px;justify-content:flex-end;padding:15px 22px;border-top:1px solid var(--gm-line)}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--gm-band-ink);color:#fff;padding:12px 20px;border-radius:var(--r-pill);font-size:13px;z-index:30;box-shadow:0 10px 30px rgba(0,0,0,.4)}
/* small confirm dialog (askDialog) — sensitive Level-3 grants + approvals */
.gmov{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;padding:18px}
.gmov-card{background:var(--gm-surface);border:var(--gm-clay-edge);border-radius:var(--r-xl);box-shadow:0 20px 56px rgba(0,0,0,.4);padding:22px;width:100%;max-width:420px}
.gmov-card h3{margin:0 0 8px;font-size:17px;font-weight:700}
.gmov-in{width:100%;padding:10px 12px;margin-bottom:10px;border:1px solid var(--gm-line-2);border-radius:var(--r-s);font:inherit;font-size:13px;background:var(--gm-canvas);color:var(--gm-ink)}
.gmov-acts{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}
.grantrow{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 0;border-bottom:1px solid var(--gm-line)}
.grantrow:last-child{border-bottom:0}
.grantacts{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lockcell{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--gm-ink-50);background:var(--gm-surface-2);border:1px solid var(--gm-line-2);border-radius:var(--r-s);padding:2px 8px;white-space:nowrap}
/* committee follow-up box — sits under the answers so you continue without scrolling up */
.followform{margin-top:16px;padding-top:14px;border-top:1px solid var(--gm-line)}
.followform textarea{width:100%;padding:11px 13px;border:1px solid var(--gm-line-2);border-radius:var(--r-m);font:inherit;font-size:13.5px;background:var(--gm-canvas);color:var(--gm-ink);resize:vertical}
.followrow{display:flex;align-items:center;gap:10px;margin-top:8px;flex-wrap:wrap}
/* task assignee picker */
.assignbox{position:relative}
.assignfield{display:flex;align-items:center;flex-wrap:wrap;gap:4px;border:1px solid var(--gm-line-2);border-radius:var(--r-m);padding:5px 7px;background:var(--gm-canvas);min-height:40px}
.assignfield input{border:0;outline:0;background:none;flex:1;min-width:90px;font:inherit;font-size:13px;color:var(--gm-ink);padding:3px}
.chip-a{display:inline-flex;align-items:center;gap:5px;background:var(--gm-surface-2);border:1px solid var(--gm-line-2);border-radius:var(--r-pill);padding:3px 10px;font-size:12px;cursor:pointer}
.chip-a b{color:var(--gm-ink-50);font-weight:500}
.assignsug{position:absolute;z-index:20;top:100%;left:0;right:0;margin-top:4px;background:var(--gm-surface);border:1px solid var(--gm-line-2);border-radius:var(--r-m);box-shadow:var(--gm-shadow-2);max-height:220px;overflow-y:auto}
.assugitem{padding:9px 12px;font-size:13px;cursor:pointer}
.assugitem:hover{background:var(--gm-surface-2)}
.rowact{color:var(--gm-red-ink);font-weight:500;cursor:pointer;font-size:12px;white-space:nowrap}
/* Arabic-aware text: each block picks its direction from its first strong character */
#answer,#answer *,#croom,#askq,.pending .pt,.pending .pm,.note{unicode-bidi:plaintext}
/* the task board: Open / In progress / Done — three recessed wells, cards extruded out */
.taskboard{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;padding:14px;align-items:start}
.taskboard .tcol{min-width:0;background:var(--gm-surface-2);box-shadow:var(--gm-well);border-radius:var(--r-m);padding:10px}
.taskboard .tcol .amtitle{margin:2px 4px 10px}
.taskboard .pending{flex-wrap:wrap;cursor:grab;background:var(--gm-surface);border:var(--gm-clay-edge);border-radius:var(--r-m);box-shadow:var(--gm-shadow);border-bottom:0;margin-bottom:8px;padding:13px 15px}
.taskboard .pending:last-child{margin-bottom:0}
.taskboard .empty{padding:20px 12px}
.taskboard .pending.dragging{opacity:.45}
.taskboard .tcol.dropready{outline:2px dashed var(--gm-gold);outline-offset:4px;border-radius:var(--r-m)}
@media(max-width:880px){.taskboard{grid-template-columns:1fr}}
.pending{display:flex;gap:12px;padding:15px 20px;border-bottom:1px solid var(--gm-line)}
.pending:last-child{border-bottom:0}
.pending .pi{flex:1}
.pending .pt{font-weight:700}
.pending .pm{font-size:12px;color:var(--gm-ink-50);margin-top:4px}
.pending .pacts{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
/* the consent gate — full screen, nothing behind it, no way past but agreeing or leaving */
.policygate{position:fixed;inset:0;z-index:60;background:var(--gm-canvas);display:grid;place-items:center;padding:20px;overflow:auto}
.policycard{background:var(--gm-surface);border:var(--gm-clay-edge);border-radius:var(--r-xl);box-shadow:var(--gm-shadow-2);
  width:100%;max-width:660px;max-height:92vh;display:flex;flex-direction:column;overflow:hidden}
.policycard>.hd{padding:18px 24px;color:#fff;background:var(--gm-band-ink)}
.policycard>.hd h2{margin:0;font-size:20px;font-weight:700}
.policycard>.hd .sub{font-size:12.5px;color:rgba(255,255,255,.74);margin-top:3px}
.policybody{padding:20px 24px 8px;overflow-y:auto;flex:1}
.policybody h3{margin:0 0 2px}
.policyfoot{padding:16px 24px 20px;border-top:1px solid var(--gm-line);background:var(--gm-surface-2)}
.policyagree{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;line-height:1.5;cursor:pointer}
.policyagree input{margin-top:3px;flex:none;width:17px;height:17px;accent-color:var(--gm-red)}

/* People & Access — three blocks (Active / Waiting for approval / Switched off),
   each numbered and A-Z, so a growing team stays readable. */
.ublock{margin-bottom:22px}
.ublock-h{display:flex;align-items:center;gap:10px;margin-bottom:2px}
.ublock-sub{font-size:12.5px;color:var(--gm-ink-50);margin:0 0 10px}
.unum{display:inline-grid;place-items:center;min-width:22px;height:22px;margin-inline-end:8px;
  border-radius:var(--r-pill);background:var(--gm-surface-2);color:var(--gm-ink-70);
  font-size:11.5px;font-weight:500;flex:none}

/* People & Access — per-user expandable card with the access map */
.ucard{border:var(--gm-clay-edge);border-radius:var(--r-m);margin-bottom:8px;background:var(--gm-surface);box-shadow:var(--gm-shadow)}
/* the owner's entry: same card as everyone else, but nothing to expand */
.ucard-flat{padding:13px 16px}
.ucard-flat .pt{font-weight:700;font-size:13.5px;display:flex;align-items:center;gap:8px}
.ucard-flat .pm{font-size:12px;color:var(--gm-ink-50);margin-top:4px}
.ucard>summary{padding:13px 16px;cursor:pointer;font-size:13.5px;list-style:none;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ucard>summary::-webkit-details-marker{display:none}
.ucard>summary::before{content:"▸";color:var(--gm-ink-30);font-size:10px}
.ucard[open]>summary::before{content:"▾"}
.ucard[open]>summary{border-bottom:1px solid var(--gm-line)}
.ubody{padding:13px 16px}
.amtitle{font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:var(--gm-ink-70);margin:14px 0 6px}
.amap{border:1px solid var(--gm-line);border-radius:var(--r-m);overflow:hidden}
.amgroup{padding:7px 13px;font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;color:var(--gm-ink-70);background:var(--gm-surface-2)}
.arow{display:flex;align-items:center;gap:10px;padding:8px 13px;border-top:1px solid var(--gm-line);font-size:12.5px}
.arow .an{flex:1;min-width:0}
.arow .areasel{flex:none;font-size:12px;padding:3px 7px}
.uact .e{display:flex;gap:9px;font-size:12.5px;color:var(--gm-ink-70);padding:6px 0;border-top:1px solid var(--gm-line)}
.uact .d{color:var(--gm-ink-50);white-space:nowrap}

/* settings form rows (outside modals) */
.frow{margin:0 0 12px}
.frow label{display:block;font-size:11.5px;font-weight:500;color:var(--gm-ink-70);margin:0 0 5px}
.frow input{width:100%;max-width:520px;padding:10px 12px;border:1px solid var(--gm-line-2);border-radius:var(--r-s);font:inherit;font-size:13px;background:var(--gm-canvas);color:var(--gm-ink)}

/* ── craft layer (Emil): focus, press, empty, print ──────────────────── */
.btn-ghost,.rowact,.navitem{transition:transform var(--dur-press) var(--ease-out),background var(--dur-press) var(--ease-out)}
.btn-ghost:active,.rowact:active{transform:scale(.97)}
/* focus is INK on light (gold on white is 1.84:1 and fails as an indicator),
   GOLD on dark (9.36:1). The halo is decoration; the ring carries the contrast. */
:focus-visible{outline:3px solid var(--gm-focus);outline-offset:2px;border-radius:var(--r-s)}
.b:focus-visible,.navitem:focus-visible{box-shadow:0 0 0 6px var(--gm-focus-halo)}
input:focus,textarea:focus,select:focus{outline:3px solid var(--gm-focus);outline-offset:1px;border-color:var(--gm-line-2)}
.modal{transition:opacity var(--dur-modal) var(--ease-out)}
@starting-style{.modal{opacity:0}}
/* the empty register — 33 of these exist by design (DR-0018). Dignified, never "broken". */
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:48px 20px;text-align:center}
.empty-glyph{width:64px;height:64px;border-radius:var(--r-l);display:grid;place-items:center;background:var(--gm-surface-2);box-shadow:var(--gm-well);color:var(--gm-green);font-size:22px}
.empty-glyph.neutral{color:var(--gm-ink-30)}
.empty-msg{font-weight:700;font-size:17px;color:var(--gm-ink)}
.empty-sub{font-size:13.5px;color:var(--gm-ink-70);max-width:46ch;line-height:1.55}
.welcome{border-inline-start:4px solid var(--gm-red);margin-bottom:18px}
.welcome-b{padding:4px 20px 17px;font-size:13.5px;line-height:1.6;color:var(--gm-ink-70)}
.welcome-b p{margin:0 0 10px}
.welcome-b p:last-child{margin-bottom:0}
.cell-none{color:var(--gm-ink-30)}
.btn-link{background:none;border:0;color:var(--gm-ink-50);font:inherit;font-size:12.5px;text-decoration:underline;cursor:pointer;padding:8px 0 0;display:block}
.btn-link:hover{color:var(--gm-ink-70)}

/* committee "room" — seat tiles; the chair convenes the relevant seats per question */
.croomcap{font-size:12.5px;color:var(--gm-ink-50);min-height:15px;margin-bottom:8px}
#croom.thinking .croomcap{color:var(--gm-ink-70)}
.croomtop{display:flex;justify-content:center;margin-bottom:10px}
.croomtop .cseat{width:150px}
/* the room CENTRES. A fixed 9-column grid left a short final row stretched and
   off-centre once the roster was consolidated to 13 seats — flex-wrap keeps every
   row centred whatever the seat count. */
.croomrow{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:10px}
.croomrow .cseat{width:132px;flex:none;padding:12px 8px}
@media(max-width:900px){.croomrow .cseat{width:118px}}
@media(max-width:560px){.croomrow .cseat{width:104px}}
.cseat{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:13px 8px;border:var(--gm-clay-edge);border-radius:var(--r-m);background:var(--gm-surface);box-shadow:var(--gm-shadow);transition:opacity .25s ease}
.cav{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--gm-surface-2);color:var(--gm-ink-70);transition:background .25s ease,color .25s ease}
.cav svg{width:22px;height:22px}
.cnm{font-size:12.5px;color:var(--gm-ink);line-height:1.2}
.cti{font-size:11px;color:var(--gm-ink-50);line-height:1.15}
.cseat.off{opacity:.38}
.cseat.on .cav{background:var(--gm-red-wash);color:var(--gm-red-ink)}
@keyframes cpulse{0%,100%{opacity:.4}50%{opacity:1}}
#croom.thinking .cseat.on .cav{animation:cpulse 1.25s ease-in-out infinite}
#croom.thinking .cseat.on:nth-child(3n+2) .cav{animation-delay:.15s}
#croom.thinking .cseat.on:nth-child(3n) .cav{animation-delay:.32s}
.qbubble{background:var(--gm-surface-2);border:1px solid var(--gm-line);border-radius:var(--r-m);padding:10px 14px;margin:16px 0 8px;font-size:13.5px;color:var(--gm-ink);font-weight:400}
.qbubble::before{content:"You asked";display:block;font-size:10.5px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--gm-ink-50);margin-bottom:4px}

/* floating help — the plain-English glossary as a slide-out panel on every page */
.helpbtn{position:fixed;right:18px;bottom:18px;width:44px;height:44px;border-radius:50%;background:var(--gm-band-ink);color:#fff;border:0;font-size:20px;font-weight:500;cursor:pointer;z-index:40;box-shadow:var(--gm-shadow-2)}
.helppanel{position:fixed;right:18px;bottom:72px;width:340px;max-width:calc(100vw - 36px);max-height:min(60vh,460px);background:var(--gm-surface);border:var(--gm-clay-edge);border-radius:var(--r-l);box-shadow:var(--gm-shadow-2);z-index:40;display:flex;flex-direction:column;overflow:hidden}
.helppanel.hidden{display:none}
.hph{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:1px solid var(--gm-line);font-size:14px;font-weight:700}
.hpx{background:none;border:0;font-size:15px;cursor:pointer;color:var(--gm-ink-50)}
.helppanel #helpsearch{margin:10px 16px 6px;width:calc(100% - 32px)}
.hplist{overflow-y:auto;padding:0 16px 16px}
.hpterm{padding:10px 0;border-top:1px solid var(--gm-line);font-size:12.5px;line-height:1.55}
.hpterm b{display:block;color:var(--gm-ink)}
.hpterm span{color:var(--gm-ink-70)}

/* Financial statements — the three formal forms (finance-statements.html) */
.fsbar-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:15px 18px}
.fsbar-lbl{font-size:12px;font-weight:500;color:var(--gm-ink-70)}
.fs-sel{padding:8px 11px;border:1px solid var(--gm-line-2);border-radius:var(--r-s);font:inherit;font-size:13px;background:var(--gm-surface);color:var(--gm-ink);max-width:280px}
.fsnewform{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:0 18px 15px;border-top:1px solid var(--gm-line);margin-top:2px;padding-top:15px}
.fsnewform.hidden{display:none}
.fsnewform input[type=text],.fsnewform input:not([type]),.fsnewform #fsLabel,.fsnewform input[type=date],.fsnewform select{padding:8px 11px;border:1px solid var(--gm-line-2);border-radius:var(--r-s);font:inherit;font-size:13px;background:var(--gm-surface);color:var(--gm-ink)}
.fschk{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--gm-ink-70)}
.fs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:18px;align-items:start}
.fs-card .hd{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.fs-check{margin:0 18px 4px;font-size:12.5px}
table.fs{width:100%;border-collapse:collapse;font-size:13px}
table.fs td{padding:7px 18px;border-bottom:1px solid var(--gm-line)}
table.fs .fs-lbl{color:var(--gm-ink-70)}
table.fs .fs-hint{color:var(--gm-ink-50);font-size:11px}
table.fs .fs-cell{text-align:end;white-space:nowrap;width:44%}
table.fs .fs-head td{font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;color:var(--gm-ink-70);padding-top:13px;border-bottom:2px solid var(--gm-line-2)}
table.fs .fs-sub td{font-weight:700;color:var(--gm-ink);padding-top:10px;border-bottom:none}
table.fs .fs-total td{font-weight:700;background:var(--gm-surface-2)}
table.fs .fs-grand td{font-weight:700;color:var(--gm-ink);border-top:2px solid var(--gm-line-2);border-bottom:2px solid var(--gm-line-2)}
.fs-in{width:130px;padding:6px 9px;border:1px solid var(--gm-line-2);border-radius:var(--r-s);font:inherit;font-size:12.5px;text-align:end;background:var(--gm-surface);color:var(--gm-ink);font-variant-numeric:tabular-nums}

/* accessibility floor: keep colour and opacity, drop movement */
@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* print-to-PDF: hide the app chrome, show a dated stamp, keep cards clean */
.print-stamp{display:none}
@media print{
  header,.side,.flagbar,.strip,.ctl,.search,.rowact,.b,.btn-ghost,#netbanner,#addbtn,.toast,#fsbar,.navfilter,.helpbtn,.helppanel{display:none!important}
  .shell{display:block}.content{margin:0;padding:0}
  .card{box-shadow:none;border:1px solid #ccc;break-inside:avoid}
  body{background:#fff;color:#000}
  .print-stamp{display:block;font-size:11px;color:#555;margin:0 0 10px}
  .fs-grid{display:block}.fs-card{margin-bottom:14px}
  .fs-in{border:none;background:none;width:auto;text-align:end}
}