/* =====================================================================
   Simple UI — standard design system for ai-driven-development projects
   Guide: design-system/README.md. Do not edit per project.
   A project sets its brand in its own brand.css (only the --brand-* tokens and fonts).

   Two layers (README §9, v3.43):
   - this file is the experience: every component, its states and its layout. It is the same in every feel.
   - a design language (languages/*.css, a "feel") sets only the feel dials below. It never adds a selector,
     so switching the feel can change how a screen looks but never what is on it or where.
   ===================================================================== */

:root{
  /* Brand slot: overridden by the project's brand.css */
  --brand:#1f5f8b;          /* large fills: logo mark, active indicator, top stripe */
  --brand-strong:#174a6c;   /* buttons, links, focus. Must reach 4.5:1 on white */
  --brand-soft:#e7f0f6;     /* selected rows, active nav background */
  --brand-accent:#f2b705;   /* one small highlight only (active nav bar). Optional */
  --brand-ink:#ffffff;      /* text on --brand-strong */

  /* ---------- The feel dials: every language sets these and nothing else ---------- */
  /* 1 Surfaces: the page, a panel, a sunk well, and the two bars that frame every screen */
  --ink:#1d2421; --ink-2:#4b5551; --ink-3:#5f6864;
  --bg:#f5f7f6; --surface:#ffffff; --sunk:#eef1ef;
  --side-bg:var(--surface); --side-ink:var(--ink-2); --side-ink-on:var(--ink); --side-faint:var(--ink-3);
  --side-hover:var(--sunk); --side-on:var(--brand-soft); --side-line:var(--line);
  --top-bg:var(--surface); --top-ink:var(--ink); --top-faint:var(--ink-3);
  --sel-bg:var(--brand-soft);            /* a selected row or item */
  --card-bg:var(--surface); --tile-bg:var(--surface); --th-bg:var(--surface);   /* a panel, a key number, a table's column names */
  --strong:#1a1a1a;                      /* the heavy rule and solid block some languages use; never data */

  /* 2 Lines: hairlines, the edges of panels, and how strong a rule gets */
  --line:#dde2df; --line-2:#c9d0cc;
  --edge:1px solid var(--line);          /* a panel's outline (card, tile, list) */
  --edge-top:var(--edge);                /* a panel's top edge: a rule, a band, or the same outline */
  --ctl-edge:1px; --ctl-line:var(--line-2);   /* outline of buttons, chips and inputs */
  --tile-edge:var(--edge); --tile-top:var(--edge-top); --tile-left:var(--tile-edge);   /* a key number's outline */
  --side-edge:1px solid var(--line);     /* between the menu and the page */
  --top-edge:1px solid var(--line);      /* under the top bar */
  --head-rule:1px solid var(--line);     /* under a table's column names */

  /* 3 Depth: flat, outlined or lifted */
  --shadow:0 1px 2px rgb(16 24 20 / 6%); /* cards */
  --tile-shadow:none;                    /* key numbers */
  --pop-shadow:0 12px 32px -8px rgb(16 24 20 / 22%),0 2px 6px rgb(16 24 20 / 8%);   /* menus, dialogs, toasts */
  --act-shadow:none;                     /* under the one primary button */
  --on-shadow:none;                      /* under the current menu item */

  /* 4 Shape: three corner sizes and a pill */
  --r:6px;  --r-md:8px;  --r-lg:10px;  --r-pill:999px;
  --r-btn:var(--r); --r-nav:var(--r); --r-tag:var(--r-pill); --r-logo:50%; --r-step:50%;

  /* 5 Density: control heights, row padding, page breathing room.
     Spacing dials left unset here default to the spacing scale where they are used, so they keep growing with the
     text (adaptive.css): --row-x, --card-pad, --card-gap, --tile-pad, --page-pad, --page-gap, --nav-pad, --brand-pad,
     --foot-pad, --top-pad (the top bar's sides), and the menu marker's --mark-x and --on-indent. */
  --base:14px;
  --ctl-h:38px; --ctl-h-sm:30px; --input-h:40px; --nav-h:40px;
  --row-y:12px; --th-y:10px;
  --page-max-w:1240px; --page-align:0;   /* 0 or auto (centred) */
  --side-pad:18px 14px; --side-gap:14px;
  --brand-h:auto; --brand-edge:0;
  --well-bg:var(--bg); --well-edge:1px solid var(--line);   /* the search box and status line in the menu */
  --foot-edge:0;

  /* 6 Type: a text face, a display face for titles and big numbers, a mono face, and how labels read */
  --font:"Public Sans","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --display:var(--font); --display-stretch:normal;   /* a wide or narrow cut of a variable display face (Ruled: 118%) */
  --mono:"Cascadia Mono",Consolas,ui-monospace,monospace;
  --h1-font:var(--display); --h1-size:24px; --h1-weight:700; --h1-lh:1.25; --h1-track:-.01em; --h1-case:none;
  --head-font:var(--font); --head-size:16px; --head-weight:650; --head-case:none;       /* card and section titles */
  --value-font:var(--font); --value-size:24px; --value-weight:700; --value-lh:1.5;                       /* key numbers */
  --label-font:var(--font); --label-case:none; --label-track:0; --label-size:12px;     /* column names, tile labels */
  --btn-weight:600; --btn-case:none; --btn-track:0;
  --nav-weight:500;
  --lede:15px;                           /* the line under a page title: the Lead step of the type ladder, a step above body (R21) */

  /* 7 Accent: where the one "act here" colour shows */
  --act-bg:var(--brand-strong); --act-ink:var(--brand-ink); --act-hover:brightness(.95); --act-lift:0px;
  --eyebrow-ink:var(--brand-strong);
  --lead-top:3px solid var(--brand);     /* the card that holds the one thing to do: a band on top ... */
  --lead-side:0 0 #0000;                 /* ... or a bar down its left side (an inset shadow) */
  --mark-w:3px; --mark-y:8px; --mark-r:2px; --mark-bg:var(--brand);   /* the current menu item's marker */
  --logo-bg:var(--brand-strong); --logo-ink:var(--brand-ink); --logo-font:var(--font);
  --count-bg:var(--sunk); --count-ink:var(--ink-2); --count-pad:1px 7px; --count-size:11px;
  --top-badge-bg:var(--neutral-bg); --top-badge-ink:var(--neutral); --top-badge-weight:650;
  --motif:none; --motif-h:0px;           /* a brand pattern across the top of the menu (Bold's stripe) */

  /* 8 Motion and icons */
  --rise:none;                           /* how a page's parts arrive */
  --beat:none;                           /* the live dot's pulse */
  --quick:.2s;                           /* hover and press: never under 200 ms (R66) */
  /* Chart colours (R43): the group hues re-stepped and ordered so neighbours stay apart for colour-blind readers (dataviz validator, 27 Oct 2026); --cx is context grey */
  --c1:#0099a0;--c2:#4c4c9e;--c3:#9e9f30;--c4:#aa4d75;--c5:#cf8fde;--cx:#c2c8d0;
  --icon:18px; --icon-stroke:1.5; --icon-cap:round; --icon-join:round;   /* line weight and ends follow the feel's letters (R39) */

  /* Group colours (R38): six per feel, for telling groups apart by sight; never near a status colour, never alone */
  --g1:#007d7e;--g1-tint:#def6f5;--g2:#6164a4;--g2-tint:#ecefff;--g3:#855890;--g3-tint:#f8ebfb;--g4:#98526f;--g4-tint:#ffeaf1;--g5:#707021;--g5-tint:#f1f2df;--g6:#5b646f;--g6-tint:#ebeff4;
  --ring-track:var(--line);

  /* State: never decoration, never set by a language's taste. No red for outcomes about people. */
  --ok:#1e6b45;    --ok-bg:#e3f2e9;
  --attn:#8a5a00;  --attn-bg:#fbefd4;
  --info:#24577d;  --info-bg:#e6eff6;
  --neutral:#46504c; --neutral-bg:#eceeed;
  --error:#a33a2a; --error-bg:#f9e6e2;   /* system errors only (failed save, invalid input) */

  /* Spacing and frame */
  /* Weights (v3.50, R36 tone before weight): text, a medium for names and heads, a semibold for actions and kickers. Size and tone lead. */
  --x-adjust:none;   /* R40: a feel whose face has taller or shorter small letters sets 0.52 here, so every feel reads at one x-height */
  --w-text:450; --w-strong:650; --w-semi:600; --w-heavy:650;   /* R40: Public Sans set as dark as the reference (Rubik 400 and 500), measured */
  --s0h:2px; --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px; --s12:48px; --s16:64px; --s20:80px; --s24:96px;   /* R62: every space from this scale */
  --ease:cubic-bezier(.22,1,.36,1);   /* R66: one way of moving */
  --sidebar:248px; --topbar:64px;
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font:var(--w-text,400) var(--base)/1.5 var(--font);font-size-adjust:var(--x-adjust,none);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,p{margin:0}
h1,h2,h3,h4{text-wrap:balance}p,li,blockquote{text-wrap:pretty}   /* R64: no word alone on a line */
b,strong{font-weight:var(--w-strong,500)}   /* weights are dials (v3.50): --w-text, --w-strong, --w-heavy, so a feel can lead with tone instead (R36) */
h1{font:var(--h1-weight) var(--h1-size)/var(--h1-lh) var(--h1-font);font-stretch:var(--display-stretch,normal);letter-spacing:var(--h1-track);text-transform:var(--h1-case)}
h2{font-size:16px;line-height:1.3;font-weight:var(--w-strong,650)}
h3{font-size:14px;font-weight:var(--w-strong,650)}
a{color:var(--brand-strong);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--brand-strong);outline-offset:2px}
.mono{font-variant-numeric:tabular-nums;letter-spacing:.01em}   /* IDs and references: same font, aligned digits */
code,.code-text{font-family:var(--mono);font-size:12.5px}
.muted{color:var(--ink-2)} .faint{color:var(--ink-3)}
.small{font-size:12.5px}
svg.i{width:var(--icon);height:var(--icon);fill:none;stroke:currentColor;stroke-width:var(--icon-stroke);stroke-linecap:var(--icon-cap,round);stroke-linejoin:var(--icon-join,round);flex:none}
[data-g="1"],.g-1{--gc:var(--g1);--gt:var(--g1-tint)}[data-g="2"],.g-2{--gc:var(--g2);--gt:var(--g2-tint)}[data-g="3"],.g-3{--gc:var(--g3);--gt:var(--g3-tint)}[data-g="4"],.g-4{--gc:var(--g4);--gt:var(--g4-tint)}[data-g="5"],.g-5{--gc:var(--g5);--gt:var(--g5-tint)}[data-g="6"],.g-6{--gc:var(--g6);--gt:var(--g6-tint)}
.gmark{display:inline-flex;align-items:center;gap:8px}.gmark>svg.i{width:16px;height:16px;color:var(--gc,var(--ink-2))}   /* a thing marked with its group's icon and colour, with its word beside it */

/* ---------- App shell ---------- */
/* .brand is the product's name block; a brand-coloured note (.note.brand) is not one. */
.app{display:grid;grid-template-columns:var(--sidebar) 1fr;min-height:100vh}
.sidebar{background:var(--side-bg);color:var(--side-ink-on);border-right:var(--side-edge);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;padding:var(--side-pad);gap:var(--side-gap)}
.brand:not(.note){height:var(--brand-h);display:flex;align-items:center;gap:10px;padding:var(--brand-pad,2px 6px);border-bottom:var(--brand-edge);color:var(--side-ink-on);position:relative}
.brand:not(.note)::before{content:"";position:absolute;left:20px;right:20px;top:0;height:var(--motif-h);background:var(--motif)}
.brand-mark{width:32px;height:32px;border-radius:var(--r-logo);background:var(--logo-bg);color:var(--logo-ink);display:grid;place-items:center;font-weight:800;font-size:13px;letter-spacing:.02em;font-family:var(--logo-font)}
.brand:not(.note) b{display:block;font-size:15px;letter-spacing:.06em}
.brand:not(.note) small{display:block;font-size:11px;color:var(--side-faint)}
.nav{padding:var(--nav-pad,0);display:grid;gap:2px;flex:1;align-content:start}
.nav-label{font-size:11px;font-weight:var(--w-heavy,700);letter-spacing:.08em;text-transform:uppercase;color:var(--side-faint);padding:var(--s3) var(--s3) var(--s1);font-family:var(--label-font)}
.nav a{display:flex;align-items:center;gap:10px;height:var(--nav-h);padding:0 var(--s3);border-radius:var(--r-nav);color:var(--side-ink);font-weight:var(--nav-weight);position:relative}
.nav a:hover{background:var(--side-hover);text-decoration:none;color:var(--side-ink-on)}
.nav a.on{background:var(--side-on);color:var(--side-ink-on);font-weight:var(--w-strong,650);box-shadow:var(--on-shadow);padding-left:var(--on-indent,var(--s3))}
.nav a.on::before{content:"";position:absolute;left:var(--mark-x,calc(-1 * var(--s3)));top:var(--mark-y);bottom:var(--mark-y);width:var(--mark-w);border-radius:var(--mark-r);background:var(--mark-bg)}
.nav .count{margin-left:auto;font-size:var(--count-size);font-weight:var(--w-heavy,700);background:var(--count-bg);border-radius:10px;padding:var(--count-pad);color:var(--count-ink)}
.sidebar-foot{border-top:var(--foot-edge);padding:var(--foot-pad,4px 6px);display:flex;gap:10px;align-items:center;font-size:12.5px;color:var(--side-ink-on)}
.sidebar-foot small{display:block;color:var(--side-faint)}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--sunk);border:1px solid var(--line-2);display:grid;place-items:center;font-size:12px;font-weight:var(--w-heavy,700);flex:none}
/* The menu has its own surface dial: on a dark menu (Technical, Bold) the initials sit on the menu's raised tone, not on a light disc. */
.sidebar .avatar{background:var(--side-avatar-bg,var(--sunk));border-color:var(--side-avatar-edge,var(--line-2))}

