/* GENERATED FILE — do not edit. Built by tools/build-themes.py from v1/themes/_src/:
 *   type.css
 *   tokens-clean-pro.css
 *   base.css
 *   legacy-accent.css
 *   components.css
 *   chrome.css
 *   pages.css
 *   tokens-clean-pro-v2.css
 *   clean-pro-v2.css
 * Theme: clean-pro. Edit the sources and re-run `python3 tools/build-themes.py`;
 * tests/themes-build.test.js fails when this file and _src disagree. */

/* ===== _src/type.css ===== */
/* ==========================================================================
   SkySuite · SHARED type system for the new-UI themes (Clean Pro, Field Ops, Warm Modern, Clean Pro Field)
   --------------------------------------------------------------------------
   Source of truth: the public home page (https://skysuite.pro/) and the
   logged-in app's default "vercel" theme pack (skysuite-shell
   v1/themes/vercel/theme.css) both set
       Geist       — headings, body, nav, buttons
       Geist Mono  — eyebrows / labels, code, IDs, coordinates
   loaded from Google Fonts with exactly this URL (keep it identical so the
   mockups render the same files as the live brand):
     https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&family=Inter:wght@300;400;500;600;700&display=swap
   Candidate A already used Geist + Geist Mono, so this is A's system,
   promoted to all four directions. Directions differ in colour, shape,
   density and component style — never in typeface or scale.
   ========================================================================== */

html[data-ui="new"] {
  /* ---- families ---- */
  --ss-font-sans: "Geist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ss-font-display: var(--ss-font-sans);   /* brand voice = Geist 600 + tight tracking */
  --ss-font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---- one size scale (px) — every font-size in every direction is one of these ---- */
  --ss-fs-11: 11px;  /* eyebrows (mono caps), micro labels, kbd     */
  --ss-fs-12: 12px;  /* meta, table secondary, captions             */
  --ss-fs-13: 13px;  /* dense UI default: tables, side nav, inputs  */
  --ss-fs-14: 14px;  /* body copy, emphasised UI                    */
  --ss-fs-16: 16px;  /* card / section titles, large-control labels */
  --ss-fs-18: 18px;  /* sub-page titles, phone primary actions      */
  --ss-fs-20: 20px;  /* page titles                                 */
  --ss-fs-24: 24px;  /* greeting, KPI values                        */
  --ss-fs-28: 28px;  /* hero numbers                                */
  --ss-fs-32: 32px;  /* display (largest in-app size)               */

  /* ---- weights: only the three the home page renders ---- */
  --ss-fw-regular: 400;   /* body                        */
  --ss-fw-medium: 500;    /* UI labels, buttons, nav     */
  --ss-fw-semibold: 600;  /* headings, values, emphasis  */

  /* ---- line-heights ---- */
  --ss-lh-tight: 1.15;  /* headings, numbers  */
  --ss-lh-snug: 1.3;    /* two-line rows      */
  --ss-lh-body: 1.45;   /* paragraphs, UI     */

  /* ---- tracking (from the home page: body ≈ -0.011em, headings -0.025…-0.04em, mono caps +0.06em) ---- */
  --ss-track-body: -0.006em;
  --ss-track-heading: -0.022em;
  --ss-track-display: -0.03em;
  --ss-track-caps: 0.06em;
}

/* ---- base ---- */
html[data-ui="new"] body {
  font-family: var(--ss-font-sans);
  line-height: var(--ss-lh-body);
  letter-spacing: var(--ss-track-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
html[data-ui="new"] :is(button, input, select, textarea) { font-family: inherit; }

/* ---- data: tabular numerals everywhere numbers line up ---- */
html[data-ui="new"] :is(table, td, th, .num, .mono, .tnum, [class*="stat"], [class*="kpi"], [class*="metric"]) {
  font-variant-numeric: tabular-nums;
}

/* ---- roles (opt-in utility classes; components use the tokens directly) ---- */
html[data-ui="new"] .ss-eyebrow {           /* the home page's section label */
  font: var(--ss-fw-medium) var(--ss-fs-11)/1.2 var(--ss-font-mono);
  letter-spacing: var(--ss-track-caps); text-transform: uppercase;
}
html[data-ui="new"] .ss-mono { font-family: var(--ss-font-mono); letter-spacing: 0; font-variant-numeric: tabular-nums; }
html[data-ui="new"] .ss-display { font: var(--ss-fw-semibold) var(--ss-fs-32)/var(--ss-lh-tight) var(--ss-font-display); letter-spacing: var(--ss-track-display); }

/* ===== _src/tokens-clean-pro.css ===== */
/* ==========================================================================
   Clean Pro (Direction A) — semantic tokens, light + dark.
   Also the token set of Clean Pro Field (D = A + field.css), hence the :is().
   Source: ui-audit-20261012/directions/A/tokens.css (--a-* renamed --ss-*).
   Contract: ui-themes-20261013/CONTRACT.md. Every pair that carries text is
   asserted by tests/themes-tokens-contrast.test.js against the BUILT file.
   Tuned away from the mockup (and why) is marked "tuned:".
   ========================================================================== */

html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) {
  /* radius */
  --ss-r-xs: 4px;
  --ss-r-sm: 6px;
  --ss-r: 8px;
  --ss-r-lg: 10px;
  --ss-r-pill: 999px;
  /* sizes: 32px controls, 26px small, 48px phone tap target */
  --ss-ctl-h: 32px;
  --ss-ctl-h-sm: 26px;
  --ss-tap: 48px;
  --ss-tap-xl: 56px;
  --ss-row-h: 38px;
  --ss-topbar-h: 48px;
  /* strokes */
  --ss-bw: 1px;
  --ss-bw-strong: 1px;
  /* body text size of dense UI */
  --ss-fs-ui: var(--ss-fs-13);
  /* motion */
  --ss-ease: cubic-bezier(.2, .8, .2, 1);
  --ss-dur: 160ms;
}

/* ------------------------------------------------------------------ LIGHT */
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"])[data-mode="light"] {
  color-scheme: light;
  --ss-bg: #ffffff;          /* page / content              */
  --ss-bg-1: #fafafa;        /* sidebar, panels, table head */
  --ss-bg-2: #f4f4f5;        /* hover, inset wells          */
  --ss-bg-3: #ececef;        /* pressed, track              */
  --ss-surface: #ffffff;     /* cards                       */
  --ss-raised: #ffffff;      /* menus, popovers, modals     */
  --ss-line: #e8e8eb;        /* hairline (decorative)       */
  --ss-line-2: #dcdce0;      /* stronger hairline           */
  --ss-line-strong: #84848d; /* tuned: control boundaries (inputs, outline buttons, checkboxes) need 3:1 —
                                the mockup's #dcdce0 input border is 1.36:1. 3.7:1 on #fff, 3.1:1 on #ececef. */
  --ss-ink: #18181b;         /* 17.7:1 */
  --ss-ink-2: #52525b;       /* 7.7:1  */
  --ss-ink-3: #65656e;       /* tuned: #6b6b74 -> #65656e so muted text clears 4.5:1 on bg-3 too (4.9:1 there) */
  --ss-ink-4: #a1a1aa;       /* decorative only (icons in wells, placeholders are NOT this) */
  --ss-placeholder: #6e6e77;

  --ss-accent: #b0136d;      /* ink-darkened SkySuite magenta: buttons, focus. White text 6.6:1 */
  --ss-accent-rgb: 176, 19, 109;
  --ss-accent-text-rgb: 149, 15, 87;
  --ss-bg-rgb: 255, 255, 255;
  --ss-ink-rgb: 24, 24, 27;
  --ss-accent-hover: #9a0f5f;
  --ss-accent-text: #950f57; /* links on white 8.5:1 — never bright pink text */
  --ss-accent-soft: #fcf0f6;
  --ss-accent-line: #f3c9e0;
  --ss-on-accent: #ffffff;
  --ss-focus: #b0136d;
  --ss-focus-ring: 0 0 0 3px rgba(176, 19, 109, .22);
  /* action: the BLUE of "your next step", work in progress, the primary button and links
     (John 2026-10-14: colour carries meaning; the magenta accent is decoration only).
     Read through --status-active* / --action-* (base.css section 1b). */
  --ss-action: #2563eb;      /* white on fill 5.2:1; text 6.7:1 on white, 5.7:1 on bg-3 */
  --ss-action-hover: #1d4ed8;
  --ss-on-action: #ffffff;
  --ss-action-text: #1d4ed8;
  --ss-action-soft: #eff6ff;
  --ss-action-line: #bfdbfe;

  --ss-success: #13773a; --ss-success-soft: #eefaf2; --ss-success-fill: #13773a; --ss-on-success: #ffffff;
  --ss-warning: #a14a06; --ss-warning-soft: #fff7eb; --ss-warning-fill: #a14a06; --ss-on-warning: #ffffff; /* tuned: #b45309 -> #a14a06, 4.72 -> 5.6:1 on its soft fill */
  --ss-danger: #b91c1c;  --ss-danger-soft: #fef2f2;  --ss-danger-fill: #b91c1c;  --ss-on-danger: #ffffff;
  --ss-info: #0a67ab;    --ss-info-soft: #eff7fe;    --ss-info-fill: #0a67ab;    --ss-on-info: #ffffff;
  /* tuned: success #15803d -> #13773a and info #0b6fb8 -> #0a67ab so status text also clears 4.5:1 on the #ececef track */
  --ss-live: #dc2626;

  --ss-shadow-sm: 0 1px 2px rgba(16, 16, 20, .05);
  --ss-shadow-md: 0 1px 2px rgba(16, 16, 20, .05), 0 6px 16px -6px rgba(16, 16, 20, .12);
  --ss-shadow-overlay: 0 0 0 1px rgba(16, 16, 20, .06), 0 12px 32px -8px rgba(16, 16, 20, .18), 0 4px 10px -4px rgba(16, 16, 20, .08);
  --ss-scrim: rgba(16, 16, 20, .45);

  --ss-glass: rgba(255, 255, 255, .80);
  --ss-glass-strong: rgba(255, 255, 255, .92);
  --ss-glass-line: rgba(16, 16, 20, .09);
  --ss-map-ink: #18181b;
}

/* ------------------------------------------------------------------- DARK */
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"])[data-mode="dark"] {
  color-scheme: dark;
  --ss-bg: #0b0b0d;          /* page — near-black, not #000 */
  --ss-bg-1: #111113;        /* sidebar, panels             */
  --ss-bg-2: #18181b;        /* hover, wells                */
  --ss-bg-3: #222226;        /* pressed, track              */
  --ss-surface: #111113;     /* cards                       */
  --ss-raised: #19191c;      /* menus, popovers             */
  --ss-line: #232327;
  --ss-line-2: #2f2f34;
  --ss-line-strong: #6b6b74; /* tuned: control boundaries, 3.7:1 on #0b0b0d, 3.0:1 on #222226 (mockup: #2f2f34, 1.5:1) */
  --ss-ink: #ededef;         /* 16.9:1 */
  --ss-ink-2: #a8a8b0;       /* 8.3:1  */
  --ss-ink-3: #8f8f98;       /* tuned: #8b8b94 -> #8f8f98, keeps 4.9:1 on bg-3 */
  --ss-ink-4: #5d5d66;       /* decorative only */
  --ss-placeholder: #85858e;

  --ss-accent: #d61f8a;      /* button fill, white text 4.75:1 */
  --ss-accent-rgb: 214, 31, 138;
  --ss-accent-text-rgb: 255, 108, 196;
  --ss-bg-rgb: 11, 11, 13;
  --ss-ink-rgb: 237, 237, 239;
  --ss-accent-hover: #c01a7b; /* tuned: mockup #e3309a lightens on hover (white text 4.2:1); darken instead (5.6:1) */
  --ss-accent-text: #ff6cc4; /* links / active labels on near-black 7.7:1 */
  --ss-accent-soft: #2a0f20; /* tuned: rgba(255,47,174,.10) flattened onto bg so text pairs are measurable */
  --ss-accent-line: #6b1d4b;
  --ss-on-accent: #ffffff;
  --ss-focus: #ff6cc4;
  --ss-focus-ring: 0 0 0 3px rgba(255, 47, 174, .32);
  /* action blue (see the light block) */
  --ss-action: #60a5fa;      /* dark ink on fill 7.7:1; text 7.3:1 on the card, 6.6:1 on its soft wash */
  --ss-action-hover: #93c5fd;
  --ss-on-action: #0b0b0d;
  --ss-action-text: #60a5fa;
  --ss-action-soft: #0f1d33;
  --ss-action-line: #274a85;

  --ss-success: #4ade80; --ss-success-soft: #0f2418; --ss-success-fill: #22c55e; --ss-on-success: #0b0b0d;
  --ss-warning: #fbbf24; --ss-warning-soft: #2a2109; --ss-warning-fill: #f59e0b; --ss-on-warning: #0b0b0d;
  --ss-danger: #f87171;  --ss-danger-soft: #2c1214;  --ss-danger-fill: #f87171;  --ss-on-danger: #0b0b0d;
  --ss-info: #63b8f6;    --ss-info-soft: #0f2131;    --ss-info-fill: #63b8f6;    --ss-on-info: #0b0b0d;
  --ss-live: #dc2626;

  --ss-shadow-sm: 0 1px 0 rgba(255, 255, 255, .03) inset;
  --ss-shadow-md: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 20px -8px rgba(0, 0, 0, .6);
  --ss-shadow-overlay: 0 0 0 1px rgba(255, 255, 255, .07), 0 16px 40px -8px rgba(0, 0, 0, .65), 0 4px 12px -4px rgba(0, 0, 0, .5);
  --ss-scrim: rgba(0, 0, 0, .6);

  --ss-glass: rgba(17, 17, 19, .74);
  --ss-glass-strong: rgba(17, 17, 19, .88);
  --ss-glass-line: rgba(255, 255, 255, .09);
  --ss-map-ink: #ededef;
}

/* ---------------------------------------------------------- CHARACTER (components.css)
   Direction A's component shapes (directions/A/components.css, screens-2x): hairline
   cards with a 40px header row and a divider, compact 32px controls, sentence-case table
   heads on a sunken row, outlined status pills with a dot, an ink tab underline. */
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) {
  --ss-c-btn-h: var(--ss-ctl-h); --ss-c-btn-h-sm: var(--ss-ctl-h-sm); --ss-c-btn-h-lg: 38px;
  --ss-c-btn-px: 12px; --ss-c-btn-fs: var(--ss-fs-13); --ss-c-btn-fw: var(--ss-fw-medium);
  --ss-c-btn-shadow: var(--ss-shadow-sm);
  --ss-c-btn-primary-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 1px 2px rgba(0, 0, 0, .18);
  --ss-c-input-h: var(--ss-ctl-h); --ss-c-input-fs: var(--ss-fs-13);
  --ss-c-card-r: var(--ss-r); --ss-c-card-line: var(--ss-line); --ss-c-card-shadow: none;
  --ss-c-head-bg: transparent; --ss-c-head-py: 10px; --ss-c-head-fs: var(--ss-fs-13); --ss-c-head-line: var(--ss-line);
  --ss-c-th-font: var(--ss-font-sans); --ss-c-th-fs: var(--ss-fs-12); --ss-c-th-fw: var(--ss-fw-medium);
  --ss-c-th-case: none; --ss-c-th-track: 0; --ss-c-th-ink: var(--ss-ink-3); --ss-c-th-bg: var(--ss-bg-1); --ss-c-th-h: 32px;
  --ss-c-td-h: var(--ss-row-h); --ss-c-td-fs: var(--ss-fs-13);
  --ss-c-badge-font: var(--ss-font-sans); --ss-c-badge-fs: var(--ss-fs-12); --ss-c-badge-fw: var(--ss-fw-medium);
  --ss-c-badge-case: none; --ss-c-badge-track: 0; --ss-c-badge-r: var(--ss-r-pill); --ss-c-badge-h: 22px;
  --ss-c-badge-dot: 6px;
  --ss-c-h1-fs: var(--ss-fs-24);
  --ss-c-label-font: var(--ss-font-sans); --ss-c-label-fs: var(--ss-fs-13); --ss-c-label-case: none; --ss-c-label-track: 0; --ss-c-label-ink: var(--ss-ink);
  --ss-c-tab-h: 38px; --ss-c-tab-bar: 2px; --ss-c-tab-mark: var(--ss-ink);
  --ss-c-group-font: var(--ss-font-sans); --ss-c-group-fs: var(--ss-fs-12); --ss-c-group-case: none; --ss-c-group-track: 0;
  --ss-c-nav-h: 32px; --ss-c-nav-active-bg: var(--ss-bg-2); --ss-c-nav-active-ring: inset 0 0 0 1px var(--ss-line);
}
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"])[data-mode="dark"] {
  --ss-c-th-bg: transparent; --ss-c-nav-active-bg: var(--ss-bg-3); --ss-c-nav-active-ring: none;
}

/* ===== _src/base.css ===== */
/* ==========================================================================
   SkySuite new-UI themes · SHARED COMPONENT LAYER (Phase 0, 2026-10-13)
   --------------------------------------------------------------------------
   One file for all four new themes. It reads ONLY the --ss-* semantic tokens
   (defined per theme in tokens-*.css), so a theme is its tokens; this layer
   never names a colour.

   Three jobs:
     1. BRIDGE  — feed today's variables (--bg/--ink…, --sky-*, --ds-*, --nav-*,
                  --theme-*, --bs-*) from the tokens, exactly as Classic's
                  themes/vercel/theme.css does for its palette, so every page
                  that is not converted yet still follows the new palette.
     2. SHELL   — restyle the chrome base.html + sky-sidebar.js render (top bar
                  #sbn, sidebar, avatar menu, phone tab bar + Me sheet, system
                  banners, What's New card, podcast player, breadcrumbs, footer).
     3. BOOTSTRAP — buttons, inputs, cards, tables, tabs, modals, toasts,
                  badges, alerts, dropdowns, list groups, pagination and the
                  utility surfaces, with production selectors.

   Scope: every rule is under html[data-ui="new"], so Classic (data-ui="classic")
   never matches anything here. The theme <link> is rendered LAST in <head>, so
   it follows the shell sheets; page <style> blocks in <body> still follow it,
   which is why selectors carry html[data-ui="new"] (+1 type, +1 attribute) of
   specificity. !important is used only where Bootstrap's own utilities use it
   (.bg-*, .text-*, .border-*) or where the shell sets the property inline or
   with !important (noted per rule).
   ========================================================================== */

/* ==========================================================================
   1. BRIDGE: legacy variables follow the tokens
   ========================================================================== */
html[data-ui="new"] {
  /* Classic's marketing-palette names (vercel/theme.css) — read by shell + page CSS */
  --bg: var(--ss-bg);
  --bg-1: var(--ss-bg-1);
  --bg-2: var(--ss-bg-2);
  --bg-3: var(--ss-bg-3);
  --line: var(--ss-line);
  --line-2: var(--ss-line-strong);
  --ink: var(--ss-ink);
  --ink-2: var(--ss-ink-2);
  --ink-3: var(--ss-ink-3);
  --ink-4: var(--ss-ink-4);
  --accent-rgb: var(--ss-accent-rgb);
  --accent-ink: var(--ss-accent-text);
  --accent-ink-rgb: var(--ss-accent-rgb);
  --good: var(--ss-info);
  --good-2: var(--ss-success);
  --r: var(--ss-r);

  /* --sky-* (sky-theme.css, sky-sidebar.js, most service templates) */
  --sky-primary-rgb: var(--ss-accent-rgb);
  --sky-bg: var(--ss-bg);
  --sky-surface: var(--ss-surface);
  --sky-surface-2: var(--ss-bg-2);
  --sky-surface-hover: var(--ss-bg-2);
  --sky-border: var(--ss-line);
  --sky-text: var(--ss-ink);
  --sky-text-muted: var(--ss-ink-3);
  --sky-text-dim: var(--ss-ink-3);
  --sky-on-accent: var(--ss-on-accent);
  --sky-sidebar-bg: var(--ss-bg-1);
  --sky-sidebar-text: var(--ss-ink-2);
  --sky-sidebar-hover: var(--ss-bg-2);
  --sky-tab-bg: var(--ss-bg-2);
  --sky-tab-active-bg: var(--ss-bg-2);
  --sky-tab-text: var(--ss-ink-2);
  --sky-tab-active-text: var(--ss-ink);
  /* the Office / Field tab colour (cyan / green) drives the rail accent, the
     favourites strip and their light-mode ink (sky-theme.css colour-mixes it):
     in the new themes it is the theme accent */
  --sky-tab-color: var(--ss-accent-text);
  --sky-tab-ink: var(--ss-accent-text);
  --sky-fp-color: var(--ss-ink-2);
  --sky-usermenu-bg: var(--ss-raised);
  --sky-usermenu-border: var(--ss-line);
  --sky-usermenu-shadow: var(--ss-shadow-overlay);
  --sky-usermenu-text: var(--ss-ink);
  --sky-usermenu-icon: var(--ss-ink-2);
  --sky-usermenu-hover-bg: var(--ss-bg-2);
  --sky-usermenu-hover-text: var(--ss-ink);
  --sky-usermenu-divider: var(--ss-line);
  --sky-usermenu-danger: var(--ss-danger);
  --sky-usermenu-danger-bg: var(--ss-danger-soft);
  --sky-usermenu-btn: var(--ss-ink-2);
  --sky-usermenu-btn-hover: var(--ss-ink);

  /* --ds-* (drone-suite-theme.css) */
  --ds-primary-subtle: var(--ss-accent-soft);
  --ds-gray-50: var(--ss-bg);
  --ds-gray-100: var(--ss-bg-1);
  --ds-gray-200: var(--ss-bg-2);
  --ds-gray-300: var(--ss-bg-3);
  --ds-gray-400: var(--ss-ink-4);
  --ds-gray-500: var(--ss-ink-3);
  --ds-gray-600: var(--ss-ink-2);
  --ds-gray-700: var(--ss-ink-2);
  --ds-gray-800: var(--ss-ink);
  --ds-gray-900: var(--ss-ink);
  --ds-glass-bg: var(--ss-surface);
  --ds-glass-border: var(--ss-line);
  --ds-glass-blur: 0px;
  --ds-glass-shadow: var(--ss-shadow-sm);
  --ds-page-bg: var(--ss-bg);
  --ds-page-bg-fallback: var(--ss-bg);
  --ds-text: var(--ss-ink);
  --ds-text-secondary: var(--ss-ink-2);
  --ds-text-muted: var(--ss-ink-3);
  --ds-success: var(--ss-success-fill);
  --ds-warning: var(--ss-warning-fill);
  --ds-danger: var(--ss-danger-fill);
  --ds-info: var(--ss-info-fill);
  --ds-control-border: var(--ss-line-strong);
  --ds-radius: var(--ss-r);
  --ds-radius-sm: var(--ss-r-sm);
  --ds-radius-lg: var(--ss-r-lg);

  /* --nav-* (the #sbn top bar) */
  --font-sans: var(--ss-font-sans);
  --nav-bg: var(--ss-bg-1);
  --nav-sub-bg: var(--ss-bg-2);
  --nav-border: var(--ss-line);
  --nav-text: var(--ss-ink-2);
  --nav-text-hover: var(--ss-ink);
  --nav-text-active: var(--ss-ink);
  --nav-brand: var(--ss-accent);
  --nav-active-border: var(--ss-accent);
  --nav-active-bg: var(--ss-accent-soft);
  --nav-dd-bg: var(--ss-raised);
  --nav-dd-border: var(--ss-line);
  --nav-dd-text: var(--ss-ink);
  --nav-dd-hover-bg: var(--ss-bg-2);
  --nav-sub-title: var(--ss-ink-3);

  /* --theme-* (semantic chrome tokens) */
  --theme-shadow-sm: var(--ss-shadow-sm);
  --theme-shadow-md: var(--ss-shadow-md);
  --theme-shadow-lg: var(--ss-shadow-overlay);
  --theme-overlay: var(--ss-scrim);
  --theme-muted-surface: var(--ss-bg-1);
  --theme-focus-ring: var(--ss-focus);
  --theme-accent-soft: var(--ss-accent-soft);
  --theme-glass-bg: var(--ss-glass-strong);
  --theme-glass-border: var(--ss-line);
  --theme-success: var(--ss-success-fill);
  --theme-success-bg: var(--ss-success-soft);
  --theme-success-fg: var(--ss-success);
  --theme-danger: var(--ss-danger-fill);
  --theme-danger-bg: var(--ss-danger-soft);
  --theme-danger-fg: var(--ss-danger);
  --theme-warning: var(--ss-warning-fill);
  --theme-warning-bg: var(--ss-warning-soft);
  --theme-warning-fg: var(--ss-warning);
  --theme-info: var(--ss-info-fill);
  --theme-info-bg: var(--ss-info-soft);
  --theme-info-fg: var(--ss-info);
  --theme-bs-success: var(--ss-success-fill);
  --theme-bs-danger: var(--ss-danger-fill);
  --theme-bs-warning: var(--ss-warning-fill);
  --theme-bs-info: var(--ss-info-fill);

  /* Bootstrap 5.3 root variables */
  --bs-font-sans-serif: var(--ss-font-sans);
  --bs-font-monospace: var(--ss-font-mono);
  --bs-body-font-family: var(--ss-font-sans);
  --bs-body-bg: var(--ss-bg);
  --bs-body-bg-rgb: var(--ss-bg-rgb);
  --bs-body-color: var(--ss-ink);
  --bs-body-color-rgb: var(--ss-ink-rgb);
  --bs-emphasis-color: var(--ss-ink);
  --bs-heading-color: var(--ss-ink);
  --bs-secondary-color: var(--ss-ink-3);
  --bs-secondary-bg: var(--ss-bg-1);
  --bs-tertiary-color: var(--ss-ink-3);
  --bs-tertiary-bg: var(--ss-bg-2);
  --bs-border-color: var(--ss-line);
  --bs-border-color-translucent: var(--ss-line);
  --bs-border-radius: var(--ss-r-sm);
  --bs-border-radius-sm: var(--ss-r-xs);
  --bs-border-radius-lg: var(--ss-r);
  --bs-border-radius-xl: var(--ss-r-lg);
  --bs-primary: var(--ss-accent);
  --bs-primary-rgb: var(--ss-accent-rgb);
  --bs-primary-text-emphasis: var(--ss-accent-text);
  --bs-primary-bg-subtle: var(--ss-accent-soft);
  --bs-primary-border-subtle: var(--ss-accent-line);
  --bs-success: var(--ss-success-fill);
  --bs-danger: var(--ss-danger-fill);
  --bs-warning: var(--ss-warning-fill);
  --bs-info: var(--ss-info-fill);
  --bs-success-text-emphasis: var(--ss-success);
  --bs-danger-text-emphasis: var(--ss-danger);
  --bs-warning-text-emphasis: var(--ss-warning);
  --bs-info-text-emphasis: var(--ss-info);
  --bs-success-bg-subtle: var(--ss-success-soft);
  --bs-danger-bg-subtle: var(--ss-danger-soft);
  --bs-warning-bg-subtle: var(--ss-warning-soft);
  --bs-info-bg-subtle: var(--ss-info-soft);
  --bs-secondary-text-emphasis: var(--ss-ink-2);
  --bs-secondary-bg-subtle: var(--ss-bg-2);
  --bs-secondary-border-subtle: var(--ss-line-2);
  --bs-light-text-emphasis: var(--ss-ink-2);
  --bs-light-bg-subtle: var(--ss-bg-1);
  --bs-dark-text-emphasis: var(--ss-ink);
  --bs-dark-bg-subtle: var(--ss-bg-3);
  --bs-link-color: var(--ss-accent-text);
  --bs-link-color-rgb: var(--ss-accent-text-rgb);
  --bs-link-hover-color: var(--ss-accent-text);
  --bs-link-hover-color-rgb: var(--ss-accent-text-rgb);
  --bs-code-color: var(--ss-accent-text);
  --bs-highlight-bg: var(--ss-warning-soft);
  --bs-highlight-color: var(--ss-ink);
  --bs-focus-ring-color: color-mix(in srgb, var(--ss-focus) 35%, transparent);
  --bs-form-valid-color: var(--ss-success);
  --bs-form-valid-border-color: var(--ss-success);
  --bs-form-invalid-color: var(--ss-danger);
  --bs-form-invalid-border-color: var(--ss-danger);
  --bs-table-bg: transparent;
  --bs-table-hover-bg: var(--ss-bg-2);
  --bs-modal-bg: var(--ss-raised);
  /* component-level Bootstrap variables that Classic also sets at the root */
  --bs-btn-bg: var(--ss-surface);
  --bs-btn-color: var(--ss-ink);
  --bs-btn-border-color: var(--ss-line-strong);
  --bs-alert-bg: var(--ss-bg-1);
  --bs-alert-color: var(--ss-ink);
  --bs-alert-border-color: var(--ss-line);
  --bs-dropdown-bg: var(--ss-raised);
  --bs-dropdown-color: var(--ss-ink);
  --bs-dropdown-link-color: var(--ss-ink);
  --bs-dropdown-link-hover-color: var(--ss-ink);
  --bs-dropdown-link-hover-bg: var(--ss-bg-2);
  --bs-dropdown-border-color: var(--ss-line);
  --bs-form-control-bg: var(--ss-surface);
  --bs-form-control-color: var(--ss-ink);
  --bs-form-control-disabled-bg: var(--ss-bg-2);
  --bs-card-bg: var(--ss-surface);
  --bs-card-border-color: var(--ss-line);
  --bs-card-cap-bg: var(--ss-bg-1);
  --bs-modal-border-color: var(--ss-line);
  --bs-modal-header-border-color: var(--ss-line);
  --bs-modal-footer-border-color: var(--ss-line);
  --bs-nav-tabs-link-active-bg: transparent;
  --bs-nav-tabs-link-active-color: var(--ss-ink);
  --bs-nav-tabs-border-color: var(--ss-line);
  --bs-list-group-bg: var(--ss-surface);
  --bs-list-group-color: var(--ss-ink);
  --bs-list-group-border-color: var(--ss-line);
  --bs-list-group-active-bg: var(--ss-accent);
  --bs-list-group-active-color: var(--ss-on-accent);
  --bs-table-color: var(--ss-ink);
  --bs-table-border-color: var(--ss-line);
  --bs-table-striped-bg: var(--ss-bg-1);
}

/* The accent as a legacy variable is read both as TEXT and as a FILL by pages
   that are not converted yet. Light themes: the TEXT accent (the ink-darkened
   one) — it clears 4.5:1 as text on every surface and white on it clears 6.9:1+,
   so one value serves both (the brighter fill accent fails as text on tinted page
   chips, e.g. calendar events). Dark themes: the text accent too, because the
   legacy names are read as text far more often (core templates: ~200 colour vs
   ~70 background uses), and a white label hard-coded on a light-pink fill is the
   page's own colour, a Phase 1 fix. */
html[data-ui="new"][data-mode="light"] {
  --accent: var(--ss-accent-text);
  --sky-primary: var(--ss-accent-text);
  --sky-accent: var(--ss-accent-text);
  --sky-sidebar-active: var(--ss-accent-text);
  --ds-primary: var(--ss-accent-text);
  --ds-primary-dark: var(--ss-accent-hover);
  --ds-primary-light: var(--ss-accent-text);
  --ds-accent: var(--ss-accent-text);
  --ds-accent-dark: var(--ss-accent-hover);
  --ds-accent-light: var(--ss-accent-text);
  --nav-active: var(--ss-accent-text);
  --nav-dd-active: var(--ss-accent-text);
  --nav-pg-active-border: var(--ss-accent);
}
html[data-ui="new"][data-mode="dark"] {
  --accent: var(--ss-accent-text);
  --sky-primary: var(--ss-accent-text);
  --sky-accent: var(--ss-accent-text);
  --sky-sidebar-active: var(--ss-accent-text);
  --ds-primary: var(--ss-accent-text);
  --ds-primary-dark: var(--ss-accent);
  --ds-primary-light: var(--ss-accent-text);
  --ds-accent: var(--ss-accent-text);
  --ds-accent-dark: var(--ss-accent);
  --ds-accent-light: var(--ss-accent-text);
  --nav-active: var(--ss-accent-text);
  --nav-dd-active: var(--ss-accent-text);
  --nav-pg-active-border: var(--ss-accent-text);
}

/* ==========================================================================
   1b. SEMANTIC STATUS + ACTION TOKENS (John, 2026-10-14: "color has a psychological meaning")
   The same names Classic defines in themes/vercel/theme.css, so page CSS (the job page, the
   map step bar) writes var(--status-done-fg) once and is right in every theme:
     green  done / success / GO ........................ --status-done*
     blue   next step, in progress, primary action, link  --status-active*, --action-*
     amber  needs attention / caution .................. --status-attention*
     red    error / failed / destructive ............... --status-error*
     grey   not started / skipped / optional ........... --status-neutral*
   The magenta accent (--ss-accent) stays decoration: the brand mark, the active-nav marker,
   the focus ring. Bare token = fill, -fg = text on the page surfaces, --status-on-* = ink on
   the fill, -bg = the soft wash. On <html> only (the field scope keeps the office values here;
   the step component maps its own aliases on the component, section 6).
   ========================================================================== */
html[data-ui="new"] {
  --status-done: var(--ss-success-fill);
  --status-done-fg: var(--ss-success);
  --status-on-done: var(--ss-on-success);
  --status-done-bg: var(--ss-success-soft);
  --status-active: var(--ss-action);
  --status-active-fg: var(--ss-action-text);
  --status-on-active: var(--ss-on-action);
  --status-active-bg: var(--ss-action-soft);
  --status-active-line: var(--ss-action-line);
  --status-attention: var(--ss-warning-fill);
  --status-attention-fg: var(--ss-warning);
  --status-on-attention: var(--ss-on-warning);
  --status-attention-bg: var(--ss-warning-soft);
  --status-error: var(--ss-danger-fill);
  --status-error-fg: var(--ss-danger);
  --status-on-error: var(--ss-on-danger);
  --status-error-bg: var(--ss-danger-soft);
  --status-neutral: var(--ss-ink-3);
  --status-neutral-line: var(--ss-line-strong);
  --status-neutral-bg: var(--ss-bg-2);
  --action-primary: var(--ss-action);
  --action-primary-hover: var(--ss-action-hover);
  --on-action-primary: var(--ss-on-action);
  --action-link: var(--ss-action-text);
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
html[data-ui="new"] body {
  background: var(--ss-bg) !important;   /* sky-theme.css sets body background with !important */
  color: var(--ss-ink);
  font-size: var(--ss-fs-ui);
}
html[data-ui="new"] ::selection { background: var(--ss-accent); color: var(--ss-on-accent); }
html[data-ui="new"] :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
  color: var(--ss-ink);
  font-family: var(--ss-font-display);
  letter-spacing: var(--ss-track-heading);
}
html[data-ui="new"] :is(code, kbd, pre, samp, .mono) { font-family: var(--ss-font-mono); letter-spacing: 0; }
html[data-ui="new"] code { color: var(--ss-accent-text); }
html[data-ui="new"] kbd { background: var(--ss-bg-3); color: var(--ss-ink); border: var(--ss-bw) solid var(--ss-line-2); }
html[data-ui="new"] hr { border-color: var(--ss-line-2); opacity: 1; color: var(--ss-line-2); }
html[data-ui="new"] :focus-visible { outline: 2px solid var(--ss-focus); outline-offset: 2px; }
html[data-ui="new"] .sky-content { color: var(--ss-ink); }

/* ==========================================================================
   3. SHELL
   ========================================================================== */

/* ---- top bar (#sbn; the fold-in nav CSS reads --nav-*, bridged above) ---- */
html[data-ui="new"] #sbn .sbn-main {
  background: var(--ss-bg-1);
  border-bottom: var(--ss-bw) solid var(--ss-line);
  font-family: var(--ss-font-sans);
}
html[data-ui="new"] #sbn .sbn-brand-text { color: var(--ss-ink); font-weight: var(--ss-fw-semibold); letter-spacing: var(--ss-track-heading); }
html[data-ui="new"] #sbn .sbn-dd-menu {
  background: var(--ss-raised);
  border: var(--ss-bw) solid var(--ss-line);
  box-shadow: var(--ss-shadow-overlay);
}
html[data-ui="new"] #sbn .sbn-dd-item { color: var(--ss-ink); }
html[data-ui="new"] #sbn .sbn-dd-item:hover { background: var(--ss-bg-2); color: var(--ss-ink); }
html[data-ui="new"] #sbn #skyHamburger { color: var(--ss-ink-2); }

/* Office / Field switch (#skyTabBar): a segmented control, the active segment raised.
   The active colour was the tab's own brand colour (cyan / green), set as
   --tab-color inline; the new themes use ink + the accent underline instead. */
html[data-ui="new"] #skyTabBar .sky-tab,
html[data-ui="new"] .sky-tab {
  color: var(--ss-ink-2);
  border-radius: var(--ss-r-sm);
  font-weight: var(--ss-fw-medium);
}
html[data-ui="new"] #skyTabBar .sky-tab:hover,
html[data-ui="new"] .sky-tab:hover { background: var(--ss-bg-2); color: var(--ss-ink); }
/* !important: sky-theme.css colours the active tab with !important in light mode
   (a colour-mix of the tab's cyan/green), which the new themes replace. */
html[data-ui="new"] #skyTabBar .sky-tab--active,
html[data-ui="new"] .sky-tab--active {
  background: var(--ss-bg-2);
  font-weight: var(--ss-fw-semibold);
  box-shadow: none;
}
html[data-ui="new"] #skyTabBar :is(.sky-tab--active, .sky-tab--active span),
html[data-ui="new"] .sky-tab--active { color: var(--ss-ink) !important; }
html[data-ui="new"] #skyTabBar .sky-tab--active i,
html[data-ui="new"] .sky-tab--active i { color: var(--ss-accent-text) !important; }
html[data-ui="new"] #skyTabBar .sky-tab--active::after,
html[data-ui="new"] .sky-tab--active::after { background: var(--ss-accent) !important; height: 2px; }

/* ---- sidebar (.sky-sidebar, built by sky-sidebar.js) ---- */
html[data-ui="new"] .sky-sidebar {
  background: var(--ss-bg-1);
  border-right: var(--ss-bw) solid var(--ss-line);
  font-family: var(--ss-font-sans);
}
/* Group headings: sentence case, no shouty caps (the text is title/upper case in
   the DOM for Classic; text-transform only lowers what CSS raised). */
html[data-ui="new"] .sky-sidebar .sky-sidebar-group-label,
html[data-ui="new"] .sky-sidebar .sky-nav-section-title {
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--ss-fs-13);
  font-weight: var(--ss-fw-semibold);
}
html[data-ui="new"] .sky-sidebar .sky-sidebar-group-label span { text-transform: none; }
html[data-ui="new"] .sky-sidebar .sky-nav-sub-title {
  opacity: 1;              /* dark Classic fades it to .8; the muted ink is already the quiet weight */
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--ss-fs-12);
  font-weight: var(--ss-fw-medium);
}
html[data-ui="new"] .sky-sidebar .sky-nav-item {
  border-radius: var(--ss-r-sm);
  margin: 1px 8px;
  padding-left: 10px;
  padding-right: 10px;
  border-left-width: 0;
  font-size: var(--ss-fs-ui);
  font-weight: var(--ss-fw-medium);
}
html[data-ui="new"] .sky-sidebar-collapsed .sky-nav-item { margin: 1px 6px; }
/* The rail's group icon (John 2026-10-22: its rows open in #skyRailFlyout): the same
   row as a link's — 6px gutters, the pack's row height, a soft hover and active tint. */
@media (min-width: 769px) {
  html[data-ui="new"] .sky-sidebar-collapsed .sky-nav-section-title {
    margin: 1px 6px;
    padding: 0 !important;
    min-height: var(--ss-c-nav-h);
    border-left-width: 0;
    border-radius: var(--ss-r-sm);
  }
  html[data-ui="new"] .sky-sidebar-collapsed .sky-nav-section-title:is(:hover, .sky-rail-open) { background: var(--ss-bg-2); }
  html[data-ui="new"] .sky-sidebar-collapsed .sky-nav-section-title:focus-visible { outline: none; box-shadow: var(--ss-focus-ring); }
  html[data-ui="new"] .sky-sidebar-collapsed .sky-nav-section:has(.sky-nav-item.active) > .sky-nav-section-title {
    background: var(--ss-c-nav-active-bg, var(--ss-accent-soft)) !important;
    box-shadow: var(--ss-c-nav-active-ring);
  }
  html[data-ui="new"] .sky-sidebar-collapsed .sky-nav-section-title:is(:hover, .sky-rail-open) > i.bi:not(.chevron) { color: var(--ss-ink-2); }
  html[data-ui="new"] .sky-sidebar-collapsed .sky-guided-toggle > i.bi { font-size: var(--ss-ch-icon, 16px); }
}
/* the flyout: a raised card, the overlay shadow, the sidebar's own rows */
html[data-ui="new"] .sky-rail-flyout {
  padding: 6px;
  background: var(--ss-raised);
  color: var(--ss-ink);
  border: var(--ss-bw) solid var(--ss-line);
  border-radius: var(--ss-r-lg);
  box-shadow: var(--ss-shadow-overlay);
  font-family: var(--ss-font-sans);
}
html[data-ui="new"] .sky-rail-fly-head { padding: 6px 10px; font-size: var(--ss-fs-12); font-weight: var(--ss-fw-semibold); letter-spacing: 0; text-transform: none; color: var(--ss-ink-3); }
html[data-ui="new"] .sky-rail-fly-sub { padding: 8px 10px 2px; border-top-color: var(--ss-line); font-size: var(--ss-fs-11); font-weight: var(--ss-fw-medium); color: var(--ss-ink-3); }
html[data-ui="new"] .sky-rail-fly-item { min-height: var(--ss-c-nav-h); border-radius: var(--ss-r-sm); color: var(--ss-ink-2); font-size: var(--ss-fs-ui); font-weight: var(--ss-fw-medium); }
html[data-ui="new"] .sky-rail-fly-item:hover { background: var(--ss-bg-2); color: var(--ss-ink); }
html[data-ui="new"] .sky-rail-fly-item:focus-visible { outline: none; box-shadow: var(--ss-focus-ring); background: var(--ss-bg-2); color: var(--ss-ink); }
html[data-ui="new"] .sky-rail-fly-item > i.bi { font-size: var(--ss-ch-icon, 16px); width: var(--ss-ch-icon, 16px); color: var(--ss-ink-3); }
html[data-ui="new"] .sky-rail-fly-item.active { color: var(--ss-ink); background: var(--ss-c-nav-active-bg, var(--ss-accent-soft)); font-weight: var(--ss-fw-semibold); }
html[data-ui="new"] .sky-rail-fly-item.active > i.bi { color: var(--ss-accent-text); }
html[data-ui="new"] .sky-rail-fly-count { color: var(--ss-ink-3); font: 500 var(--ss-fs-11)/1 var(--ss-font-sans); }
/* The rail's item colours are injected by sky-sidebar.js per Office/Field tab, and
   sky-theme.css re-colours them for light mode, both with !important; the new
   themes need one answer for both modes: muted ink, ink on hover, and the active
   row as a soft accent tint with ink text and an accent icon. */
html[data-ui="new"] .sky-sidebar .sky-nav-item { color: var(--ss-ink-2) !important; }
html[data-ui="new"] .sky-sidebar .sky-nav-item:hover { color: var(--ss-ink) !important; background: var(--ss-bg-2); }
html[data-ui="new"] .sky-sidebar .sky-nav-item.active {
  color: var(--ss-ink) !important;
  background: var(--ss-accent-soft) !important;
  border-left-color: var(--ss-accent) !important;
  font-weight: var(--ss-fw-semibold);
}
html[data-ui="new"] .sky-sidebar .sky-nav-item.active i { color: var(--ss-accent-text); }
html[data-ui="new"] .sky-sidebar :is(.sky-nav-section-title, .sky-nav-section-title i.bi) { color: var(--ss-ink) !important; }
html[data-ui="new"] .sky-sidebar :is(.sky-nav-sub-title, .sky-nav-sub-title i.bi) { color: var(--ss-ink-3) !important; }
html[data-ui="new"] .sky-sidebar .sky-sidebar-group-label { color: var(--ss-ink-2) !important; }
html[data-ui="new"] .sky-content :is(h1, h2, h3, h4, h5, h6) > i.bi { color: var(--ss-accent-text) !important; }
html[data-ui="new"] #skyFavoritesStrip a { border-radius: var(--ss-r-sm); }
html[data-ui="new"] .sky-sidebar .sky-nav-badge { background: var(--ss-accent); color: var(--ss-on-accent); }
html[data-ui="new"] .sky-sidebar-collapse-btn,
html[data-ui="new"] .sky-sidebar .sky-sidebar-collapse-toggle {
  color: var(--ss-ink-2);
  border-color: var(--ss-line-2);
  background: transparent;
}
html[data-ui="new"] .sky-sidebar-resize-handle::before { background: var(--ss-accent); }
html[data-ui="new"] .sky-newdoor-btn { border-radius: var(--ss-r-sm); font-weight: var(--ss-fw-semibold); }
html[data-ui="new"] .sky-newdoor-menu { border-radius: var(--ss-r-lg); box-shadow: var(--ss-shadow-overlay); }
html[data-ui="new"] .sky-rail-tip,
html[data-ui="new"] .sky-sidebar-collapsed .sky-nav-item:hover::after {
  background: var(--ss-raised);
  color: var(--ss-ink);
  border-color: var(--ss-line);
}

/* ---- avatar menu (#skyUserBtn; inline colours in sky-sidebar.js read --ss-*) ---- */
html[data-ui="new"] #skyUserBtn > div {
  border-radius: var(--ss-r-lg);
  box-shadow: var(--ss-shadow-overlay);
}
html[data-ui="new"] #skyUserBtn > div > a { border-radius: var(--ss-r-sm); margin: 0 6px; }

/* ---- phone bottom tab bar + Me sheet ---- */
html[data-ui="new"] #skyMobileTabBar,
html[data-ui="new"] .sky-mobile-tab-bar {
  background: var(--ss-bg-1);
  border-top: var(--ss-bw) solid var(--ss-line);
}
html[data-ui="new"] .sky-mobile-tab { color: var(--ss-ink-2); }
html[data-ui="new"] .sky-mobile-tab--active { color: var(--ss-accent-text); }
html[data-ui="new"] .sky-me-sheet {
  background: var(--ss-raised);
  border-top-color: var(--ss-line);
  box-shadow: var(--ss-shadow-overlay);
}
html[data-ui="new"] .sky-me-sheet-backdrop { background: var(--ss-scrim); }
html[data-ui="new"] .sky-me-sheet-item { color: var(--ss-ink); }
html[data-ui="new"] .sky-me-sheet-item i { color: var(--ss-ink-2); }
html[data-ui="new"] .sky-me-sheet-item:is(:hover, :focus) { background: var(--ss-bg-2); }
html[data-ui="new"] .sky-me-sheet-item--danger,
html[data-ui="new"] .sky-me-sheet-item--danger i { color: var(--ss-danger); }
html[data-ui="new"] .sky-me-sheet-divider { background: var(--ss-line); }
html[data-ui="new"] .sky-mobile-backdrop { background: var(--ss-scrim); }

/* ---- footer ---- */
html[data-ui="new"] #sbn-footer { background: var(--ss-bg); color: var(--ss-ink-3); border-top-color: var(--ss-line); }
html[data-ui="new"] #sbn-footer a,
html[data-ui="new"] #sbn-footer .sbn-footer-links a { color: var(--ss-ink-2); }
html[data-ui="new"] .sky-support-link { color: var(--ss-ink-2); }

/* ---- breadcrumbs (shell .sky-breadcrumb / page .breadcrumbs / Bootstrap .breadcrumb) ---- */
html[data-ui="new"] :is(.sky-breadcrumb, .breadcrumbs) { color: var(--ss-ink-3); font-size: var(--ss-fs-13); }
html[data-ui="new"] :is(.sky-breadcrumb, .breadcrumbs) a { color: var(--ss-ink-2); }
html[data-ui="new"] :is(.sky-breadcrumb, .breadcrumbs) a:is(:hover, :focus-visible) { color: var(--ss-accent-text); }
html[data-ui="new"] :is(.sky-breadcrumb [aria-current="page"], .sky-breadcrumb .sky-breadcrumb__leaf, .breadcrumbs [aria-current="page"], .breadcrumbs .breadcrumbs__current) { color: var(--ss-ink); }
html[data-ui="new"] .breadcrumb { --bs-breadcrumb-divider-color: var(--ss-ink-3); --bs-breadcrumb-item-active-color: var(--ss-ink); }
html[data-ui="new"] .breadcrumb-item a { color: var(--ss-ink-2); }
html[data-ui="new"] .breadcrumb-item.active { color: var(--ss-ink); }

/* ---- system banners (#sky-system-banners; the level palettes in base.html and
        sky-sidebar.js read --ss-*-soft / --ss-* with Classic's literal as fallback) ---- */
html[data-ui="new"] #sky-system-banners .sky-bnr { border-radius: var(--ss-r); font-family: var(--ss-font-sans); }
html[data-ui="new"] #sky-system-banners .sky-bnr-tag { font-family: var(--ss-font-mono); font-weight: var(--ss-fw-medium); }
html[data-ui="new"] #sky-system-banners .sky-bnr-btn:hover { background: var(--ss-bg-3); }

/* ---- What's New card (#sky-upd-card, styles injected by sky-updates.js) ---- */
html[data-ui="new"] #sky-upd-card {
  background: var(--ss-raised);
  color: var(--ss-ink);
  border-color: var(--ss-line);
  border-radius: var(--ss-r-lg);
  box-shadow: var(--ss-shadow-overlay);
  font-family: var(--ss-font-sans);
}
html[data-ui="new"] #sky-upd-card .sky-upd-dot { background: var(--ss-accent); box-shadow: 0 0 0 4px var(--ss-accent-soft); }
html[data-ui="new"] #sky-upd-card .sky-upd-bell.on { color: var(--ss-accent-text); }
html[data-ui="new"] #sky-upd-card .sky-upd-bell.off { color: var(--ss-ink-3); }
html[data-ui="new"] #sky-upd-card .sky-upd-bell:hover { background: var(--ss-bg-2); }
html[data-ui="new"] #sky-upd-card .sky-upd-list li { border-top-color: var(--ss-line); }
html[data-ui="new"] #sky-upd-card .sky-upd-list .sky-upd-v { color: var(--ss-accent-text); }
html[data-ui="new"] #sky-upd-card .sky-upd-list .sky-upd-date,
html[data-ui="new"] #sky-upd-card .sky-upd-apply,
html[data-ui="new"] #sky-upd-card .sky-upd-all,
html[data-ui="new"] #sky-upd-card .sky-upd-sub { color: var(--ss-ink-3); }
html[data-ui="new"] #sky-upd-card .sky-upd-all:hover { color: var(--ss-ink); }
html[data-ui="new"] #sky-upd-card :is(.sky-upd-link, .sky-upd-seeall) { color: var(--ss-accent-text); }
html[data-ui="new"] #sky-upd-card .sky-upd-dismiss {
  border-color: var(--ss-success);
  background: var(--ss-success-soft);
  color: var(--ss-success);
}
html[data-ui="new"] #sky-upd-card .sky-upd-dismiss:hover { background: var(--ss-success-soft); color: var(--ss-ink); }
html[data-ui="new"] #sky-upd-card .sky-upd-btn { background: var(--ss-accent); color: var(--ss-on-accent); border-radius: var(--ss-r-sm); }
html[data-ui="new"] #sky-upd-card .sky-upd-btn:hover { background: var(--ss-accent-hover); }
html[data-ui="new"] #sky-upd-card :is(.sky-upd-bell, .sky-upd-btn, .sky-upd-all, .sky-upd-seeall, .sky-upd-dismiss):focus-visible { outline-color: var(--ss-focus); }
html[data-ui="new"] .sky-upd-toast {
  background: var(--ss-raised);
  color: var(--ss-ink);
  border-color: var(--ss-line);
  border-left-color: var(--ss-accent);
  box-shadow: var(--ss-shadow-overlay);
}
/* "Was this fixed?" card (same file) */
html[data-ui="new"] .sky-fix-card {
  background: var(--ss-raised);
  color: var(--ss-ink);
  border-color: var(--ss-line);
  border-left-color: var(--ss-success-fill);
  box-shadow: var(--ss-shadow-overlay);
}
html[data-ui="new"] .sky-fix-card :is(.sky-fix-tag, .sky-fix-tn) { color: var(--ss-success); }
html[data-ui="new"] .sky-fix-card .sky-fix-tag { background: var(--ss-success-soft); border-color: var(--ss-success); }
html[data-ui="new"] .sky-fix-card .sky-fix-x { color: var(--ss-ink-3); }
html[data-ui="new"] .sky-fix-card .sky-fix-x:hover { color: var(--ss-ink); }
html[data-ui="new"] .sky-fix-card .sky-fix-item { border-top-color: var(--ss-line); }
html[data-ui="new"] .sky-fix-card .sky-fix-note { color: var(--ss-ink-2); }
html[data-ui="new"] .sky-fix-card .sky-fix-yes { background: var(--ss-success-fill); color: var(--ss-on-success); }
html[data-ui="new"] .sky-fix-card .sky-fix-no { border-color: var(--ss-line-strong); color: var(--ss-ink); }
html[data-ui="new"] .sky-fix-card .sky-fix-no:hover { background: var(--ss-bg-2); }

/* ---- podcast player (sky-podcast-player.css reads --sky-*, bridged; the rgba
        accent washes are literal there) ---- */
html[data-ui="new"] .skp-bar { background: var(--ss-bg-1); border-top-color: var(--ss-line); }
html[data-ui="new"] .skp-cover { background: var(--ss-bg-2); border-color: var(--ss-line); }
html[data-ui="new"] :is(.skp-title) { color: var(--ss-ink); }
html[data-ui="new"] :is(.skp-sub, .skp-time, .skpf-head-lab, .skpf-sub, .skpf-times, .skpf-collapse, .skpf-close) { color: var(--ss-ink-3); }
html[data-ui="new"] .skp-btn { color: var(--ss-ink); }
html[data-ui="new"] .skp-btn:hover { background: var(--ss-bg-2); }
html[data-ui="new"] :is(.skp-btn.skp-play, .skpf-transport .skp-btn.skpf-play) {
  background: var(--ss-accent);
  color: var(--ss-on-accent);
  border-color: var(--ss-accent);
}
html[data-ui="new"] :is(.skp-btn.skp-play, .skpf-transport .skp-btn.skpf-play):hover { background: var(--ss-accent-hover); }
html[data-ui="new"] :is(.skp-seek, .skp-volrange, .skpf-seek, .skpf-volrange) { accent-color: var(--ss-accent); }
html[data-ui="new"] .skp-full { background: var(--ss-bg); color: var(--ss-ink); }
html[data-ui="new"] .skpf-show { color: var(--ss-accent-text); }
html[data-ui="new"] .skpf-cover-ph { color: var(--ss-accent-text); background: var(--ss-accent-soft); border-color: var(--ss-line); }

/* ---- theme picker dialog (theme-switcher.css reads --ss-*) needs nothing here ---- */

/* ==========================================================================
   4. BOOTSTRAP COMPONENTS
   ========================================================================== */

/* ---- buttons: ONE primary colour (the theme accent) ---- */
html[data-ui="new"] .btn {
  --bs-btn-font-family: var(--ss-font-sans);
  --bs-btn-font-weight: var(--ss-fw-medium);
  --bs-btn-border-radius: var(--ss-r-sm);
  --bs-btn-border-width: var(--ss-bw);
  --bs-btn-focus-box-shadow: var(--ss-focus-ring);
  --bs-btn-disabled-opacity: .5;
  font-family: var(--ss-font-sans);
  font-weight: var(--ss-fw-medium);
  border-radius: var(--ss-r-sm);
  letter-spacing: var(--ss-track-body);
  transform: none;
}
html[data-ui="new"] .btn:focus-visible { box-shadow: var(--ss-focus-ring); outline: 2px solid var(--ss-focus); outline-offset: 1px; }
html[data-ui="new"] :is(.btn-primary, .btn-gradient-primary, .btn-vista) {
  --bs-btn-color: var(--ss-on-accent);
  --bs-btn-bg: var(--ss-accent);
  --bs-btn-border-color: var(--ss-accent);
  --bs-btn-hover-color: var(--ss-on-accent);
  --bs-btn-hover-bg: var(--ss-accent-hover);
  --bs-btn-hover-border-color: var(--ss-accent-hover);
  --bs-btn-active-color: var(--ss-on-accent);
  --bs-btn-active-bg: var(--ss-accent-hover);
  --bs-btn-active-border-color: var(--ss-accent-hover);
  --bs-btn-disabled-color: var(--ss-on-accent);
  --bs-btn-disabled-bg: var(--ss-accent);
  --bs-btn-disabled-border-color: var(--ss-accent);
  background: var(--ss-accent);
  border: var(--ss-bw) solid var(--ss-accent);
  color: var(--ss-on-accent);
  box-shadow: var(--ss-shadow-sm);
}
html[data-ui="new"] :is(.btn-primary, .btn-gradient-primary, .btn-vista):is(:hover, :active, .active) {
  background: var(--ss-accent-hover);
  border-color: var(--ss-accent-hover);
  color: var(--ss-on-accent);
  transform: none;
}
html[data-ui="new"] :is(.btn-secondary, .btn-light, .btn-outline-secondary, .btn-outline-light, .btn-default) {
  --bs-btn-color: var(--ss-ink);
  --bs-btn-bg: var(--ss-surface);
  --bs-btn-border-color: var(--ss-line-strong);
  --bs-btn-hover-color: var(--ss-ink);
  --bs-btn-hover-bg: var(--ss-bg-2);
  --bs-btn-hover-border-color: var(--ss-line-strong);
  --bs-btn-active-color: var(--ss-ink);
  --bs-btn-active-bg: var(--ss-bg-3);
  --bs-btn-active-border-color: var(--ss-line-strong);
  --bs-btn-disabled-color: var(--ss-ink-3);
  --bs-btn-disabled-bg: var(--ss-bg-1);
  --bs-btn-disabled-border-color: var(--ss-line-2);
  background: var(--ss-surface);
  border: var(--ss-bw) solid var(--ss-line-strong);
  color: var(--ss-ink);
}
html[data-ui="new"] :is(.btn-outline-secondary, .btn-outline-light) { background: transparent; color: var(--ss-ink-2); }
html[data-ui="new"] :is(.btn-secondary, .btn-light, .btn-outline-secondary, .btn-outline-light, .btn-default):is(:hover, :active, .active) {
  background: var(--ss-bg-2);
  border-color: var(--ss-line-strong);
  color: var(--ss-ink);
}
html[data-ui="new"] :is(.btn-dark, .btn-outline-dark) {
  --bs-btn-color: var(--ss-bg);
  --bs-btn-bg: var(--ss-ink);
  --bs-btn-border-color: var(--ss-ink);
  --bs-btn-hover-color: var(--ss-bg);
  --bs-btn-hover-bg: var(--ss-ink-2);
  --bs-btn-hover-border-color: var(--ss-ink-2);
  background: var(--ss-ink);
  border: var(--ss-bw) solid var(--ss-ink);
  color: var(--ss-bg);
}
html[data-ui="new"] .btn-outline-dark { background: transparent; color: var(--ss-ink); }
html[data-ui="new"] .btn-outline-dark:is(:hover, :active, .active) { background: var(--ss-ink); color: var(--ss-bg); }
html[data-ui="new"] .btn-link {
  --bs-btn-color: var(--ss-accent-text);
  --bs-btn-hover-color: var(--ss-accent-text);
  --bs-btn-active-color: var(--ss-accent-text);
  --bs-btn-disabled-color: var(--ss-ink-3);
  color: var(--ss-accent-text);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
html[data-ui="new"] .btn-outline-primary {
  --bs-btn-color: var(--ss-accent-text);
  --bs-btn-border-color: var(--ss-accent);
  --bs-btn-hover-color: var(--ss-on-accent);
  --bs-btn-hover-bg: var(--ss-accent);
  --bs-btn-hover-border-color: var(--ss-accent);
  --bs-btn-active-color: var(--ss-on-accent);
  --bs-btn-active-bg: var(--ss-accent-hover);
  --bs-btn-active-border-color: var(--ss-accent-hover);
  --bs-btn-disabled-color: var(--ss-accent-text);
  --bs-btn-disabled-border-color: var(--ss-accent-line);
  background: transparent;
  border: var(--ss-bw) solid var(--ss-accent);
  color: var(--ss-accent-text);
}
html[data-ui="new"] .btn-outline-primary:is(:hover, :active, .active) { background: var(--ss-accent); border-color: var(--ss-accent); color: var(--ss-on-accent); }
/* solid status buttons: fill + its own on-colour (dark themes put dark ink on bright fills) */
html[data-ui="new"] .btn-success { --bs-btn-color: var(--ss-on-success); --bs-btn-bg: var(--ss-success-fill); --bs-btn-border-color: var(--ss-success-fill); --bs-btn-hover-color: var(--ss-on-success); --bs-btn-hover-bg: var(--ss-success-fill); --bs-btn-hover-border-color: var(--ss-success-fill); --bs-btn-active-color: var(--ss-on-success); --bs-btn-active-bg: var(--ss-success-fill); --bs-btn-disabled-color: var(--ss-on-success); --bs-btn-disabled-bg: var(--ss-success-fill); background: var(--ss-success-fill); border-color: var(--ss-success-fill); color: var(--ss-on-success); }
html[data-ui="new"] .btn-danger { --bs-btn-color: var(--ss-on-danger); --bs-btn-bg: var(--ss-danger-fill); --bs-btn-border-color: var(--ss-danger-fill); --bs-btn-hover-color: var(--ss-on-danger); --bs-btn-hover-bg: var(--ss-danger-fill); --bs-btn-hover-border-color: var(--ss-danger-fill); --bs-btn-active-color: var(--ss-on-danger); --bs-btn-active-bg: var(--ss-danger-fill); --bs-btn-disabled-color: var(--ss-on-danger); --bs-btn-disabled-bg: var(--ss-danger-fill); background: var(--ss-danger-fill); border-color: var(--ss-danger-fill); color: var(--ss-on-danger); }
html[data-ui="new"] .btn-warning { --bs-btn-color: var(--ss-on-warning); --bs-btn-bg: var(--ss-warning-fill); --bs-btn-border-color: var(--ss-warning-fill); --bs-btn-hover-color: var(--ss-on-warning); --bs-btn-hover-bg: var(--ss-warning-fill); --bs-btn-hover-border-color: var(--ss-warning-fill); --bs-btn-active-color: var(--ss-on-warning); --bs-btn-active-bg: var(--ss-warning-fill); --bs-btn-disabled-color: var(--ss-on-warning); --bs-btn-disabled-bg: var(--ss-warning-fill); background: var(--ss-warning-fill); border-color: var(--ss-warning-fill); color: var(--ss-on-warning); }
html[data-ui="new"] .btn-info { --bs-btn-color: var(--ss-on-info); --bs-btn-bg: var(--ss-info-fill); --bs-btn-border-color: var(--ss-info-fill); --bs-btn-hover-color: var(--ss-on-info); --bs-btn-hover-bg: var(--ss-info-fill); --bs-btn-hover-border-color: var(--ss-info-fill); --bs-btn-active-color: var(--ss-on-info); --bs-btn-active-bg: var(--ss-info-fill); --bs-btn-disabled-color: var(--ss-on-info); --bs-btn-disabled-bg: var(--ss-info-fill); background: var(--ss-info-fill); border-color: var(--ss-info-fill); color: var(--ss-on-info); }
html[data-ui="new"] :is(.btn-success, .btn-danger, .btn-warning, .btn-info):hover { filter: brightness(.94); }
html[data-ui="new"][data-mode="dark"] :is(.btn-success, .btn-danger, .btn-warning, .btn-info):hover { filter: brightness(1.08); }
/* outline status buttons: the status INK (text-safe) as border + label, fill on hover */
html[data-ui="new"] .btn-outline-success { --bs-btn-color: var(--ss-success); --bs-btn-border-color: var(--ss-success); --bs-btn-hover-color: var(--ss-on-success); --bs-btn-hover-bg: var(--ss-success-fill); --bs-btn-hover-border-color: var(--ss-success-fill); --bs-btn-active-color: var(--ss-on-success); --bs-btn-active-bg: var(--ss-success-fill); background: transparent; border-color: var(--ss-success); color: var(--ss-success); }
html[data-ui="new"] .btn-outline-danger { --bs-btn-color: var(--ss-danger); --bs-btn-border-color: var(--ss-danger); --bs-btn-hover-color: var(--ss-on-danger); --bs-btn-hover-bg: var(--ss-danger-fill); --bs-btn-hover-border-color: var(--ss-danger-fill); --bs-btn-active-color: var(--ss-on-danger); --bs-btn-active-bg: var(--ss-danger-fill); background: transparent; border-color: var(--ss-danger); color: var(--ss-danger); }
html[data-ui="new"] .btn-outline-warning { --bs-btn-color: var(--ss-warning); --bs-btn-border-color: var(--ss-warning); --bs-btn-hover-color: var(--ss-on-warning); --bs-btn-hover-bg: var(--ss-warning-fill); --bs-btn-hover-border-color: var(--ss-warning-fill); --bs-btn-active-color: var(--ss-on-warning); --bs-btn-active-bg: var(--ss-warning-fill); background: transparent; border-color: var(--ss-warning); color: var(--ss-warning); }
html[data-ui="new"] .btn-outline-info { --bs-btn-color: var(--ss-info); --bs-btn-border-color: var(--ss-info); --bs-btn-hover-color: var(--ss-on-info); --bs-btn-hover-bg: var(--ss-info-fill); --bs-btn-hover-border-color: var(--ss-info-fill); --bs-btn-active-color: var(--ss-on-info); --bs-btn-active-bg: var(--ss-info-fill); background: transparent; border-color: var(--ss-info); color: var(--ss-info); }
html[data-ui="new"] .btn-outline-success:is(:hover, :active, .active) { background: var(--ss-success-fill); border-color: var(--ss-success-fill); color: var(--ss-on-success); }
html[data-ui="new"] .btn-outline-danger:is(:hover, :active, .active) { background: var(--ss-danger-fill); border-color: var(--ss-danger-fill); color: var(--ss-on-danger); }
html[data-ui="new"] .btn-outline-warning:is(:hover, :active, .active) { background: var(--ss-warning-fill); border-color: var(--ss-warning-fill); color: var(--ss-on-warning); }
html[data-ui="new"] .btn-outline-info:is(:hover, :active, .active) { background: var(--ss-info-fill); border-color: var(--ss-info-fill); color: var(--ss-on-info); }
/* a checked toggle (.btn-check + .btn-outline-*) reads as selected: the accent */
html[data-ui="new"] .btn-check:checked + .btn:is(.btn-outline-primary, .btn-outline-secondary, .btn-outline-light, .btn-outline-dark) {
  background: var(--ss-accent);
  border-color: var(--ss-accent);
  color: var(--ss-on-accent);
}
html[data-ui="new"] .btn:disabled,
html[data-ui="new"] .btn.disabled { opacity: .55; }
html[data-ui="new"] .btn-close { opacity: .7; }
html[data-ui="new"][data-mode="dark"] .btn-close:not(.btn-close-white) { filter: invert(1) grayscale(100%) brightness(200%); }
html[data-ui="new"] .btn-group > .btn:not(:first-child) { margin-left: calc(var(--ss-bw) * -1); }

/* ---- forms ---- */
html[data-ui="new"] :is(.form-control, .form-select) {
  background-color: var(--ss-surface);
  color: var(--ss-ink);
  border: var(--ss-bw) solid var(--ss-line-strong);
  border-radius: var(--ss-r-sm);
  font-family: var(--ss-font-sans);
  box-shadow: none;
}
html[data-ui="new"] :is(.form-control, .form-select):focus {
  background-color: var(--ss-surface);
  color: var(--ss-ink);
  border-color: var(--ss-accent);
  box-shadow: var(--ss-focus-ring);
  outline: 0;
}
html[data-ui="new"] .form-control::placeholder { color: var(--ss-placeholder); opacity: 1; }
html[data-ui="new"] :is(.form-control, .form-select):is(:disabled, [readonly]:not(.form-control-plaintext)) {
  background-color: var(--ss-bg-2);
  color: var(--ss-ink-2);
}
html[data-ui="new"] .form-control-plaintext { color: var(--ss-ink); }
html[data-ui="new"] .form-select option { background: var(--ss-raised); color: var(--ss-ink); }
html[data-ui="new"] .form-label,
html[data-ui="new"] .col-form-label { color: var(--ss-ink); font-weight: var(--ss-fw-medium); }
html[data-ui="new"] .form-text { color: var(--ss-ink-3); }
html[data-ui="new"] .form-check-label { color: var(--ss-ink); }
html[data-ui="new"] .form-check-input {
  background-color: var(--ss-surface);
  border: var(--ss-bw-strong) solid var(--ss-line-strong);
}
html[data-ui="new"] .form-check-input:checked {
  background-color: var(--ss-accent);
  border-color: var(--ss-accent);
}
html[data-ui="new"] .form-check-input:focus { border-color: var(--ss-accent); box-shadow: var(--ss-focus-ring); }
html[data-ui="new"] .form-switch .form-check-input:not(:checked) {
  background-color: var(--ss-bg-3);
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23808080'/%3e%3c/svg%3e");
}
html[data-ui="new"] .form-range { accent-color: var(--ss-accent); }
html[data-ui="new"] .form-range::-webkit-slider-thumb { background: var(--ss-accent); }
html[data-ui="new"] .form-range::-webkit-slider-runnable-track { background: var(--ss-bg-3); }
html[data-ui="new"] .input-group-text {
  background-color: var(--ss-bg-2);
  color: var(--ss-ink-2);
  border: var(--ss-bw) solid var(--ss-line-strong);
}
html[data-ui="new"] :is(.is-invalid, .was-validated :invalid).form-control { border-color: var(--ss-danger); }
html[data-ui="new"] :is(.is-valid, .was-validated :valid).form-control { border-color: var(--ss-success); }
html[data-ui="new"] .invalid-feedback { color: var(--ss-danger); }
html[data-ui="new"] .valid-feedback { color: var(--ss-success); }
html[data-ui="new"] .form-floating > label { color: var(--ss-ink-3); }

/* ---- cards ---- */
html[data-ui="new"] .card {
  --bs-card-bg: var(--ss-surface);
  --bs-card-color: var(--ss-ink);
  --bs-card-border-color: var(--ss-line);
  --bs-card-border-radius: var(--ss-r);
  --bs-card-inner-border-radius: calc(var(--ss-r) - 1px);
  --bs-card-cap-bg: var(--ss-bg-1);
  --bs-card-cap-color: var(--ss-ink);
  --bs-card-title-color: var(--ss-ink);
  --bs-card-subtitle-color: var(--ss-ink-2);
  background: var(--ss-surface);
  color: var(--ss-ink);
  border: var(--ss-bw) solid var(--ss-line);
  border-radius: var(--ss-r);
  box-shadow: var(--ss-shadow-sm);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html[data-ui="new"] .card:hover { box-shadow: var(--ss-shadow-sm); }
html[data-ui="new"] .card :is(.card-header, .card-footer) {
  background: var(--ss-bg-1);
  color: var(--ss-ink);
  border-color: var(--ss-line);
}
html[data-ui="new"] .card .card-header { border-radius: calc(var(--ss-r) - 1px) calc(var(--ss-r) - 1px) 0 0; font-weight: var(--ss-fw-semibold); }
html[data-ui="new"] .card .card-body { color: var(--ss-ink); }
html[data-ui="new"] .card .card-header.bg-primary { background: var(--ss-accent); color: var(--ss-on-accent); }
html[data-ui="new"] .card-subtitle { color: var(--ss-ink-2); }

/* ---- tables ---- */
html[data-ui="new"] .table {
  --bs-table-color: var(--ss-ink);
  --bs-table-color-state: var(--ss-ink);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--ss-line);
  --bs-table-striped-bg: var(--ss-bg-1);
  --bs-table-striped-color: var(--ss-ink);
  --bs-table-active-bg: var(--ss-bg-2);
  --bs-table-active-color: var(--ss-ink);
  --bs-table-hover-bg: var(--ss-bg-2);
  --bs-table-hover-color: var(--ss-ink);
  color: var(--ss-ink);
  border-color: var(--ss-line);
}
html[data-ui="new"] .table thead th,
html[data-ui="new"] .table > thead > tr > th {
  background: var(--ss-bg-1);
  color: var(--ss-ink-2);
  font-family: var(--ss-font-mono);
  font-weight: var(--ss-fw-medium);
  font-size: var(--ss-fs-11);
  letter-spacing: var(--ss-track-caps);
  text-transform: uppercase;
  border-bottom: var(--ss-bw) solid var(--ss-line-2);
}
html[data-ui="new"] .table tbody td { border-bottom-color: var(--ss-line); }
html[data-ui="new"] .table-hover > tbody > tr:hover > * { --bs-table-bg-state: var(--ss-bg-2); color: var(--ss-ink); }
html[data-ui="new"] .table-hover tbody tr:hover { background: var(--ss-bg-2); }
/* dark/light Bootstrap tables follow the theme instead of #212529 / #f8f9fa */
html[data-ui="new"] :is(.table-dark, .table-light):not(.sky-keep-dark):not([data-sky-keep-dark] *) {
  --bs-table-color: var(--ss-ink);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--ss-line);
  --bs-table-striped-bg: var(--ss-bg-1);
  --bs-table-striped-color: var(--ss-ink);
  --bs-table-active-bg: var(--ss-bg-2);
  --bs-table-active-color: var(--ss-ink);
  --bs-table-hover-bg: var(--ss-bg-2);
  --bs-table-hover-color: var(--ss-ink);
  color: var(--ss-ink);
  border-color: var(--ss-line);
}
html[data-ui="new"] thead:is(.table-dark, .table-light) th,
html[data-ui="new"] tr:is(.table-dark, .table-light) th { background: var(--ss-bg-1); color: var(--ss-ink-2); }

/* ---- tabs + pills ---- */
html[data-ui="new"] .nav {
  --bs-nav-link-color: var(--ss-ink-2);
  --bs-nav-link-hover-color: var(--ss-ink);
  --bs-nav-link-disabled-color: var(--ss-ink-4);
}
html[data-ui="new"] .nav-tabs {
  --bs-nav-tabs-border-color: var(--ss-line);
  --bs-nav-tabs-link-hover-border-color: transparent;
  --bs-nav-tabs-link-active-color: var(--ss-ink);
  --bs-nav-tabs-link-active-bg: transparent;
  --bs-nav-tabs-link-active-border-color: transparent;
  border-bottom: var(--ss-bw) solid var(--ss-line);
  gap: 2px;
}
html[data-ui="new"] .nav-tabs .nav-link {
  color: var(--ss-ink-2);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: var(--ss-r-sm) var(--ss-r-sm) 0 0;
  margin-bottom: -1px;
  font-weight: var(--ss-fw-medium);
}
html[data-ui="new"] .nav-tabs .nav-link:hover { color: var(--ss-ink); background: var(--ss-bg-2); }
html[data-ui="new"] .nav-tabs :is(.nav-link.active, .nav-item.show .nav-link) {
  color: var(--ss-ink);
  background: transparent;
  border-bottom-color: var(--ss-accent);
  font-weight: var(--ss-fw-semibold);
}
html[data-ui="new"] .nav-pills {
  --bs-nav-pills-link-active-color: var(--ss-on-accent);
  --bs-nav-pills-link-active-bg: var(--ss-accent);
  --bs-nav-pills-border-radius: var(--ss-r-sm);
}
html[data-ui="new"] .nav-pills .nav-link { color: var(--ss-ink-2); border-radius: var(--ss-r-sm); }
html[data-ui="new"] .nav-pills .nav-link:hover { color: var(--ss-ink); background: var(--ss-bg-2); }
html[data-ui="new"] .nav-pills :is(.nav-link.active, .show > .nav-link) { background: var(--ss-accent); color: var(--ss-on-accent); }
html[data-ui="new"] .nav-link.disabled { color: var(--ss-ink-4); }

/* ---- modals, offcanvas, toasts, popovers ---- */
html[data-ui="new"] .modal {
  --bs-modal-bg: var(--ss-raised);
  --bs-modal-color: var(--ss-ink);
  --bs-modal-border-color: var(--ss-line);
  --bs-modal-border-radius: var(--ss-r-lg);
  --bs-modal-inner-border-radius: calc(var(--ss-r-lg) - 1px);
  --bs-modal-header-border-color: var(--ss-line);
  --bs-modal-footer-border-color: var(--ss-line);
  --bs-modal-box-shadow: var(--ss-shadow-overlay);
}
html[data-ui="new"] .modal-content {
  background: var(--ss-raised);
  color: var(--ss-ink);
  border: var(--ss-bw) solid var(--ss-line);
  border-radius: var(--ss-r-lg);
  box-shadow: var(--ss-shadow-overlay);
}
html[data-ui="new"] .modal-content :is(.modal-header, .modal-footer) { border-color: var(--ss-line); background: transparent; color: var(--ss-ink); }
html[data-ui="new"] .modal-title { color: var(--ss-ink); font-weight: var(--ss-fw-semibold); }
html[data-ui="new"] .modal-backdrop { --bs-backdrop-bg: #000; }
html[data-ui="new"] .offcanvas {
  --bs-offcanvas-bg: var(--ss-raised);
  --bs-offcanvas-color: var(--ss-ink);
  --bs-offcanvas-border-color: var(--ss-line);
  background: var(--ss-raised);
  color: var(--ss-ink);
}
html[data-ui="new"] .toast {
  --bs-toast-bg: var(--ss-raised);
  --bs-toast-color: var(--ss-ink);
  --bs-toast-border-color: var(--ss-line);
  --bs-toast-header-bg: var(--ss-bg-1);
  --bs-toast-header-color: var(--ss-ink-2);
  --bs-toast-header-border-color: var(--ss-line);
  --bs-toast-box-shadow: var(--ss-shadow-overlay);
  --bs-toast-border-radius: var(--ss-r);
  background: var(--ss-raised);
  color: var(--ss-ink);
  border: var(--ss-bw) solid var(--ss-line);
  border-radius: var(--ss-r);
  box-shadow: var(--ss-shadow-overlay);
}
html[data-ui="new"] .toast-header { background: var(--ss-bg-1); color: var(--ss-ink-2); border-color: var(--ss-line); }
html[data-ui="new"] .popover {
  --bs-popover-bg: var(--ss-raised);
  --bs-popover-border-color: var(--ss-line);
  --bs-popover-header-bg: var(--ss-bg-1);
  --bs-popover-header-color: var(--ss-ink);
  --bs-popover-body-color: var(--ss-ink);
}
html[data-ui="new"] .tooltip { --bs-tooltip-bg: var(--ss-ink); --bs-tooltip-color: var(--ss-bg); }

/* ---- dropdowns ---- */
html[data-ui="new"] .dropdown-menu {
  --bs-dropdown-bg: var(--ss-raised);
  --bs-dropdown-color: var(--ss-ink);
  --bs-dropdown-border-color: var(--ss-line);
  --bs-dropdown-link-color: var(--ss-ink);
  --bs-dropdown-link-hover-color: var(--ss-ink);
  --bs-dropdown-link-hover-bg: var(--ss-bg-2);
  --bs-dropdown-link-active-color: var(--ss-accent-text);
  --bs-dropdown-link-active-bg: var(--ss-accent-soft);
  --bs-dropdown-link-disabled-color: var(--ss-ink-4);
  --bs-dropdown-header-color: var(--ss-ink-3);
  --bs-dropdown-divider-bg: var(--ss-line);
  --bs-dropdown-border-radius: var(--ss-r-lg);
  --bs-dropdown-box-shadow: var(--ss-shadow-overlay);
  background: var(--ss-raised);
  color: var(--ss-ink);
  border: var(--ss-bw) solid var(--ss-line);
  border-radius: var(--ss-r-lg);
  box-shadow: var(--ss-shadow-overlay);
}
html[data-ui="new"] .dropdown-item { color: var(--ss-ink); }
html[data-ui="new"] .dropdown-item:is(:hover, :focus) { background: var(--ss-bg-2); color: var(--ss-ink); }
html[data-ui="new"] .dropdown-item:is(.active, :active) { background: var(--ss-accent-soft); color: var(--ss-accent-text); }
html[data-ui="new"] .dropdown-header { color: var(--ss-ink-3); }
html[data-ui="new"] .dropdown-divider { border-color: var(--ss-line); }

/* ---- list groups ---- */
html[data-ui="new"] .list-group {
  --bs-list-group-color: var(--ss-ink);
  --bs-list-group-bg: var(--ss-surface);
  --bs-list-group-border-color: var(--ss-line);
  --bs-list-group-border-radius: var(--ss-r);
  --bs-list-group-action-color: var(--ss-ink);
  --bs-list-group-action-hover-color: var(--ss-ink);
  --bs-list-group-action-hover-bg: var(--ss-bg-2);
  --bs-list-group-action-active-color: var(--ss-ink);
  --bs-list-group-action-active-bg: var(--ss-bg-3);
  --bs-list-group-disabled-color: var(--ss-ink-3);
  --bs-list-group-disabled-bg: var(--ss-bg-1);
  --bs-list-group-active-color: var(--ss-on-accent);
  --bs-list-group-active-bg: var(--ss-accent);
  --bs-list-group-active-border-color: var(--ss-accent);
}
html[data-ui="new"] .list-group-item { background-color: var(--ss-surface); color: var(--ss-ink); border-color: var(--ss-line); }
html[data-ui="new"] .list-group-item-action:is(:hover, :focus) { background-color: var(--ss-bg-2); color: var(--ss-ink); }
html[data-ui="new"] .list-group-item.active { background-color: var(--ss-accent); border-color: var(--ss-accent); color: var(--ss-on-accent); }
html[data-ui="new"] .list-group-item.disabled { color: var(--ss-ink-3); background-color: var(--ss-bg-1); }
html[data-ui="new"] .list-group-item-primary { background-color: var(--ss-accent-soft); color: var(--ss-accent-text); }
html[data-ui="new"] .list-group-item-success { background-color: var(--ss-success-soft); color: var(--ss-success); }
html[data-ui="new"] .list-group-item-danger { background-color: var(--ss-danger-soft); color: var(--ss-danger); }
html[data-ui="new"] .list-group-item-warning { background-color: var(--ss-warning-soft); color: var(--ss-warning); }
html[data-ui="new"] .list-group-item-info { background-color: var(--ss-info-soft); color: var(--ss-info); }
html[data-ui="new"] :is(.list-group-item-secondary, .list-group-item-light, .list-group-item-dark) { background-color: var(--ss-bg-2); color: var(--ss-ink); }

/* ---- pagination ---- */
html[data-ui="new"] .pagination {
  --bs-pagination-color: var(--ss-accent-text);
  --bs-pagination-bg: var(--ss-surface);
  --bs-pagination-border-color: var(--ss-line-2);
  --bs-pagination-hover-color: var(--ss-ink);
  --bs-pagination-hover-bg: var(--ss-bg-2);
  --bs-pagination-hover-border-color: var(--ss-line-2);
  --bs-pagination-focus-color: var(--ss-ink);
  --bs-pagination-focus-bg: var(--ss-bg-2);
  --bs-pagination-focus-box-shadow: var(--ss-focus-ring);
  --bs-pagination-active-color: var(--ss-on-accent);
  --bs-pagination-active-bg: var(--ss-accent);
  --bs-pagination-active-border-color: var(--ss-accent);
  --bs-pagination-disabled-color: var(--ss-ink-3);
  --bs-pagination-disabled-bg: var(--ss-bg-1);
  --bs-pagination-disabled-border-color: var(--ss-line);
  --bs-pagination-border-radius: var(--ss-r-sm);
}
html[data-ui="new"] .page-link { background-color: var(--ss-surface); color: var(--ss-accent-text); border-color: var(--ss-line-2); }
html[data-ui="new"] .page-item.active .page-link,
html[data-ui="new"] .page-link.active { background-color: var(--ss-accent); color: var(--ss-on-accent); border-color: var(--ss-accent); }
html[data-ui="new"] .page-item.disabled .page-link,
html[data-ui="new"] .page-link.disabled { background-color: var(--ss-bg-1); color: var(--ss-ink-3); }

/* ---- accordion, progress ---- */
html[data-ui="new"] .accordion {
  --bs-accordion-color: var(--ss-ink);
  --bs-accordion-bg: var(--ss-surface);
  --bs-accordion-border-color: var(--ss-line);
  --bs-accordion-border-radius: var(--ss-r);
  --bs-accordion-btn-color: var(--ss-ink);
  --bs-accordion-btn-bg: var(--ss-surface);
  --bs-accordion-active-color: var(--ss-ink);
  --bs-accordion-active-bg: var(--ss-bg-1);
  --bs-accordion-btn-focus-box-shadow: var(--ss-focus-ring);
}
html[data-ui="new"] .progress,
html[data-ui="new"] .progress-stacked { --bs-progress-bg: var(--ss-bg-3); --bs-progress-bar-bg: var(--ss-accent); --bs-progress-bar-color: var(--ss-on-accent); background-color: var(--ss-bg-3); }

/* ---- alerts ---- */
html[data-ui="new"] .alert {
  --bs-alert-border-radius: var(--ss-r);
  background: var(--ss-bg-1);
  color: var(--ss-ink);
  border: var(--ss-bw) solid var(--ss-line-2);
  border-radius: var(--ss-r);
}
html[data-ui="new"] .alert-primary { background: var(--ss-accent-soft); border-color: var(--ss-accent-line); color: var(--ss-accent-text); }
html[data-ui="new"] .alert-success { background: var(--ss-success-soft); border-color: color-mix(in srgb, var(--ss-success) 40%, transparent); color: var(--ss-success); }
html[data-ui="new"] .alert-danger { background: var(--ss-danger-soft); border-color: color-mix(in srgb, var(--ss-danger) 40%, transparent); color: var(--ss-danger); }
html[data-ui="new"] .alert-warning { background: var(--ss-warning-soft); border-color: color-mix(in srgb, var(--ss-warning) 40%, transparent); color: var(--ss-warning); }
html[data-ui="new"] .alert-info { background: var(--ss-info-soft); border-color: color-mix(in srgb, var(--ss-info) 40%, transparent); color: var(--ss-info); }
html[data-ui="new"] :is(.alert-secondary, .alert-light, .alert-dark) { background: var(--ss-bg-2); border-color: var(--ss-line-2); color: var(--ss-ink); }
html[data-ui="new"] .alert :is(.alert-link, a:not(.btn)) { color: inherit; font-weight: var(--ss-fw-semibold); text-decoration: underline; }
html[data-ui="new"] .alert :is(h1, h2, h3, h4, h5, h6, .alert-heading) { color: inherit; }

/* ---- badges: a pill, Geist; the colour comes from the .bg-* / .text-bg-* rules below ---- */
html[data-ui="new"] .badge {
  --bs-badge-font-weight: var(--ss-fw-semibold);
  --bs-badge-border-radius: var(--ss-r-pill);
  font-family: var(--ss-font-sans);
  font-weight: var(--ss-fw-semibold);
  letter-spacing: 0;
  border-radius: var(--ss-r-pill);
}

/* ---- FullCalendar (the shared calendar widget; Classic's light fix lives in
        sky-light.css, which the new themes do not load) ---- */
html[data-ui="new"] .fc {
  --fc-border-color: var(--ss-line);
  --fc-page-bg-color: var(--ss-bg);
  --fc-neutral-bg-color: var(--ss-bg-1);
  --fc-neutral-text-color: var(--ss-ink-3);
  --fc-today-bg-color: var(--ss-accent-soft);
  --fc-list-event-hover-bg-color: var(--ss-bg-2);
  --fc-button-text-color: var(--ss-ink);
  --fc-button-bg-color: var(--ss-surface);
  --fc-button-border-color: var(--ss-line-strong);
  --fc-button-hover-bg-color: var(--ss-bg-2);
  --fc-button-hover-border-color: var(--ss-line-strong);
  --fc-button-active-bg-color: var(--ss-accent);
  --fc-button-active-border-color: var(--ss-accent);
  color: var(--ss-ink);
}
html[data-ui="new"] .fc .fc-daygrid-day-number,
html[data-ui="new"] .fc .fc-col-header-cell-cushion { color: var(--ss-ink-2); text-decoration: none; }
/* "not this month": FullCalendar fades the whole day top to .3, which takes any
   ink under 3:1. Full opacity, muted ink instead — the grey still says it. */
html[data-ui="new"] .fc .fc-day-other .fc-daygrid-day-top { opacity: 1; }
html[data-ui="new"] .fc .fc-day-other .fc-daygrid-day-number { color: var(--ss-ink-3); }
html[data-ui="new"] .fc .fc-button-primary:not(:disabled).fc-button-active,
html[data-ui="new"] .fc .fc-button-primary:not(:disabled):active { color: var(--ss-on-accent); }

/* ==========================================================================
   5. BOOTSTRAP UTILITIES (Bootstrap marks these !important, so these do too)
   ========================================================================== */
/* text */
html[data-ui="new"] :is(.text-muted, .text-secondary, .text-body-secondary, .text-black-50, .text-white-50) { color: var(--ss-ink-3) !important; }
html[data-ui="new"] .text-body-tertiary { color: var(--ss-ink-3) !important; }
html[data-ui="new"] :is(.text-body, .text-body-emphasis, .text-dark, .text-black) { color: var(--ss-ink) !important; }
html[data-ui="new"] .text-primary { color: var(--ss-accent-text) !important; }
html[data-ui="new"] .text-success { color: var(--ss-success) !important; }
html[data-ui="new"] .text-danger { color: var(--ss-danger) !important; }
html[data-ui="new"] .text-warning { color: var(--ss-warning) !important; }
html[data-ui="new"] .text-info { color: var(--ss-info) !important; }
html[data-ui="new"] .link-primary { color: var(--ss-accent-text) !important; }
html[data-ui="new"] :is(.link-secondary, .link-body-emphasis) { color: var(--ss-ink-2) !important; }
/* .text-white / .text-light on a CONTENT surface (a card, a converted .bg-dark panel,
   a table, a list) would be white-on-white in a light theme: they follow the ink. On
   fills (buttons, badges, the .bg-primary/.bg-success… family, images) they stay. */
html[data-ui="new"] :is(.card, .bg-dark, .bg-body, .bg-body-secondary, .bg-body-tertiary, .table, .list-group-item, .modal-content, .dropdown-menu, .offcanvas, .accordion-item, .toast) :is(.text-white, .text-light, .link-light):not(.btn, .badge, .btn *, .badge *, :is(.bg-primary, .bg-success, .bg-danger, .bg-warning, .bg-info, .bg-secondary, [class*="text-bg-"], .sky-keep-dark, [data-sky-keep-dark]), :is(.bg-primary, .bg-success, .bg-danger, .bg-warning, .bg-info, .bg-secondary, [class*="text-bg-"], .sky-keep-dark, [data-sky-keep-dark]) *) {
  color: var(--ss-ink) !important;
}
html[data-ui="new"] :is(.bg-dark, .card.bg-dark, .card.text-white):not(.btn):not(.badge):not(.sky-keep-dark):not([data-sky-keep-dark]).text-white { color: var(--ss-ink) !important; }

/* surfaces */
html[data-ui="new"] .bg-body { background-color: var(--ss-bg) !important; }
html[data-ui="new"] .bg-body-secondary { background-color: var(--ss-bg-1) !important; }
html[data-ui="new"] .bg-body-tertiary { background-color: var(--ss-bg-2) !important; }
html[data-ui="new"] .bg-white { background-color: var(--ss-surface) !important; }
html[data-ui="new"] .bg-transparent { background-color: transparent !important; }
/* .bg-dark is how hundreds of templates paint a content card: it becomes the theme's
   card surface (a nested one, the recessed well), in light AND dark. Things that must
   stay dark (map HUD, video) opt out with .sky-keep-dark / [data-sky-keep-dark]. */
html[data-ui="new"] .bg-dark:not(.navbar):not(.btn):not(.badge):not(.sky-keep-dark):not([data-sky-keep-dark]) {
  background-color: var(--ss-surface) !important;
  color: var(--ss-ink);
}
html[data-ui="new"] .bg-dark:not(.sky-keep-dark):not([data-sky-keep-dark]) .bg-dark:not(.navbar):not(.btn):not(.badge):not(.sky-keep-dark):not([data-sky-keep-dark]) {
  background-color: var(--ss-bg-2) !important;
}
html[data-ui="new"] .bg-dark:not(.sky-keep-dark):not([data-sky-keep-dark]) > :is(.card-header, .card-footer) { background-color: var(--ss-bg-1); color: var(--ss-ink); }
html[data-ui="new"] .bg-light:not(.btn):not(.badge) { background-color: var(--ss-bg-1) !important; color: var(--ss-ink); }
html[data-ui="new"] .bg-secondary:not(.btn):not(.badge) { background-color: var(--ss-bg-3) !important; color: var(--ss-ink); }
/* fills: each with its own on-colour. [class] lifts them one attribute above the .text-*
   rules, so a fill's own label colour wins over a .text-dark / .text-white on the same element
   (a dark label on a dark-theme light fill, or the reverse, is what fails contrast). */
html[data-ui="new"] :is(.bg-primary, .text-bg-primary)[class] { background-color: var(--ss-accent) !important; color: var(--ss-on-accent) !important; }
html[data-ui="new"] :is(.bg-success, .text-bg-success)[class] { background-color: var(--ss-success-fill) !important; color: var(--ss-on-success) !important; }
html[data-ui="new"] :is(.bg-danger, .text-bg-danger)[class] { background-color: var(--ss-danger-fill) !important; color: var(--ss-on-danger) !important; }
html[data-ui="new"] :is(.bg-warning, .text-bg-warning)[class] { background-color: var(--ss-warning-fill) !important; color: var(--ss-on-warning) !important; }
html[data-ui="new"] :is(.bg-info, .text-bg-info)[class] { background-color: var(--ss-info-fill) !important; color: var(--ss-on-info) !important; }
html[data-ui="new"] :is(.badge.bg-secondary, .text-bg-secondary, .badge.bg-light, .text-bg-light)[class] { background-color: var(--ss-bg-3) !important; color: var(--ss-ink) !important; }
html[data-ui="new"] :is(.badge.bg-dark, .text-bg-dark)[class] { background-color: var(--ss-ink) !important; color: var(--ss-bg) !important; }
/* soft fills (Bootstrap 5.3 *-subtle) */
html[data-ui="new"] .bg-primary-subtle { background-color: var(--ss-accent-soft) !important; }
html[data-ui="new"] .bg-success-subtle { background-color: var(--ss-success-soft) !important; }
html[data-ui="new"] .bg-danger-subtle { background-color: var(--ss-danger-soft) !important; }
html[data-ui="new"] .bg-warning-subtle { background-color: var(--ss-warning-soft) !important; }
html[data-ui="new"] .bg-info-subtle { background-color: var(--ss-info-soft) !important; }
html[data-ui="new"] :is(.bg-secondary-subtle, .bg-light-subtle, .bg-dark-subtle) { background-color: var(--ss-bg-2) !important; }
html[data-ui="new"] .text-primary-emphasis { color: var(--ss-accent-text) !important; }
html[data-ui="new"] .text-success-emphasis { color: var(--ss-success) !important; }
html[data-ui="new"] .text-danger-emphasis { color: var(--ss-danger) !important; }
html[data-ui="new"] .text-warning-emphasis { color: var(--ss-warning) !important; }
html[data-ui="new"] .text-info-emphasis { color: var(--ss-info) !important; }
html[data-ui="new"] :is(.text-secondary-emphasis, .text-light-emphasis, .text-dark-emphasis) { color: var(--ss-ink-2) !important; }
/* borders */
html[data-ui="new"] :is(.border-secondary, .border-dark, .border-light) { border-color: var(--ss-line-2) !important; }
html[data-ui="new"] .border-primary { border-color: var(--ss-accent) !important; }
html[data-ui="new"] .border-success { border-color: var(--ss-success) !important; }
html[data-ui="new"] .border-danger { border-color: var(--ss-danger) !important; }
html[data-ui="new"] .border-warning { border-color: var(--ss-warning) !important; }
html[data-ui="new"] .border-info { border-color: var(--ss-info) !important; }

/* ==========================================================================
   6. SHARED COMPONENTS: sky-steps (v1/sky-steps.css, mission-flow redesign 2026-10-13)
   The step component reads only the --steps- aliases. Classic feeds them from its --status-* /
   --action-* tokens (defaults in sky-steps.css); the new themes feed them here. Colour = meaning
   (2026-10-14): current step, running and the primary button are the action BLUE (--ss-action*),
   done is green, failed red; the magenta accent is only the focus ring. Declared ON the
   component, not on <html>, so a field-context scope that re-values the --ss- tokens reaches
   them too.
   Contrast of every pairing: tests/themes-tokens-contrast.test.js ("sky-steps").
   ========================================================================== */
html[data-ui="new"] :is(.sky-steps, .sky-steps-pill) {
  --steps-surface: var(--ss-surface);
  --steps-surface-2: var(--ss-bg-2);
  --steps-raised: var(--ss-raised);
  --steps-ink: var(--ss-ink);
  --steps-ink-2: var(--ss-ink-2);
  --steps-muted: var(--ss-ink-3);
  --steps-border: var(--ss-line);
  --steps-control: var(--ss-line-strong);
  --steps-accent: var(--ss-action);
  --steps-accent-hover: var(--ss-action-hover);
  --steps-on-accent: var(--ss-on-action);
  --steps-current: var(--ss-action-text);
  --steps-current-bg: var(--ss-action-soft);
  --steps-current-line: var(--ss-action-line);
  --steps-done: var(--ss-success-fill);
  --steps-on-done: var(--ss-on-success);
  --steps-done-ink: var(--ss-success);
  --steps-done-bg: var(--ss-success-soft);
  --steps-running: var(--ss-action-text);
  --steps-running-bg: var(--ss-action-soft);
  --steps-failed: var(--ss-danger);
  --steps-failed-bg: var(--ss-danger-soft);
  --steps-danger: var(--ss-danger);
  --steps-focus: var(--ss-focus);
  --steps-shadow: var(--ss-shadow-overlay);
  --steps-radius: var(--ss-r-lg);
  --steps-radius-sm: var(--ss-r-sm);
}

/* ==========================================================================
   7. LEGACY ACCENT, INLINE STYLES (admin 2026-10-15, "blue on purple")
   Page CSS with a literal Classic magenta is re-keyed in legacy-accent.css (generated). These
   two are inline style="" attributes, which only !important reaches:
   - core support/ticket.html: a badge FILLED with var(--sky-accent) (= the accent TEXT colour
     in the new packs, a light blue / pink in dark) under white text — 2:1 in Field Ops dark.
   - core help_index.html: the "request a guide" card's literal magenta border.
   ========================================================================== */
html[data-ui="new"] .badge[style*="background:var(--sky-accent"] {
  background: var(--ss-accent) !important;
  color: var(--ss-on-accent) !important;
}
html[data-ui="new"] .hx-card[style*="border-color:rgba(255"] { border-color: rgba(var(--ss-accent-rgb), .45) !important; }

/* ===== _src/legacy-accent.css ===== */
/* ==========================================================================
   LEGACY ACCENT: the apps' hard-coded Classic magenta, re-keyed to the pack's accent.
   GENERATED by tools/gen-legacy-accent.py from skysuite-core 0003146cdf28 and the shell;
   do not edit by hand. Why: a literal rgba(255,0,174,a) wash under a var(--sky-accent)
   label is blue on purple in Field Ops (admin 2026-10-15) and pink-on-white in the light
   packs. Scoped to html[data-ui="new"]: Classic is untouched.
   Per-app follow-up (tokenise the literal, then drop it from here):
   - skysuite-core app/static/css/leaderboard.css: 8 rule(s)
   - skysuite-core app/templates/dashboard/_dispatch_listen.html: 9 rule(s)
   - skysuite-core app/templates/dashboard/dispatch.html: 1 rule(s)
   - skysuite-core app/templates/dashboard/observations_admin.html: 4 rule(s)
   - skysuite-core app/templates/dashboard/office_directory.html: 4 rule(s)
   - skysuite-core app/templates/dashboard/squawk_box.html: 29 rule(s)
   - skysuite-shell v1/sky-podcast-player.css: 5 rule(s)
   ========================================================================== */

/* --- skysuite-core app/static/css/leaderboard.css --- */
html[data-ui="new"] :is(.lb-fp-btn) { background: rgba(var(--ss-accent-rgb), .10); border: 1px solid rgba(var(--ss-accent-rgb), .28); }
html[data-ui="new"] :is(.lb-fp-btn:hover) { background: rgba(var(--ss-accent-rgb), .18); }
html[data-ui="new"] :is(.lb-row.me) { background: rgba(var(--ss-accent-rgb), .08); }
html[data-ui="new"] :is(.lb-pts) { background: rgba(var(--ss-accent-rgb), .16); border: 1px solid rgba(var(--ss-accent-rgb), .42); }
html[data-ui="new"] :is(.lb-seatprog .s-joined) { background: linear-gradient(90deg,var(--ss-accent),var(--ss-accent-hover)); }
html[data-ui="new"] :is(.lb-legend i.j) { background: linear-gradient(135deg,var(--ss-accent),var(--ss-accent-hover)); }
html[data-ui="new"] :is(.lb-band) { border: 1px solid rgba(var(--ss-accent-rgb), .26); background: rgba(var(--ss-accent-rgb), .055); }
html[data-ui="new"] :is(.lb-band-t) { color: var(--ss-accent-text); }

/* --- skysuite-core app/templates/dashboard/_dispatch_listen.html --- */
html[data-ui="new"] :is(.cc-join) { background: rgba(var(--ss-accent-rgb), .10); border: 1px solid rgba(var(--ss-accent-rgb), .28); }
html[data-ui="new"] :is(.cc-join:hover) { background: rgba(var(--ss-accent-rgb), .18); }
html[data-ui="new"] :is(.cc-ep.hero) { border-color: rgba(var(--ss-accent-rgb), .34); }
html[data-ui="new"] :is(.cc-num) { background: rgba(var(--ss-accent-rgb), .10); border: 1px solid rgba(var(--ss-accent-rgb), .28); }
html[data-ui="new"] :is(.cc-play-btn) { background: rgba(var(--ss-accent-rgb), .12); border: 1px solid rgba(var(--ss-accent-rgb), .30); }
html[data-ui="new"] :is(.cc-play-btn:hover) { background: rgba(var(--ss-accent-rgb), .20); }
html[data-ui="new"] :is(.cc-ep.playing .cc-play-btn) { background: rgba(var(--ss-accent-rgb), .24); border-color: rgba(var(--ss-accent-rgb), .5); }
html[data-ui="new"] :is(.cc-admin button) { border: 1px solid rgba(var(--ss-accent-rgb), .28); background: rgba(var(--ss-accent-rgb), .12); }
html[data-ui="new"] :is(.cc-yt-release) { border: 1px solid rgba(var(--ss-accent-rgb), .28); background: rgba(var(--ss-accent-rgb), .12); }

/* --- skysuite-core app/templates/dashboard/dispatch.html --- */
html[data-ui="new"] :is(.dsp-tab[aria-selected="true"]) { background: rgba(var(--ss-accent-rgb), .14); box-shadow: inset 0 0 0 1px rgba(var(--ss-accent-rgb), .28); }

/* --- skysuite-core app/templates/dashboard/observations_admin.html --- */
html[data-ui="new"] :is(.obs-field input:focus),
html[data-ui="new"] :is(.obs-field textarea:focus),
html[data-ui="new"] :is(.obs-field select:focus) { border-color: rgba(var(--ss-accent-rgb), .5); }
html[data-ui="new"] :is(.obs-check input) { accent-color: var(--ss-accent); }
html[data-ui="new"] :is(.obs-btn) { background: rgba(var(--ss-accent-rgb), .10); border: 1px solid rgba(var(--ss-accent-rgb), .28); }
html[data-ui="new"] :is(.obs-btn:hover) { background: rgba(var(--ss-accent-rgb), .18); }

/* --- skysuite-core app/templates/dashboard/office_directory.html --- */
html[data-ui="new"] :is(.md-tag) { background: rgba(var(--ss-accent-rgb), .10); border: 1px solid rgba(var(--ss-accent-rgb), .18); }
html[data-ui="new"] :is(.md-ranks-btn) { background: rgba(var(--ss-accent-rgb), .10); border: 1px solid rgba(var(--ss-accent-rgb), .28); }
html[data-ui="new"] :is(.md-ranks-btn:hover) { background: rgba(var(--ss-accent-rgb), .18); }
html[data-ui="new"] :is(.rk-row.rk-cur) { background: rgba(var(--ss-accent-rgb), .08); }

/* --- skysuite-core app/templates/dashboard/squawk_box.html --- */
html[data-ui="new"] :is(.sqb-tab[aria-selected="true"]) { background: rgba(var(--ss-accent-rgb), .12); }
html[data-ui="new"] :is(.ep-manage) { border: 1px solid rgba(var(--ss-accent-rgb), .28); }
html[data-ui="new"] :is(.ep-manage:hover) { background: rgba(var(--ss-accent-rgb), .12); }
html[data-ui="new"] :is(.ep-card:hover) { border-color: rgba(var(--ss-accent-rgb), .35); }
html[data-ui="new"] :is(.ep-chip.deep) { color: var(--ss-accent-text); border-color: rgba(var(--ss-accent-rgb), .30); background: rgba(var(--ss-accent-rgb), .08); }
html[data-ui="new"] :is(.ep-cta) { background: rgba(var(--ss-accent-rgb), .10); border: 1px solid rgba(var(--ss-accent-rgb), .28); }
html[data-ui="new"] :is(.ep-cta:hover) { background: rgba(var(--ss-accent-rgb), .18); }
html[data-ui="new"] :is(.upd-fb-btn) { background: rgba(var(--ss-accent-rgb), .10); border: 1px solid rgba(var(--ss-accent-rgb), .28); }
html[data-ui="new"] :is(.upd-fb-btn:hover) { background: rgba(var(--ss-accent-rgb), .18); }
html[data-ui="new"] :is(.upd-chip.pts) { color: var(--ss-accent-text); border-color: rgba(var(--ss-accent-rgb), .30); background: rgba(var(--ss-accent-rgb), .08); }
html[data-ui="new"] :is(.upd-kb textarea:focus) { border-color: rgba(var(--ss-accent-rgb), .5); }
html[data-ui="new"] :is(.upd-srch input[type=search]:focus) { border-color: rgba(var(--ss-accent-rgb), .5); }
html[data-ui="new"] :is(.upd-srch button) { background: rgba(var(--ss-accent-rgb), .10); border: 1px solid rgba(var(--ss-accent-rgb), .28); }
html[data-ui="new"] :is(.upd-srch button:hover) { background: rgba(var(--ss-accent-rgb), .18); }
html[data-ui="new"] :is(.upd-pager a) { border: 1px solid rgba(var(--ss-accent-rgb), .28); }
html[data-ui="new"] :is(.upd-pager a:hover) { background: rgba(var(--ss-accent-rgb), .12); }
html[data-ui="new"] :is(.upd-card:hover) { border-color: rgba(var(--ss-accent-rgb), .35); }
html[data-ui="new"] :is(.upd-share) { border: 1px solid rgba(var(--ss-accent-rgb), .28); }
html[data-ui="new"] :is(.upd-share:hover) { background: rgba(var(--ss-accent-rgb), .12); }
html[data-ui="new"] :is(.bb-fb-btn) { background: rgba(var(--ss-accent-rgb), .10); border: 1px solid rgba(var(--ss-accent-rgb), .28); }
html[data-ui="new"] :is(.bb-fb-btn:hover) { background: rgba(var(--ss-accent-rgb), .18); }
html[data-ui="new"] :is(.sqb-mt-report) { background: rgba(var(--ss-accent-rgb), .10); border: 1px solid rgba(var(--ss-accent-rgb), .28); }
html[data-ui="new"] :is(.sqb-mt-report:hover) { background: rgba(var(--ss-accent-rgb), .18); }
html[data-ui="new"] :is(.sqb-mt-row:hover) { border-color: rgba(var(--ss-accent-rgb), .35); }
html[data-ui="new"] :is(.sqb-mt-badge.pts) { color: var(--ss-accent-text); border-color: rgba(var(--ss-accent-rgb), .30); background: rgba(var(--ss-accent-rgb), .08); }
html[data-ui="new"] :is(.sqb-mt-srch select:focus) { border-color: rgba(var(--ss-accent-rgb), .5); }
html[data-ui="new"] :is(.sqb-mt-track-form input:focus) { border-color: rgba(var(--ss-accent-rgb), .5); }
html[data-ui="new"] :is(.sqb-mt-track-form button) { background: rgba(var(--ss-accent-rgb), .10); border: 1px solid rgba(var(--ss-accent-rgb), .28); }
html[data-ui="new"] :is(.sqb-mt-track-form button:hover) { background: rgba(var(--ss-accent-rgb), .18); }

/* --- skysuite-shell v1/sky-podcast-player.css --- */
html[data-ui="new"] :is(.skp-btn.skp-play) { background: rgba(var(--ss-accent-rgb), .16); border: 1px solid rgba(var(--ss-accent-rgb), .32); }
html[data-ui="new"] :is(.skp-btn.skp-play:hover) { background: rgba(var(--ss-accent-rgb), .24); }
html[data-ui="new"] :is(.skpf-cover-ph) { background: linear-gradient(155deg,rgba(var(--ss-accent-rgb), .22),rgba(96,165,250,.18)); }
html[data-ui="new"] :is(.skpf-transport .skp-btn.skpf-play) { background: rgba(var(--ss-accent-rgb), .16); border: 1px solid rgba(var(--ss-accent-rgb), .32); }
html[data-ui="new"] :is(.skpf-transport .skp-btn.skpf-play:hover) { background: rgba(var(--ss-accent-rgb), .24); }

/* ===== _src/components.css ===== */
/* ==========================================================================
   COMPONENTS: each pack's SHAPE, not just its palette (admin 2026-10-15: "It looks like
   you just changed colours and fonts, but not the full design for the themes").
   --------------------------------------------------------------------------
   base.css maps colour, radius and type onto Bootstrap and the shell. This layer carries
   the rest of the approved candidates (ui-audit-20261012/directions/{A,B,C}/screens-2x): control
   and row density, card anatomy (header row + divider, radius, border weight, elevation),
   table heads, status badges, tab bars, the heading scale, form labels, sidebar rows and
   stat tiles. Every value is a --ss-c-* "character" token each pack sets in its tokens
   file, so one rule set gives A (Clean Pro), B (Field Ops) and C (Warm Modern) their own
   look; where the candidates differ in structure, not just value, a pack-scoped block
   follows. Field Ops' control sizes stay with big-controls.tmpl.css (built after this).
   Restyles shared classes only: no app template changes. Classic never loads this file.
   ========================================================================== */

/* ---- page title: the candidates' size (Bootstrap's 2.5rem h1 reads as a marketing page).
        h1 only: apps also use h2-h5 for KPI numbers, so those keep their sizes. :where()
        keeps it at the weight of one element, so a page's own class still wins. ---- */
html[data-ui="new"] :where(h1, .h1) { font-size: var(--ss-c-h1-fs); font-weight: var(--ss-fw-semibold); line-height: var(--ss-lh-tight); }

/* ---- buttons: the pack's control height, padding and label ---- */
html[data-ui="new"] .btn:not(.btn-close):not(.btn-link) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: var(--ss-c-btn-h);
  padding: 0 var(--ss-c-btn-px);
  font-size: var(--ss-c-btn-fs);
  font-weight: var(--ss-c-btn-fw);
  line-height: 1.2;
}
html[data-ui="new"] :is(.btn-secondary, .btn-light, .btn-outline-secondary, .btn-default):not(.btn-close) { box-shadow: var(--ss-c-btn-shadow); }
html[data-ui="new"] :is(.btn-primary, .btn-gradient-primary, .btn-vista) { box-shadow: var(--ss-c-btn-primary-shadow); }
html[data-ui="new"] :is(.btn-sm, .btn-group-sm > .btn):not(.btn-close):not(.btn-link) { min-height: var(--ss-c-btn-h-sm); padding: 0 calc(var(--ss-c-btn-px) - 3px); font-size: var(--ss-fs-12); gap: 6px; }
html[data-ui="new"] :is(.btn-lg, .btn-group-lg > .btn):not(.btn-close):not(.btn-link) { min-height: var(--ss-c-btn-h-lg); padding: 0 calc(var(--ss-c-btn-px) + 4px); font-size: var(--ss-fs-14); }
html[data-ui="new"] .btn:not(.btn-close) > .bi { line-height: 1; }

/* ---- inputs: the same control height (file / multi-line / sized selects keep theirs) ---- */
html[data-ui="new"] :is(.form-control, .form-select):not(textarea):not([type="file"]):not([type="color"]):not([multiple]):not([size]) {
  min-height: var(--ss-c-input-h);
  padding-top: 0;
  padding-bottom: 0;
  font-size: var(--ss-c-input-fs);
}
html[data-ui="new"] textarea.form-control { font-size: var(--ss-c-input-fs); }
html[data-ui="new"] :is(.form-control-sm, .form-select-sm):not(textarea):not([type="file"]) { min-height: var(--ss-c-btn-h-sm); font-size: var(--ss-fs-12); }
html[data-ui="new"] .input-group > .input-group-text { font-size: var(--ss-c-input-fs); }

/* ---- form labels ---- */
html[data-ui="new"] .form-label.form-label {
  font-family: var(--ss-c-label-font);
  font-size: var(--ss-c-label-fs);
  text-transform: var(--ss-c-label-case);
  letter-spacing: var(--ss-c-label-track);
  color: var(--ss-c-label-ink);
  margin-bottom: 6px;
}

/* ---- cards: anatomy, radius, border weight, elevation ---- */
html[data-ui="new"] :is(.card, .sky-card, .sky-card-static, .card-glow, .stat-card) {
  --bs-card-border-radius: var(--ss-c-card-r);
  --bs-card-inner-border-radius: calc(var(--ss-c-card-r) - 1px);
  --bs-card-cap-bg: var(--ss-c-head-bg);
  border-radius: var(--ss-c-card-r);
  border-color: var(--ss-c-card-line);
  box-shadow: var(--ss-c-card-shadow);
}
html[data-ui="new"] :is(.card, .sky-card, .sky-card-static, .card-glow, .stat-card):hover { box-shadow: var(--ss-c-card-shadow); }
html[data-ui="new"] :is(.sky-card, .sky-card-static, .card-glow, .stat-card):not([class*="bg-"]) {
  background: var(--ss-surface);
  border-style: solid;
  border-width: var(--ss-bw);
}
html[data-ui="new"] .card > .card-header {
  background: var(--ss-c-head-bg);
  border-bottom: var(--ss-bw) solid var(--ss-c-head-line);
  padding: var(--ss-c-head-py) 16px;
  font-size: var(--ss-c-head-fs);
  font-weight: var(--ss-fw-semibold);
  border-radius: calc(var(--ss-c-card-r) - 1px) calc(var(--ss-c-card-r) - 1px) 0 0;
}
html[data-ui="new"] .card > .card-header :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .card-title) {
  font-size: var(--ss-c-head-fs);
  font-weight: var(--ss-fw-semibold);
  margin-bottom: 0;
}
html[data-ui="new"] .card > .card-footer { background: var(--ss-c-head-bg); border-top: var(--ss-bw) solid var(--ss-c-head-line); padding: var(--ss-c-head-py) 16px; }
html[data-ui="new"] .card > .card-header.bg-primary { border-bottom-color: transparent; }
html[data-ui="new"] .card > .card-body { padding: 16px; }
html[data-ui="new"] .card .card-title { font-size: var(--ss-c-head-fs); font-weight: var(--ss-fw-semibold); }

/* ---- stat tiles (drone-suite-theme .stat-card) ---- */
html[data-ui="new"] .stat-card .stat-value {
  font-size: var(--ss-c-h1-fs);
  font-weight: var(--ss-fw-semibold);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: var(--ss-ink);
}
html[data-ui="new"] .stat-card .stat-label {
  font-family: var(--ss-c-th-font);
  font-size: var(--ss-c-th-fs);
  font-weight: var(--ss-c-th-fw);
  text-transform: var(--ss-c-th-case);
  letter-spacing: var(--ss-c-th-track);
  color: var(--ss-ink-2);
}

/* ---- tables: head row and row height ---- */
html[data-ui="new"] .table > thead > tr > th,
html[data-ui="new"] .table thead th {
  height: var(--ss-c-th-h);
  padding-top: 0;
  padding-bottom: 0;
  vertical-align: middle;
  background: var(--ss-c-th-bg);
  color: var(--ss-c-th-ink);
  font-family: var(--ss-c-th-font);
  font-size: var(--ss-c-th-fs);
  font-weight: var(--ss-c-th-fw);
  text-transform: var(--ss-c-th-case);
  letter-spacing: var(--ss-c-th-track);
  border-bottom: var(--ss-bw) solid var(--ss-line);
  white-space: nowrap;
}
html[data-ui="new"] .table:not(.table-sm) > tbody > tr > td { height: var(--ss-c-td-h); vertical-align: middle; font-size: var(--ss-c-td-fs); }
html[data-ui="new"] .table > tbody > tr:last-child > td { border-bottom-width: 0; }
html[data-ui="new"] .card > :is(.table, .table-responsive > .table) { margin-bottom: 0; }
html[data-ui="new"] .card > :is(.table, .table-responsive > .table) :is(th, td):first-child { padding-left: 16px; }
html[data-ui="new"] .card > :is(.table, .table-responsive > .table) :is(th, td):last-child { padding-right: 16px; }

/* ---- status badges: the pack's chip (Bootstrap's solid fills read as alarms in a list).
        Counters on buttons, nav and avatars keep the solid fill. ---- */
html[data-ui="new"] .badge[class]:is(.bg-success, .text-bg-success, .bg-warning, .text-bg-warning, .bg-danger, .text-bg-danger, .bg-info, .text-bg-info, .bg-primary, .text-bg-primary, .bg-secondary, .text-bg-secondary, .bg-light, .text-bg-light, .bg-dark, .text-bg-dark):not(.position-absolute):not(.rounded-circle):not(:is(.btn, .nav, .nav-link, .sky-sidebar, #sbn, .dropdown-toggle) .badge) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--ss-c-badge-h);
  padding: 0 9px 0 8px;
  border-radius: var(--ss-c-badge-r) !important;
  font-family: var(--ss-c-badge-font);
  font-size: var(--ss-c-badge-fs);
  font-weight: var(--ss-c-badge-fw);
  text-transform: var(--ss-c-badge-case);
  letter-spacing: var(--ss-c-badge-track);
  line-height: 1;
  vertical-align: middle;
  white-space: nowrap;
}
/* The neutral defaults sit in their own low-specificity rule (phase 4 fix, 2026-10-15): inside
   the chip rule above, the :not(... #sbn ...) gave them ID-level specificity, so the status
   colours below never applied and every chip rendered grey. */
html[data-ui="new"] .badge { --c-ink: var(--ss-ink-2); --c-soft: var(--ss-bg-2); --c-dot: var(--ss-ink-3); }
html[data-ui="new"] .badge[class]:is(.bg-success, .text-bg-success) { --c-ink: var(--ss-success); --c-soft: var(--ss-success-soft); --c-dot: var(--ss-success-fill); }
html[data-ui="new"] .badge[class]:is(.bg-warning, .text-bg-warning) { --c-ink: var(--ss-warning); --c-soft: var(--ss-warning-soft); --c-dot: var(--ss-warning-fill); }
html[data-ui="new"] .badge[class]:is(.bg-danger, .text-bg-danger) { --c-ink: var(--ss-danger); --c-soft: var(--ss-danger-soft); --c-dot: var(--ss-danger-fill); }
html[data-ui="new"] .badge[class]:is(.bg-info, .text-bg-info) { --c-ink: var(--ss-info); --c-soft: var(--ss-info-soft); --c-dot: var(--ss-info-fill); }
html[data-ui="new"] .badge[class]:is(.bg-primary, .text-bg-primary) { --c-ink: var(--ss-accent-text); --c-soft: var(--ss-accent-soft); --c-dot: var(--ss-accent); }
/* B, C: a tinted chip in the status colour */
html[data-ui="new"]:is([data-theme="field-ops"], [data-theme="warm-modern"]) .badge[class]:is(.bg-success, .text-bg-success, .bg-warning, .text-bg-warning, .bg-danger, .text-bg-danger, .bg-info, .text-bg-info, .bg-primary, .text-bg-primary, .bg-secondary, .text-bg-secondary, .bg-light, .text-bg-light, .bg-dark, .text-bg-dark):not(.position-absolute):not(.rounded-circle):not(:is(.btn, .nav, .nav-link, .sky-sidebar, #sbn, .dropdown-toggle) .badge) {
  background: var(--c-soft) !important;
  color: var(--c-ink) !important;
  border: 0;
}
/* B: square-ish mono tag outlined in its own colour */
html[data-ui="new"][data-theme="field-ops"] .badge[class]:is(.bg-success, .text-bg-success, .bg-warning, .text-bg-warning, .bg-danger, .text-bg-danger, .bg-info, .text-bg-info, .bg-primary, .text-bg-primary, .bg-secondary, .text-bg-secondary, .bg-light, .text-bg-light, .bg-dark, .text-bg-dark):not(.position-absolute):not(.rounded-circle):not(:is(.btn, .nav, .nav-link, .sky-sidebar, #sbn, .dropdown-toggle) .badge) {
  border: var(--ss-bw-strong) solid currentColor;
  padding: 0 10px;
}
/* A: a quiet outlined pill, the colour only in the dot */
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .badge[class]:is(.bg-success, .text-bg-success, .bg-warning, .text-bg-warning, .bg-danger, .text-bg-danger, .bg-info, .text-bg-info, .bg-primary, .text-bg-primary, .bg-secondary, .text-bg-secondary, .bg-light, .text-bg-light, .bg-dark, .text-bg-dark):not(.position-absolute):not(.rounded-circle):not(:is(.btn, .nav, .nav-link, .sky-sidebar, #sbn, .dropdown-toggle) .badge) {
  background: var(--ss-surface) !important;
  color: var(--ss-ink-2) !important;
  border: var(--ss-bw) solid var(--ss-line-2);
}
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .badge[class]:is(.bg-danger, .text-bg-danger):not(.position-absolute):not(.rounded-circle):not(:is(.btn, .nav, .nav-link, .sky-sidebar, #sbn, .dropdown-toggle) .badge) {
  color: var(--ss-danger) !important;
  border-color: color-mix(in srgb, var(--ss-danger-fill) 35%, var(--ss-line-2));
}
/* A, C: the status dot */
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"], [data-theme="warm-modern"]) .badge[class]:is(.bg-success, .text-bg-success, .bg-warning, .text-bg-warning, .bg-danger, .text-bg-danger, .bg-info, .text-bg-info, .bg-primary, .text-bg-primary, .bg-secondary, .text-bg-secondary, .bg-light, .text-bg-light, .bg-dark, .text-bg-dark):not(.position-absolute):not(.rounded-circle):not(:is(.btn, .nav, .nav-link, .sky-sidebar, #sbn, .dropdown-toggle) .badge)::before {
  content: "";
  width: var(--ss-c-badge-dot);
  height: var(--ss-c-badge-dot);
  border-radius: 50%;
  background: var(--c-dot);
  flex: none;
}

/* ---- tabs: height, bar weight and the pack's marker colour ---- */
html[data-ui="new"] .nav-tabs .nav-link {
  min-height: var(--ss-c-tab-h);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-bottom-width: var(--ss-c-tab-bar);
  margin-bottom: calc(var(--ss-bw) * -1);
}
html[data-ui="new"] .nav-tabs :is(.nav-link.active, .nav-item.show .nav-link) { border-bottom-color: var(--ss-c-tab-mark); }

/* ---- breadcrumbs: the candidates' small muted trail ---- */
html[data-ui="new"] :is(.sky-breadcrumb, .breadcrumbs, .breadcrumb) { font-size: var(--ss-fs-12); }

/* ---- sidebar: group headings, row height, the "you are here" row ---- */
html[data-ui="new"] .sky-sidebar :is(.sky-sidebar-group-label, .sky-nav-section-title) {
  font-family: var(--ss-c-group-font);
  font-size: var(--ss-c-group-fs);
  text-transform: var(--ss-c-group-case);
  letter-spacing: var(--ss-c-group-track);
}
html[data-ui="new"] .sky-sidebar .sky-nav-item { min-height: var(--ss-c-nav-h); }
html[data-ui="new"] .sky-sidebar .sky-nav-item.active {
  background: var(--ss-c-nav-active-bg) !important;
  box-shadow: var(--ss-c-nav-active-ring);
}

/* ===== _src/chrome.css ===== */
/* ==========================================================================
   SkySuite · NEW-UI CHROME — the candidates' top bar, sidebar tree and icons
   --------------------------------------------------------------------------
   Themes fidelity phase 2 (admin, 2026-10-15). Built last into the four new
   packs only (tools/build-themes.py), so Classic and Linear never load a byte
   of it: John's dual-UI rule, Classic stays pixel-identical.

   The markup is the shell's own (#sbn, #skyTabBar, .sky-sidebar, the phone tab
   bar) plus what the NEW-UI CHROME block of v1/sky-sidebar.js adds in the new
   UI only (.ss-new-only elements and a Lucide <svg class="ss-li"> inside each
   chrome <i class="bi">). Candidates: ui-audit-20261012/directions/{A,B,C,D}.
     A Clean Pro        white bar, sunken 30px search, quiet segmented switch
     B Field Ops        white bar on slate, 2px ink rules, ink-filled switch,
                        mono caps labels, heavier icons
     C Warm Modern      sand bar, rounded search, raised white segment
     D Clean Pro Field  A (its field context re-values the tokens)
   ========================================================================== */

html[data-ui="new"] {
  /* Phase 3: the bar is the candidate's height (A/D 48px, B 64px, C 56px; the pack's
     --ss-topbar-h). sky-theme.css reads --sky-topbar-h for #sbn, the Office/Field
     switch layer, the sticky rail and its height, and the phone drawer; Classic never
     sets it, so its fallback (42px) keeps the old geometry byte for byte. */
  --sky-topbar-h: var(--ss-topbar-h, 48px);
  --ss-ch-top-bg: var(--ss-bg);
  --ss-ch-top-line: var(--ss-line);
  --ss-ch-stroke: 1.75;
  --ss-ch-icon: 16px;          /* sidebar row icons */
  --ss-ch-top-icon: 18px;      /* top-bar icon buttons */
  --ss-ch-btn: 32px;           /* top-bar icon button box */
  --ss-ch-search-h: 30px;
  --ss-ch-search-w: 340px;
  --ss-ch-search-bg: var(--ss-bg-1);
  --ss-ch-search-r: var(--ss-r-sm);
  /* Office / Field are two full, labelled tabs (admin 2026-10-23: "field and office are
     burried"): Classic's prominence in the new look. The active tab is the pack's own
     accent wash and accent text, no new colour. */
  --ss-ch-seg-h: 34px;
  --ss-ch-seg-bg: var(--ss-bg-2);
  --ss-ch-seg-on-bg: var(--ss-accent-soft);
  --ss-ch-seg-on-ink: var(--ss-accent-text);
  --ss-ch-seg-on-ring: 0 0 0 1px var(--ss-line-2), var(--ss-shadow-sm);
  --ss-ch-seg-font: var(--ss-font-sans);
  --ss-ch-seg-case: none;
  --ss-ch-seg-track: 0;
  --ss-ch-avatar: 26px;
  --ss-ch-tree-line: var(--ss-line);
  --ss-ch-brand: 22px;
  --ss-ch-brand-fs: inherit;
}
html[data-ui="new"][data-mode="dark"] {
  --ss-ch-seg-on-bg: var(--ss-accent-soft);
  --ss-ch-seg-on-ring: 0 0 0 1px var(--ss-line-2);
}
html[data-ui="new"][data-theme="field-ops"] {
  --ss-ch-top-bg: var(--ss-bg-1);
  --ss-ch-top-line: var(--ss-ink);
  --ss-ch-stroke: 2.25;
  --ss-ch-icon: 18px;
  --ss-ch-top-icon: 20px;
  --ss-ch-search-bg: var(--ss-bg-1);
  --ss-ch-seg-bg: var(--ss-bg-1);
  --ss-ch-seg-on-bg: var(--ss-ink);
  --ss-ch-seg-on-ink: var(--ss-bg-1);
  --ss-ch-seg-on-ring: none;
  --ss-ch-seg-font: var(--ss-font-mono);
  --ss-ch-seg-case: uppercase;
  --ss-ch-seg-track: .04em;
  --ss-ch-avatar: 40px;
  --ss-ch-tree-line: var(--ss-line-2);
  /* 64px bar (candidate B): 46px search, 40px switch buttons, 44px icon buttons, 40px avatar */
  --ss-ch-btn: 44px;
  --ss-ch-search-h: 46px;
  --ss-ch-search-w: 440px;
  --ss-ch-seg-h: 40px;
  --ss-ch-top-icon: 21px;
  --ss-ch-brand: 32px;
  --ss-ch-brand-fs: var(--ss-fs-20);
}
html[data-ui="new"][data-theme="field-ops"][data-mode="dark"] { --ss-ch-top-line: var(--ss-line-2); }
html[data-ui="new"][data-theme="warm-modern"] {
  --ss-ch-search-r: var(--ss-r);
  --ss-ch-search-bg: var(--ss-raised);
  --ss-ch-search-h: 34px;
  --ss-ch-search-w: 380px;
  --ss-ch-seg-h: 34px;
  --ss-ch-seg-bg: var(--ss-bg-2);
  --ss-ch-btn: 34px;
  --ss-ch-avatar: 30px;
  --ss-ch-brand: 28px;
  --ss-ch-brand-fs: var(--ss-fs-16);
}
html[data-ui="new"][data-theme="warm-modern"][data-mode="dark"] { --ss-ch-search-bg: var(--ss-bg-2); }

/* ---- chart palette (phase 3): read by v1/sky-chart-palette.js for every Chart.js chart ----
   Series 1-6 in order of first use; green/red/amber series keep their meaning through
   --ss-success/--ss-danger/--ss-warning. Candidates: A ink + accent mono lines, B thick
   high-contrast series, C berry + sky pastels. */
html[data-ui="new"] {
  --ss-chart-1: var(--ss-ink);
  --ss-chart-2: var(--ss-accent);
  --ss-chart-3: var(--ss-action);
  --ss-chart-4: var(--ss-info);
  --ss-chart-5: var(--ss-ink-3);
  --ss-chart-6: var(--ss-accent-line);
  --ss-chart-grid: var(--ss-line);
  --ss-chart-tick: var(--ss-ink-3);
  --ss-chart-tip-bg: var(--ss-ink);
  --ss-chart-tip-ink: var(--ss-bg);
  --ss-chart-line-w: 1.75;
  --ss-chart-point: 0;
  --ss-chart-bar-r: 4;
}
html[data-ui="new"][data-theme="field-ops"] {
  --ss-chart-1: var(--ss-action);
  --ss-chart-2: var(--ss-ink);
  --ss-chart-3: var(--ss-info);
  --ss-chart-4: var(--ss-accent);
  --ss-chart-5: var(--ss-ink-3);
  --ss-chart-6: var(--ss-action-line);
  --ss-chart-grid: var(--ss-line-2);
  --ss-chart-tick: var(--ss-ink-2);
  --ss-chart-line-w: 3;
  --ss-chart-point: 3;
  --ss-chart-bar-r: 2;
}
html[data-ui="new"][data-theme="warm-modern"] {
  --ss-chart-1: var(--ss-accent);
  --ss-chart-2: var(--ss-info);
  --ss-chart-3: var(--ss-accent-line);
  --ss-chart-4: var(--ss-action);
  --ss-chart-5: var(--ss-ink-3);
  --ss-chart-6: var(--ss-ink);
  --ss-chart-line-w: 2;
  --ss-chart-bar-r: 6;
}

/* ---- Lucide icons: the <svg> sits inside the <i>, whose glyph is dropped ---- */
html[data-ui="new"] .ss-li-host::before { content: none !important; display: none !important; }
html[data-ui="new"] svg.ss-li {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  stroke-width: var(--ss-ch-stroke);
  overflow: visible;
  flex: none;
}
html[data-ui="new"] svg.ss-li.ss-li-fill { fill: currentColor; }

/* ---- top bar ---- */
html[data-ui="new"] #sbn .sbn-main {
  background: var(--ss-ch-top-bg);
  border-bottom-color: var(--ss-ch-top-line);
}
html[data-ui="new"][data-theme="field-ops"] #sbn .sbn-main { border-bottom-width: 2px; }
/* the SkySuite mark (v1/favicon.svg, the candidates' logo) instead of the cloud glyph */
html[data-ui="new"] #sbn .sbn-brand-icon {
  display: inline-block;
  width: var(--ss-ch-brand);
  height: var(--ss-ch-brand);
  font-size: 0;
  background: url("/_shared/v1/favicon.svg") center / contain no-repeat;
  border-radius: 5px;
  flex: none;
}
html[data-ui="new"] #sbn .sbn-brand-icon > svg.ss-li { display: none; }
html[data-ui="new"] #sbn .sbn-brand { gap: 9px; }
html[data-ui="new"] #sbn .sbn-brand-text { font-size: var(--ss-ch-brand-fs); }

/* search box (#ssTopSearch opens the Cmd+K overlay) */
html[data-ui="new"] #ssTopSearch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 1 var(--ss-ch-search-w);
  min-width: 0;
  height: var(--ss-ch-search-h);
  padding: 0 6px 0 10px;
  margin-right: 12px;
  border: var(--ss-bw) solid var(--ss-line-2);
  border-radius: var(--ss-ch-search-r);
  background: var(--ss-ch-search-bg);
  color: var(--ss-ink-3);
  font: var(--ss-fw-regular, 400) var(--ss-fs-13)/1 var(--ss-font-sans);
  text-align: left;
  cursor: text;
  transition: border-color .15s ease, box-shadow .15s ease;
}
html[data-ui="new"] #ssTopSearch:hover { border-color: var(--ss-ink-3); }
html[data-ui="new"] #ssTopSearch:focus-visible { outline: none; border-color: var(--ss-accent); box-shadow: var(--ss-focus-ring); }
html[data-ui="new"] #ssTopSearch > i { font-size: 15px; color: var(--ss-ink-3); flex: none; }
html[data-ui="new"] #ssTopSearch .ss-top-search-text { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
html[data-ui="new"] .ss-kbd {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 5px;
  flex: none;
  font: 500 var(--ss-fs-11)/1 var(--ss-font-sans);
  color: var(--ss-ink-3);
  background: var(--ss-bg);
  border: 1px solid var(--ss-line-2);
  border-bottom-width: 2px;
  border-radius: 4px;
}
html[data-ui="new"][data-theme="field-ops"] #ssTopSearch { border-width: 2px; border-color: var(--ss-ink-3); }
html[data-ui="new"][data-theme="field-ops"] .ss-kbd { font-family: var(--ss-font-mono); }

/* Office / Field switch: the candidates' segmented control */
html[data-ui="new"] #skyTabBar {
  top: calc((var(--sky-topbar-h) - var(--ss-ch-seg-h) - 6px) / 2);
  height: auto;
  padding: 2px;
  gap: 2px;
  background: var(--ss-ch-seg-bg);
  border: var(--ss-bw) solid var(--ss-line);
  border-radius: var(--ss-r-sm);
}
html[data-ui="new"][data-theme="field-ops"] #skyTabBar { border: 2px solid var(--ss-ink); padding: 0; gap: 0; border-radius: var(--ss-r-sm); overflow: hidden; }
html[data-ui="new"] #skyTabBar .sky-tab {
  height: var(--ss-ch-seg-h);
  padding: 0 16px;
  gap: 8px;
  border-radius: calc(var(--ss-r-sm) - 2px);
  background: transparent;
  color: var(--ss-ink-2);
  font-family: var(--ss-ch-seg-font);
  font-size: var(--ss-fs-14);
  font-weight: var(--ss-fw-semibold);
  text-transform: var(--ss-ch-seg-case);
  letter-spacing: var(--ss-ch-seg-track);
}
html[data-ui="new"][data-theme="field-ops"] #skyTabBar .sky-tab { border-radius: 0; padding: 0 14px; font-weight: 600; color: var(--ss-ink); }
html[data-ui="new"] #skyTabBar .sky-tab i { font-size: 16px; }
html[data-ui="new"] #skyTabBar .sky-tab:hover { background: transparent; color: var(--ss-ink); }
html[data-ui="new"] #skyTabBar .sky-tab--active,
html[data-ui="new"] #skyTabBar .sky-tab--active:hover {
  background: var(--ss-ch-seg-on-bg);
  box-shadow: var(--ss-ch-seg-on-ring);
  font-weight: var(--ss-fw-semibold);
}
html[data-ui="new"] #skyTabBar :is(.sky-tab--active, .sky-tab--active span, .sky-tab--active i) { color: var(--ss-ch-seg-on-ink) !important; }
html[data-ui="new"] #skyTabBar .sky-tab--active::after { content: none !important; display: none !important; }

/* right-hand icon buttons: chat, the bell, stealth, calendar */
html[data-ui="new"] #sbn :is(#skyChatBtn, #ssNewsBell, #skyAdminBellBtn, #skyStealthBtn, #skyCalendarBtn) {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: var(--ss-ch-btn);
  min-width: var(--ss-ch-btn);
  height: var(--ss-ch-btn);
  padding: 0 !important;
  border-radius: var(--ss-r-sm) !important;
  color: var(--ss-ink-2) !important;
  font-size: var(--ss-ch-top-icon) !important;
  background: transparent;
  border: 0;
  text-decoration: none;
}
html[data-ui="new"] #sbn #skyStealthBtn[style*="display: none"],
html[data-ui="new"] #sbn #skyStealthBtn[style*="display:none"],
html[data-ui="new"] #sbn #skyCalendarBtn[style*="display: none"] { display: none !important; }
html[data-ui="new"] #sbn :is(#skyChatBtn, #ssNewsBell, #skyAdminBellBtn, #skyStealthBtn, #skyCalendarBtn):hover { background: var(--ss-bg-2); color: var(--ss-ink) !important; }
html[data-ui="new"] #sbn #skyChatUnread,
html[data-ui="new"] #sbn #skyAdminBellBtn .sky-admin-count {
  top: 1px !important;
  right: 0 !important;
  box-shadow: 0 0 0 2px var(--ss-ch-top-bg);
}
html[data-ui="new"] #sbn #ssNewsBell { margin-left: 2px; }

/* avatar button + menu header */
html[data-ui="new"] .ss-avatar {
  display: inline-grid;
  place-items: center;
  width: var(--ss-ch-avatar);
  height: var(--ss-ch-avatar);
  flex: none;
  border-radius: 50%;
  font: 600 var(--ss-fs-11)/1 var(--ss-font-sans);
  letter-spacing: 0;
  color: #fff;
  background: linear-gradient(135deg, #3aa2f0, #b0136d);
}
html[data-ui="new"][data-theme="field-ops"] .ss-avatar { background: var(--ss-ink); color: var(--ss-bg-1); }
html[data-ui="new"][data-theme="warm-modern"] .ss-avatar { background: var(--ss-accent-soft); color: var(--ss-accent-text); box-shadow: 0 0 0 1px var(--ss-line-2) inset; }
html[data-ui="new"] .ss-avatar-lg { width: 34px; height: 34px; font-size: var(--ss-fs-12); }
html[data-ui="new"] #skyUserBtn > button {
  gap: 4px !important;
  padding: 3px 6px 3px 3px !important;
  margin-left: 4px;
  border: 1px solid transparent !important;
  border-radius: var(--ss-r-pill) !important;
  color: var(--ss-ink-3) !important;
}
html[data-ui="new"] #skyUserBtn > button:hover { background: var(--ss-bg-2) !important; }
html[data-ui="new"] #skyUserBtn > button > :is(i.bi, .sky-user-name-text) { display: none !important; }
html[data-ui="new"] #skyUserBtn .sky-user-caret { opacity: .7 !important; font-size: .6rem !important; }
html[data-ui="new"] #skyUserMenu { min-width: 260px !important; padding: 6px 0 !important; }
html[data-ui="new"] #skyUserMenu > #ssUserMenuHead {   /* not a divider: sky-theme.css paints every #skyUserBtn > div > div */
  background: transparent !important;
  height: auto;
}
html[data-ui="new"] #ssUserMenuHead {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--ss-line);
}
html[data-ui="new"] #ssUserMenuHead .ss-menu-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
html[data-ui="new"] #ssUserMenuHead b { font-size: var(--ss-fs-13); font-weight: var(--ss-fw-semibold); color: var(--ss-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-ui="new"] #ssUserMenuHead .ss-menu-role { font-size: var(--ss-fs-12); color: var(--ss-ink-3); }
html[data-ui="new"] #ssUserMenuHead .ss-menu-role:empty { display: none; }
html[data-ui="new"] #skyUserMenu > a { height: 32px; padding-top: 0 !important; padding-bottom: 0 !important; gap: 10px !important; }
html[data-ui="new"] #skyUserMenu > a:not(:last-child) { color: var(--ss-ink-2) !important; }
html[data-ui="new"] #skyUserMenu > a:not(:last-child):hover { color: var(--ss-ink) !important; }
html[data-ui="new"] #skyUserMenu > a:last-child > i.bi { color: inherit; }
html[data-ui="new"] #skyUserMenu > a:not(:last-child) > i.bi { color: var(--ss-ink-3); }
html[data-ui="new"] #skyUserMenu > a > i.bi { font-size: 16px; }

/* ---- sidebar: the candidates' tree ---- */
html[data-ui="new"] .sky-sidebar .sky-nav-item i.bi,
html[data-ui="new"] .sky-sidebar .sky-nav-section-title > i.bi:not(.chevron) {
  font-size: var(--ss-ch-icon) !important;
  width: var(--ss-ch-icon);
  margin-right: 0 !important;
  color: var(--ss-ink-3);
}
html[data-ui="new"] .sky-sidebar .sky-nav-item:hover i.bi { color: var(--ss-ink-2); }
html[data-ui="new"] .sky-sidebar .sky-nav-item.active i.bi { color: var(--ss-accent-text) !important; }
html[data-ui="new"] .sky-sidebar .sky-nav-item { gap: 9px; }
/* the row IS the pack's row height (--ss-c-nav-h); on phones the drawer keeps its 44px tap rows */
@media (min-width: 769px) {
  html[data-ui="new"] .sky-sidebar .sky-nav-item { padding-top: 0; padding-bottom: 0; }
}
/* section rows (Community, CRM, Money ...): icon, label, chevron at the end */
html[data-ui="new"] .sky-sidebar .sky-nav-section-title { gap: 9px; min-height: var(--ss-c-nav-h); }
html[data-ui="new"] .sky-sidebar .sky-nav-section-title > i.chevron,
html[data-ui="new"] .sky-sidebar .sky-sidebar-group-label > i.group-chevron { font-size: 14px !important; color: var(--ss-ink-3) !important; opacity: .9; }
/* Field / Office sub-groups: a small label, then the rows on an indent guide */
html[data-ui="new"] .sky-sidebar .sky-nav-subsection > .sky-nav-items {
  margin-left: 18px;
  padding-left: 2px;
  border-left: 1px solid var(--ss-ch-tree-line);
}
html[data-ui="new"] .sky-sidebar .sky-nav-subsection > .sky-nav-items > .sky-nav-item { margin-left: 6px; }
html[data-ui="new"] .sky-sidebar .sky-nav-sub-title { min-height: 26px; }
/* counts (chat unread, admin queues): a quiet number at the row's end */
html[data-ui="new"] .sky-sidebar .ss-nav-count,
html[data-ui="new"] .sky-sidebar .sky-nav-item .sky-admin-count {
  margin-left: auto;
  min-width: 0;
  height: auto;
  padding: 0;
  background: transparent !important;
  color: var(--ss-ink-3) !important;
  font: 500 var(--ss-fs-11)/1 var(--ss-font-sans);
  font-variant-numeric: tabular-nums;
  border-radius: 0;
}
html[data-ui="new"][data-theme="field-ops"] .sky-sidebar :is(.ss-nav-count, .sky-nav-item .sky-admin-count) {
  min-width: 22px;
  padding: 3px 6px;
  border-radius: 4px;
  background: var(--ss-bg-2) !important;
  color: var(--ss-ink) !important;
  font-weight: 700;
  text-align: center;
}
html[data-ui="new"] .sky-sidebar-collapsed .ss-nav-count { display: none !important; }

/* ---- organisation footer (phase 3): the candidates' sidebar foot ----
   A and D draw it (org mark, org name, a muted second line); B and C have none, so the
   element (#ssOrgFoot, sky-sidebar.js NEW-UI PHASE 3) stays hidden in those packs. */
html[data-ui="new"] #ssOrgFoot { display: none; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) #ssOrgFoot {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  min-width: 0;
  margin: 0 10px;
  padding: 10px 2px;
  border-top: 1px solid var(--ss-line);
  color: var(--ss-ink-2);
  font-size: var(--ss-fs-12);
  line-height: 1.25;
  text-decoration: none;
}
html[data-ui="new"] #ssOrgFoot:hover .ss-org-who b { text-decoration: underline; text-underline-offset: 2px; }
html[data-ui="new"] #ssOrgFoot:focus-visible { outline: none; box-shadow: var(--ss-focus-ring); border-radius: var(--ss-r-sm); }
html[data-ui="new"] #ssOrgFoot .ss-org-mark {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  overflow: hidden;
  border-radius: var(--ss-r-sm);
  background: var(--ss-bg-3);
  color: var(--ss-ink-2);
  font: 600 var(--ss-fs-11)/1 var(--ss-font-sans);
  letter-spacing: 0;
}
html[data-ui="new"] #ssOrgFoot .ss-org-mark img { width: 100%; height: 100%; object-fit: cover; }
html[data-ui="new"] #ssOrgFoot .ss-org-who { display: flex; flex-direction: column; min-width: 0; }
html[data-ui="new"] #ssOrgFoot .ss-org-who b { font-weight: var(--ss-fw-medium); color: var(--ss-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-ui="new"] #ssOrgFoot .ss-org-sub { color: var(--ss-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-ui="new"] #ssOrgFoot .ss-org-sub:empty { display: none; }
html[data-ui="new"] .sky-sidebar-collapsed #ssOrgFoot { justify-content: center; margin: 0 6px; padding: 8px 0; }
html[data-ui="new"] .sky-sidebar-collapsed #ssOrgFoot .ss-org-who { display: none; }

/* ---- app pages (phase 3): Lucide inside every Bootstrap icon, not just the chrome ----
   The svg is 1em square on the icon's own baseline, so an icon sized or coloured by app
   CSS (font-size, color) keeps its size and colour. */
html[data-ui="new"] .ss-li-host { font-style: normal; }

/* ---- phone bottom tab bar: Lucide at the bar's size ---- */
html[data-ui="new"] #skyMobileTabBar i.bi { font-size: 20px; }
html[data-ui="new"][data-theme="field-ops"] #skyMobileTabBar i.bi { font-size: 22px; }

/* ---- phones and small tablets ---- */
@media (max-width: 1099px) {
  html[data-ui="new"] { --ss-ch-search-w: 220px; }
}
@media (max-width: 900px) {
  html[data-ui="new"] #ssTopSearch,
  html[data-ui="new"][data-theme="field-ops"] #ssTopSearch { flex: none; width: var(--ss-ch-btn); padding: 0; justify-content: center; border-color: transparent; background: transparent; }
  html[data-ui="new"] #ssTopSearch :is(.ss-top-search-text, .ss-kbd) { display: none; }
  html[data-ui="new"] #ssTopSearch > i { font-size: var(--ss-ch-top-icon); color: var(--ss-ink-2); }
}
/* Phones: the bar is already full (brand, menu, chat, credits, avatar — see the online
   pill's note in sky-sidebar.js). Search stays as an icon; What's new lives in the
   Me sheet's world instead of the bar, so the avatar never wraps or clips. */
@media (max-width: 768px) {
  /* the candidates' phone header: 52px (Field Ops 56px), 44px tap targets */
  html[data-ui="new"] { --sky-topbar-h: 52px; }
  html[data-ui="new"][data-theme="field-ops"] { --sky-topbar-h: 56px; --ss-ch-btn: 40px; --ss-ch-avatar: 34px; --ss-ch-brand: 28px; --ss-ch-brand-fs: var(--ss-fs-18); }
  html[data-ui="new"] #ssTopSearch { margin-right: 0; width: 36px; height: 40px; }
  html[data-ui="new"] #sbn #ssNewsBell { display: none !important; }
}
/* Narrow phones: the mark alone (the candidates' phone screens carry no wordmark). */
@media (max-width: 480px) {
  html[data-ui="new"] #sbn .sbn-brand-text { display: none; }
}

/* ---- phase 4: the top bar's news pill (B, C), presence pill restyle, the New button's C key ---- */
html[data-ui="new"] .ss-news-pill { display: none; align-items: center; gap: 2px; height: 30px; padding: 0 4px 0 4px; margin-right: 8px; border: var(--ss-bw) solid var(--ss-line); border-radius: var(--ss-r-pill); background: var(--ss-surface); font-size: var(--ss-fs-12); white-space: nowrap; max-width: 380px; flex: 0 1 auto; min-width: 0; }
html[data-ui="new"]:is([data-theme="field-ops"], [data-theme="warm-modern"]) .ss-news-pill { display: inline-flex; }
html[data-ui="new"] .ss-news-pill > a { display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: var(--ss-ink); text-decoration: none; }
html[data-ui="new"] .ss-news-tag { padding: 2px 7px; border-radius: var(--ss-r-pill); background: var(--ss-accent-soft); color: var(--ss-accent-text); font-weight: var(--ss-fw-semibold); flex: none; }
html[data-ui="new"] .ss-news-text { overflow: hidden; text-overflow: ellipsis; color: var(--ss-ink-2); }
html[data-ui="new"] .ss-news-x { border: 0; background: none; padding: 0 4px; color: var(--ss-ink-3); line-height: 1; display: inline-flex; align-items: center; }
html[data-ui="new"] .ss-news-x:hover { color: var(--ss-ink); }
html[data-ui="new"][data-theme="field-ops"] .ss-news-pill { height: 36px; border-width: var(--ss-bw-strong); border-color: var(--ss-info-fill); background: var(--ss-info-soft); font-size: var(--ss-fs-14); }
html[data-ui="new"][data-theme="field-ops"] .ss-news-tag { background: none; color: var(--ss-info); font-family: var(--ss-font-mono); text-transform: uppercase; padding: 0 2px 0 8px; }
html[data-ui="new"][data-theme="field-ops"] .ss-news-text { color: var(--ss-info); font-weight: var(--ss-fw-medium); }
html[data-ui="new"][data-theme="warm-modern"] .ss-news-tag { background: var(--ss-info-soft); color: var(--ss-info); }
@media (max-width: 1100px) { html[data-ui="new"] .ss-news-pill { display: none !important; } }
/* "1 online": B draws it as an outlined pill */
html[data-ui="new"] #skyOnlineBtn { font-size: var(--ss-fs-12) !important; }
html[data-ui="new"][data-theme="field-ops"] #skyOnlineBtn { height: 36px; padding: 0 14px !important; border: var(--ss-bw-strong) solid var(--ss-line-2); border-radius: var(--ss-r-pill) !important; font-size: var(--ss-fs-14) !important; color: var(--ss-ink) !important; margin-right: 6px; }
html[data-ui="new"][data-theme="field-ops"] #skyOnlineBtn .sky-online-dot { width: 9px !important; height: 9px !important; }
/* the New button's C hint (A/D draw it) */
html[data-ui="new"] .sky-newdoor-btn .ss-kbd { display: none; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .sky-newdoor-btn .ss-kbd { display: inline-flex; margin-left: auto; min-width: 18px; height: 18px; padding: 0 4px; align-items: center; justify-content: center; border: var(--ss-bw) solid var(--ss-line-2); border-radius: var(--ss-r-xs); background: var(--ss-surface); color: var(--ss-ink-3); font: var(--ss-fw-medium) var(--ss-fs-11)/1 var(--ss-font-mono); box-shadow: none; }
html[data-ui="new"] .sky-sidebar-collapsed .sky-newdoor-btn .ss-kbd { display: none !important; }

/* ===== _src/pages.css ===== */
/* ==========================================================================
   SkySuite · NEW-UI PAGE LAYOUTS — the candidates' page layouts, where CSS can reach
   --------------------------------------------------------------------------
   Themes fidelity phase 3, item 5 (admin, 2026-10-15). Built into the four new packs
   only (tools/build-themes.py), after chrome.css; Classic and Linear never load it.
   Every rule starts with html[data-ui="new"] and only restyles markup the apps already
   render — it never hides content and never depends on markup that is not there.
   The gaps that need template changes are the table in docs/THEMES-FIDELITY.md
   ("Phase 3: page layouts").

   Candidates: ui-audit-20261012/directions/{A,B,C,D}/screens-2x/1-home-*.png
   ========================================================================== */

/* ---- core · Office home (/office/home, app/templates/dashboard/office_home.html) ----
   Live: title, date, Buy credits banner, three stat cards, "Start something" buttons,
   "Jump back in" rows — each its own bordered box on a 1060px column.
   Candidates: a wider column; the stats as one strip (A/D hairline dividers, B coloured
   caps, C soft separate cards); "Start something" and "Jump back in" as cards with a
   header row and divided rows (A/D list rows, B big buttons under a mono eyebrow, C tiles). */
html[data-ui="new"] .oh-wrap {
  max-width: 1180px;
  padding: 24px 32px 64px;
  display: flex;
  flex-direction: column;
}
html[data-ui="new"] .oh-hi { font-size: var(--ss-c-h1-fs); font-weight: var(--ss-fw-semibold); letter-spacing: var(--ss-track-heading, -.01em); }
html[data-ui="new"] .oh-date { font-size: var(--ss-fs-13); color: var(--ss-ink-3); margin: 4px 0 20px; }
/* A/D: the date is the eyebrow above the greeting */
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .oh-date { order: -1; margin: 0 0 6px; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .oh-hi { margin-bottom: 20px; }

/* the banners (Buy credits, the guide offer): the pack's card */
html[data-ui="new"] .oh-credits {
  border-radius: var(--ss-c-card-r);
  border-color: var(--ss-c-card-line);
  border-left-color: var(--ss-accent);
  background: var(--ss-surface);
  box-shadow: var(--ss-c-card-shadow);
  margin-bottom: 16px;
}
html[data-ui="new"] .oh-credits-ic { border-radius: var(--ss-r-sm); }

/* stat cards -> one strip */
html[data-ui="new"] .oh-grid {
  gap: 0;
  margin: 8px 0 24px;
  border: var(--ss-bw) solid var(--ss-c-card-line);
  border-radius: var(--ss-c-card-r);
  background: var(--ss-surface);
  box-shadow: var(--ss-c-card-shadow);
  overflow: hidden;
}
html[data-ui="new"] .oh-grid > .oh-card {
  border: 0;
  border-left: var(--ss-bw) solid var(--ss-c-card-line);
  border-radius: 0;
  background: transparent;
  padding: 16px 20px;
  gap: 4px;
}
html[data-ui="new"] .oh-grid > .oh-card:first-child { border-left: 0; }
html[data-ui="new"] a.oh-card:hover { transform: none; background: var(--ss-bg-1); }
html[data-ui="new"] .oh-card .lab {
  font: var(--ss-fw-medium) var(--ss-fs-13)/1.3 var(--ss-font-sans);
  text-transform: none;
  letter-spacing: 0;
  color: var(--ss-ink-2);
  gap: 8px;
}
html[data-ui="new"] .oh-card .lab i { color: var(--ss-ink-3); font-size: 15px; }
html[data-ui="new"] .oh-card .num { font-size: 28px; font-weight: var(--ss-fw-semibold); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
html[data-ui="new"] .oh-card .num.dim { font-size: var(--ss-fs-18); font-weight: var(--ss-fw-semibold); color: var(--ss-ink); }
html[data-ui="new"] .oh-card .sub { font-size: var(--ss-fs-12); color: var(--ss-ink-3); }

/* section headings + the block under them -> one card: header row, divided rows */
html[data-ui="new"] .oh-sec {
  margin: 0;
  padding: 14px 20px;
  font: var(--ss-fw-semibold) var(--ss-fs-14)/1.3 var(--ss-font-sans);
  text-transform: none;
  letter-spacing: 0;
  color: var(--ss-ink);
  background: var(--ss-c-head-bg, transparent);
  border: var(--ss-bw) solid var(--ss-c-card-line);
  border-bottom-color: var(--ss-c-head-line, var(--ss-line));
  border-radius: var(--ss-c-card-r) var(--ss-c-card-r) 0 0;
}
html[data-ui="new"] .oh-sec:not(:has(+ *)) { border-radius: var(--ss-c-card-r); }
html[data-ui="new"] .oh-sec .bar { visibility: hidden; }
html[data-ui="new"] :is(.oh-actions, .oh-act-list) {
  margin: 0 0 24px;
  background: var(--ss-surface);
  border: var(--ss-bw) solid var(--ss-c-card-line);
  border-top: 0;
  border-radius: 0 0 var(--ss-c-card-r) var(--ss-c-card-r);
  box-shadow: var(--ss-c-card-shadow);
  overflow: hidden;
}
html[data-ui="new"] .oh-sec { background-color: var(--ss-surface); }

/* "Jump back in": divided rows */
html[data-ui="new"] .oh-act-list { gap: 0; }
html[data-ui="new"] .oh-act {
  min-height: var(--ss-c-td-h, var(--ss-row-h));
  padding: 8px 20px;
  border: 0;
  border-top: var(--ss-bw) solid var(--ss-line);
  border-radius: 0;
  background: transparent;
  font-size: var(--ss-c-td-fs, var(--ss-fs-13));
}
html[data-ui="new"] .oh-act:first-child { border-top: 0; }
html[data-ui="new"] .oh-act:hover { background: var(--ss-bg-1); }
html[data-ui="new"] .oh-act > span:not(.when) { font-weight: var(--ss-fw-medium); color: var(--ss-ink); }
/* the status: the pack's chip (outlined pill + dot), keeping the status colour */
html[data-ui="new"] .oh-act .when {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--ss-c-badge-h, 22px);
  padding: 0 8px;
  border: 1px solid var(--ss-line-2);
  border-radius: var(--ss-c-badge-r, var(--ss-r-pill));
  font: var(--ss-c-badge-fw, 500) var(--ss-c-badge-fs, 12px)/1 var(--ss-c-badge-font, var(--ss-font-sans));
  letter-spacing: var(--ss-c-badge-track, 0);
}
html[data-ui="new"] .oh-act .when::before { content: ""; width: var(--ss-c-badge-dot, 6px); height: var(--ss-c-badge-dot, 6px); border-radius: 50%; background: currentColor; flex: none; }
html[data-ui="new"] .oh-empty { padding: 14px 20px; }

/* "Start something": A/D list rows (icon, label) */
html[data-ui="new"] .oh-actions { flex-direction: column; flex-wrap: nowrap; gap: 0; }
html[data-ui="new"] .oh-actions > .oh-btn,
html[data-ui="new"] .oh-actions > .oh-btn.pri {
  min-height: 44px;
  padding: 8px 20px;
  gap: 12px;
  border: 0;
  border-top: var(--ss-bw) solid var(--ss-line);
  border-radius: 0;
  background: transparent;
  color: var(--ss-ink);
  font: var(--ss-fw-medium) var(--ss-fs-13)/1.3 var(--ss-font-sans);
  filter: none;
}
html[data-ui="new"] .oh-actions > .oh-btn:first-child { border-top: 0; }
html[data-ui="new"] .oh-actions > .oh-btn:hover { background: var(--ss-bg-1); }
html[data-ui="new"] .oh-actions > .oh-btn > i {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--ss-line);
  border-radius: var(--ss-r-sm);
  color: var(--ss-ink-2);
  font-size: 15px;
}
html[data-ui="new"] .oh-actions > .oh-btn.pri > i { color: var(--ss-accent-text); border-color: var(--ss-accent-line); background: var(--ss-accent-soft); }

/* B Field Ops: heavy rules, 4px colour caps on the strip, mono caps headings, big buttons */
html[data-ui="new"][data-theme="field-ops"] .oh-grid { border-width: 2px; border-color: var(--ss-line-2); }
html[data-ui="new"][data-theme="field-ops"] .oh-grid > .oh-card { border-left-width: 2px; border-top: 4px solid var(--ss-ink); }
html[data-ui="new"][data-theme="field-ops"] .oh-grid > .oh-card:nth-child(3n+2) { border-top-color: var(--ss-action); }
html[data-ui="new"][data-theme="field-ops"] .oh-grid > .oh-card:nth-child(3n) { border-top-color: var(--ss-success); }
html[data-ui="new"][data-theme="field-ops"] .oh-card .lab,
html[data-ui="new"][data-theme="field-ops"] .oh-act .when {
  font-family: var(--ss-font-mono);
  font-size: var(--ss-fs-12);
  text-transform: uppercase;
  letter-spacing: var(--ss-track-caps, .06em);
}
html[data-ui="new"][data-theme="field-ops"] .oh-card .num:not(.dim) { font-size: 40px; font-weight: 800; }
html[data-ui="new"][data-theme="field-ops"] .oh-card .num.dim { font-size: var(--ss-fs-20); font-weight: 700; }
html[data-ui="new"][data-theme="field-ops"] .oh-act .when { border-color: currentColor; }
html[data-ui="new"][data-theme="field-ops"] .oh-hi { font-weight: 800; }
html[data-ui="new"][data-theme="field-ops"] .oh-sec { font-size: var(--ss-fs-16); border-width: 2px; border-bottom-width: 2px; }
html[data-ui="new"][data-theme="field-ops"] :is(.oh-actions, .oh-act-list) { border-width: 2px; }
html[data-ui="new"][data-theme="field-ops"] .oh-act { min-height: 52px; font-size: var(--ss-fs-16); }
/* B keeps "Start something" as big buttons, the primary one filled */
html[data-ui="new"][data-theme="field-ops"] .oh-actions {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px 20px;
}
html[data-ui="new"][data-theme="field-ops"] .oh-actions > .oh-btn,
html[data-ui="new"][data-theme="field-ops"] .oh-actions > .oh-btn.pri {
  min-height: var(--ss-c-btn-h, 48px);
  padding: 0 20px;
  gap: 10px;
  border: 2px solid var(--ss-ink);
  border-radius: var(--ss-r);
  font-size: var(--ss-fs-16);
  font-weight: var(--ss-fw-semibold);
}
html[data-ui="new"][data-theme="field-ops"] .oh-actions > .oh-btn > i { width: auto; height: auto; border: 0; background: none; color: inherit; font-size: 18px; }
html[data-ui="new"][data-theme="field-ops"] .oh-actions > .oh-btn.pri { background: var(--ss-action); border-color: var(--ss-action); color: var(--ss-on-action); }
html[data-ui="new"][data-theme="field-ops"] .oh-actions > .oh-btn.pri > i { color: inherit; }

/* C Warm Modern: separate soft cards with icon tiles; "Start something" as tiles */
html[data-ui="new"][data-theme="warm-modern"] .oh-grid { gap: 14px; border: 0; background: none; box-shadow: none; overflow: visible; }
html[data-ui="new"][data-theme="warm-modern"] .oh-grid > .oh-card,
html[data-ui="new"][data-theme="warm-modern"] .oh-grid > .oh-card:first-child {
  border: var(--ss-bw) solid var(--ss-c-card-line);
  border-radius: var(--ss-c-card-r);
  background: var(--ss-surface);
  box-shadow: var(--ss-c-card-shadow);
}
html[data-ui="new"][data-theme="warm-modern"] .oh-card .lab i,
html[data-ui="new"][data-theme="warm-modern"] .oh-actions > .oh-btn > i {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: var(--ss-r-sm);
  background: var(--ss-accent-soft);
  color: var(--ss-accent-text);
  font-size: 15px;
}
html[data-ui="new"][data-theme="warm-modern"] .oh-grid > .oh-card:nth-child(3n+2) .lab i { background: var(--ss-info-soft); color: var(--ss-info); }
html[data-ui="new"][data-theme="warm-modern"] .oh-grid > .oh-card:nth-child(3n) .lab i { background: var(--ss-success-soft); color: var(--ss-success); }
html[data-ui="new"][data-theme="warm-modern"] .oh-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  padding: 14px 16px 16px;
}
html[data-ui="new"][data-theme="warm-modern"] .oh-actions > .oh-btn,
html[data-ui="new"][data-theme="warm-modern"] .oh-actions > .oh-btn.pri {
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-height: 0;
  padding: 14px;
  border: var(--ss-bw) solid var(--ss-line);
  border-radius: var(--ss-r);
  font-size: var(--ss-fs-14);
  font-weight: var(--ss-fw-semibold);
}
html[data-ui="new"][data-theme="warm-modern"] .oh-actions > .oh-btn:first-child { border-top: var(--ss-bw) solid var(--ss-line); }

/* phones: the strip stacks; rows keep their dividers */
@media (max-width: 768px) {
  html[data-ui="new"] .oh-wrap { padding: 16px 16px 48px; }
  html[data-ui="new"] .oh-grid > .oh-card { border-left: 0; border-top: var(--ss-bw) solid var(--ss-c-card-line); }
  html[data-ui="new"] .oh-grid > .oh-card:first-child { border-top: 0; }
  html[data-ui="new"][data-theme="field-ops"] .oh-grid > .oh-card,
  html[data-ui="new"][data-theme="field-ops"] .oh-grid > .oh-card:first-child { border-top: 4px solid var(--ss-ink); }
  html[data-ui="new"][data-theme="field-ops"] .oh-grid > .oh-card:nth-child(3n+2) { border-top-color: var(--ss-action); }
  html[data-ui="new"][data-theme="field-ops"] .oh-grid > .oh-card:nth-child(3n) { border-top-color: var(--ss-success); }
}

/* ==========================================================================
   Phase 4 (2026-10-15): core · Office home, the candidates' layout.
   core office_home.html carries a second, new-UI-only block (.ohn) next to the Classic
   markup. The template hides it (.ohn{display:none}); these rules show it and hide the
   Classic children, but only when the template has the block (:has), so the shell and core
   can deploy in either order. Classic never loads this file.
   Candidates: directions/{A,B,C,D}/home.html (A/D two columns: attention + table | Today ·
   Field, Coming up, Start something. B: map card + outlook + Up next, then attention | table,
   Start something in the header. C: A's grid with soft cards, tiles for Start something).
   ========================================================================== */
html[data-ui="new"] .oh-wrap:has(> .ohn) > :not(.ohn, style, script) { display: none !important; }
html[data-ui="new"] .oh-wrap:has(> .ohn) { max-width: 1180px; padding: 8px 32px 64px; display: block; }
html[data-ui="new"] .oh-wrap > .ohn { display: block; }
html[data-ui="new"] .ohn [hidden] { display: none !important; }
html[data-ui="new"] .ohn a { text-decoration: none; }

/* header */
html[data-ui="new"] .ohn-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 20px; }
html[data-ui="new"] .ohn-eyebrow { font-size: var(--ss-fs-13); color: var(--ss-ink-3); margin-bottom: 4px; }
html[data-ui="new"] .ohn-hi { font-size: var(--ss-c-h1-fs); font-weight: var(--ss-fw-semibold); letter-spacing: var(--ss-track-heading, -.01em); line-height: 1.15; margin: 0; color: var(--ss-ink); }
html[data-ui="new"] .ohn-meta { display: none; align-items: center; gap: 0; margin-top: 4px; font-size: var(--ss-fs-13); color: var(--ss-ink-2); }
html[data-ui="new"] .ohn-meta > span:not(:empty) + span:not(:empty)::before { content: "·"; margin: 0 5px; }
html[data-ui="new"] .ohn-meta .ohn-org { font-weight: var(--ss-fw-semibold); color: var(--ss-ink); }
html[data-ui="new"] .ohn-meta > i { margin-right: 6px; color: var(--ss-ink-3); }
html[data-ui="new"] .ohn-news { display: inline-flex; align-items: center; gap: 10px; height: 30px; padding: 0 12px 0 4px; border: var(--ss-bw) solid var(--ss-line); border-radius: var(--ss-r-pill); background: var(--ss-surface); color: var(--ss-ink-2); font-size: var(--ss-fs-12); white-space: nowrap; }
html[data-ui="new"] .ohn-news-tag { padding: 3px 8px; border-radius: var(--ss-r-pill); background: var(--ss-accent-soft); color: var(--ss-accent-text); font-weight: var(--ss-fw-semibold); }
html[data-ui="new"] .ohn-news b { color: var(--ss-ink); font-weight: var(--ss-fw-medium); display: inline-flex; align-items: center; gap: 4px; }
/* "Start something" in the header (New project / New contact / New invoice): every theme shows it
   (admin 2026-10-18: it was Field Ops only). It keeps to the right when the guides pill pushes it
   onto a second line; the lower Start something card stays where a theme has it. */
html[data-ui="new"] .ohn-head { flex-wrap: wrap; }
html[data-ui="new"] .ohn-start-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin-left: auto; }
html[data-ui="new"] .ohn-start-lab { font: var(--ss-fw-medium) var(--ss-fs-11)/1 var(--ss-font-mono); text-transform: uppercase; letter-spacing: var(--ss-track-caps); color: var(--ss-ink-2); margin-right: 8px; }

/* stat strip */
html[data-ui="new"] .ohn-stats { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border: var(--ss-bw) solid var(--ss-c-card-line); border-radius: var(--ss-c-card-r); background: var(--ss-surface); box-shadow: var(--ss-c-card-shadow); overflow: hidden; margin-bottom: 16px; }
html[data-ui="new"] .ohn-stat { display: flex; flex-direction: column; gap: 6px; padding: 16px; min-width: 0; color: var(--ss-ink); border-left: var(--ss-bw) solid var(--ss-c-card-line); }
html[data-ui="new"] .ohn-stat:first-child { border-left: 0; }
html[data-ui="new"] .ohn-stat:hover { background: var(--ss-bg-1); }
html[data-ui="new"] .ohn-stat-lab { display: flex; align-items: center; gap: 6px; font-size: var(--ss-fs-12); font-weight: var(--ss-fw-medium); color: var(--ss-ink-2); }
html[data-ui="new"] .ohn-stat-lab i { color: var(--ss-ink-3); font-size: 14px; }
html[data-ui="new"] .ohn-stat-val { display: flex; align-items: baseline; gap: 4px; line-height: 1.1; }
html[data-ui="new"] .ohn-stat-val b { font-size: var(--ss-fs-24); font-weight: var(--ss-fw-semibold); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
html[data-ui="new"] .ohn-stat-val small { font-size: var(--ss-fs-13); color: var(--ss-ink-2); }
html[data-ui="new"] .ohn-stat:not([data-k="projects"]) .ohn-stat-val small { display: none; }
html[data-ui="new"] .ohn-stat-sub { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--ss-fs-12); color: var(--ss-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-ui="new"] .ohn-stat-sub:empty { display: none; }
html[data-ui="new"] .ohn-trunc { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
html[data-ui="new"] .ohn-stat-sub .bi-check2-circle { color: var(--ss-success); }
html[data-ui="new"] .ohn-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; background: currentColor; }
html[data-ui="new"] .ohn-link { color: var(--ss-accent-text); font-weight: var(--ss-fw-medium); }
html[data-ui="new"] .ohn-meter { display: block; height: 4px; border-radius: var(--ss-r-pill); background: var(--ss-bg-3); overflow: hidden; margin-top: 4px; }
html[data-ui="new"] .ohn-meter > i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--ss-ink); }

/* body grid: main | rail */
html[data-ui="new"] .ohn-body { display: grid; grid-template-columns: minmax(0, 1fr) 336px; gap: 16px; align-items: start; }
html[data-ui="new"] :is(.ohn-main, .ohn-rail) { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
html[data-ui="new"] .ohn .card { margin: 0; overflow: hidden; background: var(--ss-surface); }
html[data-ui="new"] .ohn-map { display: none !important; }
html[data-ui="new"] .ohn .card > .ohn-ch { display: flex; align-items: center; gap: 12px; min-height: 44px; }
html[data-ui="new"] .ohn .ohn-ch h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--ss-c-head-fs); font-weight: var(--ss-fw-semibold); color: var(--ss-ink); }
html[data-ui="new"] .ohn .ohn-ch h2 > i { display: none; color: var(--ss-ink-2); }
html[data-ui="new"] .ohn-ch-r { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-size: var(--ss-fs-12); font-weight: var(--ss-fw-regular, 400); color: var(--ss-ink-3); white-space: nowrap; }
html[data-ui="new"] .ohn-ch-link { color: var(--ss-ink-2); display: inline-flex; align-items: center; gap: 4px; }
html[data-ui="new"] .ohn-ch-link:hover { color: var(--ss-ink); }
html[data-ui="new"] :is(.ohn-today-t2, .ohn-coming-t2, .ohn-coming-t3) { display: none; }

/* rows (attention, coming up, start something) */
html[data-ui="new"] .ohn-rows { list-style: none; margin: 0; padding: 0; }
html[data-ui="new"] .ohn-rows > li { border-top: var(--ss-bw) solid var(--ss-line); }
html[data-ui="new"] .ohn-rows > li:first-child { border-top: 0; }
html[data-ui="new"] .ohn-row { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 16px; color: var(--ss-ink); }
html[data-ui="new"] a.ohn-row:hover { background: var(--ss-bg-1); }
html[data-ui="new"] .ohn-ico { flex: none; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: var(--ss-bw) solid var(--ss-line); border-radius: var(--ss-r-sm); background: var(--ss-surface); color: var(--ss-ink-2); font-size: 14px; }
html[data-ui="new"] .ohn-ico.is-ok { color: var(--ss-success); }
html[data-ui="new"] .ohn-ico.is-warn { color: var(--ss-danger); }
html[data-ui="new"] .ohn-ico.is-info { color: var(--ss-info); }
html[data-ui="new"] .ohn-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
html[data-ui="new"] .ohn .t { font-size: var(--ss-fs-13); font-weight: var(--ss-fw-medium); color: var(--ss-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-ui="new"] .ohn .d { font-size: var(--ss-fs-12); color: var(--ss-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-ui="new"] .ohn-row-end { margin-left: auto; flex: none; }
html[data-ui="new"] .ohn-row-end .bi-chevron-right { display: none; color: var(--ss-ink-3); }
html[data-ui="new"] .ohn-empty { padding: 14px 16px; font-size: var(--ss-fs-13); color: var(--ss-ink-3); list-style: none; }
html[data-ui="new"] .ohn-count { font-size: var(--ss-fs-12); color: var(--ss-ink-3); }
html[data-ui="new"] .ohn-start .ohn-row { min-height: 44px; }
html[data-ui="new"] .ohn-start .t { font-weight: var(--ss-fw-medium); }
html[data-ui="new"] .ohn-row kbd { margin-left: auto; min-width: 18px; height: 18px; padding: 0 4px; display: inline-flex; align-items: center; justify-content: center; border: var(--ss-bw) solid var(--ss-line-2); border-radius: var(--ss-r-xs); background: var(--ss-surface); color: var(--ss-ink-3); font: var(--ss-fw-medium) var(--ss-fs-11)/1 var(--ss-font-mono); box-shadow: none; }

/* the date box (Coming up) */
html[data-ui="new"] .ohn-datebox { width: 38px; flex: none; text-align: center; border: var(--ss-bw) solid var(--ss-line); border-radius: var(--ss-r-sm); overflow: hidden; line-height: 1; }
html[data-ui="new"] .ohn-datebox > span { display: block; padding: 3px 0; font: var(--ss-fw-medium) var(--ss-fs-11)/1.2 var(--ss-font-mono); letter-spacing: var(--ss-track-caps); text-transform: uppercase; color: var(--ss-ink-3); background: var(--ss-bg-1); border-bottom: var(--ss-bw) solid var(--ss-line); }
html[data-ui="new"] .ohn-datebox > b { display: block; padding: 4px 0 5px; font-size: var(--ss-fs-14); font-weight: var(--ss-fw-semibold); font-variant-numeric: tabular-nums; color: var(--ss-ink); }
html[data-ui="new"] .ohn-datebox.is-today > b { font-size: var(--ss-fs-13); }

/* "Jump back in" table */
html[data-ui="new"] .ohn-recent .table-responsive { margin: 0; }
html[data-ui="new"] .ohn-table { margin: 0; }
html[data-ui="new"] .ohn-table :is(th, td).r { text-align: right; }
html[data-ui="new"] .ohn-table td { color: var(--ss-ink-2); white-space: nowrap; }
html[data-ui="new"] .ohn-table td.r { font-variant-numeric: tabular-nums; }
html[data-ui="new"] .ohn-table td.name a { display: inline-flex; align-items: center; gap: 10px; color: var(--ss-ink); font-weight: var(--ss-fw-medium); max-width: 300px; }
html[data-ui="new"] .ohn-table td.name a > span { overflow: hidden; text-overflow: ellipsis; }
html[data-ui="new"] .ohn-table tbody tr:hover > td { background: var(--ss-bg-1); }
html[data-ui="new"] .ohn-thumb { flex: none; width: 22px; height: 22px; border-radius: var(--ss-r-xs); background: var(--ss-bg-2) center/cover no-repeat; border: var(--ss-bw) solid var(--ss-line); display: inline-flex; align-items: center; justify-content: center; color: var(--ss-ink-3); font-size: 11px; }
html[data-ui="new"] .ohn-pct { color: var(--ss-ink-3); font-variant-numeric: tabular-nums; }
html[data-ui="new"] .ohn-flag { color: var(--ss-warning); margin-left: 6px; vertical-align: -1px; }

/* Today · Field: the flight outlook */
html[data-ui="new"] .ohn-outlook { display: block; padding: 14px 16px 12px; color: var(--ss-ink); }
html[data-ui="new"] .ohn-ol-head { display: flex; align-items: center; gap: 8px; font-size: var(--ss-fs-13); font-weight: var(--ss-fw-medium); }
html[data-ui="new"] .ohn-ol-head > i { color: var(--ss-ink-3); }
html[data-ui="new"] .ohn-ol-head .badge { margin-left: auto; }
html[data-ui="new"] .ohn-ol-wx { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: var(--ss-fs-12); color: var(--ss-ink-2); }
html[data-ui="new"] .ohn-ol-wx:empty { display: none; }
html[data-ui="new"] .ohn-ol-wx > span { display: inline-flex; align-items: center; gap: 5px; }
html[data-ui="new"] .ohn-ol-wx i { color: var(--ss-ink-3); font-size: 13px; }
html[data-ui="new"] .ohn-hours { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; margin-top: 12px; }
html[data-ui="new"] .ohn-hours:empty { display: none; }
html[data-ui="new"] .ohn-hours > i { height: 18px; border-radius: 3px; background: var(--ss-bg-3); }
html[data-ui="new"] .ohn-hours > i.fly { background: color-mix(in srgb, var(--ss-success-fill) 55%, var(--ss-bg-2)); }
html[data-ui="new"] .ohn-hours > i.marg { background: color-mix(in srgb, var(--ss-warning-fill) 45%, var(--ss-bg-2)); }
html[data-ui="new"] .ohn-hour-ticks { display: flex; justify-content: space-between; margin-top: 5px; font-size: var(--ss-fs-11); color: var(--ss-ink-3); font-variant-numeric: tabular-nums; }
html[data-ui="new"] .ohn-hour-ticks:empty { display: none; }
html[data-ui="new"] .ohn-next { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: var(--ss-bw) solid var(--ss-line); color: var(--ss-ink); }
html[data-ui="new"] .ohn-next .d { white-space: normal; }

/* ---- B · Field Ops: header actions, coloured KPI caps, the map card, mono caps heads ---- */
html[data-ui="new"][data-theme="field-ops"] .oh-wrap:has(> .ohn) { max-width: 1196px; padding: 4px 24px 64px; }
html[data-ui="new"][data-theme="field-ops"] .ohn-eyebrow { display: none; }
html[data-ui="new"][data-theme="field-ops"] .ohn-hi { font-weight: 800; }
html[data-ui="new"][data-theme="field-ops"] .ohn-meta { display: flex; font-size: var(--ss-fs-16); color: var(--ss-ink-2); }
html[data-ui="new"][data-theme="field-ops"] .ohn-meta .ohn-org { font-weight: inherit; color: inherit; }
html[data-ui="new"][data-theme="field-ops"] .ohn-meta .ohn-attn-line { display: none; }
html[data-ui="new"][data-theme="field-ops"] .ohn-start-head .btn { height: var(--ss-tap); }
html[data-ui="new"][data-theme="field-ops"] .ohn-news { display: none; }
html[data-ui="new"][data-theme="field-ops"] .ohn-stats { border-width: var(--ss-bw-strong); }
html[data-ui="new"][data-theme="field-ops"] .ohn-stat { border-left-width: var(--ss-bw-strong); border-top: 4px solid var(--kpi-c, var(--ss-ink)); padding: 14px 16px 16px; gap: 8px; }
html[data-ui="new"][data-theme="field-ops"] .ohn-stat[data-k="processing"] { --kpi-c: var(--ss-info-fill); }
html[data-ui="new"][data-theme="field-ops"] .ohn-stat[data-k="ready"] { --kpi-c: var(--ss-success-fill); }
html[data-ui="new"][data-theme="field-ops"] .ohn-stat[data-k="credits"] { --kpi-c: var(--ss-accent); }
html[data-ui="new"][data-theme="field-ops"] .ohn-stat[data-k="inbox"] { --kpi-c: var(--ss-line-2); }
html[data-ui="new"][data-theme="field-ops"] .ohn-stat-lab { font: var(--ss-fw-medium) var(--ss-fs-11)/1.2 var(--ss-font-mono); text-transform: uppercase; letter-spacing: var(--ss-track-caps); color: var(--ss-ink-2); }
html[data-ui="new"][data-theme="field-ops"] .ohn-stat-val b { font-size: var(--ss-fs-32); font-weight: 800; }
html[data-ui="new"][data-theme="field-ops"] .ohn-stat-val small { font-size: var(--ss-fs-14); color: var(--ss-ink-2); }
html[data-ui="new"][data-theme="field-ops"] .ohn-stat:not([data-k="projects"]) .ohn-stat-val small { display: inline; }
html[data-ui="new"][data-theme="field-ops"] .ohn-stat-sub { font-size: var(--ss-fs-14); color: var(--ss-ink-2); }
html[data-ui="new"][data-theme="field-ops"] .ohn-stat[data-k="ready"] .ohn-stat-sub { color: var(--ss-success); font-weight: var(--ss-fw-medium); }
html[data-ui="new"][data-theme="field-ops"] .ohn-meter { height: 6px; }
html[data-ui="new"][data-theme="field-ops"] .ohn-body {
  grid-template-columns: 380px minmax(0, 1fr) 400px;
  grid-template-areas: "map map today" "map map coming" "attn recent recent";
  align-items: stretch;
}
html[data-ui="new"][data-theme="field-ops"] :is(.ohn-main, .ohn-rail) { display: contents; }
html[data-ui="new"][data-theme="field-ops"] .ohn-map { display: flex !important; flex-direction: column; grid-area: map; }
html[data-ui="new"][data-theme="field-ops"] .ohn-attn { grid-area: attn; align-self: start; }
html[data-ui="new"][data-theme="field-ops"] .ohn-recent { grid-area: recent; align-self: start; }
html[data-ui="new"][data-theme="field-ops"] .ohn-today { grid-area: today; align-self: start; }
html[data-ui="new"][data-theme="field-ops"] .ohn-coming { grid-area: coming; }
html[data-ui="new"][data-theme="field-ops"] .ohn-start { display: none; }
html[data-ui="new"][data-theme="field-ops"] .ohn .card > .ohn-ch { min-height: 52px; }
html[data-ui="new"][data-theme="field-ops"] .ohn .ohn-ch h2 { font-size: var(--ss-fs-16); font-weight: 700; }
html[data-ui="new"][data-theme="field-ops"] .ohn .ohn-ch h2 > i { display: inline-block; color: var(--ss-ink); }
html[data-ui="new"][data-theme="field-ops"] .ohn-ch-r { font-size: var(--ss-fs-14); }
html[data-ui="new"][data-theme="field-ops"] .ohn-ch-link { color: var(--ss-action-text); font-weight: var(--ss-fw-medium); }
html[data-ui="new"][data-theme="field-ops"] .ohn-ch-link > i { display: none; }
html[data-ui="new"][data-theme="field-ops"] .ohn-count { font: var(--ss-fw-semibold) var(--ss-fs-11)/1 var(--ss-font-mono); text-transform: uppercase; letter-spacing: .04em; color: var(--ss-danger); border: var(--ss-bw-strong) solid currentColor; border-radius: var(--ss-r-sm); padding: 6px 8px; }
html[data-ui="new"][data-theme="field-ops"] .ohn-count:empty { display: none; }
html[data-ui="new"][data-theme="field-ops"] .ohn-row { min-height: 60px; gap: 14px; }
html[data-ui="new"][data-theme="field-ops"] .ohn .t { font-size: var(--ss-fs-16); font-weight: var(--ss-fw-semibold); }
html[data-ui="new"][data-theme="field-ops"] .ohn .d { font-size: var(--ss-fs-14); color: var(--ss-ink-2); }
html[data-ui="new"][data-theme="field-ops"] .ohn-ico { width: 40px; height: 40px; border-width: var(--ss-bw-strong); border-radius: var(--ss-r); font-size: 18px; }
html[data-ui="new"][data-theme="field-ops"] .ohn-ico.is-ok { background: var(--ss-success-soft); border-color: var(--ss-success-fill); }
html[data-ui="new"][data-theme="field-ops"] .ohn-ico.is-warn { background: var(--ss-danger-soft); border-color: var(--ss-danger-fill); }
html[data-ui="new"][data-theme="field-ops"] .ohn-ico.is-info { background: var(--ss-info-soft); border-color: var(--ss-info-fill); }
html[data-ui="new"][data-theme="field-ops"] .ohn-attn .ohn-row-end > :not(.bi-chevron-right) { display: none; }
html[data-ui="new"][data-theme="field-ops"] .ohn-attn .ohn-row-end .bi-chevron-right { display: inline-block; font-size: 18px; }
html[data-ui="new"][data-theme="field-ops"] .ohn-table td.name a { font-weight: var(--ss-fw-semibold); }
html[data-ui="new"][data-theme="field-ops"] .ohn-thumb { display: none; }
html[data-ui="new"][data-theme="field-ops"] .ohn-table td.r { font-family: var(--ss-font-mono); }
html[data-ui="new"][data-theme="field-ops"] :is(.ohn-today-t) { display: none; }
html[data-ui="new"][data-theme="field-ops"] :is(.ohn-today-t2) { display: inline; }
html[data-ui="new"][data-theme="field-ops"] .ohn-today [data-ohn="wx-place"] { display: none; }
html[data-ui="new"][data-theme="field-ops"] .ohn-ol-head > :is(i, span:not(.badge)) { display: none; }
html[data-ui="new"][data-theme="field-ops"] .ohn-ol-head .badge { margin: 0; height: auto; min-height: 44px; width: 100%; justify-content: flex-start; font-size: var(--ss-fs-20) !important; font-family: var(--ss-font-sans) !important; text-transform: none !important; font-weight: 800 !important; border-width: var(--ss-bw-strong); }
html[data-ui="new"][data-theme="field-ops"] .ohn-ol-wx { font-size: var(--ss-fs-14); font-weight: var(--ss-fw-semibold); color: var(--ss-ink); margin-top: 10px; }
html[data-ui="new"][data-theme="field-ops"] .ohn-hours > i { height: 10px; border-radius: 0; }
html[data-ui="new"][data-theme="field-ops"] .ohn-hours { gap: 0; border-radius: var(--ss-r-pill); overflow: hidden; }
html[data-ui="new"][data-theme="field-ops"] .ohn-hours > i.fly { background: var(--ss-success-fill); }
html[data-ui="new"][data-theme="field-ops"] .ohn-hours > i:not(.fly, .marg) { background: var(--ss-danger-soft); }
html[data-ui="new"][data-theme="field-ops"] .ohn-hour-ticks { font: var(--ss-fw-medium) var(--ss-fs-12)/1 var(--ss-font-mono); color: var(--ss-ink-2); }
html[data-ui="new"][data-theme="field-ops"] .ohn-next { display: none; }
html[data-ui="new"][data-theme="field-ops"] :is(.ohn-coming-t) { display: none; }
html[data-ui="new"][data-theme="field-ops"] :is(.ohn-coming-t2) { display: inline; }
html[data-ui="new"][data-theme="field-ops"] .ohn-datebox { width: 52px; border-width: var(--ss-bw-strong); border-color: var(--ss-ink); }
html[data-ui="new"][data-theme="field-ops"] .ohn-datebox > span { background: transparent; border: 0; color: var(--ss-ink); font-weight: 700; padding: 4px 0 0; }
html[data-ui="new"][data-theme="field-ops"] .ohn-datebox > b { font-size: var(--ss-fs-20); font-weight: 800; padding: 0 0 4px; }
html[data-ui="new"][data-theme="field-ops"] .ohn-datebox.is-today { background: var(--ss-ink); border-color: var(--ss-ink); }
html[data-ui="new"][data-theme="field-ops"] .ohn-datebox.is-today > * { color: var(--ss-surface); }
html[data-ui="new"][data-theme="field-ops"] .ohn-datebox.is-today > b { font-size: var(--ss-fs-18); }
/* the map card */
html[data-ui="new"] .ohn-map-canvas { position: relative; flex: 1; min-height: 340px; background: var(--ss-bg-2); }
html[data-ui="new"] .ohn-map-canvas .leaflet-container { position: absolute; inset: 0; background: var(--ss-bg-2); font-family: inherit; }
html[data-ui="new"] .ohn-map-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: var(--ss-fs-14); color: var(--ss-ink-2); z-index: 500; pointer-events: none; }
html[data-ui="new"] .ohn-map-legend { position: absolute; left: 12px; bottom: 12px; z-index: 600; display: inline-flex; gap: 14px; padding: 6px 12px; border: var(--ss-bw-strong) solid var(--ss-line-2); border-radius: var(--ss-r); background: var(--ss-surface); font-size: var(--ss-fs-13); font-weight: var(--ss-fw-semibold); color: var(--ss-ink); }
html[data-ui="new"] .ohn-map { position: relative; }
html[data-ui="new"] .ohn-map-legend > span { display: inline-flex; align-items: center; gap: 6px; }
html[data-ui="new"] .ohn-map-legend i { width: 12px; height: 12px; border-radius: 3px; }
html[data-ui="new"] .ohn-lg-live { background: #22d3ee; }
html[data-ui="new"] .ohn-lg-done { background: #2ed16b; }
html[data-ui="new"] .ohn-lg-plan { border: 2px dashed var(--ss-ink); }
html[data-ui="new"] .ohn-pin { position: relative; }
html[data-ui="new"] .ohn-pin-dot { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.35); color: #fff; font-size: 14px; background: #22d3ee; }
html[data-ui="new"] .ohn-pin.is-done .ohn-pin-dot { background: #16a34a; }
html[data-ui="new"] .ohn-pin.is-plan .ohn-pin-dot { background: #fff; color: #111; border-color: #111; }
html[data-ui="new"] .ohn-pin-card { position: absolute; left: 40px; top: -6px; padding: 5px 10px; border: 2px solid #111; border-radius: 6px; background: #fff; color: #111; white-space: nowrap; font-size: 13px; line-height: 1.25; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
html[data-ui="new"] .ohn-pin-card b { display: block; font-weight: 700; }
html[data-ui="new"] .ohn-pin-card span { font-size: 12px; }

/* ---- C · Warm Modern: separate soft stat cards with icon tiles, tiles for Start something ---- */
html[data-ui="new"][data-theme="warm-modern"] .oh-wrap:has(> .ohn) { max-width: 1192px; padding: 8px 28px 64px; }
html[data-ui="new"][data-theme="warm-modern"] .ohn-eyebrow { display: none; }
html[data-ui="new"][data-theme="warm-modern"] .ohn-meta { display: flex; }
html[data-ui="new"][data-theme="warm-modern"] .ohn-meta > i { display: none; }
html[data-ui="new"][data-theme="warm-modern"] .ohn-head { margin-bottom: 16px; }
html[data-ui="new"][data-theme="warm-modern"] .ohn-stats { gap: 14px; border: 0; background: none; box-shadow: none; overflow: visible; }
html[data-ui="new"][data-theme="warm-modern"] .ohn-stat { border: var(--ss-bw) solid var(--ss-c-card-line); border-radius: var(--ss-c-card-r); background: var(--ss-surface); box-shadow: var(--ss-c-card-shadow); padding: 14px 16px; gap: 8px; }
html[data-ui="new"][data-theme="warm-modern"] .ohn-stat-lab { font-size: var(--ss-fs-13); color: var(--ss-ink); gap: 10px; }
html[data-ui="new"][data-theme="warm-modern"] :is(.ohn-stat-lab, .ohn-ico) i,
html[data-ui="new"][data-theme="warm-modern"] .ohn-stat-lab i { width: 28px; height: 28px; border-radius: var(--ss-r-sm); display: inline-flex; align-items: center; justify-content: center; background: var(--ss-accent-soft); color: var(--ss-accent-text); font-size: 15px; }
html[data-ui="new"][data-theme="warm-modern"] .ohn-stat[data-k="processing"] .ohn-stat-lab i { background: var(--ss-warning-soft); color: var(--ss-warning); }
html[data-ui="new"][data-theme="warm-modern"] .ohn-stat[data-k="ready"] .ohn-stat-lab i { background: var(--ss-success-soft); color: var(--ss-success); }
html[data-ui="new"][data-theme="warm-modern"] .ohn-stat[data-k="inbox"] .ohn-stat-lab i { background: var(--ss-info-soft); color: var(--ss-info); }
html[data-ui="new"][data-theme="warm-modern"] .ohn-stat-val b { font-size: var(--ss-fs-28); }
html[data-ui="new"][data-theme="warm-modern"] .ohn-meter > i { background: var(--ss-info-fill); }
html[data-ui="new"][data-theme="warm-modern"] .ohn-body { grid-template-columns: minmax(0, 1fr) 350px; }
html[data-ui="new"][data-theme="warm-modern"] .ohn .card > .ohn-ch { border-bottom: 0; min-height: 52px; }
html[data-ui="new"][data-theme="warm-modern"] .ohn .ohn-ch h2 { font-size: var(--ss-fs-14); }
html[data-ui="new"][data-theme="warm-modern"] .ohn-ch-link { color: var(--ss-ink); font-weight: var(--ss-fw-medium); }
html[data-ui="new"][data-theme="warm-modern"] .ohn-count { min-width: 22px; height: 22px; padding: 0 7px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--ss-r-pill); background: var(--ss-accent-soft); color: var(--ss-accent-text); font-weight: var(--ss-fw-semibold); }
html[data-ui="new"][data-theme="warm-modern"] .ohn-count:empty { display: none; }
html[data-ui="new"][data-theme="warm-modern"] .ohn-attn .ohn-ch-r { margin-left: 4px; margin-right: auto; }
html[data-ui="new"][data-theme="warm-modern"] .ohn-attn .ohn-rows { padding: 0 8px 8px; }
html[data-ui="new"][data-theme="warm-modern"] .ohn-attn .ohn-rows > li { border-top-style: dashed; }
html[data-ui="new"][data-theme="warm-modern"] .ohn-ico { border: 0; border-radius: var(--ss-r); width: 30px; height: 30px; background: var(--ss-bg-2); }
html[data-ui="new"][data-theme="warm-modern"] .ohn-ico.is-ok { background: var(--ss-success-soft); }
html[data-ui="new"][data-theme="warm-modern"] .ohn-ico.is-warn { background: var(--ss-danger-soft); }
html[data-ui="new"][data-theme="warm-modern"] .ohn-ico.is-info { background: var(--ss-info-soft); }
html[data-ui="new"][data-theme="warm-modern"] .ohn-ico i { width: auto !important; height: auto !important; background: none !important; color: inherit !important; }
html[data-ui="new"][data-theme="warm-modern"] .ohn-thumb { width: 26px; height: 26px; border-radius: var(--ss-r-sm); }
html[data-ui="new"][data-theme="warm-modern"] :is(.ohn-coming-t) { display: none; }
html[data-ui="new"][data-theme="warm-modern"] :is(.ohn-coming-t3) { display: inline; }
html[data-ui="new"][data-theme="warm-modern"] .ohn-coming .ohn-ch-link { color: var(--ss-accent-text); }
html[data-ui="new"][data-theme="warm-modern"] .ohn-coming .ohn-ch-link > i { display: none; }
html[data-ui="new"][data-theme="warm-modern"] .ohn-coming .ohn-rows > li { border-top: 0; }
html[data-ui="new"][data-theme="warm-modern"] .ohn-datebox { border: 0; border-radius: var(--ss-r); background: var(--ss-accent-soft); }
html[data-ui="new"][data-theme="warm-modern"] .ohn-datebox > span { background: none; border: 0; color: var(--ss-accent-text); padding: 5px 0 0; font-weight: 700; }
html[data-ui="new"][data-theme="warm-modern"] .ohn-datebox > b { padding: 0 0 5px; font-size: var(--ss-fs-16); }
html[data-ui="new"][data-theme="warm-modern"] .ohn-start .ohn-rows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 0 16px 16px; }
html[data-ui="new"][data-theme="warm-modern"] .ohn-start .ohn-rows > li { border: 0; }
html[data-ui="new"][data-theme="warm-modern"] .ohn-start .ohn-row { flex-direction: column; align-items: flex-start; gap: 10px; min-height: 0; padding: 12px 10px; border: var(--ss-bw) solid var(--ss-line); border-radius: var(--ss-r); }
html[data-ui="new"][data-theme="warm-modern"] .ohn-start .ohn-ico { background: var(--ss-accent-soft); color: var(--ss-accent-text); }
html[data-ui="new"][data-theme="warm-modern"] .ohn-start .ohn-row:nth-child(1) .ohn-ico,
html[data-ui="new"][data-theme="warm-modern"] .ohn-start li:nth-child(2) .ohn-ico { background: var(--ss-info-soft); color: var(--ss-info); }
html[data-ui="new"][data-theme="warm-modern"] .ohn-start li:nth-child(3) .ohn-ico { background: var(--ss-success-soft); color: var(--ss-success); }
html[data-ui="new"][data-theme="warm-modern"] .ohn-start kbd { display: none; }

/* phones and narrow windows: one column, the stats two-up */
@media (max-width: 1100px) {
  html[data-ui="new"] .ohn-body,
  html[data-ui="new"][data-theme="field-ops"] .ohn-body { grid-template-columns: minmax(0, 1fr); grid-template-areas: "map" "today" "attn" "recent" "coming"; }
}
@media (max-width: 768px) {
  html[data-ui="new"] .oh-wrap:has(> .ohn),
  html[data-ui="new"][data-theme] .oh-wrap:has(> .ohn) { padding: 16px 16px 48px; }
  html[data-ui="new"] .ohn-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  html[data-ui="new"] .ohn-start-head { justify-content: flex-start; margin-left: 0; width: 100%; }
  html[data-ui="new"] .ohn-start-lab { width: 100%; }
  html[data-ui="new"] .ohn .ohn-start-head .btn { flex: 1 1 auto; min-height: 44px; }
  html[data-ui="new"] .ohn-news { display: none; }
  html[data-ui="new"] .ohn-stats { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-ui="new"] .ohn-stat { border-left: 0; border-top: var(--ss-bw) solid var(--ss-c-card-line); }
  html[data-ui="new"] .ohn-stat:nth-child(even) { border-left: var(--ss-bw) solid var(--ss-c-card-line); }
  html[data-ui="new"] .ohn-stat:nth-child(-n+2) { border-top: 0; }
  html[data-ui="new"][data-theme="field-ops"] .ohn-stat { border-top: 4px solid var(--kpi-c, var(--ss-ink)); }
  html[data-ui="new"][data-theme="warm-modern"] .ohn-stats { gap: 10px; }
  html[data-ui="new"][data-theme="warm-modern"] .ohn-stat { border: var(--ss-bw) solid var(--ss-c-card-line); }
  html[data-ui="new"] .ohn-table :is(th, td):is(:nth-child(2), :nth-child(4)) { display: none; }
  html[data-ui="new"] .ohn-table td.name a { max-width: 150px; }
  @media (max-width: 480px) { html[data-ui="new"] .ohn-table :is(th, td):nth-child(5) { display: none; } }
  html[data-ui="new"] .ohn-table :is(th, td) { padding-left: 8px; padding-right: 8px; }
  html[data-ui="new"] .ohn-thumb { display: none; }
  html[data-ui="new"] .ohn-attn .ohn-row-end > :not(.bi-chevron-right) { display: none; }
  html[data-ui="new"] .ohn-attn .ohn-row-end .bi-chevron-right { display: inline-block; }
  html[data-ui="new"] .ohn-meta { flex-wrap: wrap; }
  html[data-ui="new"] .ohn-meta > span { white-space: nowrap; }
  html[data-ui="new"] .ohn-map .ohn-ch { flex-wrap: wrap; }
  html[data-ui="new"] .ohn-map .ohn-ch h2 { font-size: var(--ss-fs-14) !important; }
  html[data-ui="new"] .ohn-map [data-ohn="map-chip"] { display: none !important; }
  html[data-ui="new"] .ohn-map-canvas { min-height: 260px; }
  html[data-ui="new"] .ohn-map-legend { font-size: var(--ss-fs-12); gap: 10px; }
}

/* ==========================================================================
   Phase 4: survey · project page (/survey/projects/{id}, projects/detail.html).
   The template ships a new-UI header + tab bar (.pjn, hidden by the template itself) and a
   pending-deliverables card. Everything below is scoped to the page container that holds
   #pjnHead, so an older survey template keeps today's look. Candidates: directions/
   {A,B,C}/project.html — header with status pill, meta line and Share / More; tab bar; main
   column (photos & ground control, processing options) and a rail (processing steps,
   details grid, deliverables). John's current-step panel (#mwPanel) stays: it is the page's
   next action.
   ========================================================================== */
html[data-ui="new"] .container-fluid:has(> #pjnHead) { max-width: 1180px; margin: 0 auto; padding: 8px 32px 64px; }
html[data-ui="new"] .container-fluid:has(> #pjnHead) > .pjn { display: flex; }
html[data-ui="new"] .container-fluid:has(> #pjnHead) #mapWorkflow .mw-head__title,
html[data-ui="new"] .container-fluid:has(> #pjnHead) #skyStepsRail { display: none !important; }
html[data-ui="new"] .container-fluid:has(> #pjnHead) > nav[aria-label="breadcrumb"] .breadcrumb { margin-bottom: 6px; }
html[data-ui="new"] .container-fluid:has(> #pjnHead) > nav[aria-label="breadcrumb"] a { color: var(--ss-ink-3) !important; text-decoration: none; }

/* header */
html[data-ui="new"] .pjn-head { align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 14px; }
html[data-ui="new"] .pjn-head h1 { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0; font-size: var(--ss-c-h1-fs); font-weight: var(--ss-fw-semibold); letter-spacing: var(--ss-track-heading, -.01em); line-height: 1.2; color: var(--ss-ink); }
html[data-ui="new"] .pjn-rename { border: 0; background: none; padding: 0 2px; color: var(--ss-ink-3); font-size: 14px; line-height: 1; }
html[data-ui="new"] .pjn-rename:hover { color: var(--ss-ink); }
html[data-ui="new"] .pjn-head h1 .badge { font-size: var(--ss-c-badge-fs); }
html[data-ui="new"] .pjn-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin-top: 6px; font-size: var(--ss-fs-13); color: var(--ss-ink-3); }
html[data-ui="new"] .pjn-meta > span { display: inline-flex; align-items: center; gap: 6px; }
html[data-ui="new"] .pjn-meta > span + span::before { content: "·"; margin: 0 8px; }
html[data-ui="new"] .pjn-meta a { color: var(--ss-ink-2); text-decoration: none; }
html[data-ui="new"] .pjn-meta a:hover { color: var(--ss-ink); }
html[data-ui="new"] .pjn-actions { display: flex; align-items: center; gap: 8px; flex: none; }
html[data-ui="new"] .pjn-actions .dropdown-menu { font-size: var(--ss-fs-13); }
html[data-ui="new"] .pjn-actions .dropdown-item { display: flex; align-items: center; gap: 8px; }

/* tab bar */
html[data-ui="new"] .container-fluid > .pjn-tabs { gap: 4px; margin-bottom: 16px; border-bottom: var(--ss-bw) solid var(--ss-line); flex-wrap: nowrap; overflow-x: auto; }
html[data-ui="new"] .pjn-tabs .nav-link { border: 0; border-bottom: var(--ss-c-tab-bar, 2px) solid transparent; border-radius: 0; background: none !important; color: var(--ss-ink-2); font-size: var(--ss-fs-13); font-weight: var(--ss-fw-medium); padding: 0 10px; white-space: nowrap; }
html[data-ui="new"] .pjn-tabs .nav-link > i { display: none; }
html[data-ui="new"] .pjn-tabs .nav-link:hover { color: var(--ss-ink); }
html[data-ui="new"] .pjn-tabs .nav-link.active { color: var(--ss-ink); border-bottom-color: var(--ss-ink); }
html[data-ui="new"] .pjn-tabs .nav-link.disabled { color: var(--ss-ink-4); }
html[data-ui="new"] .pjn-n { margin-left: 4px; padding: 1px 6px; border-radius: var(--ss-r-pill); background: var(--ss-bg-2); color: var(--ss-ink-3); font: var(--ss-fw-medium) var(--ss-fs-11)/1.4 var(--ss-font-mono); }

/* the current-step panel: a quiet callout under the tabs */
html[data-ui="new"] .container-fluid:has(> #pjnHead) #mapWorkflow { margin-bottom: 16px; }
html[data-ui="new"] .container-fluid:has(> #pjnHead) #mwPanel { border-radius: var(--ss-c-card-r); }

/* main column | rail */
html[data-ui="new"] .container-fluid:has(> #pjnHead) > .row.g-3 { display: grid; grid-template-columns: minmax(0, 1fr) 352px; gap: 16px; margin: 0; align-items: start; }
html[data-ui="new"] .container-fluid:has(> #pjnHead) > .row.g-3 > [class*="col-md-"] { width: auto; max-width: none; padding: 0; margin: 0; min-width: 0; }
html[data-ui="new"] .container-fluid:has(> #pjnHead) > .row.g-3 > .col-md-8 { grid-column: 1; grid-row: 1; }
html[data-ui="new"] .container-fluid:has(> #pjnHead) > .row.g-3 > .col-md-4 { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; gap: 16px; }
html[data-ui="new"] .container-fluid:has(> #pjnHead) > .row.g-3 > .col-md-8 > .card + .card,
html[data-ui="new"] .container-fluid:has(> #pjnHead) > .row.g-3 > .col-md-8 > * + .card { margin-top: 16px; }
html[data-ui="new"] .container-fluid:has(> #pjnHead) .card.border-secondary { border-color: var(--ss-c-card-line) !important; }

/* rail: the status card becomes Processing steps + Details (its title and actions now live in the header) */
html[data-ui="new"] .container-fluid:has(> #pjnHead) .status-card { display: contents; }
html[data-ui="new"] .container-fluid:has(> #pjnHead) .status-card > .card-header { display: none !important; }
html[data-ui="new"] .container-fluid:has(> #pjnHead) .status-card > .card-body { display: contents; }
html[data-ui="new"] .container-fluid:has(> #pjnHead) .status-card > .card-body > p.text-secondary:first-child { display: none; }
html[data-ui="new"] .container-fluid:has(> #pjnHead) .status-card > .card-body > :is(a.btn, .btn-group, button.btn[data-bs-toggle]) { display: none; }
html[data-ui="new"] .container-fluid:has(> #pjnHead) .status-card > .card-body > #addToTestLibrary { margin: 0 !important; }
html[data-ui="new"] .container-fluid:has(> #pjnHead) :is(#pipeline-steps, .status-card table.table-sm, .pjn-deliv) {
  margin: 0 !important;
  border: var(--ss-bw) solid var(--ss-c-card-line);
  border-radius: var(--ss-c-card-r);
  background: var(--ss-surface);
  box-shadow: var(--ss-c-card-shadow);
  overflow: hidden;
}
html[data-ui="new"] .container-fluid:has(> #pjnHead) #pipeline-steps { padding: 0 0 8px; counter-reset: pjnstep; }
html[data-ui="new"] .container-fluid:has(> #pjnHead) #pipeline-steps::before {
  content: "Processing steps"; display: flex; align-items: center; min-height: 44px; padding: 0 16px; margin-bottom: 6px;
  border-bottom: var(--ss-bw) solid var(--ss-c-head-line, var(--ss-line)); font-size: var(--ss-c-head-fs); font-weight: var(--ss-fw-semibold); color: var(--ss-ink);
}
html[data-ui="new"] .container-fluid:has(> #pjnHead) .ps-item { gap: 10px; min-height: 30px; padding: 3px 16px; font-size: var(--ss-fs-13); color: var(--ss-ink); }
html[data-ui="new"] .container-fluid:has(> #pjnHead) .ps-item .ps-icon { flex: none; width: 20px; height: 20px; margin: 0; border-radius: 50%; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; }
html[data-ui="new"] .container-fluid:has(> #pjnHead) .ps-pending .ps-icon { background: transparent; border: var(--ss-bw) solid var(--ss-line-2); }
html[data-ui="new"] .container-fluid:has(> #pjnHead) .ps-pending > span:last-child { color: var(--ss-ink-2); }
/* Details: the key/value table as the candidates' two-column grid */
html[data-ui="new"] .container-fluid:has(> #pjnHead) .status-card table.table-sm { display: block; width: auto; }
html[data-ui="new"] .container-fluid:has(> #pjnHead) .status-card table.table-sm::before {
  content: "Details"; display: flex; align-items: center; min-height: 44px; padding: 0 16px;
  border-bottom: var(--ss-bw) solid var(--ss-c-head-line, var(--ss-line)); font-size: var(--ss-c-head-fs); font-weight: var(--ss-fw-semibold); color: var(--ss-ink);
}
html[data-ui="new"] .container-fluid:has(> #pjnHead) .status-card table.table-sm > tbody { display: grid; grid-template-columns: 1fr 1fr; }
html[data-ui="new"] .container-fluid:has(> #pjnHead) .status-card table.table-sm tr { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 0 16px; min-height: 30px; border-bottom: var(--ss-bw) solid var(--ss-line); }
html[data-ui="new"] .container-fluid:has(> #pjnHead) .status-card table.table-sm tr:nth-child(odd) { border-right: var(--ss-bw) solid var(--ss-line); }
html[data-ui="new"] .container-fluid:has(> #pjnHead) .status-card table.table-sm td { padding: 0; border: 0; background: none !important; font-size: var(--ss-fs-13); font-weight: var(--ss-fw-semibold); color: var(--ss-ink); box-shadow: none; text-align: right; }
html[data-ui="new"] .container-fluid:has(> #pjnHead) .status-card table.table-sm td.text-secondary { font-weight: var(--ss-fw-regular, 400); color: var(--ss-ink-3) !important; text-align: left; }
html[data-ui="new"] .container-fluid:has(> #pjnHead) .status-card table.table-sm td[colspan] { display: none; }
/* Deliverables (pending) */
html[data-ui="new"] .container-fluid:has(> #pjnHead) .pjn-deliv { display: block; }
html[data-ui="new"] .pjn-deliv > .card-header { display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
html[data-ui="new"] .pjn-deliv h2 { margin: 0; font-size: var(--ss-c-head-fs); font-weight: var(--ss-fw-semibold); color: var(--ss-ink); }
html[data-ui="new"] .pjn-muted { font-size: var(--ss-fs-12); color: var(--ss-ink-3); font-weight: var(--ss-fw-regular, 400); }
html[data-ui="new"] .pjn-dl { list-style: none; margin: 0; padding: 0; }
html[data-ui="new"] .pjn-dl > li { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 16px; border-top: var(--ss-bw) solid var(--ss-line); font-size: var(--ss-fs-13); color: var(--ss-ink); }
html[data-ui="new"] .pjn-dl > li:first-child { border-top: 0; }
html[data-ui="new"] .pjn-dl > li > :last-child { margin-left: auto; }
html[data-ui="new"] .pjn-ft { min-width: 34px; padding: 1px 5px; border: var(--ss-bw) solid var(--ss-line-2); border-radius: var(--ss-r-xs); text-align: center; font: var(--ss-fw-medium) var(--ss-fs-11)/1.4 var(--ss-font-mono); color: var(--ss-ink-2); }

/* photos & ground control: the drop zone as the candidates' compact row */
html[data-ui="new"] .container-fluid:has(> #pjnHead) #dropZone { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; align-items: center; padding: 16px 18px; text-align: left; border: var(--ss-bw) dashed var(--ss-line-strong); border-radius: var(--ss-r); background: var(--ss-bg-1); }
html[data-ui="new"] .container-fluid:has(> #pjnHead) #dropZone > i { grid-row: 1 / span 4; width: 40px; height: 40px; margin: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; border: var(--ss-bw) solid var(--ss-line); border-radius: var(--ss-r); background: var(--ss-surface); color: var(--ss-ink-2); font-size: 18px !important; }
html[data-ui="new"] .container-fluid:has(> #pjnHead) #dropZone > :is(h5, h6) { margin: 0; font-size: var(--ss-fs-13); font-weight: var(--ss-fw-semibold); color: var(--ss-ink); }
html[data-ui="new"] .container-fluid:has(> #pjnHead) #dropZone > p { margin: 0 !important; font-size: var(--ss-fs-12); color: var(--ss-ink-3); }
html[data-ui="new"] .container-fluid:has(> #pjnHead) #dropZone.has-files { border-color: var(--ss-success-fill); }

/* processing options: the quality picker as the candidates' segmented control */
html[data-ui="new"] .container-fluid:has(> #pjnHead) #step-options .btn-group[role="group"] { padding: 3px; gap: 2px; border-radius: var(--ss-r); background: var(--ss-bg-2); border: var(--ss-bw) solid var(--ss-line); }
html[data-ui="new"] .container-fluid:has(> #pjnHead) #step-options .btn-group[role="group"] > .btn { border: 0 !important; border-radius: var(--ss-r-sm) !important; background: transparent; color: var(--ss-ink-2); line-height: 1.25; padding: 6px 8px; height: auto; box-shadow: none; }
html[data-ui="new"] .container-fluid:has(> #pjnHead) #step-options .btn-group[role="group"] > .btn-check:checked + .btn { background: var(--ss-surface); color: var(--ss-ink); box-shadow: var(--ss-shadow-sm), 0 0 0 var(--ss-bw) var(--ss-line-2); }
html[data-ui="new"] .container-fluid:has(> #pjnHead) #step-options .form-switch.p-2 { background: var(--ss-surface) !important; border-color: var(--ss-line) !important; border-radius: var(--ss-r) !important; }
/* switches as the candidates' rows: the words left, the switch right */
html[data-ui="new"] .container-fluid:has(> #pjnHead) #step-options .form-switch.p-2 { display: flex; flex-direction: row-reverse; align-items: center; flex-wrap: wrap; gap: 4px 14px; padding: 12px 14px !important; }
html[data-ui="new"] .container-fluid:has(> #pjnHead) #step-options .form-switch.p-2 > .form-check-input { float: none; flex: none; margin: 0 !important; }
html[data-ui="new"] .container-fluid:has(> #pjnHead) #step-options .form-switch.p-2 > label { flex: 1 1 0; min-width: 0; }
html[data-ui="new"] .container-fluid:has(> #pjnHead) #step-options .form-switch.p-2 > :not(input, label) { flex-basis: 100%; }

@media (max-width: 991px) {
  html[data-ui="new"] .container-fluid:has(> #pjnHead) > .row.g-3 { grid-template-columns: minmax(0, 1fr); }
  html[data-ui="new"] .container-fluid:has(> #pjnHead) > .row.g-3 > .col-md-4 { grid-column: 1; grid-row: 2; }
}
@media (max-width: 768px) {
  html[data-ui="new"] .container-fluid:has(> #pjnHead) { padding: 8px 16px 48px; }
  html[data-ui="new"] .pjn-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  html[data-ui="new"] .pjn-actions { flex-wrap: wrap; }
}

/* B · Field Ops: heavier header and tabs, mono caps detail labels */
html[data-ui="new"][data-theme="field-ops"] .pjn-head h1 { font-weight: 800; }
html[data-ui="new"][data-theme="field-ops"] .pjn-meta { font-size: var(--ss-fs-14); color: var(--ss-ink-2); }
html[data-ui="new"][data-theme="field-ops"] .pjn-tabs .nav-link { font-size: var(--ss-fs-16); font-weight: var(--ss-fw-semibold); min-height: 48px; }
html[data-ui="new"][data-theme="field-ops"] .pjn-tabs .nav-link > i { display: inline-block; }
html[data-ui="new"][data-theme="field-ops"] .pjn-tabs .nav-link.active { border-bottom-color: var(--ss-action); }
html[data-ui="new"][data-theme="field-ops"] .container-fluid:has(> #pjnHead) .status-card table.table-sm td.text-secondary { font: var(--ss-fw-medium) var(--ss-fs-11)/1.2 var(--ss-font-mono); text-transform: uppercase; letter-spacing: var(--ss-track-caps); }
html[data-ui="new"][data-theme="field-ops"] .container-fluid:has(> #pjnHead) .ps-item { min-height: 44px; font-size: var(--ss-fs-14); }
html[data-ui="new"][data-theme="field-ops"] .container-fluid:has(> #pjnHead) .ps-item .ps-icon { width: 28px; height: 28px; border-width: var(--ss-bw-strong); }
/* C · Warm Modern: tab icons, soft pill tabs counts */
html[data-ui="new"][data-theme="warm-modern"] .pjn-tabs .nav-link > i { display: inline-block; }
html[data-ui="new"][data-theme="warm-modern"] .pjn-tabs .nav-link.active { border-bottom-color: var(--ss-accent); }

/* ==========================================================================
   Phase 4: survey · map workspace (/survey/map/{id}, survey/map.html + _map_body.html).
   The owner viewer ships a title card (#mpnTitle, hidden by the template itself; the client
   portal has none, so it keeps today's look). Here, and only where that card is present,
   the map goes full-bleed under the top bar and the viewer's own chrome floats over it on
   glass, as in candidate 3: title card top-left, the view switch (Ortho / Point cloud / 3D
   / Full screen) top-centre, the zoom rail under the title, the tool panel as a floating
   glass card on the right, the elevation read-out bottom-left.
   ========================================================================== */
html[data-ui="new"] main.sky-content:has(> #mpnTitle) { padding: 0 !important; position: relative; }
/* the viewport-sized map starts at the top of main; the shell's trail (drawn here since /survey/map/<id> lights
   Projects, shell 846251d) pushed it 48px down and the map's bottom edge, metric strip included, below the fold.
   The floating title row's back arrow is this page's way back */
html[data-ui="new"] main.sky-content:has(> #mpnTitle) > #sky-shell-breadcrumb { display: none; }
html[data-ui="new"] main.sky-content:has(> #mpnTitle) > #survey-container { height: calc(100dvh - var(--sky-topbar-h, 42px) - 10px - var(--sky-banner-h, 0px)); position: relative; } /* 10px: the shell layout starts 10px under the bar */
html[data-ui="new"] main.sky-content:has(> #mpnTitle) > .mpn-title {
  display: flex; align-items: center; gap: 12px; position: absolute; top: 12px; left: 12px; z-index: 1100;
  max-width: min(520px, calc(100% - 380px), max(160px, calc(50% - 24px - var(--mpn-tabs-half, 110px)))); min-height: 56px; padding: 8px 14px 8px 8px;
  border: var(--ss-bw) solid var(--ss-glass-line); border-radius: var(--ss-c-card-r);
  background: var(--ss-glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: var(--ss-shadow-overlay);
}
/* the title card ends before the view switch (top-centre) begins: a long name ("Caliterra site — 3D point
   cloud (sample)") ran under Ortho / Point Cloud / 3D Model at 1440. --mpn-tabs-half is half the switch's
   width (each view tab ~110px, plus Full screen), stepped by how many view tabs the bar holds; the name
   ellipsizes (.mpn-name). Phones stack the two (max-width: 767.98px below). */
html[data-ui="new"] main.sky-content:has(> #mpnTitle) { --mpn-tabs-half: 110px; }
html[data-ui="new"] main.sky-content:has(> #mpnTitle):has(.survey-tabs > .survey-tab:not(.survey-back) ~ .survey-tab:not(.survey-back)) { --mpn-tabs-half: 170px; }
html[data-ui="new"] main.sky-content:has(> #mpnTitle):has(.survey-tabs > .survey-tab:not(.survey-back) ~ .survey-tab:not(.survey-back) ~ .survey-tab:not(.survey-back)) { --mpn-tabs-half: 230px; }
html[data-ui="new"] main.sky-content:has(> #mpnTitle):has(.survey-tabs > .survey-tab:not(.survey-back) ~ .survey-tab:not(.survey-back) ~ .survey-tab:not(.survey-back) ~ .survey-tab:not(.survey-back)) { --mpn-tabs-half: 290px; }
html[data-ui="new"] .mpn-back { flex: none; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--ss-r-sm); color: var(--ss-ink-2); text-decoration: none; }
html[data-ui="new"] .mpn-back:hover { background: var(--ss-bg-2); color: var(--ss-ink); }
html[data-ui="new"] .mpn-txt { min-width: 0; }
html[data-ui="new"] .mpn-name { font-size: var(--ss-fs-14); font-weight: var(--ss-fw-semibold); color: var(--ss-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-ui="new"] .mpn-meta { display: flex; flex-wrap: wrap; font-size: var(--ss-fs-12); color: var(--ss-ink-3); }
html[data-ui="new"] .mpn-meta > span + span::before { content: "·"; margin: 0 6px; }
html[data-ui="new"] .mpn-title .badge { flex: none; margin-left: 6px; }
/* the view switch: a glass pill, top-centre */
html[data-ui="new"] main.sky-content:has(> #mpnTitle) .survey-tabs {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 1100; margin: 0;
  display: inline-flex; align-items: center; gap: 2px; height: 40px; padding: 4px; border: var(--ss-bw) solid var(--ss-glass-line); border-radius: var(--ss-r-pill);
  background: var(--ss-glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: var(--ss-shadow-overlay);
}
html[data-ui="new"] main.sky-content:has(> #mpnTitle) .survey-tabs > :is(.survey-tab, .survey-fs-btn) { height: 32px; padding: 0 12px; margin: 0; border: 0 !important; border-radius: var(--ss-r-pill); font-size: var(--ss-fs-13); display: inline-flex; align-items: center; gap: 6px; background: transparent; color: var(--ss-ink-2); }
html[data-ui="new"] main.sky-content:has(> #mpnTitle) .survey-tabs > .survey-tab.active { background: var(--ss-surface); color: var(--ss-ink); box-shadow: var(--ss-shadow-sm), 0 0 0 var(--ss-bw) var(--ss-line); }
html[data-ui="new"] main.sky-content:has(> #mpnTitle) .survey-tabs > .survey-fs-btn { margin-left: 4px !important; }
html[data-ui="new"] main.sky-content:has(> #mpnTitle) #survey-container > .tab-panel { height: 100%; }
/* zoom rail under the title card, on glass */
html[data-ui="new"] main.sky-content:has(> #mpnTitle) #map .leaflet-top.leaflet-left { top: 80px; left: 4px; }
html[data-ui="new"] main.sky-content:has(> #mpnTitle) #map .leaflet-control-zoom { border: var(--ss-bw) solid var(--ss-glass-line) !important; border-radius: var(--ss-c-card-r) !important; overflow: hidden; background: var(--ss-glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: var(--ss-shadow-overlay); }
html[data-ui="new"] main.sky-content:has(> #mpnTitle) #map .leaflet-control-zoom a { width: 36px; height: 36px; line-height: 36px; background: transparent; color: var(--ss-ink-2); border-bottom-color: var(--ss-glass-line); }
/* the tool panel: a floating glass card on the right */
@media (min-width: 768px) {
  html[data-ui="new"] main.sky-content:has(> #mpnTitle) #map-panel #sidebar {
    position: absolute; top: 12px; right: 12px; bottom: 12px; z-index: 1100; width: 300px; padding: 12px 14px;
    border: var(--ss-bw) solid var(--ss-glass-line); border-radius: var(--ss-c-card-r);
    background: var(--ss-glass-strong); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: var(--ss-shadow-overlay);
  }
  html[data-ui="new"] main.sky-content:has(> #mpnTitle) #map-panel #sidebar.rail-collapsed { width: 0; padding: 0; border: 0; box-shadow: none; }
  html[data-ui="new"] main.sky-content:has(> #mpnTitle) #map-panel #map-rail-toggle { position: absolute; top: 50%; transform: translateY(-50%); right: 312px; z-index: 1110; }
  html[data-ui="new"] main.sky-content:has(> #mpnTitle) #map-panel #map-rail-toggle.rail-is-collapsed { right: 12px; }
  html[data-ui="new"] main.sky-content:has(> #mpnTitle) #map .leaflet-bottom.leaflet-right { right: 316px; }
}
html[data-ui="new"] main.sky-content:has(> #mpnTitle) #sidebar h6 { font: var(--ss-fw-medium) var(--ss-fs-11)/1.2 var(--ss-font-mono); letter-spacing: var(--ss-track-caps); color: var(--ss-ink-3); margin: 6px 0 8px; }
html[data-ui="new"] main.sky-content:has(> #mpnTitle) #sidebar h6 > i { display: none; }
html[data-ui="new"] main.sky-content:has(> #mpnTitle) #sidebar hr { border-color: var(--ss-glass-line) !important; opacity: 1; }
/* the read-out: bottom-left, the candidates' status strip */
html[data-ui="new"] main.sky-content:has(> #mpnTitle) #elevation-display { left: 12px !important; right: auto !important; bottom: 12px !important; transform: none !important; border-radius: var(--ss-r); background: var(--ss-glass-strong); color: var(--ss-ink); }
@media (max-width: 767.98px) {
  html[data-ui="new"] main.sky-content:has(> #mpnTitle) > .mpn-title { right: 12px; max-width: none; min-height: 48px; }
  html[data-ui="new"] main.sky-content:has(> #mpnTitle) .survey-tabs { top: 72px; }
  html[data-ui="new"] main.sky-content:has(> #mpnTitle) #map .leaflet-top.leaflet-left { top: 120px; }
}
/* the map's own top banners (map_banners.js stacks and centres them in px) start under the
   floating title row instead of at the top edge */
html[data-ui="new"] main.sky-content:has(> #mpnTitle) :is(#measure-result, #profile-hint, #tool-assist-card, #ortho-notice, .contour-notice) { margin-top: 68px !important; }
/* clear of the floating panel (map_banners.js centres within the room it finds). Not on phones:
   there 100% - 680px is below zero and squeezed the ortho notice to a sliver, and this !important
   beat the max-width map_banners.js sets inline from the free strip it measures. */
@media (min-width: 768px) {
  html[data-ui="new"] main.sky-content:has(> #mpnTitle) :is(#measure-result, #profile-hint, #tool-assist-card, #ortho-notice, .contour-notice) { max-width: calc(100% - 680px) !important; }
}

/* ---- Phase 5 (row 13): the map panel's internals, as in candidate 3 ----
   Owner viewer only (#mpnTitle). survey/map.html builds the extras only in the new UI:
   #mpnBasemap (Satellite / Streets / None / More: it sets the real #basemap-select, which stays
   the source of truth and is shown again for "More" or when another basemap is on), #mpnAcc
   (the stored GCP check as tiles, under "GCP accuracy"), #mpnStrip (the elevation read-out,
   a scale bar, zoom, the output CRS). map.js tags the DEM legend so it can lie flat here. */
/* layers: each overlay's opacity slider (John, 10-12: always visible while the layer is on) on its row */
html[data-ui="new"] main.sky-content:has(> #mpnTitle) #sidebar .layer-item { flex-wrap: nowrap !important; gap: 6px; min-height: 32px; border-radius: var(--ss-r-sm); }
html[data-ui="new"] main.sky-content:has(> #mpnTitle) #sidebar .layer-item > .sky-opacity { order: 1; flex: 0 0 104px; gap: 6px; padding: 0 !important; }
html[data-ui="new"] main.sky-content:has(> #mpnTitle) #sidebar .layer-item > span:nth-child(2) { order: 2; min-width: 18px; justify-content: flex-end; }
html[data-ui="new"] main.sky-content:has(> #mpnTitle) #sidebar .layer-item > .sky-opacity .sky-op-cap { display: none; }
html[data-ui="new"] main.sky-content:has(> #mpnTitle) #sidebar .layer-item > .sky-opacity .sky-op-range { min-width: 0; height: 1.2rem; }
html[data-ui="new"] main.sky-content:has(> #mpnTitle) #sidebar .layer-item > .sky-opacity .sky-op-val { flex-basis: 2.6em; color: var(--ss-ink-3); font-size: var(--ss-fs-11); }
html[data-ui="new"] main.sky-content:has(> #mpnTitle) #sidebar .layer-item .layer-name { font-size: var(--ss-fs-13); color: var(--ss-ink); }
@media (pointer: fine) {   /* touch screens keep the finger-sized thumb (_map_panel.html, pointer: coarse) */
  html[data-ui="new"] main.sky-content:has(> #mpnTitle) #sidebar .sky-opacity .sky-op-range { -webkit-appearance: none; appearance: none; background: transparent; }
  html[data-ui="new"] main.sky-content:has(> #mpnTitle) #sidebar .sky-opacity .sky-op-range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: var(--ss-line-2); }
  html[data-ui="new"] main.sky-content:has(> #mpnTitle) #sidebar .sky-opacity .sky-op-range::-moz-range-track { height: 4px; border-radius: 2px; background: var(--ss-line-2); }
  html[data-ui="new"] main.sky-content:has(> #mpnTitle) #sidebar .sky-opacity .sky-op-range::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -4px; border-radius: 50%; border: 1.5px solid var(--ss-ink-2); background: var(--ss-surface); box-shadow: var(--ss-shadow-sm); }
  html[data-ui="new"] main.sky-content:has(> #mpnTitle) #sidebar .sky-opacity .sky-op-range::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--ss-ink-2); background: var(--ss-surface); box-shadow: var(--ss-shadow-sm); }
}
/* basemap: a segmented control */
html[data-ui="new"] main.sky-content:has(> #mpnTitle) #sidebar .mpn-seg { display: flex; gap: 2px; padding: 2px; margin: 0 0 8px; border-radius: var(--ss-r); background: var(--ss-bg-2); box-shadow: inset 0 0 0 var(--ss-bw) var(--ss-line); }
html[data-ui="new"] main.sky-content:has(> #mpnTitle) #sidebar .mpn-seg > button { flex: 1 1 0; min-width: 0; height: 28px; padding: 0 6px; border: 0; border-radius: var(--ss-r-sm); background: transparent; color: var(--ss-ink-2); font-size: var(--ss-fs-12); font-weight: var(--ss-fw-medium); white-space: nowrap; }
html[data-ui="new"] main.sky-content:has(> #mpnTitle) #sidebar .mpn-seg > button:hover { color: var(--ss-ink); }
html[data-ui="new"] main.sky-content:has(> #mpnTitle) #sidebar .mpn-seg > button.is-on { background: var(--ss-surface); color: var(--ss-ink); box-shadow: var(--ss-shadow-sm), 0 0 0 var(--ss-bw) var(--ss-line); }
html[data-ui="new"] main.sky-content:has(> #mpnTitle) #sidebar:has(> #mpnBasemap):not(.mpn-basemap-more, .mpn-basemap-other) > #basemap-select { display: none; }
html[data-ui="new"][data-theme="field-ops"] main.sky-content:has(> #mpnTitle) #sidebar .mpn-seg > button { height: 36px; padding: 0 2px; font-weight: var(--ss-fw-semibold); }
/* GCP accuracy: three tiles */
html[data-ui="new"] main.sky-content:has(> #mpnTitle) #sidebar .mpn-acc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 0 8px; border: var(--ss-bw) solid var(--ss-line); border-radius: var(--ss-r); background: var(--ss-surface); }
html[data-ui="new"] main.sky-content:has(> #mpnTitle) #sidebar .mpn-acc-tile { display: flex; flex-direction: column; justify-content: space-between; gap: 4px; min-width: 0; padding: 6px 8px; }
html[data-ui="new"] main.sky-content:has(> #mpnTitle) #sidebar .mpn-acc-tile + .mpn-acc-tile { border-left: var(--ss-bw) solid var(--ss-line); }
html[data-ui="new"] main.sky-content:has(> #mpnTitle) #sidebar .mpn-acc-tile > span { font-size: var(--ss-fs-11); line-height: 1.2; color: var(--ss-ink-3); }
html[data-ui="new"] main.sky-content:has(> #mpnTitle) #sidebar .mpn-acc-tile > b { font-size: var(--ss-fs-13); font-weight: var(--ss-fw-semibold); color: var(--ss-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
html[data-ui="new"] main.sky-content:has(> #mpnTitle) #sidebar .mpn-acc[data-verdict="fail"] .mpn-acc-tile > b { color: var(--ss-danger, #c0392b); }
/* the metric strip: read-out · scale · zoom · CRS, along the bottom edge left of the panel */
html[data-ui="new"] main.sky-content:has(> #mpnTitle) .mpn-strip {
  display: flex; align-items: center; position: absolute; left: 12px; right: 324px; bottom: 12px; z-index: 1100; height: 34px; padding: 0 4px;
  border: var(--ss-bw) solid var(--ss-glass-line); border-radius: var(--ss-r); background: var(--ss-glass-strong);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: var(--ss-shadow-overlay);
  font: var(--ss-fw-regular, 400) var(--ss-fs-12)/1 var(--ss-font-mono); color: var(--ss-ink-2); font-variant-numeric: tabular-nums;
}
html[data-ui="new"] main.sky-content:has(> #mpnTitle):has(#sidebar.rail-collapsed) .mpn-strip { right: 12px; }
html[data-ui="new"] main.sky-content:has(> #mpnTitle) .mpn-strip > span { display: flex; align-items: center; gap: 6px; height: 100%; padding: 0 10px; white-space: nowrap; }
html[data-ui="new"] main.sky-content:has(> #mpnTitle) .mpn-strip > span + span { border-left: var(--ss-bw) solid var(--ss-glass-line); }
html[data-ui="new"] main.sky-content:has(> #mpnTitle) .mpn-strip > .mpn-strip-ro { flex: 1 1 auto; min-width: 0; }
html[data-ui="new"] main.sky-content:has(> #mpnTitle) .mpn-strip #elevation-display { position: static !important; transform: none !important; inset: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; -webkit-backdrop-filter: none; backdrop-filter: none; font: inherit !important; color: inherit !important; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: auto; }
html[data-ui="new"] main.sky-content:has(> #mpnTitle) .mpn-strip-scale > i { display: block; height: 6px; border: 1.5px solid var(--ss-ink-2); border-top: 0; }
html[data-ui="new"] main.sky-content:has(> #mpnTitle) .mpn-strip-scale > em { font-style: normal; }
html[data-ui="new"] main.sky-content:has(> #mpnTitle) .mpn-strip-zoom > b { font-weight: var(--ss-fw-medium); color: var(--ss-ink); }
html[data-ui="new"] main.sky-content:has(> #mpnTitle):has(.mpn-strip) #map .leaflet-bottom.leaflet-right { bottom: 46px; }
/* the DEM legend: a flat ramp above the strip, bottom-left */
html[data-ui="new"] main.sky-content:has(> #mpnTitle) #dem-legend {
  left: 12px !important; right: auto !important; bottom: 56px !important; width: 200px; padding: 8px 10px !important;
  border-radius: var(--ss-c-card-r) !important; border-color: var(--ss-glass-line) !important; background: var(--ss-glass-strong) !important; color: var(--ss-ink) !important;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); font-size: var(--ss-fs-11) !important;
}
html[data-ui="new"] main.sky-content:has(> #mpnTitle) #dem-legend .dem-legend-title { font-size: var(--ss-fs-12); margin-bottom: 6px !important; }
html[data-ui="new"] main.sky-content:has(> #mpnTitle) #dem-legend .dem-legend-body { flex-direction: column !important; align-items: stretch !important; gap: 4px !important; }
html[data-ui="new"] main.sky-content:has(> #mpnTitle) #dem-legend .dem-legend-bar { width: auto !important; height: 8px !important; border: 0 !important; border-radius: var(--ss-r-pill); background: linear-gradient(to right, var(--dem-stops)) !important; }
html[data-ui="new"] main.sky-content:has(> #mpnTitle) #dem-legend .dem-legend-ticks { flex-direction: row-reverse !important; height: auto !important; color: var(--ss-ink-3); font-family: var(--ss-font-mono); font-variant-numeric: tabular-nums; }
@media (max-width: 767.98px) {
  html[data-ui="new"] main.sky-content:has(> #mpnTitle) .mpn-strip { right: 12px; }
  /* clear the shell's fixed phone tab bar (56px + the safe area, sky-theme.css), which the strip sat on */
  html[data-ui="new"] main.sky-content:has(> #mpnTitle) .mpn-strip { bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
  html[data-ui="new"] main.sky-content:has(> #mpnTitle) #dem-legend { bottom: calc(112px + env(safe-area-inset-bottom, 0px)) !important; }
  html[data-ui="new"] main.sky-content:has(> #mpnTitle):has(.mpn-strip) #map .leaflet-bottom.leaflet-right { bottom: calc(102px + env(safe-area-inset-bottom, 0px)); }
  html[data-ui="new"] main.sky-content:has(> #mpnTitle) .mpn-strip > span:not(.mpn-strip-ro) { display: none; }
}

/* ==========================================================================
   Phase 4: jobs · Go Live (/projects/{id}/live, live_video_pilot.html), candidate 4 (phone).
   The template ships a phone header and a live status row (.lvn, hidden by the template
   itself). Scoped to the page that has them: the header replaces the SkyStream title, the
   status row (LIVE + timer, watching, quality) sits under it, and the session puts End live
   and the client share card right under the live card, the controller set-up after them.
   ========================================================================== */
html[data-ui="new"] .lv-wrap:has(> #lvnHead) > .lvn:not([hidden]) { display: flex; }
html[data-ui="new"] .lv-wrap:has(> #lvnHead) > :is(.lv-head, .lv-sub) { display: none; }
html[data-ui="new"] .lvn-head { align-items: center; gap: 8px; margin: 0 0 12px; }
html[data-ui="new"] :is(.lvn-back, .lvn-more) { flex: none; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--ss-r-sm); background: none; color: var(--ss-ink); font-size: 18px; text-decoration: none; }
html[data-ui="new"] :is(.lvn-back, .lvn-more):hover { background: var(--ss-bg-2); }
html[data-ui="new"] .lvn-title { flex: 1; min-width: 0; text-align: center; }
html[data-ui="new"] .lvn-crumb { font-size: var(--ss-fs-12); color: var(--ss-ink-3); }
html[data-ui="new"] .lvn-name { font-size: var(--ss-fs-16); font-weight: var(--ss-fw-semibold); color: var(--ss-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-ui="new"] .lvn-status { align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
html[data-ui="new"] .lvn-live { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: var(--ss-r-sm); background: var(--ss-bg-2); color: var(--ss-ink-2); font-size: var(--ss-fs-13); font-weight: var(--ss-fw-semibold); }
html[data-ui="new"] .lvn-live > i { width: 8px; height: 8px; border-radius: 50%; background: var(--ss-ink-3); }
html[data-ui="new"] .lvn-status.is-live .lvn-live { background: var(--ss-live); color: #fff; }
html[data-ui="new"] .lvn-status.is-live .lvn-live > i { background: #fff; }
html[data-ui="new"] .lvn-live > span { font-family: var(--ss-font-mono); font-variant-numeric: tabular-nums; }
html[data-ui="new"] .lvn-pill { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: var(--ss-bw) solid var(--ss-line-2); border-radius: var(--ss-r-sm); font-size: var(--ss-fs-13); color: var(--ss-ink); }
html[data-ui="new"] .lvn-q:empty { display: none; }
/* the session: live card, End live, share, then set-up */
html[data-ui="new"] .lv-wrap:has(> #lvnHead) #lvSession:not([hidden]) { display: flex; flex-direction: column; }
html[data-ui="new"] .lv-wrap:has(> #lvnHead) #lvSession > * { order: 3; }
html[data-ui="new"] .lv-wrap:has(> #lvnHead) #lvSession > .lv-card:first-child { order: 0; }
html[data-ui="new"] .lv-wrap:has(> #lvnHead) #lvSession > #lvEnd { order: 1; margin: 0 0 12px; min-height: 56px; font-size: var(--ss-fs-18); border-radius: var(--ss-c-card-r); }
html[data-ui="new"] .lv-wrap:has(> #lvnHead) #lvSession > .lv-card:has(#lvShare) { order: 2; }
html[data-ui="new"] .lv-wrap:has(> #lvnHead) #lvSession > .lv-card:first-child #lvState { display: none; }
html[data-ui="new"] .lv-wrap:has(> #lvnHead) :is(.lv-card, .skytel) { border-radius: var(--ss-c-card-r); border-color: var(--ss-c-card-line); background: var(--ss-surface); box-shadow: var(--ss-c-card-shadow); }
html[data-ui="new"] .lv-wrap:has(> #lvnHead) .lv-card h2 { font: var(--ss-fw-semibold) var(--ss-c-head-fs)/1.3 var(--ss-font-sans); text-transform: none; letter-spacing: 0; color: var(--ss-ink); }
html[data-ui="new"] .lv-wrap:has(> #lvnHead) .lv-stat { border-radius: var(--ss-r); background: var(--ss-bg-1); border-color: var(--ss-line); }
html[data-ui="new"] .lv-wrap:has(> #lvnHead) .lv-stat b { font-variant-numeric: tabular-nums; }
/* telemetry: the candidates' tile grid, mono caps labels */
html[data-ui="new"] .lv-wrap:has(> #lvnHead) .skytel-tile { border-radius: var(--ss-r); background: var(--ss-bg-1); border-color: var(--ss-line); }
html[data-ui="new"][data-theme="field-ops"] .lvn-name { font-size: var(--ss-fs-20); font-weight: 800; text-align: left; }
html[data-ui="new"][data-theme="field-ops"] .lvn-title { text-align: left; }
html[data-ui="new"][data-theme="field-ops"] .lvn-crumb { color: var(--ss-action-text); font-size: var(--ss-fs-14); }
html[data-ui="new"][data-theme="field-ops"] :is(.lvn-live, .lvn-pill) { height: 40px; font-size: var(--ss-fs-16); border-width: var(--ss-bw-strong); }
html[data-ui="new"][data-theme="field-ops"] .lv-wrap:has(> #lvnHead) #lvSession > #lvEnd { min-height: 64px; font-size: var(--ss-fs-20); }
@media (max-width: 480px) { html[data-ui="new"] .lvn-q { display: none; } }
/* phase 5 (row 14): telemetry over the video and the "Before you fly" rows. jobs ships both hidden
   (.lvn); its script fills them only in the new UI: the HUD mirrors the telemetry panel and shows only
   while the preview is open and telemetry has arrived; the rows come from this project's plan mission
   and the Flight Brief's verdict. No Mark issue / next waypoint: the page has no such data. */
html[data-ui="new"] .lv-wrap:has(> #lvnHead) #lvPreview:not([hidden]) + .lvn-hud:not([hidden]) {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; position: relative; z-index: 2; margin: -62px 8px 14px; padding: 0; pointer-events: none;
}
html[data-ui="new"] .lvn-hud-t { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; height: 48px; padding: 0 10px; border-radius: var(--ss-r-sm); background: rgba(10, 12, 16, .62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; }
html[data-ui="new"] .lvn-hud-t > span { font: var(--ss-fw-medium) 10px/1 var(--ss-font-mono); letter-spacing: var(--ss-track-caps); text-transform: uppercase; color: rgba(255, 255, 255, .72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-ui="new"] .lvn-hud-t > b { font: var(--ss-fw-semibold) var(--ss-fs-14)/1.1 var(--ss-font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-ui="new"] .lvn-hud-lost { display: none; }
html[data-ui="new"] .lvn-hud.is-stale .lvn-hud-t { opacity: .5; }
html[data-ui="new"] .lv-wrap:has(> #lvnHead) #lvPreview:not([hidden]) + .lvn-hud.is-stale:not([hidden]) { margin-top: -96px; }   /* room for the "Telemetry lost" line */
html[data-ui="new"] .lvn-hud.is-stale .lvn-hud-lost { order: -1; }
html[data-ui="new"] .lvn-hud.is-stale .lvn-hud-lost { display: inline-flex; grid-column: 1 / -1; justify-self: start; align-items: center; height: 28px; padding: 0 10px; border-radius: var(--ss-r-sm); background: var(--ss-danger, #b91c1c); color: #fff; font-size: var(--ss-fs-13); font-weight: var(--ss-fw-semibold); }
html[data-ui="new"] .lv-wrap:has(> #lvnHead) #lvSession > .lvn-check:not([hidden]) { display: block; order: 2; }
html[data-ui="new"] .lvn-check-mission { font-size: var(--ss-fs-13); color: var(--ss-ink-3); margin: -4px 0 8px; }
html[data-ui="new"] .lvn-check-mission a { color: var(--ss-ink); font-weight: var(--ss-fw-medium); text-decoration: none; }
html[data-ui="new"] .lvn-rows { list-style: none; margin: 0; padding: 0; }
html[data-ui="new"] .lvn-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; border-top: var(--ss-bw) solid var(--ss-line); font-size: var(--ss-fs-14); }
html[data-ui="new"] .lvn-row:first-child { border-top: 0; }
html[data-ui="new"] .lvn-row-l { flex: none; white-space: nowrap; color: var(--ss-ink); font-weight: var(--ss-fw-medium); }
html[data-ui="new"] .lvn-row-v { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; color: var(--ss-ink-2); text-align: right; text-decoration: none; }
html[data-ui="new"] .lvn-row-v::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ss-line-2); flex: none; }
html[data-ui="new"] .lvn-row.is-ok .lvn-row-v::before { background: var(--ss-success); }
html[data-ui="new"] .lvn-row.is-warn .lvn-row-v::before { background: var(--ss-warning); }
html[data-ui="new"] .lvn-row.is-bad .lvn-row-v { color: var(--ss-danger); }
html[data-ui="new"] .lvn-row.is-bad .lvn-row-v::before { background: var(--ss-danger); }
html[data-ui="new"][data-theme="field-ops"] .lvn-row { min-height: var(--ss-tap, 56px); font-size: var(--ss-fs-16); }
html[data-ui="new"][data-theme="field-ops"] .lvn-hud-t > b { font-size: var(--ss-fs-16); }

/* ==========================================================================
   Phase 4: list-page headers (.ss-page-head: ledger lists, ops missions) and empty states
   (.empty-state, the class the apps already share: ledger, connect, ops, survey, ...).
   Candidates: the page title at the pack's h1 with no leading icon, a quiet subtitle line,
   actions right-aligned on the title's baseline. Empty states: A a quiet line + action in a
   small outlined tile, B a big icon tile and a big action, C a soft tinted tile.
   ========================================================================== */
html[data-ui="new"] .ss-page-head { align-items: flex-end !important; gap: 16px; margin-bottom: 20px !important; }
html[data-ui="new"] .ss-page-head :is(h1, h2, h3) { margin: 0 !important; font-size: var(--ss-c-h1-fs) !important; font-weight: var(--ss-fw-semibold) !important; letter-spacing: var(--ss-track-heading, -.01em); line-height: 1.2; color: var(--ss-ink); }
html[data-ui="new"] .ss-page-head :is(h1, h2, h3) > i.bi:first-child { display: none; }
html[data-ui="new"] .ss-page-head p:is(.text-muted, .text-secondary) { margin-top: 4px !important; font-size: var(--ss-fs-13) !important; color: var(--ss-ink-3) !important; }
html[data-ui="new"][data-theme="field-ops"] .ss-page-head :is(h1, h2, h3) { font-weight: 800 !important; }
html[data-ui="new"][data-theme="field-ops"] .ss-page-head p:is(.text-muted, .text-secondary) { font-size: var(--ss-fs-14) !important; color: var(--ss-ink-2) !important; }
/* phase 5 (row 15): plan's missions page keeps its sticky schedule bar (Schedule / All plans, Active /
   Stowed, 24h, New) but reads as the page header: the title at the pack's h1 with no icon, the
   subtitle under it, the controls on the title's baseline, on the page ground instead of a grey band */
html[data-ui="new"] :is(.ssc-topbar, .dji-list-topbar).ss-page-head { background: var(--ss-bg); -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: var(--ss-bw) solid var(--ss-line); padding: 8px 32px 16px; margin-bottom: 0 !important; }
html[data-ui="new"] .ss-page-head .ssc-title { flex-direction: column; align-items: flex-start; gap: 4px; font-size: var(--ss-c-h1-fs); font-weight: var(--ss-fw-semibold); letter-spacing: var(--ss-track-heading, -.01em); line-height: 1.2; color: var(--ss-ink); }
html[data-ui="new"] .ss-page-head .ssc-title > i.bi:first-child { display: none; }
html[data-ui="new"] .ss-page-head .ssc-title .ssc-sub { font-size: var(--ss-fs-13); font-weight: var(--ss-fw-regular, 400); letter-spacing: 0; color: var(--ss-ink-3); }
html[data-ui="new"] .ss-page-head .dji-list-title { font-size: var(--ss-c-h1-fs); font-weight: var(--ss-fw-semibold); letter-spacing: var(--ss-track-heading, -.01em); line-height: 1.2; color: var(--ss-ink); }
html[data-ui="new"] .ss-page-head .dji-list-title .count { font-size: var(--ss-fs-12); font-weight: var(--ss-fw-medium); vertical-align: middle; }
html[data-ui="new"][data-theme="field-ops"] .ss-page-head :is(.ssc-title, .dji-list-title) { font-weight: 800; }
html[data-ui="new"][data-theme="field-ops"] .ss-page-head .ssc-title .ssc-sub { font-size: var(--ss-fs-14); color: var(--ss-ink-2); }
@media (max-width: 768px) {
  html[data-ui="new"] :is(.ssc-topbar, .dji-list-topbar).ss-page-head { padding: 4px 14px 12px; }
}

html[data-ui="new"] .empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 36px 20px; color: var(--ss-ink-3); }
html[data-ui="new"] .empty-state .empty-state-icon, html[data-ui="new"] .empty-state > i.bi { width: 40px; height: 40px; margin: 0 0 6px; display: inline-flex; align-items: center; justify-content: center; border: var(--ss-bw) solid var(--ss-line-2); border-radius: var(--ss-r); background: var(--ss-surface); color: var(--ss-ink-3); font-size: 18px !important; opacity: 1; }
html[data-ui="new"] .empty-state .empty-state-icon > i { font-size: inherit; }
html[data-ui="new"] .empty-state :is(.empty-state-title, h4, h5, h6) { margin: 0; font-size: var(--ss-fs-14); font-weight: var(--ss-fw-semibold); color: var(--ss-ink); }
html[data-ui="new"] .empty-state :is(.empty-state-text, .empty-state-msg, p) { margin: 0; max-width: 46ch; font-size: var(--ss-fs-13); color: var(--ss-ink-3); }
html[data-ui="new"] .empty-state .btn { margin-top: 10px; }
html[data-ui="new"][data-theme="field-ops"] .empty-state .empty-state-icon, html[data-ui="new"][data-theme="field-ops"] .empty-state > i.bi { width: 64px; height: 64px; border-width: var(--ss-bw-strong); border-color: var(--ss-ink); color: var(--ss-ink); font-size: 30px !important; border-radius: var(--ss-r-lg); }
html[data-ui="new"][data-theme="field-ops"] .empty-state :is(.empty-state-title, h4, h5, h6) { font-size: var(--ss-fs-18); font-weight: 800; }
html[data-ui="new"][data-theme="field-ops"] .empty-state :is(.empty-state-text, .empty-state-msg, p) { font-size: var(--ss-fs-16); color: var(--ss-ink-2); }
html[data-ui="new"][data-theme="field-ops"] .empty-state .btn { min-height: var(--ss-tap); padding-inline: 22px; }
html[data-ui="new"][data-theme="warm-modern"] .empty-state .empty-state-icon, html[data-ui="new"][data-theme="warm-modern"] .empty-state > i.bi { width: 56px; height: 56px; border: 0; border-radius: 16px; background: var(--ss-accent-soft); color: var(--ss-accent-text); font-size: 24px !important; }
html[data-ui="new"][data-theme="warm-modern"] .empty-state :is(.empty-state-title, h4, h5, h6) { font-size: var(--ss-fs-16); }
/* survey project page: the flights table as the candidates' flight rows
   ("Flight 1 · 12 Oct 2026 14:05 · DJI M3E", angle tag, photo count) */
html[data-ui="new"] .container-fluid:has(> #pjnHead) #flightsTable thead { display: none; }
/* block, not table: a table grows to its rows' min-content, and the one-line (nowrap) cells below would push it past the card */
html[data-ui="new"] .container-fluid:has(> #pjnHead) #flightsTable,
html[data-ui="new"] .container-fluid:has(> #pjnHead) #flightsTable > tbody { display: block; }
html[data-ui="new"] .container-fluid:has(> #pjnHead) #flightsTable tbody > tr { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 16px; border-top: var(--ss-bw) solid var(--ss-line); }
html[data-ui="new"] .container-fluid:has(> #pjnHead) #flightsTable tbody > tr:first-child { border-top: 0; }
html[data-ui="new"] .container-fluid:has(> #pjnHead) #flightsTable tbody > tr > td { display: block; padding: 0 !important; border: 0; background: none !important; height: auto; font-size: var(--ss-fs-13) !important; }
html[data-ui="new"] .container-fluid:has(> #pjnHead) #flightsTable tbody > tr > td:nth-child(1) { order: 1; flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-ui="new"] .container-fluid:has(> #pjnHead) #flightsTable tbody > tr > td:nth-child(1) > div { white-space: normal; }
html[data-ui="new"] .container-fluid:has(> #pjnHead) #flightsTable tbody > tr > td:nth-child(3) { order: 2; color: var(--ss-ink-3) !important; flex: 0 .2 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the camera takes the slack and gives it up first, on one line ("· DJI M…"), never below ~5em;
   only then does the name shorten (the date far less: flex-shrink .2). A shrink-to-zero camera cell wrapped a letter per line */
html[data-ui="new"] .container-fluid:has(> #pjnHead) #flightsTable tbody > tr > td:nth-child(4) { order: 3; color: var(--ss-ink-3) !important; flex: 1 1 0; min-width: 5em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-ui="new"] .container-fluid:has(> #pjnHead) #flightsTable tbody > tr > td:is(:nth-child(3), :nth-child(4))::before { content: "· "; }
html[data-ui="new"] .container-fluid:has(> #pjnHead) #flightsTable tbody > tr > td:nth-child(5) { order: 4; text-align: right; }
html[data-ui="new"] .container-fluid:has(> #pjnHead) #flightsTable tbody > tr > td:nth-child(5) > div { display: none; }
html[data-ui="new"] .container-fluid:has(> #pjnHead) #flightsTable tbody > tr > td:nth-child(2) { order: 5; min-width: 88px; text-align: right; font-variant-numeric: tabular-nums; color: var(--ss-ink-2) !important; }
html[data-ui="new"] .container-fluid:has(> #pjnHead) #flightsTable tbody > tr > td:nth-child(2)::after { content: " photos"; }
html[data-ui="new"] .container-fluid:has(> #pjnHead) #flightsTable tbody > tr > td:nth-child(6) { order: 6; }
html[data-ui="new"] .container-fluid:has(> #pjnHead) #flightsTable tbody > tr > td:nth-child(6):empty { display: none; }
html[data-ui="new"] .container-fluid:has(> #pjnHead) #flightsTable .flight-name { font-weight: var(--ss-fw-semibold); color: var(--ss-ink); }
/* phase 5 (row 10): a photo of each flight, from survey's existing thumbnail route
   (_flights_card.html fills .flight-thumbs only in the new UI; a missing photo leaves the tile).
   A/D a 34x24 tile and B a 54x40 tile before the name; C a strip of three + "+N" on the right */
html[data-ui="new"] .container-fluid:has(> #pjnHead) #flightsTable .flight-thumbs { display: inline-flex !important; vertical-align: middle; flex: none; gap: 3px; margin-right: 10px; }
html[data-ui="new"] .container-fluid:has(> #pjnHead) #flightsTable .flight-thumbs::before,
html[data-ui="new"] .container-fluid:has(> #pjnHead) #flightsTable .flight-thumb { content: ""; display: block; width: 34px; height: 24px; border-radius: var(--ss-r-xs, 4px); background: var(--ss-bg-2); box-shadow: inset 0 0 0 1px var(--ss-line); object-fit: cover; }
html[data-ui="new"] .container-fluid:has(> #pjnHead) #flightsTable .flight-thumbs:has(> img)::before,
html[data-ui="new"] .container-fluid:has(> #pjnHead) #flightsTable .flight-thumb ~ .flight-thumb,
html[data-ui="new"] .container-fluid:has(> #pjnHead) #flightsTable .flight-thumbs > em { display: none; }
html[data-ui="new"][data-theme="field-ops"] .container-fluid:has(> #pjnHead) #flightsTable tbody > tr { min-height: 64px; }
html[data-ui="new"][data-theme="field-ops"] .container-fluid:has(> #pjnHead) #flightsTable .flight-thumbs::before,
html[data-ui="new"][data-theme="field-ops"] .container-fluid:has(> #pjnHead) #flightsTable .flight-thumb { width: 54px; height: 40px; border-radius: var(--ss-r-xs, 2px); box-shadow: none; border: var(--ss-bw) solid var(--ss-line); }
html[data-ui="new"][data-theme="warm-modern"] .container-fluid:has(> #pjnHead) #flightsTable tbody > tr { flex-wrap: wrap; }
html[data-ui="new"][data-theme="warm-modern"] .container-fluid:has(> #pjnHead) #flightsTable tbody > tr > td:nth-child(1) { display: contents; }
html[data-ui="new"][data-theme="warm-modern"] .container-fluid:has(> #pjnHead) #flightsTable tbody > tr > td:nth-child(1) > * { order: 1; }
html[data-ui="new"][data-theme="warm-modern"] .container-fluid:has(> #pjnHead) #flightsTable tbody > tr > td:nth-child(1) > div { order: 7; flex-basis: 100%; }
html[data-ui="new"][data-theme="warm-modern"] .container-fluid:has(> #pjnHead) #flightsTable tbody > tr > td:nth-child(1) > .flight-thumbs { order: 4; margin: 0; align-items: center; }
html[data-ui="new"][data-theme="warm-modern"] .container-fluid:has(> #pjnHead) #flightsTable .flight-thumbs::before { display: none; }
html[data-ui="new"][data-theme="warm-modern"] .container-fluid:has(> #pjnHead) #flightsTable .flight-thumb { width: 30px; height: 22px; border-radius: 5px; }
html[data-ui="new"][data-theme="warm-modern"] .container-fluid:has(> #pjnHead) #flightsTable .flight-thumb ~ .flight-thumb { display: block; }
html[data-ui="new"][data-theme="warm-modern"] .container-fluid:has(> #pjnHead) #flightsTable .flight-thumbs > em { display: block; width: 38px; padding-left: 4px; font: var(--ss-fw-semibold) var(--ss-fs-11)/22px var(--ss-font-ui, inherit); font-style: normal; color: var(--ss-ink-3); }
html[data-ui="new"][data-theme="warm-modern"] .container-fluid:has(> #pjnHead) #flightsTable .flight-thumbs:not(:has(> img)) > em { display: none; }
/* phone: two lines per flight (name, angle, photos | flown, camera); the one-line row crushed the camera column to a letter per line */
@media (max-width: 575.98px) {
  html[data-ui="new"] .container-fluid:has(> #pjnHead) #flightsTable tbody > tr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 10px; row-gap: 2px; padding: 8px 12px; }
  html[data-ui="new"] .container-fluid:has(> #pjnHead) #flightsTable tbody > tr > td:nth-child(1) { display: block; grid-area: 1 / 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html[data-ui="new"] .container-fluid:has(> #pjnHead) #flightsTable tbody > tr > td:nth-child(1) > div { white-space: normal; }
  html[data-ui="new"] .container-fluid:has(> #pjnHead) #flightsTable tbody > tr > td:nth-child(1) > .flight-rename { display: inline-flex; vertical-align: middle; }
  html[data-ui="new"][data-theme="warm-modern"] .container-fluid:has(> #pjnHead) #flightsTable tbody > tr > td:nth-child(1) { display: block; }
  html[data-ui="new"] .container-fluid:has(> #pjnHead) #flightsTable tbody > tr > td:nth-child(5) { grid-area: 1 / 2; }
  html[data-ui="new"] .container-fluid:has(> #pjnHead) #flightsTable tbody > tr > td:nth-child(2) { grid-area: 1 / 3; min-width: 0; }
  html[data-ui="new"] .container-fluid:has(> #pjnHead) #flightsTable tbody > tr > td:nth-child(3) { grid-area: 2 / 1 / 3 / 3; font-size: var(--ss-fs-12) !important; }
  html[data-ui="new"] .container-fluid:has(> #pjnHead) #flightsTable tbody > tr > td:nth-child(4) { grid-area: 2 / 3; text-align: right; font-size: var(--ss-fs-12) !important; contain: inline-size; }   /* sized by the column (photos, or the 5em floor), not by its text: a long camera name ellipsizes instead of widening the column and squeezing the name */
  html[data-ui="new"] .container-fluid:has(> #pjnHead) #flightsTable tbody > tr > td:is(:nth-child(3), :nth-child(4))::before { content: none; }
  html[data-ui="new"] .container-fluid:has(> #pjnHead) #flightsTable tbody > tr > td:nth-child(6) { grid-area: 1 / 4; }
  html[data-ui="new"] .container-fluid:has(> #pjnHead) #flightsTable tbody > tr:has(.flight-thumb, .flight-thumbs) > td:nth-child(3) { padding-left: 44px !important; }
  html[data-ui="new"][data-theme="field-ops"] .container-fluid:has(> #pjnHead) #flightsTable tbody > tr:has(.flight-thumbs) > td:nth-child(3) { padding-left: 64px !important; }
  html[data-ui="new"][data-theme="warm-modern"] .container-fluid:has(> #pjnHead) #flightsTable tbody > tr > td:nth-child(1) > .flight-thumbs { margin-right: 8px; }
  html[data-ui="new"][data-theme="warm-modern"] .container-fluid:has(> #pjnHead) #flightsTable .flight-thumb ~ .flight-thumb,
  html[data-ui="new"][data-theme="warm-modern"] .container-fluid:has(> #pjnHead) #flightsTable .flight-thumbs > em { display: none; }
  html[data-ui="new"][data-theme="warm-modern"] .container-fluid:has(> #pjnHead) #flightsTable tbody > tr > td:nth-child(3) { padding-left: 0 !important; }
  html[data-ui="new"][data-theme="warm-modern"] .container-fluid:has(> #pjnHead) #flightsTable tbody > tr:has(.flight-thumb) > td:nth-child(3) { padding-left: 38px !important; }
  html[data-ui="new"][data-theme="warm-modern"] .container-fluid:has(> #pjnHead) #flightsTable .flight-thumbs:not(:has(> img)) { display: none !important; }
}
/* A/D: the processing settings as label-left field rows (candidate A's "Coordinate system" /
   "Contour interval" rows); B and C keep the label above, as their candidates do */
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .container-fluid:has(> #pjnHead) #mwSettings > [class*="col-sm-"] { flex: 0 0 100%; max-width: 100%; display: grid; grid-template-columns: 200px minmax(0, 1fr); align-items: center; gap: 12px; padding-top: 8px; padding-bottom: 8px; border-bottom: var(--ss-bw) solid var(--ss-line); }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .container-fluid:has(> #pjnHead) #mwSettings > [class*="col-sm-"] > label { margin: 0 !important; font-size: var(--ss-fs-13) !important; font-weight: var(--ss-fw-medium) !important; color: var(--ss-ink) !important; }
html[data-ui="new"][data-theme="field-ops"] .container-fluid:has(> #pjnHead) #mwSettings label { font: var(--ss-fw-medium) var(--ss-fs-12)/1.2 var(--ss-font-mono) !important; text-transform: uppercase; letter-spacing: var(--ss-track-caps); color: var(--ss-ink-2) !important; }
/* map tool panel, A/D: the tools as borderless icon rows (candidate A's "Map tools" grid);
   B keeps its big outlined buttons, C its soft ones */
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) main.sky-content:has(> #mpnTitle) #sidebar .tool-btn {
  justify-content: flex-start; text-align: left; gap: 8px; min-height: 30px; padding: 4px 8px;
  border: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--ss-ink-2) !important; font-weight: var(--ss-fw-regular, 400);
}
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) main.sky-content:has(> #mpnTitle) #sidebar .tool-btn:hover:not(:disabled) { background: var(--ss-bg-2) !important; color: var(--ss-ink) !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) main.sky-content:has(> #mpnTitle) #sidebar .tool-btn:is(.active, [aria-pressed="true"]) { background: var(--ss-accent-soft) !important; color: var(--ss-accent-text) !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) main.sky-content:has(> #mpnTitle) #sidebar .tool-btn > i { color: var(--ss-ink-3); }

/* ==========================================================================
   Themes fix #1 (admin 2026-10-18): jobs · DSP and the project page, the candidates' layout.
   /office/work/field/dsp (the DSP folders), ?folder=<id> (a folder's projects) and /projects/<id>
   all come from jobs app/templates/cockpit.html, which now carries a new-UI-only frame (.ckn).
   The template hides it; in the new UI its cknPlace() MOVES the page's own nodes into the frame
   (title, header actions, money bar, toolbar, missions, delivery tray, project tools), and these
   rules show it only once it holds them (:has(#ckList)), so the shell and jobs deploy in either
   order and a page without the frame keeps today's look. Office › Home's three layouts:
   A (Clean Pro, Clean Pro Field): header, one stat strip, main | rail, divided rows in cards.
   B (Field Ops): heavy rules, coloured KPI caps, mono caps heads, big controls, separate heavy
     mission cards, folder tiles. C (Warm Modern): soft separate cards, icon tiles, soft tiles.
   ========================================================================== */
html[data-ui="new"] .ck-wrap:has(> .ckn #ckList) { max-width: 1180px; padding: 8px 32px 64px; }
html[data-ui="new"] .ck-wrap > .ckn:has(#ckList) { display: block; }
html[data-ui="new"] .ck-wrap:has(> .ckn #ckHeadTitle) > .ck-head { display: none; }
html[data-ui="new"] .ckn a { text-decoration: none; }

/* header: back link, title, meta line | actions */
html[data-ui="new"] .ckn-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 16px 24px; margin-bottom: 20px; }
html[data-ui="new"] .ckn-titles { display: flex; flex-direction: column; gap: 4px; flex: 1 1 360px; min-width: 0; }
html[data-ui="new"] .ckn-back { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 24px; font-size: var(--ss-fs-13); color: var(--ss-ink-3); }
html[data-ui="new"] .ckn-back:hover { color: var(--ss-ink); }
html[data-ui="new"] .ckn[data-ckn-view="landing"] .ckn-back { display: none; }
html[data-ui="new"] .ckn #ckHeadTitle h1 { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 0; font-size: var(--ss-c-h1-fs); font-weight: var(--ss-fw-semibold); letter-spacing: var(--ss-track-heading, -.01em); line-height: 1.15; color: var(--ss-ink); overflow-wrap: anywhere; }
html[data-ui="new"] .ckn #ckHeadTitle h1 > i.bi { display: none; }
html[data-ui="new"] .ckn #ckHeadTitle h1 .ck-badge { font-size: var(--ss-fs-12); font-weight: var(--ss-fw-medium); letter-spacing: 0; }
html[data-ui="new"] .ckn #ckHeadTitle .ck-hint { margin: 4px 0 0; font-size: var(--ss-fs-14); color: var(--ss-ink-2); }
html[data-ui="new"] .ckn .ck-sub { margin: 4px 0 0; max-width: 78ch; font-size: var(--ss-fs-13); color: var(--ss-ink-3); }
html[data-ui="new"] .ckn-meta { display: flex; flex-wrap: wrap; align-items: center; font-size: var(--ss-fs-13); color: var(--ss-ink-2); }
html[data-ui="new"] .ckn-meta:empty { display: none; }
html[data-ui="new"] .ckn-meta > span { white-space: nowrap; }
html[data-ui="new"] .ckn-meta > span + span::before { content: "·"; margin: 0 6px; color: var(--ss-ink-3); }
html[data-ui="new"] .ckn-meta .ckn-org { font-weight: var(--ss-fw-semibold); color: var(--ss-ink); }
html[data-ui="new"] .ckn-meta .ckn-org > i { margin-right: 4px; color: var(--ss-ink-3); }
html[data-ui="new"] .ckn-status { display: inline-flex; align-items: center; gap: 6px; padding: 1px 8px; border: var(--ss-bw) solid var(--ss-line-strong); border-radius: var(--ss-r-pill); font-weight: var(--ss-fw-medium); color: var(--ss-ink); text-transform: capitalize; }
html[data-ui="new"] .ckn-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--ss-info); }
html[data-ui="new"] .ckn-status.st-done .ckn-dot { background: var(--ss-success); }
html[data-ui="new"] .ckn-status.st-archived .ckn-dot { background: var(--ss-ink-3); }
html[data-ui="new"] .ckn-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 12px; }
html[data-ui="new"] .ckn-actions:empty { display: none; }
html[data-ui="new"] .ckn #ckHeadActions { flex-wrap: wrap; justify-content: flex-end; gap: 8px 12px !important; }
html[data-ui="new"] .ckn-actions .ck-attach { margin: 0; gap: 8px; }
html[data-ui="new"] .ckn-actions .ck-btn { height: var(--ss-c-btn-h, 32px); padding: 0 12px; border-radius: var(--ss-r); font-size: var(--ss-fs-13); font-weight: var(--ss-fw-medium); }
html[data-ui="new"] .ckn-actions .ck-btn.primary { background: var(--ss-action); border-color: var(--ss-action); color: var(--ss-on-action); box-shadow: none; }
html[data-ui="new"] .ckn-actions .ck-btn.primary:hover { background: var(--ss-action-hover); border-color: var(--ss-action-hover); color: var(--ss-on-action); }
html[data-ui="new"] .ckn-actions .ck-split-main { border-top-right-radius: 0; border-bottom-right-radius: 0; }
html[data-ui="new"] .ckn-actions .ck-split-caret { border-top-left-radius: 0; border-bottom-left-radius: 0; padding: 0 9px; border-left-color: color-mix(in srgb, var(--ss-on-action) 35%, transparent); }
html[data-ui="new"] .ckn-actions :is(.ck-timefmt-toggle, .ck-arch-toggle) { font-size: var(--ss-fs-13); color: var(--ss-ink-2); }

/* stat strip: the folder counts, or the project's money bar (Client · Value · Billing · Delivered · Contract · Invoice) */
html[data-ui="new"] .ckn-stats { margin-bottom: 16px; }
html[data-ui="new"] .ckn-stats:not(:has(.ckn-stat, .ck-money)) { display: none; }
html[data-ui="new"] .ckn-strip:empty { display: none; }
html[data-ui="new"] .ckn-stats :is(.ckn-strip, .ck-money) { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; margin: 0; padding: 0; border: var(--ss-bw) solid var(--ss-c-card-line); border-radius: var(--ss-c-card-r); background: var(--ss-surface); box-shadow: var(--ss-c-card-shadow); overflow: hidden; }
html[data-ui="new"] .ckn-stats :is(.ckn-stat, .ck-money-cell) { display: flex; flex-direction: column; justify-content: flex-start; gap: 6px; min-width: 0; padding: 16px; border: 0; border-left: var(--ss-bw) solid var(--ss-c-card-line); }
html[data-ui="new"] .ckn-stats :is(.ckn-stat, .ck-money-cell):first-child { border-left: 0; }
html[data-ui="new"] .ckn-stats .ck-money-cell:empty { display: none; }
html[data-ui="new"] .ckn-stats :is(.ckn-stat-lab, .ck-money-l) { display: flex; align-items: center; gap: 6px; font-size: var(--ss-fs-12); font-weight: var(--ss-fw-medium); letter-spacing: 0; text-transform: none; color: var(--ss-ink-2); }
html[data-ui="new"] .ckn-stat-lab i { font-size: 14px; color: var(--ss-ink-3); }
html[data-ui="new"] .ckn-stat-val { font-size: var(--ss-fs-24); font-weight: var(--ss-fw-semibold); line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ss-ink); }
html[data-ui="new"] .ckn-stats .ck-money-v { font-size: var(--ss-fs-16); font-weight: var(--ss-fw-semibold); line-height: 1.25; color: var(--ss-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-ui="new"] .ckn-stat-sub { font-size: var(--ss-fs-12); color: var(--ss-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-ui="new"] .ckn-stats .ck-money-inv-cell { justify-content: center; }
html[data-ui="new"] .ckn-stats :is(.ck-money-inv, .ck-money-portal) { color: var(--ss-action-text); font-size: var(--ss-fs-13); }

/* body: main | rail */
html[data-ui="new"] .ckn-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
html[data-ui="new"] .ckn-body:not(:has(.ckn-rail .ckn-slot > *)) { grid-template-columns: minmax(0, 1fr); }
html[data-ui="new"] :is(.ckn-main, .ckn-rail) { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
html[data-ui="new"] .ckn-rail:not(:has(.ckn-slot > *)) { display: none; }
html[data-ui="new"] .ckn-card { min-width: 0; border: var(--ss-bw) solid var(--ss-c-card-line); border-radius: var(--ss-c-card-r); background: var(--ss-surface); box-shadow: var(--ss-c-card-shadow); overflow: hidden; }
html[data-ui="new"] .ckn-rail > .ckn-card:not(:has(.ckn-slot > *)) { display: none; }
html[data-ui="new"] .ckn-missions:empty { display: none; }
html[data-ui="new"] .ckn-ch { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 16px; border-bottom: var(--ss-bw) solid var(--ss-line); }
html[data-ui="new"] .ckn-ch h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--ss-c-head-fs); font-weight: var(--ss-fw-semibold); color: var(--ss-ink); }
html[data-ui="new"] .ckn-ch h2 > i { display: none; color: var(--ss-ink-2); }
html[data-ui="new"] .ckn-empty { margin: 0; padding: 12px 16px; font-size: var(--ss-fs-13); color: var(--ss-ink-3); }
html[data-ui="new"] .ckn-deliv:has(.ck-tray:not([hidden])) .ckn-empty { display: none; }

/* the missions card: toolbar = its head (count + list/tile switch), the FAA bar, then the missions */
html[data-ui="new"] .ckn-missions > .ck-toolbar { min-height: 48px; margin: 0; padding: 6px 12px 6px 16px; border: 0; border-bottom: var(--ss-bw) solid var(--ss-line); border-radius: 0; background: transparent; }
html[data-ui="new"] .ckn-missions > .ck-toolbar::before { content: "Missions"; font-size: var(--ss-c-head-fs); font-weight: var(--ss-fw-semibold); color: var(--ss-ink); }
html[data-ui="new"] .ckn-missions > .ck-toolbar > [id^="ckcount-"] { display: inline !important; font-size: var(--ss-fs-12); color: var(--ss-ink-3); }
html[data-ui="new"] .ckn-missions .ck-view-toggle { border-color: var(--ss-line-strong); border-radius: var(--ss-r); }
html[data-ui="new"] .ckn-missions > .ck-faa-bar { margin: 0; padding: 10px 16px; border: 0; border-bottom: var(--ss-bw) solid var(--ss-line); border-radius: 0; background: var(--ss-bg-1); }
html[data-ui="new"] .ckn-missions > .ck-detail-missions { gap: 0; }
html[data-ui="new"] .ckn-missions .ck-mission-list:not(.ck-tiles) { gap: 0; }
html[data-ui="new"] .ckn-missions .ck-mission-list:not(.ck-tiles) > .ck-mission.ck-card { border: 0; border-top: var(--ss-bw) solid var(--ss-line); border-radius: 0; box-shadow: none; }
html[data-ui="new"] .ckn-missions .ck-mission-list:not(.ck-tiles) > .ck-mission.ck-card:first-child { border-top: 0; }
html[data-ui="new"] .ckn-missions .ck-mission-list.ck-tiles { padding: 16px; }
html[data-ui="new"] .ckn-missions .ck-mission-list > .ck-empty { padding: 16px; }
html[data-ui="new"] .ckn-missions :is(.ck-maps-error, .ck-maps-total) { margin: 0; padding: 8px 16px; border-top: var(--ss-bw) solid var(--ss-line); }
html[data-ui="new"] .ckn-missions .ck-legend { margin: 0; padding: 10px 16px; border-top: var(--ss-bw) solid var(--ss-line); background: var(--ss-bg-1); }
html[data-ui="new"] .ckn-missions .ck-detail-missions > [id^="ckbody-"] > .ck-loading { padding: 16px; }

/* a mission's head in the main column (narrower than Classic's full width): name on its own row,
   the step pill and the actions under it, so the name and address never squeeze to a word per line */
@media (min-width: 601px) {
  html[data-ui="new"] .ckn-missions .ck-mission-list:not(.ck-tiles) .sky-steps__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "chk name name tog" "chk pill act act"; gap: 8px 12px; align-items: center; }
  html[data-ui="new"] .ckn-missions .ck-mission-list:not(.ck-tiles) .sky-steps__check { grid-area: chk; align-self: start; margin-top: 3px; }
  html[data-ui="new"] .ckn-missions .ck-mission-list:not(.ck-tiles) .sky-steps__name { grid-area: name; }
  html[data-ui="new"] .ckn-missions .ck-mission-list:not(.ck-tiles) .sky-steps__pill { grid-area: pill; justify-self: start; }
  html[data-ui="new"] .ckn-missions .ck-mission-list:not(.ck-tiles) .sky-steps__act { grid-area: act; justify-self: end; flex-wrap: wrap; justify-content: flex-end; }
  html[data-ui="new"] .ckn-missions .ck-mission-list:not(.ck-tiles) .sky-steps__toggle { grid-area: tog; align-self: start; }
}
/* rail · Delivery: the tray as the card body */
html[data-ui="new"] .ckn-deliv .ckn-slot > .ck-tray { margin: 0; padding: 12px 16px; border: 0; border-radius: 0; background: none; box-shadow: none; font-size: var(--ss-fs-13); }
html[data-ui="new"] .ckn-deliv .ck-tray-ready li { flex-direction: column; align-items: flex-start; gap: 6px; }
html[data-ui="new"] .ckn-deliv .ck-deliv-summary { gap: 8px !important; }
html[data-ui="new"] .ckn-deliv .ck-deliv-summary > span[style*="flex:1"] { display: none; }
html[data-ui="new"] .ckn-deliv .ck-deliv-summary .ck-btn { width: 100%; justify-content: center; min-height: 36px; }
/* rail · Project: the project's tools (Edit, Move, Route plan, Field cards, ..., Stow, Delete) as rows */
html[data-ui="new"] .ckn-tools .ck-crumbbar { display: flex; flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 0; border: 0; }
html[data-ui="new"] .ckn-tools .ck-crumbbar > :is(.ck-crumb, span) { display: none; }
html[data-ui="new"] .ckn-tools .ck-crumbbar > .ck-btn { justify-content: flex-start; gap: 10px; width: 100%; min-height: 44px; margin: 0; padding: 0 16px; border: 0; border-top: var(--ss-bw) solid var(--ss-line); border-radius: 0; background: transparent; box-shadow: none; font-size: var(--ss-fs-13); color: var(--ss-ink); white-space: normal; text-align: left; }
html[data-ui="new"] .ckn-tools .ck-crumbbar > .ck-btn:first-of-type { border-top: 0; }
html[data-ui="new"] .ckn-tools .ck-crumbbar > .ck-btn:hover { background: var(--ss-bg-1); color: var(--ss-ink); }
html[data-ui="new"] .ckn-tools .ck-crumbbar > .ck-btn > i { width: 16px; color: var(--ss-ink-3); }
html[data-ui="new"] .ckn-tools .ck-crumbbar > .ck-btn.primary { color: var(--ss-action-text); }
html[data-ui="new"] .ckn-tools .ck-crumbbar > .ck-btn.danger,
html[data-ui="new"] .ckn-tools .ck-crumbbar > .ck-btn.danger > i { color: var(--ss-danger); }
html[data-ui="new"] .ckn-tools .ck-crumbbar > .ck-btn[aria-label]:not(:has(> :not(i)))::after { content: attr(aria-label); }
html[data-ui="new"] .ckn-tools .ckn-slot { padding: 0; }
/* rail · How folders work (the landing's explainer) */
html[data-ui="new"] .ckn-about .ck-folderhelp { margin: 0; padding: 12px 16px; border: 0; border-radius: 0; background: none; }
html[data-ui="new"] .ckn-about .ck-folderhelp p { font-size: var(--ss-fs-13); color: var(--ss-ink-2); }
html[data-ui="new"] .ckn-about .ck-folderhelp p + p { margin-top: 8px; font-size: var(--ss-fs-12); color: var(--ss-ink-3); }
html[data-ui="new"] .ckn-about .ckn-slot { padding: 0; }

/* main · the folders, a folder's projects, "Not in a project": A = one card of divided rows */
html[data-ui="new"] .ckn #ckList > .ck-folders,
html[data-ui="new"] .ckn #ckList > .ck-plist { display: flex; flex-direction: column; gap: 0; border: var(--ss-bw) solid var(--ss-c-card-line); border-radius: var(--ss-c-card-r); background: var(--ss-surface); box-shadow: var(--ss-c-card-shadow); overflow: hidden; }
html[data-ui="new"] .ckn #ckList > :is(.ck-folders, .ck-plist) > :is(.ck-folder, .ck-pcard) { min-height: 60px; padding: 10px 16px; gap: 12px; border: 0; border-top: var(--ss-bw) solid var(--ss-line); border-radius: 0; background: transparent; box-shadow: none; }
html[data-ui="new"] .ckn #ckList > :is(.ck-folders, .ck-plist) > :first-child { border-top: 0; }
html[data-ui="new"] .ckn #ckList > :is(.ck-folders, .ck-plist) > :is(.ck-folder, .ck-pcard):hover { background: var(--ss-bg-1); }
html[data-ui="new"] .ckn .ck-folder-ico { width: 32px; height: 32px; border-radius: var(--ss-r-sm); font-size: 16px; }
html[data-ui="new"] .ckn :is(.ck-folder-name, .ck-pcard-title) { font-size: var(--ss-fs-14); font-weight: var(--ss-fw-semibold); color: var(--ss-ink); }
html[data-ui="new"] .ckn :is(.ck-folder-meta, .ck-pcard-meta) { font-size: var(--ss-fs-12); color: var(--ss-ink-3); }
html[data-ui="new"] .ckn #ckList > .ck-crumbbar { margin: 0 0 12px; padding: 0; border: 0; gap: 8px; }
html[data-ui="new"] .ckn #ckList > .ck-crumbbar > :is(.ck-crumb:first-child, .ck-crumb-sep) { display: none; }
html[data-ui="new"] .ckn #ckList > .ck-crumbbar > .ck-crumb-name { font-size: var(--ss-c-head-fs); font-weight: var(--ss-fw-semibold); color: var(--ss-ink); }
html[data-ui="new"] .ckn #ckList > :is(.ck-empty, .ck-loading) { padding: 24px 16px; border: var(--ss-bw) dashed var(--ss-line-strong); border-radius: var(--ss-c-card-r); background: var(--ss-surface); color: var(--ss-ink-2); }
html[data-ui="new"] .ckn #ckUnassigned > .ck-job { margin: 0 !important; border: var(--ss-bw) solid var(--ss-c-card-line); border-radius: var(--ss-c-card-r); background: var(--ss-surface); box-shadow: var(--ss-c-card-shadow); }
html[data-ui="new"] .ckn #ckUnassigned .ck-job-head { min-height: 44px; padding: 0 16px; border-bottom: var(--ss-bw) solid var(--ss-line); cursor: default; }
html[data-ui="new"] .ckn #ckUnassigned .ck-job-head:hover { background: none; }
html[data-ui="new"] .ckn #ckUnassigned .ck-job-title { font-size: var(--ss-c-head-fs); font-weight: var(--ss-fw-semibold); color: var(--ss-ink); }
html[data-ui="new"] .ckn #ckUnassigned .ck-job-body { display: block; padding: 0; }
html[data-ui="new"] .ckn #ckUnassigned .ck-job-body > p { margin: 0 !important; padding: 10px 16px; font-size: var(--ss-fs-13); color: var(--ss-ink-3) !important; }
html[data-ui="new"] .ckn #ckUnassigned .ck-unbar { margin: 0 16px 10px; }
html[data-ui="new"] .ckn #ckUnassigned .ck-mission { min-height: 52px; padding: 8px 16px; border-bottom: 0; border-top: var(--ss-bw) solid var(--ss-line); }
html[data-ui="new"] .ckn #ckUnassigned .ck-m-name a { color: var(--ss-ink); font-weight: var(--ss-fw-medium); }

/* ---- B · Field Ops: heavy rules, KPI caps, mono caps heads, big controls, tiles, heavy mission cards ---- */
html[data-ui="new"][data-theme="field-ops"] .ck-wrap:has(> .ckn #ckList) { max-width: 1196px; padding: 4px 24px 64px; }
html[data-ui="new"][data-theme="field-ops"] .ckn #ckHeadTitle h1 { font-weight: 800; }
html[data-ui="new"][data-theme="field-ops"] .ckn-meta { font-size: var(--ss-fs-16); }
html[data-ui="new"][data-theme="field-ops"] .ckn-back { font-size: var(--ss-fs-14); font-weight: var(--ss-fw-semibold); color: var(--ss-action-text); min-height: 32px; }
html[data-ui="new"][data-theme="field-ops"] .ckn-status { border-width: var(--ss-bw-strong); font: var(--ss-fw-semibold) var(--ss-fs-12)/1.4 var(--ss-font-mono); text-transform: uppercase; letter-spacing: var(--ss-track-caps); padding: 3px 10px; border-radius: var(--ss-r-sm); }
html[data-ui="new"][data-theme="field-ops"] .ckn-actions .ck-btn { height: var(--ss-tap); padding: 0 18px; border-width: var(--ss-bw-strong); font-size: var(--ss-fs-16); font-weight: var(--ss-fw-semibold); }
html[data-ui="new"][data-theme="field-ops"] .ckn-actions .ck-split-caret { padding: 0 14px; }
html[data-ui="new"][data-theme="field-ops"] .ckn-actions :is(.ck-timefmt-toggle, .ck-arch-toggle) { min-height: var(--ss-tap); font-size: var(--ss-fs-14); font-weight: var(--ss-fw-medium); }
html[data-ui="new"][data-theme="field-ops"] .ckn-actions :is(.ck-timefmt-toggle, .ck-arch-toggle) input { width: 22px; height: 22px; }
html[data-ui="new"][data-theme="field-ops"] .ckn-stats :is(.ckn-strip, .ck-money) { border-width: var(--ss-bw-strong); }
html[data-ui="new"][data-theme="field-ops"] .ckn-stats :is(.ckn-stat, .ck-money-cell) { border-left-width: var(--ss-bw-strong); border-top: 4px solid var(--kpi-c, var(--ss-ink)); padding: 14px 16px 16px; gap: 8px; }
html[data-ui="new"][data-theme="field-ops"] .ckn-stats :is(.ckn-stat[data-k="inbox"], .ckn-stat[data-k="open"], .ck-money-cell:nth-child(2)) { --kpi-c: var(--ss-info-fill); }
html[data-ui="new"][data-theme="field-ops"] .ckn-stats :is(.ckn-stat[data-k="done"], .ck-money-cell:nth-child(4)) { --kpi-c: var(--ss-success-fill); }
html[data-ui="new"][data-theme="field-ops"] .ckn-stats :is(.ckn-stat[data-k="projects"], .ck-money-cell:nth-child(3)) { --kpi-c: var(--ss-accent); }
html[data-ui="new"][data-theme="field-ops"] .ckn-stats :is(.ckn-stat[data-k="stowed"], .ck-money-cell:nth-child(5), .ck-money-inv-cell) { --kpi-c: var(--ss-line-2); }
html[data-ui="new"][data-theme="field-ops"] .ckn-stats :is(.ckn-stat-lab, .ck-money-l) { font: var(--ss-fw-medium) var(--ss-fs-11)/1.2 var(--ss-font-mono); text-transform: uppercase; letter-spacing: var(--ss-track-caps); color: var(--ss-ink-2); }
html[data-ui="new"][data-theme="field-ops"] .ckn-stat-lab i { display: none; }
html[data-ui="new"][data-theme="field-ops"] .ckn-stat-val { font-size: var(--ss-fs-32); font-weight: 800; }
html[data-ui="new"][data-theme="field-ops"] .ckn-stats .ck-money-v { font-size: var(--ss-fs-20); font-weight: 800; }
html[data-ui="new"][data-theme="field-ops"] .ckn-stat-sub { font-size: var(--ss-fs-14); color: var(--ss-ink-2); }
html[data-ui="new"][data-theme="field-ops"] .ckn-stats :is(.ck-money-inv, .ck-money-portal) { font-size: var(--ss-fs-16); }
html[data-ui="new"][data-theme="field-ops"] .ckn-body { grid-template-columns: minmax(0, 1fr) 360px; }
html[data-ui="new"][data-theme="field-ops"] .ckn-card { border-width: var(--ss-bw-strong); }
html[data-ui="new"][data-theme="field-ops"] .ckn-ch { min-height: 52px; border-bottom-width: var(--ss-bw-strong); }
html[data-ui="new"][data-theme="field-ops"] .ckn-ch h2 { font: 700 var(--ss-fs-13)/1.2 var(--ss-font-mono); text-transform: uppercase; letter-spacing: var(--ss-track-caps); }
html[data-ui="new"][data-theme="field-ops"] .ckn-ch h2 > i { display: inline-block; font-size: 18px; color: var(--ss-ink); }
/* the missions: a heavy card per mission under a mono caps head, not rows */
html[data-ui="new"][data-theme="field-ops"] .ckn-missions { border: 0; background: none; box-shadow: none; overflow: visible; }
html[data-ui="new"][data-theme="field-ops"] .ckn-missions > .ck-toolbar { min-height: var(--ss-tap); margin-bottom: 12px; padding: 0; border: 0; }
html[data-ui="new"][data-theme="field-ops"] .ckn-missions > .ck-toolbar::before { font: 700 var(--ss-fs-14)/1.2 var(--ss-font-mono); text-transform: uppercase; letter-spacing: var(--ss-track-caps); }
html[data-ui="new"][data-theme="field-ops"] .ckn-missions > .ck-toolbar > [id^="ckcount-"] { font: var(--ss-fw-semibold) var(--ss-fs-11)/1 var(--ss-font-mono); text-transform: uppercase; padding: 6px 8px; border: var(--ss-bw-strong) solid var(--ss-line-2); border-radius: var(--ss-r-sm); color: var(--ss-ink-2); }
html[data-ui="new"][data-theme="field-ops"] .ckn-missions .ck-vt-btn { width: var(--ss-tap); height: var(--ss-tap); font-size: 20px; }
html[data-ui="new"][data-theme="field-ops"] .ckn-missions .ck-view-toggle { border-width: var(--ss-bw-strong); }
html[data-ui="new"][data-theme="field-ops"] .ckn-missions > .ck-faa-bar { margin-bottom: 12px; padding: 12px 16px; border: var(--ss-bw-strong) solid var(--ss-line-2); border-radius: var(--ss-c-card-r); }
html[data-ui="new"][data-theme="field-ops"] .ckn-missions .ck-mission-list:not(.ck-tiles) { gap: 12px; }
html[data-ui="new"][data-theme="field-ops"] .ckn-missions .ck-mission-list > .ck-mission.ck-card,
html[data-ui="new"][data-theme="field-ops"] .ckn-missions .ck-mission-list:not(.ck-tiles) > .ck-mission.ck-card { border: var(--ss-bw-strong) solid var(--ss-line-2); border-radius: var(--ss-c-card-r); }
html[data-ui="new"][data-theme="field-ops"] .ckn-missions .ck-mission-list.ck-tiles { padding: 0; }
html[data-ui="new"][data-theme="field-ops"] .ckn-missions .sky-steps__title { font-size: var(--ss-fs-16); font-weight: 700; }
html[data-ui="new"][data-theme="field-ops"] .ckn-missions :is(.ck-maps-error, .ck-maps-total, .ck-legend) { border: 0; background: none; padding: 10px 2px 0; }
html[data-ui="new"][data-theme="field-ops"] .ckn-missions .ck-legend { font-size: var(--ss-fs-14); }
html[data-ui="new"][data-theme="field-ops"] .ckn-tools .ck-crumbbar > .ck-btn { min-height: var(--ss-tap); font-size: var(--ss-fs-16); font-weight: var(--ss-fw-medium); border-top-width: var(--ss-bw-strong); }
html[data-ui="new"][data-theme="field-ops"] .ckn-tools .ck-crumbbar > .ck-btn > i { font-size: 18px; color: var(--ss-ink); }
html[data-ui="new"][data-theme="field-ops"] .ckn-deliv .ck-deliv-summary .ck-btn,
html[data-ui="new"][data-theme="field-ops"] .ckn-deliv .ck-tray-ready .ck-btn { min-height: var(--ss-tap); font-size: var(--ss-fs-16); }
html[data-ui="new"][data-theme="field-ops"] :is(.ckn-deliv .ck-tray, .ckn-about .ck-folderhelp p, .ckn-empty) { font-size: var(--ss-fs-14); }
/* folders and projects: big tiles */
html[data-ui="new"][data-theme="field-ops"] .ckn #ckList > :is(.ck-folders, .ck-plist) { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; border: 0; background: none; box-shadow: none; overflow: visible; }
html[data-ui="new"][data-theme="field-ops"] .ckn #ckList > :is(.ck-folders, .ck-plist) > :is(.ck-folder, .ck-pcard) { min-height: 88px; padding: 16px; gap: 14px; border: var(--ss-bw-strong) solid var(--ss-line-2); border-radius: var(--ss-c-card-r); background: var(--ss-surface); }
html[data-ui="new"][data-theme="field-ops"] .ckn #ckList > :is(.ck-folders, .ck-plist) > :is(.ck-folder, .ck-pcard):hover { border-color: var(--ss-ink); background: var(--ss-surface); }
html[data-ui="new"][data-theme="field-ops"] .ckn .ck-folder-ico { width: 48px; height: 48px; border-radius: var(--ss-r); font-size: 22px; }
html[data-ui="new"][data-theme="field-ops"] .ckn :is(.ck-folder-name, .ck-pcard-title) { font-size: var(--ss-fs-18); font-weight: 700; }
html[data-ui="new"][data-theme="field-ops"] .ckn :is(.ck-folder-meta, .ck-pcard-meta) { font-size: var(--ss-fs-14); color: var(--ss-ink-2); }
html[data-ui="new"][data-theme="field-ops"] .ckn .ck-folder-caret { font-size: 20px; color: var(--ss-ink); }
html[data-ui="new"][data-theme="field-ops"] .ckn #ckUnassigned > .ck-job { border-width: var(--ss-bw-strong); }
html[data-ui="new"][data-theme="field-ops"] .ckn #ckUnassigned .ck-job-title { font: 700 var(--ss-fs-13)/1.2 var(--ss-font-mono); text-transform: uppercase; letter-spacing: var(--ss-track-caps); }
html[data-ui="new"][data-theme="field-ops"] .ckn #ckUnassigned .ck-mission { min-height: 64px; border-top-width: var(--ss-bw-strong); }
html[data-ui="new"][data-theme="field-ops"] .ckn #ckUnassigned .ck-m-name { font-size: var(--ss-fs-16); }
html[data-ui="new"][data-theme="field-ops"] .ckn #ckUnassigned .ck-btn { min-height: 44px; padding: 0 14px; font-size: var(--ss-fs-14); border-width: var(--ss-bw-strong); }

/* ---- C · Warm Modern: soft separate cards, icon tiles, soft folder/project tiles ---- */
html[data-ui="new"][data-theme="warm-modern"] .ck-wrap:has(> .ckn #ckList) { max-width: 1192px; padding: 8px 28px 64px; }
html[data-ui="new"][data-theme="warm-modern"] .ckn-head { margin-bottom: 16px; }
html[data-ui="new"][data-theme="warm-modern"] .ckn-status { border: 0; background: var(--ss-info-soft); color: var(--ss-info); }
html[data-ui="new"][data-theme="warm-modern"] .ckn-status.st-done { background: var(--ss-success-soft); color: var(--ss-success); }
html[data-ui="new"][data-theme="warm-modern"] .ckn-status.st-archived { background: var(--ss-bg-2); color: var(--ss-ink-2); }
html[data-ui="new"][data-theme="warm-modern"] .ckn-actions .ck-btn { border-radius: var(--ss-r-pill); }
html[data-ui="new"][data-theme="warm-modern"] .ckn-actions .ck-split-main { border-radius: var(--ss-r-pill) 0 0 var(--ss-r-pill); }
html[data-ui="new"][data-theme="warm-modern"] .ckn-actions .ck-split-caret { border-radius: 0 var(--ss-r-pill) var(--ss-r-pill) 0; }
html[data-ui="new"][data-theme="warm-modern"] .ckn-stats :is(.ckn-strip, .ck-money) { gap: 14px; border: 0; background: none; box-shadow: none; overflow: visible; }
html[data-ui="new"][data-theme="warm-modern"] .ckn-stats :is(.ckn-stat, .ck-money-cell) { border: var(--ss-bw) solid var(--ss-c-card-line); border-radius: var(--ss-c-card-r); background: var(--ss-surface); box-shadow: var(--ss-c-card-shadow); padding: 14px 16px; gap: 8px; }
html[data-ui="new"][data-theme="warm-modern"] .ckn-stats :is(.ckn-stat-lab, .ck-money-l) { font-size: var(--ss-fs-13); color: var(--ss-ink); gap: 10px; }
html[data-ui="new"][data-theme="warm-modern"] .ckn-stat-lab i { width: 28px; height: 28px; border-radius: var(--ss-r-sm); display: inline-flex; align-items: center; justify-content: center; background: var(--ss-accent-soft); color: var(--ss-accent-text); font-size: 15px; }
html[data-ui="new"][data-theme="warm-modern"] .ckn-stat:is([data-k="inbox"], [data-k="open"]) .ckn-stat-lab i { background: var(--ss-warning-soft); color: var(--ss-warning); }
html[data-ui="new"][data-theme="warm-modern"] .ckn-stat[data-k="done"] .ckn-stat-lab i { background: var(--ss-success-soft); color: var(--ss-success); }
html[data-ui="new"][data-theme="warm-modern"] .ckn-stat[data-k="projects"] .ckn-stat-lab i { background: var(--ss-info-soft); color: var(--ss-info); }
html[data-ui="new"][data-theme="warm-modern"] .ckn-stat-val { font-size: var(--ss-fs-28); }
html[data-ui="new"][data-theme="warm-modern"] .ckn-body { grid-template-columns: minmax(0, 1fr) 340px; }
html[data-ui="new"][data-theme="warm-modern"] .ckn-ch { border-bottom: 0; min-height: 52px; }
html[data-ui="new"][data-theme="warm-modern"] .ckn-ch h2 { font-size: var(--ss-fs-14); }
html[data-ui="new"][data-theme="warm-modern"] .ckn-ch h2 > i { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--ss-r-sm); background: var(--ss-accent-soft); color: var(--ss-accent-text); font-size: 14px; }
html[data-ui="new"][data-theme="warm-modern"] .ckn-deliv .ckn-ch h2 > i { background: var(--ss-success-soft); color: var(--ss-success); }
html[data-ui="new"][data-theme="warm-modern"] .ckn-about .ckn-ch h2 > i { background: var(--ss-info-soft); color: var(--ss-info); }
html[data-ui="new"][data-theme="warm-modern"] .ckn-tools .ck-crumbbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0 16px 16px; }
html[data-ui="new"][data-theme="warm-modern"] .ckn-tools .ck-crumbbar > .ck-btn { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 8px; min-height: 0; padding: 10px; border: var(--ss-bw) solid var(--ss-line); border-radius: var(--ss-r); }
html[data-ui="new"][data-theme="warm-modern"] .ckn-tools .ck-crumbbar > .ck-btn:first-of-type { border-top: var(--ss-bw) solid var(--ss-line); }
html[data-ui="new"][data-theme="warm-modern"] .ckn-tools .ck-crumbbar > .ck-btn > i { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--ss-r-sm); background: var(--ss-bg-2); color: var(--ss-ink-2); }
html[data-ui="new"][data-theme="warm-modern"] .ckn-tools .ck-crumbbar > .ck-btn.danger > i { background: var(--ss-danger-soft); }
html[data-ui="new"][data-theme="warm-modern"] .ckn-missions { border: 0; background: none; box-shadow: none; overflow: visible; }
html[data-ui="new"][data-theme="warm-modern"] .ckn-missions > .ck-toolbar { margin-bottom: 10px; padding: 0 2px; border: 0; }
html[data-ui="new"][data-theme="warm-modern"] .ckn-missions > .ck-toolbar > [id^="ckcount-"] { min-width: 22px; padding: 2px 8px; border-radius: var(--ss-r-pill); background: var(--ss-accent-soft); color: var(--ss-accent-text); font-weight: var(--ss-fw-semibold); }
html[data-ui="new"][data-theme="warm-modern"] .ckn-missions > .ck-faa-bar { margin-bottom: 10px; border: var(--ss-bw) solid var(--ss-c-card-line); border-radius: var(--ss-c-card-r); background: var(--ss-surface); box-shadow: var(--ss-c-card-shadow); }
html[data-ui="new"][data-theme="warm-modern"] .ckn-missions .ck-mission-list:not(.ck-tiles) { gap: 12px; }
html[data-ui="new"][data-theme="warm-modern"] .ckn-missions .ck-mission-list > .ck-mission.ck-card,
html[data-ui="new"][data-theme="warm-modern"] .ckn-missions .ck-mission-list:not(.ck-tiles) > .ck-mission.ck-card { border: var(--ss-bw) solid var(--ss-c-card-line); border-radius: var(--ss-c-card-r); background: var(--ss-surface); box-shadow: var(--ss-c-card-shadow); overflow: hidden; }
html[data-ui="new"][data-theme="warm-modern"] .ckn-missions .ck-mission-list.ck-tiles { padding: 0; }
html[data-ui="new"][data-theme="warm-modern"] .ckn-missions :is(.ck-maps-error, .ck-maps-total, .ck-legend) { border: 0; background: none; padding: 10px 4px 0; }
html[data-ui="new"][data-theme="warm-modern"] .ckn #ckList > :is(.ck-folders, .ck-plist) { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; border: 0; background: none; box-shadow: none; overflow: visible; }
html[data-ui="new"][data-theme="warm-modern"] .ckn #ckList > :is(.ck-folders, .ck-plist) > :is(.ck-folder, .ck-pcard) { flex-wrap: wrap; align-items: flex-start; min-height: 88px; padding: 16px; border: var(--ss-bw) solid var(--ss-c-card-line); border-radius: var(--ss-c-card-r); background: var(--ss-surface); box-shadow: var(--ss-c-card-shadow); }
html[data-ui="new"][data-theme="warm-modern"] .ckn #ckList > :is(.ck-folders, .ck-plist) > :is(.ck-folder, .ck-pcard):hover { border-color: var(--ss-line-strong); background: var(--ss-surface); }
html[data-ui="new"][data-theme="warm-modern"] .ckn .ck-folder-ico { width: 36px; height: 36px; border-radius: var(--ss-r); }
html[data-ui="new"][data-theme="warm-modern"] .ckn .ck-folder-body { flex: 1 1 100%; order: 2; }
html[data-ui="new"][data-theme="warm-modern"] .ckn .ck-folder-caret { margin-left: auto; }
html[data-ui="new"][data-theme="warm-modern"] .ckn #ckUnassigned .ck-job-head { border-bottom: 0; min-height: 52px; }
html[data-ui="new"][data-theme="warm-modern"] .ckn #ckUnassigned .ck-mission { border-top-style: dashed; }

/* phones and narrow windows: one column, the rail under the missions, the stats two-up */
@media (max-width: 1100px) {
  html[data-ui="new"] .ckn-body,
  html[data-ui="new"][data-theme] .ckn-body { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  html[data-ui="new"] .ck-wrap:has(> .ckn #ckList),
  html[data-ui="new"][data-theme] .ck-wrap:has(> .ckn #ckList) { padding: 16px 16px 48px; }
  html[data-ui="new"] .ckn-head { flex-direction: column; align-items: stretch; gap: 12px; }
  html[data-ui="new"] .ckn-titles { flex-basis: auto; }
  html[data-ui="new"] .ckn-back { min-height: 44px; }
  html[data-ui="new"] .ckn-meta > span { white-space: normal; }
  html[data-ui="new"] .ckn-actions { justify-content: flex-start; }
  html[data-ui="new"] .ckn #ckHeadActions { justify-content: flex-start; width: 100%; }
  html[data-ui="new"] .ckn-actions > [id^="ckAttachRow-"] { width: 100%; }
  html[data-ui="new"] .ckn-actions .ck-attach > * { flex: 1 1 auto; }
  html[data-ui="new"] .ckn-actions .ck-split { display: flex; }
  html[data-ui="new"] .ckn-actions .ck-split-main { flex: 1 1 auto; justify-content: center; }
  html[data-ui="new"] .ckn :is(.ck-btn, .ck-vt-btn, .ck-crumb) { min-height: 44px; }
  html[data-ui="new"] .ckn-actions .ck-btn { height: auto; justify-content: center; }
  html[data-ui="new"] .ckn-actions :is(.ck-timefmt-toggle, .ck-arch-toggle) { min-height: 44px; }
  html[data-ui="new"] .ckn .ck-vt-btn { min-width: 44px; }
  html[data-ui="new"] .ckn #ckList > .ck-plist > .ck-pcard,
  html[data-ui="new"] .ckn #ckList > .ck-folders > .ck-folder { min-height: 60px; }
  html[data-ui="new"] .ckn-stats :is(.ckn-strip, .ck-money) { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-ui="new"] .ckn-stats :is(.ckn-stat, .ck-money-cell) { border-left: 0; border-top: var(--ss-bw) solid var(--ss-c-card-line); padding: 12px 14px; }
  html[data-ui="new"] .ckn-stats :is(.ckn-stat, .ck-money-cell):nth-child(even) { border-left: var(--ss-bw) solid var(--ss-c-card-line); }
  html[data-ui="new"] .ckn-stats :is(.ckn-stat, .ck-money-cell):nth-child(-n+2) { border-top: 0; }
  html[data-ui="new"] .ckn-stats .ck-money-v { white-space: normal; }
  html[data-ui="new"] .ckn-stat-sub { white-space: normal; }
  html[data-ui="new"][data-theme="field-ops"] .ckn-stats :is(.ckn-stat, .ck-money-cell) { border-top: 4px solid var(--kpi-c, var(--ss-ink)); }
  html[data-ui="new"][data-theme="field-ops"] .ckn-stat-val { font-size: var(--ss-fs-28); }
  html[data-ui="new"][data-theme="warm-modern"] .ckn-stats :is(.ckn-strip, .ck-money) { gap: 10px; }
  html[data-ui="new"][data-theme="warm-modern"] .ckn-stats :is(.ckn-stat, .ck-money-cell) { border: var(--ss-bw) solid var(--ss-c-card-line); }
  html[data-ui="new"] .ckn-missions > .ck-toolbar { flex-wrap: nowrap; }
  html[data-ui="new"] .ckn-missions > .ck-faa-bar .ck-btn { width: 100%; justify-content: center; white-space: normal; }
  html[data-ui="new"] .ckn #ckList > .ck-crumbbar { flex-wrap: wrap; }
  html[data-ui="new"] .ckn #ckUnassigned .ck-mission { flex-wrap: wrap; }
  html[data-ui="new"] .ckn #ckUnassigned .ck-mission .ck-btn { flex: 1 1 100%; justify-content: center; }
  html[data-ui="new"][data-theme="warm-modern"] .ckn #ckList > :is(.ck-folders, .ck-plist) > :is(.ck-folder, .ck-pcard) { min-height: 0; }
  /* a mission's actions wrap inside the card: the long "Already flew it?" button and the ⋯ menu stay reachable */
  html[data-ui="new"] .ckn-missions .sky-steps__act { flex-wrap: wrap; }
  html[data-ui="new"] .ckn-missions .sky-steps__act > .sky-steps__btn--secondary { flex: 1 1 auto; justify-content: center; white-space: normal; }
  html[data-ui="new"] .ckn #ckUnassigned .ck-m-name > a:first-child { display: flex; align-items: center; min-height: 44px; }
  /* Field Ops: gloves, 56px everywhere a finger lands */
  html[data-ui="new"][data-theme="field-ops"] .ckn :is(.ck-btn, .ck-vt-btn, .ckn-back, .ck-crumb, .ck-timefmt-toggle, .ck-arch-toggle) { min-height: var(--ss-tap); }
  html[data-ui="new"][data-theme="field-ops"] .ckn .ck-vt-btn { min-width: var(--ss-tap); }
  html[data-ui="new"][data-theme="field-ops"] .ckn :is(#ckUnassigned .ck-btn, #ckUnassigned .ck-m-name > a:first-child, .ck-money-inv, .sky-steps__title-link) { display: inline-flex; align-items: center; min-height: var(--ss-tap); }
  html[data-ui="new"][data-theme="field-ops"] .ckn .sky-steps :is(.sky-steps__btn, .sky-steps__toggle, .sky-steps__link, .sky-steps__chip, .sky-steps__mi, .sky-steps__colink, .sky-steps__mapsel select) { min-height: var(--ss-tap); }
  html[data-ui="new"][data-theme="field-ops"] .ckn .sky-steps :is(.sky-steps__btn--icon, .sky-steps__toggle) { width: var(--ss-tap); height: var(--ss-tap); }
  html[data-ui="new"][data-theme="field-ops"] .ckn .sky-steps__check { width: 28px; height: 28px; }
  html[data-ui="new"][data-theme="field-ops"] .ckn #ckList > :is(.ck-folders, .ck-plist) { grid-template-columns: minmax(0, 1fr); }
}
/* === Themes fix #2: Flight Brief + Missions === */
/* ==========================================================================
   Themes fix #2 (admin 2026-10-18): Field › Today › Flight Brief (skysuite-caster
   outlook.html, .fo-wrap) and Field › Missions › Missions (skysuite-plan
   missions_list.html, #schedShell / .sky-sched, the Schedule view), the candidates' layouts.
   CSS only: both pages already render every node these layouts need (the brief is drawn by
   the server; the day chips, the day card and the buckets are drawn by the page's own JS into
   fixed ids), so the new UI re-lays them out here and the templates, their ids, handlers and
   fetches are untouched. Classic never loads this file (John's dual-UI rule).
   Selectors carry .fo-wrap / .sky-sched: both templates have their own rules, and theirs come
   later in the page, so ours must out-rank them rather than tie. Nothing here hides anything,
   and a node the page's JS hides with [hidden] (#foFlown, a Planned row) never gets a display.
     A  Clean Pro / Clean Pro Field: brief = header actions, a hero card (verdict | forecast
        tiles), mission cards two-up, lists as cards. Missions = the day card (map, then the
        numbered run) beside an agenda rail of the buckets.
     B  Field Ops: a verdict banner, big forecast tiles, one column of mission cards with the
        actions in a thumb row, 56px controls. Missions in one column: map on top, big run
        cards, big day tiles.
     C  Warm Modern: A's layout with soft cards, tinted tiles and soft pills.
   ========================================================================== */

/* ---- caster · Flight Brief (A, the base for every new theme) ---- */
html[data-ui="new"] .fo-wrap { max-width: 1120px; padding: 8px 32px 64px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; align-items: start; }
html[data-ui="new"] .fo-wrap > * { grid-column: 1 / -1; min-width: 0; }
html[data-ui="new"] .fo-wrap > .fo-card { grid-column: auto; }
html[data-ui="new"] .fo-wrap a { text-decoration: none; }

/* header: title + date, Active / Stowed and Calendar on the title's baseline */
html[data-ui="new"] .fo-wrap > .fo-head { align-items: flex-end !important; gap: 16px 24px !important; margin-bottom: 20px; }
html[data-ui="new"] .fo-wrap .fo-head h1 { font-size: var(--ss-c-h1-fs); font-weight: var(--ss-fw-semibold); letter-spacing: var(--ss-track-heading, -.01em); line-height: 1.2; color: var(--ss-ink); }
html[data-ui="new"] .fo-wrap .fo-head h1 > i.bi { margin-right: 2px; font-size: .8em; color: var(--ss-ink-3) !important; }
html[data-ui="new"] .fo-wrap .fo-sub { margin-top: 4px; font-size: var(--ss-fs-13); color: var(--ss-ink-3); }
html[data-ui="new"] .fo-wrap .fo-head-r { gap: 8px; }
html[data-ui="new"] .fo-wrap .fo-shelf { gap: 2px; padding: 2px; border: var(--ss-bw) solid var(--ss-line-2); border-radius: var(--ss-r); background: var(--ss-bg-2); }
html[data-ui="new"] .fo-wrap .fo-shelf a { min-height: calc(var(--ss-ctl-h) - 6px); padding: 0 12px; border-radius: calc(var(--ss-r) - 2px); font-size: var(--ss-fs-13); font-weight: var(--ss-fw-medium); color: var(--ss-ink-2); }
html[data-ui="new"] .fo-wrap .fo-shelf a + a { border-left: 0; }
html[data-ui="new"] .fo-wrap .fo-shelf a.on { background: var(--ss-surface); color: var(--ss-ink); box-shadow: var(--ss-shadow-sm); }
html[data-ui="new"] .fo-wrap .fo-head-r > .fo-cta { display: inline-flex; align-items: center; gap: 6px; min-height: var(--ss-ctl-h); padding: 0 12px; border: var(--ss-bw) solid var(--ss-line-2) !important; border-radius: var(--ss-r); background: var(--ss-surface) !important; color: var(--ss-ink) !important; font-size: var(--ss-fs-13); font-weight: var(--ss-fw-medium); }
html[data-ui="new"] .fo-wrap .fo-head-r > .fo-cta > i { margin: 0 !important; color: var(--ss-ink-2); }

/* the hero: today's brief. Verdict on the left, the forecast tiles on the right */
html[data-ui="new"] .fo-wrap > .tb { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 20px; margin: 0 0 24px; padding: 0 20px 16px; border: var(--ss-bw) solid var(--ss-c-card-line); border-top: 4px solid var(--ss-line-2); border-radius: var(--ss-c-card-r); background: var(--ss-surface); box-shadow: var(--ss-c-card-shadow); overflow: hidden; }
html[data-ui="new"] .fo-wrap > .tb > * { grid-column: 1 / -1; min-width: 0; }
html[data-ui="new"] .fo-wrap > .tb > .tb-top { grid-column: 1; }
html[data-ui="new"] .fo-wrap > .tb > .tb-metrics { grid-column: 2; }
html[data-ui="new"] .fo-wrap > .tb.go { border-top-color: var(--ss-success-fill); }
html[data-ui="new"] .fo-wrap > .tb.caution { border-top-color: var(--ss-warning-fill); }
html[data-ui="new"] .fo-wrap > .tb.nofly { border-top-color: var(--ss-danger-fill); }
html[data-ui="new"] .fo-wrap .tb-hd,
html[data-ui="new"] .fo-wrap .tb > .tb-eyebrow { align-items: center; margin: 0 -20px 16px; padding: 10px 20px; border-bottom: var(--ss-bw) solid var(--ss-line); background: var(--ss-c-head-bg, transparent); }
html[data-ui="new"] .fo-wrap .tb-eyebrow { display: flex; align-items: center; gap: 8px; font-size: var(--ss-c-head-fs); font-weight: var(--ss-fw-semibold); text-transform: none; letter-spacing: 0; color: var(--ss-ink); }
html[data-ui="new"] .fo-wrap .tb-eyebrow > i { color: var(--ss-ink-3); }
html[data-ui="new"] .fo-wrap .tb-hd-r { gap: 8px; }
html[data-ui="new"] .fo-wrap .tb-locbtn { min-height: var(--ss-ctl-h); padding: 0 12px; border: var(--ss-bw) solid var(--ss-line-2); border-radius: var(--ss-r); background: var(--ss-surface); color: var(--ss-ink); font-size: var(--ss-fs-13); font-weight: var(--ss-fw-medium); }
html[data-ui="new"] .fo-wrap .tb-locbtn .bi { color: var(--ss-ink-2); }
html[data-ui="new"] .fo-wrap .tb-locbtn:is(:hover, :focus-visible, [aria-expanded="true"]) { border-color: var(--ss-ink-3); background: var(--ss-bg-1); }
html[data-ui="new"] .fo-wrap .tb-full { display: inline-flex; align-items: center; min-height: var(--ss-ctl-h); padding: 0 14px; border-radius: var(--ss-r); background: var(--ss-action); color: var(--ss-on-action); font-size: var(--ss-fs-13); font-weight: var(--ss-fw-semibold); }
html[data-ui="new"] .fo-wrap .tb-full:hover { background: var(--ss-action-hover); text-decoration: none; }
html[data-ui="new"] .fo-wrap .tb-top { flex-direction: column; align-items: flex-start; align-self: stretch; gap: 14px; padding: 18px; border-radius: var(--ss-r-lg, var(--ss-r)); background: var(--ss-bg-1); }
html[data-ui="new"] .fo-wrap .tb.go .tb-top { background: var(--ss-success-soft); }
html[data-ui="new"] .fo-wrap .tb.caution .tb-top { background: var(--ss-warning-soft); }
html[data-ui="new"] .fo-wrap .tb.nofly .tb-top { background: var(--ss-danger-soft); }
html[data-ui="new"] .fo-wrap .tb-badge { padding: 10px 18px; border-radius: var(--ss-r); font-size: var(--ss-fs-28); font-weight: 800; letter-spacing: .04em; box-shadow: none; }
html[data-ui="new"] .fo-wrap .tb-badge.go { background: var(--ss-success-fill); color: var(--ss-on-success); }
html[data-ui="new"] .fo-wrap .tb-badge.caution { background: var(--ss-warning-fill); color: var(--ss-on-warning); }
html[data-ui="new"] .fo-wrap .tb-badge.nofly { background: var(--ss-danger-fill); color: var(--ss-on-danger); }
html[data-ui="new"] .fo-wrap .tb-badge.na { background: var(--ss-bg-3); color: var(--ss-ink-2); }
html[data-ui="new"] .fo-wrap .tb-mid { width: 100%; }
html[data-ui="new"] .fo-wrap .tb-where { gap: 6px; font-size: var(--ss-fs-16); font-weight: var(--ss-fw-semibold); color: var(--ss-ink); }
html[data-ui="new"] .fo-wrap .tb-where :is(.dot, .date) { font-weight: var(--ss-fw-regular, 400); color: var(--ss-ink-2); }
html[data-ui="new"] .fo-wrap .tb-summary { margin-top: 6px; font-size: var(--ss-fs-14); line-height: 1.45; color: var(--ss-ink-2); }
html[data-ui="new"] .fo-wrap .tb-mine { padding: 1px 8px; border-color: var(--ss-line-2); border-radius: var(--ss-r-pill); font-size: var(--ss-fs-12); font-weight: var(--ss-fw-medium); text-transform: none; letter-spacing: 0; color: var(--ss-ink-2); }
html[data-ui="new"] .fo-wrap .tb-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; gap: 8px; margin: 0; }
html[data-ui="new"] .fo-wrap .tb-chip { min-width: 0; gap: 4px; padding: 12px 14px; border: var(--ss-bw) solid var(--ss-line); border-radius: var(--ss-r); background: var(--ss-surface); }
html[data-ui="new"] .fo-wrap .tb-chip .k { font-size: var(--ss-fs-12); font-weight: var(--ss-fw-medium); text-transform: none; letter-spacing: 0; color: var(--ss-ink-2); }
html[data-ui="new"] .fo-wrap .tb-chip .v,
html[data-ui="new"] .fo-wrap .tb-chip .v[style] { font-size: var(--ss-fs-20) !important; font-weight: var(--ss-fw-semibold); letter-spacing: -.01em; color: var(--ss-ink); }
html[data-ui="new"] .fo-wrap .tb-chip .s { font-size: var(--ss-fs-12); color: var(--ss-ink-3); }
html[data-ui="new"] .fo-wrap .tb-chip .v small { font-size: var(--ss-fs-12); font-weight: var(--ss-fw-medium); color: var(--ss-ink-2); }
html[data-ui="new"] .fo-wrap .tb-chip.win { justify-content: flex-start; border-style: solid; background: var(--ss-bg-1); }
html[data-ui="new"] .fo-wrap .tb-chip.win .v { font-size: var(--ss-fs-16) !important; color: var(--ss-success); }
html[data-ui="new"] .fo-wrap .tb.caution .tb-chip.win .v { color: var(--ss-ink); }
html[data-ui="new"] .fo-wrap .tb.nofly .tb-chip.win .v { color: var(--ss-ink-2); }
html[data-ui="new"] .fo-wrap .tb-adv { margin-top: 8px; font-size: var(--ss-fs-12); line-height: 1.4; color: var(--ss-ink-3); }
html[data-ui="new"] .fo-wrap .tb > :is(.tb-metrics, .tb-top) + .tb-adv { margin-top: 16px; }
html[data-ui="new"] .fo-wrap .tb-adv[role="note"] { color: var(--ss-ink-2); }
html[data-ui="new"] .fo-wrap .tb-adv[role="note"] > .bi { color: var(--ss-warning); }
/* no location / no weather: the prompt spans the card */
html[data-ui="new"] .fo-wrap > .tb.na > .tb-prompt { grid-column: 1 / -1; padding: 4px 0 8px; }
html[data-ui="new"] .fo-wrap .tb-prompt .ic { color: var(--ss-ink-3); }
html[data-ui="new"] .fo-wrap .tb-prompt .tx b { font-size: var(--ss-fs-16); font-weight: var(--ss-fw-semibold); color: var(--ss-ink); }
html[data-ui="new"] .fo-wrap .tb-prompt .tx span { font-size: var(--ss-fs-13); color: var(--ss-ink-2); }
html[data-ui="new"] .fo-wrap .tb-prompt a.set { display: inline-flex; align-items: center; gap: 6px; min-height: var(--ss-ctl-h); padding: 0 12px; border-radius: var(--ss-r); font-size: var(--ss-fs-13); font-weight: var(--ss-fw-medium); }
/* where the brief is for */
html[data-ui="new"] .fo-wrap .fb-loc { margin: 0 0 16px; padding: 14px; border: var(--ss-bw) solid var(--ss-line); border-radius: var(--ss-r); background: var(--ss-bg-1); }
html[data-ui="new"] .fo-wrap .fb-loc-lbl { font-size: var(--ss-fs-13); font-weight: var(--ss-fw-semibold); color: var(--ss-ink); }
html[data-ui="new"] .fo-wrap .fb-loc-row input { border: var(--ss-bw) solid var(--ss-line-2); border-radius: var(--ss-r); background: var(--ss-surface); color: var(--ss-ink); }
html[data-ui="new"] .fo-wrap :is(.fb-loc-go, .fb-loc-gps) { border-radius: var(--ss-r); font-size: var(--ss-fs-13); font-weight: var(--ss-fw-semibold); }
html[data-ui="new"] .fo-wrap .fb-loc-go { border: var(--ss-bw) solid var(--ss-line-2); background: var(--ss-surface); color: var(--ss-ink); }
html[data-ui="new"] .fo-wrap .fb-loc-gps { border: var(--ss-bw) solid var(--ss-action); background: var(--ss-action); color: var(--ss-on-action); }
html[data-ui="new"] .fo-wrap .fb-loc-list { border: var(--ss-bw) solid var(--ss-line); border-radius: var(--ss-r); background: var(--ss-surface); }
html[data-ui="new"] .fo-wrap .fb-loc-home { color: var(--ss-action-text); }

/* section heads and the "couldn't load" callout */
html[data-ui="new"] .fo-wrap .fo-sec { display: flex; align-items: center; gap: 8px; margin: 8px 0 12px; font-size: var(--ss-c-head-fs); font-weight: var(--ss-fw-semibold); text-transform: none; letter-spacing: 0; color: var(--ss-ink); }
html[data-ui="new"] .fo-wrap > .fo-callout { margin: 0 0 16px; padding: 12px 16px; border-radius: var(--ss-r); background: var(--ss-warning-soft); font-size: var(--ss-fs-14); color: var(--ss-ink); }

/* a scheduled mission is a card: date and verdict on top, the mission, then watch + Stow */
html[data-ui="new"] .fo-wrap > .fo-card:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "date badge" "body body" "note stow"; align-items: center; gap: 0; margin: 0 0 16px; padding: 0; border: var(--ss-bw) solid var(--ss-c-card-line); border-radius: var(--ss-c-card-r); background: var(--ss-surface); box-shadow: var(--ss-c-card-shadow); }
html[data-ui="new"] .fo-wrap > .fo-card:is(:hover, :focus-within) { border-color: var(--ss-ink-3); }
html[data-ui="new"] .fo-wrap .fo-card > .fo-date { grid-area: date; flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 8px; width: auto; padding: 14px 16px 0; border: 0; text-align: left; }
html[data-ui="new"] .fo-wrap .fo-date .d { font-size: var(--ss-fs-14); font-weight: var(--ss-fw-semibold); color: var(--ss-ink); }
html[data-ui="new"] .fo-wrap .fo-date .o { margin: 0; font-size: var(--ss-fs-12); color: var(--ss-ink-3); }
html[data-ui="new"] .fo-wrap .fo-card > .fo-verdict { display: contents; }
html[data-ui="new"] .fo-wrap .fo-verdict > .fo-badge { grid-area: badge; justify-self: end; margin: 12px 16px 0 0; }
html[data-ui="new"] .fo-wrap .fo-verdict > .fo-note { grid-area: note; padding: 0 12px 12px 16px; }
html[data-ui="new"] .fo-wrap .fo-verdict > .fo-stow { grid-area: stow; justify-self: end; margin: 0 16px 12px 0; }
html[data-ui="new"] .fo-wrap .fo-card > .fo-body { grid-area: body; gap: 4px; margin-bottom: 12px; padding: 6px 16px 14px; border-bottom: var(--ss-bw) solid var(--ss-line); }
html[data-ui="new"] .fo-wrap .fo-name { font-size: var(--ss-fs-16); font-weight: var(--ss-fw-semibold); white-space: normal; color: var(--ss-ink); }
html[data-ui="new"] .fo-wrap .fo-loc { font-size: var(--ss-fs-13); color: var(--ss-ink-3); }
html[data-ui="new"] .fo-wrap .fo-line { font-size: var(--ss-fs-13); color: var(--ss-ink-2); }
html[data-ui="new"] .fo-wrap .fo-note { font-size: var(--ss-fs-12); color: var(--ss-ink-3); }
html[data-ui="new"] .fo-wrap .fo-track { height: 6px; margin-top: 6px; border-radius: var(--ss-r-pill); background: var(--ss-bg-3); }
html[data-ui="new"] .fo-wrap .fo-fill { border-radius: inherit; background: var(--ss-success-fill); }
html[data-ui="new"] .fo-wrap .fo-badge { padding: 4px 10px; border-radius: var(--ss-r-pill); font-size: var(--ss-fs-12); font-weight: 700; letter-spacing: .04em; }
html[data-ui="new"] .fo-wrap .fo-badge.go { background: var(--ss-success-fill); color: var(--ss-on-success); }
html[data-ui="new"] .fo-wrap .fo-badge.caution { background: var(--ss-warning-fill); color: var(--ss-on-warning); }
html[data-ui="new"] .fo-wrap .fo-badge.nofly { background: var(--ss-danger-fill); color: var(--ss-on-danger); }
html[data-ui="new"] .fo-wrap .fo-badge.na { background: var(--ss-bg-3); color: var(--ss-ink-2); }
html[data-ui="new"] .fo-wrap .fo-stow { min-height: var(--ss-ctl-h-sm); padding: 0 12px; border: var(--ss-bw) solid var(--ss-line-2); border-radius: var(--ss-r); background: var(--ss-surface); color: var(--ss-ink-2); font-size: var(--ss-fs-13); font-weight: var(--ss-fw-medium); }
html[data-ui="new"] .fo-wrap .fo-stow:is(:hover, :focus-visible) { border-color: var(--ss-ink-3); color: var(--ss-ink); }
html[data-ui="new"] .fo-wrap .fo-stow.yes { border-color: var(--ss-success-fill); background: var(--ss-success-fill); color: var(--ss-on-success); }

/* Planned / Flown are list cards; Stowed rows sit in one */
html[data-ui="new"] .fo-wrap > :is(#foUnsched, #foFlown):not([hidden]) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; margin: 8px 0 24px; border: var(--ss-bw) solid var(--ss-c-card-line); border-radius: var(--ss-c-card-r); background: var(--ss-surface); box-shadow: var(--ss-c-card-shadow); overflow: hidden; }
html[data-ui="new"] .fo-wrap > :is(#foUnsched, #foFlown) > :not(.fo-un) { grid-column: 1 / -1; }
html[data-ui="new"] .fo-wrap :is(#foUnsched, #foFlown) > .fo-sec { margin: 0; padding: 12px 16px; border-bottom: var(--ss-bw) solid var(--ss-line); background: var(--ss-c-head-bg, transparent); }
html[data-ui="new"] .fo-wrap :is(#foUnsched, #foFlown) > .fo-callout { margin: 0; padding: 10px 16px; border: 0; border-radius: 0; background: var(--ss-bg-1); font-size: var(--ss-fs-13); color: var(--ss-ink-2); }
html[data-ui="new"] .fo-wrap :is(#foUnsched, #foFlown) > .fo-un { padding: 8px 16px; border-top: var(--ss-bw) solid var(--ss-line); }
html[data-ui="new"] .fo-wrap #foFlown > .fo-more { justify-self: start; margin: 4px 16px 12px; }
html[data-ui="new"] .fo-wrap .fo-un { gap: 12px; min-height: 52px; margin: 0; padding: 8px 16px; border: 0; border-radius: 0; background: transparent; }
html[data-ui="new"] .fo-wrap > .fo-un { border: var(--ss-bw) solid var(--ss-c-card-line); border-top-width: 0; background: var(--ss-surface); }
html[data-ui="new"] .fo-wrap > .fo-stowed-intro + .fo-un { border-top-width: var(--ss-bw); border-radius: var(--ss-c-card-r) var(--ss-c-card-r) 0 0; }
html[data-ui="new"] .fo-wrap > .fo-un:has(+ :not(.fo-un)) { border-bottom-left-radius: var(--ss-c-card-r); border-bottom-right-radius: var(--ss-c-card-r); }
html[data-ui="new"] .fo-wrap > .fo-stowed-intro + .fo-un:has(+ :not(.fo-un)) { border-radius: var(--ss-c-card-r); }
html[data-ui="new"] .fo-wrap .fo-un .nm { font-size: var(--ss-fs-14); font-weight: var(--ss-fw-medium); color: var(--ss-ink); }
html[data-ui="new"] .fo-wrap .fo-un .loc { font-size: var(--ss-fs-13); font-weight: var(--ss-fw-regular, 400); color: var(--ss-ink-3); }
html[data-ui="new"] .fo-wrap .fo-un .when { font-size: var(--ss-fs-12); color: var(--ss-ink-3); }
html[data-ui="new"] .fo-wrap .fo-un .fo-acts { gap: 8px; }
html[data-ui="new"] .fo-wrap .fo-un .fo-acts > a { display: inline-flex; align-items: center; gap: 6px; min-height: var(--ss-ctl-h-sm); padding: 0 12px; border: var(--ss-bw) solid var(--ss-line-2); border-radius: var(--ss-r); background: var(--ss-surface); color: var(--ss-action-text); font-size: var(--ss-fs-13); font-weight: var(--ss-fw-semibold); }
html[data-ui="new"] .fo-wrap .fo-st { border-color: var(--ss-line-2); border-radius: var(--ss-r-pill); padding: 2px 8px; font-size: var(--ss-fs-11); color: var(--ss-ink-2); }
html[data-ui="new"] .fo-wrap .fo-stowask .bi { color: var(--ss-success); }
html[data-ui="new"] .fo-wrap .fo-more { color: var(--ss-action-text); font-size: var(--ss-fs-13); }
html[data-ui="new"] .fo-wrap .fo-stowed-intro { font-size: var(--ss-fs-13); color: var(--ss-ink-2); }
html[data-ui="new"] .fo-wrap .fo-empty { margin: 0 0 16px; padding: 48px 20px; border: var(--ss-bw) dashed var(--ss-line-2); border-radius: var(--ss-c-card-r); background: var(--ss-surface); color: var(--ss-ink-2); }
html[data-ui="new"] .fo-wrap .fo-empty .bi { color: var(--ss-ink-3); }
html[data-ui="new"] .fo-wrap .fo-empty h3 { font-size: var(--ss-fs-18); font-weight: var(--ss-fw-semibold); color: var(--ss-ink); }
html[data-ui="new"] .fo-wrap .fo-empty .fo-cta { display: inline-flex; align-items: center; gap: 6px; min-height: var(--ss-ctl-h); padding: 0 14px; border-radius: var(--ss-r); background: var(--ss-action); color: var(--ss-on-action); font-size: var(--ss-fs-14); }
html[data-ui="new"] .fo-wrap .fo-foot { gap: 6px 16px; margin-top: 16px; padding-top: 16px; border-top: var(--ss-bw) solid var(--ss-line); font-size: var(--ss-fs-12); color: var(--ss-ink-3); }
html[data-ui="new"] .fo-wrap .fo-foot b { color: var(--ss-ink-2); }
html[data-ui="new"] .fo-wrap .fo-foot a { color: var(--ss-action-text); font-weight: var(--ss-fw-medium); }

/* ---- B · Field Ops: a verdict banner, big tiles, one column of cards, thumb-row actions ---- */
html[data-ui="new"][data-theme="field-ops"] .fo-wrap { display: block; max-width: 1040px; padding: 4px 24px 64px; }
html[data-ui="new"][data-theme="field-ops"] .fo-wrap .fo-head h1 { font-weight: 800; }
html[data-ui="new"][data-theme="field-ops"] .fo-wrap .fo-sub { font-size: var(--ss-fs-16); color: var(--ss-ink-2); }
html[data-ui="new"][data-theme="field-ops"] .fo-wrap .fo-shelf { padding: 0; border-width: var(--ss-bw-strong); background: var(--ss-surface); }
html[data-ui="new"][data-theme="field-ops"] .fo-wrap .fo-shelf a { min-height: calc(var(--ss-tap) - 4px); padding: 0 18px; border-radius: 0; font-size: var(--ss-fs-16); font-weight: var(--ss-fw-semibold); }
html[data-ui="new"][data-theme="field-ops"] .fo-wrap .fo-shelf a + a { border-left: var(--ss-bw-strong) solid var(--ss-line-2); }
html[data-ui="new"][data-theme="field-ops"] .fo-wrap .fo-shelf a.on { background: var(--ss-ink); color: var(--ss-surface); box-shadow: none; }
html[data-ui="new"][data-theme="field-ops"] .fo-wrap :is(.fo-head-r > .fo-cta, .tb-locbtn, .tb-full, .fb-loc-go, .fb-loc-gps, .tb-prompt a.set) { min-height: var(--ss-tap); padding: 0 18px; border-width: var(--ss-bw-strong) !important; font-size: var(--ss-fs-16); font-weight: var(--ss-fw-semibold); }
html[data-ui="new"][data-theme="field-ops"] .fo-wrap .fb-loc-row input { min-height: var(--ss-tap); border-width: var(--ss-bw-strong); }
html[data-ui="new"][data-theme="field-ops"] .fo-wrap > .tb { display: block; padding: 0 20px 18px; border-width: var(--ss-bw-strong); border-top-width: 8px; }
html[data-ui="new"][data-theme="field-ops"] .fo-wrap .tb-hd,
html[data-ui="new"][data-theme="field-ops"] .fo-wrap .tb > .tb-eyebrow { padding: 12px 20px; border-bottom-width: var(--ss-bw-strong); }
html[data-ui="new"][data-theme="field-ops"] .fo-wrap .tb-eyebrow { font: var(--ss-fw-semibold) var(--ss-fs-13)/1.2 var(--ss-font-mono); text-transform: uppercase; letter-spacing: var(--ss-track-caps); color: var(--ss-ink-2); }
html[data-ui="new"][data-theme="field-ops"] .fo-wrap .tb-top { flex-direction: row; align-items: center; gap: 20px; margin-bottom: 12px; padding: 18px 20px; border: var(--ss-bw-strong) solid var(--ss-line-2); border-radius: var(--ss-r); }
html[data-ui="new"][data-theme="field-ops"] .fo-wrap .tb.go .tb-top { border-color: var(--ss-success-fill); }
html[data-ui="new"][data-theme="field-ops"] .fo-wrap .tb.caution .tb-top { border-color: var(--ss-warning-fill); }
html[data-ui="new"][data-theme="field-ops"] .fo-wrap .tb.nofly .tb-top { border-color: var(--ss-danger-fill); }
html[data-ui="new"][data-theme="field-ops"] .fo-wrap .tb-badge { flex: none; min-width: 168px; padding: 16px 24px; font-size: 40px; font-weight: 900; text-align: center; }
html[data-ui="new"][data-theme="field-ops"] .fo-wrap .tb-where { font-size: var(--ss-fs-20); font-weight: 800; }
html[data-ui="new"][data-theme="field-ops"] .fo-wrap .tb-summary { font-size: var(--ss-fs-16); color: var(--ss-ink); }
html[data-ui="new"][data-theme="field-ops"] .fo-wrap .tb-metrics { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
html[data-ui="new"][data-theme="field-ops"] .fo-wrap .tb-chip { padding: 14px 16px; border-width: var(--ss-bw-strong); border-top: 4px solid var(--ss-ink); }
html[data-ui="new"][data-theme="field-ops"] .fo-wrap .tb-chip.win { grid-column: 1 / -1; flex-direction: row; align-items: baseline; gap: 12px; border-top-color: var(--ss-success-fill); }
html[data-ui="new"][data-theme="field-ops"] .fo-wrap .tb.caution .tb-chip.win { border-top-color: var(--ss-warning-fill); }
html[data-ui="new"][data-theme="field-ops"] .fo-wrap .tb.nofly .tb-chip.win { border-top-color: var(--ss-danger-fill); }
html[data-ui="new"][data-theme="field-ops"] .fo-wrap .tb-chip .k { font: var(--ss-fw-medium) var(--ss-fs-12)/1.2 var(--ss-font-mono); text-transform: uppercase; letter-spacing: var(--ss-track-caps); color: var(--ss-ink-2); }
html[data-ui="new"][data-theme="field-ops"] .fo-wrap .tb-chip .v,
html[data-ui="new"][data-theme="field-ops"] .fo-wrap .tb-chip .v[style] { font-size: var(--ss-fs-28) !important; font-weight: 800; }
html[data-ui="new"][data-theme="field-ops"] .fo-wrap .tb-chip.win .v { font-size: var(--ss-fs-20) !important; }
html[data-ui="new"][data-theme="field-ops"] .fo-wrap .tb-chip .s { font-size: var(--ss-fs-13); color: var(--ss-ink-2); }
html[data-ui="new"][data-theme="field-ops"] .fo-wrap .tb-adv { font-size: var(--ss-fs-13); color: var(--ss-ink-2); }
html[data-ui="new"][data-theme="field-ops"] .fo-wrap .fo-sec { margin: 24px 0 12px; padding-bottom: 8px; border-bottom: var(--ss-bw-strong) solid var(--ss-line-2); font: var(--ss-fw-semibold) var(--ss-fs-13)/1.2 var(--ss-font-mono); text-transform: uppercase; letter-spacing: var(--ss-track-caps); color: var(--ss-ink-2); }
html[data-ui="new"][data-theme="field-ops"] .fo-wrap > .fo-card { grid-template-columns: 132px minmax(0, 1fr) 208px; grid-template-areas: "date body badge" "date body note" "date body stow"; align-items: stretch; margin-bottom: 12px; border-width: var(--ss-bw-strong); }
html[data-ui="new"][data-theme="field-ops"] .fo-wrap .fo-card > .fo-date { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; padding: 16px; border-right: var(--ss-bw-strong) solid var(--ss-line-2); }
html[data-ui="new"][data-theme="field-ops"] .fo-wrap .fo-date .d { font-size: var(--ss-fs-20); font-weight: 800; line-height: 1.15; }
html[data-ui="new"][data-theme="field-ops"] .fo-wrap .fo-date .o { font: var(--ss-fw-medium) var(--ss-fs-12)/1.2 var(--ss-font-mono); text-transform: uppercase; letter-spacing: var(--ss-track-caps); color: var(--ss-ink-2); }
html[data-ui="new"][data-theme="field-ops"] .fo-wrap .fo-card > .fo-body { justify-content: center; margin: 0; padding: 16px 18px; border: 0; }
html[data-ui="new"][data-theme="field-ops"] .fo-wrap .fo-name { font-size: var(--ss-fs-18); font-weight: 700; }
html[data-ui="new"][data-theme="field-ops"] .fo-wrap :is(.fo-loc, .fo-line) { font-size: var(--ss-fs-14); }
html[data-ui="new"][data-theme="field-ops"] .fo-wrap .fo-track { height: 10px; border-radius: 0; }
html[data-ui="new"][data-theme="field-ops"] .fo-wrap .fo-verdict > .fo-badge { justify-self: stretch; margin: 14px 14px 0; padding: 10px 12px; border-radius: var(--ss-r); font-size: var(--ss-fs-20); font-weight: 900; text-align: center; }
html[data-ui="new"][data-theme="field-ops"] .fo-wrap .fo-verdict > .fo-note { align-self: center; padding: 6px 14px; font-size: var(--ss-fs-13); color: var(--ss-ink-2); text-align: center; }
html[data-ui="new"][data-theme="field-ops"] .fo-wrap .fo-verdict > .fo-stow { justify-self: stretch; justify-content: center; margin: 0 14px 14px; }
html[data-ui="new"][data-theme="field-ops"] .fo-wrap .fo-stow,
html[data-ui="new"][data-theme="field-ops"] .fo-wrap .fo-un .fo-acts > a { min-height: var(--ss-tap); padding: 0 18px; border-width: var(--ss-bw-strong); font-size: var(--ss-fs-16); font-weight: var(--ss-fw-semibold); }
html[data-ui="new"][data-theme="field-ops"] .fo-wrap > :is(#foUnsched, #foFlown):not([hidden]) { display: block; border-width: var(--ss-bw-strong); }
html[data-ui="new"][data-theme="field-ops"] .fo-wrap :is(#foUnsched, #foFlown) > .fo-sec { margin: 0; padding: 14px 16px; border-bottom-width: var(--ss-bw-strong); }
html[data-ui="new"][data-theme="field-ops"] .fo-wrap .fo-un { min-height: 72px; }
html[data-ui="new"][data-theme="field-ops"] .fo-wrap .fo-un .nm { font-size: var(--ss-fs-16); font-weight: var(--ss-fw-semibold); }
html[data-ui="new"][data-theme="field-ops"] .fo-wrap > .fo-un { border-width: 0 var(--ss-bw-strong) var(--ss-bw-strong); }
html[data-ui="new"][data-theme="field-ops"] .fo-wrap > .fo-stowed-intro + .fo-un { border-top-width: var(--ss-bw-strong); }
html[data-ui="new"][data-theme="field-ops"] .fo-wrap .fo-foot { font-size: var(--ss-fs-13); border-top-width: var(--ss-bw-strong); }
html[data-ui="new"][data-theme="field-ops"] .fo-wrap .fo-empty .fo-cta { min-height: var(--ss-tap); padding: 0 20px; font-size: var(--ss-fs-16); }

/* ---- C · Warm Modern: soft cards, tinted tiles, soft pills ---- */
html[data-ui="new"][data-theme="warm-modern"] .fo-wrap > :is(.tb, .fo-card, #foUnsched, #foFlown) { border-color: transparent; border-radius: var(--ss-r-lg); box-shadow: var(--ss-shadow-sm); }
html[data-ui="new"][data-theme="warm-modern"] .fo-wrap > .tb { border-top: 0; }
html[data-ui="new"][data-theme="warm-modern"] .fo-wrap .tb-hd,
html[data-ui="new"][data-theme="warm-modern"] .fo-wrap .tb > .tb-eyebrow,
html[data-ui="new"][data-theme="warm-modern"] .fo-wrap :is(#foUnsched, #foFlown) > .fo-sec { border-bottom-color: transparent; background: transparent; }
html[data-ui="new"][data-theme="warm-modern"] .fo-wrap .tb-top { border-radius: var(--ss-r-lg); }
html[data-ui="new"][data-theme="warm-modern"] .fo-wrap .tb-badge { border-radius: var(--ss-r-pill); padding: 10px 22px; }
html[data-ui="new"][data-theme="warm-modern"] .fo-wrap .tb-chip { border: 0; border-radius: var(--ss-r-lg); background: var(--ss-bg-1); }
html[data-ui="new"][data-theme="warm-modern"] .fo-wrap .tb-chip.win { background: var(--ss-success-soft); }
html[data-ui="new"][data-theme="warm-modern"] .fo-wrap .tb.caution .tb-chip.win { background: var(--ss-warning-soft); }
html[data-ui="new"][data-theme="warm-modern"] .fo-wrap .tb.nofly .tb-chip.win { background: var(--ss-danger-soft); }
html[data-ui="new"][data-theme="warm-modern"] .fo-wrap .fo-card > .fo-date { justify-self: start; margin: 14px 0 0 16px; padding: 4px 12px; border-radius: var(--ss-r-pill); background: var(--ss-accent-soft); }
html[data-ui="new"][data-theme="warm-modern"] .fo-wrap .fo-card > .fo-date :is(.d, .o) { color: var(--ss-accent-text); }
html[data-ui="new"][data-theme="warm-modern"] .fo-wrap .fo-card > .fo-body { border-bottom-color: transparent; }
html[data-ui="new"][data-theme="warm-modern"] .fo-wrap .fo-badge.go { background: var(--ss-success-soft); color: var(--ss-success); }
html[data-ui="new"][data-theme="warm-modern"] .fo-wrap .fo-badge.caution { background: var(--ss-warning-soft); color: var(--ss-warning); }
html[data-ui="new"][data-theme="warm-modern"] .fo-wrap .fo-badge.nofly { background: var(--ss-danger-soft); color: var(--ss-danger); }
html[data-ui="new"][data-theme="warm-modern"] .fo-wrap .fo-track { background: var(--ss-bg-2); }
html[data-ui="new"][data-theme="warm-modern"] .fo-wrap :is(.fo-stow, .fo-un .fo-acts > a, .fo-head-r > .fo-cta, .tb-locbtn, .tb-full) { border-radius: var(--ss-r-pill); }
html[data-ui="new"][data-theme="warm-modern"] .fo-wrap .fo-shelf { border-radius: var(--ss-r-pill); }
html[data-ui="new"][data-theme="warm-modern"] .fo-wrap .fo-shelf a { border-radius: var(--ss-r-pill); }
html[data-ui="new"][data-theme="warm-modern"] .fo-wrap :is(#foUnsched, #foFlown) > .fo-callout { margin: 0 12px 4px; border-radius: var(--ss-r); }
html[data-ui="new"][data-theme="warm-modern"] .fo-wrap :is(#foUnsched, #foFlown) > .fo-un { border-top-color: var(--ss-bg-2); }
html[data-ui="new"][data-theme="warm-modern"] .fo-wrap > .fo-un { border-color: transparent; }
html[data-ui="new"][data-theme="warm-modern"] .fo-wrap .fo-empty { border: 0; background: var(--ss-bg-1); border-radius: var(--ss-r-lg); }

/* ---- phones: one column, 44px targets (56px in Field Ops), the card's actions in a thumb row ---- */
@media (max-width: 768px) {
  html[data-ui="new"] .fo-wrap,
  html[data-ui="new"][data-theme="field-ops"] .fo-wrap { display: block; padding: 4px 16px 96px; }
  html[data-ui="new"] .fo-wrap > .fo-head { align-items: stretch !important; flex-direction: column; gap: 12px !important; margin-bottom: 16px; }
  html[data-ui="new"] .fo-wrap .fo-head-r { width: 100%; flex-wrap: nowrap; }
  html[data-ui="new"] .fo-wrap .fo-shelf { flex: 1; }
  html[data-ui="new"] .fo-wrap .fo-shelf { padding: 0; }
  html[data-ui="new"] .fo-wrap .fo-shelf a { flex: 1; justify-content: center; min-height: 44px; }
  html[data-ui="new"] .fo-wrap :is(.fo-head-r > .fo-cta, .tb-locbtn, .tb-full, .fo-stow, .fo-un .fo-acts > a, .tb-prompt a.set, .fo-more, .fo-empty .fo-cta) { min-height: 44px; }
  html[data-ui="new"] .fo-wrap .fo-foot a { display: inline-flex; align-items: center; min-height: 44px; }
  html[data-ui="new"] .fo-wrap > .tb { display: block; padding: 0 16px 14px; }
  html[data-ui="new"] .fo-wrap .tb-hd,
  html[data-ui="new"] .fo-wrap .tb > .tb-eyebrow { flex-wrap: wrap; gap: 8px; margin: 0 -16px 14px; padding: 10px 16px; }
  html[data-ui="new"] .fo-wrap .tb-hd-r { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  html[data-ui="new"] .fo-wrap .tb-hd-r > * { justify-content: center; }
  html[data-ui="new"] .fo-wrap .tb-top { margin-bottom: 12px; padding: 14px; }
  html[data-ui="new"] .fo-wrap .tb-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-ui="new"] .fo-wrap .tb-chip.win { grid-column: 1 / -1; }
  html[data-ui="new"] .fo-wrap > .fo-card { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "date badge" "body body" "note note" "stow stow"; }
  html[data-ui="new"] .fo-wrap .fo-verdict > .fo-stow { justify-self: stretch; justify-content: center; margin: 0 16px 14px; }
  html[data-ui="new"] .fo-wrap > :is(#foUnsched, #foFlown):not([hidden]) { display: block; }
  html[data-ui="new"] .fo-wrap .fo-un { flex-wrap: wrap; }
  html[data-ui="new"] .fo-wrap .fo-un .nm { flex-basis: 100%; white-space: normal; }
  html[data-ui="new"] .fo-wrap .fo-un .fo-acts { margin-left: auto; }
  /* Field Ops: the shelf and Calendar keep 56px; the brief's banner stacks; cards end in a full-width Stow */
  html[data-ui="new"][data-theme="field-ops"] .fo-wrap .fo-shelf a { min-height: var(--ss-tap); padding: 0 10px; }
  html[data-ui="new"][data-theme="field-ops"] .fo-wrap .tb-hd-r > * { padding: 0 8px; white-space: normal; text-align: center; }
  html[data-ui="new"][data-theme="field-ops"] .fo-wrap :is(.fo-head-r > .fo-cta, .tb-locbtn, .tb-full, .fo-stow, .fo-un .fo-acts > a, .tb-prompt a.set, .fo-more, .fo-empty .fo-cta, .fo-foot a, .fb-loc-home) { min-height: var(--ss-tap); }
  html[data-ui="new"][data-theme="field-ops"] .fo-wrap .tb-top { flex-direction: column; align-items: stretch; gap: 12px; }
  html[data-ui="new"][data-theme="field-ops"] .fo-wrap .tb-badge { min-width: 0; font-size: 36px; }
  html[data-ui="new"][data-theme="field-ops"] .fo-wrap .tb-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-ui="new"][data-theme="field-ops"] .fo-wrap .tb-chip.win { grid-column: 1 / -1; }
  html[data-ui="new"][data-theme="field-ops"] .fo-wrap > .fo-card { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "date badge" "body body" "note note" "stow stow"; }
  html[data-ui="new"][data-theme="field-ops"] .fo-wrap .fo-card > .fo-date { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 14px 16px 6px; border-right: 0; }
  html[data-ui="new"][data-theme="field-ops"] .fo-wrap .fo-date .o { white-space: nowrap; }
  html[data-ui="new"][data-theme="field-ops"] .fo-wrap .fo-verdict > .fo-badge { justify-self: end; margin: 12px 14px 0 0; font-size: var(--ss-fs-16); padding: 8px 14px; }
  html[data-ui="new"][data-theme="field-ops"] .fo-wrap .fo-card > .fo-body { padding: 6px 16px 12px; }
  html[data-ui="new"][data-theme="field-ops"] .fo-wrap .fo-verdict > .fo-note { text-align: left; padding: 0 16px 10px; }
  html[data-ui="new"][data-theme="field-ops"] .fo-wrap .fo-verdict > .fo-stow { margin: 0 14px 14px; }
  html[data-ui="new"][data-theme="field-ops"] .fo-wrap .fo-un .fo-acts { width: 100%; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  html[data-ui="new"][data-theme="field-ops"] .fo-wrap .fo-un .fo-acts > * { justify-content: center; }
  html[data-ui="new"][data-theme="warm-modern"] .fo-wrap .fo-card > .fo-date { margin: 14px 0 0 16px; }
}

/* ---- plan · Missions, the Schedule view (A, the base for every new theme) ---- */
html[data-ui="new"] p.text-muted[role="status"]:has(~ #schedShell) { margin: 0 0 4px; font-size: var(--ss-fs-12); color: var(--ss-ink-3) !important; }
html[data-ui="new"] .sky-sched { display: grid; grid-template-columns: minmax(0, 1fr) 380px; grid-template-areas: "top top" "chips chips" "hero rail"; align-items: start; column-gap: 20px; padding-bottom: 64px; background: var(--ss-bg); color: var(--ss-ink); font-family: inherit; }
html[data-ui="new"] .sky-sched > * { min-width: 0; }
html[data-ui="new"] .sky-sched > .ss-page-head { grid-area: top; }
html[data-ui="new"] .sky-sched > .ssc-daychips { grid-area: chips; }
html[data-ui="new"] .sky-sched > .ssc-hero { grid-area: hero; }
html[data-ui="new"] .sky-sched > .ssc-buckets { grid-area: rail; }
/* no day card (the Stowed shelf, or nothing scheduled): the agenda takes the width */
html[data-ui="new"] .sky-sched:has(> .ssc-hero[style*="none"]) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "chips" "rail"; }
html[data-ui="new"] .sky-sched:has(> .ssc-hero[style*="none"]) > .ssc-buckets { padding-left: 32px; max-width: 1180px; }

/* header controls: segmented View and Active / Stowed, the primary on the right */
html[data-ui="new"] .sky-sched .ssc-viewtoggle { padding: 2px; gap: 2px; border: var(--ss-bw) solid var(--ss-line-2); border-radius: var(--ss-r); background: var(--ss-bg-2); }
html[data-ui="new"] .sky-sched .ssc-viewtoggle button { min-height: calc(var(--ss-ctl-h) - 6px); padding: 0 12px; border-radius: calc(var(--ss-r) - 2px); font-size: var(--ss-fs-13); font-weight: var(--ss-fw-medium); color: var(--ss-ink-2); }
html[data-ui="new"] .sky-sched .ssc-viewtoggle button.active { background: var(--ss-surface); color: var(--ss-ink); box-shadow: var(--ss-shadow-sm); }
html[data-ui="new"] .sky-sched .ssc-timefmt-toggle { min-height: var(--ss-ctl-h); font-size: var(--ss-fs-13); color: var(--ss-ink-2); }
html[data-ui="new"] .sky-sched .ssc-newbtn { min-height: var(--ss-ctl-h); padding: 0 14px; border-radius: var(--ss-r); font-size: var(--ss-fs-13); font-weight: var(--ss-fw-semibold); }

/* day tiles */
html[data-ui="new"] .sky-sched .ssc-daychips { gap: 8px; padding: 16px 32px 2px; }
html[data-ui="new"] .sky-sched .ssc-chip { min-width: 68px; padding: 8px 10px; border: var(--ss-bw) solid var(--ss-line-2); border-radius: var(--ss-r); background: var(--ss-surface); color: var(--ss-ink); }
html[data-ui="new"] .sky-sched .ssc-chip:hover { border-color: var(--ss-ink-3); }
html[data-ui="new"] .sky-sched .ssc-chip .cw { font-size: var(--ss-fs-11); font-weight: var(--ss-fw-medium); letter-spacing: .06em; }
html[data-ui="new"] .sky-sched .ssc-chip .cd { font-size: var(--ss-fs-20); font-weight: var(--ss-fw-semibold); }
html[data-ui="new"] .sky-sched .ssc-chip .cn { font-size: var(--ss-fs-11); }
html[data-ui="new"] .sky-sched .ssc-chip.active { border-color: var(--ss-ink); background: var(--ss-ink); color: var(--ss-surface); }
html[data-ui="new"] .sky-sched .ssc-chip.active :is(.cw, .cn) { color: inherit; }
html[data-ui="new"] .sky-sched .ssc-chip.today:not(.active) { border-color: var(--ss-action); }
html[data-ui="new"] .sky-sched .ssc-chip.today:not(.active) .cw { color: var(--ss-action-text); }
html[data-ui="new"] .sky-sched .ssc-chip.overdue:not(.active) { border-color: var(--ss-danger-fill); }

/* the day card: date + Route in Maps, the map, then the numbered run */
html[data-ui="new"] .sky-sched .ssc-hero { margin: 16px 0 0 32px; border: var(--ss-bw) solid var(--ss-c-card-line); border-radius: var(--ss-c-card-r); background: var(--ss-surface); box-shadow: var(--ss-c-card-shadow); }
html[data-ui="new"] .sky-sched .ssc-hero-head { padding: 12px 16px; border-bottom: var(--ss-bw) solid var(--ss-line); }
html[data-ui="new"] .sky-sched .ssc-hero-date { font-size: var(--ss-fs-20); font-weight: var(--ss-fw-semibold); letter-spacing: -.01em; color: var(--ss-ink); }
html[data-ui="new"] .sky-sched .ssc-hero-meta { font-size: var(--ss-fs-13); color: var(--ss-ink-3); }
html[data-ui="new"] .sky-sched .ssc-ghost { width: var(--ss-ctl-h); height: var(--ss-ctl-h); border: var(--ss-bw) solid var(--ss-line-2); border-radius: var(--ss-r); background: var(--ss-surface); color: var(--ss-ink); }
html[data-ui="new"] .sky-sched .ssc-ghost:hover { background: var(--ss-bg-1); }
html[data-ui="new"] .sky-sched .ssc-primary { min-height: var(--ss-ctl-h); padding: 0 14px; border-radius: var(--ss-r); background: var(--ss-action); color: var(--ss-on-action); font-size: var(--ss-fs-13); font-weight: var(--ss-fw-semibold); }
html[data-ui="new"] .sky-sched .ssc-primary:hover { background: var(--ss-action-hover); }
html[data-ui="new"] .sky-sched .ssc-hero-body { grid-template-columns: minmax(0, 1fr); }
html[data-ui="new"] .sky-sched .ssc-map { min-height: 340px; height: 340px; }
html[data-ui="new"] .sky-sched .ssc-runlist { max-height: none; padding: 0; overflow: visible; }
html[data-ui="new"] .sky-sched .ssc-run { flex-wrap: nowrap; gap: 12px; padding: 12px 16px; border-radius: 0; }
html[data-ui="new"] .sky-sched .ssc-run + .ssc-run { border-top: var(--ss-bw) solid var(--ss-line); }
html[data-ui="new"] .sky-sched .ssc-run:hover { background: var(--ss-bg-1); }
html[data-ui="new"] .sky-sched .ssc-num { width: 28px; height: 28px; background: var(--ss-ink); color: var(--ss-surface); font-size: var(--ss-fs-13); font-weight: var(--ss-fw-semibold); }
html[data-ui="new"] .sky-sched .ssc-run.done .ssc-num { background: var(--ss-success-fill); color: var(--ss-on-success); }
html[data-ui="new"] .sky-sched :is(.ssc-run-name, .ssc-row-name) { font-size: var(--ss-fs-14); font-weight: var(--ss-fw-semibold); color: var(--ss-ink); }
html[data-ui="new"] .sky-sched :is(.ssc-run-sub, .ssc-row-sub) { font-size: var(--ss-fs-12); color: var(--ss-ink-3); }
html[data-ui="new"] .sky-sched :is(.ssc-run-acts, .ssc-row-acts) { flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
html[data-ui="new"] .sky-sched .ssc-mini { display: inline-flex; align-items: center; gap: 4px; min-height: var(--ss-ctl-h-sm); padding: 0 10px; border: var(--ss-bw) solid var(--ss-line-2); border-radius: var(--ss-r); background: var(--ss-surface); color: var(--ss-ink); font-size: var(--ss-fs-12); font-weight: var(--ss-fw-medium); }
html[data-ui="new"] .sky-sched .ssc-mini:hover { background: var(--ss-bg-1); }
html[data-ui="new"] .sky-sched .ssc-mini.go { border-color: var(--ss-success-fill); background: var(--ss-success-fill); color: var(--ss-on-success); }
html[data-ui="new"] .sky-sched .ssc-mini.dlv { border-color: var(--ss-info-fill); color: var(--ss-info); }
html[data-ui="new"] .sky-sched .ssc-date-in { min-height: var(--ss-ctl-h-sm); padding: 0 8px; border: var(--ss-bw) solid var(--ss-line-2); border-radius: var(--ss-r); background: var(--ss-surface); color: var(--ss-ink); font-size: var(--ss-fs-12); color-scheme: light; }
html[data-ui="new"][data-bs-theme="dark"] .sky-sched .ssc-date-in { color-scheme: dark; }
html[data-ui="new"] .sky-sched .ssc-pill { padding: 2px 8px; border-radius: var(--ss-r-pill); font-size: var(--ss-fs-11); font-weight: var(--ss-fw-semibold); }

/* the agenda rail: each bucket is a card, its rows a list */
html[data-ui="new"] .sky-sched .ssc-buckets { gap: 16px; padding: 16px 32px 0 0; }
html[data-ui="new"] .sky-sched .ssc-bucket { border: var(--ss-bw) solid var(--ss-c-card-line); border-radius: var(--ss-c-card-r); background: var(--ss-surface); box-shadow: var(--ss-c-card-shadow); overflow: hidden; }
html[data-ui="new"] .sky-sched .ssc-bucket.overdue { border-top: 3px solid var(--ss-danger-fill); }
html[data-ui="new"] .sky-sched .ssc-bucket.today { border-top: 3px solid var(--ss-action); }
html[data-ui="new"] .sky-sched .ssc-bucket-h { margin: 0; padding: 10px 14px; border-bottom: var(--ss-bw) solid var(--ss-line); background: var(--ss-c-head-bg, transparent); font-size: var(--ss-c-head-fs); font-weight: var(--ss-fw-semibold); text-transform: none; letter-spacing: 0; color: var(--ss-ink); }
html[data-ui="new"] .sky-sched .ssc-bucket.overdue .ssc-bucket-h { color: var(--ss-danger); }
html[data-ui="new"] .sky-sched .ssc-bucket-h .n { margin-left: auto; padding: 1px 8px; border-radius: var(--ss-r-pill); background: var(--ss-bg-2); font-size: var(--ss-fs-12); font-weight: var(--ss-fw-medium); color: var(--ss-ink-2); }
html[data-ui="new"] .sky-sched .ssc-rows { gap: 0; }
html[data-ui="new"] .sky-sched .ssc-row { gap: 8px 12px; padding: 10px 14px; border: 0; border-radius: 0; background: transparent; }
html[data-ui="new"] .sky-sched .ssc-row + .ssc-row { border-top: var(--ss-bw) solid var(--ss-line); }
html[data-ui="new"] .sky-sched .ssc-row-main { flex-basis: 100%; }
html[data-ui="new"] .sky-sched .ssc-row-acts { flex: 1 1 100%; justify-content: flex-start; }
html[data-ui="new"] .sky-sched .ssc-stowask { border-radius: var(--ss-r); font-size: var(--ss-fs-13); color: var(--ss-ink); }
html[data-ui="new"] .sky-sched .ssc-stowask button { min-height: 32px; border-radius: var(--ss-r); }
html[data-ui="new"] .sky-sched .ssc-stowed-intro { padding: 10px 14px 0; font-size: var(--ss-fs-13); color: var(--ss-ink-2); opacity: 1; }
html[data-ui="new"] .sky-sched .ssc-empty h3 { font-size: var(--ss-fs-16); font-weight: var(--ss-fw-semibold); color: var(--ss-ink); }
html[data-ui="new"] .sky-sched .ssc-empty { color: var(--ss-ink-3); }
html[data-ui="new"] .sky-sched > .ssc-buckets > .ssc-empty { border: var(--ss-bw) dashed var(--ss-line-2); border-radius: var(--ss-c-card-r); background: var(--ss-surface); }
@media (max-width: 1100px) {
  html[data-ui="new"] .sky-sched { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "chips" "hero" "rail"; }
  html[data-ui="new"] .sky-sched .ssc-buckets { padding-left: 32px; }
  html[data-ui="new"] .sky-sched .ssc-hero { margin-right: 32px; }
}

/* ---- B · Field Ops: one column, map on top, big day tiles, big run cards, 56px controls ---- */
html[data-ui="new"][data-theme="field-ops"] .sky-sched { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "chips" "hero" "rail"; }
html[data-ui="new"][data-theme="field-ops"] .sky-sched .ssc-hero { max-width: 1120px; margin: 16px 24px 0; border-width: var(--ss-bw-strong); }
html[data-ui="new"][data-theme="field-ops"] .sky-sched .ssc-buckets { max-width: 1120px; padding: 24px 24px 0; }
html[data-ui="new"][data-theme="field-ops"] .sky-sched .ssc-daychips { gap: 10px; padding: 16px 24px 2px; }
html[data-ui="new"][data-theme="field-ops"] .sky-sched .ssc-viewtoggle { padding: 0; border-width: var(--ss-bw-strong); background: var(--ss-surface); }
html[data-ui="new"][data-theme="field-ops"] .sky-sched .ssc-viewtoggle button { min-height: calc(var(--ss-tap) - 4px); padding: 0 16px; border-radius: 0; font-size: var(--ss-fs-16); font-weight: var(--ss-fw-semibold); }
html[data-ui="new"][data-theme="field-ops"] .sky-sched .ssc-viewtoggle button + button { border-left: var(--ss-bw-strong) solid var(--ss-line-2); }
html[data-ui="new"][data-theme="field-ops"] .sky-sched .ssc-viewtoggle button.active { background: var(--ss-ink); color: var(--ss-surface); box-shadow: none; }
html[data-ui="new"][data-theme="field-ops"] .sky-sched .ssc-timefmt-toggle { min-height: var(--ss-tap); font-size: var(--ss-fs-16); }
html[data-ui="new"][data-theme="field-ops"] .sky-sched .ssc-timefmt-toggle input { width: 22px; height: 22px; }
html[data-ui="new"][data-theme="field-ops"] .sky-sched :is(.ssc-newbtn, .ssc-primary) { min-height: var(--ss-tap); padding: 0 20px; font-size: var(--ss-fs-16); }
html[data-ui="new"][data-theme="field-ops"] .sky-sched .ssc-chip { min-width: 92px; padding: 12px 12px; border-width: var(--ss-bw-strong); }
html[data-ui="new"][data-theme="field-ops"] .sky-sched .ssc-chip .cw { font: var(--ss-fw-semibold) var(--ss-fs-12)/1.2 var(--ss-font-mono); letter-spacing: var(--ss-track-caps); }
html[data-ui="new"][data-theme="field-ops"] .sky-sched .ssc-chip .cd { font-size: var(--ss-fs-28); font-weight: 800; }
html[data-ui="new"][data-theme="field-ops"] .sky-sched .ssc-chip .cn { font-size: var(--ss-fs-13); }
html[data-ui="new"][data-theme="field-ops"] .sky-sched .ssc-chip.active { border-color: var(--ss-action); background: var(--ss-action); color: var(--ss-on-action); }
html[data-ui="new"][data-theme="field-ops"] .sky-sched .ssc-hero-head { padding: 14px 18px; border-bottom-width: var(--ss-bw-strong); }
html[data-ui="new"][data-theme="field-ops"] .sky-sched .ssc-hero-date { font-size: var(--ss-fs-24); font-weight: 800; }
html[data-ui="new"][data-theme="field-ops"] .sky-sched .ssc-hero-meta { font-size: var(--ss-fs-16); color: var(--ss-ink-2); }
html[data-ui="new"][data-theme="field-ops"] .sky-sched .ssc-ghost { width: var(--ss-tap); height: var(--ss-tap); border-width: var(--ss-bw-strong); font-size: var(--ss-fs-24); }
html[data-ui="new"][data-theme="field-ops"] .sky-sched .ssc-map { min-height: 380px; height: 380px; }
html[data-ui="new"][data-theme="field-ops"] .sky-sched .ssc-run { flex-wrap: wrap; gap: 12px 16px; padding: 16px 18px; }
html[data-ui="new"][data-theme="field-ops"] .sky-sched .ssc-run + .ssc-run { border-top-width: var(--ss-bw-strong); }
html[data-ui="new"][data-theme="field-ops"] .sky-sched .ssc-num { width: 44px; height: 44px; font-size: var(--ss-fs-20); font-weight: 800; }
html[data-ui="new"][data-theme="field-ops"] .sky-sched .ssc-run-main { flex: 1 1 0; }
html[data-ui="new"][data-theme="field-ops"] .sky-sched :is(.ssc-run-name, .ssc-row-name) { font-size: var(--ss-fs-18); font-weight: 700; white-space: normal; }
html[data-ui="new"][data-theme="field-ops"] .sky-sched :is(.ssc-run-sub, .ssc-row-sub) { font-size: var(--ss-fs-14); color: var(--ss-ink-2); white-space: normal; }
html[data-ui="new"][data-theme="field-ops"] .sky-sched .ssc-run-acts { flex: 1 1 100%; justify-content: flex-start; gap: 8px; padding-left: 60px; }
html[data-ui="new"][data-theme="field-ops"] .sky-sched .ssc-run-acts > .ssc-mini.go { margin-left: auto; }
html[data-ui="new"][data-theme="field-ops"] .sky-sched :is(.ssc-mini, .ssc-date-in) { min-height: var(--ss-tap); padding: 0 16px; border-width: var(--ss-bw-strong); font-size: var(--ss-fs-16); font-weight: var(--ss-fw-semibold); }
html[data-ui="new"][data-theme="field-ops"] .sky-sched .ssc-pill { font-size: var(--ss-fs-12); padding: 3px 10px; }
html[data-ui="new"][data-theme="field-ops"] .sky-sched .ssc-bucket { border-width: var(--ss-bw-strong); }
html[data-ui="new"][data-theme="field-ops"] .sky-sched .ssc-bucket:is(.overdue, .today) { border-top-width: 6px; }
html[data-ui="new"][data-theme="field-ops"] .sky-sched .ssc-bucket-h { padding: 14px 18px; border-bottom-width: var(--ss-bw-strong); font: var(--ss-fw-semibold) var(--ss-fs-13)/1.2 var(--ss-font-mono); text-transform: uppercase; letter-spacing: var(--ss-track-caps); }
html[data-ui="new"][data-theme="field-ops"] .sky-sched .ssc-bucket-h .n { font: inherit; padding: 4px 10px; border: var(--ss-bw-strong) solid currentColor; background: transparent; }
html[data-ui="new"][data-theme="field-ops"] .sky-sched .ssc-row { gap: 10px 16px; padding: 16px 18px; }
html[data-ui="new"][data-theme="field-ops"] .sky-sched .ssc-row + .ssc-row { border-top-width: var(--ss-bw-strong); }
html[data-ui="new"][data-theme="field-ops"] .sky-sched .ssc-row-main { flex: 1 1 320px; }
html[data-ui="new"][data-theme="field-ops"] .sky-sched .ssc-row-acts { flex: 0 1 auto; justify-content: flex-end; gap: 8px; }
html[data-ui="new"][data-theme="field-ops"] .sky-sched .ssc-stowask button { min-height: var(--ss-tap); padding: 0 16px; font-size: var(--ss-fs-16); }
html[data-ui="new"][data-theme="field-ops"] .sky-sched .ssc-map .leaflet-control-zoom a { width: 44px; height: 44px; line-height: 44px; font-size: 22px; }

/* ---- C · Warm Modern: soft cards and tinted day tiles ---- */
html[data-ui="new"][data-theme="warm-modern"] .sky-sched :is(.ssc-hero, .ssc-bucket) { border-color: transparent; border-radius: var(--ss-r-lg); box-shadow: var(--ss-shadow-sm); }
html[data-ui="new"][data-theme="warm-modern"] .sky-sched .ssc-bucket:is(.overdue, .today) { border-top: 0; }
html[data-ui="new"][data-theme="warm-modern"] .sky-sched .ssc-bucket.overdue .ssc-bucket-h { background: var(--ss-danger-soft); }
html[data-ui="new"][data-theme="warm-modern"] .sky-sched .ssc-bucket.today .ssc-bucket-h { background: var(--ss-accent-soft); color: var(--ss-accent-text); }
html[data-ui="new"][data-theme="warm-modern"] .sky-sched :is(.ssc-hero-head, .ssc-bucket-h) { border-bottom-color: transparent; }
html[data-ui="new"][data-theme="warm-modern"] .sky-sched .ssc-row + .ssc-row { border-top-color: var(--ss-bg-2); }
html[data-ui="new"][data-theme="warm-modern"] .sky-sched .ssc-map { margin: 0 12px; border-radius: var(--ss-r-lg); overflow: hidden; }
html[data-ui="new"][data-theme="warm-modern"] .sky-sched .ssc-runlist { padding: 8px 0; }
html[data-ui="new"][data-theme="warm-modern"] .sky-sched .ssc-chip { border-color: transparent; border-radius: var(--ss-r-lg); background: var(--ss-bg-1); }
html[data-ui="new"][data-theme="warm-modern"] .sky-sched .ssc-chip.active { background: var(--ss-accent-soft); border-color: var(--ss-accent-soft); color: var(--ss-accent-text); }
html[data-ui="new"][data-theme="warm-modern"] .sky-sched .ssc-chip.today:not(.active) { border-color: var(--ss-action-line, var(--ss-action)); }
html[data-ui="new"][data-theme="warm-modern"] .sky-sched .ssc-num { background: var(--ss-accent-soft); color: var(--ss-accent-text); }
html[data-ui="new"][data-theme="warm-modern"] .sky-sched :is(.ssc-mini, .ssc-date-in, .ssc-primary, .ssc-newbtn, .ssc-ghost, .ssc-viewtoggle, .ssc-viewtoggle button) { border-radius: var(--ss-r-pill); }
html[data-ui="new"][data-theme="warm-modern"] .sky-sched .ssc-mini.go { border-color: var(--ss-success-soft); background: var(--ss-success-soft); color: var(--ss-success); }
html[data-ui="new"][data-theme="warm-modern"] .sky-sched > .ssc-buckets > .ssc-empty { border: 0; background: var(--ss-bg-1); border-radius: var(--ss-r-lg); }

/* ---- phones: one column, 44px targets (56px in Field Ops), actions in a thumb row ---- */
@media (max-width: 768px) {
  html[data-ui="new"] .sky-sched .ssc-daychips { padding: 12px 16px 2px; }
  html[data-ui="new"] .sky-sched .ssc-hero,
  html[data-ui="new"][data-theme="field-ops"] .sky-sched .ssc-hero { margin: 12px 16px 0; }
  html[data-ui="new"] .sky-sched .ssc-buckets,
  html[data-ui="new"][data-theme="field-ops"] .sky-sched .ssc-buckets,
  html[data-ui="new"] .sky-sched:has(> .ssc-hero[style*="none"]) > .ssc-buckets { padding: 16px 16px 0; }
  html[data-ui="new"] .sky-sched .ssc-hero-head { padding: 12px 14px; }
  html[data-ui="new"] .sky-sched .ssc-hero-actions { width: 100%; }
  html[data-ui="new"] .sky-sched .ssc-hero-actions > .ssc-primary { flex: 1; justify-content: center; }
  html[data-ui="new"] .sky-sched .ssc-map,
  html[data-ui="new"][data-theme="field-ops"] .sky-sched .ssc-map { min-height: 240px; height: 240px; }
  html[data-ui="new"] .sky-sched .ssc-run { flex-wrap: wrap; padding: 12px 14px; }
  html[data-ui="new"] .sky-sched .ssc-run-main { flex: 1 1 0; min-width: 0; flex-basis: auto; }
  html[data-ui="new"] .sky-sched :is(.ssc-run-acts, .ssc-row-acts) { flex: 1 1 100%; justify-content: flex-start; padding-left: 0; }
  html[data-ui="new"] .sky-sched :is(.ssc-viewtoggle button, .ssc-timefmt-toggle, .ssc-newbtn, .ssc-primary, .ssc-mini, .ssc-date-in, .ssc-stowask button) { min-height: 44px; }
  html[data-ui="new"] .sky-sched .ssc-ghost { width: 44px; height: 44px; }
  html[data-ui="new"] .sky-sched .ssc-map .leaflet-control-zoom a { width: 44px; height: 44px; line-height: 44px; }
  html[data-ui="new"] .sky-sched .ssc-date-in { flex: 1 1 100%; font-size: 16px; }
  html[data-ui="new"] .sky-sched :is(.ssc-run-acts, .ssc-row-acts) > :not(.ssc-date-in) { flex: 1 1 0; justify-content: center; }
  /* Field Ops: everything at 56px; a run card's and a row's actions fill the thumb row, the primary last */
  html[data-ui="new"][data-theme="field-ops"] .sky-sched :is(.ssc-viewtoggle button, .ssc-timefmt-toggle, .ssc-newbtn, .ssc-primary, .ssc-mini, .ssc-date-in, .ssc-stowask button) { min-height: var(--ss-tap); }
  html[data-ui="new"][data-theme="field-ops"] .sky-sched .ssc-ghost { width: var(--ss-tap); height: var(--ss-tap); }
  html[data-ui="new"][data-theme="field-ops"] .sky-sched .ssc-map .leaflet-control-zoom a { width: 56px; height: 56px; line-height: 56px; }
  html[data-ui="new"][data-theme="field-ops"] .sky-sched .ssc-chip { min-width: 80px; padding: 10px; }
  html[data-ui="new"][data-theme="field-ops"] .sky-sched .ssc-num { width: 40px; height: 40px; }
  html[data-ui="new"][data-theme="field-ops"] .sky-sched :is(.ssc-run-acts, .ssc-row-acts) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; flex: 1 1 100%; padding-left: 0; }
  html[data-ui="new"][data-theme="field-ops"] .sky-sched :is(.ssc-run-acts, .ssc-row-acts) > :is(.ssc-date-in, .ssc-mini.go) { grid-column: 1 / -1; }
  html[data-ui="new"][data-theme="field-ops"] .sky-sched :is(.ssc-run-acts, .ssc-row-acts) > .ssc-mini.go { order: 9; margin: 0; }
  html[data-ui="new"][data-theme="field-ops"] .sky-sched :is(.ssc-run-acts, .ssc-row-acts) > * { justify-content: center; width: 100%; }
  html[data-ui="new"][data-theme="field-ops"] .sky-sched .ssc-row-main { flex: 1 1 100%; }
  html[data-ui="new"][data-theme="field-ops"] .sky-sched .ssc-bucket-h { padding: 12px 16px; }
  html[data-ui="new"][data-theme="field-ops"] .sky-sched :is(.ssc-run, .ssc-row) { padding: 14px 16px; }
}
/* === end Themes fix #2 === */

/* === Themes fix #4: CRM dashboard === */
/* connect · Office › CRM › Dashboard (/office/crm/dashboard -> /connect/, app/templates/dashboard.html).
   The template carries a new-UI frame (.ccn: header with actions, a stats slot, main + rail, a widgets
   slot) that it hides itself. These rules show it; the template's ccnPlace() then MOVES the command
   center's own sections into it (same ids, same renderers, one fetch), and puts them home on a live
   switch to Classic. Classic never loads this file. ccnPlace() only moves when this rule shows the
   frame, so the shell and connect can deploy in either order.
   A (Clean Pro, Clean Pro Field): one joined stats strip; moves, Lead Radar, pipeline, activity | rail
   (Quick actions, growth, client health).
   B (Field Ops): big header actions, coloured KPI caps, Quick actions as a big-button bar, three columns.
   C (Warm Modern): soft separate stat cards with icon tiles, soft cards, Quick actions as tiles. */
html[data-ui="new"] .ccn { display: block; max-width: 1240px; margin: 0 auto; padding: 4px 0 48px; }
html[data-ui="new"] .ccn ~ :is(.cc-head, .cc-section-gap, .cc-strip, .cc-widgets-head, .widget-grid) { display: none !important; }
html[data-ui="new"] .ccn [data-cc-hidden] { display: none !important; }
html[data-ui="new"] .ccn a { text-decoration: none; }

/* header: title + the page's main actions */
html[data-ui="new"] .ccn-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin-bottom: 20px; }
html[data-ui="new"] .ccn-hi { font-size: var(--ss-c-h1-fs); font-weight: var(--ss-fw-semibold); letter-spacing: var(--ss-track-heading, -.01em); line-height: 1.15; margin: 0; color: var(--ss-ink); }
html[data-ui="new"] .ccn-sub { margin: 4px 0 0; font-size: var(--ss-fs-13); color: var(--ss-ink-2); }
html[data-ui="new"] .ccn-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
html[data-ui="new"] .ccn-actions .btn { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
/* button heights go through the component tokens (--ss-c-btn-h*, and --ss-ctl-h* in Field Ops):
   the shared .btn rules out-rank a page selector */
html[data-ui="new"] .ccn .cc-radar-act { --ss-c-btn-h-sm: 36px; }

/* stats: one instrument strip */
html[data-ui="new"] .ccn .cc-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: none; margin-bottom: 16px; border: var(--ss-bw) solid var(--ss-c-card-line); border-radius: var(--ss-c-card-r); background: var(--ss-surface); box-shadow: var(--ss-c-card-shadow); overflow: hidden; }
html[data-ui="new"] .ccn .cc-stat { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-left: var(--ss-bw) solid var(--ss-c-card-line); border-radius: 0; color: var(--ss-ink); }
html[data-ui="new"] .ccn .cc-stat:first-child { border-left: 0; }
html[data-ui="new"] .ccn .cc-stat:hover { background: var(--ss-bg-1); }
html[data-ui="new"] .ccn .cc-stat-label { font-size: var(--ss-fs-12); font-weight: var(--ss-fw-medium); color: var(--ss-ink-2); }
html[data-ui="new"] .ccn .cc-stat-value { font-size: var(--ss-fs-24); font-weight: var(--ss-fw-semibold); letter-spacing: -.02em; line-height: 1.1; }
html[data-ui="new"] .ccn .cc-stat-note { font-size: var(--ss-fs-12); color: var(--ss-ink-3); }
html[data-ui="new"] .ccn :is(.cc-up, .cc-down, .cc-warn) { font-weight: var(--ss-fw-medium); }
html[data-ui="new"] .ccn .cc-up { color: var(--ss-success); }
html[data-ui="new"] .ccn :is(.cc-down, .cc-warn) { color: var(--ss-danger); }

/* body: main column + rail */
html[data-ui="new"] .ccn-body { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
html[data-ui="new"] .ccn :is(.ccn-main, .ccn-rail) { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* cards */
html[data-ui="new"] .ccn .cc-panel { height: auto; border: var(--ss-bw) solid var(--ss-c-card-line); border-radius: var(--ss-c-card-r); background: var(--ss-surface); box-shadow: var(--ss-c-card-shadow); overflow: hidden; }
html[data-ui="new"] .ccn .cc-panel-head { align-items: center; min-height: 52px; padding: 12px 16px; border-bottom: var(--ss-bw) solid var(--ss-line); }
html[data-ui="new"] .ccn .cc-panel-head h3 { display: flex; align-items: center; font-size: var(--ss-c-head-fs); font-weight: var(--ss-fw-semibold); color: var(--ss-ink); }
html[data-ui="new"] .ccn .cc-panel-head h3 > i { display: none; }
html[data-ui="new"] .ccn .cc-panel-head p { margin-top: 2px; font-size: var(--ss-fs-12); color: var(--ss-ink-3); }
html[data-ui="new"] .ccn .cc-panel-head > a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--ss-fs-12); font-weight: var(--ss-fw-medium); color: var(--ss-ink-2); }
html[data-ui="new"] .ccn .cc-panel-head > a::after { content: "→"; margin-left: 4px; }
html[data-ui="new"] .ccn .cc-panel-head > a:hover { color: var(--ss-ink); }
html[data-ui="new"] .ccn .cc-panel-body { padding: 12px 16px 16px; }
html[data-ui="new"] .ccn .cc-empty { font-size: var(--ss-fs-13); color: var(--ss-ink-3); }

/* next best moves: a list of rows */
html[data-ui="new"] .ccn #ccNextMoves .cc-panel-body { padding: 0; }
html[data-ui="new"] .ccn #ccNextMoves .cc-empty { padding: 14px 16px; }
html[data-ui="new"] .ccn .cc-move { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; min-height: 56px; margin: 0; padding: 8px 16px; border: 0; border-top: var(--ss-bw) solid var(--ss-line); border-radius: 0; background: none; box-shadow: inset 3px 0 0 var(--cc-p, transparent); }
html[data-ui="new"] .ccn .cc-move:first-child { border-top: 0; }
html[data-ui="new"] .ccn .cc-move.cc-p-high { --cc-p: var(--ss-danger-fill); background: none; }
html[data-ui="new"] .ccn .cc-move.cc-p-medium { --cc-p: var(--ss-warning-fill); }
html[data-ui="new"] .ccn .cc-move-icon { width: 28px; height: 28px; border: var(--ss-bw) solid var(--ss-line); border-radius: var(--ss-r-sm); background: var(--ss-surface); color: var(--ss-ink-2); font-size: 14px; }
html[data-ui="new"] .ccn .cc-move-title { font-size: var(--ss-fs-13); font-weight: var(--ss-fw-medium); color: var(--ss-ink); }
html[data-ui="new"] .ccn .cc-move-detail { font-size: var(--ss-fs-12); color: var(--ss-ink-3); }
html[data-ui="new"] .ccn .cc-move-flag { font: var(--ss-fw-medium) var(--ss-fs-11)/1 var(--ss-font-sans); padding: 3px 7px; border-radius: var(--ss-r-pill); background: var(--ss-danger-soft); color: var(--ss-danger); }
html[data-ui="new"] .ccn .cc-move-go { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border: var(--ss-bw) solid var(--ss-line-2); border-radius: var(--ss-r); font-size: var(--ss-fs-13); font-weight: var(--ss-fw-medium); color: var(--ss-ink); background: var(--ss-surface); }
html[data-ui="new"] .ccn .cc-move-go:hover { background: var(--ss-bg-1); }

/* Lead Radar: a table */
html[data-ui="new"] .ccn #ccLeadRadar .cc-panel-body { padding: 0 0 8px; }
html[data-ui="new"] .ccn #ccLeadRadar .cc-panel-body > :is(.cc-empty, a.small) { display: block; padding: 12px 16px 4px; }
html[data-ui="new"] .ccn #ccLeadRadar .cc-panel-body > a.small { font-size: var(--ss-fs-13); font-weight: var(--ss-fw-medium); color: var(--ss-ink-2); }
html[data-ui="new"] .ccn .cc-radar-row { grid-template-columns: minmax(0, 1.3fr) 48px minmax(0, 1.6fr) auto; gap: 12px; padding: 10px 16px; border-top: var(--ss-bw) solid var(--ss-line); }
html[data-ui="new"] .ccn .cc-radar-row:not(.cc-radar-headrow):hover { background: var(--ss-bg-1); }
html[data-ui="new"] .ccn .cc-radar-row.cc-radar-headrow { padding: 8px 16px; border-top: 0; background: var(--ss-bg-1); font: var(--ss-fw-medium) var(--ss-fs-11)/1.2 var(--ss-font-mono); text-transform: uppercase; letter-spacing: var(--ss-track-caps); color: var(--ss-ink-3); }
html[data-ui="new"] .ccn .cc-radar-co { font-size: var(--ss-fs-13); font-weight: var(--ss-fw-medium); color: var(--ss-ink); }
html[data-ui="new"] .ccn :is(.cc-radar-meta, .cc-radar-why) { font-size: var(--ss-fs-12); color: var(--ss-ink-3); }
html[data-ui="new"] .ccn .cc-score { width: 36px; height: 36px; border-width: var(--ss-bw-strong, 2px); font-size: var(--ss-fs-13); font-weight: var(--ss-fw-semibold); }
html[data-ui="new"] .ccn .cc-fit-label { font-size: var(--ss-fs-12); font-weight: var(--ss-fw-medium); }
html[data-ui="new"] .ccn .cc-fit-possible { color: var(--ss-ink-2); }
html[data-ui="new"] .ccn .cc-fit-high { color: var(--ss-success); }
html[data-ui="new"] .ccn .cc-fit-good { color: var(--ss-warning); }
html[data-ui="new"] .ccn .cc-radar-act .btn { white-space: nowrap; }

/* pipeline bars, tiles, lists, activity */
html[data-ui="new"] .ccn .cc-stage { grid-template-columns: minmax(0, 8rem) 1fr auto; gap: 12px; padding: 6px 0; font-size: var(--ss-fs-13); color: var(--ss-ink); }
html[data-ui="new"] .ccn .cc-stage-track { height: 8px; background: var(--ss-bg-3); }
html[data-ui="new"] .ccn .cc-stage-fill { background: var(--ss-ink); }
html[data-ui="new"] .ccn .cc-stage-num { font-size: var(--ss-fs-12); color: var(--ss-ink-3); }
html[data-ui="new"] .ccn .cc-tiles { gap: 8px; }
html[data-ui="new"] .ccn .cc-tile { padding: 10px 12px; border: var(--ss-bw) solid var(--ss-line); border-radius: var(--ss-r); color: var(--ss-ink); }
html[data-ui="new"] .ccn a.cc-tile:hover { background: var(--ss-bg-1); }
html[data-ui="new"] .ccn .cc-tile-label { font-size: var(--ss-fs-12); font-weight: var(--ss-fw-medium); color: var(--ss-ink-2); }
html[data-ui="new"] .ccn .cc-tile-value { font-size: var(--ss-fs-20); font-weight: var(--ss-fw-semibold); letter-spacing: -.01em; }
html[data-ui="new"] .ccn .cc-tile-note { font-size: var(--ss-fs-11); color: var(--ss-ink-3); }
html[data-ui="new"] .ccn .cc-list-title { margin-top: 14px; font: var(--ss-fw-medium) var(--ss-fs-11)/1.2 var(--ss-font-mono); text-transform: uppercase; letter-spacing: var(--ss-track-caps); color: var(--ss-ink-3); }
html[data-ui="new"] .ccn .cc-list { margin-top: 6px; }
html[data-ui="new"] .ccn .cc-list li { align-items: center; min-height: 44px; padding: 0; border-top: var(--ss-bw) solid var(--ss-line); font-size: var(--ss-fs-13); }
html[data-ui="new"] .ccn .cc-list li a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ss-ink); font-weight: var(--ss-fw-medium); }
html[data-ui="new"] .ccn .cc-list li span:last-child { font-size: var(--ss-fs-12); color: var(--ss-ink-3); }
html[data-ui="new"] .ccn .cc-act { gap: 12px; padding: 10px 0; border-top: var(--ss-bw) solid var(--ss-line); font-size: var(--ss-fs-13); color: var(--ss-ink); }
html[data-ui="new"] .ccn .cc-act:first-child { border-top: 0; }
html[data-ui="new"] .ccn .cc-act-icon { width: 28px; height: 28px; border: var(--ss-bw) solid var(--ss-line); border-radius: var(--ss-r-sm); background: var(--ss-surface); color: var(--ss-ink-2); font-size: 13px; }
html[data-ui="new"] .ccn .cc-act-when { font-size: var(--ss-fs-12); color: var(--ss-ink-3); }

/* Quick actions: a two-column button list at the top of the rail */
html[data-ui="new"] .ccn #ccQuickActions .row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
html[data-ui="new"] .ccn #ccQuickActions .row > * { width: auto; max-width: none; padding: 0; margin: 0; }
html[data-ui="new"] .ccn .quick-action-btn { min-height: 44px; height: 100%; padding: 8px 12px; gap: 8px; border: var(--ss-bw) solid var(--ss-line-2); border-radius: var(--ss-r); background: var(--ss-surface); color: var(--ss-ink); font-size: var(--ss-fs-13); font-weight: var(--ss-fw-medium); text-align: left; }
html[data-ui="new"] .ccn .quick-action-btn:hover { border-color: var(--ss-line-2); background: var(--ss-bg-1); color: var(--ss-ink); }
html[data-ui="new"] .ccn .quick-action-btn i { color: var(--ss-ink-2) !important; font-size: 15px; }

/* Your widgets: below, full width, as cards */
html[data-ui="new"] .ccn-widgets .cc-widgets-head { margin: 32px 0 12px; }
html[data-ui="new"] .ccn-widgets .cc-widgets-head h3 { font-size: var(--ss-c-head-fs); font-weight: var(--ss-fw-semibold); color: var(--ss-ink); }
html[data-ui="new"] .ccn-widgets .cc-widgets-head h3 > i { color: var(--ss-ink-3); }
html[data-ui="new"] .ccn-widgets .cc-widgets-head { --ss-c-btn-h-sm: 36px; }
html[data-ui="new"] .ccn-widgets .widget-grid { gap: 16px; }
html[data-ui="new"] .ccn-widgets .dashboard-widget { border: var(--ss-bw) solid var(--ss-c-card-line); border-radius: var(--ss-c-card-r); background: var(--ss-surface); box-shadow: var(--ss-c-card-shadow); }
html[data-ui="new"] .ccn-widgets .dashboard-widget-header { border-bottom: var(--ss-bw) solid var(--ss-line); }

/* ---- B · Field Ops: big header actions, coloured KPI caps, a Quick actions bar, three columns ---- */
html[data-ui="new"][data-theme="field-ops"] .ccn-hi { font-weight: 800; }
html[data-ui="new"][data-theme="field-ops"] .ccn-sub { font-size: var(--ss-fs-16); }
html[data-ui="new"][data-theme="field-ops"] .ccn-actions { --ss-c-btn-h: var(--ss-tap, 56px); --ss-ctl-h: var(--ss-tap, 56px); }
html[data-ui="new"][data-theme="field-ops"] .ccn-actions .btn { padding-inline: 18px; font-size: var(--ss-fs-16); font-weight: var(--ss-fw-semibold); }
html[data-ui="new"][data-theme="field-ops"] .ccn .cc-strip { border-width: var(--ss-bw-strong); }
html[data-ui="new"][data-theme="field-ops"] .ccn .cc-stat { border-left-width: var(--ss-bw-strong); border-top: 4px solid var(--kpi-c, var(--ss-ink)); padding: 14px 16px 16px; gap: 8px; }
html[data-ui="new"][data-theme="field-ops"] .ccn .cc-stat:nth-child(1) { --kpi-c: var(--ss-accent); }
html[data-ui="new"][data-theme="field-ops"] .ccn .cc-stat:nth-child(2) { --kpi-c: var(--ss-warning-fill); }
html[data-ui="new"][data-theme="field-ops"] .ccn .cc-stat:nth-child(3) { --kpi-c: var(--ss-info-fill); }
html[data-ui="new"][data-theme="field-ops"] .ccn .cc-stat:nth-child(4) { --kpi-c: var(--ss-line-2); }
html[data-ui="new"][data-theme="field-ops"] .ccn .cc-stat:nth-child(5) { --kpi-c: var(--ss-success-fill); }
html[data-ui="new"][data-theme="field-ops"] .ccn .cc-stat-label { font: var(--ss-fw-medium) var(--ss-fs-11)/1.2 var(--ss-font-mono); text-transform: uppercase; letter-spacing: var(--ss-track-caps); }
html[data-ui="new"][data-theme="field-ops"] .ccn .cc-stat-value { font-size: var(--ss-fs-32); font-weight: 800; }
html[data-ui="new"][data-theme="field-ops"] .ccn .cc-stat-note { font-size: var(--ss-fs-14); color: var(--ss-ink-2); }
html[data-ui="new"][data-theme="field-ops"] .ccn-body {
  grid-template-columns: 420px minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "bar bar bar" "moves radar radar" "pipe health growth" "act act act";
}
html[data-ui="new"][data-theme="field-ops"] .ccn :is(.ccn-main, .ccn-rail) { display: contents; }
html[data-ui="new"][data-theme="field-ops"] .ccn #ccQuickActions { grid-area: bar; }
html[data-ui="new"][data-theme="field-ops"] .ccn #ccNextMoves { grid-area: moves; align-self: stretch; }
html[data-ui="new"][data-theme="field-ops"] .ccn #ccLeadRadar { grid-area: radar; }
html[data-ui="new"][data-theme="field-ops"] .ccn #ccPipeline { grid-area: pipe; align-self: stretch; }
html[data-ui="new"][data-theme="field-ops"] .ccn #ccClientHealth { grid-area: health; align-self: stretch; }
html[data-ui="new"][data-theme="field-ops"] .ccn #ccGrowth { grid-area: growth; align-self: stretch; }
html[data-ui="new"][data-theme="field-ops"] .ccn #ccActivity { grid-area: act; }
html[data-ui="new"][data-theme="field-ops"] .ccn .cc-panel { border-width: var(--ss-bw-strong); }
html[data-ui="new"][data-theme="field-ops"] .ccn .cc-panel-head { min-height: 56px; border-bottom-width: var(--ss-bw-strong); }
html[data-ui="new"][data-theme="field-ops"] .ccn .cc-panel-head h3 { font-size: var(--ss-fs-16); font-weight: 700; }
html[data-ui="new"][data-theme="field-ops"] .ccn .cc-panel-head h3 > i { display: inline-block; color: var(--ss-ink); }
html[data-ui="new"][data-theme="field-ops"] .ccn .cc-panel-head p { font-size: var(--ss-fs-13); color: var(--ss-ink-2); }
html[data-ui="new"][data-theme="field-ops"] .ccn .cc-panel-head > a { min-height: 56px; font-size: var(--ss-fs-14); color: var(--ss-action-text); }
html[data-ui="new"][data-theme="field-ops"] .ccn #ccQuickActions .cc-panel-head { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
html[data-ui="new"][data-theme="field-ops"] .ccn #ccQuickActions { position: relative; border: 0; background: none; box-shadow: none; overflow: visible; }
html[data-ui="new"][data-theme="field-ops"] .ccn #ccQuickActions .cc-panel-body { padding: 0; }
html[data-ui="new"][data-theme="field-ops"] .ccn #ccQuickActions .row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
html[data-ui="new"][data-theme="field-ops"] .ccn .quick-action-btn { min-height: var(--ss-tap, 56px); border-width: var(--ss-bw-strong); font-size: var(--ss-fs-16); font-weight: var(--ss-fw-semibold); }
html[data-ui="new"][data-theme="field-ops"] .ccn .quick-action-btn i { color: var(--ss-ink) !important; font-size: 18px; }
html[data-ui="new"][data-theme="field-ops"] .ccn .cc-move { min-height: 64px; gap: 14px; grid-template-columns: 40px minmax(0, 1fr) auto; box-shadow: inset 5px 0 0 var(--cc-p, transparent); }
html[data-ui="new"][data-theme="field-ops"] .ccn .cc-move-icon { width: 40px; height: 40px; border-width: var(--ss-bw-strong); border-radius: var(--ss-r); font-size: 18px; color: var(--ss-ink); }
html[data-ui="new"][data-theme="field-ops"] .ccn .cc-move-title { font-size: var(--ss-fs-16); font-weight: var(--ss-fw-semibold); }
html[data-ui="new"][data-theme="field-ops"] .ccn .cc-move-detail { font-size: var(--ss-fs-14); color: var(--ss-ink-2); }
html[data-ui="new"][data-theme="field-ops"] .ccn .cc-move-go { min-height: var(--ss-tap, 56px); border-width: var(--ss-bw-strong); font-size: var(--ss-fs-14); font-weight: var(--ss-fw-semibold); }
html[data-ui="new"][data-theme="field-ops"] .ccn .cc-radar-co { font-size: var(--ss-fs-16); font-weight: var(--ss-fw-semibold); }
html[data-ui="new"][data-theme="field-ops"] .ccn :is(.cc-radar-meta, .cc-radar-why) { font-size: var(--ss-fs-14); color: var(--ss-ink-2); }
html[data-ui="new"][data-theme="field-ops"] .ccn .cc-score { width: 44px; height: 44px; border-width: 3px; font-size: var(--ss-fs-16); font-weight: 800; }
html[data-ui="new"][data-theme="field-ops"] .ccn .cc-radar-act { --ss-c-btn-h-sm: var(--ss-tap, 56px); --ss-ctl-h-sm: var(--ss-tap, 56px); }
html[data-ui="new"][data-theme="field-ops"] .ccn .cc-radar-act .btn { font-size: var(--ss-fs-14); font-weight: var(--ss-fw-semibold); }
html[data-ui="new"][data-theme="field-ops"] .ccn .cc-stage { font-size: var(--ss-fs-14); font-weight: var(--ss-fw-medium); }
html[data-ui="new"][data-theme="field-ops"] .ccn .cc-stage-track { height: 12px; border-radius: 0; }
html[data-ui="new"][data-theme="field-ops"] .ccn .cc-stage-fill { border-radius: 0; background: var(--ss-accent); }
html[data-ui="new"][data-theme="field-ops"] .ccn .cc-stage-num { font: var(--ss-fw-medium) var(--ss-fs-13)/1.2 var(--ss-font-mono); color: var(--ss-ink-2); }
html[data-ui="new"][data-theme="field-ops"] .ccn .cc-tile { border-width: var(--ss-bw-strong); }
html[data-ui="new"][data-theme="field-ops"] .ccn .cc-tile-label { font: var(--ss-fw-medium) var(--ss-fs-11)/1.2 var(--ss-font-mono); text-transform: uppercase; letter-spacing: var(--ss-track-caps); }
html[data-ui="new"][data-theme="field-ops"] .ccn .cc-tile-value { font-size: var(--ss-fs-28); font-weight: 800; }
html[data-ui="new"][data-theme="field-ops"] .ccn .cc-tile-note { font-size: var(--ss-fs-13); color: var(--ss-ink-2); }
html[data-ui="new"][data-theme="field-ops"] .ccn .cc-list li { min-height: var(--ss-tap, 56px); font-size: var(--ss-fs-14); }
html[data-ui="new"][data-theme="field-ops"] .ccn .cc-list li a { min-height: var(--ss-tap, 56px); }
html[data-ui="new"][data-theme="field-ops"] .ccn #ccActivity .cc-panel-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
html[data-ui="new"][data-theme="field-ops"] .ccn .cc-act { display: flex; font-size: var(--ss-fs-14); font-weight: var(--ss-fw-medium); }
html[data-ui="new"][data-theme="field-ops"] .ccn .cc-act:nth-child(2) { border-top: 0; }
html[data-ui="new"][data-theme="field-ops"] .ccn .cc-act-icon { width: 36px; height: 36px; border-width: var(--ss-bw-strong); border-radius: var(--ss-r); color: var(--ss-ink); }
html[data-ui="new"][data-theme="field-ops"] .ccn .cc-act-when { font-size: var(--ss-fs-13); color: var(--ss-ink-2); }
html[data-ui="new"][data-theme="field-ops"] .ccn-widgets .cc-widgets-head { --ss-c-btn-h-sm: var(--ss-tap, 56px); --ss-ctl-h-sm: var(--ss-tap, 56px); }
html[data-ui="new"][data-theme="field-ops"] .ccn-widgets .dashboard-widget { border-width: var(--ss-bw-strong); }

/* ---- C · Warm Modern: soft stat cards with icon tiles, soft cards, Quick actions as tiles ---- */
html[data-ui="new"][data-theme="warm-modern"] .ccn .cc-strip { gap: 14px; border: 0; background: none; box-shadow: none; overflow: visible; }
html[data-ui="new"][data-theme="warm-modern"] .ccn .cc-stat { border: var(--ss-bw) solid var(--ss-c-card-line); border-radius: var(--ss-c-card-r); background: var(--ss-surface); box-shadow: var(--ss-c-card-shadow); padding: 14px 16px; gap: 8px; }
html[data-ui="new"][data-theme="warm-modern"] .ccn .cc-stat-label { display: flex; align-items: center; gap: 10px; font-size: var(--ss-fs-13); color: var(--ss-ink); }
html[data-ui="new"][data-theme="warm-modern"] .ccn .cc-stat-label::before { content: var(--cc-ic, "\f4dd"); flex: none; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--ss-r-sm); background: var(--cc-ic-bg, var(--ss-accent-soft)); color: var(--cc-ic-c, var(--ss-accent-text)); font: normal 15px/1 "bootstrap-icons"; }
html[data-ui="new"][data-theme="warm-modern"] .ccn .cc-stat[href*="tab=prospects"] { --cc-ic: "\f52a"; }
html[data-ui="new"][data-theme="warm-modern"] .ccn .cc-stat[href*="/tasks"] { --cc-ic: "\f5c1"; --cc-ic-bg: var(--ss-warning-soft); --cc-ic-c: var(--ss-warning); }
html[data-ui="new"][data-theme="warm-modern"] .ccn .cc-stat[href*="tab=pipeline"] { --cc-ic: "\f44d"; --cc-ic-bg: var(--ss-info-soft); --cc-ic-c: var(--ss-info); }
html[data-ui="new"][data-theme="warm-modern"] .ccn .cc-stat[href*="/quotes"] { --cc-ic: "\f38b"; }
html[data-ui="new"][data-theme="warm-modern"] .ccn .cc-stat[href*="tab=pipeline"]:last-child { --cc-ic: "\f5e7"; --cc-ic-bg: var(--ss-success-soft); --cc-ic-c: var(--ss-success); }
html[data-ui="new"][data-theme="warm-modern"] .ccn .cc-stat-value { font-size: var(--ss-fs-28); }
html[data-ui="new"][data-theme="warm-modern"] .ccn-body { grid-template-columns: minmax(0, 1fr) 370px; }
html[data-ui="new"][data-theme="warm-modern"] .ccn .cc-panel-head { border-bottom: 0; }
html[data-ui="new"][data-theme="warm-modern"] .ccn .cc-panel-head h3 { font-size: var(--ss-fs-14); }
html[data-ui="new"][data-theme="warm-modern"] .ccn .cc-panel-head > a { color: var(--ss-accent-text); }
html[data-ui="new"][data-theme="warm-modern"] .ccn .cc-panel-body { padding-top: 0; }
html[data-ui="new"][data-theme="warm-modern"] .ccn #ccNextMoves .cc-moves { padding: 0 8px 8px; }
html[data-ui="new"][data-theme="warm-modern"] .ccn .cc-move { border-top-style: dashed; border-radius: var(--ss-r); box-shadow: none; }
html[data-ui="new"][data-theme="warm-modern"] .ccn .cc-move.cc-p-high { background: var(--ss-danger-soft); border-top-color: transparent; }
html[data-ui="new"][data-theme="warm-modern"] .ccn .cc-move.cc-p-high + .cc-move { border-top-color: transparent; }
html[data-ui="new"][data-theme="warm-modern"] .ccn :is(.cc-move-icon, .cc-act-icon) { width: 30px; height: 30px; border: 0; border-radius: var(--ss-r); background: var(--ss-accent-soft); color: var(--ss-accent-text); }
html[data-ui="new"][data-theme="warm-modern"] .ccn .cc-move.cc-p-high .cc-move-icon { background: var(--ss-surface); color: var(--ss-danger); }
html[data-ui="new"][data-theme="warm-modern"] .ccn .cc-move-go { border: 0; border-radius: var(--ss-r-pill); background: var(--ss-accent-soft); color: var(--ss-accent-text); }
html[data-ui="new"][data-theme="warm-modern"] .ccn .cc-radar-row.cc-radar-headrow { background: none; font: var(--ss-fw-medium) var(--ss-fs-12)/1.2 var(--ss-font-sans); text-transform: none; letter-spacing: 0; }
html[data-ui="new"][data-theme="warm-modern"] .ccn .cc-radar-row { border-top-style: dashed; }
html[data-ui="new"][data-theme="warm-modern"] .ccn .cc-score { border: 0; background: var(--ss-bg-2); }
html[data-ui="new"][data-theme="warm-modern"] .ccn .cc-fit-high .cc-score { background: var(--ss-success-soft); }
html[data-ui="new"][data-theme="warm-modern"] .ccn .cc-fit-good .cc-score { background: var(--ss-warning-soft); }
html[data-ui="new"][data-theme="warm-modern"] .ccn .cc-radar-act .btn { border-radius: var(--ss-r-pill); }
html[data-ui="new"][data-theme="warm-modern"] .ccn .cc-stage-fill { background: var(--ss-accent); }
html[data-ui="new"][data-theme="warm-modern"] .ccn .cc-tile { border: 0; background: var(--ss-bg-1); }
html[data-ui="new"][data-theme="warm-modern"] .ccn a.cc-tile:hover { background: var(--ss-bg-2); }
html[data-ui="new"][data-theme="warm-modern"] .ccn .cc-list li { border-top-style: dashed; }
html[data-ui="new"][data-theme="warm-modern"] .ccn .cc-act { border-top-style: dashed; }
html[data-ui="new"][data-theme="warm-modern"] .ccn .quick-action-btn { flex-direction: column; align-items: flex-start; gap: 10px; min-height: 76px; padding: 12px; border: 0; background: var(--ss-bg-1); }
html[data-ui="new"][data-theme="warm-modern"] .ccn .quick-action-btn:hover { background: var(--ss-bg-2); }
html[data-ui="new"][data-theme="warm-modern"] .ccn .quick-action-btn i { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--ss-r); background: var(--ss-accent-soft); color: var(--ss-accent-text) !important; }
html[data-ui="new"][data-theme="warm-modern"] .ccn #ccQuickActions .row > :nth-child(3n+2) .quick-action-btn i { background: var(--ss-info-soft); color: var(--ss-info) !important; }
html[data-ui="new"][data-theme="warm-modern"] .ccn #ccQuickActions .row > :nth-child(3n) .quick-action-btn i { background: var(--ss-success-soft); color: var(--ss-success) !important; }
html[data-ui="new"][data-theme="warm-modern"] .ccn-actions .btn { border-radius: var(--ss-r-pill); }

/* narrow windows: one column; phones: stats two-up, everything 44px (56px in Field Ops) */
@media (max-width: 1100px) {
  html[data-ui="new"] .ccn-body,
  html[data-ui="new"][data-theme] .ccn-body { grid-template-columns: minmax(0, 1fr); grid-template-areas: "bar" "moves" "radar" "pipe" "health" "growth" "act"; }
  html[data-ui="new"][data-theme="field-ops"] .ccn #ccQuickActions .row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  html[data-ui="new"] .ccn { padding-top: 0; }
  html[data-ui="new"] .ccn-head { flex-direction: column; align-items: stretch; gap: 12px; }
  html[data-ui="new"] .ccn-actions { margin-left: 0; }
  html[data-ui="new"] .ccn { --ss-c-btn-h: 44px; --ss-c-btn-h-sm: 44px; }
  html[data-ui="new"][data-theme="field-ops"] .ccn { --ss-c-btn-h: var(--ss-tap, 56px); --ss-ctl-h: var(--ss-tap, 56px); --ss-c-btn-h-sm: var(--ss-tap, 56px); --ss-ctl-h-sm: var(--ss-tap, 56px); }
  html[data-ui="new"] .ccn-actions .btn { flex: 1 1 auto; justify-content: center; }
  html[data-ui="new"] .ccn .cc-strip { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-ui="new"] .ccn .cc-stat { border-left: 0; border-top: var(--ss-bw) solid var(--ss-c-card-line); }
  html[data-ui="new"] .ccn .cc-stat:nth-child(even) { border-left: var(--ss-bw) solid var(--ss-c-card-line); }
  html[data-ui="new"] .ccn .cc-stat:nth-child(-n+2) { border-top: 0; }
  html[data-ui="new"] .ccn .cc-stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
  html[data-ui="new"][data-theme="field-ops"] .ccn .cc-stat { border-top: 4px solid var(--kpi-c, var(--ss-ink)); }
  html[data-ui="new"][data-theme="field-ops"] .ccn .cc-stat-value { font-size: var(--ss-fs-28); }
  html[data-ui="new"][data-theme="warm-modern"] .ccn .cc-strip { gap: 10px; }
  html[data-ui="new"][data-theme="warm-modern"] .ccn .cc-stat { border: var(--ss-bw) solid var(--ss-c-card-line); }
  html[data-ui="new"] .ccn .cc-move { grid-template-columns: 28px minmax(0, 1fr); }
  html[data-ui="new"][data-theme="field-ops"] .ccn .cc-move { grid-template-columns: 40px minmax(0, 1fr); }
  html[data-ui="new"] .ccn .cc-move-go { grid-column: 2; justify-self: start; }
  html[data-ui="new"] .ccn .cc-radar-row { grid-template-columns: 48px minmax(0, 1fr); }
  html[data-ui="new"] .ccn .cc-radar-act { --ss-c-btn-h-sm: 44px; }
  html[data-ui="new"][data-theme="field-ops"] .ccn .cc-radar-act { --ss-c-btn-h-sm: var(--ss-tap, 56px); --ss-ctl-h-sm: var(--ss-tap, 56px); }
  html[data-ui="new"][data-theme="field-ops"] .ccn #ccActivity .cc-panel-body { grid-template-columns: minmax(0, 1fr); }
  html[data-ui="new"][data-theme="field-ops"] .ccn .cc-act:nth-child(2) { border-top: var(--ss-bw) solid var(--ss-line); }
  html[data-ui="new"] .ccn #ccLeadRadar .cc-panel-body > a.small { display: inline-flex; align-items: center; min-height: 44px; }
  html[data-ui="new"][data-theme="field-ops"] .ccn #ccLeadRadar .cc-panel-body > a.small { min-height: var(--ss-tap, 56px); }
  html[data-ui="new"] .ccn-widgets .widget-grid { grid-template-columns: minmax(0, 1fr); }
  html[data-ui="new"] .ccn-widgets .cc-widgets-head { --ss-c-btn-h-sm: 44px; }
  html[data-ui="new"][data-theme="field-ops"] .ccn-widgets .cc-widgets-head { --ss-c-btn-h-sm: var(--ss-tap, 56px); --ss-ctl-h-sm: var(--ss-tap, 56px); }
  html[data-ui="new"] .ccn-widgets a.text-decoration-none { display: inline-flex; align-items: center; min-height: 44px; }
  html[data-ui="new"][data-theme="field-ops"] .ccn-widgets a.text-decoration-none { min-height: var(--ss-tap, 56px); }
}
/* === end Themes fix #4 === */

/* === Themes fix #3: Deliveries === */
/* ==========================================================================
   Themes fix #3 (admin 2026-10-18): deliver · Delivery › Deliveries (projects/list.html),
   Manage delivery (projects/detail.html) and Files (deliverables/manager.html), the
   candidates' layout. Each template carries a new-UI-only frame (.dvn, hidden by the template
   itself, at the end of the page). In the new UI its DVN-PLACE script MOVES the page's own
   nodes (tagged data-dvn-to) into the frame's slots, so every id, form, handler and upload
   stays the Classic one, and a live switch back to Classic puts every node home. The list
   frame is drawn by the server (no script state). The script moves nothing until this file
   says it can (--dvn-frame), so the shell and deliver deploy in either order; Classic never
   loads this file. Office › Home's three layouts:
   A (Clean Pro, Clean Pro Field): header + actions, one stat strip, hand-off steps, main | rail.
   B (Field Ops): heavy rules, coloured KPI caps, mono caps heads, big controls, status bars.
   C (Warm Modern): soft separate cards, icon tiles, deliveries as tiles.
   ========================================================================== */
html[data-ui="new"] { --dvn-frame: 1; }
html[data-ui="new"] main:has(> .dvn.is-ready) > [data-dvn-classic] { display: none !important; }
html[data-ui="new"] main > .dvn.is-ready { display: block; max-width: 1180px; margin: 0 auto; padding: 8px 8px 64px; }
html[data-ui="new"] .dvn a { text-decoration: none; }
html[data-ui="new"] .dvn [hidden] { display: none !important; }

/* header: back link, eyebrow, title, meta | actions */
html[data-ui="new"] .dvn-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 16px 24px; margin-bottom: 20px; }
html[data-ui="new"] .dvn-titles { display: flex; flex-direction: column; gap: 4px; flex: 1 1 360px; min-width: 0; }
html[data-ui="new"] .dvn-back { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 24px; max-width: 100%; font-size: var(--ss-fs-13); color: var(--ss-ink-3); }
html[data-ui="new"] .dvn-back > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-ui="new"] .dvn-back:hover { color: var(--ss-ink); }
html[data-ui="new"] .dvn-eyebrow { font-size: var(--ss-fs-13); color: var(--ss-ink-3); }
html[data-ui="new"] .dvn-title { margin: 0; font-size: var(--ss-c-h1-fs); font-weight: var(--ss-fw-semibold); letter-spacing: var(--ss-track-heading, -.01em); line-height: 1.15; color: var(--ss-ink); overflow-wrap: anywhere; }
html[data-ui="new"] .dvn-sub { margin: 0; font-size: var(--ss-fs-13); color: var(--ss-ink-3); }
html[data-ui="new"] .dvn-meta { display: flex; flex-wrap: wrap; align-items: center; font-size: var(--ss-fs-13); color: var(--ss-ink-2); }
html[data-ui="new"] .dvn-meta > span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
html[data-ui="new"] .dvn-meta > span + span::before { content: "·"; margin: 0 6px; color: var(--ss-ink-3); }
html[data-ui="new"] .dvn-meta .dvn-org { font-weight: var(--ss-fw-semibold); color: var(--ss-ink); }
html[data-ui="new"] .dvn-meta i { color: var(--ss-ink-3); }
html[data-ui="new"] .dvn-meta .dvn-crm, html[data-ui="new"] .dvn-meta .dvn-crm i { color: var(--ss-success); }
html[data-ui="new"] .dvn-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
html[data-ui="new"] .dvn-actions:empty { display: none; }
html[data-ui="new"] .dvn-actions > .d-flex { flex-wrap: wrap; justify-content: flex-end; gap: 8px !important; }
html[data-ui="new"] .dvn-actions .btn { min-height: var(--ss-c-btn-h); font-size: var(--ss-fs-13); }
html[data-ui="new"] .dvn-actions .badge { font-size: var(--ss-fs-12) !important; padding: 5px 10px !important; }

/* stat strip */
html[data-ui="new"] .dvn-stats { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin-bottom: 16px; border: var(--ss-bw) solid var(--ss-c-card-line); border-radius: var(--ss-c-card-r); background: var(--ss-surface); box-shadow: var(--ss-c-card-shadow); overflow: hidden; }
html[data-ui="new"] .dvn-stat { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 16px; border-left: var(--ss-bw) solid var(--ss-c-card-line); color: var(--ss-ink); }
html[data-ui="new"] .dvn-stat:first-child { border-left: 0; }
html[data-ui="new"] .dvn-stat-lab { display: flex; align-items: center; gap: 6px; font-size: var(--ss-fs-12); font-weight: var(--ss-fw-medium); color: var(--ss-ink-2); }
html[data-ui="new"] .dvn-stat-lab i { font-size: 14px; color: var(--ss-ink-3); }
html[data-ui="new"] .dvn-stat-val { font-size: var(--ss-fs-24); font-weight: var(--ss-fw-semibold); line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ss-ink); }
html[data-ui="new"] .dvn-stat-sub { font-size: var(--ss-fs-12); color: var(--ss-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-ui="new"] .dvn-stat.is-hot .dvn-stat-val { color: var(--ss-warning); }

/* cards: the frame's own (.dvn-card) and the moved Classic cards */
html[data-ui="new"] .dvn .card { margin: 0 !important; min-width: 0; }
html[data-ui="new"] .dvn-ch { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 16px; border-bottom: var(--ss-bw) solid var(--ss-line); }
html[data-ui="new"] .dvn-ch h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--ss-c-head-fs); font-weight: var(--ss-fw-semibold); color: var(--ss-ink); min-width: 0; }
html[data-ui="new"] .dvn-ch h2 > i { display: none; color: var(--ss-ink-2); }
html[data-ui="new"] .dvn-count { margin-left: auto; font-size: var(--ss-fs-12); color: var(--ss-ink-3); font-variant-numeric: tabular-nums; }
html[data-ui="new"] .dvn .card > .card-header :is(h5, h6) > i.bi:first-child { color: var(--ss-ink-3); }

/* body: main | rail */
html[data-ui="new"] .dvn-body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
html[data-ui="new"] .dvn-body:not(:has(.dvn-rail > *)) { grid-template-columns: minmax(0, 1fr); }
html[data-ui="new"] :is(.dvn-main, .dvn-rail) { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
html[data-ui="new"] .dvn-rail:empty { display: none; }
html[data-ui="new"] .dvn [data-dvn-card="details"] { order: 5; }

/* ---- Delivery › Deliveries: the list ---- */
html[data-ui="new"] .dvn-rows { list-style: none; margin: 0; padding: 0; }
html[data-ui="new"] .dvn-item { display: grid; grid-template-columns: minmax(0, 1fr) 112px minmax(0, 320px) auto; align-items: center; gap: 16px; min-height: 60px; padding: 8px 16px; border-top: var(--ss-bw) solid var(--ss-line); }
html[data-ui="new"] .dvn-item:first-child { border-top: 0; }
html[data-ui="new"] .dvn-item:hover { background: var(--ss-bg-1); }
html[data-ui="new"] .dvn-item-main { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 44px; color: var(--ss-ink); }
html[data-ui="new"] .dvn-ico { flex: none; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: var(--ss-bw) solid var(--ss-line); border-radius: var(--ss-r-sm); background: var(--ss-surface); color: var(--ss-ink-2); font-size: 15px; }
html[data-ui="new"] .dvn-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
html[data-ui="new"] .dvn-txt .t { font-size: var(--ss-fs-14); font-weight: var(--ss-fw-medium); color: var(--ss-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-ui="new"] .dvn-txt .d { font-size: var(--ss-fs-12); color: var(--ss-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-ui="new"] .dvn-item-main:hover .t { color: var(--ss-action-text); }
html[data-ui="new"] .dvn-item-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; min-width: 0; font-size: var(--ss-fs-12); color: var(--ss-ink-2); font-variant-numeric: tabular-nums; }
html[data-ui="new"] .dvn-m { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
html[data-ui="new"] .dvn-m i { color: var(--ss-ink-3); }
html[data-ui="new"] .dvn-item-acts { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
html[data-ui="new"] .dvn-item-acts form { margin: 0; }
html[data-ui="new"] .dvn-empty { padding: 40px 24px; text-align: center; }
html[data-ui="new"] .dvn-empty-ico { width: 52px; height: 52px; margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; border-radius: var(--ss-r); background: var(--ss-accent-soft); color: var(--ss-accent-text); font-size: 24px; }
html[data-ui="new"] .dvn-empty h2 { margin: 0 0 6px; font-size: var(--ss-fs-18); font-weight: var(--ss-fw-semibold); color: var(--ss-ink); }
html[data-ui="new"] .dvn-empty p { max-width: 480px; margin: 0 auto 20px; font-size: var(--ss-fs-14); color: var(--ss-ink-2); }
html[data-ui="new"] .dvn-howto { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; max-width: 620px; margin: 0 auto 24px; padding: 0; list-style: none; counter-reset: dvn; }
html[data-ui="new"] .dvn-howto > li { counter-increment: dvn; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: var(--ss-fs-13); color: var(--ss-ink-2); }
html[data-ui="new"] .dvn-howto > li::before { content: counter(dvn); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: var(--ss-bw) solid var(--ss-line-strong); border-radius: 50%; font-weight: var(--ss-fw-semibold); color: var(--ss-ink); }

/* ---- Manage delivery: the hand-off steps (the Classic guided-workflow card, moved) ---- */
html[data-ui="new"] .dvn-steps { margin-bottom: 16px; }
html[data-ui="new"] .dvn-steps-lab { margin: 0 0 8px; font-size: var(--ss-fs-13); font-weight: var(--ss-fw-semibold); color: var(--ss-ink); }
html[data-ui="new"] .dvn [data-dvn-card="steps"] > .card-body { padding: 0; }
html[data-ui="new"] .dvn [data-dvn-card="steps"] > .card-body > .row { --bs-gutter-x: 0; --bs-gutter-y: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
html[data-ui="new"] .dvn [data-dvn-card="steps"] > .card-body > .row > [class*="col-"] { width: auto; max-width: none; padding: 16px; border: 0 !important; border-left: var(--ss-bw) solid var(--ss-line) !important; }
html[data-ui="new"] .dvn [data-dvn-card="steps"] > .card-body > .row > [class*="col-"]:first-child { border-left: 0 !important; }
html[data-ui="new"] .dvn [data-dvn-card="steps"] .badge.rounded-pill { flex: none; width: 26px; height: 26px; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; border-radius: 50% !important; font-size: var(--ss-fs-12); }
html[data-ui="new"] .dvn [data-dvn-card="steps"] .badge.rounded-pill::before { display: none; }
html[data-ui="new"] .dvn [data-dvn-card="steps"] h6 { margin-top: 3px; font-size: var(--ss-fs-14); font-weight: var(--ss-fw-semibold); color: var(--ss-ink); }
html[data-ui="new"] .dvn [data-dvn-card="steps"] .btn + .btn { margin-left: 4px; }

/* ---- Files: stage tabs, the file list card, the uploader in the rail ---- */
html[data-ui="new"] .dvn-tabs > .d-flex { flex-wrap: nowrap !important; gap: 0 !important; margin: 0 0 16px !important; border-bottom: var(--ss-bw) solid var(--ss-line); overflow-x: auto; scrollbar-width: none; }
html[data-ui="new"] .dvn-tabs .btn { flex: none; min-height: 40px; padding: 0 14px; border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; color: var(--ss-ink-2) !important; font-size: var(--ss-fs-13); }
html[data-ui="new"] .dvn-tabs .btn:hover { color: var(--ss-ink) !important; }
html[data-ui="new"] .dvn-tabs .btn.btn-primary { border-bottom-color: var(--ss-ink) !important; color: var(--ss-ink) !important; font-weight: var(--ss-fw-semibold); }
html[data-ui="new"] .dvn-files .dvn-slot { padding-bottom: 8px; }
html[data-ui="new"] .dvn-files .dvn-slot > :not(.table-responsive) { margin-left: 16px !important; margin-right: 16px !important; }
html[data-ui="new"] .dvn-files .dvn-slot > .mgr-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; min-height: 40px; margin-top: 8px !important; margin-bottom: 4px !important; }
html[data-ui="new"] .dvn-files .dvn-slot > .text-uppercase { margin-top: 12px !important; font: var(--ss-fw-medium) var(--ss-fs-11)/1.2 var(--ss-font-mono); letter-spacing: var(--ss-track-caps); color: var(--ss-ink-3) !important; }
html[data-ui="new"] .dvn-files .dvn-slot > .row.g-2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; --bs-gutter-x: 0; --bs-gutter-y: 0; }
html[data-ui="new"] .dvn-files .dvn-slot > .row.g-2 > [class*="col-"] { width: auto; max-width: none; padding: 0; }
html[data-ui="new"] .dvn-files .dvn-slot > .table-responsive { border-top: var(--ss-bw) solid var(--ss-line); }
html[data-ui="new"] .dvn-files .dvn-slot > #bulkbar > .card-body { padding: 8px 12px; }
html[data-ui="new"] .dvn-files .dvn-slot > :is(.text-center.py-5) { padding: 32px 0 !important; }
html[data-ui="new"] .dvn[data-dvn-page="files"] .dvn-rail #mgr-visibility { max-width: 100%; }
html[data-ui="new"] .dvn[data-dvn-page="files"] .dvn-rail .card-body > .d-flex:first-child { flex-direction: column; align-items: flex-start !important; }

/* ---- B · Field Ops: heavy rules, KPI caps, mono caps heads, big controls ---- */
html[data-ui="new"][data-theme="field-ops"] .dvn-eyebrow { font: var(--ss-fw-medium) var(--ss-fs-11)/1.2 var(--ss-font-mono); text-transform: uppercase; letter-spacing: var(--ss-track-caps); color: var(--ss-ink-2); }
html[data-ui="new"][data-theme="field-ops"] .dvn-title { font-weight: 800; }
html[data-ui="new"][data-theme="field-ops"] :is(.dvn-sub, .dvn-meta) { font-size: var(--ss-fs-16); color: var(--ss-ink-2); }
html[data-ui="new"][data-theme="field-ops"] .dvn-actions .btn { min-height: var(--ss-tap); padding: 0 18px; font-size: var(--ss-fs-14); font-weight: var(--ss-fw-semibold); }
html[data-ui="new"][data-theme="field-ops"] .dvn-stats { border-width: var(--ss-bw-strong); }
html[data-ui="new"][data-theme="field-ops"] .dvn-stat { border-left-width: var(--ss-bw-strong); border-top: 4px solid var(--kpi-c, var(--ss-ink)); padding: 14px 16px 16px; gap: 8px; }
html[data-ui="new"][data-theme="field-ops"] .dvn-stat:is([data-k="active"], [data-k="processed"]) { --kpi-c: var(--ss-info-fill); }
html[data-ui="new"][data-theme="field-ops"] .dvn-stat:is([data-k="completed"], [data-k="links"]) { --kpi-c: var(--ss-success-fill); }
html[data-ui="new"][data-theme="field-ops"] .dvn-stat:is([data-k="stowed"], [data-k="media"]) { --kpi-c: var(--ss-line-2); }
html[data-ui="new"][data-theme="field-ops"] .dvn-stat[data-k="release"] { --kpi-c: var(--ss-warning-fill); }
html[data-ui="new"][data-theme="field-ops"] .dvn-stat-lab { font: var(--ss-fw-medium) var(--ss-fs-11)/1.2 var(--ss-font-mono); text-transform: uppercase; letter-spacing: var(--ss-track-caps); color: var(--ss-ink-2); }
html[data-ui="new"][data-theme="field-ops"] .dvn-stat-lab i { display: none; }
html[data-ui="new"][data-theme="field-ops"] .dvn-stat-val { font-size: var(--ss-fs-32); font-weight: 800; }
html[data-ui="new"][data-theme="field-ops"] .dvn-stat-sub { font-size: var(--ss-fs-14); color: var(--ss-ink-2); }
html[data-ui="new"][data-theme="field-ops"] .dvn .card { border-width: var(--ss-bw-strong); }
html[data-ui="new"][data-theme="field-ops"] .dvn-ch { min-height: 56px; border-bottom-width: var(--ss-bw-strong); }
html[data-ui="new"][data-theme="field-ops"] .dvn-ch h2,
html[data-ui="new"][data-theme="field-ops"] .dvn .card > .card-header :is(h5, h6),
html[data-ui="new"][data-theme="field-ops"] .dvn-steps-lab { font: 700 var(--ss-fs-13)/1.2 var(--ss-font-mono); text-transform: uppercase; letter-spacing: var(--ss-track-caps); color: var(--ss-ink); }
html[data-ui="new"][data-theme="field-ops"] .dvn-ch h2 > i { display: inline-block; color: var(--ss-ink); }
html[data-ui="new"][data-theme="field-ops"] .dvn-count { font: var(--ss-fw-semibold) var(--ss-fs-12)/1 var(--ss-font-mono); color: var(--ss-ink); border: var(--ss-bw-strong) solid currentColor; border-radius: var(--ss-r-sm); padding: 6px 8px; }
html[data-ui="new"][data-theme="field-ops"] .dvn-item { min-height: 72px; gap: 18px; border-top-width: var(--ss-bw-strong); border-left: 6px solid var(--st-c, var(--ss-line-2)); padding-left: 14px; }
html[data-ui="new"][data-theme="field-ops"] .dvn-item[data-status="active"] { --st-c: var(--ss-info-fill); }
html[data-ui="new"][data-theme="field-ops"] .dvn-item[data-status="completed"] { --st-c: var(--ss-success-fill); }
html[data-ui="new"][data-theme="field-ops"] .dvn-ico { display: none; }
html[data-ui="new"][data-theme="field-ops"] .dvn-txt .t { font-size: var(--ss-fs-16); font-weight: var(--ss-fw-semibold); }
html[data-ui="new"][data-theme="field-ops"] .dvn-txt .d { font-size: var(--ss-fs-14); color: var(--ss-ink-2); }
html[data-ui="new"][data-theme="field-ops"] .dvn-item-meta { font: var(--ss-fw-medium) var(--ss-fs-13)/1.3 var(--ss-font-mono); color: var(--ss-ink); }
html[data-ui="new"][data-theme="field-ops"] .dvn-item-acts .btn { min-width: var(--ss-tap); min-height: var(--ss-tap); justify-content: center; font-size: var(--ss-fs-16); }
html[data-ui="new"][data-theme="field-ops"] .dvn [data-dvn-card="steps"] { border: 0; background: none; box-shadow: none; overflow: visible; }
html[data-ui="new"][data-theme="field-ops"] .dvn [data-dvn-card="steps"] > .card-body > .row { gap: 12px; }
html[data-ui="new"][data-theme="field-ops"] .dvn [data-dvn-card="steps"] > .card-body > .row > [class*="col-"] { padding: 16px 18px 18px; border: var(--ss-bw-strong) solid var(--ss-line-2) !important; border-top: 4px solid var(--kpi-c, var(--ss-ink)) !important; border-radius: var(--ss-c-card-r); background: var(--ss-surface); }
html[data-ui="new"][data-theme="field-ops"] .dvn [data-dvn-card="steps"] > .card-body > .row > [class*="col-"]:nth-child(2) { --kpi-c: var(--ss-info-fill); }
html[data-ui="new"][data-theme="field-ops"] .dvn [data-dvn-card="steps"] > .card-body > .row > [class*="col-"]:nth-child(3) { --kpi-c: var(--ss-success-fill); }
html[data-ui="new"][data-theme="field-ops"] .dvn [data-dvn-card="steps"] .badge.rounded-pill { width: 36px; height: 36px; border-radius: var(--ss-r) !important; font-size: var(--ss-fs-18); font-weight: 800; }
html[data-ui="new"][data-theme="field-ops"] .dvn [data-dvn-card="steps"] h6 { margin-top: 6px; font-size: var(--ss-fs-18); font-weight: 800; }
html[data-ui="new"][data-theme="field-ops"] .dvn [data-dvn-card="steps"] p.small { font-size: var(--ss-fs-14) !important; color: var(--ss-ink-2) !important; }
html[data-ui="new"][data-theme="field-ops"] .dvn [data-dvn-card="steps"] .btn:not(.btn-link) { min-height: 52px; padding: 0 16px; font-size: var(--ss-fs-14); font-weight: var(--ss-fw-semibold); }
html[data-ui="new"][data-theme="field-ops"] .dvn [data-dvn-card="steps"] :is(.input-group .form-control, .input-group .btn) { min-height: 52px; }
html[data-ui="new"][data-theme="field-ops"] .dvn-tabs > .d-flex { gap: 0 !important; border: var(--ss-bw-strong) solid var(--ss-line-2); border-radius: var(--ss-r); overflow: hidden; display: inline-flex !important; max-width: 100%; }
html[data-ui="new"][data-theme="field-ops"] .dvn-tabs .btn { min-height: var(--ss-tap); padding: 0 20px; border-bottom: 0 !important; border-left: var(--ss-bw-strong) solid var(--ss-line-2) !important; font: var(--ss-fw-semibold) var(--ss-fs-13)/1 var(--ss-font-mono); text-transform: uppercase; letter-spacing: .04em; }
html[data-ui="new"][data-theme="field-ops"] .dvn-tabs .btn:first-child { border-left: 0 !important; }
html[data-ui="new"][data-theme="field-ops"] .dvn-tabs .btn.btn-primary { background: var(--ss-ink) !important; color: var(--ss-surface) !important; }

/* ---- C · Warm Modern: soft separate cards, icon tiles, deliveries as tiles ---- */
html[data-ui="new"][data-theme="warm-modern"] .dvn-eyebrow { display: none; }
html[data-ui="new"][data-theme="warm-modern"] .dvn-stats { gap: 14px; border: 0; background: none; box-shadow: none; overflow: visible; }
html[data-ui="new"][data-theme="warm-modern"] .dvn-stat { border: var(--ss-bw) solid var(--ss-c-card-line); border-radius: var(--ss-c-card-r); background: var(--ss-surface); box-shadow: var(--ss-c-card-shadow); padding: 14px 16px; gap: 8px; }
html[data-ui="new"][data-theme="warm-modern"] .dvn-stat-lab { gap: 10px; font-size: var(--ss-fs-13); color: var(--ss-ink); }
html[data-ui="new"][data-theme="warm-modern"] .dvn-stat-lab i,
html[data-ui="new"][data-theme="warm-modern"] .dvn-ico { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--ss-r); background: var(--ss-accent-soft); color: var(--ss-accent-text); font-size: 15px; }
html[data-ui="new"][data-theme="warm-modern"] .dvn-stat:is([data-k="active"], [data-k="processed"]) .dvn-stat-lab i { background: var(--ss-info-soft); color: var(--ss-info); }
html[data-ui="new"][data-theme="warm-modern"] .dvn-stat:is([data-k="completed"], [data-k="links"]) .dvn-stat-lab i { background: var(--ss-success-soft); color: var(--ss-success); }
html[data-ui="new"][data-theme="warm-modern"] .dvn-stat:is([data-k="stowed"], [data-k="media"]) .dvn-stat-lab i { background: var(--ss-bg-2); color: var(--ss-ink-2); }
html[data-ui="new"][data-theme="warm-modern"] .dvn-stat[data-k="release"] .dvn-stat-lab i { background: var(--ss-warning-soft); color: var(--ss-warning); }
html[data-ui="new"][data-theme="warm-modern"] .dvn-stat-val { font-size: var(--ss-fs-28); }
html[data-ui="new"][data-theme="warm-modern"] .dvn-ch { min-height: 52px; border-bottom: 0; }
html[data-ui="new"][data-theme="warm-modern"] .dvn-ch h2 { font-size: var(--ss-fs-14); }
html[data-ui="new"][data-theme="warm-modern"] .dvn-count { margin-left: 4px; margin-right: auto; min-width: 22px; height: 22px; padding: 0 7px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--ss-r-pill); background: var(--ss-accent-soft); color: var(--ss-accent-text); font-weight: var(--ss-fw-semibold); }
html[data-ui="new"][data-theme="warm-modern"] .dvn-list .dvn-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; padding: 0 16px 16px; }
html[data-ui="new"][data-theme="warm-modern"] .dvn-item { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main status" "meta meta" "acts acts"; align-items: start; gap: 12px; padding: 14px; border: var(--ss-bw) solid var(--ss-line); border-radius: var(--ss-r); }
html[data-ui="new"][data-theme="warm-modern"] .dvn-item:first-child { border-top: var(--ss-bw) solid var(--ss-line); }
html[data-ui="new"][data-theme="warm-modern"] .dvn-item-main { grid-area: main; }
html[data-ui="new"][data-theme="warm-modern"] .dvn-item-status { grid-area: status; }
html[data-ui="new"][data-theme="warm-modern"] .dvn-item-meta { grid-area: meta; padding-top: 10px; border-top: var(--ss-bw) dashed var(--ss-line); }
html[data-ui="new"][data-theme="warm-modern"] .dvn-item-acts { grid-area: acts; justify-content: flex-start; }
html[data-ui="new"][data-theme="warm-modern"] .dvn-item[data-status="active"] .dvn-ico { background: var(--ss-info-soft); color: var(--ss-info); }
html[data-ui="new"][data-theme="warm-modern"] .dvn-item[data-status="completed"] .dvn-ico { background: var(--ss-success-soft); color: var(--ss-success); }
html[data-ui="new"][data-theme="warm-modern"] .dvn-item:not([data-status="active"], [data-status="completed"]) .dvn-ico { background: var(--ss-bg-2); color: var(--ss-ink-2); }
html[data-ui="new"][data-theme="warm-modern"] .dvn [data-dvn-card="steps"] { border: 0; background: none; box-shadow: none; overflow: visible; }
html[data-ui="new"][data-theme="warm-modern"] .dvn [data-dvn-card="steps"] > .card-body > .row { gap: 14px; }
html[data-ui="new"][data-theme="warm-modern"] .dvn [data-dvn-card="steps"] > .card-body > .row > [class*="col-"] { border: var(--ss-bw) solid var(--ss-c-card-line) !important; border-radius: var(--ss-c-card-r); background: var(--ss-surface); box-shadow: var(--ss-c-card-shadow); }
html[data-ui="new"][data-theme="warm-modern"] .dvn [data-dvn-card="steps"] .badge.rounded-pill { width: 30px; height: 30px; border-radius: var(--ss-r) !important; }
html[data-ui="new"][data-theme="warm-modern"] .dvn-tabs > .d-flex { gap: 6px !important; border-bottom: 0; }
html[data-ui="new"][data-theme="warm-modern"] .dvn-tabs .btn { border: 0 !important; border-radius: var(--ss-r-pill) !important; }
html[data-ui="new"][data-theme="warm-modern"] .dvn-tabs .btn.btn-primary { background: var(--ss-accent-soft) !important; color: var(--ss-accent-text) !important; }

/* narrow windows: one column; phones: stats two-up, rows stack, 44px targets (56px in Field Ops) */
@media (max-width: 1100px) {
  html[data-ui="new"] .dvn-body { grid-template-columns: minmax(0, 1fr); }
  html[data-ui="new"] .dvn[data-dvn-page="files"] .dvn-rail { order: -1; }
  html[data-ui="new"] .dvn-item { grid-template-columns: minmax(0, 1fr) 104px auto; }
  html[data-ui="new"] .dvn-item-meta { grid-column: 1 / -1; grid-row: 2; padding-left: 44px; }
  html[data-ui="new"][data-theme="field-ops"] .dvn-item-meta { padding-left: 0; }
}
@media (max-width: 768px) {
  html[data-ui="new"] main > .dvn.is-ready { padding: 4px 0 48px; }
  html[data-ui="new"] .dvn-head { flex-direction: column; align-items: stretch; gap: 12px; }
  html[data-ui="new"] .dvn-titles { flex-basis: auto; }
  html[data-ui="new"] .dvn-actions, html[data-ui="new"] .dvn-actions > .d-flex { justify-content: flex-start; }
  html[data-ui="new"] .dvn-actions > .btn { flex: 1 1 auto; }
  html[data-ui="new"] .dvn-back { min-height: 44px; }
  html[data-ui="new"] .dvn-stats { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-ui="new"] .dvn-stat { border-left: 0; border-top: var(--ss-bw) solid var(--ss-c-card-line); }
  html[data-ui="new"] .dvn-stat:nth-child(even) { border-left: var(--ss-bw) solid var(--ss-c-card-line); }
  html[data-ui="new"] .dvn-stat:nth-child(-n+2) { border-top: 0; }
  html[data-ui="new"][data-theme="field-ops"] .dvn-stat { border-top: 4px solid var(--kpi-c, var(--ss-ink)); }
  html[data-ui="new"][data-theme="warm-modern"] .dvn-stats { gap: 10px; }
  html[data-ui="new"][data-theme="warm-modern"] .dvn-stat { border: var(--ss-bw) solid var(--ss-c-card-line); }
  html[data-ui="new"] .dvn-item,
  html[data-ui="new"][data-theme="warm-modern"] .dvn-item { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main main" "status acts" "meta meta"; gap: 8px 12px; padding: 12px 16px; }
  html[data-ui="new"] .dvn-item-main { grid-area: main; }
  html[data-ui="new"] .dvn-item-status { grid-area: status; }
  html[data-ui="new"] .dvn-item-acts { grid-area: acts; }
  html[data-ui="new"] .dvn-item-meta { grid-area: meta; grid-column: auto; grid-row: auto; padding-left: 0; }
  html[data-ui="new"][data-theme="warm-modern"] .dvn-list .dvn-rows { grid-template-columns: minmax(0, 1fr); }
  html[data-ui="new"][data-theme="warm-modern"] .dvn-item-meta { padding-top: 0; border-top: 0; }
  html[data-ui="new"] .dvn-howto { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-ui="new"] .dvn [data-dvn-card="steps"] > .card-body > .row { grid-template-columns: minmax(0, 1fr); }
  html[data-ui="new"] .dvn [data-dvn-card="steps"] > .card-body > .row > [class*="col-"] { border-left: 0 !important; border-top: var(--ss-bw) solid var(--ss-line) !important; }
  html[data-ui="new"] .dvn [data-dvn-card="steps"] > .card-body > .row > [class*="col-"]:first-child { border-top: 0 !important; }
  html[data-ui="new"][data-theme="field-ops"] .dvn [data-dvn-card="steps"] > .card-body > .row > [class*="col-"] { border: var(--ss-bw-strong) solid var(--ss-line-2) !important; border-top: 4px solid var(--kpi-c, var(--ss-ink)) !important; }
  html[data-ui="new"][data-theme="warm-modern"] .dvn [data-dvn-card="steps"] > .card-body > .row > [class*="col-"] { border: var(--ss-bw) solid var(--ss-c-card-line) !important; }
  /* every control in the frame is a 44px target (56px in Field Ops) */
  html[data-ui="new"] .dvn :is(.btn, .form-control, .form-select, .input-group-text) { min-height: 44px !important; }
  html[data-ui="new"] .dvn :is(.btn-link, .btn-group-sm > .btn, .dvn-item-acts .btn) { min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
  html[data-ui="new"] .dvn .form-check-label { display: inline-flex; align-items: center; min-height: 44px; }
  html[data-ui="new"] .dvn .form-check { display: inline-flex; align-items: center; gap: 8px; }
  html[data-ui="new"] .dvn :is(.mgr-crumbs a, .dvn-files .mgr-crumbs > a) { display: inline-flex; align-items: center; min-height: 44px; }
  html[data-ui="new"] .dvn-tabs > .d-flex,
  html[data-ui="new"][data-theme="field-ops"] .dvn-tabs > .d-flex { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; }
  html[data-ui="new"] .dvn-tabs .btn { min-height: 44px !important; padding: 4px 6px; white-space: normal; line-height: 1.2; justify-content: center; text-align: center; }
  html[data-ui="new"][data-theme="field-ops"] .dvn-tabs .btn { padding: 4px 6px; font-size: var(--ss-fs-12); }
  html[data-ui="new"][data-theme="field-ops"] .dvn :is(.btn, .form-control, .form-select, .input-group-text, .dvn-tabs .btn) { min-height: 56px !important; }
  html[data-ui="new"][data-theme="field-ops"] .dvn :is(.btn-link, .btn-group-sm > .btn, .dvn-item-acts .btn) { min-width: 56px; }
  html[data-ui="new"][data-theme="field-ops"] .dvn :is(.form-check-label, .mgr-crumbs a, .dvn-back, .dvn-item-main) { min-height: 56px; }
}
/* === end Themes fix #3 === */

/* === Themes fix #5: Settings Profile + Billing === */
/* Settings › Account › Profile (core settings/profile.html) and Settings › Account › Billing & Plan
   (accounts tier.html, and tier_unified.html when UNIFIED_TIER_VIEW is on). admin 2026-10-18:
   "Please get the themes completed" — both pages were Classic recoloured.
   Same data, same actions, same ids and scripts: the templates add only a hidden new-UI header
   (.pfn-head / .tbn-head) and a few class hooks; everything else here re-lays-out the markup the
   pages already render. Every rule is scoped by :has(> .pfn-head) / :has(> .tbn-head), so an older
   template keeps today's look and the shell and the apps can deploy in either order. Classic never
   loads this file. Layouts, as on Office › Home: A = Clean Pro / Clean Pro Field (section rail and
   hairline cards; Billing main | credits rail), B = Field Ops (big tab bar, heavy cards, mono caps
   heads, big header actions), C = Warm Modern (soft cards, icon tiles). */

/* ---- Profile · shared (layout A) ---- */
html[data-ui="new"] .sky-profile-page:has(> .pfn-head) { max-width: 1180px; padding: 8px 32px 64px; }
html[data-ui="new"] .sky-profile-page > .pfn-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-bottom: 16px; }
html[data-ui="new"] .sky-profile-page:has(> .pfn-head) > .pf-classic-head > :is(h2, p) { display: none; }
html[data-ui="new"] .sky-profile-page:has(> .pfn-head) > .pf-classic-head { margin: 0 0 16px !important; display: flex; flex-wrap: wrap; gap: 8px 16px; }
html[data-ui="new"] .sky-profile-page:has(> .pfn-head) > .pf-classic-head:not(:has(> div)) { display: none; }
html[data-ui="new"] .sky-profile-page:has(> .pfn-head) > .pf-classic-head > div { margin: 0 !important; }
html[data-ui="new"] .pfn-id { display: flex; align-items: center; gap: 16px; min-width: 0; }
html[data-ui="new"] .pfn-av { flex: none; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: var(--ss-bw) solid var(--ss-line); background: var(--ss-bg-2); }
html[data-ui="new"] .pfn-av--letter { display: inline-flex; align-items: center; justify-content: center; font-size: var(--ss-fs-20); font-weight: var(--ss-fw-semibold); color: var(--ss-ink-2); }
html[data-ui="new"] .pfn-titles { min-width: 0; }
html[data-ui="new"] .pfn-title { font-size: var(--ss-c-h1-fs); font-weight: var(--ss-fw-semibold); letter-spacing: var(--ss-track-heading, -.01em); line-height: 1.15; margin: 0; color: var(--ss-ink); }
html[data-ui="new"] .pfn-meta { display: flex; flex-wrap: wrap; margin-top: 4px; font-size: var(--ss-fs-13); color: var(--ss-ink-2); min-width: 0; }
html[data-ui="new"] .pfn-meta > span + span::before { content: "·"; margin: 0 6px; color: var(--ss-ink-3); }
html[data-ui="new"] .pfn-meta .pfn-name { color: var(--ss-ink); font-weight: var(--ss-fw-medium); }
html[data-ui="new"] .pfn-meta .pfn-email { overflow-wrap: anywhere; }
html[data-ui="new"] .pfn-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
html[data-ui="new"] .pfn-save { white-space: nowrap; }

/* rail | form */
html[data-ui="new"] .sky-profile-page:has(> .pfn-head) #profile-main:not(.d-none) { display: grid; grid-template-columns: 208px minmax(0, 1fr); gap: 24px; align-items: start; }
html[data-ui="new"] .sky-profile-page:has(> .pfn-head) #profileTabs {
  flex-direction: column; flex-wrap: nowrap; gap: 2px; overflow: visible; border: 0; margin: 0 !important; padding: 0;
  position: sticky; top: calc(var(--ss-topbar-h, 48px) + 16px);
}
html[data-ui="new"] .sky-profile-page:has(> .pfn-head) #profileTabs .nav-item { flex: none; }
html[data-ui="new"] .sky-profile-page:has(> .pfn-head) #profileTabs .nav-link {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 0 10px; margin: 0;
  border: 0; border-radius: var(--ss-r); background: transparent; color: var(--ss-ink-2);
  font-size: var(--ss-fs-13); font-weight: var(--ss-fw-medium); text-align: left;
}
html[data-ui="new"] .sky-profile-page:has(> .pfn-head) #profileTabs .nav-link > i { margin: 0 !important; width: 16px; color: var(--ss-ink-3); }
html[data-ui="new"] .sky-profile-page:has(> .pfn-head) #profileTabs .nav-link:hover { background: var(--ss-bg-1); color: var(--ss-ink); }
html[data-ui="new"] .sky-profile-page:has(> .pfn-head) #profileTabs .nav-link.active { background: var(--ss-c-nav-active-bg, var(--ss-bg-2)); color: var(--ss-ink); font-weight: var(--ss-fw-semibold); box-shadow: inset 0 0 0 var(--ss-bw) var(--ss-c-nav-active-ring, transparent); }
html[data-ui="new"] .sky-profile-page:has(> .pfn-head) #profileTabs .nav-link.active > i { color: var(--ss-ink); }

/* the panes: every column of a pane, and every sub-section, is its own card */
html[data-ui="new"] .sky-profile-page:has(> .pfn-head) #profileTabContent { border: 0 !important; padding: 0 !important; margin: 0 !important; background: none; }
html[data-ui="new"] .sky-profile-page:has(> .pfn-head) #profileTabContent > .tab-pane > .row { display: flex; flex-wrap: wrap; gap: 16px; margin: 0; }
html[data-ui="new"] .sky-profile-page:has(> .pfn-head) #profileTabContent > .tab-pane > .row > [class*="col-"],
html[data-ui="new"] .sky-profile-page:has(> .pfn-head) #profileTabContent > .tab-pane:not(:has(> .row)),
html[data-ui="new"] .sky-profile-page:has(> .pfn-head) #profileTabContent .sky-subsection {
  border: var(--ss-bw) solid var(--ss-c-card-line); border-radius: var(--ss-c-card-r); background: var(--ss-surface); box-shadow: var(--ss-c-card-shadow);
  padding: 20px;
}
html[data-ui="new"] .sky-profile-page:has(> .pfn-head) #profileTabContent > .tab-pane > .row > [class*="col-"] { flex: 1 1 340px; width: auto; max-width: 100%; margin: 0; }
html[data-ui="new"] .sky-profile-page:has(> .pfn-head) #profileTabContent > .tab-pane > .row > :is(.col-md-8, .col-lg-7, .col-lg-8) { flex-grow: 2; }
html[data-ui="new"] .sky-profile-page:has(> .pfn-head) #profileTabContent .sky-subsection,
html[data-ui="new"] .sky-profile-page:has(> .pfn-head) #profileTabContent .sky-subsection + .sky-subsection { margin-top: 16px; }
html[data-ui="new"] .sky-profile-page:has(> .pfn-head) #profileTabContent .card.border-secondary { border-color: var(--ss-line) !important; background: var(--ss-bg-1); box-shadow: none; }
html[data-ui="new"] .sky-profile-page:has(> .pfn-head) #profileTabContent h6.text-uppercase {
  text-transform: none !important; letter-spacing: 0; font-size: var(--ss-fs-14) !important; font-weight: var(--ss-fw-semibold) !important;
  color: var(--ss-ink) !important; padding-bottom: 12px; border-bottom: var(--ss-bw) solid var(--ss-line); margin-bottom: 16px !important;
}
html[data-ui="new"] .sky-profile-page:has(> .pfn-head) #profileTabContent h6.text-uppercase.mt-4 { margin-top: 28px !important; }
/* the page's own Save Changes floats at the bottom right while the form scrolls (the header has the other) */
html[data-ui="new"] .sky-profile-page:has(> .pfn-head) .pf-savebar { position: sticky; bottom: 16px; z-index: 5; margin-top: 16px; pointer-events: none; }
html[data-ui="new"] .sky-profile-page:has(> .pfn-head) .pf-savebar .btn { pointer-events: auto; box-shadow: var(--ss-shadow-md); }

/* ---- Profile · B · Field Ops: a big tab bar across the top, heavy cards, mono caps heads ---- */
html[data-ui="new"][data-theme="field-ops"] .sky-profile-page:has(> .pfn-head) { max-width: 1196px; padding: 4px 24px 64px; }
html[data-ui="new"][data-theme="field-ops"] .pfn-av { width: 64px; height: 64px; border-radius: var(--ss-r); border-width: var(--ss-bw-strong); }
html[data-ui="new"][data-theme="field-ops"] .pfn-title { font-weight: 800; }
html[data-ui="new"][data-theme="field-ops"] .pfn-meta { font-size: var(--ss-fs-16); }
/* control heights go through the pack's tokens: the shared .btn rule out-ranks a page class */
html[data-ui="new"][data-theme="field-ops"] .pfn-actions { --ss-c-btn-h: var(--ss-tap); --ss-ctl-h: var(--ss-tap); }
html[data-ui="new"][data-theme="field-ops"] .pfn-actions > .btn.pfn-save { padding: 0 24px; font-size: var(--ss-fs-16); font-weight: 700; }
html[data-ui="new"][data-theme="field-ops"] .sky-profile-page:has(> .pfn-head) #profile-main:not(.d-none) { grid-template-columns: minmax(0, 1fr); gap: 16px; }
html[data-ui="new"][data-theme="field-ops"] .sky-profile-page:has(> .pfn-head) #profileTabs {
  position: static; flex-direction: row; gap: 4px; padding: 4px; overflow-x: auto;
  border: var(--ss-bw-strong) solid var(--ss-line-2); border-radius: var(--ss-r); background: var(--ss-surface);
}
html[data-ui="new"][data-theme="field-ops"] .sky-profile-page:has(> .pfn-head) #profileTabs .nav-link { min-height: 48px; padding: 0 16px; font-size: var(--ss-fs-14); font-weight: 700; white-space: nowrap; color: var(--ss-ink); }
html[data-ui="new"][data-theme="field-ops"] .sky-profile-page:has(> .pfn-head) #profileTabs .nav-link > i { color: inherit; }
html[data-ui="new"][data-theme="field-ops"] .sky-profile-page:has(> .pfn-head) #profileTabs .nav-link.active { background: var(--ss-ink); color: var(--ss-surface); box-shadow: none; }
html[data-ui="new"][data-theme="field-ops"] .sky-profile-page:has(> .pfn-head) #profileTabs .nav-link.active > i { color: var(--ss-surface); }
html[data-ui="new"][data-theme="field-ops"] .sky-profile-page:has(> .pfn-head) #profileTabContent > .tab-pane > .row > [class*="col-"],
html[data-ui="new"][data-theme="field-ops"] .sky-profile-page:has(> .pfn-head) #profileTabContent > .tab-pane:not(:has(> .row)),
html[data-ui="new"][data-theme="field-ops"] .sky-profile-page:has(> .pfn-head) #profileTabContent .sky-subsection { border-width: var(--ss-bw-strong); box-shadow: none; }
html[data-ui="new"][data-theme="field-ops"] .sky-profile-page:has(> .pfn-head) #profileTabContent h6.text-uppercase {
  text-transform: uppercase !important; font: var(--ss-fw-semibold) var(--ss-fs-12)/1.3 var(--ss-font-mono) !important; letter-spacing: var(--ss-track-caps);
  border-bottom-width: var(--ss-bw-strong); border-bottom-color: var(--ss-ink);
}
html[data-ui="new"][data-theme="field-ops"] .sky-profile-page:has(> .pfn-head) .pf-savebar { --ss-c-btn-h: var(--ss-tap); --ss-ctl-h: var(--ss-tap); }
html[data-ui="new"][data-theme="field-ops"] .sky-profile-page:has(> .pfn-head) .pf-savebar > .btn.btn-primary { font-size: var(--ss-fs-16); font-weight: 700; }

/* ---- Profile · C · Warm Modern: soft cards, the sections as icon tiles ---- */
html[data-ui="new"][data-theme="warm-modern"] .sky-profile-page:has(> .pfn-head) { max-width: 1192px; padding: 8px 28px 64px; }
html[data-ui="new"][data-theme="warm-modern"] .pfn-av { width: 64px; height: 64px; border: 3px solid var(--ss-accent-soft); }
html[data-ui="new"][data-theme="warm-modern"] .pfn-av--letter { background: var(--ss-accent-soft); color: var(--ss-accent-text); }
html[data-ui="new"][data-theme="warm-modern"] .sky-profile-page:has(> .pfn-head) #profile-main:not(.d-none) { grid-template-columns: 232px minmax(0, 1fr); }
html[data-ui="new"][data-theme="warm-modern"] .sky-profile-page:has(> .pfn-head) #profileTabs {
  gap: 4px; padding: 8px; border: var(--ss-bw) solid var(--ss-c-card-line); border-radius: var(--ss-c-card-r); background: var(--ss-surface); box-shadow: var(--ss-c-card-shadow);
}
html[data-ui="new"][data-theme="warm-modern"] .sky-profile-page:has(> .pfn-head) #profileTabs .nav-link { min-height: 44px; padding: 0 8px; border-radius: var(--ss-r); color: var(--ss-ink); }
html[data-ui="new"][data-theme="warm-modern"] .sky-profile-page:has(> .pfn-head) #profileTabs .nav-link > i { width: 28px; height: 28px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--ss-r-sm); background: var(--ss-bg-2); color: var(--ss-ink-2); font-size: 14px; }
html[data-ui="new"][data-theme="warm-modern"] .sky-profile-page:has(> .pfn-head) #profileTabs .nav-link.active { background: var(--ss-accent-soft); color: var(--ss-accent-text); box-shadow: none; }
html[data-ui="new"][data-theme="warm-modern"] .sky-profile-page:has(> .pfn-head) #profileTabs .nav-link.active > i { background: var(--ss-surface); color: var(--ss-accent-text); }
html[data-ui="new"][data-theme="warm-modern"] .sky-profile-page:has(> .pfn-head) #profileTabContent > .tab-pane > .row > [class*="col-"],
html[data-ui="new"][data-theme="warm-modern"] .sky-profile-page:has(> .pfn-head) #profileTabContent > .tab-pane:not(:has(> .row)),
html[data-ui="new"][data-theme="warm-modern"] .sky-profile-page:has(> .pfn-head) #profileTabContent .sky-subsection { border-radius: var(--ss-r-lg); padding: 22px; }
html[data-ui="new"][data-theme="warm-modern"] .sky-profile-page:has(> .pfn-head) #profileTabContent h6.text-uppercase { border-bottom: 0; padding-bottom: 0; font-size: var(--ss-fs-16) !important; }
html[data-ui="new"][data-theme="warm-modern"] .sky-profile-page:has(> .pfn-head) .pf-savebar .btn { border-radius: var(--ss-r-pill); }

/* ---- Profile · phones and narrow windows: one column, the sections as a sideways chip row ---- */
@media (max-width: 991.98px) {
  html[data-ui="new"] .sky-profile-page:has(> .pfn-head) #profile-main:not(.d-none),
  html[data-ui="new"][data-theme] .sky-profile-page:has(> .pfn-head) #profile-main:not(.d-none) { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  html[data-ui="new"] .sky-profile-page:has(> .pfn-head) #profileTabs,
  html[data-ui="new"][data-theme] .sky-profile-page:has(> .pfn-head) #profileTabs { position: static; flex-direction: row; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  html[data-ui="new"] .sky-profile-page:has(> .pfn-head) #profileTabs .nav-link { min-height: 44px; white-space: nowrap; padding: 0 14px; }
  html[data-ui="new"][data-theme="field-ops"] .sky-profile-page:has(> .pfn-head) #profileTabs .nav-link { min-height: var(--ss-tap); }
}
@media (max-width: 768px) {
  html[data-ui="new"] .sky-profile-page:has(> .pfn-head),
  html[data-ui="new"][data-theme] .sky-profile-page:has(> .pfn-head) { padding: 12px 16px 48px; }
  html[data-ui="new"] .pfn-actions { width: 100%; margin-left: 0; }
  /* 44px controls on a phone (the Field Ops tap size in Field Ops), through the pack's tokens */
  html[data-ui="new"] .sky-profile-page:has(> .pfn-head) { --ss-c-btn-h: 44px; --ss-c-btn-h-sm: 44px; --ss-c-input-h: 44px; }
  html[data-ui="new"][data-theme="field-ops"] .sky-profile-page:has(> .pfn-head) { --ss-c-btn-h: var(--ss-tap); --ss-c-btn-h-sm: var(--ss-tap); --ss-c-input-h: var(--ss-tap); --ss-ctl-h: var(--ss-tap); --ss-ctl-h-sm: var(--ss-tap); }
  html[data-ui="new"] .pfn-save { flex: 1 1 auto; }
  html[data-ui="new"] .sky-profile-page:has(> .pfn-head) #profileTabContent > .tab-pane > .row > [class*="col-"],
  html[data-ui="new"] .sky-profile-page:has(> .pfn-head) #profileTabContent > .tab-pane:not(:has(> .row)),
  html[data-ui="new"] .sky-profile-page:has(> .pfn-head) #profileTabContent .sky-subsection,
  html[data-ui="new"][data-theme] .sky-profile-page:has(> .pfn-head) #profileTabContent > .tab-pane > .row > [class*="col-"],
  html[data-ui="new"][data-theme] .sky-profile-page:has(> .pfn-head) #profileTabContent > .tab-pane:not(:has(> .row)),
  html[data-ui="new"][data-theme] .sky-profile-page:has(> .pfn-head) #profileTabContent .sky-subsection { padding: 16px 14px; flex-basis: 100%; }
  /* the floating Save clears the shell's phone tab bar (Office / Field / Chat / Me, 56px) */
  html[data-ui="new"] .sky-profile-page:has(> .pfn-head) .pf-savebar { bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
  html[data-ui="new"] .sky-profile-page:has(> .pfn-head) .pf-savebar .btn { flex: 1 1 auto; }
}

/* ---- Billing & Plan · shared (layout A): the header, then plan | credits rail ---- */
html[data-ui="new"] .sky-content:has(> .tbn-head) { max-width: 1240px; margin: 0 auto; padding: 8px 32px 64px; }
html[data-ui="new"] .sky-content:has(> .tbn-head) > .tb-classic-head { display: none !important; }
html[data-ui="new"] .sky-content > .tbn-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin-bottom: 20px; }
html[data-ui="new"] .tbn-title { font-size: var(--ss-c-h1-fs); font-weight: var(--ss-fw-semibold); letter-spacing: var(--ss-track-heading, -.01em); line-height: 1.15; margin: 0; color: var(--ss-ink); }
html[data-ui="new"] .tbn-sub { margin: 4px 0 0; font-size: var(--ss-fs-13); color: var(--ss-ink-2); }
html[data-ui="new"] .tbn-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
html[data-ui="new"] .tbn-act { display: inline-flex; align-items: center; white-space: nowrap; }

/* the sections as cards: hairline border, the category colour as a top rule (colours are categories) */
html[data-ui="new"] .sky-content:has(> .tbn-head) :is(.buy-section, .w-card) {
  border: var(--ss-bw) solid var(--ss-c-card-line); border-top: 3px solid var(--buy-accent, var(--w-accent, var(--ss-line-2)));
  border-radius: var(--ss-c-card-r); background: var(--ss-surface); box-shadow: var(--ss-c-card-shadow); padding: 20px; margin: 0 0 16px;
}
html[data-ui="new"] .sky-content:has(> .tbn-head) :is(.w-plan) { border-top-color: var(--w-sub); }
html[data-ui="new"] .sky-content:has(> .tbn-head) :is(.w-store) { border-top-color: var(--w-store); }
html[data-ui="new"] .sky-content:has(> .tbn-head) #content > .w-card:not(.w-plan, .w-wallet, .w-store) { border-top: var(--ss-bw) solid var(--ss-c-card-line); }
html[data-ui="new"] .sky-content:has(> .tbn-head) .buy-panel { border: var(--ss-bw) solid var(--ss-c-card-line); border-radius: var(--ss-c-card-r); background: var(--ss-surface); box-shadow: var(--ss-c-card-shadow); padding: 20px; margin: 0 0 16px; }
html[data-ui="new"] .sky-content:has(> .tbn-head) > .buy-keyline { display: flex; flex-direction: column; gap: 4px; border: var(--ss-bw) solid var(--ss-line); border-radius: var(--ss-c-card-r); background: var(--ss-bg-1); padding: 12px 16px; margin: 0 0 16px; font-size: var(--ss-fs-13); }
html[data-ui="new"] .sky-content:has(> .tbn-head) > .buy-keyline > .mb-2 { margin: 0 !important; }
html[data-ui="new"] .sky-content:has(> .tbn-head) .buy-section .buy-title { font-size: var(--ss-fs-18); }
html[data-ui="new"] .sky-content:has(> .tbn-head) :is(.buy-eyebrow, .w-eyebrow) { font-size: var(--ss-fs-11); }
/* the plan: the current plan is the hero; Trial and Plan usage side by side; then the plans */
html[data-ui="new"] .sky-content:has(> .tbn-head) :is(#subscriptionSection, .w-plan) { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: 16px; }
html[data-ui="new"] .sky-content:has(> .tbn-head) :is(#subscriptionSection, .w-plan) > * { grid-column: 1 / -1; min-width: 0; }
html[data-ui="new"] .sky-content:has(> .tbn-head) :is(#subscriptionSection, .w-plan) > #trialCard { grid-column: 1; }
html[data-ui="new"] .sky-content:has(> .tbn-head) :is(#subscriptionSection, .w-plan) > #usageCard { grid-column: 2; }
html[data-ui="new"] .sky-content:has(> .tbn-head) :is(#subscriptionSection, .w-plan) > :is(#trialCard, #usageCard) { margin: 0 0 16px !important; }
html[data-ui="new"] .sky-content:has(> .tbn-head) #subscriptionSection > .sky-card:not([id]) { background: var(--buy-soft); border: var(--ss-bw) solid var(--buy-line); box-shadow: none; padding: 16px 20px !important; }
html[data-ui="new"] .sky-content:has(> .tbn-head) .w-plan > .d-flex:not([id]) { padding: 16px 20px; margin: 12px 0 16px; border: var(--ss-bw) solid var(--ss-line); border-radius: var(--ss-r); background: var(--ss-bg-1); }
html[data-ui="new"] .sky-content:has(> .tbn-head) #usageMeters > [class*="col-"] { width: 100%; }
html[data-ui="new"] .sky-content:has(> .tbn-head) #planCards .sky-card { border-radius: var(--ss-c-card-r); }
html[data-ui="new"] .sky-content:has(> .tbn-head) #planCards .display-5 { font-size: 2.25rem; }
/* the rail: balances read first, packs two-up */
html[data-ui="new"] .sky-content:has(> .tbn-head) :is(#aiPacks, #mapPacks, #topupPacks, #storeAddonPacks) > [class*="col-"] { flex: 0 0 auto; width: 50%; }
html[data-ui="new"] .sky-content:has(> .tbn-head) .buy-chip { font-size: var(--ss-fs-24, 24px); }

@media (min-width: 1100px) {
  html[data-ui="new"] .sky-content:has(> .tbn-head):has(> #tierContent),
  html[data-ui="new"] .sky-content:has(> .tbn-head) > #content:not(.d-none) {
    display: grid; grid-template-columns: minmax(0, 1fr) 380px; column-gap: 20px; row-gap: 0; align-items: start;
    grid-template-rows: repeat(5, auto) 1fr;
  }
  /* tier.html: header, trial panel, the "two kinds of credit" line across; the plan (rows 4-6) | AI, Map */
  html[data-ui="new"] .sky-content:has(> .tbn-head):has(> #tierContent) > * { grid-column: 1 / -1; min-width: 0; }
  html[data-ui="new"] .sky-content:has(> .tbn-head):has(> #tierContent) > .tbn-head { grid-row: 1; }
  html[data-ui="new"] .sky-content:has(> .tbn-head):has(> #tierContent) > #trial-card { grid-row: 2; }
  html[data-ui="new"] .sky-content:has(> .tbn-head):has(> #tierContent) > .buy-keyline { grid-row: 3; }
  html[data-ui="new"] .sky-content:has(> .tbn-head):has(> #tierContent) > :is(#loadingSpinner, #tierContent) { grid-column: 1; grid-row: 4 / 7; }
  html[data-ui="new"] .sky-content:has(> .tbn-head):has(> #tierContent) > :is(#buy-credits, #aiCreditsSection) { grid-column: 2; grid-row: 4; }
  html[data-ui="new"] .sky-content:has(> .tbn-head):has(> #tierContent) > #mapCreditsSection { grid-column: 2; grid-row: 5; }
  html[data-ui="new"] .sky-content:has(> .tbn-head):has(> #tierContent) > #creditBreakdownSection { grid-row: 7; }
  html[data-ui="new"] .sky-content:has(> .tbn-head):has(> #tierContent) > #creditHistorySection { grid-row: 8; }
  html[data-ui="new"] .sky-content:has(> .tbn-head):has(> #tierContent) > #purchasesSection { grid-row: 9; }
  html[data-ui="new"] .sky-content:has(> .tbn-head):has(> #tierContent) > .text-center:has(> [data-bs-target="#refundModal"]) { grid-row: 10; margin-top: 8px !important; }
  /* tier_unified.html (#content): the plan (rows 2-5) | wallet, storage, points; then the lists across */
  html[data-ui="new"] .sky-content:has(> .tbn-head) > #content > * { grid-column: 1 / -1; min-width: 0; }
  html[data-ui="new"] .sky-content:has(> .tbn-head) > #content > #sandboxBanner { grid-row: 1; }
  html[data-ui="new"] .sky-content:has(> .tbn-head) > #content > .w-plan { grid-column: 1; grid-row: 2 / 6; }
  html[data-ui="new"] .sky-content:has(> .tbn-head) > #content > .w-wallet { grid-column: 2; grid-row: 2; }
  html[data-ui="new"] .sky-content:has(> .tbn-head) > #content > .w-store { grid-column: 2; grid-row: 3; }
  html[data-ui="new"] .sky-content:has(> .tbn-head) > #content > .w-card:has(#pointsValue) { grid-column: 2; grid-row: 4; }
  html[data-ui="new"] .sky-content:has(> .tbn-head) > #content > #creditBreakdownSection { grid-row: 6; }
  html[data-ui="new"] .sky-content:has(> .tbn-head) > #content > #purchasesSection { grid-row: 7; }
  html[data-ui="new"] .sky-content:has(> .tbn-head) > #content > #creditHistorySection { grid-row: 8; }
  html[data-ui="new"] .sky-content:has(> .tbn-head) > #content > #refundHelp { grid-row: 9; }
}

/* ---- Billing · B · Field Ops: heavy cards, a thick category cap, mono caps eyebrows, big actions ---- */
html[data-ui="new"][data-theme="field-ops"] .sky-content:has(> .tbn-head) { max-width: 1256px; padding: 4px 24px 64px; }
html[data-ui="new"][data-theme="field-ops"] .tbn-title { font-weight: 800; }
html[data-ui="new"][data-theme="field-ops"] .tbn-sub { font-size: var(--ss-fs-16); }
html[data-ui="new"][data-theme="field-ops"] .tbn-actions { --ss-c-btn-h: var(--ss-tap); --ss-ctl-h: var(--ss-tap); }
html[data-ui="new"][data-theme="field-ops"] .tbn-actions > .btn.tbn-act { padding: 0 18px; font-size: var(--ss-fs-14); font-weight: 700; border-width: var(--ss-bw-strong); }
html[data-ui="new"][data-theme="field-ops"] .sky-content:has(> .tbn-head) :is(.buy-section, .w-card, .buy-panel) { border-width: var(--ss-bw-strong); border-top-width: 6px; box-shadow: none; }
html[data-ui="new"][data-theme="field-ops"] .sky-content:has(> .tbn-head) .buy-panel,
html[data-ui="new"][data-theme="field-ops"] .sky-content:has(> .tbn-head) #content > .w-card:not(.w-plan, .w-wallet, .w-store) { border-top-width: var(--ss-bw-strong); }
html[data-ui="new"][data-theme="field-ops"] .sky-content:has(> .tbn-head) > .buy-keyline { border-width: var(--ss-bw-strong); border-left: 6px solid var(--ss-ink); font-size: var(--ss-fs-14); }
html[data-ui="new"][data-theme="field-ops"] .sky-content:has(> .tbn-head) :is(.buy-eyebrow, .w-eyebrow) { font-family: var(--ss-font-mono); font-size: var(--ss-fs-12); }
html[data-ui="new"][data-theme="field-ops"] .sky-content:has(> .tbn-head) .buy-section .buy-title { font-size: var(--ss-fs-20); font-weight: 800; }
html[data-ui="new"][data-theme="field-ops"] .sky-content:has(> .tbn-head) .buy-chip { font-size: var(--ss-fs-32, 32px); font-weight: 800; border-width: var(--ss-bw-strong); }
html[data-ui="new"][data-theme="field-ops"] .sky-content:has(> .tbn-head) #subscriptionSection > .sky-card:not([id]) { border-width: var(--ss-bw-strong); }
html[data-ui="new"][data-theme="field-ops"] .sky-content:has(> .tbn-head) #currentTier { font-weight: 800; }
html[data-ui="new"][data-theme="field-ops"] .sky-content:has(> .tbn-head) :is(.buy-btn, .w-btn, #manageBtn, #intervalToggle .btn, #planIntervalToggle .btn) { min-height: 48px; font-weight: 700; }
html[data-ui="new"][data-theme="field-ops"] .sky-content:has(> .tbn-head) #planCards .sky-card { border-width: var(--ss-bw-strong); }

/* ---- Billing · C · Warm Modern: soft cards, the category as an icon tile, no hard rules ---- */
html[data-ui="new"][data-theme="warm-modern"] .sky-content:has(> .tbn-head) { max-width: 1232px; padding: 8px 28px 64px; }
html[data-ui="new"][data-theme="warm-modern"] .tbn-act { border-radius: var(--ss-r-pill); }
html[data-ui="new"][data-theme="warm-modern"] .sky-content:has(> .tbn-head) :is(.buy-section, .w-card, .buy-panel) { border: var(--ss-bw) solid var(--ss-c-card-line); border-radius: var(--ss-r-lg); padding: 22px; }
html[data-ui="new"][data-theme="warm-modern"] .sky-content:has(> .tbn-head) > .buy-keyline { border: 0; border-radius: var(--ss-r-lg); background: var(--ss-bg-2); }
html[data-ui="new"][data-theme="warm-modern"] .sky-content:has(> .tbn-head) .buy-icon { width: 2.5rem; height: 2.5rem; border-radius: var(--ss-r); }
html[data-ui="new"][data-theme="warm-modern"] .sky-content:has(> .tbn-head) .buy-eyebrow-num { width: 22px; height: 22px; }
html[data-ui="new"][data-theme="warm-modern"] .sky-content:has(> .tbn-head) :is(#subscriptionSection > .sky-card:not([id]), #trialCard, #usageCard, #planCards .sky-card, .buy-pack, .w-pack, .w-sub-card) { border-radius: var(--ss-r-lg) !important; }
html[data-ui="new"][data-theme="warm-modern"] .sky-content:has(> .tbn-head) :is(#trialCard, #usageCard) { background: var(--ss-bg-1); border-color: transparent; box-shadow: none; }
html[data-ui="new"][data-theme="warm-modern"] .sky-content:has(> .tbn-head) .buy-chip { border: 0; border-radius: var(--ss-r-lg); }

/* ---- Billing · phones and narrow windows: one column; 44px targets (56px in Field Ops) ---- */
@media (max-width: 1099.98px) {
  html[data-ui="new"] .sky-content:has(> .tbn-head) :is(#subscriptionSection, .w-plan) { grid-template-columns: minmax(0, 1fr); }
  html[data-ui="new"] .sky-content:has(> .tbn-head) :is(#subscriptionSection, .w-plan) > :is(#trialCard, #usageCard) { grid-column: 1; }
}
@media (max-width: 768px) {
  html[data-ui="new"] .sky-content:has(> .tbn-head),
  html[data-ui="new"][data-theme] .sky-content:has(> .tbn-head) { padding: 12px 16px 48px; }
  html[data-ui="new"] .sky-content > .tbn-head { align-items: flex-start; }
  html[data-ui="new"] .tbn-actions { width: 100%; margin-left: 0; }
  html[data-ui="new"] .tbn-act { flex: 1 1 auto; justify-content: center; }
  /* 44px controls on a phone (the Field Ops tap size in Field Ops), through the pack's tokens */
  html[data-ui="new"] .sky-content:has(> .tbn-head) { --ss-c-btn-h: 44px; --ss-c-btn-h-sm: 44px; --ss-c-input-h: 44px; }
  html[data-ui="new"][data-theme="field-ops"] .sky-content:has(> .tbn-head) { --ss-c-btn-h: var(--ss-tap); --ss-c-btn-h-sm: var(--ss-tap); --ss-c-input-h: var(--ss-tap); --ss-ctl-h: var(--ss-tap); --ss-ctl-h-sm: var(--ss-tap); }
  html[data-ui="new"] .sky-content:has(> .tbn-head) :is(.buy-section, .w-card, .buy-panel),
  html[data-ui="new"][data-theme] .sky-content:has(> .tbn-head) :is(.buy-section, .w-card, .buy-panel) { padding: 16px 14px; }
  html[data-ui="new"] .sky-content:has(> .tbn-head) :is(#intervalToggle, #planIntervalToggle) .btn { display: inline-flex; align-items: center; }
  html[data-ui="new"][data-theme="field-ops"] .sky-content:has(> .tbn-head) :is(.buy-btn, .w-btn, .w-jump, #manageBtn, #intervalToggle .btn, #planIntervalToggle .btn) { min-height: var(--ss-tap); }
  html[data-ui="new"][data-theme="field-ops"] .sky-content:has(> .tbn-head) .w-jump { display: inline-flex; align-items: center; }
}
/* === end Themes fix #5 === */
/* === Themes fix #6: Go Live body + Notifications === */
/* ==========================================================================
   Themes fix #6 (admin 2026-10-18, "Please get the themes completed").
   1. jobs · Go Live (/projects/{id}/live, live_video_pilot.html): the body (controller set-up,
      telemetry, quality, record, session cards) was Classic's 760px stack. CSS only, on the
      existing markup: no node moves, no id or handler touched. Scoped to the page that ships the
      new-UI header (:has(> #lvnHead)), so the shell and jobs deploy in either order.
      Wide screens: a main column (set-up or the live session) and a rail (controller set-up,
      telemetry). Cards get a header row with a new-UI-only icon (.lvn-ic, hidden in Classic).
      A Clean Pro / Clean Pro Field: hairline cards, segmented pickers, one stat strip.
      B Field Ops: telemetry first in the rail as high-contrast tiles, 56px controls, KPI caps,
        mono caps headings, header actions as big buttons.
      C Warm Modern: separate soft cards, icon tiles, soft quality tiles.
   2. notifications · Inbox (/notifications/inbox, inbox.html): the template ships a new-UI
      block (.nbn) after the Classic markup (.nb-old); this shows it and hides Classic.
      A: header actions, stat strip, Unread / Earlier cards with divided rows, a By-app rail.
      B: one wide column, coloured KPI caps, big rows and buttons. C: every notification its own
      soft card, icon tiles.
   Phones (<= 768px): one column, no sideways scroll, 44px targets (56px in Field Ops and in
   Clean Pro Field's field scope).
   ========================================================================== */

/* ---- 1. Go Live ------------------------------------------------------------------------- */
/* header: on wide screens a page header (eyebrow, title, actions) instead of the phone bar */
html[data-ui="new"] .lvn-head .lvn-acts { display: none; }
html[data-ui="new"] .lv-wrap:has(> #lvnHead) .lv-card h2 > .lvn-ic { display: inline-grid; place-items: center; flex: none; width: 18px; height: 18px; font-size: 16px; color: var(--ss-ink-3); }
html[data-ui="new"] .lv-wrap:has(> #lvnHead) .lv-card h2 {
  display: flex; align-items: center; gap: 10px;
  margin: -16px -16px 14px; padding: 12px 16px;
  border-bottom: var(--ss-bw) solid var(--ss-c-head-line, var(--ss-line));
  background: var(--ss-c-head-bg, transparent);
  border-radius: var(--ss-c-card-r) var(--ss-c-card-r) 0 0;
  font: var(--ss-fw-semibold) var(--ss-fs-14)/1.3 var(--ss-font-sans); color: var(--ss-ink);
}
html[data-ui="new"] .lv-wrap:has(> #lvnHead) .lv-card { padding: 16px; margin-bottom: 16px; }
html[data-ui="new"] .lv-wrap:has(> #lvnHead) .lv-help { color: var(--ss-ink-3); font-size: var(--ss-fs-13); line-height: 1.45; }
html[data-ui="new"] .lv-wrap:has(> #lvnHead) .lv-field { color: var(--ss-ink-2); font-size: var(--ss-fs-12); font-weight: var(--ss-fw-medium); }

/* quality: a segmented picker; the chosen option carries a filled radio dot */
html[data-ui="new"] .lv-wrap:has(> #lvnHead) .lv-q { gap: 10px; }
html[data-ui="new"] .lv-wrap:has(> #lvnHead) .lv-q label {
  position: relative; text-align: left; padding: 12px 36px 12px 14px; min-height: 64px;
  border: var(--ss-bw) solid var(--ss-line-2); border-radius: var(--ss-r); background: var(--ss-surface); color: var(--ss-ink);
  transition: border-color .12s, background-color .12s;
}
html[data-ui="new"] .lv-wrap:has(> #lvnHead) .lv-q label::after {
  content: ""; position: absolute; top: 14px; right: 12px; width: 16px; height: 16px; box-sizing: border-box;
  border-radius: 50%; border: 1.5px solid var(--ss-line-2); background: var(--ss-surface);
}
html[data-ui="new"] .lv-wrap:has(> #lvnHead) .lv-q label:hover { border-color: var(--ss-ink-3); }
html[data-ui="new"] .lv-wrap:has(> #lvnHead) .lv-q label.on { border-color: var(--ss-action); background: var(--ss-action-soft); color: var(--ss-ink); box-shadow: 0 0 0 1px var(--ss-action) inset; }
html[data-ui="new"] .lv-wrap:has(> #lvnHead) .lv-q label.on::after { border: 5px solid var(--ss-action); background: var(--ss-surface); }
html[data-ui="new"] .lv-wrap:has(> #lvnHead) .lv-q b { font-size: var(--ss-fs-14); font-weight: var(--ss-fw-semibold); }
html[data-ui="new"] .lv-wrap:has(> #lvnHead) .lv-q span { color: var(--ss-ink-3); font-size: var(--ss-fs-12); line-height: 1.35; }
html[data-ui="new"] .lv-wrap:has(> #lvnHead) .lv-row { gap: 12px; }
html[data-ui="new"] .lv-wrap:has(> #lvnHead) .lv-row > label.grow { color: var(--ss-ink-2); font-weight: var(--ss-fw-medium); }
html[data-ui="new"] .lv-wrap:has(> #lvnHead) :is(#lvViewers, #lvMaxViewers, #lvExpiry) { min-height: 40px; border-radius: var(--ss-r-sm); font-variant-numeric: tabular-nums; }
html[data-ui="new"] .lv-wrap:has(> #lvnHead) .lv-est { border-radius: var(--ss-r); background: var(--ss-bg-1); border: var(--ss-bw) solid var(--ss-line); border-left: 3px solid var(--ss-action); color: var(--ss-ink); font-size: var(--ss-fs-13); }
html[data-ui="new"] .lv-wrap:has(> #lvnHead) .lv-switch { min-height: 40px; display: flex; align-items: center; gap: 10px; }
html[data-ui="new"] .lv-wrap:has(> #lvnHead) .lv-switch .form-check-label { color: var(--ss-ink); font-weight: var(--ss-fw-medium); }
html[data-ui="new"] .lv-wrap:has(> #lvnHead) .lv-btn { border-radius: var(--ss-r); }
html[data-ui="new"] .lv-wrap:has(> #lvnHead) .lv-btn.full { min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 8px; }
html[data-ui="new"] .lv-wrap:has(> #lvnHead) #lvSetup > #lvGoLive { margin-top: 4px; }

/* controller set-up + stream keys: inputs as the pack's fields, QR as an inset tile */
html[data-ui="new"] .lv-wrap:has(> #lvnHead) .lv-copy { gap: 8px; }
html[data-ui="new"] .lv-wrap:has(> #lvnHead) .lv-copy input { min-height: 40px; border-radius: var(--ss-r-sm); background: var(--ss-bg-1); border-color: var(--ss-line-2); color: var(--ss-ink); }
html[data-ui="new"] .lv-wrap:has(> #lvnHead) .lv-copy .lv-btn { min-height: 40px; padding: 0 14px; display: inline-flex; align-items: center; }
html[data-ui="new"] .lv-wrap:has(> #lvnHead) .lv-qr { border: var(--ss-bw) solid var(--ss-line); border-radius: var(--ss-r); margin: 14px auto 0; max-width: 260px; }
html[data-ui="new"] .lv-wrap:has(> #lvnHead) .lv-qr svg { width: 200px; height: 200px; }

/* telemetry: the pack's card with a header row; tiles in a tidy grid, mono caps labels */
html[data-ui="new"] .lv-wrap:has(> #lvnHead) #lvTel { margin-bottom: 16px; }
html[data-ui="new"] .lv-wrap:has(> #lvnHead) .skytel { padding: 16px; color: var(--ss-ink); }
html[data-ui="new"] .lv-wrap:has(> #lvnHead) .skytel-head { margin: -16px -16px 12px; padding: 10px 16px; min-height: 48px; border-bottom: var(--ss-bw) solid var(--ss-c-head-line, var(--ss-line)); background: var(--ss-c-head-bg, transparent); border-radius: var(--ss-c-card-r) var(--ss-c-card-r) 0 0; }
html[data-ui="new"] .lv-wrap:has(> #lvnHead) .skytel-title { font: var(--ss-fw-semibold) var(--ss-fs-14)/1.3 var(--ss-font-sans); text-transform: none; letter-spacing: 0; color: var(--ss-ink); }
html[data-ui="new"] .lv-wrap:has(> #lvnHead) .skytel-units { min-height: 30px; border-radius: var(--ss-r-sm); border-color: var(--ss-line-2); }
html[data-ui="new"] .lv-wrap:has(> #lvnHead) .skytel-hint { color: var(--ss-ink-2); font-size: var(--ss-fs-13); line-height: 1.45; }
html[data-ui="new"] .lv-wrap:has(> #lvnHead) .skytel-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
html[data-ui="new"] .lv-wrap:has(> #lvnHead) .skytel-tile { padding: 8px 10px; }
html[data-ui="new"] .lv-wrap:has(> #lvnHead) .skytel-tile dt { font: var(--ss-fw-medium) 10px/1.2 var(--ss-font-mono); text-transform: uppercase; letter-spacing: var(--ss-track-caps, .06em); color: var(--ss-ink-3); }
html[data-ui="new"] .lv-wrap:has(> #lvnHead) .skytel-v { font-family: var(--ss-font-mono); font-weight: var(--ss-fw-semibold); }
html[data-ui="new"] .lv-wrap:has(> #lvnHead) .skytel-map { border-radius: var(--ss-r); border-color: var(--ss-line); }

/* the live card: stats as one strip with dividers */
html[data-ui="new"] .lv-wrap:has(> #lvnHead) .lv-stats { gap: 0; border: var(--ss-bw) solid var(--ss-line); border-radius: var(--ss-r); overflow: hidden; background: var(--ss-surface); }
html[data-ui="new"] .lv-wrap:has(> #lvnHead) .lv-stats > .lv-stat { border: 0; border-left: var(--ss-bw) solid var(--ss-line); border-radius: 0; background: transparent; padding: 12px 14px; text-align: left; display: flex; flex-direction: column-reverse; gap: 2px; }
html[data-ui="new"] .lv-wrap:has(> #lvnHead) .lv-stats > .lv-stat:first-child { border-left: 0; }
html[data-ui="new"] .lv-wrap:has(> #lvnHead) .lv-stat b { font-size: var(--ss-fs-24); font-weight: var(--ss-fw-semibold); letter-spacing: -.02em; color: var(--ss-ink); }
html[data-ui="new"] .lv-wrap:has(> #lvnHead) .lv-stat span { font-size: var(--ss-fs-12); color: var(--ss-ink-2); }
html[data-ui="new"] .lv-wrap:has(> #lvnHead) .lv-preview { border-radius: var(--ss-r); border-color: var(--ss-line); }
html[data-ui="new"] .lv-wrap:has(> #lvnHead) .lv-msg { border-radius: var(--ss-r); font-size: var(--ss-fs-13); }

/* connect your controller: tabs as a segmented control, steps as numbered rows */
html[data-ui="new"] .lv-wrap:has(> #lvnHead) .lv-tabs { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; margin-bottom: 14px; border-radius: var(--ss-r); background: var(--ss-bg-2); }
html[data-ui="new"] .lv-wrap:has(> #lvnHead) .lv-tab { min-height: 32px; padding: 0 14px; border: 0; border-radius: var(--ss-r-sm); background: transparent; color: var(--ss-ink-2); font-size: var(--ss-fs-13); font-weight: var(--ss-fw-medium); }
html[data-ui="new"] .lv-wrap:has(> #lvnHead) .lv-tab.on,
html[data-ui="new"] .lv-wrap:has(> #lvnHead) .lv-tab.on:hover { background: var(--ss-surface); color: var(--ss-ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); font-weight: var(--ss-fw-semibold); }
html[data-ui="new"] .lv-wrap:has(> #lvnHead) .lv-model { color: var(--ss-ink-3); font-size: var(--ss-fs-12); margin-bottom: 10px; }
html[data-ui="new"] .lv-wrap:has(> #lvnHead) .lv-steps { list-style: none; padding: 0; counter-reset: lvstep; font-size: var(--ss-fs-14); color: var(--ss-ink); }
html[data-ui="new"] .lv-wrap:has(> #lvnHead) .lv-steps > li { counter-increment: lvstep; position: relative; padding: 2px 0 0 34px; min-height: 26px; margin-bottom: 8px; }
html[data-ui="new"] .lv-wrap:has(> #lvnHead) .lv-steps > li::before {
  content: counter(lvstep); position: absolute; left: 0; top: 0; width: 22px; height: 22px; display: grid; place-items: center;
  border-radius: 50%; background: var(--ss-action-soft); color: var(--ss-action-text); font: var(--ss-fw-semibold) var(--ss-fs-12)/1 var(--ss-font-mono);
}
html[data-ui="new"] .lv-wrap:has(> #lvnHead) .lv-warn-box { border-radius: var(--ss-r); border: var(--ss-bw) solid currentColor; }
html[data-ui="new"] .lv-wrap:has(> #lvnHead) details.lv-more summary { color: var(--ss-action-text, var(--ss-accent-text)); font-weight: var(--ss-fw-medium); min-height: 32px; display: flex; align-items: center; }

/* feeds: rows with an icon tile; the three "add" buttons as dashed tiles */
html[data-ui="new"] .lv-wrap:has(> #lvnHead) .lv-feed { border-color: var(--ss-line); border-radius: var(--ss-r); background: var(--ss-surface); padding: 10px 12px; }
html[data-ui="new"] .lv-wrap:has(> #lvnHead) .lv-feed .ic { width: 34px; height: 34px; display: inline-grid; place-items: center; border-radius: var(--ss-r-sm); background: var(--ss-accent-soft); color: var(--ss-accent-text); font-size: 16px; }
html[data-ui="new"] .lv-wrap:has(> #lvnHead) .lv-feed .kd { color: var(--ss-ink-3); }
html[data-ui="new"] .lv-wrap:has(> #lvnHead) .lv-feed-add { gap: 10px; }
html[data-ui="new"] .lv-wrap:has(> #lvnHead) .lv-feed-add .lv-btn.ghost { border: 1.5px dashed var(--ss-line-2); background: transparent; color: var(--ss-ink); font-weight: var(--ss-fw-medium); min-height: 72px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
html[data-ui="new"] .lv-wrap:has(> #lvnHead) .lv-feed-add .lv-btn.ghost:hover { border-color: var(--ss-action); background: var(--ss-action-soft); }
html[data-ui="new"] .lv-wrap:has(> #lvnHead) .lv-feed-add .lv-btn i { color: var(--ss-accent-text); margin: 0; }
html[data-ui="new"] .lv-wrap:has(> #lvnHead) .lv-panel { border-color: var(--ss-line); border-radius: var(--ss-r); background: var(--ss-bg-1); }
html[data-ui="new"] .lv-wrap:has(> #lvnHead) .lv-link { border-color: var(--ss-line); border-radius: var(--ss-r); background: var(--ss-bg-1); }
html[data-ui="new"] .lv-wrap:has(> #lvnHead) .lv-pin { font-family: var(--ss-font-mono); border-radius: var(--ss-r); background: var(--ss-bg-1); border: var(--ss-bw) solid var(--ss-line); }

/* the ON AIR bar (fixed, shown while this page sends camera or mic) keeps its room above the page */
html[data-ui="new"] body.lv-onair-on .lv-wrap:has(> #lvnHead) { padding-top: 64px; }

/* wide screens: page header, main column + rail */
@media (min-width: 769px) {
  html[data-ui="new"] .lv-wrap:has(> #lvnHead) { max-width: 1180px; padding: 16px 32px 72px; }
  html[data-ui="new"] .lv-wrap:has(> #lvnHead) > .lvn-head { align-items: flex-end; gap: 12px; margin-bottom: 4px; }
  html[data-ui="new"] .lv-wrap:has(> #lvnHead) .lvn-head .lvn-title { text-align: left; }
  html[data-ui="new"] .lv-wrap:has(> #lvnHead) .lvn-head .lvn-crumb { font-size: var(--ss-fs-13); margin-bottom: 4px; }
  html[data-ui="new"] .lv-wrap:has(> #lvnHead) .lvn-head .lvn-name { font-size: var(--ss-c-h1-fs, 26px); line-height: 1.15; letter-spacing: var(--ss-track-heading, -.01em); white-space: normal; }
  html[data-ui="new"] .lv-wrap:has(> #lvnHead) .lvn-head .lvn-back { align-self: center; border: var(--ss-bw) solid var(--ss-line); }
  html[data-ui="new"] .lv-wrap:has(> #lvnHead) .lvn-head .dropdown { display: none; }
  html[data-ui="new"] .lv-wrap:has(> #lvnHead) .lvn-head .lvn-acts { display: flex; gap: 8px; flex: none; }
  html[data-ui="new"] .lvn-act { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border: var(--ss-bw) solid var(--ss-line-2); border-radius: var(--ss-r-sm); background: var(--ss-surface); color: var(--ss-ink); font-size: var(--ss-fs-13); font-weight: var(--ss-fw-medium); text-decoration: none; }
  html[data-ui="new"] .lvn-act:hover { background: var(--ss-bg-1); color: var(--ss-ink); }
  html[data-ui="new"] .lvn-act > i { color: var(--ss-ink-3); }
  /* the "what this page does" line, which the phone header drops */
  html[data-ui="new"] .lv-wrap:has(> #lvnHead) > .lv-sub { display: block; margin: 0 0 20px 48px; max-width: 72ch; color: var(--ss-ink-3); font-size: var(--ss-fs-13); }
}
@media (min-width: 1100px) {
  html[data-ui="new"] .lv-wrap:has(> #lvnHead) {
    display: grid; grid-template-columns: minmax(0, 1fr) 380px; grid-template-rows: auto auto auto auto auto 1fr;
    column-gap: 24px; align-items: start;
  }
  html[data-ui="new"] .lv-wrap:has(> #lvnHead) > * { grid-column: 1 / -1; min-width: 0; }
  html[data-ui="new"] .lv-wrap:has(> #lvnHead) > :is(#lvSetup, #lvSession, #lvEnded) { grid-column: 1; grid-row: 5 / span 2; }
  html[data-ui="new"] .lv-wrap:has(> #lvnHead) > #lvControllerSetup { grid-column: 2; grid-row: 5; }
  html[data-ui="new"] .lv-wrap:has(> #lvnHead) > #lvTel { grid-column: 2; grid-row: 6; }
  /* nothing in the rail (no set-up card, no telemetry panel): one column */
  html[data-ui="new"] .lv-wrap:has(> #lvnHead):not(:has(> #lvControllerSetup:not([hidden]))):not(:has(> #lvTel > *)) { grid-template-columns: minmax(0, 1fr); max-width: 860px; }
  html[data-ui="new"] .lv-wrap:has(> #lvnHead):not(:has(> #lvControllerSetup:not([hidden]))):not(:has(> #lvTel > *)) > * { grid-column: 1; }
  /* set-up: quality across, record beside the Go live action */
  html[data-ui="new"] .lv-wrap:has(> #lvnHead) #lvSetup:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr); }
}

/* phones: one column, 44px targets */
@media (max-width: 768px) {
  html[data-ui="new"] .lv-wrap:has(> #lvnHead) { padding: 4px 0 72px; display: flex; flex-direction: column; }
  html[data-ui="new"] .lv-wrap:has(> #lvnHead) > * { order: 1; }
  html[data-ui="new"] .lv-wrap:has(> #lvnHead) > :is(#lvSetup, #lvSession, #lvEnded) { order: 2; }
  html[data-ui="new"] .lv-wrap:has(> #lvnHead) > #lvTel { order: 3; }
  html[data-ui="new"] .lv-wrap:has(> #lvnHead) > #lvControllerSetup { order: 4; }
  html[data-ui="new"] .lv-wrap:has(> #lvnHead) .lv-row > label.grow { min-height: 44px; display: flex; align-items: center; }
  html[data-ui="new"] .lv-wrap:has(> #lvnHead) .lvn-check-mission a { display: inline-flex; align-items: center; min-height: 44px; }
  html[data-ui="new"] .lv-wrap:has(> #lvnHead) .lv-q { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  html[data-ui="new"] .lv-wrap:has(> #lvnHead) .lv-q label { min-height: 56px; padding: 10px 40px 10px 14px; }
  html[data-ui="new"] .lv-wrap:has(> #lvnHead) .lv-q span { display: inline; margin: 0 0 0 6px; }
  html[data-ui="new"] .lv-wrap:has(> #lvnHead) .lv-q b { display: inline; }
  html[data-ui="new"] .lv-wrap:has(> #lvnHead) :is(.lv-btn, .lv-tab, .lv-copy input, #lvViewers, #lvMaxViewers, #lvExpiry, .lvn-back, .lvn-more, .skytel-units, details.lv-more summary) { min-height: 44px; }
  html[data-ui="new"] .lv-wrap:has(> #lvnHead) .lv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
  html[data-ui="new"] .lv-wrap:has(> #lvnHead) :is(.lvn-back, .lvn-more) { width: 44px; }
  html[data-ui="new"] .lv-wrap:has(> #lvnHead) .lv-switch { min-height: 44px; }
  html[data-ui="new"] .lv-wrap:has(> #lvnHead) .lv-switch .form-check-label { min-height: 44px; display: inline-flex; align-items: center; }
  html[data-ui="new"] .lv-wrap:has(> #lvnHead) .lv-tabs { display: flex; }
  html[data-ui="new"] .lv-wrap:has(> #lvnHead) .lv-tab { flex: 1 1 auto; }
  html[data-ui="new"] .lv-wrap:has(> #lvnHead) .lv-feed-add .lv-btn.ghost { min-height: 56px; flex-direction: row; gap: 8px; }
  html[data-ui="new"] .lv-wrap:has(> #lvnHead) .lv-stats > .lv-stat { padding: 10px 12px; }
  html[data-ui="new"] .lv-wrap:has(> #lvnHead) .lv-stat b { font-size: var(--ss-fs-20); }
}

/* A · Clean Pro Field: the go-live page is field scope, so its targets follow the field tap size */
@media (max-width: 768px) {
  html[data-ui="new"][data-theme="clean-pro-field"] .lv-wrap:has(> #lvnHead) :is(.lv-btn, .lv-tab, .lv-copy input, #lvViewers, #lvMaxViewers, #lvExpiry, .lvn-back, .lvn-more, .skytel-units, details.lv-more summary, .lv-switch, .lv-switch .form-check-label) { min-height: var(--ss-tap, 56px); }
  html[data-ui="new"][data-theme="clean-pro-field"] .lv-wrap:has(> #lvnHead) :is(.lvn-back, .lvn-more) { width: var(--ss-tap, 56px); }
}

/* B · Field Ops: telemetry first and high-contrast, glove-sized controls, KPI caps, mono caps heads */
html[data-ui="new"][data-theme="field-ops"] .lv-wrap:has(> #lvnHead) :is(.lv-card, .skytel) { border-width: 2px; border-color: var(--ss-line-2); }
html[data-ui="new"][data-theme="field-ops"] .lv-wrap:has(> #lvnHead) :is(.lv-card h2, .skytel-head) { border-bottom-width: 2px; border-bottom-color: var(--ss-line-2); }
html[data-ui="new"][data-theme="field-ops"] .lv-wrap:has(> #lvnHead) :is(.lv-card h2, .skytel-title) { font: 700 var(--ss-fs-13)/1.2 var(--ss-font-mono); text-transform: uppercase; letter-spacing: var(--ss-track-caps, .06em); }
html[data-ui="new"][data-theme="field-ops"] .lv-wrap:has(> #lvnHead) .lv-card h2 > .lvn-ic { color: var(--ss-action-text, var(--ss-accent-text)); }
html[data-ui="new"][data-theme="field-ops"] .lv-wrap:has(> #lvnHead) .skytel-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; }
html[data-ui="new"][data-theme="field-ops"] .lv-wrap:has(> #lvnHead) .skytel-tile { background: #0b0d10; border: 2px solid #0b0d10; border-radius: var(--ss-r-sm); padding: 10px 12px; color: #fff; }
html[data-ui="new"][data-mode="dark"][data-theme="field-ops"] .lv-wrap:has(> #lvnHead) .skytel-tile { background: #000; border-color: var(--ss-line-2); }
html[data-ui="new"][data-theme="field-ops"] .lv-wrap:has(> #lvnHead) .skytel-tile dt { color: rgba(255, 255, 255, .78); font-size: 11px; font-weight: 700; }
html[data-ui="new"][data-theme="field-ops"] .lv-wrap:has(> #lvnHead) .skytel-v { font-size: 26px; font-weight: 800; color: #fff; }
html[data-ui="new"][data-theme="field-ops"] .lv-wrap:has(> #lvnHead) .skytel-u,
html[data-ui="new"][data-theme="field-ops"] .lv-wrap:has(> #lvnHead) .skytel-sub { color: rgba(255, 255, 255, .78); }
html[data-ui="new"][data-theme="field-ops"] .lv-wrap:has(> #lvnHead) .skytel-arrow { fill: #fff; }
html[data-ui="new"][data-theme="field-ops"] .lv-wrap:has(> #lvnHead) .skytel-units { min-height: 44px; padding: 0 14px; border-width: 2px; font-weight: 700; }
html[data-ui="new"][data-theme="field-ops"] .lv-wrap:has(> #lvnHead) .skytel-hint { font-size: var(--ss-fs-14); color: var(--ss-ink); }
html[data-ui="new"][data-theme="field-ops"] .lv-wrap:has(> #lvnHead) .lv-q label { min-height: 80px; border-width: 2px; padding: 14px 40px 14px 16px; }
html[data-ui="new"][data-theme="field-ops"] .lv-wrap:has(> #lvnHead) .lv-q label.on { box-shadow: none; border-color: var(--ss-action); }
html[data-ui="new"][data-theme="field-ops"] .lv-wrap:has(> #lvnHead) .lv-q label::after { width: 22px; height: 22px; top: 16px; border-width: 2px; }
html[data-ui="new"][data-theme="field-ops"] .lv-wrap:has(> #lvnHead) .lv-q label.on::after { border: 7px solid var(--ss-action); }
html[data-ui="new"][data-theme="field-ops"] .lv-wrap:has(> #lvnHead) .lv-q b { font-size: var(--ss-fs-18); font-weight: 800; }
html[data-ui="new"][data-theme="field-ops"] .lv-wrap:has(> #lvnHead) .lv-q span { font-size: var(--ss-fs-13); color: var(--ss-ink-2); }
html[data-ui="new"][data-theme="field-ops"] .lv-wrap:has(> #lvnHead) :is(#lvViewers, #lvMaxViewers, #lvExpiry, .lv-copy input) { min-height: var(--ss-ctl-h, 48px); border-width: 2px; font-size: var(--ss-fs-16); }
html[data-ui="new"][data-theme="field-ops"] .lv-wrap:has(> #lvnHead) .lv-switch { min-height: var(--ss-ctl-h, 48px); }
html[data-ui="new"][data-theme="field-ops"] .lv-wrap:has(> #lvnHead) .lv-switch.form-switch .form-check-input { width: 52px; height: 30px; min-height: 0; margin: 0; flex: none; }
html[data-ui="new"][data-theme="field-ops"] .lv-wrap:has(> #lvnHead) .lv-switch .form-check-label { font-size: var(--ss-fs-16); font-weight: var(--ss-fw-semibold); }
html[data-ui="new"][data-theme="field-ops"] .lv-wrap:has(> #lvnHead) .lv-tabs { padding: 4px; background: var(--ss-bg-2); border: 2px solid var(--ss-line-2); }
html[data-ui="new"][data-theme="field-ops"] .lv-wrap:has(> #lvnHead) .lv-tab { min-height: var(--ss-ctl-h, 48px); border: 0; font-size: var(--ss-fs-16); font-weight: 700; }
html[data-ui="new"][data-theme="field-ops"] .lv-wrap:has(> #lvnHead) .lv-tab.on,
html[data-ui="new"][data-theme="field-ops"] .lv-wrap:has(> #lvnHead) .lv-tab.on:hover { background: var(--ss-action); color: var(--ss-on-action); box-shadow: none; }
html[data-ui="new"][data-theme="field-ops"] .lv-wrap:has(> #lvnHead) .lv-steps { font-size: var(--ss-fs-16); }
html[data-ui="new"][data-theme="field-ops"] .lv-wrap:has(> #lvnHead) .lv-steps > li { padding: 3px 0 0 40px; min-height: 30px; margin-bottom: 10px; }
html[data-ui="new"][data-theme="field-ops"] .lv-wrap:has(> #lvnHead) .lv-steps > li::before { width: 28px; height: 28px; background: var(--ss-ink); color: var(--ss-bg); font-size: var(--ss-fs-14); font-weight: 800; }
html[data-ui="new"][data-theme="field-ops"] .lv-wrap:has(> #lvnHead) .lv-stats { border: 2px solid var(--ss-line-2); }
html[data-ui="new"][data-theme="field-ops"] .lv-wrap:has(> #lvnHead) .lv-stats > .lv-stat { border-left-width: 2px; border-left-color: var(--ss-line-2); border-top: 4px solid var(--ss-ink); }
html[data-ui="new"][data-theme="field-ops"] .lv-wrap:has(> #lvnHead) .lv-stats > .lv-stat:nth-child(3n+2) { border-top-color: var(--ss-action); }
html[data-ui="new"][data-theme="field-ops"] .lv-wrap:has(> #lvnHead) .lv-stats > .lv-stat:nth-child(3n) { border-top-color: var(--ss-success); }
html[data-ui="new"][data-theme="field-ops"] .lv-wrap:has(> #lvnHead) .lv-stat b { font: 800 36px/1.05 var(--ss-font-mono); }
html[data-ui="new"][data-theme="field-ops"] .lv-wrap:has(> #lvnHead) .lv-stat span { font: 700 var(--ss-fs-12)/1.2 var(--ss-font-mono); text-transform: uppercase; letter-spacing: var(--ss-track-caps, .06em); }
html[data-ui="new"][data-theme="field-ops"] .lv-wrap:has(> #lvnHead) .lv-feed { border-width: 2px; border-color: var(--ss-line-2); min-height: 64px; }
html[data-ui="new"][data-theme="field-ops"] .lv-wrap:has(> #lvnHead) .lv-feed-add .lv-btn.ghost { border: 2px dashed var(--ss-ink-3); min-height: 88px; font-weight: 700; }
html[data-ui="new"][data-theme="field-ops"] .lv-wrap:has(> #lvnHead) .lv-est { border-left-width: 4px; font-size: var(--ss-fs-14); }
html[data-ui="new"][data-theme="field-ops"] .lv-wrap:has(> #lvnHead) .lvn-row-v { align-self: stretch; min-height: var(--ss-tap, 56px); }
@media (min-width: 769px) {
  html[data-ui="new"][data-theme="field-ops"] .lvn-act { min-height: var(--ss-ctl-h, 48px); padding: 0 18px; border: 2px solid var(--ss-ink); border-radius: var(--ss-r); font-size: var(--ss-fs-16); font-weight: var(--ss-fw-semibold); }
  html[data-ui="new"][data-theme="field-ops"] .lvn-act > i { color: inherit; }
  html[data-ui="new"][data-theme="field-ops"] .lv-wrap:has(> #lvnHead) .lvn-head .lvn-back { width: var(--ss-ctl-h, 48px); height: var(--ss-ctl-h, 48px); border-width: 2px; border-color: var(--ss-ink); }
  html[data-ui="new"][data-theme="field-ops"] .lv-wrap:has(> #lvnHead) > .lv-sub { margin-left: calc(var(--ss-ctl-h, 48px) + 12px); }
}
@media (min-width: 1100px) {
  html[data-ui="new"][data-theme="field-ops"] .lv-wrap:has(> #lvnHead) { grid-template-columns: minmax(0, 1fr) 420px; }
  html[data-ui="new"][data-theme="field-ops"] .lv-wrap:has(> #lvnHead) > #lvTel { grid-row: 5; }
  html[data-ui="new"][data-theme="field-ops"] .lv-wrap:has(> #lvnHead) > #lvControllerSetup { grid-row: 6; }
}
@media (max-width: 768px) {
  html[data-ui="new"][data-theme="field-ops"] .lv-wrap:has(> #lvnHead) :is(.lv-btn, .lv-tab, .lv-copy input, #lvViewers, #lvMaxViewers, #lvExpiry, .lvn-back, .lvn-more, .skytel-units, details.lv-more summary, .lv-switch, .lv-switch .form-check-label) { min-height: var(--ss-tap, 56px); }
  html[data-ui="new"][data-theme="field-ops"] .lv-wrap:has(> #lvnHead) :is(.lvn-back, .lvn-more) { width: var(--ss-tap, 56px); }
  html[data-ui="new"][data-theme="field-ops"] .lv-wrap:has(> #lvnHead) .lv-q label { min-height: 64px; }
  html[data-ui="new"][data-theme="field-ops"] .lv-wrap:has(> #lvnHead) :is(.lvn-check-mission a, .lv-row > label.grow) { min-height: var(--ss-tap, 56px); }
  html[data-ui="new"][data-theme="field-ops"] .lv-wrap:has(> #lvnHead) .skytel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-ui="new"][data-theme="field-ops"] .lv-wrap:has(> #lvnHead) .lv-stat b { font-size: 28px; }
}

/* C · Warm Modern: separate soft cards, icon tiles in the headings, soft tiles */
html[data-ui="new"][data-theme="warm-modern"] .lv-wrap:has(> #lvnHead) .lv-card h2 { border-bottom: 0; margin-bottom: 8px; padding-top: 16px; background: transparent; font-size: var(--ss-fs-16); }
html[data-ui="new"][data-theme="warm-modern"] .lv-wrap:has(> #lvnHead) .lv-card h2 > .lvn-ic { width: 32px; height: 32px; border-radius: var(--ss-r-sm); background: var(--ss-accent-soft); color: var(--ss-accent-text); font-size: 15px; }
html[data-ui="new"][data-theme="warm-modern"] .lv-wrap:has(> #lvnHead) :is(#lvIngestCard, #lvFeedsCard) h2 > .lvn-ic { background: var(--ss-info-soft); color: var(--ss-info); }
html[data-ui="new"][data-theme="warm-modern"] .lv-wrap:has(> #lvnHead) .lv-card:has(#lvShare) h2 > .lvn-ic,
html[data-ui="new"][data-theme="warm-modern"] .lv-wrap:has(> #lvnHead) .lvn-check h2 > .lvn-ic { background: var(--ss-success-soft); color: var(--ss-success); }
html[data-ui="new"][data-theme="warm-modern"] .lv-wrap:has(> #lvnHead) :is(.lv-card, .skytel) { padding: 18px 20px; }
html[data-ui="new"][data-theme="warm-modern"] .lv-wrap:has(> #lvnHead) .lv-card h2 { margin: -18px -20px 10px; padding: 18px 20px 0; }
html[data-ui="new"][data-theme="warm-modern"] .lv-wrap:has(> #lvnHead) .skytel-head { margin: -18px -20px 10px; padding: 14px 20px 0; border-bottom: 0; background: transparent; }
html[data-ui="new"][data-theme="warm-modern"] .lv-wrap:has(> #lvnHead) .skytel-title { font-size: var(--ss-fs-16); }
html[data-ui="new"][data-theme="warm-modern"] .lv-wrap:has(> #lvnHead) .skytel-tile { border: 0; background: var(--ss-bg-1); border-radius: var(--ss-r); padding: 10px 12px; }
html[data-ui="new"][data-theme="warm-modern"] .lv-wrap:has(> #lvnHead) .lv-q label { border: 0; background: var(--ss-bg-1); border-radius: var(--ss-r); box-shadow: none; }
html[data-ui="new"][data-theme="warm-modern"] .lv-wrap:has(> #lvnHead) .lv-q label.on { background: var(--ss-action-soft); box-shadow: 0 0 0 2px var(--ss-action) inset; }
html[data-ui="new"][data-theme="warm-modern"] .lv-wrap:has(> #lvnHead) .lv-stats { gap: 10px; border: 0; background: none; overflow: visible; }
html[data-ui="new"][data-theme="warm-modern"] .lv-wrap:has(> #lvnHead) .lv-stats > .lv-stat,
html[data-ui="new"][data-theme="warm-modern"] .lv-wrap:has(> #lvnHead) .lv-stats > .lv-stat:first-child { border: 0; border-radius: var(--ss-r); background: var(--ss-bg-1); }
html[data-ui="new"][data-theme="warm-modern"] .lv-wrap:has(> #lvnHead) .lv-tabs { border-radius: var(--ss-r-pill); }
html[data-ui="new"][data-theme="warm-modern"] .lv-wrap:has(> #lvnHead) .lv-tab { border-radius: var(--ss-r-pill); }
html[data-ui="new"][data-theme="warm-modern"] .lv-wrap:has(> #lvnHead) .lv-feed { border: 0; background: var(--ss-bg-1); }
html[data-ui="new"][data-theme="warm-modern"] .lv-wrap:has(> #lvnHead) .lv-feed-add .lv-btn.ghost { border: 0; background: var(--ss-bg-1); }
html[data-ui="new"][data-theme="warm-modern"] .lv-wrap:has(> #lvnHead) .lv-feed-add .lv-btn.ghost:hover { background: var(--ss-accent-soft); }
html[data-ui="new"][data-theme="warm-modern"] .lv-wrap:has(> #lvnHead) .lv-feed-add .lv-btn i { width: 32px; height: 32px; display: inline-grid; place-items: center; border-radius: var(--ss-r-sm); background: var(--ss-accent-soft); }
html[data-ui="new"][data-theme="warm-modern"] .lv-wrap:has(> #lvnHead) .lv-est { border: 0; background: var(--ss-action-soft); }
html[data-ui="new"][data-theme="warm-modern"] .lv-wrap:has(> #lvnHead) .lv-qr { border: 0; box-shadow: var(--ss-c-card-shadow); }

/* ---- 2. Notifications inbox ------------------------------------------------------------- */
html[data-ui="new"] .nb-old:has(~ .nbn) { display: none !important; }
html[data-ui="new"] .nbn { display: block; max-width: 1180px; margin: 0 auto; padding: 8px 16px 64px; color: var(--ss-ink); }
html[data-ui="new"] .nbn a { text-decoration: none; }
html[data-ui="new"] .nbn-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin-bottom: 20px; }
html[data-ui="new"] .nbn-h { font-size: var(--ss-c-h1-fs, 26px); font-weight: var(--ss-fw-semibold); letter-spacing: var(--ss-track-heading, -.01em); line-height: 1.15; margin: 0; color: var(--ss-ink); }
html[data-ui="new"] .nbn-meta { margin-top: 4px; font-size: var(--ss-fs-13); color: var(--ss-ink-2); }
html[data-ui="new"] .nbn-meta b { color: var(--ss-ink); font-weight: var(--ss-fw-semibold); font-variant-numeric: tabular-nums; }
html[data-ui="new"] .nbn-acts { display: flex; flex-wrap: wrap; gap: 8px; }
html[data-ui="new"] .nbn-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 0 14px;
  border: var(--ss-bw) solid var(--ss-line-2); border-radius: var(--ss-r-sm); background: var(--ss-surface); color: var(--ss-ink);
  font: var(--ss-fw-medium) var(--ss-fs-13)/1.2 var(--ss-font-sans); cursor: pointer; white-space: nowrap;
}
html[data-ui="new"] .nbn-btn:hover { background: var(--ss-bg-1); color: var(--ss-ink); }
html[data-ui="new"] .nbn-btn > i { color: var(--ss-ink-3); }
html[data-ui="new"] .nbn-btn.pri { background: var(--ss-action); border-color: var(--ss-action); color: var(--ss-on-action); }
html[data-ui="new"] .nbn-btn.pri:hover { background: var(--ss-action-hover, var(--ss-action)); }
html[data-ui="new"] .nbn-btn.pri > i { color: inherit; }
html[data-ui="new"] :is(.nbn-btn, .nbn-a):focus-visible { outline: 2px solid var(--ss-focus); outline-offset: 2px; }

/* stat strip */
html[data-ui="new"] .nbn-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 16px; border: var(--ss-bw) solid var(--ss-c-card-line); border-radius: var(--ss-c-card-r); background: var(--ss-surface); box-shadow: var(--ss-c-card-shadow); overflow: hidden; }
html[data-ui="new"] .nbn-stat { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; padding: 14px 16px; min-width: 0; border-left: var(--ss-bw) solid var(--ss-c-card-line); }
html[data-ui="new"] .nbn-stat:first-child { border-left: 0; }
html[data-ui="new"] .nbn-stat-lab { flex-basis: 100%; display: flex; align-items: center; gap: 6px; font-size: var(--ss-fs-12); font-weight: var(--ss-fw-medium); color: var(--ss-ink-2); }
html[data-ui="new"] .nbn-stat-lab i { color: var(--ss-ink-3); font-size: 14px; }
html[data-ui="new"] .nbn-stat b { font-size: var(--ss-fs-24); font-weight: var(--ss-fw-semibold); letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
html[data-ui="new"] .nbn-stat small { font-size: var(--ss-fs-13); color: var(--ss-ink-2); }
html[data-ui="new"] .nbn-stat[data-k="unread"] b { color: var(--ss-action-text); }

/* main column + rail */
html[data-ui="new"] .nbn-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
html[data-ui="new"] .nbn-main, html[data-ui="new"] .nbn-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
html[data-ui="new"] .nbn-card { border: var(--ss-bw) solid var(--ss-c-card-line); border-radius: var(--ss-c-card-r); background: var(--ss-surface); box-shadow: var(--ss-c-card-shadow); overflow: hidden; }
html[data-ui="new"] .nbn-sec { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px; border-bottom: var(--ss-bw) solid var(--ss-c-head-line, var(--ss-line)); background: var(--ss-c-head-bg, transparent); font: var(--ss-fw-semibold) var(--ss-fs-14)/1.3 var(--ss-font-sans); color: var(--ss-ink); }
html[data-ui="new"] .nbn-count { min-width: 22px; height: 20px; padding: 0 7px; display: inline-grid; place-items: center; border-radius: var(--ss-r-pill); background: var(--ss-bg-2); color: var(--ss-ink-2); font: var(--ss-fw-medium) var(--ss-fs-12)/1 var(--ss-font-sans); font-variant-numeric: tabular-nums; }
html[data-ui="new"] .nbn-list { list-style: none; margin: 0; padding: 0; }

/* a notification: icon tile, title + time, text, app chip and actions */
html[data-ui="new"] .nbn-item { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; border-top: var(--ss-bw) solid var(--ss-line); }
html[data-ui="new"] .nbn-item:first-child { border-top: 0; }
html[data-ui="new"] .nbn-item:hover { background: var(--ss-bg-1); }
html[data-ui="new"] .nbn-item.notification-unread { border-left: 0; background: transparent; box-shadow: inset 3px 0 0 var(--ss-action); }
html[data-ui="new"] .nbn-item.notification-unread:hover { background: var(--ss-bg-1); }
html[data-ui="new"] .nbn-ic { flex: none; width: 32px; height: 32px; display: inline-grid; place-items: center; border-radius: var(--ss-r-sm); background: var(--ss-bg-2); color: var(--ss-ink-2); font-size: 15px; }
html[data-ui="new"] .nbn-item.notification-unread .nbn-ic { background: var(--ss-action-soft); color: var(--ss-action-text); }
html[data-ui="new"] .nbn-body { flex: 1; min-width: 0; }
html[data-ui="new"] .nbn-top { display: flex; align-items: baseline; gap: 12px; }
html[data-ui="new"] .nbn-t { flex: 1; min-width: 0; font-size: var(--ss-fs-14); font-weight: var(--ss-fw-medium); color: var(--ss-ink-2); overflow-wrap: anywhere; }
html[data-ui="new"] .nbn-item.notification-unread .nbn-t { font-weight: var(--ss-fw-semibold); color: var(--ss-ink); }
html[data-ui="new"] .nbn-when { flex: none; font-size: var(--ss-fs-12); color: var(--ss-ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
html[data-ui="new"] .nbn-text { margin: 2px 0 0; font-size: var(--ss-fs-13); line-height: 1.45; color: var(--ss-ink-2); overflow-wrap: anywhere; }
html[data-ui="new"] .nbn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
html[data-ui="new"] .nbn-src { display: inline-flex; align-items: center; gap: 6px; height: var(--ss-c-badge-h, 22px); padding: 0 8px; border: 1px solid var(--ss-line-2); border-radius: var(--ss-c-badge-r, var(--ss-r-pill)); font: var(--ss-c-badge-fw, 500) var(--ss-c-badge-fs, 12px)/1 var(--ss-c-badge-font, var(--ss-font-sans)); color: var(--ss-ink-2); text-transform: capitalize; }
html[data-ui="new"] .nbn-src::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ss-ink-3); }
html[data-ui="new"] .nbn-do { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
html[data-ui="new"] .nbn-a { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border: var(--ss-bw) solid var(--ss-line); border-radius: var(--ss-r-sm); background: var(--ss-surface); color: var(--ss-ink-2); font: var(--ss-fw-medium) var(--ss-fs-12)/1.2 var(--ss-font-sans); cursor: pointer; white-space: nowrap; }
html[data-ui="new"] .nbn-a:hover { background: var(--ss-bg-2); color: var(--ss-ink); }
html[data-ui="new"] .nbn-a.pri { border-color: var(--ss-action-line, var(--ss-action)); background: var(--ss-action-soft); color: var(--ss-action-text); }
html[data-ui="new"] .nbn-a.nbn-x:hover { border-color: var(--ss-danger); color: var(--ss-danger); background: var(--ss-danger-soft); }
/* once a row is read, its Mark read goes (the request is the same one Classic sends) */
html[data-ui="new"] .nbn-item:not(.notification-unread) .nbn-mark { display: none; }

/* the rail */
html[data-ui="new"] .nbn-apps { list-style: none; margin: 0; padding: 6px 0; }
html[data-ui="new"] .nbn-apps > li { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; padding: 0 16px; font-size: var(--ss-fs-13); color: var(--ss-ink); text-transform: capitalize; }
html[data-ui="new"] .nbn-apps > li b { font-weight: var(--ss-fw-semibold); font-variant-numeric: tabular-nums; color: var(--ss-ink-2); }
html[data-ui="new"] .nbn-apps > li.nbn-none { color: var(--ss-ink-3); text-transform: none; }
html[data-ui="new"] .nbn-help p { margin: 12px 16px; font-size: var(--ss-fs-13); line-height: 1.45; color: var(--ss-ink-2); }
html[data-ui="new"] .nbn-help .nbn-btn { margin: 0 16px 16px; }
html[data-ui="new"] .nbn-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 48px 24px; text-align: center; }
html[data-ui="new"] .nbn-empty .nbn-ic { width: 48px; height: 48px; font-size: 22px; margin-bottom: 4px; }
html[data-ui="new"] .nbn-empty b { font-size: var(--ss-fs-16); }
html[data-ui="new"] .nbn-empty p { margin: 0 0 8px; color: var(--ss-ink-2); font-size: var(--ss-fs-14); }

/* B · Field Ops: one wide column (the rail drops below), KPI caps, big rows and buttons */
html[data-ui="new"][data-theme="field-ops"] .nbn-h { font-weight: 800; }
html[data-ui="new"][data-theme="field-ops"] .nbn-btn { min-height: var(--ss-ctl-h, 48px); padding: 0 18px; border: 2px solid var(--ss-ink); border-radius: var(--ss-r); font-size: var(--ss-fs-16); font-weight: var(--ss-fw-semibold); }
html[data-ui="new"][data-theme="field-ops"] .nbn-btn > i { color: inherit; }
html[data-ui="new"][data-theme="field-ops"] .nbn-btn.pri { border-color: var(--ss-action); }
html[data-ui="new"][data-theme="field-ops"] :is(.nbn-stats, .nbn-card) { border-width: 2px; border-color: var(--ss-line-2); }
html[data-ui="new"][data-theme="field-ops"] .nbn-stat { border-left-width: 2px; border-left-color: var(--ss-line-2); border-top: 4px solid var(--ss-ink); }
html[data-ui="new"][data-theme="field-ops"] .nbn-stat[data-k="unread"] { border-top-color: var(--ss-action); }
html[data-ui="new"][data-theme="field-ops"] .nbn-stat[data-k="apps"] { border-top-color: var(--ss-success); }
html[data-ui="new"][data-theme="field-ops"] .nbn-stat b { font: 800 40px/1 var(--ss-font-mono); }
html[data-ui="new"][data-theme="field-ops"] .nbn-stat[data-k="unread"] b { color: var(--ss-ink); }
html[data-ui="new"][data-theme="field-ops"] :is(.nbn-stat-lab, .nbn-sec, .nbn-src) { font-family: var(--ss-font-mono); text-transform: uppercase; letter-spacing: var(--ss-track-caps, .06em); }
html[data-ui="new"][data-theme="field-ops"] .nbn-sec { font-size: var(--ss-fs-13); font-weight: 700; border-bottom-width: 2px; border-bottom-color: var(--ss-line-2); }
html[data-ui="new"][data-theme="field-ops"] .nbn-src { border-color: currentColor; }
html[data-ui="new"][data-theme="field-ops"] .nbn-grid { grid-template-columns: minmax(0, 1fr); }
html[data-ui="new"][data-theme="field-ops"] .nbn-side { flex-direction: row; flex-wrap: wrap; }
html[data-ui="new"][data-theme="field-ops"] .nbn-side > .nbn-card { flex: 1 1 320px; }
html[data-ui="new"][data-theme="field-ops"] .nbn-item { min-height: 72px; padding: 14px 16px; gap: 14px; border-top-width: 2px; }
html[data-ui="new"][data-theme="field-ops"] .nbn-item.notification-unread { box-shadow: inset 5px 0 0 var(--ss-action); }
html[data-ui="new"][data-theme="field-ops"] .nbn-ic { width: 44px; height: 44px; font-size: 20px; border-radius: var(--ss-r); }
html[data-ui="new"][data-theme="field-ops"] .nbn-item.notification-unread .nbn-ic { background: var(--ss-ink); color: var(--ss-bg); }
html[data-ui="new"][data-theme="field-ops"] .nbn-t { font-size: var(--ss-fs-16); }
html[data-ui="new"][data-theme="field-ops"] .nbn-text { font-size: var(--ss-fs-14); color: var(--ss-ink); }
html[data-ui="new"][data-theme="field-ops"] .nbn-when { font-family: var(--ss-font-mono); font-size: var(--ss-fs-13); color: var(--ss-ink-2); }
html[data-ui="new"][data-theme="field-ops"] .nbn-a { min-height: 40px; padding: 0 16px; border-width: 2px; border-color: var(--ss-line-2); font-size: var(--ss-fs-14); font-weight: var(--ss-fw-semibold); color: var(--ss-ink); }
html[data-ui="new"][data-theme="field-ops"] .nbn-a.pri { background: var(--ss-action); border-color: var(--ss-action); color: var(--ss-on-action); }

/* C · Warm Modern: every notification its own soft card, icon tiles, soft stat cards */
html[data-ui="new"][data-theme="warm-modern"] .nbn-stats { gap: 12px; border: 0; background: none; box-shadow: none; overflow: visible; }
html[data-ui="new"][data-theme="warm-modern"] .nbn-stat,
html[data-ui="new"][data-theme="warm-modern"] .nbn-stat:first-child { border: var(--ss-bw) solid var(--ss-c-card-line); border-radius: var(--ss-c-card-r); background: var(--ss-surface); box-shadow: var(--ss-c-card-shadow); }
html[data-ui="new"][data-theme="warm-modern"] .nbn-stat-lab i { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: var(--ss-r-sm); background: var(--ss-accent-soft); color: var(--ss-accent-text); }
html[data-ui="new"][data-theme="warm-modern"] .nbn-stat[data-k="total"] .nbn-stat-lab i { background: var(--ss-info-soft); color: var(--ss-info); }
html[data-ui="new"][data-theme="warm-modern"] .nbn-stat[data-k="apps"] .nbn-stat-lab i { background: var(--ss-success-soft); color: var(--ss-success); }
html[data-ui="new"][data-theme="warm-modern"] .nbn-main > .nbn-card { border: 0; background: none; box-shadow: none; overflow: visible; }
html[data-ui="new"][data-theme="warm-modern"] .nbn-main .nbn-sec { padding: 0 4px 10px; border: 0; background: none; font-size: var(--ss-fs-16); }
html[data-ui="new"][data-theme="warm-modern"] .nbn-main .nbn-list { display: flex; flex-direction: column; gap: 10px; }
html[data-ui="new"][data-theme="warm-modern"] .nbn-main .nbn-item,
html[data-ui="new"][data-theme="warm-modern"] .nbn-main .nbn-item:first-child { padding: 14px 16px; border: var(--ss-bw) solid var(--ss-c-card-line); border-radius: var(--ss-c-card-r); background: var(--ss-surface); box-shadow: var(--ss-c-card-shadow); }
html[data-ui="new"][data-theme="warm-modern"] .nbn-main .nbn-item:hover,
html[data-ui="new"][data-theme="warm-modern"] .nbn-main .nbn-item.notification-unread { background: var(--ss-surface); }
html[data-ui="new"][data-theme="warm-modern"] .nbn-main .nbn-item:hover { border-color: var(--ss-line-2); }
html[data-ui="new"][data-theme="warm-modern"] .nbn-main .nbn-item.notification-unread { border-left: var(--ss-bw) solid var(--ss-c-card-line); }
html[data-ui="new"][data-theme="warm-modern"] .nbn-item.notification-unread { box-shadow: var(--ss-c-card-shadow); }
html[data-ui="new"][data-theme="warm-modern"] .nbn-item.notification-unread .nbn-t::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 8px; border-radius: 50%; background: var(--ss-action); vertical-align: middle; }
html[data-ui="new"][data-theme="warm-modern"] .nbn-ic { width: 40px; height: 40px; border-radius: var(--ss-r); font-size: 17px; }
html[data-ui="new"][data-theme="warm-modern"] :is(.nbn-a, .nbn-btn) { border-radius: var(--ss-r-pill); }
html[data-ui="new"][data-theme="warm-modern"] .nbn-src { border: 0; background: var(--ss-bg-2); }

/* phones */
@media (max-width: 1099px) {
  html[data-ui="new"] .nbn-grid { grid-template-columns: minmax(0, 1fr); }
  html[data-ui="new"] .nbn-side { flex-direction: row; flex-wrap: wrap; }
  html[data-ui="new"] .nbn-side > .nbn-card { flex: 1 1 280px; }
}
@media (max-width: 768px) {
  html[data-ui="new"] .nbn { padding: 4px 0 48px; }
  html[data-ui="new"] .nbn-head { align-items: stretch; flex-direction: column; gap: 12px; }
  html[data-ui="new"] .nbn-acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-ui="new"] .nbn-btn { min-height: 44px; }
  html[data-ui="new"] .nbn-stat { padding: 10px 12px; }
  html[data-ui="new"] .nbn-stat b { font-size: var(--ss-fs-20); }
  html[data-ui="new"] .nbn-stat-lab { font-size: var(--ss-fs-11, 11px); }
  html[data-ui="new"] .nbn-item { padding: 12px; gap: 10px; }
  html[data-ui="new"] .nbn-top { flex-direction: column; gap: 2px; }
  html[data-ui="new"] .nbn-do { margin-left: 0; width: 100%; }
  html[data-ui="new"] .nbn-a { min-height: 44px; padding: 0 14px; font-size: var(--ss-fs-13); flex: 1 1 auto; justify-content: center; }
  html[data-ui="new"] .nbn-help .nbn-btn { display: flex; }
  html[data-ui="new"][data-theme="field-ops"] :is(.nbn-btn, .nbn-a) { min-height: var(--ss-tap, 56px); }
  html[data-ui="new"][data-theme="field-ops"] .nbn-stat b { font-size: 28px; }
  html[data-ui="new"][data-theme="field-ops"] .nbn-ic { width: 40px; height: 40px; }
  html[data-ui="new"][data-theme="warm-modern"] .nbn-stats { gap: 8px; }
}
/* === end Themes fix #6 === */

/* ===== _src/tokens-clean-pro-v2.css ===== */
/* ==========================================================================
   Clean Pro — the Cloudflare-style palette (2026-10-22). Clean Pro AND Clean Pro Field.
   History: built as the gated "Clean Pro Candidate" pack (admin approved the look 15:52–15:58Z,
   decision 19d58921; workers b31e010f / 4fb30277). Admin 17:26Z made it THE Clean Pro for
   everyone, with fixed colours (no picker): "the colors stay with the blue and orange that come
   up as the default". Today's Clean Pro before this change lives on as the allowlisted
   "Clean Pro Old" pack (clean-pro-old = tokens-clean-pro.css + the shared sources, without
   this file and clean-pro-v2.css; tools/build-themes.py).
   Clean Pro = every Clean Pro source + this token file + clean-pro-v2.css, built last with the
   same selector weight as tokens-clean-pro.css, so these values win.
   Study: docs/cleanpro-study-20261022/NOTES.md (candidate "cf").

     blue     the action: primary button, links in light, focus. #0082EA family;
              the FILL is #0074d4 because white on #0082ea is 3.90:1 (AA needs 4.5).
     orange   the brand / attention colour (--ss-brand, --ss-attention): rare, carries
              dark ink (white on #f6821f is 2.58:1). The logo mark; warnings are the orange family.
     ink      statuses are ink + an icon (no coloured pills); "ok" text is ink, the
              ok FILL (outlook bars) is a quiet tint of the blue ramp. Red = real errors.
     surface  flat #fafafa / #0a0a0a page, white / #111 cards on hairlines, no shadows.
   Every colour is a token here: this file and tokens-clean-pro.css are the only Clean Pro
   sources allowed to hold raw hex colours (tests/clean-pro-no-raw-hex.test.js).
   ========================================================================== */

html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) {
  /* type: Inter (a Cloudflare-like grotesk) instead of the shared Geist; base.html
     already loads Inter 400-700 from Google Fonts (the linear pack uses it) */
  --ss-font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ss-font-display: var(--ss-font-sans);
  --ss-track-display: -0.01em;
  /* radius: 8px cards, 6px controls */
  --ss-r-xs: 4px;
  --ss-r-sm: 6px;
  --ss-r: 8px;
  --ss-r-lg: 8px;
  --ss-r-pill: 999px;
  /* sizes: 32px controls, 26px small, 48px phone tap target (buttons/inputs: 36px, below) */
  --ss-ctl-h: 32px;
  --ss-ctl-h-sm: 26px;
  --ss-tap: 48px;
  --ss-tap-xl: 56px;
  --ss-row-h: 38px;
  --ss-topbar-h: 48px;
  /* strokes */
  --ss-bw: 1px;
  --ss-bw-strong: 1px;
  /* body text size of dense UI */
  --ss-fs-ui: var(--ss-fs-14);
  /* motion */
  --ss-ease: cubic-bezier(.2, .8, .2, 1);
  --ss-dur: 160ms;
}

/* ------------------------------------------------------------------ LIGHT */
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"])[data-mode="light"] {
  color-scheme: light;
  --ss-bg: #fafafa;          /* page / content: flat off-white */
  --ss-bg-1: #fafafa;        /* sidebar, panels             */
  --ss-bg-2: #f0f0f0;        /* hover, inset wells          */
  --ss-bg-3: #e8e8e8;        /* pressed, track              */
  --ss-surface: #ffffff;     /* cards                       */
  --ss-raised: #ffffff;      /* menus, popovers, modals     */
  --ss-line: #e5e5e5;        /* hairline (decorative)       */
  --ss-line-2: #d9d9d9;      /* stronger hairline           */
  --ss-line-strong: #84848d; /* tuned: control boundaries (inputs, outline buttons, checkboxes) need 3:1 —
                                the mockup's #dcdce0 input border is 1.36:1. 3.6:1 on #fafafa, 3.0:1 on #e8e8e8. */
  --ss-ink: #18181b;         /* 17.7:1 */
  --ss-ink-2: #52525b;       /* 7.7:1  */
  --ss-ink-3: #65656e;       /* tuned: #6b6b74 -> #65656e so muted text clears 4.5:1 on bg-3 too (4.7:1 there) */
  --ss-ink-4: #a1a1aa;       /* decorative only (icons in wells, placeholders are NOT this) */
  --ss-placeholder: #6a6a73; /* tuned: #6e6e77 is 4.43:1 on the #f0f0f0 disabled field */

  /* blue: the action. Fill #0074d4 (white 4.72:1; #0082ea would be 3.90:1) */
  --ss-accent: #0074d4;
  --ss-accent-rgb: 0, 116, 212;
  --ss-accent-text-rgb: 0, 92, 168;
  --ss-bg-rgb: 250, 250, 250;
  --ss-ink-rgb: 24, 24, 27;
  --ss-accent-hover: #0068c0; /* white 5.6:1 */
  --ss-accent-text: #005ca8; /* links, underlined: 6.9:1 on white, 5.5:1 on bg-3, 4.7:1 on the strongest generated accent wash (#006ac2 is 4.46 on bg-3) */
  --ss-accent-soft: #eef6fe;
  --ss-accent-line: #b0d6f8;
  --ss-on-accent: #ffffff;
  --ss-focus: #005ca8;
  --ss-focus-ring: 0 0 0 3px rgba(0, 130, 234, .22);
  /* the shaded primary button (ref-1546-dark: "the buttons have a small amount of shading"):
     a slight vertical gradient around the fill, a 1px darker border; white stays >= 4.5:1
     across the label's band (top stop 4.2:1, mid 4.72:1, bottom 5.2:1) */
  --ss-c-btn-primary-bg: linear-gradient(180deg, #0a7ddc 0%, #0074d4 50%, #006dc8 100%);
  --ss-c-btn-primary-bg-hover: linear-gradient(180deg, #0070cc 0%, #0068c0 55%, #0062b5 100%);
  --ss-c-btn-primary-line: #0062b5;
  /* action: folded into the accent (one blue). Read through --status-active* / --action-* (base.css 1b). */
  --ss-action: #0074d4;
  --ss-action-hover: #0068c0;
  --ss-on-action: #ffffff;
  --ss-action-text: #005ca8;
  --ss-action-soft: #eef6fe;
  --ss-action-line: #b0d6f8;

  /* orange: brand + attention (logo-adjacent promo, the attention icon, unread counts) — dark ink on fills */
  --ss-brand: #f6821f;
  --ss-on-brand: #0b0b0d;    /* 7.6:1 (white would be 2.58:1) */
  --ss-brand-text: #a14a06;  /* orange as text: 5.6:1 on white, 4.9:1 on bg-3 */
  --ss-brand-soft: #fff4ea;
  --ss-brand-line: #fbc898;
  --ss-attention: var(--ss-brand);
  --ss-on-attention: var(--ss-on-brand);
  --ss-attention-text: var(--ss-brand-text);
  --ss-attention-soft: var(--ss-brand-soft);
  --ss-attention-line: var(--ss-brand-line);

  /* statuses: "ok" text is ink (the icon says it), its fill is the blue ramp's quiet tint */
  --ss-success: #18181b; --ss-success-soft: #eef6fe; --ss-success-fill: #3b94e0; --ss-on-success: #0b0b0d; /* fill 3.2:1 on white (step dots need 3:1); the outlook bars mix it down to the study's #7dbcf3 tint (--ss-c-fly-mix) */
  --ss-warning: #a14a06; --ss-warning-soft: #fff4ea; --ss-warning-fill: #f6821f; --ss-on-warning: #0b0b0d; /* tuned: #b45309 is 4.10:1 on bg-3 */
  --ss-danger: #b91c1c;  --ss-danger-soft: #fef2f2;  --ss-danger-fill: #b91c1c;  --ss-on-danger: #ffffff;
  --ss-info: #52525b;    --ss-info-soft: #f4f4f5;    --ss-info-fill: #52525b;    --ss-on-info: #ffffff; /* info is neutral, not a colour */
  --ss-live: #dc2626;

  --ss-shadow-sm: none;      /* flat: hairlines, no shadows */
  --ss-shadow-md: none;
  --ss-shadow-overlay: 0 0 0 1px rgba(16, 16, 20, .06), 0 12px 32px -8px rgba(16, 16, 20, .18), 0 4px 10px -4px rgba(16, 16, 20, .08);
  --ss-scrim: rgba(16, 16, 20, .45);

  --ss-glass: rgba(255, 255, 255, .80);
  --ss-glass-strong: rgba(255, 255, 255, .92);
  --ss-glass-line: rgba(16, 16, 20, .09);
  --ss-map-ink: #18181b;
  --ss-c-nav-active-bg: #ececec;
  --ss-c-fly-mix: 33%;       /* outlook "flyable" bars: success-fill mixed into bg-2 (clean-pro-v2.css) */
}

/* ------------------------------------------------------------------- DARK */
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"])[data-mode="dark"] {
  color-scheme: dark;
  --ss-bg: #0a0a0a;          /* page — near-black, not #000 */
  --ss-bg-1: #0a0a0a;        /* sidebar, panels             */
  --ss-bg-2: #171717;        /* hover, wells                */
  --ss-bg-3: #1f1f1f;        /* pressed, track              */
  --ss-surface: #111111;     /* cards                       */
  --ss-raised: #161616;      /* menus, popovers             */
  --ss-line: #262626;
  --ss-line-2: #303030;
  --ss-line-strong: #6b6b74; /* tuned: control boundaries, 3.75:1 on #0a0a0a, 3.1:1 on #1f1f1f (mockup: #2f2f34, 1.5:1) */
  --ss-ink: #ededef;         /* 16.9:1 */
  --ss-ink-2: #a8a8b0;       /* 8.3:1  */
  --ss-ink-3: #8f8f98;       /* tuned: #8b8b94 -> #8f8f98, keeps 5.1:1 on bg-3 */
  --ss-ink-4: #5d5d66;       /* decorative only */
  --ss-placeholder: #85858e;

  /* the same blue as light (ref-1546-dark: "their dark isn't over-bright for the blue");
     links in dark are ink + underline, no blue text */
  --ss-accent: #0074d4;      /* white 4.72:1 */
  --ss-accent-rgb: 0, 116, 212;
  --ss-accent-text-rgb: 237, 237, 239;
  --ss-bg-rgb: 10, 10, 10;
  --ss-ink-rgb: 237, 237, 239;
  --ss-accent-hover: #0068c0;
  --ss-accent-text: #ededef; /* links / active labels: ink (underlined by the components) */
  --ss-accent-soft: #0a1b2d;
  --ss-accent-line: #1a4470;
  --ss-on-accent: #ffffff;
  --ss-focus: #4aa6f4;
  --ss-focus-ring: 0 0 0 3px rgba(0, 130, 234, .40);
  --ss-c-btn-primary-bg: linear-gradient(180deg, #0a7ddc 0%, #0074d4 50%, #006dc8 100%);
  --ss-c-btn-primary-bg-hover: linear-gradient(180deg, #0070cc 0%, #0068c0 55%, #0062b5 100%);
  --ss-c-btn-primary-line: #0062b5;
  --ss-action: #0074d4;      /* fill / dot: 4.2:1 on the page, 3.5:1 on bg-3 */
  --ss-action-hover: #0068c0;
  --ss-on-action: #ffffff;
  --ss-action-text: #ededef;
  --ss-action-soft: #0a1b2d;
  --ss-action-line: #1a4470;

  --ss-brand: #f6821f;
  --ss-on-brand: #0b0b0d;
  --ss-brand-text: #f6821f;  /* 6.4:1 on bg-3 */
  --ss-brand-soft: #2a1a0c;
  --ss-brand-line: #6b3a12;
  --ss-attention: var(--ss-brand);
  --ss-on-attention: var(--ss-on-brand);
  --ss-attention-text: var(--ss-brand-text);
  --ss-attention-soft: var(--ss-brand-soft);
  --ss-attention-line: var(--ss-brand-line);

  /* muted, no neon; "ok" text is ink, its fill the blue ramp; info neutral */
  --ss-success: #ededef; --ss-success-soft: #0d2136; --ss-success-fill: #2f6fae; --ss-on-success: #ffffff;
  --ss-warning: #f6821f; --ss-warning-soft: #2a1a0c; --ss-warning-fill: #f6821f; --ss-on-warning: #0b0b0d;
  --ss-danger: #e57a7a;  --ss-danger-soft: #261315;  --ss-danger-fill: #d36464;  --ss-on-danger: #0b0b0d;
  --ss-info: #a8a8b0;    --ss-info-soft: #18181b;    --ss-info-fill: #8f8f98;    --ss-on-info: #0b0b0d;
  --ss-live: #dc2626;

  --ss-shadow-sm: none;
  --ss-shadow-md: none;
  --ss-shadow-overlay: 0 0 0 1px rgba(255, 255, 255, .07), 0 16px 40px -8px rgba(0, 0, 0, .65), 0 4px 12px -4px rgba(0, 0, 0, .5);
  --ss-scrim: rgba(0, 0, 0, .6);

  --ss-glass: rgba(17, 17, 17, .74);
  --ss-glass-strong: rgba(17, 17, 17, .88);
  --ss-glass-line: rgba(255, 255, 255, .09);
  --ss-map-ink: #ededef;
}

/* ---------------------------------------------------------- CHARACTER (components.css)
   Direction A's component shapes, moved toward Cloudflare's dashboard (2026-10-22): hairline
   cards with no shadow, 36px / 6px-radius controls at 14px, 13px grey table heads on a clear
   row, statuses as ink + icon, a grey pill for the active sidebar row, an ink tab underline. */
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) {
  --ss-c-btn-h: 36px; --ss-c-btn-h-sm: var(--ss-ctl-h-sm); --ss-c-btn-h-lg: 40px;
  --ss-c-btn-px: 14px; --ss-c-btn-fs: var(--ss-fs-14); --ss-c-btn-fw: var(--ss-fw-medium);
  --ss-c-btn-shadow: none;
  --ss-c-btn-primary-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 1px 2px rgba(0, 0, 0, .18);
  --ss-c-input-h: 36px; --ss-c-input-fs: var(--ss-fs-14);
  --ss-c-card-r: var(--ss-r); --ss-c-card-line: var(--ss-line); --ss-c-card-shadow: none;
  --ss-c-head-bg: transparent; --ss-c-head-py: 10px; --ss-c-head-fs: 15px; --ss-c-head-line: var(--ss-line);
  --ss-c-th-font: var(--ss-font-sans); --ss-c-th-fs: var(--ss-fs-13); --ss-c-th-fw: var(--ss-fw-medium);
  --ss-c-th-case: none; --ss-c-th-track: 0; --ss-c-th-ink: var(--ss-ink-3); --ss-c-th-bg: transparent; --ss-c-th-h: 40px;
  --ss-c-td-h: 44px; --ss-c-td-fs: var(--ss-fs-14);
  --ss-c-badge-font: var(--ss-font-sans); --ss-c-badge-fs: var(--ss-fs-12); --ss-c-badge-fw: var(--ss-fw-medium);
  --ss-c-badge-case: none; --ss-c-badge-track: 0; --ss-c-badge-r: var(--ss-r-pill); --ss-c-badge-h: 22px;
  --ss-c-badge-dot: 6px;
  --ss-c-h1-fs: var(--ss-fs-28);
  --ss-c-label-font: var(--ss-font-sans); --ss-c-label-fs: var(--ss-fs-14); --ss-c-label-case: none; --ss-c-label-track: 0; --ss-c-label-ink: var(--ss-ink);
  --ss-c-tab-h: 38px; --ss-c-tab-bar: 2px; --ss-c-tab-mark: var(--ss-ink);
  --ss-c-group-font: var(--ss-font-sans); --ss-c-group-fs: var(--ss-fs-12); --ss-c-group-case: none; --ss-c-group-track: 0;
  --ss-c-nav-h: 34px; --ss-c-nav-active-ring: none;
  /* "in progress" statuses (Accepted, Scheduled...) are a quiet grey, not the action blue */
  --status-active: var(--ss-ink-3);
  --status-active-fg: var(--ss-ink-2);
  --status-active-bg: var(--ss-bg-2);
  --status-active-line: var(--ss-line-2);
}
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"])[data-mode="dark"] {
  --ss-c-nav-active-bg: var(--ss-bg-3);
  --ss-c-fly-mix: 55%;
}

/* ===== _src/clean-pro-v2.css ===== */
/* ==========================================================================
   Clean Pro — rules (2026-10-22; tokens: tokens-clean-pro-v2.css). Clean Pro AND Clean Pro Field.
   The Cloudflare-style layer the admin approved as a study override (docs/cleanpro-study-20261022/,
   candidate "cf", layers 1-5), first shipped as the gated "Clean Pro Candidate" pack and made THE
   Clean Pro for everyone at 17:26Z (Clean Pro Old keeps the previous look for the allowlist).
   Built LAST, after every Clean Pro rule, so it restyles them at equal specificity. Colours are
   tokens only. Not taken from the study: hiding the Flight Path level chip (it is a link: restyled
   grey instead). The logo is the "speed lines" mark (the end of this file).
   ========================================================================== */

/* ---- shell chrome: a near-monochrome shell. Blue only on the main action, orange (--ss-brand) only on unread marks;
        chips, avatar, banners, "+ New" and the active rows are ink / grey (the logo: the end of this file). ---- */
/* top bar: plain, one hairline */
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) #sbn { box-shadow: none !important; border-bottom: var(--ss-bw) solid var(--ss-line) !important; background: var(--ss-bg) !important; }
/* credits pill: a neutral chip */
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) #skyCreditsPill, html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) #skyCreditsPill * { color: var(--ss-ink-2) !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) #skyCreditsPill { background: transparent !important; border-color: var(--ss-line-2) !important; }
/* Flight Path level ("Recruit") chip: still there and still a link to the pilot directory, drawn as a
   grey outline chip (sky-sidebar.js paints it in the rank colour with inline styles, hence !important) */
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) #skyFlightLevelBadge { background: transparent !important; border-color: var(--ss-line-2) !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) #skyFlightLevelBadge:hover { background: var(--ss-bg-2) !important; border-color: var(--ss-line-strong) !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) #skyFlightLevelBadge .sky-fp-name { color: var(--ss-ink-2) !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) #skyFlightLevelBadge .sky-fp-badges { border-left-color: var(--ss-line-2) !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) #skyFlightLevelBadge img { filter: grayscale(1) !important; opacity: .85; }
/* avatar: solid neutral, no gradient */
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .ss-avatar { background: var(--ss-bg-3); color: var(--ss-ink); box-shadow: inset 0 0 0 1px var(--ss-line-2); }
/* unread counts and the update dot: the rare orange, with dark ink (white fails on orange) */
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) :is(#skyChatUnread, #skyMobileChatUnread, .sky-notif-count, .sky-bell-count) { background: var(--ss-attention) !important; color: var(--ss-on-attention) !important; border-color: var(--ss-bg) !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .sky-upd-dot { background: var(--ss-attention) !important; }
/* top tabs (Office / Field): active = ink */
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .sky-tab.sky-tab--active, html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .sky-tab.sky-tab--active * { color: var(--ss-ink) !important; }
/* system announcement banners: neutral surface on a hairline, no coloured SUCCESS/INFO chip, ink links */
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) #sky-system-banners .sky-bnr { background: var(--ss-bg-1) !important; border: var(--ss-bw) solid var(--ss-line) !important; color: var(--ss-ink-2) !important; box-shadow: none !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) #sky-system-banners .sky-bnr-tag { display: none !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) #sky-system-banners .sky-bnr-msg { color: var(--ss-ink-2) !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) #sky-system-banners .sky-bnr-msg a { color: var(--ss-ink) !important; font-weight: var(--ss-fw-medium); text-decoration: underline !important; text-decoration-color: var(--ss-line-strong) !important; text-underline-offset: 3px; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) #sky-system-banners .sky-bnr-btn { color: var(--ss-ink-3) !important; }
/* sidebar "+ New": a neutral outline button */
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .sky-newdoor-btn { background: var(--ss-surface) !important; color: var(--ss-ink) !important; border: var(--ss-bw) solid var(--ss-line-2) !important; box-shadow: none !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .sky-newdoor-btn:hover { background: var(--ss-bg-2) !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .sky-newdoor-btn .ss-kbd { background: transparent !important; color: var(--ss-ink-3) !important; border: var(--ss-bw) solid var(--ss-line-2) !important; }
/* support rail and favourite star: grey */
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .sky-report-link, html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .sky-report-link * { color: var(--ss-ink-2) !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .sky-fav-star { color: var(--ss-ink-4) !important; }
/* sidebar rows: 14px, 6px radius; the active row is a grey pill with an ink label and icon, no bar */
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .sky-sidebar .sky-nav-item { font-size: var(--ss-fs-14) !important; border-radius: var(--ss-r-sm) !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .sky-sidebar .sky-nav-item.active { box-shadow: none !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .sky-sidebar .sky-nav-item.active::before { display: none !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .sky-sidebar .sky-nav-item.active, html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .sky-sidebar .sky-nav-item.active > i:not(.sky-fav-star), html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .sky-sidebar .sky-nav-item.active > i:not(.sky-fav-star) * { color: var(--ss-ink) !important; }
/* the rail's group icon holding the current page (John 2026-10-22): the same grey pill and ink icon as the active row */
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .sky-sidebar-collapsed .sky-nav-section:has(.sky-nav-item.active) > .sky-nav-section-title { box-shadow: none !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .sky-sidebar-collapsed .sky-nav-section:has(.sky-nav-item.active) > .sky-nav-section-title > i.bi:not(.chevron), html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .sky-sidebar-collapsed .sky-nav-section:has(.sky-nav-item.active) > .sky-nav-section-title > i.bi:not(.chevron) * { color: var(--ss-ink) !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .sky-rail-fly-item.active > i.bi, html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .sky-rail-fly-item.active > i.bi * { color: var(--ss-ink) !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .sky-sidebar .sky-nav-section-title { font-size: var(--ss-fs-14) !important; font-weight: var(--ss-fw-medium) !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .sky-sidebar .sky-sidebar-group-label { font-size: var(--ss-fs-12) !important; color: var(--ss-ink-3) !important; text-transform: none !important; letter-spacing: 0 !important; font-family: var(--ss-font-sans) !important; }

/* ---- components ---- */
/* body and controls: Inter at 14px (sky-theme.css sets the body face with !important) */
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) body { font-family: var(--ss-font-sans) !important; font-size: var(--ss-fs-14); }
/* page titles: 28px semibold */
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) main :is(h1, .ohn-hello, .page-title) { font-size: var(--ss-c-h1-fs) !important; font-weight: var(--ss-fw-semibold) !important; letter-spacing: var(--ss-track-display); }
/* the primary button: blue with a slight vertical shading, a darker 1px border, a hairline top highlight and a
   semibold label; the same blue in light and dark (ref-1546-dark) */
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) :is(.btn-primary, .btn-gradient-primary, .btn-vista, .ck-btn.primary:not(.ck-next)) { background: var(--ss-c-btn-primary-bg) !important; border: var(--ss-bw) solid var(--ss-c-btn-primary-line) !important; color: var(--ss-on-accent) !important; box-shadow: var(--ss-c-btn-primary-shadow) !important; font-weight: var(--ss-fw-semibold) !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) :is(.btn-primary, .btn-gradient-primary, .btn-vista, .ck-btn.primary:not(.ck-next)):is(:hover, :active, .active) { background: var(--ss-c-btn-primary-bg-hover) !important; }
/* every other button: 6px radius; secondary buttons are the surface on a grey border, no shadow */
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .btn:not(.btn-link):not(.btn-close) { border-radius: var(--ss-r-sm) !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .btn:is(.btn-outline-secondary, .btn-secondary, .btn-light, .btn-outline-dark, .btn-outline-primary) { background: var(--ss-surface) !important; color: var(--ss-ink) !important; border: var(--ss-bw) solid var(--ss-line-2) !important; box-shadow: none !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .btn:is(.btn-outline-secondary, .btn-secondary, .btn-light, .btn-outline-dark, .btn-outline-primary):hover { background: var(--ss-bg-2) !important; }
/* cards: hairline, 8px, no shadow; heads with no fill */
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) :is(.card, .ohn .card, .ck-card, section.card) { box-shadow: none !important; border-radius: var(--ss-r) !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .card-header { background: transparent !important; }
/* tables: a 13px grey head on a clear row, dividers only */
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) table thead th { background: transparent !important; font-size: var(--ss-c-th-fs) !important; font-weight: var(--ss-c-th-fw) !important; color: var(--ss-c-th-ink) !important; text-transform: none !important; letter-spacing: 0 !important; border-bottom: var(--ss-bw) solid var(--ss-line) !important; }
/* links: underlined; blue in light, ink in dark (--ss-accent-text is ink in dark) */
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) :is(.ohn-link, .link-primary, .card-body a:not(.btn):not([class*="row"]), .page-link) { text-decoration: underline !important; text-decoration-color: currentColor; text-decoration-thickness: 1px; text-underline-offset: 3px; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"])[data-mode="dark"] :is(.ohn-link, .link-primary, .card-body a:not(.btn):not([class*="row"]), .page-link) { color: var(--ss-ink) !important; text-decoration-color: var(--ss-line-strong) !important; }
/* no mono-caps decoration: eyebrows speak in plain small grey sans */
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) :is(.ss-eyebrow, .eyebrow) { font-family: var(--ss-font-sans) !important; text-transform: none !important; letter-spacing: 0 !important; font-size: var(--ss-fs-13) !important; }

/* ---- statuses: monochrome, like Cloudflare's lists (ref-1544 "✓ Active"): no pill, ink text and an icon
        (a check for ok / ready / flyable, a hollow grey ring for neutral states); colour only for real
        warnings (orange) and errors (red). Restyles Clean Pro's outlined pill (components.css). ---- */
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .badge[class]:is(.bg-success, .text-bg-success, .bg-warning, .text-bg-warning, .bg-danger, .text-bg-danger, .bg-info, .text-bg-info, .bg-primary, .text-bg-primary, .bg-secondary, .text-bg-secondary, .bg-light, .text-bg-light, .bg-dark, .text-bg-dark):not(.position-absolute):not(.rounded-circle):not(:is(.btn, .nav, .nav-link, .sky-sidebar, #sbn, .dropdown-toggle) .badge) { background: transparent !important; color: var(--ss-ink) !important; border-color: transparent !important; padding-left: 0 !important; padding-right: 0 !important; font-weight: var(--ss-fw-medium); }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .badge[class]:is(.bg-warning, .text-bg-warning):not(.position-absolute):not(.rounded-circle):not(:is(.btn, .nav, .nav-link, .sky-sidebar, #sbn, .dropdown-toggle) .badge) { color: var(--ss-warning) !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .badge[class]:is(.bg-danger, .text-bg-danger):not(.position-absolute):not(.rounded-circle):not(:is(.btn, .nav, .nav-link, .sky-sidebar, #sbn, .dropdown-toggle) .badge) { color: var(--ss-danger) !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .badge[class]:is(.bg-success, .text-bg-success):not(.position-absolute):not(.rounded-circle):not(:is(.btn, .nav, .nav-link, .sky-sidebar, #sbn, .dropdown-toggle) .badge)::before { width: 12px; height: 12px; border-radius: 0; background: var(--ss-ink-2); -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%206%209%2017l-5-5%22/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%206%209%2017l-5-5%22/%3E%3C/svg%3E") center / contain no-repeat; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .badge[class]:is(.bg-info, .text-bg-info, .bg-primary, .text-bg-primary, .bg-secondary, .text-bg-secondary, .bg-light, .text-bg-light, .bg-dark, .text-bg-dark):not(.position-absolute):not(.rounded-circle):not(:is(.btn, .nav, .nav-link, .sky-sidebar, #sbn, .dropdown-toggle) .badge)::before { width: 8px; height: 8px; background: transparent; box-shadow: inset 0 0 0 1.5px var(--ss-ink-3); }

/* ---- pages ---- */
/* Office home: the promo pill is the home's one promo/media surface, so it carries the brand orange
   (a filled "New" tag with dark ink, a warm wash and outline); the link in it stays ink */
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .ohn-news { border-color: var(--ss-brand-line) !important; background: linear-gradient(90deg, var(--ss-brand-soft), var(--ss-surface) 70%) !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .ohn-news-tag { background: var(--ss-brand) !important; color: var(--ss-on-brand) !important; }
/* "Needs your attention": its warning icon (in the markup, hidden by Clean Pro's rules) shows in orange;
   the count is a grey outline chip */
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .ohn .ohn-attn .ohn-ch h2 > i { display: inline-block !important; color: var(--ss-attention) !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .ohn .ohn-attn .ohn-ch h2 > i * { color: var(--ss-attention) !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .ohn-attn .ohn-count:not(:empty) { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: var(--ss-r-pill); background: transparent !important; color: var(--ss-ink-2) !important; border: var(--ss-bw) solid var(--ss-line-2) !important; font-weight: var(--ss-fw-medium); }
/* row icons, stat icons and the stat-tile dots are not statuses: grey */
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .ohn-ico, html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .ohn-ico * { color: var(--ss-ink-3) !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .ohn-ico { background: var(--ss-bg-2) !important; border-color: var(--ss-line) !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) :is(.stat-icon, h2 > i.bi, .card-header i.bi) { color: var(--ss-ink-3) !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .ohn-stat-sub .ohn-dot { color: var(--ss-ink-3) !important; }
/* flight outlook: the "flyable" hours are a quiet tint of the blue ramp */
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .ohn-hours > i.fly { background: color-mix(in srgb, var(--ss-success-fill) var(--ss-c-fly-mix), var(--ss-bg-2)); }
/* "Start something" and the date boxes: plain small grey sans, not mono caps */
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .ohn-start-lab { font: var(--ss-fw-regular) var(--ss-fs-13)/1 var(--ss-font-sans) !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--ss-ink-3) !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .ohn-datebox { width: 46px !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .ohn-datebox > span { font-family: var(--ss-font-sans) !important; font-size: 10px !important; letter-spacing: 0 !important; white-space: nowrap; }
/* DSP / projects list: folder icons and the "Select all" bar neutral; the per-row "Move to project" is an
   outline button, so only "Add DSP" keeps the blue */
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .ck-folder-ico { background: var(--ss-bg-2) !important; color: var(--ss-ink-3) !important; border-color: var(--ss-line) !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .ck-folder-ico * { color: var(--ss-ink-3) !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .ck-unbar { background: var(--ss-bg-2) !important; border-color: var(--ss-line) !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .ck-btn.primary.ck-next { background: transparent !important; color: var(--ss-ink) !important; border-color: var(--ss-line-strong) !important; box-shadow: none !important; font-weight: var(--ss-fw-medium) !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .ck-btn.primary.ck-next * { color: var(--ss-ink-2) !important; }

/* ==========================================================================
   LOGO (admin 17:26Z: "The logo will stay with the speed lines"): logo A, the cloud with speed lines,
   in the brand orange with an ink wordmark (dark in light mode, near-white in dark).
   The images are alpha masks (v1/brand/clean-pro/, tools/build-clean-pro-logos.py) painted with tokens.
   The icon element draws the mark and the "Sky Suite" text element, laid over it, the wordmark (its
   text stays in the DOM for screen readers); on phones the mark alone.
   ========================================================================== */
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) { --cc-logo-h: 26px; --cc-logo-ratio: 6.052; --cc-mark-ratio: 2.729;
  --cc-logo-mark: url("/_shared/v1/brand/clean-pro/speed-lockup-mark.png?v=1"); --cc-logo-word: url("/_shared/v1/brand/clean-pro/speed-lockup-word.png?v=1"); --cc-mark: url("/_shared/v1/brand/clean-pro/speed-mark.png?v=1"); }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) #sbn .sbn-brand { position: relative; gap: 0; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) #sbn .sbn-brand-icon { width: calc(var(--cc-logo-h) * var(--cc-logo-ratio)); height: var(--cc-logo-h); margin: 0; border-radius: 0; box-shadow: none; background: var(--ss-brand); -webkit-mask: var(--cc-logo-mark) left center / contain no-repeat; mask: var(--cc-logo-mark) left center / contain no-repeat; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) #sbn .sbn-brand-icon::before { content: none !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) #sbn .sbn-brand-text { position: absolute; left: 0; top: 50%; width: calc(var(--cc-logo-h) * var(--cc-logo-ratio)); height: var(--cc-logo-h); transform: translateY(-50%); overflow: hidden; color: transparent !important; background: var(--ss-ink); -webkit-mask: var(--cc-logo-word) left center / contain no-repeat; mask: var(--cc-logo-word) left center / contain no-repeat; }
@media (max-width: 480px) {
  html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) #sbn .sbn-brand-icon { width: calc(var(--cc-logo-h) * var(--cc-mark-ratio)); -webkit-mask-image: var(--cc-mark); mask-image: var(--cc-mark); }
}

/* ==========================================================================
   OLD-COLOUR SWEEP (admin 16:48Z: "looks nice but still has the old coloring in places"; worker 4fb30277,
   plan b7126702). Pages from the other repos paint their own category colours (violet credits, blue plan,
   teal storage, ...); in Clean Pro they are re-pointed to the palette: ink / greys, the blue only on
   the action and the current choice, the second colour only for brand / attention. Each page's local
   colour variables are re-pointed first (they also feed its inline style="" attributes), then the few
   rules that need a different shape (a filled chip becomes an outline chip, a category top rule a hairline).
   ========================================================================== */

/* ---- Billing & Plan (skysuite-accounts tier_unified.html + partials/_credit_breakdown.html): --w-accent
        (violet, wallet), --w-sub (blue, plan), --w-store (teal, storage) and the old buy page's --buy-* ---- */
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) { --w-accent: var(--ss-ink); --w-soft: var(--ss-bg-2); --w-line: var(--ss-line-2); --w-sub: var(--ss-ink); --w-store: var(--ss-ink);
  --buy-ai-accent: var(--ss-ink); --buy-accent: var(--ss-ink); --buy-soft: var(--ss-bg-1); --buy-line: var(--ss-line); }
/* the section cards: a hairline all round, no category top rule */
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .sky-content:has(> .tbn-head) :is(.buy-section, .w-card, .w-plan, .w-store) { border-top: var(--ss-bw) solid var(--ss-c-card-line) !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) :is(.w-wallet, .w-plan, .w-store, .buy-section) { border-left-width: var(--ss-bw) !important; border-left-color: var(--ss-c-card-line) !important; }
/* eyebrows and the icons sprinkled through the cards: grey */
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .w-eyebrow, html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .w-eyebrow * { color: var(--ss-ink-3) !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .sky-content:has(> .tbn-head) #content :is(h6, li) > i.bi, html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .sky-content:has(> .tbn-head) #content :is(h6, li) > i.bi * { color: var(--ss-ink-3) !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .w-buy-title, html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .w-buy-title i, html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .w-buy-title i * { color: var(--ss-ink) !important; }
/* every billing button is a secondary: the surface on a grey border (the blue stays the shell's primary) */
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .w-btn, html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .cb-wrap .cb-toggle .btn { background: var(--ss-surface) !important; color: var(--ss-ink) !important; border: var(--ss-bw) solid var(--ss-line-2) !important; border-radius: var(--ss-r-sm) !important; box-shadow: none !important; font-weight: var(--ss-fw-medium) !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .w-btn:hover:not(:disabled), html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .cb-wrap .cb-toggle .btn:hover { background: var(--ss-bg-2) !important; color: var(--ss-ink) !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .w-btn:disabled { border-color: var(--ss-line) !important; color: var(--ss-ink-3) !important; }
/* the period toggle ("This month" / "All time"): a grey segmented control, the pressed half a raised grey */
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .cb-wrap .cb-toggle .btn[aria-pressed="true"] { background: var(--ss-bg-3) !important; color: var(--ss-ink) !important; border-color: var(--ss-line-strong) !important; }
/* packs and the allowance chips: hairline wells */
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) :is(.w-pack, .w-break .chip) { border: var(--ss-bw) solid var(--ss-line) !important; background: var(--ss-bg-1) !important; border-radius: var(--ss-r) !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .w-buy { border-color: var(--ss-line) !important; background: var(--ss-bg-1) !important; border-radius: var(--ss-r) !important; }
/* the storage meter: a progress fill is the blue (like the outlook bars, a quiet data fill) */
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .w-meter { background: var(--ss-bg-3) !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .w-meter > span { background: var(--ss-accent) !important; }
/* plan badges (inline style="" in the template): grey outline chips, ink labels */
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) #planCards .badge[style], html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) #card-enterprise .badge[style] { background: transparent !important; color: var(--ss-ink-2) !important; border: var(--ss-bw) solid var(--ss-line-2) !important; font-weight: var(--ss-fw-medium) !important; }
/* the plan the account is on (the template's script sets an inline 2px var(--w-sub) border): the action blue, 1px */
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) #planCards .sky-card[style*="--w-sub"] { border: var(--ss-bw) solid var(--ss-accent) !important; box-shadow: inset 0 0 0 1px var(--ss-accent) !important; }
/* in-card links ("Buy credits", "Manage my files"; the latter has an inline colour): links, as everywhere */
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .w-jump, html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .w-jump i, html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .w-jump i * { color: var(--ss-accent-text) !important; }
/* credit-history rows: a grey divider (the template reads --ss-action-line, a blue hairline) */
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .w-hist-row { border-bottom-color: var(--ss-line) !important; }

/* ---- CRM dashboard (skysuite-connect dashboard.html: Business Command Center + "Your widgets"): the widgets
        paint per-type icon colours, per-stage bar colours and per-priority chips inline (hence !important) ---- */
/* icons that only decorate (widget heads, quick actions, activity feed, KPI tiles): grey on a grey well */
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) :is(.dashboard-widget-header, .quick-action-btn) i, html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) :is(.dashboard-widget-header, .quick-action-btn) i * { color: var(--ss-ink-3) !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) :is(.feed-icon, .kpi-widget-body .stat-icon, .widget-picker-icon, .cc-move-icon) { background: var(--ss-bg-2) !important; color: var(--ss-ink-3) !important; box-shadow: inset 0 0 0 1px var(--ss-line); }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) :is(.feed-icon, .kpi-widget-body .stat-icon, .widget-picker-icon, .cc-move-icon) * { color: var(--ss-ink-3) !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .dashboard-widget:hover { border-color: var(--ss-line-2) !important; }
/* widget bars: one series, one colour, drawn like the Command Center's own pipeline (pages.css .cc-stage-fill: ink) */
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) :is(.pipeline-bar-fill, .funnel-bar-fill, .forecast-mini-fill) { background: var(--ss-ink-2) !important; color: var(--ss-bg) !important; }
/* task priority chips: grey outline chips (the word says the priority); overdue rows lose the red wash */
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .priority-badge { background: transparent !important; color: var(--ss-ink-2) !important; box-shadow: inset 0 0 0 1px var(--ss-line-2); }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .task-mini-row.overdue-task { background: transparent !important; }
/* next best moves: no priority colour bar or wash; the "Priority" flag is red text on a hairline, not a red pill */
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .cc-move:is(.cc-p-high, .cc-p-medium, .cc-p-low) { --cc-p: transparent !important; border-left-color: var(--ss-line) !important; background: transparent !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .cc-move-flag { background: transparent !important; color: var(--ss-danger) !important; box-shadow: inset 0 0 0 1px currentColor; }
/* lead radar: a fit band is a category, not a warning: ink label, grey score ring */
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) :is(.cc-fit-high, .cc-fit-good) { color: var(--ss-ink) !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .cc-score { border-color: var(--ss-line-strong) !important; color: var(--ss-ink) !important; }

/* ---- initials avatars with a per-person hue (CRM contacts, contact panel, Community directory, chat pickers):
        the shell avatar's neutral look ---- */
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) :is(.contact-avatar, .panel-contact-avatar, .md-av-ph, .ac-ur .ac-uav, .ac-uav-sm, .mp-av) { background: var(--ss-bg-3) !important; color: var(--ss-ink) !important; box-shadow: inset 0 0 0 1px var(--ss-line-2) !important; }
/* Community directory (skysuite-core office_directory.html): the slate handle / meta text is the muted grey */
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) :is(.md-handle, .md-meta, .md-sub, a.md-view), html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .md-meta i, html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .md-meta i * { color: var(--ss-ink-3) !important; }

/* ---- Chat (skysuite-chat chat.html): its cyan --chat-accent becomes the blue, presence green the blue ramp, the
        unread badge the attention colour; fills that carried dark ink for the cyan carry white ---- */
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) { --chat-accent: var(--ss-accent); --chat-accent-h: var(--ss-accent-hover); --chat-own-bubble: var(--ss-accent);
  --chat-green: var(--ss-success-fill); --chat-red: var(--ss-danger); --chat-badge: var(--ss-attention); }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) :is(.btn-new-chat, .btn-send, .new-msg-pill, .rk-you, .edit-actions button.save, .am-add:hover, #chFloatBar .cfb-back) { color: var(--ss-on-accent) !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) :is(.btn-new-chat, .btn-send, .new-msg-pill, .rk-you, .edit-actions button.save, .am-add:hover, #chFloatBar .cfb-back) i * { color: var(--ss-on-accent) !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .ch-badge { color: var(--ss-on-attention) !important; }
/* "Discover channels": a secondary (grey outline), not a second blue button under "New Conversation" */
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .btn-discover { background: var(--ss-surface) !important; color: var(--ss-ink) !important; border-color: var(--ss-line-2) !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .btn-discover:hover { background: var(--ss-bg-2) !important; color: var(--ss-ink) !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .btn-discover i, html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .btn-discover i * { color: var(--ss-ink-3) !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .online-dot.offline { background: var(--ss-ink-4) !important; }
/* the mention / reaction washes are hard-coded cyan rgba: the accent's soft fill */
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) :is(.mention, .rx-pill.mine) { background: var(--ss-accent-soft) !important; color: var(--ss-accent-text) !important; }

/* ---- Team (skysuite-orgs members.html): role and status badges are inline violet / cyan / amber / green: grey
        outline chips (the word says the role) ---- */
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) #members-body .badge[style], html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) #members-body .badge:not([class*="bg-"]) { background: transparent !important; color: var(--ss-ink-2) !important; border: var(--ss-bw) solid var(--ss-line-2) !important; }

/* ---- the shared file drop zone (skysuite-core tutorial-uploader.js, used by Deliver / mission delivery): its inline
        slate dashed border and icon become the greys; hover is the blue ---- */
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .r2u-drop { border-color: var(--ss-line-strong) !important; color: var(--ss-ink-3) !important; background: var(--ss-bg-1) !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .r2u-drop * { color: var(--ss-ink-3) !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .r2u-drop:is(:hover, :focus-visible, .drag, .dragover, .over) { border-color: var(--ss-accent) !important; }
/* chat text and marks that used the accent as a text colour: ink / grey (blue text is for links in light only);
   the active tab is the ink underline of every Clean Pro tab; selected rows and quotes are a grey edge */
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) :is(.cs-header h2 i, .msg-pin-mark, .pinned-bar .pin-ico, .rx-add.rx-mod, .msg-read-receipt i, .rb-ico), html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) :is(.cs-header h2 i, .msg-read-receipt i, .rb-ico) * { color: var(--ss-ink-3) !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) :is(.msg-sender, .rq-who, .rb-who, .cs-bell.snd-on, .hdr-action.snd-on) { color: var(--ss-ink) !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) :is(.cs-tab.active, .new-tabs button.active) { color: var(--ss-ink) !important; border-bottom-color: var(--ss-c-tab-mark) !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .new-tabs button.active { background: var(--ss-bg-3) !important; border-color: var(--ss-line-strong) !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) :is(.ch-item.active, .reply-quote, .reply-bar) { border-left-color: var(--ss-line-strong) !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) :is(.msg-group, .msg-continuation).mentions-me { border-left-color: var(--ss-attention) !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) :is(.person-row .pr-avatar, .msg-avatar, .ur-av, .ch-item:not(.ch-suggest) .ch-avatar) { background: var(--ss-bg-3) !important; color: var(--ss-ink-2) !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) :is(.person-row .pr-avatar, .msg-avatar, .ur-av, .ch-avatar) i, html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) :is(.person-row .pr-avatar, .msg-avatar, .ur-av, .ch-avatar) i * { color: var(--ss-ink-3) !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) :is(.ch-join, .ac-modbadge) { background: var(--ss-surface) !important; color: var(--ss-ink) !important; border-color: var(--ss-line-2) !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .ch-join:hover { background: var(--ss-bg-2) !important; color: var(--ss-ink) !important; }

/* ---- the accent used where it is not the action (found by the sweep's token report) ---- */
/* page tab strips (Community, CRM Sales, Money): the ink underline of every Clean Pro tab, not blue */
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) :is(.cm-tab.on, .sales-tab.active, .finance-tab.active), html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) :is(.cm-tab.on, .sales-tab.active, .finance-tab.active) i, html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) :is(.cm-tab.on, .sales-tab.active, .finance-tab.active) i * { color: var(--ss-ink) !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) :is(.cm-tab.on, .sales-tab.active, .finance-tab.active) { border-bottom-color: var(--ss-c-tab-mark) !important; }
/* segmented view toggles (Community Cards / Map): the pressed half is a raised grey, as in the shell */
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) :is(.md-view.is-on, button.md-view.is-on) { background: var(--ss-bg-3) !important; color: var(--ss-ink) !important; border-color: var(--ss-line-strong) !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) :is(.md-view.is-on) i, html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) :is(.md-view.is-on) i * { color: var(--ss-ink) !important; }
/* outline buttons Bootstrap themes "light" / "info" (Export, Convert to Lead, Leaderboard): the grey secondary */
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) :is(.btn.btn-outline-light, .btn.btn-outline-info, .md-ranks-btn) { background: var(--ss-surface) !important; color: var(--ss-ink) !important; border: var(--ss-bw) solid var(--ss-line-2) !important; box-shadow: none !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) :is(.btn.btn-outline-light, .btn.btn-outline-info, .md-ranks-btn):hover { background: var(--ss-bg-2) !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) :is(.btn.btn-outline-light, .btn.btn-outline-info, .md-ranks-btn) i, html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) :is(.btn.btn-outline-light, .btn.btn-outline-info, .md-ranks-btn) i * { color: var(--ss-ink-3) !important; }
/* the apps' own primary (.btn-sky) gets Clean Pro's shaded primary, like .btn-primary */
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .btn.btn-sky { background: var(--ss-c-btn-primary-bg) !important; border: var(--ss-bw) solid var(--ss-c-btn-primary-line) !important; color: var(--ss-on-accent) !important; box-shadow: var(--ss-c-btn-primary-shadow) !important; font-weight: var(--ss-fw-semibold) !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .btn.btn-sky:is(:hover, :active) { background: var(--ss-c-btn-primary-bg-hover) !important; }
/* heading icons (cards, form sections, the credit breakdown): grey, like the h2 icons */
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) :is(h1, h3, h4, h5, h6, .cb-title) > i.bi, html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) :is(h1, h3, h4, h5, h6, .cb-title) > i.bi * { color: var(--ss-ink-3) !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .sky-card > .d-flex > span > i.bi:first-child, html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .sky-card > .d-flex > span > i.bi:first-child * { color: var(--ss-ink-3) !important; }
/* CRM lifecycle chips (Lead / Customer / Vendor ...): a category, so a grey outline chip with an ink label */
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .lifecycle-badge.badge { background: transparent !important; color: var(--ss-ink-2) !important; border: var(--ss-bw) solid var(--ss-line-2) !important; }
/* record numbers in tables (QTE-2026-…): ink code, not Bootstrap's code colour */
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) table td code { color: var(--ss-ink) !important; }
/* the favourite star on the active sidebar row: grey like every other star */
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .sky-sidebar .sky-nav-item.active > i.sky-fav-star, html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .sky-sidebar .sky-nav-item.active > i.sky-fav-star * { color: var(--ss-ink-4) !important; }
/* Field flight brief: per-row "Stow" and "Schedule" are secondaries (grey), the hero GO badge keeps the ok fill */
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .fo-wrap .fo-stow.yes { border-color: var(--ss-line-strong) !important; background: var(--ss-surface) !important; color: var(--ss-ink) !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .fo-wrap .fo-stow.yes:is(:hover, :focus-visible) { background: var(--ss-bg-2) !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .fo-wrap .fo-un .fo-acts > a, html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .fo-wrap .fo-un .fo-acts > a i, html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .fo-wrap .fo-un .fo-acts > a i * { color: var(--ss-ink) !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .fo-wrap .fo-stowask .bi, html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .fo-wrap .fo-stowask .bi * { color: var(--ss-ink-3) !important; }
/* Missions: "Flown" is a secondary; a day with an overdue mission keeps a grey border and says so in red text */
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .sky-sched .ssc-mini.go { border-color: var(--ss-line-strong) !important; background: var(--ss-surface) !important; color: var(--ss-ink) !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .sky-sched .ssc-mini.go:hover { background: var(--ss-bg-2) !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .sky-sched .ssc-chip.overdue:not(.active) { border-color: var(--ss-line-2) !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .sky-sched .ssc-chip.overdue:not(.active) .cn { color: var(--ss-danger) !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .sky-sched .ssc-stowask button.yes { border-color: var(--ss-line-strong) !important; background: var(--ss-surface) !important; color: var(--ss-ink) !important; }
/* Notifications: an unread row is marked in the attention colour (as the unread counts are); its "View" is a grey
   secondary; the unread count is ink */
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .nbn-item.notification-unread { box-shadow: inset 3px 0 0 var(--ss-attention) !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .nbn-item.notification-unread .nbn-ic { background: var(--ss-bg-2) !important; color: var(--ss-ink-2) !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .nbn-a.pri { border-color: var(--ss-line-2) !important; color: var(--ss-ink) !important; background: var(--ss-surface) !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .nbn-stat[data-k="unread"] b { color: var(--ss-ink) !important; }
/* money statuses (ledger invoices .badge-status-*, connect quotes .status-badge.status-*): ink, like every Clean Pro
   status; only a real problem keeps its colour (overdue red, partial / disputed orange) */
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) :is([class*="badge-status-"], .status-badge[class*="status-"]) { color: var(--ss-ink) !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) :is(.badge-status-overdue, .status-badge.status-overdue) { color: var(--ss-danger) !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) :is(.badge-status-partial, .badge-status-disputed, .status-badge.status-partial) { color: var(--ss-warning) !important; }
/* row "more" menus, the lead-gen help box, the map rail toggle: grey controls, not blue */
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) :is(.bi-three-dots, .bi-three-dots-vertical), html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) :is(.bi-three-dots, .bi-three-dots-vertical) * { color: var(--ss-ink-3) !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .leadgen-howto { border-color: var(--ss-line) !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .leadgen-howto i.bi, html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .leadgen-howto i.bi *, html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) i.bi-lightbulb, html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) i.bi-lightbulb * { color: var(--ss-ink-3) !important; }
html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .rail-toggle-label, html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .rail-toggle i, html[data-ui="new"]:is([data-theme="clean-pro"], [data-theme="clean-pro-field"]) .rail-toggle i * { color: var(--ss-ink-2) !important; }