/* ============================================================
 * MDIL — Reasoning Trace Console · Design System
 * Drop-in companion to Tailwind. Tailwind handles utilities;
 * this file owns:
 *   - design tokens (CSS variables consumed by component classes)
 *   - typography overrides (Manrope display + IBM Plex Sans body + Mono)
 *   - semantic components that don't map cleanly to utility classes
 *     (tile hierarchy, hash chips, audit ladder, tool receipts, etc.)
 *
 * Loaded AFTER the Tailwind Play CDN bundle so component classes can
 * still be composed with utility classes. No @apply is used because
 * Play CDN doesn't resolve it at runtime.
 *
 * Palette stance: most of the UI stays neutral (slate-based). The MDIL
 * brand purple appears ONLY in chrome (header bar, mark, brand dots) so
 * the dashboard reads "regulator console" not "marketing site". Semantic
 * color is reserved: emerald = "this is the win", amber = "this needs
 * attention", rose = "this was blocked / forbidden".
 * ============================================================ */

:root {
  /* ── Surfaces ─────────────────────────────────────────────── */
  --mdil-bg:        #E2E8F0;   /* page background — visibly darker so paper tiles elevate */
}

/* Inline-SVG topology diagram inherits Manrope/IBM Plex from the page,
   and we force it to fill the available width. */
.mdil-topology-svg svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 920px;
  margin: 0 auto;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
}
.mdil-topology-svg svg text[font-family*="Mono"] {
  font-family: 'IBM Plex Mono', monospace;
}

/* (re-open root to keep additional tokens below)
   Note: the brace-close above was the original :root close; we reopen via */
:root {
  --noop: 0;   /* keep CSS parsing valid; tokens below continue */
  --mdil-paper:     #FFFFFF;   /* card background */
  --mdil-panel-2:   #EEF0F4;   /* secondary surface (inner panel) */
  --mdil-panel-3:   #E2E6ED;   /* tertiary surface (table thead, code bg) */

  /* ── Lines ────────────────────────────────────────────────── */
  --mdil-line:      #DDE2EA;
  --mdil-line-2:    #C5CCD6;
  --mdil-line-3:    #A6B0BE;

  /* ── Text ─────────────────────────────────────────────────── */
  --mdil-text:      #0F172A;   /* slate-900 */
  --mdil-text-2:    #1E293B;   /* slate-800 — display weight */
  --mdil-muted:     #475569;   /* slate-600 — body copy */
  --mdil-muted-2:   #64748B;   /* slate-500 — secondary */
  --mdil-dim:       #94A3B8;   /* slate-400 — metadata, captions */

  /* ── Brand (used only in chrome) ──────────────────────────── */
  --mdil-brand:        #A100FF;
  --mdil-brand-2:      #6E00B3;
  --mdil-brand-dim:    #C9A3E4;
  --mdil-brand-glow:   rgba(161, 0, 255, 0.10);

  /* ── Chrome (dark header / footer band) ───────────────────── */
  --mdil-chrome-bg:    #06010C;
  --mdil-chrome-text:  #F4ECFA;
  --mdil-chrome-muted: #B49FC7;
  --mdil-chrome-dim:   #8973A0;
  --mdil-chrome-line:  rgba(161, 0, 255, 0.22);

  /* ── Semantic ─────────────────────────────────────────────── */
  --mdil-win:          #047857;   /* emerald-700 */
  --mdil-win-text:     #065F46;   /* emerald-800 */
  --mdil-win-bg:       #ECFDF5;   /* emerald-50 */
  --mdil-win-bg-2:     #D1FAE5;   /* emerald-100 */
  --mdil-win-border:   #A7F3D0;   /* emerald-200 */
  --mdil-win-border-2: #6EE7B7;   /* emerald-300 */

  --mdil-attn:         #B45309;   /* amber-700 */
  --mdil-attn-text:    #92400E;   /* amber-800 */
  --mdil-attn-bg:      #FFFBEB;   /* amber-50 */
  --mdil-attn-bg-2:    #FEF3C7;   /* amber-100 */
  --mdil-attn-border:  #FDE68A;   /* amber-200 */

  --mdil-block:        #B91C1C;   /* red-700 */
  --mdil-block-text:   #991B1B;   /* red-800 */
  --mdil-block-bg:     #FEF2F2;   /* red-50 */
  --mdil-block-bg-2:   #FEE2E2;   /* red-100 */
  --mdil-block-border: #FECACA;   /* red-200 */

  --mdil-info:         #1D4ED8;   /* blue-700 */
  --mdil-info-bg:      #EFF6FF;   /* blue-50 */
  --mdil-info-border:  #BFDBFE;   /* blue-200 */

  --mdil-violet:       #6D28D9;   /* violet-700 — Pass-2 / grammar */
  --mdil-violet-bg:    #F5F3FF;
  --mdil-violet-border:#DDD6FE;

  /* ── Shadows ─────────────────────────────────────────────── */
  --mdil-shadow-tile:    0 1px 0 rgba(15,23,42,0.04), 0 1px 2px rgba(15,23,42,0.04);
  --mdil-shadow-card:    0 1px 0 rgba(15,23,42,0.05), 0 4px 10px rgba(15,23,42,0.06);
  --mdil-shadow-headline:0 1px 0 rgba(15,23,42,0.06), 0 8px 24px rgba(15,23,42,0.08);

  /* ── Typography ──────────────────────────────────────────── */
  --mdil-f-display: 'Manrope', 'IBM Plex Sans', system-ui, sans-serif;
  --mdil-f-sans:    'IBM Plex Sans', 'Inter', system-ui, sans-serif;
  --mdil-f-mono:    'IBM Plex Mono', 'JetBrains Mono', ui-monospace, monospace;

  /* ── Radii ──────────────────────────────────────────────── */
  --mdil-r-1: 3px;
  --mdil-r-2: 5px;
  --mdil-r-3: 7px;
  --mdil-r-4: 10px;
}