/* The menu as a tree: each area has an icon tile; the current area opens its places under it (moved from Guide, v3.43) */
.side-search{display:flex;align-items:center;gap:8px;height:36px;padding:0 10px;border:var(--well-edge);border-radius:var(--r);color:var(--side-faint);font-size:13px;background:var(--well-bg)}
.side-search kbd{margin-left:auto;font:var(--w-semi,600) 11px var(--font);border:1px solid var(--line-2);border-radius:5px;padding:0 5px;background:var(--surface);color:var(--ink-3)}
.nav a.area{padding:0 8px;font-weight:var(--w-strong,500)}
.nav a.area::before{display:none}
.nav a.area.on{background:color-mix(in srgb,var(--hue,var(--brand)) 9%,var(--side-bg));padding-left:8px;font-weight:var(--w-strong,650)}
.tile-ic{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;color:var(--hue,var(--brand));background:color-mix(in srgb,var(--hue,var(--brand)) 13%,var(--surface));flex:none}
.tile-ic svg.i{width:16px;height:16px}
.nav .count.hot{background:var(--brand-strong);color:var(--on-fill,#fff);border-radius:999px;padding:1px 7px}
.nav .chev{width:14px;height:14px;color:var(--side-faint)}
.nav .count+.chev{margin-left:6px}
.nav-sub{display:grid;margin:2px 0 6px 21px;padding-left:16px;border-left:1.5px solid color-mix(in srgb,var(--hue,var(--brand)) 30%,var(--line))}
.nav .nav-sub a{display:flex;align-items:center;gap:8px;height:32px;padding:0 10px;border-radius:var(--r-md);color:var(--side-ink);font-size:13.5px;font-weight:500;position:relative;box-shadow:none}
.nav .nav-sub a:hover{background:var(--side-hover);text-decoration:none}
.nav .nav-sub a::before{content:"";position:absolute;left:-17px;top:50%;bottom:auto;width:10px;height:0;border-radius:0;background:none;border-top:1.5px solid color-mix(in srgb,var(--hue,var(--brand)) 30%,var(--line))}
.nav .nav-sub a.on{color:var(--side-ink-on);font-weight:var(--w-strong,650);background:var(--side-hover);padding-left:10px}
.nav-sub a.on::after{content:"";position:absolute;left:-20px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:var(--hue,var(--brand))}
.nav-sub .count{margin-left:auto;font-size:11.5px;color:var(--side-faint);font-weight:var(--w-semi,600)}
.side-health{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--side-ink);padding:9px 10px;border:var(--well-edge);border-radius:var(--r);background:var(--well-bg)}
.side-health::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ok);animation:var(--beat)}

.main{min-width:0;display:flex;flex-direction:column}
.topbar{height:var(--topbar);background:var(--top-bg);color:var(--top-ink);border-bottom:var(--top-edge);display:flex;align-items:center;justify-content:space-between;padding:0 var(--s8);gap:var(--s4)}
:root .topbar{padding:0 var(--top-pad,var(--s8))}   /* the bar keeps the page's side padding, so the trail lines up with the title */
.crumbs{display:flex;gap:var(--s2);align-items:center;color:var(--top-faint);font-size:13px}
.crumbs b{color:var(--top-ink);font-weight:var(--w-semi,600)}
.org{display:inline-flex;align-items:center;gap:var(--s2);border:1px solid var(--line);border-radius:var(--r);padding:5px 10px;font-size:12.5px;font-weight:var(--w-semi,600)}
.org::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--brand)}
.top-actions{display:flex;gap:var(--s3);align-items:center}
.icon-btn{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;color:var(--ink-2);font-weight:var(--w-heavy,700)}
.topbar .badge{background:var(--top-badge-bg);color:var(--top-badge-ink);font-weight:var(--top-badge-weight)}
/* The trail: where you are, with chevrons. A long trail never pushes the actions off the screen: the steps before
   the current one shorten first, with their full name on hover (a designed shortening; the inspector allows it). */
.trail{display:flex;align-items:center;gap:4px;font-size:13px;color:var(--top-faint);min-width:0;overflow:hidden}
.trail span{padding:4px 6px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:0 1 auto}
.trail b{flex:none;color:var(--top-ink);font-weight:var(--w-semi,600);padding:4px 6px}
.trail svg.i{width:14px;height:14px}
/* Two views of the same place: a switch in the top bar */
.views{display:flex;background:var(--sunk);border-radius:var(--r);padding:3px}
.views a{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px;border-radius:calc(var(--r) - 2px);font-weight:var(--w-semi,600);font-size:13px;color:var(--ink-2)}
.views a.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgb(0 0 0/8%)}
.views a:hover{text-decoration:none;color:var(--ink)}
.views svg.i{width:16px;height:16px}

.page{padding:var(--page-pad,var(--s8));max-width:var(--page-max-w);width:100%;margin-inline:var(--page-align);display:grid;gap:var(--page-gap,var(--s6));align-content:start}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s4)}
.page-head .eyebrow{display:block;font-size:var(--kick-size,11.5px);font-weight:var(--kick-weight,var(--w-heavy,700));letter-spacing:var(--kick-track,.08em);text-transform:uppercase;color:var(--eyebrow-ink);margin-bottom:var(--s1);font-family:var(--label-font)}
.page-head p{color:var(--ink-2);margin-top:var(--s1);max-width:60ch;font-size:var(--lede)}   /* about 75 characters a line (R21) */

/* How a page's parts arrive (the language sets --rise; none for people who turn motion off) */
.page > *{animation:var(--rise)}
.page > *:nth-child(2){animation-delay:.04s}
.page > *:nth-child(3){animation-delay:.08s}
.page > *:nth-child(n+4){animation-delay:.12s}
@keyframes su-rise{from{opacity:0;transform:translateY(8px)}}
@keyframes su-beat{0%{box-shadow:0 0 0 0 rgb(47 125 87/45%)}80%,100%{box-shadow:0 0 0 7px rgb(47 125 87/0%)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- Layout helpers ---------- */
.grid{display:grid;gap:var(--s5)}
.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
/* The side column never drops below 380 px: narrower, its lines wrap every few words and the panel reads as squished. */
.main-side{grid-template-columns:minmax(0,1fr) minmax(380px,0.62fr)}
.stack{display:grid;gap:var(--s3)}
.row{display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap}
.spread{display:flex;justify-content:space-between;align-items:center;gap:var(--s3)}

/* Narrow pages (§13): the page is a size container, so these helpers collapse by the width the page really has
   (a phone, a split screen, 200% text), never by the device. */
.page{container:page / inline-size}
@container page (max-width: 800px){ .main-side{grid-template-columns:minmax(0,1fr)} }   /* the side column needs 380, the main 400 */
@container page (max-width: 720px){ .cols-3{grid-template-columns:repeat(2,minmax(0,1fr))} }
@container page (max-width: 520px){ .cols-2,.cols-3{grid-template-columns:minmax(0,1fr)} .page-head{flex-direction:column;align-items:flex-start} }
@container (max-width: 340px){ .kv{grid-template-columns:minmax(0,1fr);row-gap:2px} .kv dd{margin-bottom:8px} }

/* ---------- Card ---------- */
.card{background:var(--card-bg);border:var(--edge);border-top:var(--edge-top);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:var(--card-pad,var(--s5));display:grid;gap:var(--card-gap,var(--s4));align-content:start}
.card-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3)}
.card-head h2{font-family:var(--head-font);font-size:var(--head-size);font-weight:var(--head-weight);text-transform:var(--head-case)}
.card-head p{color:var(--ink-2);font-size:13px;margin-top:2px}
.card.flush{padding:0;gap:0}
.card.flush .card-head{padding:var(--s4) var(--s5);border-bottom:1px solid var(--line)}
.card.lead{border-top:var(--lead-top);box-shadow:var(--lead-side),var(--shadow)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);height:var(--ctl-h);padding:0 var(--btn-x,var(--s4));border-radius:var(--r-btn);border:var(--ctl-edge) solid var(--ctl-line);background:var(--surface);color:var(--ink);font:var(--btn-weight) var(--btn-size,13.5px) var(--font);text-transform:var(--btn-case);letter-spacing:var(--btn-track);cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--sunk);text-decoration:none}
.btn.primary{background:var(--act-bg);border-color:var(--act-bg);color:var(--act-ink);box-shadow:var(--act-shadow);transition:transform var(--quick) var(--ease)}
.btn.primary:hover{background:var(--act-bg-hover,color-mix(in srgb,var(--act-bg) 84%,var(--act-ink)));border-color:var(--act-bg-hover,color-mix(in srgb,var(--act-bg) 84%,var(--act-ink)));filter:var(--act-hover);transform:translateY(var(--act-lift))}   /* hover moves the fill toward its ink, so it shows on dark and light fills alike (v3.50) */
/* Every button state has a look (v3.50, found by the studio pinning each state): pressed sinks a pixel, busy shows only the spinner, disabled fades and cannot be pressed */
.btn{transition:transform .2s var(--ease),background-color .2s var(--ease),border-color .2s var(--ease)}
.btn:active,.btn.primary:active{filter:none;transform:scale(.98)}   /* R65: every press answers */
.skeleton{display:block;height:12px;border-radius:var(--r);background:linear-gradient(90deg,var(--sunk),color-mix(in srgb,var(--sunk) 40%,var(--surface)),var(--sunk));background-size:200% 100%;animation:skeleton 1.4s var(--ease) infinite}
@keyframes skeleton{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.skeleton{animation:none}.btn{transition:none}}
.btn[aria-busy="true"]{cursor:progress}.btn[aria-busy="true"] .spin{width:14px;height:14px;border-color:currentColor;border-top-color:transparent;opacity:.85}.btn[aria-busy="true"] .spin~svg{display:none}
.btn[aria-disabled="true"],.btn:disabled{opacity:.45;cursor:not-allowed;pointer-events:none;box-shadow:none;filter:none;transform:none}
.btn.ghost{border-color:transparent;background:transparent;color:var(--brand-strong);box-shadow:none}
.btn.block{width:100%}
.btn.sm{height:var(--ctl-h-sm);padding:0 var(--btn-x,var(--s3));font-size:12.5px}

/* ---------- Forms ---------- */
.form{display:grid;gap:var(--s4)}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
.field{display:grid;gap:8px}
.field.full{grid-column:1/-1}
.field label{font-size:13px;font-weight:var(--w-semi,600)}
.field .hint{font-size:12px;color:var(--ink-3)}
.input,.select{height:var(--input-h);border:var(--ctl-edge) solid var(--ctl-line);border-radius:var(--r);background:var(--surface);padding:0 var(--s3);display:flex;align-items:center;font-size:14px;color:var(--ink)}
.select{gap:var(--s4);min-width:min(220px,100%)}   /* room between the choice and its arrow, so it never reads squeezed (v3.50) */
.select::after{content:"";flex:none;margin-left:auto;margin-right:2px;width:8px;height:8px;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);transform:rotate(45deg) translateY(-3px)}
.input.ph{color:var(--ink-3)}
.code{display:flex;gap:var(--s2)}
.code span{width:40px;height:48px;border:1px solid var(--line-2);border-radius:var(--r);display:grid;place-items:center;font-size:20px;font-weight:var(--w-strong,650)}
/* v3.50 (HeroUI extras): a code in boxes, a stepper, a date range, a disclosure */
.code-boxes{display:flex;gap:var(--s2)}
.code-boxes .box{width:clamp(36px,11vw,44px);height:52px;padding:0;justify-content:center;font-size:20px;font-weight:var(--w-strong,600);font-variant-numeric:tabular-nums}
.num-step{display:inline-flex;align-items:stretch;width:max-content;border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface);overflow:hidden}   /* one control: less, the number, more */
.num-step .btn{width:var(--input-h);min-height:40px;height:auto;padding:0;justify-content:center;font-size:18px;border:0;border-radius:0;background:none;box-shadow:none;color:var(--ink)}
.num-step .btn:hover{background:var(--sunk)}.num-step .btn[aria-disabled="true"]{color:var(--ink-3);opacity:.5;cursor:not-allowed}
.num-step .input.num{min-width:96px;justify-content:center;font-variant-numeric:tabular-nums;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);border-radius:0;box-shadow:none}
.input.range{gap:var(--s2);white-space:nowrap;flex-wrap:wrap;height:auto;min-height:var(--input-h)}.input.range .to{color:var(--ink-3)}
.disclosure{border-bottom:1px solid var(--line)}
.disclosure summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s4);padding:12px 0;min-height:44px;box-sizing:border-box;font-weight:var(--w-strong,500)}
.disclosure summary::-webkit-details-marker{display:none}
.disclosure summary::after{content:"";flex:none;margin-top:6px;width:7px;height:7px;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);transform:rotate(45deg);transition:transform var(--quick,.2s) var(--ease)}
.disclosure[open] summary::after{transform:rotate(-135deg)}
.disclosure>p{margin:0;padding:0 0 14px;color:var(--ink-2);max-width:65ch}

/* ---------- Table ---------- */
.table{width:100%;border-collapse:collapse;font-size:13.5px}
.table th{text-align:left;font:var(--w-strong,650) var(--label-size)/1.5 var(--label-font);text-transform:var(--label-case);letter-spacing:var(--label-track);color:var(--ink-3);padding:var(--th-y) var(--row-x,var(--s5));border-bottom:var(--head-rule);background:var(--th-bg)}
.table td{padding:var(--row-y) var(--row-x,var(--s5));border-bottom:1px solid var(--line);vertical-align:middle}
.table tr:last-child td{border-bottom:0}
.table tr.sel td{background:var(--sel-bg)}
.table .sub{display:block;font-size:12px;color:var(--ink-3)}
.table tr.link{cursor:pointer}
.table tr.link:hover td{background:var(--sunk)}

/* ---------- Badges, chips, notes ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:var(--w-strong,650);padding:2px 9px;border-radius:var(--r-tag);background:var(--neutral-bg);color:var(--neutral);white-space:nowrap}
.badge.ok{background:var(--ok-bg);color:var(--ok);box-shadow:inset 0 0 0 1px var(--ok-edge,transparent)}
.badge.attn{background:var(--attn-bg);color:var(--attn);box-shadow:inset 0 0 0 1px var(--attn-edge,transparent)}
.badge.info{background:var(--info-bg);color:var(--info);box-shadow:inset 0 0 0 1px var(--info-edge,transparent)}
.badge.dot::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.chip{display:inline-flex;align-items:center;font-size:12.5px;padding:3px 10px;border-radius:var(--r-tag);border:var(--ctl-edge) solid var(--ctl-line);color:var(--ink-2);background:var(--surface)}
.note{background:var(--sunk);border-radius:var(--r);padding:var(--s3) var(--s4);font-size:13px;color:var(--ink-2);display:flex;gap:var(--s3);align-items:flex-start}
.note.info{background:var(--info-bg);color:var(--info)}
.note.brand{background:var(--brand-soft);color:var(--ink)}
/* A link on a brand tint is darkened a step so it keeps 4.5 to 1 on the tint, not only on white (feel check, v3.43). */
.note.brand a{color:color-mix(in srgb,var(--brand-strong) 82%,black)}
.note b{color:var(--ink)}
.rules{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3)}
.rules li{display:grid;grid-template-columns:22px 1fr;gap:var(--s2);font-size:13px;color:var(--ink-2)}
.rules li::before{content:"";width:18px;height:18px;border-radius:50%;background:var(--brand-soft);border:2px solid var(--brand);margin-top:1px}
.rules b{color:var(--ink);font-weight:var(--w-semi,600)}

