/* Palette: basalt greys, regolith text, one signal orange for "current /
   selected". Other hues only encode data (item kind, quest status, lanes). */
:root {
  --bg: #1a1b1d;
  --bg-2: #161719;
  --panel: #212225;
  --panel-2: #292a2e;
  --rule: #35373b;
  --rule-soft: #2b2d30;
  --text: #e7e4dd;
  --text-dim: #a8a399;
  --text-faint: #7a766e;
  --accent: #ee8f2b;
  --accent-soft: rgba(238, 143, 43, 0.13);
  --cyan: #56b8c4;
  --cyan-soft: rgba(86, 184, 196, 0.12);
  --green: #7fbf6a;
  --green-soft: rgba(127, 191, 106, 0.12);
  --red: #e0645a;
  --purple: #a891e0;
  --purple-soft: rgba(168, 145, 224, 0.12);
  --r-ctl: 3px;
  --r-panel: 6px;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sans: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --cond: "Barlow Semi Condensed", "Barlow", -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--cond); font-weight: 600; line-height: 1.2; }

a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: var(--sans); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- top bar ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 0 22px;
  height: 52px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--rule);
}
.brand {
  font-family: var(--cond);
  font-weight: 700;
  font-size: 19px;
  color: var(--text);
  white-space: nowrap;
}
.brand:hover { text-decoration: none; }
.brand-sub { font-weight: 500; color: var(--text-faint); }
.nav { display: flex; align-self: stretch; }
.nav-link {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--text-dim);
  padding: 0 14px;
  font-family: var(--cond);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}
.nav-link:hover { color: var(--text); }
.nav-link.active { color: var(--text); border-bottom-color: var(--accent); }
.nav-sep { width: 1px; margin: 16px 8px; background: var(--rule); }
.nav-link.wip { color: var(--text-faint); }
.nav-link.wip:hover, .nav-link.wip.active { color: var(--text-dim); }
.nav-wip { font-family: var(--sans); font-size: 11px; font-weight: 500; color: var(--text-faint); margin-left: 2px; }
.topbar-status { margin-left: auto; font-size: 13px; color: var(--text-faint); }

/* ---------- layout ---------- */
.app { max-width: 1480px; margin: 0 auto; padding: 24px 22px 80px; }
.view-title { font-size: 26px; margin: 0 0 16px; }

.panel {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--r-panel);
  padding: 18px 20px;
  margin-bottom: 18px;
}
.panel h2 { margin: 0 0 12px; font-size: 19px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.panel-head h2 { margin: 0; }
.hint { color: var(--text-faint); font-size: 13.5px; margin: 0 0 12px; max-width: 72ch; }
.view-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.view-bar .wip-note { margin: 0; }
.wip-note { margin: 0 0 16px; color: var(--text-faint); font-size: 13.5px; }
.wip-note strong { color: var(--text-dim); font-weight: 600; }

/* ---------- chips / tags ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--text-dim);
  border-radius: 999px;
  padding: 3px 11px;
  font-size: 13px;
  cursor: pointer;
}
.chip:hover { color: var(--text); border-color: var(--text-faint); }
.chip.selected { color: var(--text); border-color: var(--accent); background: var(--accent-soft); }
.chip.ghost { cursor: default; opacity: .6; }
.chip-row { display: flex; gap: 6px; flex-wrap: wrap; }
.mini-chip { font-size: 12px; padding: 1px 8px; border-radius: 999px; background: transparent; border: 1px solid var(--rule); color: var(--text-dim); }
button.mini-chip { cursor: pointer; }
button.mini-chip:hover { color: var(--text); }

/* Kept only for the rare inline marker ("inferred"). */
.badge { display: inline-block; font-size: 12px; color: var(--text-faint); }

.mono { font-family: var(--mono); font-size: 12px; color: var(--text-faint); }
.kind-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.hidden { display: none; }

/* ---------- two-pane ---------- */
.split { display: grid; grid-template-columns: 320px 1fr; gap: 18px; align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); } .sidebar { position: static; max-height: 60vh; } }
.split > * { min-width: 0; }

.sidebar {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--r-panel);
  overflow: hidden;
  position: sticky; top: 70px;
  max-height: calc(100vh - 90px);
  display: flex; flex-direction: column;
}
.searchbox { padding: 12px; border-bottom: 1px solid var(--rule); }
.searchbox input, .toolbar input, .storage-finder input {
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--rule);
  color: var(--text);
  border-radius: var(--r-ctl);
  padding: 9px 12px;
  font: inherit;
  font-size: 14px;
}
.searchbox input:focus, .toolbar input:focus, .storage-finder input:focus { outline: none; border-color: var(--accent); }
.filter-rows { display: flex; flex-direction: column; gap: 6px; }
.scroll-list { overflow-y: auto; flex: 1; }
.list-item {
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule-soft);
  cursor: pointer;
}
.list-item:hover { background: var(--panel-2); }
.list-item.active { background: var(--panel-2); }
.list-item.active .li-title { color: var(--accent); }
.list-item .li-title { font-weight: 600; font-size: 14.5px; }
.list-item .li-sub { font-size: 12.5px; color: var(--text-faint); margin-top: 1px; padding-left: 23px; }
.status-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  margin-right: 7px; font-size: 10px; color: var(--bg); font-weight: 700;
  vertical-align: -2px;
}

