/* The client: what the codex and site sheets don't have. Same tokens, same printout/terminal modes. */
.clock { color: var(--dim); font-size: 12px; letter-spacing: .06em; }
.clock b { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; display: inline-block; text-align: right; }
/* Fixed slots, so the nav doesn't shift as digits come and go. */
.clock [data-f="tick"] { min-width: 6ch; text-align: left; }
@keyframes pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .clock.processing [data-f="next"] { animation: none; } }
.clock.ticked b { color: var(--accent); text-shadow: 0 0 var(--glow) var(--accent); }
.clock.paused b { color: var(--dim); }
.clock.paused::after { content: " ‖ paused"; color: var(--dim); font-size: 11px; letter-spacing: .06em; }
form.inline, .inline { display: inline; }
.linkish { font: inherit; color: var(--accent); background: none; border: none; border-bottom: 1px dotted var(--accent); padding: 0; cursor: pointer; }
.dim { color: var(--dim); }
.acc { color: var(--accent); }
h2 .dim { font-weight: 400; letter-spacing: 0; }
.flash { border-left: 2px solid var(--accent); padding-left: 10px; }
.flash.alert { border-left-color: var(--alert); }
/* hidden means hidden, even on a panel whose class gives it a display (.block is a grid). */
[hidden] { display: none !important; }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; align-items: start; }

/* Job readouts: idle waits in ink, work glows in the accent. */
.job { font-size: 12px; letter-spacing: .08em; font-weight: 600; color: var(--accent); }
.job-idle { color: var(--ink); }
.job-transit { text-shadow: 0 0 var(--glow) var(--accent); }
.pill { display: inline-block; border: 1px solid var(--rule); padding: 0 6px; margin: 0 4px 3px 0; font-size: 13px; white-space: nowrap; }
.pill b { font-weight: 500; }
.req { color: var(--alert); margin-left: 2px; }

/* Gauges: a printed bar of hatching, lit in the terminal. */
.gauge { display: inline-block; width: 14ch; height: .8em; border: 1px solid var(--rule); vertical-align: -1px; position: relative; }
.fillbar { position: absolute; inset: 1px auto 1px 1px; width: calc(var(--pct) - 2px); max-width: calc(100% - 2px);
  background: repeating-linear-gradient(90deg, var(--accent) 0 3px, transparent 3px 5px); box-shadow: 0 0 var(--glow) var(--accent); }

dl.specs { grid-template-columns: max-content 1fr max-content 1fr; }
@container pane (max-width: 560px) { dl.specs { grid-template-columns: max-content 1fr; } }

/* Tables of ships, systems, orders. */
.tablewrap { overflow-x: auto; }
table.grid { border-collapse: collapse; width: 100%; font-size: 14px; }
.grid th { text-align: left; color: var(--dim); font-weight: 500; letter-spacing: .06em; font-size: 12px; border-bottom: 1px solid var(--ink); padding: 4px 10px 4px 0; white-space: nowrap; }
.grid td { border-bottom: 1px dotted var(--rule); padding: 4px 10px 4px 0; vertical-align: top; }
.grid .r { text-align: right; }
.grid tr:hover td { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.grid .small, .small { font-size: 13px; }
.st-failed .status, tr.disabled td { color: var(--alert); }
.st-completed .status { color: var(--accent); }
.st-in_flight .status { color: var(--ink); text-shadow: 0 0 var(--glow) var(--ink); }

/* Forms: underlined inputs like the register page. */
.fields textarea, .inline-input {
  font: inherit; color: var(--ink); background: transparent; border: none; border-bottom: 1px solid var(--ink); border-radius: 0; padding: 2px 0; max-width: 100%;
}

/* Selects: underlined like the inputs, with an accent caret drawn by two gradients so it follows the theme. */
select {
  font: inherit; color: var(--ink); border: none; border-bottom: 1px solid var(--ink); border-radius: 0;
  padding: 2px 1.3em 2px 0; max-width: 100%; cursor: pointer; appearance: none;
  white-space: nowrap;
  background: transparent no-repeat; background-size: 5px 5px;
  background-image: linear-gradient(45deg, transparent 50%, var(--accent) 50%), linear-gradient(135deg, var(--accent) 50%, transparent 50%);
  background-position: right 8px center, right 3px center;
}
option, optgroup { background: var(--paper); color: var(--ink); }
/* Where the browser lets the open list be styled too, draw it like the palette. Elsewhere it stays native. */
@supports (appearance: base-select) {
  select:not([multiple]), ::picker(select) { appearance: base-select; }
  select:not([multiple]) { overflow: clip; overflow-clip-margin: content-box; }
  select::picker-icon { display: none; }
  ::picker(select) {
    color: var(--ink); background: var(--paper); border: 1px solid var(--accent); padding: 2px 0; margin-top: 2px;
    max-height: 50vh; overflow-y: auto; box-shadow: 0 0 var(--glow) var(--accent);
  }
  option { padding: 2px 10px; }
  option::checkmark { color: var(--accent); }
  option:hover, option:focus-visible { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); outline: none; }
  option:checked { color: var(--accent); }
  optgroup { color: var(--dim); }
}
.fields textarea { width: 100%; border: 1px solid var(--rule); padding: 4px 6px; resize: vertical; font-size: 13px; }
.fields { gap: 10px 18px; }
.fields label { text-transform: uppercase; font-size: 13px; }
.check { color: var(--dim); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; display: inline-flex; gap: 6px; align-items: center; }
.check input { accent-color: var(--accent); }
.btn:hover, .toggle:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.btn[disabled] { opacity: .5; cursor: wait; }
.inline-input { width: 8ch; }