/* ============================================================
 * BASE — apply MDIL fonts + page surface globally.
 * ============================================================ */
html, body {
  font-family: var(--mdil-f-sans);
  font-feature-settings: 'cv11', 'ss01', 'tnum';
  background: var(--mdil-bg);
  color: var(--mdil-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Display type for headlines */
h1, h2, h3, h4 {
  font-family: var(--mdil-f-display);
  font-feature-settings: 'cv11', 'ss01';
  letter-spacing: -0.011em;
}

/* Mono for class="font-mono" and explicit overrides */
.font-mono, code, pre, kbd, samp {
  font-family: var(--mdil-f-mono);
  font-feature-settings: 'tnum', 'ss01';
}

/* Tabular numbers for number-heavy data columns */
.mdil-tnum, .mdil-tnum * { font-variant-numeric: tabular-nums; }

/* Selection color hints the brand without screaming */
::selection { background: var(--mdil-brand-glow); color: var(--mdil-text); }

/* ============================================================
 * CHROME — header / footer dark band, sticky topbar
 * ============================================================ */
.mdil-chrome {
  background: var(--mdil-chrome-bg);
  color: var(--mdil-chrome-text);
  border-bottom: 1px solid var(--mdil-chrome-line);
}
.mdil-chrome--footer {
  border-bottom: 0;
  border-top: 1px solid var(--mdil-chrome-line);
}
.mdil-chrome a { color: var(--mdil-chrome-muted); }
.mdil-chrome a:hover { color: var(--mdil-chrome-text); }

.mdil-mark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.mdil-mark__img { height: 32px; width: auto; display: block; }
.mdil-mark__tagline {
  font-family: var(--mdil-f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mdil-chrome-muted);
  white-space: nowrap;
  padding-left: 14px;
  border-left: 1px solid rgba(161,0,255,0.25);
}

.mdil-chrome-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mdil-f-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--mdil-chrome-muted);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(161,0,255,0.22);
  padding: 5px 10px;
  border-radius: var(--mdil-r-3);
}
.mdil-chrome-chip strong { color: var(--mdil-chrome-text); font-weight: 600; }

.mdil-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3DDC97;
  box-shadow: 0 0 0 3px rgba(61,220,151,0.18);
  display: inline-block;
}

/* ============================================================
 * EYEBROW / SECTION HEADER (used inside content surfaces)
 * ============================================================ */
