/* The shell: one pane of glass. A top bar, a rail of sections, the workspace, a live dock, and a status line,
   in the codex's two inks: phosphor terminal in the dark, green-bar printout in the light. */

:root { --rail-w: 214px; --dock-w: var(--dock-open-w, 330px); --top-h: 46px; --status-h: 26px; }
.rail-slim { --rail-w: 54px; }
.dock-closed { --dock-w: 0px; }

html, body { height: 100%; }
body { padding: 0; overflow: hidden; background-image: none; }
.shell {
  display: grid; height: 100vh; height: 100dvh;
  grid-template-columns: var(--rail-w) minmax(0, 1fr) var(--dock-w);
  grid-template-rows: var(--top-h) minmax(0, 1fr) var(--status-h);
  grid-template-areas: "top top top" "rail pane dock" "status status status";
  transition: grid-template-columns .18s ease;
}
.shell.bare { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "pane" "status"; }
@media (prefers-reduced-motion: reduce) { .shell { transition: none; } }

/* --- Keyboard and screen readers --- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* First in the tab order, out of sight until it has focus. */
.skip-link { position: fixed; left: 8px; top: 6px; z-index: 200; padding: 6px 12px; background: var(--paper); color: var(--accent); border: 2px solid var(--accent); font-size: 13px; transform: translateY(-200%); }
.skip-link:focus { transform: none; }
select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* The browser's grey placeholder is too faint on the printout. */
::placeholder { color: var(--dim); opacity: 1; }
/* After in-place navigation focus moves to the page's heading, or to the pane when it has none. */
.pane-inner h1[tabindex]:focus { outline: none; }
.pane-inner h1[tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.pane:focus-visible, .dock-panel:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* --- Top bar --- */
.topbar {
  grid-area: top; display: flex; align-items: center; gap: 14px; padding: 0 12px 0 10px;
  border-bottom: 1px solid var(--rule); background: var(--paper); min-width: 0;
}
.brand { border: none; color: var(--ink); font-weight: 600; letter-spacing: .14em; white-space: nowrap; font-size: 14px; }
.brand span { font-weight: 400; letter-spacing: .06em; margin-left: 2px; }
.icon-btn { font: inherit; font-size: 15px; line-height: 1; color: var(--ink); background: none; border: 1px solid transparent; padding: 5px 8px; cursor: pointer; }
.icon-btn:hover { border-color: var(--rule); color: var(--accent); }
.rail-toggle { display: none; }
.palette-open {
  margin-left: auto; display: flex; align-items: center; gap: 8px; font: inherit; font-size: 12px; color: var(--dim);
  background: transparent; border: 1px solid var(--rule); padding: 4px 8px 4px 10px; cursor: pointer; min-width: 0;
}
.palette-open:hover { border-color: var(--accent); color: var(--ink); }
.palette-open .po-text { min-width: 14ch; text-align: left; }
kbd { font: inherit; font-size: 10px; letter-spacing: .04em; border: 1px solid var(--rule); border-bottom-width: 2px; padding: 0 4px; color: var(--dim); }
.shell.bare .clock { margin-left: auto; }
.topbar .clock { font-size: 13px; white-space: nowrap; }
.topbar .theme { font-size: 12px; }

/* --- Rail --- */
.rail {
  grid-area: rail; border-right: 1px solid var(--rule); background: var(--paper); display: flex; flex-direction: column;
  min-height: 0; overflow: hidden;
}
.rail-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 8px 0; scrollbar-width: thin; }
.rail-group { padding: 2px 0 8px; position: relative; }
.rail-h {
  display: flex; align-items: center; gap: 10px; padding: 6px 14px 4px; font-size: 11px; letter-spacing: .12em; color: var(--dim); white-space: nowrap;
  font-family: inherit; background: none; border: none; width: 100%; text-align: left; cursor: pointer;
}
.rail-h:hover { color: var(--accent); }
.rail-h::after { content: "▾"; margin-left: auto; font-size: 12px; line-height: 1; }
.rail-group.folded .rail-h::after { content: "▸"; }
/* A folded group still shows while the page you're on is in it. */
:root:not(.rail-slim) .rail-group.folded:not(:has(a.on)) > .rail-items { display: none; }
.rail-h i { font-style: normal; width: 1.6em; text-align: center; color: var(--accent); font-size: 13px; flex: none; }
.rail-items { display: grid; }
.rail-items a {
  border: none; display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 40px; color: var(--ink); font-size: 13px;
  border-left: 2px solid transparent; white-space: nowrap; position: relative;
}
.rail-items a span { overflow: hidden; text-overflow: ellipsis; }
.rail-items a:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); color: var(--accent); }
.rail-items a.on { border-left-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, transparent); font-weight: 600; }
.rail-items a.on::before { content: "›"; position: absolute; left: 26px; }
.fav-row { position: relative; display: grid; }
.fav-row a { padding-right: 26px; }
.fav-x { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font: inherit; font-size: 13px; line-height: 1; color: var(--dim); background: none; border: none; padding: 2px 4px; cursor: pointer; opacity: 0; }
.fav-row:hover .fav-x, .fav-x:focus-visible { opacity: 1; }
.fav-x:hover { color: var(--alert); }
.fav-hint { margin: 0; padding: 2px 12px 2px 40px; font-size: 12px; color: var(--dim); white-space: nowrap; }
.fav-toggle[aria-pressed="true"], .pane-head [data-pane-act="fav"][aria-pressed="true"] { color: var(--accent); }
.badge { margin-left: auto; font-size: 10px; font-weight: 600; letter-spacing: .04em; color: var(--paper); background: var(--accent); padding: 0 5px; line-height: 15px; box-shadow: 0 0 var(--glow) var(--accent); }
.badge.dot { width: 7px; height: 7px; padding: 0; border-radius: 50%; }
.rail-foot { border-top: 1px solid var(--rule); padding: 6px 8px; display: grid; gap: 4px; font-size: 12px; }
.acting-as { color: var(--accent); padding: 2px 6px; display: flex; gap: 6px; flex-wrap: wrap; }
.rail-slim-btn { font: inherit; font-size: 12px; color: var(--dim); background: none; border: none; text-align: left; padding: 4px 6px; cursor: pointer; display: flex; gap: 10px; align-items: center; white-space: nowrap; }
.rail-slim-btn:hover { color: var(--accent); }

/* Slim rail: group glyphs only, each group flying out on hover or focus. */
.rail-slim .rail-h span, .rail-slim .rail-slim-btn span + span, .rail-slim .acting-as span { display: none; }
.rail-slim .rail-slim-btn span:first-child { transform: rotate(180deg); }
.rail-slim .rail-h { justify-content: center; padding: 8px 0; font-size: 16px; }
.rail-slim .rail-h i { font-size: 16px; }
.rail-slim .rail-h::after { display: none; }
.rail-slim .rail { overflow: visible; }
.rail-slim .rail-nav { overflow: visible; }
.rail-slim .rail-items {
  display: none; position: absolute; left: calc(100% - 4px); top: 0; z-index: 60; min-width: 210px; background: var(--paper);
  border: 3px double var(--ink); padding: 6px 0; box-shadow: 6px 6px 0 color-mix(in srgb, var(--rule) 55%, transparent);
}
.rail-slim .rail-items a { padding-left: 26px; }
/* A slim rail's fly-out says which group it is; the full rail's heading already does. */
.rail-fly-h { display: none; margin: 0 0 4px; padding: 0 12px 4px; font-size: 11px; letter-spacing: .12em; color: var(--dim); border-bottom: 1px solid var(--rule); }
.rail-slim .rail-fly-h { display: block; }
.rail-slim .rail-items a.on::before { left: 12px; }
.rail-slim .rail-group:hover .rail-items, .rail-slim .rail-group:focus-within .rail-items { display: grid; }
.rail-slim .rail-group:has(a.on) .rail-h { background: color-mix(in srgb, var(--accent) 13%, transparent); }
.rail-slim .rail-group:has(.badge:not([hidden])) .rail-h i::after { content: "•"; position: absolute; margin: -6px 0 0 2px; color: var(--accent); font-size: 14px; }