/* ---------- quest detail ---------- */
.quest-head { margin-bottom: 10px; }
.quest-kind { margin: 0 0 2px; font-size: 13px; color: var(--text-dim); }
.quest-head h1 { font-size: 30px; margin: 0; }
.quest-facts { margin: 4px 0 0; color: var(--text-faint); font-size: 13.5px; }
.quest-desc { color: var(--text-dim); max-width: 72ch; white-space: pre-line; margin: 12px 0 0; }
.progress-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 16px 0 4px; }
.status-control { display: flex; gap: 6px; flex-wrap: wrap; }
#quest-cp-count { font-family: var(--sans); font-size: 13px; color: var(--text-faint); }

.quest-rel { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rel-label { font-size: 13px; font-weight: 600; color: var(--text-dim); min-width: 92px; }

.advanced summary { cursor: pointer; font-family: var(--cond); font-weight: 600; font-size: 17px; user-select: none; }
.advanced summary:hover { color: var(--accent); }
.advanced[open] summary { margin-bottom: 12px; }
.summary-note { font-family: var(--sans); font-weight: 400; font-size: 13px; color: var(--text-faint); margin-left: 6px; }

.unlock-list { display: flex; flex-direction: column; }
.unlock-row { display: grid; grid-template-columns: minmax(160px, 240px) 1fr; gap: 12px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--rule-soft); }
.unlock-row:last-child { border-bottom: 0; }
.unlock-row .chip { justify-self: start; }
.via-list { display: flex; flex-direction: column; gap: 3px; }
.via { font-size: 13px; color: var(--text-faint); }
.via b { color: var(--text-dim); font-weight: 600; }
.via-conds { display: block; font-family: var(--mono); font-size: 11.5px; }
@media (max-width: 700px) { .unlock-row { grid-template-columns: 1fr; gap: 4px; } }

.gate-list { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.gate-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 12px; }
.gate { font-family: var(--mono); font-size: 11.5px; padding: 1px 6px; border-radius: var(--r-ctl); border: 1px solid var(--rule); color: var(--text-dim); }
.gate.ok { color: var(--green); border-color: rgba(127,191,106,.4); }
.gate.no { color: var(--red); border-color: rgba(224,100,90,.4); text-decoration: line-through; }

/* ---------- quest flow ---------- */
.flow { display: flex; flex-direction: column; }
.flow-chapter {
  margin: 22px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule);
  font-size: 17px;
  color: var(--text);
}
.flow-chapter:first-child { margin-top: 0; }
.flow-row { display: flex; gap: 14px; }
.flow-stage {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--rule);
  border-radius: var(--r-panel);
  background: var(--panel-2);
}
.flow-stage-head { display: flex; align-items: baseline; gap: 10px; padding: 10px 14px 4px; }
.flow-stage-num { font-family: var(--cond); font-weight: 700; font-size: 15px; color: var(--text-faint); min-width: 1.4em; }
.flow-stage-name { font-family: var(--cond); font-weight: 600; font-size: 16px; }
.stage-timer, .stage-offpath-badge { margin-left: auto; font-size: 12.5px; color: var(--text-faint); }
.stage-offpath-badge + .stage-timer { margin-left: 8px; }
.flow-cps { padding: 0 14px 12px; }
.flow-arrow { text-align: center; color: var(--text-faint); line-height: 1; padding: 5px 0; }

.flow-cp { display: flex; gap: 10px; padding: 7px 4px; margin: 0 -4px; border-radius: var(--r-ctl); }
.flow-cp[data-cp] { cursor: pointer; }
.flow-cp[data-cp]:hover { background: var(--panel); }
.flow-cp-check { color: var(--text-dim); font-size: 14px; width: 16px; flex-shrink: 0; }
.flow-cp .cp-title { font-weight: 600; font-size: 14.5px; }
.flow-cp .cp-desc { color: var(--text-dim); font-size: 13.5px; }
.flow-cp .cp-cond { margin-top: 2px; font-family: var(--mono); font-size: 11px; color: var(--text-faint); }
.flow-cp.done .cp-title { color: var(--green); text-decoration: line-through; text-decoration-color: rgba(127,191,106,.5); }
.cp-toggle { cursor: pointer; user-select: none; }
.cp-toggle.done { color: var(--green); }

.flow-stage.off-path .flow-stage-name { text-decoration: line-through; text-decoration-color: var(--text-faint); }
.flow-stage.off-path .flow-cp,
.flow-stage.off-path .flow-log,
.flow-stage.off-path .flow-contract,
.flow-stage.off-path .flow-dialogue,
.flow-log.off-path, .fd-entry.off-path, .flow-contract.off-path { opacity: 0.38; }

