/* ============================================================
   SKETCHPLAY 4.0 — UI KIT COMPONENT CSS (extracted from the
   ACCEPTED style guide v0.7/v0.8). Tokens first, components after.
   Page-specific styleguide CSS intentionally NOT included.
   ============================================================ */

/* ============================================================
   SKETCHPLAY 4.0 — DESIGN TOKENS v0.6
   One source of truth. Consumed by every web surface (CSS vars)
   and mirrored to mobile design.ts (build step, later).
   Light = default. Dark = [data-theme="dark"] on <html>.

   v0.4 (2026-07-04, Lance's review round 3):
   - Accent family → GOLD (luxury trial). White FAILS on gold, so
     on-accent is near-ink; accent-ink is a darkened gold that
     passes 4.5:1 for links on paper.
   - Selects get designed: appearance:none + token chevron with
     real right padding (see ui-kit .selectwrap).
   - Kanit still brand-wordmark only; labels/data/small locked.
   ============================================================ */

:root {
  /* -- color: neutrals (warm ink-on-paper scale) -- */
  --bg:            #FAFAF9;
  --surface:       #FFFFFF;
  --surface-2:     #F2F1EE;
  --border:        #E8E6E1;
  --border-strong: #D3D0C9;
  --text:          #0F0F14;
  --text-2:        #46464F;
  --text-3:        #6E6D76;  /* ≥4.5:1 on bg — "Readable at 60" */

  /* -- color: accent — THE TENANT'S BRAND COLOR (Lance, v0.5) --
     The accent tier is INJECTED PER TENANT at runtime (from the
     client's BrandKit): agamehoops.com/admin wears AGAME's color,
     Mothership wears Sketchplay's. Values below are the SKP
     platform defaults only. accent-ink and on-accent are COMPUTED
     from the brand color (contrast math), never hand-picked per
     client. Current SKP default: gold (trial). */
  --accent:        #C9A227;  /* fills, indicators, selected states */
  --accent-ink:    #85691A;  /* links/emphasis text on light (≥4.5:1) */
  --on-accent:     #17130A;  /* near-ink — white fails AA on gold */

  /* -- color: semantic (muted, editorial — never neon) -- */
  --ok:            #0B8A43;
  --warn:          #A94E08;
  --danger:        #B3261E;
  --info:          #0369A1;
  --ok-bg:         #E9F7EE;
  --warn-bg:       #FBF1E6;
  --danger-bg:     #FAECEB;
  --info-bg:       #E8F4FB;

  /* -- type --
     Product voice = Manrope, all levels. Data = tabular-nums,
     never monospace. Kanit 800 italic = BRAND WORDMARK ONLY. */
  --font-brand:   "Kanit", "Manrope", ui-sans-serif, sans-serif;  /* wordmark only */
  --font-ui:      "Manrope", ui-sans-serif, system-ui, sans-serif;

  --type-display: 600 clamp(34px, 5vw, 44px)/1.08 var(--font-ui); /* letter-spacing -.025em */
  --type-h1:      600 28px/1.15 var(--font-ui);
  --type-h2:      600 21px/1.25 var(--font-ui);
  --type-h3:      600 16px/1.35 var(--font-ui);
  --type-body:    400 15px/1.6  var(--font-ui);
  --type-small:   500 13.5px/1.5 var(--font-ui);
  --type-label:   700 11.5px/1.3 var(--font-ui);  /* uppercase, tracked */
  --type-data:    500 14px/1.5  var(--font-ui);   /* + font-variant-numeric: tabular-nums */

  --tracking-label: 0.06em;

  /* -- space: 4px grid -- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px;

  /* -- tap targets: sports hands -- */
  --tap-min: 48px;

  /* -- radius: crisp. no pill cards, ever. -- */
  --r-1: 4px;   /* inputs, chips, buttons */
  --r-2: 8px;   /* cards, modals */
  --r-full: 9999px; /* toggles + status dots ONLY */

  /* -- elevation: two-layer, barely-there -- */
  --shadow-1: 0 1px 2px rgba(15,15,20,.05), 0 1px 1px rgba(15,15,20,.03);
  --shadow-2: 0 2px 6px rgba(15,15,20,.06), 0 8px 24px rgba(15,15,20,.06);

  /* -- motion: fast, eased, never bouncy -- */
  --t-fast: 140ms;
  --t-base: 220ms;
  --ease:   cubic-bezier(0.16, 1, 0.3, 1);
  /* heavy surfaces (sheets/drawers): slow launch, long settle — weight,
     never bounce (org-app menu study, 2026-09-07) */
  --t-sheet: 340ms;
  --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);

  /* -- focus -- */
  --focus-ring: 0 0 0 2px var(--accent);  /* one line, no gap (Lance 09-28) */

  /* -- inset surface: expanded rows / nested areas (Lance-picked) -- */
  --surface-inset: #F7F7F7;

  /* -- breakpoints (reference; mobile-first, admin-on-the-go is a
     primary persona; design at 1024, verify at 360) --
       --bp-sm: 640px  --bp-md: 768px  --bp-lg: 1024px  --bp-xl: 1280px */
}

[data-theme="dark"] {
  --bg:            #0A0A0F;
  --surface:       #121218;
  --surface-2:     #18181F;
  --border:        #26262E;
  --border-strong: #3A3A45;
  --text:          #F4F4F1;
  --text-2:        #B4B4BD;
  --text-3:        #8B8B95;

  --accent-ink:    #E0BE55;  /* readable gold on dark */
  --on-accent:     #17130A;

  --ok:            #4CE88A;
  --warn:          #E8A75B;
  --danger:        #F2827A;
  --info:          #4CC3F7;
  --ok-bg:         #10241A;
  --warn-bg:       #2A2015;
  --danger-bg:     #2B1715;
  --info-bg:       #10222E;

  --shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 1px 1px rgba(0,0,0,.3);
  --shadow-2: 0 2px 6px rgba(0,0,0,.45), 0 10px 28px rgba(0,0,0,.45);

  --surface-inset: #050508;  /* reads black — inside the row */
}

/* ====== 0b ADMIN PALETTE (redesign Phase 4.1, docs/redesign/phase4-plan.md)
   The reference screenshot's cool palette, for ADMIN screens only: it
   applies under <html data-palette="admin"> (Mothership's new shell; MyHQ's
   admin side later). Every other app and client site keeps the blocks
   above. Never sets the accent trio: that stays with the surface brand
   emitter. Values sampled from docs/redesign/reference/target-ui.png and
   moved to the nearest AA-passing value (plan sections 3 to 5). ====== */
:root[data-palette="admin"]:not([data-theme="dark"]) {
  --bg:            #F9F9FB;
  --surface:       #FFFFFF;
  --surface-2:     #F2F3F5;
  --surface-inset: #F6F7F9;
  --border:        #EAEBEF;
  --border-strong: #D9DBE1;
  --text:          #0B0E16;
  --text-2:        #3F434C;
  --text-3:        #696E79;  /* the reference's labels are lighter and fail AA */

  --ok:            #0F7A3A;
  --warn:          #AE5207;
  --danger:        #C8243A;
  --info:          #2461D6;
  --ok-bg:         #E6F7ED;
  --warn-bg:       #FDF1E5;
  --danger-bg:     #FDF2F3;
  --info-bg:       #E9F0FD;

  /* pastel icon tiles (stat cards, activity tags): -bg fill, bare = icon */
  --tile-violet-bg: #F3EEFD;  --tile-violet: #7C4DDB;
  --tile-green-bg:  #E6F7EE;  --tile-green:  #1B9352;
  --tile-blue-bg:   #E9F0FD;  --tile-blue:   #2F6FE0;
  --tile-orange-bg: #FEF1E4;  --tile-orange: #C4650A;
  --tile-red-bg:    #FDE9EB;  --tile-red:    #DB3B4B;
  --tile-grey-bg:   #EEF0F2;  --tile-grey:   #4B505B;

  --shadow-1: 0 1px 2px rgba(11,14,22,.04), 0 1px 1px rgba(11,14,22,.02);

  /* the dark sidebar, consumed by the island below */
  --side-bg:       #10151F;
  --side-2:        #1D222C;
  --side-border:   #232834;
  --side-text:     #FFFFFF;
  --side-text-2:   #B6BAC3;
  --side-text-3:   #8A8F9C;
}
:root[data-palette="admin"][data-theme="dark"] {
  color-scheme: dark;   /* native checkboxes, date icons and scrollbars follow */
  --bg:            #0B0F17;
  --surface:       #121722;
  --surface-2:     #1A202C;
  --surface-inset: #080B12;
  --border:        #232A36;
  --border-strong: #333B49;
  --text:          #F3F5F8;
  --text-2:        #B7BCC6;
  --text-3:        #8A91A0;

  --info:          #6FA8FF;
  --info-bg:       #0F1F36;

  --tile-violet-bg: #221B38;  --tile-violet: #B69CFF;
  --tile-green-bg:  #0F2419;  --tile-green:  #4CD98A;
  --tile-blue-bg:   #0F1F36;  --tile-blue:   #6FA8FF;
  --tile-orange-bg: #2A1D10;  --tile-orange: #F5A35C;
  --tile-red-bg:    #2B1715;  --tile-red:    #F2827A;
  --tile-grey-bg:   #1F2531;  --tile-grey:   #B7BCC6;

  --side-bg:       #070A10;
  --side-2:        #161B25;
  --side-border:   #1A1F29;
  --side-text:     #FFFFFF;
  --side-text-2:   #B6BAC3;
  --side-text-3:   #7C8392;
}
/* The sidebar is a token island: the switcher, nav items, badges and footer
   read the usual tokens and get the navy values. color is set here because
   inherited text color resolves on body, outside the island. */
:root[data-palette="admin"] .adm-side {
  --bg:            var(--side-bg);
  --surface:       var(--side-bg);
  --surface-2:     var(--side-2);
  --border:        var(--side-border);
  --border-strong: var(--side-text-3);
  --text:          var(--side-text);
  --text-2:        var(--side-text-2);
  --text-3:        var(--side-text-3);
  --accent:        var(--side-2);
  --accent-ink:    var(--side-text);
  --on-accent:     var(--side-text);
  --focus-ring:    0 0 0 2px var(--side-text);
  color: var(--text);
}

/* ====== 0c ADMIN TYPE AND SPACING (redesign Phase 4.2, docs/redesign/phase4-plan.md section 8)
   The reference screenshot's type and rhythm, for ADMIN screens only: same
   scope as 0b (<html data-palette="admin">), so club sites, MyHQ on the
   classic shell and the classic Mothership layout never see it. Phone first:
   the base values are the 390 values, the 1024 block is the step up. The
   existing kit classes read these tokens inside the admin main column; the
   sidebar keeps its own type (group labels stay uppercase and tracked). ====== */
:root[data-palette="admin"] {
  --adm-title:      600 22px/1.2 var(--font-ui);   /* page title */
  --adm-card-title: 600 16px/1.35 var(--font-ui);  /* card head */
  --adm-label:      400 13px/1.4 var(--font-ui);   /* field label: sentence case, no tracking; 13 px floor (Lance 09-29) */
  --adm-value:      500 14px/1.5 var(--font-ui);   /* field value */
  --adm-stat:       600 22px/1.15 var(--font-ui);  /* stat tile value, tabular */
  --adm-pad:        16px;  /* card padding */
  --adm-gap:        12px;  /* grid gap between cards */
  --adm-stack:      12px;  /* card head to body; field to field */
  --adm-label-gap:  2px;   /* label to value */
  --adm-btn-h:      44px;  /* thumb-sized on phones */
  --adm-btn-r:      6px;
}
@media(min-width:1024px){
  :root[data-palette="admin"] {
    --adm-title:      600 26px/1.2 var(--font-ui);
    --adm-card-title: 600 17px/1.35 var(--font-ui);
    --adm-stat:       600 24px/1.15 var(--font-ui);
    --adm-pad:        20px;
    --adm-gap:        20px;
    --adm-stack:      16px;
    --adm-label-gap:  4px;
    --adm-btn-h:      36px;
  }
}
/* page title; the parent link in it reads as the breadcrumb */
:root[data-palette="admin"] .adm-main>.topbar h1{font:var(--adm-title);letter-spacing:-.01em}
:root[data-palette="admin"] .adm-title a.plain{font-weight:400;color:var(--text-3)}
/* cards: one padding, the head flows into the body with no rule between */
:root[data-palette="admin"] .adm-main .card .card-h{padding:var(--adm-pad) var(--adm-pad) 0;border-bottom:0}
:root[data-palette="admin"] .adm-main .card .card-h h3{font:var(--adm-card-title);letter-spacing:-.01em}
:root[data-palette="admin"] .adm-main .card .card-b{padding:var(--adm-pad)}
:root[data-palette="admin"] .adm-main .card .card-h+.card-b{padding-top:var(--adm-stack)}
/* labels, values, stats */
:root[data-palette="admin"] .adm-main .label,
:root[data-palette="admin"] .adm-main .stat .s-label{font:var(--adm-label);letter-spacing:0;text-transform:none;color:var(--text-3)}
:root[data-palette="admin"] .adm-main .lbl-block{margin-bottom:var(--adm-label-gap)}
:root[data-palette="admin"] .adm-main .kvrow{font:var(--adm-value);padding:calc(var(--adm-stack) / 2) 0}
:root[data-palette="admin"] .adm-main .cardgrid .kvrow{min-height:0}
:root[data-palette="admin"] .adm-main .kpi,
:root[data-palette="admin"] .adm-main .stat .s-value{font:var(--adm-stat);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
:root[data-palette="admin"] .adm-main .kpi-tile>.kpi,
:root[data-palette="admin"] .adm-main .stat .s-value{margin-top:var(--adm-label-gap)}
/* grid gap between cards */
:root[data-palette="admin"] .adm-main .kpis,
:root[data-palette="admin"] .adm-main .cardgrid,
:root[data-palette="admin"] .adm-main .grid-2,
:root[data-palette="admin"] .adm-main .grid-3,
:root[data-palette="admin"] .adm-main .two-col{gap:var(--adm-gap)}
/* buttons: one shape. Primary is the surface brand filled; secondary is
   surface plus a 1 px border (section 04 already) */
:root[data-palette="admin"] .adm-main .btn{min-height:var(--adm-btn-h);padding:0 14px;border-radius:var(--adm-btn-r);font:500 13px/1 var(--font-ui);letter-spacing:0}
:root[data-palette="admin"] .adm-main .btn-primary{background:var(--accent);color:var(--on-accent)}
/* the switcher's "Viewing / All clients" is a label over a value */
:root[data-palette="admin"] .adm-switch-who{gap:var(--adm-label-gap)}
:root[data-palette="admin"] .adm-switch-who small{font:var(--adm-label)}


/* ====== 0d WIKI READING (wiki W-1, docs/redesign/wiki-prd.md section 4.2)
   The Mothership wiki's reading layout: tabs, a 240 px wiki nav, a reading
   column capped at the measure, "On this page" as a right rail at 1440 and
   up (a disclosure below that), and .prose, the one real component for long
   reading. Reading type is larger than admin type on purpose. Every class
   is .wiki-* or lives under .prose, so nothing here reaches another screen;
   colors are kit tokens only, so light, dark and the admin palette all
   follow. 13 px is the smallest text. Phone first: base values are the
   390 values. ====== */
:root {
  --type-read:    400 16px/1.75 var(--font-ui);  /* body copy in .prose */
  --type-lede:    400 18px/1.6 var(--font-ui);   /* the page description */
  --wiki-title:   600 30px/1.15 var(--font-ui);  /* 40 px from 640 */
  --wiki-h2:      600 24px/1.3 var(--font-ui);
  --wiki-measure: 720px;
  --font-code:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}
@media(min-width:640px){ :root { --wiki-title: 600 40px/1.15 var(--font-ui); } }

/* -- frame: the wiki fills the content area edge to edge -- */
.content:has(>.wiki){padding:0}
.wiki{--wiki-stick:16px;min-width:0}
.adm-main .wiki{--wiki-stick:73px}   /* under the new shell's sticky top bar */

/* -- header row: the four tabs as underlines, then Focus -- */
.wiki-head{display:flex;align-items:stretch;gap:var(--s-4);padding:0 var(--s-4);border-bottom:1px solid var(--border);background:var(--bg)}
@media(min-width:1024px){.wiki-head{padding:0 var(--s-6)}}
.wiki-tabs{flex:1;min-width:0;display:flex;gap:var(--s-6);overflow-x:auto;scrollbar-width:none;padding-right:var(--s-8);
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
.wiki-tabs::-webkit-scrollbar{display:none}
@media(min-width:1024px){.wiki-tabs{padding-right:0;-webkit-mask-image:none;mask-image:none}}
.wiki-tab{flex:none;display:flex;align-items:center;min-height:48px;font:600 14px/1 var(--font-ui);color:var(--text-3);text-decoration:none;white-space:nowrap;box-shadow:inset 0 -2px 0 transparent;transition:color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.wiki-tab:hover{color:var(--text)}
.wiki-tab[aria-current]{color:var(--text);box-shadow:inset 0 -2px 0 var(--text)}
.wiki-tab.is-off,.wiki-tab.is-off:hover{color:var(--text-3);opacity:.6;cursor:default}
.wiki-head .wiki-focus-btn{display:none}
@media(min-width:1024px){.wiki-head .wiki-focus-btn{display:inline-flex;align-self:center;flex:none}}
.wiki-focus-btn[aria-pressed="true"]{background:var(--surface-2)}

/* -- body: wiki nav beside the page from 1024 -- */
.wiki-body{display:grid;grid-template-columns:minmax(0,1fr)}
@media(min-width:1024px){.wiki-body{grid-template-columns:240px minmax(0,1fr)}}

/* the phone bar ("Product > Clients") that opens the nav */
.wiki-navbar{display:flex;align-items:center;gap:var(--s-2);width:100%;min-height:48px;padding:0 var(--s-4);border:0;border-bottom:1px solid var(--border);background:var(--surface);color:var(--text);font:600 14px/1.3 var(--font-ui);text-align:left;cursor:pointer}
.wiki-navbar::after{content:"";margin-left:auto;width:7px;height:7px;border-right:1.5px solid var(--text-3);border-bottom:1.5px solid var(--text-3);transform:rotate(45deg);transition:transform var(--t-fast) var(--ease)}
.wiki-navbar[aria-expanded="true"]::after{transform:rotate(-135deg)}
.wiki-navbar span{color:var(--text-3)}
@media(min-width:1024px){.wiki-navbar{display:none}}
/* phones show the path once: the nav bar carries it, so the page crumb hides (Lance 09-30) */
.wiki-body .wiki-crumbs{display:none}
@media(min-width:1024px){.wiki-body .wiki-crumbs{display:flex}}

.wiki-nav{display:none;padding:var(--s-4) var(--s-3) var(--s-6);border-bottom:1px solid var(--border);background:var(--surface)}
.wiki-nav.is-open{display:block}
@media(min-width:1024px){
  .wiki-nav{display:block;position:sticky;top:var(--wiki-stick);align-self:start;max-height:calc(100vh - var(--wiki-stick));overflow-y:auto;scrollbar-width:thin;
    padding:var(--s-8) var(--s-3) var(--s-10) var(--s-4);border-bottom:0;border-right:1px solid var(--border);background:none}
}
.wiki-group+.wiki-group{margin-top:var(--s-6)}
.wiki-group-name{font:700 13px/1.3 var(--font-ui);color:var(--text);padding:0 var(--s-3) var(--s-2)}
.wiki-group ul{list-style:none}
.wiki-navlink{display:flex;align-items:center;gap:var(--s-2);min-height:44px;padding:0 var(--s-3);border-radius:var(--r-2);font:500 14px/1.35 var(--font-ui);color:var(--text-2);text-decoration:none;transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
@media(min-width:1024px){.wiki-navlink{min-height:34px;padding:6px var(--s-3)}}
.wiki-navlink:hover{background:var(--surface-2);color:var(--text)}
.wiki-navlink[aria-current="page"]{background:var(--surface-2);color:var(--text);font-weight:700}
.wiki-gap{font:400 13px/1.45 var(--font-ui);color:var(--text-3);padding:var(--s-1) var(--s-3)}
.wiki-tag{flex:none;margin-left:auto;font:600 13px/1 var(--font-ui);color:var(--text-3);border:1px solid var(--border);border-radius:var(--r-1);padding:3px 6px}

/* -- main: the reading column, plus the rail at 1440 -- */
.wiki-main{min-width:0;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-10);padding:var(--s-6) var(--s-4) var(--s-16)}
@media(min-width:640px){.wiki-main{padding:var(--s-10) var(--s-8) var(--s-20)}}
@media(min-width:1024px){.wiki-main{padding:var(--s-10) var(--s-10) var(--s-20)}}
@media(min-width:1440px){.wiki-main.has-toc{grid-template-columns:minmax(0,var(--wiki-measure)) 200px;justify-content:center}}
.wiki-article{min-width:0;width:100%;max-width:var(--wiki-measure);margin:0 auto}

/* page anatomy: eyebrow, title, lede, meta */
.wiki-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:var(--s-3);font:600 13.5px/1.3 var(--font-ui);color:var(--text-3)}
.wiki-crumbs a{color:inherit;text-decoration:none}
.wiki-crumbs a:hover{color:var(--text)}
.wiki-title{font:var(--wiki-title);letter-spacing:-.025em;color:var(--text);overflow-wrap:break-word}
.wiki-lede{margin-top:var(--s-3);font:var(--type-lede);color:var(--text-2)}
.wiki-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px var(--s-4);margin-top:var(--s-5);padding-bottom:var(--s-6);border-bottom:1px solid var(--border);font:500 13.5px/1.3 var(--font-ui);color:var(--text-3)}
.wiki-meta b{font-weight:600;color:var(--text-2)}
.wiki-meta .wiki-tag{margin-left:0}

/* On this page: a disclosure under the meta row, a rail from 1440 */
.wiki-toc-m{margin-top:var(--s-5);border:1px solid var(--border);border-radius:var(--r-2);background:var(--surface)}
.wiki-toc-m>summary{display:flex;align-items:center;min-height:44px;padding:0 var(--s-4);font:600 14px/1 var(--font-ui);color:var(--text);cursor:pointer;list-style:none}
.wiki-toc-m>summary::-webkit-details-marker{display:none}
.wiki-toc-m>summary::after{content:"";margin-left:auto;width:7px;height:7px;border-right:1.5px solid var(--text-3);border-bottom:1.5px solid var(--text-3);transform:rotate(45deg)}
.wiki-toc-m[open]>summary::after{transform:rotate(-135deg)}
.wiki-toc-m ul{list-style:none;padding:0 var(--s-4) var(--s-2)}
.wiki-toc-m a{display:flex;align-items:center;min-height:44px;border-top:1px solid var(--border);font:500 14px/1.35 var(--font-ui);color:var(--text-2);text-decoration:none}
.wiki-toc-m a:hover{color:var(--text)}
.wiki-toc{display:none}
@media(min-width:1440px){
  .wiki-toc-m{display:none}
  .wiki-toc{display:block;position:sticky;top:calc(var(--wiki-stick) + var(--s-10));align-self:start;max-height:calc(100vh - var(--wiki-stick) - var(--s-16));overflow-y:auto;scrollbar-width:thin}
}
.wiki-toc-h{font:700 13px/1.3 var(--font-ui);color:var(--text);margin-bottom:var(--s-3)}
.wiki-toc ul{list-style:none;border-left:1px solid var(--border)}
.wiki-toc a{display:block;margin-left:-1px;padding:6px 0 6px 14px;border-left:2px solid transparent;font:500 13px/1.4 var(--font-ui);color:var(--text-3);text-decoration:none;transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.wiki-toc a:hover{color:var(--text)}
.wiki-toc a.is-on{color:var(--text);border-left-color:var(--text);font-weight:600}

/* page end: helpful, previous and next, the update rule */
.wiki-helpful{margin-top:var(--s-12);padding-top:var(--s-5);border-top:1px solid var(--border);font:500 14px/1.5 var(--font-ui);color:var(--text-2)}
.wiki-helpful form{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3)}
.wiki-helpful form span{margin-right:var(--s-1)}
.wiki-helpful .btn{min-height:44px;min-width:64px;justify-content:center}
.wiki-helpful a{color:var(--text);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.wiki-pager{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-3);margin-top:var(--s-6)}
@media(min-width:640px){.wiki-pager{grid-template-columns:repeat(2,minmax(0,1fr))}.wiki-pagecard.is-next{grid-column:2}}
.wiki-pagecard{display:block;min-width:0;padding:var(--s-4) 18px;border:1px solid var(--border);border-radius:var(--r-2);background:var(--surface);color:var(--text);text-decoration:none;transition:border-color var(--t-fast) var(--ease)}
.wiki-pagecard:hover{border-color:var(--border-strong)}
.wiki-pagecard small{display:block;font:600 13px/1.2 var(--font-ui);color:var(--text-3)}
.wiki-pagecard b{display:block;margin-top:6px;font:700 15px/1.35 var(--font-ui);color:var(--text)}
.wiki-pagecard.is-next{text-align:right}
.wiki-keep{margin-top:var(--s-6);display:grid;gap:var(--s-1);font:400 13px/1.6 var(--font-ui);color:var(--text-3)}
.wiki-keep dt{display:inline;font-weight:600;color:var(--text-2)}
.wiki-keep dd{display:inline}
.wiki-keep div{min-width:0}

/* -- home and tab landings: cards generated from frontmatter -- */
.wiki-home{min-width:0;width:100%;max-width:1040px;margin:0 auto}
.wiki-hero{position:relative;overflow:hidden;padding:var(--s-6) var(--s-5);border:1px solid var(--border);border-radius:var(--r-2);background:var(--surface)}
@media(min-width:640px){.wiki-hero{padding:var(--s-10)}}
.wiki-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(var(--border-strong) 1px,transparent 1.3px);background-size:18px 18px;
  -webkit-mask-image:linear-gradient(105deg,transparent 40%,#000 100%);mask-image:linear-gradient(105deg,transparent 40%,#000 100%)}
.wiki-hero>*{position:relative}
.wiki-hero .wiki-lede{max-width:60ch}
.wiki-hero.is-plain{padding:0 0 var(--s-6);border:0;border-bottom:1px solid var(--border);border-radius:0;background:none}
.wiki-hero.is-plain::before{display:none}
.wiki-section{margin-top:var(--s-12)}
.wiki-section-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px var(--s-3);margin-bottom:var(--s-4)}
.wiki-section-h h2{font:600 22px/1.3 var(--font-ui);letter-spacing:-.015em;color:var(--text)}
.wiki-section-h p{font:500 14px/1.4 var(--font-ui);color:var(--text-3)}
.wiki-cards{list-style:none;display:grid;gap:var(--s-3);grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))}
.wiki-card{display:flex;flex-direction:column;gap:6px;min-width:0;height:100%;padding:18px var(--s-5);border:1px solid var(--border);border-radius:var(--r-2);background:var(--surface);color:var(--text);text-decoration:none;transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
a.wiki-card:hover{border-color:var(--border-strong);box-shadow:var(--shadow-1)}
.wiki-card small{font:600 13px/1.2 var(--font-ui);color:var(--text-3);font-variant-numeric:tabular-nums}
.wiki-card b{display:flex;align-items:center;gap:var(--s-2);font:700 16px/1.35 var(--font-ui);color:var(--text)}
.wiki-card b .wiki-tag{margin-left:0}
.wiki-card p{font:400 14px/1.55 var(--font-ui);color:var(--text-2)}
.wiki-card-foot{margin-top:auto;padding-top:var(--s-2);font:500 13px/1.3 var(--font-ui);color:var(--text-3)}
.wiki-card.is-gap{color:var(--text-3);font:400 14px/1.55 var(--font-ui);background:none;border-style:dashed}
.wiki-card-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3);color:var(--text);text-decoration:none}
.wiki-card-head:hover b{text-decoration:underline;text-underline-offset:3px}
.wiki-card-list{list-style:none;margin-top:var(--s-2);border-top:1px solid var(--border)}
.wiki-card-list li{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);min-height:44px;border-bottom:1px solid var(--border)}
.wiki-card-list li:last-child{border-bottom:0}
.wiki-card-list a{min-width:0;font:600 14px/1.35 var(--font-ui);color:var(--text);text-decoration:none}
.wiki-card-list a:hover{text-decoration:underline;text-underline-offset:3px}
.wiki-card-list span{flex:none;font:500 13px/1.3 var(--font-ui);color:var(--text-3);font-variant-numeric:tabular-nums}
.wiki-about{padding-top:var(--s-8);border-top:1px solid var(--border)}
.wiki-about .prose{margin-top:0;max-width:var(--wiki-measure)}

/* -- the admin sidebar folded to its icon rail (Focus, 1024 and up) -- */
@media(min-width:1024px){
  .wiki-focus .adm{grid-template-columns:72px minmax(0,1fr)}
  .wiki-focus .adm-side{padding:var(--s-5) var(--s-2) var(--s-4);overflow:visible}
  .wiki-focus .adm-brand{justify-content:center;padding:0}
  .wiki-focus .adm-brand>span:first-child,.wiki-focus .adm-switch{display:none}
  .wiki-focus .adm-env{margin-left:0}
  .wiki-focus .adm-glabel{height:1px;margin:var(--s-2) var(--s-3);padding:0;overflow:hidden;color:transparent;background:var(--border)}
  .wiki-focus .adm-nav .nav-item,.wiki-focus .adm-help{position:relative;justify-content:center;padding:0;min-height:40px}
  .wiki-focus .adm-nav .nav-item>span:not([class]),.wiki-focus .adm-help>span{position:absolute;left:calc(100% + 10px);top:50%;z-index:90;transform:translateY(-50%);
    padding:6px 9px;border:1px solid var(--border);border-radius:var(--r-1);background:var(--surface-2);color:var(--text);font:600 13px/1 var(--font-ui);white-space:nowrap;box-shadow:var(--shadow-2);
    opacity:0;pointer-events:none;transition:opacity var(--t-fast) var(--ease)}
  .wiki-focus .adm-nav .nav-item:hover>span:not([class]),.wiki-focus .adm-nav .nav-item:focus-visible>span:not([class]),
  .wiki-focus .adm-help:hover>span,.wiki-focus .adm-help:focus-visible>span{opacity:1}
  .wiki-focus .adm-badge-live{position:absolute;inset:0 0 auto auto;margin:0}
  .wiki-focus .adm-badge{position:absolute;top:0;right:0;padding:2px 5px}
  .wiki-focus .acct-row>.acct-btn{justify-content:center;padding:var(--s-2) 0}
  .wiki-focus .acct-who,.wiki-focus .acct-more{display:none}
}

