/* Ops portal colour tokens (ops dark-mode plan, plans/2026-09-28-ops-dark-mode.md).
   Linked from app/templates/ops/base.html ONLY — never from the client portal.
   Tokens are ROLES; the same hex in two roles gets two tokens. Light values are the
   exact hexes they replaced, so light mode is pixel-identical. Token map + rule-book:
   plans/2026-09-28-ops-dark-mode-tokens.md. Do not add a hand-typed colour to an ops
   template: add a token here (both blocks) and use var(--ops-…). */

:root,
html[data-theme-mode="light"] {
    --ops-bg-page:                 #F9FAFB;
    --ops-surface:                 #FFFFFF;
    --ops-surface-subtle:          #FAFAF9;
    --ops-surface-subtle-2:        #FBFAF9;
    --ops-surface-muted:           #F5F5F4;
    --ops-surface-gray:            #F3F4F6;
    --ops-fill-strong:             #E7E5E4;
    --ops-dot-neutral:             #D1D5DB;
    --ops-border:                  #E7E5E4;
    --ops-border-subtle:           #F5F5F4;
    --ops-border-gray:             #E5E7EB;
    --ops-border-subtle-gray:      #F3F4F6;
    --ops-text:                    #1C1917;
    --ops-text-strong:             #44403C;
    --ops-text-secondary:          #57534E;
    --ops-text-muted:              #78716C;
    --ops-text-muted-gray:         #6B7280;
    --ops-text-faint:              #A8A29E;
    --ops-text-faint-gray:         #9CA3AF;
    --ops-text-faint-3:            #999;
    --ops-text-disabled:           #D6D3D1;
    --ops-text-disabled-gray:      #D1D5DB;
    --ops-on-accent:               #FFFFFF;
    --ops-solid-neutral:           #1C1917;
    --ops-solid-ink:               #0D0D0F;
    --ops-solid-muted:             #78716C;
    --ops-accent:                  #E8775A;
    --ops-accent-hover:            #D4654A;
    --ops-accent-text:             #E8775A;
    --ops-accent-text-hover:       #D4654A;
    --ops-accent-soft-bg:          #FFF5F2;
    --ops-accent-tint-08:          rgba(232,119,90,0.08);
    --ops-accent-tint-10:          rgba(232,119,90,0.1);
    --ops-accent-tint-20:          rgba(232,119,90,0.2);
    --ops-overlay:                 rgba(0,0,0,0.4);
    --ops-overlay-warm:            rgba(28,25,23,0.5);
    --ops-shadow-color:            rgba(0,0,0,0.08);
    --ops-hover-tint:              rgba(0,0,0,0.05);
    --ops-danger-text:             #DC2626;
    --ops-danger-solid:            #DC2626;
    --ops-danger-border:           #DC2626;
    --ops-danger-solid-strong:     #B91C1C;
    --ops-danger-text-strong:      #B91C1C;
    --ops-danger-text-deep:        #991B1B;
    --ops-danger-text-deeper:      #7F1D1D;
    --ops-danger-soft-bg:          #FEF2F2;
    --ops-danger-soft-bg-2:        #FEE2E2;
    --ops-danger-soft-bg-3:        #FECACA;
    --ops-danger-row-bg:           #FFFBFA;
    --ops-danger-chip-bg:          #FCA5A5;
    --ops-danger-soft-border:      #FECACA;
    --ops-danger-soft-border-2:    #FCA5A5;
    --ops-danger-border-input:     #F87171;
    --ops-rose-text:               #9F1239;
    --ops-rose-border:             #9F1239;
    --ops-rose-soft-bg:            #FFE4E6;
    --ops-warning-text:            #D97706;
    --ops-warning-solid:           #D97706;
    --ops-warning-border:          #D97706;
    --ops-warning-border-strong:   #F59E0B;
    --ops-warning-text-strong:     #B45309;
    --ops-warning-solid-hover:     #B45309;
    --ops-warning-text-deep:       #92400E;
    --ops-warning-solid-deep:      #92400E;
    --ops-warning-text-deeper:     #78350F;
    --ops-warning-soft-bg:         #FEF3C7;
    --ops-warning-soft-bg-2:       #FFFBEB;
    --ops-warning-soft-bg-3:       #FDE68A;
    --ops-warning-chip-bg:         #FCD34D;
    --ops-warning-soft-border:     #FDE68A;
    --ops-warning-soft-border-2:   #FCD34D;
    --ops-orange-text:             #C2410C;
    --ops-orange-soft-bg:          #FFF7ED;
    --ops-orange-soft-border:      #FED7AA;
    --ops-success-text:            #059669;
    --ops-success-solid:           #059669;
    --ops-success-text-2:          #16A34A;
    --ops-success-solid-2:         #16A34A;
    --ops-success-text-strong:     #047857;
    --ops-success-solid-strong:    #047857;
    --ops-success-solid-strong-2:  #15803D;
    --ops-success-text-deep:       #065F46;
    --ops-success-text-deep-2:     #166534;
    --ops-success-soft-bg:         #D1FAE5;
    --ops-success-soft-bg-2:       #DCFCE7;
    --ops-success-soft-bg-3:       #F0FDF4;
    --ops-success-soft-bg-4:       #ECFDF5;
    --ops-success-soft-border:     #A7F3D0;
    --ops-success-soft-border-2:   #BBF7D0;
    --ops-success-border:          #6EE7B7;
    --ops-info-text:               #2563EB;
    --ops-info-border:             #2563EB;
    --ops-info-solid:              #3B82F6;
    --ops-info-text-strong:        #1D4ED8;
    --ops-info-text-deep:          #1E40AF;
    --ops-info-text-deeper:        #1E3A8A;
    --ops-info-soft-bg:            #DBEAFE;
    --ops-info-soft-bg-2:          #EFF6FF;
    --ops-info-soft-border:        #BFDBFE;
    --ops-sky-text:                #0369A1;
    --ops-sky-soft-bg:             #F0F9FF;
    --ops-violet-text:             #7C3AED;
    --ops-violet-border:           #7C3AED;
    --ops-violet-text-strong:      #5B21B6;
    --ops-violet-text-deep:        #4C1D95;
    --ops-violet-soft-bg:          #EDE9FE;
    --ops-violet-soft-bg-2:        #F5F3FF;
    --ops-violet-soft-border:      #DDD6FE;
    --ops-purple-soft-bg:          #F3E8FF;
    --ops-indigo-text:             #4F46E5;
    --ops-indigo-text-deep:        #3730A3;
    --ops-indigo-soft-bg:          #E0E7FF;
    --ops-brand-spotify:           #1DB954;
    --ops-series-coral:            #E8775A;
    --ops-series-coral-dark:       #D4654A;
    --ops-series-coral-deep:       #C0533A;
    --ops-series-amber:            #F59E0B;
    --ops-series-amber-dark:       #D97706;
    --ops-series-amber-deep:       #B45309;
    --ops-series-yellow:           #EAB308;
    --ops-series-green:            #16A34A;
    --ops-series-emerald:          #10B981;
    --ops-series-teal:             #14B8A6;
    --ops-series-cyan:             #06B6D4;
    --ops-series-sky:              #0EA5E9;
    --ops-series-blue:             #3B82F6;
    --ops-series-blue-deep:        #1D4ED8;
    --ops-series-indigo:           #6366F1;
    --ops-series-violet:           #8B5CF6;
    --ops-series-violet-dark:      #7C3AED;
    --ops-series-purple:           #A855F7;
    --ops-series-pink:             #EC4899;
    --ops-series-pink-dark:        #DB2777;
    --ops-series-rose:             #F43F5E;
    --ops-series-red:              #EF4444;
    --ops-series-stone:            #78716C;
    --ops-series-stone-dark:       #44403C;
    --ops-series-gray:             #9CA3AF;
    --ops-chart-grid:              #E7E5E4;
    --ops-series-emerald-tint-20:  rgba(16,185,129,0.125);
    --ops-series-blue-tint-20:     rgba(59,130,246,0.125);
    --ops-series-amber-tint-20:    rgba(245,158,11,0.125);
    /* Chart.js defaults (read by static/js/ops_theme.js; light = Chart.js's own defaults) */
    --ops-chart-text:              #666;
    --ops-chart-line:              rgba(0,0,0,0.1);
    --ops-chart-tooltip-bg:        rgba(0,0,0,0.8);
    --ops-chart-tooltip-text:      #fff;
    /* Soft pill tint mixed from a text token: the old hex+"15" alpha suffix (0x15/255) */
    --ops-tint-pct:                8.2353%;
    /* Native text inputs/selects without their own background (UA default in light) */
    --ops-field-bg:                #FFFFFF;
    /* Placeholder text + modal panel. Only the dark-scoped rules below use these; light
       keeps Tailwind's own placeholder (#9CA3AF) and each modal's own classes. */
    --ops-placeholder:             #9CA3AF;
    --ops-modal-surface:           #FFFFFF;
    --ops-modal-border:            #E7E5E4;
    --ops-modal-shadow:            0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
}

