/* StartupLaby — Shared CSS (common.css) */
/* All theme variable overrides, shared component styles, and utility classes */

/* SL-ARABIC-FONT-GLOBAL: Cairo for ALL pages. 19 pages (market_sizing, mvp_builder,
   regulatory_pathway, my-projects, launchpad…) never loaded Cairo AND their Tailwind config
   lacked the `arabic` family — so common.js swapping body.font-sans → body.font-arabic left
   them with NO font-family at all (bare browser default = the "bad" Arabic). Importing here
   (must be the first rule) + defining the class in real CSS makes every page match the
   Competitor_study look, independent of each page's Tailwind config. Cached after the first
   page since 61 pages already request the identical Cairo URL. */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700&display=swap');

/* body.font-arabic (0,1,1) beats Tailwind's .font-arabic (0,1,0) regardless of <style> order —
   both resolve to Cairo, so the 61 already-good pages are visually unchanged. */
body.font-arabic,[dir="rtl"] body{font-family:'Cairo','Segoe UI',Tahoma,sans-serif}
/* SL-ARABIC-CONTENT-FONT: the typeface follows the TEXT, not the interface.
   The rule above only reaches Arabic when the UI is Arabic ([dir=rtl] / body.font-arabic). A
   founder reading an Arabic report on an English UI (?lang=en) falls outside both, and the
   page's own stack - Inter on <body>, 'Space Grotesk' on the result blocks - has no Arabic
   glyphs, so the text dropped to the browser default face. Any container tagged .sl-ar-text
   (set from the RENDERED text, not the page language) gets Cairo whatever the UI language is.

   :not(i):not([class*="fa-"]) keeps Font Awesome's glyph font intact - forcing Cairo onto an
   icon renders it as an empty box. Those two :not()s also lift specificity to (0,2,1), which is
   what lets this beat the page-local 'Space Grotesk' rules that otherwise win on source order,
   without reaching for !important.

   letter-spacing is reset to normal because it breaks Arabic letter-joining - the cursive forms
   come apart. This page carries 9 letter-spacing declarations. */
.sl-ar-text,.sl-ar-text *:not(i):not([class*="fa-"]){font-family:'Cairo','Segoe UI',Tahoma,sans-serif;letter-spacing:normal}

/* Arabic in the shared sidebar/menus inherits the same stack (no Latin-only display faces). */
[dir="rtl"] .sl-sidebar,[dir="rtl"] #shared-header,[dir="rtl"] #mobile-nav-drawer,[dir="rtl"] .sl-ph-card,[dir="rtl"] .sl-ps-card{font-family:'Cairo','Segoe UI',Tahoma,sans-serif}

/* Theme variables loaded from /api/themes/css */
body{background:var(--bg)!important;color:var(--text)!important}
.bg-grid{position:fixed;top:0;left:0;width:100%;height:100%;background-image:linear-gradient(to right,var(--grid-color) 1px,transparent 1px),linear-gradient(to bottom,var(--grid-color) 1px,transparent 1px);background-size:50px 50px;mask-image:radial-gradient(circle at 50% 50%,black 40%,transparent 100%);z-index:-1;pointer-events:none}

/* ── Theme overrides for all non-dark themes ── */
[data-theme]:not([data-theme="dark"]) header{background:var(--header-bg)!important;border-color:var(--border)!important}
[data-theme]:not([data-theme="dark"]) .bg-slate-950,[data-theme]:not([data-theme="dark"]) .bg-slate-900{background:var(--bg-card)!important}
[data-theme]:not([data-theme="dark"]) .bg-slate-800{background:var(--bg-hover)!important}
[data-theme]:not([data-theme="dark"]) .bg-slate-950\/90,[data-theme]:not([data-theme="dark"]) .bg-slate-950\/80{background:var(--header-bg)!important}
[data-theme]:not([data-theme="dark"]) .bg-slate-900\/50,[data-theme]:not([data-theme="dark"]) .bg-slate-900\/30,[data-theme]:not([data-theme="dark"]) .bg-slate-800\/50,[data-theme]:not([data-theme="dark"]) .bg-slate-800\/70{background:var(--bg-card-2)!important}
[data-theme]:not([data-theme="dark"]) .border-slate-800,[data-theme]:not([data-theme="dark"]) .border-slate-800\/50,[data-theme]:not([data-theme="dark"]) .border-slate-700,[data-theme]:not([data-theme="dark"]) .border-slate-700\/50{border-color:var(--border)!important}
[data-theme]:not([data-theme="dark"]) .text-white{color:var(--text)!important}
[data-theme]:not([data-theme="dark"]) .text-slate-200,[data-theme]:not([data-theme="dark"]) .text-slate-300{color:var(--text)!important}
[data-theme]:not([data-theme="dark"]) .text-slate-400{color:var(--text-muted)!important}
[data-theme]:not([data-theme="dark"]) .text-slate-500{color:var(--text-dim)!important}
[data-theme]:not([data-theme="dark"]) .text-slate-600,[data-theme]:not([data-theme="dark"]) .text-slate-700{color:var(--text-faint)!important}
[data-theme]:not([data-theme="dark"]) .hover\:bg-slate-800:hover,[data-theme]:not([data-theme="dark"]) .hover\:bg-slate-800\/50:hover{background:var(--bg-hover)!important}

/* Dropdown/menu overrides */
[data-theme]:not([data-theme="dark"]) #user-dropdown,[data-theme]:not([data-theme="dark"]) #project-menu{background:var(--bg-card)!important;border-color:var(--border)!important}
[data-theme]:not([data-theme="dark"]) #user-dropdown .border-slate-800,[data-theme]:not([data-theme="dark"]) #user-dropdown .border-b{border-color:var(--border)!important}
[data-theme]:not([data-theme="dark"]) #user-dropdown .bg-gradient-to-r{background:var(--bg-card-2)!important}
[data-theme]:not([data-theme="dark"]) #user-dropdown .text-slate-500,[data-theme]:not([data-theme="dark"]) #user-dropdown .text-\[11px\]{color:var(--text-dim)!important}
[data-theme]:not([data-theme="dark"]) #user-dropdown .text-slate-300{color:var(--text)!important}
[data-theme]:not([data-theme="dark"]) #user-dropdown .hover\:bg-slate-800:hover{background:var(--bg-hover)!important}
[data-theme]:not([data-theme="dark"]) #user-dropdown .hover\:text-cyan-400:hover{color:var(--accent)!important}

/* Shared component styles */
.section-card{background:var(--bg-card,#0c1425);border:1px solid var(--border,#1c2a45);border-radius:14px;overflow:hidden;transition:border-color .3s}
.section-card-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border,#1c2a45);gap:10px;flex-wrap:wrap}
.section-card-header h3{font-size:13px;font-weight:700;color:var(--text,#fff);font-family:'Space Grotesk',sans-serif;white-space:nowrap}
.modal-backdrop{background:rgba(2,6,23,.85);backdrop-filter:blur(8px)}
[data-theme]:not([data-theme="dark"]) .modal-backdrop{background:rgba(0,0,0,.5)!important}

.field-input{width:100%;background:var(--input-bg);border:1px solid var(--border);border-radius:10px;padding:10px 14px;font-size:14px;color:var(--text);outline:none;transition:border-color .2s;-webkit-appearance:none}
.field-input:focus{border-color:rgba(34,211,238,.5)}
.field-input::placeholder{color:var(--text-faint)}

.no-scrollbar::-webkit-scrollbar{display:none}
.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}
html{scroll-behavior:smooth}

/* Toast notifications
   SL-TOAST-OPAQUE: a toast floats over live page content, so its surface must be opaque.
   This file owned only the ANIMATION, never the surface, so each of the four builders
   invented its own background and three picked `bg-<hue>-500/15` - a 15% tint over nothing,
   which the page read straight through. (The fourth, slShowNotif, hit the same wall and
   worked around it privately with bg-slate-900/95.) The surface now lives here and the
   builder picks a MEANING, not a colour, so a see-through toast is no longer expressible.
   The hue is a background-IMAGE on purpose: it composites ON TOP of the opaque
   background-color, where a background-color tint would simply replace it.
   var(--sl-*, literal): the literal is the dark default, the light-appearance block below
   supplies the token - one rule set, both themes, no duplicate to drift. */
.toast-item{animation:toastIn .3s ease,toastOut .3s ease 2.7s forwards;background-color:var(--sl-surface,#111c2f);border:1px solid var(--sl-border,#26334a);box-shadow:0 16px 40px rgba(var(--sl-shadow-rgb,2,6,23),.6),0 2px 8px rgba(var(--sl-shadow-rgb,2,6,23),.45)}
.toast-info{background-image:linear-gradient(rgba(var(--sl-accent-base-rgb,34,211,238),.16),rgba(var(--sl-accent-base-rgb,34,211,238),.16));border-color:rgba(var(--sl-accent-base-rgb,34,211,238),.45);color:var(--sl-accent-ink,#a5f3fc)}
.toast-ok{background-image:linear-gradient(rgba(var(--sl-success-base-rgb,52,211,153),.16),rgba(var(--sl-success-base-rgb,52,211,153),.16));border-color:rgba(var(--sl-success-base-rgb,52,211,153),.45);color:var(--sl-success-ink,#a7f3d0)}
.toast-err{background-image:linear-gradient(rgba(var(--sl-danger-base-rgb,248,113,113),.16),rgba(var(--sl-danger-base-rgb,248,113,113),.16));border-color:rgba(var(--sl-danger-base-rgb,248,113,113),.45);color:var(--sl-danger-ink,#fecaca)}
.toast-warn{background-image:linear-gradient(rgba(var(--sl-warning-base-rgb,251,191,36),.16),rgba(var(--sl-warning-base-rgb,251,191,36),.16));border-color:rgba(var(--sl-warning-base-rgb,251,191,36),.45);color:var(--sl-warning-ink,#fde68a)}
@keyframes toastIn{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes toastOut{from{opacity:1}to{opacity:0}}

/* Settings page sidebar */
[data-theme]:not([data-theme="dark"]) .settings-sidebar{background:var(--bg-card)!important;border-color:var(--border)!important}
[data-theme]:not([data-theme="dark"]) .settings-sidebar button{color:var(--text-muted)!important}
[data-theme]:not([data-theme="dark"]) .settings-sidebar button:hover{background:var(--bg-hover)!important;color:var(--text)!important}
[data-theme]:not([data-theme="dark"]) .settings-sidebar button.active-section{background:var(--bg-hover)!important;color:var(--accent)!important;border-color:var(--accent)!important}

/* Right sidebar */
[data-theme]:not([data-theme="dark"]) .right-sidebar{background:var(--bg-card)!important;border-color:var(--border)!important}

/* Footer — single-row layout: social icons (left) · copyright + reCAPTCHA notice (center) · nav links (right) */
#site-footer{background:var(--bg-card,#0f172a);border-top:1px solid var(--border,#1c2a45);padding:0;flex-shrink:0}
.footer-inner{max-width:1400px;margin:0 auto;padding:10px 22px;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.footer-social{display:flex;gap:10px;flex-wrap:nowrap;flex-shrink:0}
.footer-social-link{width:40px;height:40px;border-radius:10px;background:var(--bg-hover,#1e293b);border:1px solid var(--border,#1c2a45);display:flex;align-items:center;justify-content:center;color:var(--text-muted,#94a3b8);font-size:19px;transition:all .2s}
.footer-social-link:hover{color:var(--accent,#06b6d4);border-color:var(--accent,#06b6d4);transform:translateY(-2px)}
/* SL-FOOTER-GPLAY: a brand mark is multi-colour, so it is an image, not a font glyph
   (a glyph inherits currentColor and can only ever be one colour). Sized to match the
   19px glyphs beside it; identical in both themes, so it needs no light-theme override. */
.footer-social-link i.sl-ic-gplay{width:21px;height:21px;background:url("/pwa-icons/google-play.svg") center/contain no-repeat;display:block}
.footer-social-link:has(i.sl-ic-gplay):hover{border-color:#00A0FF}
.footer-nav{display:flex;gap:4px;flex-wrap:wrap;align-items:center;flex-shrink:0}
.footer-nav-link{color:var(--text-muted,#94a3b8);font-size:11.5px;font-weight:500;transition:color .2s;text-decoration:none;padding:2px 4px}
.footer-nav-link:hover{color:var(--accent,#06b6d4)}
.footer-sep{color:var(--text-faint,#334155);font-size:9px}
.footer-copy{color:var(--text-dim,#64748b);font-size:11px;text-align:center;flex:1 1 240px;min-width:0;line-height:1.4}
.footer-copy .footer-recaptcha{font-size:9.5px;opacity:.55;margin-inline-start:8px}
.footer-copy .footer-recaptcha a{color:inherit;text-decoration:underline}
@media (max-width:720px){
  .footer-inner{flex-direction:column;gap:10px;padding:12px 16px;text-align:center}
  .footer-copy{flex:none}
}

/* Hide reCAPTCHA v3 badge (allowed per Google TOS if attribution is in footer) */
.grecaptcha-badge{display:none!important}

/* ═══════════════════════════════════════════════════════════════
   FINANCIAL DASHBOARD (right sidebar)
   ═══════════════════════════════════════════════════════════════ */

/* Container for the dashboard inside the right sidebar */
#sl-financial-dashboard{margin-bottom:16px}

/* ─── Empty state (no financial data yet) ─── */
.sl-fd-empty{background:#0f172a;border:1px dashed #1e293b;border-radius:14px;padding:22px 16px;text-align:center}
.sl-fd-empty-icon{width:44px;height:44px;margin:0 auto 10px;border-radius:50%;background:rgba(34,211,238,.08);border:1px solid rgba(34,211,238,.2);display:flex;align-items:center;justify-content:center;color:#22d3ee;font-size:18px}
.sl-fd-empty-title{color:#e2e8f0;font-size:12px;font-weight:700;margin-bottom:4px}
.sl-fd-empty-desc{color:#64748b;font-size:11px;line-height:1.5;margin-bottom:14px}
.sl-fd-add-btn{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(to right,#0891b2,#06b6d4);color:#fff;font-size:11px;font-weight:700;padding:9px 14px;border-radius:9px;border:0;cursor:pointer;transition:all .15s;box-shadow:0 0 12px rgba(6,182,212,.25)}
.sl-fd-add-btn:hover{background:linear-gradient(to right,#06b6d4,#22d3ee);box-shadow:0 0 18px rgba(6,182,212,.4)}

/* ─── Restricted state (viewers) ─── */
.sl-fd-restricted{background:#0f172a;border:1px solid #1e293b;border-radius:14px;padding:22px 16px;text-align:center}
.sl-fd-restricted-icon{width:42px;height:42px;margin:0 auto 10px;border-radius:50%;background:rgba(148,163,184,.08);border:1px solid rgba(148,163,184,.2);display:flex;align-items:center;justify-content:center;color:#94a3b8;font-size:16px}
.sl-fd-restricted-title{color:#cbd5e1;font-size:12px;font-weight:700;margin-bottom:4px}
.sl-fd-restricted-desc{color:#64748b;font-size:10px;line-height:1.5}

/* ─── Generic card ─── */
.sl-fd-card{background:#0f172a;border:1px solid #1e293b;border-radius:14px;padding:14px;margin-bottom:10px}

/* ─── Health Score Card ─── */
.sl-fd-health-card{border-width:1.5px;position:relative}
.sl-fd-health-card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(to right,transparent,currentColor,transparent);opacity:.3}
.sl-fd-health-header{display:flex;align-items:center;gap:8px;color:#94a3b8;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}
.sl-fd-health-header i{font-size:12px}
.sl-fd-health-score{font-size:36px;font-weight:800;line-height:1;margin-bottom:8px;display:flex;align-items:baseline;gap:8px}
.sl-fd-health-status{display:inline-block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:4px 10px;border-radius:999px}

/* ─── Stage Badge ─── */
.sl-fd-card-title{margin-bottom:12px;display:flex;align-items:center;gap:6px}
.sl-fd-stage-badge{display:inline-block;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:3px 8px;border-radius:999px}
.sl-fd-stage-early{background:rgba(34,211,238,.12);color:#22d3ee;border:1px solid rgba(34,211,238,.25)}
.sl-fd-stage-growth{background:rgba(168,85,247,.12);color:#a78bfa;border:1px solid rgba(168,85,247,.25)}
.sl-fd-stage-scale{background:rgba(16,185,129,.12);color:#10b981;border:1px solid rgba(16,185,129,.25)}

/* ─── Metric Rows ─── */
.sl-fd-metrics{display:flex;flex-direction:column;gap:10px}
.sl-fd-metric-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 0;border-bottom:1px dashed rgba(148,163,184,.08)}
.sl-fd-metric-row:last-child{border-bottom:none}
.sl-fd-metric-label{display:flex;align-items:center;gap:7px;color:#cbd5e1;font-size:11px;font-weight:500;min-width:0;flex:1}
.sl-fd-metric-label i{font-size:11px;flex-shrink:0;width:14px;text-align:center}
.sl-fd-metric-label span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sl-fd-metric-value{color:#fff;font-size:12px;font-weight:700;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;flex-shrink:0}

/* ─── Help icon + tooltip (jargon-buster for non-finance users) ─── */
/* The icon itself is a small circled-i next to each metric label.
   The tooltip popup is a singleton at document root (see common.js)
   so it escapes sidebar overflow clipping and positions against the viewport. */
.sl-fd-help{position:relative;display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;margin-inline-start:2px;border-radius:50%;color:#475569;cursor:help;font-size:9px;flex-shrink:0;transition:color .15s,background .15s;outline:none;-webkit-tap-highlight-color:transparent}
.sl-fd-help i{font-size:10px;width:auto;margin:0}
.sl-fd-help:hover,.sl-fd-help:focus{color:#22d3ee;background:rgba(34,211,238,.1)}

/* Floating tooltip popup (position: fixed, appended to <body>, never clipped) */
.sl-fd-tip-popup{position:fixed;top:0;left:0;z-index:10000;background:#0f172a;color:#e2e8f0;padding:10px 14px;border-radius:8px;border:1px solid rgba(148,163,184,.25);font-size:11.5px;font-weight:400;line-height:1.55;width:240px;max-width:calc(100vw - 20px);box-shadow:0 10px 25px rgba(0,0,0,.45);pointer-events:none;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .15s,transform .15s;text-align:start;white-space:normal;font-family:inherit}
.sl-fd-tip-popup.sl-fd-tip-visible{opacity:1;visibility:visible;transform:translateY(0)}
/* Small arrow (points toward the icon) — positioned by JS via class */
.sl-fd-tip-popup::before{content:'';position:absolute;border:5px solid transparent;pointer-events:none}
.sl-fd-tip-popup.sl-fd-tip-below::before{top:-10px;left:var(--sl-tip-arrow-x,50%);transform:translateX(-50%);border-bottom-color:rgba(148,163,184,.25)}
.sl-fd-tip-popup.sl-fd-tip-above::before{bottom:-10px;left:var(--sl-tip-arrow-x,50%);transform:translateX(-50%);border-top-color:rgba(148,163,184,.25)}

/* ─── Trend Arrows ─── */
.sl-fd-trend{font-size:11px;font-weight:700;line-height:1}
.sl-fd-trend-good{color:#10b981}
.sl-fd-trend-bad{color:#f87171}
.sl-fd-trend-neutral{color:#475569}

/* ─── Cash quick-edit row ─── */
.sl-fd-cash-row{background:rgba(34,211,238,.04);margin:4px -8px 0;padding:8px 8px !important;border-radius:8px;border-bottom:none !important}
.sl-fd-quick-edit-btn{background:transparent;border:0;color:#64748b;cursor:pointer;font-size:10px;padding:2px 4px;border-radius:4px;transition:all .15s}
.sl-fd-quick-edit-btn:hover{color:#22d3ee;background:rgba(34,211,238,.1)}
.sl-fd-quick-input{width:80px;background:#020617;border:1px solid rgba(34,211,238,.4);border-radius:5px;color:#fff;font-size:11px;font-weight:700;padding:3px 6px;text-align:right;outline:none}
.sl-fd-quick-input:focus{border-color:#22d3ee;box-shadow:0 0 0 2px rgba(34,211,238,.2)}
.sl-fd-quick-ok,.sl-fd-quick-cancel{background:transparent;border:0;padding:3px 5px;cursor:pointer;font-size:10px;border-radius:4px;transition:all .15s}
.sl-fd-quick-ok{color:#10b981}
.sl-fd-quick-ok:hover{background:rgba(16,185,129,.15)}
.sl-fd-quick-cancel{color:#64748b}
.sl-fd-quick-cancel:hover{color:#f87171;background:rgba(248,113,113,.1)}

/* ─── Edit Financial Data button ─── */
.sl-fd-edit-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;background:rgba(15,23,42,.8);border:1px solid #1e293b;color:#cbd5e1;font-size:11px;font-weight:700;padding:10px;border-radius:10px;cursor:pointer;transition:all .15s;margin-bottom:10px}
.sl-fd-edit-btn:hover{background:rgba(34,211,238,.08);border-color:rgba(34,211,238,.3);color:#22d3ee}

/* ─── SL-PROJECT-SNAPSHOT-V1: founder's dossier / spec-sheet (project headline + colour-coded category rails,
       micro-mono field labels, a case-file corner bracket echoing the Roast "Exhibit" motif). RTL-safe. ─── */
.sl-ps-card{position:relative;background:linear-gradient(180deg,rgba(34,211,238,.05),rgba(15,23,42,0) 54px),#0d1524;border:1px solid #1e2b45;border-radius:13px;padding:12px 13px 11px;margin-bottom:12px;overflow:hidden}
.sl-ps-card::before{content:"";position:absolute;top:7px;inset-inline-start:7px;width:10px;height:10px;border-top:1.5px solid rgba(34,211,238,.55);border-inline-start:1.5px solid rgba(34,211,238,.55);border-start-start-radius:4px;pointer-events:none}
.sl-ps-head{display:flex;align-items:center;gap:6px;margin:0 0 2px;padding-inline-start:6px}
.sl-ps-head i{color:#22d3ee;font-size:11px;filter:drop-shadow(0 0 5px rgba(34,211,238,.4))}
.sl-ps-head span{color:#64748b;font-size:8.5px;font-weight:800;text-transform:uppercase;letter-spacing:.2em}
.sl-ps-count{margin-inline-start:auto;color:#6d84a3;font-size:8.5px;font-weight:700;letter-spacing:.05em;white-space:nowrap;text-transform:none;font-family:inherit}
.sl-ps-loading,.sl-ps-empty{color:#64748b;font-size:10.5px;line-height:1.55;padding:4px 6px}
.sl-ps-title{color:#f1f5f9;font-size:13px;font-weight:800;line-height:1.15;letter-spacing:-.01em;margin:4px 0 11px;padding:0 0 9px 6px;padding-inline-start:6px;padding-inline-end:0;border-bottom:1px solid rgba(30,43,69,.85);text-shadow:0 0 18px rgba(34,211,238,.12)}
.sl-ps-group{margin-bottom:9px;padding-inline-start:9px;position:relative;color:#38bdf8}
.sl-ps-group:last-child{margin-bottom:1px}
.sl-ps-group::before{content:"";position:absolute;inset-inline-start:0;top:2px;bottom:3px;width:2px;border-radius:2px;background:currentColor;opacity:.55}
.sl-ps-group-head{color:currentColor;font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.17em;opacity:.92;margin-bottom:3px}
.sl-ps-row{display:flex;gap:10px;align-items:baseline;padding:2px 0}
.sl-ps-row + .sl-ps-row{border-top:1px solid rgba(30,43,69,.5)}
/* SL-PS-FONT: labels use the page's own font (not the mono stack — its Arabic fallback is
   Courier-style disconnected glyph cells) at a readable size/contrast for every language. */
.sl-ps-lbl{flex:0 0 auto;min-width:46px;color:#a9bad4;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;font-family:inherit;padding-top:.5px}
.sl-ps-val{flex:1;text-align:end;color:#e6edf7;font-size:10.5px;font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.sl-ps-group[data-cat="build"]{color:#38bdf8}
.sl-ps-group[data-cat="custs"]{color:#a78bfa}
.sl-ps-group[data-cat="money"]{color:#34d399}
.sl-ps-group[data-cat="stage"]{color:#fbbf24}
.sl-ps-group[data-cat="strat"]{color:#fb7185}
.sl-ps-group[data-cat="other"]{color:#64748b}
/* values carry a LIGHT tint of their section's hue — a cohesive colour-coded readout, still bright & very readable on the dark card */
.sl-ps-group[data-cat="build"] .sl-ps-val{color:#bfe1fb}
.sl-ps-group[data-cat="custs"] .sl-ps-val{color:#d8cffe}
.sl-ps-group[data-cat="money"] .sl-ps-val{color:#b6edd3}
.sl-ps-group[data-cat="stage"] .sl-ps-val{color:#f8e2ac}
.sl-ps-group[data-cat="strat"] .sl-ps-val{color:#ffccd5}
/* SL-PS-RTL: letter-spacing tears Arabic ligatures apart, and the mono stack falls back to
   Courier-style Arabic (disconnected glyph cells). In RTL the labels inherit the page's own
   font — the same one the values render in — brighter and larger for legibility. Matched by
   BOTH the dir attribute and the .sl-ps-rtl class the renderer stamps (belt-and-braces). */
[dir="rtl"] .sl-ps-head span,.sl-ps-rtl .sl-ps-head span{letter-spacing:0;font-size:10px;font-family:inherit}
[dir="rtl"] .sl-ps-group-head,.sl-ps-rtl .sl-ps-group-head{letter-spacing:0;font-size:10px}
[dir="rtl"] .sl-ps-lbl,.sl-ps-rtl .sl-ps-lbl{letter-spacing:0;font-family:inherit;font-size:11px;font-weight:600;color:#b6c5de;text-transform:none}
[dir="rtl"] .sl-ps-count,.sl-ps-rtl .sl-ps-count{letter-spacing:0;font-family:inherit;font-size:9px}

/* ─── SL-PROJECT-HEALTH: AI health gauge card ─── */
.sl-ph-card{background:#0d1524;border:1px solid #1e2b45;border-radius:13px;padding:11px 13px;margin-bottom:12px}
.sl-ph-head{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.sl-ph-head i{color:#f472b6;font-size:12px;filter:drop-shadow(0 0 5px rgba(244,114,182,.4))}
.sl-ph-head span[data-i18n="ph_title"]{color:#94a6c0;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.sl-ph-pct{margin-inline-start:auto;font-size:15px;font-weight:800;color:#e6edf7}
.sl-ph-track{position:relative;height:9px;border-radius:999px;overflow:hidden;background:linear-gradient(90deg,#ef4444,#f59e0b,#facc15,#22c55e);border:1px solid rgba(30,43,69,.9)}
.sl-ph-mask{position:absolute;top:0;bottom:0;inset-inline-end:0;background:rgba(4,10,24,.85);transition:width .6s ease}
.sl-ph-row{margin-top:9px}
.sl-ph-btn{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:6px 10px;border-radius:8px;font-size:10.5px;font-weight:700;color:#a5f3fc;background:rgba(34,211,238,.08);border:1px solid rgba(34,211,238,.25);cursor:pointer;transition:all .15s;font-family:inherit}
.sl-ph-btn:hover{background:rgba(34,211,238,.16);border-color:rgba(34,211,238,.45)}
.sl-ph-btn:disabled{opacity:.55;cursor:wait}
.sl-ph-btn.sl-ph-busy i{animation:sl-ph-spin 1s linear infinite}
@keyframes sl-ph-spin{to{transform:rotate(360deg)}}
.sl-ph-tips{margin-top:9px;border-top:1px solid rgba(30,43,69,.85);padding-top:8px}
.sl-ph-tips-h{color:#7d93b2;font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;margin-bottom:5px}
.sl-ph-tip{color:#cbd9ec;font-size:11px;line-height:1.55;padding:2px 0 2px 14px;padding-inline-start:14px;padding-inline-end:0;position:relative}
/* SL-CSS-CHARSET: escapes, not literal glyphs — common.css is served as `text/css` with NO
   charset and has no @charset rule, so literal UTF-8 arrows decoded as mojibake (â†') in the tips. */
.sl-ph-tip::before{content:'\2192';position:absolute;inset-inline-start:0;color:#22d3ee;font-size:10px}
[dir="rtl"] .sl-ph-track{background:linear-gradient(270deg,#ef4444,#f59e0b,#facc15,#22c55e)}
[dir="rtl"] .sl-ph-head span[data-i18n="ph_title"]{letter-spacing:0;font-size:11px}
[dir="rtl"] .sl-ph-tips-h{letter-spacing:0;font-size:10.5px}
[dir="rtl"] .sl-ph-tip{font-size:12px;line-height:1.7}
[dir="rtl"] .sl-ph-tip::before{content:'\2190'}

/* ─── Progress card (matches existing styling) ─── */
.sl-fd-progress-card{background:#0f172a;border:1px solid #1e293b;border-radius:14px;padding:14px;margin-bottom:10px}

/* ─── Collapsible motivational quote ─── */
.sl-fd-quote-details{background:rgba(15,23,42,.5);border:1px solid rgba(30,41,59,.6);border-radius:10px;overflow:hidden}
.sl-fd-quote-details[open]{background:#0f172a;border-color:#1e293b}
.sl-fd-quote-summary{list-style:none;cursor:pointer;padding:8px;text-align:center;color:#475569;font-size:14px;transition:color .15s}
.sl-fd-quote-summary::-webkit-details-marker{display:none}
.sl-fd-quote-summary:hover{color:#94a3b8}
.sl-fd-quote-details[open] .sl-fd-quote-summary{color:#64748b;border-bottom:1px solid rgba(30,41,59,.5);padding-bottom:6px}
.sl-fd-quote-body{padding:12px 14px 14px;text-align:center}

/* ═══════════════════════════════════════════════════════════════
   FINANCIAL INPUT MODAL
   ═══════════════════════════════════════════════════════════════ */
.sl-fd-modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:20px}
.sl-fd-modal.hidden{display:none}
.sl-fd-modal-backdrop{position:absolute;inset:0;background:rgba(2,6,23,.75);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.sl-fd-modal-box{position:relative;background:#0f172a;border:1px solid #1e293b;border-radius:18px;box-shadow:0 25px 60px rgba(0,0,0,.6);width:100%;max-width:960px;max-height:92vh;display:flex;flex-direction:column;overflow:hidden;animation:slFdModalIn .2s ease}
@keyframes slFdModalIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

.sl-fd-modal-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;border-bottom:1px solid #1e293b;flex-shrink:0}
.sl-fd-modal-header h2{color:#fff;font-size:16px;font-weight:700;display:flex;align-items:center;gap:10px;margin:0}
.sl-fd-modal-header h2 i{color:#22d3ee}
.sl-fd-modal-close{background:transparent;border:0;width:32px;height:32px;border-radius:8px;color:#94a3b8;cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center;font-size:14px}
.sl-fd-modal-close:hover{background:rgba(248,113,113,.1);color:#f87171}

.sl-fd-modal-body{flex:1;overflow-y:auto;padding:20px 22px}
.sl-fd-modal-footer{display:flex;justify-content:flex-end;gap:10px;padding:14px 22px;border-top:1px solid #1e293b;flex-shrink:0}
.sl-fd-modal-cancel{padding:10px 20px;border-radius:10px;border:1px solid #1e293b;background:transparent;color:#cbd5e1;font-size:12px;font-weight:700;cursor:pointer;transition:all .15s}
.sl-fd-modal-cancel:hover{background:rgba(148,163,184,.08)}
.sl-fd-modal-save{display:inline-flex;align-items:center;gap:6px;padding:10px 22px;border-radius:10px;border:0;background:linear-gradient(to right,#0891b2,#06b6d4);color:#fff;font-size:12px;font-weight:700;cursor:pointer;transition:all .15s;box-shadow:0 0 14px rgba(6,182,212,.25)}
.sl-fd-modal-save:hover{background:linear-gradient(to right,#06b6d4,#22d3ee);box-shadow:0 0 20px rgba(6,182,212,.4)}
.sl-fd-modal-save:disabled{opacity:.6;cursor:wait}

/* ─── Modal grid: inputs (left) + live preview (right) ─── */
.sl-fd-modal-grid{display:grid;grid-template-columns:1fr 320px;gap:24px;align-items:start}
.sl-fd-modal-inputs{display:flex;flex-direction:column;gap:18px}

.sl-fd-modal-section{background:rgba(2,6,23,.4);border:1px solid rgba(30,41,59,.6);border-radius:12px;padding:14px 16px}
.sl-fd-modal-section h3{color:#e2e8f0;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin:0 0 12px;display:flex;align-items:center;gap:8px}
.sl-fd-modal-section h3 i{font-size:13px}

.sl-fd-modal-row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}

.sl-fd-field{display:flex;flex-direction:column;gap:5px;margin-bottom:10px}
.sl-fd-field:last-child{margin-bottom:0}
.sl-fd-field > span{color:#94a3b8;font-size:11px;font-weight:600}
.sl-fd-field small{color:#64748b;font-size:10px;margin-top:-1px}
.sl-fd-field input,.sl-fd-field select{background:#020617;border:1px solid #1e293b;border-radius:8px;color:#fff;font-size:12px;font-weight:500;padding:9px 11px;outline:none;transition:all .15s;width:100%}
.sl-fd-field input:focus,.sl-fd-field select:focus{border-color:rgba(34,211,238,.5);box-shadow:0 0 0 2px rgba(34,211,238,.15)}
.sl-fd-field input::placeholder{color:#475569}
.sl-fd-field input[type=number]{-moz-appearance:textfield}
.sl-fd-field input[type=number]::-webkit-inner-spin-button,.sl-fd-field input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}

/* ─── Live preview pane ─── */
.sl-fd-modal-preview{background:rgba(2,6,23,.6);border:1px solid rgba(30,41,59,.8);border-radius:12px;padding:16px;position:sticky;top:0}
.sl-fd-modal-preview h3{color:#e2e8f0;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin:0 0 14px;display:flex;align-items:center;gap:8px}
.sl-fd-modal-preview h3 i{color:#22d3ee;font-size:12px}

.sl-fd-preview-score{background:rgba(15,23,42,.6);border:1.5px solid #1e293b;border-radius:12px;padding:14px;text-align:center;margin-bottom:14px}
.sl-fd-preview-score-label{color:#94a3b8;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}
.sl-fd-preview-score-value{font-size:36px;font-weight:800;line-height:1;margin-bottom:8px}
.sl-fd-preview-score-status{display:inline-block;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:3px 10px;border-radius:999px}

.sl-fd-preview-rows{display:flex;flex-direction:column;gap:6px}
.sl-fd-preview-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:5px 8px;border-radius:6px;background:rgba(15,23,42,.4)}
.sl-fd-preview-row span{color:#94a3b8;font-size:11px;font-weight:500}
.sl-fd-preview-row strong{color:#e2e8f0;font-size:11px;font-weight:700}

/* ─── Mobile: stack preview below inputs ─── */
@media (max-width:900px){
  .sl-fd-modal-grid{grid-template-columns:1fr}
  .sl-fd-modal-preview{position:static;order:-1}
  .sl-fd-modal-row2{grid-template-columns:1fr}
  .sl-fd-modal-box{max-height:100vh;max-width:100%;border-radius:0;height:100vh}
  .sl-fd-modal{padding:0}
  .sl-fd-modal-header{padding:14px 16px}
  .sl-fd-modal-body{padding:14px 16px}
  .sl-fd-modal-footer{padding:12px 16px}
}

@media (max-width:480px){
  .sl-fd-health-score{font-size:28px}
  .sl-fd-modal-header h2{font-size:14px}
}

/* ─── Direction icons (SL-MV2-DIR-ICO, 09 T13b): the ONE mirror of an icon that points along the reading direction ─── */
:root[dir="rtl"] .sl-dir-ico{scale:-1 1}

/* ─── Light theme overrides ─── */
[data-theme]:not([data-theme="dark"]) .sl-fd-empty,
[data-theme]:not([data-theme="dark"]) .sl-fd-restricted,
[data-theme]:not([data-theme="dark"]) .sl-fd-card,
[data-theme]:not([data-theme="dark"]) .sl-fd-progress-card{background:var(--bg-card)!important;border-color:var(--border)!important}
[data-theme]:not([data-theme="dark"]) .sl-fd-empty-title,
[data-theme]:not([data-theme="dark"]) .sl-fd-restricted-title{color:var(--text)!important}
[data-theme]:not([data-theme="dark"]) .sl-fd-metric-label{color:var(--text)!important}
[data-theme]:not([data-theme="dark"]) .sl-fd-metric-value{color:var(--text)!important}
[data-theme]:not([data-theme="dark"]) .sl-fd-modal-box{background:var(--bg-card)!important;border-color:var(--border)!important}
[data-theme]:not([data-theme="dark"]) .sl-fd-modal-section{background:var(--bg-hover)!important;border-color:var(--border)!important}
[data-theme]:not([data-theme="dark"]) .sl-fd-field input,
[data-theme]:not([data-theme="dark"]) .sl-fd-field select{background:var(--bg)!important;border-color:var(--border)!important;color:var(--text)!important}
[data-theme]:not([data-theme="dark"]) .sl-fd-help{color:var(--text-faint)!important}
[data-theme]:not([data-theme="dark"]) .sl-fd-help:hover,
[data-theme]:not([data-theme="dark"]) .sl-fd-help:focus{color:var(--accent)!important;background:rgba(6,182,212,.08)!important}
[data-theme]:not([data-theme="dark"]) .sl-fd-tip-popup{background:var(--bg-card)!important;color:var(--text)!important;border-color:var(--border)!important;box-shadow:0 10px 25px rgba(0,0,0,.08)!important}
[data-theme]:not([data-theme="dark"]) .sl-fd-tip-popup.sl-fd-tip-below::before{border-bottom-color:var(--border)!important}
[data-theme]:not([data-theme="dark"]) .sl-fd-tip-popup.sl-fd-tip-above::before{border-top-color:var(--border)!important}

/* ══════════════════════════════════════════════════════════════════════════════
   APPEARANCE — the site ships two appearances: dark (the default, and the only
   one anybody gets without asking for it) and light.

   The axis is `data-appearance` on <html>, stamped SERVER-SIDE in serveWithSEO
   before the HTML leaves the process, so there is no flash of the wrong mode and
   no dependence on JS running. Absent or "dark" ⇒ not one selector below matches
   ⇒ dark rendering is byte-identical to the file above this comment.

   Every value here is a FLATTENED LITERAL. Nothing bridges to a served theme key.
   The (0,2,0) attribute selector outranks both the served /api/themes/css block
   and the boot <style> a stale sl_theme cookie injects — both are (0,1,0) — so a
   light document is light regardless of which legacy theme is still stamped.
   ══════════════════════════════════════════════════════════════════════════════ */
/* ── LIGHT ── authored, not inverted. Near-white ground, white cards, elevation and
   hairline instead of tinted fills, colour only where it carries meaning. Every value is
   a flattened literal — no var() bridge to any served key. The (0,2,0) attribute selector
   outranks both the :root block above and the (0,1,0) :root{--sl-*} block each page ships,
   so this one place re-colours all 70 tokens. Nothing here matches without the attribute,
   which is why dark is byte-identical.
   Contrast: all 406 ink/surface, ink/tint, on-fill and identity-hue pairs measured >= 4.5:1
   against the WORST ground in the ladder (--bg-hover); minimum 4.55. */
:root[data-appearance="light"]{
  color-scheme:light;
  /* page + surfaces — near-white ground, WHITE card, two recessed steps below it */
  --bg:#f4f7fb;--bg-card:#ffffff;--bg-card-2:#f2f5fa;--input-bg:#edf2f8;--bg-hover:#e8eef6;--header-bg:rgba(255,255,255,.92);
  /* hairlines — these carry the elevation, not a shadow */
  /* SL-LIGHT-HAIRLINES: one step firmer. At var(--border) on #ffffff a card edge measured
     about 1.3:1 - present in the file, absent to the eye. These carry the elevation
     here (there is no shadow doing it), so they have to actually read. */
  --border:#86919d;--border-light:#7a848f;/*SL-LIGHT-FIRM3*/
  /* ink */
  --text:#0f172a;--text-muted:#44546c;--text-dim:#4f5f78;--text-faint:#57677f;
  /* the one accent + its badge */
  --accent:#075985;--accent-light:#0369a1;--badge-bg:rgba(3,105,161,.08);--badge-text:#075985;--badge-border:rgba(3,105,161,.28);
  /* decorative washes — near-silent on a white ground */
  --grid-color:rgba(15,23,42,.045);--surface-tint-a:rgba(3,105,161,.045);--surface-tint-b:rgba(15,23,42,.025);
  /* --sl-* surfaces, lines, washes */
  --sl-bg:#f4f7fb;--sl-surface:#ffffff;--sl-surface-rgb:255,255,255;--sl-surface-2:#f2f5fa;--sl-hover:#e8eef6;--sl-hover-rgb:232,238,246;--sl-border:#c8d4e3;--sl-border-rgb:200,212,227;--sl-border-strong:#aebfd2;--sl-border-strong-rgb:174,191,210;--sl-neutral-rgb:100,116,139;--sl-shadow-rgb:15,23,42;--sl-surface-tint-a:rgba(14,116,144,.05);--sl-surface-tint-b:rgba(15,23,42,.025);
  /* --sl-* ink. on-accent BOTH go white: every accent fill is dark on a light ground */
  --sl-text-strong:#0b1220;--sl-text:#152034;--sl-text-body:#2f3d54;--sl-text-muted:#44546c;--sl-text-dim:#4f5f78;--sl-text-faint:#57677f;--sl-text-ghost:#5c6c85;--sl-on-accent:#ffffff;--sl-on-accent-dark:#ffffff;
  /* semantic 5x3. ink=deepest (text on a tint) / base=the signal / deep=filled surface */
  --sl-accent-ink:#164e63;--sl-accent-ink-rgb:22,78,99;--sl-accent-base:#0e7490;--sl-accent-base-rgb:14,116,144;--sl-accent-deep:#155e75;--sl-accent-deep-rgb:21,94,117;--sl-success-ink:#064e3b;--sl-success-base:#047857;--sl-success-base-rgb:4,120,87;--sl-success-deep:#065f46;--sl-success-deep-rgb:6,95,70;--sl-warning-ink:#78350f;--sl-warning-ink-rgb:120,53,15;--sl-warning-base:#9a4e07;--sl-warning-base-rgb:154,78,7;--sl-warning-deep:#92400e;--sl-warning-deep-rgb:146,64,14;--sl-danger-ink:#7f1d1d;--sl-danger-base:#b91c1c;--sl-danger-base-rgb:185,28,28;--sl-danger-deep:#991b1b;--sl-danger-deep-rgb:153,27,27;--sl-info-ink:#4c1d95;--sl-info-base:#6d28d9;--sl-info-base-rgb:109,40,217;--sl-info-deep:#5b21b6;--sl-info-deep-rgb:91,33,182;
}
/* the seven stage hues — identity kept, weight re-cut for a light ground.
   They arrive as Tailwind utilities, not tokens, so they cannot be re-weighted from the
   block above; at -300/-400 they measure 1.72-3.55:1 on white. -300 carried the emphasis
   on a dark ground, so it becomes the deepest step here. */
/* SL-LIGHT-ANYALPHA: one rule per hue, matching ANY alpha step. Task 13 enumerated
   /30 /40 /50 (what colorMap emits) and the hero card's own `border-cyan-500/25` fell
   straight through it and stayed invisible. Enumerating known values was the bug; a
   substring match cannot be out-run by a step nobody predicted. Full-strength
   utilities (no slash) are excluded on purpose - they already read on white.
   Alpha is solved PER HUE to 1.80:1, so every edge carries the same weight. */
:root[data-appearance="light"] [class*="border-emerald-500/"]{border-color:rgba(4,120,87,.81)!important}
:root[data-appearance="light"] [class*="border-amber-500/"]{border-color:rgba(180,83,9,.85)!important}
:root[data-appearance="light"] [class*="border-indigo-500/"]{border-color:rgba(79,70,229,.76)!important}
:root[data-appearance="light"] [class*="border-cyan-500/"]{border-color:rgba(14,116,144,.82)!important}
:root[data-appearance="light"] [class*="border-red-500/"]{border-color:rgba(220,38,38,.81)!important}
:root[data-appearance="light"] [class*="border-violet-500/"]{border-color:rgba(124,58,237,.78)!important}
:root[data-appearance="light"] [class*="border-yellow-500/"]{border-color:rgba(161,98,7,.86)!important}
:root[data-appearance="light"] [class*="border-purple-500/"]{border-color:rgba(147,51,234,.80)!important}
:root[data-appearance="light"] [class*="border-blue-500/"]{border-color:rgba(37,99,235,.83)!important}
:root[data-appearance="light"] [class*="border-pink-500/"]{border-color:rgba(219,39,119,.85)!important}
:root[data-appearance="light"] [class*="border-green-500/"]{border-color:rgba(21,128,61,.85)!important}
:root[data-appearance="light"] [class*="border-teal-500/"]{border-color:rgba(15,118,110,.82)!important}
:root[data-appearance="light"] [class*="border-orange-500/"]{border-color:rgba(194,65,12,.82)!important}
:root[data-appearance="light"] .text-emerald-300{color:#064e3b!important}
:root[data-appearance="light"] .text-cyan-300{color:#164e63!important}
:root[data-appearance="light"] .text-amber-300{color:#78350f!important}
:root[data-appearance="light"] .text-pink-300{color:#831843!important}
:root[data-appearance="light"] .text-violet-300{color:#4c1d95!important}
:root[data-appearance="light"] .text-red-300{color:#7f1d1d!important}
:root[data-appearance="light"] .text-indigo-300{color:#312e81!important}
:root[data-appearance="light"] .text-emerald-400{color:#047857!important}
:root[data-appearance="light"] .text-cyan-400{color:#0e7490!important}
:root[data-appearance="light"] .text-amber-400{color:#9a4e07!important}
:root[data-appearance="light"] .text-pink-400{color:#be185d!important}
:root[data-appearance="light"] .text-violet-400{color:#6d28d9!important}
:root[data-appearance="light"] .text-red-400{color:#b91c1c!important}
:root[data-appearance="light"] .text-indigo-400{color:#4338ca!important}
:root[data-appearance="light"] .bg-emerald-400{background-color:#059669!important}
:root[data-appearance="light"] .bg-cyan-400{background-color:#0891b2!important}
:root[data-appearance="light"] .bg-amber-400{background-color:#b45309!important}
:root[data-appearance="light"] .bg-pink-400{background-color:#db2777!important}
:root[data-appearance="light"] .bg-violet-400{background-color:#7c3aed!important}
:root[data-appearance="light"] .bg-red-400{background-color:#dc2626!important}
:root[data-appearance="light"] .bg-indigo-400{background-color:#4f46e5!important}
/* H1 — an input has to read as an input on a near-white card: the field takes the second
   hairline weight. This is the one rule the --input-bg / --bg-card-2 split needs. */
:root[data-appearance="light"] .field-input{border-color:var(--border-light)}

/* ── The non-dark utility layer, re-keyed to the appearance axis ──────────────
   Mechanically mirrored from the 37 `[data-theme]:not([data-theme="dark"])` rules
   above (all 57 selector occurrences, no hand edits). The originals only fire when
   something has stamped data-theme; the appearance axis must not depend on that,
   because the ~40 chassis pages whose /api/page-init 404s never get it stamped and
   a user whose legacy theme IS "dark" is excluded by the :not(). Identical
   declarations, so where both match the result is the same. */
:root[data-appearance="light"] header{background:var(--header-bg)!important;border-color:var(--border)!important}
:root[data-appearance="light"] .bg-slate-950,:root[data-appearance="light"] .bg-slate-900{background:var(--bg-card)!important}
:root[data-appearance="light"] .bg-slate-800{background:var(--bg-hover)!important}
:root[data-appearance="light"] .bg-slate-950\/90,:root[data-appearance="light"] .bg-slate-950\/80{background:var(--header-bg)!important}
:root[data-appearance="light"] .bg-slate-900\/50,:root[data-appearance="light"] .bg-slate-900\/30,:root[data-appearance="light"] .bg-slate-800\/50,:root[data-appearance="light"] .bg-slate-800\/70{background:var(--bg-card-2)!important}
:root[data-appearance="light"] .border-slate-800,:root[data-appearance="light"] .border-slate-800\/50,:root[data-appearance="light"] .border-slate-700,:root[data-appearance="light"] .border-slate-700\/50{border-color:var(--border)!important}
:root[data-appearance="light"] .text-white{color:var(--text)!important}
:root[data-appearance="light"] .text-slate-200,:root[data-appearance="light"] .text-slate-300{color:var(--text)!important}
:root[data-appearance="light"] .text-slate-400{color:var(--text-muted)!important}
:root[data-appearance="light"] .text-slate-500{color:var(--text-dim)!important}
:root[data-appearance="light"] .text-slate-600,:root[data-appearance="light"] .text-slate-700{color:var(--text-faint)!important}
:root[data-appearance="light"] .hover\:bg-slate-800:hover,:root[data-appearance="light"] .hover\:bg-slate-800\/50:hover{background:var(--bg-hover)!important}
:root[data-appearance="light"] #user-dropdown,:root[data-appearance="light"] #project-menu{background:var(--bg-card)!important;border-color:var(--border)!important}
:root[data-appearance="light"] #user-dropdown .border-slate-800,:root[data-appearance="light"] #user-dropdown .border-b{border-color:var(--border)!important}
:root[data-appearance="light"] #user-dropdown .bg-gradient-to-r{background:var(--bg-card-2)!important}
:root[data-appearance="light"] #user-dropdown .text-slate-500,:root[data-appearance="light"] #user-dropdown .text-\[11px\]{color:var(--text-dim)!important}
:root[data-appearance="light"] #user-dropdown .text-slate-300{color:var(--text)!important}
:root[data-appearance="light"] #user-dropdown .hover\:bg-slate-800:hover{background:var(--bg-hover)!important}
:root[data-appearance="light"] #user-dropdown .hover\:text-cyan-400:hover{color:var(--accent)!important}
:root[data-appearance="light"] .modal-backdrop{background:rgba(0,0,0,.5)!important}
:root[data-appearance="light"] .settings-sidebar{background:var(--bg-card)!important;border-color:var(--border)!important}
:root[data-appearance="light"] .settings-sidebar button{color:var(--text-muted)!important}
:root[data-appearance="light"] .settings-sidebar button:hover{background:var(--bg-hover)!important;color:var(--text)!important}
:root[data-appearance="light"] .settings-sidebar button.active-section{background:var(--bg-hover)!important;color:var(--accent)!important;border-color:var(--accent)!important}
:root[data-appearance="light"] .right-sidebar{background:var(--bg-card)!important;border-color:var(--border)!important}
:root[data-appearance="light"] .sl-fd-empty,:root[data-appearance="light"] .sl-fd-restricted,:root[data-appearance="light"] .sl-fd-card,:root[data-appearance="light"] .sl-fd-progress-card{background:var(--bg-card)!important;border-color:var(--border)!important}
:root[data-appearance="light"] .sl-fd-empty-title,:root[data-appearance="light"] .sl-fd-restricted-title{color:var(--text)!important}
:root[data-appearance="light"] .sl-fd-metric-label{color:var(--text)!important}
:root[data-appearance="light"] .sl-fd-metric-value{color:var(--text)!important}
:root[data-appearance="light"] .sl-fd-modal-box{background:var(--bg-card)!important;border-color:var(--border)!important}
:root[data-appearance="light"] .sl-fd-modal-section{background:var(--bg-hover)!important;border-color:var(--border)!important}
:root[data-appearance="light"] .sl-fd-field input,:root[data-appearance="light"] .sl-fd-field select{background:var(--bg)!important;border-color:var(--border)!important;color:var(--text)!important}
:root[data-appearance="light"] .sl-fd-help{color:var(--text-faint)!important}
:root[data-appearance="light"] .sl-fd-help:hover,:root[data-appearance="light"] .sl-fd-help:focus{color:var(--accent)!important;background:rgba(6,182,212,.08)!important}
:root[data-appearance="light"] .sl-fd-tip-popup{background:var(--bg-card)!important;color:var(--text)!important;border-color:var(--border)!important;box-shadow:0 10px 25px rgba(0,0,0,.08)!important}
:root[data-appearance="light"] .sl-fd-tip-popup.sl-fd-tip-below::before{border-bottom-color:var(--border)!important}
:root[data-appearance="light"] .sl-fd-tip-popup.sl-fd-tip-above::before{border-top-color:var(--border)!important}

/* ── Dark-era hardcoded literals that no token can reach ─────────────────────
   These components were authored with hex literals rather than tokens, so the
   block above cannot re-colour them: on a white page they stayed dark slabs.
   Light-only overrides; 54 ink/ground pairs measured, minimum 4.81:1. */
:root[data-appearance="light"] .field-input:focus{border-color:#0e7490}
:root[data-appearance="light"] .sl-fd-health-header{color:#44546c}
:root[data-appearance="light"] .sl-fd-stage-early{background:rgba(14,116,144,.1);color:#164e63;border-color:rgba(14,116,144,.3)}
:root[data-appearance="light"] .sl-fd-stage-growth{background:rgba(109,40,217,.1);color:#4c1d95;border-color:rgba(109,40,217,.3)}
:root[data-appearance="light"] .sl-fd-stage-scale{background:rgba(4,120,87,.1);color:#064e3b;border-color:rgba(4,120,87,.3)}
:root[data-appearance="light"] .sl-fd-trend-good{color:#047857}
:root[data-appearance="light"] .sl-fd-trend-bad{color:#b91c1c}
:root[data-appearance="light"] .sl-fd-trend-neutral{color:#57677f}
:root[data-appearance="light"] .sl-fd-quick-input{background:#edf2f8;border-color:var(--border-light);color:#0f172a}
:root[data-appearance="light"] .sl-fd-quick-input:focus{border-color:#0e7490;box-shadow:0 0 0 2px rgba(14,116,144,.18)}
:root[data-appearance="light"] .sl-fd-edit-btn{background:#f2f5fa;border-color:var(--border);color:#2f3d54}
:root[data-appearance="light"] .sl-fd-edit-btn:hover{background:rgba(14,116,144,.07);border-color:rgba(14,116,144,.32);color:#0e7490}
:root[data-appearance="light"] .sl-ps-card{background:linear-gradient(180deg,rgba(14,116,144,.05),rgba(255,255,255,0) 54px),#ffffff;border-color:var(--border)}
:root[data-appearance="light"] .sl-ps-card::before{border-top-color:rgba(14,116,144,.45);border-inline-start-color:rgba(14,116,144,.45)}
:root[data-appearance="light"] .sl-ps-count{color:#57677f}
:root[data-appearance="light"] .sl-ps-title{color:#0b1220;border-bottom-color:var(--border);text-shadow:none}
:root[data-appearance="light"] .sl-ps-lbl{color:#44546c}
:root[data-appearance="light"] .sl-ps-val{color:#152034}
:root[data-appearance="light"] .sl-ps-group,:root[data-appearance="light"] .sl-ps-group[data-cat="build"]{color:#0e7490}
:root[data-appearance="light"] .sl-ps-group[data-cat="custs"]{color:#6d28d9}
:root[data-appearance="light"] .sl-ps-group[data-cat="money"]{color:#047857}
:root[data-appearance="light"] .sl-ps-group[data-cat="stage"]{color:#9a4e07}
:root[data-appearance="light"] .sl-ps-group[data-cat="strat"]{color:#be185d}
:root[data-appearance="light"] .sl-ps-group[data-cat="other"]{color:#4f5f78}
:root[data-appearance="light"] .sl-ps-group[data-cat="build"] .sl-ps-val,:root[data-appearance="light"] .sl-ps-group[data-cat="custs"] .sl-ps-val,:root[data-appearance="light"] .sl-ps-group[data-cat="money"] .sl-ps-val,:root[data-appearance="light"] .sl-ps-group[data-cat="stage"] .sl-ps-val,:root[data-appearance="light"] .sl-ps-group[data-cat="strat"] .sl-ps-val{color:#152034}
:root[data-appearance="light"] .sl-ph-card{background:#ffffff;border-color:var(--border)}
:root[data-appearance="light"] .sl-ph-head i{color:#be185d;filter:none}
:root[data-appearance="light"] .sl-ph-head span[data-i18n="ph_title"]{color:#4f5f78}
:root[data-appearance="light"] .sl-ph-track{border-color:var(--border-light)}
:root[data-appearance="light"] .sl-ph-mask{background:rgba(237,242,248,.94)}
:root[data-appearance="light"] .sl-ph-pct{color:#152034}
:root[data-appearance="light"] .sl-ph-btn{color:#0e7490;background:rgba(14,116,144,.08);border-color:rgba(14,116,144,.3)}
:root[data-appearance="light"] .sl-ph-btn:hover{background:rgba(14,116,144,.14);border-color:rgba(14,116,144,.45);color:#155e75}
:root[data-appearance="light"] .sl-ph-tips{border-top-color:var(--border)}
:root[data-appearance="light"] .sl-ph-tips-h{color:#4f5f78}
:root[data-appearance="light"] .sl-ph-tip{color:#2f3d54}
:root[data-appearance="light"] .sl-ph-tip::before{color:#0e7490}
:root[data-appearance="light"] .sl-fd-quote-details{background:#f2f5fa;border-color:var(--border)}
:root[data-appearance="light"] .sl-fd-quote-details[open]{background:#ffffff;border-color:var(--border)}
:root[data-appearance="light"] .sl-fd-quote-details[open] .sl-fd-quote-summary{color:#4f5f78;border-bottom-color:var(--border)}
:root[data-appearance="light"] .sl-fd-modal-close{color:#44546c}
:root[data-appearance="light"] .sl-fd-modal-close:hover{background:rgba(185,28,28,.08);color:#b91c1c}
:root[data-appearance="light"] .sl-fd-modal-cancel{border-color:var(--border-light);color:#2f3d54}
:root[data-appearance="light"] .sl-fd-modal-cancel:hover{background:#e8eef6}
:root[data-appearance="light"] .sl-fd-modal-preview{background:#f2f5fa;border-color:var(--border)}
:root[data-appearance="light"] .sl-fd-modal-preview h3{color:#152034}
:root[data-appearance="light"] .sl-fd-modal-preview h3 i{color:#0e7490}
:root[data-appearance="light"] .sl-fd-preview-score{background:#ffffff;border-color:var(--border)}
:root[data-appearance="light"] .sl-fd-preview-score-label{color:#44546c}
:root[data-appearance="light"] .sl-fd-modal-section h3{color:#152034}
:root[data-appearance="light"] .sl-fd-preview-row{background:#f2f5fa}
:root[data-appearance="light"] .sl-fd-preview-row span{color:#44546c}
:root[data-appearance="light"] .sl-fd-preview-row strong{color:#152034}
:root[data-appearance="light"] .sl-fd-empty-icon,:root[data-appearance="light"] .sl-ps-head i,:root[data-appearance="light"] .sl-fd-modal-header h2 i,:root[data-appearance="light"] .sl-fd-quick-edit-btn:hover{color:#0e7490}
:root[data-appearance="light"] .sl-fd-quick-ok{color:#047857}
:root[data-appearance="light"] .sl-fd-quick-cancel:hover{color:#b91c1c}
:root[data-appearance="light"] .sl-fd-restricted-icon{color:#44546c}
:root[data-appearance="light"] .sl-fd-quote-summary:hover{color:#44546c}
:root[data-appearance="light"] .sl-fd-field > span{color:#44546c}

/* ── The Appearance control itself ────────────────────────────────────────────
   The ONLY rules in this append that are not gated on the attribute — they have
   to render in both appearances. They are safe by construction rather than by
   assertion: `sl-ap` did not occur anywhere in the corpus before this change
   (0 hits across the 79 page files, common.js and common.css), so no existing
   element can match them. It reads its colours from the tokens, so it is correct
   in dark, in light, and under any legacy theme still stamped. */
.sl-ap{display:flex;gap:6px}
.sl-ap-opt{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:7px 10px;border-radius:9px;border:1px solid var(--border,#1c2a45);background:transparent;color:var(--text-muted,#94a3b8);font-family:inherit;font-size:11px;font-weight:700;line-height:1;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.sl-ap-opt i{font-size:11px}
.sl-ap-opt:hover{color:var(--text,#e2e8f0);border-color:var(--border-light,#1e293b)}
.sl-ap-opt.sl-ap-on{background:var(--badge-bg,rgba(34,211,238,.1));border-color:var(--badge-border,rgba(34,211,238,.3));color:var(--badge-text,#22d3ee)}
.sl-ap-opt:focus-visible{outline:2px solid var(--accent,#22d3ee);outline-offset:2px}

/* ══════════════════════════════════════════════════════════════════════════════
   LIGHT — SWEEP 2.  Twenty fixes for 252 measured light-mode defects.

   EVERY selector below is gated on :root[data-appearance="light"]. Nothing here
   matches a dark document, so dark rendering stays byte-identical — the same
   invariant the block above relies on.

   `!important` throughout is deliberate, not laziness: page-owned <style> blocks
   are emitted AFTER common.css, several page rules already carry !important, and
   a number of the colours being corrected are INLINE styles written by JS
   (common.js project-health, _my-projects.html card renderer). Selector weight
   alone loses those races. !important inside a light-gated selector is still
   100% dark-safe.

   Palette is the one declared above: ground --bg, card --bg-card, well
   --bg-card-2, hairline --border, ink --sl-text-*, one accent --accent /
   --accent-light. Colour appears only where it carries meaning.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── TOKENS ── four token corrections, all light-only.
   --bg-card-alt is referenced by /interviews (.iv-input) and is declared in NO
   stylesheet at all, so the fallback #020617 painted a near-black field under
   near-black ink. Declaring it is the whole fix.
   --border/--border-light: OWNED by the SL-LIGHT-FIRM3 block above - a second
   !important copy that used to live here silently vetoed three rounds of border
   darkening (SL-LIGHT-ONEOWNER). One owner per token.
   --grid-color drops the ruled lattice to a whisper (dark-theme texture, works
   against "much white and much simple").
   --bg neutralises the cool cast: the old #f4f7fb ran blue +7 over red against
   pure-white cards, so the page read tinted rather than white. */
:root[data-appearance="light"]{
  --bg-card-alt:#f2f5fa!important;
  --grid-color:rgba(15,23,42,.016)!important;
  --bg:#f6f8fa!important;--sl-bg:#f6f8fa!important;
}

/* ── 1. the Tailwind slate gap ────────────────────────────────────────────────
   The block above enumerates a fixed list of slate utilities. Every alpha step
   and every GRADIENT-STOP utility outside that list still resolved dark — which
   is why the dashboard hero was a black slab carrying black text (1.05:1, zero
   glyph pixels). Gradient stops must land on the same surfaces the solid
   utilities already land on. Alpha slabs become the recessed well, not mud. */
:root[data-appearance="light"] .from-slate-950,
:root[data-appearance="light"] .from-slate-900,
:root[data-appearance="light"] .via-slate-950,
:root[data-appearance="light"] .via-slate-900,
:root[data-appearance="light"] .to-slate-950,
:root[data-appearance="light"] .to-slate-900,
:root[data-appearance="light"] .to-slate-800{
  --tw-gradient-from:var(--bg-card)!important;
  --tw-gradient-via:var(--bg-card)!important;
  --tw-gradient-to:var(--bg-card)!important;
  background-image:none!important;
  background-color:var(--bg-card)!important;
  border-color:var(--border)!important;
}
:root[data-appearance="light"] .bg-slate-950\/70,
:root[data-appearance="light"] .bg-slate-950\/50,
:root[data-appearance="light"] .bg-slate-950\/40,
:root[data-appearance="light"] .bg-slate-900\/80,
:root[data-appearance="light"] .bg-slate-900\/60,
:root[data-appearance="light"] .bg-slate-900\/40,
:root[data-appearance="light"] .bg-slate-800\/60,
:root[data-appearance="light"] .bg-slate-800\/40,
:root[data-appearance="light"] .bg-slate-800\/30,
:root[data-appearance="light"] .bg-slate-700\/60,
:root[data-appearance="light"] .bg-slate-700\/40,
:root[data-appearance="light"] .bg-slate-700,
:root[data-appearance="light"] .bg-slate-800\/80{
  background:var(--bg-card-2)!important;border-color:var(--border)!important;
}
:root[data-appearance="light"] .hover\:bg-slate-800\/60:hover,
:root[data-appearance="light"] .hover\:bg-slate-800\/40:hover,
:root[data-appearance="light"] .hover\:bg-slate-900\/60:hover,
:root[data-appearance="light"] .hover\:bg-slate-800\/70:hover,
:root[data-appearance="light"] .hover\:bg-slate-700:hover{background:var(--bg-hover)!important}
:root[data-appearance="light"] .border-slate-800\/60,
:root[data-appearance="light"] .border-slate-800\/70,
:root[data-appearance="light"] .border-slate-900,
:root[data-appearance="light"] .border-slate-950{border-color:var(--border)!important}
:root[data-appearance="light"] .text-slate-950{color:var(--text)!important}
:root[data-appearance="light"] .text-cyan-500{color:var(--sl-accent-base)!important}
:root[data-appearance="light"] .text-violet-300\/80{color:var(--sl-info-ink)!important}
:root[data-appearance="light"] .text-cyan-400\/90{color:var(--sl-accent-ink)!important}
:root[data-appearance="light"] .text-emerald-300\/80,
:root[data-appearance="light"] .text-amber-300\/80{color:var(--sl-text-muted)!important}
/* The eight identity discs (header, user menu, settings, Q&A) are all
   `rounded-full bg-gradient-to-br from-cyan-*` and would otherwise be caught by
   the rule above and painted white-on-white. An avatar is a FILLED disc: solid
   accent, white initial (7.47:1). One rule, all eight, one look. */
:root[data-appearance="light"] .rounded-full.bg-gradient-to-br[class*="from-cyan-"]{
  background-image:none!important;background-color:var(--accent)!important;
  border-color:transparent!important;color:#fff!important}
:root[data-appearance="light"] .rounded-full.bg-gradient-to-br[class*="from-cyan-"] span,
:root[data-appearance="light"] .rounded-full.bg-gradient-to-br[class*="from-cyan-"] i{color:#fff!important}

/* ── 2. the pathway funnel — the question text itself ─────────────────────────
   .qtitle{color:#fff} on a white card is 1.00:1: the founder saw a badge, a hint
   and an input, and a blank gap where the question should be. The locked/dim
   state MUTES rather than fades — on a light ground opacity subtracts contrast
   instead of adding recession. */
:root[data-appearance="light"] .qcard .qtitle,
:root[data-appearance="light"] .qtitle{color:var(--sl-text-strong)!important;-webkit-text-fill-color:currentColor!important}
:root[data-appearance="light"] .qcard input,
:root[data-appearance="light"] .qcard textarea,
:root[data-appearance="light"] #anon-q1-input{background:var(--input-bg)!important;color:var(--text)!important;border-color:var(--border-light)!important}
:root[data-appearance="light"] .qcard input::placeholder,
:root[data-appearance="light"] .qcard textarea::placeholder,
:root[data-appearance="light"] #anon-q1-input::placeholder{color:var(--sl-text-faint)!important;opacity:1!important}
:root[data-appearance="light"] .pstage{background:var(--bg-card)!important;border-color:var(--border)!important}
:root[data-appearance="light"] .pstage .pstage-h{color:var(--sl-text-strong)!important}
:root[data-appearance="light"] .pstage .tool .tool-icon,
:root[data-appearance="light"] .pstage .tool .tool-label{opacity:1!important;color:var(--sl-text-faint)!important}
:root[data-appearance="light"] .pstage .tool.done .tool-label{color:var(--sl-success-ink)!important}
:root[data-appearance="light"] #pathway-headline,
:root[data-appearance="light"] #pathway-msg{color:var(--sl-text-body)!important}
:root[data-appearance="light"] #pathway-headline strong{color:var(--sl-text-strong)!important}
:root[data-appearance="light"] .pathway-unlock-link{color:var(--accent)!important;text-decoration:underline!important}
:root[data-appearance="light"] .preview-banner-title{color:var(--sl-text-strong)!important}
:root[data-appearance="light"] .preview-banner-sub{color:var(--sl-text-muted)!important}
:root[data-appearance="light"] #pathway-wrap{background:var(--bg)!important}

/* ── 3. the chat landing (/start, and / logged-out) ───────────────────────────
   _start.html declares its own --sc-* block with hardcoded dark values on
   `.sc-body`, so a light page rendered a navy rail and a navy composer floating
   on near-white with a white wordmark on top. Re-declaring the surface and ink
   tokens fixes the rail, the composer, the conversation rows and the base ink in
   one move — every downstream .sc-* rule already reads them.

   The `.sc-body` qualifier is required, not belt-and-braces: the page sets these
   on the BODY ELEMENT itself, so a :root declaration would never be inherited.

   --sc-on is deliberately NOT re-declared. It is ink on the saturated signal
   fills (--sc-cy-f/--sc-ro-f/--sc-em-f/--sc-am-f) and its dark value is already
   8-10:1 on every one of them; flipping it to white would have taken the amber
   pill to 2.0:1. It is correct in both appearances as it stands. */
:root[data-appearance="light"],
:root[data-appearance="light"] .sc-body{
  --sc-furn:#ffffff!important;--sc-bg:#f6f8fa!important;--sc-card:#ffffff!important;
  --sc-card2:#f2f5fa!important;--sc-hair:#d3dce8!important;
  /* second stops of the two /start gradients, now tokenised at the source */
  --sc-eval2:#f2f5fa!important;--sc-shim:#e8eef6!important;
  /* the two signal inks that measured under the floor on white */
  --sc-cy2:#0e7490!important;--sc-ro2:#be123c!important;
  --sc-ink:#0f172a!important;--sc-ink2:#44546c!important;--sc-ink3:#57677f!important;
}
:root[data-appearance="light"] #sc-side,
:root[data-appearance="light"] #sc-form{background:var(--bg-card)!important;border-color:var(--border)!important}
:root[data-appearance="light"] .sc-conv-row{background:transparent!important;color:var(--sl-text-body)!important}
:root[data-appearance="light"] .sc-conv-row.on{background:var(--bg-hover)!important;color:var(--text)!important}
:root[data-appearance="light"] .sc-wordmark,
:root[data-appearance="light"] .sc-empty-h{color:var(--sl-text-strong)!important;-webkit-text-fill-color:currentColor!important}
:root[data-appearance="light"] .sc-msg,
:root[data-appearance="light"] .sc-turn.ai .sc-msg,
:root[data-appearance="light"] .sc-turn.ask .sc-msg{color:var(--sl-text-body)!important}
:root[data-appearance="light"] .sc-turn.me .sc-msg{background:rgba(109,40,217,.10)!important;color:var(--sl-info-ink)!important}
:root[data-appearance="light"] .sc-who-n,
:root[data-appearance="light"] .sc-turn.ask .sc-who-n{color:var(--sl-text-muted)!important}
:root[data-appearance="light"] #sc-form textarea{background:transparent!important;color:var(--text)!important}
/* the language menu row hardcodes #fff on hover, which only worked while the
   hover surface was navy. It is now the light well. */
:root[data-appearance="light"] .sc-lang-row:hover{color:var(--text)!important}

/* ── 4. /roast — the punchline was invisible ──────────────────────────────────
   #rs-headline was #fff on a white card (1.00:1) and the 60px H1 1.07:1. The H1
   also carries an inline cyan/violet glow text-shadow: harmless on black, a
   coloured smudge on white, and squarely against "no much color effects".
   The two primary CTAs collapse onto the single accent ramp, which also settles
   the "two different primary languages on one journey" inconsistency. */
:root[data-appearance="light"] .rs-page-header,
:root[data-appearance="light"] #rs-headline{color:var(--sl-text-strong)!important;-webkit-text-fill-color:currentColor!important;text-shadow:none!important}
:root[data-appearance="light"] #rs-roast-body{color:var(--sl-text-body)!important}
:root[data-appearance="light"] .rs-verdict{background:rgba(109,40,217,.06)!important;border-color:var(--border)!important}
:root[data-appearance="light"] #rs-verdict-text,
:root[data-appearance="light"] .rs-verdict .font-bold{color:var(--sl-text-strong)!important}
:root[data-appearance="light"] #rs-gate-options .rs-alt-btn,
:root[data-appearance="light"] #rs-gate-options .rs-skip-link,
:root[data-appearance="light"] .rs-btn-ghost{color:var(--sl-text-body)!important;background:var(--bg-card)!important;border-color:var(--border-light)!important}
:root[data-appearance="light"] .ai-loading-card .ai-status{color:var(--sl-text-muted)!important}
:root[data-appearance="light"] .rs-share-btn{background:var(--bg-card)!important;border-color:var(--border-light)!important;color:var(--sl-text-body)!important}
:root[data-appearance="light"] .rs-battle-cta .text-rose-400{color:var(--sl-danger-base)!important}
:root[data-appearance="light"] #rs-submit-btn,
:root[data-appearance="light"] #rs-signup-gate .rs-btn,
:root[data-appearance="light"] #rs-cta-btn{
  background:linear-gradient(90deg,var(--accent),var(--accent-light))!important;color:#fff!important;border:0!important}

/* ── 5. the shared AI result renderer .rr-* — 8 pages ─────────────────────────
   An identical 10,799-byte <style> block duplicated into hospital_procurement,
   industry_channels, intl_expansion, investor_pitch_deck, marketing_strategy_deck,
   marketplace_engine, nabc_framework and operations: 67 rules, 47 hardcoded dark
   ink literals, zero light overrides. Every heading was 1.07:1, every body line
   1.38:1 — the whole answer blank. */
:root[data-appearance="light"] .rr-big,
:root[data-appearance="light"] .rr-headline,
:root[data-appearance="light"] .rr-channel-head,
:root[data-appearance="light"] .rr-layer-name,
:root[data-appearance="light"] .rr-layer-rec-val,
:root[data-appearance="light"] .rr-deck-name,
:root[data-appearance="light"] .rr-list-head,
:root[data-appearance="light"] .rr-mx-title{color:var(--sl-text-strong)!important}
:root[data-appearance="light"] .rr-headline{background:linear-gradient(135deg,var(--surface-tint-a),transparent)!important}
:root[data-appearance="light"] .rr-section-body,
:root[data-appearance="light"] .rr-funnel-lever,
:root[data-appearance="light"] .rr-deck-what,
:root[data-appearance="light"] .rr-cap-stat,
:root[data-appearance="light"] .rr-list-desc,
:root[data-appearance="light"] .rr-list-metric,
:root[data-appearance="light"] .rr-mx-body{color:var(--sl-text-body)!important}
:root[data-appearance="light"] .rr-mute,
:root[data-appearance="light"] .rr-channel-why,
:root[data-appearance="light"] .rr-layer-alts{color:var(--sl-text-muted)!important}

/* ── 6. the chassis shell (page-chassis.js) — 27 pages ────────────────────────
   page-chassis.js contains zero occurrences of data-appearance. Its project menu
   was a black rectangle with near-black ink in it (1.06:1); "What we know about
   your project" was a 1067x117 grey-blue slab at L=0.257 where a white card
   belongs, dragging four child texts under AA with it; its hairlines composited
   to 1.03:1 and were simply gone. The panel is the largest content surface on the
   page, so turning it into a white card with a real hairline is the single
   biggest win against the brief here — and it repairs its children for free. */
:root[data-appearance="light"] .kc-card,
:root[data-appearance="light"] #sl-kc-card{
  background:var(--bg-card)!important;background-image:none!important;
  border:1px solid var(--border)!important;box-shadow:0 1px 2px rgba(15,23,42,.04)!important}
:root[data-appearance="light"] .kc-head-title,
:root[data-appearance="light"] .kc-head-icon{color:var(--accent)!important}
:root[data-appearance="light"] .kc-head-sub,
:root[data-appearance="light"] .kc-empty,
:root[data-appearance="light"] .kc-row-label,
:root[data-appearance="light"] .kc-group-head{color:var(--sl-text-muted)!important}
/* SL-KC-ONELINE: the value takes the STRONGEST ink here. Against the label's
   --sl-text-muted, the old --sl-text-body was a neighbouring grey, so light theme lost
   the emphasis dark theme had - the exact reason the card read worse in light. */
:root[data-appearance="light"] .kc-row-val{color:var(--text)!important}
:root[data-appearance="light"] .sl-context-toggle,
:root[data-appearance="light"] .sl-context-panel,
:root[data-appearance="light"] .sl-context-card.open .sl-context-panel{
  background:var(--bg-card-2)!important;border-color:var(--border-light)!important;color:var(--sl-text-body)!important}
:root[data-appearance="light"] .sl-context-toggle-tag{background:var(--badge-bg)!important;color:var(--badge-text)!important}
:root[data-appearance="light"] .sl-context-toggle-chev,
:root[data-appearance="light"] .sl-context-toggle-icon{color:var(--sl-text-muted)!important}
:root[data-appearance="light"] .sl-proj-pill{
  background:var(--bg-card)!important;background-image:none!important;
  border:1px solid var(--border)!important}
:root[data-appearance="light"] .sl-proj-name{color:var(--text)!important}
:root[data-appearance="light"] .sl-proj-chev{color:var(--sl-text-muted)!important}
:root[data-appearance="light"] .sl-proj-icon{color:var(--accent)!important}
:root[data-appearance="light"] .sl-proj-menu{
  background:var(--bg-card)!important;border-color:var(--border)!important;
  box-shadow:0 8px 24px rgba(15,23,42,.10)!important}
:root[data-appearance="light"] .sl-proj-menu *{color:var(--text)!important}
:root[data-appearance="light"] .sl-bottom-nav-btn,
:root[data-appearance="light"] .sl-next-btn,
:root[data-appearance="light"] .preview-banner-btn.ghost,
:root[data-appearance="light"] #sl-next-step-actions .sl-next-btn{
  background:var(--bg-card)!important;border:1px solid var(--border-light)!important;color:var(--sl-text-body)!important}
:root[data-appearance="light"] .sl-bottom-nav-btn i,
:root[data-appearance="light"] .sl-next-btn i{color:var(--accent)!important}
:root[data-appearance="light"] .sl-bottom-nav-btn.primary{
  background:linear-gradient(90deg,var(--accent),var(--accent-light))!important;border:0!important;color:#fff!important}
:root[data-appearance="light"] .sl-result-head-title,
:root[data-appearance="light"] .sl-next-title{color:var(--sl-text-strong)!important}
:root[data-appearance="light"] .sl-result-rerun{color:var(--accent)!important}
/* .sl-eyebrow: the per-page hue (emerald/amber/rose) is decorative, not semantic
   — it says nothing about state — so all of them collapse to the one accent
   badge. That is "colour only where it carries meaning", and it clears all three
   measured failures (1.33 / 1.47 / 1.60:1) with a single rule. */
:root[data-appearance="light"] .sl-eyebrow{
  background:var(--badge-bg)!important;color:var(--badge-text)!important;border-color:var(--badge-border)!important}

/* ── 7. text inputs painting white-on-white — 7 pages ─────────────────────────
   market_sizing, mvp_builder, kol_interviews, lab_to_market, location_strategy
   and partnership_playbook all hardcode color:#fff over var(--bg-card-2), i.e.
   #ffffff on #f2f5fa = 1.09:1. /interviews was worse: .iv-input reads
   var(--bg-card-alt,#020617) and that token existed in no stylesheet, so the
   field painted near-black under near-black ink (1.13:1). The token is declared
   at the top of this sweep. */
:root[data-appearance="light"] .ms-input,
:root[data-appearance="light"] .mvp-textarea,
:root[data-appearance="light"] .kol-input,:root[data-appearance="light"] .kol-select,:root[data-appearance="light"] .kol-textarea,
:root[data-appearance="light"] .ltm-input,:root[data-appearance="light"] .ltm-select,:root[data-appearance="light"] .ltm-textarea,
:root[data-appearance="light"] .ls-input,:root[data-appearance="light"] .ls-select,
:root[data-appearance="light"] .pp-input,:root[data-appearance="light"] .pp-select,:root[data-appearance="light"] .pp-textarea,
:root[data-appearance="light"] .iv-input{
  background:var(--input-bg)!important;color:var(--text)!important;border-color:var(--border-light)!important}

/* ── 8. /my-projects — the card interior is JS-written INLINE style ───────────
   500+ elements: every step name, all seven stage labels, the Team button, the
   member rows, the FREE badge, the gradient-clipped title, the amber CTA. The
   colours are written as inline styles by the renderer in _my-projects.html, so
   no token and no utility can reach them — only !important can.

   The selectors are pinned to what the renderer actually emits (verified against
   the live file), NOT to a broad catch-all: a `.p-5 span` sweep would have
   flattened the semantic progress percentage and repainted the Launch label. */
:root[data-appearance="light"] .proj-name{
  background:none!important;-webkit-text-fill-color:var(--sl-text-strong)!important;color:var(--sl-text-strong)!important}
/* stage headings, member name + role rows, locked-step labels */
:root[data-appearance="light"] #projects-grid .section-card .p-5 > div > div > span{color:var(--sl-text-strong)!important}
/* the two step-name inks the renderer hardcodes: pending #8496ad (2.9:1) and
   done #7c8ba1 (3.3:1). The "next" step keeps var(--accent) and is already 7.5:1. */
:root[data-appearance="light"] #projects-grid .section-card .p-5 a span[style*="#8496ad"]{color:var(--sl-text-body)!important}
:root[data-appearance="light"] #projects-grid .section-card .p-5 a span[style*="#7c8ba1"]{color:var(--sl-text-muted)!important}
/* the Team button — the only classless <button> in the top action row, so edit
   (.btn-outline) and delete (.btn-danger) keep their own identities */
:root[data-appearance="light"] #projects-grid .section-card .p-5 > .flex.items-center.gap-2.mb-3 > button:not([class]){
  background:var(--badge-bg)!important;background-image:none!important;
  color:var(--badge-text)!important;border:1px solid var(--badge-border)!important}
:root[data-appearance="light"] .tier-badge-free{
  background:var(--bg-card-2)!important;border-color:var(--border-light)!important;color:var(--sl-text-muted)!important}
/* the Upgrade CTA. Pinned by href because the Launch button carries
   .no-underline too and must NOT turn amber. */
:root[data-appearance="light"] #projects-grid .section-card a.no-underline[href="/pricing"]{
  background:linear-gradient(180deg,var(--sl-warning-base),var(--sl-warning-deep))!important;color:#fff!important;box-shadow:none!important}
/* the Launch CTA joins the one accent ramp like every other primary control */
:root[data-appearance="light"] #projects-grid .section-card a[class*="from-cyan-500"]{
  background-image:linear-gradient(90deg,var(--accent),var(--accent-light))!important;color:#fff!important;box-shadow:none!important}
:root[data-appearance="light"] #projects-grid .section-card a[class*="from-cyan-500"] span,
:root[data-appearance="light"] #projects-grid .section-card a[class*="from-cyan-500"] i{color:#fff!important}
/* member avatar discs — inline background is a dark-theme 300/400 hue and the
   initial is inline color:var(--bg-card), i.e. WHITE on a pale hue in light */
:root[data-appearance="light"] #projects-grid .section-card .p-5 > div[style*="flex-direction:column"] > div > div{
  background:var(--sl-accent-base)!important;color:#fff!important}

/* ── 9. /founders ─────────────────────────────────────────────────────────────
   Every @handle was #fff on white (1.00:1). The H1 is gradient text whose FIRST
   stop is pure white, so the leading half of the headline faded to nothing —
   the same trap on /launchpad, /launchpad_project and /roast_battle, all of
   which start their gradient at white and are corrected by the same rule. */
:root[data-appearance="light"] .fl-handle{color:var(--sl-text-strong)!important;-webkit-text-fill-color:currentColor!important}
:root[data-appearance="light"] h1.font-display{
  background:none!important;-webkit-text-fill-color:var(--sl-text-strong)!important;color:var(--sl-text-strong)!important}
:root[data-appearance="light"] .fl-num,
:root[data-appearance="light"] .fl-rank.silver{color:var(--sl-text-strong)!important}
:root[data-appearance="light"] .fl-rank.gold{color:var(--sl-warning-base)!important}
:root[data-appearance="light"] .fl-row{background:var(--bg-card)!important;border-color:var(--border)!important}
:root[data-appearance="light"] #fl-sort-bar{background:var(--bg-card-2)!important;border:1px solid var(--border)!important}
:root[data-appearance="light"] .fl-sort-btn{color:var(--sl-text-muted)!important}
:root[data-appearance="light"] .fl-sort-btn.active{background:var(--accent)!important;background-image:none!important;color:#fff!important}

/* ── 10. the inspirational quote — 17 pages ───────────────────────────────────
   .iq-body at 1.26-1.38:1 meant only the gradient-highlighted phrases survived,
   so the quote rendered as fragments: "and , you won't the outcome of ." */
:root[data-appearance="light"] .iq-body{color:var(--sl-text-body)!important}
:root[data-appearance="light"] .iq-mute,
:root[data-appearance="light"] .iq-attr{color:var(--sl-text-muted)!important}

/* ── 11. /company_profile + /document_center panels ───────────────────────────
   Two more page-owned rgba(15,23,42,.5)/.55 slabs painting L=0.24 / L=0.20, with
   a 1.28:1 CTA link and 1.32:1 hints sunk into them. */
:root[data-appearance="light"] .cp-sections-card,
:root[data-appearance="light"] #dc-noproject{
  background:var(--bg-card)!important;background-image:none!important;
  border:1px solid var(--border)!important;color:var(--sl-text-body)!important}
:root[data-appearance="light"] #dc-noproject a.text-cyan-400{color:var(--accent)!important;text-decoration:underline!important}
:root[data-appearance="light"] .cp-aud-lbl{color:var(--sl-text-body)!important}
:root[data-appearance="light"] #cp-aud-hint,
:root[data-appearance="light"] .cp-sec-tag,
:root[data-appearance="light"] .cp-sec-chev{color:var(--sl-text-muted)!important}

/* ── 12. every filled control — the .text-white inversion trap ────────────────
   The block above sets .text-white{color:var(--text)}. That is right on a white
   ground and WRONG on every saturated fill, which is how the multi_unit_expansion
   buttons ended up near-black-on-indigo at 3.01:1. Separately, every accent
   gradient kept a LIGHT stop while the ink stayed white: header Menu 2.43:1,
   .btn-primary 3.81:1, #doc-center-link 3.10:1, .sl-analyze-btn 2.67:1,
   .btn-nav-primary 2.67:1, MOST POPULAR 2.67:1.

   In light, an accent fill must be DARK and its ink WHITE — which is exactly what
   --sl-on-accent:#ffffff already declares. Every gradient's lightest stop is now
   --accent-light #0369a1, so white ink holds at >=5.95:1 across the WHOLE ramp,
   not just at the dark end. */
:root[data-appearance="light"] .btn-primary,
:root[data-appearance="light"] #visitor-menu-wrapper > button,
/* SL-DOCCENTER-OWNONE: #doc-center-link left this policy. In light it is no longer a
   filled accent control but a tinted light-native button, owned by the run-bar block in
   _homepage_template.html (SL-CTA-LIGHT2) alongside its neighbour #mission-cta-link.
   It was listed here by ID with !important, which silently outranked that block - two
   owners, one of them shouting. Removed rather than out-shouted. */
:root[data-appearance="light"] .sl-analyze-btn,
:root[data-appearance="light"] .sl-fd-add-btn,
:root[data-appearance="light"] .btn-nav.btn-nav-primary,
:root[data-appearance="light"] #pricing-plans-grid a.block.w-full.py-3{
  background:linear-gradient(90deg,var(--accent),var(--accent-light))!important;
  border-color:transparent!important;color:#fff!important}
:root[data-appearance="light"] .btn-primary *,
:root[data-appearance="light"] #visitor-menu-wrapper > button *,
:root[data-appearance="light"] .sl-analyze-btn *,
:root[data-appearance="light"] .btn-nav.btn-nav-primary *,
:root[data-appearance="light"] #pricing-plans-grid a.block.w-full.py-3 *{color:#fff!important;-webkit-text-fill-color:#fff!important}

/* ── 13. the shared right sidebar (4 logged-in pages) ─────────────────────────
   .sl-ph-pct already had a correct light rule above (color:#152034) — it just had
   no !important, and common.js:3526 overwrites it with an inline style on every
   render. All three health bands fail on white (#4ade80 1.62, #fbbf24 1.67,
   #f87171 2.77). .sl-fd-add-btn is covered by fix 12. */
:root[data-appearance="light"] .sl-ph-pct,
:root[data-appearance="light"] #sl-ph-pct{color:var(--sl-text)!important}

/* ── 14. the homepage hero semantic chips ─────────────────────────────────────
   emerald-400 ink on a 12%-alpha emerald tint = 1.77:1 / 1.66:1. The light
   palette's own --sl-success-ink measures 8.33:1 on the identical tint: the token
   already existed, the page just never read it. Keep the green — it means DONE —
   and fix the weight. */
:root[data-appearance="light"] .stage-stat.done,
:root[data-appearance="light"] .proj-status-chip.success{
  background:rgba(4,120,87,.10)!important;color:var(--sl-success-ink)!important;border-color:rgba(4,120,87,.30)!important}

/* ── 15. disabled states — dimming ERASES on a light ground ───────────────────
   Disabled Next was 1.62:1 AND at opacity .4; disabled Back 1.90:1;
   .progress-skip-btn at opacity .35 -> 1.70:1; disabled options painted a heavy
   rgba(15,23,42,.4) mid-grey slab carrying 1.89-2.26:1 text. Disabled is a
   RECESSED SURFACE plus muted ink, never opacity. --sl-text-faint #57677f on
   #f2f5fa is 5.4:1 — readable and unmistakably recessed. */
:root[data-appearance="light"] .btn-nav.btn-nav-primary:disabled,
:root[data-appearance="light"] .btn-nav-primary[disabled]{
  opacity:1!important;background:var(--bg-card-2)!important;background-image:none!important;
  border:1px solid var(--border)!important;color:var(--sl-text-faint)!important}
:root[data-appearance="light"] .btn-nav.btn-nav-secondary:disabled{
  opacity:1!important;background:var(--bg-card-2)!important;border-color:var(--border)!important;color:var(--sl-text-faint)!important}
:root[data-appearance="light"] .progress-skip-btn{opacity:1!important;color:var(--sl-text-muted)!important}
:root[data-appearance="light"] .qcard .opt.disabled{
  background:var(--bg-card-2)!important;border-color:var(--border)!important;opacity:1!important}
:root[data-appearance="light"] .qcard .opt.disabled .opt-label{color:var(--sl-text-dim)!important}
:root[data-appearance="light"] .qcard .opt.disabled .opt-note{color:var(--sl-text-faint)!important}

/* ── 16. the language chip (/roast, /start) ───────────────────────────────────
   an rgba(15,23,42,.8) navy pill sitting in a light header, with #0f172a "EN"
   inside it: 1.82:1, dark on dark. */
:root[data-appearance="light"] #rs-lang-btn,
:root[data-appearance="light"] #sc-lang-btn{
  background:var(--bg-card)!important;border:1px solid var(--border-light)!important;color:var(--sl-text-body)!important}
:root[data-appearance="light"] #rs-lang-code{color:var(--sl-text-body)!important}

/* ── 17. hairline + micro-elevation ──────────────────────────────────────────
   Card borders measured 1.27-1.34:1 on white, so cards floated without edges.
   Honest read: this is NOT an AA failure — 1.4.11's 3:1 applies to controls whose
   boundary identifies them, not to decorative card edges — and reaching 3:1 would
   need ~#9aa8bb, which fights "very light and bright". The brief's own answer is
   "hairline AND elevation": the border took one step of weight in the token block
   at the top, and a 5%-alpha 1px shadow reads as a lifted edge, not a glow. */
:root[data-appearance="light"] .qcard,
:root[data-appearance="light"] .pstage,
:root[data-appearance="light"] .fl-row,
:root[data-appearance="light"] .section-card,
:root[data-appearance="light"] #sl-project-snapshot{
  border-color:var(--border)!important;box-shadow:0 1px 2px rgba(15,23,42,.05)!important}

/* ── 20. the footer reCAPTCHA line ───────────────────────────────────────────
   2.36:1 at 10px. (18 and 19 are token-only and live in the block at the top.) */
:root[data-appearance="light"] .footer-recaptcha{color:var(--sl-text-muted)!important}

/* ══ SL-TIER-MARKS ════════════════════════════════════════════════════════════════════════
   The two tier marks, defined ONCE for the whole site. They live here rather than in a page's
   own <style> because the icons are rendered from four unrelated places — the pricing cards
   (from membership_plans.icon in the DB), the header badge, the my-projects tier boxes and the
   project-card badges. A per-page copy is a promise to remember, and that promise has already
   been broken once.

   SCOPED classes, never a bare .fa-gem rule: fa-gem is also used for value-proposition icons in
   _business_model_canvas.html, _nabc_framework.html and page-chassis.js, and a global rule would
   set those glowing too.

   PRO is GOLD — warm, solid, opaque, valuable.
   PREMIUM is a DIAMOND — cooler, brighter, lit from inside. The rank is carried by LUMINANCE,
   not hue, so the gem outranks the gold at a glance even though gold is the more familiar
   "premium" signal. */
.sl-gold{color:#fbbf24;
         text-shadow:0 0 10px rgba(251,191,36,.55), 0 1px 0 rgba(120,53,15,.6)}

/* Three light layers, no more: white core, tight ice halo, wider indigo bloom. Stacked shadows
   are what make a gem read as REFRACTING light; a single flat glow reads as a highlighter. */
.sl-gem{color:#fff;
        text-shadow:0 0 3px #fff, 0 0 9px rgba(186,230,253,.95), 0 0 20px rgba(129,140,248,.72)}

/* One specular sweep every 6 seconds — a facet catching the light as you pass it. The restraint
   IS the luxury: a mark that glitters constantly reads as a casino, not a class of service.
   Applied only to a chip that opts in, so the bare icon stays calm wherever it sits inline. */
.sl-gem-chip{position:relative;overflow:hidden;isolation:isolate}
.sl-gem-chip:after{content:"";position:absolute;top:0;bottom:0;width:34%;pointer-events:none;
        background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
        transform:skewX(-18deg);animation:slGemShine 6s ease-in-out infinite}
@keyframes slGemShine{0%,8%{inset-inline-start:-40%}48%,100%{inset-inline-start:120%}}
/* Motion is decoration here, so it is the first thing to go when someone asks for less of it.
   The glow carries the meaning on its own. */
@media (prefers-reduced-motion:reduce){.sl-gem-chip:after{display:none}}

/* SL-TIER-MARKS, final assignment. Both paid tiers are GOLD, so rank is carried by SHAPE and
   LUMINANCE, not hue: a crown outranks a bolt, and Premium's gold is brighter with a wider bloom.
   .sl-gem above is now unused — Premium is a crown, not a gem. */
.sl-royal{color:#fde68a;
          text-shadow:0 0 4px rgba(255,255,255,.85), 0 0 12px rgba(253,224,71,.95), 0 0 26px rgba(251,191,36,.75)}

/* ══ SL-TIER-MARKS — final. No glow. ══════════════════════════════════════════════════════
   The illumination is gone: it was decoration, and gold on its own is the mark. Rank is carried
   by SHAPE alone now — a crown outranks a bolt — with Premium on a slightly brighter gold.

   !important is deliberate and load-bearing here. The pricing card builds its icon as
   class="<db icon> text-sm <tier colour> shrink-0", so a Tailwind text-* utility lands AFTER
   these classes in the attribute. Attribute order does not decide the winner — stylesheet order
   does — and we do not control where a utility sheet sits relative to common.css. That is why
   Premium was rendering blue despite carrying .sl-royal. */
.sl-gold {color:#fbbf24 !important; text-shadow:none !important}
.sl-royal{color:#fde047 !important; text-shadow:none !important}
/* ══ SL-TIER-AVATAR — the plan gilds the identity (Option D · Gold 3 "Royal") ══════════
   A metal is a GRADIENT, not a colour. The first cut used one flat gold, darkened until it
   cleared 3:1 on the white header - and a dark gold reads as brown, which is what the owner
   saw. Now the ring is a conic gradient at full brightness (highlight arcs at 0/68%, shadow
   arcs at 40/84%) and a 1px dark edge carries the separation on white, so the metal never
   has to be dulled. Premium royal gold · Pro sapphire · Enterprise emerald, all cut to the
   same lightness rhythm so they read as one family.
   The ring is padding+background on the WRAPPER, so it cannot be clipped by the top-bar
   avatar's overflow-hidden (that clip holds the profile photo). */
.sl-av{position:relative;display:inline-flex;flex:0 0 auto;border-radius:999px}
.sl-av-crest{position:absolute;left:50%;top:-11px;transform:translateX(-50%);pointer-events:none;display:block;z-index:2}
.sl-av.sl-av-lg .sl-av-crest{top:-12px}
.sl-av.sl-tier-premium,.sl-av.sl-tier-pro,.sl-av.sl-tier-enterprise{padding:3px}
.sl-av.sl-tier-premium{background:conic-gradient(from 205deg,#FFECB0 0%,#F5CE5E 10%,#E0A62A 24%,#A66E0C 40%,#F0C255 56%,#FFECB0 68%,#C88C16 84%,#FFECB0 100%);
  box-shadow:0 0 0 1px rgba(64,42,4,.55), 0 1px 3px rgba(0,0,0,.38)}
.sl-av.sl-tier-pro{background:conic-gradient(from 205deg,#DFF4FF 0%,#92D2F5 10%,#45A8DC 24%,#1B6C99 40%,#7FC6EE 56%,#DFF4FF 68%,#2F87BC 84%,#DFF4FF 100%);
  box-shadow:0 0 0 1px rgba(6,40,60,.55), 0 1px 3px rgba(0,0,0,.38)}
.sl-av.sl-tier-enterprise{background:conic-gradient(from 205deg,#DFFBEE 0%,#8FE3BC 10%,#3FB782 24%,#136D4A 40%,#78D9AC 56%,#DFFBEE 68%,#2A9268 84%,#DFFBEE 100%);
  box-shadow:0 0 0 1px rgba(4,42,26,.55), 0 1px 3px rgba(0,0,0,.38)}
/* SL-TIER-SETTING: a ringed avatar wears a neutral graphite face. The metal is the only
   colour in the mark, so the ring never competes with the identity beneath it - and the
   rule is hue-agnostic, so a new tier needs a metal, not a matching face. Basic accounts
   keep the cyan avatar; this is scoped to the three tier classes. */
/* The setting is DEFINED ONCE, here. The header avatar, its light-theme twin and the team
   strip all read these three values, so they cannot drift apart - the graphite was already
   written out twice before the strip needed it a third time. It is the same graphite in both
   themes deliberately: this is a dark disc, not a themed surface. */
:root{--sl-tier-face:linear-gradient(150deg,#2B3446,#141A26);--sl-tier-face-solid:#1F2634;--sl-tier-face-ink:#EEF3FA}
.sl-av.sl-tier-premium .sl-av-face,
.sl-av.sl-tier-pro .sl-av-face,
.sl-av.sl-tier-enterprise .sl-av-face{
  background:var(--sl-tier-face);
  color:var(--sl-tier-face-ink);
  border-color:rgba(255,255,255,.10)}

/* SL-TEAM-SELF-FACE: the team pill renders its own discs, so a tiered founder had a graphite
   avatar beside a cyan one - the same person, two faces, a few pixels apart. The disc drops
   the cyan gradient utilities to wear this, which is also what stops the light-theme
   eight-identity-disc rule from matching it: no !important on either side. */
.sl-team-self{background:var(--sl-tier-face)}
.sl-team-self span{color:var(--sl-tier-face-ink)}

/* SL-TIER-SETTING (light): the eight-disc rule above paints every identity avatar with
   background-color:var(--accent)!important, which beat the setting rule on specificity
   alone - a ringed avatar came out solid accent blue under a blue ring, which is exactly
   the clash this was meant to end. !important here is answering !important there, and it
   is scoped to the three tier classes so the other seven discs keep the accent fill. */
:root[data-appearance="light"] .sl-av.sl-tier-premium .sl-av-face,
:root[data-appearance="light"] .sl-av.sl-tier-pro .sl-av-face,
:root[data-appearance="light"] .sl-av.sl-tier-enterprise .sl-av-face{
  background-image:var(--sl-tier-face)!important;
  background-color:var(--sl-tier-face-solid)!important;
  color:var(--sl-tier-face-ink)!important;
  border-color:rgba(255,255,255,.12)!important}
:root[data-appearance="light"] .sl-av.sl-tier-premium .sl-av-face span,
:root[data-appearance="light"] .sl-av.sl-tier-pro .sl-av-face span,
:root[data-appearance="light"] .sl-av.sl-tier-enterprise .sl-av-face span{color:var(--sl-tier-face-ink)!important}

/* on white the edge is the only separator, so it carries more weight */
:root[data-appearance="light"] .sl-av.sl-tier-premium{box-shadow:0 0 0 1px rgba(64,42,4,.72), 0 1px 2px rgba(64,42,4,.22)}
:root[data-appearance="light"] .sl-av.sl-tier-pro{box-shadow:0 0 0 1px rgba(6,40,60,.72), 0 1px 2px rgba(6,40,60,.20)}
:root[data-appearance="light"] .sl-av.sl-tier-enterprise{box-shadow:0 0 0 1px rgba(4,42,26,.72), 0 1px 2px rgba(4,42,26,.20)}

/* ══ SL-TIER-BADGE — the plan mark beside the founder's name ═══════════════════════════
   A bare gold glyph is ~1.3:1 on the light theme's white header: invisible exactly where the
   founder looks to confirm what they paid for. The mark now carries its OWN ground, so it is
   legible on any surface, and it is struck rather than drawn: metallic gradient, dark ring,
   inset highlight for shading, espresso ink so the crown's shape reads (5.3:1 on the gold).
   Static shading only - the removed shimmer/sweep stays removed. */
.sl-tier-badge{display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:999px;vertical-align:-4px;margin-inline-start:2px;
  flex:0 0 auto;line-height:1;box-sizing:border-box}
.sl-tier-badge i{font-size:9px;line-height:1}
.sl-tier-badge.sltb-prem{
  background:linear-gradient(145deg,#FBEFC2 0%,#EFCE72 38%,#D0A72B 66%,#9A7515 100%);
  color:#4A3608;border:1px solid rgba(122,86,10,.62);
  box-shadow:0 1px 3px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.72)}
.sl-tier-badge.sltb-pro{
  background:linear-gradient(145deg,#DCF3FF 0%,#93D2F2 38%,#3E9FD0 68%,#1D6E96 100%);
  color:#08324B;border:1px solid rgba(8,50,75,.55);
  box-shadow:0 1px 3px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.65)}
.sl-tier-badge.sltb-ent{
  background:linear-gradient(145deg,#D7F5E6 0%,#7FD9AE 38%,#2FA46F 68%,#166B47 100%);
  color:#07341F;border:1px solid rgba(7,52,31,.55);
  box-shadow:0 1px 3px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.65)}
/* On the light theme the page ground is white, so the ring does the separating. */
:root[data-appearance="light"] .sl-tier-badge.sltb-prem{border-color:rgba(122,86,10,.85);
  box-shadow:0 1px 2px rgba(122,86,10,.30), inset 0 1px 0 rgba(255,255,255,.80)}
:root[data-appearance="light"] .sl-tier-badge.sltb-pro{border-color:rgba(8,50,75,.75)}
:root[data-appearance="light"] .sl-tier-badge.sltb-ent{border-color:rgba(7,52,31,.75)}

/* Every shimmer/sweep off, everywhere it was applied. */
.sl-gem-chip:after{display:none !important}
.mp-prem:after{display:none !important}
.sl-gem{text-shadow:none !important}
.mp-ice{text-shadow:none !important}
.mp-gold{text-shadow:none !important}

/* SL-LTR-CREDENTIALS: an email address, a password, a URL and a phone number are ASCII by
   their own definition - no language writes them right-to-left. dir="rtl" on <html> inherits
   into every input, so in Arabic the caret sat on the right and "a@b.com" read wrong. The
   direction of a value belongs to the DATA, so it is declared once here for the input types
   whose value is never RTL - not per modal and not in JS. Only the value flips; the label,
   the box and the form stay in the RTL flow. */
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="password"],
[dir="rtl"] input[type="url"],
[dir="rtl"] input[type="tel"]{direction:ltr;text-align:left}

/* ── 20. the runtime-injected component families ──────────────────────────────
   .slv-* (SLViz, common.js ~1858 + the free-tier preview lock ~1741), .sl-ld-*
   (the shared build loader), .sl-result-* / .sl-error (every AI result panel and
   every failure message), .sl-v2-*. All five are assembled as CSS STRINGS in JS,
   which is why `grep -c slv- common.css` returned 0 while 40 step pages rendered
   dark cards in light mode. This block is the AI output the owner actually reads.

   Deliberately NOT re-inked: .slv-h and .slv-stat-num measured badly only because
   the surface behind them was dark — .slv-h is #0369a1, ~5.9:1 on a white card.
   Fixing the surface fixes them; re-inking would over-correct.
   Deliberately left dark: .sl-thoughts and its 25 per-tool variants are an
   intentional dark console, internally consistent, and stay that way. */
:root[data-appearance="light"] :is(.slv-card,.slv-stat,.slv-slide,.slv-pg,.slv-tier,
  .slv-seq-step,.slv-qc,.slv-rcpt){background:var(--bg-card)!important;border-color:var(--border)!important}
:root[data-appearance="light"] :is(.slv-bar-track,.slv-stack-track,.slv-qc-bar){background:var(--bg-hover)!important}
:root[data-appearance="light"] :is(.slv-leg,.slv-stack-lbl,.slv-stack-note,.slv-bar-lbl,
  .slv-qc-s,.slv-slide-n,.slv-pg-n){color:var(--sl-text-muted)!important}
:root[data-appearance="light"] .slv-rf-f b{color:var(--sl-success-ink)!important}
:root[data-appearance="light"] .slv-tier-flag{color:var(--sl-on-accent)!important}

:root[data-appearance="light"] .sl-result-body{background:var(--bg-card)!important;border-color:var(--border)!important}
:root[data-appearance="light"] .sl-result-head{background:var(--bg-card-2)!important}
:root[data-appearance="light"] .sl-result-rerun{background:var(--bg-hover)!important}
:root[data-appearance="light"] .sl-error{color:var(--sl-danger-ink)!important;background:rgba(185,28,28,.06)!important;border-color:rgba(185,28,28,.30)!important}
:root[data-appearance="light"] .sl-error i{color:var(--sl-danger-base)!important}
:root[data-appearance="light"] .sl-loader-status{color:var(--sl-text-muted)!important}
:root[data-appearance="light"] .sl-context-input{background:var(--input-bg)!important;color:var(--text)!important;border-color:var(--border-light)!important}
:root[data-appearance="light"] .sl-progress-seg{background:var(--bg-hover)!important}
:root[data-appearance="light"] :is(.sl-v2-dna,.sl-v2-scene,.sl-v2-slot){background:var(--bg-card-2)!important;border-color:var(--border)!important}
:root[data-appearance="light"] :is(.sl-v2-dna-head,.sl-v2-scenehead){color:var(--sl-accent-ink)!important}

:root[data-appearance="light"] :is(.sl-ld,.sl-ld-dna,.sl-ld-scene,.sl-ld-slot){background:var(--bg-card-2)!important;border-color:var(--border)!important}
:root[data-appearance="light"] .sl-ld-node{background:var(--bg-hover)!important}
:root[data-appearance="light"] :is(.sl-ld-status,.sl-ld-v,.sl-ld-chip b){color:var(--sl-text-muted)!important}
:root[data-appearance="light"] :is(.sl-ld-scene-h,.sl-ld-dna-h){color:var(--sl-accent-ink)!important}

/* ── 21. alpha text variants and the one page on the gray-* ramp ──────────────
   Enumerated, NOT matched with [class*="text-cyan-400"] — that attribute form
   would also match hover:text-cyan-400 and apply the hover colour at rest. */
:root[data-appearance="light"] :is(.text-red-400\/80,.text-red-400\/70){color:var(--sl-danger-ink)!important}
:root[data-appearance="light"] :is(.text-amber-300\/90,.text-amber-300\/80,.text-yellow-400){color:var(--sl-warning-ink)!important}
:root[data-appearance="light"] :is(.text-cyan-400\/60,.text-cyan-400\/70,.text-cyan-500\/50,
  .text-cyan-200,.text-cyan-100\/90){color:var(--sl-accent-ink)!important}
:root[data-appearance="light"] .text-emerald-100\/90{color:var(--sl-success-ink)!important}
:root[data-appearance="light"] :is(.bg-gray-900,.bg-gray-900\/60){background:var(--bg-card)!important}
:root[data-appearance="light"] .bg-gray-800{background:var(--bg-hover)!important}
:root[data-appearance="light"] :is(.border-gray-800,.border-gray-700){border-color:var(--border)!important}
:root[data-appearance="light"] .text-gray-400{color:var(--text-muted)!important}

/* .sl-fd-modal-header h2 is color:#fff unscoped at line ~285 — white on a white
   modal in light. Overridden here rather than edited at the source: dark's --text
   is #e2e8f0, not #fff, so editing the base rule would have shifted dark too. */
:root[data-appearance="light"] .sl-fd-modal-header h2{color:var(--text)!important}
:root[data-appearance="light"] .sl-fd-modal-save{background:var(--accent-light)!important}
:root[data-appearance="light"] :is(.sl-ps-head span,.sl-ps-loading,.sl-ps-empty){color:var(--text-dim)!important}


/* ── 23. the shared button trio ──────────────────────────────────────
   MOVED here verbatim from a <style> block inside _my-projects.html, which was the
   only definition on the site while .btn-primary is used 13 times across 6 pages.
   /settings, /document_center, /basic_form_pathway and /pathway_v2 were rendering
   raw OS buttons (measured: padding 1px 6px, radius 0, 103x21) with the light
   layer's accent gradient painted on top — the owner's symptom 3.

   Deliberately UNSCOPED, because the components were broken in both appearances.
   Colour stays owned by the per-appearance blocks above, which already carry
   .btn-primary and .btn-outline for light and override these with !important.
   No --sl-* token appears here: that ladder is declared only inside the light
   block, so referencing it from an unscoped rule would silently drop the
   declaration for every dark visitor.

   admin.html also uses .btn-primary once but loads no common.css, so it is NOT
   fixed by this and still renders an OS button. Left alone deliberately. */
.btn-primary{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(to right,var(--accent, #06b6d4),#0891b2);color:#fff;font-weight:700;font-size:12px;padding:10px 18px;border-radius:12px;border:none;cursor:pointer;transition:all .2s;text-decoration:none;box-shadow:0 0 15px rgba(6,182,212,.2)}
.btn-primary:hover{background:linear-gradient(to right,#22d3ee,#06b6d4);box-shadow:0 0 20px rgba(6,182,212,.35)}
.btn-outline{display:inline-flex;align-items:center;gap:6px;background:transparent;color:#94a3b8;font-weight:600;font-size:12px;padding:10px 14px;border-radius:12px;border:1px solid var(--border,var(--border, #1c2a45));cursor:pointer;transition:all .2s}
.btn-outline:hover{border-color:rgba(34,211,238,.4);color:var(--accent, #22d3ee);background:rgba(34,211,238,.05)}
.btn-danger{display:inline-flex;align-items:center;gap:6px;background:transparent;color:#64748b;font-weight:600;font-size:12px;padding:10px 14px;border-radius:12px;border:1px solid var(--border,var(--border, #1c2a45));cursor:pointer;transition:all .2s}
.btn-danger:hover{color:#f87171;background:rgba(248,113,113,.05);border-color:rgba(248,113,113,.2)}

/* ── 22. the page-local dark islands ──────────────────────────────────────────
   /start's rail, the roast result, the pathway review and the intake form each
   carry their own <style> block written in the dark era: hardcoded #fff ink and
   slate surfaces that no token can reach. These are the owner's symptoms 5 and 6
   ("many text in the chat window", "the animation colours").

   The two /start gradients are NOT here: they were fixed at the source by
   tokenising their second stops, so no override is needed for them. */

/* /start — the right rail */
:root[data-appearance="light"] .sr-stamp{background:var(--bg-card-2)!important}
:root[data-appearance="light"] :is(.sr-vh-head,.sr-roast-tw,.sr-comp-n,.sr-dim-h,
  .sc-rail.named .sc-rail-name){color:var(--sl-text-strong)!important}
:root[data-appearance="light"] :is(.sr-li,.sr-comp-v){color:var(--sl-text-body)!important}
:root[data-appearance="light"] .sr-comp-d{color:var(--sl-text-muted)!important}
:root[data-appearance="light"] .sr-fl{color:var(--sl-danger-ink)!important}

/* the roast result page */
:root[data-appearance="light"] .rs-flag{color:var(--sl-danger-ink)!important}
:root[data-appearance="light"] .rs-flag i{color:var(--sl-danger-base)!important}
:root[data-appearance="light"] .rs-tweet-text{color:var(--sl-text-strong)!important}
:root[data-appearance="light"] .rs-tweet-btn{background:var(--accent)!important}
:root[data-appearance="light"] .rs-tweet-by span{color:var(--sl-text-muted)!important}
:root[data-appearance="light"] .ai-exhibit{background:var(--bg-card-2)!important;border-color:var(--border)!important}
:root[data-appearance="light"] .ai-exhibit-tag span{color:var(--sl-warning-deep)!important}
:root[data-appearance="light"] .ai-progress-seg{background:var(--bg-hover)!important}
:root[data-appearance="light"] :is(#ai-stage-1-txt,#ai-stage-2-txt,#ai-stage-3-txt,#ai-stage-4-txt){color:var(--sl-text-muted)!important}

/* the pathway review */
:root[data-appearance="light"] .rv-bar-title{color:var(--sl-text-strong)!important}
:root[data-appearance="light"] .rv-comp-card{background:var(--bg-card)!important;border-color:var(--border)!important}
:root[data-appearance="light"] .rv-comp-name{color:var(--sl-text-strong)!important}
:root[data-appearance="light"] .rv-comp-bbody{color:var(--sl-text-body)!important}
:root[data-appearance="light"] .rv-scorestamp{background:var(--bg-card)!important;box-shadow:0 1px 3px rgba(15,23,42,.08)!important}
:root[data-appearance="light"] .rv-eval-hero{background:var(--bg-card-2)!important;border-color:var(--border)!important}
:root[data-appearance="light"] .rv-eval-hero-headline{color:var(--sl-text-strong)!important}
:root[data-appearance="light"] .rv-idea-quote{color:var(--sl-text-body)!important}
:root[data-appearance="light"] .rv-iq-label{color:var(--sl-accent-ink)!important}
:root[data-appearance="light"] :is(.rv-disc-input,.rv-disc-textarea){background:var(--input-bg)!important;border-color:var(--border-light)!important;color:var(--text)!important}
:root[data-appearance="light"] .rv-btn-discard{color:var(--sl-danger-ink)!important}
:root[data-appearance="light"] .rv-visopt{color:var(--sl-success-ink)!important}
:root[data-appearance="light"] .nm-node{background:var(--bg-hover)!important;color:var(--accent)!important}
:root[data-appearance="light"] .nm-step-title{color:var(--sl-text-strong)!important}
/* the four evaluation headings keep their meaning — mapped onto the semantic ink
   ramp rather than flattened to one colour, because here the hue IS the signal */
:root[data-appearance="light"] .rv-card-h.risk{color:var(--sl-warning-ink)!important}
:root[data-appearance="light"] .rv-card-h.strength{color:var(--sl-success-ink)!important}
:root[data-appearance="light"] .rv-card-h.opp{color:var(--sl-info-ink)!important}
:root[data-appearance="light"] .rv-card-h.watch{color:var(--sl-danger-ink)!important}

/* the intake form + projects list */
:root[data-appearance="light"] .bf-option{background:var(--bg-card-2)!important;border-color:var(--border)!important}
:root[data-appearance="light"] .bf-pb-block.current{background:var(--accent)!important}
:root[data-appearance="light"] .bf-ym-select{background:var(--input-bg)!important;color:var(--text)!important;border-color:var(--border-light)!important}
:root[data-appearance="light"] .bf-ym-label{color:var(--sl-text-muted)!important}
:root[data-appearance="light"] .tier-badge-premium{color:var(--sl-warning-ink)!important}
:root[data-appearance="light"] .btn-outline{color:var(--sl-text-body)!important}

/* -- 24. two more /start rules, both reported from a screenshot ---------------------
   Page-local <style> rules written in the dark era:
     .sc-opts-q   the chip-group heading ("Biggest question"), _start.html:1087, color:#fff
                  -> white on a white panel, 1.00:1. Not dim: gone.
     .sc-mx-row   the chat menu rows ("Skip to home page"), _start.html:346, color:#cbd5e1
   The hover pair is the same fault as the header user-name hover already fixed above:
   a #1e293b slab that reads as a dark hole punched in a white sheet. .sc-mx-row.go needs
   nothing - it resolves --sc-cy2, which the light token block already re-declares. */
:root[data-appearance="light"] .sc-opts-q{color:var(--sl-text-strong)!important}
:root[data-appearance="light"] .sc-mx-row{color:var(--sl-text-body)!important}
:root[data-appearance="light"] .sc-mx-row:hover{background:var(--bg-hover)!important;color:var(--sl-accent-ink)!important}
:root[data-appearance="light"] .sc-mx-row.bad:hover{background:rgba(185,28,28,.06)!important;color:var(--sl-danger-ink)!important}

/* -- 25. chip STATES: selected, hovered, and the mode badge ------------------------
   Reported from a screenshot of the new pre-selected proposal. These are the states a
   contrast sweep does not see, because it samples chips at rest and at rest they are
   already correct. Selection became far more visible the moment the chat started
   pre-ticking a proposed answer, which is how they surfaced now and not earlier. */
:root[data-appearance="light"] .sc-chip.on{
  color:var(--sl-text-strong)!important;
  background:rgba(3,105,161,.10)!important;
  border-color:rgba(3,105,161,.45)!important}
:root[data-appearance="light"] .sc-chip.on .tick{color:var(--sl-success-ink)!important}
:root[data-appearance="light"] .sc-chip:hover:not(:disabled){
  color:var(--sl-text-strong)!important;
  background:rgba(3,105,161,.06)!important;
  border-color:rgba(3,105,161,.40)!important}
/* the cyan PICK ONE badge rides the accent ramp; --sc-cy2 is already re-declared for light */
:root[data-appearance="light"] .sc-opts-mode{
  color:var(--accent)!important;
  background:rgba(3,105,161,.08)!important;border-color:rgba(3,105,161,.28)!important}
/* MULTI-SELECT keeps its violet meaning - "these become your own words" - at a weight
   that reads on paper. Same violet common.css already uses for .rs-verdict in light. */
:root[data-appearance="light"] .sc-opts-mode.many{
  color:#6d28d9!important;
  background:rgba(109,40,217,.08)!important;
  border-color:rgba(109,40,217,.30)!important}

/* -- 26. the dark hover slab, everywhere it appears on /start ---------------------
   `background:#1e293b` inside a :hover rule, written when the only surface was dark.
   Reported three times from three different screenshots before I stopped fixing the
   reported element and grepped for the pattern. Six rules carry it site-wide on this
   page; .sc-mx-row is handled in block 24 above, these are the other five.
   Listed explicitly rather than matched on a wildcard: an attribute selector would also
   catch states that are meant to stay dark. */
:root[data-appearance="light"] :is(.sc-act,.sc-conv-mb,.sc-conv-mi,.sc-ask-x,.sc-ask-b,.sc-vp-b):hover,
:root[data-appearance="light"] :is(.sc-act,.sc-conv-mb,.sc-conv-mi,.sc-ask-b,.sc-vp-b):focus-visible,
:root[data-appearance="light"] :is(.sc-conv-mb,.sc-conv-mi):focus{
  background:var(--bg-hover)!important;
  color:var(--sl-accent-ink)!important;
  border-color:var(--border)!important}
/* a cast vote is STATE, not an affordance - it has to read as lit on paper too */
:root[data-appearance="light"] :is(.sc-act.ok,.sc-act.on-up){color:var(--sl-success-ink)!important}
:root[data-appearance="light"] .sc-act.on-up{background:rgba(4,120,87,.10)!important}

/* -- 27. the build panel's CONTENTS (block 20 did the boxes) ----------------------
   Re-toning a container without its text is worse than leaving both alone: it turns a
   readable dark card into an unreadable light one. Block 20 gave .sl-ld-slot a light
   background and left its #e2e8f0 ink; it gave `.sl-ld-chip b` a dark label and left the
   chip's own #cbd5e1 value. Both are what the founder actually reads while the project
   builds, and both were invisible. */
:root[data-appearance="light"] .sl-ld-chip{color:var(--sl-text-body)!important}
:root[data-appearance="light"] .sl-ld-slot{color:var(--sl-text-strong)!important}
:root[data-appearance="light"] .sl-ld-chip i{color:var(--sl-success-ink)!important}
:root[data-appearance="light"] .sl-ld-slot.locked{border-color:var(--sl-success-ink)!important;box-shadow:none!important}
:root[data-appearance="light"] .sl-ld-slot.locked .sl-ld-v{color:var(--sl-success-ink)!important}
/* the pulsing node is a dark disc with an accent ring - on paper it reads as a hole */
:root[data-appearance="light"] .sl-ld-node{
  background:radial-gradient(circle at 30% 30%,rgba(3,105,161,.10),var(--bg-card))!important;
  color:var(--sl-accent-ink)!important;border-color:var(--accent)!important}

/* SL-CONTINUE: the "Keep answering" / "Back to my result" rail-foot control. One class,
   two roles (never on screen together - see _start.html scRenderRail). Reuses the existing
   accent ramp, no new tokens.

   THE SILHOUETTE IS COPIED FROM THE PRIMARY. It was width:100%, so inside the foot's 310px
   content box it rendered WIDER than the button it sits under (#sl-start-cta is width:auto,
   min 200, max 264, centred). A full-bleed hairline rectangle standing under a centred capsule
   reads as a container, not a sibling - that is most of "it looks like a default form control".
   It now takes the CTA's envelope verbatim - width:auto, min-width:200px, max-width:264px,
   margin-inline:auto, border-radius:12px - so the two stack on one axis as a pair. It does NOT
   also take the 264px: at these label lengths it settles at its 200px floor (MEASURED: 200 in
   English and Arabic, 208 for the German "Zurück zu meinem Ergebnis"), which is the point -
   same clamp, shorter content, so it reads as subordinate without a second rule saying so.
   44px, not the 42 this first measured at, because it is the same touch minimum #sl-start-cta's
   own comment cites when it argues its way from 30px to 60px. min-height, never height, and the
   label is allowed to wrap: both strings are dictionary-driven and German and Arabic run longer.

   THE SKIN IS NOT INVENTED. This sheet already HAS a cyan-tinted secondary button - .sl-ph-btn
   at lines 246-247 and 526-527 - and running a second set of alphas beside it is how two
   owners of one look start to drift. Its recipe is adopted whole: .08 fill / .25 ring going to
   .16 / .45 on hover in dark, .08 / .30 going to .14 / .45 in light, inks #a5f3fc and #0e7490.

   THE ONE TIE TO THIS PARTICULAR PRIMARY is the ring's hue. #sl-start-cta carries
   `inset 0 0 0 1px rgba(103,232,249,.45)`, a cyan-200 ring that is the single bright edge on
   its deep fill; this button wears THAT hue - 103,232,249, not .sl-ph-btn's 34,211,238 -
   turned outward and started at .25, and :hover raises it to the primary's own .45. Hovering
   is one step up toward the CTA. In light the ink #0e7490 is literally the FIRST STOP of the
   primary's gradient (linear-gradient(135deg,#0e7490,#6d28d9)). Nothing else is added: no
   gradient of its own, because two competing primaries is worse than one plain button; no
   shadow; and no translateY or brightness on hover - the lift belongs to the CTA alone.

   NO ICON, and that is a constraint rather than an omission: one node carries two opposite
   meanings ("Keep answering" = go add more, "Back to my result" = come back), scRenderRail
   swaps only textContent and writes no class, so a ::before glyph would be right in one state
   and a lie in the other.

   font-family:inherit replaces `font:600 12px Inter,sans-serif`. Inter has no Arabic coverage,
   so on [dir=rtl] - where line 15 of this sheet puts Cairo on <body> - this control was the
   one thing in the foot falling through to the generic sans. 700 at 12.5px is .sc-rail-alt's
   spec: the foot already has a defined secondary tier and this joins it rather than inventing
   a third. */
.sc-rail-keep{display:flex;align-items:center;justify-content:center;gap:6px;
  width:auto;min-width:200px;max-width:264px;margin-inline:auto;min-height:44px;
  padding-block:12px;padding-inline:18px;border-radius:12px;
  font-family:inherit;font-weight:700;font-size:12.5px;line-height:1.3;
  text-align:center;text-wrap:balance;overflow-wrap:anywhere;cursor:pointer;
  /* SL-CTA-THRESHOLD: NO fill and NO border. Tinted in the primary's own cyan and sharing its
     264px band, this read as "the primary, disabled" - two objects of equal mass and therefore
     no default. An escape hatch should look like an escape hatch: the 44px target stays, the
     box goes, and the hierarchy costs nothing. */
  color:var(--sc-ink2,#94a3b8);background:transparent;border:1px solid transparent;
  font-weight:600;text-decoration-color:transparent;
  transition:color .18s,text-decoration-color .18s}
.sc-rail-keep:hover{color:var(--sc-ink,#e2e8f0);
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;
  text-decoration-color:currentColor}
.sc-rail-keep:focus-visible{outline:2px solid var(--sc-cy2);outline-offset:2px}
/* rest ink is --sl-accent-ink, not cyan-700: the shipped #0e7490 measured 4.52:1 here,
   over the floor by 0.02. Same token block 26 uses for accent ink on light surfaces. */
/* These carry !important, so they had to move in step - left alone they would have re-drawn
   the very box the rule above removes. Slate-600 on the light card is 5.9:1. */
:root[data-appearance="light"] .sc-rail-keep{color:#475569!important;
  background:transparent!important;border-color:transparent!important}
:root[data-appearance="light"] .sc-rail-keep:hover{background:transparent!important;
  border-color:transparent!important;color:#0f172a!important}

/* ══════════════════════════════════════════════════════════════════════════════
   LIGHT — SWEEP 3.  The AI OUTPUT surfaces that sweeps 1-2 did not reach.

   Every selector is gated on :root[data-appearance="light"]. Nothing here matches
   a dark document — dark stays byte-identical, same invariant as blocks 1-27.

   Three fault classes this block closes, in order of damage:
     (a) CONTAINER-WITHOUT-TEXT, already shipped. Block 5 re-inked .rr-* children
         to dark ink and block 20 whitened eight .slv-* cards, but neither touched
         the surface those children sit on / the text those cards contain. So today
         .rr-section-body is #2f3d54 on a navy slab, and .slv-card-t is #fff on a
         white card at 1.00:1. Every container re-toned below carries its children's
         ink in the same group — that pairing is the whole point of this block.
     (b) FAMILIES WITH ZERO LIGHT RULES: .sled-* (page-chassis document editor),
         .hr-*, .pr-*, .ip-*, .ls-*, .rep-*, .ld-*, .kol-*, .iv-*, .sim-*, .ue-*,
         .sp-*, .sf-*, .pp-*, .bmc-*, .dyn-*, .srf-*, .mvp-*, .result-body.
     (c) STATES AND INLINE STYLE, which a resting-state grep cannot see: hover,
         .active/.on/.hl/.is-active, the free-tier lock, and the classless <div
         style="color:#fff"> hero the SLViz renderers emit on six pages.

   !important throughout for the same reason as block 20: several of these rules
   live in JS-assembled <style> strings emitted AFTER common.css, and a few of the
   colours corrected here are inline style attributes written by a renderer.

   Ink map used everywhere below — #fff/#f1f5f9/#e2e8f0 → --sl-text-strong,
   #cbd5e1 → --sl-text-body, #94a3b8/#7c8aa0/#7c8aa5 → --sl-text-muted,
   mint/emerald → --sl-success-*, amber/yellow → --sl-warning-*,
   rose/red → --sl-danger-*, violet → --sl-info-*, cyan → --sl-accent-*.
   #64748b and #475569 are NOT touched: they measure 5.6:1 and 8.4:1 on white and
   already pass — re-inking them would over-correct exactly as block 20 warned.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── 28. .rr-* — the SURFACES block 5 left dark ───────────────────────────────
   Same duplicated <style> block as block 5, now on 13 pages (sales_motion,
   pitch_deck, subscription_engine, industry_channels, financial_simulator,
   roadshow_deck, board_update_deck, tech_stack, customer_case_study + the 8
   block 5 already named). Block 5 fixed the ink and stopped; the panels those
   lines sit in are still rgba(15,23,42,.5) navy, so today the corrected dark ink
   is invisible ON TOP of an uncorrected dark slab. Both halves must move together.
   Not re-declared: every child listed in block 5. */
:root[data-appearance="light"] :is(.rr-section,.rr-channel,.rr-layer,.rr-deck-row,
  .rr-list-item,.rr-mx-card,.rr-tl-task){background:var(--bg-card)!important;border-color:var(--border)!important}
/* .rr-cap-card keeps its accent hairline (var(--badge-border) already resolves in light) */
:root[data-appearance="light"] .rr-cap-card{background:var(--bg-card)!important}
:root[data-appearance="light"] :is(.rr-order-step,.rr-tl-label,.rr-alt-pill){background:var(--bg-card-2)!important}
:root[data-appearance="light"] .rr-layer-head{border-bottom-color:var(--border)!important}
/* .rr-funnel-bar is #fff on an 18%-alpha tint that composites to ~#dff3f8 in light: 1.1:1 */
:root[data-appearance="light"] .rr-funnel-bar{color:var(--sl-text-strong)!important}
:root[data-appearance="light"] :is(.rr-alt-pill,.rr-order-step,.rr-tl-task){color:var(--sl-text-body)!important}
:root[data-appearance="light"] .rr-mx-badge.rec-no{color:var(--sl-text-muted)!important}
:root[data-appearance="light"] :is(.rr-pill-emerald,.rr-layer-cost,.rr-tl-task i,
  .rr-channel-fit.rr-emerald,.rr-list-score.rr-emerald,.rr-mx-badge.rec-yes){color:var(--sl-success-ink)!important}
:root[data-appearance="light"] :is(.rr-list-deadline,.rr-funnel-lever i,
  .rr-channel-fit.rr-amber,.rr-list-score.rr-amber,.rr-mx-badge.rec-maybe){color:var(--sl-warning-ink)!important}

/* ── 29. .slv-* — the TEXT block 20 left pale, and the wrapper it missed ──────
   SLViz (common.js ~1757-1855, runtime-injected). Block 20 whitened eight cards
   and re-inked seven labels; ~30 declarations were left. The two that matter most:
   .slv-sec is the OUTER wrapper of every SLViz section, so eight white cards
   currently sit inside a navy box; and .slv-tier-p (the price), .slv-card-t,
   .slv-seq-t, .slv-rcpt-r.em are all #fff INSIDE cards block 20 turned
   white — 1.00:1, the headline number of pricing_strategy among them.
   .slv-sec / .slv-quote / .slv-fl-box take the WELL step, not the card step, so the
   white cards inside them keep an edge. */
:root[data-appearance="light"] :is(.slv-sec,.slv-quote,.slv-fl-box){background:var(--bg-card-2)!important;border-color:var(--border)!important}
:root[data-appearance="light"] :is(.slv-seq-badge,.slv-ck-b){background:var(--bg-hover)!important;color:var(--sl-text-body)!important}
/* .slv-tier.hl is the recommended plan. Block 20's !important background ERASED the
   highlight in light; restored here as the accent badge wash, one step above the card. */
:root[data-appearance="light"] .slv-tier.hl{background:var(--badge-bg)!important;border-color:var(--badge-border)!important}
:root[data-appearance="light"] :is(.slv-ck,.slv-rf){border-bottom-color:var(--border)!important}
:root[data-appearance="light"] .slv-tier-note{border-top-color:var(--border)!important}
:root[data-appearance="light"] :is(.slv-card-t,.slv-seq-t,.slv-slide-t,
  .slv-tier-p,.slv-quote-t,.slv-fl-t,.slv-ck-l,.slv-bar-val){color:var(--sl-text-strong)!important}
:root[data-appearance="light"] .slv-rcpt-r.em{color:var(--sl-text-strong)!important;border-top-color:var(--border)!important}
:root[data-appearance="light"] :is(.slv-card-l b,.slv-rcpt-r){color:var(--sl-text-body)!important}
:root[data-appearance="light"] :is(.slv-card-l,.slv-seq-d,.slv-slide-d,.slv-pg-b,
  .slv-tier-n,.slv-tier-f,.slv-quote-a,.slv-ck-n,.slv-rf-f){color:var(--sl-text-muted)!important} /* SL-MV2-RISK-ONE (G32): .slv-rf-r has no light rule - its SLViz ink, var(--sl-text-strong), is already the light token */
:root[data-appearance="light"] .slv-tier-f i{color:var(--sl-success-base)!important}
/* the donut centre label and the "you" marker on the market-position axis are SVG
   presentation attributes (common.js:1885, :2058) on unclassed <text>. An attribute
   selector reaches them; CSS `fill` beats the attribute at any specificity. */
:root[data-appearance="light"] :is(.slv-sec,.sl-result-body) svg text[fill="#fff"]{fill:var(--sl-text-strong)!important}

/* ── 30. .sled-* — the editable document (page-chassis.js ~2711-2901) ─────────
   price_list / product_presentation / company_profile documents. Zero light rules.
   ONE token does most of the damage: --sled-lt (#67e8f9) has ~15 consumers, every
   one of them pale cyan on a white sheet — re-pointing the token fixes all 15.
   The rest is the usual pair: rgba(2,6,23,.45) blocks holding #fff/#cbd5e1 ink. */
:root[data-appearance="light"] :is(.sled,.sled-create){--sled-lt:var(--sl-accent-ink)!important}
:root[data-appearance="light"] :is(.sled-hero,.sled-block,.sled-end,.sled-create){background:var(--bg-card)!important;border-color:var(--border)!important}
:root[data-appearance="light"] :is(.sled-stat,.sled-callout,.sled-quote,.sled-cardi,.sled-tm,
  .sled-tier,.sled-chart,.sled-ghost,.sled-reset,.sled-cover-btn,.sled-add,.sled-elmenu){background:var(--bg-card-2)!important;border-color:var(--border)!important}
:root[data-appearance="light"] :is(.sled-bar-track,.sled-tbl th,.sled-tbl tr:nth-child(even) td,
  .sled-ghost:hover,.sled [contenteditable]:focus){background:var(--bg-hover)!important}
:root[data-appearance="light"] .sled-tier.hl{background:var(--badge-bg)!important;border-color:var(--badge-border)!important}
:root[data-appearance="light"] :is(.sled-h-title,.sled-b-heading,.sled-card-t,.sled-tm-n,
  .sled-tier-p,.sled-step-t,.sled-tl-t,.sled-cht.on,.sled-tbl th .sled-cell){color:var(--sl-text-strong)!important}
:root[data-appearance="light"] :is(.sled-h-intro,.sled-b-body,.sled-bullet-t,.sled-callout-t,
  .sled-quote-t,.sled-close-t,.sled-tbl td,.sled-bar-lbl,.sled-bar-val,.sled-leg b,.sled-chl,
  .sled-elmenu button,.sled-cover-btn,.sled-ghost){color:var(--sl-text-body)!important}
:root[data-appearance="light"] :is(.sled-card-d,.sled-tm-b,.sled-tier-n,.sled-tier-ftx,
  .sled-quote-a,.sled-foot-t,.sled-leg,.sled-status-line,.sled-step-d,.sled-tl-d,
  .sled-topbar-l,.sled-add,.sled-reset,.sled-create-h span){color:var(--sl-text-muted)!important}
/* hover must not go WHITER than rest on paper — the dark-era pattern inverted */
:root[data-appearance="light"] :is(.sled-cht:hover,.sled-tools button:hover,
  .sled-elmenu button:hover,.sled-cover-btn:hover,.sled-reset:hover){color:var(--sl-text-strong)!important}
:root[data-appearance="light"] :is(.sled-ghost i,.sled-tpl-badge){color:var(--sl-info-ink)!important}

/* ── 30b. #dd-downloads / #nabc-downloads — the inline-styled "Previously generated" box inside
   every document panel, sled ones included (stylesheet !important beats inline style). The toolbar's
   id rules went with SL-MV2-SLV-DECKS-CSS (08 T7): since 08 T2 every bar is .sled-create / .sled-ghost
   (window.SLDocBar), which block 30 styles by class. */
:root[data-appearance="light"] :is(#dd-downloads,#nabc-downloads){background:var(--bg-card-2)!important;border-color:var(--border)!important}
:root[data-appearance="light"] :is(#dd-downloads,#nabc-downloads)>div:first-child{color:var(--sl-accent-ink)!important}
:root[data-appearance="light"] :is(#dd-downloads,#nabc-downloads) a{background:var(--bg-card)!important;border-color:var(--border)!important;color:var(--sl-text-body)!important}
:root[data-appearance="light"] :is(#dd-downloads,#nabc-downloads) a .fa-download{color:var(--sl-accent-ink)!important}

/* ── 31. .srf-* — /solution_reframing's reframe visualisation ─────────────────
   The whole family lives in the _SRF_CSS JavaScript string on one line
   (_solution_reframing.html:815), which is why no .css or <style> grep found it.
   .srf-frame-st is the reframed problem statement — the single most important
   sentence the page produces — at #fff on a card the light layer already whitened.
   The lens/orbit/tile hues (--oc/--tc/--fc, set inline per card) stay on the RULE
   (border-left / border-top), and the ink moves to the ladder. */
:root[data-appearance="light"] :is(.srf-raw-c,.srf-frame,.srf-special-c){background:var(--bg-card-2)!important;border-color:var(--border)!important}
:root[data-appearance="light"] .srf-orbit{background:var(--bg-card-2)!important;border-color:var(--border)!important;border-left-color:var(--oc,var(--sl-accent-base))!important}
:root[data-appearance="light"] .srf-sp-tile{background:var(--bg-card-2)!important;border-color:var(--border)!important;border-top-color:var(--tc,var(--sl-accent-base))!important}
:root[data-appearance="light"] .srf-core{background:var(--badge-bg)!important;color:var(--sl-text-strong)!important}
:root[data-appearance="light"] .srf-meter span{background:var(--bg-hover)!important}
:root[data-appearance="light"] :is(.srf-flow-c,.srf-table th,.srf-table td){border-color:var(--border)!important}
:root[data-appearance="light"] :is(.srf-frame-st,.srf-pitch,.srf-sanity li b,.srf-table td.lf,
  .srf-special-h,.srf-orbit-h,.srf-sp-h,.srf-frame-lens){color:var(--sl-text-strong)!important}
:root[data-appearance="light"] :is(.srf-raw-v,.srf-frame-row,.srf-orbit li,.srf-sp-v,
  .srf-sanity li,.srf-table td){color:var(--sl-text-body)!important}
:root[data-appearance="light"] :is(.srf-frame-row b,.srf-sec){color:var(--sl-text-muted)!important}
:root[data-appearance="light"] :is(.srf-sec i,.srf-flow-arrow){color:var(--sl-accent-base)!important}
:root[data-appearance="light"] :is(.srf-chip-open,.srf-rev){color:var(--sl-success-ink)!important}
:root[data-appearance="light"] .srf-chip-close{color:var(--sl-danger-ink)!important}

/* ── 32. .result-body — the markdown-rendered AI answer ───────────────────────
   .result-body's own colour is var(--text) and flips correctly; four heading
   levels, strong/b, em and blockquote hard-code dark-era literals and do not, so
   every bolded phrase in the answer is 1.0:1 on the white result card.
   .st-* are the coloured section titles the same renderer emits (also used under
   .rep-fb and .ld-fb) — one rule each instead of twelve declarations. */
:root[data-appearance="light"] :is(.result-body h1,.result-body h2,.result-body h3,
  .result-body h4,.result-body strong,.result-body b){color:var(--sl-text-strong)!important}
:root[data-appearance="light"] :is(.result-body em,.result-body i:not([class])){color:var(--sl-text-body)!important}
:root[data-appearance="light"] .result-body blockquote{color:var(--sl-text-body)!important;background:var(--bg-card-2)!important;border-inline-start-color:var(--border-light)!important}
:root[data-appearance="light"] .result-card .result-header{background:var(--bg-card-2)!important}
:root[data-appearance="light"] .st-emerald{color:var(--sl-success-ink)!important}
:root[data-appearance="light"] .st-amber{color:var(--sl-warning-ink)!important}
:root[data-appearance="light"] .st-blue{color:var(--sl-accent-ink)!important}
/* pink is the one hue with no --sl-* token; #be185d is the literal the shipped
   light block already uses for .text-pink-400, reused rather than invented */
:root[data-appearance="light"] .st-pink{color:#be185d!important}

/* ── 33. the post-result action rail — 4 pages, one shape ────────────────────
   solution_reframing, location_strategy, reputation_engine and local_discovery
   each ship the same button: rgba(15,23,42,.6) with #cbd5e1 on it, hovering to
   rgba(15,23,42,.9)/#fff — i.e. hover paints a near-black slab on a white page,
   the exact fault block 26 fixed for /start. Fixed once for all four. */
:root[data-appearance="light"] :is(.rf-action-btn,.ls-action-btn,.rep-action-btn,.ld-action-btn){
  background:var(--bg-card-2)!important;border-color:var(--border)!important;color:var(--sl-text-body)!important}
:root[data-appearance="light"] :is(.rf-action-btn:hover,.ls-action-btn:hover,.rep-action-btn:hover,
  .ld-action-btn:hover,#sl-next-step-btn:hover,#reframe-next-step:hover){background:var(--bg-hover)!important;color:var(--sl-accent-ink)!important}
:root[data-appearance="light"] :is(.rf-next-title,.rep-next-title,.ld-next-title){color:var(--sl-text-strong)!important}
:root[data-appearance="light"] .rf-mantra-prefix{color:var(--sl-text-muted)!important}
:root[data-appearance="light"] .rf-mantra-solution{color:var(--sl-success-ink)!important}

/* ── 34. .hr-* — /hiring_roadmap ──────────────────────────────────────────────
   Zero light rules. The role grid, the org summary, the budget meter and the hire
   sequence are all rgba(15,23,42,.55) cards with #fff titles; .hr-seq-node is an
   opaque #0e1726 disc and .hr-budget-track an opaque rgba(2,6,23,.6) gutter. */
:root[data-appearance="light"] :is(.hr-role,.hr-org-summary,.hr-budget,
  .hr-details summary){background:var(--bg-card)!important;border-color:var(--border)!important}
:root[data-appearance="light"] :is(.hr-chart,.hr-details-body){background:var(--bg-card-2)!important;border-color:var(--border)!important}
:root[data-appearance="light"] :is(.hr-month,.hr-budget-track,.hr-seq-node){background:var(--bg-hover)!important}
:root[data-appearance="light"] .hr-seq-n{border-color:var(--bg-card)!important}
:root[data-appearance="light"] .hr-fvh-row{border-bottom-color:var(--border)!important}
:root[data-appearance="light"] :is(.hr-role-title,.hr-budget-val,
  .hr-fvh-task,.hr-seq-title){color:var(--sl-text-strong)!important}
:root[data-appearance="light"] :is(.hr-role-trigger,.hr-org-body,.hr-line,.hr-role-pill.type){color:var(--sl-text-body)!important}
:root[data-appearance="light"] :is(.hr-budget-lbl,.hr-fvh-note){color:var(--sl-text-muted)!important} /* SL-MV2-HERO-HR: .hr-summary-* went with 37's boxed hero (SLViz.hero colours its own) */
:root[data-appearance="light"] :is(.hr-role-trigger i,.hr-verdict.v-hire){color:var(--sl-success-ink)!important}
:root[data-appearance="light"] .hr-role-pill.priority-high{color:var(--sl-warning-ink)!important}
:root[data-appearance="light"] :is(.hr-role-pill.priority-critical,.hr-now-tag){color:var(--sl-danger-ink)!important}
:root[data-appearance="light"] .hr-verdict.v-outsource{color:var(--sl-info-ink)!important}

/* ── 35. .pr-* + .ip-* — legacy pricing renderer and /ip_strategy ─────────────
   .pr-* is the non-SLViz pricing output; .ip-* is the whole ip_strategy answer.
   Both zero light rules. The two *-tier-locked blocks are the FREE-TIER UPSELL —
   amber ink on a 5%-alpha amber wash, ~1.9:1, i.e. the paywall message is the
   least readable thing on the page. */
:root[data-appearance="light"] :is(.pr-anchor,.pr-section,.ip-card,.ip-section){background:var(--bg-card)!important;border-color:var(--border)!important}
:root[data-appearance="light"] :is(.pr-order-step,.ip-order-step){background:var(--bg-card-2)!important;color:var(--sl-text-body)!important}
:root[data-appearance="light"] :is(.pr-headline,.pr-anchor-price,.ip-headline,.ip-card-title){color:var(--sl-text-strong)!important}
:root[data-appearance="light"] :is(.pr-section-body,.ip-card-body,.ip-section-body){color:var(--sl-text-body)!important}
:root[data-appearance="light"] :is(.pr-anchor-label,.ip-card-badge.rec-no){color:var(--sl-text-muted)!important}
:root[data-appearance="light"] .ip-card-badge.rec-yes{color:var(--sl-success-ink)!important}
:root[data-appearance="light"] .ip-card-badge.rec-maybe{color:var(--sl-warning-ink)!important}
:root[data-appearance="light"] .ip-risk{color:var(--sl-danger-ink)!important}
:root[data-appearance="light"] :is(.pr-tier-locked,.ip-tier-locked){color:var(--sl-warning-ink)!important;border-color:rgba(var(--sl-warning-base-rgb),.45)!important}

/* ── 36. .ls-* — /location_strategy, including the map popup ─────────────────
   The ranked-location cards, the criteria grid and the loader. Two things a
   .css/.html grep misses: .ls-rentbox* and .ls-ts-* are built as a JS string
   (_location_strategy.html:655-678), and .leaflet-popup-* is a self-consistent
   DARK ISLAND — wrapper #0f172a with #fff/#94a3b8 inside it. The popup only works
   if the wrapper and all three inks move in the SAME change. */
:root[data-appearance="light"] :is(.ls-card,.leaflet-popup-content-wrapper,.leaflet-popup-tip){background:var(--bg-card)!important;border-color:var(--border)!important}
:root[data-appearance="light"] .leaflet-popup-content-wrapper{color:var(--text)!important}
/* the nested wells keep a step below the card they sit in, or they vanish into it (the candidate-site card left with its form: p10 T8 SL-MV2-LOC-MAP) */
:root[data-appearance="light"] :is(.ls-crit-cell,.ls-loader,.ls-rentbox,
  .ls-cta-secondary){background:var(--bg-card-2)!important;border-color:var(--border)!important}
:root[data-appearance="light"] .ls-bar{background:var(--bg-hover)!important}
:root[data-appearance="light"] :is(.ls-step-title,.ls-rank-name,.ls-rank-score,.ls-crit-v,
  .ls-cta-secondary,.lp-name){color:var(--sl-text-strong)!important}
:root[data-appearance="light"] :is(.ls-why,.ls-ts-v,.ls-rentbox-area,.ls-matrix td.loc){color:var(--sl-text-body)!important}
:root[data-appearance="light"] :is(.ls-step-sub,.ls-label,.ls-legend,.ls-sec-title,
  .ls-rentbox-note,.ls-ts-l,.lp-meta){color:var(--sl-text-muted)!important}
:root[data-appearance="light"] :is(.ls-meta-row,.ls-sec-title i,.ls-loader-stage,
  .ls-rentbox-rent,.lp-score){color:var(--sl-warning-ink)!important}
:root[data-appearance="light"] :is(.ls-tradeoff,.ls-comp i,.ls-flag){color:var(--sl-danger-ink)!important}

/* ── 37. .rep-* + .ld-* — /reputation_engine and /local_discovery ─────────────
   Byte-for-byte twins apart from the accent hue, so one group. .rep-band is the
   verdict chip: the renderer writes `background:<hue>22;color:<hue>` INLINE
   (_reputation_engine.html:1511), so the ink IS the 13%-alpha fill hue —
   1.5-2.6:1. Only the ink is corrected; the tinted fill and border keep the band's
   meaning. .*-fb .ai-json-value is the raw-JSON fallback the page shows whenever
   the AI shape is unrecognised. */
:root[data-appearance="light"] :is(.rep-verdict,.ld-verdict,.rep-msg,.ld-msg){background:var(--bg-card-2)!important;border-color:var(--border)!important}
:root[data-appearance="light"] :is(.rep-verdict-h,.ld-verdict-h,.rep-msg-t,.ld-msg-t,
  .rep-upsell-t,.rep-band){color:var(--sl-text-strong)!important}
:root[data-appearance="light"] :is(.rep-why-row b,.rep-fb .ai-json-value,.ld-fb .ai-json-value){color:var(--sl-text-body)!important}
:root[data-appearance="light"] :is(.rep-critique,.ld-critique,.rep-msg-b,.ld-msg-b,
  .rep-why-row,.rep-note,.rep-upsell-b){color:var(--sl-text-muted)!important}
:root[data-appearance="light"] :is(.rep-msg-err .rep-msg-t,.ld-msg-err .ld-msg-t){color:var(--sl-danger-ink)!important}

/* ── 38. .kol-* — /kol_interviews ─────────────────────────────────────────────
   Pink is this page's identity and has no --sl-* token; #be185d / #831843 are the
   two literals the shipped light block already uses for .text-pink-400/-300. */
:root[data-appearance="light"] .kol-card{background:var(--bg-card)!important;border-color:var(--border)!important}
:root[data-appearance="light"] :is(.kol-row-card,.kol-quote,.kol-stance-bar,
  .kol-cta-secondary){background:var(--bg-card-2)!important;border-color:var(--border)!important}
:root[data-appearance="light"] :is(.kol-step-title,.kol-meter-num,.kol-cta-secondary){color:var(--sl-text-strong)!important}
:root[data-appearance="light"] .kol-quote{color:var(--sl-text-body)!important}
:root[data-appearance="light"] :is(.kol-step-sub,.kol-label,.kol-attr){color:var(--sl-text-muted)!important}
:root[data-appearance="light"] :is(.kol-step-num,.kol-chip,.kol-flag-info){color:#831843!important}
:root[data-appearance="light"] .kol-flag-ok{color:var(--sl-success-ink)!important}
:root[data-appearance="light"] .kol-flag-warn{color:var(--sl-danger-ink)!important}

/* ── 39. /interviews — the AI persona's own words ─────────────────────────────
   .iv-bubble-them IS the AI reply, .iv-quick the suggested follow-ups and
   .iv-feedback the live evaluation — the three things the page exists to show.
   Every hover here goes to #fff, so on paper hovering ERASES the control; each
   hover pair is corrected together with its rest state. */
:root[data-appearance="light"] :is(.iv-bubble-them,.iv-quick,.iv-ex-item,.iv-examples-head,
  .iv-examples-tabs){background:var(--bg-card-2)!important;border-color:var(--border)!important}
:root[data-appearance="light"] :is(.iv-bubble-sys,.iv-cand-av){background:var(--bg-hover)!important;color:var(--sl-text-muted)!important}
:root[data-appearance="light"] :is(.iv-bubble-them,.iv-quick,.iv-ex-item){color:var(--sl-text-body)!important}
:root[data-appearance="light"] :is(.iv-quick:hover,.iv-ex-item:hover,.iv-ex-tab:hover){background:var(--bg-hover)!important;color:var(--sl-text-strong)!important}
:root[data-appearance="light"] :is(.iv-eval-title,.iv-feedback.active-good,.iv-feedback.active-bad){color:var(--sl-text-strong)!important}
:root[data-appearance="light"] :is(.iv-feedback,.iv-examples-head-label,.iv-ex-tab){color:var(--sl-text-muted)!important}
:root[data-appearance="light"] :is(.iv-feedback.active-good .iv-ic,.iv-ex-tab.active.tab-good,
  .iv-hero-pill.ok,.iv-done-btn){color:var(--sl-success-ink)!important}
:root[data-appearance="light"] :is(.iv-done-btn:hover,.iv-done-btn.is-done){color:var(--sl-success-ink)!important;background:rgba(var(--sl-success-base-rgb),.16)!important}
:root[data-appearance="light"] :is(.iv-quick-bad,.iv-quick-bad:hover,
  .iv-feedback.active-bad .iv-ic,.iv-ex-tab.active.tab-bad,.iv-hero-pill.bad){color:var(--sl-danger-ink)!important}
/* the LIVE chip on the evaluation heading — a pseudo-element cannot live inside :is() */
:root[data-appearance="light"] .iv-eval-title::after{color:var(--sl-danger-ink)!important}
:root[data-appearance="light"] .iv-quick-bad:hover{background:rgba(var(--sl-danger-base-rgb),.08)!important}

/* ── 40. .sim-* — /Simulator ──────────────────────────────────────────────────
   .sim-kpi-card is already var(--bg-card), so .sim-kpi-value (#fff) is the
   headline number at 1.00:1. Two states a resting sweep cannot see are included:
   .sim-flash-delta.* lives ~1.3s after each slider move, and .sim-chart-tooltip is
   an opaque #020617 popover whose last cell declares NO colour and therefore
   inherits the light page ink — near-black on near-black. */
:root[data-appearance="light"] .sim-chart-tooltip{background:var(--bg-card)!important;box-shadow:0 6px 20px rgba(15,23,42,.14)!important}
:root[data-appearance="light"] :is(.sim-chart-tooltip .tt-month,.sim-chart-tooltip .tt-line span:first-child,
  .sim-kpi-delta.flat,.sim-hyp-tag.empty,.sim-status-badge.draft,.sim-empty-banner-btn.secondary){color:var(--sl-text-muted)!important}
:root[data-appearance="light"] :is(.sim-kpi-value,.sim-insight-body strong,.sim-needfin-card h3,
  .sim-chart-tooltip .tt-line span:last-child,.sim-empty-banner-text strong){color:var(--sl-text-strong)!important}
:root[data-appearance="light"] :is(.sim-finvar-body,.sim-needfin-card p){color:var(--sl-text-body)!important}
:root[data-appearance="light"] .sim-chart-svg .lead-dot-core{fill:var(--sl-text-strong)!important}
:root[data-appearance="light"] :is(.sim-kpi-card.good .sim-kpi-value,.sim-insight.good .sim-insight-head,
  .sim-kpi-range .opt-val,.sim-kpi-delta.up,.sim-flash-delta.up,.sim-status-badge.finished){color:var(--sl-success-ink)!important}
:root[data-appearance="light"] :is(.sim-kpi-card.good .sim-kpi-label i,.sim-chart-svg .line-opt){color:var(--sl-success-base)!important;stroke:var(--sl-success-base)!important}
:root[data-appearance="light"] :is(.sim-kpi-card.warn .sim-kpi-value,.sim-insight.warn .sim-insight-head,
  .sim-kpi-card.warn .sim-kpi-label i,.sim-hyp-tag,.sim-start-edit-input,.sim-start-edit.clear:hover,
  .sim-empty-banner-text,.sim-empty-banner-btn,.sim-readonly-notice,.sim-needfin-card i){color:var(--sl-warning-ink)!important}
:root[data-appearance="light"] :is(.sim-kpi-card.bad .sim-kpi-value,.sim-insight.bad .sim-insight-head,
  .sim-kpi-range .cons-val,.sim-kpi-delta.down,.sim-flash-delta.down){color:var(--sl-danger-ink)!important}
:root[data-appearance="light"] :is(.sim-kpi-card.bad .sim-kpi-label i,.sim-chart-svg .line-cons){color:var(--sl-danger-base)!important;stroke:var(--sl-danger-base)!important}

/* ── 41. the four critic-endpoint pages — .ue-* .sp-* .sf-* .pp-* ─────────────
   unit_economics, standardization, seo_flywheel and partnership_playbook each
   mount their critique inside a page-owned rgba(15,23,42,.55) card with the same
   meter / flag / verdict vocabulary, so they are corrected as one family.
   .pp-matrix-dot::after is the only true 1.00:1 in the group: the same declaration
   sets background:var(--bg-card) AND color:#fff, and --bg-card resolves to #ffffff
   in light — white text on a white tooltip. */
:root[data-appearance="light"] :is(.ue-card,.sp-card,.sf-card,.pp-card){background:var(--bg-card)!important;border-color:var(--border)!important}
:root[data-appearance="light"] :is(.ue-kpi,.ue-chan-row,.ue-bench,.sp-sop,.sp-auto,.sf-tier,
  .sf-cal-q,.sf-cluster,.sf-proj,.pp-out,.pp-matrix,.pp-matrix-q,.pp-vex,.pp-vex-side,
  .pp-term){background:var(--bg-card-2)!important;border-color:var(--border)!important}
:root[data-appearance="light"] :is(.ue-bar-wrap,.sp-margin-track){background:var(--bg-hover)!important}
:root[data-appearance="light"] .pp-matrix-dot::after{color:var(--sl-text-strong)!important;box-shadow:0 0 0 1px var(--border)!important}
:root[data-appearance="light"] :is(.ue-verdict-headline,.ue-kpi-value,.ue-fix-title,
  .ue-chan-name,.sp-sop-title,.sp-auto-task,.sp-meter-num,.sp-margin-pct,.sp-prod-title,
  .sf-cal-art,.sf-cluster-name,.sf-meter-num,.pp-out-name,.pp-vex-text,.pp-meter-num){color:var(--sl-text-strong)!important}
:root[data-appearance="light"] :is(.ue-fix-note,.sp-prod-note,.sf-tier-name,.sf-cluster-pillar,
  .pp-out-body,.pp-term-label){color:var(--sl-text-body)!important}
:root[data-appearance="light"] :is(.ue-kpi-sub,.ue-legend,.ue-chan-note,
  .ue-bench,.sp-margin-label,.sp-sop-note,.sf-meter-small,.sf-tier-vol,
  .pp-meter-small,.pp-matrix-axis-x,.pp-matrix-axis-y,.pp-out-fit-low){color:var(--sl-text-muted)!important}
:root[data-appearance="light"] :is(.ue-verdict.healthy .ue-verdict-label,.ue-verdict.healthy .ue-verdict-icon,
  .ue-flag-ok,.ue-flag-info,.sp-auto-save,.sp-flag-ok,.sf-tier-count,.sf-cal-q-label,
  .sf-cluster-vol,.sf-flag-ok,.sf-flag-info,.pp-out-fit-strong,.pp-flag-ok){color:var(--sl-success-ink)!important}
:root[data-appearance="light"] :is(.ue-verdict.watch .ue-verdict-label,.ue-verdict.watch .ue-verdict-icon,
  .ue-fix-label,.ue-fix-icon,.ue-chan-cac,.sp-sop-num,.sp-sop-time,.sp-prod-label,.sp-prod-icon,
  .sf-cluster-count,.pp-out-hook,.pp-out-fit-medium,.pp-term-value){color:var(--sl-warning-ink)!important}
:root[data-appearance="light"] :is(.ue-verdict.unprofitable .ue-verdict-label,
  .ue-verdict.unprofitable .ue-verdict-icon,.ue-flag-warn,.sp-flag-warn,.sf-flag-warn,
  .pp-flag-warn){color:var(--sl-danger-ink)!important}
/* the gradient-clipped emerald headline: the ramp itself is the ink, so it is re-cut
   rather than replaced — #6ee7b7→#10b981 measures 1.9:1 on a white card */
:root[data-appearance="light"] .iq-emerald{background-image:linear-gradient(135deg,var(--sl-success-base),var(--sl-success-deep))!important}

/* ── 42. .bmc-* / .bx-* — /business_model_canvas ───────────────────────────────────
   SL-BMC-VISUAL (2026-09-04): the result stage renders the .bx-* design. Its surfaces and
   ink come from the theme tokens (--bg-card, --border, --text...) and its hues are the
   --bx-<hue> trio (base / ink / rgb) the page declares for the dark face. Every .bx-* tint
   is rgba(var(--h-rgb), alpha), so the light face re-cuts ONLY the trio here - no per-class
   rule, no !important. Base hues sit at the -700 step (4.5:1+ on white), inks at -900, and
   the wash/edge alphas rise so the hairlines that carry elevation here actually read.
   The .bmc-tab* / .bmc-block* rules stay for renderBMC's legacy tab pane (2026-06 rows
   that still carry `canvas`); the .dyn-* and .bmcv-* classes no longer exist. */
:root[data-appearance="light"]{--bx-em:#047857;--bx-em-ink:#064e3b;--bx-em-rgb:4,120,87;--bx-cyan:#0e7490;--bx-cyan-ink:#164e63;--bx-cyan-rgb:14,116,144;--bx-accent:#0e7490;--bx-accent-ink:#164e63;--bx-accent-rgb:14,116,144;--bx-rose:#be123c;--bx-rose-ink:#9f1239;--bx-rose-rgb:190,18,60;--bx-amber:#9a4e07;--bx-amber-ink:#78350f;--bx-amber-rgb:154,78,7;--bx-violet:#6d28d9;--bx-violet-ink:#4c1d95;--bx-violet-rgb:109,40,217;--bx-blue:#1d4ed8;--bx-blue-ink:#1e3a8a;--bx-blue-rgb:29,78,216;--bx-pink:#be185d;--bx-pink-ink:#831843;--bx-pink-rgb:190,24,93;--bx-yellow:#a16207;--bx-yellow-ink:#713f12;--bx-yellow-rgb:161,98,7;--bx-wash:.06;--bx-wash-hi:.10;--bx-edge:.45;--bx-edge-hi:.62;--bx-strong:var(--sl-text-strong);--bx-text:var(--sl-text-body);--bx-muted:var(--sl-text-muted);--bx-dim:var(--sl-text-dim);--bx-on-accent:#fff}
:root[data-appearance="light"] .bmc-tabs{background:var(--bg-card-2)!important;border-color:var(--border)!important}
:root[data-appearance="light"] .bmc-tab{color:var(--sl-text-muted)!important}
:root[data-appearance="light"] .bmc-tab:hover:not(.is-active){color:var(--sl-text-strong)!important;background:var(--bg-hover)!important}
:root[data-appearance="light"] .bmc-tab.is-active{color:var(--sl-success-ink)!important;background:rgba(var(--sl-success-base-rgb),.12)!important;box-shadow:inset 0 0 0 1px rgba(var(--sl-success-base-rgb),.32)!important}
:root[data-appearance="light"] :is(.bmc-headline,.bmc-block-title){color:var(--sl-text-strong)!important}
:root[data-appearance="light"] .bmc-block-items{color:var(--sl-text-body)!important}
:root[data-appearance="light"] .bmc-block-summary{color:var(--sl-text-muted)!important;border-top-color:var(--border)!important}

/* ── 43. .mvp-* / .cl-* — /company_logo ───────────────────────────────────────
   The generate panel and the chip rail that shapes the AI run, plus the tagline
   and the mid-generation status the founder watches. Only .mvp-textarea was
   covered (block 7). .mvp-vchip.active is the SELECTED chip: #fff on a 22%-alpha
   cyan wash that composites to near-white, ~1.3:1 — selection was invisible. */
:root[data-appearance="light"] :is(.mvp-card,.mvp-studio-card){background:var(--bg-card)!important;border-color:var(--border)!important}
:root[data-appearance="light"] :is(.mvp-vchip,.mvp-cta-secondary){background:var(--bg-card-2)!important;border-color:var(--border)!important}
:root[data-appearance="light"] .mvp-vchip.active{background:var(--badge-bg)!important;border-color:var(--badge-border)!important}
:root[data-appearance="light"] :is(.mvp-vchip.active,.mvp-vchip.active i){color:var(--sl-accent-ink)!important}
:root[data-appearance="light"] :is(.mvp-step-title,.mvp-tagline,.mvp-loader-text,
  .mvp-cta-secondary){color:var(--sl-text-strong)!important}
:root[data-appearance="light"] :is(.mvp-vchip,.cl-vchip.active .cl-eg){color:var(--sl-text-body)!important}
:root[data-appearance="light"] :is(.mvp-step-sub,.mvp-label,.mvp-loader-sub,
  .cl-vchip .cl-eg,.cl-vchip:hover .cl-eg){color:var(--sl-text-muted)!important}

/* ── 44. two leftovers and the inline-style sweep ─────────────────────────────
   .sl-result-head-icon (page-chassis.js:672) is the one .sl-result-* member block
   20 missed — #34d399 sitting on the head that block 20 turned var(--bg-card-2).

   The rest is the fault no class-based rule can reach: the SLViz renderers emit
   their hero as an UNCLASSED <div style="...color:#fff..."> (pricing_strategy:67,
   business_model_canvas:164, industry_channels:141, pitch_deck:97,
   customer_case_study:141, market_penetration:51, seo_flywheel:433,
   partnership_playbook:429) and their raw-JSON fallback as <pre style="color:#cbd5e1">.
   An !important author declaration outranks a non-important inline one, so these
   are reachable — anchored on the AI-output mounts only, never document-wide, and
   restricted to the three elements the renderers actually emit. */
:root[data-appearance="light"] .sl-result-head-icon{color:var(--sl-success-base)!important}
:root[data-appearance="light"] :is(.sl-result-body,.slv-sec,.ue-card,.sp-card,.sf-card,.pp-card,.rep-fb,.ld-fb)
  :is(div,pre,b)[style*="color:#fff"]{color:var(--sl-text-strong)!important}
:root[data-appearance="light"] :is(.sl-result-body,.slv-sec,.ue-card,.sp-card,.sf-card,.pp-card,.rep-fb,.ld-fb)
  :is(div,pre,b)[style*="color:#cbd5e1"]{color:var(--sl-text-body)!important}
:root[data-appearance="light"] :is(.sl-result-body,.slv-sec,.ue-card,.sp-card,.sf-card,.pp-card,.rep-fb,.ld-fb)
  :is(div,pre,b)[style*="color:#94a3b8"]{color:var(--sl-text-muted)!important}
:root[data-appearance="light"] .srf-special-h[style]{color:var(--sl-text-strong)!important}

/* -- 29. the regression block 28 introduced, and the states it never inventoried --------
   .ls-step-num is the important one: block 28 gave .ls-card a white background and left this
   child at color:#fcd34d over its own rgba(252,211,77,.12) wash — amber on amber-white, 1.38.
   It was 2.78 BEFORE the sweep. Re-toning a container without its text is worse than touching
   neither, which block 28's own header says, and then did. One ink declaration closes it. */
:root[data-appearance="light"] .ls-step-num{
  color:var(--sl-warning-ink)!important;background:rgba(180,83,9,.10)!important}

/* .rep-seg — a segmented single-select that stayed a dark slate pill on a white page. The
   SELECTED state measured 1.34, the worst node on that page: the founder could not see which
   option was chosen. Selection state is information, not decoration, so it gets the accent. */
:root[data-appearance="light"] .rep-seg button{
  background:var(--bg-card-2)!important;color:var(--sl-text-body)!important;
  border-color:var(--border)!important}
:root[data-appearance="light"] .rep-seg button:hover{
  background:var(--bg-hover)!important;color:var(--sl-text-strong)!important}
:root[data-appearance="light"] .rep-seg button[aria-pressed="true"]{
  background:rgba(3,105,161,.12)!important;color:var(--sl-accent-ink)!important;
  border-color:rgba(3,105,161,.45)!important}

/* .srf-raw-l — 4.35, short by 0.15. The identical ink passes at 4.76 on .srf-table th because
   that sits on pure white; this label sits on the recessed --bg-card-2 ground block 28 gave
   its container, which is what pushes it under. Same pairing, milder. */
:root[data-appearance="light"] .srf-raw-l{color:var(--sl-text-muted)!important}

/* gradient-painted text (-webkit-background-clip:text). Reset to a flat semantic ink the same
   way common.css already handles .rs-page-header — a gradient reads as a coloured smudge on
   white, and its darkest stop was only 2.77 against the page. */
:root[data-appearance="light"] :is(.rf-mantra-problem,.rep-mantra-hero){
  color:var(--sl-danger-ink)!important;-webkit-text-fill-color:currentColor!important;
  background:none!important;text-shadow:none!important}

/* -- 30. inline-styled AI output: the classification badge and the free-preview lock ----
   A THIRD hiding place for colour, after stylesheets and runtime-injected sheets: style=""
   attributes assembled inside JS string literals. Invisible to both kinds of grep. An author
   !important beats a normal inline declaration, so these are reachable; the attribute-substring
   selectors below target the exact literals, each generated in exactly one place. */

/* the problem-classification pill. Hue is semantic (complex vs simple) so both survive. */
:root[data-appearance="light"] .srf-badge[style*="167,139,250"]{
  color:#6d28d9!important;background:rgba(109,40,217,.12)!important}
:root[data-appearance="light"] .srf-badge[style*="56,189,248"]{
  color:var(--sl-accent-ink)!important;background:rgba(3,105,161,.12)!important}

/* THE DARK CURTAIN. This gradient fades the last 92px of the preview to rgba(11,18,32,.93) —
   near-black — so on a white page it paints a black band across the founder's own reframed
   problem. It must fade to the paper. This is the single worst thing in the owner's screenshot. */
:root[data-appearance="light"] .sl-preview-lock div[style*="rgba(11,18,32"]{
  background:linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.93) 82%)!important}
/* div[...] not a[...]: the Unlock CTA keeps #fff, correctly, on its opaque accent gradient. */
:root[data-appearance="light"] .sl-preview-lock div[style*="color:#fff"]{
  color:var(--sl-text-strong)!important}
:root[data-appearance="light"] .sl-preview-lock div[style*="color:#94a3b8"]{
  color:var(--sl-text-body)!important}
:root[data-appearance="light"] .sl-preview-lock i[style*="color:#22d3ee"]{
  color:var(--sl-accent-ink)!important}
/* ── 33. Competitor_study — .ai-scan-* (the "Analyzing…" panel) and .cv-* (the competitor-
   visual renderer). Neither family exists anywhere in common.css before this block (0 hits on
   both prefixes) — this page was never inventoried by any earlier sweep. Every literal below is
   a hardcoded dark-era colour in the page's own <style> block, or an inline style="" the JS
   renderer assembles at runtime (a third hiding place, invisible to a class grep); none use
   var(--sl-*), so none flip with the appearance axis. Container and children are re-toned in
   the same block, per policy — a light card with left-behind dark-era text is worse than either
   alone. */
:root[data-appearance="light"] .ai-scan-wrap{background:var(--bg-card-2)!important;border-color:var(--border)!important}
:root[data-appearance="light"] :is(.ai-scan-stage,.ai-scan-stage .ai-scan-stage-ico,.ai-scan-counter){color:var(--sl-text-muted)!important}
:root[data-appearance="light"] :is(.ai-scan-stage.is-done,.ai-scan-stage.is-done .ai-scan-stage-ico){color:var(--sl-success-ink)!important}
:root[data-appearance="light"] .ai-scan-attempt{color:var(--sl-warning-ink)!important}
/* gradient-clipped counter number and competitor-name heading — same treatment already used on
   .rf-mantra-problem: flatten to a semantic ink instead of trying to darken three gradient stops. */
:root[data-appearance="light"] :is(.ai-scan-counter .num,.cv-card-name){
  background:none!important;-webkit-text-fill-color:currentColor!important;color:var(--sl-accent-ink)!important}

/* body copy hardcoded at #94a3b8 across six members — includes the owner-named Market Gap /
   Strategic Insight text (.cv-insight-text). */
:root[data-appearance="light"] :is(.cv-card-oneliner,.cv-insight-text,.cv-radar-legend-item,
  .cv-tag-slate,.cv-matrix thead th){color:var(--sl-text-muted)!important}
/* the three threat/tag hues, each hardcoded twice (badge + chip) */
:root[data-appearance="light"] :is(.cv-threat-high,.cv-tag-red,.cv-weakness){color:var(--sl-danger-ink)!important}
:root[data-appearance="light"] :is(.cv-threat-medium,.cv-tag-amber){color:var(--sl-warning-ink)!important}
:root[data-appearance="light"] :is(.cv-threat-low,.cv-tag-emerald){color:var(--sl-success-ink)!important}

/* inline-styled containers the JS renderer assembles: the Pricing/Audience sub-boxes (identical
   style="" literal, both instances share one selector) and the "why they win" strip. */
:root[data-appearance="light"] .cv-card [style*="background:rgba(2,6,23,.4)"],
:root[data-appearance="light"] .cv-card [style*="background:rgba(30,41,59,.5)"]{background:var(--bg-card-2)!important}
/* inline-styled text inside those boxes, and the Strength/mini-score numeric readouts — the same
   three-hue literal set as the class-based tags above, picked at render time from one score. */
:root[data-appearance="light"] .cv-card [style*="color:#94a3b8"]{color:var(--sl-text-muted)!important}
:root[data-appearance="light"] .cv-card [style*="color:#f87171"]{color:var(--sl-danger-ink)!important}
:root[data-appearance="light"] .cv-card [style*="color:#fbbf24"]{color:var(--sl-warning-ink)!important}
:root[data-appearance="light"] .cv-card [style*="color:#34d399"]{color:var(--sl-success-ink)!important}

/* positioning-map competitor labels — an SVG presentation attribute (fill=), the same hiding
   place already fixed once for fill="#fff"; here it's 7 hardcoded identity hues. The dot keeps
   its colour for visual linking; only the text needed to become readable. */
:root[data-appearance="light"] .cv-map-svg text[fill="#a78bfa"],
:root[data-appearance="light"] .cv-map-svg text[fill="#22d3ee"],
:root[data-appearance="light"] .cv-map-svg text[fill="#f87171"],
:root[data-appearance="light"] .cv-map-svg text[fill="#fbbf24"],
:root[data-appearance="light"] .cv-map-svg text[fill="#34d399"],
:root[data-appearance="light"] .cv-map-svg text[fill="#fb923c"],
:root[data-appearance="light"] .cv-map-svg text[fill="#e879f9"]{fill:var(--sl-text-strong)!important}
/* radar-chart dimension labels — same SVG-attribute hiding place, #94a3b8. */
:root[data-appearance="light"] .cv-radar-wrap svg text[fill="#94a3b8"]{fill:var(--sl-text-muted)!important}

/* -- 31. /market_sizing: the whole page was dark-era ------------------------------
   72 colour rules in the page's own <style>, all .ms-*, none covered by the light layer.
   Enumerated from the shipped file, not guessed. Containers and their inks move together —
   re-toning a box and leaving its text is how a previous fix made a panel WORSE than
   untouched. The three ink weights stay distinct: they carry the page's hierarchy. */
:root[data-appearance="light"] .ms-ai-stage-dot,
:root[data-appearance="light"] .ms-ana-cmp,
:root[data-appearance="light"] .ms-ana-exit-comp,
:root[data-appearance="light"] .ms-ana-scenario,
:root[data-appearance="light"] .ms-ana-score-card,
:root[data-appearance="light"] .ms-ana-section,
:root[data-appearance="light"] .ms-ana-ue-cell,
:root[data-appearance="light"] .ms-ana-verdict,
:root[data-appearance="light"] .ms-ana-year,
:root[data-appearance="light"] .ms-analysis-loading,
:root[data-appearance="light"] .ms-card,
:root[data-appearance="light"] .ms-collapsible-body,
:root[data-appearance="light"] .ms-collapsible-head,
:root[data-appearance="light"] .ms-exit-card,
:root[data-appearance="light"] .ms-exit-comp,
:root[data-appearance="light"] .ms-scen-bar-wrap,
:root[data-appearance="light"] .ms-stage-circle,
:root[data-appearance="light"] .ms-tl-chart,
:root[data-appearance="light"] .ms-ue-bar-wrap,
:root[data-appearance="light"] .ms-ue-ratio{background:var(--bg-card-2)!important;border-color:var(--border)!important}
:root[data-appearance="light"] .ms-ai-scan-headline,
:root[data-appearance="light"] .ms-ana-cmp-name,
:root[data-appearance="light"] .ms-ana-exit-name,
:root[data-appearance="light"] .ms-ana-scenario-value,
:root[data-appearance="light"] .ms-ana-ue-value,
:root[data-appearance="light"] .ms-ana-verdict-line,
:root[data-appearance="light"] .ms-ana-year-customers,
:root[data-appearance="light"] .ms-brief-row-value,
:root[data-appearance="light"] .ms-derived-value,
:root[data-appearance="light"] .ms-exit-card-value,
:root[data-appearance="light"] .ms-exit-comp-name,
:root[data-appearance="light"] .ms-gauge-num,
:root[data-appearance="light"] .ms-scen-value,
:root[data-appearance="light"] .ms-step-title,
:root[data-appearance="light"] .ms-ue-bar-value{color:var(--sl-text-strong)!important}
:root[data-appearance="light"] .ms-ai-stage-text,
:root[data-appearance="light"] .ms-ana-cmp-note,
:root[data-appearance="light"] .ms-ana-exit-meta,
:root[data-appearance="light"] .ms-ana-scenario-label,
:root[data-appearance="light"] .ms-ana-section-title,
:root[data-appearance="light"] .ms-analysis-loading-text,
:root[data-appearance="light"] .ms-autofill-status,
:root[data-appearance="light"] .ms-brief-loading,
:root[data-appearance="light"] .ms-collapsible-body,
:root[data-appearance="light"] .ms-derived-label,
:root[data-appearance="light"] .ms-funnel-label,
:root[data-appearance="light"] .ms-funnel-pct,
:root[data-appearance="light"] .ms-label,
:root[data-appearance="light"] .ms-scen-label,
:root[data-appearance="light"] .ms-status-elapsed,
:root[data-appearance="light"] .ms-step-sub,
:root[data-appearance="light"] .ms-ue-bar-label,
:root[data-appearance="light"] .ms-upgrade-card-body{color:var(--sl-text-body)!important}
:root[data-appearance="light"] .ms-ana-scenario-assumption,
:root[data-appearance="light"] .ms-ana-ue-label,
:root[data-appearance="light"] .ms-ana-year-label,
:root[data-appearance="light"] .ms-analysis-loading-attempt,
:root[data-appearance="light"] .ms-brief-empty,
:root[data-appearance="light"] .ms-brief-row-label,
:root[data-appearance="light"] .ms-collapsible-chevron,
:root[data-appearance="light"] .ms-exit-card-label,
:root[data-appearance="light"] .ms-exit-comp-year,
:root[data-appearance="light"] .ms-magnitude,
:root[data-appearance="light"] .ms-scen-assumption,
:root[data-appearance="light"] .ms-stage-name,
:root[data-appearance="light"] .ms-ue-ratio-label,
:root[data-appearance="light"] .ms-unit{color:var(--sl-text-muted)!important}
/* the text INPUTS carry both a dark fill and near-white ink — pair them; their example is the form kit's
   (--sl-fk-ph, lighter than the value in both appearances; SL-MV2-KIT-PH-OWNER, 07 close) */
:root[data-appearance="light"] .ms-input{
  background:var(--input-bg)!important;color:var(--text)!important;border-color:var(--border-light)!important}
/* hover on the collapsible head was its own dark slab */
:root[data-appearance="light"] .ms-collapsible-head:hover{background:var(--bg-hover)!important}
/* the tooltip bubble is deliberately dark in BOTH themes — a floating overlay reads better
   inverted, the same choice .sl-thoughts makes. Left alone: .ms-info::after */

/* -- 32. /market_sizing: the SEMANTIC inks block 31 left behind -------------------
   Block 31 re-toned the neutral ramp and stopped. Every red/amber/green/cyan stayed at its
   dark-era value, so the parts that carry MEANING were the ones still unreadable — the RED
   FLAGS rows measured pale rose (#fda4af) on an 8% red wash over white.
   Hue is preserved, weight is not: danger stays red, it just becomes a red that works on paper. */
:root[data-appearance="light"] .ms-ana-cred.cred-fictional,
:root[data-appearance="light"] .ms-ana-flag i,
:root[data-appearance="light"] .ms-ana-ue-verdict.ue-broken,
:root[data-appearance="light"] .ms-ue-verdict-broken{color:var(--sl-danger-ink)!important}
:root[data-appearance="light"] .ms-ana-cred.cred-shaky,
:root[data-appearance="light"] .ms-ana-ue-verdict.ue-ok,
:root[data-appearance="light"] .ms-chip-amber,
:root[data-appearance="light"] .ms-tier-pill.tier-premium,
:root[data-appearance="light"] .ms-ue-verdict-ok{color:var(--sl-warning-ink)!important}
:root[data-appearance="light"] .ms-ai-stage.done .ms-ai-stage-text,
:root[data-appearance="light"] .ms-ana-cred.cred-plausible,
:root[data-appearance="light"] .ms-ana-ue-verdict.ue-healthy,
:root[data-appearance="light"] .ms-flag-ok,
:root[data-appearance="light"] .ms-stage-past .ms-stage-circle,
:root[data-appearance="light"] .ms-stage-past .ms-stage-name,
:root[data-appearance="light"] .ms-ue-verdict-healthy{color:var(--sl-success-ink)!important}
/* the flag ROW itself: ink and wash together, or the row is a pale smudge */
:root[data-appearance="light"] .ms-ana-flag{
  color:var(--sl-danger-ink)!important;
  background:rgba(185,28,28,.07)!important;
  border-color:rgba(185,28,28,.28)!important}

/* .ms-ai-scan is a SECOND loading container, distinct from .ms-analysis-loading which block 31
   already covered — fixing one and not the other is why the panel stayed dark. The radial
   accent glow is kept; only the near-black base underneath it is replaced. */
:root[data-appearance="light"] .ms-ai-scan{
  background:radial-gradient(circle at 50% 0%,rgba(3,105,161,.06),transparent 60%),var(--bg-card-2)!important;
  border-color:var(--border)!important}

/* Stages that have not run yet are dimmed to .32 — correct intent, wrong amount on paper, where
   it reads as absent rather than pending. Raised for light only; dark keeps its .32. */
:root[data-appearance="light"] .ms-ai-stage{opacity:.62!important}
:root[data-appearance="light"] .ms-ai-stage.active,
:root[data-appearance="light"] .ms-ai-stage.done{opacity:1!important}
:root[data-appearance="light"] .ms-ai-stage-dot{
  background:rgba(3,105,161,.14)!important;border-color:rgba(3,105,161,.35)!important}

/* -- 33. /market_sizing: the AI's own reasoning, the score, and the SVG chart ------
   Three cases blocks 31/32 missed, one of them structurally. */

/* The rationale boxes under each input carry the AI's REASONING — the most valuable text on
   the panel — at #a5b4fc on a 6% indigo wash. Pale indigo on near-white. */
:root[data-appearance="light"] .ms-ai-hint{
  color:var(--sl-text-body)!important;
  background:rgba(67,56,202,.05)!important;
  border-color:rgba(67,56,202,.22)!important}
:root[data-appearance="light"] .ms-ai-hint i{color:var(--sl-accent-ink)!important}
:root[data-appearance="light"] .ms-chip-purple{
  color:#5b21b6!important;background:rgba(91,33,182,.08)!important;border-color:rgba(91,33,182,.25)!important}
/* .ms-derived is a gradient wash with no ink of its own — its children inherit, so the ink
   goes on the container or nothing changes. */
:root[data-appearance="light"] .ms-derived{
  background:linear-gradient(135deg,rgba(3,105,161,.05),rgba(91,33,182,.04))!important;
  border-color:rgba(3,105,161,.22)!important}

/* The score gauge: color:#fff is declared on .ms-gauge-num and INHERITED by .ms-gauge-big,
   which declares no colour of its own. Block 31 re-inked the leaf and missed the declaration,
   so "58" stayed white on a white card. */
:root[data-appearance="light"] .ms-gauge-num{color:var(--sl-text-strong)!important}

/* THE SVG CHART. These labels are <text fill="#e2e8f0"> presentation attributes, not CSS —
   a `color` rule can never reach them, and an enumerator that scans CSS declarations cannot
   even see them. A stylesheet `fill` DOES beat a presentation attribute, so one rule fixes the
   whole chart. Scoped under the chart so no other SVG on the page is repainted. */
:root[data-appearance="light"] .ms-tl-chart{
  background:var(--bg-card-2)!important;border-color:var(--border)!important}
:root[data-appearance="light"] .ms-tl-chart text[fill="#e2e8f0"]{fill:var(--sl-text-strong)!important}
:root[data-appearance="light"] .ms-tl-chart text[fill="#94a3b8"]{fill:var(--sl-text-body)!important}
:root[data-appearance="light"] .ms-tl-chart text[fill="#64748b"]{fill:var(--sl-text-muted)!important}
/* the same three fills appear on the page's other inline charts */
:root[data-appearance="light"] svg text[fill="#e2e8f0"]{fill:var(--sl-text-strong)!important}
:root[data-appearance="light"] svg text[fill="#94a3b8"]{fill:var(--sl-text-body)!important}
:root[data-appearance="light"] svg text[fill="#64748b"]{fill:var(--sl-text-muted)!important}

/* ══════════════════════════════════════════════════════════════════════════════════════
   LIGHT-APPEARANCE SWEEP — blocks 45-58.
   Every selector is scoped to :root[data-appearance="light"]. No dark literal is edited,
   so dark ends byte-identical. THE PAIRING RULE is applied without exception: no container
   is re-toned without, in the same block, the ink it declares AND the ink it merely passes
   down by inheritance. Six hiding places covered: neutral ramp, semantic ramp, inherited
   colour, SVG presentation attributes, inline style="" built in JS, and opacity-dimmed
   states (raised for light only, dark value untouched).
   ══════════════════════════════════════════════════════════════════════════════════════ */

/* ── 45. /regulatory_pathway — the entire page ──────────────────────────────────────────
   `grep '\.rp-' common.css` returned 0: not one light rule existed. Every card was a navy
   slab (rgba(15,23,42,.4-.6)) and every ink was cut for it, so on a white page the page
   rendered as dark boxes with white/pale-pink text, and the pale-on-pale pills (Risk 57/100,
   RED FLAGS) were the worst nodes on the site. */

/* the AI loading slab. .rp-ai-stage is the OWNER of the stage ink: .rp-ai-stage-dot
   (background:currentColor) and .rp-ai-stage-text declare no colour and inherit it. */
:root[data-appearance="light"] .rp-ai-scan{
  background:radial-gradient(circle at 50% 35%,rgba(190,24,93,.05),var(--bg-card-2) 70%)!important;
  border-color:var(--border)!important}
:root[data-appearance="light"] .rp-ai-scan-headline{color:var(--sl-text-strong)!important}
:root[data-appearance="light"] .rp-ai-scan-sub{color:var(--sl-text-muted)!important}
:root[data-appearance="light"] .rp-ai-scan-status{
  background:var(--bg-hover)!important;color:var(--sl-text-body)!important}
:root[data-appearance="light"] .rp-status-dot{background:#be185d!important}
:root[data-appearance="light"] .rp-ai-stage{color:var(--sl-text-muted)!important;opacity:.8!important}
:root[data-appearance="light"] .rp-ai-stage.active{color:#be185d!important;opacity:1!important}
:root[data-appearance="light"] .rp-ai-stage.done{color:var(--sl-success-base)!important;opacity:1!important}

/* the analysis header. .rp-ana-pill.score overrides only the ground, so it keeps the base
   ink — fixing the base is what fixes the score pill; fixing only .score makes it worse. */
:root[data-appearance="light"] .rp-ana-pill{
  background:var(--bg-hover)!important;color:var(--sl-text-body)!important;border-color:var(--border)!important}
:root[data-appearance="light"] .rp-ana-pill.score{
  background:linear-gradient(135deg,rgba(190,24,93,.12),rgba(109,40,217,.10))!important;
  color:var(--sl-text-strong)!important}
:root[data-appearance="light"] .rp-ana-pill.amber{
  color:var(--sl-warning-ink)!important;background:rgba(180,83,9,.10)!important}
:root[data-appearance="light"] .rp-ana-verdict{color:var(--sl-text-strong)!important}
:root[data-appearance="light"] .rp-ana-section-title{color:var(--sl-text-muted)!important}
:root[data-appearance="light"] .rp-ana-summary{color:var(--sl-text-body)!important}
:root[data-appearance="light"] .rp-ana-stat{
  background:var(--bg-card-2)!important;border-color:var(--border)!important}
:root[data-appearance="light"] .rp-ana-stat-label{color:var(--sl-text-muted)!important}
:root[data-appearance="light"] .rp-ana-stat-value{color:var(--sl-text-strong)!important}
:root[data-appearance="light"] .rp-ana-flag-item{
  color:var(--sl-danger-ink)!important;background:rgba(185,28,28,.07)!important}
:root[data-appearance="light"] .rp-ana-step{
  background:var(--bg-card-2)!important;border-color:var(--border)!important}
:root[data-appearance="light"] .rp-ana-step-name{color:var(--sl-text-strong)!important}
:root[data-appearance="light"] .rp-ana-step-meta{color:#be185d!important}
:root[data-appearance="light"] .rp-ana-step-detail,
:root[data-appearance="light"] .rp-ana-comp-note{color:var(--sl-text-muted)!important}

/* RED FLAGS / STRATEGIC / COMPARABLE result cards — wash kept (it is the card's meaning),
   ink re-cut. #fecdd3 on a pink wash measured ~1.2:1. */
:root[data-appearance="light"] .rp-flag-big{
  background:linear-gradient(135deg,rgba(185,28,28,.09),rgba(220,38,38,.04))!important;
  border-color:rgba(185,28,28,.28)!important}
:root[data-appearance="light"] .rp-flag-label{color:var(--sl-danger-ink)!important}
:root[data-appearance="light"] .rp-flag-text{color:var(--sl-text-body)!important}
:root[data-appearance="light"] .rp-strat-card{
  background:linear-gradient(135deg,rgba(109,40,217,.08),rgba(139,92,246,.04))!important;
  border-color:rgba(109,40,217,.24)!important}
:root[data-appearance="light"] .rp-strat-text{color:var(--sl-text-body)!important}
:root[data-appearance="light"] .rp-comp-card{
  background:linear-gradient(135deg,rgba(109,40,217,.06),var(--bg-card-2))!important;
  border-color:var(--border)!important}
:root[data-appearance="light"] .rp-comp-name-2{color:var(--sl-text-strong)!important}
:root[data-appearance="light"] .rp-comp-note-2{color:var(--sl-text-body)!important}

/* .rp-prose is an INHERITANCE owner: its p / ul / li declare no colour at all. */
:root[data-appearance="light"] .rp-prose{color:var(--sl-text-body)!important}
:root[data-appearance="light"] .rp-prose strong{color:var(--sl-text-strong)!important}
:root[data-appearance="light"] .rp-prose em,
:root[data-appearance="light"] .rp-prose-lead{color:#831843!important}
:root[data-appearance="light"] .rp-prose li::before{color:#be185d!important}

/* the status-pill checklist table */
:root[data-appearance="light"] .rp-chk-table{background:var(--bg-card)!important;border-color:var(--border)!important}
:root[data-appearance="light"] .rp-chk-table thead th{
  background:var(--bg-hover)!important;color:var(--sl-text-muted)!important}
:root[data-appearance="light"] .rp-chk-table tbody tr.detail-row{background:var(--bg-card-2)!important}
:root[data-appearance="light"] .rp-chk-item-name{color:var(--sl-text-strong)!important}
:root[data-appearance="light"] .rp-chk-meta-cell{color:#be185d!important}
/* .det-row declares only padding and inherits this cell's ink */
:root[data-appearance="light"] .rp-chk-detail-cell{color:var(--sl-text-muted)!important}
:root[data-appearance="light"] .rp-chk-detail-cell strong{color:var(--sl-text-strong)!important}
:root[data-appearance="light"] .rp-chk-table tbody tr[data-status="na"] td:nth-child(n+2){opacity:.8!important}
:root[data-appearance="light"] .rp-chk-table tbody tr[data-status="na"] .rp-chk-item-name{color:var(--sl-text-muted)!important}
:root[data-appearance="light"] .rp-chk-table tbody tr[data-status="na"] td:first-child{border-left-color:var(--border-light)!important}
:root[data-appearance="light"] .rp-chk-expand{color:var(--sl-text-muted)!important}
:root[data-appearance="light"] .rp-chk-expand:hover{color:var(--sl-text-strong)!important}
:root[data-appearance="light"] .rp-chk-seg{background:var(--bg-hover)!important;border-color:var(--border)!important}
:root[data-appearance="light"] .rp-seg-btn{color:var(--sl-text-muted)!important}
:root[data-appearance="light"] .rp-seg-btn:hover{color:var(--sl-text-strong)!important;background:rgba(15,23,42,.06)!important}
:root[data-appearance="light"] .rp-seg-btn.active{box-shadow:inset 0 1px 0 rgba(15,23,42,.10)!important}

/* the pre-v2 card checklist, still styled and reachable */
:root[data-appearance="light"] .rp-chk-item{background:var(--bg-card-2)!important;border-color:var(--border)!important}
:root[data-appearance="light"] .rp-chk-item[data-status="have"]{
  background:linear-gradient(90deg,rgba(4,120,87,.08),var(--bg-card-2))!important}
:root[data-appearance="light"] .rp-chk-item[data-status="progress"]{
  background:linear-gradient(90deg,rgba(180,83,9,.08),var(--bg-card-2))!important}
:root[data-appearance="light"] .rp-chk-item[data-status="na"]{opacity:.8!important}
:root[data-appearance="light"] .rp-chk-item[data-status="na"] .rp-chk-name{color:var(--sl-text-muted)!important}
:root[data-appearance="light"] .rp-chk-name{color:var(--sl-text-strong)!important}
:root[data-appearance="light"] .rp-chk-meta{color:#be185d!important}
:root[data-appearance="light"] .rp-chk-btn{
  background:var(--bg-hover)!important;color:var(--sl-text-body)!important;border-color:var(--border)!important}
:root[data-appearance="light"] .rp-chk-btn:hover{color:var(--sl-text-strong)!important}
:root[data-appearance="light"] .rp-chk-detail{color:var(--sl-text-muted)!important}
:root[data-appearance="light"] .rp-chk-detail strong{color:var(--sl-text-strong)!important}
:root[data-appearance="light"] .rp-chk-rollup-pill{
  background:var(--bg-hover)!important;color:var(--sl-text-body)!important;border-color:var(--border)!important}
:root[data-appearance="light"] .rp-chk-header-title,
:root[data-appearance="light"] .rp-chk-header-icon{color:#831843!important}
:root[data-appearance="light"] .rp-chk-header-count{color:var(--sl-text-muted)!important}

/* the page shell card + the whole form vocabulary it passes down.
   The Regulatory-journey card is built in JS with an INLINE dark background that beats a
   class rule, so it needs the attribute-substring form. */
:root[data-appearance="light"] .rp-card{background:var(--bg-card)!important;border-color:var(--border)!important}
:root[data-appearance="light"] div.rp-card[style*="rgba(15,23,42,.4)"]{background:var(--bg-card-2)!important}
:root[data-appearance="light"] details.rp-card>summary::after{color:var(--sl-text-muted)!important}
:root[data-appearance="light"] .rp-step-title,
:root[data-appearance="light"] .rp-derived-value,
:root[data-appearance="light"] .rp-gate-title{color:var(--sl-text-strong)!important}
/* 04's score ring (.rp-meter-*) and chips (.rp-chip*) styled nothing and left the page with their rows (p10 T7 SL-MV2-RP-DEAD) */
:root[data-appearance="light"] .rp-step-sub,
:root[data-appearance="light"] .rp-label,
:root[data-appearance="light"] .rp-derived-label,
:root[data-appearance="light"] .rp-journey-note,
:root[data-appearance="light"] .rp-brief-loading,
:root[data-appearance="light"] .rp-brief-row-label,
:root[data-appearance="light"] .rp-brief-row i,
:root[data-appearance="light"] .rp-brief-empty{color:var(--sl-text-muted)!important}
:root[data-appearance="light"] .rp-brief-row-value{color:var(--sl-text-body)!important}
:root[data-appearance="light"] .rp-step-num{color:#831843!important;background:rgba(190,24,93,.10)!important}
:root[data-appearance="light"] .rp-input,
:root[data-appearance="light"] .rp-select,
:root[data-appearance="light"] .rp-textarea{
  background:var(--input-bg)!important;color:var(--text)!important;border-color:var(--border-light)!important}
:root[data-appearance="light"] .rp-flag-warn{color:var(--sl-danger-ink)!important;background:rgba(185,28,28,.08)!important}
:root[data-appearance="light"] .rp-flag-ok{color:var(--sl-success-ink)!important;background:rgba(4,120,87,.09)!important}
:root[data-appearance="light"] .rp-flag-info{color:#831843!important;background:rgba(190,24,93,.07)!important}
:root[data-appearance="light"] .rp-journey-step{
  background:var(--bg-card-2)!important;color:var(--sl-text-strong)!important;border-color:var(--border)!important}
:root[data-appearance="light"] .rp-journey-month{color:#be185d!important}
:root[data-appearance="light"] .rp-gate{background:var(--bg-card-2)!important;border-color:var(--border)!important}
:root[data-appearance="light"] .rp-gate-cost{color:var(--sl-warning-ink)!important}
:root[data-appearance="light"] .rp-cta-primary:disabled{opacity:.75!important}
:root[data-appearance="light"] .rp-brief-header{
  color:#831843!important;
  background:linear-gradient(135deg,rgba(190,24,93,.09),rgba(109,40,217,.08))!important}

/* ── 46. /reputation_engine + /local_discovery — the members block 37 left out ──────────
   Both pages declare their inks as multi-selector rules shared with an .rf-* alias; block 37
   fixed only the .rf- member of each pair, so the .rep-/.ld- twin stayed dark-era. */
:root[data-appearance="light"] .rep-cap,:root[data-appearance="light"] .ld-cap,
:root[data-appearance="light"] .rep-rating-suffix,:root[data-appearance="light"] .ld-reviews-suffix,
:root[data-appearance="light"] .rep-mantra-prefix,:root[data-appearance="light"] .ld-mantra-prefix{
  color:var(--sl-text-muted)!important}
:root[data-appearance="light"] .rep-mantra-strike,:root[data-appearance="light"] .ld-mantra-strike{
  color:var(--sl-success-base)!important;text-decoration-color:var(--sl-warning-base)!important}
:root[data-appearance="light"] .rep-mantra-star,:root[data-appearance="light"] .rf-mantra-heart{
  color:var(--sl-warning-base)!important}
:root[data-appearance="light"] .ld-mantra-star{color:var(--sl-accent-base)!important}
/* gradient-painted headline: the ramp IS the ink, so it takes the same three-declaration
   reset block 29 already applied to .rf-mantra-problem / .rep-mantra-hero */
:root[data-appearance="light"] .ld-mantra-hero{
  color:var(--sl-accent-ink)!important;-webkit-text-fill-color:currentColor!important;
  background:none!important;text-shadow:none!important}
:root[data-appearance="light"] .ld-mantra-hero::after{
  opacity:1!important;background:linear-gradient(90deg,transparent,var(--accent-light),transparent)!important}

/* the Tailwind ramps with no light entry anywhere: sky (local_discovery's accent, and its
   ACTIVE-project indicator) and rose, plus the two /70 opacity-modifier classes. */
:root[data-appearance="light"] .text-sky-400{color:#0369a1!important}
:root[data-appearance="light"] .text-sky-300,
:root[data-appearance="light"] .text-sky-300\/70{color:#075985!important}
:root[data-appearance="light"] .text-cyan-300\/70{color:var(--sl-accent-ink)!important}
:root[data-appearance="light"] .text-amber-300\/70{color:var(--sl-warning-ink)!important}
:root[data-appearance="light"] .text-rose-300{color:var(--sl-danger-ink)!important}
:root[data-appearance="light"] .text-rose-400,
:root[data-appearance="light"] .hover\:text-rose-400:hover{color:var(--sl-danger-base)!important}

/* ── 47. /seo_flywheel + /unit_economics — the chrome block 41 never listed ─────────────
   Block 41 turned .sf-card / .ue-card white and stopped: every step heading on both pages
   is white-on-white TODAY, and both input families are #fff typed into a #f2f5fa field. */
:root[data-appearance="light"] .sf-step-title,:root[data-appearance="light"] .ue-step-title,
:root[data-appearance="light"] .ue-derived-value{color:var(--sl-text-strong)!important}
:root[data-appearance="light"] .sf-step-sub,:root[data-appearance="light"] .sf-label,
:root[data-appearance="light"] .ue-step-sub,:root[data-appearance="light"] .ue-label,
:root[data-appearance="light"] .ue-derived-label,:root[data-appearance="light"] .ue-kpi-label{
  color:var(--sl-text-muted)!important}
:root[data-appearance="light"] .sf-step-num,:root[data-appearance="light"] .ue-step-num{
  color:var(--sl-success-ink)!important;background:rgba(4,120,87,.12)!important}
:root[data-appearance="light"] .sf-chip{color:var(--sl-success-ink)!important;background:rgba(4,120,87,.09)!important}
:root[data-appearance="light"] .sf-input,:root[data-appearance="light"] .sf-select,:root[data-appearance="light"] .sf-textarea,
:root[data-appearance="light"] .ue-input,:root[data-appearance="light"] .ue-select,:root[data-appearance="light"] .ue-textarea{
  background:var(--input-bg)!important;color:var(--text)!important;border-color:var(--border-light)!important}
/* the 'Estimate with AI' button: colour and ground are ONE declaration in the page — pair them */
:root[data-appearance="light"] .ue-cta-secondary{
  background:var(--bg-hover)!important;color:var(--sl-text-strong)!important;border-color:var(--border-light)!important}
:root[data-appearance="light"] .ue-est-text{color:var(--sl-success-ink)!important}
:root[data-appearance="light"] .ue-est-text i{color:var(--sl-success-base)!important}
/* the per-channel efficiency badge: .ue-chan-rating declares NO colour at all, the whole
   ink+fill is an inline string. Author !important beats a non-important inline declaration. */
:root[data-appearance="light"] .ue-chan-rating[style*="color:#6ee7b7"]{
  color:var(--sl-success-ink)!important;background:rgba(4,120,87,.14)!important}
:root[data-appearance="light"] .ue-chan-rating[style*="color:#fde68a"]{
  color:var(--sl-warning-ink)!important;background:rgba(154,78,7,.14)!important}
:root[data-appearance="light"] .ue-chan-rating[style*="color:#fda4af"]{
  color:var(--sl-danger-ink)!important;background:rgba(185,28,28,.12)!important}
/* the traffic-projection chart: SVG `fill`, unreachable by any `color` rule */
:root[data-appearance="light"] .sf-proj-label{fill:var(--sl-text-muted)!important}
:root[data-appearance="light"] .sf-proj-dot{fill:var(--sl-success-base)!important}
:root[data-appearance="light"] .sf-proj-area{opacity:.9!important}
:root[data-appearance="light"] svg stop[stop-color="#10b981"]{stop-color:#065f46!important}

/* ── 48. the shared chassis (page-chassis.js) — 4 pages ─────────────────────────────────
   HISTORY: a title-darkening rule stood here from when the primary was bg-card (title #fff
   was white-on-white). The primary now wears the accent gradient with white ink, so that
   compensator painted 'Value Proposition' near-black ON the gradient (1.7:1) - deleted; the
   only .sl-bottom-nav-title lives inside the primary, whose chassis base ink is already #fff.
   The hover repaint is scoped to non-primary for the same reason: it erased the gradient
   under white text. The v2 loader scenes
   were half-covered by block 21 (.sl-v2-dna/-scene/-slot grounds) and their inks were not. */
:root[data-appearance="light"] .sl-bottom-nav-btn:not(.primary):hover{
  background:var(--bg-hover)!important;color:var(--sl-text-strong)!important}
:root[data-appearance="light"] .sl-bottom-nav-btn.primary:hover{color:#fff!important}
:root[data-appearance="light"] .sl-v2-chip{
  color:var(--sl-text-body)!important;background:var(--bg-card-2)!important;border-color:var(--border)!important}
:root[data-appearance="light"] .sl-v2-chip i{color:var(--sl-success-base)!important}
:root[data-appearance="light"] .sl-v2-chip b{color:var(--sl-text-muted)!important}
:root[data-appearance="light"] .sl-v2-flbl,:root[data-appearance="light"] .sl-v2-status{color:var(--sl-text-muted)!important}
:root[data-appearance="light"] .sl-v2-shortlist{color:var(--sl-success-base)!important}
/* .sl-v2-slot passes its ink to its own label; only .v2-verdict overrides */
:root[data-appearance="light"] .sl-v2-slot{color:var(--sl-text-body)!important}
:root[data-appearance="light"] .sl-v2-slot .v2-verdict{color:var(--sl-text-muted)!important}
:root[data-appearance="light"] .sl-v2-slot.locked .v2-verdict{color:var(--sl-success-base)!important}
:root[data-appearance="light"] .sl-v2-slot.rejected .v2-verdict{color:var(--sl-danger-base)!important}
:root[data-appearance="light"] .sl-v2-slot.rejected{opacity:.8!important}
/* the deck / funnel / blueprint / radar scenes block 21 stopped short of */
:root[data-appearance="light"] .v2-slide{background:var(--bg-card-2)!important;opacity:.72!important}
:root[data-appearance="light"] .v2-slide.on{opacity:1!important}
:root[data-appearance="light"] .v2-slide-n{color:var(--sl-text-muted)!important}
:root[data-appearance="light"] .v2-slide-t{color:var(--sl-text-body)!important}
:root[data-appearance="light"] .v2-slide-l{background:var(--border-light)!important}
:root[data-appearance="light"] .v2-fl{background:var(--bg-hover)!important}
:root[data-appearance="light"] .v2-fl span{color:var(--sl-text-body)!important}
:root[data-appearance="light"] .v2-bp{color:var(--sl-text-muted)!important}
:root[data-appearance="light"] .v2-bp i{color:var(--sl-success-base)!important}
:root[data-appearance="light"] .v2-bp.on{color:var(--sl-text-body)!important}
:root[data-appearance="light"] .v2-blip{color:var(--sl-accent-ink)!important}
/* the admin model badge, cssText-injected under every AI result */
:root[data-appearance="light"] .sl-admin-model-monitor{
  background:var(--bg-card-2)!important;border-color:var(--border)!important;color:var(--sl-accent-ink)!important}

/* ── 49. SLViz (common.js, runtime-injected — `grep common.css` finds nothing) ───────────
   Blocks 20/29 covered the class-declared surfaces and text. Everything below is assembled
   as an inline style="" string in a JS literal, so it is invisible to both kinds of grep and
   survives every class rule. Hue is SEMANTIC here (decides vs blocks, adds vs subtracts,
   done vs warn), so each family is re-cut, never flattened. */
:root[data-appearance="light"] :is(.slv-qc-t,.slv-fl-ic,.slv-rcpt-op,.slv-card-t i,.slv-rf>i,.slv-rf i)[style*="color:#34d399"],
:root[data-appearance="light"] :is(.slv-qc-t,.slv-fl-ic,.slv-rcpt-op,.slv-card-t i)[style*="color:#10b981"],
:root[data-appearance="light"] :is(.slv-qc-t,.slv-fl-ic,.slv-rcpt-op,.slv-card-t i)[style*="color:#6ee7b7"],
:root[data-appearance="light"] :is(.slv-qc-t,.slv-fl-ic,.slv-card-t i)[style*="color:#4ade80"]{
  color:var(--sl-success-base)!important}
:root[data-appearance="light"] :is(.slv-qc-t,.slv-fl-ic,.slv-rcpt-op,.slv-card-t i)[style*="color:#fbbf24"],
:root[data-appearance="light"] :is(.slv-qc-t,.slv-fl-ic,.slv-rcpt-op,.slv-card-t i)[style*="color:#fcd34d"],
:root[data-appearance="light"] :is(.slv-qc-t,.slv-fl-ic,.slv-card-t i)[style*="color:#f59e0b"],
:root[data-appearance="light"] :is(.slv-qc-t,.slv-fl-ic,.slv-card-t i)[style*="color:#fb923c"]{
  color:var(--sl-warning-base)!important}
:root[data-appearance="light"] :is(.slv-qc-t,.slv-fl-ic,.slv-rcpt-op,.slv-card-t i,.slv-rf>i,.slv-rf i)[style*="color:#fb7185"],
:root[data-appearance="light"] :is(.slv-qc-t,.slv-fl-ic,.slv-card-t i,.slv-rf>i,.slv-rf i)[style*="color:#fca5a5"],
:root[data-appearance="light"] :is(.slv-qc-t,.slv-fl-ic,.slv-card-t i)[style*="color:#f87171"]{
  color:var(--sl-danger-base)!important}
:root[data-appearance="light"] :is(.slv-qc-t,.slv-fl-ic,.slv-card-t i)[style*="color:#22d3ee"],
:root[data-appearance="light"] :is(.slv-qc-t,.slv-fl-ic,.slv-card-t i)[style*="color:#38bdf8"]{
  color:var(--sl-accent-base)!important}
:root[data-appearance="light"] :is(.slv-qc-t,.slv-fl-ic,.slv-card-t i)[style*="color:#a78bfa"]{
  color:var(--sl-info-base)!important}
:root[data-appearance="light"] :is(.slv-qc-t,.slv-fl-ic,.slv-card-t i)[style*="color:#f472b6"]{
  color:#be185d!important}
:root[data-appearance="light"] :is(.slv-qc-t,.slv-fl-ic,.slv-card-t i)[style*="color:#94a3b8"]{
  color:var(--sl-text-muted)!important}
/* .slv-badge: ink + a 13% tint of ITSELF + a 33% border, all inline. No .slv-badge rule
   existed anywhere in common.css — it is the one .slv-* member the earlier sweep missed. */
:root[data-appearance="light"] .slv-badge[style*="#34d399"],
:root[data-appearance="light"] .slv-badge[style*="#10b981"]{
  color:var(--sl-success-ink)!important;background:rgba(4,120,87,.12)!important;border-color:rgba(4,120,87,.35)!important}
:root[data-appearance="light"] .slv-badge[style*="#fbbf24"],
:root[data-appearance="light"] .slv-badge[style*="#f59e0b"],
:root[data-appearance="light"] .slv-badge[style*="#fcd34d"]{
  color:var(--sl-warning-ink)!important;background:rgba(154,78,7,.12)!important;border-color:rgba(154,78,7,.35)!important}
:root[data-appearance="light"] .slv-badge[style*="#fb7185"],
:root[data-appearance="light"] .slv-badge[style*="#f87171"]{
  color:var(--sl-danger-ink)!important;background:rgba(185,28,28,.10)!important;border-color:rgba(185,28,28,.35)!important}
:root[data-appearance="light"] .slv-badge[style*="#22d3ee"]{
  color:var(--sl-accent-ink)!important;background:rgba(14,116,144,.12)!important;border-color:rgba(14,116,144,.35)!important}
:root[data-appearance="light"] .slv-badge[style*="#a78bfa"]{
  color:var(--sl-info-ink)!important;background:rgba(109,40,217,.10)!important;border-color:rgba(109,40,217,.35)!important}
:root[data-appearance="light"] .slv-badge[style*="#f472b6"]{
  color:#831843!important;background:rgba(190,24,93,.10)!important;border-color:rgba(190,24,93,.35)!important}
:root[data-appearance="light"] .slv-badge[style*="#94a3b8"]{
  color:var(--sl-text-muted)!important;background:var(--bg-hover)!important;border-color:var(--border)!important}
/* .slv-seq-n — SL-MV2-P10-T29B-DEAD (H3: the disc has no ring); the DIGIT was #fff on
   a full-strength palette hue (1.55-1.81). Dark ink clears every hue in the palette. */
:root[data-appearance="light"] .slv-seq-n{color:var(--sl-text-strong)!important}
/* 9px caption on the recessed --bg-card-2 ground its box was given: 4.35, short by .15 */
:root[data-appearance="light"] .slv-fl-s{color:var(--sl-text-muted)!important}
/* the pale rungs of a bar ladder disappear against the light track (--bg-hover). The ladder
   ORDER is the information, so each pale stop is stepped down rather than unified. */
:root[data-appearance="light"] .slv-bar-fill[style*="#a7f3d0"]{background:linear-gradient(90deg,#059669,#34d399)!important}
:root[data-appearance="light"] .slv-bar-fill[style*="#6ee7b7"]{background:linear-gradient(90deg,#047857,#10b981)!important}
:root[data-appearance="light"] .slv-bar-fill[style*="#fde68a"]{background:linear-gradient(90deg,#b45309,#f59e0b)!important}
:root[data-appearance="light"] .slv-bar-fill[style*="#fcd34d"]{background:linear-gradient(90deg,#a16207,#eab308)!important}
:root[data-appearance="light"] .slv-bar-fill[style*="#fda4af"]{background:linear-gradient(90deg,#be123c,#fb7185)!important}

/* ── 50. the AI-output inline sweep block 44 could not reach ────────────────────────────
   Block 44 enumerated three literals (#fff / #cbd5e1 / #94a3b8) on three element types
   (div|pre|b) under eight ancestors. Four things escaped it: a fourth and fifth literal
   (#fca5a5, #64748b), <i> and <span> leaves, and five result mounts that are not in its
   ancestor list (.ss-card, .rp-card, .ls-card, .ip-section, #critic-mount). */
:root[data-appearance="light"] :is(.sl-result-body,.slv-sec,.slv-card,.slv-rcpt,.slv-qc,.slv-fl-box,.ue-card,.sp-card,.sf-card,.pp-card,.ss-card,.rp-card,.ls-card,.ls-comp,.ip-section,.rr-section,.vp-card,.rep-fb,.ld-fb,#critic-mount)
  :is(div,pre,b,i,span,em)[style*="color:#fff"],
:root[data-appearance="light"] :is(.ss-card,.rp-card,.ls-card,.ls-comp,.ip-section,.rr-section,.vp-card,#critic-mount)
  :is(div,pre,b,i,span,em)[style*="color:#f1f5f9"]{color:var(--sl-text-strong)!important}
:root[data-appearance="light"] :is(.sl-result-body,.slv-sec,.slv-card,.slv-rcpt,.slv-qc,.slv-fl-box,.ue-card,.sp-card,.sf-card,.pp-card,.ss-card,.rp-card,.ls-card,.ls-comp,.ip-section,.rr-section,.vp-card,.rep-fb,.ld-fb,#critic-mount)
  :is(div,pre,b,i,span,em)[style*="color:#cbd5e1"],
:root[data-appearance="light"] :is(.ss-card,.rp-card,.ls-card,.ls-comp,.ip-section,.rr-section,.vp-card,#critic-mount)
  :is(div,pre,b,i,span,em)[style*="color:#e2e8f0"]{color:var(--sl-text-body)!important}
:root[data-appearance="light"] :is(.sl-result-body,.slv-sec,.slv-card,.slv-rcpt,.slv-qc,.slv-fl-box,.ue-card,.sp-card,.sf-card,.pp-card,.ss-card,.rp-card,.ls-card,.ls-comp,.ip-section,.rr-section,.vp-card,.rep-fb,.ld-fb,#critic-mount)
  :is(div,pre,b,i,span,em)[style*="color:#94a3b8"],
:root[data-appearance="light"] :is(.sl-result-body,.slv-sec,.slv-card,.slv-rcpt,.slv-qc,.slv-fl-box,.ue-card,.sp-card,.sf-card,.pp-card,.ss-card,.rp-card,.ls-card,.ls-comp,.ip-section,.rr-section,.vp-card,.rep-fb,.ld-fb,#critic-mount)
  :is(div,pre,b,i,span,em)[style*="color:#64748b"]{color:var(--sl-text-muted)!important}
:root[data-appearance="light"] :is(.sl-result-body,.slv-sec,.slv-card,.ue-card,.sp-card,.sf-card,.pp-card,.ss-card,.rp-card,.ls-card,.ls-comp,.ip-section,.rr-section,.vp-card,.rep-fb,.ld-fb,#critic-mount)
  :is(div,pre,b,i,span,em)[style*="color:#fca5a5"],
:root[data-appearance="light"] :is(.sl-result-body,.slv-sec,.ss-card,.rp-card,.ls-card,.ls-comp,.rr-section,#critic-mount)
  :is(div,pre,b,i,span,em)[style*="color:#fecdd3"]{color:var(--sl-danger-base)!important}
:root[data-appearance="light"] :is(.sl-result-body,.slv-sec,.ss-card,.ls-card,.ls-comp,.rr-section,.vp-card,#critic-mount)
  :is(div,pre,b,i,span,em)[style*="color:#fde68a"],
:root[data-appearance="light"] :is(.sl-result-body,.slv-sec,.ss-card,.ls-card,.ls-comp,.rr-section,.vp-card,#critic-mount)
  :is(div,pre,b,i,span,em)[style*="color:#fef3c7"]{color:var(--sl-warning-ink)!important}
/* the section HEADINGS that hardcode a pale ink inline and so beat their own token rule */
:root[data-appearance="light"] :is(.rr-section-head,.ip-section-head,.pr-section-head,.sf-section-head,.vp-card-head,.ss-section-head)[style*="color:#fca5a5"]{
  color:var(--sl-danger-base)!important}
:root[data-appearance="light"] :is(.rr-section-head,.ip-section-head,.pr-section-head)[style*="color:#6ee7b7"]{
  color:var(--sl-success-base)!important}
:root[data-appearance="light"] .vp-card-head[style*="color:#86efac"]{color:var(--sl-success-ink)!important}
:root[data-appearance="light"] .vp-fit-score span[style*="opacity:.6"]{opacity:.85!important}
/* the shared .rr-* timeline + risk-panel edge: block 28's .rr-section{border-color:var(--border)}
   already erased the .rr-risk modifier in light, so the risk panel reads identical to a
   neutral one. The spine and the you-are-here marker are graphical information (>=3:1). */
:root[data-appearance="light"] .rr-section.rr-risk{border-color:rgba(185,28,28,.35)!important}
:root[data-appearance="light"] .rr-timeline::before{
  background:linear-gradient(180deg,var(--sl-accent-base),var(--sl-info-base),var(--sl-danger-base))!important}
:root[data-appearance="light"] .rr-tl-step[data-stage="now"]::before{
  border-color:var(--sl-danger-base)!important;box-shadow:0 0 0 3px rgba(185,28,28,.18)!important}
/* "not recommended" dimming: correct on a dark panel, a ghost on paper. Raised, not removed. */
:root[data-appearance="light"] .rr-mx-card[data-rec="no"],
:root[data-appearance="light"] .ip-card[data-rec="no"]{opacity:.85!important}

/* ── 51. /finances — the largest uncovered page. `grep '\.fin-' common.css` returned 0 ───
   ~11 section headings, every input label, every balance-sheet and income-statement line,
   the metric cards, the valuation panel and the locator were all cut for a dark ground. */
:root[data-appearance="light"] .fin-section-title,
:root[data-appearance="light"] .fin-statement-head-title,
:root[data-appearance="light"] .fin-calc-value,
:root[data-appearance="light"] .fin-bs-row-val,
:root[data-appearance="light"] .fin-bs-row.total .fin-bs-row-label,
:root[data-appearance="light"] .fin-is-value,
:root[data-appearance="light"] .fin-is-row.subtotal .fin-is-label,
:root[data-appearance="light"] .fin-is-row.bottom-line .fin-is-label,
:root[data-appearance="light"] .fin-metric-value,
:root[data-appearance="light"] .fin-val-summary-method,
:root[data-appearance="light"] .fin-val-card-amount,
:root[data-appearance="light"] .fin-smart-title{color:var(--sl-text-strong)!important}
:root[data-appearance="light"] .fin-field-label,
:root[data-appearance="light"] .fin-field-label-text,
:root[data-appearance="light"] .fin-bs-row-label,
:root[data-appearance="light"] .fin-is-label,
:root[data-appearance="light"] .fin-basics-item-value,
:root[data-appearance="light"] .fin-val-summary-reason,
:root[data-appearance="light"] .fin-val-card-name,
:root[data-appearance="light"] .fin-smart-label{color:var(--sl-text-body)!important}
:root[data-appearance="light"] .fin-statement-head-sub,
:root[data-appearance="light"] .fin-metric-label,
:root[data-appearance="light"] .fin-metric-hint,
:root[data-appearance="light"] .fin-metric-card.na .fin-metric-value,
:root[data-appearance="light"] .fin-is-margin,
:root[data-appearance="light"] .fin-na-badge,
:root[data-appearance="light"] .fin-field-irrelevant-label,
:root[data-appearance="light"] .fin-chk-label,
:root[data-appearance="light"] .fin-btn-clear,
:root[data-appearance="light"] .fin-val-card-formula,
:root[data-appearance="light"] .fin-val-card-amount.na,
:root[data-appearance="light"] .fin-smart-sub,
:root[data-appearance="light"] .fin-smart-prerev,
:root[data-appearance="light"] .fin-smart-hint,
:root[data-appearance="light"] .fin-basics-item-value i,
:root[data-appearance="light"] .fin-country-label{color:var(--sl-text-muted)!important}
/* profit-vs-loss, health verdicts, the balance check, the step status — all meaning-bearing */
:root[data-appearance="light"] .fin-calc-value.pos,
:root[data-appearance="light"] .fin-bs-row.total .fin-bs-row-val,
:root[data-appearance="light"] .fin-is-value.pos,
:root[data-appearance="light"] .fin-metric-card.good .fin-metric-value,
:root[data-appearance="light"] .fin-bs-balance-check.ok,
:root[data-appearance="light"] .fin-status-badge.finished,
:root[data-appearance="light"] .fin-smart-success{color:var(--sl-success-ink)!important}
:root[data-appearance="light"] .fin-calc-value.neg,
:root[data-appearance="light"] .fin-is-value.neg,
:root[data-appearance="light"] .fin-is-value.sub,
:root[data-appearance="light"] .fin-metric-card.bad .fin-metric-value,
:root[data-appearance="light"] .fin-btn-clear:hover{color:var(--sl-danger-ink)!important}
:root[data-appearance="light"] .fin-metric-card.warn .fin-metric-value,
:root[data-appearance="light"] .fin-bs-balance-check.off,
:root[data-appearance="light"] .fin-basics-missing-notice,
:root[data-appearance="light"] .fin-val-summary-label,
:root[data-appearance="light"] .fin-val-relevant .fin-val-card-name{color:var(--sl-warning-ink)!important}
:root[data-appearance="light"] .fin-basics-missing-notice a,
:root[data-appearance="light"] .fin-val-summary-value{color:var(--sl-warning-deep)!important}
:root[data-appearance="light"] .fin-status-badge.draft{color:var(--sl-text-muted)!important}
:root[data-appearance="light"] .fin-smart-success{background:rgba(4,120,87,.10)!important}
:root[data-appearance="light"] .fin-val-relevant-badge{
  color:var(--sl-warning-ink)!important;background:rgba(154,78,7,.14)!important}
:root[data-appearance="light"] .fin-smart-head i,
:root[data-appearance="light"] .fin-smart-label i{color:var(--sl-warning-base)!important}
:root[data-appearance="light"] .fin-country-suggestion{
  color:var(--sl-success-ink)!important;background:rgba(4,120,87,.09)!important}
:root[data-appearance="light"] .fin-country-suggestion-btn,
:root[data-appearance="light"] .fin-country-suggestion-btn:hover{
  color:#fff!important;background:var(--sl-success-base)!important}
/* containers, each shipped with the ink it carries or passes down */
:root[data-appearance="light"] .fin-statement-head{background:var(--bg-hover)!important;border-color:var(--border)!important}
:root[data-appearance="light"] .fin-metric-card,
:root[data-appearance="light"] .fin-val-card{background:var(--bg-card-2)!important;border-color:var(--border)!important}
:root[data-appearance="light"] .fin-metric-impact-drawer{
  background:var(--bg-card-2)!important;border-color:var(--border)!important}
:root[data-appearance="light"] .fin-metric-impact-title{color:var(--sl-accent-ink)!important}
:root[data-appearance="light"] .fin-metric-impact-chip{
  color:var(--sl-accent-ink)!important;background:rgba(3,105,161,.10)!important}
:root[data-appearance="light"] .fin-metric-impact-chip:hover{
  color:var(--sl-accent-deep)!important;background:rgba(3,105,161,.18)!important}
:root[data-appearance="light"] .fin-metric-impact-chip.empty{
  color:var(--sl-danger-ink)!important;background:rgba(185,28,28,.10)!important}
:root[data-appearance="light"] .fin-metric-impact-chip.empty:hover{
  color:var(--sl-danger-deep)!important;background:rgba(185,28,28,.18)!important}
:root[data-appearance="light"] .fin-metric-impact-chip.filled{
  color:var(--sl-success-ink)!important;background:rgba(4,120,87,.10)!important}
:root[data-appearance="light"] .fin-metric-impact-chip.filled:hover{
  color:var(--sl-success-deep)!important;background:rgba(4,120,87,.18)!important}
:root[data-appearance="light"] .fin-metric-impact-chip.off{color:var(--sl-text-muted)!important}
:root[data-appearance="light"] .fin-metric-impact-chip .fin-metric-impact-chip-val{opacity:.9!important}
/* the jump-to-field locator: gradient-clipped title, dark input, near-black dropdown */
:root[data-appearance="light"] .fin-locator-head-title{
  background:none!important;-webkit-text-fill-color:currentColor!important;
  color:var(--sl-info-ink)!important;text-shadow:none!important}
:root[data-appearance="light"] .fin-locator-input,
:root[data-appearance="light"] .fin-smart-input,
:root[data-appearance="light"] .fin-country-wrap select{
  background:var(--input-bg)!important;color:var(--text)!important;border-color:var(--border-light)!important}
:root[data-appearance="light"] .fin-locator-icon,
:root[data-appearance="light"] .fin-locator-clear,
:root[data-appearance="light"] .fin-locator-item-target,
:root[data-appearance="light"] .fin-locator-item-desc,
:root[data-appearance="light"] .fin-locator-empty,
:root[data-appearance="light"] .fin-smart-input-wrap .pre,
:root[data-appearance="light"] .fin-smart-input-wrap .suf{color:var(--sl-text-muted)!important}
/* p10 T19 SL-MV2-FIN-HOVER (inbox D42): a hover look answers a hovering pointer only, as the page rules do */
@media (hover:hover){:root[data-appearance="light"] .fin-locator-clear:hover{color:var(--sl-text-strong)!important}}
:root[data-appearance="light"] .fin-locator-dropdown{
  background:var(--bg-card)!important;border-color:var(--border)!important;
  box-shadow:0 8px 24px rgba(15,23,42,.12)!important}
:root[data-appearance="light"] .fin-locator-item:hover{background:var(--bg-hover)!important}
:root[data-appearance="light"] .fin-locator-item-label{color:var(--sl-text-body)!important}
:root[data-appearance="light"] .fin-locator-item-icon{color:var(--accent-light)!important}
:root[data-appearance="light"] .fin-locator-match{
  background:rgba(154,78,7,.22)!important;color:var(--sl-warning-ink)!important}
:root[data-appearance="light"] .fin-locator-fallback-header{
  color:var(--sl-warning-ink)!important;background:rgba(154,78,7,.08)!important}
:root[data-appearance="light"] .fin-locator-fallback-header strong{color:var(--sl-text-strong)!important}
:root[data-appearance="light"] .fin-locator-item-icon-fallback{
  color:var(--sl-warning-ink)!important;background:rgba(154,78,7,.16)!important}
/* the mode toggle bar and the Smart-Fill card */
:root[data-appearance="light"] .fin-mode-toggle{background:var(--bg-hover)!important;border-color:var(--border-light)!important}
:root[data-appearance="light"] .fin-mode-btn,
:root[data-appearance="light"] .fin-mode-btn:not(.active) i{color:var(--sl-text-muted)!important}
@media (hover:hover){:root[data-appearance="light"] .fin-mode-btn:hover:not(.active){
  color:var(--sl-text-strong)!important;background:rgba(15,23,42,.06)!important}}
:root[data-appearance="light"] .fin-smart-go{
  background:linear-gradient(135deg,var(--sl-warning-base),var(--accent))!important;color:#fff!important}
/* the author colour-matched this triangle to the DARK page background by hand */
:root[data-appearance="light"] .fin-smart-notch::after{
  border-color:transparent transparent var(--bg-card-2) transparent!important}
/* dimmed states — raised for light only */
:root[data-appearance="light"] .fin-field.fin-field-disabled .fin-input{opacity:.7!important}
:root[data-appearance="light"] .fin-field-unchecked .fin-input{opacity:.75!important}
:root[data-appearance="light"] .fin-bs-row.fin-bs-row-inactive,
:root[data-appearance="light"] .fin-is-row.fin-is-row-inactive{opacity:.8!important}
:root[data-appearance="light"] .fin-metric-card.na{opacity:.85!important}
:root[data-appearance="light"] .fin-val-card.fin-val-na{opacity:.8!important}
/* the section / statement icons, inline-styled at 7 call sites */
:root[data-appearance="light"] :is(.fin-section-icon,.fin-statement-head-icon)[style*="color:#10b981"]{color:var(--sl-success-base)!important}
:root[data-appearance="light"] :is(.fin-section-icon,.fin-statement-head-icon)[style*="color:#f87171"]{color:var(--sl-danger-base)!important}
:root[data-appearance="light"] :is(.fin-section-icon,.fin-statement-head-icon)[style*="color:#fb923c"],
:root[data-appearance="light"] :is(.fin-section-icon,.fin-statement-head-icon)[style*="color:#fbbf24"],
:root[data-appearance="light"] :is(.fin-section-icon,.fin-statement-head-icon)[style*="color:#eab308"]{color:var(--sl-warning-base)!important}

/* ── 52. /mvp_builder — the members blocks 7/43 left out ────────────────────────────────
   The orbit loader is the textbook pair break: .mvp-orbit-core re-tones through var(--accent)
   but its only child <i> inherits the hardcoded on-fill #082f3a. */
:root[data-appearance="light"] .mvp-orbit-core{
  background:linear-gradient(135deg,var(--accent),var(--accent-light) 60%,var(--accent))!important;
  color:#fff!important}
:root[data-appearance="light"] #mvp-orbit-grad stop{stop-color:var(--accent-light)!important;stop-opacity:.10!important}
:root[data-appearance="light"] .mvp-orbit-node[fill="#a5f3fc"]{fill:var(--accent-light)!important}
:root[data-appearance="light"] .mvp-loader-bar{background:var(--bg-hover)!important}
:root[data-appearance="light"] .mvp-loader-bar-fill{
  background:linear-gradient(90deg,var(--accent),var(--accent-light),var(--accent))!important}
/* the tile ground only — .mvp-img-num / .mvp-img-dl are on-photo overlays and stay dark */
:root[data-appearance="light"] .mvp-img-tile{background:var(--bg-card-2)!important;border-color:var(--border)!important}
/* the context heading's description line, the blurb and its tier-chip colours left step 10, and their rows with them (p10 T13 SL-MV2-MVP-DEADCSS) */
/* block 43's .mvp-vchip{background:...!important} outranked this hover, so hovering a style
   chip gave no feedback at all in light. Same class of loss block 29 repaired on .slv-tier.hl. */
:root[data-appearance="light"] .mvp-vchip:hover{
  background:var(--bg-hover)!important;border-color:var(--accent-light)!important}
/* the one primary CTA that never joined the light accent ramp */
:root[data-appearance="light"] .mvp-cta-studio{
  background:linear-gradient(180deg,var(--accent),var(--accent-light))!important;color:#fff!important}

/* ── 53. /standardization + /lab_to_market ──────────────────────────────────────────────
   Block 41 turned .sp-card white and left every step heading #fff (1.00:1). /lab_to_market
   had exactly one light rule (its inputs, l.845) — so its selects were already dark ink on a
   dark card, the pairing failure in reverse. */
:root[data-appearance="light"] .sp-step-title,
:root[data-appearance="light"] .ltm-step-title,
:root[data-appearance="light"] .bridge-step-title,
:root[data-appearance="light"] .grant-name{color:var(--sl-text-strong)!important}
/* .ltm-meter-big declares NO colour: .ltm-meter-num is the only owner of the score ink */
:root[data-appearance="light"] .ltm-meter-num{color:var(--sl-text-strong)!important}
:root[data-appearance="light"] .sp-step-sub,:root[data-appearance="light"] .sp-label,
:root[data-appearance="light"] .ltm-step-sub,:root[data-appearance="light"] .ltm-label,
:root[data-appearance="light"] .ltm-meter-small,:root[data-appearance="light"] .trl-labels,
:root[data-appearance="light"] .bridge-step-note,:root[data-appearance="light"] .sp-task-x{
  color:var(--sl-text-muted)!important}
:root[data-appearance="light"] .sp-input,:root[data-appearance="light"] .sp-select,:root[data-appearance="light"] .sp-textarea{
  background:var(--input-bg)!important;color:var(--text)!important;border-color:var(--border-light)!important}
:root[data-appearance="light"] .sp-step-num,:root[data-appearance="light"] .sp-chip{
  color:var(--sl-warning-ink)!important;background:rgba(180,83,9,.10)!important}
:root[data-appearance="light"] .ltm-chip-amber{color:var(--sl-warning-ink)!important;background:rgba(180,83,9,.10)!important}
:root[data-appearance="light"] .bridge-step-cost{color:var(--sl-warning-ink)!important}
:root[data-appearance="light"] .grant-amt{color:var(--sl-success-ink)!important}
/* the two LOADING panels: #fde68a on a 6% amber wash and #ddd6fe on a 6% violet wash */
:root[data-appearance="light"] .sp-flag-info{color:var(--sl-warning-ink)!important;background:rgba(180,83,9,.08)!important}
:root[data-appearance="light"] .ltm-flag-info{color:var(--sl-info-ink)!important;background:rgba(109,40,217,.07)!important}
:root[data-appearance="light"] .ltm-flag-warn{color:var(--sl-danger-ink)!important;background:rgba(185,28,28,.08)!important}
:root[data-appearance="light"] .ltm-flag-ok{color:var(--sl-success-ink)!important;background:rgba(4,120,87,.09)!important}
/* containers + the inks they hold */
:root[data-appearance="light"] .sp-cta-secondary{
  background:var(--bg-hover)!important;color:var(--sl-text-strong)!important;border-color:var(--border-light)!important}
:root[data-appearance="light"] .sp-task-row,
:root[data-appearance="light"] .ltm-card,
:root[data-appearance="light"] .bridge-step,
:root[data-appearance="light"] .grant-card{background:var(--bg-card-2)!important;border-color:var(--border)!important}
:root[data-appearance="light"] .trl-rung{background:var(--bg-hover)!important;color:var(--sl-text-muted)!important}
/* bg-slate-900/40 had no light entry (only /50 and /30 did), so the meter, pathway and
   AI-critique panels stayed navy under inks the utility layer had ALREADY turned dark. */
:root[data-appearance="light"] .bg-slate-900\/40,
:root[data-appearance="light"] .bg-slate-900\/60,
:root[data-appearance="light"] .bg-slate-900\/20,
:root[data-appearance="light"] .bg-slate-800\/40{background:var(--bg-card-2)!important}

/* ── 54. /location_strategy — a runtime-injected control set + a JS-built result card ────
   .loc-tchip lives in <style id="loc-tchip-css"> built as a JS string, so `grep common.css`
   and `grep *.css` both return 0. It is the page's PRIMARY input: 12 selectable chips whose
   checked glyph measured 1.9:1, i.e. the founder cannot see what is selected. */
:root[data-appearance="light"] .loc-tchip{background:var(--bg-card-2)!important;border-color:var(--border-light)!important}
:root[data-appearance="light"] .loc-tchip:hover{background:var(--bg-hover)!important;border-color:var(--accent-light)!important}
:root[data-appearance="light"] .loc-tchip-t{color:var(--sl-text-strong)!important}
:root[data-appearance="light"] .loc-tchip-d{color:var(--sl-text-muted)!important}
:root[data-appearance="light"] .loc-tchip-ic{color:var(--sl-warning-ink)!important;background:rgba(154,78,7,.12)!important}
:root[data-appearance="light"] .loc-tchip-ck{color:var(--sl-text-muted)!important}
:root[data-appearance="light"] .loc-tchip.on .loc-tchip-ck{color:var(--sl-success-base)!important}
/* the gradient-clipped quote accent — the ramp IS the ink, so the ramp is what is re-cut
   (common.css already does this for .iq-emerald; .iq-amber had no rule) */
:root[data-appearance="light"] .iq-amber{
  background-image:linear-gradient(135deg,var(--sl-warning-ink) 0%,var(--sl-warning-deep) 100%)!important}
:root[data-appearance="light"] .ls-crit-l,
:root[data-appearance="light"] .ls-matrix th,
:root[data-appearance="light"] .ls-rentbox-size{color:var(--sl-text-muted)!important}
/* the score matrix: locCritColor() writes a pale ink on its OWN pale wash of the same hue */
:root[data-appearance="light"] .ls-cell[style*="color:#6ee7b7"],
:root[data-appearance="light"] .ls-cell[style*="color:#34d399"]{
  color:var(--sl-success-ink)!important;background:rgba(4,120,87,.16)!important}
:root[data-appearance="light"] .ls-cell[style*="color:#fde68a"],
:root[data-appearance="light"] .ls-cell[style*="color:#fcd34d"]{
  color:var(--sl-warning-ink)!important;background:rgba(154,78,7,.16)!important}
:root[data-appearance="light"] .ls-cell[style*="color:#fda4af"],
:root[data-appearance="light"] .ls-cell[style*="color:#fb7185"]{
  color:var(--sl-danger-ink)!important;background:rgba(185,28,28,.14)!important}
/* the fit-score / legend / AI-pick hues built inline inside .ls-card and .ls-legend */
:root[data-appearance="light"] :is(.ls-card,.ls-comp,.ls-legend) :is(span,i,b,div)[style*="color:#34d399"]{color:var(--sl-success-base)!important}
:root[data-appearance="light"] :is(.ls-card,.ls-comp,.ls-legend) :is(span,i,b,div)[style*="color:#fcd34d"]{color:var(--sl-warning-ink)!important}
:root[data-appearance="light"] :is(.ls-card,.ls-comp,.ls-legend) :is(span,i,b,div)[style*="color:#fb7185"],
:root[data-appearance="light"] :is(.ls-card,.ls-comp,.ls-legend) :is(span,i,b,div)[style*="color:#fda4af"]{color:var(--sl-danger-base)!important}
:root[data-appearance="light"] .ls-card span[style*="rgba(252,211,77,.14)"]{
  color:var(--sl-warning-ink)!important;background:rgba(154,78,7,.14)!important}

/* ── 55. /school_sales + /partnership_playbook + /interviews ────────────────────────────
   /school_sales had ZERO light rules of any kind, and it fails in BOTH directions at once:
   pale ink on its dark .ss-card AND Tailwind utilities the light layer has already turned
   dark, on the same dark card. /partnership_playbook is the shipped pairing violation:
   block 41 gave .pp-card a white ground and left .pp-step-title at #fff. */
:root[data-appearance="light"] .ss-card{background:var(--bg-card)!important;border-color:var(--border)!important}
:root[data-appearance="light"] .ss-step-title,
:root[data-appearance="light"] .pp-step-title,
:root[data-appearance="light"] .ss-tier-name,
:root[data-appearance="light"] .ss-dist-name,
:root[data-appearance="light"] .ss-dist-bar-value,
:root[data-appearance="light"] .ss-fund-name{color:var(--sl-text-strong)!important}
/* .ss-meter-big declares NO colour: .ss-meter-num is the only owner of the readiness score */
:root[data-appearance="light"] .ss-meter-num{color:var(--sl-text-strong)!important}
:root[data-appearance="light"] .ss-step-sub,:root[data-appearance="light"] .ss-label,
:root[data-appearance="light"] .ss-meter-small,:root[data-appearance="light"] .ss-dist-geo,
:root[data-appearance="light"] .ss-cal-event,:root[data-appearance="light"] .ss-cal-legend,
:root[data-appearance="light"] .ss-dist-bar-label,:root[data-appearance="light"] .pp-matrix-q-label,
:root[data-appearance="light"] .pp-step-sub,:root[data-appearance="light"] .pp-label,
:root[data-appearance="light"] .iv-ex-empty{color:var(--sl-text-muted)!important}
:root[data-appearance="light"] .ss-dist-note,:root[data-appearance="light"] .ss-cal-month,
:root[data-appearance="light"] .ss-tier-note,:root[data-appearance="light"] .ss-fund-note{
  color:var(--sl-text-body)!important}
:root[data-appearance="light"] .ss-input,:root[data-appearance="light"] .ss-select,:root[data-appearance="light"] .ss-textarea{
  background:var(--input-bg)!important;color:var(--text)!important;border-color:var(--border-light)!important}
:root[data-appearance="light"] .ss-step-num,:root[data-appearance="light"] .ss-chip,
:root[data-appearance="light"] .ss-dist-rank,:root[data-appearance="light"] .ss-tier-icon,
:root[data-appearance="light"] .ss-tier-label{color:#831843!important}
:root[data-appearance="light"] .ss-step-num,:root[data-appearance="light"] .ss-chip,
:root[data-appearance="light"] .ss-dist-rank{background:rgba(190,24,93,.10)!important}
/* the two ANALYSING panels and the BLOCKERS list — pale ink on its own 6-8% wash */
:root[data-appearance="light"] .ss-flag-info{color:#831843!important;background:rgba(190,24,93,.07)!important}
:root[data-appearance="light"] .pp-flag-info{color:var(--sl-info-ink)!important;background:rgba(109,40,217,.07)!important}
:root[data-appearance="light"] .ss-flag-warn{color:var(--sl-danger-ink)!important;background:rgba(185,28,28,.08)!important}
:root[data-appearance="light"] .ss-flag-ok,
:root[data-appearance="light"] .ss-fund-amt,
:root[data-appearance="light"] .ss-cal-cell.is-budget-window .ss-cal-event{color:var(--sl-success-ink)!important}
:root[data-appearance="light"] .ss-cal-cell.is-rfp .ss-cal-event{color:var(--sl-warning-ink)!important}
:root[data-appearance="light"] .ss-flag-ok{background:rgba(4,120,87,.09)!important}
/* containers + every ink they hold or pass down */
:root[data-appearance="light"] .ss-tier{
  background:linear-gradient(135deg,rgba(190,24,93,.10),var(--bg-card-2))!important;border-color:var(--border)!important}
:root[data-appearance="light"] .ss-dist,
:root[data-appearance="light"] .ss-cal-cell,
:root[data-appearance="light"] .ss-fund{background:var(--bg-card-2)!important;border-color:var(--border)!important}
:root[data-appearance="light"] .ss-cal-cell.is-budget-window{
  background:linear-gradient(135deg,rgba(4,120,87,.10),var(--bg-card-2))!important}
:root[data-appearance="light"] .ss-cal-cell.is-rfp{
  background:linear-gradient(135deg,rgba(154,78,7,.10),var(--bg-card-2))!important}
:root[data-appearance="light"] .ss-dist-bar{background:var(--bg-hover)!important}
/* /interviews: the Problem/Solution toggle, the industry chips and the footer input strip —
   the three .iv-* families block 39 did not reach. The strip already held inks the utility
   layer turned dark, on a still-navy slab. */
:root[data-appearance="light"] .iv-mode{background:var(--bg-hover)!important;border-color:var(--border)!important}
:root[data-appearance="light"] .iv-mode-btn{color:var(--sl-text-muted)!important}
/* the slider fill is #22d3ee in problem mode and #f59e0b in solution mode — that hue IS the
   mode signal, so it is left alone and the ON-FILL ink is what moves: #fff measured 1.81/2.15
   on those two fills, --sl-text-strong measures 10.0/8.5 on the same two. */
:root[data-appearance="light"] .iv-mode-btn.active{color:var(--sl-text-strong)!important}
:root[data-appearance="light"] .iv-input-wrap{background:var(--bg-card-2)!important;border-color:var(--border)!important}
:root[data-appearance="light"] .iv-chip{color:var(--sl-text-muted)!important;background:var(--bg-hover)!important}
:root[data-appearance="light"] .iv-chip:hover{color:var(--sl-text-strong)!important}
:root[data-appearance="light"] .iv-chip.active{
  color:var(--sl-accent-ink)!important;background:rgba(14,116,144,.14)!important;border-color:rgba(14,116,144,.40)!important}
/* the provider badge + fallback warning under every AI reply, written as element.style.cssText
   inside .iv-bubble-them (which block 39 already re-toned) — brand hues re-cut, not flattened */
:root[data-appearance="light"] .iv-bubble-them [style*="color:#10a37f"]{color:#0b6b53!important}
:root[data-appearance="light"] .iv-bubble-them [style*="color:#4285f4"]{color:#1a4fb4!important}
:root[data-appearance="light"] .iv-bubble-them [style*="color:#cc785c"]{color:#8a462f!important}
:root[data-appearance="light"] .iv-bubble-them [style*="color:#fbbf24"]{color:var(--sl-warning-ink)!important;opacity:1!important}
/* buttons that ship DISABLED on first paint — a resting state every visitor sees */
:root[data-appearance="light"] .ss-cta-primary:disabled,
:root[data-appearance="light"] .pp-cta-primary:disabled,
:root[data-appearance="light"] .kol-cta-primary:disabled,
:root[data-appearance="light"] .sf-cta-primary:disabled,
:root[data-appearance="light"] .ue-cta-primary:disabled,
:root[data-appearance="light"] .ue-cta-secondary:disabled,
:root[data-appearance="light"] .sp-cta-primary:disabled,
:root[data-appearance="light"] .ltm-cta-primary:disabled,
:root[data-appearance="light"] .iv-input:disabled{opacity:.75!important}
:root[data-appearance="light"] .iv-send-btn:disabled{opacity:.6!important}

/* ── 56. /multi_unit_expansion — the one page on the Tailwind dark:-variant architecture ─
   <html> carries a hardcoded class="dark" that app.js never removes, so with darkMode:'class'
   EVERY dark: utility stays active in light and `:root[data-appearance="light"] .bg-gray-900`
   can never match — the token is literally `dark:bg-gray-900`. Re-toning the containers alone
   would turn every h1/h2/h3/strong white-on-white, because they declare no colour and inherit
   body .text-slate-100, which had no light entry either. Both halves ship together. */
:root[data-appearance="light"] .text-slate-100{color:var(--text)!important}
:root[data-appearance="light"] .dark\:bg-gray-900,
:root[data-appearance="light"] .dark\:bg-gray-900\/60{background-color:var(--bg-card)!important}
:root[data-appearance="light"] .dark\:bg-gray-800{background-color:var(--input-bg)!important}
:root[data-appearance="light"] .dark\:border-gray-800,
:root[data-appearance="light"] .dark\:border-gray-700{border-color:var(--border)!important}
:root[data-appearance="light"] .dark\:text-gray-300{color:var(--text)!important}
:root[data-appearance="light"] .dark\:text-gray-400{color:var(--text-muted)!important}
:root[data-appearance="light"] .dark\:bg-indigo-900\/40,
:root[data-appearance="light"] .dark\:bg-indigo-900\/30{background-color:rgba(67,56,202,.10)!important}
:root[data-appearance="light"] .dark\:text-indigo-300{color:#312e81!important}
:root[data-appearance="light"] .dark\:border-indigo-800\/40,
:root[data-appearance="light"] .dark\:ring-indigo-800{border-color:rgba(67,56,202,.30)!important}
:root[data-appearance="light"] .dark\:bg-amber-900\/20{background-color:rgba(154,78,7,.09)!important}
:root[data-appearance="light"] .dark\:border-amber-800\/40{border-color:rgba(154,78,7,.30)!important}
:root[data-appearance="light"] .dark\:bg-red-900\/20{background-color:rgba(185,28,28,.08)!important}
:root[data-appearance="light"] .dark\:border-red-800\/40{border-color:rgba(185,28,28,.30)!important}
:root[data-appearance="light"] .dark\:text-red-300{color:var(--sl-danger-ink)!important}
:root[data-appearance="light"] .dark .indigo-soft,
:root[data-appearance="light"] .indigo-soft{
  background-image:linear-gradient(135deg,rgba(3,105,161,.08),rgba(7,89,133,.04))!important}
/* .indigo-grad is a saturated FILL: the utility layer turns its .text-white children
   var(--text), i.e. dark ink on a mid-indigo button. Ramp re-cut, white ink restored. */
:root[data-appearance="light"] .indigo-grad{
  background-image:linear-gradient(135deg,var(--accent),var(--accent-light))!important}
:root[data-appearance="light"] .indigo-grad,
:root[data-appearance="light"] .indigo-grad .text-white,
:root[data-appearance="light"] .indigo-grad.text-white{color:#fff!important}
:root[data-appearance="light"] .bg-indigo-500{background-color:#4338ca!important}
:root[data-appearance="light"] .bg-emerald-500,
:root[data-appearance="light"] .bg-emerald-600{background-color:#047857!important}
:root[data-appearance="light"] .bg-indigo-500.text-white,:root[data-appearance="light"] .bg-indigo-500 .text-white,
:root[data-appearance="light"] .bg-emerald-500.text-white,:root[data-appearance="light"] .bg-emerald-500 .text-white,
:root[data-appearance="light"] .bg-emerald-600.text-white,:root[data-appearance="light"] .bg-emerald-600 .text-white,
:root[data-appearance="light"] .bg-red-400.text-white,:root[data-appearance="light"] .bg-red-400 .text-white,
:root[data-appearance="light"] .bg-amber-400.text-white,:root[data-appearance="light"] .bg-amber-400 .text-white{color:#fff!important}
/* the replication gauge: the light track value already exists one line above the dark one
   in the page and is simply never reached, because class="dark" is permanent. */
:root[data-appearance="light"] .gauge-track{stroke:#e5e7eb!important}

/* ── 57. /Simulator — the members block 40 did not list ─────────────────────────────────
   Mostly saturated fills whose white ink lands at 2.0-3.3:1, plus three inline literals and
   the status stripes that are the only thing separating a good KPI card from a bad one. */
:root[data-appearance="light"] .sim-best-values-btn{
  background:linear-gradient(135deg,var(--sl-info-base),var(--sl-info-deep))!important;color:#fff!important}
:root[data-appearance="light"] .sim-best-values-btn i{color:#fff!important}
:root[data-appearance="light"] .sim-play-btn.playing{
  background:linear-gradient(135deg,#c2410c,#9a3412)!important;color:#fff!important}
:root[data-appearance="light"] .sim-pill.active,
:root[data-appearance="light"] .sim-chart-tab.active,
:root[data-appearance="light"] .sim-btn-save{
  background:linear-gradient(135deg,var(--accent),var(--accent-light))!important;color:#fff!important}
:root[data-appearance="light"] #sim-empty-list[style*="color:#fef3c7"],
:root[data-appearance="light"] .sim-empty-banner [style*="color:#fef3c7"]{color:var(--sl-warning-ink)!important}
:root[data-appearance="light"] #sim-payroll-hint[style*="color:#fbbf24"],
:root[data-appearance="light"] #sim-payroll-hint a[style*="color:#fbbf24"]{color:var(--sl-warning-ink)!important}
:root[data-appearance="light"] .sim-chart-legend-swatch[style*="#cbd5e1"]{background:var(--sl-text-muted)!important}
:root[data-appearance="light"] .sim-chart-legend-swatch[style*="#94a3b8"]{
  background:repeating-linear-gradient(90deg,var(--sl-text-muted) 0 4px,transparent 4px 8px)!important}
:root[data-appearance="light"] .sim-chart-legend [style*="color:#64748b"]{color:var(--sl-text-muted)!important}
:root[data-appearance="light"] #ch-b-icon[style*="color:#10b981"]{color:var(--sl-success-base)!important}
:root[data-appearance="light"] .sim-chart-svg .hover-line{stroke:var(--sl-text-muted)!important}
:root[data-appearance="light"] .sim-kpi-spark{opacity:.7!important}
:root[data-appearance="light"] .sim-start-item.sim-start-derived{opacity:1!important}
:root[data-appearance="light"] .sim-kpi-range .range-dash{opacity:.75!important}
:root[data-appearance="light"] .sim-finvar-key i,
:root[data-appearance="light"] .sim-finvar-key.empty,
:root[data-appearance="light"] .sim-finvar-body.empty{color:var(--sl-text-muted)!important}
/* the 3px status stripe is a graphical object carrying meaning: it needs >=3:1, not 1.68 */
:root[data-appearance="light"] .sim-kpi-card.good::before,
:root[data-appearance="light"] .sim-insight.good::before{background:var(--sl-success-base)!important}
:root[data-appearance="light"] .sim-kpi-card.warn::before,
:root[data-appearance="light"] .sim-insight.warn::before{background:var(--sl-warning-base)!important}
:root[data-appearance="light"] .sim-kpi-card.bad::before,
:root[data-appearance="light"] .sim-insight.bad::before{background:var(--sl-danger-base)!important}
/* block 40 flattened every tooltip series to one grey, destroying the colour-to-line mapping
   the tooltip exists to provide. Per-series hue restored at a light-legible weight. */
:root[data-appearance="light"] .sim-chart-tooltip .tt-line span[style*="color:#10b981"]{color:var(--sl-success-base)!important}
:root[data-appearance="light"] .sim-chart-tooltip .tt-line span[style*="color:#f87171"]{color:var(--sl-danger-base)!important}
:root[data-appearance="light"] .sim-chart-tooltip .tt-line span[style*="color:#fbbf24"]{color:var(--sl-warning-base)!important}

/* ── 58. SVG presentation attributes, document-wide ─────────────────────────────────────
   A `color` rule can NEVER reach these and a grep for "color:" cannot see them, but a
   stylesheet `fill`/`stroke` DOES beat a presentation attribute. Extends the three fills
   already handled at the foot of this file with the five literals the sweeps found in JS
   chart builders, plus the gauge TRACK that composites to ~#f6f7f9 on white — every donut
   on the site currently renders as a floating arc with no reference ring. */
:root[data-appearance="light"] svg text[fill="#cbd5e1"],
:root[data-appearance="light"] svg text[fill="#f1f5f9"]{fill:var(--sl-text-body)!important}
:root[data-appearance="light"] svg text[fill="#6b7280"],
:root[data-appearance="light"] svg text[fill="#9ca3af"]{fill:var(--sl-text-muted)!important}
:root[data-appearance="light"] svg text[fill="#10b981"],
:root[data-appearance="light"] svg text[fill="#34d399"]{fill:var(--sl-success-base)!important}
:root[data-appearance="light"] svg text[fill="#f59e0b"],
:root[data-appearance="light"] svg text[fill="#fbbf24"]{fill:var(--sl-warning-base)!important}
:root[data-appearance="light"] svg text[fill="#ef4444"],
:root[data-appearance="light"] svg text[fill="#f87171"]{fill:var(--sl-danger-base)!important}
:root[data-appearance="light"] svg circle[stroke^="rgba(148,163,184"],
:root[data-appearance="light"] svg circle[stroke="#374151"]{stroke:var(--border-light)!important}

/* -- 59. /location_strategy: the inks that lived in inline style= attributes ---------
   Block 36 covered 46 .ls-* selectors and still missed these, because they were not
   selectors - they were style="color:#cbd5e1" strings concatenated inside the page's JS.
   The page now declares them as classes (same values, so dark is untouched); these are the
   light halves. The verdict paragraph was the visible one at 1.61:1 - the founder could not
   read the AI's actual conclusion. */
:root[data-appearance="light"] .ls-verdict{color:var(--sl-text-body)!important}
:root[data-appearance="light"] .ls-ts-type{color:var(--sl-text-strong)!important}
:root[data-appearance="light"] .ls-ts-role{color:var(--sl-text-body)!important}
/* .ls-ts-l is already re-inked by block 36; this modifier must outrank it, hence the
   two-class selector rather than adding .is-risk to that list. */
:root[data-appearance="light"] .ls-ts-l.is-risk{color:var(--sl-danger-ink)!important}
:root[data-appearance="light"] .ls-ai-pill{
  color:var(--sl-warning-ink)!important;background:rgba(180,83,9,.10)!important;
  border-color:rgba(180,83,9,.30)!important}
:root[data-appearance="light"] .ls-comp-note{color:var(--sl-warning-ink)!important}
/* Score inks stay DATA - locScoreColor()/locCritColor() still emit the band hex inline, and the
   tinted background keeps carrying good/mid/bad. Only the glyph on top is pinned to a readable
   ink, which is exactly what block 36 already does for .ls-rank-score at line 1562. */
:root[data-appearance="light"] :is(.ls-cell,.ls-ts-score){color:var(--sl-text-strong)!important}

/* -- 60. the "Sign in with Google" button, light mode -------------------------------
   Its class list hard-codes `bg-white`, which is a deliberate, high-contrast slab on the dark
   card - and the same colour as the card in light mode, so the button vanished and only the
   wordmark remained. A border is what makes it read as a button on either ground (and is what
   Google's branding guidance specifies for the white variant). Dark keeps exactly what it had. */
:root[data-appearance="light"] #auth-google-btn{
  background:#fff!important;
  border:1px solid var(--border-light,#cbd5e1)!important;
  box-shadow:0 1px 2px rgba(15,23,42,.06)!important;
  color:#1f2937!important}
:root[data-appearance="light"] #auth-google-btn:hover{
  background:var(--bg-hover,#e8eef6)!important;
  border-color:var(--border,#94a3b8)!important}

/* ── 49. left step list: the ACTIVE row keeps its emerald identity on light ────────────────
   The generic .text-emerald-300 repaint (#064e3b) reads as plain black, and the row's
   alpha-tint pill (bg-emerald-500/10 ground, border-emerald-500/30 hairline) all but
   vanishes on white - so the selected step sat as a colorless gray pill under a column of
   green checkmarks. Solid emerald-family light values instead: emerald-100 ground,
   emerald-300 hairline, emerald-800 ink (>=7:1 on the ground). The inner icon well gets a
   stronger tint so it still reads against the emerald ground. */
:root[data-appearance="light"] .sl-sidebar-left a.text-emerald-300{
  background:#d1fae5!important;border-color:#6ee7b7!important;color:#065f46!important}
:root[data-appearance="light"] .sl-sidebar-left a.text-emerald-300 .bg-emerald-500\/10{
  background:rgba(5,150,105,.16)!important}

/* SL-LIGHT-FIRM4/FIRM5: weight as HIERARCHY. Structural frames - the welcome/mission card,
   the stage cards, the sidebar dashboard cards - carry a 2px edge in light mode; step
   TILES stay at Tailwind's 1px (FIRM5: the owner found uniform 2px "much intense" - the
   #86919d color fix alone is what rounds 1-3 were missing on tiles). 2px, not 1.5px:
   Chrome FLOORS border widths to whole device pixels, so at Windows 100%/125% scaling
   1.5px paints IDENTICAL to 1px - it must reach 2 device pixels to be a visible change.
   border-box, so no layout shift; placed last so source order wins ties. */
:root[data-appearance="light"] [data-mission-card],
:root[data-appearance="light"] #stages-timeline .border.rounded-2xl,
:root[data-appearance="light"] .sl-ps-card,
:root[data-appearance="light"] .sl-ph-card{border-width:2px}

/* SL-LIGHT-CALM: the four phase boxes were the one place the 3.8:1 hue borders read as
   "my eye is not comfortable" - four large competing colored frames. Here, and ONLY here
   (#stages-timeline id out-ranks the FIRM3 hue rules), the ring softens to the same hue
   at 45%% over white (~1.9:1): still colored, still a frame, no longer shouting. The 2px
   width stays - structure comes from weight, calm comes from saturation. */
:root[data-appearance="light"] #stages-timeline [class*="border-emerald-500/"]{border-color:rgba(16,185,129,.45)!important}
:root[data-appearance="light"] #stages-timeline [class*="border-cyan-500/"]{border-color:rgba(6,182,212,.45)!important}
:root[data-appearance="light"] #stages-timeline [class*="border-amber-500/"]{border-color:rgba(245,158,11,.45)!important}
:root[data-appearance="light"] #stages-timeline [class*="border-orange-500/"]{border-color:rgba(249,115,22,.45)!important}
:root[data-appearance="light"] #stages-timeline [class*="border-pink-500/"]{border-color:rgba(236,72,153,.45)!important}
:root[data-appearance="light"] #stages-timeline [class*="border-violet-500/"]{border-color:rgba(139,92,246,.45)!important}
:root[data-appearance="light"] #stages-timeline [class*="border-red-500/"]{border-color:rgba(239,68,68,.45)!important}
:root[data-appearance="light"] #stages-timeline [class*="border-blue-500/"]{border-color:rgba(59,130,246,.45)!important}
:root[data-appearance="light"] #stages-timeline [class*="border-yellow-500/"]{border-color:rgba(234,179,8,.45)!important}
:root[data-appearance="light"] #stages-timeline [class*="border-purple-500/"]{border-color:rgba(168,85,247,.45)!important}
:root[data-appearance="light"] #stages-timeline [class*="border-green-500/"]{border-color:rgba(34,197,94,.45)!important}
:root[data-appearance="light"] #stages-timeline [class*="border-teal-500/"]{border-color:rgba(20,184,166,.45)!important}
:root[data-appearance="light"] #stages-timeline [class*="border-indigo-500/"]{border-color:rgba(99,102,241,.45)!important}

/* SL-PRICING-CTA-LIGHT: plan CTAs in the light theme speak the established light CTA
   language - tint face, firm border, dark ink (one rule per CO_BG hue). Scoped to
   .plan-card: the dark theme and every other gradient utility stay untouched. */
:root[data-appearance="light"] .plan-card [class*="from-slate-500"]{background:linear-gradient(180deg,#f1f5f9,#e2e8f0)!important;border:2px solid #64748b!important;color:#334155!important}
:root[data-appearance="light"] .plan-card [class*="from-cyan-500"]{background:linear-gradient(180deg,#cffafe,#a5f3fc)!important;border:2px solid #0891b2!important;color:#155e75!important}
:root[data-appearance="light"] .plan-card [class*="from-violet-500"]{background:linear-gradient(180deg,#ede9fe,#ddd6fe)!important;border:2px solid #7c3aed!important;color:#5b21b6!important}
:root[data-appearance="light"] .plan-card [class*="from-amber-500"]{background:linear-gradient(180deg,#fef3c7,#fde68a)!important;border:2px solid #d97706!important;color:#92400e!important}
:root[data-appearance="light"] .plan-card [class*="from-emerald-500"]{background:linear-gradient(180deg,#d1fae5,#a7f3d0)!important;border:2px solid #059669!important;color:#065f46!important}
:root[data-appearance="light"] .plan-card [class*="from-pink-500"]{background:linear-gradient(180deg,#fce7f3,#fbcfe8)!important;border:2px solid #db2777!important;color:#9d174d!important}
:root[data-appearance="light"] .plan-card [class*="from-red-500"]{background:linear-gradient(180deg,#fee2e2,#fecaca)!important;border:2px solid #dc2626!important;color:#991b1b!important}
/* SL-PRICING-CTA-LIGHT: the Most Popular pill, same light voice as the CTAs. */
:root[data-appearance="light"] .plan-card .bg-cyan-500{background:linear-gradient(180deg,#cffafe,#a5f3fc)!important;border:2px solid #0891b2!important;color:#155e75!important;box-shadow:0 2px 8px -2px rgba(8,145,178,.35)!important}

/* SL-CHECKOUT-LIGHT: the checkout modal's SELECT/SELECTED pills and the Pay Now button
   in the light theme - same tint/border/ink language as the plan cards, per plan hue. */
:root[data-appearance="light"] .ppp-pill{background:#e2e8f0!important;color:#475569!important}
:root[data-appearance="light"] .ppp-proj-row.selected .ppp-pill,:root[data-appearance="light"] .ppp-pill-static{background:rgba(16,185,129,.15)!important;color:#047857!important}
:root[data-appearance="light"] #ppp-pay-btn[class*="from-slate-500"]{background:linear-gradient(180deg,#f1f5f9,#e2e8f0)!important;border:2px solid #64748b!important;color:#334155!important}
:root[data-appearance="light"] #ppp-pay-btn[class*="from-cyan-500"]{background:linear-gradient(180deg,#cffafe,#a5f3fc)!important;border:2px solid #0891b2!important;color:#155e75!important}
:root[data-appearance="light"] #ppp-pay-btn[class*="from-violet-500"]{background:linear-gradient(180deg,#ede9fe,#ddd6fe)!important;border:2px solid #7c3aed!important;color:#5b21b6!important}
:root[data-appearance="light"] #ppp-pay-btn[class*="from-amber-500"]{background:linear-gradient(180deg,#fef3c7,#fde68a)!important;border:2px solid #d97706!important;color:#92400e!important}
:root[data-appearance="light"] #ppp-pay-btn[class*="from-emerald-500"]{background:linear-gradient(180deg,#d1fae5,#a7f3d0)!important;border:2px solid #059669!important;color:#065f46!important}
:root[data-appearance="light"] #ppp-pay-btn[class*="from-pink-500"]{background:linear-gradient(180deg,#fce7f3,#fbcfe8)!important;border:2px solid #db2777!important;color:#9d174d!important}
:root[data-appearance="light"] #ppp-pay-btn[class*="from-red-500"]{background:linear-gradient(180deg,#fee2e2,#fecaca)!important;border:2px solid #dc2626!important;color:#991b1b!important}
/* SL-ACCOUNT-CHIP: the header account trigger reads as a control in light mode -
   white chip + firm border, like the TEAM pill beside it. Dark keeps its quiet hover. */
:root[data-appearance="light"] #user-menu-wrapper > button{background:#ffffff;border:1px solid var(--border);box-shadow:0 1px 3px rgba(15,23,42,.06)}
:root[data-appearance="light"] #user-menu-wrapper > button:hover{background:#f1f5f9;border-color:var(--border-light)}
/* SL-MV2-WIDTH r2 (mobile v2 p03, G8): the page column is never wider than the phone. <main> sits in
   the flex row .sl-layout-row (common.js buildSidebarLayout); a flex item's default min-width:auto is
   its widest unbreakable descendant, so one nowrap pill, a 240 px grid track or a wide table made main
   368-495 px on a 360 px screen and the row's overflow:hidden cut the right edge off every card. main gives
   up its content minimum in its row; every other box keeps its own, so a word or a score is never split
   (r2, final review P03-SPLIT-WORDS); a component whose own fixed widths cannot fit is a CONTAIN row. */
.sl-layout-row>main{min-width:0}
@media (max-width:767px){
/* SL-MV2-MAIN-FILL (06 T5): on a phone main is the whole row, never its content's max-content centred */
.sl-layout-row>main{flex-grow:1}
main :where(img,video){max-width:100%;height:auto}
main :where(iframe){max-width:100%}
main :where(pre,code){white-space:pre-wrap;overflow-wrap:anywhere}
}
@media (max-width:480px){
/* 05: Location Strategy type cards ask for 340 px columns; the phone column is about 300 px */ :root .ls-ts-grid{grid-template-columns:1fr}
/* 44 47: the slide grid has a 240 px column minimum; the phone column inside a result is about 236 px */ :root .slv-pages{grid-template-columns:1fr}
/* 01: the scorecard scrolls sideways in its own overflow-x:auto box; its frame name stays in view while it does (first column only: the Zwicky table has three .lf columns, which would pile up at the same edge) */ :root .srf-table th.lf:first-child,:root .srf-table td.lf:first-child{position:sticky;inset-inline-start:0;z-index:1;background:var(--bg-card,#0f172a)}
/* 03: the scenario grid and its labels on a phone belong to the page's own phone block (one row per scenario; _market_sizing.html, p10 T6 SL-MV2-MS-PHONE) - no CONTAIN row here */
}
@media (max-width:640px){
/* 04: the approvals table needs about 670 px (4 nowrap status buttons + item + duration + cost); each approval becomes one stacked row */ :root .rp-chk-table,:root .rp-chk-table tbody,:root .rp-chk-table tbody tr:not(.detail-row),:root .rp-chk-table tbody td{display:block;width:100%}
/* 04: no columns are left for the heads to label */ :root .rp-chk-table thead{display:none}
/* 04: one approval per row */ :root .rp-chk-table tbody tr:not(.detail-row){padding:8px 10px;border-bottom:1px solid rgba(148,163,184,.12)}
/* 04: the cells stack inside the row */ :root .rp-chk-table tbody td{padding:4px 0}
/* 04: duration and cost share one line under the name */ :root .rp-chk-table tbody td.rp-chk-meta-cell{display:inline-block;width:auto;margin-inline-end:14px}
/* 04: the four status choices share the full row width */ :root .rp-chk-seg{display:flex;width:100%}
/* 04: four 40 px targets instead of 21 px pills (G27) */ :root .rp-seg-btn{flex:1 1 0;justify-content:center;min-height:40px}
}
/* SL-MV2-FLAT (mobile v2 p03, G9): one frame level on phones - the item card keeps its border, the
   result frame and the section card around it give their border and padding back to the text. */
@media (max-width:480px){
/* chassis: the chassis adds 12 px on each side inside main's own 16 px gutter */ :root[data-appearance] .sl-chassis-root{padding-left:0;padding-right:0}
/* chassis: the result frame: frame 1 of 3 */ :root[data-appearance] .sl-result-body{padding:12px 0 4px!important;background:transparent!important;border:0!important;border-radius:0!important}
/* chassis: the result head stands alone once the frame under it is gone */ :root[data-appearance] .sl-result-head{border-radius:14px}
/* SLViz: the section card: frame 2 of 3; a hairline keeps sections apart */ :root[data-appearance] .slv-sec{padding:14px 0 0!important;background:transparent!important;border:0!important;border-top:1px solid rgba(148,163,184,.16)!important;border-radius:0!important}
/* 08: Business Model Canvas sections: the same middle frame */ :root[data-appearance] .bx-sec{padding:14px 0 0!important;background:transparent!important;border:0!important;border-top:1px solid rgba(148,163,184,.16)!important;border-radius:0!important}
/* 03: the market-sizing step card around each analysis section and its chart box */ :root[data-appearance] .ms-card{padding:14px 0 0!important;background:transparent!important;border:0!important;border-top:1px solid rgba(148,163,184,.16)!important;border-radius:0!important}
/* 16: the unit-economics step card around the estimate bar and its button */ :root[data-appearance] .ue-card{padding:14px 0 0!important;background:transparent!important;border:0!important;border-top:1px solid rgba(148,163,184,.16)!important;border-radius:0!important}
/* SLViz: numbered steps (a journey, a 30-day plan) read top to bottom, one full-width card each */ :root[data-appearance] .slv-seq-step{flex-basis:100%}
}
/* SL-MV2-ONE-H1 (mobile v2 p03, G13): below 1024 px the step bar's <h1> (app.js SL-MV2-STEPBAR-DOOR) names the
   page with the step name the server owns; the chassis eyebrow and the pages' own header h1s step aside ONLY
   while the bar holds that h1 (:has) - a page the planner does not list, or with no bar, keeps its own name. */
@media (max-width:1023px){
:root:has(h1.sl-step-bar-title) .sl-chassis-root .sl-eyebrow-wrap{display:none}
/* 07 */ :root:has(h1.sl-step-bar-title) h1[data-i18n="kol_title"]{display:none}
/* 10 */ :root:has(h1.sl-step-bar-title) h1[data-i18n="mvp_title"]{display:none}
/* 16 */ :root:has(h1.sl-step-bar-title) h1[data-i18n="ue_title"]{display:none}
/* 17 */ :root:has(h1.sl-step-bar-title) h1[data-i18n="sp_title"]{display:none}
/* 22 */ :root:has(h1.sl-step-bar-title) h1[data-i18n="fin_title"]{display:none}
/* 29 */ :root:has(h1.sl-step-bar-title) h1[data-i18n="ss_title"]{display:none}
/* 42 */ :root:has(h1.sl-step-bar-title) h1[data-i18n="mu_title"]{display:none}
/* J10 */ :root:has(h1.sl-step-bar-title) h1[data-i18n="ltm_title"]{display:none}
/* J11 */ :root:has(h1.sl-step-bar-title) h1[data-i18n="pp_title"]{display:none}
/* J12 */ :root:has(h1.sl-step-bar-title) h1[data-i18n="sf_title"]{display:none}
}
/* SL-MV2-TYPE 93ab57d3 (G4): on phones no text is smaller than 12 px and running text is 14 px. Rendered from the declarations that set less (one rule per selector, so one bad selector drops only itself); the source declarations stay as they are for desktop. The last rows keep the larger size a more specific rule (a class, [dir=rtl]) gives a floored element, so the floor never shrinks text. */
@media (max-width:767px){
:root .ai-scan-attempt{font-size:12px!important}
:root .ai-scan-counter{font-size:12px!important}
:root .ai-scan-stage .ai-scan-stage-ico{font-size:12px!important}
:root .bmc-block-items{font-size:14px!important}
:root .bmc-block-summary{font-size:14px!important}
:root .bmc-block-title{font-size:12px!important}
:root .bmc-insight{font-size:14px!important}
:root .chip{font-size:12px!important}
:root .cl-vchip .cl-eg{font-size:12px!important}
:root .cp-aud{font-size:12px!important}
:root .cp-aud-hint{font-size:12px!important}
:root .cp-sec-hint{font-size:12px!important}
:root .cp-sec-tag{font-size:12px!important}
:root .cv-card-label{font-size:12px!important}
:root .cv-card-oneliner{font-size:14px!important}
:root .cv-card-site{font-size:12px!important}
:root .cv-insight-text{font-size:14px!important}
:root .cv-insight-title{font-size:12px!important}
:root .cv-matrix{font-size:12px!important}
:root .cv-matrix tbody td:first-child{font-size:12px!important}
:root .cv-matrix thead th{font-size:12px!important}
:root .cv-radar-legend-item{font-size:12px!important}
:root .cv-tag{font-size:12px!important}
:root .cv-threat{font-size:12px!important}
:root .cv-valprop{font-size:14px!important}
:root .cv-weakness{font-size:12px!important}
:root .cyr-pgb{font-size:12px!important}
:root .fin-basics-card-edit{font-size:12px!important}
:root .fin-basics-empty{font-size:12px!important}
:root .fin-basics-item-label{font-size:12px!important}
:root .fin-basics-missing-notice{font-size:12px!important}
:root .fin-bs-col-title{font-size:12px!important}
:root .fin-bs-row.total .fin-bs-row-label{font-size:12px!important}
:root .fin-calc-label{font-size:12px!important}
:root .fin-chk-label{font-size:12px!important}
:root .fin-country-label{font-size:12px!important}
:root .fin-country-note{font-size:12px!important}
:root .fin-country-suggestion{font-size:12px!important}
:root .fin-country-suggestion-btn{font-size:12px!important}
:root .fin-derived{font-size:12px!important}
:root .fin-field-help{font-size:12px!important}
:root .fin-field-irrelevant-label{font-size:12px!important}
:root .fin-field-label{font-size:12px!important}
:root .fin-input-suffix-hint{font-size:12px!important}
:root .fin-is-margin{font-size:12px!important}
:root .fin-locator-empty{font-size:12px!important}
:root .fin-locator-fallback-header{font-size:12px!important}
:root .fin-locator-head-desc{font-size:12px!important}
:root .fin-locator-item-desc{font-size:12px!important}
:root .fin-locator-item-target{font-size:12px!important}
:root .fin-metric-hint{font-size:12px!important}
:root .fin-metric-impact-btn{font-size:12px!important}
:root .fin-metric-impact-chip{font-size:12px!important}
:root .fin-metric-impact-chip .fin-metric-impact-chip-val{font-size:12px!important}
:root .fin-metric-impact-drawer{font-size:12px!important}
:root .fin-metric-impact-title{font-size:12px!important}
:root .fin-metric-label{font-size:12px!important}
:root .fin-metrics-group-title{font-size:12px!important}
:root .fin-na-badge{font-size:12px!important}
:root .fin-section-desc{font-size:12px!important}
:root .fin-smart-hint{font-size:12px!important}
:root .fin-smart-input-wrap .suf{font-size:12px!important}
:root .fin-smart-label{font-size:12px!important}
:root .fin-smart-prerev{font-size:12px!important}
:root .fin-statement-head-sub{font-size:12px!important}
:root .fin-status-badge{font-size:12px!important}
:root .fin-val-card-formula{font-size:12px!important}
:root .fin-val-card-name{font-size:12px!important}
:root .fin-val-disclaimer{font-size:12px!important}
:root .fin-val-relevant-badge{font-size:12px!important}
:root .fin-val-summary-label{font-size:12px!important}
:root .fin-val-summary-reason{font-size:14px!important}
:root .footer-copy:where(:not(.sc-foot *)){font-size:12px!important}
:root .footer-copy .footer-recaptcha:where(:not(.sc-foot *)){font-size:12px!important}
:root .footer-nav-link:where(:not(.sc-foot *)){font-size:12px!important}
:root .footer-sep:where(:not(.sc-foot *)){font-size:12px!important}
:root .hr-budget-lbl{font-size:12px!important}
:root .hr-budget-val{font-size:12px!important}
:root .hr-details summary .hr-caret{font-size:12px!important}
:root .hr-fvh-note{font-size:12px!important}
:root .hr-line{font-size:14px!important}
:root .hr-month{font-size:12px!important}
:root .hr-now-tag{font-size:12px!important}
:root .hr-org-body{font-size:14px!important}
:root .hr-org-head{font-size:12px!important}
:root .hr-role-meta{font-size:12px!important}
:root .hr-role-trigger{font-size:14px!important}
:root .hr-seq-meta{font-size:12px!important}
:root .hr-seq-n{font-size:12px!important}
:root .hr-seq-title{font-size:12px!important}
:root .hr-verdict{font-size:12px!important}
:root .ip-card-badge{font-size:12px!important}
:root .ip-card-body{font-size:14px!important}
:root .ip-meta-pill{font-size:12px!important}
:root .ip-order-step .ip-order-num{font-size:12px!important}
:root .ip-section-body{font-size:14px!important}
:root .ip-section-head{font-size:12px!important}
:root .iv-bubble{font-size:14px!important}
:root .iv-bubble-sys{font-size:12px!important}
:root .iv-chip{font-size:12px!important}
:root .iv-eval-score-label{font-size:12px!important}
:root .iv-ex-empty{font-size:12px!important}
:root .iv-ex-item{font-size:12px!important}
:root .iv-ex-tab{font-size:12px!important}
:root .iv-examples-head-label{font-size:12px!important}
:root .iv-feedback{font-size:12px!important}
:root .iv-grp-count{font-size:12px!important}
:root .iv-grp-label{font-size:12px!important}
:root .iv-hero-pill{font-size:12px!important}
:root .iv-ic{font-size:12px!important}
:root .iv-live-chip{font-size:12px!important}
:root .iv-mode-btn{font-size:12px!important}
:root .iv-quick{font-size:12px!important}
:root .kc-group-head{font-size:12px!important}
:root .kc-head-icon{font-size:12px!important}
:root .kc-head-sub{font-size:12px!important}
:root .kc-head-title{font-size:12px!important}
:root .kc-row-label{font-size:12px!important}
:root .kol-attr{font-size:12px!important}
:root .kol-chip{font-size:12px!important}
:root .kol-flag{font-size:14px!important}
:root .kol-label{font-size:12px!important}
:root .kol-step-sub{font-size:12px!important}
:root .ld-cap{font-size:12px!important}
:root .ld-critique{font-size:14px!important}
:root .ld-fb{font-size:14px!important}
:root .ld-msg-b{font-size:14px!important}
:root .ld-reviews-suffix{font-size:12px!important}
:root .loc-tchip-d{font-size:12px!important}
:root .loc-tchip-ic{font-size:12px!important}
:root .loc-tchip-t{font-size:12px!important}
:root .lp-meta{font-size:14px!important}
:root .ls-ai-pill{font-size:12px!important}
:root .ls-comp{font-size:12px!important}
:root .ls-crit{font-size:12px!important}
:root .ls-crit-l{font-size:12px!important}
:root .ls-flag{font-size:14px!important}
:root .ls-label{font-size:12px!important}
:root .ls-legend{font-size:12px!important}
:root .ls-matrix{font-size:12px!important}
:root .ls-matrix th{font-size:12px!important}
:root .ls-meta-row{font-size:12px!important}
:root .ls-rentbox-note{font-size:14px!important}
:root .ls-rentbox-size{font-size:12px!important}
:root .ls-step-sub{font-size:12px!important}
:root .ls-tradeoff{font-size:14px!important}
:root .ls-ts-l{font-size:12px!important}
:root .ls-ts-role{font-size:12px!important}
:root .ls-ts-v{font-size:14px!important}
:root .ls-verdict{font-size:14px!important}
:root .ls-why{font-size:14px!important}
:root .ms-ai-hint{font-size:14px!important}
:root .ms-ai-scan-status{font-size:12px!important}
:root .ms-ai-scan-sub{font-size:12px!important}
:root .ms-ai-stage-text{font-size:12px!important}
:root .ms-ana-cmp-note{font-size:14px!important}
:root .ms-ana-cred{font-size:12px!important}
:root .ms-ana-critique p{font-size:14px!important}
:root .ms-ana-exit-meta{font-size:12px!important}
:root .ms-ana-flag{font-size:14px!important}
:root .ms-ana-narrative p{font-size:14px!important}
:root .ms-ana-scenario-assumption{font-size:14px!important}
:root .ms-ana-scenario-label{font-size:12px!important}
:root .ms-ana-section-title{font-size:12px!important}
:root .ms-ana-ue-label{font-size:12px!important}
:root .ms-ana-ue-verdict{font-size:12px!important}
:root .ms-ana-year-label{font-size:12px!important}
:root .ms-ana-year-revenue{font-size:12px!important}
:root .ms-analysis-loading-attempt{font-size:12px!important}
:root .ms-autofill-status{font-size:14px!important}
:root .ms-brief-empty{font-size:12px!important}
:root .ms-brief-loading{font-size:12px!important}
:root .ms-brief-row{font-size:14px!important}
:root .ms-brief-row-label{font-size:12px!important}
:root .ms-chip{font-size:12px!important}
:root .ms-collapsible-body{font-size:14px!important}
:root .ms-derived-label{font-size:12px!important}
:root .ms-exit-card-label{font-size:12px!important}
:root .ms-exit-comp{font-size:12px!important}
:root .ms-exit-comp-year{font-size:12px!important}
:root .ms-field .ms-label{font-size:12px!important}
:root .ms-field .ms-unit{font-size:12px!important}
:root .ms-flag{font-size:14px!important}
:root .ms-funnel-label{font-size:12px!important}
:root .ms-funnel-pct{font-size:12px!important}
:root .ms-funnel-tier-label{font-size:12px!important}
:root .ms-funnel-tier-pct{font-size:12px!important}
:root .ms-info{font-size:12px!important}
:root .ms-info::after{font-size:14px!important}
:root .ms-label{font-size:12px!important}
:root .ms-magnitude{font-size:12px!important}
:root .ms-scen-assumption{font-size:12px!important}
:root .ms-scen-label{font-size:12px!important}
:root .ms-stage-name{font-size:12px!important}
:root .ms-step-sub{font-size:12px!important}
:root .ms-tier-pill{font-size:12px!important}
:root .ms-ue-bar-label{font-size:12px!important}
:root .ms-ue-ratio-label{font-size:12px!important}
:root .ms-ue-ratio-verdict{font-size:12px!important}
:root .mvp-config-label{font-size:12px!important}
:root .mvp-ctx-head-badge{font-size:12px!important}
:root .mvp-img-num{font-size:12px!important}
:root .mvp-label{font-size:12px!important}
:root .mvp-loader-sub{font-size:12px!important}
:root .mvp-step-sub{font-size:12px!important}
:root .mvp-tile-name{font-size:12px!important}
:root .mvp-tile-tick{font-size:12px!important}
:root .mvp-vchip{font-size:12px!important}
:root .pp-sec-hint{font-size:12px!important}
:root .pp-sec-tag{font-size:12px!important}
:root .pr-anchor-label{font-size:12px!important}
:root .pr-anchor-note{font-size:12px!important}
:root .pr-model-pill{font-size:12px!important}
:root .pr-section-body{font-size:14px!important}
:root .pr-section-head{font-size:12px!important}
:root .rep-band{font-size:12px!important}
:root .rep-cap{font-size:12px!important}
:root .rep-critique{font-size:14px!important}
:root .rep-fb{font-size:14px!important}
:root .rep-msg-b{font-size:14px!important}
:root .rep-note{font-size:14px!important}
:root .rep-rating-suffix{font-size:12px!important}
:root .rep-seg button{font-size:12px!important}
:root .rep-why-row{font-size:14px!important}
:root .result-card .result-body{font-size:14px!important}
:root .rp-ai-scan-status{font-size:12px!important}
:root .rp-ai-scan-sub{font-size:12px!important}
:root .rp-ai-scan-viz .rp-core{font-size:12px!important}
:root .rp-ai-stage{font-size:12px!important}
:root .rp-ana-comp-note{font-size:12px!important}
:root .rp-ana-flag-item{font-size:14px!important}
:root .rp-ana-pill{font-size:12px!important}
:root .rp-ana-section-title{font-size:12px!important}
:root .rp-ana-stat-label{font-size:12px!important}
:root .rp-ana-step-detail{font-size:14px!important}
:root .rp-ana-step-meta{font-size:12px!important}
:root .rp-ana-summary{font-size:14px!important}
:root .rp-brief-empty{font-size:12px!important}
:root .rp-brief-loading{font-size:12px!important}
:root .rp-brief-row{font-size:14px!important}
:root .rp-brief-row-label{font-size:12px!important}
:root .rp-chk-btn{font-size:12px!important}
:root .rp-chk-detail{font-size:14px!important}
:root .rp-chk-detail-cell{font-size:14px!important}
:root .rp-chk-header-count{font-size:12px!important}
:root .rp-chk-header-icon{font-size:12px!important}
:root .rp-chk-header-title{font-size:12px!important}
:root .rp-chk-meta{font-size:12px!important}
:root .rp-chk-rollup{font-size:12px!important}
:root .rp-chk-status-icon{font-size:12px!important}
:root .rp-chk-table thead th{font-size:12px!important}
:root .rp-comp-icon{font-size:12px!important}
:root .rp-comp-note-2{font-size:14px!important}
:root .rp-derived-label{font-size:12px!important}
:root .rp-flag{font-size:14px!important}
:root .rp-flag-label{font-size:12px!important}
:root .rp-flag-text{font-size:14px!important}
:root .rp-gate-cost{font-size:12px!important}
:root .rp-journey-month{font-size:12px!important}
:root .rp-journey-note{font-size:12px!important}
:root .rp-label{font-size:12px!important}
:root .rp-prose{font-size:14px!important}
:root .rp-prose-lead{font-size:14px!important}
:root .rp-seg-btn{font-size:12px!important}
:root .rp-step-sub{font-size:12px!important}
:root .rp-strat-icon{font-size:12px!important}
:root .rp-strat-text{font-size:14px!important}
:root .rr-alt-pill{font-size:12px!important}
:root .rr-cap-name{font-size:12px!important}
:root .rr-channel-fit{font-size:12px!important}
:root .rr-channel-why{font-size:14px!important}
:root .rr-deck-num{font-size:12px!important}
:root .rr-deck-what{font-size:14px!important}
:root .rr-funnel-lever{font-size:12px!important}
:root .rr-layer-alts{font-size:12px!important}
:root .rr-layer-rec-label{font-size:12px!important}
:root .rr-list-deadline{font-size:12px!important}
:root .rr-list-desc{font-size:14px!important}
:root .rr-list-metric{font-size:12px!important}
:root .rr-list-score{font-size:12px!important}
:root .rr-list-why{font-size:12px!important}
:root .rr-meta-pill{font-size:12px!important}
:root .rr-mx-badge{font-size:12px!important}
:root .rr-mx-body{font-size:14px!important}
:root .rr-order-step .rr-order-num{font-size:12px!important}
:root .rr-pill{font-size:12px!important}
:root .rr-section-body{font-size:14px!important}
:root .rr-section-head{font-size:12px!important}
:root .rr-tag{font-size:12px!important}
:root .rr-tl-label{font-size:12px!important}
:root .rr-tl-task{font-size:14px!important}
:root .sim-badge{font-size:12px!important}
:root .sim-card-title{font-size:12px!important}
:root .sim-chart-headline{font-size:12px!important}
:root .sim-chart-legend{font-size:12px!important}
:root .sim-chart-tab{font-size:12px!important}
:root .sim-chart-tabs-wide .sim-chart-tab{font-size:12px!important}
:root .sim-chart-tooltip{font-size:12px!important}
:root .sim-chart-tooltip .tt-line{font-size:12px!important}
:root .sim-chart-tooltip .tt-month{font-size:12px!important}
:root .sim-empty-banner-btn{font-size:12px!important}
:root .sim-empty-banner-text{font-size:14px!important}
:root .sim-finvar-body{font-size:12px!important}
:root .sim-finvar-key{font-size:12px!important}
:root .sim-flash-delta{font-size:12px!important}
:root .sim-hyp-tag{font-size:12px!important}
:root .sim-insight-body{font-size:14px!important}
:root .sim-insight-cta{font-size:12px!important}
:root .sim-insight-head{font-size:12px!important}
:root .sim-insights-bottom-head{font-size:12px!important}
:root .sim-kpi-delta{font-size:12px!important}
:root .sim-kpi-header{font-size:12px!important}
:root .sim-kpi-label{font-size:12px!important}
:root .sim-kpi-range{font-size:12px!important}
:root .sim-needfin-card p{font-size:14px!important}
:root .sim-overall-btn{font-size:12px!important}
:root .sim-pill{font-size:12px!important}
:root .sim-play-counter{font-size:12px!important}
:root .sim-slider-help{font-size:12px!important}
:root .sim-slider-help::after{font-size:14px!important}
:root .sim-slider-label{font-size:12px!important}
:root .sim-slider-scale{font-size:12px!important}
:root .sim-start-edit{font-size:12px!important}
:root .sim-start-label{font-size:12px!important}
:root .sim-start-meta{font-size:12px!important}
:root .sim-start-unit{font-size:12px!important}
:root .sim-status-badge{font-size:12px!important}
:root .sim-tornado-row{font-size:12px!important}
:root .sl-ap-opt{font-size:12px!important}
:root .sl-cf-p{font-size:14px!important}
:root .sl-chassis-root .kc-group-head{font-size:12px!important}
:root .sl-chassis-root .kc-head-icon{font-size:12px!important}
:root .sl-chassis-root .kc-head-sub{font-size:12px!important}
:root .sl-chassis-root .kc-head-title{font-size:12px!important}
:root .sl-chassis-root .kc-row-label{font-size:12px!important}
:root .sl-context-hint{font-size:12px!important}
:root .sl-context-input{font-size:14px!important}
:root .sl-context-toggle .sl-context-toggle-chev{font-size:12px!important}
:root .sl-context-toggle .sl-context-toggle-tag{font-size:12px!important}
:root .sl-cyc-btn{font-size:12px!important}
:root .sl-cyr-cap{font-size:12px!important}
:root .sl-cyr-chip b{font-size:12px!important}
:root .sl-cyr-mk{font-size:12px!important}
:root .sl-cyr-new{font-size:12px!important}
:root .sl-cyr-note{font-size:12px!important}
:root .sl-cyr-nt{font-size:12px!important}
:root .sl-cyr-run .sl-cyr-mk{font-size:12px!important}
:root .sl-cyr-st{font-size:12px!important}
:root .sl-cyr-stghd-n{font-size:12px!important}
:root .sl-cyr-stghd-nd{font-size:12px!important}
:root .sl-cyr-stghd-ph{font-size:12px!important}
:root .sl-cyr-v{font-size:12px!important}
:root .sl-cys-ph-n{font-size:12px!important}
:root .sl-cys-ph-nd{font-size:12px!important}
:root .sl-cys-ph-t{font-size:12px!important}
:root .sl-fd-add-btn{font-size:12px!important}
:root .sl-fd-edit-btn{font-size:12px!important}
:root .sl-fd-empty-desc{font-size:14px!important}
:root .sl-fd-field > span{font-size:12px!important}
:root .sl-fd-field small{font-size:12px!important}
:root .sl-fd-health-header{font-size:12px!important}
:root .sl-fd-health-status{font-size:12px!important}
:root .sl-fd-help{font-size:12px!important}
:root .sl-fd-metric-label{font-size:12px!important}
:root .sl-fd-modal-preview h3{font-size:12px!important}
:root .sl-fd-modal-section h3{font-size:12px!important}
:root .sl-fd-preview-row span{font-size:12px!important}
:root .sl-fd-preview-row strong{font-size:12px!important}
:root .sl-fd-preview-score-label{font-size:12px!important}
:root .sl-fd-preview-score-status{font-size:12px!important}
:root .sl-fd-quick-cancel{font-size:12px!important}
:root .sl-fd-quick-edit-btn{font-size:12px!important}
:root .sl-fd-quick-input{font-size:12px!important}
:root .sl-fd-quick-ok{font-size:12px!important}
:root .sl-fd-restricted-desc{font-size:12px!important}
:root .sl-fd-stage-badge{font-size:12px!important}
:root .sl-fd-tip-popup{font-size:14px!important}
:root .sl-fd-trend{font-size:12px!important}
:root .sl-ld-chip{font-size:12px!important}
:root .sl-ld-dna-h{font-size:12px!important}
:root .sl-ld-scene-h{font-size:12px!important}
:root .sl-ld-slot{font-size:12px!important}
:root .sl-ld-slot .sl-ld-v{font-size:12px!important}
:root .sl-ph-btn{font-size:12px!important}
:root .sl-ph-head span[data-i18n="ph_title"]{font-size:12px!important}
:root .sl-ph-tip{font-size:14px!important}
:root .sl-ph-tips-h{font-size:12px!important}
:root .sl-progress-pct{font-size:12px!important}
:root .sl-proj-pill .sl-proj-chev{font-size:12px!important}
:root .sl-proj-pill .sl-proj-num{font-size:12px!important}
:root .sl-proj-row-num{font-size:12px!important}
:root .sl-ps-count{font-size:12px!important}
:root .sl-ps-empty{font-size:14px!important}
:root .sl-ps-group-head{font-size:12px!important}
:root .sl-ps-head span{font-size:12px!important}
:root .sl-ps-lbl{font-size:12px!important}
:root .sl-ps-loading{font-size:14px!important}
:root .sl-ps-rtl .sl-ps-count{font-size:12px!important}
:root .sl-ps-rtl .sl-ps-group-head{font-size:12px!important}
:root .sl-ps-rtl .sl-ps-head span{font-size:12px!important}
:root .sl-ps-rtl .sl-ps-lbl{font-size:12px!important}
:root .sl-ps-val{font-size:12px!important}
:root .sl-result-rerun{font-size:12px!important}
:root .sl-tier-hint{font-size:12px!important}
:root .slcp-cost{font-size:12px!important}
:root .slcp-n.is-done{font-size:12px!important}
:root .slcp-n.is-off{font-size:12px!important}
:root .slcp-note{font-size:12px!important}
:root .slcp-sub{font-size:12px!important}
:root .slcp-tier-lbl{font-size:12px!important}
:root .slcp-total{font-size:12px!important}
:root .slv-badge{font-size:12px!important}
:root .slv-bar-lbl{font-size:12px!important}
:root .slv-bar-val{font-size:12px!important}
:root .slv-card-l{font-size:14px!important}
:root .slv-ck-b{font-size:12px!important}
:root .slv-ck-n{font-size:14px!important}
:root .slv-fl-ar{font-size:12px!important}
:root .slv-fl-s{font-size:12px!important}
:root .slv-fl-t{font-size:12px!important}
:root .slv-h{font-size:12px!important}
:root .slv-ip .slvI-asset-lbl{font-size:12px!important}
:root .slv-ip .slvI-shield-lbl{font-size:12px!important}
:root .slv-leg{font-size:12px!important}
:root .slv-pg-b{font-size:14px!important}
:root .slv-pg-n{font-size:12px!important}
:root .slv-pg-p{font-size:14px!important}
:root .slv-pg-q{font-size:14px!important}
:root .slv-pg-v{font-size:14px!important}
:root .slv-qc-s{font-size:12px!important}
:root .slv-quote-a{font-size:12px!important}
:root .slv-quote-t{font-size:14px!important}
:root .slv-rf-f{font-size:12px!important}
:root .slv-sales_funnel .slvSF-pct{font-size:12px!important}
:root .slv-seq-badge{font-size:12px!important}
:root .slv-seq-d{font-size:14px!important}
:root .slv-seq-n{font-size:12px!important}
:root .slv-seq-q{font-size:14px!important}
:root .slv-seq-t{font-size:12px!important}
:root .slv-slide-d{font-size:12px!important}
:root .slv-slide-m{font-size:12px!important}
:root .slv-slide-n{font-size:12px!important}
:root .slv-slide-t{font-size:12px!important}
:root .slv-stack-lbl{font-size:12px!important}
:root .slv-stack-note{font-size:12px!important}
:root .slv-stack-seg{font-size:12px!important}
:root .slv-stat-lbl{font-size:12px!important}
:root .slv-tier-f{font-size:14px!important}
:root .slv-tier-flag{font-size:12px!important}
:root .slv-tier-n{font-size:12px!important}
:root .slv-tier-note{font-size:12px!important}
:root .slv-tier-p span:not(.slv-nw){font-size:12px!important}
:root .slv-tier-tg{font-size:12px!important}
:root .sp-auto-save{font-size:12px!important}
:root .sp-auto-tool{font-size:12px!important}
:root .sp-chip{font-size:12px!important}
:root .sp-flag{font-size:14px!important}
:root .sp-label{font-size:12px!important}
:root .sp-margin-bar{font-size:12px!important}
:root .sp-margin-label{font-size:12px!important}
:root .sp-margin-pct{font-size:12px!important}
:root .sp-prod-label{font-size:12px!important}
:root .sp-prod-note{font-size:14px!important}
:root .sp-sop-note{font-size:12px!important}
:root .sp-sop-time{font-size:12px!important}
:root .sp-step-sub{font-size:12px!important}
:root .srf-badge{font-size:12px!important}
:root .srf-chip{font-size:12px!important}
:root .srf-frame-lens{font-size:12px!important}
:root .srf-frame-row{font-size:12px!important}
:root .srf-frame-tot{font-size:12px!important}
:root .srf-orbit li{font-size:14px!important}
:root .srf-orbit-h{font-size:12px!important}
:root .srf-pitch{font-size:14px!important}
:root .srf-raw-l{font-size:12px!important}
:root .srf-rev{font-size:12px!important}
:root .srf-sanity li{font-size:14px!important}
:root .srf-sec{font-size:12px!important}
:root .srf-sp-h{font-size:12px!important}
:root .srf-sp-v{font-size:12px!important}
:root .srf-special-h{font-size:12px!important}
:root .srf-table{font-size:12px!important}
:root .srf-table th{font-size:12px!important}
:root .ss-cal-cell{font-size:12px!important}
:root .ss-cal-event{font-size:12px!important}
:root .ss-cal-legend{font-size:12px!important}
:root .ss-cal-month{font-size:12px!important}
:root .ss-chip{font-size:12px!important}
:root .ss-dist-bar-label{font-size:12px!important}
:root .ss-dist-bars{font-size:12px!important}
:root .ss-dist-geo{font-size:12px!important}
:root .ss-dist-note{font-size:12px!important}
:root .ss-flag{font-size:14px!important}
:root .ss-fund{font-size:12px!important}
:root .ss-fund-note{font-size:12px!important}
:root .ss-label{font-size:12px!important}
:root .ss-meter-small{font-size:12px!important}
:root .ss-step-sub{font-size:12px!important}
:root .ss-tier-label{font-size:12px!important}
:root .ss-tier-note{font-size:14px!important}
:root .ue-bar-cac{font-size:12px!important}
:root .ue-bar-cogs{font-size:12px!important}
:root .ue-bar-margin{font-size:12px!important}
:root .ue-bench{font-size:14px!important}
:root .ue-chan-note{font-size:12px!important}
:root .ue-chan-rating{font-size:12px!important}
:root .ue-chan-row{font-size:12px!important}
:root .ue-derived-label{font-size:12px!important}
:root .ue-est-text{font-size:12px!important}
:root .ue-fix-label{font-size:12px!important}
:root .ue-fix-note{font-size:14px!important}
:root .ue-flag{font-size:14px!important}
:root .ue-kpi-label{font-size:12px!important}
:root .ue-kpi-sub{font-size:12px!important}
:root .ue-label{font-size:12px!important}
:root .ue-legend{font-size:12px!important}
:root .ue-step-sub{font-size:12px!important}
:root .ue-verdict-label{font-size:12px!important}
:root .vp-card-head{font-size:12px!important}
:root .vp-diffs ul{font-size:14px!important}
:root .vp-diffs-head{font-size:12px!important}
:root .vp-fit-label{font-size:12px!important}
:root .vp-fit-summary{font-size:14px!important}
:root .vp-insight{font-size:14px!important}
:root .vp-prio{font-size:12px!important}
:root .vp-sub-label{font-size:12px!important}
:root .vp-sub-list{font-size:14px!important}
:root [style*="font-size:4px"]:not(i),:root [style*="font-size: 4px"]:not(i){font-size:12px!important}
:root [style*="font-size:6.5px"]:not(i),:root [style*="font-size: 6.5px"]:not(i){font-size:12px!important}
:root [style*="font-size:7px"]:not(i),:root [style*="font-size: 7px"]:not(i){font-size:12px!important}
:root [style*="font-size:7.5px"]:not(i),:root [style*="font-size: 7.5px"]:not(i){font-size:12px!important}
:root [style*="font-size:8px"]:not(i),:root [style*="font-size: 8px"]:not(i){font-size:12px!important}
:root [style*="font-size:8.5px"]:not(i),:root [style*="font-size: 8.5px"]:not(i){font-size:12px!important}
:root [style*="font-size:9px"]:not(i),:root [style*="font-size: 9px"]:not(i){font-size:12px!important}
:root [style*="font-size:9.5px"]:not(i),:root [style*="font-size: 9.5px"]:not(i){font-size:12px!important}
:root [style*="font-size:10px"]:not(i),:root [style*="font-size: 10px"]:not(i){font-size:12px!important}
:root [style*="font-size:10.5px"]:not(i),:root [style*="font-size: 10.5px"]:not(i){font-size:12px!important}
:root [style*="font-size:11px"]:not(i),:root [style*="font-size: 11px"]:not(i){font-size:12px!important}
:root [style*="font-size:11.5px"]:not(i),:root [style*="font-size: 11.5px"]:not(i){font-size:12px!important}
:root .text-\[6px\]:not(i){font-size:12px!important}
:root .text-\[7px\]:not(i){font-size:12px!important}
:root .text-\[8px\]:not(i){font-size:12px!important}
:root .text-\[9px\]:not(i){font-size:12px!important}
:root .text-\[10px\]:not(i){font-size:12px!important}
:root .text-\[10\.5px\]:not(i){font-size:12px!important}
:root .text-\[11px\]:not(i){font-size:12px!important}
:root .text-\[11\.5px\]:not(i){font-size:12px!important}
/* measured: docs/mobile-ui-v2/p03/t5_1.json */
/* m */ :root div.bx-blk-t > span{font-size:12px!important}
/* m */ :root div.bx-cell-l > span{font-size:12px!important}
/* m */ :root div.bx-fix-l{font-size:12px!important}
/* m */ :root div.bx-stat-l > span{font-size:12px!important}
/* m */ :root span.bx-badge{font-size:12px!important}
/* m */ :root span.bx-rchip{font-size:12px!important}
/* m */ :root span.bx-step-n{font-size:12px!important}
/* m */ :root span.bx-toc-l{font-size:12px!important}
/* m */ :root span.iv-eval-score-val > i{font-size:12px!important}
:root .rp-ana-pill.rp-ana-pill-long{font-size:14px!important}
:root .rp-ana-pill.score{font-size:14px!important}
:root:has(#ld-next-actions)[dir=rtl] .kc-head-title,:root:has(#ld-next-actions) [dir=rtl] .kc-head-title{font-size:12.5px!important}
:root:has(#ld-next-actions)[dir=rtl] .kc-row .kc-row-label,:root:has(#ld-next-actions) [dir=rtl] .kc-row .kc-row-label{font-size:13px!important}
:root:has(#ld-next-actions)[dir=rtl] .slv-bar-lbl,:root:has(#ld-next-actions) [dir=rtl] .slv-bar-lbl{font-size:12.5px!important}
:root:has(#ld-next-actions)[dir=rtl] .slv-h,:root:has(#ld-next-actions) [dir=rtl] .slv-h{font-size:12.5px!important}
:root:has(#ld-next-actions)[dir=rtl] .slv-seq-t,:root:has(#ld-next-actions) [dir=rtl] .slv-seq-t{font-size:13px!important}
:root:has(#reframe-next-actions)[dir=rtl] .srf-sec,:root:has(#reframe-next-actions) [dir=rtl] .srf-sec{font-size:13px!important}
:root:has(#rep-next-actions)[dir=rtl] .kc-head-title,:root:has(#rep-next-actions) [dir=rtl] .kc-head-title{font-size:12.5px!important}
:root:has(#rep-next-actions)[dir=rtl] .kc-row .kc-row-label,:root:has(#rep-next-actions) [dir=rtl] .kc-row .kc-row-label{font-size:13px!important}
:root:has(#rep-next-actions)[dir=rtl] .slv-bar-lbl,:root:has(#rep-next-actions) [dir=rtl] .slv-bar-lbl{font-size:12.5px!important}
:root:has(#rep-next-actions)[dir=rtl] .slv-h,:root:has(#rep-next-actions) [dir=rtl] .slv-h{font-size:12.5px!important}
:root:has(#rep-next-actions)[dir=rtl] .slv-seq-t,:root:has(#rep-next-actions) [dir=rtl] .slv-seq-t{font-size:13px!important}
:root[dir=rtl] .sl-cyr-v,:root [dir=rtl] .sl-cyr-v{font-size:13.5px!important}
:root[dir=rtl] .sl-ld-chip,:root [dir=rtl] .sl-ld-chip{font-size:12.5px!important}
:root[dir=rtl] .srf-frame-row,:root [dir=rtl] .srf-frame-row{font-size:12.5px!important}
:root[dir=rtl] .srf-sp-v,:root [dir=rtl] .srf-sp-v{font-size:12.5px!important}
/* the planner drawer step names wrap at the 12 px floor instead of being cut (final review P03-DRAWER-CLIP: Tailwind text-[11px] -> 12 px in the 117 px truncate spans cut 9 -> 15 names; the rows carry no title) */ :root #sl-left-sidebar :is(a,div) > span.truncate{white-space:normal;overflow-wrap:break-word}
/* Competitor Analysis (02): the 9 px "Strength" score-bar label carries an inline 55 px width; at the 12 px floor the word is wider than 55 px and was cut "Streng|th" - it takes its own width, the bar the rest (final review P03-SPLIT-WORDS (d)) */ :root [style*="font-size:9px"][style*="width:55px"]{width:auto!important;min-width:55px}
}
/* SL-MV2-INK ce688e66 (G5): secondary text on the dark theme meets 4.5:1, on screens. The grey label token (#64748b, 3.92:1 on the result cards) and its darker siblings read as the theme's muted ink (--text-muted, slate-400 in the default theme); a rule that out-ranks one of them on the same element keeps its own colour (state, hover, context, paper); colours the phone measured below 4.5:1 get the nearest shade that passes. Light theme and print keep their own colours. */
@media screen{
:root:not([data-appearance="light"]) .btn-danger{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .cp-aud-hint{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .cp-sec-chev{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .cp-sec-hint{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .cp-sec-tag{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .cv-card-label{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .cv-card-site{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .fin-basics-card-edit{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .fin-basics-empty{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .fin-basics-item-label{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .fin-bs-row.fin-bs-row-inactive .fin-bs-row-val{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .fin-calc-label{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .fin-chk-label{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .fin-country-note{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .fin-country-suggestion.fin-country-suggestion-empty{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .fin-derived-label{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .fin-field-help{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .fin-field-irrelevant-label i{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .fin-field.fin-field-disabled .fin-field-label-text > :first-child{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .fin-input-prefix{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .fin-input-suffix-hint{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .fin-is-margin{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .fin-is-row.fin-is-row-inactive .fin-is-value{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .fin-locator-clear{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .fin-locator-empty{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .fin-locator-icon{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .fin-locator-item-target{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .fin-metric-card.na .fin-metric-value{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .fin-metric-hint{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .fin-mode-btn{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .fin-mode-btn:not(.active) i{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .fin-section-desc{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .fin-smart-hint{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .fin-smart-input-wrap .pre{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .fin-smart-input-wrap .suf{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .fin-statement-head-sub{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .fin-val-card-amount.na{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .fin-val-card-formula{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .fin-val-disclaimer{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .hr-details summary .hr-caret{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .iv-ex-empty{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .kc-head-sub{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .kc-row-label{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .ld-cap{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .ld-reviews-suffix{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .loc-tchip-ck{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .ls-crit-l{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .ls-matrix th{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .ls-rentbox-size{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .ms-ana-scenario-assumption{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .ms-ana-ue-label{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .ms-ana-year-label{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .ms-analysis-loading-attempt{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .ms-brief-empty{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .ms-brief-row i{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .ms-brief-row-label{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .ms-collapsible-head .ms-collapsible-chevron{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .ms-exit-card-label{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .ms-exit-comp-year{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .ms-field .ms-unit{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .ms-magnitude{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .ms-scen-assumption{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .ms-stage-circle{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .ms-stage-name{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .ms-ue-ratio-label{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .pp-sec-chev{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .pp-sec-hint{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .pp-sec-tag{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .rep-cap{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .rep-rating-suffix{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .rep-why-row i{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .rp-ai-stage{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .rp-ana-stat-label{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .rp-brief-empty{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .rp-brief-row i{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .rp-brief-row-label{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .rp-chk-expand{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .rp-chk-header-count{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .rp-chk-item[data-status="na"] .rp-chk-name{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .rp-chk-table tbody tr[data-status="na"] .rp-chk-item-name{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .rp-seg-btn{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .sim-finvar-body.empty{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .sim-finvar-key i{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .sim-finvar-key.empty{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .sl-chassis-root .kc-empty{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .sl-chassis-root .kc-head-sub{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .sl-chassis-root .kc-row-label{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .sl-context-hint{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .sl-context-toggle .sl-context-toggle-chev{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .sl-fd-empty-desc{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .sl-fd-field input::placeholder{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .sl-fd-field small{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .sl-fd-help{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .sl-fd-quick-cancel{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .sl-fd-quick-edit-btn{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .sl-fd-quote-details[open] .sl-fd-quote-summary{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .sl-fd-quote-summary{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .sl-fd-restricted-desc{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .sl-fd-trend-neutral{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .sl-ld-slot .sl-ld-v{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .sl-proj-pill .sl-proj-chev{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .sl-proj-row-num{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .sl-ps-empty{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .sl-ps-group[data-cat="other"]{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .sl-ps-head span{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .sl-ps-loading{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .sl-tier-hint{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .slv-fl-ar{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .slv-fl-s{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .slv-pg-b i{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .slv-slide-d{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .slv-slide-n{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .slv-stack-note{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .slv-stat-lbl{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .slv-tier-note{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .slv-tier-p span:not(.slv-nw){color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .srf-raw-l{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .srf-table th{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .ss-dist-bar-label{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .ue-kpi-label{color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) [style*="color:#64748b"]:not([style*="-color:#64748b"]){color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) [style*="color:#475569"]:not([style*="-color:#475569"]){color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) [style*="color:#334155"]:not([style*="-color:#334155"]){color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) [style*="color:#7c8aa0"]:not([style*="-color:#7c8aa0"]){color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) [style*="color:#5b6b82"]:not([style*="-color:#5b6b82"]){color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) [style*="color:#526077"]:not([style*="-color:#526077"]){color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) [style*="color:#6b7280"]:not([style*="-color:#6b7280"]){color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) [style*="color:#4b5563"]:not([style*="-color:#4b5563"]){color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) [style*="color:#374151"]:not([style*="-color:#374151"]){color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .text-slate-500:where(:not([class*="dark:text-"]):not([class*="hover:text-"]:hover)){color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .text-slate-600:where(:not([class*="dark:text-"]):not([class*="hover:text-"]:hover)){color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .text-slate-700:where(:not([class*="dark:text-"]):not([class*="hover:text-"]:hover)){color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .text-gray-500:where(:not([class*="dark:text-"]):not([class*="hover:text-"]:hover)){color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .text-gray-600:where(:not([class*="dark:text-"]):not([class*="hover:text-"]:hover)){color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .text-gray-700:where(:not([class*="dark:text-"]):not([class*="hover:text-"]:hover)){color:var(--text-muted, #94a3b8)!important}
:root:not([data-appearance="light"]) .sl-fd-help:hover{color:#22d3ee!important}
:root:not([data-appearance="light"]) .sl-fd-help:focus{color:#22d3ee!important}
:root:not([data-appearance="light"]) .sl-fd-quick-edit-btn:hover{color:#22d3ee!important}
:root:not([data-appearance="light"]) .sl-fd-quick-cancel:hover{color:#f87171!important}
:root:not([data-appearance="light"]) .sl-fd-quote-summary:hover{color:#94a3b8!important}
:root:not([data-appearance="light"])[data-theme]:not([data-theme="dark"]) .sl-fd-help:hover,:root:not([data-appearance="light"]) [data-theme]:not([data-theme="dark"]) .sl-fd-help:hover{color:var(--accent)!important}
:root:not([data-appearance="light"])[data-theme]:not([data-theme="dark"]) .sl-fd-help:focus,:root:not([data-appearance="light"]) [data-theme]:not([data-theme="dark"]) .sl-fd-help:focus{color:var(--accent)!important}
:root:not([data-appearance="light"]) .btn-danger:hover{color:#f87171!important}
:root:not([data-appearance="light"]) .sl-ld-slot.locked .sl-ld-v{color:#34d399!important}
:root:not([data-appearance="light"]) .ms-magnitude.has-value{color:var(--accent-light, #67e8f9)!important}
:root:not([data-appearance="light"]) .ms-stage-past .ms-stage-circle{color:var(--bg-card, #0f172a)!important}
:root:not([data-appearance="light"]) .ms-stage-current .ms-stage-circle{color:var(--bg-card, #0f172a)!important}
:root:not([data-appearance="light"]) .ms-stage-current .ms-stage-name{color:var(--accent-light, #67e8f9)!important}
:root:not([data-appearance="light"]) .ms-stage-past .ms-stage-name{color:#34d399!important}
:root:not([data-appearance="light"]) .rp-ai-stage.active{color:#f472b6!important}
:root:not([data-appearance="light"]) .rp-ai-stage.done{color:#34d399!important}
:root:not([data-appearance="light"]) .rp-chk-expand:hover{color:#fbcfe8!important}
:root:not([data-appearance="light"]) .rp-seg-btn:hover{color:#cbd5e1!important}
:root:not([data-appearance="light"]) .rp-seg-btn.active{color:#0b1020!important}
:root:not([data-appearance="light"]) .rp-seg-btn[data-status="na"].active{color:#0b1020!important}
:root:not([data-appearance="light"]) .loc-tchip.on .loc-tchip-ck{color:#34d399!important}
:root:not([data-appearance="light"]) .fin-field-help:focus{color:var(--accent, #a78bfa)!important}
@media (hover:hover){:root:not([data-appearance="light"]) .fin-field-help:hover{color:var(--accent, #a78bfa)!important}}
@media (hover:hover){:root:not([data-appearance="light"]) .fin-chk:hover + .fin-chk-label{color:var(--accent, #a78bfa)!important}}
@media (hover:hover){:root:not([data-appearance="light"]) .fin-chk-label:hover{color:var(--accent, #a78bfa)!important}}
@media (hover:hover){:root:not([data-appearance="light"]) .fin-basics-card-edit:hover{color:var(--accent, #22d3ee)!important}}
@media (hover:hover){:root:not([data-appearance="light"]) .fin-locator-clear:hover{color:#e2e8f0!important}}
@media (hover:hover){:root:not([data-appearance="light"]) .fin-mode-btn:hover:not(.active){color:#cbd5e1!important}}
:root:not([data-appearance="light"]) .fin-mode-btn.active{color:#fff!important}
/* measured: docs/mobile-ui-v2/p03/t6_1.json */
/* m */ :root:not([data-appearance="light"]) div.iv-bubble.iv-bubble-sys{color:#778599!important}
/* m */ :root:not([data-appearance="light"]) span.iq-strike{color:#3d8c76!important}
}
/* SL-MV2-TAP r4 (mobile v2 p03, G27): on phones every control is at least 40x40 px. :where() keeps the
   floor at zero specificity: it only fills in where no rule set a size; min-height beats a smaller height. */
@media (max-width:767px){
main :where(button,[role="button"],[role="tab"],summary,select,textarea,input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"])){min-height:40px}
main :where(button,[role="button"],[role="tab"],summary){min-width:40px}
main :where(input[type="checkbox"],input[type="radio"]){width:24px;height:24px}
/* the site header menu (32x32), envelope (36x36) and logo link (24 px tall) */ :root header :where(button,a[href]){min-height:40px;min-width:40px}
/* Re-analyze was 104x29 on 34 pages */ :root .sl-result-rerun{min-height:40px;padding-inline:14px}
/* the project pill was 34 px tall */ :root .sl-proj-pill{min-height:40px}
/* the tell-us toggle: one tap opens the box */ :root .sl-context-toggle{min-height:44px}
/* Back / Next step */ :root .sl-bottom-nav-btn,.sl-next-btn{min-height:44px}
/* a range paints its track with its own background: its 40 px is transparent padding around the track its page drew (18 + 4 + 18); the track keeps round ends (inner cap = half its height) */ :root main input[type="range"]{box-sizing:content-box;padding-block:18px;background-clip:content-box;border-radius:3px/50%}
/* the Market Simulator '?' chips stay 14 px tinted circles inside a transparent 40 px box, focused or hovered too; the label keeps its width */ :root main .sim-slider-help{padding:13px;margin-inline:-13px;background-clip:content-box}
/* the Market Simulator KPI pencils: the 40 px box overhangs the text and the card padding, 6 px after the text, never on a line of its own */ :root .sim-start-edit{padding:13px;margin-inline:-7px -13px}
/* a revert arrow beside a pencil starts where the pencil's box ends: the two boxes never overlap */ :root .sim-start-edit+.sim-start-edit{margin-inline-start:13px}
/* the Finances Essentials card's Edit link was 20 px tall (a link: the floor reaches no a[href] in main) */ :root .fin-basics-card-edit{display:inline-flex;align-items:center;min-height:40px}
}
/* SL-MV2-SIM-LINE r2 (mobile v2 p05): on phones the Market Simulator KPI value line holds the amount, its unit and the pencil and never wraps (the amount stays whole, the pencil on its line); a what-if tile's revert arrow takes the next line, so no line is wider than the pencil's; the page's grid keeps every tile wide enough for it (SL-MV2-SIM-ROOM) */ @media (max-width:767px){:root .sim-start-value{white-space:nowrap} :root .sim-start-edit.clear{display:block}}
/* SL-MV2-FOLD r3 (mobile v2 p03, D5 + G22; SL-MV2-P10-T29-kc-keys-css): the "What we know" card on a phone is ONE
   head line - title, count, chevron - and a tap (or Enter / Space) opens it. The head's aria-expanded is the only
   state (common.js SL-MV2-KC-FOLD writes it); a head carries it only when its card was painted folding (a card
   with facts, phone-width viewport), so these rules need no media query. Folded, the title keeps to that line;
   the fact count never wraps at any width. Loading, no-project and zero-facts cards keep their own head. */
:root .kc-card .kc-head-sub{white-space:nowrap}
:root .kc-card > .kc-head[aria-expanded]{cursor:pointer;align-items:center;min-height:40px;margin-bottom:0;padding-bottom:0;border-bottom:0}
:root .kc-card > .kc-head[aria-expanded] .kc-head-title{min-width:0;letter-spacing:.06em}
:root .kc-card > .kc-head[aria-expanded="false"] .kc-head-title{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
:root .kc-card > .kc-head[aria-expanded]::after{content:"";flex:0 0 auto;width:8px;height:8px;margin-inline-start:10px;border-right:2px solid #94a3b8;border-bottom:2px solid #94a3b8;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
:root .kc-card:has(> .kc-head[aria-expanded="false"]){padding-top:6px;padding-bottom:6px}
:root .kc-card > .kc-head[aria-expanded="false"] ~ .kc-group{display:none}
:root .kc-card > .kc-head[aria-expanded="true"]{margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid rgba(148,163,184,.10)}
:root .kc-card > .kc-head[aria-expanded="true"]::after{transform:translateY(2px) rotate(-135deg)}
/* SL-MV2-FOOT r2 (mobile v2 p03, G7 + D4): on phones the step ends with "Next step" first, full width and
   primary, "Back to homepage" as a quiet text button under it, then a slim footer: one line of 24 px icons
   in 40 px targets, one line of links, a 12 px copyright line. A footer docked in a page's own box (/start) keeps its page's shape. */
@media (max-width:767px){
/* Next step above Back, both full width; Next is first in the DOM too (SL-MV2-P10-T29-nav-order-css), the one order at every width - 768 px and wider draw the row in it, never reversed (SL-MV2-P10-T29-fx1-one-order, D10-NAV) */ :root .sl-bottom-nav,:root .sl-next-actions,:root :is(#reframe-next-actions,#ld-next-actions,#rep-next-actions){flex-direction:column;align-items:stretch;gap:8px;padding:20px 0 24px;margin-top:20px}
/* one comfortable target each; a long step name wraps inside the button */ :root .sl-bottom-nav-btn,:root .sl-next-btn,:root :is(#reframe-next-actions,#ld-next-actions,#rep-next-actions) > a{justify-content:center;min-height:44px;font-size:14px;text-align:center}
/* slim footer */ :root .footer-inner:where(:not(.sc-foot *)){gap:4px;padding:8px 12px 14px}
/* one line of icons */ :root .footer-social:where(:not(.sc-foot *)){gap:0;justify-content:center}
/* 24 px icons (D4) in 40 px targets (G27) */ :root .footer-social-link:where(:not(.sc-foot *)){width:40px;height:40px;background:transparent;border-color:transparent;font-size:24px}
/* the Play mark matches the glyphs */ :root .footer-social-link i.sl-ic-gplay:where(:not(.sc-foot *)){width:24px;height:24px}
/* one line of links */ :root .footer-nav:where(:not(.sc-foot *)){justify-content:center;gap:0}
/* links were 21 px tall */ :root .footer-nav-link:where(:not(.sc-foot *)){display:inline-flex;align-items:center;min-height:40px;padding:0 8px;font-size:12px}
/* the copyright line was 11 px */ :root .footer-copy:where(:not(.sc-foot *)){font-size:12px}
/* the reCAPTCHA note was 9.5 px at 55% opacity */ :root .footer-copy .footer-recaptcha:where(:not(.sc-foot *)){display:block;margin:2px 0 0;font-size:12px;opacity:1}
/* Privacy / Terms targets */ :root .footer-copy .footer-recaptcha a:where(:not(.sc-foot *)){display:inline-flex;align-items:center;min-height:40px;padding:0 4px}
/* the primary action reads as one */ :root:not([data-appearance="light"]) .sl-bottom-nav-btn.primary,:root:not([data-appearance="light"]) .sl-next-btn-primary,:root:not([data-appearance="light"]) :is(#reframe-next-step,#sl-next-step-btn){background:linear-gradient(135deg,#0e7490,#6d28d9);border-color:transparent;color:#fff}
/* the step name inside it */ :root:not([data-appearance="light"]) .sl-bottom-nav-btn.primary .sl-bottom-nav-title{color:#fff}
/* Back is a quiet text button */ :root:not([data-appearance="light"]) .sl-bottom-nav-btn:not(.primary),:root:not([data-appearance="light"]) .sl-next-btn:not(.sl-next-btn-primary),:root:not([data-appearance="light"]) :is(#reframe-back-home,#ld-back-home,#rep-back-home){background:transparent;border-color:transparent;color:#cbd5e1}
/* AA on the footer card (was #64748b) */ :root:not([data-appearance="light"]) .footer-copy,:root:not([data-appearance="light"]) .footer-copy .footer-recaptcha{color:#94a3b8}
}
/* SL-MV2-PROJBAR r2 (mobile v2 p03, G30 + fix 1): one project-selector shape on phones - the chassis pill's: the wrap is the line, the pill is content-width and centred in it, the opened list has the chassis menu's width. */
@media (max-width:767px){
/* the copies carry inline width:100%/max-width:340px or flex:1;min-width:280px: the wrap is the full-width line, as the chassis .sl-proj-pill-wrap (a sibling badge or control goes under it) */ :root #project-picker-wrap{width:100%!important;max-width:100%!important;min-width:0!important;flex:0 0 100%!important}
/* the trigger is the pill: 40 px tall (was 34 px), round like the chassis pill, content-width and centred in the line (a long name truncates inside it) */ :root #project-picker-wrap > [onclick]{min-height:40px;padding:8px 16px;border-radius:999px;justify-content:center;width:max-content;max-width:100%;margin-inline:auto}
/* 42 Multi-Unit Expansion uses a native select, left-aligned in its header column: auto margins centre it like the pill */ :root select#project-picker{min-height:40px;padding:8px 16px;border-radius:999px;max-width:100%;margin-inline:auto}
/* the copied list is left-0 right-0 of the wrap: the chassis menu's width and place instead - centred in the line, at least 280 px, inside the line */ :root #project-picker-dd{left:50%;right:auto;transform:translateX(-50%);min-width:280px;max-width:min(420px,calc(100% - 32px))}
}
/* SL-MV2-RESIDUE-1 (mobile v2 p03): package 03's residue after the tables - generated by p03_rules_on.py from the probe. */
@media screen{
/* 42 contrast 2.91 "Mark step complete": emerald-600 cannot carry 14 px ink at 4.5:1; emerald-700 + white = 5.5:1 */ :root:not([data-appearance="light"]) #mark-complete{background:#047857!important;color:#fff!important}
/* 42 hover: one step darker (emerald-800) */ :root:not([data-appearance="light"]) #mark-complete:hover{background:#065f46!important}
}
@media (max-width:767px){
/* 22 tap 133x15 "Project Essentials form" (the basics notice link; its class is on the grandparent) */ :root .fin-basics-missing-notice a{display:inline-flex;align-items:center;min-height:40px}
/* 08 tap 167x33 "The 9-Block Canvas" (+4 more) */ :root a.bx-chip{min-height:40px;min-width:40px}
/* 02 tap 97x15 "healthians.com" (+11 more) */ :root a.cv-card-site{display:inline-flex;align-items:center;min-height:40px}
/* 05 tap 51x14 "Leaflet" */ :root div.leaflet-control-attribution.leaflet-control > a{display:inline-flex;align-items:center;min-height:40px}
}
/* SL-MV2-RESIDUE-2 (mobile v2 p03): package 03's residue after the tables - generated by p03_rules_on.py from the probe. */
@media (max-width:767px){
/* 08 tiny "دراسة نموذج المشروع" */ :root[dir="rtl"] div.bx-eyebrow > span{font-size:12px!important}
/* 08 tiny "حكم الذكاء الاصطناعي" */ :root[dir="rtl"] span.bx-who{font-size:12px!important}
}
/* SL-MV2-STEPBAR-CSS (mobile v2 p03 final fix B, P03-BAR-AFTER-PAINT): the phone step bar comes with the served page
   (app.js SL-MV2-STEPBAR-DOOR), so its look is in the head's stylesheet from the first paint and its 52 px are reserved
   before anything paints; it was a string common.js injected once two API answers came back. --sl-stepbar-h is its one
   height: anything else sticky on a step page sits at top:var(--sl-stepbar-h, 0px). */
.sl-step-bar{display:none}
@media (max-width:1023px){:root:has(#sl-step-bar){--sl-stepbar-h:52px}.sl-step-bar{display:flex;align-items:center;gap:8px;position:sticky;top:0;z-index:40;height:var(--sl-stepbar-h);box-sizing:border-box;padding:6px 12px;background:rgba(2,6,23,.94);border-bottom:1px solid rgba(148,163,184,.14);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}}
.sl-step-bar-btn{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;background:rgba(6,182,212,.12);border:1px solid rgba(6,182,212,.3);color:var(--accent, #22d3ee);font-size:16px;cursor:pointer}
.sl-step-bar-title{flex:1 1 auto;min-width:0;margin:0;text-align:center;font-family:"Space Grotesk",sans-serif;font-size:16px;font-weight:700;line-height:1.25;color:#f8fafc;overflow-wrap:break-word;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
:root[data-appearance="light"] .sl-step-bar{background:rgba(255,255,255,.94);border-bottom-color:var(--border)}
:root[data-appearance="light"] .sl-step-bar-title{color:var(--text)}

/* SL-MV2-FORMKIT (mobile v2 package 07): the shared form kit. A page opts in with class "sl-fk" on its form root;
   nothing below reaches outside .sl-fk. Phone form ergonomics are owned HERE, not in page CSS: 44 px text controls
   with 16 px text, a placeholder that can never pass for a typed value, textareas that grow with their text, one
   status line (.sl-fk-status, written only by slFormGate in common.js), choice grids (.sl-fk-choices), mouse/keyboard
   hints (.sl-fk-desk). The 24 px checkbox repeats SL-MV2-TAP on purpose: page rules (.fin-chk 14 px) outrank :where(). */
:root{--sl-fk-ph:#808a9b;--sl-fk-help:#a3b0c2;--sl-fk-ok:#6ee7b7;--sl-fk-ok-bg:rgba(16,185,129,.08);--sl-fk-ok-bd:rgba(16,185,129,.3);--sl-fk-need-bg:rgba(148,163,184,.08);--sl-fk-need-bd:rgba(148,163,184,.3)}
:root[data-appearance="light"]{--sl-fk-ph:#6b7280;--sl-fk-help:#475569;--sl-fk-ok:#047857;--sl-fk-ok-bg:#ecfdf5;--sl-fk-ok-bd:#a7f3d0;--sl-fk-need-bg:#f8fafc;--sl-fk-need-bd:#cbd5e1}
.sl-fk input::placeholder,.sl-fk textarea::placeholder{color:var(--sl-fk-ph);opacity:1}   /* SL-MV2-FK-PH-UPRIGHT (07 final fix A, F6): the colour alone marks an example - an italic leaned a left-to-right example's last glyph out of a right-to-left box */
.sl-fk-status{display:flex;align-items:flex-start;gap:8px;font-size:14px;line-height:1.45;padding:8px 12px;border-radius:8px;border:1px solid var(--sl-fk-need-bd);background:var(--sl-fk-need-bg);color:var(--sl-fk-help)}
.sl-fk-status:empty{display:none}
.sl-fk-status[data-kind="ready"]{color:var(--sl-fk-ok);background:var(--sl-fk-ok-bg);border-color:var(--sl-fk-ok-bd)}
@media (hover:none) and (pointer:coarse){.sl-fk .sl-fk-desk{display:none}}
@media (max-width:767px){
  /* SL-MV2-FK-PICKER (p10 T9, inbox D24): the project dropdown's new-project field belongs to the project selector, not to the form (as #project-picker, 07 C11) */
  .sl-fk input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]):not([type=file]):not([type=color]):not(#project-picker-input),
  .sl-fk select:not(#project-picker),.sl-fk textarea{min-height:44px;font-size:16px;text-overflow:ellipsis;scroll-margin:96px 0 128px}
  /* SL-MV2-FK-ELLIPSIS (07 T11 fix round 1): the kit sets the 16 px text, so it owns text that does not fit too - a placeholder (the UA placeholder inherits text-overflow) or value wider than its box ends with an ellipsis, never a sliced glyph */
  .sl-fk textarea{field-sizing:content;max-height:60vh}
  @supports (field-sizing:content){.sl-fk textarea{resize:none}}   /* SL-MV2-FK-RESIZE (p10 T22, FN:625): a box that cannot grow by itself stays resizable */
  .sl-fk input[type=checkbox],.sl-fk input[type=radio]{width:24px;height:24px;min-width:24px}
  .sl-fk .sl-fk-run{display:flex;flex-direction:column;align-items:stretch}   /* SL-MV2-FK-DISPLAY (p10 T22, FN:583): the kit declares the display its rows rely on */
  .sl-fk .sl-fk-run > *{width:100%}
  /* SL-MV2-FK-RUNSTACK (07 T3 fix round 2): the run-row buttons stack, each full width, whatever their labels say - Save and Run relabel themselves while in use, so a layout read from the labels moved mid-press */
  .sl-fk .sl-fk-run > div:not(.sl-fk-status){display:flex;flex-direction:column;align-items:stretch;gap:8px}
  .sl-fk .sl-fk-run > div > button{min-height:44px;justify-content:center}
  .sl-fk .sl-fk-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .sl-fk .sl-fk-choices > *{min-height:44px}
  .sl-fk .sl-fk-choice-desc{display:none}
  .sl-fk .sl-fk-choices > .on .sl-fk-choice-desc,.sl-fk .sl-fk-choices > .active .sl-fk-choice-desc{display:block;line-height:1.35}
}