/* -- .prose: long reading (the wiki; any long-form page may wear it) -- */
.prose{margin-top:var(--s-8);font:var(--type-read);color:var(--text-2);overflow-wrap:break-word}
.prose>:first-child{margin-top:0}
.prose p{margin:0 0 20px}
.prose strong,.prose b{color:var(--text);font-weight:700}
.prose em{color:var(--text)}
.prose a{color:var(--text);font-weight:600;text-decoration:underline;text-decoration-color:var(--border-strong);text-decoration-thickness:1.5px;text-underline-offset:3px;transition:text-decoration-color var(--t-fast) var(--ease)}
.prose a:hover{text-decoration-color:var(--text)}
.prose h2{font:var(--wiki-h2);letter-spacing:-.018em;color:var(--text);margin:48px 0 14px;scroll-margin-top:calc(var(--wiki-stick,16px) + 16px)}
.prose h3{font:700 18px/1.4 var(--font-ui);letter-spacing:-.01em;color:var(--text);margin:32px 0 10px;scroll-margin-top:calc(var(--wiki-stick,16px) + 16px)}
.prose h4{font:700 16px/1.4 var(--font-ui);color:var(--text);margin:24px 0 8px}
.prose a.prose-anchor{margin-left:var(--s-2);color:var(--text-3);font-weight:500;text-decoration:none;opacity:0;transition:opacity var(--t-fast) var(--ease)}
.prose h2:hover>.prose-anchor,.prose h3:hover>.prose-anchor,.prose a.prose-anchor:focus-visible{opacity:1}
@media(hover:none){.prose a.prose-anchor{display:none}}
.prose ul,.prose ol{margin:0 0 20px;padding-left:24px}
.prose li{margin-bottom:8px;padding-left:4px}
.prose li::marker{color:var(--text-3)}
.prose li>ul,.prose li>ol{margin:8px 0 0}
.prose hr{border:0;border-top:1px solid var(--border);margin:40px 0}
.prose code{font:500 max(13px,.875em)/1.5 var(--font-code);color:var(--text);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-1);padding:1px 5px;overflow-wrap:anywhere}
/* tables: bordered on wide screens, labeled cards under 640 (the kit's
   table.collapsing) */
.prose .prose-table{margin:4px 0 24px;overflow-x:auto;border:1px solid var(--border);border-radius:var(--r-2);background:var(--surface)}
.prose table{width:100%;border-collapse:collapse}
.prose table.collapsing{min-width:0}
.prose th{text-align:left;vertical-align:bottom;padding:12px var(--s-4);border-bottom:1px solid var(--border);background:var(--surface-2);font:700 13px/1.35 var(--font-ui);color:var(--text)}
.prose td{vertical-align:top;padding:12px var(--s-4);border-bottom:1px solid var(--border);font:400 14.5px/1.6 var(--font-ui);color:var(--text-2)}
.prose tbody tr:last-child td{border-bottom:0}
@media(max-width:639px){
  .prose .prose-table{overflow:visible;border:0;background:none}
  .prose table.collapsing tbody{padding:0}
  .prose table.collapsing tbody tr{margin-bottom:var(--s-3)}
  .prose table.collapsing td{display:block;padding:6px 0;border:0}
  .prose table.collapsing td[data-label]::before{display:block;margin-bottom:2px}
}
/* callouts: note, warning, and "For engineers" folded away */
.prose .callout{margin:4px 0 24px;padding:14px 18px;border:1px solid var(--border);border-radius:var(--r-2);background:var(--surface-2);font:400 15px/1.65 var(--font-ui);color:var(--text-2)}
.prose .callout p{margin:0 0 10px}
.prose .callout>:last-child,.prose .callout>div>:last-child{margin-bottom:0}
.prose .callout.note{border-color:color-mix(in srgb,var(--info) 25%,var(--border));background:color-mix(in srgb,var(--info-bg) 70%,var(--surface))}
.prose .callout.warning{border-color:color-mix(in srgb,var(--warn) 28%,var(--border));background:color-mix(in srgb,var(--warn-bg) 70%,var(--surface))}
.prose details.callout{padding:0}
.prose details.callout>summary{display:flex;align-items:center;gap:var(--s-2);min-height:44px;padding:0 18px;font:600 14px/1.3 var(--font-ui);color:var(--text);cursor:pointer;list-style:none}
.prose details.callout>summary::-webkit-details-marker{display:none}
.prose details.callout>summary::after{content:"";margin-left:auto;width:7px;height:7px;border-right:1.5px solid var(--text-3);border-bottom:1.5px solid var(--text-3);transform:rotate(45deg)}
.prose details.callout[open]>summary::after{transform:rotate(-135deg)}
.prose details.callout>div{padding:0 18px 14px}
/* code blocks, with a copy button */
.prose .prose-code{position:relative;margin:4px 0 24px;border:1px solid var(--border);border-radius:var(--r-2);background:var(--surface-2)}
.prose pre{margin:0;padding:14px var(--s-4);padding-right:88px;overflow-x:auto;font:400 13px/1.7 var(--font-code);color:var(--text)}
.prose pre code{font:inherit;background:none;border:0;padding:0;overflow-wrap:normal}
.prose .prose-copy{position:absolute;top:var(--s-2);right:var(--s-2);min-height:44px;padding:0 var(--s-3);border:1px solid var(--border);border-radius:var(--r-1);background:var(--surface);font:600 13px/1 var(--font-ui);color:var(--text-2);cursor:pointer}
@media(min-width:1024px){.prose .prose-copy{min-height:32px}}
.prose .prose-copy:hover{color:var(--text);border-color:var(--border-strong)}


/* ====== 0e ADMIN COMPONENTS (redesign Phase 4.3, docs/redesign/phase43-brief.md)
   The reference screenshot's components, for ADMIN screens only: same scope
   as 0b and 0c (<html data-palette="admin">), so club sites, MyHQ and the
   classic Mothership layout never see them. Kit variables only; 13 px is
   the smallest text; phone first (the base is the 390 value).
   - .adm-page, .adm-cols      the page's card rows (one column on phones)
   - .adm-ident, .adm-boxes    identity row + Health / Plan / Status boxes
   - .adm-stats, .adm-stat     number tiles with a pastel icon tile (.adm-ic)
   - .adm-tag                  small tag with a dot (radius --r-1, never a pill)
   - .adm-fields, .adm-field   stacked field: label over value, action icon right
   - .adm-tabs.is-card         in-card underline tabs (the shell's .adm-tabs, reset)
   - .adm-tabrow, .adm-roster  tabs + an action; the roster table (collapses on phones)
   - dialog.adm-drawer         side panel: right side at 1024+, full screen on phones
   - .adm-mini                 compact table (3 to 5 rows) + .adm-more "View all"
   - .adm-list, .adm-feed      quiet rows (integrations) and the activity feed
   - .adm-usages, .adm-usage   usage stats with inline SVG charts + empty state
   - .adm-ring                 a small count ring
   - round 5: .adm-cols.is-2x2, .adm-code, .adm-bignums,
     .adm-feat, .adm-list-act (listed where they are defined, below)
   Macros: skp/macros.html (adm_*; round 5 adds adm_code, adm_bignum). ====== */
:root[data-palette="admin"] .adm-page{display:grid;gap:var(--adm-gap);grid-template-columns:minmax(0,1fr)}
:root[data-palette="admin"] .adm-cols{display:grid;gap:var(--adm-gap);grid-template-columns:minmax(0,1fr)}
@media(min-width:768px){
  :root[data-palette="admin"] .adm-cols.is-3,
  :root[data-palette="admin"] .adm-cols.is-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:1024px){
  :root[data-palette="admin"] .adm-cols.is-2-3{grid-template-columns:minmax(0,2fr) minmax(0,3fr)}
  :root[data-palette="admin"] .adm-cols.is-1-1{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:1280px){
  :root[data-palette="admin"] .adm-cols.is-1-2{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
  :root[data-palette="admin"] .adm-cols.is-pair{grid-template-columns:repeat(2,minmax(0,1fr))}
  :root[data-palette="admin"] .adm-cols.is-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  :root[data-palette="admin"] .adm-cols.is-4{grid-template-columns:repeat(4,minmax(0,1fr))}
}
:root[data-palette="admin"] .adm-cols>.card{min-width:0}
/* a row of short cards: each card keeps its own height (Lance, round 3) */
:root[data-palette="admin"] .adm-cols.is-short{align-items:start}
/* cards side by side are always the same height (Lance 09-30); each card
   is a column so its button row sits on the bottom edge, level with its
   neighbor's */
:root[data-palette="admin"] .adm-cols:not(.is-short)>.card{display:flex;flex-direction:column}
:root[data-palette="admin"] .adm-cols:not(.is-short)>.card>.card-b{flex:1;display:flex;flex-direction:column}
:root[data-palette="admin"] .adm-cols:not(.is-short)>.card>.card-b>.adm-card-actions:last-child{margin-top:auto;padding-top:var(--adm-stack)}
/* the tab-panel cards (Transactions, Recent activity) pin their links too */
:root[data-palette="admin"] .adm-cols:not(.is-short)>.card>.card-b>.adm-tabpanel{flex:1;display:flex;flex-direction:column}
:root[data-palette="admin"] .adm-cols:not(.is-short)>.card>.card-b>.adm-tabpanel>.adm-more:last-child{margin-top:auto}
:root[data-palette="admin"] .adm-cols:not(.is-short)>.card>.card-b>.adm-tabpanel>.adm-tabpanel:last-child{flex:1;display:flex;flex-direction:column}
:root[data-palette="admin"] .adm-cols:not(.is-short)>.card>.card-b>.adm-tabpanel>.adm-tabpanel>.adm-card-actions:last-child{margin-top:auto;padding-top:var(--adm-stack)}
/* View all opens the full ledger in place: Transactions takes the whole row
   and Support drops below, instead of stretching Support into an empty card */
:root[data-palette="admin"] .adm-cols.is-pair:has(#tx-controls){grid-template-columns:minmax(0,1fr)}
/* a quiet disclosure inside a card ("Enabled features (N)") */
:root[data-palette="admin"] .adm-disclosure>summary{display:inline-flex;align-items:center;gap:6px;min-height:var(--adm-btn-h);cursor:pointer;list-style:none;font:600 13px/1.2 var(--font-ui);color:var(--text-2)}
:root[data-palette="admin"] .adm-disclosure>summary::-webkit-details-marker{display:none}
:root[data-palette="admin"] .adm-disclosure>summary::after{content:"";width:7px;height:7px;margin-left:2px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform var(--t-fast) var(--ease)}
:root[data-palette="admin"] .adm-disclosure[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
:root[data-palette="admin"] .adm-disclosure>summary:hover{color:var(--text)}
:root[data-palette="admin"] .adm-main .card .card-h .push{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap;justify-content:flex-end}
:root[data-palette="admin"] .adm-page .card-b>*+*{margin-top:var(--adm-stack)}
:root[data-palette="admin"] .adm-card-note{font:var(--adm-label);color:var(--text-3)}
:root[data-palette="admin"] .adm-card-actions{display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:center;margin-top:var(--adm-stack)}
:root[data-palette="admin"] .adm-card-actions form{display:contents}

/* -- identity row: logo, name, tags, meta; the three status boxes -- */
:root[data-palette="admin"] .adm-ident{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--adm-stack)}
:root[data-palette="admin"] .adm-ident-who{display:flex;align-items:center;gap:var(--s-3);min-width:0}
:root[data-palette="admin"] .adm-logo{flex:none;display:grid;place-items:center;width:56px;height:56px;overflow:hidden;border-radius:var(--r-full);background:var(--text);color:var(--bg);font:700 18px/1 var(--font-ui)}
:root[data-palette="admin"] .adm-logo img{width:100%;height:100%;object-fit:contain;background:var(--surface)}
:root[data-palette="admin"] .adm-ident h2{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);font:600 18px/1.25 var(--font-ui);letter-spacing:-.01em;overflow-wrap:anywhere}
:root[data-palette="admin"] .adm-ident-meta{display:flex;flex-wrap:wrap;gap:2px var(--s-3);margin-top:var(--s-1);font:var(--adm-label);color:var(--text-3)}
:root[data-palette="admin"] .adm-ident-meta b{font-weight:600;color:var(--text-2)}
:root[data-palette="admin"] .adm-boxes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-2);width:100%}
:root[data-palette="admin"] .adm-box{display:grid;gap:var(--adm-label-gap);align-content:start;min-width:0;padding:10px var(--s-3);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-2);box-shadow:var(--shadow-1)}
:root[data-palette="admin"] .adm-box dt{font:var(--adm-label);color:var(--text-3)}
:root[data-palette="admin"] .adm-box dd{font:600 14px/1.3 var(--font-ui);color:var(--text);overflow-wrap:anywhere}
@media(min-width:768px){
  :root[data-palette="admin"] .adm-boxes{width:auto;grid-template-columns:repeat(3,minmax(128px,auto))}
}
@media(min-width:1024px){
  :root[data-palette="admin"] .adm-logo{width:72px;height:72px;font-size:22px}
  :root[data-palette="admin"] .adm-ident h2{font-size:20px}
  :root[data-palette="admin"] .adm-box{padding:var(--s-3) var(--s-4)}
}

/* -- stat tiles: label, value, sub line; the pastel icon tile top right -- */
:root[data-palette="admin"] .adm-stats{display:grid;gap:var(--adm-gap);grid-template-columns:repeat(2,minmax(0,1fr))}
:root[data-palette="admin"] .adm-stats>:last-child:nth-child(odd){grid-column:1/-1}
@media(min-width:768px){
  :root[data-palette="admin"] .adm-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  :root[data-palette="admin"] .adm-stats>:last-child:nth-child(odd){grid-column:auto}
}
@media(min-width:1280px){:root[data-palette="admin"] .adm-stats{grid-template-columns:repeat(5,minmax(0,1fr))}}
:root[data-palette="admin"] .adm-stat{position:relative;display:grid;gap:var(--adm-label-gap);align-content:start;min-width:0;padding:var(--adm-pad);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-2);box-shadow:var(--shadow-1)}
:root[data-palette="admin"] .adm-stat dt{min-height:36px;padding-right:44px;font:var(--adm-label);color:var(--text-3)}
:root[data-palette="admin"] .adm-stat .adm-v{font:var(--adm-stat);letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--text);overflow-wrap:anywhere}
:root[data-palette="admin"] .adm-stat .adm-v small{margin-left:2px;font:500 13px/1 var(--font-ui);letter-spacing:0;color:var(--text-3)}
:root[data-palette="admin"] .adm-stat .adm-v.is-muted{font:600 15px/1.35 var(--font-ui);letter-spacing:0;color:var(--text-3)}
:root[data-palette="admin"] .adm-stat .adm-s{font:var(--adm-label);color:var(--text-3);overflow-wrap:anywhere}
:root[data-palette="admin"] .adm-ic{position:absolute;top:var(--adm-pad);right:var(--adm-pad);display:grid;place-items:center;width:36px;height:36px;border-radius:var(--r-2);background:var(--tile-grey-bg);color:var(--tile-grey)}
:root[data-palette="admin"] .adm-ic.is-violet{background:var(--tile-violet-bg);color:var(--tile-violet)}
:root[data-palette="admin"] .adm-ic.is-green{background:var(--tile-green-bg);color:var(--tile-green)}
:root[data-palette="admin"] .adm-ic.is-blue{background:var(--tile-blue-bg);color:var(--tile-blue)}
:root[data-palette="admin"] .adm-ic.is-orange{background:var(--tile-orange-bg);color:var(--tile-orange)}
:root[data-palette="admin"] .adm-ic.is-red{background:var(--tile-red-bg);color:var(--tile-red)}

/* -- tag: small, a dot, radius --r-1 (never a pill) -- */
:root[data-palette="admin"] .adm-tag{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:4px 8px;border-radius:var(--r-1);background:var(--surface-2);color:var(--text-2);font:600 13px/1.1 var(--font-ui);white-space:nowrap;vertical-align:middle}
:root[data-palette="admin"] .adm-tag i{flex:none;width:6px;height:6px;border-radius:var(--r-full);background:currentColor}
:root[data-palette="admin"] .adm-tag.is-ok{background:var(--ok-bg);color:var(--ok)}
:root[data-palette="admin"] .adm-tag.is-warn{background:var(--warn-bg);color:var(--warn)}
:root[data-palette="admin"] .adm-tag.is-danger{background:var(--danger-bg);color:var(--danger)}
:root[data-palette="admin"] .adm-tag.is-info{background:var(--info-bg);color:var(--info)}
:root[data-palette="admin"] .adm-tag.is-violet{background:var(--tile-violet-bg);color:var(--tile-violet)}
:root[data-palette="admin"] .adm-tag.is-green{background:var(--tile-green-bg);color:var(--tile-green)}
:root[data-palette="admin"] .adm-tag.is-blue{background:var(--tile-blue-bg);color:var(--tile-blue)}
:root[data-palette="admin"] .adm-tag.is-grey{background:var(--tile-grey-bg);color:var(--tile-grey)}
:root[data-palette="admin"] .adm-tag.is-plain i{display:none}
:root[data-palette="admin"] .adm-tags{display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-2);align-items:center}

/* -- stacked field: label over value, a small action icon on the right -- */
:root[data-palette="admin"] .adm-fields{display:grid;gap:var(--adm-stack);align-content:start}
:root[data-palette="admin"] .adm-fields.is-2{grid-template-columns:repeat(2,minmax(0,1fr))}
:root[data-palette="admin"] .adm-fields.is-grid{grid-template-columns:minmax(0,1fr);gap:var(--adm-stack) var(--s-8)}
@media(min-width:640px){:root[data-palette="admin"] .adm-fields.is-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){:root[data-palette="admin"] .adm-fields.is-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
:root[data-palette="admin"] .adm-fields.is-grid .selectwrap{max-width:320px}
:root[data-palette="admin"] .adm-field{display:grid;gap:var(--adm-label-gap);align-content:start;min-width:0}
:root[data-palette="admin"] .adm-field dd.adm-card-note,
:root[data-palette="admin"] .adm-field dd.adm-delta{font-weight:400;color:var(--text-3)}
:root[data-palette="admin"] .adm-field dd.adm-delta.is-up{font-weight:600;color:var(--ok)}
:root[data-palette="admin"] .adm-field dd.adm-delta.is-down{font-weight:600;color:var(--danger)}
:root[data-palette="admin"] .adm-field dt{font:var(--adm-label);color:var(--text-3)}
:root[data-palette="admin"] .adm-field dd{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);min-width:0;font:var(--adm-value);color:var(--text)}
:root[data-palette="admin"] .adm-val{min-width:0;overflow-wrap:anywhere}
:root[data-palette="admin"] .adm-val.is-empty{color:var(--text-3);font-weight:400}
:root[data-palette="admin"] .adm-val a{color:var(--text);text-decoration:none}
:root[data-palette="admin"] .adm-val a:hover{text-decoration:underline;text-underline-offset:3px}
:root[data-palette="admin"] .adm-val.is-big{font:var(--adm-stat);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
:root[data-palette="admin"] .adm-val.is-big small{margin-left:2px;font:500 13px/1 var(--font-ui);color:var(--text-3)}
:root[data-palette="admin"] .adm-val form{display:inline}
:root[data-palette="admin"] .adm-act{flex:none;display:inline-grid;place-items:center;width:var(--adm-btn-h);height:var(--adm-btn-h);margin:calc((var(--adm-btn-h) - 24px) / -2) 0;border:0;border-radius:var(--r-1);background:none;color:var(--tile-blue);cursor:pointer;text-decoration:none}
:root[data-palette="admin"] .adm-act:hover{background:var(--surface-2)}
:root[data-palette="admin"] .adm-act.is-static{cursor:default;color:var(--text-3)}
:root[data-palette="admin"] .adm-act.is-static:hover{background:none}

/* -- in-card tabs: the shell's .adm-tabs underline, reset for a card -- */
:root[data-palette="admin"] .adm-tabs.is-card{flex-wrap:wrap;column-gap:var(--s-5);row-gap:0;overflow:visible;padding:0;margin-bottom:var(--adm-stack)}
:root[data-palette="admin"] .adm-tabs.is-card [role="tab"]{flex:none;min-height:var(--adm-btn-h);padding:0;border:0;background:none;cursor:pointer;color:var(--text-2);font:600 13px/1.2 var(--font-ui);white-space:nowrap;box-shadow:inset 0 -2px 0 transparent}
:root[data-palette="admin"] .adm-tabs.is-card [role="tab"]:hover{color:var(--text)}
:root[data-palette="admin"] .adm-tabs.is-card [role="tab"][aria-selected="true"]{color:var(--text);box-shadow:inset 0 -2px 0 var(--accent-ink)}
:root[data-palette="admin"] .adm-tabs.is-card .n{margin-left:4px;color:var(--text-3);font-variant-numeric:tabular-nums}
:root[data-palette="admin"] .adm-tabpanel{display:grid;gap:var(--adm-stack);grid-template-columns:minmax(0,1fr);min-width:0}
:root[data-palette="admin"] .adm-tabpanel .va-list{max-width:none}

/* -- tab row: in-card tabs with the card's action at the right -- */
:root[data-palette="admin"] .adm-tabrow{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-4);border-bottom:1px solid var(--border)}
:root[data-palette="admin"] .adm-tabrow>.adm-tabs.is-card{flex:1 1 auto;min-width:0;margin:0;border-bottom:0}
:root[data-palette="admin"] .adm-tabrow>.btn{margin-left:auto}
@media(max-width:639px){:root[data-palette="admin"] .adm-tabrow>.btn{order:-1}}

/* -- roster table: the People and access tabs. Desktop: a quiet table;
   phones: the kit's table.collapsing turns rows into cards. -- */
:root[data-palette="admin"] .adm-roster{width:100%;border-collapse:collapse}
:root[data-palette="admin"] .adm-roster thead th{padding:var(--s-3) var(--s-3) var(--s-2);font:var(--adm-label)}
:root[data-palette="admin"] .adm-roster thead th.num{text-align:right}
:root[data-palette="admin"] .adm-roster tbody td{padding:var(--s-3);font:500 13px/1.4 var(--font-ui);color:var(--text-2);vertical-align:middle}
:root[data-palette="admin"] .adm-roster tbody td:first-child{font-weight:500;color:var(--text)}
:root[data-palette="admin"] .adm-roster tbody tr:hover{background:var(--surface-inset)}
:root[data-palette="admin"] .adm-roster td.num{text-align:right;font-variant-numeric:tabular-nums}
:root[data-palette="admin"] .adm-roster .is-quiet{color:var(--text-3);font-weight:400}
:root[data-palette="admin"] .adm-roster .person{gap:var(--s-3)}
:root[data-palette="admin"] .adm-roster .person .avatar{width:36px;height:36px;overflow:hidden;background:var(--surface-2);color:var(--text-2)}
:root[data-palette="admin"] .adm-roster .person .avatar.is-skp{background:var(--text);color:var(--bg)}
:root[data-palette="admin"] .adm-roster .person .avatar img{width:100%;height:100%;object-fit:cover}
:root[data-palette="admin"] .adm-roster .person small{font:400 13px/1.35 var(--font-ui)}
:root[data-palette="admin"] .adm-person{font:600 14px/1.3 var(--font-ui);color:var(--text);text-decoration:none}
:root[data-palette="admin"] .adm-person:hover{text-decoration:underline;text-underline-offset:3px}
:root[data-palette="admin"] .adm-roster .sub{font-size:13px}
:root[data-palette="admin"] .adm-roster tr.group td,
:root[data-palette="admin"] .adm-roster tr.group:hover td{padding:var(--s-5) var(--s-3) var(--s-2);background:none;font:600 13px/1.3 var(--font-ui);letter-spacing:0;text-transform:none;color:var(--text-2)}
:root[data-palette="admin"] .adm-roster tr.group td>span{margin-right:var(--s-4)}
:root[data-palette="admin"] .adm-roster tr.group .adm-more{min-height:0;font-weight:500;color:var(--text-3)}
:root[data-palette="admin"] .adm-roster td.empty-cell{padding:var(--s-5) var(--s-3);color:var(--text-3)}
:root[data-palette="admin"] .adm-roster th.th-actions{width:56px}
:root[data-palette="admin"] .adm-roster .adm-tag{white-space:normal}
@media(max-width:639px){
  :root[data-palette="admin"] .card .table-scroll:has(.adm-roster){overflow:visible}
  :root[data-palette="admin"] .adm-roster.collapsing tbody{padding:var(--s-3) 0 0}
  :root[data-palette="admin"] .adm-roster.collapsing td[data-label]::before{font:var(--adm-label)}
  :root[data-palette="admin"] .adm-roster.collapsing tr.group,
  :root[data-palette="admin"] .adm-roster.collapsing tr.group:hover{border:0;box-shadow:none;background:none;padding:var(--s-2) 0 0;margin:0}
  :root[data-palette="admin"] .adm-roster.collapsing tr.group td{display:flex;flex-wrap:wrap;gap:var(--s-2);padding:0}
  :root[data-palette="admin"] .adm-roster.collapsing td.cell-person{padding-right:48px}
  :root[data-palette="admin"] .adm-roster.collapsing td.cell-actions{position:absolute;top:var(--s-3);right:var(--s-2);margin:0;padding:0;border:0}
  :root[data-palette="admin"] .adm-roster.collapsing td.is-hide-sm{display:none}
  :root[data-palette="admin"] .adm-roster.collapsing td.empty-cell{display:block}
}

/* -- side panel: a modal <dialog>, right side from 1024, full screen on
   phones. Native modal = focus stays inside, Esc closes. -- */
:root[data-palette="admin"] dialog.adm-drawer{position:fixed;inset:0;width:100%;max-width:100%;height:100%;max-height:100%;margin:0;padding:0;border:0;background:var(--surface);color:var(--text);box-shadow:var(--shadow-2);overflow:hidden}
:root[data-palette="admin"] dialog.adm-drawer[open]{display:flex;flex-direction:column}
:root[data-palette="admin"] dialog.adm-drawer::backdrop{background:rgba(11,14,22,.44)}
:root[data-palette="admin"] dialog.adm-drawer[open]{animation:adm-drawer-in var(--t-base) var(--ease)}
@keyframes adm-drawer-in{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){:root[data-palette="admin"] dialog.adm-drawer[open]{animation:none}}
@media(min-width:1024px){
  :root[data-palette="admin"] dialog.adm-drawer{left:auto;width:min(600px,92vw);border-left:1px solid var(--border)}
}
:root[data-palette="admin"] .adm-drawer-in{display:flex;flex-direction:column;flex:1;min-height:0}
:root[data-palette="admin"] .adm-drawer-h{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3) var(--adm-pad);border-bottom:1px solid var(--border)}
:root[data-palette="admin"] .adm-drawer-t{flex:1;min-width:0}
:root[data-palette="admin"] .adm-drawer-h h2{font:var(--adm-card-title);letter-spacing:-.01em}
:root[data-palette="admin"] .adm-drawer-h p{font:var(--adm-label);color:var(--text-3)}
:root[data-palette="admin"] .adm-drawer-h form{display:contents}
:root[data-palette="admin"] .adm-drawer-b{flex:1;min-height:0;overflow-y:auto;display:grid;gap:var(--adm-stack);align-content:start;padding:var(--adm-pad)}
:root[data-palette="admin"] .adm-drawer-b h3{font:var(--adm-card-title);letter-spacing:-.01em}
:root[data-palette="admin"] .adm-drawer-b>section{display:grid;gap:var(--s-3);min-width:0}
:root[data-palette="admin"] .adm-drawer-b>section+section{padding-top:var(--adm-stack);border-top:1px solid var(--border)}

/* -- compact table (3 to 5 rows); rows restack on phones -- */
:root[data-palette="admin"] .adm-mini{width:100%;border-collapse:collapse}
:root[data-palette="admin"] .adm-mini thead th{padding:0 var(--s-2) var(--s-2);border-bottom:1px solid var(--border);font:var(--adm-label)}
:root[data-palette="admin"] .adm-mini tbody td{padding:var(--s-3) var(--s-2);border-bottom:1px solid var(--border);font:500 13px/1.4 var(--font-ui);color:var(--text-2);vertical-align:middle}
:root[data-palette="admin"] .adm-mini tbody td:first-child{font-weight:500;color:var(--text-2)}
:root[data-palette="admin"] .adm-mini tbody tr:last-child td{border-bottom:0}
:root[data-palette="admin"] .adm-mini tbody tr:hover{background:none}
:root[data-palette="admin"] .adm-mini .is-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--text)}
:root[data-palette="admin"] .adm-mini .is-main{color:var(--text);min-width:0;overflow-wrap:anywhere}
@media(max-width:639px){
  :root[data-palette="admin"] .adm-mini thead{display:none}
  :root[data-palette="admin"] .adm-mini tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px var(--s-3);padding:var(--s-3) 0;border-bottom:1px solid var(--border)}
  :root[data-palette="admin"] .adm-mini tbody tr:last-child{border-bottom:0}
  :root[data-palette="admin"] .adm-mini tbody td{padding:0;border:0}
  :root[data-palette="admin"] .adm-mini tbody td.is-main{grid-column:1;grid-row:1}
  :root[data-palette="admin"] .adm-mini tbody td.is-num{grid-column:2;grid-row:1}
  :root[data-palette="admin"] .adm-mini tbody td.is-meta{grid-column:1;grid-row:2;color:var(--text-3)}
  :root[data-palette="admin"] .adm-mini tbody td.is-state{grid-column:2;grid-row:2;text-align:right}
  :root[data-palette="admin"] .adm-mini tbody td.is-hide-sm{display:none}
}
:root[data-palette="admin"] .adm-more{display:inline-flex;align-items:center;gap:6px;min-height:var(--adm-btn-h);padding:0;border:0;background:none;cursor:pointer;color:var(--text);font:600 13px/1 var(--font-ui);text-decoration:none}
:root[data-palette="admin"] .adm-more:hover{text-decoration:underline;text-underline-offset:3px}