/* Dark: warm charcoal. data-theme-mode is set on <html> before first paint by the
   inline boot script (ops/_partials/theme_boot.html) from the user's choice in the
   ops user menu (Light / Dark / Match my computer). */
html[data-theme-mode="dark"] {
    --ops-bg-page:                 #13110F;
    --ops-surface:                 #1B1816;
    --ops-surface-subtle:          #211E1C;
    --ops-surface-subtle-2:        #211E1C;
    --ops-surface-muted:           #292522;
    --ops-surface-gray:            #292522;
    --ops-fill-strong:             #332E2B;
    --ops-dot-neutral:             #57534E;
    --ops-border:                  #3A3531;
    --ops-border-subtle:           #2B2724;
    --ops-border-gray:             #3A3531;
    --ops-border-subtle-gray:      #2B2724;
    --ops-text:                    #EDE8E4;
    --ops-text-strong:             #D9D3CE;
    --ops-text-secondary:          #C4BDB7;
    --ops-text-muted:              #A8A09A;
    --ops-text-muted-gray:         #A6A29E;
    --ops-text-faint:              #9A928C;
    --ops-text-faint-gray:         #9A9692;
    --ops-text-faint-3:            #9A928C;
    --ops-text-disabled:           #5E5752;
    --ops-text-disabled-gray:      #5E5752;
    --ops-on-accent:               #FFFFFF;
    --ops-solid-neutral:           #4A4440;
    --ops-solid-ink:               #4A4440;
    --ops-solid-muted:             #6B645F;
    --ops-accent:                  #E8775A;
    --ops-accent-hover:            #D4654A;
    --ops-accent-text:             #F2957B;
    --ops-accent-text-hover:       #F6AE99;
    --ops-accent-soft-bg:          #3A2621;
    --ops-accent-tint-08:          rgba(232,119,90,0.14);
    --ops-accent-tint-10:          rgba(232,119,90,0.16);
    --ops-accent-tint-20:          rgba(232,119,90,0.28);
    --ops-overlay:                 rgba(0,0,0,0.75);
    --ops-overlay-warm:            rgba(0,0,0,0.75);
    --ops-shadow-color:            rgba(0,0,0,0.5);
    --ops-hover-tint:              rgba(255,255,255,0.05);
    --ops-danger-text:             #F87171;
    --ops-danger-solid:            #DC2626;
    --ops-danger-border:           #EF4444;
    --ops-danger-solid-strong:     #B91C1C;
    --ops-danger-text-strong:      #FCA5A5;
    --ops-danger-text-deep:        #FECACA;
    --ops-danger-text-deeper:      #FECACA;
    --ops-danger-soft-bg:          #2E1716;
    --ops-danger-soft-bg-2:        #3B1B19;
    --ops-danger-soft-bg-3:        #4A201D;
    --ops-danger-row-bg:           #261A18;
    --ops-danger-chip-bg:          #6B2A27;
    --ops-danger-soft-border:      #5E2724;
    --ops-danger-soft-border-2:    #7A2F2B;
    --ops-danger-border-input:     #E5534B;
    --ops-rose-text:               #FDA4AF;
    --ops-rose-border:             #BE123C;
    --ops-rose-soft-bg:            #3A1820;
    --ops-warning-text:            #FBBF24;
    --ops-warning-solid:           #D97706;
    --ops-warning-border:          #D97706;
    --ops-warning-border-strong:   #F59E0B;
    --ops-warning-text-strong:     #FCD34D;
    --ops-warning-solid-hover:     #B45309;
    --ops-warning-text-deep:       #FDE68A;
    --ops-warning-solid-deep:      #92400E;
    --ops-warning-text-deeper:     #FDE68A;
    --ops-warning-soft-bg:         #33290F;
    --ops-warning-soft-bg-2:       #2A2212;
    --ops-warning-soft-bg-3:       #4A3A12;
    --ops-warning-chip-bg:         #5C4816;
    --ops-warning-soft-border:     #5C4816;
    --ops-warning-soft-border-2:   #7A5E16;
    --ops-orange-text:             #FDBA74;
    --ops-orange-soft-bg:          #33200F;
    --ops-orange-soft-border:      #5C3A18;
    --ops-success-text:            #34D399;
    --ops-success-solid:           #059669;
    --ops-success-text-2:          #4ADE80;
    --ops-success-solid-2:         #16A34A;
    --ops-success-text-strong:     #6EE7B7;
    --ops-success-solid-strong:    #047857;
    --ops-success-solid-strong-2:  #15803D;
    --ops-success-text-deep:       #A7F3D0;
    --ops-success-text-deep-2:     #BBF7D0;
    --ops-success-soft-bg:         #0F2E23;
    --ops-success-soft-bg-2:       #11301D;
    --ops-success-soft-bg-3:       #0F2519;
    --ops-success-soft-bg-4:       #0E251D;
    --ops-success-soft-border:     #1E5242;
    --ops-success-soft-border-2:   #205233;
    --ops-success-border:          #2C7A5F;
    --ops-info-text:               #60A5FA;
    --ops-info-border:             #3B82F6;
    --ops-info-solid:              #3B82F6;
    --ops-info-text-strong:        #93C5FD;
    --ops-info-text-deep:          #BFDBFE;
    --ops-info-text-deeper:        #BFDBFE;
    --ops-info-soft-bg:            #172A46;
    --ops-info-soft-bg-2:          #132037;
    --ops-info-soft-border:        #294B76;
    --ops-sky-text:                #7DD3FC;
    --ops-sky-soft-bg:             #0F2230;
    --ops-violet-text:             #A78BFA;
    --ops-violet-border:           #8B5CF6;
    --ops-violet-text-strong:      #C4B5FD;
    --ops-violet-text-deep:        #DDD6FE;
    --ops-violet-soft-bg:          #271E3E;
    --ops-violet-soft-bg-2:        #1F1933;
    --ops-violet-soft-border:      #40346A;
    --ops-purple-soft-bg:          #2B1D3B;
    --ops-indigo-text:             #A5B4FC;
    --ops-indigo-text-deep:        #C7D2FE;
    --ops-indigo-soft-bg:          #1F2346;
    --ops-brand-spotify:           #1ED760;
    --ops-series-coral:            #E8775A;
    --ops-series-coral-dark:       #D4654A;
    --ops-series-coral-deep:       #C96048;
    --ops-series-amber:            #F59E0B;
    --ops-series-amber-dark:       #E08A1E;
    --ops-series-amber-deep:       #D97706;
    --ops-series-yellow:           #EAB308;
    --ops-series-green:            #22C55E;
    --ops-series-emerald:          #10B981;
    --ops-series-teal:             #14B8A6;
    --ops-series-cyan:             #06B6D4;
    --ops-series-sky:              #0EA5E9;
    --ops-series-blue:             #3B82F6;
    --ops-series-blue-deep:        #60A5FA;
    --ops-series-indigo:           #818CF8;
    --ops-series-violet:           #8B5CF6;
    --ops-series-violet-dark:      #A78BFA;
    --ops-series-purple:           #A855F7;
    --ops-series-pink:             #EC4899;
    --ops-series-pink-dark:        #EC4899;
    --ops-series-rose:             #F43F5E;
    --ops-series-red:              #EF4444;
    --ops-series-stone:            #A8A09A;
    --ops-series-stone-dark:       #8A827C;
    --ops-series-gray:             #8E8A86;
    --ops-chart-grid:              #3A3531;
    --ops-series-emerald-tint-20:  rgba(16,185,129,0.22);
    --ops-series-blue-tint-20:     rgba(59,130,246,0.22);
    --ops-series-amber-tint-20:    rgba(245,158,11,0.22);
    --ops-chart-text:              #A8A09A;
    --ops-chart-line:              rgba(255,255,255,0.1);
    --ops-chart-tooltip-bg:        rgba(58,53,49,0.96);
    --ops-chart-tooltip-text:      #EDE8E4;
    --ops-tint-pct:                16%;
    --ops-field-bg:                #262220;
    --ops-placeholder:             #7A726C;
    --ops-modal-surface:           #26221F;
    --ops-modal-border:            #4A433E;
    --ops-modal-shadow:            0 24px 64px -8px rgba(0,0,0,0.85), 0 0 0 1px rgba(0,0,0,0.5);
}

