/* App-specific layout on top of theme.css. Nothing here re-declares a token. */

.scenario-bar__chips { display: flex; flex: 1; min-width: 0; overflow-x: auto; }
.legend-bar__hint { margin-left: auto; color: var(--color-neutral-600); }

.lead {
  padding: var(--space-6);
  font-size: 14px;
  line-height: 1.9;
  max-width: 78ch;
}

.section-rule { margin: var(--space-6) var(--space-6) var(--space-3); }
.table-wrap { margin: 0 var(--space-6) var(--space-8); }

.error-box {
  margin: var(--space-6);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-bad);
  background: #fbe9ea;
  color: var(--color-bad);
  font-size: 12.5px;
}

.derivation__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

/* login ------------------------------------------------------------------ */

.login {
  max-width: 340px;
  margin: 12vh auto;
  padding: var(--space-8);
  background: var(--color-panel);
  border: 1px solid var(--color-rule);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.login h1 { font-size: 19px; margin-bottom: var(--space-2); }
.login label { font-size: 11px; font-weight: 800; margin-top: var(--space-3); }

.login input {
  font-family: inherit;
  font-size: 13px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--color-text);
}

.login button { margin-top: var(--space-6); }

.login__error {
  margin-top: var(--space-3);
  color: var(--color-bad);
  font-size: 12px;
}

/* Server-decided status tokens. The client maps a token to a colour; it never
   decides which token applies (§6.1). */
.kpi--ok   .kpi__value { color: var(--bmta-green-deep); }
.kpi--warn .kpi__value { color: var(--color-warn); }
.kpi--bad  .kpi__value { color: var(--color-bad); }

.table-note { margin: 0 var(--space-6) var(--space-8); }

/* ===========================================================================
   ตารางเดินรถรายสาย — parameter panel, result cards, Gantt, hour strip
   ---------------------------------------------------------------------------
   The one page whose whole content is geometry. Every position here arrives as
   a percentage from the server (`06` §7 forbids the client arithmetic), so the
   CSS places absolutely and computes nothing.
   =========================================================================== */

.tt__cols {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
  gap: var(--space-4);
  padding: 0 var(--space-6) var(--space-8);
  align-items: start;
}

.tt__main { min-width: 0; display: grid; gap: var(--space-4); }

.panel {
  background: var(--color-panel);
  border: 1px solid var(--color-neutral-200);
  padding: var(--space-4);
}

.panel h3 { margin-bottom: var(--space-3); }

.ctl { margin-bottom: var(--space-3); }
.ctl > label {
  display: block;
  font-size: 11px;
  font-weight: 800;
  margin-bottom: var(--space-1);
}

.ctl__value {
  border: 1px solid var(--color-text);
  padding: 7px var(--space-2);
  font-size: 13px;
  font-weight: 800;
  background: var(--color-bg);
}

.ctl__unit {
  float: right;
  font-weight: 400;
  color: var(--color-neutral-600);
}

.hint {
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--color-neutral-600);
  margin-top: var(--space-1);
}

.select {
  width: 100%;
  border: 1px solid var(--color-text);
  border-radius: 0;
  padding: 7px var(--space-2);
  font: inherit;
  font-weight: 800;
  background: var(--color-bg);
}

/* -- the four ● cards ------------------------------------------------------ */

.simkpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--color-neutral-200);
  border: 1px solid var(--color-neutral-200);
}

.skpi { background: var(--color-panel); padding: var(--space-3) var(--space-4); }
.skpi__label { font-size: 10.5px; color: var(--color-neutral-700); }
.skpi__value { font-size: 26px; font-weight: 800; line-height: 1.2; }
.skpi__unit { font-size: 11px; font-weight: 400; margin-left: 4px; }
.skpi__sub { font-size: 10.5px; color: var(--color-neutral-600); }
.skpi--ok   .skpi__value { color: var(--bmta-green-deep); }
.skpi--warn .skpi__value { color: var(--color-warn); }
.skpi--bad  .skpi__value { color: var(--color-bad); }

/* -- the Gantt ------------------------------------------------------------- */

.gantt { background: var(--color-panel); border: 1px solid var(--color-neutral-200); }
.gantt__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4) var(--space-2);
}
.gantt__body { padding: 0 var(--space-4) var(--space-3); }

.gantt__axis {
  position: relative;
  height: 16px;
  margin-left: 236px;
  border-bottom: 1px solid var(--color-neutral-300);
}
.gantt__tick {
  position: absolute;
  transform: translateX(-50%);
  font-size: 9.5px;
  color: var(--color-neutral-600);
}

