/* Comic UI unify (2026-10-23) — one shape language for the dashboard. Display only: radius, border, shadow, font, spacing.
   Spec: docs/design/COMIC_UI_STYLE.md. Loaded LAST in index.html; roll back by deleting that <link>.
   Does not touch: line colours, mascots, text, numbers, button meaning, warnings, Kill Switch / STOP ALL.
   Does not touch entry-techniques.* (other session); the brain tab (#agents) is styled only from here. */

:root { --cu-ink: var(--ink, #141414); }

/* ---------- 1. Type: Chakra Petch everywhere, Itim only for character speech ---------- */
:is(.topbar, nav.tabs, #overview, #racers, #intel, #agents, #guard, .hq-dialog, footer):not(#cu) :where(*):not(svg *):not(svg) {
  font-family: 'Chakra Petch', 'Noto Sans Thai', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
  font-variant-numeric: tabular-nums;
}
body { font-family: 'Chakra Petch', 'Noto Sans Thai', system-ui, -apple-system, 'Segoe UI', sans-serif; }
/* CCTV on-screen display stays a retro screen font (decoration of the guard page) */
#guard:not(#cu) .guard-clock, #guard:not(#cu) .cam-osd, #guard:not(#cu) .cam-osd * { font-family: 'VT323', 'Chakra Petch', monospace !important; }
/* Character speech keeps the hand-written voice */
:is(#overview, #racers, #intel, #agents, #guard, .hq-dialog):not(#cu) :is(.pc-bubble, .gr-say, .crew-bubble, .racer-grandma-bubble, .racer-grandma-say, .guard-bubble, .racer-angel-bubble, .mb-bubble, .racer-quote-strip, .pc-bubble *, .gr-say *, .crew-bubble *, .racer-grandma-bubble *, .guard-bubble *, .racer-angel-bubble *, .mb-bubble *, .racer-quote-strip *) {
  font-family: 'Itim', 'Noto Sans Thai', system-ui, sans-serif !important;
  font-variant-numeric: normal;
}

/* ---------- 2. Big panels / section frames: square, 5px offset shadow ---------- */
.panel.active, #racers .racer-shell, #intel .intel-shell, #guard .guard-room, .hq-dialog,
#intel .intel-hero, #intel .today-box, #intel .highlights, #intel .now-panel, #intel .stale-box, #intel .tech-moved, #intel .intel-requirements,
#racers .racer-hero, #racers .racer-command-frame, #racers .racer-history-fold,
#overview .oa-box,
#agents .tech-line, #agents .tech-progress, #agents .tech-help, #agents details.intel-tech,
#guard .cctv-wall {
  border-radius: 0 !important;
}
.panel.active, #racers .racer-shell, #intel .intel-shell, #guard .guard-room { border-width: 3px; box-shadow: 5px 5px 0 var(--cu-ink); }
.hq-dialog { border-width: 3px; box-shadow: 5px 5px 0 var(--cu-ink); }
#intel .intel-hero, #intel .today-box, #intel .highlights, #intel .now-panel, #intel .stale-box, #intel .tech-moved,
#racers .racer-hero, #racers .racer-command-frame, #racers .racer-history-fold, #overview .oa-box,
#agents .tech-line, #agents .tech-progress, #agents details.intel-tech { box-shadow: 5px 5px 0 var(--cu-ink); }
#intel .intel-hero, #intel .today-box, #intel .highlights, #intel .now-panel, #intel .stale-box { border-width: 3px; }

/* ---------- 3. Cards / boxes inside a panel: 6px radius, 3px offset shadow ---------- */
#overview .card, #overview .metric, #overview .k-in, #overview .k-wallet, #overview .k-free, #overview .k-closed, #overview .k-open, #overview .k-total,
#overview .mb-card, #overview .overview-pick-card, #overview .crew-parked, #overview .gr-chart,
#racers .racer-card, #racers .racer-real-pnl, #racers .racer-action-error, #racers .racer-grandma-total, #racers .racer-parking, #racers .racer-face,
#intel article, #intel .hl-card, #intel details.intel-row, #intel .intel-decoder, #intel .intel-jobs, #intel .intel-drop, #intel .intel-empty,
#intel .intel-toast, #intel details.today-waiting, #intel .today-row, #intel li.is-new, #intel li.more, #intel .wire-stocks.impact, #intel li:not([class]),
#agents .tech-card, #agents .tech-usable, #agents .tech-top3, #agents .tech-warn, #agents .tech-crit, #agents .tech-reg-box, #agents .tech-table-wrap, #agents li.fail,
#guard .cam, #guard .cam-screen, .intel-requirements,
.hq-lines li, .hq-field input {
  border-radius: 6px !important;
}
#racers .racer-face, #racers .racer-grandma-face { border-radius: 22% !important; }  /* avatar frame keeps its rounded-square look */
#overview .card, #overview .metric, #overview .mb-card, #overview .overview-pick-card,
#racers .racer-card, #racers .racer-real-pnl, #racers .racer-grandma-total,
#intel article, #intel .hl-card, #intel details.intel-row, #intel .intel-decoder, #intel .intel-jobs, #intel .intel-drop,
#agents .tech-card, #agents .tech-usable, #agents .tech-top3,
#guard .cam { box-shadow: 3px 3px 0 var(--cu-ink); }
#guard .cam { box-shadow: inset 0 -5px 0 rgba(0,0,0,.18), 3px 3px 0 var(--cu-ink); }
/* small inner tiles keep 2px border, no extra shadow */
#agents .tech-crit, #agents .tech-reg-box, #agents .tech-table-wrap { box-shadow: none; }

/* ---------- 4. Buttons: square-ish 6px, 3px offset shadow, press effect ---------- */
:is(.topbar, nav.tabs, #overview, #racers, #intel, #agents, #guard, .hq-dialog) :is(button, .hq-login-btn, .hq-primary, .hq-ghost, summary.intel-primary, [role="button"]):not(.stale-head):not(.racer-brain-icon):not(.folder):not(.mb-card):not(.overview-pick-card):not(.hl-card) {
  border-radius: 6px !important;
}
:is(.topbar, #overview, #racers, #intel, #agents, #guard, .hq-dialog) button:not(.tab):not(.stale-head):not(.racer-brain-icon):not(.folder):not(.mb-card):not(.overview-pick-card):not(:disabled) {
  min-height: 40px;
}
:is(.topbar, #overview, #racers, #intel, #agents, #guard, .hq-dialog) button:not(.tab):not(.stale-head):not(.racer-brain-icon):not(.folder):not(.mb-card):not(.overview-pick-card):not(:disabled):active {
  transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--cu-ink);
}
nav.tabs .tab { min-height: 40px; }

/* ---------- 5. Form fields ---------- */
:is(#overview, #racers, #intel, #agents, #guard, .hq-dialog) :is(input:not([type="range"]):not([type="checkbox"]):not([type="radio"]), select, textarea) { border-radius: 6px !important; }

/* ---------- 6. Spacing rhythm ---------- */
.money-board { gap: 12px; }

/* folder-tab ears and every summary: no radius above 6px */
#intel .folder-tab, #intel .folder { border-radius: 6px 6px 0 0 !important; }
:is(#overview, #racers, #intel, #agents, #guard) summary { border-radius: 6px !important; }

/* dialogs (racer forms, grandma, source, note...): square frame like other big panels; their inner boxes are cards */
dialog { border-radius: 0 !important; }
dialog.racer-dialog { border-width: 3px; box-shadow: 5px 5px 0 var(--cu-ink); }
dialog .racer-budget-guide, dialog section, dialog fieldset { border-radius: 6px !important; }

/* Boxes stand straight like เหมืองทอง (user 2026-10-23: "สายซิ่งยังเอียงอยู่"). Only small stickers (state labels, Turbo tag, stamps, logo) may tilt. */
#racers .racer-hero, #racers .racer-summary-main > article, #racers #racerGrid > .racer-card { transform: none !important; }