/* jinteki.win design system — components.
   Themes: four families (Beanstalk = jnet, Ice Wall, Console, Night City), each in two modes.
   data-theme="<family>" is dark, data-theme="<family>-light" is light; JW.setTheme / JW.setMode set it.
   Colours come from tokens.css; this file adds per-family type and shape, then the components.
   Web fonts are not imported here: bundle.js loads only the active family's faces from Google Fonts. */

/* ---------- Mode ---------- */
[data-theme] { color-scheme: dark; }
[data-theme$="-light"] { color-scheme: light; }

/* ---------- Family type + shape (shared by both modes) ---------- */
:root, [data-theme^="jnet"] {
  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SF Mono", Menlo, Consolas, monospace;
  --radius-sm: 0; --radius-md: 0; --radius-lg: 0;
  --title-case: uppercase; --title-spacing: 0.01em;
  --cut: 14px;
  /* legacy aliases used by jinteki.win's stylesheet */
  --serif: var(--font-body); --mono: var(--font-mono);
}
[data-theme^="icewall"] {
  --font-display: "Chakra Petch", "Arial Narrow", sans-serif;
  --font-body: "Chakra Petch", "Arial Narrow", sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  --radius-sm: 0; --radius-md: 0; --radius-lg: 0;
  --title-case: uppercase; --title-spacing: 0.08em;
  --serif: var(--font-body); --mono: var(--font-mono);
}
[data-theme^="console"] {
  --font-display: "VT323", "IBM Plex Mono", monospace;
  --font-body: "IBM Plex Mono", "SF Mono", Menlo, Consolas, monospace;
  --font-mono: "IBM Plex Mono", "SF Mono", Menlo, Consolas, monospace;
  --radius-sm: 0; --radius-md: 0; --radius-lg: 0;
  --title-case: uppercase; --title-spacing: 0.02em;
  --serif: var(--font-body); --mono: var(--font-mono);
}
[data-theme^="nightcity"] {
  --font-display: "Oxanium", "Arial", sans-serif;
  --font-body: "Oxanium", "Arial", sans-serif;
  --font-mono: "Share Tech Mono", "SF Mono", Menlo, Consolas, monospace;
  --radius-sm: 999px; --radius-md: 10px; --radius-lg: 16px;
  --title-case: none; --title-spacing: 0.01em;
  --serif: var(--font-body); --mono: var(--font-mono);
}

/* ---------- Page ---------- */
.jw-page { background: var(--bg); color: var(--text); font-family: var(--font-body); line-height: 1.5; }
.jw-wrap { max-width: 1080px; margin: 0 auto; }
.kicker { font-family: var(--font-mono); font-size: 13px; color: var(--accent); letter-spacing: 0.02em; }
.kicker a { color: inherit; text-decoration: none; }
.kicker a:hover { text-decoration: underline; }
.jw-title { font-family: var(--font-display); font-weight: 600; font-size: 32px; line-height: 1.2; margin: 6px 0 8px; color: var(--text); text-transform: var(--title-case); letter-spacing: var(--title-spacing); }
.lede { color: var(--dim); max-width: 66ch; font-size: 15px; margin: 0; }
.jw-controls { display: inline-flex; align-items: center; gap: 8px; }

/* ---------- Panel ---------- */
.panel { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px 22px; }
.panel-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.panel h2, .panel-title { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--accent); margin: 0; }
.panel h3, .section-label { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--dim); margin: 22px 0 10px; text-transform: uppercase; letter-spacing: 0.04em; }
.panel h3:first-child { margin-top: 0; }
.header-controls { display: flex; align-items: center; gap: 8px; }
.collapse-icon { font-family: var(--font-mono); font-size: 13px; color: var(--dim); background: transparent; border: 1px solid var(--line); border-radius: var(--radius-md); width: 22px; height: 22px; padding: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; line-height: 1; }
.collapse-icon:hover { color: var(--text); border-color: var(--accent-dim); }
/* A collapsible panel's whole header toggles it (enablePanelCollapse in bundle.js). */
.panel[data-collapsible] > .panel-header { cursor: pointer; }
.panel[data-collapsible] > .panel-header:hover .collapse-icon { color: var(--text); border-color: var(--accent-dim); }

