/* ============================================================
   ROLLING SENTIMENT TERMINAL — Texas pro se docs
   Bloomberg-style: pure black, orange primary, monospace,
   dense panels, function-key bar, command line, ticker tape.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

:root {
  /* Bloomberg-ish palette */
  --bg:        #000000;
  --bg-panel:  #050402;
  --bg-panel-2: #0a0905;
  --bg-status: #001028;        /* the iconic blue status bar */
  --bg-sb-2:   #0b1e3a;

  --orange:    #ff7700;        /* primary Bloomberg orange */
  --orange-2:  #ffa040;
  --amber:     #ffb000;
  --orange-d:  #804000;
  --orange-x:  #4a2400;

  --white:     #f4f4ec;
  --grey:      #b8b8a8;
  --dim:       #7a6a4a;
  --faint:     #4a3e2a;
  --border:    #3a2a14;
  --border-b:  #5a3e1c;

  --up:    #29d660;
  --down:  #ff3548;
  --warn:  #ffd700;
  --link:  #00cfd6;

  --row-h: 22px;

  --mono: 'IBM Plex Mono', 'JetBrains Mono', 'SF Mono', 'Menlo', 'Consolas', monospace;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--orange);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.01em;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* CRT scanlines + vignette overlays */
body::before {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 9999;
  background: repeating-linear-gradient(0deg,
    rgba(255,119,0,0.020) 0px,
    rgba(255,119,0,0.020) 1px,
    transparent 1px, transparent 3px);
}
body::after {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 9998;
  background: radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,0.55) 100%);
}

::selection { background: var(--orange-x); color: var(--white); }

/* ============================================================
   🌴 MIAMI MODE — pink + electric blue on white
   Toggle via F-keys row "MIAMI" button. Stored in localStorage.
   ============================================================ */
