/* ==========================================================================
   inline-utils.css
   Utility classes — all semantic names.
   Originally auto-generated from inline styles (see scripts/rewrite_inline_styles.py).
   Organized by category for easier navigation and maintenance.
   ========================================================================== */


/* --------------------------------------------------------------------------
   0. SHARED COLOR TOKENS
   Palette hex values used in 2+ places across this file.
   Brand indigo/magenta are defined in base.html as --bc-indigo / --bc-magenta.
   To change a palette color, edit only this block (or base.html for brand).
   -------------------------------------------------------------------------- */
:root {
  --color-green: #16a34a;
  --color-green-vivid: #22C55E;
  --color-red: #dc2626;
  --color-red-bright: #ef4444;
  --color-red-light: #F87171;
  --color-red-brand: #DB0A38;
  --color-blue: #2563eb;
  --color-blue-soft: #60A5FA;
  --color-amber: #d97706;
  --color-amber-dark: #a16207;
  --color-amber-deep: #b45309;
  --color-amber-warm: #f59e0b;
  --color-amber-gold: #FBBF24;
  --color-amber-brown: #92400e;
  --color-yellow: #EAB308;
  --color-emerald: #34D399;
  --color-violet: #7c3aed;
  --color-navy: #211A37;
  --color-gray: #9ca3af;
  --color-emerald-light-bg: #d1fae5;
  --color-blue-light: #93C5FD;
  --color-amber-light-bg: #fef3c7;
  --color-red-light-bg: #fee2e2;
  --color-red-dark: #991b1b;
  --color-crimson: #DB0A38;
  --color-indigo-deep: #4338ca;
  --color-indigo: #6366F1;
  --color-indigo-light: #3730a3;
  --color-green-text: #065f46;
  --color-magenta-light: #F0A6DD;
  --color-magenta: #E060C4;
  --color-gray-mid: #888;
  --color-emerald-dark: #10b981;
  --color-lavender: #7F78A8;
  --color-orange: #ea580c;
  --color-indigo-bright: #6366F1;
  --color-purple: #9333EA;
  --color-purple-light: #A855F7;
  --color-purple-medium: #C084FC;
  --color-purple-pale: #D8B4FE;
  --color-ghost: rgba(244,243,248,0.55);
  --color-dark-navy: #211A37;

  --color-emerald-fixed: #34D399;
  --color-amber-gold-fixed: #FBBF24;
  --color-red-light-fixed: #F87171;
  --color-green-vivid-fixed: #22C55E;
  --bc-indigo-fixed: #413BBE;

  --surface-amber-callout-bg: hsl(44 100% 96%);
  --surface-amber-callout-border: hsl(44 80% 80%);
  --surface-indigo-callout-bg: hsl(243 53% 96%);
  --surface-indigo-callout-border: hsl(243 53% 85%);
}

html.dark {
  --color-green: #4ade80;
  --color-green-vivid: #4ade80;
  --color-red: #f87171;
  --color-red-bright: #fca5a5;
  --color-red-light: #fca5a5;
  --color-red-brand: #F43F5E;
  --color-blue: #60a5fa;
  --color-blue-soft: #93c5fd;
  --color-amber: #fbbf24;
  --color-amber-dark: #d97706;
  --color-amber-deep: #f59e0b;
  --color-amber-warm: #fcd34d;
  --color-amber-gold: #fcd34d;
  --color-amber-brown: #d97706;
  --color-yellow: #facc15;
  --color-emerald: #6ee7b7;
  --color-violet: #a78bfa;
  --color-navy: #1a1429;
  --color-gray: #d1d5db;
  --color-emerald-light-bg: color-mix(in srgb, var(--color-emerald-fixed) 15%, transparent);
  --color-blue-light: #93C5FD;
  --color-amber-light-bg: color-mix(in srgb, var(--color-amber-gold-fixed) 12%, transparent);
  --color-red-light-bg: color-mix(in srgb, var(--color-red-light-fixed) 12%, transparent);
  --color-red-dark: #fca5a5;
  --color-crimson: #f87171;
  --color-indigo-deep: #818cf8;
  --color-indigo: #6366F1;
  --color-indigo-light: #a5b4fc;
  --color-green-text: #4ade80;
  --color-magenta-light: #f0abdb;
  --color-magenta: #e879c4;
  --color-gray-mid: #a1a1aa;
  --color-emerald-dark: #34d399;
  --color-lavender: #a89ec4;
  --color-orange: #f97316;
  --color-indigo-bright: #818cf8;
  --color-purple: #a855f7;
  --color-purple-light: #c084fc;
  --color-purple-medium: #d8b4fe;
  --color-purple-pale: #e9d5ff;
  --color-ghost: rgba(244,243,248,0.7);
  --color-dark-navy: #9E94B8;

  --surface-amber-callout-bg: color-mix(in srgb, var(--color-amber-gold-fixed) 8%, transparent);
  --surface-amber-callout-border: color-mix(in srgb, var(--color-amber-gold-fixed) 25%, transparent);
  --surface-indigo-callout-bg: color-mix(in srgb, var(--bc-indigo-fixed) 8%, transparent);
  --surface-indigo-callout-border: color-mix(in srgb, var(--bc-indigo-fixed) 25%, transparent);
}


/* --------------------------------------------------------------------------
   1. TEXT COLORS
   Plain color-only or color + font-weight classes.
   -------------------------------------------------------------------------- */