/* ---------- Buttons ---------- */
.btn { font-family: var(--font-mono); font-size: 13px; font-weight: 600; cursor: pointer; background: var(--accent); color: var(--on-accent); border: 0; padding: 10px 18px; border-radius: var(--radius-md); box-shadow: var(--glow); transition: filter 0.15s; }
.btn:hover { filter: brightness(1.12); }
.btn.secondary { background: transparent; color: var(--dim); border: 1px solid var(--line); font-weight: 500; padding: 6px 12px; font-size: 12px; box-shadow: none; }
.btn.secondary:hover { color: var(--text); border-color: var(--accent-dim); filter: none; }
.btn.chip { background: transparent; font-family: var(--font-mono); font-size: 11px; font-weight: 400; color: var(--dim); border: 1px solid var(--line); height: 22px; padding: 0 8px; box-shadow: none; }
.btn.chip[aria-pressed="true"] { color: var(--accent); border-color: var(--accent-dim); }
.btn:focus-visible, .collapse-icon:focus-visible, .side-toggle button:focus-visible, .theme-switcher button:focus-visible, .mode-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Inputs ---------- */
.field { display: flex; flex-direction: column; gap: 4px; font-family: var(--font-mono); font-size: 11px; color: var(--dim); }
.input, .select, .jw-textarea { background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius-md); font-family: var(--font-mono); font-size: 12.5px; }
.input, .select { height: 36px; padding: 0 10px; }
.jw-textarea { width: 100%; min-height: 220px; padding: 12px; resize: vertical; box-sizing: border-box; }
.input:focus, .select:focus, .jw-textarea:focus { outline: none; border-color: var(--accent-dim); }

/* ---------- Side toggle (Corp / Runner) ---------- */
.side-toggle { display: inline-flex; gap: 8px; }
.side-toggle button { font-family: var(--font-mono); font-size: 13px; font-weight: 500; padding: 10px 22px; border-radius: var(--radius-md); cursor: pointer; background: transparent; border: 1px solid currentColor; }
.side-toggle .corp { color: var(--corp); }
.side-toggle .runner { color: var(--runner); }
.side-toggle button[aria-pressed="true"] { color: var(--on-accent); font-weight: 600; box-shadow: var(--glow); }
.side-toggle .corp[aria-pressed="true"] { background: var(--corp); border-color: var(--corp); }
.side-toggle .runner[aria-pressed="true"] { background: var(--runner); border-color: var(--runner); }

/* ---------- Theme switcher (family) ---------- */
.theme-switcher { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel); }
.theme-switcher button { font-family: var(--font-mono); font-size: 11.5px; padding: 6px 10px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--dim); cursor: pointer; white-space: nowrap; }
.theme-switcher button:hover { color: var(--text); }
.theme-switcher button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); font-weight: 600; }

/* ---------- Mode toggle (dark / light) ---------- */
.mode-toggle { display: inline-flex; align-items: center; gap: 0; padding: 3px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel); cursor: pointer; font-family: var(--font-mono); font-size: 11.5px; color: var(--dim); }
.mode-toggle .mode-opt { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--radius-md); }
.mode-toggle .mode-opt svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mode-toggle[aria-checked="false"] .mode-dark, .mode-toggle[aria-checked="true"] .mode-light { background: var(--text); color: var(--bg); font-weight: 600; }
.mode-toggle:hover { color: var(--text); }

/* ---------- Stats ---------- */
.summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; }
.stat { border-left: 2px solid var(--accent-dim); padding: 4px 0 4px 12px; display: flex; flex-direction: column; }
.stat .num { font-family: var(--font-mono); font-size: 24px; color: var(--accent); font-variant-numeric: tabular-nums; }
.stat .label { font-family: var(--font-mono); font-size: 11.5px; color: var(--dim); }
.stat.corp { border-left-color: var(--corp); } .stat.corp .num { color: var(--corp); }
.stat.runner { border-left-color: var(--runner); } .stat.runner .num { color: var(--runner); }