/* An operation: a collapsible card, open to a form. */
details.op { border: 1px solid var(--rule); margin: 0 0 8px 2ch; }
details.op[open] { border-color: var(--ink); }
details.op > summary { cursor: pointer; padding: 6px 10px; list-style: none; overflow-wrap: anywhere; }
details.op > summary::-webkit-details-marker { display: none; }
details.op > summary::before { content: "▸ "; color: var(--dim); }
details.op[open] > summary::before { content: "▾ "; }
details.op > summary:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
details.op form { padding: 6px 12px 12px; display: grid; gap: 12px; border-top: 1px dotted var(--rule); }
details.op-raw > summary { cursor: pointer; width: max-content; list-style: none; padding-left: 2ch; }
details.op-raw > summary::-webkit-details-marker { display: none; }
details.op-raw > summary::before { content: "▸ "; }
details.op-raw[open] > summary::before { content: "▾ "; }
details.op-raw[open] > summary { margin-bottom: 8px; }
.opform .btn.danger { border-color: var(--alert); color: var(--alert); }
.opform .btn.danger:hover, .opform .btn.danger:focus-visible { background: var(--alert); color: var(--paper); }
.opform .toggle.danger { border-color: var(--alert); color: var(--alert); }
.verb { font-size: 11px; font-weight: 600; letter-spacing: .08em; padding: 0 4px; border: 1px solid currentColor; }
.op.get .verb, .v-get { color: var(--dim); }
.op.post .verb, .v-post { color: var(--accent); }
.op.put .verb, .v-put { color: var(--ink); }
.op.delete .verb, .v-delete { color: var(--alert); }
.opdesc { font-size: 13px; white-space: pre-line; color: var(--dim); }
details.more > summary, details.raw > summary, details.facility > summary { cursor: pointer; color: var(--dim); letter-spacing: .06em; padding: 4px 0; }
details.more > summary { margin-left: 2ch; text-transform: uppercase; font-size: 13px; }
details.facility { border-left: 2px solid var(--rule); padding-left: 12px; margin: 0 0 10px 2ch; }
details.facility[open] { border-left-color: var(--accent); }
details.facility > summary { color: var(--ink); }
details.facility details.op { margin-left: 0; }

/* The fault page's raw answer wraps rather than running off a phone. */
.fault-raw pre.out { white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 6px; }
.result pre.out, pre.out { margin: 0; overflow: auto; max-height: 420px; border: 1px dashed var(--rule); padding: 10px; color: var(--dim); font: 13px/1.5 var(--font); }
.result .readout { margin-bottom: 6px; }
.result.shown { margin-left: 2ch; }

/* The live feed. */
ol.feed { list-style: none; margin: 0; padding: 0 0 0 2ch; display: grid; gap: 1px; font-size: 13px; max-height: 480px; overflow-y: auto; }
ol.feed li { overflow-wrap: anywhere; border-bottom: 1px dotted color-mix(in srgb, var(--rule) 60%, transparent); padding: 1px 0; }
ol.feed li.fresh { animation: blip 1.6s ease-out; }
ol.feed .t-order-rejected b, ol.feed [class*="t-entity-disabled"] b, ol.feed [class*="t-entity-hit"] b { color: var(--alert); }
@keyframes blip { from { background: color-mix(in srgb, var(--accent) 30%, transparent); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { ol.feed li.fresh { animation: none; } }

/* Maps: the live orrery and the galaxy. A dark scope in the terminal, a plotter sheet on paper. */
.legend { margin: 0; font-size: 12px; }
.orrery, .galaxy { margin-left: 2ch; display: grid; gap: 6px; }
.orrery-stage, .galaxy-stage { border: 1px solid var(--rule); position: relative; overflow: hidden; touch-action: none; background: var(--paper); }
/* No glow painted on the box: a system's light comes from its star (.o-halo) and moves with the map; the galaxy has none. */
.o-halo, .bs-halo { pointer-events: none; }
/* Scanlines, only in the terminal. */
:root[data-theme="dark"] .orrery-stage::after, :root[data-theme="dark"] .galaxy-stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(transparent 0 2px, rgb(0 0 0 / .18) 2px 3px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .orrery-stage::after, :root:not([data-theme="light"]) .galaxy-stage::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: repeating-linear-gradient(transparent 0 2px, rgb(0 0 0 / .18) 2px 3px);
  }
}
/* A map is as wide as its column and square, but never taller than the window, so the controls under it stay in
   reach. Its drawing takes the stage's own shape, one unit to a pixel (static/orrery.js and galaxy.js fit). */
.orrery-stage, .galaxy-stage { 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)); }
.orrery.compact .orrery-stage { max-height: min(360px, calc(100vh - 150px)); }
.orrery-svg, .galaxy-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; user-select: none; touch-action: none; }
.orrery-svg:active, .galaxy-svg:active { cursor: grabbing; }
/* While the view moves, glows are dropped: a drop-shadow on every hull is costly to paint each frame. */
.panning .o-hull, .panning .o-ring, .panning .o-glyph, .panning .g-dot, .panning .bs-shape { filter: none !important; }
.o-world .o-orbit, .o-world .o-gridring { vector-effect: non-scaling-stroke; }
/* Said once when the wheel scrolls past a page's map instead of zooming it. */
.map-wheel-hint { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; pointer-events: none; font-size: 12px; letter-spacing: .06em; color: var(--ink); background: var(--paper); border: 1px solid var(--rule); padding: 4px 10px; opacity: 0; transition: opacity .2s; white-space: nowrap; }
.map-wheel-hint.show { opacity: .95; }
/* Keyboard focus on a map's things: a ring that can be seen in both inks. */
.o-body:focus, .o-ship:focus, .g-sys:focus, .g-home:focus, .bs-mark:focus { outline: none; }
.o-body:focus-visible .o-ring { stroke: var(--accent); stroke-width: 2; stroke-dasharray: none; }
.o-ship:focus-visible .o-focus-ring { display: inline; stroke-width: 2; }
.g-sys:focus-visible .g-hit, .g-home:focus-visible .g-hit, .bs-mark:focus-visible .bs-hit { stroke: var(--accent); stroke-width: 2; }
/* Previews: corner controls, and a hint until a click arms scroll-to-zoom. */
.map-ctl { position: absolute; right: 8px; top: 8px; display: flex; gap: 4px; z-index: 2; opacity: .9; transition: opacity .15s; }
.orrery-stage:hover .map-ctl, .galaxy-stage:hover .map-ctl, .map-ctl:focus-within { opacity: 1; }
.map-ctl button { font: inherit; font-size: 12px; line-height: 1; color: var(--accent); background: var(--paper); border: 1px solid var(--rule); padding: 4px 8px; cursor: pointer; }
.map-ctl button:hover { border-color: var(--accent); }
.map-hint { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); z-index: 2; pointer-events: none; font-size: 11px; letter-spacing: .06em; color: var(--dim); background: var(--paper); border: 1px solid var(--rule); padding: 2px 8px; opacity: 0; transition: opacity .2s; white-space: nowrap; }
.orrery-stage:hover .map-hint, .galaxy-stage:hover .map-hint { opacity: 1; }
.armed .map-hint { opacity: 0 !important; }
.armed .orrery-stage, .armed .galaxy-stage { box-shadow: inset 0 0 0 1px var(--accent); }
.orrery-bar { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; font-size: 12px; }
.orrery-bar .toggle { padding: 2px 9px; }
.orrery-bar .ahead { display: inline-flex; gap: 8px; align-items: center; margin-left: auto; letter-spacing: .06em; }
.orrery-bar input[type=range] { accent-color: var(--accent); width: 160px; }
.orrery-bar [data-ahead] { min-width: 13ch; font-weight: 500; }
.orrery.ahead-on .orrery-stage { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.orrery-note { margin: 0; font-size: 13px; }

.o-gridring { fill: none; stroke: var(--rule); stroke-width: .6; opacity: .55; }
.o-gridlabel { fill: var(--dim); font: 11px var(--font); opacity: .7; }
.o-orbit { fill: none; stroke: var(--rule); stroke-width: 1; stroke-dasharray: 2 3; }
.o-orbit.moon { stroke-dasharray: 1 2; opacity: .8; }
.o-orbit.k-asteroid_field, .o-orbit.k-ice_field { stroke-dasharray: 1 5; stroke-width: 2; }
.o-body { cursor: pointer; }
.o-hit { fill: transparent; }
.o-ring { fill: none; stroke: none; }
.o-body:hover .o-ring, .o-body.selected .o-ring { stroke: var(--accent); stroke-width: 1.4; filter: drop-shadow(0 0 var(--glow) var(--accent)); }
.o-body.selected .o-ring { stroke-dasharray: 3 2; animation: spin 6s linear infinite; transform-box: fill-box; transform-origin: center; }
.o-glyph { fill: var(--ink); font: 15px var(--font); }
.o-body.k-moon .o-glyph { font-size: 11px; }
.o-body.k-gas_giant .o-glyph { font-size: 19px; }
.o-body.k-star .o-glyph { fill: var(--accent); font-size: 28px; filter: drop-shadow(0 0 calc(var(--glow) * 2) var(--accent)); }
.o-corona { animation: breathe 5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.o-label { fill: var(--dim); font: 11px var(--font); paint-order: stroke; stroke: var(--paper); stroke-width: 4px; stroke-linejoin: round; }
.no-labels .o-label { display: none; }
.o-body.k-moon .o-label { display: none; }
.zoomed .o-body.k-moon .o-label, .o-body.k-moon:hover .o-label, .o-body.k-moon.selected .o-label, .o-body.k-moon:focus .o-label { display: inline; }
.o-ship .o-hull { fill: var(--accent); filter: drop-shadow(0 0 var(--glow) var(--accent)); }
.o-ship { cursor: pointer; }
.o-ship.focus .o-hull { stroke: var(--ink); stroke-width: 1; }
.o-focus-ring { display: none; }
.o-ship.commanded .o-focus-ring { display: inline; }
.o-ship:hover .o-hull { filter: drop-shadow(0 0 calc(var(--glow) * 2.5) var(--accent)); }
.o-focus-ring { fill: none; stroke: var(--accent); stroke-width: 1; stroke-dasharray: 2 3; animation: spin 8s linear infinite; transform-box: fill-box; transform-origin: center; }
.o-ship.moving .o-hull { animation: blink 1.4s steps(2) infinite; }
.o-shiplabel { fill: var(--accent); display: none; }
.o-ship.focus .o-shiplabel, .o-ship.moving .o-shiplabel, .zoomed .o-shiplabel, .o-ship:hover .o-shiplabel { display: inline; }
.o-route { fill: none; stroke: var(--accent); stroke-width: 1.2; stroke-dasharray: 5 4; animation: march 1s linear infinite; opacity: .85; }
.o-meet circle, .o-meet path { fill: none; stroke: var(--accent); stroke-width: 1.2; }
.o-eta { fill: var(--accent); font: 11px var(--font); font-weight: 600; paint-order: stroke; stroke: var(--paper); stroke-width: 4px; }
.o-station .o-hull { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.o-station .o-core { fill: var(--accent); }
.o-contact .o-hull { fill: none; stroke: var(--alert); stroke-width: 1.5; animation: blink 2s steps(2) infinite; }
.o-stamp { fill: var(--dim); font: 11px var(--font); letter-spacing: .06em; }
.orrery.ahead-on .o-stamp { fill: var(--accent); }

.g-sweep .sweep-arm { transform-origin: 50% 50%; transform-box: view-box; animation: spin 9s linear infinite; }
.sweep-wedge { fill: color-mix(in srgb, var(--accent) 4%, transparent); }
.sweep-line { stroke: var(--accent); stroke-width: 1; opacity: .35; }
.g-sys { border: none; }
.g-dot { fill: var(--dim); }
.g-sys.ring-hub .g-dot { fill: var(--ink); }
.g-sys.unsurveyed .g-dot { fill: var(--paper); stroke: var(--dim); stroke-width: 1; }
.g-sys.mine .g-dot, .g-sys.home .g-dot { fill: var(--accent); filter: drop-shadow(0 0 var(--glow) var(--accent)); }
.g-halo { fill: none; stroke: var(--accent); stroke-width: 1; opacity: .5; animation: pulse-ring 3s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.g-sys:hover .g-dot { fill: var(--accent); }
.g-label { fill: var(--ink); font: 11px var(--font); paint-order: stroke; stroke: var(--paper); stroke-width: 4px; display: none; pointer-events: none; }
.g-label.always, .zoomed .g-label, .g-sys:hover .g-label { display: inline; }
/* Homes other players show you: a mark on a charted system, a hollow diamond where you haven't charted. */
.g-theirs-tag { fill: var(--ink); font: 11px var(--font); letter-spacing: .04em; paint-order: stroke; stroke: var(--paper); stroke-width: 4px; }
.g-sys.theirs .g-dot { stroke: var(--ink); stroke-width: 1.5; }
.g-home-mark { fill: var(--paper); stroke: var(--ink); stroke-width: 1.4; stroke-dasharray: 2 1.5; }
.g-home:hover .g-home-mark { stroke: var(--accent); stroke-dasharray: none; }
.g-home { cursor: pointer; }
/* A home past the view's edge: an arrow on the edge, pointing its way. */
.g-home-arrow { display: none; fill: var(--ink); }
.g-home.edge .g-home-arrow { display: inline; }
.g-home.edge .g-home-mark { display: none; }
.g-home.edge:hover .g-home-arrow { fill: var(--accent); }
/* A system takes clicks on its dot, the disc around it and its name. */
.g-hit { fill: transparent; pointer-events: all; }
.g-sys .g-label { pointer-events: auto; cursor: inherit; }
.g-lane { stroke: var(--rule); stroke-width: 1.2; }
.g-lane:hover { stroke: var(--accent); stroke-width: 2.5; }
.g-jumpline { stroke: var(--accent); stroke-width: 1.2; stroke-dasharray: 5 4; animation: march 1s linear infinite; }
.g-jumper path { fill: var(--accent); filter: drop-shadow(0 0 var(--glow) var(--accent)); }
.g-jumper .g-label { fill: var(--accent); }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes march { to { stroke-dashoffset: -9; } }
@keyframes blink { 50% { opacity: .45; } }
@keyframes breathe { 50% { transform: scale(1.18); opacity: .7; } }
@keyframes pulse-ring { from { transform: scale(.6); opacity: .8; } to { transform: scale(1.7); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .sweep-arm, .o-route, .g-jumpline, .g-lane.trip, .o-ship.moving .o-hull, .o-contact .o-hull, .o-corona, .g-halo, .o-focus-ring, .o-body.selected .o-ring { animation: none; }
}
input.filled { border-bottom-color: var(--accent); box-shadow: 0 1px 0 var(--accent); transition: box-shadow .3s; }

/* Charts: two inks; categories by texture, and always labelled. */
.chart { margin: 4px 0 0 2ch; }
.hb-track { display: flex; gap: 2px; height: 14px; border: 1px solid var(--rule); padding: 1px; }
.hb-track.tall { height: 22px; }
.hb-seg { min-width: 3px; position: relative; background: var(--accent); box-shadow: 0 0 var(--glow) color-mix(in srgb, var(--accent) 60%, transparent); }
.hb-seg.p1 { background: repeating-linear-gradient(45deg, var(--accent) 0 2px, transparent 2px 5px); }
.hb-seg.p2 { background: repeating-linear-gradient(135deg, var(--accent) 0 2px, transparent 2px 5px); }
.hb-seg.p3 { background: repeating-linear-gradient(90deg, var(--accent) 0 2px, transparent 2px 4px); }
.hb-seg.p4 { background: radial-gradient(var(--accent) 1px, transparent 1.5px) 0 0 / 4px 4px; }
.hb-seg.idle { background: var(--ink); }
.hb-seg em { position: absolute; inset: 0; display: grid; place-items: center; font: 600 11px var(--font); font-style: normal; color: var(--paper); mix-blend-mode: normal; }
.hb-seg:not(.idle):not(.p0) em { color: var(--ink); text-shadow: 0 0 3px var(--paper), 0 0 3px var(--paper); }
.hb-free { background: transparent; }
.hb-seg:hover { outline: 1px solid var(--ink); outline-offset: 1px; }
.hb-legend { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 12px; margin-top: 4px; }
.hb-legend .lg { display: inline-flex; gap: 6px; align-items: center; }
.sw { display: inline-block; width: 12px; height: 10px; border: 1px solid var(--rule); }
.sw.p0 { background: var(--accent); }
.sw.p1 { background: repeating-linear-gradient(45deg, var(--accent) 0 2px, transparent 2px 5px); }
.sw.p2 { background: repeating-linear-gradient(135deg, var(--accent) 0 2px, transparent 2px 5px); }
.sw.p3 { background: repeating-linear-gradient(90deg, var(--accent) 0 2px, transparent 2px 4px); }
.sw.p4 { background: radial-gradient(var(--accent) 1px, transparent 1.5px) 0 0 / 4px 4px; }
.sw.idle { background: var(--ink); }
.hbars { display: grid; gap: 3px; margin-left: 0; }
.hbars p { margin: 0; }
.hbar { display: grid; grid-template-columns: 12ch 1fr 7ch; gap: 10px; align-items: center; font-size: 13px; }
.hbar-k { color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar-track { height: 10px; border-bottom: 1px solid var(--rule); }
.hbar-fill { display: block; height: 100%; background: var(--accent); box-shadow: 0 0 var(--glow) var(--accent); transform-origin: left; animation: grow .6s ease-out; }
.hbar-v { text-align: right; font-weight: 500; }
.hbar:hover .hbar-k { color: var(--ink); }
@keyframes grow { from { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .hbar-fill { animation: none; } }
.eta { font-variant-numeric: tabular-nums; color: var(--accent); }
.eta.dim { color: var(--dim); }

.tip { position: fixed; left: 0; top: 0; z-index: 50; pointer-events: none; max-width: 42ch; padding: 4px 8px;
  font: 12px/1.4 var(--font); color: var(--ink); background: var(--paper); border: 1px solid var(--ink);
  box-shadow: 0 0 var(--glow) var(--ink); }

/* Console. */
dl.oplist { grid-template-columns: 7ch 1fr; gap: 2px 10px; }
dl.oplist dt { text-align: right; }
.oprow[hidden] { display: none; }

/* Messages. */
.msg-card { margin-left: 2ch; border-left: 2px solid var(--rule); padding: 2px 0 2px 14px; }
.msg-card header { font-size: 12px; letter-spacing: .04em; }
.msg-card p { margin: 4px 0 0; white-space: pre-wrap; }
.msg-card.pending { border-left-style: dashed; }

@media (max-width: 560px) {
  details.op, .orrery, .galaxy, .chart, ol.feed, .msg-card, .result.shown, details.facility, details.more > summary { margin-left: 0; }

}

/* Section pages: tabs of views, data beside a command panel. */
.tabs { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 1px solid var(--ink); }
.tabs a { border: 1px solid transparent; border-bottom: none; padding: 4px 14px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); margin-bottom: -1px; }
.tabs a:hover { color: var(--accent); }
.tabs a.on { color: var(--ink); border-color: var(--ink); background: var(--paper); font-weight: 600; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); gap: 28px; align-items: start; }
.split.solo { grid-template-columns: minmax(0, 1fr); }
.split > .stack { display: grid; gap: 22px; min-width: 0; }
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); } }
.cmdpanel { border: 1px solid var(--ink); padding: 10px 12px 12px; display: grid; gap: 6px; position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; }
.cmdpanel h2 { margin-bottom: 4px; }
.cmd { display: grid; grid-template-columns: 3ch minmax(0, 1fr); gap: 6px; align-items: start; }
.cmd-n { color: var(--dim); font-size: 12px; padding-top: 8px; }
.cmd details.op { margin: 0; }
.cmd details.op form { padding: 6px 8px 10px; }
.cmd .fields { grid-template-columns: minmax(0, 1fr); gap: 2px; padding-left: 0; }
.cmd details.op-raw > summary { padding-left: 0; }
.cmd .fields label { margin-top: 6px; }
.cmd .actions { padding-left: 0; }
.cmd-label { font-weight: 600; letter-spacing: .04em; }
.small { font-size: 12px; }
.readout-dl { gap: 3px 18px; }
.readout-dl.nested { padding-left: 0; border-left: 1px dotted var(--rule); padding-left: 10px; }
.why { margin: 4px 0 0; padding-left: 2ch; }   /* the problems a refusal lists (Archon.refusal) */
.pills { display: flex; flex-wrap: wrap; }
td a.open { white-space: nowrap; font-size: 12px; }
td.empty { padding: 14px 0; }

/* Dashboards. */
.dash { display: grid; gap: 10px; }
.dash-bar { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: end; justify-content: space-between; border-bottom: 1px solid var(--ink); }
.dash-bar .tabs { border-bottom: none; }
/* A family's pages (sections.py Family): one rail entry, this row across the top of each. */
.fam-tabs { margin-bottom: 14px; }
.tab-add { font: inherit; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); background: none; border: 1px dashed var(--rule); padding: 3px 10px; margin: 0 0 4px 6px; cursor: pointer; }
.dash-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-bottom: 6px; }
.dash-tools .toggle.danger { color: var(--alert); border-color: color-mix(in srgb, var(--alert) 50%, transparent); }
.board-name { font: inherit; color: var(--ink); background: transparent; border: none; border-bottom: 1px solid var(--ink); width: 18ch; padding: 2px 0; }
.edit-only { display: none !important; }
.dash.editing .edit-only { display: revert !important; }
.dash.editing .w-tools .edit-only { display: inline-block !important; }
.dash.editing .grid-stack-item { user-select: none; }
.dash.editing .grid-stack { background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--rule) 22%, transparent) 0 1px, transparent 1px calc(100% / 12)); outline: 1px dashed var(--rule); outline-offset: 3px; }

.widget { border: 1px solid var(--rule); background: var(--paper); display: flex; flex-direction: column; overflow: hidden !important; }
.widget:hover { border-color: var(--ink); }
.w-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 3px 4px 3px 10px; border-bottom: 1px solid var(--rule); flex: none; }
.dash.editing .w-head { cursor: move; user-select: none; background: color-mix(in srgb, var(--accent) 8%, transparent); }
.w-title { font-size: 12px; font-weight: 600; letter-spacing: .08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-tools { display: flex; gap: 2px; flex: none; }
.w-tools button { font: inherit; font-size: 13px; line-height: 1; color: var(--dim); background: none; border: 1px solid transparent; padding: 3px 6px; cursor: pointer; }
.w-tools button:hover { color: var(--accent); border-color: var(--rule); }
.w-tools [data-w="remove"]:hover { color: var(--alert); }
.w-body { flex: 1; min-height: 0; overflow: auto; padding: 8px 10px; font-size: 13px; transition: opacity .2s; }
.w-body.loading { opacity: .55; }
.w-body > :first-child { margin-top: 0; }
.w-empty { color: var(--dim); font-size: 13px; margin: 6px 0; }
.w-foot { margin: 6px 0 0; }
.w-sub { margin: 8px 0 2px; letter-spacing: .06em; }
.w-big { font-size: 15px; margin-bottom: 6px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.w-dl { padding-left: 0; gap: 2px 12px; font-size: 13px; }
.w-dl dt { font-size: 11px; padding-top: 2px; }
.w-table { font-size: 12.5px; }
.w-table td, .w-table th { padding-right: 8px; }
.w-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 2px; }
.w-notes { white-space: pre-wrap; text-wrap: pretty; }
.widget .chart, .widget .orrery, .widget .galaxy, .widget ol.feed, .widget details.op, .widget .msg-card { margin-left: 0; }
.widget ol.feed { padding-left: 0; max-height: none; }
.widget .orrery-stage, .widget .galaxy-stage { border: none; }
.widget .orrery-stage, .widget .galaxy-stage { aspect-ratio: auto; max-height: none; min-height: 0; }
.w-orrery .w-body, .w-galaxy .w-body { padding: 0; display: flex; flex-direction: column; }
/* In a widget the map fills the body exactly: the stage takes what's left, the drawing covers the stage. */
.w-orrery .orrery, .w-galaxy .galaxy { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 0; }
.w-orrery .orrery-stage, .w-galaxy .galaxy-stage { flex: 1; min-height: 80px; position: relative; }

.widget .o-card:not(.sheet) { width: min(280px, calc(100% - 12px)); max-height: calc(100% - 12px); }
.widget .map-hint { display: none; }
.w-orrery .w-foot { padding: 0 10px 6px; }

.clockface { display: grid; gap: 6px; align-content: center; height: 100%; text-align: center; }
.w-clock-tick { font-size: clamp(28px, 5vw, 44px); font-weight: 600; letter-spacing: .1em; line-height: 1; text-shadow: 0 0 calc(var(--glow) * 2) var(--ink); }
.w-clock-sub { letter-spacing: .08em; text-transform: uppercase; font-size: 12px; color: var(--accent); }
.clockface.processing .w-clock-sub { animation: blink 1s steps(2) infinite; }
.w-cycle { height: 8px; border: 1px solid var(--rule); padding: 1px; margin: 0 6%; }
.w-cycle-fill { 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); }

/* Gridstack, in the codex's inks. */
.grid-stack { min-height: 120px; }
.grid-stack > .grid-stack-placeholder > .placeholder-content { border: 1px dashed var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.grid-stack-item > .ui-resizable-handle { filter: none; }
.dash.editing .grid-stack-item > .ui-resizable-se { width: 12px; height: 12px; right: 3px; bottom: 3px; background: none; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: none; }
.grid-stack-item.ui-draggable-dragging .widget, .grid-stack-item.ui-resizable-resizing .widget { border-color: var(--accent); box-shadow: 0 0 calc(var(--glow) * 3) var(--accent), 6px 6px 0 color-mix(in srgb, var(--rule) 60%, transparent); }

/* Dialogs: a terminal window over a dimmed page. */
.term-dialog { border: 3px double var(--ink); background: var(--paper); color: var(--ink); padding: 0; width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 48px); font: inherit; }
.term-dialog::backdrop { background: color-mix(in srgb, var(--paper) 30%, rgb(0 0 0 / .55)); }
.term-dialog form { display: grid; gap: 12px; padding: 12px 16px 16px; }
.term-dialog header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--rule); padding-bottom: 6px; }
.term-dialog header h2 { margin: 0; }
.catalog { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.cat-item { font: inherit; text-align: left; color: var(--ink); background: none; border: 1px solid var(--rule); padding: 8px 10px; cursor: pointer; display: grid; gap: 2px; }
.cat-item b { color: var(--accent); letter-spacing: .06em; text-transform: uppercase; font-size: 13px; }
.cat-item span { font-size: 12px; color: var(--ink); }
.cat-item:hover, .cat-item:focus-visible { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.cfg-form .fields { padding-left: 0; }

/* Chat: a terminal transcript, channels down the side. The transcript and compose box (.ooc-log, .ooc-compose) are
   every chat's: the Chat page, the dock and Comms (static/chatbox.js). */
.ooc { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 0; border: 1px solid var(--ink); background: var(--paper); height: min(72vh, 760px); min-height: 380px; }
.ooc[data-compact] { grid-template-columns: minmax(0, 1fr); border: none; height: 100%; min-height: 0; }
.w-chat .w-body { display: flex; flex-direction: column; padding: 0; }
.w-chat .ooc { flex: 1; }
.w-chat .w-foot { padding: 0 10px 6px; }
.ooc-side { border-right: 1px solid var(--rule); overflow-y: auto; padding: 10px 0; display: grid; align-content: start; gap: 14px; }
.ooc-group { display: grid; gap: 1px; }
.ooc-h { padding: 0 12px 4px; font-size: 11px; letter-spacing: .1em; color: var(--dim); }
.ooc-ch { font: inherit; font-size: 13px; text-align: left; color: var(--ink); background: none; border: none; border-left: 2px solid transparent; padding: 4px 22px 4px 12px; cursor: pointer; display: grid; position: relative; width: 100%; }
.ooc-ch:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.ooc-ch.on { border-left-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); font-weight: 600; }
.ooc-snip { font-size: 11px; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ooc-unread { position: absolute; right: 10px; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 var(--glow) var(--accent); }
.ooc-new { display: grid; gap: 2px; padding: 6px 12px 0; }
.ooc-new select { font-size: 12px; border-bottom-color: var(--rule); }
[data-convos] > span, [data-blocks] > span { padding: 0 12px; }
.ooc-blocked { padding: 2px 12px; font-size: 13px; display: flex; justify-content: space-between; gap: 6px; }
.ooc-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ooc-head { display: flex; gap: 12px; align-items: baseline; padding: 8px 14px; border-bottom: 1px solid var(--rule); }
.ooc[data-compact] .ooc-head { display: none; }
.ooc-head b { letter-spacing: .06em; }
.ooc-log { flex: 1; overflow-y: auto; padding: 8px 14px; min-height: 0; }
.ooc[data-compact] .ooc-log { padding: 6px 10px; }
.ooc-older { display: block; margin: 0 auto 8px; font-size: 12px; }
.ooc-older[hidden] { display: none; }
.ooc-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: 14px; }
.ooc[data-compact] .ooc-lines { font-size: 13px; }
.ooc-line { display: grid; grid-template-columns: 13ch max-content minmax(0, 1fr); gap: 0 10px; align-items: baseline; position: relative; padding: 1px 0; }
/* Where there's no room for columns, a line runs on and wraps under its time. */
.ooc[data-compact] .ooc-line { display: block; }
.ooc[data-compact] .ooc-line > * + * { margin-left: 6px; }
.ooc-line:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.ooc-time { font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ooc-who { font: inherit; font-weight: 600; color: var(--accent); background: none; border: none; padding: 0; cursor: pointer; }
.ooc-who::before { content: "<"; color: var(--dim); font-weight: 400; }
.ooc-who::after { content: ">"; color: var(--dim); font-weight: 400; }
.ooc-line.mine .ooc-who { color: var(--ink); }
.ooc-text { overflow-wrap: anywhere; white-space: pre-wrap; }
.ooc-body { min-width: 0; }
.ooc-day { text-align: center; margin: 10px 0 4px; font-size: 11px; letter-spacing: .1em; color: var(--dim); display: flex; align-items: center; gap: 10px; }
.ooc-day::before, .ooc-day::after { content: ""; flex: 1; border-top: 1px dashed var(--rule); }
.ooc-pop { position: absolute; z-index: 20; left: 14ch; top: 100%; background: var(--paper); border: 1px solid var(--ink); display: grid; padding: 4px 0; min-width: 22ch; box-shadow: 4px 4px 0 color-mix(in srgb, var(--rule) 60%, transparent); }
.ooc-pop b { padding: 2px 12px 4px; font-size: 12px; color: var(--dim); }
.ooc-pop button { font: inherit; font-size: 13px; text-align: left; color: var(--accent); background: none; border: none; padding: 3px 12px; cursor: pointer; }
.ooc-pop button:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.ooc-compose { display: flex; gap: 10px; align-items: flex-end; padding: 8px 14px; border-top: 1px solid var(--rule); }
.ooc-compose[hidden] { display: none; }
.ooc[data-compact] .ooc-compose { padding: 6px 10px; gap: 6px; }
.ooc-prompt { color: var(--accent); font-weight: 600; align-self: center; }
.ooc-compose textarea { flex: 1; min-width: 0; font: inherit; line-height: 1.4; color: var(--ink); background: transparent; border: none; border-bottom: 1px solid var(--ink); padding: 3px 0; caret-color: var(--accent); resize: none; overflow-y: auto; max-height: 120px; }
.ooc-compose textarea:focus { outline: none; border-bottom-color: var(--accent); }
.ooc-compose textarea[readonly] { opacity: .6; }
.ooc-count, .ooc-compose .btn { align-self: center; }
.ooc-note { white-space: normal; }
.ooc-status { margin: 0; padding: 0 14px 6px; min-height: 0; color: var(--dim); }
.ooc-status:empty { display: none; }
.ooc-status.alert { color: var(--alert); }
@media (max-width: 700px) {
  .ooc { grid-template-columns: minmax(0, 1fr); height: auto; }
  .ooc-side { border-right: none; border-bottom: 1px solid var(--rule); grid-template-columns: 1fr 1fr; max-height: 220px; }
  .ooc-main { height: 60vh; }
}
@container pane (max-width: 600px) {
  .ooc-line { display: block; }
  .ooc-line > * + * { margin-left: 6px; }
}

/* Commanding from the map: the planned course, and the card beside the body. */
.o-ghost path { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-dasharray: 3 3; animation: march 1s linear infinite; }
.o-ghost .o-meet circle, .o-ghost .o-meet path { stroke: var(--ink); }
.o-card {
  position: absolute; left: 0; top: 0; z-index: 4; width: 250px; background: var(--paper); border: 3px double var(--ink);
  padding: 8px 10px; font-size: 12px; display: grid; gap: 6px; box-shadow: 4px 4px 0 color-mix(in srgb, var(--rule) 60%, transparent);
}
.o-card[hidden] { display: none; }
.o-card > b { font-size: 11px; letter-spacing: .08em; }
.o-card dl { padding: 0; gap: 1px 10px; font-size: 12px; }
.o-card dt { font-size: 10px; }
.o-card-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.o-card .btn { padding: 4px 10px; font-size: 11px; }
.o-card .toggle { padding: 3px 8px; font-size: 11px; }
.o-card { width: 280px; max-height: calc(100% - 12px); overflow-y: auto; }
/* On a phone the card is a sheet under the map, as wide as it, so the map and the course stay in view. */
.o-card.sheet { position: relative; width: auto; max-height: none; transform: none; box-shadow: none; border-width: 3px 0 0; border-style: double; }
.o-card-x { position: absolute; right: 4px; top: 3px; font: inherit; font-size: 12px; color: var(--dim); background: none; border: none; cursor: pointer; padding: 2px 5px; }
.o-card-x:hover { color: var(--alert); }

/* Click-to-command: the actions a ship has at a place. */
.cmd-head { font-size: 11px; letter-spacing: .08em; padding-right: 18px; }
.cmd-acts { display: grid; gap: 3px; }
.cmd-act { font: inherit; text-align: left; display: grid; gap: 0; padding: 4px 8px; background: none; color: var(--ink); border: 1px solid var(--rule); cursor: pointer; }
.cmd-act b { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.cmd-act span { font-size: 11px; color: var(--dim); }
.cmd-act:hover, .cmd-act:focus-visible { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.cmd-act.primary { border-color: color-mix(in srgb, var(--accent) 60%, var(--rule)); }
.cmd-act.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.cmd-act.danger b { color: var(--alert); }
.cmd-detail { display: grid; gap: 6px; border-top: 1px dashed var(--rule); padding-top: 6px; }
.cmd-detail[hidden] { display: none; }
.cmd-fields { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 8px; align-items: center; font-size: 12px; }
.cmd-fields label { color: var(--dim); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.cmd-fields select { font-size: 12px; min-width: 0; }
.cmd-fields input { font: inherit; font-size: 12px; color: var(--ink); background: transparent; border: none; border-bottom: 1px solid var(--ink); min-width: 0; }
.cmd-check:empty { display: none; }
.cmd-pick { display: inline-flex; gap: 8px; align-items: center; font-size: 12px; }
.cmd-pick span { color: var(--dim); letter-spacing: .08em; font-size: 11px; }
.cmd-pick select { font-size: 12px; border-bottom-color: var(--accent); }
.g-cmd { margin-left: auto; }
.cmd-panel { display: grid; gap: 8px; }
/* Room for the actions before the script draws them: a row of buttons and its line. */
.cmd-panel:not([data-mounted]) { min-height: 88px; }
.cmd-stage { display: grid; gap: 6px; }
.cmd-stage .cmd-acts { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.g-card { width: 280px; }
.galaxy-svg.commanding .g-sys { cursor: crosshair; }
.g-sys.cmd-from .g-dot { stroke: var(--ink); stroke-width: 2; }
/* A planned trip: its lanes lit and marching, its stops ringed. */
.g-lane.trip { stroke: var(--accent); stroke-width: 2.5; stroke-dasharray: 6 4; animation: march 1s linear infinite; }
.g-sys.trip-stop .g-dot { stroke: var(--accent); stroke-width: 2.5; }
.g-sys.trip-stop .g-label { fill: var(--accent); }
.galaxy[data-ops] .g-sys { cursor: pointer; }
.g-sys.chosen .g-halo, .g-sys.chosen .g-hit { stroke: var(--accent); stroke-width: 1.5; }
.g-sys.chosen .g-hit { fill: color-mix(in srgb, var(--accent) 14%, transparent); }
.g-sys.chosen .g-label { display: inline; }
.g-count { font-size: 11px; font-weight: 600; fill: var(--accent); pointer-events: none; paint-order: stroke; stroke: var(--paper); stroke-width: 3px; }
.g-sys.target .g-dot { stroke: var(--accent); stroke-width: 3; }
.g-sys.target .g-label { display: inline; fill: var(--accent); font-weight: 600; }
.trip-sum { margin: 0; font-size: 12px; }
.trip-hops { margin: 0; padding-left: 20px; }
.trip-check:empty, .trip-out:empty { display: none; }
.trip-also { margin: 0; }
.pick-name { display: block; font-size: 12px; color: var(--accent); min-height: 0; }
.pick-name:empty { display: none; }
.o-card .cmd-pick { border-top: 1px dashed var(--rule); padding-top: 6px; }
.card-acts { display: grid; gap: 6px; }
.card-acts .cmd-head { display: none; }

/* Stacks: a leader from the body, a plate, icons side by side; like a plotting board. */
.o-lead { fill: none; stroke: var(--accent); stroke-width: 1; opacity: .75; }
.o-plate { fill: color-mix(in srgb, var(--paper) 85%, transparent); stroke: var(--accent); stroke-width: 1; }
.o-plate:hover { stroke-width: 1.6; }
.o-more { fill: var(--accent); font: 600 11px var(--font); cursor: default; }
.o-stacktag { fill: var(--accent); font: 11px var(--font); letter-spacing: .03em; paint-order: stroke; stroke: var(--paper); stroke-width: 4px; pointer-events: none; }
.no-labels .o-stacktag { display: none; }
.o-ship.stacked .o-shiplabel { display: none !important; }
.o-ship.stacked .o-hull { transform: scale(.85); }
.o-ship.stacked .o-hit { r: 7.5; }
.o-ship.stacked .o-focus-ring { r: 8.5; }
.o-station.stacked .o-hull, .o-contact.stacked .o-hull { transform: scale(.85); }
.homes-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 12px; }
/* A battlespace goal on its way (static/battle.js): in the accent, until the game takes it. */
.bs-ghost.bs-pending line, .bs-ghost.bs-pending circle { stroke: var(--accent); opacity: .8; }
/* A ship on the orrery with an order on its way (static/orrery.js markPending). */
.o-ship.pending .o-hull { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 2 1.5; }
.st-chip [data-pending].pend-on { margin-left: 6px; }

/* The ship query builder (shipquery.js): the automation screens and Fleet ops. */
.c-qb { display: grid; gap: 5px; }
.c-mode { font-size: 12px; color: var(--dim); }
.c-mode select { color: var(--accent); }
.c-qrow { display: grid; grid-template-columns: minmax(9ch, 1fr) minmax(7ch, .7fr) minmax(0, 1.3fr) auto; gap: 6px; align-items: end; border-left: 2px solid var(--rule); padding-left: 8px; }
.c-qrow:hover { border-left-color: var(--accent); }
.c-qprev { margin-top: 8px; padding-top: 6px; border-top: 1px dashed var(--rule); display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.c-x { font: inherit; font-size: 12px; color: var(--dim); background: none; border: 1px solid transparent; padding: 0 5px; cursor: pointer; }
.c-x:hover { color: var(--alert); border-color: var(--rule); }
.c-add { justify-self: start; font-size: 11px; padding: 2px 8px; margin-top: 4px; }
@container pane (max-width: 640px) { .c-qrow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }