/* Dark command room. Palette validated with the dataviz validator (dark, all pairs) on 8 Oct 2026:
   human #3987e5, unsure #c98500, bot #d55181; flows buy #199e70, sell #d95926. Status colors are reserved. */
:root {
  color-scheme: dark;
  --bg: #0e0e0d;
  --surface-1: #1a1a19;
  --surface-2: #232321;
  --line: #34342f;
  --text-primary: #ffffff;
  --text-secondary: #c3c2b7;
  --text-muted: #8e8d84;
  --human: #3987e5;
  --unsure: #c98500;
  --bot: #d55181;
  --op: #8e8d84;
  --buy: #199e70;
  --sell: #d95926;
  --move: #9fb4c9;
  --good: #0ca30c;
  --warning: #fab219;
  --serious: #ec835a;
  --critical: #d03b3b;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--text-primary); font: 13px/1.45 var(--font); display: grid; grid-template-rows: auto 1fr 132px auto; overflow: hidden; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.muted { color: var(--text-muted); }
.small { font-size: 11px; }
button, select, input { font: inherit; color: var(--text-primary); background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; }
button { cursor: pointer; padding: 4px 10px; min-width: 34px; min-height: 30px; }
button:hover { border-color: var(--text-muted); }
button:focus-visible, select:focus-visible, input:focus-visible { outline: 2px solid var(--human); outline-offset: 1px; }
a { color: var(--move); }

.top { display: flex; align-items: center; gap: 18px; padding: 8px 14px; border-bottom: 1px solid var(--line); background: var(--surface-1); flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.brand .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--human); box-shadow: 0 0 10px var(--human); }
.clock { display: flex; flex-direction: column; font-variant-numeric: tabular-nums; min-width: 150px; }
#clockDate { font-size: 15px; font-weight: 600; }
.controls { display: flex; gap: 6px; align-items: center; }
.controls select { padding: 4px 6px; min-height: 30px; }
.mode { font-weight: 700; letter-spacing: .08em; padding: 3px 10px; border-radius: 4px; font-size: 12px; }
.mode.replay { background: var(--surface-2); color: var(--text-secondary); border: 1px solid var(--line); }
.mode.live { background: var(--critical); color: #fff; animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px rgba(208, 59, 59, .25); } }
.find { margin-left: auto; }
.find input { width: 300px; padding: 5px 8px; font-family: var(--mono); font-size: 12px; }

.room { display: grid; grid-template-columns: 290px 1fr 360px; grid-template-rows: minmax(0, 1fr); min-height: 0; overflow: hidden; }
.left, .right { overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.right { border-left: 1px solid var(--line); }
.left, .right, .feed, #focusPanel { scrollbar-width: thin; scrollbar-color: #5e5d57 transparent; }
.left, .feed, #focusPanel { mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); }
.left { border-right: 1px solid var(--line); }
.card { background: var(--surface-1); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.card.grow { flex: 1; display: flex; flex-direction: column; min-height: 0; }
#focusPanel { overflow-y: auto; display: block; }
.left .card, .right .card { flex-shrink: 0; }
.right .card.grow { flex-shrink: 1; }
h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-secondary); margin: 0 0 8px; font-weight: 600; }
h3 { font-size: 12px; color: var(--text-secondary); margin: 12px 0 6px; font-weight: 600; }
.hero { font-size: 40px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.parts { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.parts .row { display: flex; justify-content: space-between; gap: 8px; }
.parts .bar { height: 6px; background: var(--surface-2); border-radius: 3px; margin-top: 3px; overflow: hidden; }
.parts .bar i { display: block; height: 100%; background: var(--text-secondary); border-radius: 3px; }
.parts .val { color: var(--text-muted); font-size: 11px; }
.stats { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; margin: 0; font-variant-numeric: tabular-nums; }
.stats dt { color: var(--text-muted); }
.stats dd { margin: 0; text-align: right; }
.supply { display: flex; height: 14px; border-radius: 4px; overflow: hidden; gap: 2px; background: var(--bg); }
.supply i { display: block; height: 100%; }
.legend { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 4px; color: var(--text-secondary); }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.sw.human { background: var(--human); }
.sw.unsure { background: var(--unsure); }
.sw.bot { background: var(--bot); transform: rotate(45deg); border-radius: 1px; }
.sw.op { border: 2px solid var(--op); }
.sw.cl { border: 1px dashed var(--text-secondary); }
.ln { display: inline-block; width: 16px; height: 2px; margin-right: 6px; vertical-align: 3px; }
.ln.buy { background: var(--buy); } .ln.sell { background: var(--sell); } .ln.move { background: var(--move); }

.center { position: relative; min-width: 0; min-height: 0; }
#galaxy { width: 100%; height: 100%; display: block; cursor: grab; }
#galaxy.dragging { cursor: grabbing; }
.hint { position: absolute; left: 12px; bottom: 8px; pointer-events: none; background: rgba(14,14,13,0.75); padding: 2px 6px; border-radius: 4px; }
.tip { position: absolute; pointer-events: none; background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; max-width: 280px; font-size: 12px; box-shadow: 0 6px 20px rgba(0,0,0,.5); }
.tip .addr { font-family: var(--mono); }

.filters { display: flex; gap: 10px; margin-bottom: 6px; color: var(--text-secondary); }
.feed { list-style: none; padding: 0; margin: 0; overflow-y: auto; display: grid; gap: 6px; align-content: start; flex: 1; }
.alert { border-left: 3px solid var(--text-muted); background: var(--surface-2); border-radius: 4px; padding: 6px 8px; cursor: pointer; }
.alert.new { animation: flash 1.2s ease-out; }
@keyframes flash { from { background: #3a3a35; } }
.alert.warn { border-left-color: var(--critical); }
.alert.watch { border-left-color: var(--warning); }
.alert.info { border-left-color: var(--text-muted); }
.alert .sev { font-size: 10px; font-weight: 700; letter-spacing: .06em; margin-right: 6px; }
.alert.warn .sev { color: var(--critical); } .alert.watch .sev { color: var(--warning); } .alert.info .sev { color: var(--text-muted); }
.alert .when { float: right; color: var(--text-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.alert .detail { color: var(--text-secondary); font-size: 12px; }

.focus-head { display: flex; justify-content: space-between; align-items: start; gap: 8px; }
.focus-head .addr { font-family: var(--mono); font-size: 12px; word-break: break-all; }
.chip { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 11px; border: 1px solid var(--line); margin: 2px 4px 2px 0; color: var(--text-secondary); }
.chip.human { border-color: var(--human); } .chip.unsure { border-color: var(--unsure); } .chip.bot { border-color: var(--bot); }
.why { color: var(--text-secondary); font-size: 12px; margin: 2px 0 6px; }
.reasons { margin: 4px 0; padding-left: 16px; color: var(--text-secondary); }
.mini { width: 100%; height: 110px; display: block; background: var(--bg); border-radius: 6px; }
.acts { list-style: none; padding: 0; margin: 0; font-variant-numeric: tabular-nums; font-size: 12px; display: grid; gap: 2px; }
.acts .b { color: var(--buy); } .acts .s { color: var(--sell); } .acts .m { color: var(--move); }
.members { list-style: none; padding: 0; margin: 0; display: grid; gap: 3px; font-size: 12px; }
.members button { font-family: var(--mono); font-size: 11px; padding: 1px 6px; min-height: 0; }
.notice { font-size: 11px; color: var(--text-muted); border-top: 1px solid var(--line); margin-top: 10px; padding-top: 8px; }

.timeline { border-top: 1px solid var(--line); background: var(--surface-1); }
#timeline { width: 100%; height: 100%; display: block; cursor: pointer; }

@media (max-width: 1100px) {
  .room { grid-template-columns: 1fr 320px; }
  .left { display: none; }
}
@media (max-width: 760px) {
  body { grid-template-rows: auto auto 96px; overflow: auto; height: auto; }
  .top { gap: 8px; padding: 8px 16px; }
  .find { margin-left: 0; width: 100%; }
  .find input { width: 100%; }
  .room { grid-template-columns: 1fr; grid-template-rows: auto; overflow: visible; }
  .center { height: min(62vh, calc(100vw + 40px)); order: -1; }
  .left { mask-image: none; }
  .left { display: flex; border-right: 0; padding: 10px 16px; }
  .right { border-left: 0; padding: 10px 16px; }
  .card.grow { max-height: 70vh; }
  .hint { display: none; }
}

/* Orbits additions */
.sw.cl { border: 1px solid var(--text-secondary); background: rgba(195,194,183,0.22); }
.sw.dep { border: 1px solid #9085e9; background: rgba(144,133,233,0.35); }
.toggle { position: absolute; left: 12px; top: 10px; color: var(--text-secondary); background: rgba(14,14,13,0.7); padding: 4px 8px; border-radius: 6px; display: flex; gap: 6px; align-items: center; cursor: pointer; }

/* Watch list and story view */
.tabs { display: flex; gap: 6px; }
.tabs button { flex: 1; font-weight: 600; font-size: 12px; letter-spacing: .04em; color: var(--text-secondary); }
.tabs button.on { background: var(--surface-1); color: var(--text-primary); border-color: var(--text-muted); }
.story-item { background: var(--surface-2); border-radius: 4px; padding: 7px 9px; cursor: pointer; border-left: 3px solid var(--text-muted); }
.story-item:hover { background: #2c2c29; }
.story-item .kind { font-size: 10px; font-weight: 700; letter-spacing: .06em; color: var(--text-secondary); }
.story-item .t { margin: 2px 0; }
.story-item .s { color: var(--text-secondary); font-size: 12px; }
.story-item.deployer { border-left-color: #9085e9; } .story-item.fanout { border-left-color: var(--move); }
.story-item.pricehit, .story-item.coordsell { border-left-color: var(--sell); } .story-item.accumulate { border-left-color: var(--buy); }
.story-item.snipers { border-left-color: var(--bot); }
.storybar { position: absolute; left: 12px; right: 12px; top: 40px; display: flex; gap: 6px; align-items: center; background: rgba(14,14,13,0.85); padding: 6px 8px; border-radius: 6px; border: 1px solid var(--line); }
.storybar #storyTitle { margin-left: 6px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; font-size: 12px; font-variant-numeric: tabular-nums; }
.steps li { padding: 3px 6px; border-radius: 3px; cursor: pointer; color: var(--text-secondary); }
.steps li.cur { background: var(--surface-2); color: var(--text-primary); outline: 1px solid var(--text-muted); }
.steps li.future { opacity: .45; }
.steps .n { display: inline-block; min-width: 22px; color: var(--text-muted); }
.actors { list-style: none; padding: 0; margin: 0; display: grid; gap: 3px; font-size: 12px; }
.actors button { font-family: var(--mono); font-size: 11px; padding: 1px 6px; min-height: 0; }

#storyPanel { overflow-y: auto; display: block; mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); scrollbar-width: thin; scrollbar-color: #5e5d57 transparent; }
.story-item.declared { border-left-color: var(--good); }

.story-item.proj { border-left-color: #9085e9; }
.story-item.proj a { font-size: 11px; }
.story-item.burn { border-left-color: var(--critical); }

.story-item.cl { border-left-color: var(--text-secondary); }
#treePanel { overflow-y: auto; display: block; mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); }
.tabs button { font-size: 11px; padding: 4px 4px; }

/* explanations */
.summary { border-color: #3a3a35; }
.plain { margin: 0; padding-left: 18px; display: grid; gap: 6px; color: var(--text-primary); }
.plain.first a { color: var(--text-primary); }
.parts .meaning { color: var(--text-secondary); font-size: 12px; margin-top: 2px; }
.scen { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 10px; }
.bar.drop { height: 6px; background: var(--surface-2); border-radius: 3px; margin: 3px 0; overflow: hidden; }
.bar.drop i { display: block; height: 100%; background: var(--critical); border-radius: 3px; }
.term { min-width: 0; min-height: 0; width: 16px; height: 16px; padding: 0; border-radius: 50%; font-size: 10px; font-weight: 700; line-height: 14px; color: var(--text-secondary); background: transparent; vertical-align: 1px; text-transform: none; letter-spacing: 0; }
.termtip { position: fixed; z-index: 50; background: var(--surface-2); border: 1px solid var(--text-muted); border-radius: 6px; padding: 8px 10px; font-size: 12px; line-height: 1.45; box-shadow: 0 8px 24px rgba(0,0,0,.6); }
#priceLine { margin-left: 6px; }
#btnTour { min-width: 30px; font-weight: 700; }
.tour { position: fixed; inset: 0; z-index: 60; }
.tour-hole { position: fixed; border-radius: 8px; box-shadow: 0 0 0 9999px rgba(0,0,0,.62); outline: 2px solid var(--human); pointer-events: none; }
.tour-card { position: fixed; background: var(--surface-1); border: 1px solid var(--text-muted); border-radius: 8px; padding: 12px 14px; box-shadow: 0 10px 30px rgba(0,0,0,.6); }
.tour-card p { margin: 6px 0 10px; color: var(--text-secondary); }
.tour-btns { display: flex; justify-content: flex-end; gap: 8px; }
.tour-btns .primary { background: var(--human); border-color: var(--human); color: #fff; }

/* newcomer pass */
.headline { font-size: 15px; font-weight: 600; margin: 4px 0 10px; line-height: 1.4; }
.term { width: 20px; height: 20px; font-size: 11px; line-height: 18px; border-color: var(--text-muted); }
.story-item { overflow-wrap: anywhere; }
.story-item details { margin-top: 4px; }
.story-item details summary { cursor: pointer; }
.mapkey { position: absolute; right: 12px; top: 10px; max-width: 300px; background: rgba(14,14,13,0.82); border: 1px solid var(--line); border-radius: 6px; padding: 6px 9px; color: var(--text-secondary); display: grid; gap: 3px; }
.mapkey b { color: var(--text-primary); font-weight: 600; }
@media (max-width: 760px) { .mapkey { position: static; max-width: none; margin: 6px 0; } }

/* newcomer pass 2: the map key folds away bottom-left; words never orphan their (i) */
.mapkey { top: auto; right: auto; left: 12px; bottom: 34px; max-width: 320px; }
.mapkey summary { cursor: pointer; color: var(--text-primary); font-weight: 600; }
.mapkey:not([open]) { padding: 4px 9px; }
.mapkey .keywords span, .words span { white-space: nowrap; margin-right: 6px; }
[data-term] { white-space: normal; }
.words { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
@media (max-width: 760px) { .mapkey { position: static; max-width: none; margin: 6px 16px; } }
/* phone: the canvas has the fixed height, the map box grows, so the folded key never covers the summary */
@media (max-width: 760px) {
  .center { height: auto; }
  #galaxy { height: min(62vh, calc(100vw + 40px)); }
}

.disclosure { padding: 6px 14px; border-top: 1px solid var(--line); background: var(--surface-1); color: var(--text-muted); grid-row: 4; }
.timeline { grid-row: 3; }
@media (max-width: 760px) { .disclosure { padding: 10px 16px; } }

/* questions for the team (snapshot) */
#questionPanel { overflow-y: auto; display: block; mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); }
.story-item.q.open { border-left-color: var(--warning); }
.story-item.q.answered { border-left-color: var(--good); }
.story-item.q .answer { margin-top: 6px; color: var(--text-primary); }
.story-item.q input, .story-item.q textarea { width: 100%; margin: 2px 0 6px; padding: 5px 7px; font: inherit; background: var(--bg); }
.qlist { gap: 8px; }
.qrow { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; }
.qrow .primary { background: var(--human); border-color: var(--human); color: #fff; }
.lift { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border, #2a2f36); }
.lift h3 { margin: 0 0 6px; font-size: 13px; }
.lift ul { list-style: none; margin: 6px 0; padding: 0; display: grid; gap: 8px; }
.lift li b { display: block; color: var(--text-primary, inherit); }
.lift li span { color: var(--text-secondary); }
.chain { width: 100%; border-collapse: collapse; font-size: 12px; margin: 8px 0; }
.chain th { text-align: left; font-weight: 500; color: var(--text-secondary); padding: 2px 4px; }
.chain td { padding: 2px 4px; font-variant-numeric: tabular-nums; }
.chain td.up { color: #199e70; }
.chain td.down { color: #d95926; }
.chain td.flat { color: var(--text-secondary); }
.chain td:first-child { white-space: nowrap; }

/* phone, 21 Oct 2026: compact header, and the timeline sits right under the map instead of after every card.
   .room steps aside (display: contents) so its panels and the timeline can be ordered in one column. */
@media (max-width: 760px) {
  body { display: flex; flex-direction: column; }
  .room { display: contents; }
  .top { order: 0; gap: 6px 8px; padding: 8px 16px; }
  .brand { flex-basis: 100%; flex-wrap: wrap; gap: 2px 8px; }
  .clock { order: 1; flex: 1; min-width: 0; flex-direction: row; align-items: baseline; gap: 8px; }
  .clock span { white-space: nowrap; }
  .mode { order: 2; }
  #btnTour { order: 3; }
  .controls { order: 4; flex-basis: 100%; }
  .controls select { flex: 1; }
  .find { order: 5; }
  .center { order: 1; }
  .timeline { order: 2; height: 96px; flex-shrink: 0; border-bottom: 1px solid var(--line); }
  .left { order: 3; }
  .right { order: 4; }
  .disclosure { order: 5; }
}