/* ---------- Badges + faction tags ---------- */
.badge { display: inline-block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.03em; border: 1px solid var(--accent-dim); color: var(--accent); border-radius: var(--radius-sm); padding: 2px 7px; }
.badge.corp { border-color: var(--corp); color: var(--corp); }
.badge.runner { border-color: var(--runner); color: var(--runner); }
.badge.achievement { font-weight: 600; background: color-mix(in srgb, currentColor 14%, transparent); }
.faction { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10.5px; color: var(--dim); }
.faction::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--fc, var(--faction-neutral)); }
.faction.hb { --fc: var(--faction-hb); } .faction.jinteki { --fc: var(--faction-jinteki); } .faction.nbn { --fc: var(--faction-nbn); } .faction.weyland { --fc: var(--faction-weyland); }
.faction.anarch { --fc: var(--faction-anarch); } .faction.criminal { --fc: var(--faction-criminal); } .faction.shaper { --fc: var(--faction-shaper); }

/* ---------- Data table ---------- */
.data-table { width: 100%; border-collapse: collapse; font-family: var(--font-body); font-size: 13.5px; color: var(--text); }
.data-table th, .data-table td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--line); }
.data-table th { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--dim); white-space: nowrap; cursor: pointer; user-select: none; }
.data-table th:hover { color: var(--accent); }
.data-table th[aria-sort="descending"]::after { content: " ↓"; color: var(--accent); }
.data-table th[aria-sort="ascending"]::after { content: " ↑"; color: var(--accent); }
.data-table td.num, .data-table th.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.data-table td.card { font-weight: 600; }
.data-table td.pos { color: var(--pos); } .data-table td.neg { color: var(--neg); }
.data-table tbody tr:hover td { background: var(--panel-2); }
.meter { display: flex; align-items: center; gap: 10px; }
.meter-track { flex: 1; height: 6px; background: var(--panel-2); overflow: hidden; border-radius: var(--radius-sm); }
.meter-fill { height: 100%; background: var(--side, var(--accent)); }

/* ---------- Charts ---------- */
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-family: var(--font-mono); font-size: 12px; color: var(--dim); }
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.legend-swatch { width: 12px; height: 3px; display: inline-block; }
.chart-axis { stroke: var(--line); }
.chart-grid { stroke: var(--line); stroke-dasharray: 2 3; }
.chart-tick { fill: var(--dim); font-family: var(--font-mono); font-size: 9px; }
.chart-marker { stroke: var(--accent2); stroke-dasharray: 4 3; }

/* ---------- Footer ---------- */
.jw-footer { text-align: center; color: var(--dim); font-family: var(--font-mono); font-size: 11.5px; }
.jw-footer a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* =========================================================
   Family signatures — the one decorative move each family makes.
   [data-theme^="x"] = both modes; [data-theme="x"] = dark only; [data-theme="x-light"] = light only.
   ========================================================= */

/* Beanstalk: a Weyland plant floor — steel plates with cut corners, girder stripes,
   condensed industrial caps, agenda-counter stats (after the Hostile Takeover card frame) */