/* --- Workspace --- */
.pane {
  grid-area: pane; overflow-y: auto; overflow-x: hidden; min-width: 0; outline: none; position: relative;
  overflow-anchor: none;   /* shell.js keeps your place across live refreshes, the same way in every browser */
  /* Green-bar paper scrolls with the work in the light; a flat screen in the dark. */
  background-color: var(--paper);
  background-image: repeating-linear-gradient(var(--paper) 0 72px, var(--band) 72px 144px);
  background-attachment: local;
  scrollbar-width: thin; scrollbar-color: var(--rule) transparent;
}
.pane-inner { padding: 18px 22px 40px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-content: start; max-width: 1500px; margin: 0 auto; }
.shell.bare .pane-inner { max-width: 760px; padding-top: 40px; }
.pane.loading .pane-inner { opacity: .5; transition: opacity .15s .1s; }
.pane-progress { position: absolute; top: 0; left: 0; height: 2px; background: var(--ink); z-index: 5; width: 0; transition: width .3s; }

/* Page headers: the codex's double rule, as a strip across the top of the work. */
.pane .frame { border: none; border-bottom: 3px double var(--ink); padding: 2px 0 8px; align-items: center; }
.pane .frame h1 { font-size: clamp(18px, 2.4vw, 24px); letter-spacing: .1em; }
.pane .frame .grade { font-size: 12px; letter-spacing: .08em; color: var(--dim); }
.pane .hero { padding: 16px 18px 14px; gap: 8px; }
.pane .hero h1 { font-size: clamp(24px, 4vw, 38px); }

/* Every section is a panel: a header strip and its contents, like a dashboard widget. */
.pane .block {
  border: 1px solid var(--rule); background: var(--paper); padding: 0 14px 12px; gap: 6px; min-width: 0;
  box-shadow: 0 0 0 0 transparent; transition: border-color .15s;
}
.pane .block:hover { border-color: color-mix(in srgb, var(--ink) 55%, var(--rule)); }
.pane .block > h2 {
  margin: 0 -14px 6px; padding: 7px 14px; font-size: 12px; letter-spacing: .1em; border-bottom: 1px solid var(--rule);
  background: color-mix(in srgb, var(--accent) 5%, transparent); display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
}
.pane .block > h2 .dim { font-size: 11px; letter-spacing: .04em; }
.pane .block > dl, .pane .block > p, .pane .block > .chart, .pane .block > .orrery, .pane .block > .galaxy,
.pane .block > ol.feed, .pane .block > details.op, .pane .block > pre, .pane .block > .msg-card { margin-left: 0; padding-left: 0; }
.pane .block > .actions { padding-left: 0; }
.pane .block > .orrery, .pane .block > .galaxy { margin: 0 -14px -12px; }
.pane .block > .orrery .orrery-bar, .pane .block > .galaxy .galaxy-bar { padding: 0 14px; }
.pane .block > .orrery .orrery-stage, .pane .block > .galaxy .galaxy-stage { border-left: none; border-right: none; border-bottom: none; }
.pane .block > .orrery .orrery-note, .pane .block > .orrery .legend, .pane .block > .galaxy .legend { padding: 0 14px; }
.pane .block > .orrery > :last-child, .pane .block > .galaxy > :last-child { padding-bottom: 10px; }
.pane .block .tablewrap { margin: 0 -14px; padding: 0 14px; }
.pane .cols { gap: 16px; }
.pane .split { gap: 16px; }
.pane .cmdpanel { background: var(--paper); top: 0; max-height: calc(100vh - 140px); }
.pane > .pane-inner > .tablewrap, .pane-inner > .tablewrap { border: 1px solid var(--rule); background: var(--paper); padding: 0 12px; }
.pane .readout { margin: 0; }
.pane-inner > .search, .pane-inner > form.search { background: var(--paper); border: 1px solid var(--rule); padding: 8px 12px; }
.pane-inner > .chart { margin-left: 0; }
.pane-inner > details.op { margin-left: 0; background: var(--paper); }
.pane .tabs { background: var(--paper); }

/* Overview: panels in a grid that reflows. */
.panels { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); align-items: start; }
.panels > .wide2 { grid-column: span 2; }
.panels > .full { grid-column: 1 / -1; }
@container pane (max-width: 760px) { .panels > .wide2 { grid-column: auto; } }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; }
.stat { border: 1px solid var(--rule); background: var(--paper); padding: 10px 14px; display: grid; gap: 2px; color: var(--ink); }
a.stat { border-bottom: 1px solid var(--rule); }
a.stat:hover { border-color: var(--accent); }
.stat .k { font-size: 11px; letter-spacing: .1em; color: var(--dim); }
.stat .v { font-size: 26px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat .s { font-size: 12px; color: var(--dim); }
.stat.lit .v { color: var(--accent); text-shadow: 0 0 calc(var(--glow) * 2) var(--accent); }
.stat.warn .v { color: var(--alert); }

/* --- Dock --- */
.dock { grid-area: dock; border-left: 1px solid var(--rule); background: var(--paper); display: flex; flex-direction: column; min-height: 0; min-width: 0; overflow: hidden; }
.dock-closed .dock { border-left: none; }
/* The dock's left edge: drag it (or use the arrow keys on it) to make the dock wider or narrower. */
.dock { position: relative; }
/* All of it inside the dock, which clips what pokes out. */
.dock-grip { position: absolute; left: 0; top: 0; bottom: 0; width: 8px; z-index: 5; cursor: col-resize; touch-action: none; }
.dock-grip::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: transparent; transition: background .12s; }
.dock-grip:hover::after, .dock-grip:focus-visible::after, .dock-resizing .dock-grip::after { background: var(--accent); width: 2px; box-shadow: 0 0 var(--glow) var(--accent); }
.dock-grip:focus-visible { outline: none; }
.dock-closed .dock-grip { display: none; }
.dock-resizing, .dock-resizing * { cursor: col-resize !important; user-select: none; }
.dock-resizing .shell { transition: none; }
.dock-tabs { display: flex; border-bottom: 1px solid var(--rule); flex: none; }
.dock-tabs button {
  flex: 1; font: inherit; font-size: 11px; letter-spacing: .1em; color: var(--dim); background: none; border: none;
  border-bottom: 2px solid transparent; padding: 9px 4px 7px; cursor: pointer; white-space: nowrap; position: relative;
}
.dock-tabs button:hover { color: var(--ink); }
.dock-tabs button[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.dock-tabs .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); vertical-align: 2px; box-shadow: 0 0 var(--glow) var(--accent); }
.dock-panel { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 12px; font-size: 13px; display: flex; flex-direction: column; }
.dock-panel[hidden] { display: none; }
.dock-panel[data-panel="chat"] { padding: 0; }
.dock-panel[data-panel="chat"] .ooc { flex: 1; }
.dock-panel[data-panel="chat"] .w-foot { padding: 4px 12px 8px; }
.dock-feed { padding: 0 !important; margin: 0; max-height: none !important; font-size: 12.5px; }
.dock-feed li { padding: 3px 0; }
.feed-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 6px; flex: none; }
.feed-chip { font: inherit; font-size: 10.5px; letter-spacing: .04em; color: var(--dim); background: none; border: 1px solid var(--rule); padding: 1px 6px; cursor: pointer; }
.feed-chip:hover { color: var(--ink); }
.feed-chip.on { color: var(--accent); border-color: var(--accent); }