/* ---- Native controls + daisyUI, both modes ----
   daisyUI 4 (CDN full.min.css) ships its own `@media (prefers-color-scheme: dark) :root`
   variables, so on a dark-mode computer it would go dark regardless of the ops switch.
   Pin daisy's variables (oklch "L C H" triplets) and color-scheme to OUR resolved mode
   (html[attr] out-ranks daisy's :root). Light = daisy's own light values, byte-for-byte,
   so light mode renders exactly as before. color-scheme drives native inputs, selects,
   scrollbars and date pickers. */
html[data-theme-mode="light"] {
    color-scheme: light;
    --p: 49.12% 0.3096 275.75;
    --pc: 89.824% 0.06192 275.75;
    --s: 69.71% 0.329 342.55;
    --sc: 98.71% 0.0106 342.55;
    --a: 76.76% 0.184 183.61;
    --ac: 15.352% 0.0368 183.61;
    --n: 32.1785% 0.02476 255.701624;
    --nc: 89.4994% 0.011585 252.096176;
    --b1: 100% 0 0;
    --b2: 96.1151% 0 0;
    --b3: 92.4169% 0.00108 197.137559;
    --bc: 27.8078% 0.029596 256.847952;
}
html[data-theme-mode="dark"] {
    color-scheme: dark;
    /* p/s/a: daisy's own dark values (ops uses its own coral via --ops-accent). */
    --p: 65.69% 0.196 275.75;
    --pc: 13.138% 0.0392 275.75;
    --s: 74.8% 0.26 342.55;
    --sc: 14.96% 0.052 342.55;
    --a: 74.51% 0.167 183.61;
    --ac: 14.902% 0.0334 183.61;
    --n: 39.1283% 0.010559 56.062;          /* #4A4440 = --ops-solid-neutral */
    --nc: 93.3778% 0.007651 61.4484;        /* #EDE8E4 = --ops-text */
    --b1: 21.1747% 0.006158 56.0333;        /* #1B1816 = --ops-surface */
    --b2: 26.777% 0.008131 59.3144;         /* #292522 = --ops-surface-muted */
    --b3: 30.5436% 0.009014 53.1492;        /* #332E2B = --ops-fill-strong */
    --bc: 93.3778% 0.007651 61.4484;        /* #EDE8E4 = --ops-text */
}