body.miami {
  --bg:        #fffafd;
  --bg-panel:  #ffffff;
  --bg-panel-2:#fff0f8;
  --bg-status: #ff1493;          /* hot pink top bar */
  --bg-sb-2:   #d8f4ff;          /* electric-blue tint secondary */
  --bg-row-alt:#fff5fb;

  --orange:    #ff1493;          /* hot pink → primary */
  --orange-2:  #ff79b8;
  --amber:     #00b4ff;          /* electric blue → highlight */
  --orange-d:  #c71585;
  --orange-x:  #ffe0f0;

  --white:     #1a0a2e;          /* near-black readable text */
  --grey:      #4a3a5e;
  --dim:       #8a7aa0;
  --faint:     #d0c4dc;

  --border:    #ffb7d6;
  --border-b:  #ff79b8;
  --selection: #ffe0f0;

  --up:    #00b86b;
  --down:  #e60048;
  --warn:  #00b4ff;
  --link:  #00b4ff;
}
body.miami { color: var(--orange); }
body.miami::before {
  background: repeating-linear-gradient(
    0deg,
    rgba(255,20,147,0.04) 0px,
    rgba(255,20,147,0.04) 1px,
    transparent 1px, transparent 3px);
}
body.miami::after {
  background:
    radial-gradient(ellipse at top, rgba(255,20,147,0.08) 0%, transparent 60%),
    radial-gradient(ellipse at bottom, rgba(0,180,255,0.08) 0%, transparent 60%);
}
body.miami .statusbar { background: linear-gradient(90deg, #ff1493 0%, #b700ff 50%, #00b4ff 100%); color: #fff; }
body.miami .statusbar .sb-cell .val { color: #fff; }
body.miami .statusbar .sb-cell .sep { color: rgba(255,255,255,0.4); }
body.miami .statusbar .brand,
body.miami .statusbar .brand .logo { color: #fff; text-shadow: 0 0 6px rgba(255,255,255,0.6); }
body.miami .statusbar2 { background: var(--bg-sb-2); color: var(--grey); }
body.miami .statusbar2 .val { color: var(--orange); }
body.miami .panel-hdr { background: linear-gradient(180deg, #ffd6ec 0%, #fff 100%); }
body.miami .phdr-l { color: var(--orange-d); }
body.miami .fkeys { background: #fff0f8; }
body.miami .fk b { color: var(--orange); }
body.miami .fk:hover { background: var(--orange-x); color: var(--orange-d); }
body.miami .disclaimer { background: #fff0f8; color: var(--orange-d); }
body.miami .disclaimer .warn { color: var(--down); }
body.miami .ai-help-tile { background: var(--orange); color: #fff; }
body.miami .ai-help-tile:hover { background: var(--orange-2); }
body.miami .ai-help-tile.courts-tile { background: var(--amber); color: #fff; }
body.miami .ai-help-tile.courts-tile:hover { background: #4dc6ff; }
body.miami .ai-help-tile.records-tile { background: linear-gradient(135deg, #ff1493, #00b4ff); color: #fff; }
body.miami .ai-help-tile.records-tile:hover { filter: brightness(1.1); }
body.miami .grid { background: var(--border); }
body.miami .panel { background: #fff; }
body.miami .doc-header { background: #fff; }
body.miami .dh-name-text { color: #1a0a2e; }
body.miami .dh-slug { background: var(--orange-x); border-color: var(--orange); color: var(--orange-d); }
body.miami .prompt-panel textarea { background: #fff8fc; color: var(--white); }
body.miami .prompt-actions { background: #fff0f8; }
body.miami .output { color: var(--white); background: #fff; }
body.miami .output.streaming::after { color: var(--orange); }
body.miami .cmdline { background: #ffe6f4; color: var(--orange-d); }
body.miami .cmdline input { color: var(--white); }
body.miami .cmd-marker { color: var(--orange-d); }
body.miami .cmd-blink { background: var(--orange); }
body.miami .tape { background: #ffe6f4; }
body.miami .t-sym { color: var(--orange-d); }
body.miami .t-px  { color: var(--white); }
body.miami button { color: var(--orange-d); border-color: var(--orange-d); }
body.miami button:hover:not(:disabled) { background: var(--orange-x); color: var(--orange); border-color: var(--orange); }
body.miami button.primary { background: var(--orange); color: #fff; }
body.miami button.primary:hover:not(:disabled) { background: var(--orange-2); }
body.miami .cat-hdr { background: #fff0f8; color: var(--orange-d); }
body.miami .cat-hdr:hover { background: var(--orange-x); color: var(--orange); }
body.miami .cat-list li { color: var(--grey); }
body.miami .cat-list li:hover { background: var(--orange-x); color: var(--orange-d); }
body.miami .cat-list li.active { background: var(--orange); color: #fff; }
body.miami .ct-cat-hdr { background: #fff0f8; color: var(--orange-d); }
body.miami .ct-item { color: var(--grey); }
body.miami .ct-item:hover { background: var(--orange-x); color: var(--orange-d); }
body.miami .ct-item.active { background: var(--orange); color: #fff; }
body.miami .court-detail h2 { color: var(--orange); }
body.miami .court-detail dl dt { color: var(--orange-d); }
body.miami .court-detail dl dd { color: var(--white); }
body.miami .court-detail dl dd a { color: var(--amber); }
body.miami .court-detail dl dd a:hover { color: var(--orange); }
body.miami .ct-juris { background: var(--orange-x); border-color: var(--orange); color: var(--white); }
body.miami .tos-modal { background: rgba(255,250,253,0.94); }
body.miami .tos-box { background: #fff; border-color: var(--orange); }
body.miami .tos-hdr { background: linear-gradient(90deg, #ff1493 0%, #ff79b8 100%); color: #fff; }
body.miami .tos-title { color: #fff; }
body.miami .tos-body { color: var(--white); }
body.miami .tos-list strong { color: var(--orange); }
body.miami .tos-list em     { color: var(--amber); }
body.miami .fk.fk-miami { background: linear-gradient(90deg, #ff1493, #00b4ff); color: #fff; }
body.miami .fk.fk-miami b { color: #fff; }

/* Theme buttons keep their flag colors regardless of active theme */
.fk.fk-theme  { padding: 0 12px; color: #fff; }
.fk.fk-theme b { color: #fff; }
.fk.fk-theme:hover { filter: brightness(1.15); }
.fk.fk-miami    { background: linear-gradient(90deg, #ff1493, #00b4ff); }
.fk.fk-miami:hover    { background: linear-gradient(90deg, #ff1493, #00b4ff); }
.fk.fk-lonestar { background: linear-gradient(90deg, #BF0A30 50%, #002868 50%); }
.fk.fk-lonestar:hover { background: linear-gradient(90deg, #BF0A30 50%, #002868 50%); }
.fk.fk-matrix   { background: #000; color: #00ff41; border-right: 1px solid #00ff41; }
.fk.fk-matrix b { color: #00ff41; text-shadow: 0 0 4px #00ff41; }
.fk.fk-matrix:hover { background: #001a00; }
.fk.fk-western  { background: linear-gradient(180deg, #c47533 0%, #6b2415 100%); }
.fk.fk-western:hover  { background: linear-gradient(180deg, #c47533 0%, #6b2415 100%); }
.fk.fk-legalpad { background: #fff4a3; color: #1a3a8c; border-bottom: 2px solid #c41e3a; }
.fk.fk-legalpad b { color: #1a3a8c; }
.fk.fk-legalpad:hover { background: #ffec80; }
.fk.fk-oxford   { background: #5e1010; color: #f0e3c0; }
.fk.fk-oxford b { color: #b5985a; }
.fk.fk-oxford:hover   { background: #7a1818; }
.fk.fk-parchment { background: #e8d8b8; color: #2d1810; border: 1px solid #8b6f47; }
.fk.fk-parchment b { color: #5d3a1a; }
.fk.fk-parchment:hover { background: #f0e0c0; }
.fk.fk-chief    { background: #0a0a0a; color: #f0e8d0; border-top: 1px solid #c5a358; border-bottom: 1px solid #c5a358; }
.fk.fk-chief b  { color: #c5a358; }
.fk.fk-chief:hover    { background: #1a1410; }
/* Coloring Book button: white bg, thick black border, multi-color emoji */
.fk.fk-coloring { background: #fff; color: #000; border: 2px solid #000; }
.fk.fk-coloring b { color: #e63946; }
.fk.fk-coloring:hover { background: #fffdf0; }
/* New themes' buttons */
.fk.fk-blueprint  { background: #003566; color: #fff; }
.fk.fk-blueprint b { color: #ffd60a; }
.fk.fk-blueprint:hover { background: #00457f; }
.fk.fk-chalkboard { background: #1f3a2e; color: #f0f0e8; }
.fk.fk-chalkboard b { color: #ffec80; }
.fk.fk-chalkboard:hover { background: #2a4d3d; }
.fk.fk-classified { background: #4a4f2c; color: #f0e8c0; }
.fk.fk-classified b { color: #c41e3a; }
.fk.fk-classified:hover { background: #5a603a; }
.fk.fk-casino     { background: #0a4a2a; color: #d4af37; }
.fk.fk-casino b   { color: #f0e6c8; }
.fk.fk-casino:hover { background: #0e5836; }
.fk.fk-newspaper  { background: #f5efe2; color: #000; border: 1px solid #000; }
.fk.fk-newspaper b { color: #c41e3a; }
.fk.fk-newspaper:hover { background: #ffffff; }
.fk.fk-steampunk  { background: #3a2718; color: #b5985a; }
.fk.fk-steampunk b { color: #b87333; }
.fk.fk-steampunk:hover { background: #4a3220; }
.fk.fk-bauhaus    { background: #f5f1e6; color: #000; border-bottom: 3px solid #d62828; }
.fk.fk-bauhaus b  { color: #003049; }
.fk.fk-bauhaus:hover { background: #fcbf49; }
.fk.fk-weimar     { background: #4a0e1f; color: #d4af37; }
.fk.fk-weimar b   { color: #f0e6c8; }
.fk.fk-weimar:hover { background: #5e1828; }
.fk.fk-gameboy    { background: #c8c8c8; color: #1a1a1a; border: 1px solid #1a1a1a; }
.fk.fk-gameboy b  { color: #d62828; }
.fk.fk-gameboy:hover { background: #d8d8d8; }
.fk.fk-bbq        { background: linear-gradient(180deg, #b54822 0%, #6e2c10 100%); color: #fcd34d; }
.fk.fk-bbq b      { color: #fff; }
.fk.fk-bbq:hover  { filter: brightness(1.15); }
/* active theme button gets a subtle inset ring */
.fk.fk-theme.active { box-shadow: inset 0 0 0 2px #fff; }

/* ============================================================
   ⭐ LONE STAR THEME — Texas flag (red/white/navy on cream)
   ============================================================ */
body.lonestar {
  --bg:        #f4ecd8;
  --bg-panel:  #fff8e7;
  --bg-panel-2:#f0e6c8;
  --bg-status: #002868;
  --bg-sb-2:   #003580;
  --bg-row-alt:#fff5d8;

  --orange:    #002868;          /* navy primary */
  --orange-2:  #1a3d80;
  --amber:     #BF0A30;          /* TX flag red highlight */
  --orange-d:  #001844;
  --orange-x:  #fff0b8;

  --white:     #1a2238;
  --grey:      #4a5680;
  --dim:       #8898b0;
  --faint:     #c8d0e0;

  --border:    #b8b070;
  --border-b:  #BF0A30;
  --up:        #006633;
  --down:      #BF0A30;
  --warn:      #BF0A30;
  --link:      #BF0A30;
}
body.lonestar { color: var(--orange); }
body.lonestar::before {
  background: repeating-linear-gradient(
    0deg,
    rgba(0,40,104,0.04) 0px,
    rgba(0,40,104,0.04) 1px,
    transparent 1px, transparent 3px);
}
body.lonestar::after {
  background: radial-gradient(ellipse at center, transparent 65%, rgba(191,10,48,0.08) 100%);
}
body.lonestar .statusbar { background: linear-gradient(90deg, #BF0A30 0%, #BF0A30 33%, #fff 33%, #fff 66%, #002868 66%); color: #fff; }
body.lonestar .statusbar .sb-cell { color: #fff; }
body.lonestar .statusbar .brand { color: #fff; }
body.lonestar .statusbar .brand .logo { color: #ffd700; text-shadow: 0 0 8px rgba(255,215,0,0.8); }
body.lonestar .statusbar .sb-cell .val { color: #ffd700; }
body.lonestar .statusbar2 { background: var(--bg-status); color: #fff; }
body.lonestar .statusbar2 .val { color: #ffd700; }
body.lonestar .fkeys { background: #f8f0d8; border-bottom-color: #b8b070; }
body.lonestar .fk b { color: var(--amber); }
body.lonestar .disclaimer { background: #fff0b8; color: #6b1015; }
body.lonestar .panel-hdr { background: linear-gradient(180deg, #fff5b8 0%, #fff8e7 100%); }
body.lonestar .phdr-l { color: var(--amber); }
body.lonestar .panel { background: #fff8e7; }
body.lonestar .ai-help-tile { background: var(--amber); color: #fff; }       /* AI HELP = red */
body.lonestar .ai-help-tile.courts-tile { background: #fff; color: var(--orange); border: 2px solid var(--orange); } /* COURTS = white-with-navy */
body.lonestar .ai-help-tile.records-tile { background: var(--orange); color: #fff; } /* RECORDS = navy */
body.lonestar .output { background: #fff8e7; color: var(--white); }
body.lonestar .cmdline { background: var(--orange); color: #fff; }
body.lonestar .cmdline input { color: #ffd700; }
body.lonestar .cmd-marker { color: #ffd700; }
body.lonestar .cmd-blink { background: #ffd700; }
body.lonestar .tape { background: var(--orange); }
body.lonestar .t-sym { color: #ffd700; }
body.lonestar .t-px  { color: #fff; }
body.lonestar button { color: var(--orange); border-color: var(--orange); }
body.lonestar button.primary { background: var(--amber); color: #fff; border-color: var(--amber); }
body.lonestar .cat-hdr { background: #fff0b8; color: var(--amber); }
body.lonestar .cat-list li:hover { background: var(--orange-x); color: var(--amber); }
body.lonestar .cat-list li.active { background: var(--amber); color: #fff; }
body.lonestar .ct-cat-hdr { background: #fff0b8; color: var(--orange); }
body.lonestar .ct-item:hover { background: var(--orange-x); color: var(--orange); }
body.lonestar .ct-item.active { background: var(--orange); color: #ffd700; }
body.lonestar .court-detail h2 { color: var(--amber); }
body.lonestar .court-detail dl dd a { color: var(--amber); }

/* ============================================================
   💚 MATRIX THEME — phosphor green on pure black
   ============================================================ */
body.matrix {
  --bg:        #000000;
  --bg-panel:  #000000;
  --bg-panel-2:#001500;
  --bg-status: #001a00;
  --bg-sb-2:   #002800;
  --bg-row-alt:#001100;

  --orange:    #00ff41;          /* phosphor green primary */
  --orange-2:  #66ff88;
  --amber:     #88ffaa;
  --orange-d:  #008822;
  --orange-x:  #003311;

  --white:     #ccffcc;
  --grey:      #66cc66;
  --dim:       #338833;
  --faint:     #225522;

  --border:    #225522;
  --border-b:  #339933;
  --up:        #00ff88;
  --down:      #ff4444;
  --warn:      #ffff00;
  --link:      #66ff88;
}
body.matrix { color: var(--orange); }
body.matrix::before {
  background: repeating-linear-gradient(
    0deg,
    rgba(0,255,65,0.04) 0px,
    rgba(0,255,65,0.04) 1px,
    transparent 1px, transparent 3px);
}
body.matrix::after {
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.7) 100%);
}
body.matrix .statusbar { background: var(--bg-status); color: var(--orange); border-bottom-color: var(--orange-d); }
body.matrix .statusbar .sb-cell .val { color: #88ffaa; text-shadow: 0 0 4px #00ff41; }
body.matrix .statusbar .brand .logo { color: var(--orange); text-shadow: 0 0 8px rgba(0,255,65,0.7); }
body.matrix .statusbar2 { background: var(--bg-sb-2); }
body.matrix .ai-help-tile { background: var(--orange); color: #000; }
body.matrix .ai-help-tile.courts-tile { background: var(--amber); color: #000; }
body.matrix .ai-help-tile.records-tile { background: var(--orange-2); color: #000; }
body.matrix .panel-hdr { background: linear-gradient(180deg, #002500 0%, #000 100%); }
body.matrix .panel { background: #000; }
body.matrix .output { background: #000; color: var(--white); }
body.matrix .output.streaming::after { color: var(--orange); text-shadow: 0 0 6px #00ff41; }
body.matrix .cmdline { background: #001100; }
body.matrix .cmdline input { color: var(--orange); text-shadow: 0 0 3px #00ff41; }
body.matrix .cmd-marker { color: var(--orange); text-shadow: 0 0 4px #00ff41; }
body.matrix .cmd-blink { background: var(--orange); box-shadow: 0 0 6px #00ff41; }
body.matrix .tape { background: #001100; }
body.matrix .t-sym { color: var(--orange); text-shadow: 0 0 3px #00ff41; }
body.matrix .t-px  { color: var(--white); }
body.matrix .led.pulse { background: var(--orange); box-shadow: 0 0 8px var(--orange); }
body.matrix button.primary { background: var(--orange); color: #000; box-shadow: 0 0 8px rgba(0,255,65,0.4); }
body.matrix .cat-list li.active { background: var(--orange); color: #000; }
body.matrix .ct-item.active { background: var(--orange); color: #000; }
body.matrix .court-detail h2 { color: var(--orange); text-shadow: 0 0 6px #00ff41; }

/* ============================================================
   🤠 WESTERN THEME — leather + parchment + brick + brass
   ============================================================ */
body.western {
  --bg:        #f0e3c4;
  --bg-panel:  #f8efd8;
  --bg-panel-2:#e8d8a8;
  --bg-status: #5d3a1a;
  --bg-sb-2:   #6d4a2a;
  --bg-row-alt:#f0e0a8;

  --orange:    #a83227;          /* brick red primary */
  --orange-2:  #c4523a;
  --amber:     #d4a017;          /* mustard / brass highlight */
  --orange-d:  #6b2415;
  --orange-x:  #f7e0a8;

  --white:     #2a1a0a;
  --grey:      #5d3a1a;
  --dim:       #8a6a3a;
  --faint:     #b8a878;

  --border:    #a89860;
  --border-b:  #6b2415;
  --up:        #5a8030;
  --down:      #a83227;
  --warn:      #d4a017;
  --link:      #6b2415;
}
body.western { color: var(--orange); }
body.western::before {
  background:
    repeating-linear-gradient(
      0deg,
      rgba(107,36,21,0.04) 0px,
      rgba(107,36,21,0.04) 1px,
      transparent 1px, transparent 3px),
    /* faint vertical wood grain */
    repeating-linear-gradient(
      90deg,
      rgba(168,50,39,0.02) 0px,
      rgba(168,50,39,0.02) 80px,
      transparent 80px, transparent 160px);
}
body.western::after {
  background: radial-gradient(ellipse at center, transparent 55%, rgba(45,20,8,0.25) 100%);
}
body.western .statusbar { background: linear-gradient(180deg, #6b2415 0%, #4a1a0e 100%); color: #f4e8c0; }
body.western .statusbar .brand .logo { color: var(--amber); text-shadow: 0 0 8px rgba(212,160,23,0.8); }
body.western .statusbar .sb-cell .val { color: var(--amber); }
body.western .statusbar2 { background: var(--bg-sb-2); color: #e8d8a8; }
body.western .statusbar2 .val { color: var(--amber); }
body.western .fkeys { background: #d8c890; border-bottom-color: #8a6a3a; }
body.western .fk { color: #5d3a1a; }
body.western .fk b { color: var(--orange-d); }
body.western .fk:hover { background: var(--orange-x); color: var(--orange-d); }
body.western .disclaimer { background: #d8c890; color: var(--orange-d); }
body.western .panel-hdr { background: linear-gradient(180deg, #d4a017 0%, #f8efd8 100%); }
body.western .phdr-l { color: var(--orange-d); }
body.western .panel { background: #f8efd8; }
body.western .ai-help-tile { background: var(--orange); color: #fff8e0; }
body.western .ai-help-tile.courts-tile { background: var(--amber); color: var(--orange-d); }
body.western .ai-help-tile.records-tile { background: var(--orange-d); color: var(--amber); }
body.western .output { background: #fff8e0; color: var(--white); }
body.western .cmdline { background: #4a1a0e; color: var(--amber); }
body.western .cmdline input { color: var(--amber); }
body.western .cmd-marker { color: var(--amber); }
body.western .cmd-blink { background: var(--amber); }
body.western .tape { background: #4a1a0e; }
body.western .t-sym { color: var(--amber); }
body.western .t-px  { color: #f4e8c0; }
body.western button { color: var(--orange-d); border-color: var(--orange-d); }
body.western button.primary { background: var(--orange); color: #fff8e0; border-color: var(--orange); }
body.western .cat-hdr { background: #e8d090; color: var(--orange-d); }
body.western .cat-list li:hover { background: var(--orange-x); color: var(--orange-d); }
body.western .cat-list li.active { background: var(--orange); color: #fff8e0; }
body.western .ct-cat-hdr { background: #e8d090; color: var(--orange-d); }
body.western .ct-item:hover { background: var(--orange-x); color: var(--orange-d); }
body.western .ct-item.active { background: var(--orange); color: #fff8e0; }
body.western .court-detail h2 { color: var(--orange-d); }
body.western .court-detail dl dd a { color: var(--orange); }

/* ============================================================
   📒 LEGAL PAD THEME — yellow pad + blue ink + red rules
   ============================================================ */
body.legalpad {
  --bg:        #fff4a3;
  --bg-panel:  #fff7b0;
  --bg-panel-2:#fff0a0;
  --bg-status: #1a3a8c;
  --bg-sb-2:   #2a4a9e;
  --bg-row-alt:#fff099;

  --orange:    #1a3a8c;          /* Bic-pen blue primary */
  --orange-2:  #2d52a8;
  --amber:     #c41e3a;          /* red double-rule highlight */
  --orange-d:  #0d2356;
  --orange-x:  #fffdd0;

  --white:     #0d2356;
  --grey:      #4a5680;
  --dim:       #8090a8;
  --faint:     #c8c890;

  --border:    #c41e3a;          /* red horizontal rules */
  --border-b:  #1a3a8c;
  --up:        #006633;
  --down:      #c41e3a;
  --warn:      #c41e3a;
  --link:      #1a3a8c;
}
body.legalpad { color: var(--orange); }
body.legalpad::before {
  /* horizontal rules every 24px like a real legal pad */
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0px,
      transparent 23px,
      rgba(196,30,58,0.18) 23px,
      rgba(196,30,58,0.18) 24px),
    /* red double rule on the left margin */
    linear-gradient(90deg,
      transparent 0px, transparent 36px,
      rgba(196,30,58,0.45) 36px, rgba(196,30,58,0.45) 37px,
      transparent 37px, transparent 40px,
      rgba(196,30,58,0.45) 40px, rgba(196,30,58,0.45) 41px,
      transparent 41px);
}
body.legalpad::after { background: none; }
body.legalpad .statusbar { background: var(--bg-status); color: #ffec80; border-bottom-color: #c41e3a; }
body.legalpad .statusbar .brand .logo { color: #ffec80; }
body.legalpad .statusbar .sb-cell .val { color: #ffec80; }
body.legalpad .statusbar2 { background: var(--bg-sb-2); color: #fff4a3; }
body.legalpad .statusbar2 .val { color: #ffec80; }
body.legalpad .fkeys { background: #fff099; border-bottom: 2px solid #c41e3a; }
body.legalpad .fk b { color: #c41e3a; }
body.legalpad .disclaimer { background: #ffe680; color: #c41e3a; border-bottom: 2px solid #c41e3a; }
body.legalpad .panel-hdr { background: linear-gradient(180deg, #ffe680 0%, #fff7b0 100%); border-bottom: 2px solid #c41e3a; }
body.legalpad .phdr-l { color: #c41e3a; }
body.legalpad .panel { background: #fff7b0; }
body.legalpad .ai-help-tile { background: #c41e3a; color: #fff4a3; }
body.legalpad .ai-help-tile.courts-tile { background: var(--orange); color: #fff4a3; }
body.legalpad .ai-help-tile.records-tile { background: #006633; color: #fff4a3; }
body.legalpad .output { background: #fff7b0; color: var(--white); }
body.legalpad .cmdline { background: var(--orange); color: #ffec80; border-top: 2px solid #c41e3a; }
body.legalpad .cmdline input { color: #ffec80; }
body.legalpad .cmd-marker { color: #ffec80; }
body.legalpad .cmd-blink { background: #ffec80; }
body.legalpad .tape { background: var(--orange); }
body.legalpad .t-sym { color: #ffec80; }
body.legalpad .t-px  { color: #fff4a3; }
body.legalpad button.primary { background: var(--orange); color: #ffec80; border-color: var(--orange); }
body.legalpad .cat-hdr { background: #ffe680; color: #c41e3a; }
body.legalpad .cat-list li.active { background: var(--orange); color: #ffec80; }
body.legalpad .ct-cat-hdr { background: #ffe680; color: #c41e3a; }
body.legalpad .ct-item.active { background: var(--orange); color: #ffec80; }
body.legalpad .court-detail h2 { color: #c41e3a; }
body.legalpad .court-detail dl dd a { color: var(--orange); }

/* ============================================================
   📚 OXFORD THEME — oxblood + ivory + brass + dark wood
   ============================================================ */
body.oxford {
  --bg:        #f5efe0;
  --bg-panel:  #faf3e2;
  --bg-panel-2:#ede4ce;
  --bg-status: #5e1010;
  --bg-sb-2:   #3d1f0f;
  --bg-row-alt:#f0e6cc;

  --orange:    #5e1010;          /* oxblood primary */
  --orange-2:  #7a1c1c;
  --amber:     #b5985a;          /* brass highlight */
  --orange-d:  #3d0a0a;
  --orange-x:  #f0e0d0;

  --white:     #2a1a0e;
  --grey:      #5a4a3a;
  --dim:       #8a7a6a;
  --faint:     #beb2a0;

  --border:    #8b6f47;
  --border-b:  #5e1010;
  --up:        #3a6b2e;
  --down:      #5e1010;
  --warn:      #b5985a;
  --link:      #5e1010;
}
body.oxford { color: var(--orange); }
body.oxford::before {
  background: repeating-linear-gradient(
    0deg,
    rgba(94,16,16,0.025) 0px,
    rgba(94,16,16,0.025) 1px,
    transparent 1px, transparent 4px);
}
body.oxford::after {
  background: radial-gradient(ellipse at center, transparent 60%, rgba(61,15,15,0.18) 100%);
}
body.oxford .statusbar { background: linear-gradient(180deg, #5e1010 0%, #3d0a0a 100%); color: var(--amber); border-bottom: 1px solid var(--amber); }
body.oxford .statusbar .brand .logo { color: var(--amber); text-shadow: 0 0 6px rgba(181,152,90,0.8); }
body.oxford .statusbar .sb-cell .val { color: var(--amber); }
body.oxford .statusbar2 { background: var(--bg-sb-2); color: #d8c898; }
body.oxford .statusbar2 .val { color: var(--amber); }
body.oxford .fkeys { background: #ede4ce; border-bottom-color: #8b6f47; }
body.oxford .fk { color: var(--orange-d); }
body.oxford .fk b { color: var(--orange); }
body.oxford .fk:hover { background: var(--orange-x); }
body.oxford .disclaimer { background: #f0e0d0; color: var(--orange); }
body.oxford .panel-hdr { background: linear-gradient(180deg, #c4a878 0%, #faf3e2 100%); border-bottom: 1px solid var(--amber); }
body.oxford .phdr-l { color: var(--orange-d); }
body.oxford .panel { background: #faf3e2; }
body.oxford .ai-help-tile { background: var(--orange); color: var(--amber); }
body.oxford .ai-help-tile.courts-tile { background: var(--amber); color: var(--orange-d); }
body.oxford .ai-help-tile.records-tile { background: var(--orange-d); color: var(--amber); }
body.oxford .output { background: #faf3e2; color: var(--white); }
body.oxford .cmdline { background: var(--orange-d); color: var(--amber); }
body.oxford .cmdline input { color: var(--amber); }
body.oxford .cmd-marker { color: var(--amber); }
body.oxford .cmd-blink { background: var(--amber); }
body.oxford .tape { background: var(--orange-d); }
body.oxford .t-sym { color: var(--amber); }
body.oxford .t-px  { color: #f5efe0; }
body.oxford button.primary { background: var(--orange); color: var(--amber); border-color: var(--orange); }
body.oxford .cat-hdr { background: #ede4ce; color: var(--orange-d); }
body.oxford .cat-list li.active { background: var(--orange); color: var(--amber); }
body.oxford .ct-cat-hdr { background: #ede4ce; color: var(--orange-d); }
body.oxford .ct-item.active { background: var(--orange); color: var(--amber); }
body.oxford .court-detail h2 { color: var(--orange-d); }
body.oxford .court-detail dl dd a { color: var(--orange); }

/* ============================================================
   📜 PARCHMENT THEME — aged cream + iron-gall sepia
   ============================================================ */
body.parchment {
  --bg:        #ede0c0;
  --bg-panel:  #f0e3c0;
  --bg-panel-2:#e0d2a0;
  --bg-status: #3d2817;
  --bg-sb-2:   #4d3520;
  --bg-row-alt:#e8daa8;

  --orange:    #3d2817;          /* iron-gall sepia (almost black-brown) */
  --orange-2:  #5d3a1a;
  --amber:     #8b3a2f;          /* faded wax-seal red highlight */
  --orange-d:  #2a1810;
  --orange-x:  #e8d8b8;

  --white:     #2a1810;
  --grey:      #5d4730;
  --dim:       #8a7050;
  --faint:     #c0b088;

  --border:    #a89460;
  --border-b:  #5d3a1a;
  --up:        #4a6020;
  --down:      #8b3a2f;
  --warn:      #8b3a2f;
  --link:      #5d3a1a;
}
body.parchment { color: var(--orange); }
body.parchment::before {
  background:
    repeating-linear-gradient(
      0deg,
      rgba(45,24,16,0.025) 0px,
      rgba(45,24,16,0.025) 1px,
      transparent 1px, transparent 4px),
    /* faint speckled "age" texture */
    radial-gradient(circle at 20% 30%, rgba(139,58,47,0.05) 0px, transparent 12px),
    radial-gradient(circle at 70% 60%, rgba(93,58,26,0.04) 0px, transparent 18px),
    radial-gradient(circle at 45% 80%, rgba(139,58,47,0.03) 0px, transparent 20px);
}
body.parchment::after {
  /* warm age vignette darkening at edges */
  background: radial-gradient(ellipse at center, transparent 50%, rgba(80,50,20,0.28) 100%);
}
body.parchment .statusbar { background: linear-gradient(180deg, #3d2817 0%, #2a1810 100%); color: #d8c890; border-bottom: 1px solid #8b6f47; }
body.parchment .statusbar .brand .logo { color: #d8c890; }
body.parchment .statusbar .sb-cell .val { color: #d8c890; }
body.parchment .statusbar2 { background: var(--bg-sb-2); color: #c8b890; }
body.parchment .statusbar2 .val { color: #d8c890; }
body.parchment .fkeys { background: #d8c890; border-bottom-color: #8b6f47; }
body.parchment .fk { color: var(--orange); }
body.parchment .fk b { color: var(--amber); }
body.parchment .disclaimer { background: #d8c890; color: var(--amber); }
body.parchment .panel-hdr { background: linear-gradient(180deg, #c8b078 0%, #f0e3c0 100%); }
body.parchment .phdr-l { color: var(--orange-d); }
body.parchment .panel { background: #f0e3c0; }
body.parchment .ai-help-tile { background: var(--orange); color: #f0e3c0; }
body.parchment .ai-help-tile.courts-tile { background: var(--amber); color: #f0e3c0; }
body.parchment .ai-help-tile.records-tile { background: #5d3a1a; color: #d8c890; }
body.parchment .output { background: #f0e3c0; color: var(--white); }
body.parchment .cmdline { background: var(--orange-d); color: #d8c890; }
body.parchment .cmdline input { color: #d8c890; }
body.parchment .cmd-marker { color: var(--amber); }
body.parchment .cmd-blink { background: var(--amber); }
body.parchment .tape { background: var(--orange-d); }
body.parchment .t-sym { color: var(--amber); }
body.parchment .t-px  { color: #d8c890; }
body.parchment button.primary { background: var(--amber); color: #f0e3c0; border-color: var(--amber); }
body.parchment .cat-hdr { background: #d8c890; color: var(--orange-d); }
body.parchment .cat-list li.active { background: var(--orange); color: #d8c890; }
body.parchment .ct-cat-hdr { background: #d8c890; color: var(--orange-d); }
body.parchment .ct-item.active { background: var(--orange); color: #d8c890; }
body.parchment .court-detail h2 { color: var(--amber); }
body.parchment .court-detail dl dd a { color: var(--amber); }

/* ============================================================
   ⚖️ CHIEF THEME — black robes + cream + brushed gold + slate red
   ============================================================ */
body.chief {
  --bg:        #0a0a0a;
  --bg-panel:  #121010;
  --bg-panel-2:#1a1612;
  --bg-status: #000000;
  --bg-sb-2:   #14100c;
  --bg-row-alt:#15110d;

  --orange:    #c5a358;          /* brushed gold primary */
  --orange-2:  #d4b56a;
  --amber:     #f0e8d0;          /* cream/ivory highlight */
  --orange-d:  #8b7333;
  --orange-x:  #2d2418;

  --white:     #f0e8d0;          /* cream text */
  --grey:      #b8a878;
  --dim:       #6e603e;
  --faint:     #4a3e25;

  --border:    #4a3e25;
  --border-b:  #c5a358;
  --up:        #6b8a3a;
  --down:      #8b3a3a;          /* slate red */
  --warn:      #c5a358;
  --link:      #c5a358;
}
body.chief { color: var(--orange); }
body.chief::before {
  background: repeating-linear-gradient(
    0deg,
    rgba(197,163,88,0.025) 0px,
    rgba(197,163,88,0.025) 1px,
    transparent 1px, transparent 4px);
}
body.chief::after {
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.55) 100%);
}
body.chief .statusbar { background: #000; color: var(--orange); border-bottom: 1px solid var(--orange); }
body.chief .statusbar .brand .logo { color: var(--orange); text-shadow: 0 0 6px rgba(197,163,88,0.7); }
body.chief .statusbar .sb-cell .val { color: var(--amber); }
body.chief .statusbar2 { background: var(--bg-sb-2); color: var(--grey); border-bottom: 1px solid var(--border); }
body.chief .statusbar2 .val { color: var(--orange); }
body.chief .fkeys { background: #14100c; border-bottom-color: var(--orange-d); }
body.chief .fk b { color: var(--orange); }
body.chief .disclaimer { background: #1a140c; color: var(--orange-2); border-bottom: 1px solid var(--orange-d); }
body.chief .panel-hdr { background: linear-gradient(180deg, #1f1810 0%, #0a0808 100%); border-bottom: 1px solid var(--orange-d); }
body.chief .phdr-l { color: var(--orange); }
body.chief .panel { background: var(--bg-panel); }
body.chief .ai-help-tile { background: var(--orange); color: #000; }
body.chief .ai-help-tile.courts-tile { background: #8b3a3a; color: var(--amber); }   /* slate red */
body.chief .ai-help-tile.records-tile { background: #000; color: var(--orange); border: 2px solid var(--orange); }
body.chief .output { background: var(--bg-panel); color: var(--white); }
body.chief .cmdline { background: #000; color: var(--orange); border-top: 1px solid var(--orange-d); }
body.chief .cmdline input { color: var(--amber); }
body.chief .cmd-marker { color: var(--orange); }
body.chief .cmd-blink { background: var(--orange); }
body.chief .tape { background: #000; border-top: 1px solid var(--orange-d); }
body.chief .t-sym { color: var(--orange); }
body.chief .t-px  { color: var(--amber); }
body.chief button.primary { background: var(--orange); color: #000; border-color: var(--orange); }
body.chief .cat-hdr { background: #14100c; color: var(--orange); }
body.chief .cat-list li.active { background: var(--orange); color: #000; }
body.chief .ct-cat-hdr { background: #14100c; color: var(--orange); }
body.chief .ct-item.active { background: var(--orange); color: #000; }
body.chief .court-detail h2 { color: var(--orange); }
body.chief .court-detail dl dd a { color: var(--amber); }
body.chief .court-detail .ct-juris { background: rgba(197,163,88,0.08); border-left: 2px solid var(--orange); }

/* ============================================================
   🎨 COLORING BOOK THEME — white page + thick black outlines + crayon tiles
   Crayon palette:
     Red:    #e63946   Yellow: #ffd23f   Blue:   #06aed5
     Green:  #67c23a   Purple: #b47aea   Pink:   #ff6fab
     Orange: #ff8d42
   ============================================================ */
body.coloring {
  --bg:        #ffffff;
  --bg-panel:  #ffffff;
  --bg-panel-2:#fafafa;
  --bg-status: #ffd23f;          /* bright crayon yellow status bar */
  --bg-sb-2:   #fff7d0;
  --bg-row-alt:#f8f8f8;

  --orange:    #000000;          /* bold BLACK primary (the outline) */
  --orange-2:  #2a2a2a;
  --amber:     #e63946;          /* crayon red highlight */
  --orange-d:  #444444;
  --orange-x:  #f5f5f5;

  --white:     #000000;          /* deep black text on white */
  --grey:      #2a2a2a;
  --dim:       #6a6a6a;
  --faint:     #b0b0b0;

  --border:    #000000;          /* THICK black borders */
  --border-b:  #000000;
  --up:        #67c23a;          /* crayon green */
  --down:      #e63946;          /* crayon red */
  --warn:      #ff8d42;          /* crayon orange */
  --link:      #06aed5;          /* crayon blue */
}
body.coloring { color: var(--orange); }
body.coloring::before {
  /* extremely faint paper texture — almost invisible */
  background:
    radial-gradient(circle at 25% 35%, rgba(0,0,0,0.012) 0px, transparent 8px),
    radial-gradient(circle at 75% 65%, rgba(0,0,0,0.012) 0px, transparent 12px),
    radial-gradient(circle at 50% 80%, rgba(0,0,0,0.012) 0px, transparent 10px);
}
body.coloring::after { background: none; }

/* Status bar: bright yellow with thick black bottom rule */
body.coloring .statusbar {
  background: var(--bg-status);
  color: #000;
  border-bottom: 3px solid #000;
}
body.coloring .statusbar .sb-cell { color: #000; border-right: 1px dashed rgba(0,0,0,0.25); }
body.coloring .statusbar .brand .logo { color: #e63946; text-shadow: none; }
body.coloring .statusbar .brand { color: #000; }
body.coloring .statusbar .sb-cell .val { color: #000; }
body.coloring .statusbar .sb-cell .sep { color: rgba(0,0,0,0.3); }
body.coloring .led { border: 2px solid #000; box-shadow: none; }

/* Secondary status: blue stripe */
body.coloring .statusbar2 {
  background: #06aed5;
  color: #000;
  border-bottom: 2px solid #000;
}
body.coloring .statusbar2 .val { color: #000; }
body.coloring .statusbar2 .dim { color: rgba(0,0,0,0.55); }
body.coloring .statusbar2 .sb2-cell { border-right: 1px dashed rgba(0,0,0,0.3); }

/* F-keys row: white with bold dashed dividers */
body.coloring .fkeys { background: #fff; border-bottom: 2px solid #000; }
body.coloring .fk { color: #000; border-right: 2px dashed rgba(0,0,0,0.2); }
body.coloring .fk b { color: #e63946; }
body.coloring .fk:hover { background: #ffd23f; }

/* Disclaimer: pink stripe */
body.coloring .disclaimer {
  background: #ffe0ec;
  color: #000;
  border-bottom: 2px solid #000;
}
body.coloring .disclaimer .warn { color: #e63946; }

/* Panels: white with thick black outlines */
body.coloring .grid { background: #000; gap: 2px; }   /* "ink" between panels */
body.coloring .panel { background: #fff; }
body.coloring .panel-hdr {
  background: #fff;
  border-bottom: 2px solid #000;
}
body.coloring .phdr-l { color: #000; }
body.coloring .phdr-r { color: #444; }

/* Three sidebar tiles get distinct crayon colors */
body.coloring .ai-help-tile {
  background: #e63946;             /* crayon RED */
  color: #fff;
  border-top: 2px solid #000;
  border-bottom: 3px solid #000;
}
body.coloring .ai-help-tile:hover { background: #d12d3a; }
body.coloring .ai-help-tile.courts-tile {
  background: #06aed5;             /* crayon BLUE */
  color: #fff;
}
body.coloring .ai-help-tile.courts-tile:hover { background: #0297bb; }
body.coloring .ai-help-tile.records-tile {
  background: #67c23a;             /* crayon GREEN */
  color: #fff;
}
body.coloring .ai-help-tile.records-tile:hover { background: #56ad2c; }
body.coloring .ai-help-tile .tile-icon { border-color: #000; color: #000; background: #fff; }

/* Search box */
body.coloring .search-box { background: #fff7d0; border-bottom: 2px solid #000; }
body.coloring .search-box input { color: #000; background: transparent; }
body.coloring .search-box .prompt-marker { color: #e63946; }

/* Doc nav */
body.coloring .cat-hdr { background: #fff; color: #000; border-bottom: 1px dashed #000; }
body.coloring .cat-hdr:hover { background: #ffd23f; }
body.coloring .cat-list li { color: #2a2a2a; border-bottom: 1px dashed #d0d0d0; }
body.coloring .cat-list li:hover { background: #fff7d0; color: #000; }
body.coloring .cat-list li.active { background: #ff8d42; color: #fff; border-left: 3px solid #000; }

/* Courts/counties list */
body.coloring .ct-cat-hdr { background: #fff; color: #000; border-bottom: 1px dashed #000; }
body.coloring .ct-item { color: #2a2a2a; border-bottom: 1px dashed #d0d0d0; }
body.coloring .ct-item:hover { background: #fff7d0; color: #000; }
body.coloring .ct-item.active { background: #b47aea; color: #fff; border-left: 3px solid #000; }   /* crayon PURPLE */

/* Doc header */
body.coloring .doc-header { background: #fff; }
body.coloring .dh-name-text { color: #000; }
body.coloring .dh-slug { background: #ffd23f; color: #000; border: 2px solid #000; }
body.coloring .dh-cite { color: #444; }
body.coloring .dh-desc { color: #2a2a2a; }

/* Prompt + output panels */
body.coloring .prompt-panel textarea { background: #fff; color: #000; border-top: 1px dashed #000; }
body.coloring .prompt-actions { background: #fff7d0; border-top: 2px solid #000; }
body.coloring .output-meta { background: #fafafa; border-bottom: 1px dashed #000; color: #444; }
body.coloring .output { background: #fff; color: #000; }
body.coloring .output .placeholder div { color: #000; }
body.coloring .output .placeholder div.dim { color: #777; }
body.coloring .output.streaming::after { color: #e63946; }

/* Buttons: white with thick black outline, color on primary */
body.coloring button {
  background: #fff;
  color: #000;
  border: 2px solid #000;
  font-weight: 700;
}
body.coloring button:hover:not(:disabled) { background: #ffd23f; color: #000; border-color: #000; }
body.coloring button.primary { background: #e63946; color: #fff; border-color: #000; }
body.coloring button.primary:hover:not(:disabled) { background: #c12030; }
body.coloring button:disabled { color: #aaa; border-color: #ccc; background: #f8f8f8; }

/* Command line */
body.coloring .cmdline {
  background: #ffd23f;
  color: #000;
  border-top: 2px solid #000;
  border-bottom: 2px solid #000;
}
body.coloring .cmdline input { color: #000; }
body.coloring .cmd-marker { color: #e63946; }
body.coloring .cmd-blink { background: #e63946; }

/* Ticker tape: pink */
body.coloring .tape { background: #ff6fab; color: #000; border-top: 2px solid #000; }
body.coloring .t-sym { color: #fff; text-shadow: 1px 1px 0 #000; }
body.coloring .t-px  { color: #000; }
body.coloring .t-sep { color: rgba(0,0,0,0.4); }

/* Court / county detail */
body.coloring .court-detail h2 { color: #000; }
body.coloring .court-detail .ct-type { color: #06aed5; }
body.coloring .court-detail dl dt { color: #444; }
body.coloring .court-detail dl dd { color: #000; }
body.coloring .court-detail dl dd a { color: #06aed5; text-decoration: underline; text-decoration-thickness: 2px; }
body.coloring .court-detail dl dd a:hover { color: #e63946; }
body.coloring .court-detail .ct-juris { background: #fff7d0; border-left: 3px solid #000; color: #000; }
body.coloring .court-detail .ct-counties { color: #2a2a2a; }

/* TOS modal */
body.coloring .tos-modal { background: rgba(255,255,255,0.95); }
body.coloring .tos-box { background: #fff; border: 3px solid #000; box-shadow: 6px 6px 0 #000; }
body.coloring .tos-hdr { background: #ffd23f; color: #000; border-bottom: 2px solid #000; }
body.coloring .tos-title { color: #000; }
body.coloring .tos-body { color: #000; }
body.coloring .tos-banner { background: #ffe0ec; border: 2px solid #e63946; color: #e63946; }
body.coloring .tos-list strong { color: #e63946; }
body.coloring .tos-list em     { color: #06aed5; text-decoration: underline; }
body.coloring .tos-actions { background: #fff7d0; border-top: 2px solid #000; }

/* ----- coloring book art layer (hidden by default) ----- */
.coloring-art { display: none; }
body.coloring .coloring-art {
  display: block;
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9000;
  overflow: hidden;
}
/* All art elements: positioned absolutely in the viewport, low opacity */
.coloring-art > svg {
  position: absolute;
  pointer-events: none;
  filter: drop-shadow(0 0 0 transparent);
}
/* In coloring mode the panels are slightly transparent so art bleeds through */
body.coloring .panel,
body.coloring .doc-header,
body.coloring .output {
  background: rgba(255, 255, 255, 0.92);
}
/* Dragon — bottom-right corner, biggest piece */
.coloring-art .ca-dragon {
  bottom: 60px;
  right: 8px;
  width: 280px;
  opacity: 0.34;
  transform: rotate(-2deg);
}
/* Stick figure ("ME") — bottom-left */
.coloring-art .ca-stick {
  bottom: 60px;
  left: 12px;
  width: 90px;
  opacity: 0.45;
  transform: rotate(-4deg);
}
/* Sun with face — top-right, behind status bars */
.coloring-art .ca-sun {
  top: 84px;
  right: 28vw;
  width: 86px;
  opacity: 0.42;
  transform: rotate(8deg);
}
/* Cloud — top-left area */
.coloring-art .ca-cloud {
  top: 130px;
  left: 38vw;
  width: 130px;
  opacity: 0.38;
  transform: rotate(-3deg);
}
/* Tiny crooked house */
.coloring-art .ca-house {
  bottom: 100px;
  left: 22vw;
  width: 100px;
  opacity: 0.32;
  transform: rotate(2deg);
}
/* Heart — somewhere fun */
.coloring-art .ca-heart {
  top: 30vh;
  right: 18vw;
  width: 56px;
  opacity: 0.42;
  transform: rotate(-12deg);
}
/* Scribbles in different corners */
.coloring-art .ca-scribble1 {
  top: 48vh;
  left: 8px;
  width: 160px;
  opacity: 0.38;
}
.coloring-art .ca-scribble2 {
  top: 22vh;
  right: 1vw;
  width: 100px;
  opacity: 0.36;
  transform: rotate(15deg);
}
/* Tree */
.coloring-art .ca-tree {
  bottom: 60px;
  left: 36vw;
  width: 76px;
  opacity: 0.38;
}

/* Hide some art on small screens to avoid clutter */
@media (max-width: 1100px) {
  .coloring-art .ca-house,
  .coloring-art .ca-tree,
  .coloring-art .ca-cloud { display: none; }
}
@media (max-width: 760px) {
  .coloring-art .ca-dragon,
  .coloring-art .ca-stick,
  .coloring-art .ca-sun { display: none; }
}

/* ============================================================
   📐 BLUEPRINT THEME
   Cyan/blue grid + white technical lines + yellow titleblock
   ============================================================ */
body.blueprint {
  --bg:        #003566;
  --bg-panel:  #003872;
  --bg-panel-2:#003162;
  --bg-status: #001d40;
  --bg-sb-2:   #00264f;
  --bg-row-alt:#003068;

  --orange:    #ffffff;          /* white technical lines */
  --orange-2:  #d8e8ff;
  --amber:     #ffd60a;          /* yellow titleblock */
  --orange-d:  #aac8ff;
  --orange-x:  #00457f;

  --white:     #ffffff;
  --grey:      #a8c0e0;
  --dim:       #6a90b8;
  --faint:     #4a6890;

  --border:    #6a90b8;
  --border-b:  #ffffff;
  --up:        #6affb0;
  --down:      #ff5f5f;
  --warn:      #ffd60a;
  --link:      #ffd60a;
}
body.blueprint { color: var(--orange); }
body.blueprint::before {
  /* technical drawing grid (every 30px, with stronger lines every 150px) */
  background:
    /* small grid */
    linear-gradient(0deg, rgba(255,255,255,0.06) 1px, transparent 1px) 0 0 / 30px 30px,
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px) 0 0 / 30px 30px,
    /* major grid */
    linear-gradient(0deg, rgba(255,255,255,0.13) 1px, transparent 1px) 0 0 / 150px 150px,
    linear-gradient(90deg, rgba(255,255,255,0.13) 1px, transparent 1px) 0 0 / 150px 150px;
}
body.blueprint::after { background: none; }
body.blueprint .statusbar { background: #001d40; color: #fff; border-bottom: 1px solid var(--amber); }
body.blueprint .statusbar .brand .logo { color: var(--amber); }
body.blueprint .statusbar .sb-cell .val { color: var(--amber); }
body.blueprint .ai-help-tile { background: var(--amber); color: #002850; }
body.blueprint .ai-help-tile.courts-tile { background: #fff; color: #002850; }
body.blueprint .ai-help-tile.records-tile { background: #002850; color: var(--amber); border: 1px solid var(--amber); }
body.blueprint .panel { background: rgba(0, 56, 114, 0.85); }
body.blueprint .panel-hdr { background: #001d40; border-bottom: 1px solid #fff; }
body.blueprint .phdr-l { color: var(--amber); }
body.blueprint .doc-header { background: rgba(0, 56, 114, 0.85); }
body.blueprint .output { background: rgba(0, 56, 114, 0.85); color: #fff; }
body.blueprint .cmdline { background: #001d40; }
body.blueprint .cmd-marker { color: var(--amber); }
body.blueprint .cmd-blink { background: var(--amber); }
body.blueprint .tape { background: #001d40; }
body.blueprint .t-sym { color: var(--amber); }
body.blueprint .t-px  { color: #fff; }
body.blueprint button.primary { background: var(--amber); color: #002850; border-color: var(--amber); }
body.blueprint .cat-list li.active { background: var(--amber); color: #002850; }
body.blueprint .ct-item.active { background: var(--amber); color: #002850; }
body.blueprint .court-detail h2 { color: var(--amber); }

/* ============================================================
   🍎 CHALKBOARD THEME
   Slate green/black + white "chalk" + colored chalk highlights
   ============================================================ */
body.chalkboard {
  --bg:        #1f3a2e;
  --bg-panel:  #243b30;
  --bg-panel-2:#1a3328;
  --bg-status: #0f261d;
  --bg-sb-2:   #15302a;
  --bg-row-alt:#1d3a2c;

  --orange:    #f0f0e8;          /* chalk white */
  --orange-2:  #ffffff;
  --amber:     #ffec80;          /* yellow chalk highlight */
  --orange-d:  #b8b8a8;
  --orange-x:  #2a4a3a;

  --white:     #f0f0e8;
  --grey:      #c0c8b0;
  --dim:       #6a8a7a;
  --faint:     #4a6856;

  --border:    #4a6856;
  --border-b:  #b8b8a8;
  --up:        #8be08b;
  --down:      #ff8b8b;
  --warn:      #ffec80;
  --link:      #88c8ff;
}
body.chalkboard { color: var(--orange); font-family: 'IBM Plex Mono', monospace; }
body.chalkboard::before {
  /* clean green slate — just chalk dust speckles, no diagonal stripes */
  background:
    radial-gradient(circle at 12% 18%, rgba(240,240,232,0.05) 0px, transparent 9px),
    radial-gradient(circle at 28% 42%, rgba(240,240,232,0.04) 0px, transparent 14px),
    radial-gradient(circle at 48% 12%, rgba(240,240,232,0.03) 0px, transparent 11px),
    radial-gradient(circle at 62% 58%, rgba(240,240,232,0.04) 0px, transparent 16px),
    radial-gradient(circle at 78% 32%, rgba(240,240,232,0.05) 0px, transparent 12px),
    radial-gradient(circle at 88% 78%, rgba(240,240,232,0.04) 0px, transparent 18px),
    radial-gradient(circle at 38% 82%, rgba(240,240,232,0.03) 0px, transparent 14px),
    radial-gradient(circle at 8%  68%, rgba(240,240,232,0.04) 0px, transparent 13px),
    /* faint cloudy eraser smudges (low opacity, no stripes) */
    radial-gradient(ellipse 40vw 16vh at 25% 55%, rgba(240,240,232,0.03) 0%, transparent 70%),
    radial-gradient(ellipse 36vw 14vh at 72% 30%, rgba(240,240,232,0.025) 0%, transparent 70%);
}
body.chalkboard::after {
  /* uniform deep slate-green base — solid chalkboard look */
  background:
    radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.35) 100%);
}
body.chalkboard .statusbar { background: #0f261d; color: var(--orange); border-bottom: 1px dashed var(--dim); }
body.chalkboard .statusbar .brand .logo { color: var(--amber); }
body.chalkboard .statusbar .sb-cell .val { color: var(--amber); }
body.chalkboard .ai-help-tile { background: #ff8b8b; color: #1f3a2e; }            /* pink chalk */
body.chalkboard .ai-help-tile.courts-tile { background: #88c8ff; color: #1f3a2e; } /* blue chalk */
body.chalkboard .ai-help-tile.records-tile { background: var(--amber); color: #1f3a2e; } /* yellow chalk */
body.chalkboard .panel-hdr { background: #1a3328; border-bottom: 1px dashed var(--dim); }
body.chalkboard .phdr-l { color: var(--amber); }
body.chalkboard .panel { background: var(--bg-panel); }
body.chalkboard .output { background: var(--bg-panel); color: var(--orange); }
body.chalkboard .cmdline { background: #0f261d; color: var(--amber); }
body.chalkboard .cmd-marker { color: var(--amber); }
body.chalkboard .cmd-blink { background: var(--amber); }
body.chalkboard .tape { background: #0f261d; }
body.chalkboard .t-sym { color: var(--amber); }
body.chalkboard .t-px  { color: var(--orange); }
body.chalkboard button.primary { background: var(--amber); color: #1f3a2e; border-color: var(--amber); }
body.chalkboard .cat-list li.active { background: var(--amber); color: #1f3a2e; }
body.chalkboard .ct-item.active { background: var(--amber); color: #1f3a2e; }
body.chalkboard .court-detail h2 { color: var(--amber); }
body.chalkboard .court-detail dl dd a { color: #88c8ff; }

/* ============================================================
   🕴️ CLASSIFIED / SPY THEME
   Olive drab + manila + redaction bars + classified red
   ============================================================ */
body.classified {
  --bg:        #4a4f2c;
  --bg-panel:  #d8c89a;          /* manila folder */
  --bg-panel-2:#c8b88a;
  --bg-status: #2c2e18;
  --bg-sb-2:   #3a3d22;
  --bg-row-alt:#d0c090;

  --orange:    #2a2a1e;          /* typewriter ink */
  --orange-2:  #404030;
  --amber:     #c41e3a;          /* CLASSIFIED red */
  --orange-d:  #555540;
  --orange-x:  #e8d8a8;

  --white:     #2a2a1e;
  --grey:      #5a5440;
  --dim:       #8a8060;
  --faint:     #b0a880;

  --border:    #5a5440;
  --border-b:  #2a2a1e;
  --up:        #4a6020;
  --down:      #c41e3a;
  --warn:      #c41e3a;
  --link:      #c41e3a;
}
body.classified { color: var(--orange); }
body.classified::before {
  /* faint manila paper texture */
  background:
    repeating-linear-gradient(
      0deg,
      rgba(42,42,30,0.018) 0px,
      rgba(42,42,30,0.018) 1px,
      transparent 1px, transparent 5px),
    /* coffee-stain ring upper right */
    radial-gradient(circle at 88% 18%, rgba(120,80,40,0.10) 0px, transparent 70px);
}
body.classified::after {
  background: none;
}
/* CLASSIFIED watermark stamp behind everything */
body.classified .grid::before {
  content: "TOP SECRET // EYES ONLY";
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(-22deg);
  color: rgba(196,30,58,0.10);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11vw;
  font-weight: 900;
  letter-spacing: 0.1em;
  white-space: nowrap;
  pointer-events: none;
  z-index: 0;
}
body.classified .statusbar { background: var(--bg-status); color: #f0e8c0; border-bottom: 2px solid var(--amber); }
body.classified .statusbar .brand .logo { color: var(--amber); }
body.classified .statusbar .sb-cell .val { color: var(--amber); }
body.classified .statusbar2 { background: var(--bg-sb-2); color: #f0e8c0; }
body.classified .disclaimer {
  background: var(--amber); color: #fff; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase;
}
body.classified .disclaimer .warn { color: #fff; }
body.classified .panel-hdr { background: #c0a868; border-bottom: 2px solid var(--amber); }
body.classified .phdr-l { color: var(--amber); font-weight: 800; letter-spacing: 0.18em; }
body.classified .ai-help-tile { background: var(--amber); color: #fff; }
body.classified .ai-help-tile.courts-tile { background: #2a2a1e; color: #f0e8c0; }
body.classified .ai-help-tile.records-tile { background: #fff; color: var(--amber); border: 2px solid var(--amber); }
body.classified .panel { background: var(--bg-panel); position: relative; }
body.classified .output { background: var(--bg-panel); color: var(--white); }
body.classified .cmdline { background: var(--bg-status); color: #f0e8c0; border-top: 2px solid var(--amber); }
body.classified .cmd-marker { color: var(--amber); }
body.classified .cmd-blink { background: var(--amber); }
body.classified .tape { background: var(--bg-status); }
body.classified .t-sym { color: var(--amber); }
body.classified .t-px  { color: #f0e8c0; }
body.classified button { background: #f0e0a0; color: #2a2a1e; border-color: #2a2a1e; }
body.classified button.primary { background: var(--amber); color: #fff; border-color: var(--amber); }
body.classified .cat-hdr { background: #c0a868; color: #2a2a1e; font-weight: 700; }
body.classified .cat-list li.active { background: var(--amber); color: #fff; }
body.classified .ct-cat-hdr { background: #c0a868; color: #2a2a1e; }
body.classified .ct-item.active { background: var(--amber); color: #fff; }
body.classified .court-detail h2 { color: var(--amber); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }

/* ============================================================
   🃏 CASINO THEME
   Emerald felt + gold + claret red + ivory
   ============================================================ */
body.casino {
  --bg:        #0a4a2a;          /* deep felt green */
  --bg-panel:  #0e5836;
  --bg-panel-2:#073f24;
  --bg-status: #050a06;
  --bg-sb-2:   #0a2818;
  --bg-row-alt:#0e5230;

  --orange:    #d4af37;          /* brass / gold */
  --orange-2:  #e8c560;
  --amber:     #f0e6c8;          /* ivory highlight */
  --orange-d:  #8b7333;
  --orange-x:  #1a3a26;

  --white:     #f0e6c8;
  --grey:      #b8a878;
  --dim:       #6e603e;
  --faint:     #4a3e25;

  --border:    #4a3e25;
  --border-b:  #d4af37;
  --up:        #d4af37;
  --down:      #c41e3a;          /* claret red */
  --warn:      #d4af37;
  --link:      #d4af37;
}
body.casino { color: var(--orange); }
body.casino::before {
  /* felt-like fine texture */
  background:
    repeating-linear-gradient(
      45deg,
      rgba(0,0,0,0.04) 0px,
      rgba(0,0,0,0.04) 1px,
      transparent 1px, transparent 3px),
    repeating-linear-gradient(
      135deg,
      rgba(0,0,0,0.04) 0px,
      rgba(0,0,0,0.04) 1px,
      transparent 1px, transparent 3px);
}
body.casino::after {
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.55) 100%);
}
body.casino .statusbar { background: #050a06; color: var(--orange); border-bottom: 1px solid var(--orange); }
body.casino .statusbar .brand .logo { color: var(--orange); text-shadow: 0 0 8px rgba(212,175,55,0.7); }
body.casino .statusbar .sb-cell .val { color: var(--amber); }
body.casino .ai-help-tile { background: #c41e3a; color: var(--amber); }   /* claret */
body.casino .ai-help-tile.courts-tile { background: var(--orange); color: #050a06; }
body.casino .ai-help-tile.records-tile { background: #050a06; color: var(--orange); border: 2px solid var(--orange); }
body.casino .panel-hdr { background: linear-gradient(180deg, #0c5230 0%, #0e5836 100%); border-bottom: 1px solid var(--orange); }
body.casino .phdr-l { color: var(--orange); }
body.casino .panel { background: var(--bg-panel); }
body.casino .output { background: var(--bg-panel); color: var(--amber); }
body.casino .cmdline { background: #050a06; color: var(--orange); border-top: 1px solid var(--orange); }
body.casino .cmd-marker { color: var(--orange); }
body.casino .cmd-blink { background: var(--orange); }
body.casino .tape { background: #050a06; border-top: 1px solid var(--orange); }
body.casino .t-sym { color: var(--orange); }
body.casino .t-px  { color: var(--amber); }
body.casino button.primary { background: var(--orange); color: #050a06; border-color: var(--orange); }
body.casino .cat-hdr { background: #073f24; color: var(--orange); }
body.casino .cat-list li.active { background: var(--orange); color: #050a06; }
body.casino .ct-cat-hdr { background: #073f24; color: var(--orange); }
body.casino .ct-item.active { background: var(--orange); color: #050a06; }
body.casino .court-detail h2 { color: var(--orange); }
body.casino .court-detail dl dd a { color: var(--amber); }
body.casino .court-detail .ct-juris { background: rgba(212,175,55,0.08); border-left: 2px solid var(--orange); }

/* ============================================================
   🍺 FRAT THEME
   Solo cup red + cream/khaki + navy + gold pledge pin
   Decorative art: Solo cup, Natty Ice, Skol, keg, pong, Greek letters, hat
   ============================================================ */
body.frat {
  --bg:        #f0e0b8;          /* khaki frat house wall */
  --bg-panel:  #faf0d0;
  --bg-panel-2:#e8d8a8;
  --bg-status: #c41e3a;          /* Solo cup red */
  --bg-sb-2:   #1a2a4a;
  --bg-row-alt:#f0e0b0;

  --orange:    #c41e3a;          /* Solo cup red primary */
  --orange-2:  #e63946;
  --amber:     #d4af37;          /* gold pledge pin highlight */
  --orange-d:  #6b0a18;
  --orange-x:  #fcecd0;

  --white:     #1a1410;
  --grey:      #4a3a2a;
  --dim:       #8a7a5a;
  --faint:     #c8b890;

  --border:    #8a7a5a;
  --border-b:  #c41e3a;
  --up:        #4a8030;
  --down:      #c41e3a;
  --warn:      #d4af37;
  --link:      #1a2a4a;
}
body.frat { color: var(--orange); }
body.frat::before {
  /* faint frat-house wood-paneling vertical strips */
  background:
    repeating-linear-gradient(
      90deg,
      rgba(107,10,24,0.025) 0px,
      rgba(107,10,24,0.025) 2px,
      transparent 2px, transparent 64px),
    repeating-linear-gradient(
      0deg,
      rgba(26,20,16,0.025) 0px,
      rgba(26,20,16,0.025) 1px,
      transparent 1px, transparent 5px);
}
body.frat::after {
  background: radial-gradient(ellipse at center, transparent 55%, rgba(60,30,10,0.20) 100%);
}
body.frat .statusbar { background: linear-gradient(90deg, #c41e3a 0%, #6b0a18 100%); color: #fff; border-bottom: 2px solid #1a2a4a; }
body.frat .statusbar .brand .logo { color: #d4af37; text-shadow: 0 0 6px rgba(212,175,55,0.7); }
body.frat .statusbar .sb-cell .val { color: #d4af37; }
body.frat .statusbar2 { background: #1a2a4a; color: #f0e0b8; }
body.frat .statusbar2 .val { color: #d4af37; }
body.frat .fkeys { background: #e8d8a8; border-bottom: 2px solid #1a2a4a; }
body.frat .fk b { color: var(--orange); }
body.frat .disclaimer { background: #fcecd0; color: #6b0a18; }
body.frat .panel-hdr { background: linear-gradient(180deg, #d8c590 0%, #faf0d0 100%); border-bottom: 2px solid var(--orange); }
body.frat .phdr-l { color: var(--orange); }
body.frat .panel { background: rgba(250, 240, 208, 0.92); }
body.frat .ai-help-tile { background: var(--orange); color: #fff; }
body.frat .ai-help-tile.courts-tile { background: #1a2a4a; color: #d4af37; }
body.frat .ai-help-tile.records-tile { background: #d4af37; color: #1a2a4a; }
body.frat .output { background: rgba(255, 248, 224, 0.92); color: var(--white); }
body.frat .cmdline { background: #1a2a4a; color: #d4af37; border-top: 2px solid var(--orange); }
body.frat .cmdline input { color: #d4af37; }
body.frat .cmd-marker { color: var(--orange); }
body.frat .cmd-blink { background: var(--orange); }
body.frat .tape { background: #6b0a18; }
body.frat .t-sym { color: #d4af37; }
body.frat .t-px  { color: #fff; }
body.frat button { background: #fff; color: var(--orange); border-color: var(--orange); }
body.frat button.primary { background: var(--orange); color: #fff; border-color: #6b0a18; }
body.frat .cat-hdr { background: #e8d090; color: var(--orange); }
body.frat .cat-list li.active { background: var(--orange); color: #fff; }
body.frat .ct-cat-hdr { background: #e8d090; color: var(--orange); }
body.frat .ct-item.active { background: var(--orange); color: #fff; }
body.frat .court-detail h2 { color: var(--orange); }
body.frat .court-detail dl dd a { color: #1a2a4a; }

/* ----- frat decorative art layer (hidden by default) ----- */
.frat-art { display: none; }
body.frat .frat-art {
  display: block;
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9000;
  overflow: hidden;
}
.frat-art > svg { position: absolute; pointer-events: none; }

.frat-art .fa-solo {
  bottom: 60px;
  right: 12px;
  width: 78px;
  opacity: 0.68;
  transform: rotate(-6deg);
}
.frat-art .fa-natty {
  bottom: 60px;
  right: 110px;
  width: 64px;
  opacity: 0.62;
  transform: rotate(4deg);
}
.frat-art .fa-skol {
  bottom: 60px;
  left: 12px;
  width: 70px;
  opacity: 0.6;
  transform: rotate(-3deg);
}
.frat-art .fa-keg {
  top: 36vh;
  right: 1vw;
  width: 110px;
  opacity: 0.5;
  transform: rotate(-2deg);
}
.frat-art .fa-pong {
  top: 22vh;
  left: 1vw;
  width: 150px;
  opacity: 0.55;
  transform: rotate(-8deg);
}
.frat-art .fa-greek {
  top: 90px;
  right: 30vw;
  width: 170px;
  opacity: 0.6;
  transform: rotate(-1deg);
}
.frat-art .fa-hat {
  bottom: 70px;
  left: 26vw;
  width: 100px;
  opacity: 0.6;
  transform: rotate(-12deg);
}

/* Hide some art on small screens */
@media (max-width: 1100px) {
  .frat-art .fa-keg,
  .frat-art .fa-greek,
  .frat-art .fa-hat,
  .frat-art .fa-pong { display: none; }
}
@media (max-width: 760px) {
  .frat-art .fa-natty,
  .frat-art .fa-skol { display: none; }
}

/* ----- casino decorative art layer (hidden by default) ----- */
.casino-art { display: none; }
body.casino .casino-art {
  display: block;
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9000;
  overflow: hidden;
}
.casino-art > svg { position: absolute; pointer-events: none; }

.casino-art .cs-chips {
  bottom: 100px;
  right: 240px;             /* moved left so the big pile sits to the right */
  width: 80px;
  opacity: 0.32;            /* much more transparent */
  transform: rotate(-4deg);
}
.casino-art .cs-dice {
  bottom: 75px;
  left: 12px;
  width: 130px;
  opacity: 0.36;
  transform: rotate(-6deg);
  filter: drop-shadow(0 6px 8px rgba(0,0,0,0.3));
}
.casino-art .cs-cig {
  top: 24vh;
  right: 1vw;
  width: 200px;
  opacity: 0.32;
  transform: rotate(-5deg);
}
.casino-art .cs-cards {
  top: 42vh;
  left: 0.5vw;
  width: 110px;
  opacity: 0.34;
  transform: rotate(-12deg);
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));
}
/* BIG CHIP PILE — winner's stack on the right side */
.casino-art .cs-bigpile {
  bottom: 30px;
  right: 30px;
  width: 200px;
  opacity: 0.42;
  transform: rotate(-2deg);
  filter: drop-shadow(0 8px 12px rgba(0,0,0,0.4));
}

@media (max-width: 1100px) {
  .casino-art .cs-cards,
  .casino-art .cs-cig,
  .casino-art .cs-chips { display: none; }
}
@media (max-width: 760px) {
  .casino-art .cs-dice,
  .casino-art .cs-bigpile { display: none; }
}

/* ============================================================
   📰 NEWSPAPER THEME — Wall Street Journal front page
   ============================================================ */
body.newspaper {
  --bg: #f5efe2; --bg-panel: #fffefa; --bg-panel-2: #f0e8d8; --bg-status: #000; --bg-sb-2: #1a1a1a;
  --orange: #000; --orange-2: #2a2a2a; --amber: #c41e3a; --orange-d: #555; --orange-x: #f0eadc;
  --white: #1a1a1a; --grey: #4a4a4a; --dim: #888; --faint: #c0bcb0;
  --border: #000; --border-b: #c41e3a; --up: #2a8030; --down: #c41e3a; --warn: #c41e3a; --link: #c41e3a;
}
body.newspaper { color: var(--orange); }
body.newspaper::before {
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0.018) 0px, rgba(0,0,0,0.018) 1px, transparent 1px, transparent 4px);
}
body.newspaper::after { background: none; }
body.newspaper .statusbar { background: #000; color: #fff; border-bottom: 3px double #000; }
body.newspaper .statusbar .brand .logo { color: var(--amber); }
body.newspaper .statusbar2 { background: #1a1a1a; color: #f0eadc; }
body.newspaper .panel-hdr { background: #fff; border-bottom: 2px solid #000; }
body.newspaper .phdr-l { font-weight: 900; letter-spacing: 0.18em; color: #000; text-transform: uppercase; }
body.newspaper .panel { background: var(--bg-panel); }
body.newspaper .ai-help-tile { background: #c41e3a; color: #fff; }
body.newspaper .ai-help-tile.courts-tile { background: #000; color: #fff; }
body.newspaper .ai-help-tile.records-tile { background: #fff; color: #000; border: 2px solid #000; }
body.newspaper .output { background: #fffefa; color: #000; }
body.newspaper .cmdline { background: #000; color: #fff; }
body.newspaper .cmd-marker { color: var(--amber); }
body.newspaper .tape { background: #000; }
body.newspaper .t-sym { color: var(--amber); }
body.newspaper .t-px { color: #fff; }
body.newspaper button.primary { background: #c41e3a; color: #fff; border-color: #000; }
body.newspaper .cat-list li.active, body.newspaper .ct-item.active { background: #000; color: #fff; }
body.newspaper .court-detail h2 { color: var(--amber); font-weight: 900; text-transform: uppercase; }

/* ============================================================
   ⚙️ STEAMPUNK THEME — brass + leather + copper
   ============================================================ */
body.steampunk {
  --bg: #2a1a0c; --bg-panel: #3a2718; --bg-panel-2: #2d1d10; --bg-status: #1a1008; --bg-sb-2: #241608;
  --orange: #b5985a; --orange-2: #d4af37; --amber: #b87333; --orange-d: #6b5028; --orange-x: #3a2c14;
  --white: #f0d8a0; --grey: #a89060; --dim: #6e5a30; --faint: #4a3c1c;
  --border: #6b5028; --border-b: #b5985a; --up: #6b8a3a; --down: #b87333; --warn: #d4af37; --link: #b87333;
}
body.steampunk { color: var(--orange); }
body.steampunk::before {
  background:
    repeating-linear-gradient(45deg, rgba(184,115,51,0.04) 0px, rgba(184,115,51,0.04) 1px, transparent 1px, transparent 8px),
    repeating-linear-gradient(0deg, rgba(181,152,90,0.025) 0px, rgba(181,152,90,0.025) 1px, transparent 1px, transparent 4px);
}
body.steampunk::after {
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.55) 100%);
}
body.steampunk .statusbar { background: linear-gradient(180deg, #1a1008 0%, #0d0804 100%); color: var(--orange); border-bottom: 1px solid var(--orange); }
body.steampunk .statusbar .brand .logo { color: var(--amber); text-shadow: 0 0 8px rgba(184,115,51,0.7); }
body.steampunk .statusbar .sb-cell .val { color: var(--orange-2); }
body.steampunk .ai-help-tile { background: var(--amber); color: #1a1008; }
body.steampunk .ai-help-tile.courts-tile { background: var(--orange); color: #1a1008; }
body.steampunk .ai-help-tile.records-tile { background: #1a1008; color: var(--orange); border: 2px solid var(--orange); }
body.steampunk .panel-hdr { background: linear-gradient(180deg, #4a3220 0%, #3a2718 100%); border-bottom: 1px solid var(--orange); }
body.steampunk .panel { background: var(--bg-panel); }
body.steampunk .output { background: #2d1d10; color: var(--white); }
body.steampunk .cmdline { background: #1a1008; color: var(--orange-2); border-top: 1px solid var(--orange); }
body.steampunk .tape { background: #1a1008; }
body.steampunk .t-sym { color: var(--amber); }
body.steampunk .t-px { color: var(--white); }
body.steampunk button.primary { background: var(--amber); color: #1a1008; border-color: var(--orange); }
body.steampunk .cat-list li.active, body.steampunk .ct-item.active { background: var(--amber); color: #1a1008; }
body.steampunk .court-detail h2 { color: var(--orange-2); }

/* ============================================================
   🟦 BAUHAUS THEME — primary red/yellow/blue + black + cream
   ============================================================ */
body.bauhaus {
  --bg: #f5f1e6; --bg-panel: #ffffff; --bg-panel-2: #f0ebd8; --bg-status: #003049; --bg-sb-2: #1a3a55;
  --orange: #000000; --orange-2: #2a2a2a; --amber: #d62828; --orange-d: #444; --orange-x: #fcbf49;
  --white: #000; --grey: #444; --dim: #888; --faint: #c8c4b0;
  --border: #000; --border-b: #d62828; --up: #2a8030; --down: #d62828; --warn: #fcbf49; --link: #003049;
}
body.bauhaus { color: var(--orange); }
body.bauhaus::before { background: none; }
body.bauhaus::after { background: none; }
body.bauhaus .statusbar { background: #003049; color: #fff; border-bottom: 4px solid #d62828; }
body.bauhaus .statusbar .brand .logo { color: #fcbf49; }
body.bauhaus .statusbar2 { background: #fcbf49; color: #000; border-bottom: 2px solid #000; }
body.bauhaus .statusbar2 .val { color: #003049; font-weight: 900; }
body.bauhaus .panel-hdr { background: #fff; border-bottom: 3px solid #000; }
body.bauhaus .phdr-l { font-weight: 900; letter-spacing: 0.16em; }
body.bauhaus .panel { background: #fff; border: 2px solid #000; }
body.bauhaus .ai-help-tile { background: #d62828; color: #fff; }      /* RED */
body.bauhaus .ai-help-tile.courts-tile { background: #fcbf49; color: #000; }   /* YELLOW */
body.bauhaus .ai-help-tile.records-tile { background: #003049; color: #fff; }  /* BLUE */
body.bauhaus .output { background: #fff; color: #000; }
body.bauhaus .cmdline { background: #003049; color: #fcbf49; border-top: 3px solid #d62828; }
body.bauhaus .tape { background: #d62828; }
body.bauhaus .t-sym { color: #fcbf49; }
body.bauhaus .t-px { color: #fff; }
body.bauhaus button.primary { background: #d62828; color: #fff; border-color: #000; }
body.bauhaus .cat-list li.active, body.bauhaus .ct-item.active { background: #fcbf49; color: #000; }
body.bauhaus .court-detail h2 { color: #d62828; font-weight: 900; }

/* ============================================================
   🎭 WEIMAR THEME — Berlin cabaret deep red + gold + charcoal
   ============================================================ */
body.weimar {
  --bg: #1a0a10; --bg-panel: #2a1018; --bg-panel-2: #200a14; --bg-status: #0a0508; --bg-sb-2: #14070a;
  --orange: #d4af37; --orange-2: #e8c560; --amber: #c41e3a; --orange-d: #8b7333; --orange-x: #2a1018;
  --white: #f0e6c8; --grey: #c8a878; --dim: #7a6038; --faint: #4a3a22;
  --border: #4a3a22; --border-b: #d4af37; --up: #d4af37; --down: #c41e3a; --warn: #d4af37; --link: #d4af37;
}
body.weimar { color: var(--orange); }
body.weimar::before {
  /* art-deco zigzag pattern, very subtle */
  background:
    repeating-linear-gradient(45deg, rgba(212,175,55,0.04) 0px, rgba(212,175,55,0.04) 1px, transparent 1px, transparent 24px),
    repeating-linear-gradient(-45deg, rgba(212,175,55,0.04) 0px, rgba(212,175,55,0.04) 1px, transparent 1px, transparent 24px);
}
body.weimar::after { background: radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,0.7) 100%); }
body.weimar .statusbar { background: #0a0508; color: var(--orange); border-bottom: 1px solid var(--orange); }
body.weimar .statusbar .brand .logo { color: var(--orange); text-shadow: 0 0 10px rgba(212,175,55,0.6); }
body.weimar .ai-help-tile { background: var(--amber); color: var(--orange); }
body.weimar .ai-help-tile.courts-tile { background: var(--orange); color: #0a0508; }
body.weimar .ai-help-tile.records-tile { background: #0a0508; color: var(--orange); border: 2px solid var(--orange); }
body.weimar .panel { background: var(--bg-panel); }
body.weimar .output { background: var(--bg-panel); color: var(--white); }
body.weimar .cmdline { background: #0a0508; color: var(--orange); border-top: 1px solid var(--orange); }
body.weimar .tape { background: #0a0508; }
body.weimar .t-sym { color: var(--orange); }
body.weimar .t-px { color: var(--white); }
body.weimar button.primary { background: var(--orange); color: #0a0508; border-color: var(--orange); }
body.weimar .cat-list li.active, body.weimar .ct-item.active { background: var(--orange); color: #0a0508; }
body.weimar .court-detail h2 { color: var(--orange-2); }

/* ============================================================
   🎮 GAME BOY THEME (Nintendo / NES palette)
   Cool gray console plastic + black + iconic NES red + royal
   blue + mustard yellow + cream. Pixelated retro-game feel.
   Palette: gray #c8c8c8 / dark #4a4a4a / black #1a1a1a /
            NES-red #d62828 / blue #1e4a9f / lt-blue #6ab4ff /
            mustard #f7c93c / cream #fce4a0
   ============================================================ */
body.gameboy {
  --bg:        #c0c0c0;            /* NES console gray */
  --bg-panel:  #e8e8e8;
  --bg-panel-2:#d0d0d0;
  --bg-status: #1a1a1a;            /* black plastic */
  --bg-sb-2:   #2a2a2a;
  --bg-row-alt:#dadada;

  --orange:    #1a1a1a;            /* black primary text */
  --orange-2:  #4a4a4a;
  --amber:     #d62828;            /* NES red highlight */
  --orange-d:  #6a6a6a;
  --orange-x:  #f4d8d8;

  --white:     #1a1a1a;
  --grey:      #4a4a4a;
  --dim:       #8a8a8a;
  --faint:     #b0b0b0;

  --border:    #1a1a1a;            /* solid black borders, pixel-art feel */
  --border-b:  #d62828;
  --up:        #1e8a3e;            /* Mario-pipe green */
  --down:      #d62828;            /* NES red */
  --warn:      #f7c93c;            /* coin / mustard */
  --link:      #1e4a9f;            /* royal blue */
}
body.gameboy { color: var(--orange); font-family: 'IBM Plex Mono', monospace; }
body.gameboy::before {
  /* faint pixel-grid scanline (every 3px, very subtle) */
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.04) 0px, rgba(0,0,0,0.04) 1px, transparent 1px, transparent 3px),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.025) 0px, rgba(0,0,0,0.025) 1px, transparent 1px, transparent 3px);
}
body.gameboy::after { background: none; }

body.gameboy .statusbar {
  background: #1a1a1a;
  color: #f0f0f0;
  border-bottom: 3px solid #d62828;
}
body.gameboy .statusbar .brand .logo { color: #d62828; }
body.gameboy .statusbar .sb-cell .val { color: #f7c93c; }
body.gameboy .statusbar2 { background: #2a2a2a; color: #c8c8c8; border-bottom: 2px solid #1a1a1a; }
body.gameboy .statusbar2 .val { color: #6ab4ff; }

body.gameboy .fkeys { background: #c0c0c0; border-bottom: 2px solid #1a1a1a; }
body.gameboy .fk b { color: #d62828; }
body.gameboy .disclaimer { background: #fce4a0; color: #1a1a1a; border-bottom: 2px solid #1a1a1a; }
body.gameboy .disclaimer .warn { color: #d62828; }

body.gameboy .panel-hdr {
  background: linear-gradient(180deg, #d0d0d0 0%, #e8e8e8 100%);
  border-bottom: 2px solid #1a1a1a;
}
body.gameboy .phdr-l { color: #1a1a1a; font-weight: 800; letter-spacing: 0.16em; }
body.gameboy .panel { background: var(--bg-panel); }

/* Three sidebar tiles get NES red/blue/mustard — controller A/B + coin */
body.gameboy .ai-help-tile {
  background: #d62828;     /* NES red */
  color: #fff;
  border-bottom: 3px solid #1a1a1a;
}
body.gameboy .ai-help-tile:hover { background: #b81e1e; }
body.gameboy .ai-help-tile.courts-tile {
  background: #1e4a9f;     /* royal blue */
  color: #fff;
}
body.gameboy .ai-help-tile.courts-tile:hover { background: #163a7e; }
body.gameboy .ai-help-tile.records-tile {
  background: #f7c93c;     /* mustard / coin */
  color: #1a1a1a;
}
body.gameboy .ai-help-tile.records-tile:hover { background: #f0bc20; }

body.gameboy .search-box { background: #fce4a0; border-bottom: 2px solid #1a1a1a; }
body.gameboy .search-box input { color: #1a1a1a; }
body.gameboy .search-box .prompt-marker { color: #d62828; }

body.gameboy .cat-hdr { background: #d0d0d0; color: #1a1a1a; font-weight: 700; }
body.gameboy .cat-hdr:hover { background: #f7c93c; }
body.gameboy .cat-list li { color: #2a2a2a; }
body.gameboy .cat-list li:hover { background: #fce4a0; color: #1a1a1a; }
body.gameboy .cat-list li.active { background: #d62828; color: #fff; border-left: 3px solid #1a1a1a; }
body.gameboy .ct-cat-hdr { background: #d0d0d0; color: #1a1a1a; }
body.gameboy .ct-item:hover { background: #fce4a0; color: #1a1a1a; }
body.gameboy .ct-item.active { background: #1e4a9f; color: #fff; border-left: 3px solid #1a1a1a; }

body.gameboy .doc-header { background: #e8e8e8; }
body.gameboy .dh-name-text { color: #1a1a1a; }
body.gameboy .dh-slug { background: #f7c93c; color: #1a1a1a; border: 2px solid #1a1a1a; }

body.gameboy .prompt-panel textarea { background: #fff; color: #1a1a1a; }
body.gameboy .prompt-actions { background: #d0d0d0; border-top: 2px solid #1a1a1a; }
body.gameboy .output-meta { background: #d0d0d0; color: #4a4a4a; border-bottom: 2px solid #1a1a1a; }
body.gameboy .output { background: #fff; color: #1a1a1a; }
body.gameboy .output .placeholder div { color: #1a1a1a; }
body.gameboy .output.streaming::after { color: #d62828; }

body.gameboy button { background: #e8e8e8; color: #1a1a1a; border: 2px solid #1a1a1a; font-weight: 700; }
body.gameboy button:hover:not(:disabled) { background: #f7c93c; }
body.gameboy button.primary { background: #d62828; color: #fff; border-color: #1a1a1a; }
body.gameboy button.primary:hover:not(:disabled) { background: #b81e1e; }

body.gameboy .cmdline {
  background: #1a1a1a;
  color: #f7c93c;
  border-top: 2px solid #d62828;
  border-bottom: 2px solid #d62828;
}
body.gameboy .cmdline input { color: #f7c93c; }
body.gameboy .cmd-marker { color: #d62828; }
body.gameboy .cmd-blink { background: #d62828; }

body.gameboy .tape { background: #1e4a9f; color: #fff; border-top: 2px solid #1a1a1a; }
body.gameboy .t-sym { color: #f7c93c; }
body.gameboy .t-px  { color: #fff; }

body.gameboy .court-detail h2 { color: #d62828; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; }
body.gameboy .court-detail dl dt { color: #4a4a4a; }
body.gameboy .court-detail dl dd a { color: #1e4a9f; text-decoration: underline; }
body.gameboy .court-detail dl dd a:hover { color: #d62828; }
body.gameboy .court-detail .ct-juris { background: #fce4a0; border-left: 3px solid #d62828; color: #1a1a1a; }

/* ============================================================
   🔥 BBQ / TEXAS BARBECUE THEME — smoke + rust + mustard
   ============================================================ */
body.bbq {
  --bg: #f4ead0; --bg-panel: #faf0d8; --bg-panel-2: #ebd8a8; --bg-status: #6e2c10; --bg-sb-2: #4a1a08;
  --orange: #b54822; --orange-2: #c45a30; --amber: #d4a017; --orange-d: #6e2c10; --orange-x: #f7e0a8;
  --white: #2a1408; --grey: #5d3a1a; --dim: #8a6a3a; --faint: #b8a878;
  --border: #6e2c10; --border-b: #b54822; --up: #6b8a3a; --down: #b54822; --warn: #d4a017; --link: #6e2c10;
}
body.bbq { color: var(--orange); }
body.bbq::before {
  /* faint smoke wisps */
  background:
    radial-gradient(ellipse 60vw 24vh at 30% 20%, rgba(120,80,50,0.06) 0%, transparent 70%),
    radial-gradient(ellipse 50vw 20vh at 75% 50%, rgba(120,80,50,0.05) 0%, transparent 70%),
    radial-gradient(ellipse 40vw 18vh at 20% 80%, rgba(120,80,50,0.04) 0%, transparent 70%);
}
body.bbq::after { background: radial-gradient(ellipse at center, transparent 55%, rgba(60,30,10,0.20) 100%); }
body.bbq .statusbar { background: linear-gradient(180deg, #b54822 0%, #6e2c10 100%); color: #fcd34d; border-bottom: 2px solid #fcd34d; }
body.bbq .statusbar .brand .logo { color: #fcd34d; text-shadow: 0 0 8px rgba(252,211,77,0.7); }
body.bbq .statusbar .sb-cell .val { color: #fff; }
body.bbq .statusbar2 { background: #4a1a08; color: #fcd34d; }
body.bbq .ai-help-tile { background: var(--orange); color: #fff; }
body.bbq .ai-help-tile.courts-tile { background: var(--amber); color: #2a1408; }
body.bbq .ai-help-tile.records-tile { background: #2a1408; color: var(--amber); border: 2px solid var(--amber); }
body.bbq .panel-hdr { background: linear-gradient(180deg, #ebd8a8 0%, #faf0d8 100%); border-bottom: 2px solid var(--orange); }
body.bbq .panel { background: var(--bg-panel); }
body.bbq .output { background: #faf0d8; color: var(--white); }
body.bbq .cmdline { background: #2a1408; color: var(--amber); border-top: 2px solid var(--orange); }
body.bbq .tape { background: #4a1a08; }
body.bbq .t-sym { color: var(--amber); }
body.bbq .t-px { color: #fcd34d; }
body.bbq button.primary { background: var(--orange); color: #fff; border-color: var(--orange-d); }
body.bbq .cat-list li.active, body.bbq .ct-item.active { background: var(--orange); color: #fff; }
body.bbq .court-detail h2 { color: var(--orange-d); }

/* ============================================================
   TERMS-OF-USE GATE
   ============================================================ */
.tos-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.94);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow: auto;
}
.tos-modal[hidden] { display: none; }
body.tos-open { overflow: hidden; }
body.tos-open .statusbar,
body.tos-open .statusbar2,
body.tos-open .fkeys,
body.tos-open .disclaimer,
body.tos-open .grid,
body.tos-open .cmdline,
body.tos-open .tape {
  filter: blur(2px) brightness(0.4);
  pointer-events: none;
}
.tos-box {
  max-width: 720px;
  width: 100%;
  max-height: 92vh;
  overflow: auto;
  background: var(--bg-panel);
  border: 1px solid var(--orange);
  box-shadow: 0 0 40px rgba(255,119,0,0.25), inset 0 0 0 1px rgba(255,119,0,0.15);
  font-family: var(--mono);
}
.tos-hdr {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: linear-gradient(180deg, #2a1500 0%, #0f0700 100%);
  border-bottom: 1px solid var(--orange-d);
  font-size: 12px;
  letter-spacing: 0.1em;
}
.tos-title {
  flex: 1;
  color: var(--warn);
  font-weight: 700;
  text-transform: uppercase;
}
.tos-meta { font-size: 10.5px; color: var(--dim); }
.tos-body {
  padding: 18px 22px 12px;
  color: var(--white);
  font-size: 13px;
  line-height: 1.6;
}
.tos-body .tos-banner {
  text-align: center;
  background: rgba(255,53,72,0.12);
  border: 1px solid var(--down);
  color: var(--warn);
  padding: 8px 12px;
  margin: 0 0 14px;
  font-size: 12px;
  letter-spacing: 0.06em;
}
.tos-body p { margin: 0 0 12px; }
.tos-list {
  margin: 0 0 14px;
  padding-left: 22px;
  color: var(--white);
}
.tos-list li {
  margin-bottom: 10px;
  font-size: 12.5px;
  line-height: 1.55;
}
.tos-list li::marker { color: var(--orange); font-weight: 700; }
.tos-list strong { color: var(--orange); }
.tos-list em     { color: var(--amber); font-style: normal; text-decoration: underline; text-decoration-color: var(--orange-d); }
.tos-bottom { font-size: 12px; color: var(--grey); }
.tos-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding: 14px 22px 18px;
  border-top: 1px solid var(--border);
  background: var(--bg-panel-2);
}
.tos-actions button {
  font-size: 12px;
  padding: 10px 18px;
  letter-spacing: 0.08em;
}
.tos-actions .primary {
  font-weight: 700;
  text-shadow: 0 0 0 #000;
}

.dim { color: var(--dim); }
.warn { color: var(--warn); }
.up { color: var(--up); }
.down { color: var(--down); }
.sep { color: var(--faint); margin: 0 6px; }

button {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--orange);
  background: transparent;
  border: 1px solid var(--border-b);
  padding: 5px 12px;
  cursor: pointer;
  text-transform: uppercase;
  transition: background 0.08s, color 0.08s, border-color 0.08s;
}
button:hover:not(:disabled) {
  background: var(--orange-x);
  color: var(--white);
  border-color: var(--orange);
}
button:disabled {
  color: var(--faint);
  border-color: var(--faint);
  cursor: not-allowed;
}
button.primary {
  background: var(--orange);
  color: #000;
  border-color: var(--orange);
  font-weight: 700;
}
button.primary:hover:not(:disabled) {
  background: var(--amber);
  color: #000;
}
button.primary:disabled { background: transparent; color: var(--faint); border-color: var(--faint); }
button.ghost { background: transparent; }
button.mini { padding: 3px 8px; font-size: 10px; }

input, textarea {
  font-family: var(--mono);
  background: var(--bg-panel);
  color: var(--white);
  border: 1px solid var(--border);
  outline: none;
  caret-color: var(--orange);
}
input:focus, textarea:focus { border-color: var(--orange); }

/* ============================================================
   STATUS BAR
   ============================================================ */
.statusbar {
  display: grid;
  grid-template-columns: 1.4fr 0.9fr 1.2fr 1.6fr 0.9fr;
  align-items: center;
  height: 26px;
  background: var(--bg-status);
  color: var(--white);
  font-size: 11px;
  letter-spacing: 0.08em;
  border-bottom: 1px solid var(--border);
}
.sb-cell {
  padding: 0 12px;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  border-right: 1px solid rgba(255,255,255,0.06);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sb-cell:last-child { border-right: none; justify-content: flex-end; }
.brand .logo {
  color: var(--orange);
  font-size: 14px;
  text-shadow: 0 0 8px rgba(255,119,0,0.7);
  margin-right: 2px;
}
.brand { color: var(--orange); font-weight: 700; letter-spacing: 0.12em; }
.sb-cell .val { color: var(--amber); font-variant-numeric: tabular-nums; font-weight: 600; }
.sb-cell .sep { color: rgba(255,255,255,0.25); margin: 0 6px; }
.led {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--up);
  box-shadow: 0 0 6px rgba(41,214,96,0.7);
  display: inline-block;
}
.led.busy { background: var(--warn); box-shadow: 0 0 6px rgba(255,215,0,0.7); animation: pulse 0.8s ease-in-out infinite; }
.led.err  { background: var(--down); box-shadow: 0 0 6px rgba(255,53,72,0.8); }
.led.pulse { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse {
  0%,100% { box-shadow: 0 0 0 rgba(41,214,96,0); }
  50%     { box-shadow: 0 0 8px rgba(41,214,96,0.9); }
}

/* ============================================================
   STATUS BAR — secondary "live noise" row
   ============================================================ */
.statusbar2 {
  display: flex;
  align-items: center;
  height: 22px;
  background: #050a18;          /* slightly lighter than the primary bar */
  color: var(--grey);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--border);
  padding: 0 8px;
  overflow-x: auto;
  scrollbar-width: thin;
  white-space: nowrap;
}
.statusbar2::-webkit-scrollbar { height: 4px; }
.sb2-cell {
  padding: 0 10px;
  height: 100%;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-right: 1px dashed rgba(255,255,255,0.08);
  flex: 0 0 auto;
}
.sb2-cell:last-child {
  border-right: none;
  flex: 1 1 auto;
  justify-content: flex-end;
  color: var(--dim);
  font-style: italic;
}
.sb2-cell .val {
  color: var(--amber);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.sb2-cell .val.up   { color: var(--up); }
.sb2-cell .val.warn { color: var(--warn); }
.sb2-cell .val.down { color: var(--down); }
.sb2-cell .dim { color: var(--faint); }

/* ============================================================
   FUNCTION KEYS
   ============================================================ */
.fkeys {
  display: flex;
  align-items: center;
  height: 24px;
  background: #0e0a04;
  border-bottom: 1px solid var(--border);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  padding: 0 8px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.fk {
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  height: 100%;
  color: var(--grey);
  border-right: 1px dashed var(--border);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.fk:last-child { border-right: none; }
.fk b { color: var(--orange); margin-right: 2px; font-weight: 700; }
.fk:hover { background: var(--orange-x); color: var(--white); }
.fk.active { background: var(--orange); color: #000; }
.fk.active b { color: #000; }

/* ============================================================
   DISCLAIMER STRIP
   ============================================================ */
.disclaimer {
  background: #1a0d00;
  color: var(--amber);
  border-bottom: 1px solid var(--border);
  font-size: 10.5px;
  padding: 4px 12px;
  letter-spacing: 0.04em;
}
.disclaimer .warn { color: var(--warn); margin-right: 8px; font-weight: 700; }

/* ============================================================
   MAIN GRID
   ============================================================ */
.grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  height: calc(100vh - 26px - 22px - 24px - 24px - 28px - 22px); /* status + sb2 + fkeys + disclaim + cmd + tape */
  background: var(--border);
  gap: 1px;
}
@media (max-width: 880px) {
  .grid { grid-template-columns: 1fr; height: auto; }
  body, html { overflow: auto; }
}

/* ============================================================
   PANELS (generic)
   ============================================================ */
.panel {
  background: var(--bg-panel);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.panel-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 10px;
  height: 24px;
  background: linear-gradient(180deg, #1a0e00 0%, #0a0500 100%);
  border-bottom: 1px solid var(--border);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.phdr-l { color: var(--orange); font-weight: 700; }
.phdr-r { color: var(--dim); display: inline-flex; align-items: center; gap: 6px; }
.phdr-r.out-actions { gap: 4px; }

/* ============================================================
   SIDEBAR (doc index)
   ============================================================ */
.sidebar {
  display: flex;
  flex-direction: column;
}
.search-box {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel-2);
}
.search-box .prompt-marker { color: var(--orange); font-weight: 700; }
.search-box input {
  flex: 1;
  background: transparent;
  border: none;
  font-size: 12px;
  color: var(--white);
  padding: 4px 0;
}
.search-box input::placeholder { color: var(--dim); }

/* AI HELP tile — solid orange, prominent, between search and doc-nav */
.ai-help-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  background: var(--orange);
  color: #000;
  border: none;
  border-top: 1px solid var(--border);
  border-bottom: 2px solid #1a0d00;
  cursor: pointer;
  text-align: left;
  font-family: var(--mono);
  letter-spacing: 0.04em;
  position: relative;
  overflow: hidden;
  transition: background 0.1s;
}
.ai-help-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.18) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.6s;
  pointer-events: none;
}
.ai-help-tile:hover { background: var(--amber); }
.ai-help-tile:hover::before { transform: translateX(100%); }
.ai-help-tile:active { background: #ffcc66; }
.ai-help-tile.active {
  background: #000;
  color: var(--orange);
  border-top: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange);
}
.ai-help-tile.active .tile-icon { color: var(--orange); border-color: var(--orange); }
.ai-help-tile.active .tile-sub  { color: var(--orange-2); }

/* Courts tile variant — same orange as AI HELP, distinguished by content */
.ai-help-tile.courts-tile { background: var(--orange); }
.ai-help-tile.courts-tile:hover { background: var(--amber); }
.ai-help-tile.courts-tile.active {
  background: #000;
  color: var(--orange);
  border-top: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange);
}
.ai-help-tile.courts-tile.active .tile-icon { color: var(--orange); border-color: var(--orange); }
.ai-help-tile.courts-tile.active .tile-sub  { color: var(--orange-2); }

/* Property records tile — same orange */
.ai-help-tile.records-tile { background: var(--orange); }
.ai-help-tile.records-tile:hover { background: var(--amber); }
.ai-help-tile.records-tile.active {
  background: #000;
  color: var(--orange);
  border-top: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange);
}
.ai-help-tile.records-tile.active .tile-icon { color: var(--orange); border-color: var(--orange); }
.ai-help-tile.records-tile.active .tile-sub  { color: var(--orange-2); }

/* TX Codes tile — same orange */
.ai-help-tile.codes-tile { background: var(--orange); }
.ai-help-tile.codes-tile:hover { background: var(--amber); }
.ai-help-tile.codes-tile.active {
  background: #000;
  color: var(--orange);
  border-top: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange);
}
.ai-help-tile.codes-tile.active .tile-icon { color: var(--orange); border-color: var(--orange); }
.ai-help-tile.codes-tile.active .tile-sub  { color: var(--orange-2); }
.ai-help-tile.codes-tile .tile-icon { font-family: 'Times New Roman', serif; font-size: 22px; font-weight: 900; }

/* Courts mode UI */
.courts-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.courts-list .ct-cat-hdr {
  padding: 6px 10px;
  background: #100802;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orange);
  font-weight: 700;
  border-bottom: 1px solid var(--border);
}
.courts-list li.ct-item {
  padding: 6px 12px 6px 22px;
  font-size: 12px;
  color: var(--grey);
  cursor: pointer;
  border-left: 2px solid transparent;
  border-bottom: 1px solid var(--border);
}
.courts-list li.ct-item:hover { background: var(--orange-x); color: var(--white); }
.courts-list li.ct-item.active {
  background: var(--orange);
  color: #000;
  border-left-color: #fff;
  font-weight: 600;
}

/* Court details rendered in the output panel */
.court-detail h2 { color: var(--orange); font-size: 14px; margin: 0 0 4px; letter-spacing: 0.04em; }
.court-detail .ct-type { color: var(--amber); font-size: 11px; margin-bottom: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
.court-detail dl { display: grid; grid-template-columns: 110px 1fr; gap: 4px 14px; margin: 0 0 14px; font-size: 12px; }
.court-detail dl dt { color: var(--dim); text-transform: uppercase; letter-spacing: 0.08em; font-size: 10.5px; padding-top: 1px; }
.court-detail dl dd { margin: 0; color: var(--white); }
.court-detail dl dd a { color: var(--orange-2); text-decoration: underline; text-decoration-color: var(--orange-d); }
.court-detail dl dd a:hover { color: var(--amber); }
.court-detail .ct-juris { font-size: 12px; color: var(--grey); line-height: 1.55; margin: 0 0 14px; padding: 8px 12px; background: rgba(255,119,0,0.06); border-left: 2px solid var(--orange); }

.court-detail .ct-counties { font-size: 11px; color: var(--dim); line-height: 1.5; }
.court-detail .ct-counties strong { color: var(--white); }

.court-detail .ct-opinions {
  margin-top: 18px;
  border-top: 1px dashed var(--border);
  padding-top: 14px;
}
.court-detail .ct-opinions h3 {
  color: var(--orange);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 8px;
}
.court-detail .opinion {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px dotted var(--border);
  font-size: 12px;
  align-items: baseline;
}
.court-detail .opinion .op-date { color: var(--dim); font-variant-numeric: tabular-nums; font-size: 10.5px; }
.court-detail .opinion .op-name { color: var(--white); }
.court-detail .opinion .op-name a { color: var(--white); text-decoration: none; }
.court-detail .opinion .op-name a:hover { color: var(--orange); text-decoration: underline; }
.court-detail .opinion .op-meta { display: block; color: var(--dim); font-size: 10.5px; margin-top: 2px; }
.court-detail .ct-opinions-loading { color: var(--dim); font-style: italic; font-size: 11px; }
.court-detail .ct-opinions-error { color: var(--down); font-size: 11px; }
.ai-help-tile .tile-icon {
  width: 24px; height: 24px;
  border: 2px solid #000;
  border-radius: 50%;
  font-weight: 700;
  font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 24px;
}
.ai-help-tile .tile-stack {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.ai-help-tile .tile-label {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
}
.ai-help-tile .tile-sub {
  font-size: 10px;
  opacity: 0.85;
  letter-spacing: 0.04em;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ai-help-tile .tile-arrow {
  font-weight: 700;
  font-size: 18px;
  flex: 0 0 auto;
}

.doc-nav {
  flex: 1;
  overflow-y: auto;
  padding: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--orange-d) transparent;
}
.doc-nav::-webkit-scrollbar { width: 8px; }
.doc-nav::-webkit-scrollbar-thumb { background: var(--orange-d); }

.cat {
  border-bottom: 1px solid var(--border);
}
.cat-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  background: #100802;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orange);
  cursor: pointer;
  user-select: none;
}
.cat-hdr:hover { background: var(--orange-x); color: var(--white); }
.cat-hdr .cat-name { font-weight: 700; }
.cat-hdr .cat-count { color: var(--dim); font-weight: 500; }
.cat-hdr .arrow {
  display: inline-block;
  width: 10px;
  color: var(--dim);
  transition: transform 0.15s;
  font-weight: 700;
}
.cat.collapsed .arrow { transform: rotate(-90deg); }
.cat.collapsed .cat-list { display: none; }
.cat-list { list-style: none; margin: 0; padding: 0; }
.cat-list li {
  padding: 4px 12px 4px 22px;
  font-size: 11.5px;
  color: var(--grey);
  cursor: pointer;
  border-left: 2px solid transparent;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cat-list li:hover { background: var(--orange-x); color: var(--white); }
.cat-list li.active {
  background: var(--orange);
  color: #000;
  border-left-color: var(--white);
  font-weight: 600;
}
.cat-list li.hidden,
.courts-list li.hidden { display: none; }
.cat-list li .doc-slug { color: var(--dim); margin-right: 8px; font-size: 10px; }
.cat-list li.active .doc-slug { color: rgba(0,0,0,0.7); }

/* ============================================================
   WORKSPACE (right side)
   ============================================================ */
.workspace {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 1px;
  background: var(--border);
  min-height: 0;
}

/* doc header */
.doc-header { background: var(--bg-panel); padding: 10px 14px; }
.dh-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.dh-name {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}
.dh-slug {
  color: var(--orange);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.1em;
  background: rgba(255,119,0,0.12);
  padding: 1px 6px;
  border: 1px solid var(--orange-d);
}
.dh-name-text {
  color: var(--white);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dh-cite { font-size: 11px; }
.dh-desc { font-size: 11px; margin-top: 4px; }

/* prompt panel */
.prompt-panel { min-height: 140px; max-height: 260px; }
.prompt-panel textarea {
  flex: 1;
  width: 100%;
  background: var(--bg-panel-2);
  color: var(--white);
  border: none;
  padding: 10px 12px;
  font-size: 12.5px;
  font-family: var(--mono);
  line-height: 1.55;
  resize: none;
  outline: none;
}
.prompt-panel textarea::placeholder { color: var(--dim); }
.prompt-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-top: 1px solid var(--border);
  background: #0d0805;
}
.prompt-actions .spacer { flex: 1; text-align: right; font-size: 10.5px; }

/* DEMAND LETTER BUILDER panel */
.builder-panel { max-height: 380px; overflow-y: auto; flex: 0 0 auto; }
.builder-body {
  padding: 8px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
}
.builder-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  border-bottom: 1px dotted var(--border);
  padding-bottom: 8px;
}
.builder-group:last-child { border-bottom: none; }
.builder-group-label {
  width: 100%;
  color: var(--orange);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 10.5px;
  margin-bottom: 2px;
}
.builder-group-label .dim { font-weight: 400; color: var(--dim); margin-left: 6px; }
.builder-btn {
  font-family: var(--mono);
  background: transparent;
  color: var(--orange);
  border: 1px solid var(--border-b);
  padding: 4px 10px;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  cursor: pointer;
  text-transform: uppercase;
  transition: background 0.08s, color 0.08s, border-color 0.08s;
  font-weight: 600;
}
.builder-btn:hover { background: var(--orange-x); color: var(--white); border-color: var(--orange); }
.builder-btn.on {
  background: var(--orange);
  color: #000;
  border-color: var(--orange);
}
.builder-btn.on::before {
  content: "✓ ";
  font-weight: 900;
}
.builder-summary {
  margin-top: 6px;
  padding: 6px 10px;
  border-left: 2px solid var(--orange);
  background: rgba(255, 119, 0, 0.05);
  color: var(--orange-2);
  font-size: 10.5px;
  letter-spacing: 0.04em;
}
.builder-summary strong { color: var(--orange); }

/* output panel */
.output-panel { flex: 1; }
.output-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--bg-panel-2);
  border-bottom: 1px solid var(--border);
  font-size: 10.5px;
  letter-spacing: 0.05em;
}
.output {
  flex: 1;
  overflow: auto;
  padding: 16px 20px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--white);
  white-space: pre-wrap;
  font-family: var(--mono);
  scrollbar-color: var(--orange-d) transparent;
}
.output.empty { color: var(--dim); }
.output .placeholder {
  font-size: 12px;
  color: var(--orange);
  letter-spacing: 0.02em;
}
.output .placeholder div { margin-bottom: 4px; }
.output .placeholder div.dim { color: var(--dim); }
.output.streaming::after {
  content: "▌";
  color: var(--orange);
  margin-left: 1px;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* output content emphasis (when AI returns markdown-y text) */
.output h1, .output h2, .output h3 {
  color: var(--orange);
  font-weight: 700;
  letter-spacing: 0.04em;
  margin: 16px 0 8px;
}
.output strong { color: var(--white); }
.output em { color: var(--amber); font-style: normal; text-decoration: underline; text-decoration-color: var(--orange-d); }

/* ============================================================
   COMMAND LINE
   ============================================================ */
.cmdline {
  display: flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  background: #050300;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.cmd-marker {
  color: var(--orange);
  font-weight: 700;
  margin-right: 8px;
  letter-spacing: 0.1em;
}
.cmdline input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--white);
  font-family: var(--mono);
  font-size: 12px;
  outline: none;
  padding: 4px 0;
  letter-spacing: 0.02em;
}
.cmdline input::placeholder { color: var(--dim); }
.cmd-blink {
  display: inline-block;
  width: 8px;
  height: 14px;
  background: var(--orange);
  margin-left: 2px;
  animation: blink 1s steps(1) infinite;
}

/* ============================================================
   TICKER TAPE
   ============================================================ */
.tape {
  height: 22px;
  background: #050300;
  overflow: hidden;
  position: relative;
  border-top: 1px solid var(--border);
}
.tape-track {
  white-space: nowrap;
  display: inline-block;
  padding-left: 100%;
  animation: scroll 80s linear infinite;
  font-size: 11px;
  line-height: 22px;
  letter-spacing: 0.05em;
}
.t-sym { color: var(--orange); margin: 0 4px 0 16px; font-weight: 600; }
.t-px  { color: var(--white); }
.t-sep { color: var(--faint); margin: 0 4px; }
@keyframes scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* ============================================================
   Layout-wide scrollbars
   ============================================================ */
* { scrollbar-width: thin; scrollbar-color: var(--orange-d) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--orange-d); border-radius: 0; }
*::-webkit-scrollbar-track { background: transparent; }