/* --- Status line --- */
.statusline {
  grid-area: status; display: flex; gap: 16px; align-items: center; padding: 0 12px; font-size: 11px; letter-spacing: .04em;
  border-top: 1px solid var(--rule); background: var(--paper); color: var(--dim); white-space: nowrap; overflow: hidden;
}
.statusline .grow { flex: 1; }
.statusline b { color: var(--ink); font-weight: 500; }
.statusline a { font-size: 11px; }
.led { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--dim); vertical-align: 0; }
.led.on { background: var(--accent); box-shadow: 0 0 calc(var(--glow) * 2) var(--accent); }
.led.off { background: var(--alert); }

/* --- Palette --- */
.palette { border: 3px double var(--ink); background: var(--paper); color: var(--ink); padding: 0; width: min(680px, calc(100vw - 24px)); margin-top: 12vh; font: inherit; }
.palette::backdrop { background: color-mix(in srgb, var(--paper) 25%, rgb(0 0 0 / .55)); }
.palette form { display: grid; }
.pal-input { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--rule); }
.pal-input span { color: var(--accent); font-weight: 600; }
.pal-input input { flex: 1; font: inherit; font-size: 15px; color: var(--ink); background: transparent; border: none; outline: none; caret-color: var(--accent); }
.pal-list { list-style: none; margin: 0; padding: 4px 0; max-height: min(52vh, 460px); overflow-y: auto; }
.pal-list li { display: grid; grid-template-columns: 9ch minmax(0, 1fr); gap: 10px; padding: 5px 14px; cursor: pointer; align-items: baseline; }
.pal-list li .kind { font-size: 10px; letter-spacing: .1em; color: var(--dim); text-transform: uppercase; }
.pal-list li .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal-list li .t small { color: var(--dim); margin-left: 8px; }
.pal-list li[aria-selected="true"] { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.pal-list li[aria-selected="true"] .t { color: var(--accent); }
.pal-list li mark { background: none; color: var(--accent); text-decoration: underline; }
.pal-foot { padding: 6px 14px; border-top: 1px solid var(--rule); display: flex; gap: 6px; align-items: center; }
.pal-x { font: inherit; font-size: 15px; color: var(--dim); background: none; border: 1px solid transparent; min-width: 32px; min-height: 32px; cursor: pointer; }
.pal-x:hover { color: var(--accent); border-color: var(--rule); }
.pal-touch { display: none; }
/* Touch: no keys to name, a finger-sized close, and the kind column narrow enough to leave the names room. */
@media (pointer: coarse) { .pal-keys { display: none; } .pal-touch { display: inline; } .pal-x { min-width: 40px; min-height: 40px; } }
@media (max-width: 560px) { .pal-list li { grid-template-columns: 7ch minmax(0, 1fr); gap: 6px; padding: 7px 12px; } .pal-list li .kind { font-size: 9px; letter-spacing: .04em; } .palette { margin-top: 8vh; } }

/* Things the old page layout had that the shell replaces. */
/* (The pre-shell page footer and header bar no longer exist inside the workspace.) */
.pane main { padding: 0; }
.pane .wide { max-width: none; }

/* --- Narrow screens: rail and dock become drawers --- */
@media (max-width: 1100px) {
  :root { --dock-w: 0px; }
  .dock { position: fixed; right: 0; top: var(--top-h); bottom: var(--status-h); width: min(340px, 92vw); z-index: 70; transform: translateX(105%); transition: transform .18s; border-left: 3px double var(--ink); }
  .dock-open .dock { transform: none; box-shadow: -8px 0 0 color-mix(in srgb, var(--rule) 40%, transparent); }
  .dock-closed .dock { border-left: 3px double var(--ink); }
  .dock-grip { display: none; }
}
@media (max-width: 820px) {
  :root, .rail-slim { --rail-w: 0px; }
  .rail-toggle { display: inline-block; }
  .rail { position: fixed; left: 0; top: var(--top-h); bottom: var(--status-h); width: min(260px, 84vw); z-index: 70; transform: translateX(-105%); transition: transform .18s; border-right: 3px double var(--ink); }
  .rail-open .rail { transform: none; box-shadow: 8px 0 0 color-mix(in srgb, var(--rule) 40%, transparent); }
  .rail-slim .rail-h span, .rail-slim .rail-slim-btn span + span { display: inline; }
  .rail-slim .rail-items { display: grid; position: static; border: none; box-shadow: none; padding: 0; }
  .rail-slim .rail-h { justify-content: flex-start; padding: 6px 14px 4px; font-size: 11px; }
  .rail-slim .rail-h::after { display: inline; }
  .rail-slim .rail-fly-h { display: none; }
  .rail-slim .rail-group.folded:not(:has(a.on)) > .rail-items { display: none; }
  .rail-slim-btn { display: none; }
  .palette-open .po-text, .palette-open kbd { display: none; }
  /* Finger-sized: every top-bar button is at least 40 px square, the palette's ⌕ an icon button like the rest. */
  .topbar .icon-btn, .topbar .palette-open, .topbar .theme { min-width: 40px; min-height: 40px; }
  .palette-open { margin-left: auto; padding: 0 8px; justify-content: center; border-color: transparent; color: var(--ink); font-size: 18px; }
  .pane-inner { padding: 12px 12px 32px; }
  /* A phone's status line keeps the stream and the alert count; the settings, versions and host go first. */
  .statusline [data-cycle-text], .statusline a:not(.al-ind), .statusline .fx-ctl, .statusline .sl-ver { display: none; }
  .statusline { gap: 12px; }
  .topbar { gap: 8px; }
}
/* A phone has room for the buttons or the name: the rail's Overview stands in for the name. */
@media (max-width: 480px) { .topbar .brand { display: none; } .topbar { gap: 4px; padding: 0 6px; } .topbar .theme { padding: 0 5px; } }

/* The codex sheet sets <main> and <footer> as a centred 860px column; in the shell they fill their cells. */
main.pane { max-width: none; margin: 0; padding: 0; display: block; gap: 0; }
footer.statusline { max-width: none; margin: 0; padding: 0 12px; border-top: 1px solid var(--rule); }
.pane .block > h2 + .orrery, .pane .block > h2 + .galaxy { margin-top: -12px; }
.pane .block > h2 + .orrery .orrery-stage, .pane .block > h2 + .galaxy .galaxy-stage { border-top: none; }
.pane .block > h2 + .orrery .orrery-bar { padding-top: 8px; }
.panels .orrery.compact .orrery-stage { max-height: min(440px, calc(100vh - 150px)); }
.pane .frame { flex-wrap: wrap; row-gap: 4px; }
.pane .frame h1 { flex: 1 1 auto; min-width: min(100%, 12ch); }
.dock-tabs .dot[hidden], .badge[hidden] { display: none; }

/* --- Bodies: generic pictures in two inks, cutaways, composition bars --- */
.body-art { width: 100%; height: auto; display: block; overflow: visible; }
.body-art line, .body-art path, .body-art polygon, .body-art circle, .body-art ellipse, .body-art rect { vector-effect: non-scaling-stroke; }
.bi-rays line { stroke: var(--accent); stroke-width: 1.2; opacity: .7; }
.bi-rays { transform-origin: 50% 50%; transform-box: view-box; animation: spin 90s linear infinite; }
.bi-corona { fill: none; stroke: var(--accent); stroke-dasharray: 2 4; opacity: .6; }
.bi-star { fill: var(--accent); filter: drop-shadow(0 0 calc(var(--glow) * 4) var(--accent)); }
.bi-starcore { fill: var(--paper); opacity: .25; }
.bi-disc { fill: color-mix(in srgb, var(--accent) 16%, var(--paper)); }
.k-moon .bi-disc { fill: color-mix(in srgb, var(--ink) 12%, var(--paper)); }
.bi-limb { fill: none; stroke: var(--accent); stroke-width: 1.5; filter: drop-shadow(0 0 var(--glow) var(--accent)); }
.k-moon .bi-limb { stroke: var(--ink); }
.bi-terrain { stroke: var(--accent); stroke-width: 1.4; opacity: .55; }
.bi-crater { fill: none; stroke: var(--ink); stroke-width: 1; opacity: .7; }
.bi-night { opacity: .9; }
.bi-band { fill: var(--accent); opacity: .5; }
.bi-band2 { fill: var(--accent); opacity: .25; }
.bi-band3 { fill: var(--ink); opacity: .2; }
.bi-spot { fill: var(--paper); stroke: var(--accent); stroke-width: 1.2; }
.bi-ring { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-dasharray: 6 2; }
.bi-arc { fill: none; stroke: var(--rule); stroke-dasharray: 2 4; }
.bi-rock { fill: color-mix(in srgb, var(--accent) 22%, var(--paper)); stroke: var(--accent); stroke-width: 1; }
.bi-rock.big { fill: color-mix(in srgb, var(--accent) 40%, var(--paper)); }
.bi-ice { fill: none; stroke: var(--ink); stroke-width: 1; }
.bi-shard { stroke: var(--accent); stroke-width: 1.4; }
.bi-frag { stroke: var(--accent); stroke-width: 1.6; }
.bi-dust { fill: var(--accent); }
.bi-head { fill: var(--accent); filter: drop-shadow(0 0 calc(var(--glow) * 3) var(--accent)); }
.bi-warp { fill: none; stroke: var(--accent); stroke-width: 1; transform-origin: 50% 50%; transform-box: view-box; animation: warp 6s ease-in-out infinite; }
.bi-eye { fill: var(--alert); filter: drop-shadow(0 0 calc(var(--glow) * 2) var(--alert)); }
@keyframes warp { 50% { transform: scale(1.08) rotate(8deg); opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .bi-rays, .bi-warp { animation: none; } }

.cutaway { width: 100%; max-width: 360px; height: auto; display: block; margin: 0 auto; }
.cw-seg, .cw-unknown { stroke: var(--paper); stroke-width: 1; }
.cw-seg:hover { stroke: var(--ink); stroke-width: 1.5; }
.cw-unknown { opacity: .9; }
.cw-core { fill: var(--ink); opacity: .85; }
.cw-corelabel { fill: var(--paper); font: 600 9px var(--font); letter-spacing: .1em; }
.comp-bar { width: 100%; height: 14px; display: block; border: 1px solid var(--rule); padding: 1px; box-sizing: border-box; }
.comp-bar rect:hover { stroke: var(--ink); stroke-width: .3; }
.sw-svg { width: 14px; height: 11px; vertical-align: -1px; }
.legend-row { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; }
.legend-row .lg { display: inline-flex; gap: 6px; align-items: center; }

.body-filter { display: flex; flex-wrap: wrap; gap: 8px 12px; }
.body-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.body-card { border: 1px solid var(--rule); background: var(--paper); color: var(--ink); display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 8px 12px; padding: 10px 12px; align-items: center; transition: border-color .15s, transform .15s; }
.body-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.bc-art { width: 76px; height: 76px; }
.bc-text { display: grid; gap: 2px; min-width: 0; }
.bc-text b { color: var(--accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc-comp, .bc-meta { grid-column: 1 / -1; }
.bc-meta { display: flex; flex-wrap: wrap; gap: 2px 12px; }
.body-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .body-hero { grid-template-columns: minmax(0, 1fr); } }
.art-stage { max-width: 300px; margin: 6px auto 4px; }
.cut-stage { padding: 6px 0; }
.layer-list { display: grid; gap: 6px; }
.layer-row { display: grid; grid-template-columns: 9ch minmax(0, 1fr) 8ch; gap: 4px 12px; align-items: center; font-size: 13px; }
.layer-row .lr-name { font-size: 11px; letter-spacing: .08em; color: var(--dim); }
.layer-row .lr-total { text-align: right; }
.layer-row .lr-mix { grid-column: 2 / -1; margin-top: -2px; }
.layer-row.unknown .lr-unk { color: var(--rule); letter-spacing: .1em; font-size: 12px; border: 1px dashed var(--rule); text-align: center; }
.site { display: grid; gap: 3px; margin-bottom: 8px; }
.sub { font-size: 11px; letter-spacing: .1em; color: var(--dim); margin: 10px 0 2px; }
.timeline { list-style: none; margin: 0; padding: 0 0 0 12px; border-left: 1px solid var(--rule); display: grid; gap: 6px; font-size: 13px; }
.timeline li { position: relative; }
.timeline li::before { content: ""; position: absolute; left: -16px; top: 7px; width: 7px; height: 7px; background: var(--accent); border-radius: 50%; }
.timeline b { font-weight: 500; color: var(--accent); }

/* --- Combat: the battlespace --- */
.battle-layout { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .battle-layout { grid-template-columns: minmax(0, 1fr); } }
.places { display: grid; gap: 4px; }
.place { border: 1px solid var(--rule); padding: 6px 10px; display: grid; gap: 1px; color: var(--ink); }
.place b { color: var(--accent); font-weight: 600; font-size: 13px; }
.place.fight b { color: var(--alert); }
.place:hover, .place.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.battle { display: grid; gap: 6px; outline: none; }
.battle-stage { position: relative; border: 1px solid var(--rule); overflow: hidden; touch-action: none;
  width: 100%; box-sizing: border-box; aspect-ratio: 1; min-height: 220px; max-height: min(680px, calc(100vh - var(--top-h, 0px) - var(--status-h, 0px) - 150px));
  background: var(--paper); }   /* the body's glow is drawn on the map (.bs-halo), so it moves with it */
.pane .block > .battle { margin: 0 -14px; }
.pane .block > .battle .battle-stage { border-left: none; border-right: none; }
.pane .block > .battle .bs-info { padding: 0 14px; }
.battle-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; user-select: none; touch-action: none; }
.bs-field { fill: color-mix(in srgb, var(--accent) 3%, transparent); }
.bs-ring { fill: none; stroke: var(--rule); stroke-dasharray: 2 4; }
.bs-ringlabel { fill: var(--dim); font: 11px var(--font); }
.bs-ringlabel.edge { fill: var(--ink); letter-spacing: .06em; }
.bs-axis { stroke: var(--rule); stroke-width: .6; opacity: .6; }
.bs-edge { fill: none; stroke: var(--ink); stroke-width: 1.4; }
.bs-edge2 { fill: none; stroke: var(--ink); stroke-width: .6; opacity: .6; }
.bs-body { fill: var(--ink); font: 22px var(--font); opacity: .9; }
.bs-bodylabel { fill: var(--dim); font: 11px var(--font); letter-spacing: .06em; }
.bs-mark { cursor: default; }
.bs-mark.movable { cursor: pointer; }
.bs-hit { fill: transparent; }
.bs-sel { fill: none; stroke: none; }
.bs-mark.selected .bs-sel { stroke: var(--accent); stroke-dasharray: 3 2; animation: spin 6s linear infinite; transform-box: fill-box; transform-origin: center; }
.bs-mark.mine .bs-shape { fill: var(--accent); filter: drop-shadow(0 0 var(--glow) var(--accent)); }
.bs-mark.mine.k-station .bs-shape { fill: none; stroke: var(--accent); stroke-width: 2; }
.bs-mark.foe .bs-shape { fill: var(--alert); filter: drop-shadow(0 0 var(--glow) var(--alert)); }
.bs-mark.disabled .bs-shape { opacity: .35; }
.bs-mark:hover .bs-shape { stroke: var(--ink); stroke-width: 1.2; }
.bs-label { fill: var(--ink); font: 11px var(--font); paint-order: stroke; stroke: var(--paper); stroke-width: 4px; }
.bs-mark.foe .bs-label { fill: var(--alert); }
.bs-count { fill: var(--dim); font: 600 11px var(--font); }
.bs-goalline { stroke: var(--accent); stroke-width: 1.2; stroke-dasharray: 5 4; animation: march 1s linear infinite; }
.bs-goal path { fill: var(--accent); stroke: var(--accent); }
.bs-goal circle { fill: var(--accent); }
.bs-ghost line { stroke: var(--ink); stroke-dasharray: 3 3; stroke-width: 1.2; }
.bs-ghost circle { fill: none; stroke: var(--ink); }
.bs-measure line { stroke: var(--ink); stroke-width: .8; stroke-dasharray: 1 3; }
.bs-measure text { fill: var(--ink); font: 600 11px var(--font); paint-order: stroke; stroke: var(--paper); stroke-width: 4px; }
.bs-measure.out text { fill: var(--alert); }
.bs-info { color: var(--dim); }
.bs-card { width: 290px; }
.pane .block > h2 + .battle { margin-top: -12px; }
.pane .block > h2 + .battle .battle-stage { border-top: none; }

/* --- Build: builders, catalogs, slots, recipes --- */
.builder { display: grid; grid-template-columns: minmax(230px, 290px) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .builder { grid-template-columns: minmax(0, 1fr); } }
.bd-side { position: sticky; top: 0; }
.bd-list { display: grid; gap: 4px; }
.bd-work { display: grid; gap: 16px; min-width: 0; }
.bd-icon { width: 34px; height: 34px; flex: none; }
.bd-icon .ic-a { fill: var(--accent); stroke: none; }
.bd-icon .ic-o { fill: none; stroke: var(--accent); stroke-width: 1.6; }
.bd-icon .ic-i { fill: var(--ink); stroke: var(--ink); stroke-width: 1.4; }
.bd-builder { font: inherit; text-align: left; color: var(--ink); background: none; border: 1px solid var(--rule); padding: 7px 9px; display: flex; gap: 10px; align-items: center; cursor: pointer; }
.bd-builder:hover, .bd-builder.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent); }
.bd-b-t { display: grid; gap: 1px; min-width: 0; flex: 1; }
.bd-b-t b { color: var(--accent); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-prog { display: block; height: 6px; border: 1px solid var(--rule); padding: 1px; margin: 3px 0 1px; min-width: 80px; }
.bd-prog i { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, var(--accent) 0 3px, transparent 3px 5px); box-shadow: 0 0 var(--glow) var(--accent); transition: width .2s linear; }
.bd-prog.unknown i { width: 100% !important; opacity: .35; animation: blink 1.4s steps(2) infinite; }
.bd-status { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.bd-status .bd-prog { flex: 1; min-width: 140px; max-width: 360px; }
.bd-hold { display: flex; flex-wrap: wrap; gap: 4px 2px; align-items: center; margin-top: 6px; }
.bd-hold > .dim:first-child { margin-right: 8px; letter-spacing: .08em; font-size: 11px; }
.bd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.bd-card { font: inherit; text-align: left; color: var(--ink); background: var(--paper); border: 1px solid var(--rule); padding: 8px 10px; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 4px 10px; align-items: center; cursor: pointer; }
.bd-card:hover, .bd-card.on { border-color: var(--accent); }
.bd-card.on { box-shadow: inset 0 0 0 1px var(--accent); }
.bd-card-t { display: grid; min-width: 0; }
.bd-card-t b { text-transform: uppercase; letter-spacing: .05em; font-size: 12.5px; color: var(--accent); }
.bd-card.short .bd-card-t b, .bd-card.blocked .bd-card-t b { color: var(--ink); }
.bd-card.blocked { border-style: dashed; }
.bd-card.blocked .bd-card-t b { color: var(--dim); }
.bd-card-c, .bd-why { grid-column: 1 / -1; }
.bd-card-c { display: flex; flex-wrap: wrap; gap: 3px; }
.bd-cost { font-size: 11px; border: 1px solid var(--rule); padding: 0 5px; }
.bd-cost b { font-weight: 500; }
.bd-cost.ok { border-color: color-mix(in srgb, var(--accent) 55%, var(--rule)); }
.bd-cost.short { color: var(--alert); border-color: color-mix(in srgb, var(--alert) 45%, var(--rule)); }
.bd-cost i { font-style: normal; }
.bd-why { color: var(--dim); }
.bd-req { display: block; font-size: 12px; color: var(--alert); margin: 4px 0; }
.bd-power { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.bd-meter { flex: 1; min-width: 120px; max-width: 320px; height: 9px; border: 1px solid var(--rule); padding: 1px; }
.bd-meter i { display: block; height: 100%; background: var(--accent); box-shadow: 0 0 var(--glow) var(--accent); }
.bd-slots-h { margin: 10px 0 4px; letter-spacing: .08em; font-size: 11px; }
.bd-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.bd-slot { font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--rule); padding: 8px; display: grid; justify-items: start; gap: 2px; text-align: left; cursor: pointer; min-height: 86px; align-content: start; }
.bd-slot b { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.bd-slot:hover, .bd-slot.on { border-color: var(--accent); }
.bd-slot.on { box-shadow: inset 0 0 0 1px var(--accent); }
.bd-slot.paused { border-color: var(--alert); }
.bd-slot.empty { border-style: dashed; color: var(--dim); justify-items: center; align-content: center; }
.bd-slot.empty span:first-child { font-size: 22px; color: var(--accent); line-height: 1; }
.bd-slot.building { border-style: dashed; border-color: var(--accent); cursor: default; }
.bd-slot:has(.pend-on) { border-style: dashed; border-color: var(--accent); }
.bd-waiting.pend-on { display: grid; gap: 4px; margin: 6px 0; }
.bd-slot .bd-prog { width: 100%; }
.bd-sub-h { margin: 10px 0 4px; letter-spacing: .08em; font-size: 11px; }
.bd-facbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bd-back { margin-left: auto; }
.bd-recipes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px; }
.bd-recipe { font: inherit; text-align: left; color: var(--ink); background: var(--paper); border: 1px solid var(--rule); padding: 7px 10px; display: grid; gap: 4px; cursor: pointer; }
.bd-recipe:hover:not(:disabled), .bd-recipe.on { border-color: var(--accent); }
.bd-recipe:disabled { border-style: dashed; cursor: not-allowed; }
.bd-recipe:disabled b { color: var(--dim); }
.bd-recipe b { text-transform: uppercase; letter-spacing: .05em; font-size: 12px; color: var(--accent); }
.bd-recipe.short b { color: var(--ink); }
.bd-flow { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; }
.bd-arrow { color: var(--accent); padding: 0 4px; }
.bd-out { font-size: 11px; border: 1px solid var(--accent); padding: 0 5px; color: var(--accent); }
.bd-detail { border-color: var(--accent) !important; }
.bd-detail-body { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; align-items: start; }
.bd-detail-art .bd-icon { width: 72px; height: 72px; }
.bd-detail dl { padding-left: 0; }
.bd-check:empty { display: none; }
.bd-toast[hidden] { display: none; }

/* --- Live regions: refresh button and age stamp --- */
.region-tools { margin-left: auto; display: inline-flex; gap: 6px; align-items: center; font-weight: 400; letter-spacing: .04em; }
.region-age { font-size: 10px; color: var(--dim); font-variant-numeric: tabular-nums; }
/* With the stream down nothing refreshes: the stamps say so, and a page's "online" gives way to the truth. */
.stream-down .region-age { color: var(--alert); }
.stream-down .region-age::after { content: " · stale"; }
.if-lost, .stream-down .if-linked { display: none; }
.stream-down .if-lost { display: inline; }
.region-btn { font: inherit; font-size: 13px; line-height: 1; color: var(--dim); background: none; border: 1px solid transparent; padding: 1px 5px; cursor: pointer; }
.region-btn:hover { color: var(--accent); border-color: var(--rule); }
.region-loading .region-btn { animation: spin 1s linear infinite; color: var(--accent); }
.region-floating { position: relative; }
.region-floating > .region-tools { position: absolute; right: 4px; top: -18px; }
/* A redraw shouldn't replay entrance animations. */
.refreshed .hbar-fill, .refreshed .fresh { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .region-loading .region-btn { animation: none; } }

/* --- Ultrawide ---------------------------------------------------------------------------------------------
   Page layouts follow their pane's own width (container queries), so they work the same in one wide pane or in
   each half of a split. Below these widths .lay-main and .lay-aside vanish into the page (display: contents),
   so normal screens are unchanged. Wider, long pages split into a main column and a sticky side one that keeps
   its map or picture in view. */
.pane { container: pane / inline-size; }
@media (min-width: 1900px) {
  :root { --rail-w: 230px; }
  .rail-slim { --rail-w: 54px; }
}
/* Wider screens get a wider dock by default; a width dragged to (--dock-open-w) still wins. */
@media (min-width: 2400px) { :root { --dock-w: var(--dock-open-w, 380px); } .dock-closed { --dock-w: 0px; } }
@media (min-width: 3200px) { :root { --dock-w: var(--dock-open-w, 420px); } .dock-closed { --dock-w: 0px; } body { font-size: 16px; } }

@container pane (min-width: 1500px) {
  .pane-inner { max-width: none; padding: 20px 28px 48px; }
}
/* Long pages: values, a side column (the map or picture), and the rest. Placed by named areas, so whatever the
   page order, nothing leaves a gap: the side column runs down beside both the values and the rest. */
.lay-body, .lay-main, .lay-aside, .lay-tail { display: contents; }
/* A side column of panels (settings, history, an order form) fits beside the work from a mid-size pane, such as
   1440 px with the dock open; one holding a map (.lay-map) waits for a wide pane. :where() keeps the
   specificity of .lay-body, so the wide sizes below still set the columns. */
@container pane (min-width: 820px) {
  .lay-body:where(:not(.lay-map)) {
    display: grid; gap: 16px 18px; align-items: start;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.55fr);
    grid-template-areas: "main aside" "tail aside";
    grid-template-rows: auto 1fr;
  }
  .lay-body:where(:not(.lay-map)) > :is(.lay-main, .lay-aside, .lay-tail) { display: grid; gap: 16px; align-content: start; min-width: 0; }
  .lay-body:where(:not(.lay-map)) > .lay-main { grid-area: main; }
  .lay-body:where(:not(.lay-map)) > .lay-tail { grid-area: tail; }
  .lay-body:where(:not(.lay-map)) > .lay-aside { grid-area: aside; position: sticky; top: 0; max-height: calc(100vh - var(--top-h) - var(--status-h) - 20px); overflow-y: auto; scrollbar-width: thin; }
}
@container pane (min-width: 1100px) {
  .lay-body {
    display: grid; gap: 16px 20px; align-items: start;
    grid-template-columns: minmax(0, 1fr) minmax(420px, 0.8fr);
    grid-template-areas: "main aside" "tail aside";
    grid-template-rows: auto 1fr;
  }
  .lay-main, .lay-aside, .lay-tail { display: grid; gap: 16px; align-content: start; min-width: 0; }
  .lay-main { grid-area: main; }
  .lay-tail { grid-area: tail; }
  .lay-aside { grid-area: aside; position: sticky; top: 0; max-height: calc(100vh - var(--top-h) - var(--status-h) - 20px); overflow-y: auto; scrollbar-width: thin; }
  .split-view .lay-aside { top: 30px; max-height: calc(100vh - var(--top-h) - var(--status-h) - 50px); }
  .lay-aside.cols { grid-template-columns: minmax(0, 1fr); }
  .lay-aside .orrery-stage, .lay-aside .battle-stage { max-height: calc(100vh - 240px); }
  .lay-main .body-hero, .lay-aside .body-hero { grid-template-columns: minmax(0, 1fr); }
}
@container pane (min-width: 1550px) {
  .lay-body { grid-template-columns: minmax(0, 1fr) minmax(460px, 0.9fr); }
  .lay-aside .body-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .bd-work { grid-template-columns: minmax(0, 1fr) minmax(380px, 460px); align-items: start; }
  .bd-work > .bd-toast, .bd-work > .bd-main { grid-column: 1; }
  .bd-work > .bd-detail { grid-column: 2; grid-row: 1 / span 3; position: sticky; top: 0; }
  .bd-work > .bd-detail[hidden] { display: none; }
}
@container pane (min-width: 2000px) {
  .panels { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); grid-auto-flow: dense; }
  .panels > .wide2:has(.orrery) { grid-column: span 2; grid-row: span 2; }
  .panels .orrery.compact .orrery-stage { max-height: min(640px, calc(100vh - 150px)); }
  .lay-body { grid-template-columns: minmax(0, 1fr) minmax(560px, 1fr); }
}
/* And narrow panes, half a split included, stack what sits side by side. */
@container pane (max-width: 900px) {
  .builder, .battle-layout, .split, .body-hero { grid-template-columns: minmax(0, 1fr); }
  .bd-side, .cmdpanel { position: static; max-height: none; }
}