/* -- quiet rows (integrations, roles, scheduled sends) -- */
:root[data-palette="admin"] .adm-list{display:grid;list-style:none}
:root[data-palette="admin"] .adm-list>li{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);min-width:0;padding:10px 0;border-bottom:1px solid var(--border);font:500 13px/1.4 var(--font-ui);color:var(--text-2)}
:root[data-palette="admin"] .adm-list>li:last-child{border-bottom:0}
:root[data-palette="admin"] .adm-list-name{display:flex;align-items:center;gap:var(--s-2);min-width:0;color:var(--text);font-weight:600}
:root[data-palette="admin"] .adm-list-name>span{min-width:0;overflow-wrap:anywhere}
:root[data-palette="admin"] .adm-list-name svg{flex:none;color:var(--text-3)}
:root[data-palette="admin"] .adm-list small{display:block;font:400 13px/1.35 var(--font-ui);color:var(--text-3)}
:root[data-palette="admin"] .adm-list>li{flex-wrap:wrap}
:root[data-palette="admin"] .adm-list>li>small{flex-basis:100%;margin-top:-6px}
:root[data-palette="admin"] .adm-field .sub,
:root[data-palette="admin"] .adm-swatch .sub{display:block;font:400 13px/1.35 var(--font-ui);color:var(--text-3)}
:root[data-palette="admin"] .adm-tabpanel .va-kind{font:600 13px/1.2 var(--font-ui);letter-spacing:0;text-transform:none}
@media(min-width:640px){:root[data-palette="admin"] .adm-mini td.is-meta{white-space:nowrap}}
:root[data-palette="admin"] .adm-list .is-num{font-variant-numeric:tabular-nums;color:var(--text);font-weight:600;white-space:nowrap}

/* -- activity feed: icon, what happened, who and when, a tag -- */
:root[data-palette="admin"] .adm-feed{display:grid;list-style:none}
:root[data-palette="admin"] .adm-feed>li{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:var(--s-2) var(--s-3);align-items:start;padding:10px 0;border-bottom:1px solid var(--border)}
:root[data-palette="admin"] .adm-feed>li:last-child{border-bottom:0}
:root[data-palette="admin"] .adm-feed>li>svg{margin-top:2px;color:var(--text-3)}
:root[data-palette="admin"] .adm-feed p{font:500 13px/1.4 var(--font-ui);color:var(--text);overflow-wrap:anywhere}
:root[data-palette="admin"] .adm-feed .adm-when{font:400 13px/1.35 var(--font-ui);color:var(--text-3)}
:root[data-palette="admin"] .adm-feed button.adm-reuse{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;text-align:left;color:inherit;font:inherit}

/* -- mobile app store marks, muted until an app exists -- */
:root[data-palette="admin"] .adm-stores{display:flex;gap:var(--s-2);flex-wrap:wrap}
:root[data-palette="admin"] .adm-store{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 var(--s-3);border:1px solid var(--border);border-radius:var(--r-2);background:var(--surface-2);color:var(--text-3);font:600 13px/1 var(--font-ui)}

/* -- brand furniture, sparkline, intake meter -- */
:root[data-palette="admin"] .adm-swatches{display:flex;flex-wrap:wrap;gap:var(--s-3)}
:root[data-palette="admin"] .adm-swatch{display:inline-flex;align-items:center;gap:var(--s-2);font:500 13px/1.3 var(--font-ui);color:var(--text-2)}
:root[data-palette="admin"] .adm-swatch svg{flex:none;border-radius:var(--r-1);outline:1px solid var(--border);outline-offset:-1px}
:root[data-palette="admin"] .adm-brandlogo{display:grid;place-items:center;width:64px;height:64px;padding:6px;border:1px solid var(--border);border-radius:var(--r-2);background:var(--surface-2)}
:root[data-palette="admin"] .adm-brandlogo img{max-width:100%;max-height:100%;object-fit:contain}
:root[data-palette="admin"] .adm-spark{display:block;width:100%;height:44px;color:var(--tile-violet)}
:root[data-palette="admin"] .adm-meter{display:block;width:100%;height:8px;border:0;border-radius:var(--r-1);background:var(--surface-2);overflow:hidden;appearance:none}
:root[data-palette="admin"] .adm-meter::-webkit-progress-bar{background:var(--surface-2)}
:root[data-palette="admin"] .adm-meter::-webkit-progress-value{background:var(--accent)}
:root[data-palette="admin"] .adm-meter::-moz-progress-bar{background:var(--accent)}
:root[data-palette="admin"] .adm-delta{font:600 13px/1.3 var(--font-ui);color:var(--text-3)}
:root[data-palette="admin"] .adm-delta.is-up{color:var(--ok)}
:root[data-palette="admin"] .adm-delta.is-down{color:var(--danger)}

/* -- usage stat (adm_usage_stat): value, a small chart, a sub line; the
   empty state is a faint placeholder chart so untracked stats still read
   as designed. Charts are inline SVG in kit tile colors. -- */
:root[data-palette="admin"] .adm-usages{display:grid;gap:var(--adm-stack) var(--s-6);grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:1280px){:root[data-palette="admin"] .adm-usages{grid-template-columns:repeat(4,minmax(0,1fr))}}
:root[data-palette="admin"] .adm-usages.is-2{grid-template-columns:repeat(2,minmax(0,1fr))}
:root[data-palette="admin"] .adm-usage{display:grid;gap:6px;align-content:start;min-width:0;color:var(--tile-violet)}
:root[data-palette="admin"] .adm-usage.is-blue{color:var(--tile-blue)}
:root[data-palette="admin"] .adm-usage.is-green{color:var(--tile-green)}
:root[data-palette="admin"] .adm-usage.is-orange{color:var(--tile-orange)}
:root[data-palette="admin"] .adm-usage dt{font:var(--adm-label);color:var(--text-3)}
:root[data-palette="admin"] .adm-usage-v{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;font:var(--adm-stat);letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--text)}
:root[data-palette="admin"] .adm-usage-v small{font:500 13px/1 var(--font-ui);letter-spacing:0;color:var(--text-3)}
:root[data-palette="admin"] .adm-usage-v.is-empty{font:600 14px/1.35 var(--font-ui);letter-spacing:0;color:var(--text-3)}
:root[data-palette="admin"] .adm-usage-v .adm-delta{font:600 13px/1.2 var(--font-ui);letter-spacing:0}
:root[data-palette="admin"] .adm-usage-spark{display:block;width:100%;height:40px;overflow:visible}
:root[data-palette="admin"] .adm-usage-spark .line{fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
:root[data-palette="admin"] .adm-usage-spark .area{fill:currentColor;opacity:.14}
:root[data-palette="admin"] .adm-usage-spark .base{stroke:var(--border-strong);stroke-width:1;vector-effect:non-scaling-stroke}
:root[data-palette="admin"] .adm-usage-spark .ghost{fill:none;stroke:var(--border-strong);stroke-width:2;stroke-dasharray:4 5;stroke-linejoin:round;vector-effect:non-scaling-stroke}
:root[data-palette="admin"] .adm-usage-bar{display:block;width:100%;height:8px;border-radius:var(--r-1);overflow:hidden}
:root[data-palette="admin"] .adm-usage-bar.is-thin{height:6px}
:root[data-palette="admin"] .adm-usage-bar .track{fill:var(--surface-2)}
:root[data-palette="admin"] .adm-usage-bar .is-1,
:root[data-palette="admin"] .adm-usage-legend .is-1{fill:currentColor;background:currentColor}
:root[data-palette="admin"] .adm-usage-bar .is-2,
:root[data-palette="admin"] .adm-usage-legend .is-2{fill:var(--tile-blue);background:var(--tile-blue)}
:root[data-palette="admin"] .adm-usage-bar .is-3,
:root[data-palette="admin"] .adm-usage-legend .is-3{fill:var(--tile-green);background:var(--tile-green)}
:root[data-palette="admin"] .adm-usage-bar .is-4,
:root[data-palette="admin"] .adm-usage-legend .is-4{fill:var(--tile-orange);background:var(--tile-orange)}
:root[data-palette="admin"] .adm-usage.is-blue .adm-usage-bar .is-2,
:root[data-palette="admin"] .adm-usage.is-blue .adm-usage-legend .is-2{fill:var(--tile-violet);background:var(--tile-violet)}
:root[data-palette="admin"] .adm-usage-legend{display:flex;flex-wrap:wrap;gap:2px var(--s-3);margin-top:6px;list-style:none;font:400 13px/1.35 var(--font-ui);color:var(--text-3)}
:root[data-palette="admin"] .adm-usage-legend li{display:inline-flex;align-items:center;gap:6px}
:root[data-palette="admin"] .adm-usage-legend i{flex:none;width:8px;height:8px;border-radius:2px}
:root[data-palette="admin"] .adm-usage-legend b{font-weight:600;color:var(--text-2);font-variant-numeric:tabular-nums}
:root[data-palette="admin"] .adm-usage-cost{font:600 13px/1.3 var(--font-ui);color:var(--text-2)}
:root[data-palette="admin"] .adm-usage-s{font:var(--adm-label);color:var(--text-3)}
:root[data-palette="admin"] .adm-usage-block{padding-top:var(--adm-stack);border-top:1px solid var(--border)}
:root[data-palette="admin"] .adm-ring{flex:none;overflow:visible}
:root[data-palette="admin"] .adm-ring .track{fill:none;stroke:var(--surface-2);stroke-width:4}
:root[data-palette="admin"] .adm-ring .fill{fill:none;stroke:var(--tile-violet);stroke-width:4;stroke-linecap:round;transform:rotate(-90deg);transform-origin:18px 18px}
:root[data-palette="admin"] .adm-ring text{font:700 13px/1 var(--font-ui);fill:var(--text)}

/* -- round 5 (docs/redesign/phase43-round5-brief.md) --
   .adm-cols.is-2x2   four cards, two columns from 768, every row the same
                      height (the equal-height rule across the whole 2x2)
   .adm-code          a code or id: monospace (join code, Stripe account)
   .adm-bignums       big color-coded counts (Communities and groups)
   .adm-feat          the Features line: ring, names, Manage
   .adm-list-act      a row's own action under its note (Integrations) -- */
@media(min-width:768px){
  :root[data-palette="admin"] .adm-cols.is-2x2{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr}
}
:root[data-palette="admin"] .adm-code{padding:2px 6px;border-radius:var(--r-1);background:var(--surface-2);color:var(--text);font:500 13px/1.4 var(--font-code);overflow-wrap:anywhere}
:root[data-palette="admin"] .adm-join{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2)}
:root[data-palette="admin"] .adm-bignums{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3)}
:root[data-palette="admin"] .adm-bignum{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:var(--adm-label-gap);min-width:0;padding:var(--s-3) var(--s-4);border-radius:var(--r-2);background:var(--tile-violet-bg)}
:root[data-palette="admin"] .adm-bignum dd{font:600 32px/1.1 var(--font-ui);letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--tile-violet);overflow-wrap:anywhere}
:root[data-palette="admin"] .adm-bignum dt{font:var(--adm-label);color:var(--text-2)}
:root[data-palette="admin"] .adm-bignum.is-blue{background:var(--tile-blue-bg)}
:root[data-palette="admin"] .adm-bignum.is-blue dd{color:var(--tile-blue)}
:root[data-palette="admin"] .adm-bignum.is-green{background:var(--tile-green-bg)}
:root[data-palette="admin"] .adm-bignum.is-green dd{color:var(--tile-green)}
:root[data-palette="admin"] .adm-bignum.is-orange{background:var(--tile-orange-bg)}
:root[data-palette="admin"] .adm-bignum.is-orange dd{color:var(--tile-orange)}
:root[data-palette="admin"] .adm-feat{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--s-3);padding-top:var(--adm-stack);border-top:1px solid var(--border)}
:root[data-palette="admin"] .adm-feat-t{display:grid;gap:2px;min-width:0;font:var(--adm-label);color:var(--text-3)}
:root[data-palette="admin"] .adm-feat-t b{font:600 14px/1.3 var(--font-ui);color:var(--text)}
:root[data-palette="admin"] .adm-feat-t span{overflow-wrap:anywhere}
:root[data-palette="admin"] .adm-list .adm-tag{white-space:normal;overflow-wrap:anywhere;text-align:left}
:root[data-palette="admin"] .adm-list>li>.adm-list-act{flex-basis:100%;display:flex;gap:var(--s-2)}

/* an in-page link glides to its card; still for reduced motion */
@media(prefers-reduced-motion:no-preference){:root[data-palette="admin"]{scroll-behavior:smooth}}

/* -- the Actions menu button, and the danger zone -- */
:root[data-palette="admin"] .kebab>.btn-secondary{background:var(--surface);border:1px solid var(--border-strong);color:var(--text);letter-spacing:0}
:root[data-palette="admin"] .adm-danger{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--adm-stack);padding:var(--adm-pad);border:1px solid color-mix(in srgb,var(--danger) 30%,var(--border));border-radius:var(--r-2);background:var(--danger-bg)}
:root[data-palette="admin"] .adm-danger h2{font:var(--adm-card-title);color:var(--danger)}
:root[data-palette="admin"] .adm-danger p{font:var(--adm-label);color:var(--text-2);max-width:72ch}
:root[data-palette="admin"] .adm-danger form{display:contents}

/* -- round 6 (docs/redesign/phase43-round6-brief.md) --
   .adm-actrow   one thing a Super Admin can do: label, current value, a
                 short sub line, one action; the row opens into its small
                 form in place (.adm-actrow-edit) and closes on Cancel.
   .adm-seg      pick one of two or three, each option a form-posting
                 button; the pressed one is the current value.
   .adm-nums     three short number fields side by side at every width.
   .adm-reqs     a wrap row of adm_code chips (Stripe's missing items).
   drawer head   a tag under the title (adm_drawer_head(..., tag=)).
   (verbatim from docs/redesign/round6/payments-mock.html, PROPOSED)
   .adm-band     Client details as three titled groups: a title over a
                 hairline per group; 640 to 1279 Contact full width (.is-wide,
                 fields .is-pairs) with Club | Access under it; 1280+ three
                 columns, no vertical rules.
   .adm-logo-edit  the identity row's logo as a Change logo button with a
                 pencil badge (always on touch; hover and focus otherwise).
   .adm-logoedit, .adm-filebtn, .adm-logourl  the Branding drawer's Logo
                 section: preview, Upload, paste a link.
   .adm-drawer-form, .adm-drawer-f, .adm-form, .adm-frow, .adm-chipfield  a
                 drawer that is one form: sections in a scrolling body, the
                 action bar pinned under it (Edit client). -- */
:root[data-palette="admin"] .adm-drawer-h p{display:flex;flex-wrap:wrap;align-items:center;gap:4px var(--s-2)}

:root[data-palette="admin"] .adm-actrow{display:grid;gap:var(--s-3);min-width:0}
:root[data-palette="admin"] .adm-actrow+.adm-actrow{padding-top:var(--adm-stack);border-top:1px solid var(--border)}
:root[data-palette="admin"] .adm-actrow-h{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-4)}
:root[data-palette="admin"] .adm-actrow-t{flex:1 1 160px;display:grid;gap:2px;min-width:0}
:root[data-palette="admin"] .adm-actrow-l{font:var(--adm-label);color:var(--text-3)}
:root[data-palette="admin"] .adm-actrow-v{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-1) var(--s-2);min-width:0;font:var(--adm-value);color:var(--text);overflow-wrap:anywhere}
:root[data-palette="admin"] .adm-actrow-s{font:400 13px/1.4 var(--font-ui);color:var(--text-3);overflow-wrap:anywhere}
:root[data-palette="admin"] .adm-actrow-s .adm-code{font-size:13px}
:root[data-palette="admin"] .adm-actrow-s .is-now{font-weight:500;color:var(--text)}
:root[data-palette="admin"] .adm-actrow-s.is-bad{color:var(--danger)}
:root[data-palette="admin"] .adm-actrow-go{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2)}
:root[data-palette="admin"] .adm-actrow.is-open .adm-actrow-go{display:none}
:root[data-palette="admin"] .adm-actrow-edit{display:grid;gap:var(--s-4);padding:var(--s-4);border:1px solid var(--border);border-radius:var(--r-2);background:var(--surface-inset)}
:root[data-palette="admin"] .adm-actrow-edit .input{min-height:var(--adm-btn-h);padding:0 12px;background:var(--surface)}
:root[data-palette="admin"] .adm-actrow-edit .field label{margin-bottom:6px}
:root[data-palette="admin"] .adm-actrow-btns{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2)}
:root[data-palette="admin"] .adm-actrow-btns form{display:contents}
:root[data-palette="admin"] .adm-actrow-btns .adm-more{margin-left:auto}
:root[data-palette="admin"] .adm-actrow .adm-disclosure>summary{min-height:0;font-weight:500;color:var(--text-3)}
:root[data-palette="admin"] .adm-actrow .adm-disclosure .adm-list{margin-top:var(--s-1)}
:root[data-palette="admin"] .adm-reqs{display:flex;flex-wrap:wrap;gap:var(--s-1)}

:root[data-palette="admin"] .adm-nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3)}

:root[data-palette="admin"] .adm-seg{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:2px;padding:3px;border-radius:var(--r-2);background:var(--surface-2)}
:root[data-palette="admin"] .adm-seg form{display:contents}
:root[data-palette="admin"] .adm-seg button{min-height:calc(var(--adm-btn-h) - 6px);padding:0 var(--s-3);border:0;border-radius:calc(var(--r-2) - 3px);background:none;cursor:pointer;color:var(--text-2);font:500 13px/1.2 var(--font-ui);white-space:nowrap}
:root[data-palette="admin"] .adm-seg button:hover{color:var(--text)}
:root[data-palette="admin"] .adm-seg button[aria-pressed="true"]{background:var(--surface);color:var(--text);font-weight:600;box-shadow:var(--shadow-1)}
@media(max-width:639px){
  :root[data-palette="admin"] .adm-actrow-h>.adm-seg{flex:1 1 100%}
}

/* Client details: three titled groups (round 7). Each group a title over a
   hairline, then label-over-value fields at the reference's pitch. Phones:
   stacked. 640 to 1279: Contact full width (its fields a 2x2), Club |
   Access under it. 1280+: three equal columns, no vertical rules. */
:root[data-palette="admin"] .adm-band{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-6)}
:root[data-palette="admin"] .adm-band>.adm-group{display:grid;gap:var(--s-3);align-content:start;min-width:0}
:root[data-palette="admin"] .adm-band .adm-group-h{padding-bottom:var(--s-2);border-bottom:1px solid var(--border);font:600 13px/1.4 var(--font-ui);color:var(--text-2)}
:root[data-palette="admin"] .adm-band .adm-fields{gap:var(--s-4)}
:root[data-palette="admin"] .adm-band .adm-tags{gap:var(--s-2)}
:root[data-palette="admin"] .adm-band .selectwrap{max-width:320px}
@media(min-width:640px){
  :root[data-palette="admin"] .adm-band{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-8)}
  :root[data-palette="admin"] .adm-band>.is-wide{grid-column:1/-1}
  :root[data-palette="admin"] .adm-band .adm-fields.is-pairs{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s-8)}
}
@media(min-width:1024px){
  :root[data-palette="admin"] .adm-band .adm-fields{gap:var(--s-5)}
  :root[data-palette="admin"] .adm-band .selectwrap.sw-toolbar select{min-height:var(--adm-btn-h);padding-top:0;padding-bottom:0}
}
@media(min-width:1280px){
  :root[data-palette="admin"] .adm-band{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--s-10)}
  :root[data-palette="admin"] .adm-band>.is-wide{grid-column:auto}
  :root[data-palette="admin"] .adm-band .adm-fields.is-pairs{grid-template-columns:minmax(0,1fr)}
}

/* the identity row's logo: a Change logo button with a pencil badge */
:root[data-palette="admin"] .adm-logo-edit{position:relative;overflow:visible;padding:0;border:0;cursor:pointer}
:root[data-palette="admin"] .adm-logo-edit img{border-radius:inherit}
:root[data-palette="admin"] .adm-logo-edit:focus-visible{outline:2px solid var(--accent-ink);outline-offset:3px}
:root[data-palette="admin"] .adm-logo-pen{position:absolute;right:-2px;bottom:-2px;display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--border-strong);border-radius:var(--r-full);background:var(--surface);color:var(--text);box-shadow:var(--shadow-1);opacity:0;transition:opacity var(--t-fast) var(--ease)}
:root[data-palette="admin"] .adm-logo-edit:hover .adm-logo-pen,
:root[data-palette="admin"] .adm-logo-edit:focus-visible .adm-logo-pen{opacity:1}
@media(hover:none){:root[data-palette="admin"] .adm-logo-pen{opacity:1}}

/* the Branding drawer's Logo section */
:root[data-palette="admin"] .adm-logoedit{display:flex;align-items:center;gap:var(--s-4);min-width:0}
:root[data-palette="admin"] .adm-brandlogo.is-lg{flex:none;width:88px;height:88px}
:root[data-palette="admin"] .adm-brandlogo-none{font:700 22px/1 var(--font-ui);color:var(--text-3)}
:root[data-palette="admin"] .adm-filebtn{position:relative;gap:6px;cursor:pointer}
:root[data-palette="admin"] .adm-filebtn input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
:root[data-palette="admin"] .adm-filebtn:focus-within{outline:2px solid var(--accent-ink);outline-offset:2px}
:root[data-palette="admin"] .adm-logourl{display:grid;grid-template-columns:minmax(0,1fr);align-items:end;gap:var(--s-2)}
:root[data-palette="admin"] .adm-logourl .field label{margin-bottom:6px}
:root[data-palette="admin"] .adm-logourl .input{min-height:var(--adm-btn-h);padding:0 12px}
@media(min-width:480px){:root[data-palette="admin"] .adm-logourl{grid-template-columns:minmax(0,1fr) auto}}

/* the Edit drawer (round 7): a drawer that is one form. Grouped sections in
   a scrolling body, the action bar pinned under it.
   .adm-drawer-form  the form as the drawer's column: body scrolls, bar stays
   .adm-drawer-f     the pinned action bar (Save, Cancel)
   .adm-form         on .adm-drawer-b: form rhythm (labels, inputs, gaps)
   .adm-frow         a main field and a short one side by side from 640;
                     .is-keep stays side by side on phones (City | State)
   .field.is-code    the join code field: its input 240 px from 640, the
                     error under it full width
   .adm-chipfield    the sports toggle chips */
:root[data-palette="admin"] .adm-drawer-form{display:flex;flex-direction:column;flex:1;min-height:0}
:root[data-palette="admin"] .adm-drawer-f{flex:none;display:flex;align-items:center;gap:var(--s-2);padding:var(--s-3) var(--adm-pad);padding-bottom:max(var(--s-3),env(safe-area-inset-bottom));border-top:1px solid var(--border);background:var(--surface)}
:root[data-palette="admin"] .adm-drawer-f>.btn-primary{min-width:96px;justify-content:center}
@media(max-width:639px){:root[data-palette="admin"] .adm-drawer-f>.btn-primary{flex:1 1 auto}}

:root[data-palette="admin"] .adm-form{gap:var(--s-6);scroll-padding-block:var(--s-10)}
:root[data-palette="admin"] .adm-form>section{gap:var(--s-4)}
:root[data-palette="admin"] .adm-form>section+section{padding-top:var(--s-6)}
:root[data-palette="admin"] .adm-form .field>label,
:root[data-palette="admin"] .adm-form .adm-chipfield>legend{display:block;margin-bottom:var(--s-2);padding:0;font:500 13px/1.4 var(--font-ui);color:var(--text-2)}
:root[data-palette="admin"] .adm-form .input{min-height:var(--adm-btn-h);padding:0 var(--s-3)}
:root[data-palette="admin"] .adm-form textarea.input{padding:var(--s-2) var(--s-3)}
:root[data-palette="admin"] .adm-form .field>.hint{margin-top:var(--s-2);font:500 13px/1.4 var(--font-ui)}
:root[data-palette="admin"] .adm-frow{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-4)}
:root[data-palette="admin"] .adm-frow.is-keep{grid-template-columns:minmax(0,1fr) 112px}
@media(min-width:640px){
  :root[data-palette="admin"] .adm-frow,
  :root[data-palette="admin"] .adm-frow.is-keep{grid-template-columns:minmax(0,1fr) 180px}
  :root[data-palette="admin"] .adm-form .field.is-code>.input{max-width:240px}
}
@media(min-width:1024px){
  :root[data-palette="admin"] .adm-form>section{gap:var(--s-5)}
}
:root[data-palette="admin"] .adm-chipfield{min-width:0;margin:0;padding:0;border:0}
:root[data-palette="admin"] .adm-chipfield .chips{gap:var(--s-2)}
:root[data-palette="admin"] .adm-chipfield .chip-toggle span{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s-3)}
@media(min-width:1024px){:root[data-palette="admin"] .adm-chipfield .chip-toggle span{min-height:var(--adm-btn-h)}}
:root[data-palette="admin"] .adm-code-input{font-family:var(--font-code)}

/* ====== BASE PRIMITIVES ====== */
/* The kit OWNS the reset: every component was designed border-box.
   (Learned 2026-07-05: without this, input padding inflates heights
   ~30px and width:100% fields overflow their cards.) */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
[hidden]{display:none!important} /* hidden attr is HTML-only — SVGs need this to hide */

.label{font:700 11.5px/1.3 var(--font-ui);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-3)}
.data{font:500 14px/1.5 var(--font-ui);font-variant-numeric:tabular-nums}
:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--r-1)}

/* ====== 04 BUTTONS ====== */
.btnrow{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center;margin-bottom:var(--s-5)}
.btn{
  appearance:none;border:1px solid transparent;cursor:pointer;
  font:700 13.5px/1 var(--font-ui);letter-spacing:.01em;
  padding:0 18px;min-height:44px;border-radius:var(--r-1);
  display:inline-flex;align-items:center;gap:8px;
  transition:transform var(--t-fast) var(--ease),background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),opacity var(--t-fast) var(--ease);
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--text);color:var(--bg)}
.btn-primary:hover{opacity:.88}
.btn-secondary{background:var(--surface);border-color:var(--border-strong);color:var(--text)}
.btn-secondary:hover{border-color:var(--text-3)}
.btn-accent{background:var(--accent);color:var(--on-accent)}
.btn-accent:hover{opacity:.9}
.btn-ghost{background:transparent;color:var(--text-2)}
.btn-ghost:hover{background:var(--surface-2);color:var(--text)}
.btn-danger{background:transparent;border-color:color-mix(in srgb,var(--danger) 45%,transparent);color:var(--danger)}
.btn-danger:hover{background:var(--danger-bg)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn-sm{min-height:36px;padding:0 14px;font-size:13px} /* the 13 px floor (Lance 09-29; was 12.5, passkeys spec 14.7) */
.btn-lg{min-height:52px;padding:0 26px;font-size:15px}
/* ====== 05 INPUTS + DESIGNED SELECTS ====== */
.formgrid{display:grid;gap:var(--s-6);max-width:560px}
.field label{display:block;font:700 13px/1 var(--font-ui);margin-bottom:var(--s-2)}
.field .hint{font-size:13px;color:var(--text-3);margin-top:var(--s-2)}
.input,select.input,textarea.input{
  width:100%;background:var(--surface);color:var(--text);
  border:1px solid var(--border-strong);border-radius:var(--r-1);
  font:500 15px/1.4 var(--font-ui);padding:14px 14px;min-height:var(--tap-min);
  transition:border-color var(--t-fast) var(--ease);
}
.input::placeholder{color:var(--text-3);font-weight:400}
.input.is-file{padding:6px}
.input:hover{border-color:var(--text-3)}
.input:focus{outline:none;border-color:var(--text);box-shadow:0 0 0 1px var(--text)}  /* one 2px line, no gap (Lance 09-28) */
.field.invalid .input{border-color:var(--danger)}
.field.invalid .input:focus{box-shadow:0 0 0 1px var(--danger)}
/* password show/hide */
.pwwrap{position:relative;display:block}
.pwwrap .input{padding-right:52px}
.pwtoggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:none;cursor:pointer;color:var(--text-3);padding:10px;border-radius:var(--r-1);min-height:40px;display:flex;align-items:center}
.pwtoggle:hover{color:var(--text);background:var(--surface-2)}
.field.invalid .hint{color:var(--danger)}
/* selects: no UA chrome, token chevron, REAL right padding */
.selectwrap{position:relative;display:block}
.selectwrap select{appearance:none;-webkit-appearance:none;padding-right:46px;cursor:pointer;width:100%}
.selectwrap::after{
  content:"";position:absolute;right:17px;top:50%;
  width:9px;height:9px;pointer-events:none;
  border-right:2px solid var(--text-2);border-bottom:2px solid var(--text-2);
  transform:translateY(-70%) rotate(45deg);
}
.selectwrap.sw-toolbar select{min-height:44px;padding-top:10px;padding-bottom:10px;font-size:14px}
/* custom listbox (design direction for the open state — future htmx/JS module) */
.listbox{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-2);box-shadow:var(--shadow-2);min-width:220px;padding:6px;display:inline-block;text-align:left}
.listbox a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 12px;font:600 14px var(--font-ui);color:var(--text);text-decoration:none;border-radius:var(--r-1)}
.listbox a:hover{background:var(--surface-2)}
.listbox a.selected{color:var(--accent-ink)}
.listbox a.selected::after{content:"✓";font-weight:800}
.check{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--text-2);min-height:var(--tap-min);padding:var(--s-2) 0;cursor:pointer}
.check input{accent-color:var(--accent);width:20px;height:20px;margin-top:2px;flex:none}
.switch{position:relative;display:inline-flex;align-items:center;gap:12px;cursor:pointer;font-size:15px;color:var(--text-2);min-height:var(--tap-min)}
/* switchrow — a settings row whose whole surface is the switch's label */
.switch.is-row{display:flex;width:100%;gap:var(--s-3);min-height:64px;padding:var(--s-3) var(--s-4);font-size:inherit;color:inherit;box-sizing:border-box}
.switch.is-row .switch-body{flex:1;min-width:0}
.switch-title{display:block;font:600 15px var(--font-ui)}
.switch-note{display:block;font:400 13px/1.45 var(--font-ui);color:var(--text-3);margin-top:2px}
.switch.is-disabled{cursor:default}
.switch.is-disabled .switch-title,.switch.is-disabled .switch-note{opacity:.5}
.switch input{position:absolute;opacity:0;pointer-events:none}
.switch .track{width:44px;height:24px;border-radius:var(--r-full);background:var(--border-strong);transition:background var(--t-fast) var(--ease);flex:none}
.switch .track::after{content:"";display:block;width:18px;height:18px;border-radius:var(--r-full);background:var(--surface);margin:3px;transition:transform var(--t-fast) var(--ease);box-shadow:var(--shadow-1)}
.switch input:checked + .track{background:var(--accent)}
.switch input:checked + .track::after{transform:translateX(20px)}
.switch input:focus-visible + .track{box-shadow:var(--focus-ring)}
.switch.sw-sm{min-height:0}
.switch.sw-sm .track{width:36px;height:20px}
.switch.sw-sm .track::after{width:14px;height:14px}
.switch.sw-sm input:checked + .track::after{transform:translateX(16px)}
/* ====== 06 SURFACES ====== */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-2);box-shadow:var(--shadow-1)}
.card .card-h{padding:var(--s-5) var(--s-5);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:var(--s-3)}
@media(min-width:640px){.card .card-h{padding:var(--s-5) var(--s-6)}}
.card .card-h h3{font-size:15px;font-weight:700;letter-spacing:-.01em}
.card .card-b{padding:var(--s-5)}
@media(min-width:640px){.card .card-b{padding:var(--s-6)}}
.grid-2{display:grid;gap:var(--s-6)}
@media(min-width:768px){.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.grid-3{display:grid;gap:var(--s-6)}
@media(min-width:768px){.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}}