.mdil-eyebrow {
  font-family: var(--mdil-f-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mdil-muted-2);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.mdil-eyebrow--brand { color: var(--mdil-brand-2); }
.mdil-eyebrow .mdil-eyebrow__dot {
  width: 6px; height: 6px;
  background: currentColor;
  border-radius: 1px;
  opacity: 0.7;
}

.mdil-section-title {
  font-family: var(--mdil-f-display);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.2;
  color: var(--mdil-text);
  letter-spacing: -0.013em;
}
.mdil-section-title--lg { font-size: 22px; }

.mdil-section-sub {
  font-family: var(--mdil-f-sans);
  font-size: 13px;
  line-height: 1.55;
  color: var(--mdil-muted);
  margin-top: 4px;
}
.mdil-section-sub strong { color: var(--mdil-text); font-weight: 600; }

/* ============================================================
 * TILE HIERARCHY
 * The result grid renders 7+ tiles competing for attention. Establish
 * three tiers so the eye lands in order. Apply alongside Tailwind
 * utility classes (the tile classes set background, border, and shadow;
 * Tailwind handles spacing).
 * ============================================================ */
.mdil-tile {
  background: var(--mdil-paper);
  border: 1px solid var(--mdil-line-2);
  border-radius: var(--mdil-r-3);
  /* Stronger elevation so the white tile lifts off the cool-grey page bg. */
  box-shadow: 0 1px 0 rgba(15,23,42,0.04), 0 4px 12px rgba(15,23,42,0.08);
  position: relative;
}
/* Primary — the headline tile (e.g. Audit Root). Heavier shadow, accent rail. */
.mdil-tile--primary {
  border-color: var(--mdil-line-2);
  box-shadow: var(--mdil-shadow-card);
}
.mdil-tile--primary::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--mdil-brand);
  border-top-left-radius: var(--mdil-r-3);
  border-bottom-left-radius: var(--mdil-r-3);
}
/* Secondary — fires, top-K, validator. Same surface, slightly bolder. */
.mdil-tile--secondary { box-shadow: var(--mdil-shadow-card); }
/* Tertiary — metadata, supplementary stats. Recede. */
.mdil-tile--tertiary {
  background: var(--mdil-panel-2);
  box-shadow: none;
}

/* Tile head — small uppercase mono label, no margin-bottom */
.mdil-tile__label {
  font-family: var(--mdil-f-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mdil-muted-2);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mdil-tile__label--brand { color: var(--mdil-brand-2); }
.mdil-tile__label--win   { color: var(--mdil-win); }
.mdil-tile__label--attn  { color: var(--mdil-attn); }
.mdil-tile__label--block { color: var(--mdil-block); }

/* Tile headline number — the big readable stat */
.mdil-tile__headline {
  font-family: var(--mdil-f-display);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.05;
  letter-spacing: -0.022em;
  color: var(--mdil-text);
  font-variant-numeric: tabular-nums;
}
.mdil-tile__headline--mono {
  font-family: var(--mdil-f-mono);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.005em;
}
.mdil-tile__headline--win   { color: var(--mdil-win); }
.mdil-tile__headline--attn  { color: var(--mdil-attn); }
.mdil-tile__headline--block { color: var(--mdil-block); }

.mdil-tile__sub {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--mdil-muted);
}

/* ============================================================
 * HASH CHIP — truncated 64-char hashes, hoverable, mono
 * Renders the first 32 + ellipsis + last 16; title attribute carries
 * the full value so a tooltip reveals it. Component sets the visual;
 * the Jinja side must build the markup.
 * ============================================================ */
.mdil-hash {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--mdil-f-mono);
  font-size: 11.5px;
  background: var(--mdil-panel-2);
  border: 1px solid var(--mdil-line);
  color: var(--mdil-muted);
  padding: 2px 8px;
  border-radius: var(--mdil-r-2);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  white-space: nowrap;
  cursor: help;
}
.mdil-hash--win   { background: var(--mdil-win-bg);   border-color: var(--mdil-win-border);   color: var(--mdil-win-text); }
.mdil-hash--attn  { background: var(--mdil-attn-bg);  border-color: var(--mdil-attn-border);  color: var(--mdil-attn-text); }
.mdil-hash--block { background: var(--mdil-block-bg); border-color: var(--mdil-block-border); color: var(--mdil-block-text); }
.mdil-hash__prefix { color: var(--mdil-text); }
.mdil-hash__ellipsis { color: var(--mdil-dim); padding: 0 2px; }
.mdil-hash__suffix { color: var(--mdil-text); opacity: 0.7; }

/* ============================================================
 * CHIPS — small labelled badges (intent fires, gates, modes)
 * ============================================================ */