/* Dark defaults for elements that carry no colour of their own. Specificity is kept
   deliberately LOW so any class or inline colour still wins: `html:where(...) *` is
   (0,0,1) — it beats Tailwind preflight's `*` border colour (#E5E7EB, (0,0,0)) but
   loses to every utility class. */
html:where([data-theme-mode="dark"]) *,
html:where([data-theme-mode="dark"]) *::before,
html:where([data-theme-mode="dark"]) *::after {
    border-color: var(--ops-border-gray);
    --tw-ring-offset-color: var(--ops-bg-page);  /* Tailwind's ring-offset gap is #fff by default */
}
html:where([data-theme-mode="dark"]) :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="submit"], [type="button"], [type="reset"], [type="image"]), select, textarea) {
    /* A step above the card surface: many ops inputs are borderless (shadow-sm only),
       and a black shadow is invisible on charcoal. */
    background-color: var(--ops-field-bg);
    color: var(--ops-text);
}
html:where([data-theme-mode="dark"]) :where(input, select, textarea):disabled { background-color: var(--ops-surface-muted); color: var(--ops-text-faint); }
html:where([data-theme-mode="dark"]) :where(dialog) { background-color: var(--ops-surface); color: var(--ops-text); }
/* Tailwind preflight's gray-400 placeholder reads almost like a value on charcoal. */
html[data-theme-mode="dark"] ::placeholder { color: var(--ops-placeholder); opacity: 1; }