[data-theme^="jnet"] .jw-title { font-size: 56px; font-weight: 800; line-height: 0.95; letter-spacing: 0.005em; }
[data-theme^="jnet"] .kicker { display: inline-flex; align-items: center; gap: 10px; text-transform: uppercase; letter-spacing: 0.12em; font-size: 12px; font-weight: 600; }
[data-theme^="jnet"] .kicker::before { content: ""; width: 34px; height: 10px; background: repeating-linear-gradient(-45deg, var(--accent) 0 5px, transparent 5px 10px); }
[data-theme^="jnet"] .panel { border: 1px solid var(--line); border-top: 3px solid var(--accent-dim); clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
[data-theme^="jnet"] .panel::before { content: ""; position: absolute; left: var(--cut); top: -3px; width: 56px; height: 3px; background: var(--accent); pointer-events: none; }
[data-theme^="jnet"] .panel-header { padding-bottom: 10px; border-bottom: 1px solid var(--line); }
[data-theme^="jnet"] .panel-header::after { content: ""; order: 1; flex: 0 0 64px; height: 8px; background: repeating-linear-gradient(-45deg, var(--accent-dim) 0 4px, transparent 4px 8px); }
[data-theme^="jnet"] .panel-header > :not(h2) { order: 2; }
[data-theme^="jnet"] .panel h2, [data-theme^="jnet"] .panel-title { font-family: var(--font-display); font-size: 21px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text); margin-right: auto; }
[data-theme^="jnet"] .panel h2::first-letter { color: var(--accent); }
[data-theme^="jnet"] .panel h3, [data-theme^="jnet"] .section-label { color: var(--accent); }
[data-theme^="jnet"] .stat { position: relative; border-left: 0; padding: 10px 14px 10px 16px; background: var(--panel-2); clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); box-shadow: inset 4px 0 0 var(--accent); }
[data-theme^="jnet"] .stat.corp { box-shadow: inset 4px 0 0 var(--corp); } [data-theme^="jnet"] .stat.runner { box-shadow: inset 4px 0 0 var(--runner); }
[data-theme^="jnet"] .stat .num { font-family: var(--font-display); font-size: 36px; font-weight: 800; line-height: 1; }
[data-theme^="jnet"] .stat .label { text-transform: uppercase; letter-spacing: 0.08em; font-size: 10.5px; margin-top: 4px; }
[data-theme^="jnet"] .meter-track { height: 8px; background: repeating-linear-gradient(90deg, var(--panel-2) 0 10px, var(--panel) 10px 12px); }
[data-theme^="jnet"] .meter-fill { clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }
[data-theme^="jnet"] .btn:not(.chip), [data-theme^="jnet"] .side-toggle button { font-family: var(--font-display); font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
[data-theme^="jnet"] .btn.secondary { font-size: 13px; }
[data-theme^="jnet"] .side-toggle button { border-width: 2px; padding: 8px 22px; }
[data-theme^="jnet"] .theme-switcher button, [data-theme^="jnet"] .mode-toggle { text-transform: uppercase; letter-spacing: 0.06em; font-size: 11px; }
[data-theme^="jnet"] .badge { text-transform: uppercase; letter-spacing: 0.08em; }
/* Beanstalk light: daylight on the plant floor — plates lift off a pale concrete ground */
[data-theme="jnet-light"] .panel { border-top-color: var(--accent); }
[data-theme="jnet-light"] .stat { background: #edf3ef; }

/* Ice Wall: server-rack brackets on panels, notched stat tiles, uppercase titles */
[data-theme^="icewall"] .panel::before, [data-theme^="icewall"] .panel::after { content: ""; position: absolute; width: 14px; height: 14px; pointer-events: none; }
[data-theme^="icewall"] .panel::before { left: -1px; top: -1px; border-left: 2px solid var(--accent); border-top: 2px solid var(--accent); }
[data-theme^="icewall"] .panel::after { right: -1px; bottom: -1px; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); }
[data-theme^="icewall"] .panel h2, [data-theme^="icewall"] .panel-title { font-family: var(--font-display); font-size: 15px; text-transform: uppercase; letter-spacing: 0.1em; }
[data-theme^="icewall"] .stat { background: var(--panel-2); border-left-width: 3px; padding: 8px 12px; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); }
[data-theme^="icewall"] .meter-track { background: repeating-linear-gradient(90deg, var(--panel-2) 0 6px, transparent 6px 8px); }
[data-theme="icewall-light"] .panel { box-shadow: 0 1px 0 var(--line), 0 12px 28px -20px rgba(10, 20, 38, 0.35); }

/* Console: bracketed VT323 titles. Dark: amber phosphor, double rules, glow + scanlines. Light: Inverse Video. */
[data-theme^="console"] .panel h2::before, [data-theme^="console"] .panel-title::before { content: "[ "; }
[data-theme^="console"] .panel h2::after, [data-theme^="console"] .panel-title::after { content: " ]"; }
[data-theme^="console"] .panel h2, [data-theme^="console"] .panel-title { font-family: var(--font-display); font-size: 22px; font-weight: 400; letter-spacing: 0.04em; }
[data-theme^="console"] .jw-title { font-size: 48px; font-weight: 400; line-height: 1; }
[data-theme^="console"] .stat { border-left-style: dashed; }
[data-theme="console"] .panel { border: 3px double var(--accent); }
[data-theme="console"] .jw-page, [data-theme="console"].jw-page { text-shadow: 0 0 4px rgba(255, 176, 0, 0.35); }
[data-theme="console"] .jw-page::after, [data-theme="console"].jw-page::after { content: ""; position: fixed; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.25) 0 1px, transparent 1px 3px); }
[data-theme="console"] .btn, [data-theme="console"] .side-toggle button[aria-pressed="true"], [data-theme="console"] .theme-switcher button[aria-pressed="true"], [data-theme="console"] .mode-toggle { text-shadow: none; }
/* Console light — Inverse Video: a white screen where headings print as selected terminal lines.
   Amber #ffb000 is too pale for text on white, so it only fills (bars, buttons, meters) under dark ink #1c1405. */