.table-scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
/* table labels (the th here, the collapsed card's label in 07) sit at the
   13 px floor in sentence case with no tracking: Lance's Gate 4.2 ruling
   (09-29) for every label; weight and --text-3 keep them reading as labels */
thead th{text-align:left;font:600 13px/1.3 var(--font-ui);color:var(--text-3);padding:var(--s-4) var(--s-4) var(--s-3);border-bottom:1px solid var(--border);white-space:nowrap}
tbody td{padding:var(--s-4) var(--s-4);border-bottom:1px solid var(--border);color:var(--text-2)}
tbody td:first-child{color:var(--text);font-weight:600}
tbody tr:hover{background:var(--surface-2)}
tbody tr:last-child td{border-bottom:none}
td.num{font-variant-numeric:tabular-nums;text-align:right;font-weight:500}
.pager{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3) var(--s-5);border-top:1px solid var(--border);color:var(--text-3);font-size:13px}
.pager .btn{margin-left:auto}

.badge{display:inline-flex;align-items:center;gap:6px;font:700 11px/1 var(--font-ui);letter-spacing:.05em;padding:5px 9px;border-radius:var(--r-1);white-space:nowrap}
.badge i{width:6px;height:6px;border-radius:var(--r-full);background:currentColor}
.badge.ok{color:var(--ok);background:var(--ok-bg)}
.badge.warn{color:var(--warn);background:var(--warn-bg)}
.badge.danger{color:var(--danger);background:var(--danger-bg)}
.badge.info{color:var(--info);background:var(--info-bg)}
.badge.neutral{color:var(--text-2);background:var(--surface-2)}
.badge.accent{color:var(--accent-ink);background:color-mix(in srgb,var(--accent) 12%,var(--surface))}
/* count-pill: a bare number riding a nav item or heading (the sidebar's
   Attention / Community counts). Stays `inline` like the text it trails —
   do NOT give it a display. (7.2 FB4-K2) */