/* Modals, dark only: a black shadow is invisible on charcoal, so the panel needs a
   raised surface + border, and the backdrop a heavier dim. Panels = <dialog>, daisy
   .modal-box, and the direct child of a `fixed inset-0 z-50` overlay (agreement modals,
   preflight warnings, reconcile, work_writer_editor.js create-writer). Re-pointing
   --ops-surface inside the panel also lifts panels painted with var(--ops-surface). */
html[data-theme-mode="dark"] :is(dialog, .modal-box, .fixed.inset-0.z-50 > div) {
    --ops-surface: var(--ops-modal-surface);
    background-color: var(--ops-modal-surface);
    border: 1px solid var(--ops-modal-border);
    box-shadow: var(--ops-modal-shadow);
}
html[data-theme-mode="dark"] :is(dialog, .modal)::backdrop,
html[data-theme-mode="dark"] .fixed.inset-0.z-50.bg-black { background-color: var(--ops-overlay); }
/* The black-on-transparent "decimal" wordmark would vanish on charcoal. */
html[data-theme-mode="dark"] .ops-wordmark { filter: invert(1) brightness(0.93); }

/* ---- Tailwind colour utilities, dark only ----
   Light mode keeps Tailwind's own values untouched. The Play CDN injects its CSS
   AFTER this file, so every override must out-rank the utility (html[attr] + class). */