.gantt__row { display: flex; align-items: center; height: 20px; }

/* Wide enough for a three-handover chain — "คัน 12 · พขร.34 (เช้า)→พขร.35
   (บ่าย)→พขร.36 (สว่าง)" is the label this column exists to carry, and at
   132px it truncated to "…→พขร.2 (…", which hides the very thing the row is
   showing. The full string stays on the tooltip for the longest cases. */
.gantt__label {
  flex: 0 0 236px;
  font-size: 10.5px;
  padding-right: var(--space-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gantt__track {
  position: relative;
  flex: 1 1 auto;
  height: 13px;
}

.gantt__grid {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--color-neutral-200);
}

.gantt__bar {
  position: absolute;
  top: 0;
  height: 13px;
  overflow: hidden;
}

/* The six segment kinds. Blues run with the clock — early, midday, evening —
   so the eye reads the day left to right without consulting the legend. The
   two non-running kinds break out of the ramp deliberately: charging is the
   only warm colour on the chart, and a driver's long break is the only pale
   one. Colour ENCODES here, so none of these may be reused for a UI state. */
.gantt__bar--peak  { background: var(--bmta-blue); }
.gantt__bar--day   { background: #93a7dd; }
.gantt__bar--eve   { background: #3f60bd; }
.gantt__bar--night { background: #b7bcc9; }
.gantt__bar--chg   { background: var(--color-warn); }
.gantt__bar--brk   { background: #dfe2ea; }

.gantt__soc {
  display: block;
  padding: 0 3px;
  font-size: 8.5px;
  line-height: 13px;
  color: #fff;
  white-space: nowrap;
}
.gantt__bar--brk .gantt__soc,
.gantt__bar--day .gantt__soc,
.gantt__bar--night .gantt__soc { color: var(--color-text); }

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4) var(--space-3);
  font-size: 10.5px;
  border-top: 1px solid var(--color-neutral-200);
}
.legend__item { display: inline-flex; align-items: center; gap: 5px; }
.legend__swatch { width: 12px; height: 10px; display: inline-block; }
.legend__swatch--peak  { background: var(--bmta-blue); }
.legend__swatch--day   { background: #93a7dd; }
.legend__swatch--eve   { background: #3f60bd; }
.legend__swatch--night { background: #b7bcc9; }
.legend__swatch--chg   { background: var(--color-warn); }
.legend__swatch--brk   { background: #dfe2ea; }

/* -- the hour strip -------------------------------------------------------- */

.hstrip__row { display: flex; gap: 1px; align-items: flex-end; }
.hstrip__row--speed, .hstrip__row--label { margin-top: 2px; align-items: stretch; }

.hstrip__cell {
  flex: 1 1 0;
  height: 54px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  background: var(--color-neutral-100);
}
.hstrip__bar { width: 100%; background: var(--bmta-blue); }
.hstrip__n { font-size: 9px; line-height: 12px; }

.hstrip__spd, .hstrip__hr {
  flex: 1 1 0;
  text-align: center;
  font-size: 9px;
  padding: 2px 0;
  background: var(--color-neutral-100);
}
.hstrip__spd.is-congested {
  background: color-mix(in srgb, var(--color-warn) 18%, transparent);
  color: var(--color-warn);
  font-weight: 800;
}
.hstrip__hr { background: none; color: var(--color-neutral-600); }

/* A row that leads somewhere. The cursor and the hover are the affordance;
   `tabindex`/`role` in the markup are what make it reachable without a mouse,
   which a click handler alone would not be. */
.table tbody tr.is-drillable { cursor: pointer; }
.table tbody tr.is-drillable:hover td { background: var(--color-accent-100); }
.table tbody tr.is-drillable:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}
.table tbody tr.is-drillable td.is-label:first-child { color: var(--bmta-blue); font-weight: 800; }

.btn-back {
  display: block;
  width: 100%;
  text-align: center;
  margin-bottom: var(--space-3);
  text-decoration: none;
}

/* A bar that runs past midnight is cut at the axis, and the cut edge says so.
   A clean edge would read as "this finished at 24:00", which it did not. */
.gantt__bar.is-clipped {
  border-right: 2px dashed var(--color-panel);
  border-top-right-radius: 0;
}

.ctl__row { display: flex; align-items: center; gap: var(--space-2); }
.ctl__row .ctl__unit { float: none; white-space: nowrap; }

.input {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid var(--color-text);
  border-radius: 0;
  padding: 7px var(--space-2);
  font: inherit;
  font-weight: 800;
  background: var(--color-bg);
}
.input:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -1px; }

.tt__busy { padding: var(--space-6); }

/* ===========================================================================
   ปัจจัยนำเข้าทั้งหมด — ◆ what we decide, ■ what we cannot
   ---------------------------------------------------------------------------
   Two grids of the same shape, distinguished ONLY by the ◆/■ mark and the
   card's top rule. That sameness is deliberate: the reader should be able to
   compare a factor with a constraint at a glance, and the one visual
   difference between them should be the thing that actually differs.
   =========================================================================== */

.basis-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 var(--space-6) var(--space-4);
  padding: var(--space-2) var(--space-3);
  background: color-mix(in srgb, var(--color-warn) 12%, transparent);
  border-left: 3px solid var(--color-warn);
  font-size: 11.5px;
}
.basis-bar__tag {
  font-weight: 800;
  color: var(--color-warn);
  white-space: nowrap;
}
.basis-bar .btn { margin-left: auto; }

.factors { margin: 0 var(--space-6) var(--space-6); }

.factors__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-top: 2px solid var(--color-text);
  margin-bottom: var(--space-3);
}
.factors__head h2 { font-size: 15px; }

.factors__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px;
  background: var(--color-neutral-200);
  border: 1px solid var(--color-neutral-200);
}

.fcard { background: var(--color-panel); padding: var(--space-3) var(--space-4); }
.fcard--factor { border-top: 3px solid var(--color-text); }
.fcard--limit  { border-top: 3px solid var(--color-limit); }

.fcard__title { font-size: 12.5px; font-weight: 800; }
.fcard__en { font-weight: 400; color: var(--color-neutral-600); }
.fcard__note {
  font-size: 10.5px;
  color: var(--color-neutral-600);
  margin-bottom: var(--space-2);
}

/* Wraps rather than compressing. A wide control (the curve select) starved the
   label column until it rendered one character per line — legible as a column
   of glyphs, unreadable as a sentence. The label keeps a floor of 120px and the
   control drops to its own line when the card is too narrow for both. */
.frow {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--color-neutral-200);
}
.frow__label { flex: 1 1 120px; font-size: 11.5px; min-width: 120px; }
.frow__en { color: var(--color-neutral-600); font-size: 10.5px; }
.frow__right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 1 auto;
  margin-left: auto;
  white-space: nowrap;
}
.frow__value { font-size: 12.5px; font-weight: 800; }
.frow__unit { font-size: 10.5px; color: var(--color-neutral-600); }

