/* GOSOMEWHERE — the page design Asa approved on 18 Sep 2026 (the lead page, the client page and the
   Leads Board mockups: "Lead Page, Whole", "Client Page, Whole", "Leads Board, Whole"). One stylesheet
   so every page redesigned from here on uses the same parts rather than a copy of them.

   The rules this file encodes (the skill ~/.claude/skills/gosomewhere/SKILL.md has the whole method):
     · a light header with a slow living wash — never a dark band;
     · one card everywhere: heading, icon tile, and a line in the card's colour UNDER the heading that
       draws in and now and then catches the light. NEVER a bar down or across one edge of a card;
     · bold for headings only — values, labels, chips and buttons are regular or medium;
     · two columns at most;
     · purple is Aby and nothing else; red is commit (Save) and alarm, nothing else;
     · motion is quiet and one-shot (draw, rise, count-up), except the glint and the "now" ping;
       everything stops under prefers-reduced-motion.

   Tokens come from tkb.css (--line, --stone, --ink, --t-*, --r-*); the fallbacks are the same values,
   so a page outside the app still renders. A card chooses its colour with a tone class
   (gw-who, gw-money, gw-paper, gw-words, gw-work, gw-clock, gw-ai, gw-safe) or by setting --gw-tone
   and --gw-tint itself. */

/* ── tones ─────────────────────────────────────────────────────────────────────────────────────── */
/* THE FIVE MEANING COLOURS, AND NOTHING ELSE (Asa, 21 Oct 2026, of the palette sheet: "i like these colours —
   the red, maroon, green, purple, gold — lets use these with meaning", for card tones, table headers, status
   chips and header figures). A card's tone now says what the card MEANS in those five: people and things going
   well are green, money is maroon, documents and passports gold, late and safety red, Aby purple. A card with no
   meaning of that kind is graphite — the chrome, not a sixth colour. Blue and brown are gone.
   The switch back is one class on <html>: palette-classic (localStorage gs.palette = "classic"). */