.mdil-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: var(--mdil-r-pill, 999px);
  font-family: var(--mdil-f-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  background: var(--mdil-panel-2);
  color: var(--mdil-muted);
  border: 1px solid var(--mdil-line);
  white-space: nowrap;
  line-height: 1.6;
}
.mdil-chip--win   { background: var(--mdil-win-bg);   color: var(--mdil-win-text);   border-color: var(--mdil-win-border); }
.mdil-chip--attn  { background: var(--mdil-attn-bg);  color: var(--mdil-attn-text);  border-color: var(--mdil-attn-border); }
.mdil-chip--block { background: var(--mdil-block-bg); color: var(--mdil-block-text); border-color: var(--mdil-block-border); }
.mdil-chip--info  { background: var(--mdil-info-bg);  color: var(--mdil-info);       border-color: var(--mdil-info-border); }
.mdil-chip--violet{ background: var(--mdil-violet-bg);color: var(--mdil-violet);     border-color: var(--mdil-violet-border); }
.mdil-chip--brand { background: var(--mdil-brand-glow); color: var(--mdil-brand-2); border-color: var(--mdil-brand-dim); }

/* ============================================================
 * TOOL DISPATCH RECEIPT — make tool tiles read like a printed receipt
 * ============================================================ */
.mdil-receipt {
  background: var(--mdil-paper);
  border: 1px solid var(--mdil-line);
  border-radius: var(--mdil-r-3);
  box-shadow: var(--mdil-shadow-tile);
  overflow: hidden;
  position: relative;
}
.mdil-receipt::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--mdil-win);
}
.mdil-receipt--pending::before { background: var(--mdil-attn); }
.mdil-receipt--error::before   { background: var(--mdil-block); }
.mdil-receipt__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(0deg, var(--mdil-bg), var(--mdil-paper));
  border-bottom: 1px dashed var(--mdil-line);
}
.mdil-receipt__head .mdil-receipt__name {
  font-family: var(--mdil-f-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--mdil-text);
}
.mdil-receipt__head .mdil-receipt__id {
  font-family: var(--mdil-f-mono);
  font-size: 10.5px;
  color: var(--mdil-muted-2);
}
.mdil-receipt__kv {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 18px;
  padding: 12px 14px;
  font-size: 12px;
}
.mdil-receipt__kv > div { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.mdil-receipt__kv .k {
  font-family: var(--mdil-f-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--mdil-muted-2);
  white-space: nowrap;
  flex-shrink: 0;
}
.mdil-receipt__kv .v {
  font-family: var(--mdil-f-mono);
  color: var(--mdil-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mdil-receipt__foot {
  background: var(--mdil-panel-2);
  padding: 8px 14px;
  border-top: 1px dashed var(--mdil-line);
  font-family: var(--mdil-f-mono);
  font-size: 10px;
  color: var(--mdil-muted-2);
  letter-spacing: 0.06em;
}
.mdil-receipt__foot summary {
  cursor: pointer;
  list-style: none;
  color: var(--mdil-muted-2);
}
.mdil-receipt__foot summary::-webkit-details-marker { display: none; }
.mdil-receipt__foot[open] { background: var(--mdil-panel-3); }

/* ============================================================
 * AUDIT LADDER — vertical timeline for the audit chain
 * Replaces flat text listings with a clear evidence trail.
 * ============================================================ */
.mdil-ladder {
  display: flex;
  flex-direction: column;
  position: relative;
  padding-left: 22px;
}
.mdil-ladder::before {
  content: '';
  position: absolute;
  left: 9px; top: 8px; bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg, var(--mdil-brand-dim), var(--mdil-line));
  border-radius: 2px;
}
.mdil-ladder__step {
  position: relative;
  padding: 6px 0 6px 14px;
  font-family: var(--mdil-f-mono);
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--mdil-muted);
}
.mdil-ladder__step::before {
  content: '';
  position: absolute;
  left: -17px;
  top: 13px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--mdil-paper);
  border: 2px solid var(--mdil-brand);
  box-shadow: 0 0 0 2px var(--mdil-paper);
}
.mdil-ladder__step--win::before    { border-color: var(--mdil-win); }
.mdil-ladder__step--attn::before   { border-color: var(--mdil-attn); }
.mdil-ladder__step--block::before  { border-color: var(--mdil-block); }
.mdil-ladder__step--inactive::before {
  border-color: var(--mdil-line-2);
  background: var(--mdil-panel-2);
}
.mdil-ladder__step .mdil-ladder__note {
  display: inline;
  color: var(--mdil-muted-2);
  margin-left: 6px;
  font-size: 11px;
}
.mdil-ladder__step strong { color: var(--mdil-text); font-weight: 600; }