.flow-log { display: flex; gap: 10px; align-items: baseline; padding: 6px 0; color: var(--text-dim); font-size: 13.5px; border-top: 1px solid var(--rule-soft); }
.flow-log-mark { flex-shrink: 0; width: 26px; font-size: 12px; font-weight: 600; color: var(--text-faint); }
.trigger-list { display: inline-flex; gap: 5px; flex-wrap: wrap; margin-left: 8px; }
.trigger-chip { font-size: 11px; font-family: var(--mono); color: var(--text-faint); }

.flow-choice { margin: 8px 0; border: 1px solid rgba(168,145,224,.35); border-radius: var(--r-panel); background: var(--purple-soft); padding: 12px 14px; }
.flow-choice .choice-title { color: var(--purple); }
.choice-title { font-family: var(--cond); font-weight: 600; font-size: 15.5px; margin-bottom: 4px; }
.choice-text { color: var(--text-dim); font-size: 13.5px; margin-bottom: 10px; white-space: pre-line; }
.choice-options { display: flex; flex-direction: column; gap: 6px; }
.choice-option {
  display: flex; align-items: center; gap: 8px; text-align: left;
  background: var(--panel); border: 1px solid var(--rule); color: var(--text);
  border-radius: var(--r-ctl); padding: 8px 12px; font-size: 14px; cursor: pointer;
}
.choice-option:hover { border-color: var(--text-faint); }
.choice-option.selected { border-color: var(--accent); color: var(--accent); }
.choice-mark { font-size: 11px; }
.choice-consequences { margin-top: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.choice-consequence { display: flex; gap: 6px 14px; flex-wrap: wrap; }
.choice-consequence.hidden { display: none; }
.outcome { font-size: 13px; color: var(--cyan); }

.flow-contract { margin: 8px 0; border-top: 1px solid var(--rule-soft); padding-top: 10px; }
.flow-contract-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.contract-name { font-weight: 600; font-size: 14.5px; }
.contract-terms, .contract-faction { font-size: 13px; color: var(--text-faint); }
.contract-terms .bonus { color: var(--green); }
.contract-body { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 700px) { .contract-body { grid-template-columns: 1fr; } }
.contract-col { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.contract-label { font-size: 12.5px; font-weight: 600; color: var(--text-faint); }

.flow-dialogue { margin-top: 8px; border-top: 1px solid var(--rule-soft); }
.flow-dialogue > summary { cursor: pointer; padding: 7px 0; font-size: 13.5px; color: var(--text-dim); user-select: none; }
.flow-dialogue > summary:hover { color: var(--accent); }
.fd-list { padding: 2px 0 8px; display: flex; flex-direction: column; gap: 12px; max-width: 72ch; }
.fd-title { font-size: 13px; font-weight: 600; color: var(--purple); }
.fd-text { color: var(--text-dim); font-size: 14px; white-space: pre-line; }

.rt-inp { color: var(--cyan); font-weight: 600; }
.rt-pwn { color: var(--accent); font-weight: 600; }
.rt-lo { color: var(--green); }

/* ---------- catalogs (items, machines, contracts) ---------- */
.tabs { display: flex; gap: 4px; margin-bottom: 18px; flex-wrap: wrap; border-bottom: 1px solid var(--rule); }
.tab {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: var(--text-dim);
  padding: 8px 14px;
  cursor: pointer;
  font-family: var(--cond);
  font-size: 16px;
  font-weight: 500;
}
.tab:hover { text-decoration: none; color: var(--text); }
.tab.active { color: var(--text); border-bottom-color: var(--accent); }
.tab-count { font-family: var(--sans); font-size: 13px; color: var(--text-faint); }

.toolbar { display: flex; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; align-items: center; }
.toolbar > input { flex: 1; min-width: 220px; width: auto; }
.filter-group { display: flex; gap: 6px; flex-wrap: wrap; }

/* One ruled sheet instead of separate cards; empty trailing cells stay blank. */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1px; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r-panel); overflow: hidden; }
.card {
  background: var(--panel);
  box-shadow: 0 0 0 1px var(--rule);
  padding: 16px;
  display: flex; flex-direction: column; gap: 4px;
  color: var(--text);
}
.card:hover { background: var(--panel-2); text-decoration: none; }
.card:hover .card-title { color: var(--accent); }
.card:focus-visible { outline-offset: -2px; }
.card .card-icon { width: 56px; height: 56px; object-fit: contain; margin-bottom: 6px; }
.card .card-title { font-family: var(--cond); font-weight: 600; font-size: 17px; }
.card .card-foot { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--text-dim); }
.card .card-num { color: var(--text-faint); }

.contract-row {
  border-bottom: 1px solid var(--rule);
  padding: 12px 4px;
  cursor: pointer;
}
.contract-row:hover { background: var(--panel); }
.contract-row-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.recipe-flow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.flow-group { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.recipe-flow .flow-arrow { padding: 0; }
.io-item { display: inline-flex; align-items: center; gap: 6px; color: var(--text); background: var(--panel-2); border-radius: var(--r-ctl); padding: 3px 8px; font-size: 13.5px; }
.io-item img { width: 22px; height: 22px; object-fit: contain; }
.io-item .amt { color: var(--text-dim); }
a.io-item:hover { color: var(--accent); text-decoration: none; }
.io-item.current { background: var(--accent-soft); color: var(--accent); }
.io-item.current .io-name { color: var(--accent); }
.io-name { font-weight: 500; }
.io-rate { color: var(--text-faint); font-size: 12px; white-space: nowrap; }
.recipe-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--text-faint); font-size: 12.5px; margin-top: 8px; }

/* ---------- item & machine pages ---------- */
.breadcrumbs { display: flex; gap: 8px; align-items: center; color: var(--text-faint); font-size: 14px; margin-bottom: 16px; }
.breadcrumbs a { color: var(--text-dim); }
.detail-page { max-width: 1240px; }
.entity-head { display: flex; align-items: center; gap: 22px; margin-bottom: 26px; }
.entity-icon { width: 96px; height: 96px; object-fit: contain; flex: 0 0 auto; }
.entity-head h1 { margin: 0 0 4px; font-size: 34px; }
.entity-head p { margin: 0 0 8px; color: var(--text-dim); max-width: 72ch; }
.entity-meta { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 14px; color: var(--text-dim); }
.relationship-section { margin-top: 30px; }
.relationship-section > h2, .build-cost h2 { margin: 0 0 12px; font-size: 20px; }
.relationship-section > h2 span { font-family: var(--sans); font-weight: 400; color: var(--text-faint); font-size: 15px; margin-left: 4px; }

/* Machine group is the only box; recipe families inside are separated by rules. */
.machine-recipe-group { border: 1px solid var(--rule); border-radius: var(--r-panel); background: var(--panel); overflow: hidden; margin-bottom: 16px; }
.machine-group-head {
  display: flex; align-items: center; gap: 10px; padding: 10px 16px;
  border-bottom: 1px solid var(--rule);
  color: var(--text); font-family: var(--cond); font-weight: 600; font-size: 16px;
  cursor: pointer; list-style: none;
}
.machine-group-head::-webkit-details-marker { display: none; }
.machine-group-head:hover { text-decoration: none; color: var(--accent); }
.machine-group-head a { color: inherit; }
.machine-group-head img { width: 32px; height: 32px; object-fit: contain; }
.group-count { margin-left: auto; font-family: var(--sans); color: var(--text-faint); font-size: 13px; font-weight: 400; }
.machine-group-head .amt {
  margin-left: auto; color: var(--text); font-family: var(--sans); font-weight: 600; font-size: 14px;
}
.disclosure {
  width: 6px; height: 6px; flex: 0 0 auto; margin: 0 2px;
  border: solid var(--text-faint); border-width: 0 2px 2px 0;
  transform: rotate(-45deg); transition: transform .15s ease;
}
.machine-recipe-group[open] > .machine-group-head .disclosure { transform: rotate(45deg); }
.family-list { display: flex; flex-direction: column; }
.recipe-family { border-bottom: 1px solid var(--rule-soft); }
.recipe-family:last-child { border-bottom: 0; }
.relationship-section > .family-list { border: 1px solid var(--rule); border-radius: var(--r-panel); background: var(--panel); }
.family-head { display: flex; gap: 10px; align-items: baseline; padding: 12px 16px 0; }
.family-head h4 { margin: 0; font-size: 15px; }
.recipe-variant { padding: 12px 16px; }
.variant-delta { color: var(--green); font-size: 12.5px; }
.variant-switch {
  display: inline-grid; grid-template-columns: 1fr 1fr;
  border: 1px solid var(--rule); border-radius: var(--r-ctl); padding: 0;
  background: transparent; color: var(--text-faint); cursor: pointer;
  font-size: 12px; line-height: 1;
}
.variant-switch span { padding: 3px 7px; }
.variant-switch span.active { background: var(--panel-2); color: var(--text); }
.variant-switch.optima-on span.active { background: var(--green-soft); color: var(--green); }
.variant-switch:hover { border-color: var(--text-faint); }
.production-flow { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(150px,auto) auto minmax(0,1fr); gap: 12px; align-items: center; }
.production-side { min-width: 0; }
.production-side:last-child { text-align: right; }
.production-side:last-child .flow-group { justify-content: flex-end; }
.flow-label { display: block; color: var(--text-faint); font-size: 12px; font-weight: 600; margin-bottom: 4px; }
.flow-none { color: var(--text-faint); font-size: 13px; }
.production-arrow { color: var(--text-faint); font-size: 18px; }
.machine-node {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  color: var(--text); padding: 6px 10px; text-align: center; font-weight: 600; font-size: 13px;
  border: 1px solid var(--rule); border-radius: var(--r-ctl);
}
.machine-node:hover { color: var(--accent); border-color: var(--accent); text-decoration: none; }
.machine-node img { width: 28px; height: 28px; object-fit: contain; }
.build-cost { margin: 0 0 28px; }
.build-cost > div { display: flex; flex-wrap: wrap; gap: 8px; }
.construct-category { margin-bottom: 20px; }
.construct-category:last-child { margin-bottom: 0; }
.construct-category h3 { margin: 0 0 10px; font-size: 15px; color: var(--text-dim); }
.build-cost-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px; }
.relationship-empty { border: 1px dashed var(--rule); border-radius: var(--r-panel); padding: 22px; color: var(--text-faint); text-align: center; }