.gw-who{--gw-tone:var(--good,#1D9E75);--gw-tint:var(--good-bg,#E1F5EE)}
.gw-money{--gw-tone:var(--commit-deep,#8E1B1B);--gw-tint:var(--maroon-tint,#F4E5E3)}
.gw-paper{--gw-tone:var(--amber,#BA7517);--gw-tint:var(--amber-bg,#F7EEDD)}
.gw-words{--gw-tone:var(--plum,#3F3A35);--gw-tint:var(--cream-2,#F3EEE8)}
.gw-work{--gw-tone:var(--plum,#3F3A35);--gw-tint:var(--cream-2,#F3EEE8)}
.gw-clock{--gw-tone:var(--commit,#BD2424);--gw-tint:var(--commit-tint,#F6E0E0)}
.gw-ai{--gw-tone:var(--purple,#7F77DD);--gw-tint:var(--purple-bg,#EEEDFE)}
.gw-safe{--gw-tone:var(--commit,#BD2424);--gw-tint:var(--commit-tint,#F6E0E0)}
.palette-classic .gw-money{--gw-tone:#8A5A12;--gw-tint:#F7EEDD}
.palette-classic .gw-paper{--gw-tone:#6B5B3E;--gw-tint:#F3EEE8}
.palette-classic .gw-words{--gw-tone:#2E6BA8;--gw-tint:#E7EEF7}
.palette-classic .gw-ai{--gw-tone:#3E36A8;--gw-tint:#EEEDFE}
.palette-classic .gw-safe{--gw-tone:#B4432F;--gw-tint:#FBE9E4}

/* ── the living header ─────────────────────────────────────────────────────────────────────────── */
.gw-head{position:relative;overflow:hidden;isolation:isolate;background:var(--paper,#fff);border:1px solid var(--line,#E1DCD7);
  border-radius:var(--r-panel,16px);padding:16px 18px;display:grid;gap:12px;margin-bottom:12px}
.gw-head::before,.gw-head::after{content:"";position:absolute;z-index:-1;border-radius:50%;pointer-events:none}
.gw-head::before{right:-12%;top:-130%;width:60%;height:360%;background:radial-gradient(closest-side,rgba(189,36,36,.07),transparent 70%);animation:gwDrift 20s ease-in-out infinite alternate}
.gw-head::after{left:-12%;bottom:-170%;width:55%;height:340%;background:radial-gradient(closest-side,rgba(127,119,221,.09),transparent 70%);animation:gwDrift 24s ease-in-out infinite alternate-reverse}
.gw-hrow{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.gw-hrow h1{margin:0;font-family:var(--disp,inherit);font-size:var(--t-2xl,26px);font-weight:800;letter-spacing:-.01em;line-height:1.1}
.gw-sub{font-size:var(--t-sm,12.5px);color:var(--stone,#675E54)}
.gw-acts{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.gw-facts{display:flex;gap:10px 24px;align-items:center;flex-wrap:wrap;padding-top:12px;border-top:1px solid var(--cream-2,#F3EEE8)}
.gw-fact{display:grid;line-height:1.25}
.gw-fact small,.gw-k{font-size:var(--t-micro,10px);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--stone,#675E54)}
.gw-fact span{font-weight:500}
.gw-fact b{font-family:var(--disp,inherit);font-size:var(--t-xl,19px);font-weight:600}
/* A hairline between figures so a row of six reads as six (Asa, 19 Sep 2026: "too heavy on the eye —
   vertical divider lines to separate"). Structural, full height, the same grey as every hairline — not an
   accent. A figures row that wraps starts each line clean. */
.gw-facts{column-gap:0}
.gw-fact{padding:0 22px}
.gw-fact:first-child{padding-left:0}
.gw-fact + .gw-fact{border-left:1px solid var(--line,#E1DCD7)}
.gw-fact b.gw-red{color:var(--bad,#BD2424)}

/* ── the health ring (an SVG sized in its own attributes, 40×40, circle r=15.5) ──────────────── */
.gw-ring{position:relative;width:40px;height:40px;flex:none}
.gw-ring svg{width:40px;height:40px;transform:rotate(-90deg)}
.gw-ring svg .gw-arc{transition:stroke-dashoffset 1.4s cubic-bezier(.2,.8,.2,1)}
.gw-ring b{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--disp,inherit);font-size:var(--t-sm,12.5px);font-weight:600}

/* ── the journey as a route: stops joined by segments, filled to where it is ────────────────── */
.gw-route{display:flex;align-items:center;flex-wrap:wrap}
.gw-stop{display:inline-flex;align-items:center;gap:6px;padding:0 6px;font-size:var(--t-xs,11px);font-weight:500;color:#A59C92}
.gw-stop::before{content:"";width:8px;height:8px;border-radius:50%;border:2px solid #D5CDC4;background:#fff}
.gw-stop.done{color:var(--ink-soft,#3F3A35)}
.gw-stop.done::before,.gw-stop.on::before{background:var(--bad,#BD2424);border-color:var(--bad,#BD2424)}
.gw-stop.on{color:var(--bad,#BD2424);font-weight:600}
.gw-stop.on::before{animation:gwPing 2.4s ease-out infinite}
.gw-seg{width:26px;height:2px;border-radius:999px;background:#E1DCD7;position:relative;overflow:hidden}
.gw-seg.done::after{content:"";position:absolute;inset:0;background:var(--bad,#BD2424);transform-origin:left;animation:gwDraw .5s .2s cubic-bezier(.2,.8,.2,1) both}

/* ── WHERE A PAGE'S BAR STICKS — the one place, on every page (Asa, 19 Sep 2026: "this will be the location
   for all sticky in every page"): docked in the strip at the very top of the window, beside where View as
   sits. Anything that follows a page as you scroll — the filter bar, the client's tabs, a board's bar —
   uses --gw-sticky-top and nothing else. */
:root{--gw-sticky-top:12px}
.gw-sticky,.gw-bar{position:sticky;top:var(--gw-sticky-top);z-index:30;box-shadow:0 8px 20px -14px rgba(63,58,53,.35)}

/* ── a quiet toolbar ───────────────────────────────────────────────────────────────────────────── */
.gw-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;background:var(--paper,#fff);border:1px solid var(--line,#E1DCD7);
  border-radius:var(--r-card,14px);padding:8px 10px;margin-bottom:12px}
.gw-tool{border:0;background:none;border-radius:var(--r-sm,8px);padding:6px 11px;font-size:var(--t-sm,12.5px);font-weight:500;color:var(--ink-soft,#3F3A35);cursor:pointer}
.gw-tool:hover{background:var(--cream-2,#F3EEE8)}
.gw-tool.gw-main{background:var(--ink-soft,#3F3A35);color:#fff}
/* The one act on a page where a person takes responsibility — raising an invoice, committing a
   number. Red, and never more than one per page: two commits means one of them is not. */
.gw-tool.gw-commit{background:var(--commit,#BD2424);color:#fff;font-weight:600}
.gw-tool.gw-commit:hover{background:#A81F1F}

/* ── tabs, as a segmented control ──────────────────────────────────────────────────────────────── */
.gw-tabs{display:flex;gap:4px;flex-wrap:wrap;background:var(--cream-2,#F3EEE8);border-radius:var(--r-md,12px);padding:3px}
.gw-tab{border:0;background:none;border-radius:var(--r-sm,8px);padding:5px 12px;font-size:var(--t-sm,12.5px);font-weight:500;color:var(--stone,#675E54);cursor:pointer}
.gw-tab.on{background:var(--paper,#fff);color:var(--ink,#080706);box-shadow:0 1px 3px rgba(0,0,0,.08)}

/* ── Aby's strip (questions, or a one-line prompt) — purple, slowly moving ─────────────────────── */
.gw-aby{display:flex;gap:8px;flex-wrap:wrap;align-items:center;border:1px solid #CFCBF2;border-radius:var(--r-card,14px);padding:8px 12px;margin-bottom:12px;
  background:linear-gradient(120deg,#EEEDFE,#F7F4FF 40%,#EAE6FD);background-size:300% 300%;animation:gwAby 22s ease-in-out infinite}
.gw-aby > b{font-family:var(--disp,inherit);font-size:var(--t-sm,12.5px);font-weight:800;color:#3E36A8}
.gw-ask{border:1px solid #CFCBF2;background:#fff;color:#3E36A8;border-radius:999px;padding:3px 11px;font-size:var(--t-sm,12.5px);font-weight:500;cursor:pointer}
.gw-ask:hover{background:#EEEDFE}

/* ── the one card ──────────────────────────────────────────────────────────────────────────────── */
/* ── A CARD SPACES ITSELF ───────────────────────────────────────────────────────────────────────
   Asa, 12 Oct 2026: "can you fix this spacing between blocks in gosomewhere — please fix this
   universally. Every new page you make this mistake; containers need spacing."

   He is right that it kept happening, and the reason was here: .gw-head carried margin-bottom and
   .gw-card carried none. So a page that stacked two cards got them touching, and every page author
   had to remember a margin the design system should have owned — which is exactly the kind of thing
   nobody remembers on the twentieth page. The gap belongs to the component, once.

   14px, the same number .gw-two already uses as its grid gap, so a stacked column and a two-column
   row are spaced identically. A card inside .gw-two takes its spacing from the grid instead, or the
   two would add up to 28px between rows. */
.gw-card{background:var(--paper,#fff);border:1px solid var(--line,#E1DCD7);border-radius:var(--r-panel,16px);padding:14px 16px;min-width:0;
  margin:0 0 14px}
.gw-two > .gw-card,
.gw-two > .gw-full > .gw-card:last-child{margin-bottom:0}
/* The same for anything else the house stacks straight onto a page. A table or a bar that ends flush
   against the next heading is the same fault wearing a different class. */
.gw-bar,.gw-deck,.gw-two,.gw-aby{margin-bottom:14px}
.gw-card > .tablewrap:last-child,.gw-card > :last-child{margin-bottom:0}
.gw-enter .gw-card{animation:gwRise .5s cubic-bezier(.2,.8,.2,1) both}
.gw-ch{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.gw-ch h3{margin:0;font-family:var(--disp,inherit);font-size:var(--t-lg,15px);font-weight:700;line-height:1.2;color:var(--ink,#080706)}
.gw-ch .gw-s{display:block;font-size:var(--t-xs,11px);color:var(--stone,#675E54)}
.gw-ch .gw-r{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.gw-ic{width:26px;height:26px;border-radius:var(--r-sm,8px);display:grid;place-items:center;flex:none;font-size:var(--t-sm,12.5px);
  background:var(--gw-tint,#F3EEE8);color:var(--gw-tone,#3F3A35)}
.gw-ic svg{width:15px;height:15px}
/* THE LINE UNDER THE HEADING — the one accent a card carries. Full width, under the heading; the card
   has no other rule there, so there is never a grey line and a coloured one together. */
.gw-line{display:block;position:relative;height:2px;border-radius:999px;margin:9px 0 12px;overflow:hidden;
  background:linear-gradient(90deg,var(--gw-tone,#8A8274) 0%,var(--gw-tone,#8A8274) 22%,var(--gw-tint,#F3EEE8) 62%,var(--cream-2,#F3EEE8) 100%);
  transform-origin:left;animation:gwDraw 1s .15s cubic-bezier(.2,.8,.2,1) both;transition:height .2s}
.gw-line::after{content:"";position:absolute;top:0;bottom:0;left:-70px;width:70px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent);animation:gwGlint 7s 1.6s ease-in-out infinite}
.gw-card:hover .gw-line{height:3px}

/* inside a card: a record (label / value rows), an unknown, a list row */
.gw-kv{display:grid;grid-template-columns:132px minmax(0,1fr);gap:4px 14px;padding:6px 0;border-top:1px solid var(--cream-2,#F3EEE8);align-items:baseline}
.gw-kv:first-of-type{border-top:0}
.gw-v{font-weight:500}
.gw-gap{justify-self:start;background:#FBF1D6;color:#875410;border-radius:6px;padding:0 7px;font-size:var(--t-xs,11px)}
.gw-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:8px 0;border-top:1px solid var(--cream-2,#F3EEE8)}
.gw-row:first-of-type{border-top:0}
.gw-chip{font-size:var(--t-xs,11px);font-weight:500;border:1px solid var(--line,#E1DCD7);background:var(--cream,#F9F2EB);border-radius:999px;padding:1px 9px}

/* ── layout: two columns at most ───────────────────────────────────────────────────────────────── */
.gw-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
.gw-two > .gw-full{grid-column:1/-1}
@media (max-width:900px){.gw-two{grid-template-columns:1fr}}

/* ── a board column (for pages not drawn by kboard, which has its own .kcol-line) ─────────────── */
.gw-col{background:rgba(255,255,255,.55);border:1px solid var(--line,#E1DCD7);border-radius:var(--r-panel,16px);padding:10px}
.gw-col h4{margin:0;font-family:var(--disp,inherit);font-size:var(--t-md,13.5px);font-weight:700}

/* ── a card you can open, in a row you can swipe ──────────────────────────────────────────────── */
.gw-deck{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.gw-deck::-webkit-scrollbar{display:none}
.gw-post{flex:0 0 100%;scroll-snap-align:start;position:relative;overflow:hidden;border:0;text-align:left;cursor:pointer;font:inherit;color:#fff;
  border-radius:var(--r-card,14px);padding:14px 16px;display:grid;gap:8px;min-height:128px;background:linear-gradient(160deg,#2E3B55,#51466C 55%,#B0626B);transition:transform .2s}
.gw-post:hover{transform:translateY(-2px)}

@keyframes gwDrift{to{transform:translate(-6%,4%)}}
@keyframes gwDraw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes gwGlint{0%{left:-70px}35%,100%{left:100%}}
@keyframes gwRise{from{opacity:.001;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes gwPing{0%{box-shadow:0 0 0 0 rgba(189,36,36,.45)}70%{box-shadow:0 0 0 7px rgba(189,36,36,0)}100%{box-shadow:0 0 0 0 rgba(189,36,36,0)}}
@keyframes gwAby{50%{background-position:100% 60%}}
@media (prefers-reduced-motion:reduce){
  .gw-head::before,.gw-head::after,.gw-line,.gw-line::after,.gw-stop.on::before,.gw-seg.done::after,.gw-aby,.gw-enter .gw-card{animation:none!important}
}

/* ── a board drawn by kboard(), in this design: add class gw-board to its host ───────────────── */
/* THE LIVING HEADER, FOR A PAGE THAT DRAWS ITS OWN. Asa, 23 Sep 2026: "the headers on billing files
   are missing, over the cards." Billing files writes the app's plain `<div class="hd">` because
   files.js belongs to the billing chat and is edited hourly — so the header is dressed from here
   instead of forking that file. Same two washes, same drift, same border as .gw-head; a page that
   already writes .gw-head is untouched, because this only reaches .hd inside a .gw-board host. */
.gw-board > .bl > .hd,.gw-board > .hd{position:relative;overflow:hidden;isolation:isolate;background:var(--paper,#fff);
  border:1px solid var(--line,#E1DCD7);border-radius:var(--r-panel,16px);padding:16px 18px;margin-bottom:12px}
.gw-board > .bl > .hd::before,.gw-board > .bl > .hd::after,
.gw-board > .hd::before,.gw-board > .hd::after{content:"";position:absolute;z-index:-1;border-radius:50%;pointer-events:none}
.gw-board > .bl > .hd::before,.gw-board > .hd::before{right:-12%;top:-130%;width:60%;height:360%;
  background:radial-gradient(closest-side,rgba(189,36,36,.07),transparent 70%);animation:gwDrift 20s ease-in-out infinite alternate}
.gw-board > .bl > .hd::after,.gw-board > .hd::after{left:-12%;bottom:-170%;width:55%;height:340%;
  background:radial-gradient(closest-side,rgba(127,119,221,.09),transparent 70%);animation:gwDrift 24s ease-in-out infinite alternate-reverse}
.gw-board > .bl > .hd h1,.gw-board > .hd h1{margin:0;font-family:var(--disp,inherit);font-size:var(--t-2xl,26px);
  font-weight:800;letter-spacing:-.01em;line-height:1.1}
.gw-board > .bl > .hd p,.gw-board > .hd p{margin:6px 0 0;font-size:var(--t-sm,12.5px);color:var(--stone,#675E54);max-width:74ch}
.gw-board .kcol{background:rgba(255,255,255,.55);border-radius:var(--r-panel,16px);padding:10px}
.gw-board .kcol-h{text-transform:none;letter-spacing:0;font-family:var(--disp,inherit);font-size:var(--t-md,13.5px);font-weight:700;padding:11px 4px 4px}
/* A BOARD WHOSE HEADINGS CARRY THE COLOUR KEEPS IT. kboard writes each column heading in its stage
   colour inline; the Operations board moved that colour into a chip, so its headings were flattened
   to ink here — with !important, which is the only way a stylesheet beats an inline style. Billing
   files was dressed as a gw-board afterwards and inherited the flattening, so its five stages — grey,
   amber, red, green, plum — all read as the same near-black and stopped saying which stage they were
   (Asa, 23 Sep 2026: "the headers on billing files are missing, over the cards"). The flattening is
   now opt-out: add gw-tinthead to a host whose stage colour belongs on the heading. */
.gw-board:not(.gw-tinthead) .kcol-h{color:var(--ink,#080706)!important}
.gw-board .kcol-h .kn{font-weight:500;border:1px solid var(--line,#E1DCD7);background:var(--cream-2,#F3EEE8);color:var(--ink-soft,#3F3A35)}
.gw-board .kcol-s{margin:0 4px 8px}
.gw-board .kcard{border-radius:var(--r-md,12px)}
.gw-board .kcard .kt{font-family:var(--disp,inherit);font-weight:600}
.gw-board .kcard .kpill{display:inline-block;font-size:10px;font-weight:500;line-height:1.7;border-radius:999px;padding:0 7px;white-space:nowrap}
/* ONE ROW, ONE HEIGHT. A chip bar handed into a gw-bar (teamChipBar draws its own .tablebar) sits flat
   inside it; every chip, pill and field in the bar is 30px, so nothing sits higher than its neighbour and
   nothing wraps because one field is taller (Asa, 19 Sep 2026: "fix alignment"). */
.gw-bar .tablebar{display:inline-flex!important;align-items:center;gap:6px;border:0!important;padding:0!important;margin:0!important;background:none!important;box-shadow:none!important}
.gw-bar > span:empty{display:none}
.gw-bar button,.gw-bar .bw-chip,.gw-bar .va-chip{height:30px;padding:0 13px;display:inline-flex;align-items:center;line-height:1}
.gw-bar input:not([type=checkbox]):not([type=radio]),.gw-bar select{height:32px;padding:0 12px;border-radius:var(--r-md,12px)}
.gw-bar select{width:auto;min-width:0;max-width:170px}
.gw-bar .gw-sep{width:1px;height:22px;background:var(--line,#E1DCD7);flex:none}

/* ── EVERY SHEET — the popups and drawers (Asa approved "Sheets, One Design", 19 Sep 2026: "all"). The app
   draws ~245 of them through a handful of shells (#modal/#sheet, rdrawer, sideDrawer, askYesNo & co.); these
   rules restyle the shells, so every one of them changes at once:
     · the page colour behind, a white card for what sits on it;
     · the title in 800 with the coloured line under it (the same line as every card heading);
     · figures in one row with hairlines between them, label above the number — not a box each;
     · buttons: dark to go ahead, red only where the helper asks for commit, the back-out quiet. ── */
#modal .sheet{background:var(--page,#F4EDE5)}
#modal .sheet h2{font-family:var(--disp,inherit);font-size:var(--t-2xl,26px);font-weight:800;letter-spacing:-.01em;line-height:1.15;
  padding-bottom:12px;margin-bottom:12px;background:linear-gradient(90deg,var(--ink-soft,#3F3A35) 0,var(--ink-soft,#3F3A35) 22%,var(--cream-2,#F3EEE8) 70%,transparent) left bottom/100% 2px no-repeat}
#modal .sheet h3{font-family:var(--disp,inherit);font-weight:700}
#modal .sheet .x{background:var(--paper,#fff);border:1px solid var(--line,#E1DCD7);width:32px;height:32px}
#modal .sheet .card{border-radius:var(--r-panel,16px);background:var(--paper,#fff);border:1px solid var(--line,#E1DCD7)}
#modal .sheet .kpis{display:flex;flex-wrap:wrap;gap:0;background:var(--paper,#fff);border:1px solid var(--line,#E1DCD7);border-radius:var(--r-card,14px);padding:12px 16px;margin-bottom:14px}
#modal .sheet .kpi{display:flex;flex-direction:column-reverse;gap:2px;border:0!important;box-shadow:none!important;background:none!important;border-radius:0;padding:0 20px;min-width:0}
#modal .sheet .kpi:first-child{padding-left:0}
#modal .sheet .kpi + .kpi{border-left:1px solid var(--line,#E1DCD7)!important}
#modal .sheet .kpi .v{font-family:var(--disp,inherit);font-size:var(--t-xl,19px);font-weight:600}
#modal .sheet .kpi .l{font-size:var(--t-micro,10px);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--stone,#675E54)}
#modal .sheet .row.c2 > .card{padding:12px 16px}
#modal .sheet .tablewrap{border-radius:var(--r-card,14px);overflow:auto;background:var(--paper,#fff)}
#modal .sheet .field label{font-size:var(--t-micro,10px);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--stone,#675E54)}
#modal .sheet .btn{border-radius:var(--r-md,12px);font-weight:600}
#modal .sheet .btn.ghost{background:var(--paper,#fff)}
/* the small confirm shells (askYesNo, askText, askPick) — a footer band for the buttons */
#modal .sheet.compact{padding:0}
#modal .sheet.compact > div{padding:22px 22px 0!important;max-width:none!important}
#modal .sheet.compact > div > div:last-child{margin:16px -22px 0;padding:12px 22px;background:var(--cream,#F9F2EB);border-top:1px solid var(--cream-2,#F3EEE8)}
#modal .sheet.compact h3{font-size:var(--t-lg,15px)!important;padding-bottom:10px;margin-bottom:10px;background:linear-gradient(90deg,var(--ink-soft,#3F3A35) 0,var(--ink-soft,#3F3A35) 22%,var(--cream-2,#F3EEE8) 70%,transparent) left bottom/100% 2px no-repeat}
#modal .sheet.compact p{white-space:pre-line}   /* askYesNo bodies that carry line breaks keep them */

/* A SHEET OPENED FROM A DRAWER SITS ON TOP OF IT. The repo drawer is z-index 240 and the shared
   modal was 80, so "Our notes" opened correctly and was drawn behind the thing that opened it —
   the classic invisible-dialog bug. The modal is the top layer in this app by definition: anything
   that asks a question outranks anything that shows a record. */
#modal{z-index:400}

/* ── A SHORT QUESTION IS A CARD, NOT A WALL ──────────────────────────────────────────────────────
   Asa, 21 Sep 2026: "is it only mobile popups? what about the drawers on desktop — those just need a
   light restyle to suit the gosomewhere design."

   The light restyle is a SHAPE, not a repaint. Every confirmation in the app was a full-height
   right-hand drawer, so "Delete this client?" — two lines and two buttons — took a 520px column from
   the top of the screen to the bottom, with two-thirds of it empty cream. That emptiness is what
   reads as dull, and no amount of colour fixes it.

   So a compact sheet now hugs its own content in the middle of the screen, as the approved "Popups,
   one design" mockup draws it, and rises rather than sliding in from the edge. The tall drawer stays
   exactly as it is for the things that deserve it — a form to fill, a record to read.

   :has() is how the shell knows which it is holding; the app already relies on it for the card grids. */
#modal.on:has(> .sheet.compact){align-items:center;justify-content:center;padding:18px}
#modal .sheet.compact{height:auto;max-height:86vh;border-radius:var(--r-panel,16px);border-left:0;
  box-shadow:0 30px 70px -30px rgba(27,22,18,.55);transform:translateY(16px);opacity:0;
  transition:transform .24s cubic-bezier(.2,.8,.2,1),opacity .18s ease}
#modal.show .sheet.compact{transform:translateY(0);opacity:1}
/* the × belongs to a tall drawer; on a card the quiet word in the footer band is the way out */
#modal .sheet.compact > div > .x{display:none}

/* ── THE SAME SHEETS ON A PHONE ──────────────────────────────────────────────────────────────────
   A thumb lives at the bottom of the screen, so a sheet rises from the bottom edge, keeps its corners
   only at the top, and clears the home bar. The tall drawer becomes the whole screen, as it already
   did, but its footer band gets the same clearance. */
@media (max-width:640px){
  #modal.on:has(> .sheet.compact){align-items:flex-end;padding:0}
  #modal .sheet.compact{width:100%;max-width:none;max-height:92vh;border-radius:var(--r-panel,16px) var(--r-panel,16px) 0 0}
  #modal .sheet.compact > div::before{content:"";display:block;width:38px;height:4px;border-radius:999px;
    background:var(--line,#E1DCD7);margin:0 auto 12px}
  #modal .sheet.compact > div > div:last-child{padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));
    flex-wrap:wrap;gap:8px}
  #modal .sheet.compact > div > div:last-child .btn{flex:1 0 42%;justify-content:center}
  #modal .sheet.compact > div > div:last-child .btn.commit{flex:1 0 100%}
  #modal .sheet:not(.compact){padding-bottom:calc(70px + env(safe-area-inset-bottom,0px))}
}
/* the right-hand form drawer (rdrawer) and its header */
.rdw{background:var(--page,#F4EDE5)!important}
.rdw .rdw-h{background:var(--paper,#fff)}
.rdw .rdw-h h2{font-family:var(--disp,inherit);font-weight:800}
/* The back-out in a sheet is a quiet word at the left, never a second button that looks like the first. */
.gw-quiet{border:0;background:none;font:500 var(--t-sm,12.5px) var(--body,inherit);color:var(--stone,#675E54);cursor:pointer;padding:6px 8px;margin-right:auto}
.gw-quiet:hover{color:var(--ink,#080706)}

/* ── THE RECORD CARD — Clients, Groups & Corporate, New Leads (gwRecordCard in app.html; the "Cards, One
   Design" mockup). Health dot and name, one quiet line, tags, three figures with hairlines, what's next,
   stage and the card's own action. The border keeps the urgency colour the page passes in. ── */
.gwr{background:var(--paper,#fff);border:1px solid var(--line,#E1DCD7);border-radius:var(--r-card,14px);padding:12px 13px;display:grid;gap:7px;cursor:pointer;min-width:0;
  transition:transform .15s,box-shadow .15s;animation:gwRise .45s cubic-bezier(.2,.8,.2,1) both}
.gwr:hover{transform:translateY(-2px);box-shadow:0 8px 20px -12px rgba(63,58,53,.35)}
.gwr-t{display:flex;gap:6px;align-items:flex-start;flex-wrap:wrap}
.gwr-t b{font-family:var(--disp,inherit);font-size:var(--t-md,13.5px);font-weight:600;line-height:1.3;min-width:0}
.gwr-dot{width:9px;height:9px;border-radius:50%;margin-top:5px;flex:none}
.gwr-s{font-size:var(--t-xs,11px);color:var(--stone,#675E54);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gwr-tags{display:flex;gap:5px;flex-wrap:wrap;align-items:center}
.gwr-tags .chip,.gwr-foot .chip{font-size:10px;font-weight:500}
.gwr-nums{display:flex;border-top:1px solid var(--cream-2,#F3EEE8);padding-top:7px}
/* THE FIGURES SPREAD ACROSS THE CARD. Asa, 22 Sep 2026, of the Clients board: "the cards are not
   properly aligned — they bank space on the RHS." They were: the three figures hugged the left edge
   and left a third of a 268px column empty. Each takes an equal share now, which is what the design's
   figures row says everywhere else — hairlines between, nothing floating. */
.gwr-nums div{flex:1 1 0;display:grid;padding:0 10px;line-height:1.2;min-width:0}
.gwr-nums div:first-child{padding-left:0}
.gwr-nums div + div{border-left:1px solid var(--line,#E1DCD7)}
.gwr-nums small{font-size:9px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--stone,#675E54)}
.gwr-nums b{font-family:var(--disp,inherit);font-size:var(--t-sm,12.5px);font-weight:600;white-space:nowrap}
.gwr-nums b.red{color:var(--bad,#BD2424)}
.gwr-next{font-size:var(--t-xs,11px);color:var(--ink-soft,#3F3A35)}
.gwr-foot{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.gwr-foot .btn.sm{padding:2px 10px;font-size:var(--t-xs,11px);font-weight:500;border-radius:999px}
/* the record cards need room for three figures: a wider column than the old 208px card grids */
div[style*="minmax(208px"]:has(> .gwr),div[style*="minmax(208px"]:has(> div > .gwr),.crmgrid:has(> .gwr){grid-template-columns:repeat(auto-fill,minmax(250px,1fr))!important}
.gwr .chip,.gwr .name-pill,.gwr .tkent{font-size:10px!important;padding:1px 7px!important;line-height:1.6!important}
.gwr .gwr-t .chip{margin-left:2px}

/* ── A LIST ROW READS LIKE A RECORD, NOT A FORM ─────────────────────────────────────────────────
   Asa, 19 Sep 2026, of New Leads beside the Clients list: "new leads also can we use this style
   (crm)". The Clients list is calm because a row shows chips and pills; New Leads put a bordered
   dropdown in two columns of every row, so the eye read a form. The dropdowns stay — editing the
   phase on the row is the whole point of the page — but they sit as a quiet chip until you reach
   for them, and the border only appears on hover or focus. ── */
select.il-quiet{width:auto;appearance:none;-webkit-appearance:none;padding:2px 20px 2px 9px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M1 1l3 3 3-3' fill='none' stroke='%238a8177' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 7px center;font-size:var(--t-xs,11px);font-weight:500;
  border:1px solid transparent;border-radius:999px;background-color:var(--cream-2,#F3EEE8);
  color:var(--ink-soft,#3F3A35);cursor:pointer;box-shadow:none;min-width:0;height:auto;line-height:1.5;
  transition:border-color .15s,background-color .15s}
select.il-quiet:hover,select.il-quiet:focus{border-color:var(--line,#E1DCD7);background-color:var(--paper,#fff)}

/* corporate rows carry the same faint red wash the Clients list uses (standing rule: outline + tag) */
tr.ld-corp > td{background:rgba(189,36,36,.045)}

/* the card views of a list page stand the table's panel down — the cards sit on the page itself */
.tablewrap.ld-snap{background:transparent;border:0;box-shadow:none}
.tablewrap.ld-snap > div:first-child{padding-left:0;padding-right:0}
.tablewrap.ld-snap #ld_count{border-top:0;padding-left:0}
.tablewrap.ld-snap .scroll{display:none}

/* ── THE OLD PAGE HEADER BECOMES THE LIVING ONE ──────────────────────────────────────────────────
   Asa, 21 Sep 2026: "go --all". Fifty-three pages still open with the plain `.hd` header — a title,
   a grey line and the buttons floating beside them on the page colour. Every page redesigned so far
   replaced it by hand with `.gw-head`, which is the right shape but the wrong amount of work: the
   remaining pages are the finance ones, the desks and the settings, and none of them needs a
   bespoke header to be correct.

   So the old header IS the living header now — paper, the two slow washes, the name in 800, its one
   grey line of purpose, the actions on the right, and a hairline under the lot. A page that later
   gains its own figures row keeps everything here and simply adds `.gw-facts` inside.

   This changes the frame only. Nothing inside a page moves, and a page already carrying `.gw-head`
   is untouched, because it never had `.hd`. ── */
.hd{position:relative;overflow:hidden;background:var(--paper,#fff);border:1px solid var(--line,#E1DCD7);
  border-radius:var(--r-panel,16px);padding:18px 20px;margin-bottom:14px;align-items:flex-start}
.hd{isolation:isolate}
.hd::before,.hd::after{content:"";position:absolute;z-index:-1;border-radius:50%;pointer-events:none}
.hd::before{right:-12%;top:-130%;width:60%;height:360%;
  background:radial-gradient(closest-side,rgba(189,36,36,.07),transparent 70%);animation:gwDrift 20s ease-in-out infinite alternate}
.hd::after{left:-12%;bottom:-170%;width:55%;height:340%;
  background:radial-gradient(closest-side,rgba(127,119,221,.09),transparent 70%);animation:gwDrift 24s ease-in-out infinite alternate-reverse}
.hd h1{font-family:var(--disp,inherit);font-size:var(--t-2xl,26px)!important;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.hd p{font-size:var(--t-sm,12.5px);color:var(--stone,#675E54);margin-top:3px;max-width:68ch;line-height:1.5}
/* the figures row a page adds later sits under a hairline, exactly as on the redesigned pages */
.hd .gw-facts{width:100%;border-top:1px solid var(--line,#E1DCD7);margin-top:14px;padding:11px 0 0}
@media (prefers-reduced-motion:reduce){.hd::before,.hd::after{animation:none!important}}

/* ── FIGURES ON A PAGE ARE ONE ROW, NOT A ROW OF BOXES ───────────────────────────────────────────
   The same rule the sheets already follow, applied to the pages that still draw `.kpis` — every
   finance page, the desks and the analytics. Three white boxes side by side make three things to
   look at; one card with hairlines between the figures makes one. Label under the number stays as
   the page wrote it, because that is how these pages read.

   Asa: "this looks too heavy on the eye — can we have divider vertical lines to separate." ── */
.kpis{display:flex;flex-wrap:wrap;gap:0;background:var(--paper,#fff);border:1px solid var(--line,#E1DCD7);
  border-radius:var(--r-card,14px);padding:13px 18px;margin-bottom:14px}
.kpi{border:0!important;box-shadow:none!important;background:none!important;border-radius:0;
  padding:0 20px!important;min-width:0;display:flex;flex-direction:column;gap:2px}
.kpi:first-child{padding-left:0!important}
.kpi + .kpi{border-left:1px solid var(--line,#E1DCD7)!important}
.kpi .v{font-family:var(--disp,inherit);font-size:var(--t-xl,19px);font-weight:600;font-variant-numeric:tabular-nums;line-height:1.2}
.kpi .l{font-size:var(--t-micro,10px);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--stone,#675E54)}
@media (max-width:640px){
  .kpi{flex:1 0 42%;padding:0 12px!important}
  .kpi:nth-child(odd){padding-left:0!important;border-left:0!important}
  .kpi:nth-child(n+3){border-top:1px solid var(--cream-2,#F3EEE8);padding-top:9px!important;margin-top:9px}
}

/* ══ THE FINANCE PAGES ═════════════════════════════════════════════════════════════════════════
   Asa, 22 Sep 2026: "apply gosomewhere design to Collections · Expenses · Vendors · P&L & Accounts ·
   TDS & GST · GST filing · Tax codes · MIS · Analytics", then "go go go".

   A LAYER, NOT A REWRITE, and the method's own rule — restyle what is there, add beside it, never
   re-parent a node. All nine already wore the living header (.hd) and the figures row (.kpis) from
   the 53-page pass; what none of them had was the card: a coloured line under each heading, quiet
   tables, and a tab strip that reads as navigation rather than as a filter.

   THE LINE IS DRAWN ON THE HEADING'S OWN ::after, so nothing is inserted into the DOM and nothing
   moves. It is a line UNDER a heading, which is the gosomewhere part — never a bar down an edge.

   Finance's tone is the money brown the design already gives billing; a block can name another with
   data-tone, and the tones are the same six every other page uses. Scoped to .fin-gw, so dropping
   the class returns all nine pages exactly as they were. ── */
.fin-gw{--gw-tone:#8A5A12;--gw-tint:#F7EEDD}
.fin-gw [data-tone=who]{--gw-tone:#1D9E75;--gw-tint:#E1F5EE}
.fin-gw [data-tone=words]{--gw-tone:#2E6BA8;--gw-tint:#E7EEF7}
.fin-gw [data-tone=paper]{--gw-tone:#6B5B3E;--gw-tint:#F3EEE8}
.fin-gw [data-tone=clock]{--gw-tone:#BD2424;--gw-tint:#F6E0E0}
.fin-gw [data-tone=work]{--gw-tone:#3F3A35;--gw-tint:#F3EEE8}
.fin-gw [data-tone=ai]{--gw-tone:#7F5AD5;--gw-tint:#F1ECFB}

/* one card, one hairline, no heavy shadow */
.fin-gw .card{border-radius:var(--r-panel,16px);padding:15px 18px 17px;box-shadow:none;
  border-color:var(--line,#E1DCD7)}
.fin-gw .card + .card{margin-top:14px}

/* the line under a card's heading — drawn once on arrival, catching the light every 7s */
/* ONLY A REAL HEADING GETS THE LINE. I first included `.card > b:first-child`, reasoning that GST
   filing titles its blocks with a bare <b> — and :first-child matches the first ELEMENT, so it also
   caught the <b> inside "These are drafts", turned that sentence into a block and ruled a line under
   one word of it. A card with no heading tag simply gets no line; that cannot damage a sentence. */
.fin-gw .card > h3,.fin-gw .card > h4,.fin-gw .card > .ch > h3{position:relative;padding-bottom:11px;margin-bottom:12px}
.fin-gw .card > h3::after,.fin-gw .card > h4::after,.fin-gw .card > .ch > h3::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:var(--r-chip,999px);overflow:hidden;
  background:linear-gradient(90deg,var(--gw-tone) 0%,var(--gw-tone) 20%,var(--gw-tint) 62%,var(--cream-2,#F3EEE8) 100%);
  transform-origin:left;animation:gwDrawLine .9s .12s cubic-bezier(.2,.8,.2,1) both;transition:height .2s}
.fin-gw .card:hover > h3::after,.fin-gw .card:hover > h4::after{height:3px}
@keyframes gwDrawLine{from{transform:scaleX(.02);opacity:.2}}
.fin-gw .card > h3,.fin-gw .card > h4{font-family:var(--disp,inherit);font-weight:700;letter-spacing:-.01em}

/* the table shell becomes a card, its bar the page's quiet filter row */
.fin-gw .tablewrap{background:var(--paper,#fff);border:1px solid var(--line,#E1DCD7);
  border-radius:var(--r-panel,16px);overflow:hidden;box-shadow:none}
.fin-gw .tablebar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:10px 14px;
  border-bottom:1px solid var(--cream-2,#F3EEE8);background:var(--paper,#fff)}
.fin-gw .tablewrap table{width:100%;border-collapse:collapse}
.fin-gw .tablewrap th{font-size:var(--t-micro,10px);font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--thead-ink,#3F3A35);background:var(--thead,#F1EAE2);
  border-bottom:1px solid var(--line,#E1DCD7);padding:10px 12px}
.fin-gw .tablewrap td{padding:11px 12px;border-bottom:1px solid var(--cream-2,#F3EEE8);vertical-align:middle}
.fin-gw .tablewrap tbody tr:last-child td{border-bottom:0}
/* No colour on hover (Asa, 6 Oct 2026) — the row sharpens instead of a box arriving. */
.fin-gw .tablewrap tbody tr:hover td{color:var(--ink);border-bottom-color:var(--cream-3,#E1DCD7)}
/* money reads as money: aligned on the right, tabular, never proportional */
.fin-gw td.num,.fin-gw th.num,.fin-gw .kpi .v{font-variant-numeric:tabular-nums}
.fin-gw td.num{text-align:right;white-space:nowrap}
.fin-gw th.num{text-align:right}

/* the page's tab strip is navigation, so it is drawn as one — pills, no underline */
/* Billing files and Cancellations join the nine (Asa, 23 Sep 2026: "make the gosomewhere pls").
   They were left out of the first pass because they are the billing module's own screens; the layer
   is the same, and their tab strip is .bf-tabs rather than .pj-tabs, so it is named here too. */
.fin-gw .bf-tabs{border-bottom:0!important;background:var(--sunk,#F1ECE4);
  border-radius:var(--r-chip,999px);padding:4px;display:inline-flex;gap:4px;margin-bottom:14px}
.fin-gw .bf-tab{border:0;background:none;border-radius:var(--r-chip,999px);padding:6px 15px;
  font-size:var(--t-sm,12.5px);font-weight:500;color:var(--stone,#675E54);cursor:pointer}
.fin-gw .bf-tab.on{background:var(--paper,#fff);color:var(--ink,#080706);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.fin-gw #cl_tabs,.fin-gw .pj-tabs{border-bottom:0!important;background:var(--sunk,#F1ECE4);
  border-radius:var(--r-chip,999px);padding:4px;display:inline-flex;gap:4px;margin-bottom:14px}
.fin-gw .pj-tab{border:0;background:none;border-radius:var(--r-chip,999px);padding:6px 15px;
  font:600 var(--t-sm,12.5px) Inter,system-ui,sans-serif;color:var(--stone,#675E54);cursor:pointer;
  box-shadow:none!important;border-bottom:0!important}
.fin-gw .pj-tab.on{background:var(--paper,#fff);color:var(--ink,#2A2320);
  box-shadow:0 1px 3px rgba(40,32,26,.14)!important}

/* headings only are bold — a value is 500, a label is a small cap */
.fin-gw .card p,.fin-gw .card .muted{font-size:var(--t-sm,12.5px);line-height:1.55}
.fin-gw .empty{padding:34px 20px}
@media (prefers-reduced-motion:reduce){
  .fin-gw .card > h3::after,.fin-gw .card > h4::after{animation:none!important}}

/* A PAIR THAT STANDS LEVEL (Asa, 21 Oct 2026, of New Leads' Inbox enquiries beside AbyAI: "make these
   boxes same height"). .gw-two aligns its children to the top, which is right for most pairs and is why
   this is a modifier and not a change to .gw-two itself. Both boxes stretch to the taller; inside AbyAI
   the two tiles take the extra height — a bigger place to drop — and its Voice / Read row stays at the
   foot, so the stretch reads as intended rather than as an empty box. */
.gw-two.gw-even{align-items:stretch}
.gw-even > .abyt-host{display:flex;flex-direction:column}
.gw-even > .abyt-host > .abyt{flex:1;display:flex;flex-direction:column}
.gw-even > .abyt-host > .abyt > .abyt-tiles{flex:1}
.gw-even > .abyt-host .abyt-tile{align-content:center;justify-items:start}

/* Figures by meaning (Asa, 21 Oct 2026) — the class is set by paintGwFacts() in app.html from each figure's own label
   and value, on every figure strip (page header, finance, billing tiles, billing file, KPI tiles). The number carries
   the colour; the label stays grey. Scoped html:not(.palette-classic) body so it outranks each strip's own value
   colour, and classic restores plain ink. */
html:not(.palette-classic) body .gw-m-alarm{color:var(--commit,#BD2424)}
html:not(.palette-classic) body .gw-m-money{color:var(--commit-deep,#8E1B1B)}
html:not(.palette-classic) body .gw-m-good{color:var(--good,#1D9E75)}
html:not(.palette-classic) body .gw-m-wait{color:var(--amber,#BA7517)}


/* ── THE TAB TILES — a page's main navigation (Asa, 19 Sep 2026: "this main nav is too subtle") ───────────────
   First on the client page (clientlook.js), now on the group page as well (app.html groupPage), so the rules
   live here, once. Each tab is a tile with its own mark in its own colour (--tc ink, --tt tint); the open one
   fills with the tint and carries the line under it that every heading has. */
/* THE SIX TABS ARE THE PAGE'S MAIN NAVIGATION — Asa, 19 Sep 2026: "this main nav is too subtle".
   Each tab is a tile with its own mark in its own colour; the open one fills with that colour's tint,
   takes the colour for its text, and carries the line under it that every heading on the page has. */
.cpn-tabs{position:sticky;top:var(--gw-sticky-top,12px);z-index:4;display:flex;gap:6px;flex-wrap:wrap;align-items:stretch;background:var(--paper,#fff);border:1px solid var(--line,#E1DCD7);
  border-radius:var(--r-panel,16px);padding:6px;margin:14px 0 14px;box-shadow:0 6px 18px -12px rgba(63,58,53,.25)}
.cpn-tab{position:relative;overflow:hidden;border:1px solid transparent;background:none;border-radius:var(--r-md,12px);padding:10px 16px 12px;font-family:var(--disp,inherit);font-size:var(--t-md,13.5px);font-weight:600;
  color:var(--ink-soft,#3F3A35);cursor:pointer;display:inline-flex;gap:9px;align-items:center;transition:background .15s,color .15s}
.cpn-tab .mk{width:24px;height:24px;border-radius:var(--r-sm,8px);display:grid;place-items:center;font-size:var(--t-sm,12.5px);background:var(--tt);color:var(--tc);flex:none}
.cpn-tab:hover{background:var(--cream-2,#F3EEE8)}
.cpn-tab.on{background:var(--tt);border-color:color-mix(in srgb,var(--tc) 22%,transparent);color:var(--tc)}
.cpn-tab.on .mk{background:var(--tc);color:#fff}
.cpn-tab::after{content:"";position:absolute;left:14px;right:14px;bottom:5px;height:2px;border-radius:999px;background:var(--tc);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.cpn-tab.on::after{transform:scaleX(1)}
.cpn-tab .n{font-family:var(--body,inherit);font-size:10px;font-weight:500;background:var(--cream-2,#F3EEE8);color:var(--ink-soft,#3F3A35);border-radius:999px;padding:0 6px}
.cpn-tab.on .n{background:#fff}
.cpn-meta{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:var(--t-xs,11px);color:var(--stone,#675E54);padding-right:8px}
.cpn-meter{width:90px;height:5px;border-radius:999px;background:var(--cream-2,#F3EEE8);overflow:hidden}
.cpn-meter i{display:block;height:100%;background:var(--amber,#BA7517);border-radius:999px}
.cpn-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:var(--t-xs,11px);color:var(--stone,#675E54);margin:-6px 0 12px}
/* The group page's panes: one shows, the rest carry [hidden]. */
.gp-pane[hidden]{display:none}