.text-muted { color:hsl(var(--muted-foreground)); }
.text-fg { color:hsl(var(--foreground)); }
.text-primary { color:hsl(var(--primary)); }
.text-brand-indigo { color:var(--bc-indigo-text); }
.text-brand-magenta { color:var(--bc-magenta); }
.text-brand-indigo-heading { color:var(--bc-indigo-text); font-family:'Montserrat',sans-serif; }
.text-indigo { color:var(--bc-indigo-text); }
.text-indigo-bordered { color:var(--bc-indigo-text); border-color:hsl(var(--border)); }
.text-magenta { color:var(--bc-magenta); }
.text-red { color:var(--color-red); }
.text-red-bright { color:var(--color-red-bright); }
.text-green { color:var(--color-green); }
.text-emerald { color:var(--color-emerald); }
.text-emerald-dark { color:var(--color-emerald-dark); }
.text-amber { color:var(--color-amber-dark); }
.text-amber-dark { color:var(--color-amber); }
.text-amber-warm { color:var(--color-amber-warm); }
.text-purple { color:var(--color-violet); }
.text-dark-navy { color:var(--color-dark-navy); }
.text-ghost { color:var(--color-ghost); }
.text-amber-warm-dot { color:var(--color-amber-gold); }
.text-red-light { color:var(--color-red-light); }
.link-indigo-bold { color:var(--bc-indigo-text); font-weight:600; }
.text-lavender { color:var(--color-lavender); }
.text-amber-dark-bold { color:var(--color-amber-deep); }
.text-amber-brown { color:var(--color-amber-brown); }
.text-blue-vivid { color:var(--color-blue); }
.text-magenta-semibold { color:var(--bc-magenta); font-weight:600; }
.text-magenta-bold { color:var(--bc-magenta); font-weight:600; }
.text-fg-dim { color:hsl(var(--foreground) / 0.7); }
.text-gray-mid { color:var(--color-gray-mid); }


/* --------------------------------------------------------------------------
   2. BACKGROUNDS
   Solid or translucent background fills (often paired with text color).
   -------------------------------------------------------------------------- */