/* Item pages optimise for scanning many alternatives at once. The machine is
   named once per group; each compact row then behaves like an I/O table. */
.item-detail .entity-icon { width: 72px; height: 72px; }
.item-detail .entity-head { gap: 16px; margin-bottom: 18px; }
.item-detail .entity-head h1 { font-size: 30px; }
.item-detail .relationship-section { margin-top: 22px; }
.item-detail .relationship-section > h2 { margin-bottom: 8px; font-size: 18px; }
.item-detail .machine-recipe-group { margin-bottom: 10px; }
.item-detail .machine-group-head { padding: 7px 12px; font-size: 15px; }
.item-detail .machine-group-head img { width: 26px; height: 26px; }
.item-detail .family-head { display: none; }
.item-detail .recipe-variant { padding: 8px 12px; }
.item-detail .production-flow {
  grid-template-columns: minmax(0, 1fr) 10px 40px 10px minmax(0, 1fr);
  gap: 6px;
}
.item-detail .production-side,
.item-detail .production-side:last-child { text-align: left; }
.item-detail .production-side .flow-group,
.item-detail .production-side:last-child .flow-group {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 2px;
}
.item-detail .flow-label { margin-bottom: 2px; font-size: 11.5px; }
.item-detail .production-side .io-item { width: 100%; gap: 5px; padding: 2px 6px; font-size: 13px; background: transparent; }
.item-detail .production-side .io-item.current { background: var(--accent-soft); }
.item-detail .production-side .io-item img { width: 18px; height: 18px; }
.item-detail .io-rate { margin-left: auto; font-size: 11.5px; }
.item-detail .build-cost-chips .io-item img { width: 18px; height: 18px; }
.item-detail .machine-node { min-width: 0; padding: 4px; border: 0; }
.item-detail .machine-node img { width: 26px; height: 26px; }
.item-detail .machine-node span { display: none; }
.item-detail .production-arrow { font-size: 14px; }
.item-detail .recipe-meta { gap: 8px; margin-top: 4px; font-size: 12px; }
.item-detail .variant-delta { font-size: 12px; }

@media (min-width: 1050px) {
  .item-detail .machine-recipe-group > .family-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .item-detail .machine-recipe-group > .family-list > .recipe-family:nth-child(odd) { border-right: 1px solid var(--rule-soft); }
  .item-detail .machine-recipe-group > .family-list > .recipe-family:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
}

/* ---------- storage ---------- */
.storage-finder { position: relative; max-width: 720px; margin-bottom: 30px; }
.storage-finder label { display: block; font-family: var(--cond); font-weight: 600; font-size: 22px; margin-bottom: 10px; }
.storage-finder input { padding: 12px 14px; font-size: 16px; }
.storage-suggestions {
  position: absolute; z-index: 5; left: 0; right: 0; /* top: auto keeps it right under the input */
  max-height: 300px; overflow: auto;
  background: var(--panel); border: 1px solid var(--rule);
  border-radius: 0 0 var(--r-ctl) var(--r-ctl); box-shadow: 0 12px 28px rgba(0,0,0,.35);
}
.storage-suggestions[hidden] { display: none; }
.storage-suggestions a, .storage-suggestions span { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--rule-soft); color: var(--text); }
.storage-suggestions a:hover, .storage-suggestions a:focus { background: var(--panel-2); text-decoration: none; }
.storage-suggestions img { width: 22px; height: 22px; object-fit: contain; }
.storage-examples { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 10px; color: var(--text-faint); font-size: 13px; }
.storage-examples a { color: var(--text-dim); text-decoration: underline; text-underline-offset: 3px; }
.storage-section { margin: 0 0 34px; }
.storage-section h2 { margin: 0 0 3px; font-size: 21px; }
.storage-section > p { margin: 0 0 14px; color: var(--text-dim); font-size: 14px; max-width: 72ch; }
.storage-mode-tag {
  display: inline-block; padding: 1px 7px; border: 1px solid rgba(86,184,196,.4);
  border-radius: var(--r-ctl); color: var(--cyan);
  font-size: 12px; font-weight: 500; line-height: 1.4; white-space: nowrap;
}
.storage-mode-tag[data-mode="select-one"] { border-color: rgba(238,143,43,.45); color: var(--accent); }
.storage-mode-tag[data-mode="select-up-to"] { border-color: rgba(168,145,224,.45); color: var(--purple); }
.storage-mode-tag[data-mode="fixed-one"] { border-color: var(--rule); color: var(--text-dim); }
.storage-matrix-scroll { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--r-panel); background: var(--panel); }
.storage-matrix-narrow { max-width: 760px; }
.storage-matrix { width: 100%; min-width: calc(330px + var(--storage-cols) * 180px); border-spacing: 0; table-layout: fixed; font-size: 13.5px; }
.storage-matrix th, .storage-matrix td { padding: 9px 12px; border-right: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft); text-align: center; }
.storage-matrix th:last-child, .storage-matrix td:last-child { border-right: 0; }
.storage-matrix tr:last-child th, .storage-matrix tr:last-child td { border-bottom: 0; }
.storage-matrix thead th { position: sticky; top: 0; z-index: 2; background: var(--panel-2); vertical-align: middle; font-weight: 600; border-bottom-color: var(--rule); }
.storage-matrix thead th:first-child { left: 0; z-index: 4; width: 330px; text-align: left; }
.storage-matrix thead th a { display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--text); line-height: 1.2; }
.storage-matrix thead th img { width: 24px; height: 24px; flex: none; object-fit: contain; }
.storage-matrix thead th small { display: block; margin-top: 4px; color: var(--text-faint); font-weight: 400; }
.storage-matrix thead .storage-mode-tag { margin-top: 8px; }
.storage-matrix-pair-title, .storage-matrix-pair-links { display: flex; align-items: center; justify-content: center; gap: 5px; }
.storage-matrix-pair-title { line-height: 1.2; }
.storage-matrix-pair-links { margin-top: 4px; font-size: 12.5px; font-weight: 400; }
.storage-matrix-pair-links a { color: var(--cyan) !important; }
.storage-matrix-pair-links > span { color: var(--text-faint); }
.storage-matrix tbody tr:hover td, .storage-matrix tbody tr:hover > th { background: var(--panel-2); }
.storage-matrix tbody th.storage-matrix-item { position: sticky; left: 0; z-index: 1; background: var(--panel); text-align: left; font-weight: 500; }
.storage-matrix-item-list { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.storage-matrix-item-list a { display: inline-flex; align-items: center; gap: 5px; color: var(--text); line-height: 1.3; }
.storage-matrix-item-list a:hover { color: var(--accent); text-decoration: none; }
.storage-matrix-item img { width: 21px; height: 21px; flex: none; object-fit: contain; }
.storage-matrix .storage-matrix-yes { color: var(--text); font-weight: 600; font-size: 14.5px; }
.storage-pair-divider { color: var(--text-faint); font-weight: 400; }
.storage-matrix .storage-matrix-no { color: var(--text-faint); }
.storage-matrix .storage-matrix-group th { position: static; padding: 7px 12px; background: var(--bg-2); color: var(--text-dim); text-align: left; font-size: 13px; font-weight: 600; }
.storage-other-list { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r-panel); overflow: hidden; }
.storage-other-row { display: grid; grid-template-columns: 58px minmax(230px, .8fr) minmax(0, 1.7fr); align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--rule-soft); font-size: 13.5px; }
.storage-other-row:last-child { border-bottom: 0; }
.storage-other-icons { display: flex; align-items: center; }
.storage-other-icons img { width: 30px; height: 30px; object-fit: contain; }
.storage-other-icons img + img { margin-left: -5px; }
.storage-other-machine-links { display: flex; flex-wrap: wrap; gap: 4px; font-weight: 600; }
.storage-other-machine-links a { color: var(--text); }
.storage-other-machine-links > span, .storage-other-machines small { color: var(--text-faint); }
.storage-other-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 5px; }
.storage-other-materials { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.storage-other-materials a { display: inline-flex; align-items: center; gap: 6px; color: var(--text-dim); }
.storage-other-materials a:hover { color: var(--text); text-decoration: none; }
.storage-other-materials img { width: 22px; height: 22px; object-fit: contain; }
.storage-other-materials strong { color: var(--text); font-weight: 600; white-space: nowrap; }
.storage-result-heading { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.storage-result-heading > img { width: 56px; height: 56px; object-fit: contain; }
.storage-result-heading h2 { margin: 0; font-size: 26px; }
.storage-result-heading p { margin: 0; color: var(--text-dim); font-size: 14px; }
.storage-clear { margin-left: auto; font-size: 14px; }
.storage-match-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(245px, 1fr)); gap: 12px; }
.storage-match { padding: 15px; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r-panel); }
.storage-match-name { display: flex; align-items: center; gap: 8px; font-family: var(--cond); font-size: 16px; font-weight: 600; }
.storage-match-name img { width: 30px; height: 30px; object-fit: contain; }
.storage-match-name a { color: var(--text); }
.storage-match > .storage-mode-tag { margin-top: 9px; }
.storage-match-capacity { display: flex; align-items: baseline; gap: 6px; margin: 12px 0 6px; }
.storage-match-capacity strong { font-family: var(--cond); font-weight: 700; font-size: 28px; }
.storage-match-capacity span { color: var(--text-dim); font-size: 13px; }
.storage-match p { margin: 0 0 8px; color: var(--text-dim); font-size: 13px; }
.storage-match small { color: var(--text-faint); font-size: 12.5px; }
@media (max-width: 640px) {
  .storage-matrix { min-width: calc(190px + var(--storage-cols) * 180px); }
  .storage-matrix thead th:first-child { width: 190px; }
  .storage-other-row { grid-template-columns: 58px 1fr; gap: 8px; }
  .storage-other-materials { grid-column: 1 / -1; grid-row: 2; }
}

