/* 04 Console — dark, high-contrast chrome for a dim game room. Inter for UI, mono for numbers. */
:root {
  --bg: #14161a;
  --panel: #1c1f24;
  --panel-2: #242830;
  --panel-3: #2b3038;
  --line: #2e333b;
  --line-2: #3b414b;
  --text: #e8e6df;
  --muted: #9a988f;
  --accent: #f5b83d;            /* UI focus */
  --accent-soft: rgba(245, 184, 61, 0.16);
  --primary: #f5b83d;
  --primary-text: #1a1408;
  --danger: #ff7a6e;
  --warn-bg: #3a2f14;
  --sel-ui: #ff3fa4;            /* echoes the map's magenta selection */
  --reticle: #4aa3ff;           /* echoes the map's extent preview */
  --radius: 5px;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display-font: 'Inter', system-ui, sans-serif;
}
body { background: var(--bg); color: var(--text); font-size: 12.5px; }
[hidden] { display: none !important; }
h1, h2, h3 { font-family: var(--ui-font); letter-spacing: -0.01em; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 11.5px; }
.spacer { flex: 1; }
code { background: rgba(255,255,255,0.06); color: var(--text); font-family: var(--mono); }
kbd { font-family: var(--mono); font-size: 10px; border-color: var(--line-2); color: var(--muted); background: var(--panel); padding: 0 5px; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 5px; border: 2px solid var(--panel); }
::-webkit-scrollbar-track { background: transparent; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---- base.css overrides (hard-coded light colours) ---- */
.btn { background: var(--panel-2); border-color: var(--line-2); }
.btn:hover:not(:disabled) { background: var(--panel-3); border-color: #4a515c; }
.btn.primary { background: var(--primary); color: var(--primary-text); border-color: var(--primary); font-weight: 600; }
.btn.primary:hover:not(:disabled) { background: #ffc958; }
.btn.danger { color: var(--danger); }
.seg { background: var(--panel-2); border-color: var(--line-2); }
.seg-btn.on { background: var(--accent); color: var(--primary-text); }
.toggle { background: var(--panel-2); border-color: var(--line-2); }
.toggle.on { background: var(--panel-3); color: var(--text); border-color: #4a515c; }
.chip { background: var(--panel-3); color: var(--muted); }
.chip.gm, .gm-badge { background: #4a1f2a; color: #ff9c9c; }
.lock-badge { background: #4a3a14; color: #f5d78a; }
.warning { color: #f5d78a; }
input[type="text"], input[type="search"], input[type="number"], select, input:not([type]) { background: #12141a; border-color: var(--line-2); color: var(--text); }
select option { background: #12141a; }
input[type="range"] { accent-color: var(--accent); }
.switch .track { background: #3b414b; }
.switch input:checked + .track { background: var(--accent); }
.switch .track::after { background: #e8e6df; }
.impact { background: var(--panel-3); }
.impact.hot { background: var(--accent-soft); color: var(--accent); }
.var-group { background: var(--panel); }
.var-group summary { font-weight: 600; }
.var-row { border-color: var(--line); }
table.props tr { border-color: var(--line); }
.el-deps { border-color: var(--line); }
.list-head .search { background: #12141a; border-color: var(--line-2); }
.element-list .item:hover, .element-list .item.hovered { background: var(--panel-3); }
.element-list .item.selected { background: rgba(255, 63, 164, 0.14); box-shadow: inset 3px 0 0 var(--sel-ui); }
.element-list .lock-ic { color: #f5d78a; }
.ctx-menu, .popover { background: var(--panel-2); border-color: var(--line-2); box-shadow: var(--shadow); font-size: 12px; }
.ctx-group { border-color: var(--line); }
.ctx-item:hover:not(:disabled) { background: var(--panel-3); color: var(--accent); }
.ctx-item.primary { color: var(--accent); }
.progress { background: rgba(20, 22, 26, 0.92); border-bottom-color: var(--line-2); height: 20px; }
.progress-bar { background: var(--accent); opacity: 0.85; }
.progress-label { color: var(--text); font-family: var(--mono); font-size: 11px; }
.toast { background: var(--panel-2); border-color: var(--line-2); border-left-color: var(--accent); }
.toast.warn { border-left-color: var(--danger); }
.crumb { color: var(--muted); }
.crumb:hover:not(:disabled) { background: var(--panel-3); color: var(--text); }
.crumb.current { color: var(--text); }
.crumb-scale { color: var(--accent); opacity: 0.9; }
button.link { color: var(--accent); }
.el-head h2 { font-size: 17px; }
.map-info h2 { font-size: 15px; }
.el-nav .btn { justify-content: flex-start; }

/* ---- app shell ---- */
.app { height: 100vh; }
.screen-world { display: grid; grid-template-columns: 56px auto 1fr 300px; height: 100%; }
.rail { grid-column: 1; } .side { grid-column: 2; } .center { grid-column: 3; } .session { grid-column: 4; }
.screen-world[hidden], .screen-list[hidden] { display: none; }

/* rail */
.rail { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0; background: #101216; border-right: 1px solid var(--line); }
.rail .brand-mark { margin: 2px 0 10px; }
.brand-mark { display: block; width: 26px; height: 26px; border-radius: 6px; background: linear-gradient(135deg, var(--accent), #d2781c); box-shadow: inset 0 0 0 2px #14161a, inset 0 0 0 3px var(--accent); }
.rail-btn { position: relative; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: none; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; }
.rail-btn:hover { background: var(--panel-2); color: var(--text); }
.rail-btn.on { background: var(--panel-3); color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.rail-btn .tip { position: absolute; left: 48px; top: 50%; transform: translateY(-50%); background: var(--panel-3); color: var(--text); padding: 4px 8px; border-radius: 4px; white-space: nowrap; font-size: 11.5px; pointer-events: none; opacity: 0; transition: opacity .12s; z-index: 20; border: 1px solid var(--line-2); display: flex; gap: 8px; align-items: center; }
.rail-btn:hover .tip { opacity: 1; }
.rail .spacer { flex: 1; }

/* slide panel */
.side { width: 320px; display: flex; flex-direction: column; background: var(--panel); border-right: 1px solid var(--line); min-height: 0; }
.side[hidden] { display: none; }
.side-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 8px; border-bottom: 1px solid var(--line); }
.side-head h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.side-body { flex: 1; overflow: auto; padding: 10px 12px 16px; min-height: 0; }
.side-body h3 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 14px 0 6px; }
.side-body h3:first-child { margin-top: 0; }
.side-body p { margin: 4px 0 8px; line-height: 1.45; }
.side-body .layers { display: flex; gap: 4px; flex-wrap: wrap; }

/* centre */
.center { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.topbar { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 10px; background: var(--panel); border-bottom: 1px solid var(--line); }
.up-btn { height: 32px; padding: 0 12px 0 8px; font-weight: 600; gap: 4px; }
.crumb-wrap { min-width: 0; overflow: hidden; flex: 0 1 auto; }
.topbar .row { flex-wrap: nowrap; flex: none; }
.topbar > .seg, .topbar > div > .seg, .topbar .btn { flex: none; }
.breadcrumb { flex-wrap: nowrap; white-space: nowrap; overflow: hidden; }
.crumb-label { overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.readout { display: inline-flex; white-space: nowrap; flex: none; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 4px; border: 1px solid var(--line-2); color: var(--reticle); background: rgba(74, 163, 255, 0.08); }
.readout.pinned { color: var(--accent); background: var(--accent-soft); border-color: rgba(245, 184, 61, 0.4); }
.readout .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chips { display: flex; align-items: center; gap: 4px; padding: 5px 10px; background: #181b20; border-bottom: 1px solid var(--line); overflow-x: auto; }
.chips .chip-lbl { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; margin-right: 4px; }
.fchip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 7px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--panel-2); color: var(--muted); font-size: 12px; cursor: pointer; white-space: nowrap; }
.fchip .sw { width: 8px; height: 8px; border-radius: 2px; background: var(--line-2); }
.fchip.on { color: var(--text); border-color: #4a515c; background: var(--panel-3); }
.fchip.on .sw { background: var(--accent); }
.fchip.na { opacity: 0.4; }
.fchip kbd { margin-left: 2px; padding: 0 4px; font-size: 9.5px; }
.mapwrap { position: relative; flex: 1; min-height: 0; background: #0e1013; }
.mapwrap > .mapsvg-container { position: absolute; inset: 0; }
.mapwrap .mapsvg, .mini-map .mapsvg { background: #0e1013; }
/* Hover glow on big ground polygons (kingdom cells are unclipped) is noise; the info strip names them instead. */
.mapsvg .hl-hov.hl-t-kingdom, .mapsvg .hl-hov.hl-t-continent, .mapsvg .hl-hov.hl-t-ocean, .mapsvg .hl-hov.hl-t-coast, .mapsvg .hl-hov.hl-t-district, .mapsvg .hl-hov.hl-t-floor, .mapsvg .hl-hov.hl-t-ice_cap, .mapsvg .hl-hov.hl-t-ground_patch { display: none; }

/* info strip */
.infostrip { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 4px 12px; background: rgba(20, 22, 26, 0.92); border-top: 1px solid var(--line-2); backdrop-filter: blur(6px); font-size: 12.5px; }
.infostrip.sticky { border-top-color: var(--sel-ui); box-shadow: inset 0 2px 0 rgba(255, 63, 164, 0.35); }
.infostrip .strip-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.infostrip .strip-type { color: var(--muted); }
.infostrip .strip-name { font-weight: 700; color: var(--text); }
.infostrip.sticky .strip-name { color: var(--sel-ui); }
.infostrip .strip-hover { color: var(--muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 32%; }
.infostrip .strip-btns { display: flex; gap: 4px; }
.infostrip .btn { padding: 3px 8px; font-size: 11.5px; }
.coords { color: var(--muted); white-space: nowrap; }

/* toasts sit under the top bar, clear of the mini-map */
.toasts { top: 88px; right: 312px; bottom: auto; }
.progress-wrap { top: 46px; }

/* mini-map */
.minimap { position: absolute; right: 12px; bottom: 44px; width: 260px; background: var(--panel); border: 1px solid var(--line-2); border-radius: 6px; box-shadow: var(--shadow); overflow: hidden; z-index: 5; }
.minimap.large { width: 520px; }
.mini-head { display: flex; align-items: center; gap: 6px; padding: 4px 8px; background: var(--panel-2); border-bottom: 1px solid var(--line); }
.mini-head .small { color: var(--muted); }
.mini-map { height: 160px; }
.minimap.large .mini-map { height: 320px; }
.minimap:not(.large) .mini-map .mapsvg { pointer-events: none; cursor: default; }
.mini-map .mapsvg { box-shadow: none; }

/* session panel */
.session { display: flex; flex-direction: column; background: var(--panel); border-left: 1px solid var(--line); min-height: 0; }
.session-head { display: flex; align-items: baseline; justify-content: space-between; padding: 10px 12px 8px; border-bottom: 1px solid var(--line); text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px; color: var(--muted); font-weight: 600; }
.session-head .small { text-transform: none; letter-spacing: 0; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 55%; }
.inspector { flex: 1; overflow: auto; padding: 10px 12px; min-height: 0; }
.quick { flex: none; max-height: 46%; overflow: auto; padding: 10px 12px 12px; border-top: 1px solid var(--line); background: #191c21; }
.q-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 600; margin-bottom: 8px; }
.q-list { display: flex; flex-direction: column; gap: 6px; }
.qbtn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--panel-2); color: var(--text); cursor: pointer; text-align: left; font-size: 13px; }
.qbtn:hover:not(:disabled) { background: var(--panel-3); border-color: #4a515c; }
.qbtn:disabled { opacity: 0.45; cursor: default; }
.qbtn.primary { background: var(--accent); color: var(--primary-text); border-color: var(--accent); font-weight: 600; }
.qbtn.primary:hover:not(:disabled) { background: #ffc958; }
.qbtn .q-label { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.qbtn .q-label > span, .qbtn .q-label > small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qbtn .q-label small { font-size: 11px; opacity: 0.75; font-weight: 400; }
.qbtn kbd { margin: 0; }
.qbtn.primary kbd { border-color: rgba(0,0,0,0.3); color: var(--primary-text); background: rgba(255,255,255,0.25); }
.q-note { margin: 8px 0 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
.q-note b { color: var(--reticle); font-weight: 600; }
.q-note.pinned b { color: var(--accent); }
#quick-floor .floor-select { display: flex; gap: 6px; margin-bottom: 8px; }
#quick-floor select { flex: 1; }
.hidden-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.hidden-list li { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 4px; cursor: pointer; border-left: 2px solid #ff7a6e; background: var(--panel-2); }
.hidden-list li:hover { background: var(--panel-3); }
.hidden-list li.selected { box-shadow: inset 0 0 0 1px var(--sel-ui); }
.hidden-list .name { flex: 1; }
.hidden-list .dc { color: var(--muted); }

/* legend */
.legend { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; }
.legend .lg { display: flex; align-items: center; gap: 8px; padding: 2px 0; font-size: 12px; }
.legend .lg.wide { grid-column: 1 / -1; }
.legend-sw { flex: none; width: 30px; height: 24px; border-radius: 4px; background: #e6e1d3; cursor: default; box-shadow: none; }
.legend-sw.mode-ink { background: #ede4cd; }
.legend-sw.dark { background: #2b3038; }
.legend .lg .chip { margin-left: auto; }
.legend-note { color: var(--muted); font-size: 11.5px; line-height: 1.4; margin: 6px 0 0; }
.filters { display: flex; flex-direction: column; gap: 4px; }
.filters label { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 4px; background: var(--panel-2); cursor: pointer; }
.filters label span { flex: 1; }

/* export */
.export-panel .export-row { display: flex; gap: 10px; margin-bottom: 8px; }
.export-panel label { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; color: var(--muted); }
.export-panel .plan { padding: 8px 10px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 5px; }
.export-panel .plan b { color: var(--accent); }
.export-actions { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.export-actions .btn { justify-content: flex-start; padding: 8px 12px; }

/* about */
.about h3 { color: var(--accent); }
.about .keys { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: center; font-size: 12px; }
.about .keys kbd { margin: 0; justify-self: start; }
.about .swatches { display: flex; gap: 6px; margin: 6px 0; }
.about .swatch { width: 22px; height: 22px; border-radius: 4px; border: 1px solid var(--line-2); }

/* ---- world list ---- */
.screen-list { display: flex; flex-direction: column; height: 100%; }
.list-top { display: flex; align-items: center; justify-content: space-between; height: 52px; padding: 0 20px; background: var(--panel); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 12px; }
.brand h1 { font-size: 16px; font-weight: 700; }
.list-body { display: grid; grid-template-columns: 1fr 340px; gap: 20px; padding: 20px 24px; flex: 1; min-height: 0; overflow: auto; }
.wtable { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.wtable th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); padding: 6px 10px; border-bottom: 1px solid var(--line-2); font-weight: 600; }
.wtable td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.wtable tr:hover td { background: var(--panel); }
.wtable td.name { font-weight: 600; font-size: 13px; }
.wtable td.name input { width: 100%; }
.wtable td.num { text-align: right; }
.wtable td.acts { white-space: nowrap; text-align: right; }
.wtable td.acts .btn { padding: 3px 8px; font-size: 11.5px; margin-left: 3px; }
.wtable .empty { color: var(--muted); padding: 30px 10px; text-align: center; }
.list-hint { color: var(--muted); font-size: 11.5px; margin: 10px 10px 0; }
.create { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
.create h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.create label { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; color: var(--muted); }
.create label input, .create label select { width: 100%; }
.create .row.three > label { flex: 1; }
.create .row input { flex: 1; }
.create .file-btn { justify-content: center; }
.create .btn.primary { justify-content: center; padding: 8px; }