.bg-muted { background:hsl(var(--muted)); }
.bg-muted-soft { background:hsl(var(--muted) / 0.3); }
.bg-indigo { background:var(--bc-indigo); }
.btn-primary-solid { background:hsl(var(--primary)); color:white; }
.btn-solid { background:var(--_btn-bg); color:white; }
.btn--green { --_btn-bg:var(--color-green); }
.btn--red { --_btn-bg:var(--color-red); }
.btn--gray { --_btn-bg:#6b7280; }
.btn--magenta { --_btn-bg:var(--bc-magenta); }
.btn--indigo { --_btn-bg:var(--bc-indigo); }
.badge-solid { background:var(--_badge-bg); color:#fff; }
.badge--red { --_badge-bg:var(--color-red); }
.badge--blue { --_badge-bg:#1e40af; }
.badge--amber { --_badge-bg:var(--color-amber-dark); }
.badge--magenta { --_badge-bg:var(--bc-magenta); }
.badge--amber-vivid { --_badge-bg:var(--color-amber-warm); }
.dot { background:var(--_dot-bg); }
.dot--red { --_dot-bg:var(--color-red); }
.dot--amber { --_dot-bg:var(--color-amber); }
.dot--blue { --_dot-bg:var(--color-blue); }
.surface-ghost { background:rgba(255,255,255,0.03); }
.surface-indigo-ghost { background:color-mix(in srgb, var(--bc-indigo) 4%, transparent); }
.bg-green { background:var(--color-green); }
.bg-emerald-light { background:var(--color-emerald-light-bg); }
.bg-muted-fg { background:hsl(var(--muted-foreground)); }
.bg-magenta { background:var(--bc-magenta); }
.bg-indigo-solid { background:var(--bc-indigo); }


/* --------------------------------------------------------------------------
   3. BORDERS
   Border-only or border + text-color classes.
   -------------------------------------------------------------------------- */
.border-default { border:1px solid hsl(var(--border)); }
.border-top-default { border-top:1px solid hsl(var(--border)); }
.border-bottom-default { border-bottom:1px solid hsl(var(--border)); }
.border-bottom-card { border-bottom:1px solid hsl(var(--card-border)); }
.border-color-default { border-color:hsl(var(--border)); }
.border-color-fg { border-color:hsl(var(--border)); color:hsl(var(--foreground)); }
.border-indigo-bold { border:2px solid var(--bc-indigo); }
.outline-muted { border:1px solid hsl(var(--border)); color:hsl(var(--muted-foreground)); }
.outline-fg { border:1px solid hsl(var(--border)); color:hsl(var(--foreground)); }
.table-header-muted { color:hsl(var(--muted-foreground)); border-bottom:1px solid hsl(var(--border)); }
.border-bottom-dashed { border-bottom:1px dashed hsl(var(--border)); }
.border-color-primary { border-color:hsl(var(--primary)); }
.dropdown-header-white { color:white; border-color:color-mix(in srgb, var(--bc-indigo) 25%, transparent); }
.footer-muted-border { color:hsl(var(--muted-foreground)); border-color:hsl(var(--border)); }
.border-blue-outline { border:1px solid color-mix(in srgb, var(--color-blue-soft) 30%, transparent); }
.divide-card-border { border-color:hsl(var(--card-border)); }
.border-thick-muted { border:1.5px solid hsl(var(--border)); }
.border-color-red { border-color:var(--color-red); }
.btn-outline-fg { border-color:hsl(var(--border)); color:hsl(var(--foreground)); }
.btn-outline-muted { border-color:hsl(var(--border)); color:hsl(var(--muted-foreground)); }
.border-card { border:1px solid hsl(var(--card-border)); }
.border-top-card { border-top:1px solid hsl(var(--card-border)); }


/* --------------------------------------------------------------------------
   4. LEFT-ACCENT BORDERS
   Colored left-border rules used for callouts and block quotes.
   -------------------------------------------------------------------------- */
.accent-left { border-left:3px solid var(--_accent-clr); padding-left:12px; }
.accent-left-thick { border-left-width:4px; border-left-style:solid; border-left-color:var(--_accent-clr); }
.accent--green { --_accent-clr:var(--color-green); }
.accent--indigo { --_accent-clr:var(--bc-indigo); }
.accent--amber { --_accent-clr:var(--color-amber); }
.accent--amber-warm { --_accent-clr:var(--color-amber-warm); }
.blockquote-primary { border-left:2px solid hsl(var(--primary)); color:hsl(var(--muted-foreground)); }


/* --------------------------------------------------------------------------
   5. DIVIDERS & SEPARATORS
   Horizontal rules and soft row dividers.
   -------------------------------------------------------------------------- */
.divider-top-muted { border-top:1px solid hsl(var(--border)); color:hsl(var(--muted-foreground)); }
.is-divider          { border-bottom: 1px solid hsl(var(--border) / 0.5); }
.is-divider-color    { border-color: hsl(var(--border) / 0.5); }
.divider-section { margin:48px 0 24px; border:none; border-top:1px solid hsl(var(--border)); }
.border-bottom-soft { border-bottom:1px solid hsl(var(--border) / 0.5); }
.is-outline-top      { border-top: 1px solid hsl(var(--border)); }
.is-outline-top-soft { border-top: 1px solid hsl(var(--border) / 0.4); }


/* --------------------------------------------------------------------------
   6. SURFACES & CARDS
   Combined background + border patterns for panels and containers.
   -------------------------------------------------------------------------- */
.card-base { background:hsl(var(--card)); border:1px solid hsl(var(--card-border)); }
.card-bordered { border:1px solid hsl(var(--border)); background:hsl(var(--card)); }
.surface-bordered { background:hsl(var(--background)); border-color:hsl(var(--border)); }
.surface-default { background:hsl(var(--background)); color:hsl(var(--foreground)); border-color:hsl(var(--border)); }
.alert-red-soft { background:color-mix(in srgb, var(--color-red-brand) 5%, transparent); border:1px solid color-mix(in srgb, var(--color-red-brand) 20%, transparent); }
.alert-indigo-soft { background:color-mix(in srgb, var(--bc-indigo) 5%, transparent); border:1px solid color-mix(in srgb, var(--bc-indigo) 20%, transparent); color:hsl(var(--foreground)); }
.surface-indigo-outline { background:hsl(var(--background)); border:1px solid var(--bc-indigo); color:hsl(var(--foreground)); }
.table-header-sticky { color:hsl(var(--muted-foreground)); background:hsl(var(--background)); }
.alert-emerald-soft { background:color-mix(in srgb, var(--color-emerald) 8%, transparent); border-color:color-mix(in srgb, var(--color-emerald) 30%, transparent); }
.alert-amber-soft { background:color-mix(in srgb, var(--color-amber-gold) 8%, transparent); border-color:color-mix(in srgb, var(--color-amber-gold) 30%, transparent); }
.alert-green-outline { border:1px solid var(--color-green); background:color-mix(in srgb, var(--color-green) 6%, transparent); }
.input-token-display { background:#0f0a24; color:#A5F3C5; border:1px solid var(--color-green); outline:none; }
.input-bordered { background:hsl(var(--background)); color:hsl(var(--foreground)); border:1px solid hsl(var(--border)); }
.header-nav-dark { background:var(--color-navy); border-bottom:2px solid var(--bc-indigo); }
.dropdown-dark { background:#2C2640; border-color:color-mix(in srgb, var(--bc-indigo) 40%, transparent); }
.surface-amber-callout { background:var(--surface-amber-callout-bg); border-color:var(--surface-amber-callout-border); }
.surface-indigo-callout { background:var(--surface-indigo-callout-bg); border-color:var(--surface-indigo-callout-border); }
.surface-indigo-hover { background:color-mix(in srgb, var(--bc-indigo) 8%, transparent); color:hsl(var(--foreground)); }
.surface-indigo-bordered { background:color-mix(in srgb, var(--bc-indigo) 7%, transparent); border:1px solid color-mix(in srgb, var(--bc-indigo) 30%, transparent); }


/* --------------------------------------------------------------------------
   7. CHIPS & BADGES
   Small inline labels, tags, and soft-background indicators.
   -------------------------------------------------------------------------- */
.chip-muted { background:hsl(var(--muted)); color:hsl(var(--foreground)); }
.chip-muted-bold { background:hsl(var(--muted)); color:hsl(var(--foreground)); font-weight:600; }
.chip-muted-dim { background:hsl(var(--muted)); color:hsl(var(--muted-foreground)); }
.chip-dark-navy { background:var(--color-navy); color:#fff; }
.badge-primary { background:hsl(var(--primary) / 0.1); color:hsl(var(--primary)); }
.badge-green-light { background:var(--color-emerald-light-bg); color:var(--color-green-text); }
.badge-blue-left { background:color-mix(in srgb, var(--color-blue-soft) 10%, transparent); color:var(--color-blue-light); border-left:1px solid color-mix(in srgb, var(--color-blue-soft) 30%, transparent); }
.badge-magenta-soft { background:color-mix(in srgb, var(--bc-magenta) 12%, transparent); color:var(--bc-magenta); }
.chip-magenta-outline { background:color-mix(in srgb, var(--bc-magenta) 12%, transparent); color:var(--bc-magenta); font-family:'Montserrat',sans-serif; border:1px solid color-mix(in srgb, var(--bc-magenta) 30%, transparent); }
.badge-blue-ghost { background:color-mix(in srgb, var(--color-blue-soft) 15%, transparent); color:var(--color-blue-light); }
.badge-magenta-left { background:color-mix(in srgb, var(--bc-magenta) 12%, transparent); color:var(--color-magenta-light); border-left:1px solid color-mix(in srgb, var(--bc-magenta) 30%, transparent); }
.badge-magenta-outline { background:color-mix(in srgb, var(--bc-magenta) 15%, transparent); color:var(--color-magenta); border:1px solid color-mix(in srgb, var(--bc-magenta) 30%, transparent); }
.chip-muted-soft { background:hsl(var(--muted) / 0.5); color:hsl(var(--muted-foreground)); }
.chip-indigo-bold { background:color-mix(in srgb, var(--bc-indigo) 10%, transparent); color:var(--bc-indigo-text); font-weight:600; }
.chip-magenta-bold { background:color-mix(in srgb, var(--bc-magenta) 10%, transparent); color:var(--bc-magenta); font-weight:600; }
.chip-amber-warning { background:color-mix(in srgb, var(--color-yellow) 14%, transparent); color:var(--color-amber-dark); }
.badge-amber-warm { background:var(--color-amber-light-bg); color:var(--color-amber-brown); }
.chip-indigo-branded { background:color-mix(in srgb, var(--bc-indigo) 10%, transparent); color:var(--bc-indigo-text); font-family:'Montserrat',sans-serif; }


/* --------------------------------------------------------------------------
   8. ALERTS & STATUS INDICATORS
   Alert banners and inline status feedback.
   -------------------------------------------------------------------------- */
.alert-amber { background:color-mix(in srgb, var(--color-amber-warm) 10%, transparent); border:1px solid color-mix(in srgb, var(--color-amber-warm) 30%, transparent); color:var(--color-amber-deep); }
.alert-green-soft { background:color-mix(in srgb, var(--color-emerald) 12%, transparent); border:1px solid color-mix(in srgb, var(--color-emerald) 40%, transparent); color:var(--color-green); }
.alert-red-error { background:color-mix(in srgb, var(--color-red-light) 12%, transparent); border:1px solid color-mix(in srgb, var(--color-red-light) 40%, transparent); color:var(--color-red); }


/* --------------------------------------------------------------------------
   9. STATUS PILLS
   Pill-shaped labels for workflow states (pending, accepted, rejected, etc.).
   -------------------------------------------------------------------------- */
.is-pill-pending   { background: var(--color-amber-light-bg); color: var(--color-amber-brown); }
.is-pill-accepted  { background: var(--color-emerald-light-bg); color: var(--color-green-text); }
.is-pill-rejected  { background: var(--color-red-light-bg); color: var(--color-red-dark); }
.is-pill-neutral   { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }
html.dark .is-pill-pending { color: var(--color-amber-warm); }

.pill--accepted { --_pill-clr:var(--color-green-vivid); --_pill-fg:var(--color-green); }
.pill--ready    { --_pill-clr:var(--bc-indigo); --_pill-fg:var(--bc-indigo-text); }
.pill--failed   { --_pill-clr:var(--color-red-brand); --_pill-fg:var(--color-red); }
.pill--pending  { --_pill-clr:var(--color-amber-warm); --_pill-fg:var(--color-amber-deep); }
.is-pill-soft   { background:color-mix(in srgb, var(--_pill-clr) 15%, transparent); color:var(--_pill-fg); }
.is-pill-strong { background:color-mix(in srgb, var(--_pill-clr) 20%, transparent); color:var(--_pill-fg); }
.is-pill-soft.pill--neutral,
.is-pill-strong.pill--neutral { --_pill-clr:none; --_pill-fg:hsl(var(--muted-foreground)); background:hsl(var(--muted)); color:hsl(var(--muted-foreground)); }

.strip--accepted { --_strip-clr:var(--color-green-vivid); --_strip-mix:8%; }
.strip--ready    { --_strip-clr:var(--bc-indigo); --_strip-mix:5%; }
.strip--failed   { --_strip-clr:var(--color-red-brand); --_strip-mix:8%; }
.strip--pending  { --_strip-clr:var(--color-amber-warm); --_strip-mix:6%; }
.is-card-strip   { border-bottom:1px solid hsl(var(--card-border)); background:color-mix(in srgb, var(--_strip-clr) var(--_strip-mix, 8%), transparent); }


/* --------------------------------------------------------------------------
   10. LINKS & TEXT DECORATION
   -------------------------------------------------------------------------- */
.no-underline { text-decoration:none; }
.link-white-underline { color:#fff; text-decoration:underline; text-underline-offset:2px; }
.link-indigo-bold-clean { color:var(--bc-indigo-text); font-weight:700; text-decoration:none; }
.link-magenta-semibold { color:var(--bc-magenta); font-weight:600; text-decoration:none; }
.link-indigo-underline { color:var(--bc-indigo-text); text-decoration:underline; }


/* --------------------------------------------------------------------------
   11. TYPOGRAPHY & FONTS
   Font families, sizes, weights, and text formatting.
   -------------------------------------------------------------------------- */
.font-heading { font-family:'Montserrat',sans-serif; }
.code-muted { background:hsl(var(--muted)); white-space:pre-wrap; font-family: ui-monospace, monospace; }
.text-2xs { font-size:10px; }
.font-heading-tight { font-family:'Montserrat',sans-serif; letter-spacing:-0.01em; }
.text-magenta-heading-sm { color:var(--bc-magenta); font-family:'Montserrat',sans-serif; margin-top:-2px; }
.text-fg-heading { color:hsl(var(--foreground)); font-family:'Montserrat'; }
.text-muted-sm { opacity:.5; font-size:14px; }
.text-meta-medium { font-size:13px; font-weight:500; }
.text-tabular-faded { font-variant-numeric:tabular-nums; opacity:.8; }
.text-muted-sm-spaced { color:hsl(var(--muted-foreground)); font-size:13px; margin:8px 0 0; }
.label-magenta-upper { color:var(--bc-magenta); font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; margin:0 0 4px; }
.heading-serif-md { font-size:18px; font-family:'Source Serif 4',Georgia,serif; margin:0 0 8px; color:hsl(var(--foreground)); }
.text-body-md { font-size:15px; }
.text-footer-center { font-size:12px; color:hsl(var(--muted-foreground)); text-align:center; font-family:'Montserrat',sans-serif; }


/* --------------------------------------------------------------------------
   12. FORMS & INPUTS
   Input fields, textareas, and form control accents.
   -------------------------------------------------------------------------- */
.input-default { background:hsl(var(--background)); border:1px solid hsl(var(--input)); color:hsl(var(--foreground)); }
.input-mono-default { background:hsl(var(--background)); border:1px solid hsl(var(--input)); color:hsl(var(--foreground)); line-height:1.5; }
.accent-indigo { accent-color:var(--bc-indigo-text); }


/* --------------------------------------------------------------------------
   13. LAYOUT, SIZING & DISPLAY
   Width, height, max-width, display, overflow, spacing, and positioning.
   -------------------------------------------------------------------------- */
.cell-truncate-narrow { max-width:240px; }
.display-inline { display:inline; }
.logo-icon-block { width:38px; height:38px; display:block; }
.block-full-transparent { width:100%; height:100%; display:block; background:transparent; }
.text-truncate { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.section-spacer { margin: 24px 0; }
.avatar-indigo-xl { width:112px; height:112px; font-size:44px; border-radius:9999px; background:var(--bc-indigo); color:#fff; }
.avatar-indigo-lg { width:96px; height:96px; font-size:36px; border-radius:9999px; background:var(--bc-indigo); color:#fff; }
.child-row { padding-left: 4.25rem; }


/* --------------------------------------------------------------------------
   14. OPACITY & VISUAL EFFECTS
   -------------------------------------------------------------------------- */
.opacity-50 { opacity:0.5; }
.opacity-60 { opacity:0.6; }
.opacity-70 { opacity:.7; }


/* --------------------------------------------------------------------------
   15. GRADIENTS & DECORATIVE
   Background gradients, radial effects, and animations.
   -------------------------------------------------------------------------- */
.hero-gradient-dark { background: linear-gradient(135deg, var(--color-navy) 0%, #2C2157 50%, #352A6B 100%) !important; border-color: color-mix(in srgb, var(--bc-indigo) 40%, transparent); }
.glow-indigo-radial { background:radial-gradient(circle, var(--bc-indigo) 0%, transparent 70%); transform:translate(30%, -30%); }
.surface-gradient-magenta { background:linear-gradient(90deg, color-mix(in srgb, var(--bc-indigo) 8%, transparent), color-mix(in srgb, var(--bc-magenta) 8%, transparent)); border-color:color-mix(in srgb, var(--bc-magenta) 30%, transparent); }
.pulse-magenta { background:var(--bc-magenta); animation:pulse 1.4s infinite; }


/* --------------------------------------------------------------------------
   16. PRE-FORMATTED TEXT BLOCKS
   Preformatted / whitespace-preserving containers.
   -------------------------------------------------------------------------- */
.surface-muted-prewrap { background:hsl(var(--muted)); color:hsl(var(--foreground)); white-space:pre-wrap; }
.prose-serif-bordered { background:hsl(var(--background)); border:1px solid hsl(var(--border)); white-space:pre-wrap; font-family: ui-serif, Georgia, serif; line-height:1.55; }
.surface-muted-pre { background:hsl(var(--muted)); white-space:pre-wrap; }


/* --------------------------------------------------------------------------
   17. MODAL & DIALOG COMPONENTS
   Styles for dialog/modal elements (shell, padding, headings, buttons).
   -------------------------------------------------------------------------- */
.dialog-card { border:none; border-radius:12px; padding:0; max-width:520px; background:hsl(var(--card)); color:hsl(var(--foreground)); box-shadow:0 30px 80px rgba(0,0,0,0.3); }
.dialog-body { padding:24px; }
.dialog-title { margin:0 0 6px; font-family:'Montserrat',sans-serif; font-size:18px; font-weight:700; }
.dialog-subtitle { margin:0 0 14px; font-size:13px; color:hsl(var(--muted-foreground)); }
.textarea-mono-bordered { width:100%; font-family:monospace; font-size:12px; padding:10px; border-radius:8px; border:1px solid hsl(var(--border)); background:hsl(var(--muted)); resize:none; }
.dialog-actions { display:flex; justify-content:space-between; margin-top:14px; gap:8px; }
.btn-indigo-solid { background:var(--bc-indigo); color:white; padding:8px 14px; border-radius:8px; font-weight:600; border:none; cursor:pointer; }
.btn-outline-default { padding:8px 14px; border-radius:8px; border:1px solid hsl(var(--border)); background:transparent; color:hsl(var(--foreground)); cursor:pointer; }


/* --------------------------------------------------------------------------
   18. BAR FILLS & PROGRESS INDICATORS
   Width + background combos for horizontal bar charts and progress bars.
   -------------------------------------------------------------------------- */
.bar-fill { background:var(--_bar-bg, transparent); }
.bar--indigo { --_bar-bg:var(--bc-indigo); }
.bar--magenta { --_bar-bg:var(--bc-magenta); }
.bar--gray { --_bar-bg:var(--color-gray); }
.bar--red { --_bar-bg:var(--color-red); }
.bar--violet { --_bar-bg:var(--color-violet); }
.bar--orange { --_bar-bg:var(--color-orange); }
.bar--indigo-hex { --_bar-bg:var(--color-indigo-bright); }
.bar--purple { --_bar-bg:var(--color-purple); }
.bar--purple-lt { --_bar-bg:var(--color-purple-light); }
.bar--purple-md { --_bar-bg:var(--color-purple-medium); }
.bar--purple-pale { --_bar-bg:var(--color-purple-pale); }
.histo-bar-min { min-height: 2px; }


/* --------------------------------------------------------------------------
   19. HEALTH & STATUS COLORS
   Semantic foreground/background helpers for ok / warn / error states.
   All values reference shared tokens from section 0.
   -------------------------------------------------------------------------- */
.is-ok-fg   { color: var(--color-green); }
.is-ok-bg   { background: var(--color-green); }
.is-warn-fg { color: var(--color-amber-dark); }
.is-warn-bg { background: var(--color-amber-dark); }
.is-err-fg  { color: var(--color-red-bright); }
.is-err-bg  { background: var(--color-red-bright); }
.is-red-fg  { color: var(--color-red); }
.is-red-bd  { border-left-color: var(--color-red); }
.is-muted-bg-soft { background: hsl(var(--muted) / 0.5); }


/* --------------------------------------------------------------------------
   20. ACTIVITY-ACTION AVATAR SWATCHES
   Avatar-swatch backgrounds for activity-log icon colors.
   All values reference shared tokens from section 0.
   -------------------------------------------------------------------------- */
.is-act-edit    { background: var(--color-green); }
.is-act-comment { background: var(--color-blue); }
.is-act-assign  { background: var(--bc-magenta); }
.is-act-other   { background: var(--bc-indigo); }


/* --------------------------------------------------------------------------
   21. DASHBOARD TILES
   God-mode dashboard tile text colors and soft background fills.
   All values reference shared tokens from section 0.
   -------------------------------------------------------------------------- */
.is-tile-indigo { color: var(--bc-indigo-text); }
.is-tile-green  { color: var(--color-green); }
.is-tile-amber  { color: var(--color-amber); }
.is-tile-red    { color: var(--color-red); }

.is-tile-not_started      { background: rgba(255,255,255,0.08); }
.is-tile-drafting-soft    { background: color-mix(in srgb, var(--color-amber-gold) 12%, transparent); }
.is-tile-review-soft      { background: color-mix(in srgb, var(--color-blue-soft) 12%, transparent); }
.is-tile-final-soft       { background: color-mix(in srgb, var(--color-emerald) 15%, transparent); }
.is-tile-parked-soft      { background: color-mix(in srgb, var(--color-red-light) 10%, transparent); }


/* --------------------------------------------------------------------------
   22. DASHBOARD BAR-FILL (status breakdown)
   Bar-fill backgrounds for dashboard workflow-stage chart.
   All values reference shared tokens from section 0.
   -------------------------------------------------------------------------- */
.is-bar-not_started      { background: var(--color-gray); }
.is-bar-drafting         { background: var(--color-amber); }
.is-bar-ready_for_review { background: var(--color-blue); }
.is-bar-final            { background: var(--color-green); }
.is-bar-parked           { background: var(--color-red); }
.is-bar-indigo           { background: var(--bc-indigo); }


/* --------------------------------------------------------------------------
   23. DASHBOARD SUGGESTION BLOCKS
   Icon, badge, button, and border-left colors per suggestion kind.
   -------------------------------------------------------------------------- */
.is-sug-unassigned-fg     { color: var(--color-amber-deep); }
.is-sug-unassigned-badge  { background: var(--color-amber-light-bg); color: var(--color-amber-brown); }
.is-sug-unassigned-bd     { border-left: 3px solid var(--color-amber-deep); }

.is-sug-empty-fg          { color: var(--color-crimson); }
.is-sug-empty-badge       { background: var(--color-red-light-bg); color: var(--color-red-dark); }
.is-sug-empty-bd          { border-left: 3px solid var(--color-crimson); }

.is-sug-nosrc-fg          { color: var(--color-indigo-deep); }
.is-sug-nosrc-badge       { background: #e0e7ff; color: var(--color-indigo-light); }
.is-sug-nosrc-bd          { border-left: 3px solid var(--color-indigo-deep); }


/* --------------------------------------------------------------------------
   24. DASHBOARD TABS
   -------------------------------------------------------------------------- */
.is-tab-active   { border-color: var(--bc-indigo); color: var(--bc-indigo-text); }
.is-tab-inactive { color: hsl(var(--muted-foreground)); }


/* --------------------------------------------------------------------------
   25. NUMERIC UTILITY SCALES
   Percentage-based widths, heights, opacities, and depth-indentation.
   -------------------------------------------------------------------------- */
.is-w-0{ width:0%; }
.is-w-1{ width:1%; }
.is-w-2{ width:2%; }
.is-w-3{ width:3%; }
.is-w-4{ width:4%; }
.is-w-5{ width:5%; }
.is-w-6{ width:6%; }
.is-w-7{ width:7%; }
.is-w-8{ width:8%; }
.is-w-9{ width:9%; }
.is-w-10{ width:10%; }
.is-w-11{ width:11%; }
.is-w-12{ width:12%; }
.is-w-13{ width:13%; }
.is-w-14{ width:14%; }
.is-w-15{ width:15%; }
.is-w-16{ width:16%; }
.is-w-17{ width:17%; }
.is-w-18{ width:18%; }
.is-w-19{ width:19%; }
.is-w-20{ width:20%; }
.is-w-21{ width:21%; }
.is-w-22{ width:22%; }
.is-w-23{ width:23%; }
.is-w-24{ width:24%; }
.is-w-25{ width:25%; }
.is-w-26{ width:26%; }
.is-w-27{ width:27%; }
.is-w-28{ width:28%; }
.is-w-29{ width:29%; }
.is-w-30{ width:30%; }
.is-w-31{ width:31%; }
.is-w-32{ width:32%; }
.is-w-33{ width:33%; }
.is-w-34{ width:34%; }
.is-w-35{ width:35%; }
.is-w-36{ width:36%; }
.is-w-37{ width:37%; }
.is-w-38{ width:38%; }
.is-w-39{ width:39%; }
.is-w-40{ width:40%; }
.is-w-41{ width:41%; }
.is-w-42{ width:42%; }
.is-w-43{ width:43%; }
.is-w-44{ width:44%; }
.is-w-45{ width:45%; }
.is-w-46{ width:46%; }
.is-w-47{ width:47%; }
.is-w-48{ width:48%; }
.is-w-49{ width:49%; }
.is-w-50{ width:50%; }
.is-w-51{ width:51%; }
.is-w-52{ width:52%; }
.is-w-53{ width:53%; }
.is-w-54{ width:54%; }
.is-w-55{ width:55%; }
.is-w-56{ width:56%; }
.is-w-57{ width:57%; }
.is-w-58{ width:58%; }
.is-w-59{ width:59%; }
.is-w-60{ width:60%; }
.is-w-61{ width:61%; }
.is-w-62{ width:62%; }
.is-w-63{ width:63%; }
.is-w-64{ width:64%; }
.is-w-65{ width:65%; }
.is-w-66{ width:66%; }
.is-w-67{ width:67%; }
.is-w-68{ width:68%; }
.is-w-69{ width:69%; }
.is-w-70{ width:70%; }
.is-w-71{ width:71%; }
.is-w-72{ width:72%; }
.is-w-73{ width:73%; }
.is-w-74{ width:74%; }
.is-w-75{ width:75%; }
.is-w-76{ width:76%; }
.is-w-77{ width:77%; }
.is-w-78{ width:78%; }
.is-w-79{ width:79%; }
.is-w-80{ width:80%; }
.is-w-81{ width:81%; }
.is-w-82{ width:82%; }
.is-w-83{ width:83%; }
.is-w-84{ width:84%; }
.is-w-85{ width:85%; }
.is-w-86{ width:86%; }
.is-w-87{ width:87%; }
.is-w-88{ width:88%; }
.is-w-89{ width:89%; }
.is-w-90{ width:90%; }
.is-w-91{ width:91%; }
.is-w-92{ width:92%; }
.is-w-93{ width:93%; }
.is-w-94{ width:94%; }
.is-w-95{ width:95%; }
.is-w-96{ width:96%; }
.is-w-97{ width:97%; }
.is-w-98{ width:98%; }
.is-w-99{ width:99%; }
.is-w-100{ width:100%; }
.is-h-0{ height:0%; }
.is-h-1{ height:1%; }
.is-h-2{ height:2%; }
.is-h-3{ height:3%; }
.is-h-4{ height:4%; }
.is-h-5{ height:5%; }
.is-h-6{ height:6%; }
.is-h-7{ height:7%; }
.is-h-8{ height:8%; }
.is-h-9{ height:9%; }
.is-h-10{ height:10%; }
.is-h-11{ height:11%; }
.is-h-12{ height:12%; }
.is-h-13{ height:13%; }
.is-h-14{ height:14%; }
.is-h-15{ height:15%; }
.is-h-16{ height:16%; }
.is-h-17{ height:17%; }
.is-h-18{ height:18%; }
.is-h-19{ height:19%; }
.is-h-20{ height:20%; }
.is-h-21{ height:21%; }
.is-h-22{ height:22%; }
.is-h-23{ height:23%; }
.is-h-24{ height:24%; }
.is-h-25{ height:25%; }
.is-h-26{ height:26%; }
.is-h-27{ height:27%; }
.is-h-28{ height:28%; }
.is-h-29{ height:29%; }
.is-h-30{ height:30%; }
.is-h-31{ height:31%; }
.is-h-32{ height:32%; }
.is-h-33{ height:33%; }
.is-h-34{ height:34%; }
.is-h-35{ height:35%; }
.is-h-36{ height:36%; }
.is-h-37{ height:37%; }
.is-h-38{ height:38%; }
.is-h-39{ height:39%; }
.is-h-40{ height:40%; }
.is-h-41{ height:41%; }
.is-h-42{ height:42%; }
.is-h-43{ height:43%; }
.is-h-44{ height:44%; }
.is-h-45{ height:45%; }
.is-h-46{ height:46%; }
.is-h-47{ height:47%; }
.is-h-48{ height:48%; }
.is-h-49{ height:49%; }
.is-h-50{ height:50%; }
.is-h-51{ height:51%; }
.is-h-52{ height:52%; }
.is-h-53{ height:53%; }
.is-h-54{ height:54%; }
.is-h-55{ height:55%; }
.is-h-56{ height:56%; }
.is-h-57{ height:57%; }
.is-h-58{ height:58%; }
.is-h-59{ height:59%; }
.is-h-60{ height:60%; }
.is-h-61{ height:61%; }
.is-h-62{ height:62%; }
.is-h-63{ height:63%; }
.is-h-64{ height:64%; }
.is-h-65{ height:65%; }
.is-h-66{ height:66%; }
.is-h-67{ height:67%; }
.is-h-68{ height:68%; }
.is-h-69{ height:69%; }
.is-h-70{ height:70%; }
.is-h-71{ height:71%; }
.is-h-72{ height:72%; }
.is-h-73{ height:73%; }
.is-h-74{ height:74%; }
.is-h-75{ height:75%; }
.is-h-76{ height:76%; }
.is-h-77{ height:77%; }
.is-h-78{ height:78%; }
.is-h-79{ height:79%; }
.is-h-80{ height:80%; }
.is-h-81{ height:81%; }
.is-h-82{ height:82%; }
.is-h-83{ height:83%; }
.is-h-84{ height:84%; }
.is-h-85{ height:85%; }
.is-h-86{ height:86%; }
.is-h-87{ height:87%; }
.is-h-88{ height:88%; }
.is-h-89{ height:89%; }
.is-h-90{ height:90%; }
.is-h-91{ height:91%; }
.is-h-92{ height:92%; }
.is-h-93{ height:93%; }
.is-h-94{ height:94%; }
.is-h-95{ height:95%; }
.is-h-96{ height:96%; }
.is-h-97{ height:97%; }
.is-h-98{ height:98%; }
.is-h-99{ height:99%; }
.is-h-100{ height:100%; }
.is-op-0{ opacity:0.00; }
.is-op-1{ opacity:0.05; }
.is-op-2{ opacity:0.10; }
.is-op-3{ opacity:0.15; }
.is-op-4{ opacity:0.20; }
.is-op-5{ opacity:0.25; }
.is-op-6{ opacity:0.30; }
.is-op-7{ opacity:0.35; }
.is-op-8{ opacity:0.40; }
.is-op-9{ opacity:0.45; }
.is-op-10{ opacity:0.50; }
.is-op-11{ opacity:0.55; }
.is-op-12{ opacity:0.60; }
.is-op-13{ opacity:0.65; }
.is-op-14{ opacity:0.70; }
.is-op-15{ opacity:0.75; }
.is-op-16{ opacity:0.80; }
.is-op-17{ opacity:0.85; }
.is-op-18{ opacity:0.90; }
.is-op-19{ opacity:0.95; }
.is-op-20{ opacity:1.00; }
.is-pl-d-0{ padding-left:1.25rem; }
.is-pl-d-1{ padding-left:2.75rem; }
.is-pl-d-2{ padding-left:4.25rem; }
.is-pl-d-3{ padding-left:5.75rem; }
.is-pl-d-4{ padding-left:7.25rem; }
.is-pl-d-5{ padding-left:8.75rem; }
.is-pl-d-6{ padding-left:10.25rem; }
.is-pl-d-7{ padding-left:11.75rem; }
.is-pl-d-8{ padding-left:13.25rem; }
.is-pl-d-9{ padding-left:14.75rem; }
.is-pl-d-10{ padding-left:16.25rem; }
.is-pl-d-11{ padding-left:17.75rem; }
.is-pl-px-d-0{ padding-left:6px; }
.is-pl-px-d-1{ padding-left:18px; }
.is-pl-px-d-2{ padding-left:30px; }
.is-pl-px-d-3{ padding-left:42px; }
.is-pl-px-d-4{ padding-left:54px; }
.is-pl-px-d-5{ padding-left:66px; }
.is-pl-px-d-6{ padding-left:78px; }
.is-pl-px-d-7{ padding-left:90px; }
.is-pl-px-d-8{ padding-left:102px; }
.is-pl-px-d-9{ padding-left:114px; }
.is-pl-px-d-10{ padding-left:126px; }
.is-pl-px-d-11{ padding-left:138px; }


/* --------------------------------------------------------------------------
   26. DARK-MODE OVERRIDES FOR ONE-OFF HEX VALUES
   Classes that use hardcoded hex colors not covered by shared tokens.
   -------------------------------------------------------------------------- */
html.dark .badge--blue         { --_badge-bg: #2563eb; }
html.dark .btn--gray           { --_btn-bg: #4b5563; }
html.dark .badge-green-light   { color: var(--color-emerald); }


html.dark .is-sug-nosrc-badge  { background: color-mix(in srgb, var(--color-indigo) 15%, transparent); }


html.dark .hero-gradient-dark { background: linear-gradient(135deg, var(--color-navy) 0%, #1e1740 50%, #251e50 100%); }


/* --------------------------------------------------------------------------
   27. HTMX INDICATOR STYLES
   Vendored from htmx defaults (htmx-config.includeIndicatorStyles=false
   to avoid inline <style> blocks violating strict style-src CSP).
   -------------------------------------------------------------------------- */
.htmx-indicator        { opacity: 0; transition: opacity 200ms ease-in; }
.htmx-request .htmx-indicator    { opacity: 1; }
.htmx-request.htmx-indicator     { opacity: 1; }


/* --------------------------------------------------------------------------
   28. ENGAGEMENT DETAIL
   Section depth indentation and divide-border utilities.
   -------------------------------------------------------------------------- */
.divide-border > * + *  { border-top: 1px solid hsl(var(--border)); }
.border-color-border    { border-color: hsl(var(--border)); }
.section-depth-0 { padding-left: 1rem; }
.section-depth-1 { padding-left: 2.5rem; }
.section-depth-2 { padding-left: 4rem; }
.section-depth-3 { padding-left: 5.5rem; }

.sortable-ghost { opacity: 0.4; background: color-mix(in srgb, var(--bc-indigo) 10%, transparent); }
.sortable-chosen { box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
.drag-handle { cursor: grab; color: hsl(var(--muted-foreground)); opacity: 0.4; }
.drag-handle:hover { opacity: 1; }