.storage-machine-section { margin: 0 0 26px; overflow: hidden; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r-panel); }
.storage-machine-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--rule); }
.storage-machine-heading h2 { margin: 0 0 2px; font-size: 20px; }
.storage-machine-heading h2 span { color: var(--text-dim); font-weight: 500; }
.storage-machine-heading p { margin: 0; color: var(--text-dim); font-size: 13.5px; }
.storage-machine-heading > a { flex: none; font-size: 13.5px; }
.storage-mode-callout { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px 12px; padding: 10px 18px; border-bottom: 1px solid var(--rule-soft); font-size: 13.5px; }
.storage-mode-callout strong { color: var(--cyan); font-weight: 600; }
.storage-mode-callout span { color: var(--text-dim); }
.storage-mode-callout[data-mode="select-one"] strong { color: var(--accent); }
.storage-mode-callout[data-mode="select-up-to"] strong { color: var(--purple); }
.storage-mode-callout[data-mode="fixed-one"] strong { color: var(--text); }
.storage-machine-group { display: grid; grid-template-columns: 150px minmax(0, 1fr); border-bottom: 1px solid var(--rule-soft); }
.storage-machine-group:last-child { border-bottom: 0; }
.storage-machine-capacity { display: flex; flex-direction: column; justify-content: center; padding: 12px 18px; border-right: 1px solid var(--rule-soft); }
.storage-machine-capacity strong { font-family: var(--cond); font-weight: 700; font-size: 24px; }
.storage-machine-capacity span { color: var(--text-faint); font-size: 12.5px; }
.storage-machine-items { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 12px 16px; }
.storage-machine-items a { display: inline-flex; align-items: center; gap: 6px; color: var(--text); font-size: 13.5px; }
.storage-machine-items a:hover { color: var(--accent); text-decoration: none; }
.storage-machine-items img { width: 24px; height: 24px; object-fit: contain; }
@media (max-width: 620px) {
  .storage-machine-heading { align-items: flex-start; flex-direction: column; }
  .storage-machine-group { grid-template-columns: 1fr; }
  .storage-machine-capacity { flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 8px; padding: 8px 14px; border-right: 0; border-bottom: 1px solid var(--rule-soft); }
  .storage-machine-capacity strong { font-size: 18px; }
  .storage-machine-items { padding: 10px 14px; }
}

@media (max-width: 760px) {
  .topbar { flex-wrap: wrap; height: auto; gap: 4px 12px; padding: 10px 12px 0; }
  .topbar-status { display: none; }
  .nav { width: 100%; overflow-x: auto; }
  .nav-link { flex: none; padding: 8px 10px; white-space: nowrap; }
  .nav-sep { margin: 10px 4px; }
  .app { padding: 18px 16px 60px; }
  .entity-head { align-items: flex-start; }
  .entity-icon { width: 64px; height: 64px; }
  .entity-head h1 { font-size: 26px; }
  .production-flow { display: flex; flex-direction: column; align-items: stretch; }
  .production-side, .production-side:last-child { text-align: left; }
  .production-side:last-child .flow-group { justify-content: flex-start; }
  .production-arrow { transform: rotate(90deg); align-self: center; line-height: 1; }
  .machine-node { align-self: stretch; }
  .group-count { display: none; }
  .item-detail .production-flow { gap: 3px; }
  .item-detail .machine-node { width: 44px; align-self: center; }
  .item-detail .io-item { width: auto; }
}

/* ---------- detail drawer ---------- */
.backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 40; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100vw);
  background: var(--panel);
  border-left: 1px solid var(--rule);
  z-index: 41;
  overflow-y: auto;
  padding: 22px 24px;
  animation: slideIn .18s ease-out;
}
@keyframes slideIn { from { transform: translateX(32px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .drawer { animation: none; } }
.drawer .close { float: right; background: none; border: none; color: var(--text-dim); font-size: 24px; line-height: 1; cursor: pointer; }
.drawer .close:hover { color: var(--text); }
.drawer h2 { margin: 0 0 2px; font-size: 26px; }
.drawer .drawer-id { margin: 24px 0 0; font-family: var(--mono); color: var(--text-faint); font-size: 11.5px; }
.drawer .section { margin-top: 20px; }
.drawer .section h3 { font-size: 15px; color: var(--text-dim); margin: 0 0 6px; }
.cost-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--rule-soft); }
.cost-row[href] { color: var(--text); text-decoration: none; }
.cost-row[href]:hover { color: var(--accent); }
.cost-row:last-child { border-bottom: none; }
.cost-row img { width: 24px; height: 24px; object-fit: contain; }
.cost-row .amt { margin-left: auto; color: var(--text); font-weight: 600; }
.cost-row .cost-est { min-width: 96px; text-align: right; color: var(--text-faint); font-size: 13px; }