/* --- Split: two panes side by side ------------------------------------------------------------------------ */
#pane2 { display: none; }
.split-toggle { display: none; }
@media (min-width: 1700px) { .split-toggle { display: inline-block; } }
.split-view .split-toggle { color: var(--accent); border-color: var(--accent); }
.pane-head { display: none; }
@media (min-width: 1700px) {
  .split-view .shell { grid-template-columns: var(--rail-w) minmax(0, 1fr) minmax(0, 1fr) var(--dock-w); grid-template-areas: "top top top top" "rail pane pane2 dock" "status status status status"; }
  .split-view #pane2 { display: block; grid-area: pane2; border-left: 3px double var(--rule); }
  .split-view .pane-head {
    display: flex; position: sticky; top: 0; z-index: 6; justify-content: space-between; align-items: center; gap: 10px;
    padding: 4px 10px 4px 16px; background: var(--paper); border-bottom: 1px solid var(--rule); font-size: 11px; letter-spacing: .08em; color: var(--dim);
  }
  .split-view .pane-head .ph-title { text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .split-view .pane-head button { font: inherit; font-size: 13px; color: var(--dim); background: none; border: 1px solid transparent; padding: 1px 6px; cursor: pointer; }
  .split-view .pane-head button:hover { color: var(--accent); border-color: var(--rule); }
  .split-view .pane.active-pane .pane-head { color: var(--accent); border-bottom-color: var(--accent); box-shadow: inset 0 2px 0 var(--accent); }
  .split-view .pane.active-pane .pane-head .ph-title { font-weight: 600; }
}

/* --- Stations --- */
.station-art { width: 100%; height: auto; display: block; }
.sa-ring { fill: none; stroke: var(--rule); stroke-dasharray: 2 3; }
.sa-ring.inner { stroke-dasharray: none; opacity: .7; }
.sa-spoke { stroke: var(--rule); stroke-width: 1; }
.sa-mod { fill: color-mix(in srgb, var(--accent) 30%, var(--paper)); stroke: var(--accent); stroke-width: 1.2; }
.sa-mod.busy { fill: var(--accent); filter: drop-shadow(0 0 var(--glow) var(--accent)); }
.sa-mod.paused { fill: var(--paper); stroke: var(--alert); }
.sa-mod.free { fill: none; stroke: var(--rule); stroke-dasharray: 2 2; }
.sa-hub { fill: var(--ink); }
.sa-hub.building { fill: var(--accent); animation: blink 1.4s steps(2) infinite; }
.sa-ground { stroke: var(--ink); stroke-width: 2; }
.st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.st-card { border: 1px solid var(--rule); background: var(--paper); color: var(--ink); display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px 14px; padding: 12px 14px; transition: border-color .15s; }
.st-card:hover { border-color: var(--accent); }
.st-card.disabled { border-color: var(--alert); }
.st-card .st-art { width: 96px; }
.st-card-t { display: grid; gap: 3px; min-width: 0; align-content: start; }
.st-card-t > a { font-weight: 600; font-size: 15px; letter-spacing: .04em; }
.st-meter { display: grid; grid-template-columns: 7ch minmax(0, 1fr) max-content; gap: 8px; align-items: center; font-size: 12px; }
.st-meter .bd-meter { max-width: none; }
.st-chips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px; }
.st-chip { font-size: 11px; border: 1px solid var(--rule); padding: 1px 6px; display: inline-flex; gap: 5px; align-items: center; }
.st-chip.busy { border-color: var(--accent); color: var(--accent); }
.st-chip.paused { border-color: var(--alert); color: var(--alert); }
.st-card .chart { grid-column: 1 / -1; margin: 0; }
.st-hero { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; align-items: center; }
.st-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.builder[data-fixed] { grid-template-columns: minmax(0, 1fr); }
.builder[data-fixed] .bd-side { display: none; }
.st-actions { display: grid; gap: 8px; }
.st-actions .cmd-acts { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
/* Disabled things are dashed and dim, not faded: the reason they give stays readable. */
.cmd-act:disabled { cursor: not-allowed; border-style: dashed; }
.cmd-act:disabled b { color: var(--dim); }
.st-checks { display: grid; gap: 2px; }
.st-checks .check { text-transform: none; letter-spacing: 0; font-size: 12px; }
.st-mats { display: grid; gap: 4px; }
.st-cargo { display: grid; gap: 4px; }
.st-cargo-row { display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.st-cargo-row input[type=number] { font: inherit; font-size: 12px; color: var(--ink); background: transparent; border: none; border-bottom: 1px solid var(--ink); width: 9ch; }
.st-mat { display: grid; grid-template-columns: minmax(0, 1fr) 9ch; gap: 6px; }
.st-mat select { font-size: 12px; min-width: 0; }
.st-mat input { font: inherit; font-size: 12px; color: var(--ink); background: transparent; border: none; border-bottom: 1px solid var(--ink); min-width: 0; }
.cmd-fields > .toggle { grid-column: 2; justify-self: start; padding: 2px 8px; font-size: 11px; }
details.more-orders > summary { cursor: pointer; padding: 8px 0; font-weight: 600; letter-spacing: .08em; font-size: 12px; list-style: none; }
details.more-orders > summary::-webkit-details-marker { display: none; }
details.more-orders[open] > summary { border-bottom: 1px solid var(--rule); margin-bottom: 8px; }
/* Production embedded in a station's page: no second title, no second hold, no box in a box. */
.builder[data-fixed] .bd-main > .block { border: none; background: none; padding: 0; }
.builder[data-fixed] .bd-main > .block:first-child > h2, .builder[data-fixed] .bd-main > .block:first-child > .bd-hold { display: none; }
.builder[data-fixed] .bd-main > .block > h2 { margin: 10px 0 6px; padding: 6px 0; background: none; }

/* --- The action engine (actions.js) --- */
.act-panel { display: grid; gap: 8px; container-type: inline-size; }
.act-panel .cmd-acts { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.act-fields { grid-template-columns: max-content minmax(0, 1fr); }
.act-field { display: grid; gap: 2px; min-width: 0; }
.act-field select { font-size: 12.5px; min-width: 0; width: 100%; }
.act-field input, .act-field textarea { font: inherit; font-size: 12.5px; color: var(--ink); background: transparent; border: none; border-bottom: 1px solid var(--ink); min-width: 0; width: 100%; }
.act-field textarea { border: 1px solid var(--rule); padding: 4px 6px; resize: vertical; }
.act-field .msg { font-size: 11px; color: var(--dim); }
.act-fields > .act-wide { grid-column: 1 / -1; }
.act-multi { display: grid; gap: 4px; max-height: 180px; overflow-y: auto; border: 1px solid var(--rule); padding: 6px 8px; text-align: left; }
.act-multi .check, .act-field > .check { text-transform: none; letter-spacing: 0; font-size: 12px; }
.act-multi .check { display: flex; align-items: flex-start; gap: 6px; color: var(--ink); }
/* Not the fields' full-width underlined inputs: a checkbox keeps its own size, beside the first line of its text. */
.act-field .check input[type="checkbox"] { flex: none; width: auto; border: none; margin: 2px 0 0; }
.act-pairs { display: grid; gap: 4px; }
.act-pair { display: grid; grid-template-columns: minmax(0, 1fr) 11ch auto; gap: 6px; align-items: end; }
.act-x { font: inherit; font-size: 13px; line-height: 1; color: var(--dim); background: none; border: 1px solid transparent; padding: 2px 6px; cursor: pointer; }
.act-x:hover, .act-x:focus-visible { color: var(--alert); border-color: var(--rule); }
.act-add { justify-self: start; padding: 2px 8px; font-size: 11px; margin-top: 2px; }

/* A drop-down you can type into (Archon.filterSelect in client.js). */
.fs { position: relative; display: inline-grid; min-width: min(100%, 24ch); }
.act-field .fs, .act-pair .fs { display: grid; min-width: 0; }
/* The same accent caret as a select's. */
.fs-input {
  font: inherit; font-size: 12.5px; color: var(--ink); border: none; border-bottom: 1px solid var(--ink); padding: 2px 1.4em 2px 0; min-width: 0; width: 100%;
  background: transparent no-repeat; background-size: 5px 5px; background-position: right 8px center, right 3px center;
  background-image: linear-gradient(45deg, transparent 50%, var(--accent) 50%), linear-gradient(135deg, var(--accent) 50%, transparent 50%);
}
.fs-list { position: absolute; left: 0; top: 100%; z-index: 80; min-width: 100%; width: max-content; max-width: min(46ch, 90vw); max-height: min(50vh, 320px); overflow-y: auto; margin: 2px 0 0; padding: 2px 0; list-style: none; background: var(--paper); border: 1px solid var(--accent); box-shadow: 0 0 var(--glow) var(--accent); font-size: 12.5px; }
.fs-list li { padding: 2px 10px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-list li small { color: var(--dim); margin-left: 6px; }
.fs-list li[aria-selected="true"] { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.fs-list .fs-group { cursor: default; color: var(--dim); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; padding-top: 5px; }
.fs-list .fs-none { color: var(--dim); cursor: default; }
@container pane (max-width: 520px) { .act-fields { grid-template-columns: minmax(0, 1fr); } }
/* A narrow panel (a card's actions) stacks its labels over its fields, whatever the pane's width. */
@container (max-width: 340px) { .act-fields { grid-template-columns: minmax(0, 1fr); } }
.ev-glyph { color: var(--accent); display: inline-block; width: 1.2em; text-align: center; }
/* Battlespace clusters: true places as pips, icons fanned on a ring, hairlines between. */
.bs-cluster-ring { fill: none; stroke: var(--ink); stroke-width: .8; stroke-dasharray: 2 3; opacity: .7; }
.bs-cluster-n { fill: var(--ink); font: 600 11px var(--font); }
.bs-tie { stroke-width: .9; opacity: .8; }
.bs-tie.mine { stroke: var(--accent); }
.bs-tie.foe { stroke: var(--alert); }
.bs-pip.mine { fill: var(--accent); }
.bs-pip.foe { fill: var(--alert); }
.bs-roster { margin-top: 8px; display: grid; gap: 3px; max-height: 260px; overflow-y: auto; }
.bs-unit { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(90px, 1fr) max-content; gap: 10px; align-items: center; font-size: 12.5px; color: var(--ink); }
.bs-unit.out { color: var(--dim); }
.bs-bars { display: grid; gap: 2px; }
.bs-bar { display: block; height: 5px; border: 1px solid var(--rule); }
.bs-bar i { display: block; height: 100%; }
.bs-bar.hp i { background: var(--accent); box-shadow: 0 0 var(--glow) var(--accent); }
.bs-bar.sh i { background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px); }
.bs-measure, .bs-measure * { pointer-events: none; }

/* --- The fleet strip: hot-switch between ships --- */
.ship-strip { display: flex; align-items: stretch; gap: 6px; border: 1px solid var(--rule); background: var(--paper); padding: 4px; min-width: 0; }
.ss-step { border: 1px solid var(--rule); display: grid; place-items: center; width: 28px; font-size: 18px; line-height: 1; color: var(--accent); flex: none; }
.ss-step:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.ss-chips { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--rule) transparent; flex: 1; min-width: 0; scroll-behavior: smooth; }
.ss-chip { border: 1px solid transparent; display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 7px; white-space: nowrap; color: var(--ink); font-size: 12.5px; flex: none; }
.ss-chip svg { width: 11px; height: 11px; fill: var(--dim); }
.ss-chip:hover { border-color: var(--rule); background: color-mix(in srgb, var(--accent) 6%, transparent); }
.ss-chip.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font-weight: 600; }
.ss-chip.on svg, .ss-chip.busy svg { fill: var(--accent); }
.ss-job { width: 6px; height: 6px; border-radius: 50%; background: var(--rule); }
.ss-chip.busy .ss-job { background: var(--accent); box-shadow: 0 0 var(--glow) var(--accent); }
.ss-chip.out, .ss-chip.out .ss-name { color: var(--dim); }
.ss-chip.out .ss-job { background: var(--alert); }
.ss-jump { font-size: 12px; border-bottom: none; border-left: 1px solid var(--rule); padding: 0 1.3em 0 6px; max-width: 18ch; }
@container pane (max-width: 560px) { .ss-jump { display: none; } }
.ss-chip svg .ss-st { fill: none; stroke: var(--dim); stroke-width: 1.4; }
.ss-chip.on svg .ss-st, .ss-chip.busy svg .ss-st { stroke: var(--accent); }
.ss-glyph { width: 12px; text-align: center; color: var(--dim); font-size: 12px; line-height: 1; }
.ss-chip.on .ss-glyph, .ss-chip.busy .ss-glyph { color: var(--accent); }

/* Alerts: the rail's count in the alert ink, and the status line's indicator (alerts-watch.js). */
.badge[data-badge="alerts"] { background: var(--alert); box-shadow: 0 0 var(--glow) var(--alert); }
.al-ind { color: var(--alert); border: none; letter-spacing: .04em; white-space: nowrap; }
.al-ind[hidden] { display: none; }
.al-ind b { font-weight: 600; }
[data-fx="full"] .al-ind span { animation: blink 1.2s steps(2) infinite; }
/* Only notes firing (nothing bad): counted in a quiet ink, without the blink. */
.badge[data-badge="alerts"].calm { background: var(--dim); box-shadow: none; }
.al-ind.calm { color: var(--dim); }
[data-fx="full"] .al-ind.calm span { animation: none; }

/* Refresh a pane from the game: in the top bar, and on each pane's head in a split. */
.pane-refresh { margin-left: 2px; }
.pane-refresh.spinning, .pane-head [data-pane-act="refresh"].spinning, .region-btn.spinning, [data-w="reload"].spinning { color: var(--accent); animation: spin .8s linear infinite; }
.shell.bare .pane-refresh { display: none; }
.pane-notice { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; border-left: 3px solid var(--accent); }
.pane-notice .toggle { padding: 1px 8px; font-size: 11px; }

/* The client's own confirm dialog (Archon.confirm): a panel in the theme, not the browser's grey box. */
.ax-confirm { border: 1px solid var(--accent); background: var(--paper); color: var(--ink); padding: 0; width: min(440px, calc(100vw - 32px));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), 0 12px 40px color-mix(in srgb, #000 45%, transparent); }
.ax-confirm.danger { border-color: var(--alert); }
.ax-confirm::backdrop { background: color-mix(in srgb, var(--paper) 55%, transparent); backdrop-filter: blur(2px); }
.ax-confirm form { display: grid; gap: 10px; padding: 14px 16px 14px; }
.axc-head { display: flex; gap: 10px; align-items: baseline; font-size: 14px; line-height: 1.45; }
.axc-head b { font-weight: 600; letter-spacing: .02em; }
.axc-glyph { color: var(--accent); }
.ax-confirm.danger .axc-glyph { color: var(--alert); }
.axc-body { margin: 0; font-size: 13px; color: var(--dim); line-height: 1.55; white-space: pre-line; padding-left: 2ch; }
.axc-acts { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }
.ax-confirm .btn.danger { border-color: var(--alert); color: var(--alert); }
.ax-confirm .btn.danger:hover, .ax-confirm .btn.danger:focus-visible { background: var(--alert); color: var(--paper); }
[data-fx-theme="crt"] .ax-confirm { box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 25%, transparent); }
[data-fx-theme="crt"] .ax-confirm.danger { box-shadow: 0 0 18px color-mix(in srgb, var(--alert) 30%, transparent); }

/* Orders on their way (static/pending.js): a marker where a page asks for one, and the dock's IN FLIGHT list. */
[data-pending]:not(.pend-on) { display: none; }
.pend-chip { display: inline-block; color: var(--accent); font-size: 12px; letter-spacing: .02em; }
[data-pending].pend-on { display: inline-flex; flex-wrap: wrap; gap: 2px 10px; }
/* The mark for something on its way: a small square in the accent that blinks like the terminal's cursor. */
.pend-dot { display: inline-block; width: .62em; height: .62em; margin-right: .4em; vertical-align: -.02em; background: var(--accent); box-shadow: 0 0 var(--glow) var(--accent); animation: pend-blink 1.1s steps(1, end) infinite; }
@keyframes pend-blink { 50% { opacity: .15; } }
[data-fx="off"] .pend-dot { animation: none; }
@media (prefers-reduced-motion: reduce) { .pend-dot { animation: none; } }
[data-busy-on][data-pending-held] { cursor: progress; }
.pend-list { list-style: none; margin: 0; padding: 6px 10px; display: grid; gap: 8px; font-size: 12.5px; }
.pend-list li { display: grid; grid-template-columns: 1.4em minmax(0, 1fr); gap: 6px; }
.pend-list small { display: block; }
.pend-g { color: var(--accent); text-align: center; }
.pend-refused, .pend-refused .pend-g { color: var(--alert); }
.pend-none, .pend-all { padding: 6px 10px; margin: 0; }

.statusline .sl-rules { color: var(--accent); }

/* --- Breadcrumbs: where the page in each pane sits, every level but the last a link --- */
.pane-crumbs {
  display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; margin: 0 0 12px; min-width: 0;
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--dim);
}
.pane-crumbs a { color: var(--dim); border-bottom: 1px solid transparent; }
.pane-crumbs a:hover, .pane-crumbs a:focus-visible { color: var(--accent); border-bottom-color: currentColor; }
.pane-crumbs b { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.pane-crumbs .sep { color: var(--rule); }