[data-theme="console-light"] .panel { border: 2px solid #1c1405; }
[data-theme="console-light"] .panel-header { margin: -20px -22px 16px; padding: 6px 22px; background: #ffb000; }
[data-theme="console-light"] .panel h2, [data-theme="console-light"] .panel-title { color: #1c1405; }
[data-theme="console-light"] .panel-header .collapse-icon, [data-theme="console-light"] .panel-header .btn.chip, [data-theme="console-light"] .panel-header > span { color: #1c1405; border-color: #1c1405; background: transparent; }
[data-theme="console-light"] .jw-title { display: inline-block; align-self: flex-start; background: #1c1405; color: #ffb000; padding: 4px 12px 0; }
[data-theme="console-light"] .jw-title::after { content: "█"; color: #ffb000; margin-left: 6px; }
[data-theme="console-light"] .kicker { color: #1c1405; }
[data-theme="console-light"] .kicker::before { content: "> "; color: var(--accent); }
[data-theme="console-light"] .btn:not(.secondary):not(.chip), [data-theme="console-light"] .theme-switcher button[aria-pressed="true"] { background: #ffb000; color: #1c1405; }
[data-theme="console-light"] .btn.chip[aria-pressed="true"] { background: #ffb000; color: #1c1405; border-color: #1c1405; }
[data-theme="console-light"] .mode-toggle[aria-checked="true"] .mode-light { background: #ffb000; color: #1c1405; }
[data-theme="console-light"] .stat { border-left: 4px solid #ffb000; }
[data-theme="console-light"] .stat .num { color: #1c1405; }
[data-theme="console-light"] .stat.corp { border-left-color: var(--corp); } [data-theme="console-light"] .stat.runner { border-left-color: var(--runner); }
[data-theme="console-light"] .stat.corp .num { color: var(--corp); } [data-theme="console-light"] .stat.runner .num { color: var(--runner); }
[data-theme="console-light"] .meter-track { height: 10px; background: repeating-linear-gradient(90deg, #f3e6c4 0 8px, transparent 8px 10px); }
[data-theme="console-light"] .meter-fill { background: repeating-linear-gradient(90deg, var(--side, #ffb000) 0 8px, transparent 8px 10px); }

/* Night City: rounded neon — glowing accent edge on panels, pill controls, glowing numbers */
[data-theme^="nightcity"] .panel h2, [data-theme^="nightcity"] .panel-title { font-family: var(--font-display); font-size: 16px; font-weight: 700; }
[data-theme^="nightcity"] .jw-title { font-weight: 800; }
[data-theme^="nightcity"] .stat { border-left: 0; padding: 10px 14px; background: var(--panel-2); border-radius: 12px; }
[data-theme^="nightcity"] .stat .num { font-family: var(--font-display); font-weight: 700; }
[data-theme^="nightcity"] .meter-track, [data-theme^="nightcity"] .meter-fill { border-radius: 999px; }
[data-theme^="nightcity"] .side-toggle button, [data-theme^="nightcity"] .theme-switcher, [data-theme^="nightcity"] .theme-switcher button, [data-theme^="nightcity"] .mode-toggle, [data-theme^="nightcity"] .mode-toggle .mode-opt { border-radius: 999px; }
[data-theme="nightcity"] .panel { box-shadow: inset 0 1px 0 rgba(255, 61, 242, 0.35); }
[data-theme="nightcity"] .stat .num { text-shadow: 0 0 12px currentColor; }
[data-theme="nightcity"] .meter-fill { box-shadow: 0 0 8px var(--side, var(--accent)); }
[data-theme="nightcity-light"] .panel { box-shadow: inset 0 2px 0 var(--accent), 0 18px 40px -24px rgba(176, 20, 159, 0.45); }
[data-theme="nightcity-light"] .stat .num { text-shadow: 0 4px 14px rgba(176, 20, 159, 0.25); }
[data-theme="nightcity-light"] .meter-fill { box-shadow: 0 2px 8px -2px var(--side, var(--accent)); }

@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }