:root {
  --bg: #070a0f;
  --bg-grad-top: #0d141d;
  --panel: #111821;
  --panel-elev: #16202c;
  --panel-input: #0a1018;

  --line: #1f3142;
  --line-bright: #2d4a66;

  --cyan: #5fb8e8;
  --cyan-bright: #8ed1f4;
  --cyan-dim: #2b6c95;
  --cyan-glow: rgba(95, 184, 232, 0.22);
  --cyan-glow-strong: rgba(95, 184, 232, 0.38);

  --amber: #ffa84a;
  --amber-dim: #b8742a;
  --amber-glow: rgba(255, 168, 74, 0.18);

  --green-pip: #57c785;
  --green-pip-dim: #2a6b46;
  --green-glow: rgba(87, 199, 133, 0.16);

  --text: #d8e3ec;
  --text-dim: #6c8398;
  --text-fade: #4d6478;

  --error: #ff5d5d;
  --error-glow: rgba(255, 93, 93, 0.18);

  --font-chrome: "Roboto Condensed", "Arial Narrow", "Helvetica Neue Condensed",
                 "Liberation Sans Narrow", -apple-system, BlinkMacSystemFont,
                 "Segoe UI", sans-serif;
  --font-readout: "JetBrains Mono", "SF Mono", "Consolas",
                  "Liberation Mono", ui-monospace, monospace;

  --track: 0.14em;
  --track-tight: 0.06em;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-chrome);
  font-size: 14px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

/* ---------- shell ---------- */

.terminal {
  position: relative;
  min-height: 100vh;
  padding: 1.25rem clamp(1rem, 3vw, 2rem) 2rem;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, var(--bg-grad-top) 0%, transparent 70%),
    linear-gradient(180deg, var(--bg) 0%, #050709 100%);
  overflow: hidden;
}

/* faint scanline overlay — sits above content, blocks no clicks */
.terminal::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent 0,
    transparent 2px,
    rgba(255, 255, 255, 0.014) 2px,
    rgba(255, 255, 255, 0.014) 3px
  );
  z-index: 1000;
  mix-blend-mode: screen;
}

/* corner ambient glow */
.terminal::after {
  content: '';
  position: absolute;
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 40%;
  background: radial-gradient(ellipse, var(--cyan-glow) 0%, transparent 60%);
  pointer-events: none;
  opacity: 0.5;
  z-index: 0;
}

.shell {
  position: relative;
  z-index: 1;
  max-width: 880px;
  margin: 0 auto;
}

/* ---------- top bar ---------- */

.top-bar {
  position: relative;
  border-bottom: 1px solid var(--line);
  padding: 0.5rem 0.5rem 0.75rem;
  margin: 0 0 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.top-bar::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 120px;
  height: 1px;
  background: linear-gradient(90deg, var(--cyan-bright), transparent);
  box-shadow: 0 0 8px var(--cyan-glow-strong);
}

.top-bar h1 {
  margin: 0;
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--cyan-bright);
  text-shadow: 0 0 12px var(--cyan-glow-strong);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.top-bar h1::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green-pip);
  box-shadow: 0 0 8px var(--green-pip), 0 0 2px #fff inset;
  flex-shrink: 0;
}

.top-bar h1::after {
  content: 'SUPPLY COMPUTER';
  font-size: 0.7rem;
  letter-spacing: var(--track);
  color: var(--text-dim);
  margin-left: 0.75rem;
  padding-left: 0.75rem;
  border-left: 1px solid var(--line);
  text-shadow: none;
}

/* ---------- site nav (outbound, no dead ends) ---------- */

.site-nav {
  margin-left: auto;
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.site-nav a {
  color: var(--text-dim);
  text-decoration: none;
  font-size: 0.72rem;
  letter-spacing: var(--track);
  text-transform: uppercase;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--line);
  transition: all 120ms ease;
}

.site-nav a:hover {
  color: var(--cyan-bright);
  border-color: var(--cyan-dim);
  background: rgba(95, 184, 232, 0.06);
  box-shadow: 0 0 8px var(--cyan-glow);
}

/* ---------- panels ---------- */

.panels {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.panel {
  position: relative;
  background:
    linear-gradient(180deg, rgba(95, 184, 232, 0.03) 0%, transparent 12%),
    var(--panel);
  border: 1px solid var(--line);
  padding: 1rem 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

/* top accent bar — thin cyan stripe across each panel */
.panel::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan-dim), var(--cyan) 30%, var(--cyan-bright) 50%, var(--cyan) 70%, var(--cyan-dim));
  box-shadow: 0 0 8px var(--cyan-glow);
}

/* corner bracket bottom-right */
.panel::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 14px;
  height: 14px;
  border-right: 2px solid var(--cyan);
  border-bottom: 2px solid var(--cyan);
  opacity: 0.7;
  pointer-events: none;
}

.panel h2 {
  margin: 0 0 0.25rem;
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--cyan-bright);
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--line);
}

.panel h2::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--cyan);
  box-shadow: 0 0 6px var(--cyan-glow-strong);
  flex-shrink: 0;
  transform: rotate(45deg);
}

.lead {
  color: var(--text-dim);
  font-size: 0.82rem;
  letter-spacing: var(--track-tight);
  margin: 0;
  line-height: 1.5;
}

/* ---------- labels & inputs ---------- */

label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  color: var(--text-dim);
  font-size: 0.78rem;
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
}

input[type="number"],
input[type="text"],
input[type="search"],
select {
  background: var(--panel-input);
  color: var(--cyan-bright);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 0.45rem 0.55rem;
  font-family: var(--font-readout);
  font-size: 0.85rem;
  letter-spacing: var(--track-tight);
  outline: none;
  min-width: 200px;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

select {
  font-family: var(--font-chrome);
  text-transform: uppercase;
  letter-spacing: var(--track-tight);
  font-size: 0.82rem;
  cursor: pointer;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--cyan) 50%),
                    linear-gradient(135deg, var(--cyan) 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  padding-right: 1.6rem;
}

input:focus, select:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 1px var(--cyan-glow), 0 0 12px var(--cyan-glow);
}

/* ---------- controls row ---------- */

.controls {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  align-items: flex-end;
}

/* ---------- headline stats ---------- */

.headline {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.stat {
  flex: 1;
  min-width: 150px;
  border-left: 2px solid var(--cyan-dim);
  padding: 0.1rem 0 0.1rem 0.7rem;
}

.stat .n {
  font-family: var(--font-readout);
  font-size: 1.7rem;
  font-weight: 600;
  color: var(--cyan-bright);
  text-shadow: 0 0 12px var(--cyan-glow);
  line-height: 1.1;
}

.stat .l {
  font-size: 0.72rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: var(--track);
  margin-top: 0.2rem;
}

/* ---------- table ---------- */

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
}

th, td {
  text-align: left;
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--line);
}

th {
  font-size: 0.7rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: var(--track);
  font-weight: 500;
}

td {
  font-family: var(--font-readout);
  letter-spacing: var(--track-tight);
}

td.num, th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}


.dim { color: var(--text-fade); }

/* ---------- tags ---------- */

.tag {
  font-family: var(--font-chrome);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: var(--track-tight);
  padding: 0.12rem 0.5rem;
  border: 1px solid transparent;
  white-space: nowrap;
}

.tag.limit {
  background: var(--amber-glow);
  border-color: var(--amber-dim);
  color: var(--amber);
}

.tag.ok {
  background: var(--green-glow);
  border-color: var(--green-pip-dim);
  color: var(--green-pip);
}

/* ---------- note ---------- */

.note {
  color: var(--text-dim);
  font-size: 0.78rem;
  letter-spacing: var(--track-tight);
  line-height: 1.5;
  margin-top: 0.4rem;
  padding-left: 0.65rem;
  position: relative;
}

.note::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 4px;
  height: 1px;
  background: var(--cyan-dim);
}

.note b { color: var(--cyan-bright); font-weight: 600; }

.warn { color: var(--amber); }
.warn b { color: var(--amber); }

/* ---------- reference (collapsible) ---------- */

details.ref {
  position: relative;
  background:
    linear-gradient(180deg, rgba(95, 184, 232, 0.03) 0%, transparent 12%),
    var(--panel);
  border: 1px solid var(--line);
}

details.ref::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan-dim), var(--cyan) 30%, var(--cyan-bright) 50%, var(--cyan) 70%, var(--cyan-dim));
  box-shadow: 0 0 8px var(--cyan-glow);
}

details.ref summary {
  cursor: pointer;
  padding: 0.85rem 1rem;
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--track);
  color: var(--cyan-bright);
  list-style: none;
  user-select: none;
}

details.ref summary::-webkit-details-marker { display: none; }
details.ref summary::before { content: '▸ '; color: var(--cyan); }
details.ref[open] summary::before { content: '▾ '; }

details.ref .body {
  padding: 0 1rem 1.1rem;
  overflow-x: auto;
}

details.ref h3 {
  font-size: 0.72rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: var(--track);
  margin: 1.1rem 0 0.3rem;
  font-weight: 500;
}

details.ref table { font-size: 0.8rem; }
details.ref td, details.ref th { padding: 0.4rem 0.55rem; white-space: nowrap; }

/* ---------- footer ---------- */

footer {
  color: var(--text-fade);
  font-size: 0.74rem;
  letter-spacing: var(--track-tight);
  line-height: 1.6;
  margin-top: 1rem;
  padding: 0.75rem 0.5rem;
  border-top: 1px solid var(--line);
}

footer code {
  font-family: var(--font-readout);
  color: var(--cyan);
}

/* ---------- responsive ---------- */

@media (max-width: 600px) {
  .top-bar h1::after { display: none; }
  .controls { flex-direction: column; align-items: stretch; }
  input[type="number"], select { min-width: 0; width: 100%; }
}

/* ---------- profile panel ---------- */
/* Ported from setools/jumpcalc/style.css so the two tools read as one family. */

.panel-profile h3 {
  margin: 0 0 0.15rem;
  color: var(--cyan);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: var(--track);
  text-transform: uppercase;
}

.row {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  align-items: center;
}

label.row {
  flex-direction: row;
}

label.row.check {
  text-transform: none;
  letter-spacing: var(--track-tight);
}

label.row.check input[type="checkbox"] {
  accent-color: var(--cyan);
  cursor: pointer;
}

.editor-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.1rem;
  margin-top: 0.35rem;
}

.editor-col {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

/* The compact editors need to breathe — the global 200px floor is for the
   wide single-column inputs at the top of the page. */
.editor-col input,
.editor-col select,
.field-grid input,
.line-row input,
.line-row select {
  min-width: 0;
  width: 100%;
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 0.45rem;
}

/* ---------- buttons ---------- */

button {
  position: relative;
  background: linear-gradient(180deg, rgba(95, 184, 232, 0.06), rgba(95, 184, 232, 0.02));
  color: var(--cyan-bright);
  border: 1px solid var(--cyan-dim);
  border-radius: 0;
  padding: 0.45rem 0.85rem;
  font-family: var(--font-chrome);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: var(--track);
  text-transform: uppercase;
  cursor: pointer;
  transition: all 120ms ease;
}

button:hover {
  border-color: var(--cyan);
  background: linear-gradient(180deg, rgba(95, 184, 232, 0.14), rgba(95, 184, 232, 0.05));
  box-shadow: 0 0 10px var(--cyan-glow), inset 0 0 8px var(--cyan-glow);
  color: #fff;
}

button:active {
  background: var(--cyan-glow-strong);
  color: #fff;
}

button:disabled {
  color: var(--text-fade);
  border-color: var(--line);
  background: transparent;
  cursor: not-allowed;
  box-shadow: none;
}

/* ---------- lists ---------- */

.list-box {
  background: var(--panel-input);
  border: 1px solid var(--line);
  height: 180px;
  overflow-y: auto;
  position: relative;
}

.list-box::-webkit-scrollbar { width: 8px; }
.list-box::-webkit-scrollbar-track { background: var(--panel-input); }
.list-box::-webkit-scrollbar-thumb { background: var(--cyan-dim); }
.list-box::-webkit-scrollbar-thumb:hover { background: var(--cyan); }

.se-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-readout);
  font-size: 0.8rem;
}

.se-list li {
  padding: 0.32rem 0.6rem 0.32rem 1.4rem;
  color: var(--cyan-bright);
  cursor: pointer;
  border-bottom: 1px solid #0c1620;
  position: relative;
  letter-spacing: var(--track-tight);
  transition: background 100ms ease, padding-left 120ms ease;
}

.se-list li::before {
  content: '';
  position: absolute;
  left: 0.55rem;
  top: 50%;
  width: 5px;
  height: 5px;
  border: 1px solid var(--cyan-dim);
  transform: translateY(-50%);
}

.se-list li:hover {
  background: rgba(95, 184, 232, 0.07);
  padding-left: 1.55rem;
}

.se-list li:hover::before { border-color: var(--cyan); background: var(--cyan-glow); }

.se-list li.selected {
  background: linear-gradient(90deg, var(--cyan-glow-strong), rgba(95, 184, 232, 0.08));
  color: #fff;
  text-shadow: 0 0 6px var(--cyan-glow-strong);
}

.se-list li.selected::before {
  background: var(--cyan-bright);
  border-color: var(--cyan-bright);
  box-shadow: 0 0 6px var(--cyan-bright);
}

.se-list li.readonly { color: var(--amber); }
.se-list li.readonly::before { border-color: var(--amber-dim); }
.se-list li.readonly:hover::before { border-color: var(--amber); background: var(--amber-glow); }

.se-list li.readonly.selected {
  background: linear-gradient(90deg, var(--amber-glow), rgba(255, 168, 74, 0.04));
  color: var(--amber);
  text-shadow: 0 0 6px var(--amber-glow);
}

.se-list li.readonly.selected::before {
  background: var(--amber);
  border-color: var(--amber);
  box-shadow: 0 0 6px var(--amber);
}

.se-list li.broken { color: var(--error); }
.se-list li.broken::before { border-color: var(--error); }

/* ---------- fieldsets ---------- */

fieldset {
  border: 1px solid var(--line);
  border-left: 2px solid var(--cyan-dim);
  padding: 0.75rem 0.85rem 0.85rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: rgba(95, 184, 232, 0.02);
  min-width: 0;
}

fieldset legend {
  color: var(--text-dim);
  padding: 0 0.4rem;
  text-transform: uppercase;
  letter-spacing: var(--track);
  font-size: 0.7rem;
}

fieldset:disabled { opacity: 0.45; }
fieldset:disabled legend::after { content: ' [ locked ]'; color: var(--amber-dim); }
fieldset label { gap: 0.25rem; }

/* ---------- ingredient rows ---------- */






tr.broken td { color: var(--error); }

/* ---------- hints ---------- */

.hint {
  color: var(--text-fade);
  font-size: 0.72rem;
  letter-spacing: var(--track-tight);
  margin: 0.15rem 0 0.1rem;
  padding-left: 0.65rem;
  position: relative;
  line-height: 1.45;
}

.hint::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 4px;
  height: 1px;
  background: var(--cyan-dim);
}

/* `.panel` sets display:flex, which overrides the browser's own [hidden] rule.
   Without this, adding `hidden` to a panel does nothing. */
[hidden] { display: none !important; }

/* ---------- trade ledger ---------- */

/* Two piles side by side, with the verdict between them. Below 780px they
   stack and the verdict sits between the two stacked piles, which keeps the
   reading order "your pile, the gap, their pile" on every width. */
.trade {
  display: grid;
  /* Fixed middle column. `auto` let the verdict text resize both piles every
     time the gap changed, which is half of why the layout breathed while
     typing. */
  grid-template-columns: 1fr 11.5rem 1fr;
  gap: 1rem;
  align-items: start;
}

@media (max-width: 780px) {
  .trade { grid-template-columns: 1fr; }
}

.side {
  background: var(--panel-input);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.75rem 0.8rem 0.85rem;
  min-width: 0;
}

.side h3 {
  margin: 0 0 0.6rem;
  font-family: var(--font-readout);
  font-size: 0.72rem;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--cyan-dim);
  font-weight: 500;
}

.side-lines { display: flex; flex-direction: column; gap: 0.7rem; }

/* Each line is two rows tall, so a rule keeps adjacent lines from reading as
   one block. */
.side-lines .line-row + .line-row {
  padding-top: 0.7rem;
  border-top: 1px solid var(--line);
}

/* Two rows per line. A single row cannot hold a readable material name, twelve
   digits, and a credits figure inside a ~320px pile — the name column was the
   one that collapsed. Row one gives the name the full width; row two carries
   the controls and the value.

     mat  mat  mat  drop
     form qty  val  val
*/
.line-row {
  display: grid;
  grid-template-columns: 5rem 7rem minmax(0, 1fr) 1.9rem;
  grid-template-areas:
    "mat  mat  mat  drop"
    "form qty  val  val";
  gap: 0.35rem;
  align-items: center;
}

.line-row select[data-field="materialId"] { grid-area: mat; }
.line-row select[data-field="form"]       { grid-area: form; }
.line-row input[data-field="qty"]         { grid-area: qty; }
.line-row .line-value                     { grid-area: val; }
.line-row .btn-drop                       { grid-area: drop; justify-self: end; }

/* Spinners are noise on a field expecting six-plus digits, and Chrome reserves
   room for them only on hover — which shifted the text under the caret. */
.line-row input[data-field="qty"] {
  -moz-appearance: textfield;
  appearance: textfield;
  font-variant-numeric: tabular-nums;
}

.line-row input[data-field="qty"]::-webkit-outer-spin-button,
.line-row input[data-field="qty"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.line-row .line-value {
  font-family: var(--font-readout);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
  text-align: right;
  white-space: nowrap;
}


.line-row.missing select { border-color: var(--error); color: var(--error); }
.line-row.missing .line-value { color: var(--error); }

.btn-drop {
  min-width: 0;
  padding: 0.3rem 0.5rem;
  line-height: 1;
  color: var(--text-fade);
}

.btn-drop:hover {
  color: var(--error);
  border-color: var(--error);
  box-shadow: 0 0 0 1px var(--error-glow);
}

.side-foot {
  margin-top: 0.7rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.side-total {
  font-family: var(--font-readout);
  font-variant-numeric: tabular-nums;
  font-size: 1.05rem;
  color: var(--cyan-bright);
  text-shadow: 0 0 12px var(--cyan-glow);
  white-space: nowrap;
}

.side-empty {
  color: var(--text-fade);
  font-size: 0.82rem;
  font-style: italic;
  padding: 0.3rem 0;
}

/* ---------- verdict ---------- */

.verdict {
  align-self: center;
  text-align: center;
  min-width: 0;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--line-bright);
  border-radius: 4px;
  background: var(--panel-elev);
}

.verdict .v-label {
  font-family: var(--font-readout);
  font-size: 0.66rem;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--text-fade);
  display: block;
  margin-bottom: 0.3rem;
}

.verdict .v-amount {
  font-family: var(--font-readout);
  font-variant-numeric: tabular-nums;
  font-size: 1.15rem;
  color: var(--amber);
  text-shadow: 0 0 12px var(--amber-glow);
  display: block;
  white-space: nowrap;
}

.verdict .v-note {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.76rem;
  color: var(--text-dim);
  line-height: 1.35;
}

.verdict.even { border-color: var(--green-pip-dim); }
.verdict.even .v-amount { color: var(--green-pip); text-shadow: 0 0 12px var(--green-glow); }
.verdict.idle { border-color: var(--line); }
.verdict.idle .v-amount { color: var(--text-fade); text-shadow: none; }

/* ---------- balance solver ---------- */

/* Lives inside a pile now, so it lays out as a small three-row grid rather than
   a wide flex row: caption, then the two selects, then the answer. */
.solver {
  margin-top: 0.7rem;
  padding-top: 0.7rem;
  border-top: 1px dashed var(--line);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 6.5rem;
  gap: 0.4rem;
  align-items: center;
}

.solve-label {
  grid-column: 1 / -1;
  font-family: var(--font-readout);
  font-size: 0.66rem;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--text-fade);
}

.solver select {
  min-width: 0;
  width: 100%;
}

.solver .solve-out {
  grid-column: 1 / -1;
  font-family: var(--font-readout);
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
  color: var(--cyan-bright);
  text-align: right;
}

.solver .solve-out.none { color: var(--text-fade); }

/* ---------- reference table ---------- */

th.sortable {
  cursor: pointer;
  user-select: none;
}

th.sortable:hover { color: var(--cyan-bright); }

th.sortable::after {
  content: ' ⇅';
  color: var(--text-fade);
  font-size: 0.8em;
}

th.sortable.asc::after { content: ' ▲'; color: var(--cyan); }
th.sortable.desc::after { content: ' ▼'; color: var(--cyan); }

tr.fixed-row td:first-child::after {
  content: ' fixed';
  font-family: var(--font-readout);
  font-size: 0.64rem;
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  color: var(--amber-dim);
  margin-left: 0.4rem;
}