.count-pill{background:var(--warn,#F59E0B);color:var(--ink,#0F0F14);font:800 10.5px/1 var(--font-ui);padding:3px 7px;border-radius:99px}

.kpi{font-weight:800;font-size:36px;line-height:1.1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kpi .delta{color:var(--accent-ink);font-size:14px;font-weight:800;vertical-align:middle}
/* KPI tile rhythm — the skp.kpi macro's structure (label / value / note).
   These were two hard-coded inline styles per tile, which capped every
   KPI page's inline-style count at >0 forever. The note half is declared
   with its pre-existing `.xkpi-note` twin below — one declaration, two
   names, never a third copy. (7.2 FB4-K1) */
.kpi-tile>.kpi{margin-top:8px}
.chart-axis{font:600 10.5px var(--font-ui);fill:var(--text-3);letter-spacing:.04em}
.chart-val{font:700 11px var(--font-ui);fill:var(--text-2);font-variant-numeric:tabular-nums}
/* h-bars */
.hbar{display:grid;grid-template-columns:minmax(110px,160px) 1fr 48px;gap:12px;align-items:center;padding:9px 0;font-size:13.5px}
.hbar .track{height:12px;background:var(--surface-2);border-radius:3px;overflow:hidden}
.hbar .fill{height:100%;background:var(--accent);border-radius:3px}
.hbar .val{text-align:right;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text-2);font-size:12.5px}
.hbar span:first-child{color:var(--text-2);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* legend */
.legend{display:flex;flex-direction:column;gap:8px;font-size:13px}
.legend div{display:flex;align-items:center;gap:8px;color:var(--text-2)}
.legend i{width:10px;height:10px;border-radius:2px;flex:none}
.legend b{margin-left:auto;font-variant-numeric:tabular-nums}
/* spark kpis */
.sparkrow{display:grid;gap:1px;background:var(--border);grid-template-columns:1fr}
@media(min-width:640px){.sparkrow{grid-template-columns:repeat(3,1fr)}}
.spark{background:var(--surface);padding:var(--s-5) var(--s-6)}
.spark .v{font-weight:800;font-size:22px;letter-spacing:-.01em;font-variant-numeric:tabular-nums;margin-top:4px}
.spark .d{font-size:12px;font-weight:700;margin-left:6px}
.spark .d.up{color:var(--ok)}.spark .d.down{color:var(--danger)}
.spark svg{display:block;margin-top:8px}
/* ====== 07 TABLES ====== */
.toolbar{display:flex;gap:var(--s-3);padding:var(--s-4) var(--s-5);border-bottom:1px solid var(--border);flex-wrap:wrap;align-items:center}
.toolbar .input{max-width:320px;min-height:44px;padding-top:10px;padding-bottom:10px;font-size:14px}
.toolbar .selectwrap{max-width:250px;min-width:170px}
.filterchip{display:inline-flex;align-items:center;gap:8px;font:600 12.5px/1 var(--font-ui);padding:9px 12px;border:1px solid var(--border-strong);border-radius:var(--r-1);background:var(--surface);color:var(--text-2)}
.filterchip button{border:0;background:none;color:var(--text-3);cursor:pointer;font-size:14px;line-height:1;padding:2px}
.filterchip button:hover{color:var(--danger)}
.bulkbar{display:flex;align-items:center;gap:var(--s-4);padding:var(--s-3) var(--s-5);background:color-mix(in srgb,var(--accent) 8%,var(--surface));border-bottom:1px solid var(--border);font-size:13.5px;font-weight:600;color:var(--accent-ink);flex-wrap:wrap}
.bulkbar .sep{color:var(--border-strong)}
.bulkbar a{color:var(--accent-ink);text-decoration:none;font-weight:700;padding:6px 4px;display:inline-block}
.bulkbar a:hover{text-decoration:underline}
.bulkbar a.danger{color:var(--danger)}
th.sortable{cursor:pointer}
th.sortable .arr{color:var(--accent-ink);font-size:13px}
td .rowcheck,th .rowcheck{accent-color:var(--accent);width:18px;height:18px;display:block;cursor:pointer}
.person{display:flex;align-items:center;gap:10px;min-width:0}
.person>span:last-child{min-width:0;overflow:hidden}
.person .avatar{width:32px;height:32px;border-radius:var(--r-full);background:var(--accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center;font:700 12px var(--font-ui);flex:none}
.person .avatar.n2{background:#0369A1;color:#fff}.person .avatar.n3{background:#A94E08;color:#fff}.person .avatar.n4{background:#0B8A43;color:#fff}
.person small{display:block;font-size:12px;color:var(--text-3);font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
tr.selected{background:color-mix(in srgb,var(--accent) 6%,var(--surface))}
/* a row that exists but is switched off (draft video, retired plan) —
   readable, clearly secondary, never display:none (staff needs to see it) */
tr.is-off td{opacity:.55}
tr.selected:hover{background:color-mix(in srgb,var(--accent) 9%,var(--surface))}
.rowactions{display:flex;align-items:center;gap:4px;justify-content:flex-end}
.iconbtn{border:0;background:none;cursor:pointer;color:var(--text-3);font:600 12.5px var(--font-ui);padding:8px 10px;border-radius:var(--r-1);min-height:36px}
.iconbtn:hover{background:var(--surface-2);color:var(--text)}
.kebab{position:relative}
.kebab > button{border:0;background:none;cursor:pointer;color:var(--text-2);font-size:17px;font-weight:800;padding:6px 12px;border-radius:var(--r-1);min-height:36px;letter-spacing:1px}
.kebab > button:hover{background:var(--surface-2)}
.menu{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-2);box-shadow:var(--shadow-2);min-width:190px;padding:6px;text-align:left}
.menu a{display:block;padding:10px 12px;font:600 13.5px var(--font-ui);color:var(--text);text-decoration:none;border-radius:var(--r-1)}
.menu a:hover{background:var(--surface-2)}
.menu a.disabled{color:var(--text-3);cursor:not-allowed;font-weight:500;pointer-events:none}
.menu a.danger{color:var(--danger)}
.menu a.danger:hover{background:var(--danger-bg)}
.menu hr{border:0;border-top:1px solid var(--border);margin:6px 4px}
.menu .menu-note{display:block;padding:6px 12px 4px;font:500 12px var(--font-ui);color:var(--text-3)}
.menu.floating{position:fixed;z-index:90;box-shadow:var(--shadow-2)}  /* above the phone drawer (70) and switcher (80) */
/* inline edit */
.editing td{background:color-mix(in srgb,var(--accent) 5%,var(--surface))}
.score-in{width:64px;text-align:center;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r-1);font:600 14px var(--font-ui);padding:9px 6px;min-height:40px;font-variant-numeric:tabular-nums}
/* expandable rows */
tr.exp td:first-child button{margin-right:6px}
.expbtn{border:0;background:none;cursor:pointer;color:var(--text-3);font-size:12px;padding:4px 6px;border-radius:var(--r-1)}
.expbtn:hover{background:var(--surface-2);color:var(--text)}
tr.detail td{background:var(--surface-inset);padding:var(--s-5) var(--s-6)}
.detailgrid{display:grid;gap:var(--s-4);grid-template-columns:1fr}
@media(min-width:640px){.detailgrid{grid-template-columns:repeat(3,1fr)}}
.detailgrid .kv b{display:block;font:700 11px var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);margin-bottom:4px}
.detailgrid .kv span{font-size:13.5px;color:var(--text)}
/* dense + grouped */
table.dense td{padding:9px var(--s-4);font-size:13.5px}
tr.group td{background:var(--surface-2);font:700 11px var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);padding:7px var(--s-4);border-bottom:1px solid var(--border)}
tr.group td:first-child{color:var(--text-3)}
/* ====== REAL mobile collapse: same markup, CSS transforms it ====== */
table.collapsing{min-width:820px}
@media(max-width:639px){
  .card .table-scroll:has(.collapsing){overflow:visible}
  table.collapsing{min-width:0;display:block}
  table.collapsing thead{display:none}
  table.collapsing tbody{display:block;padding:var(--s-3)}
  table.collapsing tbody tr{
    display:block;position:relative;background:var(--surface);
    border:1px solid var(--border);border-radius:var(--r-2);
    padding:var(--s-4);margin-bottom:var(--s-3);box-shadow:var(--shadow-1);
  }
  table.collapsing tbody tr.selected{border-color:color-mix(in srgb,var(--accent) 45%,var(--border))}
  table.collapsing tbody tr:hover{background:var(--surface)}
  /* the collapse contract BEATS leftover desktop inline styles (nowrap /
     min-width) — a collapsed card must never widen the phone viewport */
  table.collapsing td{display:flex;justify-content:space-between;align-items:center;gap:12px;border:0;padding:9px 0;min-width:0!important;white-space:normal!important;overflow-wrap:anywhere}
  table.collapsing td>a{min-width:0;max-width:100%;overflow:hidden}
  /* the contract has to reach the td's CHILDREN too: a desktop-sized
     min-width on a child (e.g. a 210px progress tracker) overflowed the
     collapsed card and widened the document (/success was 117px over at
     390). No overflow:hidden here — it would clip focus rings. */
  table.collapsing td>*{min-width:0!important;max-width:100%}
  /* long badges (plan names, policy labels) wrap inside the card
     instead of widening it past the viewport */
  table.collapsing td .badge{white-space:normal;min-width:0}
  table.collapsing td[data-label]::before{
    content:attr(data-label);
    font:600 13px/1.35 var(--font-ui);color:var(--text-3);
  }
  table.collapsing td.cell-check{position:absolute;top:14px;right:14px;padding:0;width:auto}
  table.collapsing td.cell-person{padding-right:40px;border-bottom:1px solid var(--border);padding-bottom:12px;margin-bottom:2px}
  table.collapsing td.cell-actions{border-top:1px solid var(--border);margin-top:4px;padding-top:12px;justify-content:flex-end}
  table.collapsing td.num{text-align:left}
}
/* ====== 08 FEEDBACK ====== */
.toast-stack{position:fixed;top:calc(56px + var(--s-4));right:var(--s-4);display:flex;flex-direction:column;gap:var(--s-3);z-index:50}
@media(min-width:640px){.toast-stack{right:var(--s-6)}}
.toast{
  background:var(--text);color:var(--bg);
  border-radius:var(--r-2);box-shadow:0 10px 36px rgba(0,0,0,.28),0 2px 8px rgba(0,0,0,.18);
  padding:18px 20px;min-width:300px;max-width:400px;
  display:flex;gap:14px;align-items:flex-start;
  animation:toast-in .4s var(--ease);
}
.toast.leaving{opacity:0;transform:translateY(-10px);transition:all var(--t-base) var(--ease)}
@keyframes toast-in{from{opacity:0;transform:translateY(-14px) scale(.98)}to{opacity:1;transform:none}}
.toast .tick{flex:none;width:26px;height:26px;border-radius:var(--r-full);background:var(--accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;margin-top:1px}
.toast.pending .tick{background:color-mix(in srgb,var(--bg) 22%,transparent)}
.toast .spin{width:13px;height:13px;border-radius:var(--r-full);border:2px solid color-mix(in srgb,var(--bg) 45%,transparent);border-top-color:var(--bg);animation:skp-spin .7s linear infinite}
@keyframes skp-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.toast .spin{animation:none;border-top-color:color-mix(in srgb,var(--bg) 45%,transparent)}}
.toast.fail{cursor:pointer}
.toast.fail .tick{background:var(--warn);color:#fff}
.toast b{display:block;font-size:14.5px;font-weight:800;letter-spacing:-.01em}
.toast p{font-size:13.5px;color:color-mix(in srgb,var(--bg) 78%,transparent);margin-top:2px}
.empty{border:1px dashed var(--border-strong);border-radius:var(--r-2);padding:var(--s-10) var(--s-6);text-align:center;color:var(--text-2)}
.empty b{display:block;color:var(--text);font-weight:700;font-size:15px;margin-bottom:var(--s-1)}
.empty .btn{margin-top:var(--s-5)}
/* ====== 09 MODAL (native <dialog>) ============================
   Lance rule 2026-07-10: no browser alert()/confirm() ever. Forms
   declare data-skp-confirm="message" (+ optional data-skp-confirm-danger,
   data-skp-confirm-label="Verb") and ui-kit.js does the rest. */
dialog.skp-modal{
  margin:auto; /* the kit reset kills the UA's dialog centering — restore it */
  border:1px solid var(--border);border-radius:var(--r-2);padding:0;
  background:var(--surface);color:var(--text);
  width:min(420px, calc(100vw - 48px));
  box-shadow:0 24px 64px rgba(0,0,0,.28),0 4px 16px rgba(0,0,0,.14);
}
dialog.skp-modal::backdrop{background:rgba(10,10,15,.44);backdrop-filter:blur(2px)}
dialog.skp-modal[open]{animation:skp-modal-in .16s var(--ease)}
@keyframes skp-modal-in{from{opacity:0;transform:translateY(6px) scale(.985)}to{opacity:1;transform:none}}
.skp-modal .m-body{padding:22px 24px 6px}
.skp-modal .m-title{font:700 15.5px/1.35 var(--font-ui);letter-spacing:-.01em;margin-bottom:6px}
.skp-modal .m-msg{font:400 13.5px/1.55 var(--font-ui);color:var(--text-2)}
.skp-modal .m-actions{display:flex;justify-content:flex-end;gap:10px;padding:18px 24px 20px}
.skp-modal.danger .m-title{color:var(--danger)}

/* nav-item: sidebar link (promoted from mothership 2026-07-11 — the
   nav-group pattern references it, so the kit owns it now) */
.nav-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r-1,6px);font:600 13.5px/1 var(--font-ui,inherit);color:var(--text-2,#555);text-decoration:none;white-space:nowrap;min-height:40px}
.nav-item:hover{background:var(--surface-2,rgba(0,0,0,.04));color:var(--text,inherit)}
.nav-item.on{background:var(--accent,#0F0F14);color:var(--on-accent,#fff)}

/* ---- nav-group: collapsible sidebar section (native <details>) ----------
   Usage:
   <details class="nav-group" data-nav-group="finance" open>
     <summary>Finance</summary>
     <a class="nav-item" href="...">Child</a>
   </details>
   Server renders `open` when a child is active; ui-kit.js persists the
   user's toggle per data-nav-group in localStorage. No frameworks. */
.nav-group{margin:2px 0}
.nav-group>summary{display:flex;align-items:center;justify-content:space-between;cursor:pointer;list-style:none;padding:10px 12px;border-radius:var(--r-1,6px);font:700 10.5px/1 var(--font-ui,inherit);letter-spacing:.12em;text-transform:uppercase;color:var(--text-3,#888);user-select:none}
.nav-group>summary::-webkit-details-marker{display:none}
.nav-group>summary:hover{background:var(--surface-2,rgba(0,0,0,.04));color:var(--text-2,#555)}
.nav-group>summary::after{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .15s ease;flex-shrink:0}
.nav-group[open]>summary::after{transform:rotate(45deg)}
.nav-group>.nav-item{padding-left:24px}

/* nav-group easing — smooth open/close (Chromium 131+; graceful no-anim
   fallback elsewhere). interpolate-size lets height animate to auto. */
:root{interpolate-size:allow-keywords}
.nav-group::details-content{block-size:0;overflow:clip;opacity:0;transition:block-size .26s cubic-bezier(.4,0,.2,1),content-visibility .26s allow-discrete,opacity .2s ease}
.nav-group[open]::details-content{block-size:auto;opacity:1}

/* ====== 10 APP SHELL (promoted from mothership 2026-07-12 — Client HQ
   is the second wearer; every admin surface shares this chrome).
   The app's <head> still owns: body font/bg (one line) and its surface
   brand (--accent overrides). Sidebar collapses to a horizontal strip
   under 1024px. ====== */
.shell{display:grid;grid-template-columns:1fr;min-height:100vh}
@media(min-width:1024px){.shell{grid-template-columns:224px 1fr}}
.side{border-bottom:1px solid var(--border);padding:12px 16px;display:flex;align-items:center;gap:4px;overflow-x:auto;min-width:0}
@media(min-width:1024px){
  .side{border-bottom:0;border-right:1px solid var(--border);flex-direction:column;align-items:stretch;padding:20px 12px;gap:2px;position:sticky;top:0;height:100vh;overflow:visible}
}
.side .brandmark{font-family:var(--font-brand);font-style:italic;font-weight:800;font-size:16px;padding:6px 12px;margin-bottom:4px;white-space:nowrap}
@media(min-width:1024px){.side .brandmark{margin-bottom:20px}}
.side .brandmark small{font:700 10px var(--font-ui);letter-spacing:.08em;color:var(--text-3);display:block;font-style:normal}
.side .foot{margin-top:auto;display:none}
@media(min-width:1024px){.side .foot{display:block}}
/* Under 1024 the sidebar is a HORIZONTAL strip, so a nav-group must open
   ALONGSIDE its summary — never below it. Before this, an auto-opened
   group (the server opens the group owning the current page) stacked its
   children vertically and inflated the strip: main started at 260px on
   /users and 270px on /success against 81px on /clients — a dead band
   above the wordmark that moved with the route. The strip is now the
   SAME height whether or not a group is open; an open group's items just
   join the strip and scroll with it. Desktop keeps the vertical
   accordion, untouched. (parity 7.2 — A-5 / C-2) */
@media(max-width:1023px){
  /* …and the strip must not absorb the page's leftover height either:
     .shell is min-height:100vh with two AUTO rows, so on a short page
     (/staff, /plans) align-content stretched the nav row to 262px/155px
     of empty band. Pin the strip to its content; main takes the rest.
     minmax(0,…) per the layout law — never a bare 1fr. */
  .shell{grid-template-rows:auto minmax(0,1fr)}
  .side .nav-group{display:flex;align-items:center;gap:4px;margin:0}
  .side .nav-group>summary{white-space:nowrap}
  .side .nav-group>.nav-item{padding-left:12px}
  .side .nav-group::details-content{
    display:flex;align-items:center;gap:4px;
    block-size:auto;inline-size:0;overflow:clip;opacity:0;
    transition:inline-size .26s cubic-bezier(.4,0,.2,1),content-visibility .26s allow-discrete,opacity .2s ease}
  .side .nav-group[open]::details-content{inline-size:auto;opacity:1}
}
.main{min-width:0}
/* wrap under pressure: on phones the action cluster drops below the h1
   instead of pushing document scrollWidth past the viewport (390 check) */
.topbar{display:flex;align-items:center;gap:12px;padding:14px 24px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.topbar h1{font-weight:600;font-size:19px;letter-spacing:-.015em}
.topbar .right{margin-left:auto;display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end;min-width:0}
/* Data surfaces fill large monitors (Lance rule) — no width cap. */
.content{padding:24px}
@media(min-width:1800px){.content{padding:32px 40px}}
.kpis{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
@media(min-width:480px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.kpis{grid-template-columns:repeat(4,minmax(0,1fr))}}
a.plain{color:var(--accent-ink);text-decoration:none;font-weight:700}
a.plain:hover{text-decoration:underline}

/* ====== 10b ADMIN SHELL v2 (redesign Phase 3, docs/redesign/phase3-plan.md)
   The unified admin shell: switcher, one data-driven nav (nav/admin.json),
   tabs for an item's sub-areas, a drawer under 1024. Structure only: the
   reference look (tokens, type) lands in Phase 4. Every class is adm-
   prefixed so it cannot collide with the classic shell (section 10). ====== */
.adm{display:grid;grid-template-columns:minmax(0,1fr);min-height:100vh}
.adm-dev-stripe{position:fixed;top:0;left:0;right:0;height:3px;z-index:100;background:repeating-linear-gradient(-45deg,#F59E0B 0 12px,#0F0F14 12px 24px)}

/* -- sidebar: a drawer on phones, a sticky column from 1024 -- */
.adm-side{position:fixed;inset:0 auto 0 0;z-index:70;width:min(304px,86vw);display:flex;flex-direction:column;gap:var(--s-4);padding:var(--s-5) var(--s-3) var(--s-4);background:var(--surface);border-right:1px solid var(--border);overflow-x:hidden;overflow-y:auto;transform:translateX(-100%);transition:transform var(--t-base) var(--ease)}
.adm-drawer-open .adm-side{transform:none;box-shadow:var(--shadow-2)}
.adm-scrim{display:none}
@media(max-width:1023px){
  .adm-drawer-open .adm-scrim{display:block;position:fixed;inset:0;z-index:65;background:rgba(15,15,20,.45)}
}
@media(min-width:1024px){
  .adm{grid-template-columns:248px minmax(0,1fr)}
  .adm-side{position:sticky;top:0;height:100vh;width:auto;transform:none;z-index:auto;box-shadow:none}
  .adm-drawer-open .adm-side{box-shadow:none}
  .adm-menubtn{display:none}
}
@media(prefers-reduced-motion:reduce){.adm-side{transition:none}}

.adm-brand{display:flex;align-items:center;gap:var(--s-2);padding:0 var(--s-3)}
.adm-brand>span{display:flex;flex-direction:column;gap:2px;min-width:0}
.adm-brand b{font-family:var(--font-brand);font-style:italic;font-weight:800;font-size:17px;letter-spacing:.01em}
.adm-brand small{font:var(--type-small);font-weight:700;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-3)}
.adm-env{margin-left:auto;background:#F59E0B;color:#0F0F14;font:800 13px/1 var(--font-ui);letter-spacing:.08em;padding:4px 8px;border-radius:var(--r-1)}

/* -- the switcher: "All clients", pins, search -- */
.adm-switch{position:relative}
.adm-switch>summary{list-style:none;display:flex;align-items:center;gap:var(--s-3);padding:var(--s-2) var(--s-3);min-height:var(--tap-min);border:1px solid var(--border);border-radius:var(--r-2);background:var(--bg);cursor:pointer;user-select:none}
.adm-switch>summary::-webkit-details-marker{display:none}
.adm-switch>summary:hover{border-color:var(--border-strong)}
.adm-switch>summary:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.adm-switch[open]>summary{border-color:var(--border-strong)}
.adm-av{flex:none;display:inline-grid;place-items:center;width:30px;height:30px;border-radius:var(--r-1);background:var(--accent);color:var(--on-accent);font:800 13px/1 var(--font-ui);letter-spacing:.02em}
.adm-av.is-all{background:var(--surface-2);color:var(--text-2)}
.adm-switch-who{display:flex;flex-direction:column;min-width:0;flex:1}
.adm-switch-who small{font:var(--type-small);color:var(--text-3)}
.adm-switch-who span{font:var(--type-small);font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adm-switch>summary svg{flex:none;color:var(--text-3)}
.adm-switch-panel{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:80;padding:var(--s-2);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-2);box-shadow:var(--shadow-2)}
.adm-switch-panel .input{min-height:40px;padding:8px 12px;font:var(--type-small)}
.adm-rows{display:flex;flex-direction:column;gap:2px;margin-top:var(--s-2);max-height:min(60vh,420px);overflow-y:auto}
.adm-rlabel{font:var(--type-small);font-weight:700;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-3);padding:var(--s-2) var(--s-2) var(--s-1)}
.adm-row{display:flex;align-items:center;gap:var(--s-1);border-radius:var(--r-1)}
.adm-row:hover{background:var(--surface-2)}
.adm-row>a{flex:1;min-width:0;display:flex;align-items:center;gap:var(--s-2);padding:var(--s-2);min-height:40px;color:var(--text);text-decoration:none;font:var(--type-small);font-weight:600}
.adm-row>a span{overflow:hidden;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.3}
.adm-row>a .adm-av{display:inline-grid;line-height:1}
.adm-row>a svg{flex:none;margin-left:auto;color:var(--text)}
.adm-row form{display:contents}
.adm-pin{flex:none;border:0;background:none;cursor:pointer;color:var(--text-3);padding:var(--s-2);border-radius:var(--r-1);min-width:36px;min-height:36px;display:inline-grid;place-items:center}
.adm-pin:hover{color:var(--text);background:var(--surface)}
.adm-pin.is-on{color:var(--text)}
.adm-none{font:var(--type-small);color:var(--text-3);padding:var(--s-2)}

/* -- the nav itself (items reuse the kit's .nav-item) -- */
.adm-nav{display:flex;flex-direction:column;gap:2px}
.adm-glabel{font:var(--type-small);font-weight:700;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-3);padding:var(--s-4) var(--s-3) var(--s-1)}
.adm-nav .nav-item svg{flex:none;opacity:.8}
.adm-nav .nav-item.on svg{opacity:1}
.adm-badge{margin-left:auto;font:var(--type-small);font-weight:700;font-variant-numeric:tabular-nums;line-height:1;padding:4px 8px;border-radius:var(--r-full);background:var(--surface-2);color:var(--text-2)}
.nav-item.on .adm-badge{background:var(--on-accent);color:var(--accent)}
.adm-badge.is-warn{background:var(--warn-bg);color:var(--warn)}
.adm-badge-live{margin-left:auto;display:inline-flex}
.adm-foot{margin-top:auto;display:flex;flex-direction:column;gap:var(--s-4);padding-top:var(--s-3)}
.adm-foot .acct-row{padding-top:var(--s-3);border-top:1px solid var(--border)}
.adm-help{display:flex;align-items:center;gap:var(--s-2);min-height:40px;padding:0 var(--s-3);border:1px solid var(--border-strong);border-radius:var(--r-2);color:var(--text);text-decoration:none;font:600 13.5px/1 var(--font-ui)}
.adm-help:hover{background:var(--surface-2)}
.adm-help[aria-current]{background:var(--surface-2)}

/* -- account row (kit macro account_row): avatar, name over role, a ⋮ -- */
.acct-row>.acct-btn{display:flex;align-items:center;gap:var(--s-3);width:100%;min-height:var(--tap-min);padding:var(--s-2);border:0;border-radius:var(--r-2);background:none;color:var(--text);cursor:pointer;text-align:left;font:inherit;letter-spacing:0}
.acct-row>.acct-btn:hover{background:var(--surface-2)}
.acct-av{flex:none;display:inline-grid;place-items:center;width:36px;height:36px;border-radius:var(--r-full);background:var(--surface-2);color:var(--text);font:700 13px/1 var(--font-ui);object-fit:cover}
.acct-who{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.acct-who b{font:600 14px/1.2 var(--font-ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct-who small{font:500 13px/1.2 var(--font-ui);color:var(--text-3)}
.acct-more{flex:none;color:var(--text-3);transform:rotate(90deg)}

/* -- main column: top bar, tabs, content -- */
.adm-main{min-width:0;display:flex;flex-direction:column}
.adm-main>.topbar{position:sticky;top:0;z-index:20;background:var(--bg)}
.adm-main [id]{scroll-margin-top:var(--s-20)}
.adm-menubtn{margin-left:calc(-1 * var(--s-2))}
.adm-title{min-width:0}
.adm-tabs{display:flex;gap:var(--s-5);padding:0 var(--s-6);border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:none}
.adm-tabs::-webkit-scrollbar{display:none}
.adm-tabs a{flex:none;padding:var(--s-3) 0;font:var(--type-small);font-weight:600;color:var(--text-2);text-decoration:none;box-shadow:inset 0 -2px 0 transparent;white-space:nowrap}
.adm-tabs a:hover{color:var(--text)}
.adm-tabs a[aria-current="page"]{color:var(--text);box-shadow:inset 0 -2px 0 var(--accent-ink)}
.adm-fresh{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;font:var(--type-small);color:var(--text-3);padding:var(--s-4) var(--s-6)}
.adm-fresh .is-ok{color:var(--ok)}
.adm-fresh .is-warn{color:var(--warn)}
.adm-fresh form{display:inline}
.adm-fresh button{border:0;background:none;cursor:pointer;padding:0;color:var(--accent-ink);font:var(--type-small);font-weight:700}

/* ====== 11 JOURNEY: steps · notice · receipt · celebrate ======
   Added 2026-07-15 (Friday-journey push). ONE vocabulary for multi-step
   flows and success moments — never hand-roll progress bars, inline
   alert boxes, money summaries, or success animations again. */

/* Labeled step progress: <ol class="steps"><li class="done|current"><span>Label</span></li>… */
.steps{display:flex;gap:6px;list-style:none;margin:0 0 28px;padding:0}
.steps li{flex:1;font:700 11px/1 var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);min-width:0}
.steps li span{display:block;padding-bottom:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.steps li::after{content:"";display:block;height:3px;border-radius:var(--r-full);background:var(--border)}
.steps li.done{color:var(--text-2)}
.steps li.done::after{background:var(--ok)}
.steps li.done span::before{content:"✓ ";color:var(--ok)}
.steps li.current{color:var(--text)}
.steps li.current::after{background:var(--accent)}

/* Inline notice — tones ok|warn|danger|info. Replaces every hand-rolled box. */
.notice{display:flex;gap:10px;align-items:flex-start;font:600 13px/1.5 var(--font-ui);padding:12px 14px;border-radius:var(--r-1)}
.notice.ok{color:var(--ok);background:var(--ok-bg)}
.notice.warn{color:var(--warn);background:var(--warn-bg)}
.notice.danger{color:var(--danger);background:var(--danger-bg)}
.notice.info{color:var(--info);background:var(--info-bg)}

/* Receipt — key-value facts (money/confirmation). Label left, value right. */
.receipt{border:1px solid var(--border);border-radius:var(--r-2);background:var(--surface);overflow:hidden}
.receipt .r-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 16px;font:400 13.5px/1.4 var(--font-ui);border-bottom:1px solid var(--border)}
.receipt .r-row:last-child{border-bottom:0}
.receipt .r-row b{font-weight:700;text-align:right}
.receipt .r-total{background:var(--surface-2)}
.receipt .r-total b{font-size:15px}

/* Celebrate — THE success treatment (check-draw + staggered rise).
   <div class="celebrate">{{ skp.celebrate_check() }}<h1>…</h1><p>…</p>…</div> */
.celebrate .c-check{width:56px;height:56px;margin-bottom:18px;display:block}
.celebrate .c-check circle{stroke:var(--ok);stroke-width:2;fill:none;stroke-dasharray:158;stroke-dashoffset:158;animation:skp-draw .5s var(--ease) forwards}
.celebrate .c-check path{stroke:var(--ok);stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:36;stroke-dashoffset:36;animation:skp-draw .35s var(--ease) .45s forwards}
.celebrate>*{animation:skp-rise .4s var(--ease) both}
.celebrate>*:nth-child(2){animation-delay:.08s}
.celebrate>*:nth-child(3){animation-delay:.16s}
.celebrate>*:nth-child(4){animation-delay:.24s}
.celebrate>*:nth-child(n+5){animation-delay:.3s}
@keyframes skp-draw{to{stroke-dashoffset:0}}
@keyframes skp-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.celebrate>*{animation:none}.celebrate .c-check circle,.celebrate .c-check path{animation:none;stroke-dashoffset:0}}
.steps li a{color:inherit;text-decoration:none}
.steps li a:hover{color:var(--text)}

/* chip-toggle — selectable chip backed by a hidden checkbox (≠ .filterchip,
   which is a dismissal chip). <label class="chip-toggle"><input type="checkbox"
   name="..."><span>Basketball</span></label> */
/* position:relative so the hidden absolute input resolves against ITS chip —
   static labels let the inputs escape scroll rows and widen the page past a
   phone viewport (found by the W-VIDEO gate: 390 check, +355px) */
.chip-toggle{display:inline-flex;cursor:pointer;position:relative}
/* lg — a roomy select-chip for pickers that ARE the interaction (role
   assignment, filters that carry weight). 44px min target, real air. */
.chip-toggle.lg span{padding:12px 20px;font-size:13.5px;min-height:44px;display:inline-flex;align-items:center}
/* a chip stays a chip inside .field — without this, `.field label` (0-1-1)
   outguns `.chip-toggle` (0-1-0): display:block + 13px line box, and the
   padded span paints OVER the field's own label (found by W-INTAKE gate) */
.field label.chip-toggle{display:inline-flex;margin-bottom:0}
.chip-toggle input{position:absolute;opacity:0;pointer-events:none}
.chip-toggle span{padding:10px 14px;border:1px solid var(--border-strong);border-radius:var(--r-1);font:600 13px/1 var(--font-ui);color:var(--text-2);transition:all .12s var(--ease);user-select:none}
.chip-toggle:hover span{border-color:var(--text-3)}
.chip-toggle input:checked+span{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.chip-toggle input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}

/* dropzone — dashed file-drop with browse fallback + thumbnail swap.
   <label class="dropzone"><input type="file" ...><div class="dz-idle">…</div>
   <div class="dz-preview" hidden><img><span class="dz-name"></span></div></label> */
/* position:relative anchors the hidden absolute file input — without it the
   input escapes to the page and forces h-overflow (found by W-INTAKE slice 2) */
.dropzone{position:relative;display:block;min-height:150px;border:1.5px dashed var(--border-strong);border-radius:var(--r-2);cursor:pointer;display:flex;align-items:center;justify-content:center;text-align:center;padding:20px;transition:border-color .12s var(--ease),background .12s var(--ease)}
.dropzone:hover,.dropzone.dragover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 3%,transparent)}
.dropzone input{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none}
.dropzone .dz-idle b{display:block;font:600 13.5px var(--font-ui);margin-bottom:4px}
.dropzone .dz-idle span{font:400 12.5px var(--font-ui);color:var(--text-3)}
.dropzone .dz-preview{display:flex;align-items:center;gap:14px}
.dropzone .dz-preview img{width:96px;height:96px;object-fit:contain;border:1px solid var(--border);border-radius:var(--r-1);background:var(--surface)}
.dropzone .dz-preview .dz-name{font:600 12.5px var(--font-ui);color:var(--text-2)}

/* checklist — derived-state getting-started rows (promoted from
   website_status.html). <div class="checklist"><div class="cl-row done|open">… */
.checklist{display:grid;gap:2px}
.checklist .cl-row{display:flex;align-items:center;gap:12px;padding:11px 4px;border-bottom:1px solid var(--border);font:400 13.5px var(--font-ui)}
.checklist .cl-row:last-child{border-bottom:0}
.checklist .cl-dot{flex:none;width:22px;height:22px;border-radius:var(--r-full);display:flex;align-items:center;justify-content:center;font:800 11px var(--font-ui)}
.checklist .done .cl-dot{background:var(--ok-bg);color:var(--ok)}
.checklist .open .cl-dot{background:var(--surface-2);color:var(--text-3);border:1px solid var(--border)}
.checklist .done .cl-label{color:var(--text-3);text-decoration:line-through;text-decoration-color:var(--border-strong)}
.checklist .cl-label{flex:1}
.checklist .cl-action{font:700 12.5px var(--font-ui)}

/* lede — the page-intro paragraph, one way everywhere */
.lede{font:400 14.5px/1.6 var(--font-ui);color:var(--text-2);max-width:56ch;margin-bottom:24px}

/* ==== v0.9 additions (M-3) ================================================ */
/* screen-reader-only text — the accessible name for icon-only controls */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* the app-switcher button — one staff nav, every surface (v0.9) */
.appswitch-btn {
  display: flex; align-items: center; gap: 8px; min-height: 32px;
  font: 600 13px var(--font-ui); letter-spacing: .04em;
  border: 0; background: none; color: inherit; cursor: pointer;
}
.appswitch-caret { font-size: 13px; color: var(--text-3); }
/* staff-panel topline (id app) — back link left, switcher right */
.staff-topline { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
/* avatar user-menu + icon theme toggle (v0.9, Lance 07-27) */
.appswitch-avatar {
  width: 30px; height: 30px; border-radius: 999px; flex: none;
  display: inline-grid; place-items: center;
  background: color-mix(in srgb, var(--accent, var(--text)) 14%, transparent);
  color: var(--accent-ink, var(--text));
  font: 800 13px var(--font-ui); letter-spacing: .02em;
}
@media (max-width: 639px) { .appswitch-name { display: none; } }
.theme-toggle { display: inline-grid; place-items: center; }
.theme-ic-moon { display: none; }
[data-theme="dark"] .theme-ic-moon { display: none; }
[data-theme="dark"] .theme-ic-sun { display: block; }
:root:not([data-theme="dark"]) .theme-ic-sun { display: none; }
:root:not([data-theme="dark"]) .theme-ic-moon { display: block; }
/* SKP ID account page (v0.9) */
.account-page { width: 100%; max-width: 480px; text-align: left; }
.account-page h1 { font: 700 22px var(--font-ui); margin-bottom: 16px; }
.account-back { display: inline-block; font-size: 13.5px; margin-bottom: 12px; }
.account-form { display: grid; gap: 12px; border: 1px solid var(--border); border-radius: var(--r-2); padding: 18px; margin-bottom: 18px; background: var(--surface); }
.account-two { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.account-help { font-size: 12.5px; color: var(--text-3); margin-top: 4px; }
.account-gap { margin-bottom: 4px; }
/* account page uses the real breakpoints, not the login card (Lance 07-27) */
.account-page.is-wide { max-width: none; }
.account-grid { display: grid; gap: 18px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 768px) { .account-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 639px) { .account-two { grid-template-columns: 1fr; } }
.account-grid .account-form { margin-bottom: 0; }
.appswitch-avatar.is-img { object-fit: cover; background: var(--surface-2); }
/* account profile hero (avatar + background photo) */
.account-hero { border: 1px solid var(--border); border-radius: var(--r-2); overflow: hidden; margin-bottom: 18px; background: var(--surface); }
.account-cover { position: relative; height: 140px; background: linear-gradient(120deg, var(--surface-2), var(--border)); }
.account-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.account-cover-btn { position: absolute; right: 12px; bottom: 12px; }
.account-idrow { display: flex; align-items: flex-end; gap: 14px; padding: 0 18px 16px; margin-top: -34px; }
/* the avatar keeps its 34 px overlap; the name never rises under the cover
   (it did at 390, where the photo line wraps). A one-line block still sits
   on the avatar's baseline, so wide screens are unchanged. */
.account-idrow > .account-avatar { align-self: flex-start; }
.account-idrow > .account-avatar + * { margin-top: 36px; }
.account-avatar { position: relative; width: 84px; height: 84px; flex: none; border-radius: 999px; border: 3px solid var(--surface); background: var(--surface-2); display: grid; place-items: center; overflow: visible; }
.account-avatar img { width: 100%; height: 100%; border-radius: 999px; object-fit: cover; }
.account-avatar span { font: 800 26px var(--font-ui); color: var(--text-3); }
.account-avatar-edit { position: absolute; right: -2px; bottom: -2px; width: 28px; height: 28px; border-radius: 999px; background: var(--text); color: var(--bg); display: grid; place-items: center; font-size: 13px; cursor: pointer; border: 2px solid var(--surface); }
.account-who { font: 700 17px var(--font-ui); }
.visually-hidden-file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
/* SKP ID two-step sign-in (10-03): the backup code sheet, shown once, and
   the account security rows. Phone first; codes stay two across at 360. */
.id-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-1) var(--s-3); padding: var(--s-3) var(--s-4); list-style: none; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-2); }
.id-codes code { display: block; padding: var(--s-1) 0; text-align: center; font: 500 16px/1.6 var(--font-code); letter-spacing: .06em; color: var(--text); user-select: all; }
.id-code-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); margin: var(--s-3) 0 var(--s-6); }
.id-code-actions .btn { justify-content: center; }
.id-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-4) 0; border-top: 1px solid var(--border); }
.id-row > div { min-width: 0; }
.id-row h2 { font: 600 15px/1.4 var(--font-ui); }
.id-row p { font: 400 13px/1.45 var(--font-ui); color: var(--text-3); margin-top: 2px; }
.id-row form { flex: none; }
/* the view-as picker (mothership-resident, v0.9) */
.va-search { max-width: 560px; margin-bottom: 6px; }
.va-list { max-width: 720px; }
.va-row { display: flex; align-items: center; gap: 14px; min-height: 62px; padding: 8px 6px; border-bottom: 1px solid var(--border); text-decoration: none; color: inherit; }
.va-row:hover { background: var(--surface-2); }
.va-av { width: 38px; height: 38px; flex: none; border-radius: 999px; display: grid; place-items: center; background: var(--surface-2); color: var(--text-2); font: 700 13px var(--font-ui); }
.va-body { flex: 1; min-width: 0; }
.va-name { display: block; font: 600 14.5px var(--font-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.va-contact { display: block; font: 400 13px var(--font-ui); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.va-kind { font: 600 11px var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.va-none { padding: 20px 6px; color: var(--text-3); font-size: 14px; }
/* a person row followed by its own .sl-actions dock: the dock's hairline
   IS the row's bottom edge — suppress the double rule (5.1b) */
.va-row.has-actions { border-bottom: 0; }
.va-row.has-actions + .sl-actions { margin-top: 0; }

/* ==== target-vs-current KPI furniture (CEO-0 exec summary) =============== */
/* `.kpi-note` (skp.kpi macro) and `.xkpi-note` (hand-rolled exec tiles) are
   the same note — ONE declaration so they can never drift apart. */
.kpi-note,.xkpi-note{font-size:13px;color:var(--text-3);margin-top:6px}
.xkpi-target{display:flex;align-items:center;gap:7px;margin-top:10px;font:600 12.5px var(--font-ui);color:var(--text-2)}
.status-dot{display:inline-block;width:9px;height:9px;border-radius:var(--r-full);background:var(--border-strong);flex:none}
.status-dot.ok{background:var(--ok)}
.status-dot.warn{background:var(--warn)}
.status-dot.bad{background:var(--danger)}
.kpi .arrow{font-size:15px;vertical-align:middle;margin-left:2px}
.arrow.is-good{color:var(--ok)}
.arrow.is-bad{color:var(--danger)}
/* the personal-dashboard table: inline target inputs */
.target-input{width:110px;border:1px solid var(--border-strong);border-radius:var(--r-1);padding:7px 9px;font:600 13.5px var(--font-ui);background:var(--surface);color:var(--text);text-align:right;font-variant-numeric:tabular-nums}
.stub-chip{display:inline-flex;align-items:center;gap:7px;border:1px dashed var(--border-strong);border-radius:var(--r-full);padding:7px 14px;font:600 12.5px var(--font-ui);color:var(--text-3)}
.stub-chips{display:flex;flex-wrap:wrap;gap:8px}
/* ==== the utility tail (R-0: the classes every app kept re-inventing) ==== */
.muted{font-size:12.5px;color:var(--text-3)}
.hint{font-size:13px;color:var(--text-3)}
.num{font-variant-numeric:tabular-nums}
.stack{display:flex;flex-direction:column;gap:var(--s-3)}
.row-actions{display:flex;align-items:center;gap:14px;margin-top:var(--s-3);flex-wrap:wrap}
/* horizontal bar rows (dashboard MoM / MRR history) — width is data */
.bar-row{display:grid;grid-template-columns:84px 1fr 130px;gap:10px;align-items:center;margin-bottom:7px}
.bar-row .bar-label{font-size:12px;color:var(--text-2)}
.bar-row .bar-val{font-size:11.5px;text-align:right}
.bar-row.is-progress{opacity:.65}
.bar-track{height:15px;background:color-mix(in srgb,var(--border) 40%,transparent);border-radius:3px;overflow:hidden}
.bar-fill{height:100%;background:var(--ink,#0F0F14);border-radius:3px;min-width:1.5%}
.bar-fill.is-progress{background:repeating-linear-gradient(-45deg,var(--ink,#0F0F14) 0 6px,transparent 6px 10px)}
/* key/value list rows (top clients, past due, recent changes) */
.kvrow{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--border);font-size:13.5px}
/* flex items default to min-width:auto, so a long key refuses to shrink
   and shoves the amount past the viewport (/revops/operations was 18px
   over at 390). The key wraps; the money never shrinks. (7.2 FB-KIT) */
.kvrow>*{min-width:0}
.kvrow .sub{display:block;font-size:11.5px;color:var(--text-3)}
.kvrow .amt{font-weight:700;flex:none}
.kvrow .amt.warn{color:var(--warn)}
/* layout-grid tracks are minmax(0,…), never bare 1fr: bare 1fr =
   minmax(auto,1fr), so one wide child (a toolbar, a table) forces the
   track — and the page — past a phone viewport. Floor at 0 and wide
   content scrolls inside its own .table-scroll/.seg instead (390 check) */
.two-col{display:grid;gap:20px;grid-template-columns:minmax(0,1fr)}
@media(min-width:1024px){.two-col{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
/* section rhythm: pages stack cards/sections with real air between them */
.stack-lg{display:grid;gap:24px;align-content:start;grid-template-columns:minmax(0,1fr)}
.stack-lg > *{margin-bottom:0}
/* collapsible board panel (dashboard targets table) */
.board-collapse > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;font:700 11px var(--font-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}
.board-collapse > summary::-webkit-details-marker{display:none}
.board-collapse > summary::after{content:"▾";font-size:12px;color:var(--text-3);transition:transform .15s ease}
.board-collapse:not([open]) > summary::after{transform:rotate(-90deg)}
.board-collapse[open] > summary{margin-bottom:14px}

/* ==== the touchboard (CEO-0 §2.1) — wall display, dark, data only ======== */
.tb{min-height:100vh;background:#07070B;color:#F4F4F6;font-family:var(--font-ui);padding:clamp(20px,3vw,48px);display:grid;gap:clamp(18px,2.2vw,34px);align-content:start}
.tb a{color:inherit}
.tb-head{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap}
.tb-mark{font:800 15px var(--font-ui);letter-spacing:.22em}
.tb-mark small{display:block;font:700 9px var(--font-ui);letter-spacing:.3em;color:#8B8B95;margin-top:2px}
.tb-live{display:inline-flex;align-items:center;gap:7px;font:700 11px var(--font-ui);letter-spacing:.14em;color:#8B8B95}
.tb-live::before{content:"";width:8px;height:8px;border-radius:99px;background:var(--ok,#22C55E);animation:tb-pulse 2.4s ease infinite}
@keyframes tb-pulse{0%,100%{opacity:1}50%{opacity:.35}}
.tb-when{margin-left:auto;font:600 13px var(--font-ui);color:#8B8B95;font-variant-numeric:tabular-nums}
.tb-hero{display:grid;gap:clamp(18px,2.2vw,34px);grid-template-columns:1fr;align-items:end}
@media(min-width:1024px){.tb-hero{grid-template-columns:minmax(320px,.9fr) 1.6fr}}
.tb-big .l{font:700 12px var(--font-ui);letter-spacing:.18em;text-transform:uppercase;color:#8B8B95}
.tb-big .v{font:800 clamp(64px,9vw,132px)/1 var(--font-ui);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.tb-big .s{font:600 14px var(--font-ui);color:#8B8B95;margin-top:8px}
.tb-big .s b{color:#F4F4F6}
.tb-grid{display:grid;gap:clamp(14px,1.6vw,24px);grid-template-columns:repeat(2,1fr)}
@media(min-width:1024px){.tb-grid{grid-template-columns:repeat(4,1fr)}}
.tb-cell{border:1px solid #1C1C24;border-radius:14px;padding:clamp(16px,1.8vw,26px);background:#0C0C12}
.tb-cell .l{font:700 11px var(--font-ui);letter-spacing:.16em;text-transform:uppercase;color:#8B8B95}
.tb-cell .v{font:800 clamp(30px,3.6vw,52px)/1.1 var(--font-ui);letter-spacing:-.02em;margin-top:10px;font-variant-numeric:tabular-nums}
.tb-cell .s{font:600 12.5px var(--font-ui);color:#8B8B95;margin-top:6px}
.tb-cell .v.warn{color:var(--warn,#F59E0B)}
.tb-two{display:grid;gap:clamp(14px,1.6vw,24px);grid-template-columns:1fr}
@media(min-width:1024px){.tb-two{grid-template-columns:1fr 1fr}}
.tb-chart svg{width:100%;height:auto;display:block;margin-top:12px}
.tb-chart .axis{display:flex;justify-content:space-between;font:600 11.5px var(--font-ui);color:#8B8B95;margin-top:6px;font-variant-numeric:tabular-nums}
.tb-line{fill:none;stroke:var(--accent,#FF6B1A);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.tb-area{fill:url(#tb-grad);opacity:.9}
.tb-dot{fill:var(--accent,#FF6B1A)}
.tb-bar{fill:var(--accent,#FF6B1A);rx:4}
.tb-bar.is-progress{opacity:.45}
.tb-hbar-row{display:grid;grid-template-columns:150px 1fr 70px;gap:12px;align-items:center;margin-top:12px}
.tb-hbar-row .l{font:600 13.5px var(--font-ui);color:#C9C9D2;text-transform:capitalize}
.tb-hbar-row .n{font:800 16px var(--font-ui);text-align:right;font-variant-numeric:tabular-nums}
.tb-hbar{height:20px;border-radius:6px;background:#1C1C24;overflow:hidden}
.tb-hbar > div{height:100%;background:var(--accent,#FF6B1A);border-radius:6px;min-width:2%}
.tb-empty{font:600 14px var(--font-ui);color:#8B8B95;padding:24px 0}
.tb-foot{display:flex;gap:18px;flex-wrap:wrap;font:600 12px var(--font-ui);color:#5D5D68;letter-spacing:.06em}
.lbl-block{display:block;margin-bottom:4px}
/* ==== product-ops furniture (PO-0) ======================================= */
.po-grade{display:grid;gap:20px;grid-template-columns:1fr;align-items:start}
@media(min-width:1024px){.po-grade{grid-template-columns:220px 1fr}}
.po-letter{font:800 clamp(64px,7vw,96px)/1 var(--font-ui);letter-spacing:-.03em}
.po-letter.good{color:var(--ok)} .po-letter.warning{color:var(--warn)}
.po-letter.serious{color:#E8590C} .po-letter.critical{color:var(--danger)}
.po-composite{font:600 13.5px var(--font-ui);color:var(--text-2);margin-top:6px}
.po-drag{font:600 12.5px var(--font-ui);color:var(--text-3);margin-top:2px}
.pillar{display:grid;grid-template-columns:190px 1fr 120px;gap:12px;align-items:center;padding:7px 0}
/* under 480 the fixed name+value columns (334px) outgrow the viewport:
   name takes its own row, bar + value share the second */
@media(max-width:479px){
  .pillar{grid-template-columns:minmax(0,1fr) 120px;row-gap:4px}
  .pillar .pn{grid-column:1 / -1}
}
.pillar .pn{font:600 13px var(--font-ui)} .pillar .pn small{color:var(--text-3);font-weight:600}
.pillar .pb{height:10px;border-radius:var(--r-full);background:color-mix(in srgb,var(--border) 50%,transparent);overflow:hidden}
.pillar .pb i{display:block;height:100%;border-radius:var(--r-full);background:var(--accent,var(--text))}
.pillar .pv{font:600 12.5px var(--font-ui);color:var(--text-2);text-align:right;font-variant-numeric:tabular-nums}
.info-tip{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:var(--r-full);border:1px solid var(--border-strong);background:none;color:var(--text-3);font:700 10px var(--font-ui);cursor:help;vertical-align:middle;margin-left:5px}
.po-chart svg{width:100%;height:auto;display:block;margin-top:10px}
.po-chart .axis{display:flex;justify-content:space-between;font:600 11px var(--font-ui);color:var(--text-3);margin-top:5px;font-variant-numeric:tabular-nums}
.po-seg-st{fill:var(--accent,#0F0F14)} .po-seg-tk{fill:color-mix(in srgb,var(--accent,#0F0F14) 55%,transparent)}
.po-seg-bg{fill:color-mix(in srgb,var(--accent,#0F0F14) 25%,transparent)}
.po-line-a{fill:none;stroke:var(--danger);stroke-width:2.5;stroke-linejoin:round}
.po-line-b{fill:none;stroke:var(--ok);stroke-width:2.5;stroke-linejoin:round}
.po-legend{display:flex;gap:14px;flex-wrap:wrap;font:600 11.5px var(--font-ui);color:var(--text-2);margin-top:8px}
.po-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:baseline}
.po-attn{display:grid;gap:10px}
.po-attn-row{display:flex;align-items:center;gap:10px;font:600 13.5px var(--font-ui)}
.po-attn-row .stripe{width:4px;height:26px;border-radius:2px;flex:none}
.po-attn-row .n{font:800 16px var(--font-ui);min-width:28px;text-align:right;font-variant-numeric:tabular-nums}
.stripe.critical{background:var(--danger)} .stripe.serious{background:#E8590C}
.stripe.warning{background:var(--warn)} .stripe.info{background:var(--border-strong)}
.po-statebar{display:flex;height:22px;border-radius:6px;overflow:hidden;background:color-mix(in srgb,var(--border) 40%,transparent)}
.po-statebar i{display:block;height:100%}
.st-Closed{background:var(--ok)} .st-Resolved{background:color-mix(in srgb,var(--ok) 55%,transparent)}
.st-QA{background:var(--info,#3B82F6)} .st-Active{background:var(--accent,#0F0F14)}
.st-ReOpen{background:var(--danger)} .st-New{background:var(--border-strong)}
.st-OnHold{background:var(--warn)}
.rec{display:grid;grid-template-columns:4px 1fr;gap:14px;padding:14px 0;border-bottom:1px solid var(--border)}
.rec .stripe{border-radius:2px}
.rec h3{font:700 14.5px var(--font-ui);margin-bottom:4px}
.rec p{font:400 13px/1.55 var(--font-ui);color:var(--text-2)}
.rec .act{color:var(--text);font-weight:600;margin-top:4px}
.rec .links{margin-top:6px;font:600 12.5px var(--font-ui)}
.po-modal{border:0;border-radius:var(--r-2);background:var(--surface);color:var(--text);box-shadow:var(--shadow-2,var(--shadow-1));padding:24px;max-width:720px;width:calc(100vw - 40px);max-height:85vh;overflow:auto}
.po-modal::backdrop{background:rgba(10,10,14,.55)}
.po-modal-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.po-modal-head h2{font:700 18px var(--font-ui)}
.po-legend .sw-st{background:var(--accent,#0F0F14)}
.po-legend .sw-tk{background:color-mix(in srgb,var(--accent,#0F0F14) 55%,transparent)}
.po-legend .sw-bg{background:color-mix(in srgb,var(--accent,#0F0F14) 25%,transparent)}
.po-legend .sw-danger{background:var(--danger)}
.po-legend .sw-ok{background:var(--ok)}
.po-strengths{margin-top:14px}
/* segmented view switcher (kit-level twin of HQ's tab seg) */
/* min-width:0 + overflow-x lets a wide seg scroll inside itself on
   phones instead of forcing the page past the viewport (390 check) */
.seg{display:grid;grid-auto-flow:column;gap:4px;padding:4px;border-radius:var(--r-2);background:var(--surface-2);max-width:520px;min-width:0;overflow-x:auto}
.seg a{display:flex;align-items:center;justify-content:center;gap:6px;min-height:38px;border-radius:calc(var(--r-2) - 4px);font:600 13.5px var(--font-ui);color:var(--text-2);text-decoration:none;padding:0 14px;white-space:nowrap}
.seg a[aria-current="page"]{background:var(--surface);color:var(--text);box-shadow:var(--shadow-1)}
.toolbar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:12px 0 14px}
.toolbar .input{width:auto;min-width:220px;min-height:44px;font-size:14px}
.fl-up{fill:var(--ok)} .fl-dn{fill:var(--danger)}

/* ==== R-0 sweep: the vocabulary five screens kept hand-rolling ============
   Promoted 2026-07-27 out of the <style> blocks and inline styles of
   clients/client_detail · people/person · finance/commissions(+_person) ·
   comms/broadcast. Generic only: if a rule fits exactly one screen it does
   not belong here. .sec-h / .sec-sub were already USED by five templates and
   defined by none of them — that mismatch is why the pages drifted. */
/* section heading + deck — the in-page divider above a card group */
.sec-h{font-weight:600;font-size:17px;letter-spacing:-.01em;margin:0 0 4px}
.sec-h.danger{color:var(--danger)}
.sec-sub{font-size:12.5px;color:var(--text-3);margin:0 0 14px;max-width:96ch}
/* card grid — 1 → 2 → 3 across the documented stops */
.cardgrid{display:grid;gap:var(--s-6);grid-template-columns:minmax(0,1fr)}
@media(min-width:768px){.cardgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1280px){.cardgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* a card that earns a double column (People & access — Lance 09-01:
   "WIDE COLUMN — looks good to me", overruling the canvas's rail verdict) */
@media(min-width:768px){.cardgrid .card.is-wide{grid-column:span 2}}
/* detail cards breathe: same-height kv rows (Lance 07-20) */
.cardgrid .kvrow{align-items:center;min-height:46px}
.kvrow .label{align-self:center}
/* .two-col, weighted — one side leads */
@media(min-width:1024px){.two-col.lead-first{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}.two-col.lead-last{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr)}}
/* formrow — form controls that read ACROSS (.formgrid stacks, .btnrow is
   buttons only, .toolbar belongs to a table). Controls stay compact. */
/* fieldrow — two+ LABELED fields sharing one line, each filling its track
   (unlike .formrow, whose inputs stay content-width for toolbars/actions).
   Tracks wrap to a stack on phone widths. */
.fieldrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:var(--s-3)}
.fieldrow .input{width:100%}
.formrow{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap}
.formrow .input{width:auto;min-height:40px;padding-top:9px;padding-bottom:9px;font-size:14px}
.formrow .selectwrap .input{width:100%}
/* formsec — a divided group inside a long form */
.formsec{padding-top:var(--s-5);border-top:1px solid var(--border)}
/* a badge carrying a sentence rather than a word */
.badge.wrap{white-space:normal;text-align:left}
.prewrap{white-space:pre-wrap}
/* listrow — a left-reading row in a card list (.kvrow is its split twin) */
.listrow{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--border);font-size:13px}
.listrow:first-child{border-top:0}
.listrow .when{flex:none;width:78px;font-size:11.5px;color:var(--text-3)}
.kvrow.is-last{border-bottom:0}
/* badges — a wrapping group of badges, trailing edge of its row */
.badges{display:inline-flex;align-items:center;gap:5px;flex-wrap:wrap;justify-content:flex-end}
/* a POST action riding inside a badge/chip cloud: the form wrapper
   vanishes from layout so its button sits as a flex child (2.3 card) */
.badges form,.chips form{display:contents}
/* planline — the plan-identity moment on a billing card: name reads
   first, the PRICE is the display moment (medium weight — money is
   never bold), unit + assignment meta stay quiet */
.planline .p-name{font:var(--type-h3);letter-spacing:-.01em}
.planline .p-price{font:500 28px/1.1 var(--font-ui);font-variant-numeric:tabular-nums;letter-spacing:-.02em;margin-top:2px}
.planline .p-price small{font:600 13px var(--font-ui);color:var(--text-3);letter-spacing:0;margin-left:2px}
.planline .p-meta{margin-top:6px;font:var(--type-small);color:var(--text-3)}
/* statepanel — a bounded, tinted state object INSIDE a card (billing
   states, gate states). Tint only, no colored border. Rows and actions
   ride inside it and sit flush — EXCEPT bounded money-objects (.sublink),
   which take the card surface on the tint, extending the .reqlist-chip
   surface-on-panel precedent. */
.statepanel{border-radius:var(--r-2);padding:14px 16px;display:grid;gap:10px}
.statepanel.ok{background:var(--ok-bg)}
/* warn panels sit on NEUTRAL grey (Lance 08-14: "I hate the brown") —
   the sp-title + companion badge carry the warn hue, the panel doesn't */
.statepanel.warn{background:var(--surface-2)}
.statepanel.info{background:var(--info-bg)}
.statepanel .sp-title{font:var(--type-label);text-transform:uppercase;letter-spacing:.08em}
.statepanel.ok .sp-title{color:var(--ok)}
.statepanel.warn .sp-title{color:var(--warn)}
.statepanel.info .sp-title{color:var(--info)}
.statepanel .sp-body{font:var(--type-small);color:var(--text-2)}
.statepanel .kvrow{border-bottom:0;padding:0}
@media(max-width:480px){.statepanel .kvrow{flex-direction:column;align-items:flex-start;gap:6px}}
/* stat — a labeled number INSIDE a card (the quiet sibling of the
   dashboard .kpi): label above, medium-weight tabular value (same
   26px/500 family as .planline .p-price), note/badges below */
.stats{display:grid;gap:14px 20px;grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
.stat .s-label{font:var(--type-label);text-transform:uppercase;letter-spacing:.08em;color:var(--text-3)}
.stat .s-value{font:500 26px/1.2 var(--font-ui);font-variant-numeric:tabular-nums;letter-spacing:-.02em;margin-top:4px}
.stat .s-note{margin-top:5px;font-size:12.5px;color:var(--text-3);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.stat .s-note form{display:contents}
.stat .s-note .iconbtn{min-height:auto;padding:2px 6px}
/* 3.1 Connect panel — a status dot rides the statepanel title; PENDING
   pulses (the tickets-repo pattern). Reduced motion stills it. */
.statepanel .sp-title .status-dot{margin-right:7px;vertical-align:middle;margin-top:-2px}
.status-dot.pulse{animation:skp-dot-pulse 1.4s ease-in-out infinite}
@keyframes skp-dot-pulse{50%{opacity:.3}}
@media(prefers-reduced-motion:reduce){.status-dot.pulse{animation:none}}
/* sublink (4.1c) — the offer link as a bounded money-object ON a
   statepanel tint: card surface, money leads (planline family, one step
   down so it never outshouts a planline above), what+state second,
   created-when demoted to .sub, actions sit WITH the meta they act on.
   Width capped so the action cloud never drifts a card-width from the
   thing it acts on. Verified on .warn; re-check on ok/info tints before
   reusing there (surface-on-colour reads louder). */
.sublink{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-1);padding:12px 14px;max-width:520px;display:grid;gap:2px;text-align:left}
.sublink .sl-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.sublink .sl-price{font:500 22px/1.2 var(--font-ui);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.sublink .sl-what{font:var(--type-small);color:var(--text-2)}
/* sl-actions — PROMOTED from .sublink (5.1b, design-system concord): any
   list row that owns actions gets a hairlined dock. The rule, not just the
   class: the dock is a rail necessity, not a permanent structure — it
   collapses to one tier wherever width exists. Destructive controls wear
   .btn-danger (their own weight separates them; no positional selectors). */
.sl-actions{display:flex;justify-content:flex-end;align-items:center;gap:6px;flex-wrap:wrap;margin-top:9px;padding-top:9px;border-top:1px solid var(--border)}
.sl-actions form{display:contents}
/* the destructive control sits apart from its neighbours — a misclick
   on void costs a link the client may already have opened */
.sublink .sl-actions form:last-of-type .iconbtn{margin-left:8px}
.sublink .sl-meta form{display:contents}

/* requirements display — Stripe's currently_due codes as quiet chips
   (they sit on a statepanel, so chips use the card surface) */
.reqlist{display:flex;flex-wrap:wrap;gap:6px}
.reqlist code{font:500 12px/1 var(--font-ui);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-1);padding:4px 7px;color:var(--text-2)}
/* chips — the same cloud, reading left (badges, swatches, mini-links) */
.chips{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap}
/* a scrolling list inside a modal */
.skp-modal .m-list{max-height:340px;overflow-y:auto}
/* the quiet second line under a value (was .kvrow .sub only) */
.sub{display:block;font-size:11.5px;color:var(--text-3)}
.grow{flex:1;min-width:0}
.push{margin-left:auto}
.nowrap{white-space:nowrap}
.right{text-align:right}
.is-clickable{cursor:pointer}
.is-loading{opacity:.5}
.up{color:var(--ok)}
.down{color:var(--danger)}
.truncate{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* page hero — avatar + identity + status at the top of a detail page */
.pagehero{display:flex;align-items:center;gap:var(--s-4);flex-wrap:wrap}
.pagehero .who{font:700 18px/1.3 var(--font-ui);letter-spacing:-.01em}
/* avatar — initials disc, standalone (inside .person the table variant wins) */
.avatar{display:inline-flex;align-items:center;justify-content:center;flex:none;width:32px;height:32px;overflow:hidden;border-radius:var(--r-full);background:var(--ink,#0F0F14);color:#fff;font:700 12px var(--font-ui)}
.avatar.lg{width:48px;height:48px;font-size:16px}
.avatar.sm{width:24px;height:24px;font-size:10px}
/* chip-person — a person as a tappable chip */
.chip-person{display:inline-flex;align-items:center;gap:7px;padding:4px 12px 4px 4px;border:1px solid var(--border);border-radius:var(--r-full);background:var(--surface);font-size:12.5px;text-decoration:none}
.chip-person:hover{border-color:var(--border-strong)}
/* optrow — pick-one as a full-width row (radio semantics, form-posted) */
.optrow{display:flex;align-items:center;gap:10px;width:100%;padding:11px 12px;text-align:left;border:1px solid var(--border);border-radius:var(--r-1);background:var(--surface);color:inherit;cursor:pointer;font:500 13.5px var(--font-ui)}
.optrow.is-on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,transparent)}
.optrow .dot{flex:none;width:16px;height:16px;border-radius:var(--r-full);border:2px solid var(--border);box-shadow:inset 0 0 0 3px var(--surface)}
.optrow.is-on .dot{border-color:var(--accent);background:var(--accent)}
.optrow .cur{font:700 13px var(--font-ui);letter-spacing:.04em;color:var(--accent-ink)}
/* switch-btn — a toggle that POSTS (≠ .switch, which is a checkbox) */
.switch-btn{position:relative;flex:none;width:40px;height:22px;border:0;border-radius:var(--r-full);background:var(--border);cursor:pointer;transition:background var(--t-fast) var(--ease)}
.switch-btn i{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:var(--r-full);background:#fff;box-shadow:var(--shadow-1);transition:transform var(--t-fast) var(--ease)}
.switch-btn.is-on{background:var(--accent)}
.switch-btn.is-on i{transform:translateX(18px)}
/* list-filter — the search field that filters the list beneath it */
.list-filter{margin-bottom:var(--s-3)}
/* the form modal (the bare .skp-modal is sized for a confirm) */
dialog.skp-modal.is-wide{width:min(460px,92vw)}
/* the danger-zone card — the only card that wears a warning edge */
.card.is-danger{border-color:color-mix(in srgb,var(--danger) 35%,var(--border))}
/* brand furniture: a color swatch, a logo in a tile, a logo inline */
.swatch{display:inline-block;flex:none;width:36px;height:36px;border:1px solid var(--border);border-radius:var(--r-1)}
.logo-tile{text-align:center}
.logo-tile .frame{display:flex;align-items:center;justify-content:center;width:96px;height:64px;overflow:hidden;border:1px solid var(--border);border-radius:var(--r-1);background:var(--surface-2)}
.logo-tile img{max-width:88px;max-height:56px;object-fit:contain}
.logo-tile figcaption{margin-top:6px}
.logo-thumb{height:28px;padding:2px;vertical-align:middle;border:1px solid var(--border);border-radius:var(--r-1);background:#fff}
a.btn{text-decoration:none}
textarea.input{resize:vertical}
/* table furniture: right-aligned heads, indented children, subtotal + total */
thead th.num{text-align:right}
tbody td.indent{padding-left:var(--s-8)}
tbody tr.subtotal,tbody tr.subtotal:hover{background:var(--surface-2)}
tfoot td{padding:var(--s-4);border-top:2px solid var(--border);color:var(--text);font-weight:700}
tfoot td.num{text-align:right;font-variant-numeric:tabular-nums}

/* ==== profile card — the person / athlete hero (promoted from people/person
   2026-07-27; its media queries were rogue at 1100px and 600px) ========== */
.pcard{overflow:hidden;border:1px solid var(--border);border-radius:var(--r-2);background:var(--surface);box-shadow:var(--shadow-1)}
.pcard-band{position:relative;height:300px;background:linear-gradient(135deg,var(--ink,#0F0F14) 30%,color-mix(in srgb,var(--accent,#FF6B1A) 55%,var(--ink,#0F0F14)))}
@media(max-width:1023px){.pcard-band{height:240px}}
@media(max-width:768px){.pcard-band{height:200px}}
.pcard-band img{display:block;width:100%;height:100%;object-fit:cover}
.pcard-band::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(10,10,14,.55))}
.pcard-num{position:absolute;top:14px;right:26px;z-index:2;font:800 italic 64px/1 Kanit,var(--font-ui);color:#fff;opacity:.92;letter-spacing:-.02em;text-shadow:0 2px 14px rgba(0,0,0,.35)}
.pcard-num::before{content:"#";font-size:34px;font-style:italic;opacity:.55;margin-right:2px}
.pcard-body{position:relative;padding:0 26px 22px}
.pcard-body.is-tight{padding-bottom:18px}
.pcard-avatar{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;width:88px;height:88px;margin-top:-44px;overflow:hidden;border:3px solid var(--surface);border-radius:var(--r-full);background:var(--ink,#0F0F14);color:#fff;font:700 26px var(--font-ui);box-shadow:var(--shadow-1)}
.pcard-avatar img{width:100%;height:100%;object-fit:cover}
.pcard-avatar.md{width:72px;height:72px;margin-top:-36px;font-size:22px}
.pcard-avatar.flat{width:64px;height:64px;margin-top:0;border-width:0;font-size:20px}
.pcard-name{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}
.pcard-name h1{font:700 24px/1.15 var(--font-ui);letter-spacing:-.02em}
.pcard-org{font-size:13px;color:var(--text-3);margin-top:3px}
.pcard-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.pcard-stats{display:flex;flex-wrap:wrap;margin-top:18px;padding-top:16px;border-top:1px solid var(--border)}
.pcard-stats .stat{padding:0 22px 0 0;margin-right:22px;border-right:1px solid var(--border)}
.pcard-stats .stat:last-child{margin-right:0;border-right:0}
.pcard-stats .s-label{font:700 10.5px var(--font-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin-bottom:2px}
.pcard-stats .s-value{font:700 16px var(--font-ui);letter-spacing:-.01em}
.pcard-social{display:flex;gap:14px;margin-top:14px}
.pcard-social a{font-size:12.5px;font-weight:600;color:var(--text-2);text-decoration:none}
.pcard-social a:hover{color:var(--text)}
/* jersey — the athlete's number, wherever it appears in a list */
.jersey{font:800 italic 18px Kanit,var(--font-ui);color:var(--text-2)}
.jersey::before{content:"#";font-size:11px;opacity:.6}
.pcard-empty{margin-top:18px;padding-top:14px;border-top:1px solid var(--border);font-size:12.5px;color:var(--text-3)}
@media(max-width:639px){
  .pcard-band{height:170px}
  .pcard-num{font-size:44px;right:16px}
  .pcard-body{padding:0 16px 18px}
  .pcard-stats .stat{padding-right:14px;margin-right:14px}
}

/* ==== 5.2d · the People roster (client card) ==============================
   Opus design pass 09-01, Lance-amended: one filterable list, ONE structural
   divide (Sketchplay side vs the org's side), kind as a quiet word with
   badges reserved for states, routine tools + Remove user in the kebab. */

/* roster-bar — the filter strip directly under a card header, first child
   of .card-b. On phones the seg swaps for a select (easy thumb reach). */
.roster-bar{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;
  padding-bottom:var(--s-4);border-bottom:1px solid var(--border);margin-bottom:var(--s-5)}
.roster-bar .seg{max-width:none;min-width:0;flex:0 1 auto}
.roster-bar .sw-filter{display:none}

/* a count riding a .seg segment — the filter doubles as the census */
.seg a .n{font-variant-numeric:tabular-nums;color:var(--text-3);font-weight:700;margin-left:2px}
.seg a[aria-current="page"] .n{color:var(--text-2)}

/* the roster is a card-width list, not the 720px view-as picker */
.va-list.is-roster{max-width:none}
/* the section's own border is the closing rule — two adjacent hairlines
   read as one 2px defect */
.va-list.is-roster .va-row:last-child{border-bottom:0}

/* roster row = GRID: fixed kind + control tracks align down the whole
   list; a row with no controls leaves its track empty instead of sliding
   its kind word to the card edge */
.va-row.is-roster{display:grid;grid-template-columns:38px minmax(0,1fr) 96px 52px;
  align-items:center;column-gap:var(--s-4)}

/* a real photo once the SKP ID account is claimed */
.va-av img{width:100%;height:100%;border-radius:var(--r-full);object-fit:cover}
/* Sketchplay-side people wear the ink avatar — one tone carries ours-vs-
   theirs, no colour, no border, no extra badge */
.va-av.is-skp{background:var(--text);color:var(--bg)}

/* va-meta — a facts line under the name. A fact that doesn't exist is
   simply absent; the separator hangs off the fact BEFORE it so a wrapped
   line never opens with a middot. Stack two .va-meta lines to put the
   phone under the email (Lance 09-01). */
.va-meta{display:flex;flex-wrap:wrap;align-items:baseline;min-width:0;
  font:400 13px var(--font-ui);color:var(--text-3)}
.va-meta > span{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.va-meta > span:not(:last-child)::after{content:"·";margin:0 7px;color:var(--border-strong)}

/* the trailing kind/state slot — quiet kind word + a badge ONLY for a
   state that wants attention (Invited · Inactive · Primary) */
.va-tag{display:flex;flex-direction:column;align-items:flex-end;gap:5px;min-width:0}

/* the row's control slot: ONE kebab (routine tools + the destructive
   item, which wears .danger inside the menu) */
.va-actions{display:flex;align-items:center;justify-content:flex-start;gap:var(--s-1)}
.va-actions form{display:contents}

/* a square control that meets the 44px target */
.iconbtn.is-target{min-height:44px;min-width:44px;display:inline-grid;place-items:center;padding:0}

/* .menu must be able to POST — anchors only was why every confirm-guarded
   action lived in the open as a text button */
.menu form{display:contents}
.menu button{display:block;width:100%;text-align:left;border:0;background:none;cursor:pointer;
  padding:10px 12px;font:600 13.5px var(--font-ui);color:var(--text);border-radius:var(--r-1)}
.menu button:hover{background:var(--surface-2)}
.menu button.danger{color:var(--danger)}
.menu button.danger:hover{background:var(--danger-bg)}

/* .iconbtn as an anchor (a section's trailing "Add …" door) */
a.iconbtn{text-decoration:none;display:inline-flex;align-items:center}

/* formpanel — a quiet inset for a form that unfolds inside a card
   (Add someone): hairline + surface-2 so the form reads as a temporary
   workspace, not more card content */
.formpanel{border:1px solid var(--border);border-radius:var(--r-2);
  background:var(--surface-2);padding:var(--s-5);margin:var(--s-4) 0 var(--s-5)}
.formpanel .input{background:var(--surface)}
.formpanel .chips{margin-bottom:var(--s-3)}

/* a label line that carries a trailing action ("Add someone") */
.lbl-row{display:flex;align-items:center;gap:var(--s-3);margin-bottom:4px}
.lbl-row .label{margin-bottom:0}

/* phone (390): line 1 = avatar + identity · line 2 = kind under the name,
   controls at the trailing edge; the filter becomes a dropdown */
@media(max-width:639px){
  .va-row.is-roster{grid-template-columns:38px minmax(0,1fr) auto;row-gap:var(--s-2);
    padding-top:var(--s-3);padding-bottom:var(--s-3)}
  .va-row.is-roster > .va-av{grid-row:1;align-self:start}
  .va-row.is-roster > .va-body{grid-column:2 / -1;grid-row:1}
  .va-row.is-roster > .va-tag{grid-column:2;grid-row:2;align-items:flex-start}
  .va-row.is-roster > .va-actions{grid-column:3;grid-row:2;justify-content:flex-end}
  .roster-bar .seg{display:none}
  .roster-bar .sw-filter{display:inline-flex}
}

/* ====== 5.2f MEMBERS DIRECTORY ====== */
/* census toolbar on a table card — same seg↔select phone swap the
   .roster-bar makes, for a .toolbar that carries the census chips */
.toolbar .seg{max-width:none;min-width:0;flex:0 1 auto}
.toolbar .sw-filter{display:none}
@media(max-width:639px){
  .toolbar .seg{display:none}
  .toolbar .sw-filter{display:inline-flex}
}
/* a person cell as a quiet door — inherits ink, names the hover */
a.cell-door{display:block;color:inherit;text-decoration:none;min-width:0}
a.cell-door:hover .person>span:last-child{color:var(--accent-ink)}
/* padded message cells: empty tables and the lazy-load sentinel */
table td.empty-cell{padding:var(--s-6) var(--s-5);color:var(--text-3);font-size:13px}
table td.empty-cell.center{text-align:center}
table th.th-actions{width:52px}
/* a data cell that must not wrap (phones, dates) — the phone-collapse
   contract still wins below 640 */
table td.nowrap{white-space:nowrap}
/* the household cell's chip + Move pair (5.2h /users merge) */
.hh-tools{display:flex;gap:8px;align-items:center}
/* accent-ink inline emphasis (modal titles name their subject) */
.accented{color:var(--accent-ink)}
/* a search input inside a modal body sits between title and results */
.skp-modal .m-body>.input{width:100%;margin:12px 0 6px}
/* a group of sibling action buttons that wraps as ONE unit */
.btnrow{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* a scrollable row list inside a card/panel (5.2 picker, 6.1 Groups) */
.picklist{max-height:360px;overflow-y:auto;padding-right:2px}

/* Add-existing-user picker rows (5.2h): candidate hits + the chosen row */
.pickrow{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-1);
  padding:10px 12px;cursor:pointer;margin-bottom:6px;font:inherit;color:inherit}
.pickrow:hover{background:var(--surface-2)}
a.pickrow{text-decoration:none}
.pickrow>.muted{margin-left:auto;font-size:12px;flex:none}
.pickrow.is-chosen,.pickrow.is-chosen:hover{cursor:default;background:var(--surface)}
/* account profile hero (5.2i): the big disc + identity line */
.acct-hero{display:flex;align-items:center;gap:var(--s-4);margin-bottom:var(--s-4)}
.acct-hero .avatar{width:52px;height:52px;font-size:17px}
.acct-hero img.avatar{object-fit:cover}
.acct-hero .who{min-width:0}
.acct-hero .who b{display:block;font-size:16px;letter-spacing:-.01em}
.acct-hero .who span{display:block;font-size:12.5px;color:var(--text-3);overflow:hidden;text-overflow:ellipsis}

/* ====== 0f ADMIN DIRECTORIES (round 6, docs/redesign/phase43-round6-brief.md 4 and 5)
   Long lists on admin screens: People and access (people-spec.md 11) and
   Communities and groups (communities-spec.md 6). Same scope as 0b to 0e
   (<html data-palette="admin">): club sites, MyHQ and the classic layout
   never see these. Kit variables only; 13 px floor; phone first (the base
   is the 390 value). Macros: skp/directory.html (adm_tabs with scroll,
   adm_search, adm_empty, adm_pager, th_sort).
   - .adm-search                 search field with its icon (card header,
                                 toolbar, or a tab row's right side)
   - .card-h:has(.adm-search)    header with a search: phones = title and
                                 action on line 1, the search full width below
   - .adm-tabs.is-scroll         in-card tabs on one line, sideways scroll
                                 on phones with an edge fade
   - .adm-tabbar                 round 7: a scrolling tab row that ends
                                 with a link (View all)
   - .adm-roster.is-rows         People rows; phone form = hairline rows
   - .adm-roster.is-list         Groups rows; phone form = two-line rows
   - .adm-role, .adm-lbl         role word + state tags; a phone-only marker
   - .adm-card-foot              View all link + "Showing 5 of 14"
   - .adm-toolbar, .adm-result   full page search row; "12 people match"
   - .adm-pager                  the position in words, Previous / Next
   - .adm-empty                  designed empty state inside a tab panel
   - .adm-bignums.is-compact     the two counts on one line (a card that
                                 also lists rows keeps the 2x2 height)
   ====== */

/* -- search field -- */
:root[data-palette="admin"] .adm-search{position:relative;display:flex;align-items:center;min-width:0;width:100%}
:root[data-palette="admin"] .adm-search>svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-3);pointer-events:none}
:root[data-palette="admin"] .adm-search input{width:100%;min-width:0;min-height:var(--adm-btn-h);padding:0 12px 0 38px;border:1px solid var(--border-strong);border-radius:var(--adm-btn-r);background:var(--surface);color:var(--text);font:500 14px/1.3 var(--font-ui);transition:border-color var(--t-fast) var(--ease)}
:root[data-palette="admin"] .adm-search input::placeholder{color:var(--text-3);font-weight:400}
:root[data-palette="admin"] .adm-search input:hover{border-color:var(--text-3)}
:root[data-palette="admin"] .adm-search input:focus{outline:none;border-color:var(--text);box-shadow:0 0 0 1px var(--text)}
:root[data-palette="admin"] .adm-search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;width:16px;height:16px;margin-left:var(--s-2);background:var(--text-3);cursor:pointer;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center/16px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center/16px no-repeat}
:root[data-palette="admin"] .adm-search input::-webkit-search-cancel-button:hover{background:var(--text)}
:root[data-palette="admin"] .adm-search.htmx-request>svg{animation:skp-spin .7s linear infinite}
@media(prefers-reduced-motion:reduce){:root[data-palette="admin"] .adm-search.htmx-request>svg{animation:none}}
/* inside a tab row: phones above the tabs, full width; from 640 at the right */
:root[data-palette="admin"] .adm-tabrow>.adm-search{flex:1 1 100%;order:-1;margin:var(--s-2) 0 0}
@media(min-width:640px){:root[data-palette="admin"] .adm-tabrow>.adm-search{flex:0 1 300px;order:0;margin:var(--s-2) 0 var(--s-2) auto}}

/* -- a card header that carries a search -- */
:root[data-palette="admin"] .adm-main .card .card-h:has(.adm-search){flex-wrap:wrap;row-gap:var(--s-3)}
:root[data-palette="admin"] .adm-main .card .card-h:has(.adm-search)>h3{flex:1 1 auto;min-width:0}
@media(max-width:767px){
  :root[data-palette="admin"] .adm-main .card .card-h:has(.adm-search)>.push{display:contents}
  :root[data-palette="admin"] .adm-main .card .card-h:has(.adm-search) .adm-search{order:3;flex:1 1 100%}
}
@media(min-width:768px){:root[data-palette="admin"] .adm-main .card .card-h .push>.adm-search{width:280px}}

/* -- one-line tabs that scroll sideways (phones) -- */
:root[data-palette="admin"] .adm-tabs.is-card.is-scroll{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;margin-bottom:0}
@media(max-width:639px){
  /* the last tab fades at the edge, so a cut-off tab reads as "more this
     way"; the end padding lets the last tab scroll clear of the fade */
  :root[data-palette="admin"] .adm-tabs.is-card.is-scroll{padding-inline-end:var(--s-8);-webkit-mask-image:linear-gradient(to right,#000 calc(100% - var(--s-8)),transparent);mask-image:linear-gradient(to right,#000 calc(100% - var(--s-8)),transparent)}
}
:root[data-palette="admin"] .adm-tabs.is-card.is-scroll::-webkit-scrollbar{display:none}
:root[data-palette="admin"] .adm-tabs.is-card.is-scroll{border-bottom:1px solid var(--border)}
:root[data-palette="admin"] .adm-tabrow>.adm-tabs.is-card.is-scroll{border-bottom:0}
/* round 7: a tab row that ends with a link (People and access: View all).
   The bar scrolls (with the same edge fade on phones); the tabs inside it
   stay one line; the link sits at the right when there's room, else at
   the end of the row */
:root[data-palette="admin"] .adm-tabbar{display:flex;flex-wrap:nowrap;align-items:center;gap:var(--s-5);overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;border-bottom:1px solid var(--border)}
:root[data-palette="admin"] .adm-tabbar::-webkit-scrollbar{display:none}
:root[data-palette="admin"] .adm-tabbar>.adm-tabs.is-card{flex:0 0 auto;flex-wrap:nowrap;margin:0;border-bottom:0}
:root[data-palette="admin"] .adm-tabbar>.adm-more{flex:0 0 auto;margin-left:auto;white-space:nowrap}
@media(max-width:639px){
  :root[data-palette="admin"] .adm-tabbar{padding-inline-end:var(--s-8);-webkit-mask-image:linear-gradient(to right,#000 calc(100% - var(--s-8)),transparent);mask-image:linear-gradient(to right,#000 calc(100% - var(--s-8)),transparent)}
}

/* -- roster: role word + tags in one cell; server-sorted headers -- */
:root[data-palette="admin"] .adm-role{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-1) var(--s-2)}
:root[data-palette="admin"] .adm-lbl{display:none}
:root[data-palette="admin"] .adm-roster th.sortable{cursor:pointer;white-space:nowrap}
:root[data-palette="admin"] .adm-roster th.sortable:hover{color:var(--text)}
:root[data-palette="admin"] .adm-roster th[aria-sort] .arr{margin-left:4px;color:var(--text)}
:root[data-palette="admin"] .adm-roster td.nowrap{white-space:nowrap}
:root[data-palette="admin"] .adm-roster tbody tr{border-bottom:1px solid var(--border)}
:root[data-palette="admin"] .adm-roster tbody tr:last-child{border-bottom:0}
:root[data-palette="admin"] .adm-roster tbody td{border-bottom:0}
:root[data-palette="admin"] .adm-roster .adm-once{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);margin-top:var(--s-1);white-space:normal}
@media(min-width:640px){
  :root[data-palette="admin"] .adm-roster.is-rows thead th{border-bottom:1px solid var(--border)}
  :root[data-palette="admin"] .adm-roster.is-rows{table-layout:fixed}
  :root[data-palette="admin"] .adm-roster.is-rows thead th:first-child{width:44%}
  :root[data-palette="admin"] .adm-roster.is-rows .person small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* -- People rows, phone form: hairline rows. Line 1 = avatar, name,
   email, the kebab; line 2 = role with its tags, then the clock and last
   active. No dot separators (a wrapped line never opens with one). Phone
   numbers stay on the profile (the column hides under 640). -- */
@media(max-width:639px){
  :root[data-palette="admin"] .card .table-scroll:has(.adm-roster.is-rows){overflow:visible}
  :root[data-palette="admin"] .adm-roster.is-rows{display:block;min-width:0}
  :root[data-palette="admin"] .adm-roster.is-rows thead{display:none}
  :root[data-palette="admin"] .adm-roster.is-rows tbody{display:block;padding:0}
  :root[data-palette="admin"] .adm-roster.is-rows tbody tr{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-1) var(--s-4);padding:var(--s-3) 0 var(--s-3) 48px}
  :root[data-palette="admin"] .adm-roster.is-rows tbody tr:hover{background:none}
  :root[data-palette="admin"] .adm-roster.is-rows tbody td{display:block;padding:0;border:0;font:400 13px/1.4 var(--font-ui);color:var(--text-3)}
  :root[data-palette="admin"] .adm-roster.is-rows tbody td:first-child{font-weight:400}
  :root[data-palette="admin"] .adm-roster.is-rows td.cell-person{flex:0 0 calc(100% + 48px);min-width:0;margin:0 0 2px -48px;padding-right:44px;color:var(--text)}
  :root[data-palette="admin"] .adm-roster.is-rows td.cell-actions{position:absolute;top:var(--s-2);right:0}
  :root[data-palette="admin"] .adm-roster.is-rows td.is-meta{display:inline-flex;align-items:center;gap:6px;min-width:0}
  :root[data-palette="admin"] .adm-roster.is-rows td.is-meta:empty{display:none}
  :root[data-palette="admin"] .adm-roster.is-rows td.is-hide-sm{display:none}
  :root[data-palette="admin"] .adm-roster.is-rows .adm-lbl{display:inline-flex;color:var(--text-3)}
  :root[data-palette="admin"] .adm-roster.is-rows td.empty-cell{display:block;flex:0 0 calc(100% + 48px);margin-left:-48px}
}

/* -- Groups rows, phone form: two-line list rows (name; then "Members N"
   and any state tags; the kebab on the right), about 64 px each -- */
@media(max-width:639px){
  :root[data-palette="admin"] .adm-roster.collapsing.is-list tbody{padding:0}
  :root[data-palette="admin"] .adm-roster.collapsing.is-list tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px var(--s-3);margin:0;padding:var(--s-3) 0;border:0;border-bottom:1px solid var(--border);border-radius:0;box-shadow:none;background:none}
  :root[data-palette="admin"] .adm-roster.collapsing.is-list tbody tr:last-child{border-bottom:0}
  :root[data-palette="admin"] .adm-roster.collapsing.is-list td{grid-column:1;justify-content:flex-start;gap:var(--s-2);padding:0}
  :root[data-palette="admin"] .adm-roster.collapsing.is-list td.cell-person{display:block;margin:0;padding:0;border:0;font-weight:600}
  :root[data-palette="admin"] .adm-roster.collapsing.is-list td.cell-actions{position:static;grid-column:2;grid-row:1 / span 3;align-self:start;margin:0;padding:0;border:0}
  :root[data-palette="admin"] .adm-roster.collapsing.is-list td.empty-cell{grid-column:1 / -1}
}
@media(min-width:640px){:root[data-palette="admin"] .adm-roster.is-list{min-width:0}}

/* -- card footer: the View all link, the position in words -- */
:root[data-palette="admin"] .adm-card-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-2) var(--s-4)}
:root[data-palette="admin"] .adm-card-foot>p{font:var(--adm-label);color:var(--text-3)}

/* -- full page toolbar: search, the phone sort, the result line -- */
:root[data-palette="admin"] .adm-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3)}
:root[data-palette="admin"] .adm-toolbar>.adm-search{flex:1 1 100%}
:root[data-palette="admin"] .adm-toolbar>.selectwrap{flex:0 0 auto}
:root[data-palette="admin"] .adm-toolbar>.selectwrap select{min-height:var(--adm-btn-h);padding:0 46px 0 12px;font:500 14px/1.3 var(--font-ui)}
@media(min-width:640px){
  :root[data-palette="admin"] .adm-toolbar>.adm-search{flex:0 1 440px}
  :root[data-palette="admin"] .adm-toolbar>.selectwrap{display:none}
}
:root[data-palette="admin"] .adm-result{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-1) var(--s-3);font:var(--adm-label);color:var(--text-2)}
:root[data-palette="admin"] .adm-result b{font-weight:600;color:var(--text)}
:root[data-palette="admin"] .adm-result button,
:root[data-palette="admin"] .adm-result a{min-height:var(--adm-btn-h);display:inline-flex;align-items:center;padding:0;border:0;background:none;cursor:pointer;color:var(--text);font:600 13px/1 var(--font-ui);text-decoration:underline;text-underline-offset:3px}

/* -- pager: the position in words, then Previous / Next -- */
:root[data-palette="admin"] .adm-pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-3);padding-top:var(--adm-stack);border-top:1px solid var(--border)}
:root[data-palette="admin"] .adm-pager>p{font:var(--adm-label);color:var(--text-3);font-variant-numeric:tabular-nums}
:root[data-palette="admin"] .adm-pager>p b{font-weight:600;color:var(--text-2)}
:root[data-palette="admin"] .adm-pager>span{display:flex;gap:var(--s-2)}
@media(max-width:639px){
  :root[data-palette="admin"] .adm-pager>span{flex:1 1 100%}
  :root[data-palette="admin"] .adm-pager>span>.btn{flex:1 1 0;justify-content:center}
}
:root[data-palette="admin"] .adm-pager .btn[aria-disabled="true"]{opacity:.45;pointer-events:none}

/* -- designed empty state inside a tab panel: icon tile, title, one or two
   lines, an optional action. No dashed box (that reads as a drop zone). -- */
:root[data-palette="admin"] .adm-empty{display:grid;justify-items:center;gap:var(--s-2);padding:var(--s-8) var(--s-4);text-align:center}
:root[data-palette="admin"] .adm-empty>.adm-ic{position:static;margin-bottom:var(--s-1)}
:root[data-palette="admin"] .adm-empty>b{font:600 15px/1.35 var(--font-ui);color:var(--text)}
:root[data-palette="admin"] .adm-empty>p{max-width:56ch;font:400 13px/1.5 var(--font-ui);color:var(--text-3)}
:root[data-palette="admin"] .adm-empty>.btn,
:root[data-palette="admin"] .adm-empty>.adm-more{margin-top:var(--s-2)}
@media(min-width:1024px){
  :root[data-palette="admin"] .adm-empty{padding:var(--s-10) var(--s-6)}
  /* in a card, an empty tab keeps about the height of a 5-row preview so
     switching tabs doesn't jump the page */
  :root[data-palette="admin"] .card .adm-empty{min-height:20rem;align-content:center}
}

/* -- the two counts on one line (Communities and groups card) -- */
:root[data-palette="admin"] .adm-bignums.is-compact{gap:var(--s-2)}
:root[data-palette="admin"] .adm-bignums.is-compact .adm-bignum{flex-direction:row-reverse;justify-content:flex-end;align-items:baseline;gap:var(--s-2);padding:var(--s-2) var(--s-3)}
:root[data-palette="admin"] .adm-bignums.is-compact .adm-bignum dd{font:600 22px/1.2 var(--font-ui);letter-spacing:-.01em}

/* ====== 0g APP SETUP (Mobile app setup, docs/mobileapp-config-spec.md)
   The Mothership page where staff set up one club's app, and the client
   page's Mobile app card. Same scope as 0b to 0f (<html data-palette=
   "admin">): club sites, MyHQ and the classic layout never see it. Kit
   variables only; 13 px is the smallest text (the drawings included: they
   are drawn 1:1); phone first (the base is the 390 value). Brand colors
   reach this page only as SVG fills (data), never as styles.
   - .adm-apphead              the page's display moment: icon, app name,
                               state tag, missing items, last change
   - .adm-appicon              an app icon tile (the store icon's rounded
                               square; its radius is the icon mask's 22.4%,
                               outside the kit's 4 / 8 scale on purpose):
                               .is-sm 40, base 56, .is-lg 72 (88 from 1024),
                               .is-none = initials on a quiet tile
   - .adm-appline              the card's app line: icon, name, bundle id
   - .adm-appgrid              the page: a form column, then the Preview
                               card; from 1280 the Preview is a sticky rail
   - form.adm-form             a card-level form keeps the round 7 rhythm
   - .adm-frow.is-half         two equal fields from 640
   - .adm-color                a color field: native picker + hex input
   - .adm-colorrow             the brand color with the club color and its
                               return action beside it
   - .adm-tokens, .adm-token   the computed tokens, Light | Dark, contrast
   - .adm-actrow.has-thumb     an action row with a picture on its left
   - .adm-actrow.has-desc      an action row with a description under its
                               label: the label reads as the row's title
   - .adm-hometile, .adm-launch, .adm-artthumb   the Artwork pictures
   - .adm-featgroups, .adm-featgroup   the Features card's groups
   - .switch.is-row.is-nested  a child switch row (indent and elbow)
   - .adm-onlist               the always-on list
   - .adm-seg.is-view          a view toggle made of radios (not a save)
   - .adm-appview, .adm-phone  the Preview card and its drawings
   Macros: skp/macros.html (adm_color, adm_filebtn, adm_view_seg,
   adm_appicon, adm_token; text_field, switchrow and adm_actrow gain
   keyword arguments). JS: ui-kit.js (color pairs, follow-theme). ====== */

/* -- the page head: the display moment -- */
:root[data-palette="admin"] .adm-apphead{display:flex;align-items:center;gap:var(--s-4);min-width:0}
:root[data-palette="admin"] .adm-apphead-t{flex:1;display:grid;gap:6px;min-width:0}
:root[data-palette="admin"] .adm-apphead h2{font:700 28px/1.1 var(--font-ui);letter-spacing:-.02em;color:var(--text);overflow-wrap:anywhere}
:root[data-palette="admin"] .adm-apphead-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-1) var(--s-3);font:var(--adm-label);color:var(--text-3)}
:root[data-palette="admin"] .adm-apphead-meta b{font-weight:600;color:var(--text)}
:root[data-palette="admin"] .adm-apphead-jump{flex:none;align-self:flex-start}
@media(max-width:479px){
  :root[data-palette="admin"] .adm-apphead{flex-wrap:wrap}
  :root[data-palette="admin"] .adm-apphead-t{flex-basis:calc(100% - 72px - var(--s-4))}
  :root[data-palette="admin"] .adm-apphead-jump{order:3;align-self:auto}
}
@media(min-width:1024px){
  :root[data-palette="admin"] .adm-apphead{gap:var(--s-5)}
  :root[data-palette="admin"] .adm-apphead h2{font-size:36px;line-height:1.08}
}

/* -- app icon tile -- */
:root[data-palette="admin"] .adm-appicon{flex:none;display:grid;place-items:center;width:56px;height:56px;overflow:hidden;border-radius:12.5px;background:var(--surface-2);color:var(--text-3);font:700 18px/1 var(--font-ui);outline:1px solid var(--border);outline-offset:-1px}
:root[data-palette="admin"] .adm-appicon img{display:block;width:100%;height:100%;object-fit:cover}
:root[data-palette="admin"] .adm-appicon.is-sm{width:40px;height:40px;border-radius:9px;font-size:14px}
:root[data-palette="admin"] .adm-appicon.is-lg{width:72px;height:72px;border-radius:16px;font-size:22px}
@media(min-width:1024px){:root[data-palette="admin"] .adm-appicon.is-lg{width:88px;height:88px;border-radius:19.7px;font-size:26px}}

/* -- the card's app line -- */
:root[data-palette="admin"] .adm-appline{display:flex;align-items:center;gap:var(--s-3);min-width:0}
:root[data-palette="admin"] .adm-appline-t{display:grid;justify-items:start;gap:4px;min-width:0}
:root[data-palette="admin"] .adm-appline-t b{font:600 15px/1.3 var(--font-ui);color:var(--text);overflow-wrap:anywhere}

/* -- the page grid: form column, Preview after it; a sticky rail from 1280
   (under the shell's sticky top bar, 73 px, as .wiki) -- */
:root[data-palette="admin"] .adm-appgrid{display:grid;gap:var(--adm-gap);grid-template-columns:minmax(0,1fr);align-items:start}
:root[data-palette="admin"] .adm-appgrid-main{display:grid;gap:var(--adm-gap);grid-template-columns:minmax(0,1fr);min-width:0}
@media(min-width:1280px){
  :root[data-palette="admin"] .adm-appgrid{grid-template-columns:minmax(0,1fr) 352px}
  :root[data-palette="admin"] .adm-appgrid>.adm-appview{position:sticky;top:calc(73px + var(--adm-gap))}
  :root[data-palette="admin"] .adm-apphead-jump{display:none}
}

/* -- a form that is a card's body (round 7's .adm-form, outside a drawer) -- */
:root[data-palette="admin"] form.adm-form{display:grid;align-content:start;gap:var(--s-5)}
@media(min-width:640px){:root[data-palette="admin"] .adm-frow.is-half{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* -- color field: the native picker as a 44 px swatch (36 from 1024), the
   hex beside it; the swatch's frame is neutral (anti-patterns 1) -- */
:root[data-palette="admin"] .adm-color-in{display:flex;align-items:center;gap:var(--s-2)}
:root[data-palette="admin"] .adm-color-pick{flex:none;inline-size:var(--adm-btn-h);block-size:var(--adm-btn-h);padding:3px;border:1px solid var(--border-strong);border-radius:var(--r-1);background:var(--surface);cursor:pointer;-webkit-appearance:none;appearance:none}
:root[data-palette="admin"] .adm-color-pick::-webkit-color-swatch-wrapper{padding:0}
:root[data-palette="admin"] .adm-color-pick::-webkit-color-swatch{border:0;border-radius:2px}
:root[data-palette="admin"] .adm-color-pick::-moz-color-swatch{border:0;border-radius:2px}
:root[data-palette="admin"] .adm-color-pick:hover{border-color:var(--text-3)}
:root[data-palette="admin"] .adm-color-pick:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px;box-shadow:none}
:root[data-palette="admin"] .adm-color .input{inline-size:8.5rem;max-inline-size:100%;text-transform:uppercase}
:root[data-palette="admin"] .adm-colorrow{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--s-4) var(--s-6)}
:root[data-palette="admin"] .adm-colorrow-club{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-3);min-height:var(--adm-btn-h)}

/* -- the computed tokens: Light | Dark from 640; each a swatch (the
   pairing it is judged on), name, hex and contrast, a tag when low -- */
:root[data-palette="admin"] .adm-tokens{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-5);padding-top:var(--adm-stack);border-top:1px solid var(--border)}
@media(min-width:640px){:root[data-palette="admin"] .adm-tokens{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-6)}}
:root[data-palette="admin"] .adm-tokenset{display:grid;gap:var(--s-3);align-content:start;min-width:0}
:root[data-palette="admin"] .adm-tokenset>h4{font:600 13px/1.4 var(--font-ui);color:var(--text-2)}
:root[data-palette="admin"] .adm-tokenset>ul{display:grid;gap:var(--s-3);list-style:none}
:root[data-palette="admin"] .adm-token{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:var(--s-1) var(--s-3);min-width:0}
:root[data-palette="admin"] .adm-token>svg{display:block;border-radius:var(--r-1);outline:1px solid var(--border);outline-offset:-1px}
:root[data-palette="admin"] .adm-token text{font-family:var(--font-ui)}
:root[data-palette="admin"] .adm-token-t{display:grid;gap:2px;min-width:0}
:root[data-palette="admin"] .adm-token-t b{font:500 14px/1.3 var(--font-ui);color:var(--text)}
:root[data-palette="admin"] .adm-token-t small{display:flex;flex-wrap:wrap;gap:0 var(--s-3);font:400 13px/1.35 var(--font-ui);color:var(--text-3);font-variant-numeric:tabular-nums}
:root[data-palette="admin"] .adm-token-hex{font-family:var(--font-code)}
@media(max-width:479px){:root[data-palette="admin"] .adm-token>.adm-tag{grid-column:2;justify-self:start}}

/* -- an action row with a picture on its left (Artwork). Phones: the
   picture and the words on one line, the actions under them -- */
:root[data-palette="admin"] .adm-actrow-thumb{flex:none;display:grid;place-items:center;inline-size:96px;min-block-size:96px}
:root[data-palette="admin"] .adm-actrow.has-thumb .adm-actrow-t{flex:1 1 140px}
:root[data-palette="admin"] .adm-actrow.has-thumb .adm-actrow-v{min-height:26px}
/* a row with a description: its label is the row's title (.switch-title's
   600 15 px in --text), the description the muted 13 px sub line */
:root[data-palette="admin"] .adm-actrow.has-desc .adm-actrow-l{font:600 15px/1.35 var(--font-ui);color:var(--text)}
@media(max-width:639px){
  :root[data-palette="admin"] .adm-actrow.has-thumb .adm-actrow-h{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:center}
  :root[data-palette="admin"] .adm-actrow.has-thumb .adm-actrow-go{grid-column:1/-1}
}
:root[data-palette="admin"] .adm-hometile,
:root[data-palette="admin"] .adm-launch{display:block}
:root[data-palette="admin"] .adm-hometile text,
:root[data-palette="admin"] .adm-launch text,
:root[data-palette="admin"] .adm-phone text{font-family:var(--font-ui)}
:root[data-palette="admin"] .adm-artthumb{display:block;inline-size:72px;block-size:96px;border-radius:var(--r-2);object-fit:cover;background:var(--surface-2);outline:1px solid var(--border);outline-offset:-1px}
:root[data-palette="admin"] .adm-artthumb.is-none{display:grid;place-items:center;color:var(--text-3)}

/* -- Features: groups (two columns from 768), one switch per row with a
   hairline between; a child row sits under its parent with an elbow -- */
:root[data-palette="admin"] .adm-featgroups{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-6)}
@media(min-width:768px){:root[data-palette="admin"] .adm-featgroups{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-6) var(--s-8)}}
:root[data-palette="admin"] .adm-featgroup{display:grid;align-content:start;min-width:0}
:root[data-palette="admin"] .adm-featgroup>h4{padding-bottom:var(--s-2);border-bottom:1px solid var(--border);font:600 13px/1.4 var(--font-ui);color:var(--text-2)}
:root[data-palette="admin"] .adm-featgroup .switch.is-row{min-height:52px;padding:var(--s-2) 0;border-bottom:1px solid var(--border);color:var(--text)}
:root[data-palette="admin"] .adm-featgroup .switch.is-row:last-child{border-bottom:0}
:root[data-palette="admin"] .adm-featgroup .switch-title{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-1) var(--s-2);font:500 14px/1.35 var(--font-ui)}
:root[data-palette="admin"] .switch.is-row.is-nested{padding-left:var(--s-6)}
:root[data-palette="admin"] .switch.is-row.is-nested .switch-body{position:relative}
:root[data-palette="admin"] .switch.is-row.is-nested .switch-body::before{content:"";position:absolute;left:calc(-1 * var(--s-4));top:-2px;inline-size:10px;block-size:11px;border-left:1.5px solid var(--border-strong);border-bottom:1.5px solid var(--border-strong);border-bottom-left-radius:3px}
:root[data-palette="admin"] .adm-onlist{display:grid;list-style:none}
:root[data-palette="admin"] .adm-onlist>li{display:flex;align-items:center;gap:var(--s-2);min-height:40px;border-bottom:1px solid var(--border);font:500 14px/1.35 var(--font-ui);color:var(--text)}
:root[data-palette="admin"] .adm-onlist>li:last-child{border-bottom:0}
:root[data-palette="admin"] .adm-onlist>li>svg{flex:none;color:var(--text-3)}

/* -- a view toggle made of radios (the .adm-seg look; nothing saves) -- */
:root[data-palette="admin"] .adm-seg.is-view>label{position:relative;display:grid}
:root[data-palette="admin"] .adm-seg.is-view input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
:root[data-palette="admin"] .adm-seg.is-view span{display:grid;place-items:center;min-height:calc(var(--adm-btn-h) - 6px);padding:0 var(--s-3);border-radius:calc(var(--r-2) - 3px);color:var(--text-2);font:500 13px/1.2 var(--font-ui);white-space:nowrap}
:root[data-palette="admin"] .adm-seg.is-view label:hover span{color:var(--text)}
:root[data-palette="admin"] .adm-seg.is-view input:checked+span{background:var(--surface);color:var(--text);font-weight:600;box-shadow:var(--shadow-1)}
/* dark: the picked option sits above its track, not pressed into it */
:root[data-palette="admin"][data-theme="dark"] .adm-seg button[aria-pressed="true"],
:root[data-palette="admin"][data-theme="dark"] .adm-seg.is-view input:checked+span{background:var(--border-strong);box-shadow:none}
:root[data-palette="admin"] .adm-seg.is-view input:focus-visible+span{box-shadow:var(--focus-ring)}

/* -- the Preview card: the app drawn 1:1 (300 wide), Light or Dark -- */
:root[data-palette="admin"] .adm-appview .card-b{display:grid;justify-items:center}
:root[data-palette="admin"] .adm-phone{display:block;inline-size:300px;max-inline-size:100%;block-size:auto}
:root[data-palette="admin"] .adm-appview .adm-phone.is-dark,
:root[data-palette="admin"] .adm-appview:has(.adm-seg input[value="dark"]:checked) .adm-phone.is-light{display:none}
:root[data-palette="admin"] .adm-appview:has(.adm-seg input[value="dark"]:checked) .adm-phone.is-dark{display:block}

/* ====== 0h + 0i PHONE SIGN-IN (docs/auth/phone-sign-in/spec.md section 4.2)
   Adopted from the design advisor's proposed-kit.css. Nothing here
   overrides an earlier kit rule: 0h adds three generic pieces (btn-block,
   button.plain, the bottom-sheet dialog) and the busy button; 0i is the
   sign-in family (.signin*, .otp*). Macros: skp/macros.html (otp_field,
   sheet, text_field's autocomplete). JS: ui-kit.js (code cells, countdown,
   phone format, sheets, busy submit). ====== */

/* ====== 0h GENERIC ADDITIONS ================================================ */

/* sheets only: the one larger radius, used by bottom sheets (the app's
   journey sheet and account sheet already draw 18 to 20 px) */
:root { --r-sheet: 20px; }

/* a full-width button (the kit's .btn is inline-flex) */
.btn-block { display: flex; width: 100%; justify-content: center; }

/* a button that reads like a.plain (a POST that must look like a link) */
button.plain {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-weight: 700; color: var(--accent-ink);
}
button.plain:hover { text-decoration: underline; }
button.plain[disabled] { color: var(--text-3); cursor: default; text-decoration: none; }

/* a busy submit (ui-kit.js data-skp-busy) is working, not unavailable:
   full strength, while its label says what is happening */
.btn[aria-busy="true"] { opacity: 1; cursor: progress; }

/* dialog.skp-sheet: the bottom sheet (choices, never confirms; confirms stay
   dialog.skp-modal). Bottom of the screen on phones, centered from 640. */
dialog.skp-sheet {
  margin: auto auto 0; width: 100%; max-width: none; max-height: 92dvh;
  padding: 0; border: 0; background: transparent; color: var(--text);
}
dialog.skp-sheet::backdrop { background: rgb(10 10 15 / .48); }
dialog.skp-sheet[open] { animation: skp-sheet-in var(--t-sheet) var(--ease-sheet); }
@keyframes skp-sheet-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.skp-sheet-body {
  display: flex; flex-direction: column; gap: var(--s-2);
  background: var(--bg); border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  padding: var(--s-5) var(--s-4) calc(var(--s-5) + env(safe-area-inset-bottom));
}
.skp-sheet-title { font: 800 20px/1.25 var(--font-ui); letter-spacing: -.01em; padding: 0 var(--s-2); }
.skp-sheet-note { font: 400 14px/1.5 var(--font-ui); color: var(--text-2); padding: 0 var(--s-2) var(--s-2); }
[data-theme="dark"] .skp-sheet-body { box-shadow: 0 -1px 0 var(--border); }
@media (min-width: 640px) {
  dialog.skp-sheet { margin: auto; width: 440px; }
  .skp-sheet-body { border-radius: var(--r-2); box-shadow: var(--shadow-2); }
  [data-theme="dark"] .skp-sheet-body { box-shadow: 0 0 0 1px var(--border), var(--shadow-2); }
}
@media (prefers-reduced-motion: reduce) { dialog.skp-sheet[open] { animation: none; } }

/* ====== 0i SIGN-IN: the club-branded SKP ID pages ============================
   The app's arrival journey (poster + bottom sheet, brief-mobileapp round 3)
   promoted to the kit, so SKP ID and the app render ONE implementation
   (apps never import apps). The art (photo, or the plain stage when a club
   has none, its scrim, and the text on it) is theme-invariant; the sheet
   themes with kit tokens. Brand: --accent / --on-accent / --accent-ink,
   server-emitted per club and per theme (skp_brand.tokens_from_primary).
   Layout: the sheet sits in thumb reach on phones; 480 px column from 640;
   from 1024 the column centers and the club mark moves to the corner. */

body.signin-body {
  background: var(--bg); color: var(--text);
  font: 400 16px/1.55 var(--font-ui); -webkit-font-smoothing: antialiased;
}
.signin {
  position: relative; isolation: isolate;
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; background: #0F0F14;
}

/* -- the art --------------------------------------------------------------- */
.signin-bg { position: absolute; inset: 0; z-index: -1; margin: 0; overflow: hidden; background: #121014; }
.signin-bg img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* baked scrim: text on the art is always light */
.signin-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgb(10 10 15 / .55) 0%, rgb(10 10 15 / .15) 38%,
    rgb(10 10 15 / .62) 78%, rgb(10 10 15 / .82) 100%);
}
.signin.is-task .signin-bg::after {
  background: linear-gradient(180deg,
    rgb(10 10 15 / .6) 0%, rgb(10 10 15 / .5) 30%, rgb(10 10 15 / .72) 100%);
}
/* no photo: a tonal wash of the club's own color over ink, plus court lines
   (anti-patterns 2: a single-hue wash, never a two-color gradient) */
.signin-bg.is-plain {
  background: radial-gradient(130% 70% at 12% 0%,
    color-mix(in srgb, var(--accent) 30%, #0F0F14) 0%, #0F0F14 66%);
}
.signin-bg.is-plain::after { background: linear-gradient(180deg, rgb(10 10 15 / 0) 45%, rgb(10 10 15 / .55) 100%); }
.signin-court { position: absolute; inset: 0; width: 100%; height: 100%; color: #FAFAF9; opacity: .1; }

/* -- the club, top left ------------------------------------------------------ */
.signin-top {
  display: flex; align-items: center; gap: var(--s-3); min-width: 0;
  padding: calc(var(--s-6) + env(safe-area-inset-top)) var(--s-5) 0;
}
.signin-logo { display: block; width: 48px; height: 48px; flex: none; border-radius: var(--r-2); object-fit: contain; }
.signin-mark {
  display: grid; place-items: center; width: 48px; height: 48px; flex: none;
  border-radius: var(--r-2); background: var(--accent); color: var(--on-accent);
  font: 800 17px/1 var(--font-ui); letter-spacing: -.01em;
}
.signin-app {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 700 16px/1.2 var(--font-ui); color: #FAFAF9;
}

/* -- the display moment, on the art ------------------------------------------ */
.signin-pitch { margin-top: auto; padding: var(--s-10) var(--s-5) var(--s-6); }
.signin-title {
  font: 800 40px/1.05 var(--font-ui); letter-spacing: -.02em; color: #FAFAF9;
  text-wrap: balance; overflow-wrap: anywhere;
}
.signin-sub {
  margin-top: var(--s-3); max-width: 34ch;
  font: 500 16px/1.5 var(--font-ui); color: rgb(250 250 249 / .86);
}
.signin-sub b { font-weight: 700; color: #FAFAF9; white-space: nowrap; }

/* -- the sheet: the work ------------------------------------------------------ */
.signin-sheet {
  display: flex; flex-direction: column;
  background: var(--bg); border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  padding: var(--s-6) var(--s-5) var(--s-5);
}
[data-theme="dark"] .signin-sheet { box-shadow: 0 -1px 0 var(--border); }
.signin.is-task .signin-sheet { margin-top: auto; padding-top: var(--s-8); }
.signin-sheet > * + * { margin-top: var(--s-4); }
.signin-h {
  font: 800 26px/1.15 var(--font-ui); letter-spacing: -.015em; color: var(--text);
  text-wrap: balance; overflow-wrap: anywhere;
}
.signin-sheet > .signin-lede { margin-top: var(--s-2); }
.signin-lede { font: 400 15px/1.5 var(--font-ui); color: var(--text-2); }
.signin-lede b { color: var(--text); font-weight: 700; white-space: nowrap; }
.signin-form { display: flex; flex-direction: column; gap: var(--s-3); }
.signin-sheet .field label {
  font: 700 13px/1.3 var(--font-ui); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--text-3);
}
.signin-sheet .field .hint { font-size: 14px; }
/* one input size across the journey: the phone field and the code cells
   are the same weight (brief-mobileapp, Lance 09-05) */
.signin-sheet .input { min-height: 60px; font-size: 18px; font-weight: 600; }
.signin-sheet .input::placeholder { font-weight: 500; }
.signin-sheet .btn-lg { font-size: 16px; }
.signin-sheet .btn-ghost { min-height: 48px; font-size: 14.5px; }
.signin-fine { font: 400 13.5px/1.5 var(--font-ui); color: var(--text-3); }
.signin-fine.is-center { text-align: center; }
.signin-actions { display: flex; flex-direction: column; gap: var(--s-1); }

/* resend: a quiet row under the code; the countdown never shifts the row */
.signin-resend { display: flex; align-items: center; justify-content: center; gap: var(--s-1); }
.signin-resend .btn { flex: none; padding: 0 var(--s-2); font-variant-numeric: tabular-nums; }
.signin-resend .btn:not([disabled]) { color: var(--accent-ink); }

/* a number SKP ID remembers on this device (masked) */
.signin-known {
  display: flex; align-items: center; gap: var(--s-3); min-height: 60px; padding: 0 var(--s-4);
  border: 1px solid var(--border); border-radius: var(--r-1); background: var(--surface-2);
  font: 600 18px/1 var(--font-ui); font-variant-numeric: tabular-nums; color: var(--text);
}
.signin-known svg { flex: none; color: var(--text-3); }

/* a finished step, stated (the app's register after the hand-off) */
.signin-done { display: flex; align-items: center; gap: var(--s-2); font: 600 14px/1.4 var(--font-ui); color: var(--ok); }
.signin-done svg { flex: none; }

/* -- the six code cells: ONE real input (autocomplete=one-time-code, so
      iOS and Android autofill it) laid over six drawn cells; ui-kit.js
      mirrors the value into the cells and marks the next one active.
      The overlay (transparent text over the cells) applies only while the
      kit's JS runs ([data-skp-js] on <html>, set by ui-kit.js); without it
      the cells hide and the input is a plain visible field that posts. -- */
.otp { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-2); }
.otp-cell {
  display: grid; place-items: center; height: 64px;
  border: 1px solid var(--border-strong); border-radius: var(--r-1); background: var(--surface);
  font: 700 28px/1 var(--font-ui); font-variant-numeric: tabular-nums; color: var(--text);
  transition: border-color var(--t-fast) var(--ease);
}
.otp-cell.is-active { border-color: var(--text); box-shadow: 0 0 0 1px var(--text); }
.otp-cell.is-active:empty::after {
  content: ""; width: 2px; height: 28px; border-radius: 1px;
  background: var(--accent-ink); animation: otp-caret 1.1s steps(1) infinite;
}
@keyframes otp-caret { 50% { opacity: 0; } }
.otp.is-invalid .otp-cell { border-color: var(--danger); color: var(--danger); }
.otp.is-invalid .otp-cell.is-active { box-shadow: 0 0 0 1px var(--danger); }
.otp.is-off .otp-cell { background: var(--surface-2); border-color: var(--border); }
[data-skp-js] .otp-input {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; margin: 0;
  background: transparent; color: transparent; caret-color: transparent;
  -webkit-text-fill-color: transparent; font-size: 16px; letter-spacing: 1em; outline: none;
}
[data-skp-js] .otp-input:focus-visible { box-shadow: none; }
[data-skp-js] .otp-input::selection { background: transparent; }
@media (prefers-reduced-motion: reduce) { .otp-cell.is-active:empty::after { animation: none; } }
/* no JS: one plain field, the cells' weight, the digits spaced */
:root:not([data-skp-js]) .otp { display: block; }
:root:not([data-skp-js]) .otp-cell { display: none; }
:root:not([data-skp-js]) .otp-input {
  display: block; width: 100%; height: 64px; padding: 0 var(--s-4);
  border: 1px solid var(--border-strong); border-radius: var(--r-1); background: var(--surface);
  font: 700 28px/1 var(--font-ui); font-variant-numeric: tabular-nums; letter-spacing: .25em; color: var(--text);
}
:root:not([data-skp-js]) .otp-input:focus { outline: none; border-color: var(--text); box-shadow: 0 0 0 1px var(--text); }
:root:not([data-skp-js]) .otp.is-invalid .otp-input { border-color: var(--danger); color: var(--danger); }
:root:not([data-skp-js]) .otp.is-off .otp-input { background: var(--surface-2); border-color: var(--border); }

/* -- choosing a person, and the found family ---------------------------------- */
.signin-picks { display: flex; flex-direction: column; gap: var(--s-2); }
.signin-pick {
  display: flex; align-items: center; gap: var(--s-3); width: 100%; min-height: 68px;
  padding: var(--s-3) var(--s-4); border: 1px solid var(--border); border-radius: var(--r-2);
  background: var(--surface); box-shadow: var(--shadow-1); color: var(--text);
  font: inherit; text-align: left; text-decoration: none; cursor: pointer;
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.signin-pick:hover { background: var(--surface-2); }
.signin-pick:active { transform: scale(.99); }
.signin-pick > svg { flex: none; color: var(--text-3); }
.signin-pick-body { flex: 1; min-width: 0; }
.signin-pick-name { display: block; font: 700 16px/1.3 var(--font-ui); }
.signin-pick-sub {
  display: block; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 400 13.5px/1.4 var(--font-ui); color: var(--text-3);
}
.signin-av {
  display: grid; place-items: center; width: 44px; height: 44px; flex: none;
  border-radius: var(--r-full); background: color-mix(in srgb, var(--accent) 18%, var(--surface));
  color: var(--accent-ink); font: 700 15px/1 var(--font-ui);
}
.signin-av.is-new { background: var(--surface-2); color: var(--text-2); }
.signin-ic {
  display: grid; place-items: center; width: 36px; height: 36px; flex: none;
  border-radius: var(--r-1); background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  color: var(--accent-ink);
}
.skp-sheet-body .signin-pick { box-shadow: none; }

.signin-list {
  border: 1px solid var(--border); border-radius: var(--r-2); background: var(--surface);
  box-shadow: var(--shadow-1); overflow: hidden;
}
.signin-row { display: flex; align-items: center; gap: var(--s-3); min-height: 64px; padding: var(--s-3) var(--s-4); }
.signin-row + .signin-row { border-top: 1px solid var(--border); }
.signin-row-name { flex: 1; min-width: 0; font: 600 16px/1.3 var(--font-ui); }
.signin-check {
  display: grid; place-items: center; width: 30px; height: 30px; flex: none;
  border-radius: var(--r-full); background: color-mix(in srgb, var(--accent) 16%, var(--surface));
  color: var(--accent-ink);
}
.signin-points { list-style: none; display: flex; flex-direction: column; gap: var(--s-3); }
.signin-points li { display: flex; align-items: center; gap: var(--s-3); font: 500 15px/1.4 var(--font-ui); }
.signin-points svg { flex: none; color: var(--accent-ink); }

/* the register fork (the app's "Who's this app for?"), on kit chip-toggles */
.signin-fork { border: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.signin-fork legend {
  margin-bottom: var(--s-2); font: 700 13px/1.3 var(--font-ui); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--text-3);
}
.signin-athlete { display: flex; gap: var(--s-2); }
.signin-athlete .input:first-child { flex: 1; min-width: 0; }
.signin-athlete .input.is-year { width: 96px; flex: none; }

/* -- the address this page is served from (anti-phishing; never removed) ---- */
.signin-foot {
  background: var(--bg); padding: 0 var(--s-5) calc(var(--s-6) + env(safe-area-inset-bottom));
  text-align: center; font: 500 13px/1.4 var(--font-ui); color: var(--text-3);
}

/* -- wider screens ---------------------------------------------------------- */
@media (min-width: 640px) {
  .signin-top, .signin-pitch, .signin-sheet, .signin-foot {
    width: 100%; max-width: 480px; margin-left: auto; margin-right: auto;
  }
  .signin-sheet { border-radius: var(--r-2) var(--r-2) 0 0; }
}
@media (min-width: 1024px) {
  .signin { padding-top: 104px; }
  .signin-top { position: absolute; top: 0; left: 0; max-width: none; margin: 0; padding: var(--s-8) var(--s-10); }
  .signin-pitch { padding: 0 0 var(--s-6); }
  .signin-title { font-size: 52px; }
  .signin-sheet, .signin.is-task .signin-sheet { margin-bottom: auto; border-radius: var(--r-2); padding: var(--s-8); box-shadow: var(--shadow-2); }
  [data-theme="dark"] .signin-sheet { box-shadow: 0 0 0 1px var(--border), var(--shadow-2); }
  .signin-foot { background: transparent; color: rgb(250 250 249 / .75); padding: var(--s-6) 0; }
}

/* ====== 0j PASSKEYS (docs/auth/passkeys/spec.md section 4.2)
   Adopted from the design advisor's proposed-kit.css for SKP ID's own
   pages: the sign-in card, the offer, the confirm step and /security.
   SKP ID wears SKP Black, so --accent is ink in light and paper in dark;
   nothing here hard-codes a color. The floor fix that came with it
   (.btn-sm to 13 px) is made in place, in 04 BUTTONS. Selectors that must
   beat SKP ID base.html's `.auth-card form` / `.auth-card h1` (0,1,1,
   declared later in the page) carry one more class. Macros:
   skp/macros.html (icons face-id, fingerprint, key, laptop, usb-key,
   shield). JS: ui-kit.js (the passkey block). ====== */

/* -- what the browser can do: ui-kit.js sets <html data-skp-passkey> when
      the browser has passkeys (PublicKeyCredential); without it (an old
      browser, no JavaScript) the passkey pieces never show and the
      password button becomes the main one -- */
:root:not([data-skp-passkey]) .pk-only { display: none; }
:root[data-skp-passkey] .pk-none-only { display: none; }
:root:not([data-skp-passkey]) .pk-pw > .btn-secondary {
  background: var(--accent); color: var(--on-accent); border-color: transparent;
}

/* -- SKP ID's frame: a middle column for /security (the card is 400, the
      staff panel 960) -- */
.auth-card.is-mid { max-width: 560px; }

/* -- a button with a glyph: the glyph never squeezes, a long label ends
      in an ellipsis on a full-width button -- */
.btn > svg { flex: none; }
.btn-block > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* -- the sign-in card: the passkey first, a hairline "or", then the
      password form as today -- */
.pk-signin { display: grid; gap: var(--s-5); margin-bottom: var(--s-5); }
.pk-or {
  display: flex; align-items: center; gap: var(--s-3);
  font: 500 13px/1 var(--font-ui); color: var(--text-3);
}
.pk-or::before, .pk-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.pk-forgot { justify-self: center; font-size: 13.5px; }
/* a server notice at the top of the card (deactivated, too many attempts) */
.pk-top { margin-bottom: var(--s-5); }
/* waiting on the browser's sheet: the button stays full strength (0h's
   busy button) and a small ring turns beside its label (skp-spin) */
.pk-form .btn[aria-busy="true"]::before {
  content: ""; flex: none; width: 14px; height: 14px; border-radius: var(--r-full);
  border: 2px solid color-mix(in srgb, currentColor 35%, transparent); border-top-color: currentColor;
  animation: skp-spin .7s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .pk-form .btn[aria-busy="true"]::before { animation: none; } }

/* -- whose account a screen is about (a value, never a sentence) -- */
.card .pk-head { display: grid; gap: var(--s-1); margin-bottom: var(--s-6); }
.card .pk-head h1 { margin: 0; }
.pk-who { font: 500 14px/1.45 var(--font-ui); color: var(--text-2); overflow-wrap: anywhere; }

/* -- the offer after a strong sign-in, and its done state -- */
.pk-offer { display: grid; justify-items: center; text-align: center; padding-top: var(--s-2); }
/* the device's own glyph, drawn bare and fine (never a filled tile) */
.pk-glyph { display: block; margin: var(--s-2) 0 var(--s-5); color: var(--text); stroke-width: 1.5; }
.card .pk-title {
  margin: 0 0 var(--s-2); max-width: 22ch;
  font: 700 22px/1.25 var(--font-ui); letter-spacing: -.015em; text-wrap: balance;
}
.pk-offer > .pk-who { margin-bottom: var(--s-8); }
.pk-offer > .pk-stack, .pk-offer > .btn { width: 100%; }
.pk-offer > .btn { justify-content: center; }
.pk-stack { display: grid; gap: var(--s-2); }
.pk-offer .c-check { margin: 0 0 var(--s-5); }

/* -- /security: sections divided by hairlines, quiet rows -- */
.pk-back {
  display: inline-flex; align-items: center; gap: 2px; margin: 0 0 var(--s-4) calc(-1 * var(--s-1));
  font: 600 13.5px/1 var(--font-ui); color: var(--text-2);
}
.pk-back:hover { color: var(--text); text-decoration: none; }
.pk-sec { padding-top: var(--s-5); border-top: 1px solid var(--border); }
.pk-sec + .pk-sec { margin-top: var(--s-6); }
.pk-sec-h {
  display: flex; align-items: baseline; gap: var(--s-2);
  font: 700 15px/1.3 var(--font-ui); letter-spacing: -.01em;
}
.pk-count { font: 600 13px/1 var(--font-ui); color: var(--text-3); font-variant-numeric: tabular-nums; }
.pk-list { list-style: none; display: grid; }
.pk-row {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--s-2) var(--s-3);
  align-items: start; padding: var(--s-4) 0; border-bottom: 1px solid var(--border);
}
.pk-row:last-child { border-bottom: 0; }
.pk-ic {
  display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: var(--r-2); background: var(--surface-2); color: var(--text-2);
}
.pk-body { min-width: 0; }
.pk-name {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2);
  font: 600 15px/1.35 var(--font-ui); color: var(--text);
}
.pk-name > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.pk-name + .pk-meta { margin-top: var(--s-1); }
.pk-meta { font: 400 13px/1.45 var(--font-ui); color: var(--text-3); font-variant-numeric: tabular-nums; }
/* a state tag: small, a dot, radius --r-1 (the admin tag's shape, outside
   the admin palette) */
.pk-tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px var(--s-2);
  border-radius: var(--r-1); background: var(--surface-2); color: var(--text-2);
  font: 600 13px/1.1 var(--font-ui); white-space: nowrap;
}
.pk-tag i { flex: none; width: 6px; height: 6px; border-radius: var(--r-full); background: currentColor; }
.pk-tag.is-ok { background: var(--ok-bg); color: var(--ok); }
/* row actions: under the text on phones, at the right from 640 */
.pk-acts { grid-column: 2; display: flex; gap: var(--s-1); margin-left: -10px; }
.pk-row .pk-acts form { display: contents; }
.pk-acts .btn { padding: 0 10px; }
.btn-ghost.pk-remove { color: var(--danger); }
.btn-ghost.pk-remove:hover { color: var(--danger); background: var(--danger-bg); }
.pk-empty { padding: var(--s-4) 0; font: 500 14px/1.4 var(--font-ui); color: var(--text-3); }
.pk-add { padding-top: var(--s-2); }
.pk-add .pk-form > .btn { justify-self: start; }
.pk-sec > .pk-none-only { padding-top: var(--s-2); }
/* rename in place: the row becomes one field and two buttons */
.pk-row .pk-rename { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.pk-rename .input { flex: 1 1 200px; min-width: 0; min-height: 40px; padding: var(--s-2) var(--s-3); font-size: 15px; }
.pk-rename-acts { display: flex; gap: var(--s-1); }
.pk-rename .btn { min-height: 40px; }
@media (min-width: 640px) {
  .pk-row { grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; }
  .pk-acts { grid-column: auto; margin: 0; }
  .pk-row .pk-rename { grid-column: 2 / -1; }
}

/* ====== 0k A ROW ACTION ON THE NAME LINE (docs/auth/passkeys/super-admins.md section 4)
   .pk-row.is-inline: a .pk-row whose one action (.pk-acts) stays on the
   right of the first line on phones too, where a plain .pk-row drops its
   actions under the text; a long name wraps beside it, so the row is as
   tall as one without the action. From 640 it is the plain .pk-row (the
   action centered on the row). First wearer: Mothership /super-admins.
   The action's box is one name line tall (.pk-name: 15 px at 1.35), so
   its button, whatever height the shell gives it, centers on that line
   and the row never grows for it. ====== */
.pk-row.is-inline { grid-template-columns: 40px minmax(0, 1fr) auto; }
.pk-row.is-inline > .pk-acts {
  grid-column: 3; grid-row: 1; align-self: start; align-items: center;
  height: calc(15px * 1.35); margin: 0;
}
@media (min-width: 640px) {
  .pk-row.is-inline > .pk-acts { align-self: center; height: auto; }
}


/* ====== 0l SUPPORT TICKET (SUP-1 thread design pass, docs/PLAN-support.md)
   The Mothership ticket page in the new layout (success/v2/ticket.html),
   admin scope only. Kit tokens only; 13 px is the smallest text.
   - .tk-head     summary (h2), tags, the requester line; no card
   - .tk-layout   the main column, the Details rail beside it from 1024
   - .tk-thread   h3.tk-day per Eastern day, then an ol of .tk-entry
   - .tk-entry    is-customer (left lane), is-reply and is-internal (right
                  lane), is-system (a line, no card); is-cont: the same
                  sender the same way within 10 minutes, no header
   - .tk-card     .tk-h (.tk-av, .tk-who, .tk-when, .tk-how) and .tk-body
   - .tk-compose  the composer: its mode radios (.adm-seg.is-view) show the
                  matching .tk-if-* parts through :has(), no script
   - .tk-rail     the Details card's selects
   - .tk-people   a group text's people on the requester line, a dot between
   - dialog.tk-who  "Who is this?" (the kit sheet): a two-way switch, then a
                  people search with radio rows (.tk-who-hit) or a name and a
                  club; :has() shows the chosen half, no script ====== */
:root[data-palette="admin"] .tk-head{display:grid;gap:var(--s-2);min-width:0;padding-bottom:var(--s-3)}
:root[data-palette="admin"] .tk-head h2{font:600 18px/1.25 var(--font-ui);letter-spacing:-.01em;color:var(--text);overflow-wrap:anywhere}
:root[data-palette="admin"] .tk-req{display:flex;flex-wrap:wrap;gap:2px var(--s-3);font:400 14px/1.4 var(--font-ui);color:var(--text-2);overflow-wrap:anywhere}
:root[data-palette="admin"] .tk-req b{font-weight:600;color:var(--text)}
:root[data-palette="admin"] .tk-layout{display:grid;gap:var(--adm-gap);grid-template-columns:minmax(0,1fr);align-items:start}
:root[data-palette="admin"] .tk-layout>*{display:grid;gap:var(--adm-gap);align-content:start;min-width:0}
@media(min-width:1024px){
  :root[data-palette="admin"] .tk-head h2{font-size:20px}
  :root[data-palette="admin"] .tk-layout{grid-template-columns:minmax(0,1fr) 300px}
}
@media(min-width:1280px){:root[data-palette="admin"] .tk-layout{grid-template-columns:minmax(0,1fr) 340px}}

:root[data-palette="admin"] .tk-thread{--tk-lane:var(--s-6);display:grid;gap:var(--s-3);min-width:0}
@media(min-width:768px){
  :root[data-palette="admin"] .tk-thread{--tk-lane:var(--s-12)}
  :root[data-palette="admin"] .tk-card>.tk-body{padding-left:calc(28px + var(--s-2))}
}
:root[data-palette="admin"] .tk-thread ol{display:grid;gap:var(--s-3);margin:0;padding:0;list-style:none}
:root[data-palette="admin"] .tk-day{display:flex;align-items:center;gap:var(--s-3);margin-top:var(--s-3);font:500 13px/1.4 var(--font-ui);color:var(--text-3);font-variant-numeric:tabular-nums}
:root[data-palette="admin"] .tk-day:first-child{margin-top:0}
:root[data-palette="admin"] .tk-day::after{content:"";flex:1;border-top:1px solid var(--border)}
:root[data-palette="admin"] .tk-entry{min-width:0}
:root[data-palette="admin"] .tk-entry.is-customer{margin-right:var(--tk-lane)}
:root[data-palette="admin"] .tk-entry.is-reply,
:root[data-palette="admin"] .tk-entry.is-internal{margin-left:var(--tk-lane)}
:root[data-palette="admin"] .tk-entry.is-cont{margin-top:calc(-1 * var(--s-3))}
:root[data-palette="admin"] .tk-entry:has(+ .tk-entry.is-cont)>.tk-card{padding-bottom:var(--s-1);border-bottom-width:0;border-bottom-left-radius:0;border-bottom-right-radius:0;box-shadow:none}
:root[data-palette="admin"] .tk-entry.is-cont>.tk-card{padding-top:var(--s-1);border-top-width:0;border-top-left-radius:0;border-top-right-radius:0}
:root[data-palette="admin"] .tk-card{display:grid;gap:var(--s-2);min-width:0;padding:var(--s-3) var(--s-4);border:1px solid var(--border);border-radius:var(--r-2);background:var(--surface);box-shadow:var(--shadow-1)}
:root[data-palette="admin"] .tk-entry.is-internal .tk-card{border-color:transparent;background:var(--tile-violet-bg);box-shadow:none}
:root[data-palette="admin"] .tk-h{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:0 var(--s-2);align-items:center}
:root[data-palette="admin"] .tk-av{grid-row:1 / span 2;display:grid;place-items:center;width:28px;height:28px;border-radius:var(--r-full);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--border-strong);color:var(--text-2);font:600 13px/1 var(--font-ui)}
:root[data-palette="admin"] .tk-entry:is(.is-reply,.is-internal) .tk-av{background:var(--text);box-shadow:none;color:var(--bg)}
:root[data-palette="admin"] .tk-who{min-width:0;font:600 14px/1.3 var(--font-ui);color:var(--text);overflow-wrap:anywhere}
:root[data-palette="admin"] .tk-when{font:400 13px/1.3 var(--font-ui);color:var(--text-3);font-variant-numeric:tabular-nums;white-space:nowrap}
:root[data-palette="admin"] .tk-how{grid-column:2 / -1;display:flex;align-items:center;gap:6px;min-width:0;font:400 13px/1.35 var(--font-ui);color:var(--text-3)}
:root[data-palette="admin"] .tk-how svg{flex:none}
:root[data-palette="admin"] .tk-entry.is-internal .tk-how{font-weight:500;color:var(--tile-violet)}
/* text-3 on the violet fill is 4.49:1 in light, so the time steps up */
:root[data-palette="admin"] .tk-entry.is-internal .tk-when{color:var(--text-2)}
:root[data-palette="admin"] .tk-body{font:400 15px/1.55 var(--font-ui);color:var(--text);white-space:pre-wrap;overflow-wrap:anywhere}
:root[data-palette="admin"] .tk-entry.is-cont .tk-card{grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:var(--s-3)}
:root[data-palette="admin"] .tk-entry.is-system>p{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:0 var(--s-2);align-items:start;padding:var(--s-1) calc(var(--s-4) + 1px);font:400 13px/1.45 var(--font-ui);color:var(--text-2)}
:root[data-palette="admin"] .tk-entry.is-system svg{justify-self:center;margin-top:2px;color:var(--text-3)}
:root[data-palette="admin"] .tk-entry.is-system time{color:var(--text-3);font-variant-numeric:tabular-nums;white-space:nowrap}
:root[data-palette="admin"] .tk-empty{padding:var(--s-5) var(--s-4);border:1px dashed var(--border-strong);border-radius:var(--r-2);font:400 14px/1.4 var(--font-ui);color:var(--text-3);text-align:center}

:root[data-palette="admin"] .tk-compose{display:grid;gap:var(--adm-stack);min-width:0;padding:var(--adm-pad);border:1px solid var(--border);border-radius:var(--r-2);background:var(--surface);box-shadow:var(--shadow-1)}
:root[data-palette="admin"] .tk-compose .adm-seg{grid-auto-columns:minmax(max-content,1fr)}
@media(min-width:640px){:root[data-palette="admin"] .tk-compose>.adm-seg{justify-self:start}}
:root[data-palette="admin"] .tk-compose .field>label,
:root[data-palette="admin"] .tk-log legend{display:flex;align-items:center;gap:6px;margin-bottom:var(--s-2);padding:0;font:500 13px/1.4 var(--font-ui);color:var(--text-2)}
:root[data-palette="admin"] .tk-compose label .tk-if-internal{display:inline-flex;align-items:center;gap:6px;color:var(--tile-violet)}
:root[data-palette="admin"] .tk-compose textarea.input{min-height:112px;max-height:60vh;field-sizing:content;font:400 15px/1.55 var(--font-ui)}
:root[data-palette="admin"] .tk-compose:has([name="mode"][value="internal"]:checked) textarea.input{background:var(--tile-violet-bg)}
:root[data-palette="admin"] .tk-log{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-3)}
:root[data-palette="admin"] .tk-log fieldset{grid-column:1 / -1;min-width:0;margin:0;padding:0;border:0}
:root[data-palette="admin"] .tk-log .input{min-height:var(--adm-btn-h);padding-top:0;padding-bottom:0}
@media(max-width:479px){:root[data-palette="admin"] .tk-log .adm-seg{display:grid}}
@media(min-width:480px){:root[data-palette="admin"] .tk-log{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr)}}
:root[data-palette="admin"] .tk-send{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--s-2) var(--s-4)}
:root[data-palette="admin"] .tk-send .check{margin-right:auto;min-height:var(--adm-btn-h);padding:0;align-items:center;font:500 14px/1.3 var(--font-ui);color:var(--text-2)}
:root[data-palette="admin"] .tk-send .check input{margin-top:0}
@media(max-width:639px){:root[data-palette="admin"] .tk-send .btn{flex:1 1 100%;justify-content:center}}
:root[data-palette="admin"] .tk-compose:not(:has([name="mode"][value="reply"]:checked)) .tk-if-reply,
:root[data-palette="admin"] .tk-compose:not(:has([name="mode"][value="internal"]:checked)) .tk-if-internal,
:root[data-palette="admin"] .tk-compose:not(:has([name="mode"][value="log"]:checked)) .tk-if-log,
:root[data-palette="admin"] .tk-compose .tk-keep{display:none}
:root[data-palette="admin"] .tk-compose:has([name="mode"][value="reply"]:checked) .tk-keep,
:root[data-palette="admin"] .tk-compose:has([name="mode"][value="log"]:checked):has([name="log_kind"][value="reply"]:checked) .tk-keep{display:flex}

:root[data-palette="admin"] .tk-rail form .kvrow{padding:var(--s-1) 0;border-bottom:0}
:root[data-palette="admin"] .tk-rail .kvrow .selectwrap{flex:0 1 196px;min-width:0}
:root[data-palette="admin"] .tk-rail .kvrow select.input{min-height:var(--adm-btn-h);padding-top:0;padding-bottom:0;font:500 14px/1.3 var(--font-ui)}
/* customer photos and files in a thread entry (SUP-3): thumbnails that open full size */
:root[data-palette="admin"] .tk-media{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:var(--s-2);margin:0;padding:0;list-style:none}
:root[data-palette="admin"] .tk-media img{display:block;max-width:min(240px,100%);max-height:240px;border:1px solid var(--border);border-radius:var(--r-1);background:var(--surface-2);object-fit:cover}
:root[data-palette="admin"] .tk-media a.plain{font:500 14px/1.4 var(--font-ui)}
@media(min-width:768px){:root[data-palette="admin"] .tk-card>.tk-media{padding-left:calc(28px + var(--s-2))}}
/* unknown senders (SUP-3 E): the head's Who is this? and its sheet */
:root[data-palette="admin"] .tk-req{align-items:center}
:root[data-palette="admin"] .tk-req:has(.btn){row-gap:var(--s-2)}
:root[data-palette="admin"] .tk-req:has(>.tk-people){align-items:flex-start}
/* a group's people: one per line on a phone; on one line with a dot between
   from 640, unless two or more are still to name (unknowns sort last) */
:root[data-palette="admin"] .tk-people{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-2);min-width:0;margin:0;padding:0;list-style:none}
:root[data-palette="admin"] .tk-people>li{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);min-width:0;font-weight:500;color:var(--text)}
:root[data-palette="admin"] .tk-people .data{color:var(--text-2)}
@media(min-width:640px){
  :root[data-palette="admin"] .tk-req:has(>.tk-people .btn)>b{display:inline-flex;align-items:center;min-height:var(--adm-btn-h)}
  :root[data-palette="admin"] .tk-people:not(:has(>li:nth-last-child(2) .btn)){flex-direction:row;flex-wrap:wrap;align-items:center}
  :root[data-palette="admin"] .tk-people:not(:has(>li:nth-last-child(2) .btn))>li+li::before{content:"\00B7";color:var(--text-3)}
}

:root[data-palette="admin"] dialog.tk-who .skp-sheet-body{gap:var(--adm-stack);background:var(--surface)}
:root[data-palette="admin"][data-theme="dark"] dialog.tk-who .skp-sheet-body{box-shadow:0 -1px 0 var(--border-strong)}
@media(min-width:640px){
  :root[data-palette="admin"] dialog.tk-who .skp-sheet-body{padding:var(--s-6)}
  :root[data-palette="admin"][data-theme="dark"] dialog.tk-who .skp-sheet-body{box-shadow:0 0 0 1px var(--border-strong),var(--shadow-2)}
}
:root[data-palette="admin"] .tk-who-h{display:grid;gap:2px;min-width:0}
:root[data-palette="admin"] .tk-who-h .skp-sheet-title{padding:0;font:600 18px/1.25 var(--font-ui)}
:root[data-palette="admin"] .tk-who-h .skp-sheet-note{padding:0;font:500 14px/1.4 var(--font-ui);color:var(--text-2);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
:root[data-palette="admin"] dialog.tk-who .adm-seg{display:grid}
:root[data-palette="admin"] .tk-who-known,
:root[data-palette="admin"] .tk-who-form,
:root[data-palette="admin"] .tk-who-pick{display:grid;gap:var(--s-3);min-width:0}
:root[data-palette="admin"] dialog.tk-who:has(.adm-seg input[value="new"]:checked) .tk-who-known,
:root[data-palette="admin"] dialog.tk-who:not(:has(.adm-seg input[value="new"]:checked)) .tk-who-new{display:none}
:root[data-palette="admin"] dialog.tk-who .field>label{display:block;margin-bottom:var(--s-2);font:500 13px/1.4 var(--font-ui);color:var(--text-2)}
:root[data-palette="admin"] dialog.tk-who .field .input{min-height:var(--adm-btn-h);padding-top:0;padding-bottom:0}

:root[data-palette="admin"] .tk-who-hits{display:grid;gap:var(--s-2);align-content:start;max-height:min(300px,40dvh);overflow-y:auto;overscroll-behavior:contain;margin:calc(-1 * var(--s-1));padding:var(--s-1)}
:root[data-palette="admin"] .tk-who-hits>.tk-empty{padding:var(--s-4)}
:root[data-palette="admin"] .tk-who-hit{position:relative;display:flex;align-items:center;gap:var(--s-3);min-width:0;padding:var(--s-2) var(--s-3);border:1px solid var(--border);border-radius:var(--r-2);background:var(--surface);cursor:pointer}
:root[data-palette="admin"] .tk-who-hit:hover{border-color:var(--border-strong)}
:root[data-palette="admin"] .tk-who-hit>input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
:root[data-palette="admin"] .tk-who-hit>.tk-av{flex:none}
:root[data-palette="admin"] .tk-who-id{display:grid;flex:1;min-width:0}
:root[data-palette="admin"] .tk-who-id>b{font:600 14px/1.3 var(--font-ui);color:var(--text);overflow-wrap:anywhere}
:root[data-palette="admin"] .tk-who-id>small{font:400 13px/1.35 var(--font-ui);color:var(--text-3);overflow-wrap:anywhere}
:root[data-palette="admin"] .tk-who-hit>svg{flex:none;visibility:hidden}
:root[data-palette="admin"] .tk-who-hit:has(>input:checked){border-color:var(--text);box-shadow:0 0 0 1px var(--text)}
:root[data-palette="admin"] .tk-who-hit:has(>input:checked)>svg{visibility:visible}
:root[data-palette="admin"] .tk-who-hit:has(>input:focus-visible){box-shadow:var(--focus-ring)}
:root[data-palette="admin"] .tk-who-acts{display:flex;justify-content:flex-end;gap:var(--s-2);padding-top:var(--s-1)}
@media(max-width:639px){:root[data-palette="admin"] .tk-who-acts>.btn{flex:1 1 0;justify-content:center}}