/* ============================================================
 * AUDIT ROW — drawer table row (mono, scannable)
 * ============================================================ */
.mdil-audit-table {
  width: 100%;
  font-family: var(--mdil-f-mono);
  font-size: 11.5px;
  border-collapse: separate;
  border-spacing: 0;
}
.mdil-audit-table thead th {
  position: sticky; top: 0;
  background: var(--mdil-panel-2);
  color: var(--mdil-muted-2);
  text-align: left;
  padding: 9px 14px;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--mdil-line);
}
.mdil-audit-table tbody td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--mdil-line);
  vertical-align: top;
  color: var(--mdil-text);
}
.mdil-audit-table tbody tr:hover td { background: var(--mdil-panel-2); }

/* ============================================================
 * MULTI-STEP STRIP — the always-visible pipeline ribbon
 * ============================================================ */
.mdil-stepstrip {
  background: var(--mdil-chrome-bg);
  color: var(--mdil-chrome-text);
  border-bottom: 1px solid var(--mdil-chrome-line);
}
.mdil-stepstrip__label {
  font-family: var(--mdil-f-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--mdil-chrome-dim);
}
.mdil-stepnode {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: var(--mdil-r-2);
  font-family: var(--mdil-f-mono);
  font-size: 11px;
  border: 1px solid transparent;
  color: var(--mdil-chrome-muted);
  background: rgba(255,255,255,0.03);
  cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.mdil-stepnode:hover {
  background: rgba(161, 0, 255, 0.10);
  color: var(--mdil-chrome-text);
  border-color: rgba(161, 0, 255, 0.30);
}
.mdil-stepnode--active {
  background: rgba(61, 220, 151, 0.10);
  border-color: rgba(61, 220, 151, 0.35);
  color: #3DDC97;
}
.mdil-stepnode--conceptual {
  opacity: 0.55;
  border-color: rgba(255,255,255,0.10);
}
.mdil-stepnode__dot {
  width: 6px; height: 6px;
  background: currentColor;
  border-radius: 50%;
}
.mdil-stepnode__hint {
  color: var(--mdil-chrome-dim);
  font-size: 10px;
  letter-spacing: 0.06em;
}
.mdil-stepnode__connector {
  color: var(--mdil-chrome-dim);
  opacity: 0.5;
  font-family: var(--mdil-f-mono);
  font-size: 12px;
  margin: 0 2px;
}

/* ============================================================
 * MODE TOGGLE — RAW UCA / Banking / EXTEND segmented switch
 * Restyle to look like a real system-level mode switch.
 * ============================================================ */
.mdil-mode-toggle {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  padding: 3px;
  background: var(--mdil-paper);
  border: 1px solid var(--mdil-line-2);
  border-radius: var(--mdil-r-3);
  box-shadow: var(--mdil-shadow-tile);
}
.mdil-mode-toggle__btn {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 7px 14px;
  background: transparent;
  border: 0;
  border-radius: var(--mdil-r-2);
  cursor: pointer;
  color: var(--mdil-muted);
  font-family: var(--mdil-f-sans);
  text-align: left;
  transition: background 120ms, color 120ms;
}
.mdil-mode-toggle__btn:hover { color: var(--mdil-text); background: var(--mdil-panel-2); }
.mdil-mode-toggle__btn--active {
  color: var(--mdil-text);
  background: var(--mdil-panel-3);
  box-shadow: inset 0 0 0 1px var(--mdil-line-2);
}
.mdil-mode-toggle__title {
  font-family: var(--mdil-f-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.2;
}
.mdil-mode-toggle__btn--active .mdil-mode-toggle__title { color: var(--mdil-brand-2); }
.mdil-mode-toggle__sub {
  font-family: var(--mdil-f-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mdil-dim);
}

/* ============================================================
 * RUN BUTTON — primary "Run reasoning" CTA
 * ============================================================ */
.mdil-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: var(--mdil-r-3);
  border: 1px solid var(--mdil-line-2);
  background: var(--mdil-paper);
  color: var(--mdil-text);
  font-family: var(--mdil-f-sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 120ms, border-color 120ms, transform 80ms;
}
.mdil-btn:hover { background: var(--mdil-panel-2); border-color: var(--mdil-line-3); }
.mdil-btn:active { transform: translateY(1px); }
.mdil-btn--primary {
  background: var(--mdil-text);
  color: var(--mdil-paper);
  border-color: var(--mdil-text);
  box-shadow: var(--mdil-shadow-tile);
}
.mdil-btn--primary:hover { background: #1E293B; border-color: #1E293B; }
.mdil-btn--brand {
  background: var(--mdil-brand);
  color: #fff;
  border-color: var(--mdil-brand);
}
.mdil-btn--brand:hover { background: var(--mdil-brand-2); border-color: var(--mdil-brand-2); }
.mdil-btn--stress {
  /* "Determinism proof / stress test" — Run 100× button */
  background: var(--mdil-paper);
  color: var(--mdil-text);
  border: 1px dashed var(--mdil-line-2);
  font-family: var(--mdil-f-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.mdil-btn--stress::before {
  content: '⊕';
  margin-right: 2px;
  color: var(--mdil-brand);
}
.mdil-btn--stress:hover {
  border-style: solid;
  border-color: var(--mdil-brand);
  color: var(--mdil-brand-2);
  background: var(--mdil-brand-glow);
}

/* ============================================================
 * EMPTY STATE — pre-run hero, inviting not sparse
 * ============================================================ */
.mdil-empty {
  border: 1px dashed var(--mdil-line-2);
  border-radius: var(--mdil-r-4);
  background:
    radial-gradient(600px 240px at 50% -80px, var(--mdil-brand-glow), transparent 70%),
    var(--mdil-paper);
  padding: 36px 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.mdil-empty__title {
  font-family: var(--mdil-f-display);
  font-weight: 700;
  font-size: 19px;
  color: var(--mdil-text);
  letter-spacing: -0.013em;
}
.mdil-empty__sub {
  color: var(--mdil-muted);
  font-size: 13.5px;
  line-height: 1.55;
  max-width: 660px;
}
.mdil-empty__sub strong { color: var(--mdil-text); font-weight: 600; }
.mdil-empty__hint-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 24px;
  font-size: 12.5px;
  color: var(--mdil-muted);
  line-height: 1.55;
}
.mdil-empty__hint-list strong {
  color: var(--mdil-text);
  font-weight: 600;
}
.mdil-empty__hint-list .mdil-empty__hint-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--mdil-brand-glow);
  color: var(--mdil-brand-2);
  font-family: var(--mdil-f-mono);
  font-size: 10px;
  font-weight: 700;
  margin-right: 6px;
  vertical-align: -2px;
}

/* ============================================================
 * SCROLLBAR — quiet, neutral
 * ============================================================ */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--mdil-line-2);
  border: 2px solid var(--mdil-bg);
  border-radius: 5px;
}
*::-webkit-scrollbar-thumb:hover { background: var(--mdil-line-3); }

/* ============================================================
 * UTILITY — used in spots Tailwind doesn't cover cleanly
 * ============================================================ */
.mdil-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--mdil-line) 20%, var(--mdil-line) 80%, transparent);
  margin: 16px 0;
}
.mdil-divider--brand {
  background: linear-gradient(90deg, transparent, var(--mdil-brand-dim) 20%, var(--mdil-brand-dim) 80%, transparent);
}