/* ---------- graphs ---------- */
.graph-wrap { border: 1px solid var(--rule); border-radius: var(--r-panel); background: var(--bg-2); overflow: hidden; position: relative; }
.graph-wrap svg { display: block; width: 100%; height: 100%; cursor: grab; }
.graph-wrap svg:active { cursor: grabbing; }
.graph-tip { position: absolute; bottom: 10px; left: 12px; font-size: 12.5px; color: var(--text-faint); pointer-events: none; }
.legend { display: flex; gap: 16px; flex-wrap: wrap; margin: 10px 0 0; }
.legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-dim); }
.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; flex: none; }

/* ---------- research tree ---------- */
.research-stage { position: relative; }
.research-stage .research-zoom { position: absolute; top: 12px; left: 12px; z-index: 5; display: flex; flex-direction: column; gap: 4px; }
.research-zoom button { width: 32px; height: 32px; border-radius: var(--r-ctl); background: var(--panel); border: 1px solid var(--rule); color: var(--text); font-size: 17px; line-height: 1; cursor: pointer; }
.research-zoom button:hover { border-color: var(--text-faint); }
.research-wrap.graph-wrap { height: min(72vh, 760px); min-height: 520px; }
.research-wrap .rnode image { pointer-events: none; }
/* Dim only the artwork/outline, never the tile fill: the fill stays opaque so
   connector lines can never show through a node. */
.research-wrap .rnode.faded image { opacity: .25; }
.research-wrap .rnode.faded > rect { stroke-opacity: .3; }
.research-wrap .rnode.faded > g { opacity: .35; }
/* Highlight only the tile itself, never the corner cost pips. */
.research-wrap .rnode.found > rect { stroke: var(--accent); stroke-width: 3; }

.tab .lane-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.research-tabs { margin-bottom: 12px; }
.research-tabs .lane-icon { width: 22px; height: 22px; object-fit: contain; }

.research-search-wrap { position: relative; flex: 1; min-width: 240px; }
.research-search-wrap input { width: 100%; }
.search-menu { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r-ctl); box-shadow: 0 12px 28px rgba(0,0,0,.45); max-height: 340px; overflow: auto; }
.search-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: 14px; cursor: pointer; }
.search-item .search-kind { font-size: 12.5px; color: var(--text-faint); }
.search-item img { width: 22px; height: 22px; object-fit: contain; }
.search-item:hover, .search-item.active { background: var(--panel-2); }
.search-item.active { color: var(--accent); }
.research-income { display: flex; align-items: center; gap: 10px; }
.income-label { font-size: 13px; color: var(--text-dim); }
.income-field { display: inline-flex; align-items: center; gap: 5px; }
.research-income .income-input { width: 70px; background: var(--bg-2); border: 1px solid var(--rule); color: var(--text); border-radius: var(--r-ctl); padding: 6px 8px; font: inherit; font-size: 13.5px; }
.research-income .income-input:focus { outline: none; border-color: var(--accent); }

.r-costs { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0; }
.r-cost { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; font-size: 13.5px; }
.r-cost img { width: 18px; height: 18px; object-fit: contain; }
.r-days { font-size: 13px; color: var(--text-dim); }
.tt-desc { margin: 6px 0; }
.tt-cond { margin-top: 6px; color: var(--accent); font-size: 13px; }
.r-effect-group { display: flex; gap: 10px; margin: 4px 0; font-size: 13.5px; }
.r-effect-cat { flex: 0 0 110px; font-weight: 600; font-size: 13px; }
.r-effect-items { color: var(--text-dim); }
.r-effects-wrap { margin-top: 16px; }
.drawer .r-effects-wrap .section { margin-top: 12px; }

/* ---------- tooltip ---------- */
.tooltip {
  position: fixed; z-index: 100; pointer-events: none;
  max-width: 380px;
  background: var(--bg-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-ctl);
  padding: 10px 12px;
  font-size: 13.5px;
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
}
.tooltip .tt-title { font-family: var(--cond); font-weight: 600; font-size: 16px; }
.tooltip .tt-sub { font-size: 12.5px; color: var(--text-faint); margin-bottom: 6px; }
.tooltip .tt-body { color: var(--text-dim); }

/* ---------- empty / loading ---------- */
.empty { color: var(--text-faint); text-align: center; padding: 50px 20px; font-size: 14.5px; }
.spinner { width: 24px; height: 24px; border: 2px solid var(--rule); border-top-color: var(--text-dim); border-radius: 50%; animation: spin .8s linear infinite; margin: 40px auto; }
@keyframes spin { to { transform: rotate(360deg); } }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #45474c; }

.flow-cp > div { min-width: 0; }
.cp-cond, .via-conds, .trigger-chip { overflow-wrap: anywhere; }
@media (max-width: 700px) {
  .flow-row { flex-direction: column; gap: 10px; }
  .panel { padding: 14px; }
}