/* ---------- Key-value and timeline ---------- */
.kv{display:grid;grid-template-columns:var(--kv,180px) minmax(0,1fr);gap:10px var(--s4);margin:0;font-size:14px}
.kv dt{color:var(--ink-3)} .kv dd{margin:0}
.timeline{list-style:none;margin:0;padding:0 0 0 var(--s5);border-left:2px solid var(--line);display:grid;gap:var(--s3)}
.timeline li{position:relative;font-size:13.5px}
.timeline li::before{content:"";position:absolute;left:calc(-1 * var(--s5) - 6px);top:5px;width:10px;height:10px;border-radius:50%;background:var(--line-2);border:2px solid var(--surface)}
.timeline li:first-child::before{background:var(--brand)}
.timeline li[data-g]::before{background:var(--gc)}.timeline li b{display:inline-flex;align-items:center;gap:6px}.timeline li b svg.i{width:14px;height:14px;color:var(--gc,var(--ink-3))}   /* R38: an event's kind by its icon and colour */
.timeline .when{color:var(--ink-3);font-size:12px;display:block}

/* ---------- Tiles ---------- */
.tile{background:var(--tile-bg);border:var(--tile-edge);border-top:var(--tile-top);border-left:var(--tile-left);border-radius:var(--r-lg);box-shadow:var(--tile-shadow);padding:var(--tile-pad,var(--s4) var(--s5));display:grid;gap:2px}
.tile .label{font-size:12.5px;color:var(--ink-2);font-family:var(--label-font);text-transform:var(--label-case);letter-spacing:var(--label-track)}
.tile .value{font:var(--value-weight) var(--value-size)/var(--value-lh) var(--value-font);font-variant-numeric:tabular-nums}
.tile .detail{font-size:12px;color:var(--ink-3)}
/* A progress ring: style="--p:56" */
.ring{--p:0;width:42px;height:42px;border-radius:50%;background:conic-gradient(var(--ok) calc(var(--p)*1%),var(--ring-track) 0);display:grid;place-items:center;flex:none}
.ring::after{content:"";width:30px;height:30px;border-radius:50%;background:var(--surface)}

/* ---------- Centered pages (sign-in) ---------- */
.center-page{min-height:100vh;display:grid;place-items:center;background:var(--bg)}
.center-card{width:440px;max-width:100%;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:var(--s8);display:grid;gap:var(--s5);border-top:4px solid var(--brand)}
.empty{text-align:center;color:var(--ink-3);padding:var(--s8) var(--s4)}
/* Empty states (§12.7): an icon in a soft tile, a title with its scope, why it is empty and what fills it, who acts
   when it isn't the reader, and one action. Full size fills the card it replaces; compact sits in a list on one line. */
.empty-state{display:grid;justify-items:center;text-align:center;gap:var(--s2);padding:var(--s8) var(--s5);min-height:220px;align-content:center}
.empty-state .es-ic{width:72px;height:72px;border-radius:18px;display:grid;place-items:center;background:var(--sunk);color:var(--ink-2);margin-bottom:var(--s2)}
.empty-state .es-ic svg{width:40px;height:40px}
.empty-state h3{font-size:16px;font-weight:var(--w-strong,650);color:var(--ink)}
.empty-state p{color:var(--ink-2);max-width:52ch;font-size:13.5px}
.empty-state .es-who{color:var(--ink-3);font-size:12.5px}
.empty-state .btn{margin-top:var(--s2)}
.empty-state.done .es-ic{background:var(--ok-bg);color:var(--ok)}
.empty-state.error .es-ic{background:var(--attn-bg,var(--sunk));color:var(--attn)}
.empty-line{display:flex;align-items:center;gap:var(--s2);color:var(--ink-3);font-size:13px;padding:var(--s3) var(--s5)}
.empty-line svg{width:20px;height:20px;flex:none}
.empty-line a{font-weight:var(--w-semi,600)}
.table td > .empty-line{padding:0}

/* ---------- Tables never squeeze (§12.5, 20 Oct 2026) ---------- */
/* File names in a table may wrap at any character; ordinary words never do (that reads as squashed). */
.card .table code{overflow-wrap:anywhere;white-space:normal}
/* A table in a narrow card reflows instead of squeezing its columns: each row becomes its first cell, with the
   other cells on a line under it. The header row is dropped (each value is a chip, badge or short phrase). */
.card{container-type:inline-size}
@container (max-width: 520px){
  .table thead{display:none}
  .table tr{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:10px;row-gap:2px;padding:10px var(--s5);border-bottom:1px solid var(--line)}
  .table tr:last-child{border-bottom:0}
  .table tr.sel{background:var(--sel-bg)}
  .table tr.sel td{background:none}
  .table tr > td,.table tr > th{border:0;padding:0}
  .table tr > :first-child{flex:1 0 100%}
  .table tr > :not(:first-child){flex:0 0 auto;max-width:100%;font-size:12.5px;color:var(--ink-2)}
  .table td.num{margin-left:auto}
}
/* A table of sentences (.table.labelled) reflows earlier, under 760 px, and keeps its column names: each cell
   shows its label (data-label) above it, so no meaning is lost with the header row. */
@container (max-width: 760px){
  .table.labelled thead{display:none}
  .table.labelled tr{display:grid;gap:6px;padding:12px var(--s5);border-bottom:1px solid var(--line)}
  .table.labelled tr:last-child{border-bottom:0}
  .table.labelled tr > td,.table.labelled tr > th{border:0;padding:0;font-size:inherit;color:inherit;max-width:none}
  .table.labelled td[data-label]::before{content:attr(data-label);display:block;font-size:11.5px;font-weight:var(--w-strong,650);color:var(--ink-3);margin-bottom:1px}
}
/* A command alone in its cell stays on one line, so it reads as one command (the table reflows first when narrow). */
.card .table td:first-child > code:only-child{white-space:nowrap}

/* §12.5 pair by weight: cards in a row whose content differs a lot keep their own height (the short one is not
   stretched into an empty box); cards of similar weight stay equal height. */
.grid.own-height{align-items:start}

/* ---------- Shared patterns (moved from the Codebase Companion, v3.43) ---------- */
/* A small label over a title */
.eyebrow{display:block;font-size:var(--kick-size,11.5px);font-weight:var(--kick-weight,var(--w-heavy,700));letter-spacing:var(--kick-track,.08em);text-transform:uppercase;color:var(--brand-strong)}
.badge.contra{background:var(--attn-bg);color:var(--attn);box-shadow:inset 0 0 0 1px var(--attn)}
/* Phase route: been · is · should be. Passed stops are done (the success colour); the current stop is the act-here colour. */
.route{display:grid;grid-template-columns:repeat(var(--n,7),minmax(0,1fr));gap:0;position:relative;padding:4px 0 2px}
.route .stop{display:grid;justify-items:center;align-content:start;grid-template-rows:28px auto auto;text-align:center;gap:6px;position:relative;padding:0 4px}
.route .stop::before{content:"";position:absolute;top:13px;left:-50%;right:50%;height:3px;background:var(--line)}
.route .stop:first-child::before{display:none}
.route .stop.passed::before,.route .stop.now::before{background:var(--brand)}
.route .dot{width:28px;height:28px;border-radius:50%;background:var(--surface);border:2px solid var(--line-2);display:grid;place-items:center;font-size:12px;font-weight:var(--w-heavy,700);color:var(--ink-3);position:relative;z-index:1}
.route .passed .dot{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.route .now .dot{background:var(--surface);border:3px solid var(--brand-strong);color:var(--brand-strong);box-shadow:0 0 0 5px var(--brand-soft)}
.route .name{font-size:12.5px;font-weight:var(--w-strong,650);line-height:1.25}
.route .when{font-size:12px;color:var(--ink-3);line-height:1.3}
.route .now .name{color:var(--brand-strong)}
.route .stop.passed::before{background:var(--ok)}
.route .passed .dot{background:var(--ok);border-color:var(--ok)}
.route .dot{border-radius:var(--r-step)}

/* Progress block: a titled group of steps */
.prog{display:grid;gap:var(--s4)}
.prog + .prog{border-top:1px solid var(--line);padding-top:var(--s5)}
.prog-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3)}
.prog-head h3{font-size:15px}
.prog-head p{color:var(--ink-2);font-size:13px}
.prog-head h3{font-family:var(--head-font);font-size:var(--head-size);font-weight:var(--head-weight);text-transform:var(--head-case)}