[x-cloak] { display: none !important; }
.htmx-swapping { opacity: 0.5; transition: opacity 120ms ease; }
.htmx-indicator { opacity: 0; transition: opacity 100ms; }
.htmx-request .htmx-indicator { opacity: 1; }

/* ============================================================
 * TAILWIND UTILITY FALLBACKS
 * If the Play CDN doesn't generate these from window.tailwind.config,
 * these explicit rules guarantee the classes always work.
 * ============================================================ */
.bg-mdil-bg         { background-color: var(--mdil-bg) !important; }
.bg-mdil-paper      { background-color: var(--mdil-paper) !important; }
.bg-mdil-panel-2    { background-color: var(--mdil-panel-2) !important; }
.bg-mdil-panel-3    { background-color: var(--mdil-panel-3) !important; }
.bg-mdil-chrome     { background-color: var(--mdil-chrome-bg) !important; }
.bg-mdil-brand      { background-color: var(--mdil-brand) !important; }
.bg-mdil-brand-glow { background-color: var(--mdil-brand-glow) !important; }
.bg-mdil-win-bg     { background-color: var(--mdil-win-bg) !important; }
.bg-mdil-attn-bg    { background-color: var(--mdil-attn-bg) !important; }
.bg-mdil-block-bg   { background-color: var(--mdil-block-bg) !important; }
.bg-mdil-info-bg    { background-color: var(--mdil-info-bg) !important; }
.bg-mdil-violet-bg  { background-color: var(--mdil-violet-bg) !important; }

