/* The ore heights page (ores/index.html, ores.js). Colours are live.css's tokens: the ribbons
   are the one series colour (--lv-accent; each ore is named by its column, not a hue), picked
   ores together are --lv-on, and the bands under the plot are surface tints. */
.ore-controls { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-bottom: 16px; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.seg button { font: inherit; font-size: 14px; padding: 6px 12px; border: 0; background: var(--surface);
  color: var(--text); cursor: pointer; }
.seg button + button { border-left: 1px solid var(--border); }
.seg button[aria-pressed="true"] { background: var(--lv-accent); color: #fff; font-weight: 600; }
.ore-field { display: inline-flex; gap: 8px; align-items: center; font-size: 14px; color: var(--text-muted); }
.ore-field select { font: inherit; font-size: 14px; padding: 5px 8px; border-radius: 8px; max-width: 70vw;
  border: 1px solid var(--border); background: var(--surface); color: var(--text); }
.ore-check { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; }
button:focus-visible, select:focus-visible, input:focus-visible, .hit:focus-visible {
  outline: 2px solid var(--link, var(--lv-accent)); outline-offset: 2px; }

.ore-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 0 18px; align-items: start; }
@media (max-width: 960px) { .ore-grid { grid-template-columns: minmax(0, 1fr); } }
.ore-side { position: sticky; top: 12px; }
@media (max-width: 960px) { .ore-side { position: static; } }
.ore-chart { width: 100%; touch-action: pan-y; }
.ore-svg { display: block; width: 100%; height: auto; font-size: 11px; user-select: none; }
.ore-svg text { fill: var(--text-muted); }
.ore-svg .grid { stroke: var(--border); stroke-width: 1; opacity: .6; }
.ore-svg .axis-title { font-weight: 700; fill: var(--text); }
.ore-svg .zebra { fill: var(--surface-alt); opacity: .45; }
.ore-svg .band-rock { fill: var(--text-faint); opacity: .22; }
.ore-svg .band-deep { fill: var(--text-faint); opacity: .14; }
.ore-svg .band-mtn { fill: var(--surface-alt); opacity: .7; }
.ore-svg .band-label { font-size: 10px; fill: var(--text-faint); }
.ore-svg .ref { stroke: var(--lv-accent); stroke-dasharray: 4 3; opacity: .55; }
.ore-svg .rib-solid { fill: var(--lv-accent); opacity: .8; stroke: var(--lv-accent); stroke-width: .6; }
.ore-svg .rib-ghost { fill: none; stroke: var(--text-muted); stroke-width: 1.2; stroke-dasharray: 3 2; }
.ore-svg .rib-combo { fill: var(--lv-on); opacity: .85; }
.ore-svg .col.picked .rib-solid { opacity: 1; }
.ore-svg .col.picked .zebra { fill: var(--lv-accent); opacity: .12; }
.ore-svg .best { stroke: var(--text); stroke-width: 2; }
.ore-svg .best-label { font-weight: 700; fill: var(--text); paint-order: stroke; stroke: var(--surface);
  stroke-width: 3px; stroke-linejoin: round; }
.ore-svg .hit { fill: transparent; cursor: pointer; }
.ore-svg .cross line { stroke: var(--text); stroke-width: 1; stroke-dasharray: 2 2; pointer-events: none; }
.ore-svg .cross rect { fill: var(--text); }
.ore-svg .cross text { fill: var(--surface); font-weight: 700; }
.col-head { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: 3px; padding-bottom: 4px; font-size: 12px; line-height: 1.15; text-align: center; color: var(--text); }
.col.picked .col-head { font-weight: 700; color: var(--link, var(--lv-accent)); }
.col-head.tall span { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; font-size: 11px; }
.ore-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--text-muted); margin-top: 8px; }
.ore-legend span { display: inline-flex; align-items: center; gap: 6px; }
.sw { display: inline-block; width: 14px; height: 10px; border-radius: 3px; }
.sw-solid { background: var(--lv-accent); }
.sw-ghost { border: 1.5px dashed var(--text-muted); }
.sw-best { height: 2px; background: var(--text); border-radius: 0; }
.sw-combo { background: var(--lv-on); }

.ore-readout .barlist li { grid-template-columns: minmax(0, 9em) 1fr auto; }
.ore-readout .bl-val { min-width: 3em; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.chip { font: inherit; font-size: 13px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px;
  border-radius: 999px; border: 1px solid var(--lv-accent); background: var(--surface-alt); color: var(--text); cursor: pointer; }
.chip-clear { border-color: var(--border); color: var(--text-muted); }
.ore-answer { font-size: 16px; margin: 0 0 6px; }
.ore-answer strong { font-size: 20px; }
ul.plain { list-style: none; padding: 0; margin: 0; font-size: 14px; }
ul.plain li { display: flex; gap: 6px; align-items: center; padding: 2px 0; }

.combo-list { list-style: none; padding: 0; margin: 0; }
.combo-btn { font: inherit; font-size: 14px; width: 100%; display: grid; align-items: center; gap: 8px;
  grid-template-columns: auto minmax(0, 1fr) auto 3.2em; padding: 6px 8px; margin: 0 0 4px; text-align: left;
  border: 1px solid transparent; border-radius: 8px; background: var(--surface-alt); color: var(--text); cursor: pointer; }
.combo-btn:hover { border-color: var(--border); }
.combo-btn[aria-pressed="true"] { border-color: var(--lv-on); }
.combo-icons { display: inline-flex; gap: 2px; }
.combo-y { font-weight: 700; font-variant-numeric: tabular-nums; }
.combo-score { color: var(--text-muted); text-align: right; font-variant-numeric: tabular-nums; }

.ore-table td.ore-where { white-space: normal; text-align: left; min-width: 16em; }
.ore-table td.ore-where small { color: var(--text-muted); }
.ore-table td.ore-src { text-align: left; color: var(--text-muted); white-space: normal; min-width: 8em; }
.ore-table .who { display: inline-flex; gap: 6px; align-items: center; }
.ore-table th[scope="col"] { text-align: left; }
.ore-svg .best-label.tight { font-size: 8.5px; stroke-width: 2px; }
.combo-name small { color: var(--text-muted); }