.frow__input {
  width: 88px;
  border: 1px solid var(--color-text);
  border-radius: 0;
  padding: 3px 6px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 800;
  background: var(--color-bg);
}
.frow__input:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -1px; }
select.frow__input { width: auto; max-width: 100%; }

/* The published value beside the current one — the artefact prints it in grey
   next to every box, and it is what lets a reader see what they moved. */
.frow__default {
  font-size: 10.5px;
  color: var(--color-neutral-500);
  font-variant-numeric: tabular-nums;
}
.frow__default.is-changed { text-decoration: line-through; }

.frow--changed { background: color-mix(in srgb, var(--color-warn) 7%, transparent); }
.frow--changed .frow__value,
.frow--changed .frow__input { color: var(--color-warn); }

.frow__reset {
  border: 1px solid var(--color-neutral-400);
  background: var(--color-panel);
  border-radius: 0;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  line-height: 1;
  padding: 3px 5px;
}
.frow__reset:hover { border-color: var(--color-text); }

.frow__affects {
  font-size: 10px;
  color: var(--color-neutral-500);
  margin-top: 2px;
}

/* ---------------------------------------------- จัดรถรายคัน · อัดประจุ */

/* Palette classes for a depot's lines. The SERVER sends an index; what colour
 * it maps to lives only here. Nine hues, matching the mockup's own count —
 * no depot holds more than nine lines. */
.dq-line-0 { background: #1e4bc0; }
.dq-line-1 { background: #1f8f6e; }
.dq-line-2 { background: #b23fb0; }
.dq-line-3 { background: #a07e1e; }
.dq-line-4 { background: #0e9bb8; }
.dq-line-5 { background: #c2508b; }
.dq-line-6 { background: #7c4fc4; }
.dq-line-7 { background: #a05a2c; }
.dq-line-8 { background: #4b5563; }

.dq { margin: 0 var(--space-6) var(--space-8); display: grid; gap: var(--space-4); }
.dq__chips, .dq__modebar, .dq__sortbar {
  display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center;
}
.dq__chips-label { font-size: 10.5px; font-weight: 800; color: var(--bmta-blue); }
.chip {
  font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer;
  padding: 4px 10px; border: 1px solid var(--color-neutral-200);
  background: var(--color-panel); color: var(--color-text);
  text-decoration: none; display: inline-block;
}
.chip:hover { border-color: var(--bmta-blue); }
.chip--on { background: var(--bmta-blue); color: #fff; border-color: var(--bmta-blue); }
.chip:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.dq__modegroup { display: inline-flex; border: 2px solid var(--bmta-blue); }
.dq__modegroup .chip { border: 0; }

.dq__hint { margin: 0; }
.dq__head { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.dq__head h2 { font-size: 17px; }
.dq__syn { color: var(--color-warn); }
.dq__warnbox {
  border: 1px solid var(--color-warn); background: color-mix(in srgb, var(--color-warn) 8%, transparent);
  color: var(--color-text); font-size: 12px; padding: var(--space-2) var(--space-3);
}
.dq__section h3 { margin-bottom: var(--space-2); }
.dq__explain {
  border: 1px dashed var(--bmta-blue); background: var(--color-accent-100);
  font-size: 12px; line-height: 1.8; padding: var(--space-2) var(--space-3);
  margin-top: var(--space-2);
}

/* band colours — the ok/mid/low/spare verdicts (server-decided tokens) */
.dq__band--ok    { background: var(--bmta-green); }
.dq__band--mid   { background: var(--color-warn); }
.dq__band--low   { background: var(--color-bad); }
.dq__band--spare { background: var(--bmta-blue); }

.dq__comp-row {
  display: flex; align-items: center; gap: var(--space-2);
  margin-bottom: 4px; text-decoration: none; color: inherit;
}
a.dq__comp-row:hover .dq__comp-name { color: var(--bmta-blue); }
.dq__comp-name {
  width: 180px; text-align: right; font-size: 11px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dq__comp-bar { flex: 1; display: flex; gap: 2px; height: 16px; }
.dq__comp-seg {
  color: #fff; font-size: 9.5px; font-weight: 700; text-align: center;
  line-height: 16px; overflow: hidden; min-width: 0;
}
.dq__comp-total { width: 48px; text-align: right; font-size: 10.5px; font-weight: 800; }
.dq__comp-row--single .dq__comp-bar { height: 20px; }

.dq__sec { border: 1px solid var(--color-neutral-200); background: var(--color-panel); }
.dq__sec > summary {
  cursor: pointer; padding: var(--space-2) var(--space-3);
  font-size: 12px; font-weight: 800; color: var(--bmta-blue); list-style: none;
}
.dq__sec > summary::before { content: "▸ "; font-size: 10px; }
.dq__sec[open] > summary::before { content: "▾ "; }
.dq__sec-body { padding: 0 var(--space-3) var(--space-3); }
.dq__cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.dq__case { border: 1px solid var(--color-neutral-200); padding: var(--space-2) var(--space-3); }
.dq__case-title { font-size: 11.5px; font-weight: 800; color: var(--bmta-blue); }

/* the Gantt bars — line colour by palette class; extra trips translucent;
 * charge bars hatched so the distinction survives without colour vision */
.dq__gantt .gantt__row { height: 18px; }
.dq__bar { top: 2px; height: 13px; }
.dq__bar.is-extra { opacity: .55; }
.dq__bar--chg {
  background: repeating-linear-gradient(45deg,
    var(--color-warn) 0 5px, #8a5400 5px 10px);
  border: 1px solid #6d4300;
}
.legend__swatch.dq__bar--chg { position: static; height: 10px; }
.dq__swatch-extra { background: #8a93a8; opacity: .5; }
.dq__bar-text {
  color: #fff; font-size: 8.5px; font-weight: 700; line-height: 13px;
  display: block; overflow: hidden; white-space: nowrap; text-align: center;
}
.dq__label { flex: 0 0 230px; max-width: 230px; }
.dq__label--why { text-decoration: underline dotted var(--color-warn); }
.dq__note { margin-top: var(--space-2); line-height: 1.7; }

/* km accumulation chart */
.dq__kmc-head { position: relative; height: 16px; margin-left: 96px; }
.dq__kmc-glbl {
  position: absolute; transform: translateX(-50%); font-size: 9.5px;
  font-weight: 800; color: var(--color-neutral-600); white-space: nowrap;
}
.dq__kmc-glbl--floor  { color: var(--color-warn); }
.dq__kmc-glbl--target { color: var(--bmta-green-deep); }
.dq__kmc { max-height: 320px; overflow-y: auto; border: 1px solid var(--color-neutral-200); padding: var(--space-2); }
.dq__kmc-row { display: flex; align-items: center; gap: var(--space-2); height: 13px; }
.dq__kmc-lbl { width: 88px; flex: 0 0 88px; text-align: right; font-size: 9px; color: var(--color-neutral-600); white-space: nowrap; }
.dq__kmc-track { position: relative; flex: 1; display: flex; gap: 2px; height: 9px; }
.dq__kmc-seg { border-radius: 0; min-width: 2px; display: inline-block; }
.dq__kmc-seg.is-extra { opacity: .5; }
.dq__kmc-guide {
  position: absolute; top: -2px; bottom: -2px; width: 0;
  border-left: 1.5px dashed var(--color-neutral-200); z-index: 1;
}
.dq__kmc-guide--floor  { border-color: var(--color-warn); }
.dq__kmc-guide--target { border-color: var(--bmta-green); border-left-style: solid; border-left-width: 2px; }

/* per-bus table pieces */
.dq__chipcell { max-width: 420px; }
.dq__chip {
  display: inline-block; font-size: 10.5px; font-weight: 700;
  border: 1px solid var(--color-neutral-200); background: var(--color-bg);
  padding: 1px 7px; margin: 1px 0; white-space: nowrap;
}
.dq__chip--cross { border-color: var(--bmta-green); color: var(--bmta-green-deep); }
.dq__chip--extra { border-style: dashed; border-color: var(--color-warn); color: var(--color-warn); }
.dq__chip-arrow { color: var(--color-neutral-600); font-weight: 700; padding: 0 3px; }
.dq__stop { color: var(--color-neutral-600); }
.dq__kmcell { white-space: nowrap; }
.dq__kmbar {
  display: inline-block; width: 90px; height: 9px; background: var(--color-neutral-200);
  vertical-align: middle; margin-right: 6px; position: relative; overflow: hidden;
}
.dq__kmbar-fill { position: absolute; left: 0; top: 0; bottom: 0; display: block; }
.dq__badge {
  display: inline-block; padding: 1px 8px; font-size: 10.5px; font-weight: 800;
  white-space: nowrap; color: #fff;
}
.dq__badge--ok    { background: var(--bmta-green-deep); }
.dq__badge--mid   { background: var(--color-warn); }
.dq__badge--low   { background: var(--color-bad); }
.dq__badge--spare { background: var(--bmta-blue); }
.dq__row--late td { background: color-mix(in srgb, var(--color-bad) 7%, transparent); }
.dq__tablewrap { margin: 0; }
.dq__tablewrap .table tfoot td {
  font-weight: 800; color: var(--bmta-blue);
  border-top: 2px solid var(--bmta-blue);
}
.skpi--openable { cursor: pointer; }
.skpi--openable:hover { outline: 2px solid var(--bmta-blue); outline-offset: -2px; }

/* the back chip sits inline in the depot header, not on its own band */
.dq__head .btn-back { display: inline-block; width: auto; margin: 0; }

/* ข้อสังเกตจากแบบจำลอง — the timetable's warning box */
.tt__warns {
  border: 1px solid #eed9b0; background: color-mix(in srgb, var(--color-warn) 6%, var(--color-panel));
}
.tt__warns > summary {
  cursor: pointer; padding: var(--space-2) var(--space-3);
  font-size: 12px; font-weight: 800; color: #7a4c02; list-style: none;
}
.tt__warns > summary::before { content: "▸ "; font-size: 10px; }
.tt__warns[open] > summary::before { content: "▾ "; }
.tt__warn {
  margin: 0 var(--space-3) var(--space-2); padding: var(--space-2) var(--space-3);
  font-size: 12px; line-height: 1.8; border: 1px solid var(--color-neutral-200);
  background: var(--color-panel);
}
.tt__warn--error { border-color: var(--color-bad); }
.tt__warn--warn  { border-color: var(--color-warn); }
.table tfoot td { font-weight: 800; color: var(--bmta-blue); border-top: 2px solid var(--bmta-blue); }

/* การอัดประจุในอู่ — the per-gun night queue */
.dq__gunlbl { flex: 0 0 64px; max-width: 64px; }
.dq__gunbar { background: var(--bmta-blue); }
.dq__gunbar--late { background: var(--color-bad); }

/* แผนผังปัจจัย–ผลลัพธ์ (tab X) */
.fx { margin: 0 var(--space-6) var(--space-8); display: grid; gap: var(--space-4); }
.fx__sec h3 { font-size: 14px; margin-bottom: var(--space-3); }
.fx--factors h3 { color: var(--color-warn); }
.fx--results h3 { color: var(--bmta-green-deep); }
.fx--limits h3, .fx--solver h3 { color: var(--bmta-blue); }
.fx__sym { font-size: 15px; font-weight: 800; width: 48px; }
.fx__muted { color: var(--color-neutral-600); font-weight: 400; }
.fx__hw { font-weight: 800; color: #7a4c02; }
.fx__formulas {
  font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; line-height: 2;
  background: var(--color-bg); border: 1px solid var(--color-neutral-200);
  padding: var(--space-3) var(--space-4); overflow-x: auto; margin: var(--space-3) 0;
}
.fx__rule {
  border: 1.5px solid var(--bmta-blue); background: color-mix(in srgb, var(--bmta-blue) 6%, var(--color-panel));
  padding: var(--space-3) var(--space-4); font-size: 12.5px; line-height: 1.8;
}
.fx__rule b { color: var(--bmta-blue); }
.fx__subtitle { font-size: 11.5px; font-weight: 800; color: #7a4c02; margin: var(--space-3) 0 var(--space-2); }
.fx__subtitle--result { color: var(--bmta-green-deep); }
.fx__subtitle--limit { color: var(--bmta-blue); }
.fx__zone td { background: var(--color-accent-100); font-weight: 800; color: var(--bmta-blue); }
.fx__band { padding-left: var(--space-6); }
.fx__unconfirmed { padding-left: 18px; font-size: 12.5px; line-height: 1.9; color: #7a4c02; }
.fx__current td { background: color-mix(in srgb, var(--bmta-green) 10%, transparent); font-weight: 800; }
.fx__over { color: #7a4c02; font-weight: 800; }
.fx__solve-form { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; }
.fx__cap { display: flex; flex-direction: column; gap: 3px; font-size: 10.5px; font-weight: 700; color: var(--color-neutral-700); }
.fx__cap .input { width: 120px; }
.fx__solve-btn { padding: 8px 16px; }
.fx__solve-out { margin-top: var(--space-3); }
.fx__best {
  border: 1.5px solid var(--bmta-green); background: color-mix(in srgb, var(--bmta-green) 7%, var(--color-panel));
  padding: var(--space-3) var(--space-4); font-size: 12.5px; line-height: 2;
}
.fx__best-head { font-size: 11px; font-weight: 800; color: var(--bmta-green-deep); margin-bottom: 4px; }
.fx__best-result { border-top: 1px dashed var(--bmta-green); margin-top: 6px; padding-top: 6px; }

/* สรุป (tab S) */
.sm__title { font-size: 15px; font-weight: 800; color: var(--bmta-blue); }
.sm__k { width: 44%; }
.sm__sec--factor h3 { color: var(--color-warn); }
.sm__sec--limit h3 { color: var(--bmta-blue); }
.sm__sec--result h3 { color: var(--bmta-green-deep); }
.sm__foot { border-top: 1px solid var(--color-neutral-200); padding-top: var(--space-2); margin-top: var(--space-3); }

/* ผลรายสาย — group headers and the ↔ chip */
.rt__groupbar { margin: 0 var(--space-6); }
.rt__grp td {
  background: var(--color-accent-100); color: var(--bmta-blue);
  font-weight: 800; font-size: 12px; border-top: 2px solid var(--bmta-blue);
}
.rt__cross {
  display: inline-block; font-size: 10px; font-weight: 800;
  border: 1px solid var(--bmta-green); color: var(--bmta-green-deep);
  padding: 0 6px; white-space: nowrap; cursor: help;
}

/* ตั้งทุกช่วงพร้อมกัน — the bulk headway row. Sits under the factor grid and
   reads as one line of controls, not a card. */
.hwbulk__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2, 8px);
  padding: var(--space-3, 12px) 0 0;
}
.hwbulk__row .frow__input { max-width: 6rem; }