/* =================================================================
   SST B2B design tokens: the one token sheet (round 9 N, b2b 3.77.0).

   Every --sst-* value the plugin paints with lives here: colours, the one
   type scale (--sst-fs-*), the 44px control height, radii, shadows, fonts.
   Every other B2B sheet carries at most a block of aliases
   (`--bg: var(--sst-b2b-bg);`), so an old selector keeps its name and this
   sheet keeps the value. sst-nyc scripts/check-b2b-css-tokens.py fails a
   literal in any other sheet's :root or tokens block, and any --sst-*
   definition outside this file.

   Load order. Company side: registered as `sst-b2b-tokens` and a dependency
   of every company stylesheet. Admin (PSIOPS) side: enqueue it after
   `sst-psiops-tokens` and before `sst-b2b-admin`, because the PSIOPS accent
   family below re-points the PSIOPS amber to the kit gold.

   Names. Company tokens are --sst-b2b-<old name> (the dashboard's --bg is
   --sst-b2b-bg, the invoice sheet's --b2b-inv-ink is --sst-b2b-inv-ink, the
   redeem widget's --enroll-text is --sst-b2b-enroll-text). The type scale is
   --sst-fs-*; the admin's PSIOPS overrides keep their PSIOPS names.
   ================================================================= */
:root {
/* tokens:start */

/* ---------- from teams-dashboard.css ---------- */
    /* DAYLIGHT LEDGER (2026-08-27 art upgrade) — white + elevation. The page is a
       light field; cards separate by shadow, not by dark mass. Hierarchy that the
       graphite panels used to carry now rides on elevation (--shadow-1/-2), ONE
       warm wash band per view (--gold-wash), and type scale. Token-driven: the
       old dark --panel/--on-panel-* family below is RETIRED by remapping its
       values onto the light material, so every legacy selector re-materializes
       as white + elevation without a rename. Do not reintroduce a dark fill. */
    /* BRAND RECOLOR (2026-08-29): neutrals warmed off blue-gray toward paper/stone
       so they sit under the brand gold instead of fighting it; --gold aligned to
       the site's #fec430 (the marketing theme paints every bare <button> that
       color — the portal's old #d4af37 read as "almost our gold"). Lightness of
       every neutral kept within a step of its cool ancestor, so all measured
       contrast pairs in the comments below still hold. */
    --sst-b2b-bg: #f5f4f0;            /* page field (--canvas). Cards separate by shadow, not gray gap */
    --sst-b2b-canvas: #f5f4f0;        /* spec-name alias of --bg */
    --sst-b2b-surface: #ffffff;       /* cards / rows / receipt / tables — the one material */
    --sst-b2b-well: #f9f8f5;          /* inset wells: chart grounds, count pills, zebra, table heads */
    --sst-b2b-line: #e8e6e0;          /* borders, rules, gridlines — decorative, never text */
    --sst-b2b-line-subtle: #f0efea;   /* hairlines / zebra / receipt line-item rules */
    --sst-b2b-line-hairline: #f0efea; /* spec-name alias of --line-subtle */
    --sst-b2b-text: #1c1a15;          /* primary text, hero figures, heavy stroke of the double-rule,
                                 AND the label on gold buttons (~11:1 on #fec430) */
    --sst-b2b-ink: #1c1a15;           /* spec-name alias of --text */
    --sst-b2b-text-2: #846513;        /* deep bronze-gold for headings/accents — WCAG AA (5.4:1 on white) */
    --sst-b2b-bronze: #846513;        /* spec-name alias — gold-as-text: eyebrows, jump links, active tab */
    --sst-b2b-text-3: #6b6459;        /* secondary text / field labels (~5.9:1 white) — warm stone, not slate */
    --sst-b2b-slate: #6b6459;         /* spec-name alias of --text-3 (name kept; value is warm now) */
    --sst-b2b-gold: var(--yellow, #fec430); /* the kit gold (kit.css --yellow) — buttons/fills/borders */
    --sst-b2b-gold-text: #846513;     /* gold used as TEXT on light → deep bronze for WCAG AA */
    --sst-b2b-gold-glow: color-mix(in srgb, var(--sst-b2b-gold) 14%, transparent);
    --sst-b2b-gold-glow-2: color-mix(in srgb, var(--sst-b2b-gold) 24%, transparent);
    --sst-b2b-green: #15a37a;         /* fills/bars only (decorative, contrast-exempt) — fails AA as text */
    --sst-b2b-green-hover: #128a68;   /* hover/active shade of --green (darkened ~12%) — keeps the success CTA in the same hue family, no dark-mode neon fork */
    --sst-b2b-green-text: #0c6e51;    /* green used as TEXT on white / green-glow → AA-safe (~4.8:1 white, ~4.2:1 on glow); mirrors --course-*-text pattern */
    --sst-b2b-green-glow: rgba(21, 163, 122, 0.10);
    --sst-b2b-green-glow-2: rgba(21, 163, 122, 0.24);  /* stronger --green tint — success borders/CTA hover shadow; one source for the glow, mirrors --gold-glow-2 */
    --sst-b2b-red: #d23b3b;           /* expired accent — pill/band rgba fills + borders (decorative) */
    --sst-b2b-red-text: #b32d2d;      /* red used as TEXT on white → AA-safe (6.3:1); see expired-lane copy */
    --sst-b2b-red-glow: rgba(210, 59, 59, 0.10);
    /* --gold was doing double duty: brand identity (buttons, links, focus rings)
       AND "this card is expiring soon" (KPI accents, meter segments, deadline
       badges). One token meaning two unrelated things is why gold showed up on
       every urgency surface regardless of what it was supposed to signal.
       Split it:
         --gold  = brand + the single primary action. Nothing else.
         --amber = temporal/expiring status ONLY. Fill tokens + --amber-text for
                   type on light surfaces (6.2:1, AA-safe). */
    --sst-b2b-amber: #e0952a;
    --sst-b2b-amber-text: #8a5510;
    --sst-b2b-amber-glow: rgba(224, 149, 42, 0.10);
    --sst-b2b-amber-glow-2: rgba(224, 149, 42, 0.28);
    /* --- Semantic washes: the light-surface tint family. --gold-wash is the ONE
       warm band a view may carry (attention-card header). The status washes back
       has/needs chips and the balance strip. --ink and every -text twin are AA
       on all four. */
    --sst-b2b-gold-wash: #fdf6dd;
    --sst-b2b-green-wash: #e8f6f0;
    --sst-b2b-amber-wash: #fdf1e0;
    --sst-b2b-red-wash: #fceceb;
    /* --- RETIRED dark family (Daylight Ledger). These were the graphite
       instrument-panel tokens (.horizon, .nyn/.b2b-ledger, .buy__quote). The
       owner's brief killed the dark mass, so the family now RESOLVES TO THE
       LIGHT MATERIAL: every legacy consumer re-materializes as white cards with
       ink text and the ordinary semantic trio. Keep the names (selectors all
       over this file consume them); never point them at a dark value again. */
    --sst-b2b-panel: var(--sst-b2b-surface);
    --sst-b2b-panel-2: var(--sst-b2b-well);          /* raised wells → inset wells */
    --sst-b2b-panel-line: var(--sst-b2b-line);
    --sst-b2b-panel-text: var(--sst-b2b-text);
    --sst-b2b-panel-text-2: var(--sst-b2b-slate);
    --sst-b2b-on-panel-green: var(--sst-b2b-green);  /* fills (dots/bars/segments) — decorative */
    --sst-b2b-on-panel-amber: var(--sst-b2b-amber);
    --sst-b2b-on-panel-red: var(--sst-b2b-red);
    --sst-b2b-on-panel-gray: #c9c5bb;
    /* FILL vs INK, daylight edition: fills use the bright semantic hues, ink
       twins collapse onto the AA -text tokens (the same split .horizon--clear
       already proved out). */
    --sst-b2b-on-panel-red-ink: var(--sst-b2b-red-text);
    --sst-b2b-on-panel-amber-ink: var(--sst-b2b-amber-text);
    --sst-b2b-panel-muted: #bdb8ab;              /* neutral bands: in-training, beyond-horizon */
    --sst-b2b-on-panel-gone: var(--sst-b2b-red-text);    /* already-expired bars — the deep-red text-twin family */
    --sst-b2b-on-panel-gone-ink: var(--sst-b2b-red-text);
    --sst-b2b-panel-rule: rgba(28,26,21,0.35);    /* the TODAY divider */
    --sst-b2b-panel-edge: rgba(28,26,21,0.28);    /* gone-bar outline */
    --sst-b2b-panel-outline: rgba(28,26,21,0.50); /* cliff marker outline */
    --sst-b2b-panel-focus: var(--sst-b2b-gold-text);     /* focus ring — raw gold is 1.9:1 on white */
    /* --- All-clear field. On the light page the all-clear state keeps a calm
       green tint (= --green-wash) so severity still reads in the lightness
       channel: tinted-green means "nothing demands you". Measured on #e8f6f0:
         --text 14.6:1 · --green-text (#0c6e51) 5.1:1 · muted 6.9:1 */
    --sst-b2b-green-field: var(--sst-b2b-green-wash);
    --sst-b2b-green-field-line: #cfe6db;
    --sst-b2b-green-field-muted: #4c5a54;
    --sst-b2b-green-field-rule: rgba(12, 110, 81, 0.30);
    --sst-b2b-green-field-edge: rgba(12, 110, 81, 0.35);
    --sst-b2b-green-field-outline: rgba(12, 110, 81, 0.55);
    --sst-b2b-panel-muted-light: #bdb8ab;        /* --panel-muted's daylight twin (now identical) */
    --sst-b2b-hover: rgba(30, 27, 21, 0.05);          /* hover tint on light surfaces */
    /* Elevation ladder — shadow does the separating work the dark fills used to.
       --shadow-1 is the default card. --shadow-2 is RESERVED: max TWO surfaces
       per view (the attention card + the money/hero surface). Hover lifts one
       grade, 150ms ease-out, collapses under prefers-reduced-motion. */
    --sst-b2b-shadow-1: 0 1px 2px rgba(30,27,21,.06), 0 6px 16px rgba(30,27,21,.06);
    --sst-b2b-shadow-2: 0 1px 2px rgba(30,27,21,.06), 0 6px 16px rgba(30,27,21,.06), 0 12px 32px rgba(30,27,21,.10);
    --sst-b2b-shadow-pop: 0 2px 6px rgba(30, 27, 21, 0.08), 0 12px 32px rgba(30, 27, 21, 0.14); /* popovers/tooltips only */
    /* Rounding scale — derive new components from these, not arbitrary literals.
       Two eras of this file forked on corner radii: the cards/roster surfaces pulled
       --radius-sm/md/lg while the older setup-panel/toolbar/dropdown/pill components
       hardcoded 1/3/4/5/8/9/10px. At 300-worker scale that put 12px roster corners
       directly above 4px pills above 5px toolbar buttons — three radii in one viewport.
       Every border-radius in the file now resolves to one of these tokens; pick from
       the scale, never a bare px. The sub-sm steps below are deliberate, named tiers:
         --radius-hair  hairline tracks/bars (1px)
         --radius-xs    micro count/code chips, file-input rings (3px)
         --radius-pill  status/lane pills + small action buttons — --radius-sm(6) is
                        too round for an 11px uppercase pill, so this stays 4px
         --radius-full  count-bubble / badge pills that read as fully-round (9px) */
    --sst-b2b-radius-hair: 1px;
    --sst-b2b-radius-xs: 3px;
    --sst-b2b-radius-pill: 4px;
    --sst-b2b-radius-sm: 6px;   /* chips, count pills, stamp chips (--r-sm) */
    --sst-b2b-radius-md: 10px;  /* buttons, inputs, ordinary cards (--r-md) */
    --sst-b2b-radius-lg: 14px;  /* the receipt + the overview hero only (--r-lg) */
    --sst-b2b-radius-full: 9px;
    /* Course colors — BRAND RAMP (2026-08-29). The old six stock hues
       (blue/violet/cyan/pink/amber/emerald) were the one palette in the portal
       with no kinship to black + gold, so course identity now rides a single
       brand family: WORKER lane = gold/bronze, SUPERVISOR lane = ink/stone,
       the 22u upgrade bridges the two, scaffold = pale stone. The course-code
       TEXT label does the identifying work; hue is ordering, not the sole
       encoding. Green/amber/red stay reserved for status. Fills are used ONLY
       for decorative dot fills (.crew__course-dot, buy-row dots), contrast-exempt. */
    --sst-b2b-course-10w: var(--sst-b2b-gold); /* 10hr Worker — brand gold */
    --sst-b2b-course-32s: #1c1a15;   /* 32hr Supervisor — ink */
    --sst-b2b-course-8r: #9a7b1a;    /* 8hr Worker Renewal — deep old-gold */
    --sst-b2b-course-16r: #6b6459;   /* 16hr Supervisor Renewal — warm stone */
    --sst-b2b-course-22u: #8a7c54;   /* 22hr Upgrade — bronze-stone bridge */
    --sst-b2b-course-4sc: #b8b0a0;   /* 4hr Scaffold — pale stone */
    --sst-b2b-course-osha: #2f6f8f;  /* OSHA Outreach — federal blue, not an SST gold */
    /* Text-safe course tokens — same family, darkened to clear the 4.5:1 AA floor
       as normal-size TEXT on the white --surface. Used for .crew__course--* labels
       across the setup list + cards roster (293 "Credential" cells). The bright
       --course-* values above stay on the dots only. */
    --sst-b2b-course-10w-text: #846513;  /* bronze          — 5.4:1 */
    --sst-b2b-course-32s-text: #1c1a15;  /* ink             — ~16:1 */
    --sst-b2b-course-8r-text:  #6f570d;  /* deep bronze     — ~6.9:1 */
    --sst-b2b-course-16r-text: #5c564b;  /* deep stone      — ~7.2:1 */
    --sst-b2b-course-22u-text: #635a35;  /* bronze-olive    — ~6.9:1 */
    --sst-b2b-course-4sc-text: #756e61;  /* mid stone       — ~5.0:1 */
    --sst-b2b-course-osha-text: #245972; /* deep federal    — ~6.6:1 */
    /* Typography tokens — single source so the cascade can't fork. The font files
       are wp_enqueue'd in enqueue_assets() (gated is_page('company')); applying the
       !important on .shell below keeps Astra's Nunito Sans from winning. */
    --sst-b2b-font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --sst-b2b-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
    /* Sticky-stack offsets — single source so the app chrome, the sticky roster
       command band, and the sticky column header pin flush with no 1px sliver.
       --chrome-h is the FULL occupied height of .app-chrome; the chrome's hairline
       is a box-shadow (no layout height) so this stays exact (56px, not 57px).
       --roster-tools-h is the height of the sticky .roster-tools band that the
       column header pins beneath. THIS IS A FALLBACK ONLY: teams-dashboard.js
       measures the live band (ResizeObserver on .roster-tools) and writes the real
       px onto .shell as --roster-tools-h, so the column header always pins exactly
       under the band regardless of how the controls/context rows wrap at scale. If
       the JS hook is ever absent, this constant is sized to cover the common 2-row
       wrap on the ~1100px wide shell so the failure mode is a benign 1–2px gray
       sliver, never the header overlapping the band's labels. Overridden at 640px. */
    --sst-b2b-chrome-h: 56px;
    --sst-b2b-roster-tools-h: 132px;
    /* --- B2B role tokens (audit PR 5). Every colour the sheet used to carry as a
       bare literal now lives here, named by role. Values are the old literals,
       so nothing renders differently. */
    --sst-b2b-gold-hover: color-mix(in srgb, var(--sst-b2b-gold) 90%, var(--sst-b2b-black));
    --sst-b2b-danger-deep: #b91c1c;
    --sst-b2b-black: #000000;
    --sst-b2b-ink-hover: #2a2823;
    --sst-b2b-ink-deep: #14120e;
    --sst-b2b-neutral-shade: #4a4a52;
    --sst-b2b-danger-bright: #f06060;
    --sst-b2b-warn: #f59e0b;
    --sst-b2b-success-bright: #00c864;
    --sst-b2b-note-indigo: #6366f1;
    --sst-b2b-shade: #141628;
    --sst-b2b-amber-pill-ink: #8a5c00;
    --sst-b2b-plan-edge: #9a7a18;
    --sst-b2b-print-body: #333333;
    --sst-b2b-on-gold-ink: #3a2d05;
    --sst-b2b-hero-cta-hover: var(--sst-b2b-gold-hover);
    --sst-b2b-meter-train: #c5c0b4;
    --sst-b2b-surface-warm: #fffdf5;
    --sst-b2b-on-ink-muted: #b3ada2;
    --sst-b2b-pipeline-wait: #cbc6ba;
    --sst-b2b-gone-ring: #c9303d;
    --sst-b2b-red-ink-deep: #7a1f1f;
    --sst-b2b-mark-1: #1c1a15;
    --sst-b2b-white: #ffffff;
    --sst-b2b-page-bg: #f5f4f0;  /* the body canvas behind the shell (the workspace shell re-points --canvas) */
    /* --- Design-system floor (round 3 C, guarded by sst-nyc
       scripts/check-b2b-css-tokens.py). Meta text never renders under 12px,
       body copy sits at 13px, and every button, row action and chip action is
       at least one 44px touch target tall. */
    --sst-b2b-fs-meta: var(--sst-fs-xs);
    --sst-b2b-fs-body: var(--sst-fs-sm);
    --sst-b2b-control-h: 44px;
    /* Label on a yellow fill. --text on --gold is ~11:1; the bronze --gold-text
       on --gold measured 3.4:1 on the hero "Set a deadline" button. */
    --sst-b2b-on-gold: var(--sst-b2b-text);
    /* --- One type scale and one gold (round 5 G, both halves; sst-nyc
       scripts/check-b2b-css-tokens.py keeps every sheet's scale equal and fails a
       literal font-size outside a token block, or a second gold). The gold is the
       kit's --yellow; hovers and tints mix from it. */
    --sst-fs-xs: 12px;
    --sst-fs-sm: 13px;
    --sst-fs-md: 15px;
    --sst-fs-field: 16px; /* form fields only: under 16px iOS zooms on focus */
    --sst-fs-lg: 18px;
    --sst-fs-xl: 24px;
    --sst-fs-2xl: 32px;
    --sst-fs-figure: clamp(44px, 6vw, 64px);
/* ---------- from workspace.css ---------- */
--sst-b2b-ws-field:#f7f7f2;
--sst-b2b-ws-ink:#202922;
--sst-b2b-ws-ink-muted:#5b625b;
--sst-b2b-ws-line:#dce0d6;
--sst-b2b-ws-help-edge:#7e7e7e;
--sst-b2b-ws-help-hover:#242424;
--sst-b2b-ws-line-warm:#e6dfc3;
--sst-b2b-ws-wash-warm-2:#f6efd8;
--sst-b2b-ws-ink-soft:#555d53;
--sst-b2b-ws-gold-edge:color-mix(in srgb, var(--yellow,#fec430) 90%, var(--black,#000));
--sst-b2b-ws-gold-hover:color-mix(in srgb, var(--yellow,#fec430) 90%, var(--black,#000));
--sst-b2b-ws-rule-warm:#d9cdac;
--sst-b2b-ws-wash-journey:#e7ede4;
--sst-b2b-ws-wash-count:#e9ede5;
--sst-b2b-ws-ink-count:#4c584a;
--sst-b2b-ws-ink-link:#385640;
--sst-b2b-ws-wash-fold:#f5f7f1;
--sst-b2b-ws-wash-warm:#f4efd9;
--sst-b2b-ws-wash-paid:#e7f0e8;
--sst-b2b-ws-ink-paid:#295739;
--sst-b2b-ws-danger-wash:#f9e9e5;
--sst-b2b-ws-danger-ink:#9b3029;
--sst-b2b-ws-wash-cancelled:#eff0eb;
--sst-b2b-ws-wash-quote:#eaf0e7;
--sst-b2b-ws-wash-note:#eef1e9;
--sst-b2b-ws-link-edge:#2465a5;
--sst-b2b-ws-ink-status:#5a625c;
--sst-b2b-ws-wash-status:#edf0e9;
--sst-b2b-ws-wash-complete:#e6efe4;
--sst-b2b-ws-ink-complete:#31573a;
--sst-b2b-ws-wash-progress:#fff0bf;
--sst-b2b-ws-ink-progress:#70540e;
--sst-b2b-ws-wash-empty:#f0eee6;
--sst-b2b-ws-ink-on-dark:#f5f4f0;
/* ---------- from worker-checkout.css ---------- */
--sst-b2b-wc-scrim:#171714;
--sst-b2b-wc-line-soft:#f0f0ea;
--sst-b2b-wc-danger-ink:#a3261c;
--sst-b2b-wc-success-wash:#e2f0e0;
--sst-b2b-wc-danger-wash:#f7e3e1;
/* ---------- from invoice-page.css ---------- */
/* Regrade R3: the sheet wears the dashboard kit (kit-shell.css), not its
   own pale-cyan palette. Values mirror kit-shell.css so the sheet still
   renders on a page that never loads the kit (print, a bare order-pay). */
--sst-b2b-inv-canvas:#f5f4f0;      /* kit --canvas */
--sst-b2b-inv-white:#ffffff;       /* kit --surface */
--sst-b2b-inv-well:#f9f8f5;        /* kit --well */
--sst-b2b-inv-ink:#1c1a15;         /* kit --text */
--sst-b2b-inv-body:#1c1a15;        /* kit --text */
--sst-b2b-inv-muted:#6b6459;       /* kit --text-3, 5.9:1 on white */
--sst-b2b-inv-rule:#e8e6e0;        /* kit --line */
--sst-b2b-inv-yellow:var(--yellow,#fec430); /* the kit gold */
--sst-b2b-inv-black:#000000;
--sst-b2b-inv-green-text:#0c6e51;  /* kit --green-text */
--sst-b2b-inv-green-wash:#e8f6f0;  /* kit --green-wash */
--sst-b2b-inv-on-black:#f5f4f0;    /* text on the black masthead, 18:1 */
--sst-b2b-inv-rule-on-black:#3a3d40;
--sst-b2b-inv-yellow-hover:color-mix(in srgb, var(--sst-b2b-inv-yellow) 90%, var(--sst-b2b-inv-black));
--sst-b2b-inv-field-edge:#8a8478;  /* 3:1 field edge on white */
/* ---------- from enrollment-redeem.css ---------- */
    --sst-b2b-enroll-bg:            var(--card, #f3f4f6);
    --sst-b2b-enroll-bg-elevated:   var(--paper, #ffffff);
    --sst-b2b-enroll-bg-input:      var(--paper, #ffffff);
    --sst-b2b-enroll-border:        var(--line, #dce1e2);
    --sst-b2b-enroll-border-focus:  var(--ink, #212327);
    --sst-b2b-enroll-accent:        var(--yellow, #fec430);   /* brand gold: the one primary action */
    --sst-b2b-enroll-accent-hover:  color-mix(in srgb, var(--sst-b2b-enroll-accent) 90%, var(--black, #000000));
    --sst-b2b-enroll-accent-text:   var(--cream-ink, #50401b);   /* gold-as-text on light, AA */
    --sst-b2b-enroll-on-accent:     var(--black, #000000);
    --sst-b2b-enroll-text:          var(--ink, #212327);
    --sst-b2b-enroll-text-muted:    var(--muted, #555c60);
    --sst-b2b-enroll-success-bg:    var(--ok-bg, #e3f6ea);
    --sst-b2b-enroll-success-text:  var(--ok-ink, #0f5a36);
    --sst-b2b-enroll-error-bg:      var(--err-bg, #fde8e6);
    --sst-b2b-enroll-error-text:    var(--err-ink, #8a1c12);
    --sst-b2b-enroll-warn-bg:       var(--warn-bg, #fff3cd);
    --sst-b2b-enroll-warn-text:     var(--warn-ink, #6b4a00);
    --sst-b2b-enroll-radius:        0;
    --sst-b2b-enroll-font:          var(--body, 'Nunito Sans', Arial, Helvetica, sans-serif);
    --sst-b2b-enroll-mono:          var(--mono, 'JetBrains Mono', ui-monospace, Menlo, monospace);
    /* Tints (round 3 C): the last literals outside this block, moved here by
       role. Round 5 G: the gold tints mix from the one kit gold (they were the
       PSIOPS amber, rgb(240,192,64), a second gold). */
    --sst-b2b-enroll-focus-glow:    color-mix(in srgb, var(--sst-b2b-enroll-accent) 15%, transparent);
    --sst-b2b-enroll-focus-glow-soft: color-mix(in srgb, var(--sst-b2b-enroll-accent) 12%, transparent);
    --sst-b2b-enroll-error-line:    rgba(248, 113, 113, 0.25);
    --sst-b2b-enroll-success-line:  rgba(74, 222, 128, 0.25);
    --sst-b2b-enroll-warn-line:     color-mix(in srgb, var(--sst-b2b-enroll-accent) 25%, transparent);
    --sst-b2b-enroll-badge-bg:      color-mix(in srgb, var(--sst-b2b-enroll-accent) 10%, transparent);
    --sst-b2b-enroll-badge-line:    rgba(132, 101, 19, 0.28);

/* ---------- from teams.css ---------- */
    /* Kit tokens (theme brand-preview/assets/kit.css, or the plugin's inline fallback with the same
       values). No hex in this file (F-05). The page canvas is white; cards are the kit's rounded gray. */
    --sst-b2b-bg-primary: var(--paper);
    --sst-b2b-bg-elevated: var(--paper);
    --sst-b2b-bg-interactive: var(--card);
    --sst-b2b-border: var(--line);
    --sst-b2b-accent: var(--yellow);
    --sst-b2b-accent-hover: color-mix(in srgb, var(--yellow) 85%, var(--black));
    --sst-b2b-accent-text: var(--ink);
    --sst-b2b-text-primary: var(--ink);
    --sst-b2b-text-secondary: var(--muted);
    --sst-b2b-text-muted: var(--muted);
    --sst-b2b-success: var(--ok);
    --sst-b2b-danger: var(--danger);
    --sst-b2b-ob-sticky-clearance: 76px; /* the site's floating buttons clear the /crew/ sticky total */

/* ---------- from admin-styles.css ---------- */
    --sst-b2b-hub-act-w: 200px;
    --sst-b2b-control-edge: color-mix(in srgb, var(--sst-text-muted) 70%, transparent); /* admin field edge, from .sst-b2b-wrap; PSIOPS --sst-text-muted */
    /* Round 5 G: one gold on both halves. PSIOPS paints its accent with
       rgb(240,192,64); the company side and the kit use the kit gold
       (kit.css --yellow, rgb(254,196,48)). On B2B pages the PSIOPS accent family
       is the kit gold, and its tints mix from it at the PSIOPS opacities. */
    --sst-accent-amber: var(--yellow, #fec430);
    --sst-accent-amber-hover: color-mix(in srgb, var(--sst-accent-amber) 82%, white);
    --sst-accent-amber-light: color-mix(in srgb, var(--sst-accent-amber) 75%, white);
    --sst-accent-amber-active: color-mix(in srgb, var(--sst-accent-amber) 85%, black);
    --sst-focus-ring: var(--sst-accent-amber);
    --sst-bg-warning: color-mix(in srgb, var(--sst-accent-amber) 8%, transparent);
    --sst-bg-warning-strong: color-mix(in srgb, var(--sst-accent-amber) 20%, transparent);
    --sst-border-warning: color-mix(in srgb, var(--sst-accent-amber) 20%, transparent);
    --sst-amber-wash: color-mix(in srgb, var(--sst-accent-amber) 4%, transparent);
    --sst-amber-wash-2: color-mix(in srgb, var(--sst-accent-amber) 6%, transparent);
    --sst-amber-wash-3: color-mix(in srgb, var(--sst-accent-amber) 8%, transparent);
    --sst-amber-wash-02: color-mix(in srgb, var(--sst-accent-amber) 2%, transparent);
    --sst-amber-wash-03: color-mix(in srgb, var(--sst-accent-amber) 3%, transparent);
    --sst-amber-wash-05: color-mix(in srgb, var(--sst-accent-amber) 5%, transparent);
    --sst-amber-line: color-mix(in srgb, var(--sst-accent-amber) 10%, transparent);
    --sst-amber-line-2: color-mix(in srgb, var(--sst-accent-amber) 12%, transparent);
    --sst-amber-line-3: color-mix(in srgb, var(--sst-accent-amber) 15%, transparent);
    --sst-amber-line-25: color-mix(in srgb, var(--sst-accent-amber) 25%, transparent);
    --sst-amber-line-strong: color-mix(in srgb, var(--sst-accent-amber) 30%, transparent);
    --sst-amber-line-40: color-mix(in srgb, var(--sst-accent-amber) 40%, transparent);
    --sst-amber-line-bright: color-mix(in srgb, var(--sst-accent-amber) 50%, transparent);
    --sst-amber-line-60: color-mix(in srgb, var(--sst-accent-amber) 60%, transparent);
    --sst-amber-line-90: color-mix(in srgb, var(--sst-accent-amber) 90%, transparent);
    --sst-amber-glow: color-mix(in srgb, var(--sst-accent-amber) 35%, transparent);
    --sst-anansi-scanline: color-mix(in srgb, var(--sst-accent-amber) 0.8%, transparent);
    --sst-anansi-web-amber: color-mix(in srgb, var(--sst-accent-amber) 1%, transparent);
    --sst-tab-processing-wash: color-mix(in srgb, var(--sst-accent-amber) 8%, transparent);
    --sst-tab-processing-wash-strong: color-mix(in srgb, var(--sst-accent-amber) 20%, transparent);

/* ---------- component roles (round 16: one button, one section title) ----------
   The two components at the foot of this sheet paint ONLY from these. The
   company values live here on :root; the PSIOPS scope below re-points them,
   so .sst-b2b-btn and .sst-b2b-section-title are one class on both halves. */
    --sst-b2b-btn-fg: var(--sst-b2b-text-2);              /* secondary + quiet label (bronze) */
    --sst-b2b-btn-fg-hover: var(--sst-b2b-text);
    --sst-b2b-btn-line: var(--sst-b2b-line);              /* the outline */
    --sst-b2b-btn-line-hover: var(--sst-b2b-text-3);
    --sst-b2b-btn-bg: transparent;
    --sst-b2b-btn-bg-hover: var(--sst-b2b-hover);
    --sst-b2b-btn-primary-bg: var(--sst-b2b-gold);        /* the kit gold, ink label */
    --sst-b2b-btn-primary-bg-hover: var(--sst-b2b-gold-hover);
    --sst-b2b-btn-primary-fg: var(--sst-b2b-on-gold);
    --sst-b2b-btn-danger-fg: var(--sst-b2b-red-text);
    --sst-b2b-btn-danger-line: var(--sst-b2b-red);
    --sst-b2b-btn-danger-bg-hover: var(--sst-b2b-red-wash);
    --sst-b2b-btn-quiet-fg-hover: var(--sst-b2b-gold-text);
    --sst-b2b-btn-disabled-bg: var(--sst-b2b-well);           /* a disabled primary is neutral, never faded gold (round 10 P) */
    --sst-b2b-btn-disabled-fg: var(--sst-b2b-text-3);
    --sst-b2b-btn-focus: var(--sst-b2b-panel-focus);
    --sst-b2b-btn-radius: var(--sst-b2b-radius-sm);
    --sst-b2b-btn-weight: 500;                            /* quiet; the primary alone is 600 */
    --sst-b2b-btn-primary-weight: 600;
    --sst-b2b-btn-transform: none;                        /* PSIOPS: uppercase */
    --sst-b2b-btn-tracking: 0;
    --sst-b2b-title-fg: var(--sst-b2b-gold-text);         /* bronze on the company side */
    --sst-b2b-title-weight: 500;
    --sst-b2b-title-transform: none;                      /* calm, small, sentence case; PSIOPS: uppercase */
    --sst-b2b-title-tracking: 0;

/* tokens:end */
}

/* =================================================================
   Components. These two are the only rules in the plugin that may paint a
   button or a section title; tests/unit/ButtonComponentTest.php fails a
   button-ish selector that sets background, padding, radius, height or
   font-size anywhere else. Both paint from the role tokens above only.
   Owner ruling 2026-10-23 ("classy like Apple"): quiet weight, the token
   radius, no glow, gradient or lift; one clear primary per view, so the
   secondary and quiet presses rest beside it.

   .sst-b2b-btn                 the outline (secondary) press, 44px tall
     --primary                  kit gold fill, ink label: the one main action
     --secondary                the outline (same as the base; say it in markup)
     --quiet                    no outline: ghost / text press
     --danger                   red outline, red label: Remove / Revoke / Delete
     --sm                       12px label, tighter sides; still 44px tall
     --full                     stretches to its row
   A link with the class (an <a> or a <summary>) is the same press.
   ================================================================= */
.sst-b2b-btn {
    --sst-b2b-btn-ink: var(--sst-b2b-btn-fg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    min-height: var(--sst-b2b-control-h);
    margin: 0;
    padding: 0 18px;
    border: 1px solid var(--sst-b2b-btn-line);
    border-radius: var(--sst-b2b-btn-radius);
    background: var(--sst-b2b-btn-bg);
    color: var(--sst-b2b-btn-ink);
    font: inherit;
    font-size: var(--sst-fs-sm);
    font-weight: var(--sst-b2b-btn-weight);
    line-height: 1.2;
    letter-spacing: var(--sst-b2b-btn-tracking);
    text-transform: var(--sst-b2b-btn-transform);
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    list-style: none;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
/* Round 17 PP: a full-width press and a <summary> press wrap on a phone; a long
   label ("All workers named. Paste a worker list anyway") never runs past its panel. */
.sst-b2b-btn--full,
summary.sst-b2b-btn {
    white-space: normal;
    text-align: center;
}
.sst-b2b-btn::-webkit-details-marker { display: none; }
.sst-b2b-btn:hover,
.sst-b2b-btn:focus-visible {
    --sst-b2b-btn-ink: var(--sst-b2b-btn-fg-hover);
    border-color: var(--sst-b2b-btn-line-hover);
    background: var(--sst-b2b-btn-bg-hover);
    text-decoration: none;
}
.sst-b2b-btn:focus-visible {
    outline: 2px solid var(--sst-b2b-btn-focus);
    outline-offset: 2px;
}
.sst-b2b-btn--primary,
.sst-b2b-btn[aria-current="page"] {
    --sst-b2b-btn-ink: var(--sst-b2b-btn-primary-fg);
    border-color: var(--sst-b2b-btn-primary-bg);
    background: var(--sst-b2b-btn-primary-bg);
    font-weight: var(--sst-b2b-btn-primary-weight);
}
.sst-b2b-btn--primary:hover,
.sst-b2b-btn--primary:focus-visible,
.sst-b2b-btn[aria-current="page"]:hover,
.sst-b2b-btn[aria-current="page"]:focus-visible {
    --sst-b2b-btn-ink: var(--sst-b2b-btn-primary-fg);
    border-color: var(--sst-b2b-btn-primary-bg-hover);
    background: var(--sst-b2b-btn-primary-bg-hover);
}
.sst-b2b-btn--quiet {
    border-color: transparent;
    background: transparent;
}
.sst-b2b-btn--quiet:hover,
.sst-b2b-btn--quiet:focus-visible {
    --sst-b2b-btn-ink: var(--sst-b2b-btn-quiet-fg-hover);
    border-color: transparent;
    background: var(--sst-b2b-btn-bg-hover);
}
.sst-b2b-btn--danger {
    --sst-b2b-btn-ink: var(--sst-b2b-btn-danger-fg);
    border-color: var(--sst-b2b-btn-danger-line);
    background: transparent;
}
.sst-b2b-btn--danger:hover,
.sst-b2b-btn--danger:focus-visible {
    --sst-b2b-btn-ink: var(--sst-b2b-btn-danger-fg);
    border-color: var(--sst-b2b-btn-danger-line);
    background: var(--sst-b2b-btn-danger-bg-hover);
}
.sst-b2b-btn--sm {
    padding: 0 12px;
    font-size: var(--sst-fs-xs);
}
.sst-b2b-btn--full {
    display: flex;
    width: 100%;
}
.sst-b2b-btn:disabled,
.sst-b2b-btn[disabled],
.sst-b2b-btn[aria-disabled="true"],
.sst-b2b-btn.is-disabled {
    opacity: .5;
    cursor: not-allowed;
    pointer-events: none;
}
.sst-b2b-btn--primary:disabled,
.sst-b2b-btn--primary[disabled],
.sst-b2b-btn--primary[aria-disabled="true"] {
    --sst-b2b-btn-ink: var(--sst-b2b-btn-disabled-fg);
    opacity: 1;
    border-color: var(--sst-b2b-btn-line);
    background: var(--sst-b2b-btn-disabled-bg);
}
/* A disabled Remove / Revoke is muted, not red, until there is something to act on (round 6 I). */
.sst-b2b-btn--danger:disabled,
.sst-b2b-btn--danger[disabled] {
    --sst-b2b-btn-ink: var(--sst-b2b-btn-disabled-fg);
    border-color: var(--sst-b2b-btn-line);
}
@media (prefers-reduced-motion: reduce) {
    .sst-b2b-btn { transition: none; }
}

/* The one section title: one type step, calm and small, bronze sentence case
   on the company side; the PSIOPS scope below keeps its ALL CAPS headers. */
.sst-b2b-section-title {
    display: block;
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-size: var(--sst-fs-sm);
    font-weight: var(--sst-b2b-title-weight);
    line-height: 1.3;
    letter-spacing: var(--sst-b2b-title-tracking);
    text-transform: var(--sst-b2b-title-transform);
    color: var(--sst-b2b-title-fg);
}

/* PSIOPS scope: the admin half re-points the roles, the way the accent
   family above re-points the PSIOPS amber. Dark panels, ALL CAPS presses
   and headers, the kit gold on the one main action. */
.sst-b2b-wrap {
    --sst-b2b-btn-fg: var(--sst-text-secondary);
    --sst-b2b-btn-fg-hover: var(--sst-text-primary);
    --sst-b2b-btn-line: var(--sst-border-solid);
    --sst-b2b-btn-line-hover: var(--sst-text-muted);
    --sst-b2b-btn-bg-hover: var(--sst-hover-bg);
    --sst-b2b-btn-primary-fg: var(--sst-text-inverse);
    --sst-b2b-btn-danger-fg: var(--sst-accent-red);
    --sst-b2b-btn-danger-line: var(--sst-accent-red);
    --sst-b2b-btn-danger-bg-hover: var(--sst-red-wash-2);
    --sst-b2b-btn-quiet-fg-hover: var(--sst-accent-amber);
    --sst-b2b-btn-disabled-bg: var(--sst-bg-tertiary);
    --sst-b2b-btn-disabled-fg: var(--sst-text-muted);
    --sst-b2b-btn-focus: var(--sst-focus-ring);
    --sst-b2b-btn-transform: uppercase;
    --sst-b2b-btn-tracking: 0.06em;
    --sst-b2b-title-fg: var(--sst-text-primary);
    --sst-b2b-title-weight: 600;
    --sst-b2b-title-transform: uppercase;
    --sst-b2b-title-tracking: 0.06em;
}
/* The company shell underlines its links; a press that is a link keeps the
   component's ink and no underline at that specificity. */
.shell a.sst-b2b-btn,
.shell a.sst-b2b-btn:hover,
.shell a.sst-b2b-btn:focus-visible,
body.sst-b2b-crew-page a.sst-b2b-btn,
body.sst-b2b-crew-page a.sst-b2b-btn:hover {
    color: var(--sst-b2b-btn-ink);
    text-decoration: none;
}
/* admin-styles.css colours every .sst-b2b-wrap a:not(.button):not(.page-title-action):not(.nav-tab);
   a press that is a link keeps the component's ink at that specificity. */
.sst-b2b-wrap a.sst-b2b-btn:not(.button):not(.page-title-action):not(.nav-tab),
.sst-b2b-wrap a.sst-b2b-btn:not(.button):not(.page-title-action):not(.nav-tab):hover,
.sst-b2b-wrap a.sst-b2b-btn:not(.button):not(.page-title-action):not(.nav-tab):focus,
.sst-b2b-wrap a.sst-b2b-btn:not(.button):not(.page-title-action):not(.nav-tab):focus-visible {
    color: var(--sst-b2b-btn-ink);
    text-decoration: none;
}