html[data-theme-mode="dark"] .text-warm-500 { color: var(--ops-text-muted); }
html[data-theme-mode="dark"] .text-stone-500 { color: var(--ops-text-muted); }
html[data-theme-mode="dark"] .text-gray-500 { color: var(--ops-text-muted-gray); }
html[data-theme-mode="dark"] .text-warm-800 { color: var(--ops-text); }
html[data-theme-mode="dark"] .text-gray-900 { color: var(--ops-text); }
html[data-theme-mode="dark"] .hover\:text-stone-900:hover { color: var(--ops-text); }
html[data-theme-mode="dark"] .text-stone-700 { color: var(--ops-text-strong); }
html[data-theme-mode="dark"] .text-gray-700 { color: var(--ops-text-strong); }
html[data-theme-mode="dark"] .text-stone-600 { color: var(--ops-text-secondary); }
html[data-theme-mode="dark"] .text-gray-600 { color: var(--ops-text-secondary); }
html[data-theme-mode="dark"] .text-stone-400 { color: var(--ops-text-faint); }
html[data-theme-mode="dark"] .text-warm-200 { color: var(--ops-text-disabled); }
html[data-theme-mode="dark"] .text-coral-500 { color: var(--ops-accent-text); }
html[data-theme-mode="dark"] .text-coral-600 { color: var(--ops-accent-text-hover); }
html[data-theme-mode="dark"] .hover\:text-coral-600:hover { color: var(--ops-accent-text-hover); }
html[data-theme-mode="dark"] .focus\:text-coral-600:focus { color: var(--ops-accent-text-hover); }
html[data-theme-mode="dark"] .bg-white { background-color: var(--ops-surface); }
html[data-theme-mode="dark"] .focus\:bg-white:focus { background-color: var(--ops-surface); }
html[data-theme-mode="dark"] .bg-warm-50 { background-color: var(--ops-surface-subtle); }
html[data-theme-mode="dark"] .bg-stone-50 { background-color: var(--ops-surface-subtle); }
html[data-theme-mode="dark"] .hover\:bg-warm-50:hover { background-color: var(--ops-surface-subtle); }
html[data-theme-mode="dark"] .hover\:bg-stone-50:hover { background-color: var(--ops-surface-subtle); }
html[data-theme-mode="dark"] .hover\:bg-gray-50:hover { background-color: var(--ops-surface-subtle); }
html[data-theme-mode="dark"] .bg-warm-100 { background-color: var(--ops-surface-muted); }
html[data-theme-mode="dark"] .bg-stone-100 { background-color: var(--ops-surface-muted); }
html[data-theme-mode="dark"] .hover\:bg-warm-100:hover { background-color: var(--ops-surface-muted); }
html[data-theme-mode="dark"] .hover\:bg-stone-100:hover { background-color: var(--ops-surface-muted); }
html[data-theme-mode="dark"] .bg-gray-100 { background-color: var(--ops-surface-gray); }
html[data-theme-mode="dark"] .bg-warm-200 { background-color: var(--ops-fill-strong); }
html[data-theme-mode="dark"] .bg-stone-200 { background-color: var(--ops-fill-strong); }
html[data-theme-mode="dark"] .hover\:bg-warm-200:hover { background-color: var(--ops-fill-strong); }
html[data-theme-mode="dark"] .hover\:bg-gray-200:hover { background-color: var(--ops-fill-strong); }
html[data-theme-mode="dark"] .bg-warm-800 { background-color: var(--ops-solid-neutral); }
html[data-theme-mode="dark"] .bg-coral-50 { background-color: var(--ops-accent-soft-bg); }
html[data-theme-mode="dark"] .border-warm-200 { border-color: var(--ops-border); }
html[data-theme-mode="dark"] .border-stone-200 { border-color: var(--ops-border); }
html[data-theme-mode="dark"] .border-gray-300 { border-color: var(--ops-border); }
html[data-theme-mode="dark"] .border-gray-200 { border-color: var(--ops-border-gray); }
html[data-theme-mode="dark"] .border-warm-100 { border-color: var(--ops-border-subtle); }
html[data-theme-mode="dark"] .border-warm-800 { border-color: var(--ops-text); }
html[data-theme-mode="dark"] .divide-warm-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--ops-border); }
html[data-theme-mode="dark"] .divide-stone-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--ops-border); }
html[data-theme-mode="dark"] .ring-warm-200 { --tw-ring-color: var(--ops-border); }
html[data-theme-mode="dark"] .text-amber-800 { color: var(--ops-warning-text-deep); }
html[data-theme-mode="dark"] .text-yellow-800 { color: var(--ops-warning-text-deep); }
html[data-theme-mode="dark"] .text-amber-700 { color: var(--ops-warning-text-strong); }
html[data-theme-mode="dark"] .text-yellow-600 { color: var(--ops-warning-text); }
html[data-theme-mode="dark"] .hover\:text-yellow-900:hover { color: var(--ops-warning-text-deeper); }
html[data-theme-mode="dark"] .bg-amber-100 { background-color: var(--ops-warning-soft-bg); }
html[data-theme-mode="dark"] .bg-yellow-100 { background-color: var(--ops-warning-soft-bg); }
html[data-theme-mode="dark"] .bg-amber-50 { background-color: var(--ops-warning-soft-bg-2); }
html[data-theme-mode="dark"] .bg-yellow-50 { background-color: var(--ops-warning-soft-bg-2); }
html[data-theme-mode="dark"] .border-amber-200 { border-color: var(--ops-warning-soft-border); }
html[data-theme-mode="dark"] .border-amber-100 { border-color: var(--ops-warning-soft-border); }
html[data-theme-mode="dark"] .text-orange-800 { color: var(--ops-orange-text); }
html[data-theme-mode="dark"] .text-orange-700 { color: var(--ops-orange-text); }
html[data-theme-mode="dark"] .text-orange-900 { color: var(--ops-orange-text); }
html[data-theme-mode="dark"] .bg-orange-100 { background-color: var(--ops-orange-soft-bg); }
html[data-theme-mode="dark"] .bg-orange-50 { background-color: var(--ops-orange-soft-bg); }
html[data-theme-mode="dark"] .text-red-800 { color: var(--ops-danger-text-deep); }
html[data-theme-mode="dark"] .text-red-700 { color: var(--ops-danger-text-strong); }
html[data-theme-mode="dark"] .text-red-600 { color: var(--ops-danger-text); }
html[data-theme-mode="dark"] .bg-red-100 { background-color: var(--ops-danger-soft-bg-2); }
html[data-theme-mode="dark"] .bg-red-50 { background-color: var(--ops-danger-soft-bg); }
html[data-theme-mode="dark"] .text-green-600 { color: var(--ops-success-text-2); }
html[data-theme-mode="dark"] .text-green-500 { color: var(--ops-success-text-2); }
html[data-theme-mode="dark"] .text-green-700 { color: var(--ops-success-text-strong); }
html[data-theme-mode="dark"] .hover\:text-green-700:hover { color: var(--ops-success-text-strong); }
html[data-theme-mode="dark"] .text-green-800 { color: var(--ops-success-text-deep-2); }
html[data-theme-mode="dark"] .hover\:text-green-900:hover { color: var(--ops-success-text-deep-2); }
html[data-theme-mode="dark"] .text-emerald-800 { color: var(--ops-success-text-deep); }
html[data-theme-mode="dark"] .bg-green-100 { background-color: var(--ops-success-soft-bg-2); }
html[data-theme-mode="dark"] .bg-emerald-100 { background-color: var(--ops-success-soft-bg); }
html[data-theme-mode="dark"] .bg-blue-100 { background-color: var(--ops-info-soft-bg); }
html[data-theme-mode="dark"] .text-blue-800 { color: var(--ops-info-text-deep); }
html[data-theme-mode="dark"] .bg-purple-100 { background-color: var(--ops-purple-soft-bg); }
html[data-theme-mode="dark"] .text-purple-800 { color: var(--ops-violet-text-strong); }
html[data-theme-mode="dark"] .text-indigo-600 { color: var(--ops-indigo-text); }
html[data-theme-mode="dark"] .hover\:text-indigo-500:hover { color: var(--ops-indigo-text); }

/* ---- Shared custom.css components used by ops (custom.css is shared with the
   client portal, so ops dark overrides live here instead). ---- */
html[data-theme-mode="dark"] .info-tip { background-color: var(--ops-fill-strong); color: var(--ops-text-secondary); }
html[data-theme-mode="dark"] .info-tip .info-tip-text { background-color: var(--ops-fill-strong); color: var(--ops-text); }
html[data-theme-mode="dark"] .info-tip .info-tip-text::after { border-color: var(--ops-fill-strong) transparent transparent transparent; }
html[data-theme-mode="dark"] .cwr-line:hover { background-color: var(--ops-hover-tint); }

/* CWR viewer record-type colours come from app/cwr_viewer.py as literal hex (one set for
   both modes). Light shows them as-is; dark pulls them toward the text colour so the dark
   ones (REC #34495E, SWT #8E44AD) stay readable on a charcoal surface. */
.cwr-rec { color: var(--cwr-rec); }
html[data-theme-mode="dark"] .cwr-rec { color: color-mix(in srgb, var(--cwr-rec) 55%, var(--ops-text)); }