.text-mdil-text     { color: var(--mdil-text) !important; }
.text-mdil-text-2   { color: var(--mdil-text-2) !important; }
.text-mdil-muted    { color: var(--mdil-muted) !important; }
.text-mdil-muted-2  { color: var(--mdil-muted-2) !important; }
.text-mdil-dim      { color: var(--mdil-dim) !important; }
.text-mdil-brand    { color: var(--mdil-brand) !important; }
.text-mdil-brand-2  { color: var(--mdil-brand-2) !important; }
.text-mdil-chrome-text  { color: var(--mdil-chrome-text) !important; }
.text-mdil-chrome-muted { color: var(--mdil-chrome-muted) !important; }
.text-mdil-chrome-dim   { color: var(--mdil-chrome-dim) !important; }
.text-mdil-win      { color: var(--mdil-win) !important; }
.text-mdil-win-text { color: var(--mdil-win-text) !important; }
.text-mdil-attn     { color: var(--mdil-attn) !important; }
.text-mdil-attn-text{ color: var(--mdil-attn-text) !important; }
.text-mdil-block    { color: var(--mdil-block) !important; }
.text-mdil-block-text { color: var(--mdil-block-text) !important; }
.text-mdil-info     { color: var(--mdil-info) !important; }
.text-mdil-violet   { color: var(--mdil-violet) !important; }

.border-mdil-line       { border-color: var(--mdil-line) !important; }
.border-mdil-line-2     { border-color: var(--mdil-line-2) !important; }
.border-mdil-line-3     { border-color: var(--mdil-line-3) !important; }
.border-mdil-brand      { border-color: var(--mdil-brand) !important; }
.border-mdil-brand-dim  { border-color: var(--mdil-brand-dim) !important; }
.border-mdil-win-border { border-color: var(--mdil-win-border) !important; }
.border-mdil-attn-border{ border-color: var(--mdil-attn-border) !important; }
.border-mdil-block-border{ border-color: var(--mdil-block-border) !important; }
.border-mdil-info-border{ border-color: var(--mdil-info-border) !important; }
.border-mdil-violet-border{ border-color: var(--mdil-violet-border) !important; }

.shadow-tile     { box-shadow: 0 1px 0 rgba(15,23,42,0.05), 0 1px 2px rgba(15,23,42,0.06) !important; }
.shadow-card     { box-shadow: 0 1px 0 rgba(15,23,42,0.05), 0 4px 12px rgba(15,23,42,0.10) !important; }
.shadow-headline { box-shadow: 0 1px 0 rgba(15,23,42,0.06), 0 8px 24px rgba(15,23,42,0.12) !important; }

/* ============================================================
 * MODE-TOGGLE PILLS — boost contrast on dark chrome
 * ============================================================ */
.mdil-mode-toggle__btn {
  color: var(--mdil-chrome-muted) !important;
  background: rgba(244,236,250,0.06);
  border: 1px solid rgba(180,159,199,0.20);
}
.mdil-mode-toggle__btn--active {
  background: var(--mdil-paper) !important;
  color: var(--mdil-brand-2) !important;
  border-color: var(--mdil-brand) !important;
  box-shadow: 0 0 0 2px rgba(161,0,255,0.22), 0 2px 6px rgba(15,23,42,0.18);
  font-weight: 700;
}

/* ============================================================
 * CHROME / STEPSTRIP seams — make the boundary visible
 * ============================================================ */
.mdil-chrome    { border-bottom: 1px solid rgba(161,0,255,0.22) !important; }
.mdil-stepstrip { border-bottom: 1px solid rgba(161,0,255,0.18) !important; }

/* ============================================================
 * AUDIT DRAWER — ensure solid opacity (was perceived see-through)
 * ============================================================ */
aside.fixed.bg-mdil-paper {
  background-color: var(--mdil-paper) !important;
  opacity: 1 !important;
}