/* Economy pages: Cash & XP receipt and the Gold Exchange. Field-manual theme: white input wells
   with ink borders, chips as ink-outlined plates (red when on), receipts on white with hairlines. */
.econ-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.econ-head .lede { margin-bottom: .2rem; }
.econ-actions { display: flex; gap: .5rem; padding-bottom: .2rem; }
.hud-note { margin: .5rem 0 0; font-family: var(--serif); font-style: italic; font-size: .88rem; color: var(--ink-2); }

.rw-grid { display: grid; grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); gap: .8rem; align-items: start; }
@media (max-width: 900px) { .rw-grid { grid-template-columns: 1fr; } }
.rw-rail { display: flex; flex-direction: column; gap: .7rem; position: sticky; top: 1rem; }
@media (max-width: 900px) { .rw-rail { position: static; } }
.rw-tabs { display: flex; flex-wrap: wrap; gap: .35rem; }

.rw-field { display: block; margin-bottom: .7rem; }
.rw-field .label { display: block; margin-bottom: .3rem; }
.rw-field .label b { color: var(--ink); font-family: var(--mono); font-weight: 700; }
.rw-field select,
.rw-field input[type="number"] { width: 100%; padding: .4rem .5rem; background: #fff; color: var(--ink); border: 1px solid var(--ink); font: inherit; font-family: var(--mono); font-weight: 700; }
.rw-field select:focus,
.rw-field input[type="number"]:focus { border-color: var(--red); outline: none; }
.cmb-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.rw-checks { display: flex; flex-direction: column; gap: .35rem; }
.rw-checks label, .rw-check { display: flex; align-items: center; gap: .45rem; margin-bottom: .45rem; font-size: .92rem; color: var(--ink); cursor: pointer; }
.rw-checks input, .rw-check input { accent-color: var(--red); }
.rw-zone-btns { display: flex; gap: .3rem; flex-wrap: wrap; }
.rw-zone-btns .chip { flex: 1; justify-content: center; min-width: 4.5rem; }

.rw-totals { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.rw-totals strong { display: block; font-family: var(--mono); font-size: clamp(1.8rem, 3vw, 2.4rem); color: var(--ink); line-height: 1.1; margin-top: .2rem; font-variant-numeric: tabular-nums; }
/* which career track the XP lands in (community request WZ-0017) */
.rw-track { margin-bottom: 1rem; padding: .6rem 0 .1rem; border-top: 1px solid var(--rule-2); }
.rw-track-head { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; }
.rw-track-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .45rem; }
.rw-track-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .28rem .5rem; font-family: var(--mono); font-weight: 700; font-size: .7rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); background: var(--plate); border: 1px solid var(--ink); text-decoration: none; }
.rw-track-chip:hover { background: var(--ink); color: var(--paper); }
.rw-track-chip i { width: 8px; height: 8px; flex: none; border: 1px solid var(--ink); }
.rw-track .hud-note { margin-top: .4rem; }
.rw-zone-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-bottom: 1rem; }
.rw-zone-strip[hidden] { display: none; }
.rw-zone-strip > div, .rw-zone-card { background: #fff; border: 1px solid var(--rule); padding: .55rem .65rem; }
.rw-zone-strip .label, .rw-zone-card .label { display: block; margin-bottom: .2rem; }
.rw-zone-strip b, .rw-zone-card strong { font-family: var(--mono); font-weight: 700; font-variant-numeric: tabular-nums; }
.rw-zone-card span.xp { display: block; color: var(--ink-2); font-size: .8rem; margin-top: .15rem; }

.rw-receipt { border-top: 1px solid var(--ink); padding-top: .75rem; }
.rw-formula { white-space: pre-wrap; word-break: break-word; background: #fff; border: 1px solid var(--rule); padding: .7rem .8rem; margin: .4rem 0 .7rem; color: var(--ink-2); font-size: .82rem; line-height: 1.45; }
.rw-factors { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.rw-factors li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .6rem; padding: .32rem 0; border-bottom: 1px solid var(--rule-2); font-size: .88rem; color: var(--ink-2); }
.rw-factors li.active { color: var(--ink); font-weight: 600; }
.rw-factors li.dim { color: var(--ink-3); }
.rw-factors .v { font-family: var(--mono); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Gold */
.gold-top { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, .8fr); gap: .8rem; margin-bottom: .8rem; }
@media (max-width: 860px) { .gold-top { grid-template-columns: 1fr; } }
.gold-price { display: block; font-family: var(--mono); font-size: clamp(2.2rem, 5vw, 3.2rem); color: var(--ink); line-height: 1; margin-bottom: .9rem; font-variant-numeric: tabular-nums; }
.gold-deltas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem 1.2rem; }
.gold-deltas .label { display: block; margin-bottom: .1rem; }
.gold-deltas strong { font-family: var(--mono); font-weight: 700; font-variant-numeric: tabular-nums; }
.gold-deltas .dim { display: block; font-family: var(--mono); font-size: .76rem; color: var(--ink-3); margin-top: .1rem; }
.gold-convert-row { display: grid; grid-template-columns: auto 1fr auto; gap: .4rem; align-items: center; margin: .25rem 0 .75rem; }
.gold-convert-row .prog-num { text-align: left; }
.gold-convert-row .dim { color: var(--ink-3); font-family: var(--mono); }
.gold-chart-wrap { margin-bottom: .8rem; }
.gold-ranges { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: .7rem; }
#gold-chart { width: 100%; height: auto; display: block; background: #fff; border: 1px solid var(--rule); }
.gold-chart-readout { margin-top: .45rem; color: var(--ink-2); font-size: .82rem; min-height: 1.2em; }
.gold-table td.dim { color: var(--ink-3); }
.gold-table tbody tr:hover { background: var(--plate-2); }

/* chips: ink-outlined plates; the one that is on is red */
.chip {
  display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: .3rem;
  font-family: var(--mono); font-weight: 700; font-size: .72rem; line-height: 1; letter-spacing: .04em; text-transform: uppercase;
  padding: .42rem .6rem; background: var(--plate); color: var(--ink); border: 1px solid var(--ink); cursor: pointer; text-align: center;
}
.chip:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip.on { background: var(--red); color: #FBF6EA; border-color: var(--red); }

.prog-num { width: 100%; padding: .35rem .4rem; background: #fff; color: var(--ink); border: 1px solid var(--ink); font: inherit; font-family: var(--mono); font-weight: 700; font-variant-numeric: tabular-nums; }
.prog-num:focus { border-color: var(--red); outline: none; }
.prog-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; margin: .5rem 0; background: var(--rule-2); border: 1px solid var(--rule); outline: none; }
.prog-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; background: var(--ink); border: 1px solid var(--ink); border-radius: 0; cursor: pointer; }
.prog-slider::-moz-range-thumb { width: 14px; height: 14px; background: var(--ink); border: 1px solid var(--ink); border-radius: 0; cursor: pointer; }
.prog-slider:focus-visible::-webkit-slider-thumb { background: var(--red); border-color: var(--red); }
.prog-slider:focus-visible::-moz-range-thumb { background: var(--red); border-color: var(--red); }

/* sliders that economy.js renders inside the situation panel carry no class of their own */
.rw-field input[type="range"], #rw-fields input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; margin: .5rem 0; background: var(--rule-2); border: 1px solid var(--rule); outline: none; }
.rw-field input[type="range"]::-webkit-slider-thumb, #rw-fields input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; background: var(--ink); border: 1px solid var(--ink); border-radius: 0; cursor: pointer; }
.rw-field input[type="range"]::-moz-range-thumb, #rw-fields input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; background: var(--ink); border: 1px solid var(--ink); border-radius: 0; cursor: pointer; }

/* ---------- phones ---------- */
@media (max-width: 900px) {
  .rw-grid, .gold-top { grid-template-columns: minmax(0, 1fr); }
  .rw-main, .rw-rail { min-width: 0; }
}
@media (max-width: 600px) {
  .econ-head { flex-direction: column; align-items: stretch; }
  .econ-actions { flex-wrap: wrap; }
  .econ-actions .btn { flex: 1 1 auto; }
  .rw-totals { grid-template-columns: 1fr; gap: .5rem; }
  .rw-zone-strip { grid-template-columns: 1fr; }
  .gold-deltas { grid-template-columns: 1fr 1fr; }
}