/* Three tenses and the next-steps list */
.tense{display:grid;gap:var(--s3)}
.tense h4{font-size:11.5px;font-weight:var(--w-heavy,700);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.next-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
.next-list li{display:grid;grid-template-columns:24px 1fr auto;gap:var(--s3);align-items:start;font-size:13.5px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.next-list .n{width:22px;height:22px;border-radius:50%;background:var(--brand-soft);color:var(--brand-strong);display:grid;place-items:center;font-size:11.5px;font-weight:var(--w-heavy,700)}
.next-list .sub{display:block;font-size:12px;color:var(--ink-3)}
.next-list li{border-radius:var(--r-md);transition:background var(--quick) var(--ease)}
.next-list li:hover{background:var(--bg)}

/* Conversation: a thread of messages, people and agents */
.thread{display:grid;gap:var(--s3)}
.msg{border:1px solid var(--line);border-radius:var(--r-lg);padding:12px 14px;display:grid;gap:6px;background:var(--surface)}
.msg.agent{background:var(--sunk);border-color:transparent;margin-left:28px}
.msg .who{display:flex;gap:8px;align-items:center;font-size:12.5px;color:var(--ink-3)}
.msg .who b{color:var(--ink);font-weight:var(--w-strong,650)}
.msg p{font-size:13.5px}
.msg .ev{font-size:12px;color:var(--ink-2);display:flex;gap:6px;flex-wrap:wrap}
.ev code{background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:0 5px}

/* Check list: done ticks, open marks */
.checks{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.checks li{display:grid;grid-template-columns:20px 1fr;gap:8px;font-size:13px;align-items:start}
.checks li::before{content:"✓";width:18px;height:18px;border-radius:50%;background:var(--ok-bg);color:var(--ok);display:grid;place-items:center;font-size:11px;font-weight:800}
.checks li.no::before{content:"!";background:var(--attn-bg);color:var(--attn)}

/* Legend for a picture's line styles */
.legend{display:flex;gap:var(--s4);font-size:12px;color:var(--ink-2);flex-wrap:wrap}
.legend i{display:inline-block;width:18px;height:4px;border-radius:2px;margin-right:6px;vertical-align:middle;background:var(--ok)}
.legend i.attn{background:var(--attn)} .legend i.off{background:var(--line-2)}

/* Code and terminal text sit in a paper-tone panel, never a dark block (design system §12.2: three surfaces only). */
.term{background:var(--sunk);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px;font:12.5px/1.6 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere}
.card .note{display:block;height:auto}

/* Explanation Contract: five slots, same shape everywhere */
.explain{display:grid;grid-template-columns:96px 1fr;gap:8px 16px;margin:0;padding:14px 16px;border-radius:var(--r-lg);background:var(--info-bg);font-size:13.5px}
.explain dt{font-size:11px;font-weight:var(--w-heavy,700);letter-spacing:.08em;text-transform:uppercase;color:var(--info);padding-top:2px}
.explain dd{margin:0;color:var(--ink)}
.explain code{background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:0 5px}

/* Set-up steps */
.steps{list-style:none;margin:0;padding:0;display:grid}
.steps li{display:grid;grid-template-columns:28px 1fr auto;gap:var(--s4);align-items:start;padding:14px var(--s5);border-bottom:1px solid var(--line)}
.steps li:last-child{border-bottom:0}
.steps .n{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:var(--w-heavy,700);background:var(--sunk);color:var(--ink-2)}
.steps .done .n{background:var(--ok);color:var(--on-fill,#fff)}
.steps .now .n{background:var(--brand-strong);color:var(--brand-ink)}
.steps b{display:block;font-size:14px}
.steps .sub{display:block;font-size:12.5px;color:var(--ink-2);margin-top:2px}
.steps code.cmd{display:inline-block;margin-top:6px;background:var(--sunk);color:var(--ink);border:1px solid var(--line);border-radius:4px;padding:3px 8px;font-size:12px}
.keys{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.keys span:not(.kbd){font:12px var(--mono);border:1px solid var(--line-2);border-radius:4px;padding:1px 6px;background:var(--surface)}
.keys span.miss{border-color:var(--attn);background:var(--attn-bg);color:var(--attn)}

/* Board of lanes and tickets */
.board{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:var(--s4)}
.lane{background:var(--sunk);border-radius:var(--r-lg);padding:12px;display:grid;gap:10px;align-content:start}
.lane h3{display:flex;gap:8px;align-items:center;font-size:13.5px}
.lane .count{margin-left:auto;font-size:11px;font-weight:var(--w-heavy,700);background:var(--surface);border-radius:10px;padding:1px 7px;color:var(--ink-2)}
.ticket{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;display:grid;gap:4px;font-size:13px}
.ticket .sub{font-size:12px;color:var(--ink-3)}
.ticket.blocked{border-left:3px solid var(--attn)}

.chip{white-space:nowrap}
/* A stack inside a grid cell keeps its rows at the top; a taller neighbour never spreads its table into gaps. */
.grid > .stack{align-content:start}
.chip.on{border-color:var(--brand-strong);background:var(--brand-soft);color:var(--ink)}
.chip[role=button]{cursor:pointer}.chip[role=button]:hover{background:var(--sunk);color:var(--ink)}.chip.on[role=button]:hover{background:var(--brand-soft);border-color:var(--ink-3)}   /* a chip that filters shows it can be pressed (v3.50) */

/* Areas: a colour per area for wayfinding (soft in the menu, the same hue on the tabs); and tabs under the top bar */
.hue-project{--hue:#4f46e5}.hue-code{--hue:#0f9488}.hue-changes{--hue:#7c3aed}.hue-team{--hue:#e0592a}.hue-setup{--hue:#c58a00}.hue-machine{--hue:#475569}
.nav .area-link{gap:10px}
.nav .area-dot{width:10px;height:10px;border-radius:3px;background:var(--hue);flex:none}
.nav a.area-link.on{background:color-mix(in srgb,var(--hue) 10%,white)}
.nav a.area-link.on::before{background:var(--hue)}
.subnav{display:flex;gap:4px;padding:0 var(--s8);border-bottom:1px solid var(--line);background:var(--surface)}
.subnav a{display:inline-flex;align-items:center;gap:6px;height:42px;padding:0 12px;color:var(--ink-2);font-weight:var(--w-strong,500);border-bottom:2px solid transparent}
.subnav a:hover{color:var(--ink);text-decoration:none}
.subnav a.on{color:var(--ink);border-bottom-color:var(--hue);font-weight:var(--w-strong,650)}
.subnav .count{font-size:11px;font-weight:var(--w-heavy,700);background:var(--sunk);border-radius:10px;padding:1px 7px;color:var(--ink-2)}

.tense,.msg{container-type:inline-size}
/* Terminal views (design system 12.11): drawn in the terminal's own colours, 80 columns, readable in monochrome. */
.tv-card{max-width:760px}
.tv{background:var(--sunk);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 18px;font:13px/1.65 var(--mono);color:var(--ink);white-space:pre;overflow-x:auto;width:max-content;max-width:100%}
.tv-prompt{color:var(--ink-3);margin-bottom:6px}
.tv b{font-weight:var(--w-heavy,700)}
.t-ok{color:#2d7a5e} .t-attn{color:#9a6a1e} .t-bad{color:#b0391a} .t-mute{color:var(--ink-3)} .t-cmd{color:var(--brand-strong);font-weight:var(--w-semi,600)} .t-link{text-decoration:underline;text-underline-offset:2px}
.t-bar{color:#2d7a5e}
.tv-hint{display:inline-block;margin-top:6px;padding-top:6px;border-top:1px dashed var(--line);color:var(--ink-2)}
@container (max-width: 700px){ .tv{white-space:break-spaces;overflow-wrap:anywhere;width:auto} }
.side-cols{display:grid;grid-template-columns:300px minmax(0,1fr);gap:var(--s5);align-items:start}
@container page (max-width: 640px){ .side-cols{grid-template-columns:minmax(0,1fr)} }
.tv-card{max-width:min(760px,100%)}

/* =====================================================================
   Components in every state (design system build step 3, 22 Oct 2026)
   Each component lists its states. States use the same words everywhere: hover, focus (keyboard), on / selected,
   disabled, error, busy. Colours come from the dials and state tokens only, so every language draws them.
   ===================================================================== */

/* ---------- Choosing: checkbox, radio, toggle ---------- */
/* <label class="check"><input type="checkbox"> Text <small>hint</small></label>; .radio for one of many; .toggle for on/off now.
   States: checked, focus, disabled, error (on the label). A toggle says what it does, never "On/Off" alone. */
.check,.radio,.toggle{display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:start;font-size:14px;color:var(--ink);cursor:pointer}
.check small,.radio small,.toggle small{grid-column:2;font-size:12.5px;color:var(--ink-3)}
.check input,.radio input,.toggle input{appearance:none;margin:2px 0 0;width:18px;height:18px;border:1.5px solid var(--ctl-line);background:var(--surface);display:grid;place-items:center;cursor:pointer;flex:none}
.check input{border-radius:min(var(--r),5px)}
.radio input{border-radius:50%}
.check input::after{content:"";width:9px;height:5px;border:2px solid var(--act-ink);border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px);opacity:0}
.radio input::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--act-bg);opacity:0}
.check input:checked{background:var(--act-bg);border-color:var(--act-bg)}
.check input:checked::after,.radio input:checked::after{opacity:1}
.radio input:checked{border-color:var(--act-bg)}
.check input:indeterminate{background:var(--act-bg);border-color:var(--act-bg)}
.check input:indeterminate::after{opacity:1;transform:none;width:8px;height:0;border-left:0;border-bottom:2px solid var(--act-ink)}
.toggle input{width:34px;height:20px;border-radius:999px;background:var(--line-2);border:0;position:relative;transition:background var(--quick) var(--ease)}
.toggle input::after{content:"";position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgb(0 0 0/20%);transition:transform var(--quick) var(--ease)}
.toggle input:checked{background:var(--ok)}
.toggle input:checked::after{transform:translateX(14px)}
.check input:focus-visible,.radio input:focus-visible,.toggle input:focus-visible{outline:2px solid var(--brand-strong);outline-offset:2px}
.check:has(input:disabled),.radio:has(input:disabled),.toggle:has(input:disabled){color:var(--ink-3);cursor:not-allowed}
.check input:disabled,.radio input:disabled,.toggle input:disabled{opacity:.5;cursor:not-allowed}
.check.error input,.radio.error input{border-color:var(--error)}
.choices{display:grid;gap:10px;border:0;margin:0;padding:0}
.choices legend{font-size:13px;font-weight:var(--w-semi,600);margin-bottom:6px;padding:0}

/* ---------- Segmented control: one of 2 to 5 views of the same thing ---------- */
/* <div class="seg" role="radiogroup"><button class="on" aria-pressed="true">Day</button>…</div>. States: on, hover, focus, disabled. */
.seg{display:inline-flex;background:var(--sunk);border-radius:var(--r);padding:3px;gap:2px}
.seg button,.seg a{border:0;background:none;font:var(--w-semi,600) 13px var(--font);color:var(--ink-2);height:calc(var(--ctl-h) - 8px);padding:0 12px;border-radius:calc(var(--r) - 2px);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.seg button:hover,.seg a:hover{color:var(--ink);text-decoration:none}
.seg button.on,.seg a.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgb(0 0 0/8%)}
.seg button:disabled{color:var(--ink-3);cursor:not-allowed}

/* ---------- Tabs: places inside one page; the count says what waits in each ---------- */
/* <nav class="tabs"><a class="on">Open <span class="count">3</span></a>…</nav>. States: on, hover, focus, disabled. */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto}
.tabs a,.tabs button{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 12px;color:var(--ink-2);font:var(--w-strong,500) 13.5px var(--font);border:0;background:none;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;cursor:pointer}
.tabs a:hover,.tabs button:hover{color:var(--ink);text-decoration:none}
.tabs .on{color:var(--ink);font-weight:var(--w-strong,650);border-bottom-color:var(--act-bg)}
.tabs .count{font-size:11px;font-weight:var(--w-heavy,700);background:var(--sunk);border-radius:10px;padding:1px 7px;color:var(--ink-2)}
.tabs [aria-disabled="true"]{color:var(--ink-3);cursor:not-allowed}

/* ---------- Search field ---------- */
/* <label class="search"><svg class="i">…</svg><input placeholder="Find a patient"><kbd>/</kbd></label>. States: focus, filled (shows .clear), busy. */
.search{display:flex;align-items:center;gap:8px;height:var(--input-h);padding:0 12px;border:var(--ctl-edge) solid var(--ctl-line);border-radius:var(--r);background:var(--surface);color:var(--ink-3)}
.search input{flex:1;min-width:0;border:0;outline:0;background:none;font:14px var(--font);color:var(--ink)}
.search:focus-within{border-color:var(--brand-strong);box-shadow:0 0 0 3px var(--brand-soft)}
.search kbd{font:var(--w-semi,600) 11px var(--font);border:1px solid var(--line-2);border-radius:5px;padding:0 5px}
.search .clear{border:0;background:none;color:var(--ink-3);cursor:pointer;font-size:16px;line-height:1}
.search.busy::after{content:"";width:14px;height:14px;border-radius:50%;border:2px solid var(--line-2);border-top-color:var(--ink-2);animation:su-spin .8s linear infinite}
@keyframes su-spin{to{transform:rotate(360deg)}}

/* ---------- Menus: a select's list and an actions menu ---------- */
/* <div class="menu" role="menu"><a class="on">…</a><hr><a class="danger">Remove</a></div>, opened under its button.
   Each item may carry a hint (small) and a key. States: hover/active (keyboard), on (chosen), disabled, danger. */
.menu{min-width:200px;max-width:320px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--pop-shadow);padding:4px;display:grid;gap:1px}
.menu a:not(:has(svg))::before{content:""}   /* every item keeps the first column for a tick or an icon */
.menu a,.menu button{display:grid;grid-template-columns:18px 1fr auto;align-items:center;gap:10px;padding:8px 10px;border:0;background:none;border-radius:calc(var(--r-md) - 2px);color:var(--ink);font:14px var(--font);text-align:left;cursor:pointer}
.menu a:hover,.menu button:hover,.menu .active{background:var(--sunk);text-decoration:none}
.menu .on{font-weight:var(--w-strong,650)}
.menu .on::before{content:"✓";color:var(--brand-strong);font-weight:var(--w-heavy,700)}
.menu small{grid-column:2;font-size:12px;color:var(--ink-3)}
.menu kbd{font:12px var(--mono);color:var(--ink-3)}
.menu [aria-disabled="true"]{color:var(--ink-3);cursor:not-allowed}
.menu .danger{color:var(--error)}
.menu [data-g] svg.i{color:var(--gc)}   /* R38: an action's kind by its icon's colour; the words stay */
/* Grouped list (R38, lab F10): find by sight, read to confirm. Heads in the kicker's voice with the group's colour; items in one weight with their icon in the group's colour. */
.glist{display:grid;align-content:start;font:14px/1.3 var(--font);color:var(--ink)}
.glist-group{display:grid}
.glist-head{display:flex;align-items:center;gap:8px;margin:0 8px 2px;padding:14px 8px 6px;border-bottom:1px solid var(--line);font:var(--kick-weight,500) var(--kick-size,11px)/1.3 var(--kick-font,var(--font));letter-spacing:var(--kick-track,.12em);text-transform:uppercase;color:var(--ink-2)}
.glist-head::before{content:"";flex:none;width:8px;height:8px;border-radius:2px;background:var(--gc,var(--ink-3))}
.glist-head .n,.glist-item .n{margin-left:auto;font:13px var(--font);letter-spacing:0;text-transform:none;color:var(--ink-3);font-variant-numeric:tabular-nums}
.glist-item{display:flex;align-items:center;gap:10px;min-height:40px;margin:0 8px;padding:0 8px;border:0;border-radius:calc(var(--r) - 2px);background:none;color:var(--ink);font:inherit;font-weight:var(--w-text,400);text-align:left;text-decoration:none;cursor:pointer}
.glist-item svg.i{width:16px;height:16px;color:var(--gc,var(--ink-2))}
.glist-item:hover{background:var(--sunk);text-decoration:none}
.glist-item.on,.glist-item[aria-current]{background:var(--gt,var(--sunk))}
.glist-item:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.glist.dense .glist-item{min-height:30px;font-size:13.5px;gap:8px}.glist.dense .glist-item svg.i{width:14px;height:14px}
.glist.plain :is([data-g],.g-1,.g-2,.g-3,.g-4,.g-5,.g-6){--gc:var(--ink-2);--gt:var(--sunk)}   /* F9: the same list without group colours */
@media (max-width:520px){.glist-item,.glist.dense .glist-item{min-height:44px;font-size:15px}}
.menu hr{border:0;border-top:1px solid var(--line);margin:4px 2px}
.menu .menu-head{padding:6px 10px 2px;font-size:11.5px;font-weight:var(--w-heavy,700);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.select.open{border-color:var(--brand-strong);box-shadow:0 0 0 3px var(--brand-soft)}
.select[tabindex]{cursor:pointer}.select[tabindex]:hover{border-color:var(--ink-3)}.select[tabindex]:focus-visible{outline:none;border-color:var(--brand-strong);box-shadow:0 0 0 3px var(--brand-soft)}   /* a select shows it can be opened (v3.50) */
.table tbody tr:hover>td{background:color-mix(in oklab,var(--sunk),var(--ink) 4%)}   /* a step past the stripe, so a pointed white row never reads as a stripe (Shades Lab) */   /* the row under the pointer, so the eye keeps its line (v3.50) */

/* ---------- Tooltip: a name or a short why, never the only place something is said ---------- */
.tip{position:relative;display:inline-flex}
.tip > .tip-text{position:absolute;bottom:calc(100% + 8px);left:0;transform:none;background:var(--ink);color:var(--surface);font-size:12px;line-height:1.4;padding:6px 9px;border-radius:min(var(--r),6px);white-space:nowrap;max-width:260px;pointer-events:none;opacity:0;transition:opacity var(--quick) var(--ease)}
.tip:hover > .tip-text,.tip:focus-within > .tip-text,.tip.show > .tip-text{opacity:1}
/* A tooltip starts at its control's left edge, so a control near the left of a card never pushes it out of view; a control near the right edge takes .end (v3.50) */
.tip.end > .tip-text{left:auto;right:0}

/* ---------- Dialog: one question that must be answered before going on ---------- */
/* <div class="scrim"><section class="dialog" role="dialog" aria-labelledby="…"><header><h2>…</h2><p>…</p></header>…
   <footer><button class="btn">Cancel</button><button class="btn primary">Remove 3 files</button></footer></section></div>
   The primary button names the action; .danger for what can't be undone. Sizes: default 480, .wide 720. */
:root{--scrim:rgb(20 18 14/38%)}
/* R45 (31 Oct 2026): on dark a grey veil vanishes into the page, so the backdrop goes deeper and what comes forward goes lighter, with an edge */
html[data-theme="dark"]{--scrim:rgb(0 0 0/64%)}
@media (prefers-color-scheme:dark){html[data-theme="system"]{--scrim:rgb(0 0 0/64%)}}
.scrim{position:fixed;inset:0;background:var(--scrim);display:grid;place-items:center;padding:24px;z-index:40}
.scrim.inline{position:relative;inset:auto;min-height:320px;border-radius:var(--r-lg)}
.dialog{width:480px;max-width:100%;max-height:calc(100vh - 48px);overflow:auto;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--pop-shadow);display:grid}
.dialog.wide{width:720px}
.dialog.task{width:520px}.dialog.task > header{padding:20px 24px;border-bottom:1px solid var(--line)}.dialog.task > .body{padding:24px}.dialog.task > footer{padding:16px 24px;border-top:1px solid var(--line)}   /* a task of its own (R1, 31 Oct 2026): head, body, foot like a card (R60) */
html[data-theme="dark"] .dialog{--line:var(--line-2);background:color-mix(in srgb,var(--surface) 90%,#fff);box-shadow:0 0 0 1px var(--line-2),var(--pop-shadow)}
@media (prefers-color-scheme:dark){html[data-theme="system"] .dialog{--line:var(--line-2);background:color-mix(in srgb,var(--surface) 90%,#fff);box-shadow:0 0 0 1px var(--line-2),var(--pop-shadow)}}
.dialog > header{padding:20px 24px 4px;display:grid;gap:6px}
.dialog > header h2{font-family:var(--head-font);font-size:18px;font-weight:var(--head-weight)}
.dialog > header p{color:var(--ink-2);font-size:13.5px}
.dialog > .body{padding:12px 24px;display:grid;gap:var(--s4,16px)}
.dialog > footer{padding:16px 24px 20px;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px}   /* wider buttons (capitals, long words) wrap instead of pushing the dialog out (v3.50) */
.btn.danger{background:var(--error);border-color:var(--error);color:var(--on-fill,#fff)}

/* ---------- Drawer: a side panel for detail, the page stays in view ---------- */
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(480px,100%);background:var(--surface);border-left:1px solid var(--line);box-shadow:var(--pop-shadow);display:grid;grid-template-rows:auto 1fr auto;z-index:40}
.drawer.inline{position:relative;inset:auto;height:100%;min-height:360px;width:100%;max-width:480px;border-radius:var(--r-lg) 0 0 var(--r-lg)}
.drawer > header{display:flex;justify-content:space-between;align-items:start;gap:12px;padding:18px 20px;border-bottom:1px solid var(--line)}
.drawer > header h2{font-family:var(--head-font);font-size:calc(var(--head-size, 16px) + 1px);font-weight:var(--head-weight)}   /* a pane title is one step above a card title, on the ladder (R21) */
.drawer > .body{padding:16px 20px;overflow:auto;display:grid;gap:16px;align-content:start}
.drawer > footer{padding:14px 20px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:10px}
.close{width:32px;height:32px;border-radius:var(--r);border:0;background:none;color:var(--ink-3);display:grid;place-items:center;cursor:pointer;font-size:18px}
.close:hover{background:var(--sunk);color:var(--ink)}

/* ---------- Toast: what just happened, with undo; never a question ---------- */
/* Kinds: plain, .ok, .attn, .error. A toast with an action stays until closed. */
.toasts{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);display:grid;gap:8px;z-index:50}
.toasts.inline{position:static;transform:none}
.toast{display:flex;align-items:center;gap:12px;min-width:320px;max-width:520px;padding:10px 12px 10px 14px;border-radius:var(--r-md);background:var(--ink);color:var(--surface);font-size:13.5px;box-shadow:var(--pop-shadow)}
.toast::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--surface);opacity:.6;flex:none}
.toast.ok::before{background:#5bc48d;opacity:1}
.toast.attn::before{background:#f2b84b;opacity:1}
.toast.error::before{background:#ef7a66;opacity:1}
.toast .act{margin-left:auto;font-weight:var(--w-strong,650);color:var(--surface);text-decoration:underline;text-underline-offset:3px;background:none;border:0;cursor:pointer;font-size:13.5px}

/* ---------- Alert: something on this page needs attention, with what to do ---------- */
/* <div class="alert attn"><svg class="i">…</svg><div><b>Title</b><p>Why, and what fixes it.</p></div><a class="btn sm">Fix</a></div>
   Kinds: info, attn, ok, error (system faults only). */
.alert{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:start;padding:12px 14px;border-radius:var(--r-md);background:var(--info-bg);color:var(--info);border:1px solid color-mix(in srgb,currentColor 18%,transparent)}
.alert b{color:var(--ink);font-weight:var(--w-strong,650);display:block}
.alert p{color:var(--ink-2);font-size:13.5px;margin-top:2px}
.alert.attn{background:var(--attn-bg);color:var(--attn)}
.alert.ok{background:var(--ok-bg);color:var(--ok)}
.alert.error{background:var(--error-bg);color:var(--error)}
.alert > .btn{align-self:center}

/* ---------- Form errors: next to the field, and a summary on top when more than one ---------- */
.field.error .input,.field.error .select,.field.error input,.field.error select{border-color:var(--error);box-shadow:0 0 0 3px var(--error-bg)}
.field .err{font-size:12.5px;color:var(--error);display:flex;gap:6px;align-items:center}
.field .err::before{content:"!";width:14px;height:14px;border-radius:50%;background:var(--error);color:var(--on-fill,#fff);font:800 10px/14px var(--font);text-align:center;flex:none}
.field.ok .input{border-color:var(--ok)}
.field .input:focus-within,.input.focus{border-color:var(--brand-strong);box-shadow:0 0 0 3px var(--brand-soft)}
.input.disabled,.select.disabled{background:var(--sunk);color:var(--ink-3);cursor:not-allowed}
.form-errors{border-radius:var(--r-md);background:var(--error-bg);padding:12px 14px;display:grid;gap:4px;font-size:13.5px}
.form-errors b{color:var(--error)}
.form-errors a{color:var(--ink);text-decoration:underline}

/* ---------- Date and file inputs ---------- */
.input.date{gap:8px}
.input.date::after{content:"";margin-left:auto;width:14px;height:14px;border:1.5px solid var(--ink-3);border-top-width:4px;border-radius:3px}
.drop{border:1.5px dashed var(--line-2);border-radius:var(--r-lg);padding:24px;display:grid;justify-items:center;gap:6px;text-align:center;color:var(--ink-2);background:var(--surface)}
.drop b{color:var(--ink)}
.drop.over{border-color:var(--brand-strong);background:var(--brand-soft)}
.drop.error{border-color:var(--error);background:var(--error-bg)}
.file-row{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r);font-size:13px}
.file-row .bar{grid-column:2;height:4px}
.file-row span>.bar{margin-top:6px}

/* ---------- Progress and loading: a bar when the end is known, a skeleton while the shape is known ---------- */
/* Under 1 s show nothing; 1 to 4 s a skeleton or spinner; over 4 s a bar with what is happening and how long. */
.bar{height:6px;border-radius:3px;background:var(--sunk);overflow:hidden}
.bar > i,.bar > span{display:block;height:100%;width:var(--p,0%);background:var(--ok);border-radius:3px}
.bar.attn > :first-child{background:var(--attn)}
.bar.busy > :first-child{width:30%;animation:su-slide 1.4s ease-in-out infinite}
@keyframes su-slide{from{transform:translateX(-100%)}to{transform:translateX(340%)}}
.skel{display:block;background:linear-gradient(90deg,var(--sunk) 0,color-mix(in srgb,var(--sunk) 50%,var(--surface)) 50%,var(--sunk) 100%) 0 0/200% 100%;border-radius:var(--r);height:12px;animation:su-shimmer 1.4s linear infinite}
.skel.h{height:22px;width:40%}
.skel.line{width:100%}
.skel.short{width:60%}
.skel.block{height:120px}
@keyframes su-shimmer{to{background-position:-200% 0}}
.spin{width:18px;height:18px;border-radius:50%;border:2px solid var(--line-2);border-top-color:var(--ink-2);animation:su-spin .8s linear infinite;display:inline-block}

/* ---------- Pagination: where you are in a long list, and how long it is ---------- */
.pager{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;color:var(--ink-3)}
.pager nav{display:flex;gap:4px}
.pager a,.pager span.gap{min-width:32px;height:32px;padding:0 8px;display:grid;place-items:center;border-radius:var(--r);color:var(--ink-2);font-weight:var(--w-semi,600)}
.pager a:hover{background:var(--sunk);text-decoration:none}
.pager a.on{background:var(--act-bg);color:var(--act-ink)}
.pager a[aria-disabled="true"]{color:var(--line-2);pointer-events:none}

/* ---------- Wizard stepper: a short fixed path; says how many steps and which are done ---------- */
.stepper{list-style:none;margin:0;padding:0;display:flex;gap:0;counter-reset:st}
.stepper li{flex:1;display:grid;justify-items:start;gap:6px;position:relative;font-size:12.5px;color:var(--ink-3);counter-increment:st}
.stepper li::before{content:counter(st);width:26px;height:26px;border-radius:var(--r-step);display:grid;place-items:center;font-weight:var(--w-heavy,700);font-size:12px;background:var(--surface);border:1.5px solid var(--line-2);color:var(--ink-3);position:relative;z-index:1}
.stepper li::after{content:"";position:absolute;top:13px;left:30px;right:4px;height:2px;background:var(--line)}
.stepper li:last-child::after{display:none}
.stepper li.done::before{content:"✓";background:var(--ok);border-color:var(--ok);color:var(--on-fill,#fff)}
.stepper li.done::after{background:var(--ok)}
.stepper li.now{color:var(--ink);font-weight:var(--w-strong,650)}
.stepper li.now::before{border:2.5px solid var(--act-bg);color:var(--act-bg);box-shadow:0 0 0 4px var(--brand-soft)}
.stepper li.error::before{content:"!";border-color:var(--error);color:var(--error)}

/* ---------- People: an avatar group says who, with a count for the rest ---------- */
.avatars{display:flex;align-items:center;gap:4px}
.avatars .avatar{width:30px;height:30px;font-size:12px;border:2px solid var(--surface);margin-left:0;background:color-mix(in srgb,var(--hue,var(--brand)) 16%,var(--surface))}
.avatars .avatar:first-child{margin-left:0}
.avatars .more{margin-left:6px;font-size:12.5px;color:var(--ink-3)}
.avatar.agent{border-radius:var(--r-md);background:var(--info-bg);color:var(--info)}

/* ---------- Key number with its trend: the number, what it counts, and compared with what ---------- */
.stat{display:grid;gap:2px}
.stat .value{font:var(--value-weight) var(--value-size)/var(--value-lh) var(--value-font);font-variant-numeric:tabular-nums}
.stat .label{font-size:12px;color:var(--ink-2);font-family:var(--label-font);text-transform:var(--label-case);letter-spacing:var(--label-track)}
.trend{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:var(--w-strong,650);color:var(--ink-2)}
.trend::before{content:"→"}
.trend.up::before{content:"↑"}
.trend.down::before{content:"↓"}
.trend.good{color:var(--ok)}
.trend.bad{color:var(--attn)}
.spark{display:block;width:100%;height:32px;color:var(--ok)}

/* =====================================================================
   Frames other than the app (design system build step 5, 22 Oct 2026): a public website, documentation and a phone.
   Same parts, same dials; only the frame around the page differs.
   ===================================================================== */
/* Website: a top bar with the one action, a centred page, a footer that answers "who, where, how to reach" */
.site{min-height:100vh;display:flex;flex-direction:column;background:var(--bg)}
.site-top{display:flex;align-items:center;gap:24px;height:64px;padding:0 max(24px,calc((100% - 1160px)/2));background:var(--top-bg);color:var(--top-ink);border-bottom:var(--top-edge);position:sticky;top:0;z-index:5}
.site-brand{display:flex;align-items:center;gap:10px;font-weight:var(--w-heavy,700);color:var(--top-ink);white-space:nowrap}
.site-brand:hover{text-decoration:none}
.site-nav{display:flex;gap:4px;margin-right:auto}
.site-nav a{white-space:nowrap;padding:8px 12px;border-radius:var(--r);color:var(--top-faint);font-weight:var(--w-strong,500)}
.site-nav a:hover{color:var(--top-ink);background:var(--sunk);text-decoration:none}
.site-nav a.on{color:var(--top-ink);font-weight:var(--w-strong,650)}
.site .page{max-width:1160px;margin-inline:auto;padding:40px 24px 56px}
.site-foot{margin-top:auto;border-top:var(--edge);background:var(--surface);padding:28px max(24px,calc((100% - 1160px)/2));display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;font-size:13px;color:var(--ink-2)}
.site-foot b{display:block;color:var(--ink);margin-bottom:6px}
.hero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:40px;align-items:center;padding:24px 0 8px}
.hero h1{font-size:calc(var(--h1-size) * 1.6);line-height:1.08}
.hero p{font-size:17px;color:var(--ink-2);margin-top:12px;max-width:52ch}
.hero .row{margin-top:20px}
.hero-pic{aspect-ratio:4/3;border-radius:var(--r-lg);background:linear-gradient(135deg,var(--brand-soft),var(--sunk));display:grid;place-items:center;color:var(--brand-strong)}
.hero-pic svg.i{width:72px;height:72px;stroke-width:1.2}

/* Documentation: contents on the left, the article, and "on this page" on the right */
.docs{min-height:100vh;display:flex;flex-direction:column;background:var(--surface)}
.docs .site-top{padding:0 24px}
.docs-body{display:grid;grid-template-columns:260px minmax(0,1fr);flex:1}
.toc{border-right:var(--side-edge);background:var(--side-bg);padding:20px 14px;display:grid;gap:2px;align-content:start;position:sticky;top:64px;height:calc(100vh - 64px);overflow:auto}
.toc h4{font-size:11.5px;font-weight:var(--w-heavy,700);letter-spacing:.08em;text-transform:uppercase;color:var(--side-faint);padding:12px 10px 4px;font-family:var(--label-font)}
.toc a{padding:6px 10px;border-radius:var(--r-md);color:var(--side-ink);font-size:13.5px}
.toc a:hover{background:var(--side-hover);text-decoration:none}
.toc a.on{background:var(--side-on);color:var(--side-ink-on);font-weight:var(--w-strong,650)}
.docs .page{max-width:1040px;padding:32px 40px 56px}
.article{display:grid;gap:16px;max-width:60ch;line-height:1.65;font-size:15px}   /* 60ch holds about 75 characters a line (R21) */
.article h2{font-family:var(--head-font);font-size:calc(var(--head-size) + 4px);font-weight:var(--head-weight);margin-top:12px}
.article ol{margin:0;padding-left:20px;display:grid;gap:8px}
.on-page{position:sticky;top:96px;display:grid;gap:6px;font-size:13px;border-left:1px solid var(--line);padding-left:14px;align-content:start}
.on-page b{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.on-page a{color:var(--ink-2)}
.on-page a.on{color:var(--ink);font-weight:var(--w-strong,650)}

/* Phone: one column, the place's name on top, the four places at the bottom within thumb reach */
.phone-stage{min-height:100vh;display:grid;place-items:center;padding:32px;background:var(--sunk)}
.phone{width:390px;height:780px;border-radius:44px;border:10px solid #1d1d1f;background:var(--bg);display:grid;grid-template-rows:auto 1fr auto;overflow:hidden;box-shadow:var(--pop-shadow)}
.phone-top{display:flex;justify-content:space-between;align-items:center;padding:18px 18px 10px;background:var(--top-bg)}
.phone-top b{font-family:var(--h1-font);font-size:22px}
.phone .page{padding:8px 16px 16px;gap:12px;overflow:auto;max-width:none;display:flex;flex-direction:column}
.phone .ph-act{margin-top:auto;position:sticky;bottom:0;display:grid;gap:var(--s2);padding-top:var(--s3);background:var(--bg)}.phone .ph-act .btn{height:48px}   /* the main action at the foot, in reach of the thumb (R29) */
.phone .page-head h1{font-size:20px}
.phone{--ctl-h:44px;--ctl-h-sm:40px;--input-h:44px}   /* a phone drawn inside a larger page gets thumb-sized controls too (R25) */
.tabbar{display:grid;grid-template-columns:repeat(4,1fr);border-top:var(--edge);background:var(--surface);padding:6px 6px 14px}
.tabbar a{display:grid;justify-items:center;gap:2px;font-size:11px;color:var(--ink-3);padding:6px 0;border-radius:var(--r-md)}
.tabbar a.on{color:var(--act-bg);font-weight:var(--w-strong,650)}
.tabbar a:hover{text-decoration:none}
.tabbar svg.i{width:22px;height:22px}
.list-rows{display:grid;background:var(--surface);border:var(--edge);border-radius:var(--r-lg);overflow:hidden}
.list-rows > *{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:12px 14px;border-top:1px solid var(--line);color:var(--ink)}
.list-rows > :first-child{border-top:0}
.list-rows small{display:block;color:var(--ink-3);font-size:12px}
.list-rows a:hover{text-decoration:none;background:var(--sunk)}

/* Shop: product cards and the basket */
.products{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
.product{background:var(--card-bg);border:var(--edge);border-top:var(--edge-top);border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden;display:grid}
.product .pic{aspect-ratio:16/10;background:linear-gradient(135deg,var(--sunk),var(--brand-soft));display:grid;place-items:center;color:var(--brand-strong)}
.product .pic svg.i{width:40px;height:40px;stroke-width:1.3}
.product .info{padding:12px 14px 14px;display:grid;gap:4px}
.product .price{font:var(--value-weight) 18px var(--value-font)}
.product .info .row{margin-top:6px;justify-content:space-between}
.basket-line{display:grid;grid-template-columns:1fr auto;gap:8px;font-size:13.5px}
.basket-total{display:grid;grid-template-columns:1fr auto;gap:8px;border-top:var(--head-rule);padding-top:10px;font-weight:var(--w-heavy,700)}

/* Inbox: the list and the item open beside it */
.inbox-cols{display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr);gap:0;background:var(--card-bg);border:var(--edge);border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden;min-height:540px}
.inbox-list{border-right:1px solid var(--line);display:grid;align-content:start}
.inbox-list a{display:grid;grid-template-columns:auto 1fr auto;gap:2px 10px;padding:12px 14px;border-bottom:1px solid var(--line);color:var(--ink)}
.inbox-list a:hover{background:var(--sunk);text-decoration:none}
.inbox-list a.on{background:var(--sel-bg);box-shadow:inset 3px 0 0 var(--act-bg)}
.inbox-list a.unread b::after{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--act-bg);margin-left:6px;vertical-align:middle}
.inbox-list small{grid-column:2 / -1;color:var(--ink-3);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inbox-list time{font-size:12px;color:var(--ink-3)}
.reading{padding:20px 24px;display:grid;gap:14px;align-content:start}
.reading h2{font-family:var(--head-font);font-size:calc(var(--head-size) + 3px);font-weight:var(--head-weight)}

/* Report: a bar list compares a few numbers without a chart library */
.bars{display:grid;gap:10px}
.bars > div{display:grid;grid-template-columns:140px minmax(0,1fr) 56px;gap:12px;align-items:center;font-size:13.5px}
.bars .bar{height:10px;border-radius:5px}
.bars .bar > i{border-radius:5px}
.bars span:last-child{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink-2)}

/* Settings: a group per subject, each line says what changes */
.set-group{display:grid}
.set-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;padding:14px 0;border-top:1px solid var(--line)}
.set-row:first-child{border-top:0}
.set-row b{display:block;font-weight:var(--w-semi,600)}
.set-row small{color:var(--ink-3);font-size:12.5px}
.danger-zone{border:1px solid color-mix(in srgb,var(--error) 35%,var(--line));border-radius:var(--r-lg);padding:16px 18px;display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}
.danger-zone b{color:var(--error)}

@container page (max-width: 720px){ .hero,.inbox-cols{grid-template-columns:minmax(0,1fr)} .docs-body{grid-template-columns:minmax(0,1fr)} .toc{display:none} .site-foot{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* =====================================================================
   Parts from the work-tool, shared by every pattern (v3.43). First built for the work-tool (work-tool.md); they use
   only the dials, so they follow the feel. Names kept, so pages already built on them keep working.
   ===================================================================== */
:root{
  /* Kinds: up to six colours that sort things by what they are (state colours stay for state). Each passes 4.5:1 on white. */
  --k1:#0f766e; --k2:#6d28d9; --k3:#c2410c; --k4:#1d4ed8; --k5:#57534e; --k6:#64748b;
}
/* State: icon + word + colour, never colour alone */
.ic{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px}
.ic.lg{width:20px;height:20px}
.kbd{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border:1px solid var(--line-2);border-radius:var(--r-tag);font:500 11px/1 var(--mono);color:var(--ink-2);background:var(--surface)}
.ksq{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:var(--r-tag);background:var(--k);color:var(--on-fill,#fff);margin-right:8px;vertical-align:-5px}
.ksq :is(.ic,svg.i){width:13px;height:13px;stroke-width:2.25}
.st{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:500;white-space:nowrap}
.st :is(.ic,svg.i){width:14px;height:14px}
.st.ok{color:var(--ok)} .st.wait{color:var(--attn)} .st.dec{color:color-mix(in srgb,var(--brand-strong) 85%,black)} .st.info{color:var(--info)} .st.q{color:var(--ink-2)}
.st.tint{background:var(--attn-bg);padding:2px 6px;border-radius:var(--r-tag)}
.k1{--k:var(--k1)}.k2{--k:var(--k2)}.k3{--k:var(--k3)}.k4{--k:var(--k4)}.k5{--k:var(--k5)}.k6{--k:var(--k6)}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic.xl{width:32px;height:32px;stroke-width:1.5}
.wt-checks{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.wt-checks li{display:grid;grid-template-columns:18px 1fr;gap:var(--s2);align-items:start;font-size:13px;color:var(--ink-2)}
.wt-checks li :is(.ic,svg.i){width:16px;height:16px;margin-top:2px}
.wt-checks li.ok :is(.ic,svg.i){color:var(--ok)} .wt-checks li.no :is(.ic,svg.i){color:var(--brand-strong)}
.wt-checks b{color:var(--ink);font-weight:var(--w-semi,600)}
.wt-stop{display:grid;grid-template-columns:24px 1fr;gap:var(--s3);padding:var(--s3);border:1px solid var(--brand-strong);border-left-width:4px;border-radius:var(--r);background:var(--surface);color:var(--ink)}
.wt-stop > :is(.ic,svg.i){color:var(--brand-strong)}
.wt-stop b{display:block;font-weight:var(--w-semi,600);font-size:13.5px}
.wt-stop span{display:block;font-size:13px;color:var(--ink-2);margin-top:2px}
.wt-note{display:flex;align-items:flex-start;gap:var(--s2);padding:var(--s2) var(--s3);border:1px solid var(--line);border-left:3px solid var(--info);border-radius:var(--r);background:var(--surface);font-size:13px;color:var(--ink-2)}
.wt-note :is(.ic,svg.i){flex:none;margin-top:2px;color:var(--info)}
.wt-note b{color:var(--ink);font-weight:var(--w-semi,600)}
.wt-time{list-style:none;margin:0;padding:0 0 0 14px;border-left:2px solid var(--line-2);display:grid;gap:var(--s2)}
.wt-time li{position:relative;display:flex;gap:var(--s2);justify-content:space-between;font-size:13px;color:var(--ink-2)}
.wt-time li::before{content:"";position:absolute;left:-19px;top:6px;width:8px;height:8px;border-radius:50%;background:var(--surface);border:2px solid var(--ink-3)}
.wt-time .when{flex:none;font:500 12px/1.4 var(--mono);color:var(--ink-3)}
.wt-file{display:grid;grid-template-columns:24px 1fr auto;gap:var(--s3);align-items:center;padding:var(--s3);border:1px solid var(--line);border-radius:var(--r)}
.wt-file > :is(.ic,svg.i){color:var(--ok)}
.wt-file b{display:block;font-weight:var(--w-semi,600);font-size:13.5px}
.wt-file span{display:block;font-size:12.5px;color:var(--ink-3)}
.wt-file a{font-size:12.5px;font-weight:var(--w-semi,600);color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.wt-drop{display:grid;justify-items:center;gap:var(--s2);padding:var(--s5) var(--s4);border:1.5px dashed var(--line-2);border-radius:var(--r);text-align:center;background:var(--sunk)}
.wt-drop > :is(.ic,svg.i){color:var(--ink-3)}
.wt-drop b{font-weight:var(--w-semi,600)}
.wt-drop span{font-size:13px;color:var(--ink-3);max-width:360px}
.wt-empty{display:grid;justify-items:center;gap:var(--s2);padding:var(--s6) var(--s4);text-align:center}
.wt-empty > :is(.ic,svg.i){color:var(--ink-3)}
.wt-empty h2{font-size:17px;font-weight:var(--w-semi,600)}
.wt-empty p{font-size:13.5px;color:var(--ink-2);max-width:440px}
/* About this page: the introduction behind one small control, never as a block of text above the work */
.about{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 8px;border:1px solid var(--line-2);border-radius:var(--r);font-size:12px;color:var(--ink-2);background:var(--surface)}
/* How to use this page (contracts/parts/about.json, v3.48, from Jumra): the sheet the About control opens. The jobs for the
   person's role as numbered steps naming the buttons, what to do when stuck, and the page's words */
.about-sheet{display:grid;gap:12px;max-width:440px;padding:16px 20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.about-sheet .ab-over{display:block;font-size:11px;font-weight:var(--w-semi,600);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.about-sheet h2{font-size:17px;font-weight:var(--w-semi,600);margin:2px 0 0}
.about-sheet .ab-lead{font-size:14.5px;line-height:1.55;margin:0}
.about-sheet .ab-sec{display:grid;gap:6px;padding-top:12px;border-top:1px solid var(--line)}
.about-sheet h3{font-size:13px;font-weight:var(--w-semi,600);margin:0}
.about-sheet p{margin:0;font-size:13.5px}
.about-sheet .ab-steps{margin:0;padding-left:18px;display:grid;gap:6px;font-size:13.5px}
.about-sheet ul.ab-steps{list-style:disc}
.about-sheet .ab-btn{font-weight:var(--w-semi,600);background:var(--sunk);border:1px solid var(--line);border-radius:3px;padding:0 4px;white-space:nowrap}
.about-sheet .ab-then{color:var(--ink-2)}
.about-sheet .ab-terms{margin:0;display:grid;grid-template-columns:max-content 1fr;gap:6px 14px;font-size:13.5px}
.about-sheet .ab-terms dt{font-weight:var(--w-semi,600)}
.about-sheet .ab-terms dd{margin:0;color:var(--ink-2)}

/* ===== Conversation parts (v3.50): what our coding agent's screen is made of. Shaped after shadcn/ui's chat rules:
   a turn is a message, the agent's work is a trace, files are attachments, events are markers, the foot is the composer,
   and a step that can't be taken back is an approval. ===== */
/* The face sits in the name line, not in a column of its own: a column the height of a face beside a long message leaves a strip of
   empty space under it and pushes every line in (developer, 26 Oct 2026; R26). The words run the full width. */
.cv-msg{display:grid;gap:var(--s1);max-width:75ch;min-width:0;background:var(--sunk);border-radius:var(--r-lg);padding:10px 14px}
.cv-head .avatar{width:22px;height:22px;font-size:11px;border-radius:50%}.cv-head .avatar.agent{border-radius:var(--r-tag)}
.cv-head{align-items:center}
.cv-head{display:flex;gap:var(--s2);align-items:baseline}.cv-head b{font-size:13px;font-weight:var(--w-strong,650);color:var(--ink)}.cv-head small{font-size:12px;color:var(--ink-3)}
.cv-text{font-size:14px;color:var(--ink);line-height:1.55;overflow-wrap:anywhere}
.cv-msg.agent{background:none;padding:0}
.cv-msg.mine{margin-left:auto;max-width:min(75ch,85%);background:var(--brand-soft)}
.cv-msg.streaming .cv-text::after{content:"";display:inline-block;width:7px;height:1em;margin-left:3px;vertical-align:-2px;background:var(--ink-3);animation:su-blink 1s steps(2) infinite}
@keyframes su-blink{50%{opacity:0}}
.trace{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);font-size:13px}
.trace summary{cursor:pointer;padding:7px 12px;color:var(--ink-2);list-style:none;display:flex;align-items:center;gap:var(--s2)}
.trace summary::before{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform var(--quick,.2s) var(--ease)}
.trace[open] summary::before{transform:rotate(45deg)}.trace summary:hover{color:var(--ink)}.trace summary::-webkit-details-marker{display:none}
.trace ol{list-style:none;margin:0;padding:2px 12px 8px;display:grid;gap:2px;border-top:1px solid var(--line)}
.tline{display:flex;align-items:center;gap:var(--s2);min-height:28px;color:var(--ink-2)}.tline svg{width:15px;height:15px;color:var(--ink-3);flex:none}
.tline .t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tline small{color:var(--ink-3);font:12px var(--mono);margin-left:auto}
.tline.running .t{color:var(--ink)}.tline.running .spin{width:13px;height:13px;margin-left:auto}.tline.running small{margin-left:0}
.tline.failed .t{color:var(--error)}.tline.failed svg{color:var(--error)}
.attach{display:inline-flex;align-items:center;gap:var(--s2);max-width:320px;padding:7px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);font-size:13px}
.attach svg{width:18px;height:18px;color:var(--ink-3);flex:none}.at-body{display:grid;min-width:0}.at-body b{font-weight:var(--w-semi,600);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.at-body small{font-size:12px;color:var(--ink-3)}
.attach.uploading .spin{width:14px;height:14px}.attach.error{border-color:var(--error);background:var(--error-bg)}.attach.error svg,.attach.error small{color:var(--error)}
.marker{display:flex;align-items:center;gap:var(--s3);color:var(--ink-3);font-size:12px}
.marker:not(.event)::before,.marker:not(.event)::after{content:"";flex:1;border-top:1px solid var(--line)}
.marker.event{justify-content:center}.marker.event svg{width:14px;height:14px}
.composer{display:grid;gap:var(--s2);padding:var(--s3);border:var(--ctl-edge) solid var(--ctl-line);border-radius:var(--r-lg);background:var(--surface)}
.composer:focus-within{border-color:var(--brand-strong);box-shadow:0 0 0 3px var(--brand-soft)}
.composer textarea{border:0;outline:0;resize:none;background:none;font:14px/1.5 var(--font);color:var(--ink);min-height:44px;max-height:7.5em;width:100%}
.cp-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}.cp-foot small{font-size:12px;color:var(--ink-3)}
.approve{display:grid;gap:var(--s2);padding:var(--s3) var(--s4);border:1px solid var(--attn);border-left-width:4px;border-radius:var(--r-lg);background:var(--attn-bg);max-width:75ch}
.ap-head{display:flex;align-items:center;gap:var(--s2)}.ap-head svg{width:16px;height:16px;color:var(--attn);flex:none}.ap-head b{font-size:14px;color:var(--ink)}
.ap-detail{margin:0;padding:var(--s2) var(--s3);background:var(--surface);border:1px solid var(--line);border-radius:var(--r);font:12.5px/1.5 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere;color:var(--ink)}
.approve p{margin:0;font-size:13px;color:var(--ink-2)}
.approve.done{border-color:var(--line);border-left-width:1px;background:var(--surface)}.approve.done .ap-head svg{color:var(--ink-3)}
.ap-answer{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ok)}.ap-answer svg{width:14px;height:14px}
/* A sentence in a card stops at about 75 characters a line, however wide the card (R21, v3.50) */
.card p:not([class]){max-width:62ch}

/* ===== Made for the thumb (R25, v3.50): on a phone every part stays readable and every control is big enough for a thumb.
   Controls grow to 40 px (44 for the main action), a part's action drops under its words, rows of choices wrap or scroll,
   and nothing runs past the screen. :root:root outranks a feel's own heights, which are set for a mouse. ===== */
@media (max-width:520px){
  :root:root{--ctl-h:44px;--ctl-h-sm:40px;--input-h:44px}
  .chip{min-height:40px;padding:0 14px}
  .views a{height:40px}
  .close{width:40px;height:40px}
  .toast{min-width:0;width:100%}.toast .act{min-height:40px;padding:0 4px}
  .pager{flex-wrap:wrap}.pager nav{flex-wrap:wrap}.pager a,.pager span.gap{min-width:40px;height:40px}
  .alert{grid-template-columns:auto 1fr}.alert > .btn{grid-column:2;justify-self:start;align-self:start}
  .dialog > footer{flex-direction:column-reverse;align-items:stretch}.dialog > footer .btn{width:100%}
  .approve .row .btn{flex:1;height:var(--ctl-h)}.composer .btn{height:var(--ctl-h)}
  .tabs a,.tabs button{height:44px}
  .seg button{min-height:40px}
  .wt-tabs a{height:44px}
  .btn.primary.sm{height:var(--ctl-h)}   /* the main action is never small on a phone */
  .search .clear{min-width:40px;min-height:40px}
  .drop{padding:var(--s4)}.drop a{display:inline-flex;align-items:center;min-height:40px}
}
/* ===== Layout and white space on a phone (R29 to R33, v3.50): a form's main action is pinned at the foot, a table becomes rows,
   and a card around the work loses its sides so the work runs edge to edge ===== */
@media (max-width:520px){
  form .row:has(> .btn.primary){position:sticky;bottom:0;z-index:2;margin-inline:calc(-1 * var(--s4));padding:var(--s3) var(--s4);background:var(--surface);border-top:1px solid var(--line)}
  form .row:has(> .btn.primary) .btn{height:48px}form .row:has(> .btn.primary) .btn.primary{flex:1}
  .table,.table tbody{display:block;width:100%}.table thead{display:none}
  .table tr{display:flex;flex-wrap:wrap;align-items:center;gap:2px var(--s3);min-height:56px;padding:var(--s2) 0;border-bottom:1px solid var(--line)}
  .table td{border:0;padding:0;height:auto}.table td:first-child{flex:1 1 100%;font-weight:var(--w-semi,600);color:var(--ink)}
  .card:has(form,table,.rows){border-left:0;border-right:0;border-radius:0;box-shadow:none}
}
/* The page head and the drop box on a phone (R25, R29): the page's own action goes under the answer, and the drop box,
   which a thumb cannot drag onto, becomes one line with its Choose files button */
@media (max-width:520px){
  .page-head{flex-direction:column;align-items:stretch;gap:var(--s3)}
  .page-head > .row{justify-content:flex-start}
  .drop{grid-template-columns:auto 1fr;justify-items:start;align-items:center;text-align:left;padding:var(--s3);column-gap:var(--s2);border-style:solid}.drop > svg{display:none}
  .drop > b{display:none}
  .kv{grid-template-columns:minmax(0,1fr);row-gap:var(--s1)}.kv dd{margin:0 0 var(--s2)}   /* facts stack: the name, then its value, so a long value is never squeezed (the facts part's narrow line) */
}

/* ===== Document parts (v3.50, chosen in the Documents Lab, 27 Oct 2026) ===== */
.doc-open{display:grid;gap:var(--s2);max-width:72ch}
.doc-open h1{font-size:28px;line-height:1.2;font-weight:var(--h1-weight,600);letter-spacing:var(--h1-track,-.01em);text-wrap:balance;margin:0}
.doc-open .lede{font-size:15px;color:var(--ink-2);max-width:36em;margin:0}   /* in em, not ch: a narrow face fits more letters in 62ch than a line should hold (R21) */
.doc-meta{display:flex;flex-wrap:wrap;gap:6px var(--s4);padding-top:var(--s2);border-top:1px solid var(--line);font-size:13px;color:var(--ink-3)}
.doc-meta span{display:inline-flex;align-items:center;gap:6px}.doc-meta svg.i{width:14px;height:14px}
.doc-meta .st{padding:0;background:none}.doc-meta .st.ok{color:var(--ok)}.doc-meta .st.attn{color:var(--attn)}
.doc-figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1px;background:var(--line);border-radius:var(--r-md);overflow:hidden}
.doc-figs>div{display:grid;gap:2px;padding:var(--s3) var(--s4);background:var(--sunk)}
.doc-figs b{font-size:28px;font-weight:var(--value-weight,600);line-height:1.15;font-variant-numeric:tabular-nums}
.doc-figs span{font-size:13px;color:var(--ink-3)}
.doc-figs.strip{display:flex;flex-wrap:wrap;gap:var(--s5) var(--s6);background:none;border-radius:0}.doc-figs.strip>div{padding:0;background:none}
.doc-h{display:flex;align-items:center;gap:var(--s3)}.doc-h h2{font-size:18px;line-height:1.3;font-weight:var(--head-weight,600);margin:0}
.doc-h .mark{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:var(--gt,var(--sunk));color:var(--gc,var(--ink-2))}.doc-h .mark svg.i{width:16px;height:16px}
.callout{display:grid;gap:2px;max-width:38em;margin:0;padding:4px 0 4px var(--s4);box-shadow:inset 3px 0 0 var(--cfg,var(--line-2));color:var(--ink-2);font-size:15px}
.callout b{display:inline-flex;align-items:center;gap:6px;font:var(--kick-weight,500) var(--kick-size,11px)/1.4 var(--kick-font,var(--font));letter-spacing:var(--kick-track,.12em);text-transform:uppercase;color:var(--cfg)}
.callout b svg.i{width:14px;height:14px}.callout p{margin:0}
.callout.note{--cfg:var(--info)}.callout.careful{--cfg:var(--attn)}.callout.decided{--cfg:var(--ok)}
.doc-term{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border-radius:var(--r-md);overflow:hidden}
.doc-term>*{background:var(--surface);padding:var(--s3);font-size:14px;color:var(--ink-2);display:grid;gap:2px;align-content:start}
.doc-term h4{grid-column:1/-1;font-size:15px;font-weight:var(--w-strong,500);color:var(--ink);margin:0;padding-bottom:4px}
.doc-term span{font:var(--kick-weight,500) var(--kick-size,11px)/1.4 var(--kick-font,var(--font));letter-spacing:var(--kick-track,.12em);text-transform:uppercase;color:var(--gc,var(--brand-strong))}
.proc{list-style:none;margin:0;padding:0 0 0 40px;position:relative;display:grid;counter-reset:step}
.proc::before{content:"";position:absolute;left:13px;top:14px;bottom:14px;width:2px;background:var(--line-2)}
.proc li{position:relative;display:grid;gap:2px;padding-bottom:var(--s4);counter-increment:step}
.proc li::before{content:counter(step);position:absolute;left:-40px;top:0;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:var(--w-strong,500);background:var(--surface);color:var(--gc,var(--brand-strong));box-shadow:inset 0 0 0 2px var(--gc,var(--brand-strong))}
.proc li.done::before{content:"✓";background:var(--gc,var(--brand-strong));color:var(--surface)}.proc li.now::before{background:var(--gt,var(--brand-soft))}
.proc b{font-weight:var(--w-strong,500);line-height:28px}.proc li.now b{color:var(--gc,var(--brand-strong))}.proc span{font-size:15px;color:var(--ink-2)}
.pull{margin:0;display:grid;gap:var(--s2);max-width:46ch}
.pull blockquote{margin:0;font-size:22px;line-height:1.4;font-weight:var(--w-text,400);letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.pull blockquote::before{content:"\201C";display:block;font-size:44px;line-height:.6;color:var(--brand-strong);margin-bottom:6px}
.pull figcaption{font:var(--kick-weight,500) var(--kick-size,11px)/1.4 var(--kick-font,var(--font));letter-spacing:var(--kick-track,.12em);text-transform:uppercase;color:var(--ink-3)}
.table.shaded td{border-bottom:0}.table.shaded tbody tr:nth-child(odd) td{background:var(--sunk)}
.table.shaded tbody tr td:first-child{border-radius:min(6px,var(--r-lg)) 0 0 min(6px,var(--r-lg))}.table.shaded tbody tr td:last-child{border-radius:0 min(6px,var(--r-lg)) min(6px,var(--r-lg)) 0}   /* nested: never rounder than the card (R60) */
@media (max-width:520px){.table.shaded tbody tr:nth-child(odd){background:var(--sunk);border-radius:min(8px,var(--r-lg))}.table.shaded tbody tr td{background:none!important;border-radius:0!important}.table.shaded tbody tr{border-bottom:0;padding:var(--s3) var(--s4)}}   /* on a phone a row is a card: the shade covers the whole row, not each cell (R33) */
@media (max-width:520px){.doc-term{grid-template-columns:1fr}.doc-figs{grid-template-columns:repeat(2,1fr)}.pull blockquote{font-size:18px}}

/* ===== Charts (R43, lab X3, Y2, W2) ===== */
.chart{margin:0;display:grid;gap:var(--s3);min-width:0}
.chart figcaption{font-size:14px;color:var(--ink)}
.bars{display:grid;gap:6px}
.bar-row{display:grid;grid-template-columns:minmax(64px,max-content) 1fr;align-items:center;gap:var(--s3);font-size:12px}
.bar-row .l{color:var(--ink-2);text-align:right}
.bar-row .track{display:flex;align-items:center;gap:var(--s2);min-width:0}
.bar-row i{display:block;height:18px;border-radius:0 4px 4px 0;background:var(--cx);flex:none}
.bar-row.on i{background:var(--c1)}
.bar-row .v{font-variant-numeric:tabular-nums;color:var(--ink-2);white-space:nowrap}.bar-row.on .v{color:var(--ink);font-weight:var(--w-strong,500)}
.chart-svg{width:100%;height:auto;display:block;overflow:visible}
.chart-svg text{font:12px var(--font);fill:var(--ink-3)}.chart-svg text.end{fill:var(--ink-2)}
.stat .spark{margin-top:4px}
/* Motion (R44, lab M3): only a change moves, a short rise; with less motion asked for, a plain fade */
@keyframes su-arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes su-fade{from{opacity:0}to{opacity:1}}
.toast,.sheet,.menu,.dialog{animation:su-arrive .25s var(--ease) both}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.15s!important;animation-iteration-count:1!important;transition-duration:.1s!important}.toast,.sheet,.menu,.dialog{animation-name:su-fade!important}}

/* ===== Date and time, slider, combobox, long text (v3.50, missing parts found 27 Oct 2026) ===== */
.datepick{display:grid;gap:var(--s2);max-width:320px}
.input.pick{display:flex;align-items:center;gap:8px}.input.pick svg.i{width:16px;height:16px;color:var(--ink-3)}
.cal{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--pop-shadow);padding:var(--s3);display:grid;gap:var(--s2)}
.cal-head{display:flex;align-items:center;justify-content:space-between}.cal-head b{font-weight:var(--w-strong,500);font-size:14px}
.cal-head .icon-btn{width:32px;height:32px}.cal-head .icon-btn svg.i{transform:rotate(180deg)}.cal-head .icon-btn.next svg.i{transform:none}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}
.cal-grid .wd{font-size:12px;color:var(--ink-3);padding:4px 0}
.cal-grid .day{height:36px;border:0;border-radius:var(--r);background:none;color:var(--ink);font:inherit;font-size:13px;font-variant-numeric:tabular-nums;cursor:pointer}
.cal-grid .day:hover{background:var(--sunk)}
.cal-grid .day.out{color:var(--ink-3);opacity:.55}
.cal-grid .day.off{color:var(--ink-3);text-decoration:line-through;cursor:not-allowed;background:none}
.cal-grid .day.today{box-shadow:inset 0 0 0 1.5px var(--brand-strong)}
.cal-grid .day.on{background:var(--brand-strong);color:var(--on-fill,#fff);font-weight:var(--w-strong,500)}
.cal-why{font-size:12px;color:var(--ink-3)}
.timepick{border:0;padding:0;margin:0;display:grid;gap:var(--s3)}.timepick legend{padding:0;margin-bottom:var(--s2)}
.tp-part{display:grid;gap:6px}.tp-head{font-size:12px;color:var(--ink-3)}
.tp-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:6px}
.slot{height:38px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--ink);font:inherit;font-size:13.5px;font-variant-numeric:tabular-nums;cursor:pointer}
.slot:hover{border-color:var(--ink-3)}.slot.on{background:var(--brand-soft);border-color:var(--brand-strong);color:var(--brand-strong);font-weight:var(--w-strong,500)}
.slot.off{color:var(--ink-3);background:var(--sunk);text-decoration:line-through;cursor:not-allowed}
.slider{display:grid;gap:var(--s2);max-width:360px}.sl-top{display:flex;justify-content:space-between;align-items:baseline}.sl-top output{font-variant-numeric:tabular-nums;font-weight:var(--w-strong,500)}
.sl-track{position:relative;height:6px;border-radius:3px;background:var(--line);margin:10px 14px}   /* half a handle of room at each end, so the handle never runs past */
.sl-fill{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:var(--brand-strong)}
.sl-thumb{position:absolute;top:50%;width:20px;height:20px;border-radius:50%;background:var(--surface);box-shadow:0 0 0 2px var(--brand-strong),0 1px 4px rgba(0,0,0,.2);transform:translate(-50%,-50%);cursor:grab}
.sl-thumb:focus-visible{outline:2px solid var(--brand-strong);outline-offset:3px}
.sl-ends{display:flex;justify-content:space-between;font-size:12px;color:var(--ink-3)}
.combo{display:grid;gap:4px;max-width:360px}.combo .input{display:flex;align-items:center;gap:8px}.combo .input svg.i{width:16px;height:16px;color:var(--ink-3)}
.combo-list{max-width:none}.combo-none{font-size:13px;color:var(--ink-2);padding:10px;margin:0}
.textarea .area{display:block;min-height:88px;height:auto;padding:10px 12px;line-height:1.5;white-space:pre-wrap}
.ta-foot{display:flex;justify-content:space-between;gap:var(--s3)}.ta-count{margin-left:auto;font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.textarea.error .ta-count{color:var(--error)}
.textarea:focus-within .area,.textarea .area:focus{border-color:var(--brand-strong);box-shadow:0 0 0 3px var(--brand-soft)}
@media (max-width:520px){.cal-grid .day{height:44px}.slot{height:44px}.sl-thumb{width:28px;height:28px}.cal-head .icon-btn{width:40px;height:40px}}

/* diff ⭐ v3.51: one file's changes for the coding agent's app. + and − say added and removed in words too (R7); the code scrolls inside its box, never the page */
.diff{margin:0;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden;min-width:0}
.diff-head{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;padding:8px 12px;border-bottom:1px solid var(--line);font-size:13px}
.diff-head svg.i{width:16px;height:16px;color:var(--ink-3);flex:none}
.diff-file{font-family:var(--mono);font-size:12.5px;font-weight:var(--w-strong,500);overflow-wrap:anywhere;min-width:0;flex:1}
.diff-n{display:inline-flex;gap:8px;font-family:var(--mono);font-size:12px;font-weight:var(--w-strong,500)}.diff-n .add{color:var(--ok)}.diff-n .del{color:var(--error)}
.diff-body{overflow-x:auto;outline-offset:-2px}.diff-body:focus-visible{outline:2px solid var(--focus,var(--brand))}
.diff table{border-collapse:collapse;width:100%;font-family:var(--mono);font-size:12.5px;line-height:1.6}
.diff td{padding:0 10px;white-space:pre;vertical-align:top}
.diff td.n{width:1%;text-align:right;color:var(--ink-3);user-select:none;padding-right:6px}
.diff td.m{width:1%;padding:0 4px;font-weight:var(--w-strong,600);user-select:none}
.diff tr.add{background:var(--ok-bg)}.diff tr.add td.m{color:var(--ok)}
.diff tr.del{background:var(--error-bg)}.diff tr.del td.m{color:var(--error)}
.diff tr.gap td{background:var(--neutral-bg,var(--bg));color:var(--ink-3);font-family:var(--font);font-size:12px;padding:3px 10px}
.diff .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ===== Agents in every layout ⭐ v3.52 (Agents Lab, 28 Oct 2026: D1, M4, S1, V1, T1; rules R47 to R53) =====
   The agent's colour is the feel's second group colour, so every feel and dark mode carry it. */
:root{--agent:var(--g2,#5658ab);--agent-soft:var(--g2-tint,#ecefff);--agent-dock:340px}
.agent-status,.ac-lead,.ask-bar{--agent-ink:color-mix(in oklab,var(--agent) 78%,var(--ink))}   /* words on the agent's tint, 4.5:1 in every feel; mixed where it is used, so a theme set lower down is followed */
.as-dot{width:8px;height:8px;border-radius:50%;background:var(--agent);flex:none;display:inline-block}
/* agent-status: the state in words in the top bar (R48) */
.agent-status{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;border-radius:999px;border:1px solid color-mix(in oklab,var(--agent) 30%,transparent);background:var(--agent-soft);color:var(--agent-ink);font:var(--w-strong,500) 12.5px/1 var(--font);white-space:nowrap;cursor:pointer}
.agent-status .spin{width:12px;height:12px;border-width:2px;border-color:color-mix(in oklab,var(--agent) 30%,transparent);border-top-color:var(--agent)}
.agent-status:hover{border-color:var(--agent)}.agent-status:focus-visible{outline:2px solid var(--focus,var(--brand));outline-offset:2px}
.agent-status.idle{background:var(--surface);color:var(--ink-2);border-color:var(--line-2)}.agent-status.idle .as-dot{background:var(--ink-3)}
.agent-status.waiting,.agent-status.failed{background:var(--attn-bg);color:var(--attn);border-color:color-mix(in oklab,var(--attn) 40%,transparent)}.agent-status.waiting .as-dot,.agent-status.failed .as-dot{background:var(--attn)}
.as-waits{display:inline-flex;align-items:center;height:22px;margin-right:-8px;padding:0 9px;border-radius:999px;background:var(--attn);color:var(--on-fill,#fff);font-size:12px}
/* ask-bar: the way in on every main phone page (M4) */
.ask-bar{display:flex;align-items:center;gap:4px;height:46px;padding:0 4px 0 6px;border-radius:999px;background:var(--surface);border:1px solid var(--line-2);box-shadow:0 2px 12px rgba(0,0,0,.08)}
.ask-bar .ask-open{flex:1;min-width:0;height:44px;display:flex;align-items:center;gap:10px;padding:0 10px;border:0;background:none;color:var(--ink-3);font:14px var(--font);text-align:left;cursor:pointer;border-radius:999px}
.ask-hint{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-flex;align-items:center;gap:8px}
.ask-bar .ask-talk{width:44px;height:38px;border-radius:999px;border:0;background:var(--agent-soft);color:var(--agent);display:grid;place-items:center;cursor:pointer;flex:none}
.ask-bar .ask-talk svg{width:18px;height:18px}
.ask-bar :focus-visible{outline:2px solid var(--focus,var(--brand));outline-offset:2px}
.ask-bar.listening{border-color:var(--agent);background:var(--agent-soft)}.ask-bar.listening .ask-open{color:var(--agent-ink)}.ask-bar.listening .ask-talk{background:var(--agent);color:var(--on-fill,#fff)}
.wave{width:22px;height:14px;background:repeating-linear-gradient(90deg,currentColor 0 2px,transparent 2px 4px);-webkit-mask:linear-gradient(transparent 30%,#000 30% 70%,transparent 70%),linear-gradient(90deg,#000,#000);mask:radial-gradient(ellipse at center,#000 55%,transparent 72%);display:inline-block}
/* agent-card: one agent of a team (T1) */
.agent-card{display:grid;gap:6px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.agent-card.waiting,.agent-card.failed{border-color:color-mix(in oklab,var(--attn) 45%,transparent);background:var(--attn-bg)}
.ac-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ac-name{border:0;background:none;padding:0;min-height:28px;font:var(--w-strong,500) 14px/1.3 var(--font);color:var(--ink);cursor:pointer;text-align:left;flex:1;min-width:0}
.ac-name:hover{text-decoration:underline;text-underline-offset:3px}.ac-name:focus-visible{outline:2px solid var(--focus,var(--brand));outline-offset:2px;border-radius:4px}
.ac-lead{font-size:12px;padding:1px 8px;border-radius:999px;background:var(--agent-soft);color:var(--agent-ink)}
.agent-card.idle .as-dot{background:var(--ink-3)}.agent-card.waiting .as-dot,.agent-card.failed .as-dot{background:var(--attn)}
.ac-doing{margin:0;font-size:13px;color:var(--ink-2)}
.ac-bar{height:4px;border-radius:2px;background:var(--line)}.ac-bar i{display:block;height:100%;border-radius:2px;background:var(--agent)}
.ac-ask{margin:0;font-size:13px;color:var(--ink);font-weight:var(--w-strong,500)}
/* agent-panel: the agent's home (D1): head and write box stay, the middle scrolls (R49) */
.agent-panel{display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;min-height:0;height:100%;background:var(--surface);border-left:1px solid var(--line)}
.pn-head{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line);min-height:52px}
.pn-title{margin:0;font-size:15px;font-weight:var(--head-weight,600);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pn-back{display:inline-flex;align-items:center;gap:2px;border:0;background:none;color:var(--ink-2);font:13px var(--font);padding:4px 6px 4px 0;cursor:pointer;min-height:32px}
.pn-back svg{width:14px;height:14px;transform:rotate(90deg)}.pn-back:hover{color:var(--ink)}
.pn-acts{display:flex;gap:6px;flex-wrap:wrap;padding:8px 16px;border-bottom:1px solid var(--line)}
.pn-body{overflow-y:auto;padding:14px 16px;display:grid;gap:12px;align-content:start;outline-offset:-2px}
.pn-body:focus-visible{outline:2px solid var(--focus,var(--brand))}
.pn-foot{display:grid;gap:6px;padding:10px 12px 12px;border-top:1px solid var(--line);background:var(--surface)}
.pn-ctx{margin:0;display:flex;align-items:center;gap:6px;font-size:12px;color:var(--agent)}.pn-ctx svg{width:14px;height:14px}
.agent-panel .composer{padding:var(--s2) var(--s3)}.agent-panel .composer textarea{min-height:40px}
.cp-talk{width:32px;height:32px;border-radius:50%;display:inline-grid;place-items:center;background:var(--agent-soft);color:var(--agent);cursor:pointer;flex:none}.cp-talk svg{width:16px;height:16px}.cp-talk:focus-visible{outline:2px solid var(--focus,var(--brand));outline-offset:2px}
@media (max-width:520px){.agent-status{height:40px;padding:0 14px}.ask-bar{height:50px}.ask-bar .ask-talk{height:42px}.pn-back{min-height:40px}.ac-name{min-height:40px}.agent-panel .btn.sm,.sc-close{min-height:44px}.cp-talk{width:40px;height:40px}}   /* made for the thumb (R25) */
@media (max-width:520px){.composer .cp-foot small{display:none}.composer .cp-foot{justify-content:flex-end}}   /* keys mean nothing to a thumb; the microphone and Send keep the row */
.pn-back svg.i{transform:rotate(90deg)}

/* Shades ⭐ v3.54 (Shades Lab, 28 Oct 2026: L6; R54 to R59): a selected row is its own fill and edge, never the stripe (R59) */
.table tr.sel td,.table.shaded tbody tr.sel td{background:var(--sel-bg);box-shadow:inset 0 1px 0 var(--sel-edge,transparent),inset 0 -1px 0 var(--sel-edge,transparent)}
.table tr.sel td:first-child,.table.shaded tbody tr.sel td:first-child{box-shadow:inset 3px 0 0 var(--brand-strong,var(--brand)),inset 0 1px 0 var(--sel-edge,transparent),inset 0 -1px 0 var(--sel-edge,transparent)}
.agent-card.waiting,.agent-card.failed{border-color:var(--attn-edge,color-mix(in oklab,var(--attn) 45%,transparent))}
@media (max-width:520px){.table.shaded tbody tr.sel{background:var(--sel-bg);box-shadow:inset 0 0 0 1px var(--sel-edge,transparent)}}

/* spot ⭐ v3.54 (Spot Lab, 28 Oct 2026: P1 soft tints): calm drawings from the feel's tints; one accent means the state */
:root{--spot-hue:var(--brand-strong,var(--brand))}
.spot{--spot-1:color-mix(in oklab,var(--spot-hue) 9%,var(--surface,#fff));--spot-2:color-mix(in oklab,var(--spot-hue) 17%,var(--surface,#fff));--spot-3:color-mix(in oklab,var(--spot-hue) 34%,var(--surface,#fff));--spot-k:color-mix(in oklab,var(--spot-hue) 52%,var(--surface,#fff));
  --spot-x:var(--error);--spot-x-soft:color-mix(in oklab,var(--error) 16%,var(--surface,#fff));--spot-ok:var(--ok);--spot-ok-soft:color-mix(in oklab,var(--ok) 16%,var(--surface,#fff));width:120px;height:96px;display:block;flex:none}
.spot.sm{width:88px;height:70px}
.empty-state .spot{margin-bottom:var(--s2)}
@media (max-width:520px){.spot{width:104px;height:84px}.spot.sm{width:80px;height:64px}}

/* Cards ⭐ v3.56 (Cards Lab, 28 Oct 2026: K2 head, hairline, body and foot; R1 corners nest; R60) */
.card>.card-head:not(:last-child){margin:calc(-1*var(--card-pad,var(--s5))) calc(-1*var(--card-pad,var(--s5))) 0;padding:var(--s4) var(--card-pad,var(--s5));border-bottom:1px solid var(--line)}
.card.flush>.card-head{margin:0}
.card-foot{display:flex;justify-content:flex-end;align-items:center;gap:var(--s2);flex-wrap:wrap;margin:0 calc(-1*var(--card-pad,var(--s5))) calc(-1*var(--card-pad,var(--s5)));padding:var(--s3) var(--card-pad,var(--s5));border-top:1px solid var(--line)}
.card.flush>.card-foot{margin:0}
.glist-item[aria-current] .n,.glist-item.on .n,.glist-item[data-g] .n{color:var(--ink-2)}   /* a count on a tinted row keeps 4.5:1 (R58) */