/* The lever controls and the results-card ring, split from app.css when it reached its size
   limit. Loaded after app.css, so a rule here wins a tie with one there. */

/* A lever with three or more options is a native select at every width. The width is the
   column's, capped: a select as wide as its longest option ("Prune at task boundaries") is
   still a select, and a 220 px box beside a 300 px label is a stack, not a squeeze. */
.select { padding: 4px 8px; border-radius: var(--r-sm); border: 1px solid var(--border-strong); background: var(--control-bg); color: var(--ink); font-size: 13px; min-height: 28px; max-width: 100%; width: max-content; }
.control-row .select { max-width: min(100%, 260px); }
.select:disabled { opacity: 0.5; cursor: not-allowed; }
/* Under 900 px the levers column is 300 px or the whole phone: a select or a stepper takes
   the row under its label, so neither overprints the other. A switch and a number box stay
   beside their labels at every width. */
@media (max-width: 899px) {
  .control-row:has(.select, .stepper) { grid-template-columns: minmax(0, 1fr); }
  .control-row:has(.select, .stepper) .control { justify-self: start; }
  /* A control under a cue (the Model select a trap's fix names) is pinned to column 2 by the
     desktop rule in app.css; that pin opened an implicit second column and squeezed the label
     to three words a line. The control and its cue take rows of the one column instead. */
  .control-row:has(.select, .stepper) .control:has(.polarity) > :not(.polarity) { grid-column: 1; grid-row: 2; justify-self: start; }
  .control-row:has(.select, .stepper) .polarity { grid-row: 3; justify-self: start; text-align: left; }
}

/* The effort dots: 8 px at every width, on every row. They sat in a flex row that shrank
   them to 4 px when the label column was squeezed; flex: none on the dots and on the meter
   keeps them whole, and the row stacks (above) rather than the dots giving way. */
.pips { display: inline-flex; gap: 3px; align-items: center; cursor: help; flex: none; }
.pips i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--bg-neutral); border: 1px solid var(--border-strong); }
.pips i.on { background: var(--ink); border-color: var(--ink); }
.pips-word { font-size: 12px; color: var(--muted); margin-left: 4px; }
/* The key at the top of the Controls panel: one line, the dots drawn inline with their words. */
.pips-key { margin: 0 0 var(--s-2); display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; }
.pips-key .pips { cursor: default; }

/* From 720 px the levers pane scrolls, and a scroll box clips whatever is painted outside its
   padding edge: the focus ring on a group summary (a 2 px ring and a 6 px glow) and the
   arrival outline on a row (2 px at a 4 px offset) lost their left sides. The pane keeps an
   8 px gutter on the left and starts 8 px earlier so the rows do not move; the sticky tab
   strip covers the gutter too, so rows scrolling under it do not show through. */
@media (min-width: 720px) {
  .workspace .tabs-panel { padding-left: 8px; margin-left: -8px; }
  .workspace .tabs-panel > .tabs { margin-left: -8px; padding-left: 8px; }
  /* The results pane scrolls too, and the changed ring sits 4 px outside its card. */
  .workspace .outputs { padding-left: 4px; margin-left: -4px; padding-top: 4px; margin-top: -4px; }
}

/* After a step, every results card whose figures moved wears a ring and a word until the
   next step, folded or not: the fold hides the body, so the header carries both. */
.outputs .changed { outline: 2px solid var(--primary); outline-offset: 2px; }
.changed-word { flex: none; align-self: center; font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--primary); }

/* The swept plot inside a lever's More details: the SVG follows the column's width, so its
   12 px labels scale with it; the hidden table under it carries the same numbers. */
.zippy-extra:empty { display: none; }
.zippy-extra { margin-top: var(--s-2); }
.sweep .sweep-caption { margin: 0 0 4px; }
.sweep-svg { width: 100%; max-width: 400px; height: auto; display: block; overflow: visible; font-family: var(--font-sans); font-size: 12px; }
/* The two-lever grid: a cell's shade is its cost on the grid's own scale (lighter cheaper),
   the current pair is outlined, and the partner's name is said once per header for a reader
   and hidden from sight, where the caption already says it. */
/* contain: inline-size, so the table inside sizes to the column and scrolls, instead of the
   row's auto column growing to fit six cells and pushing a phone page sideways. Positioned,
   so the sr-only "current" word inside a cell (absolutely positioned, at its cell's x) is
   clipped with the table instead of escaping to the page and widening it by 100 px. */
.sweep-scroll { overflow-x: auto; max-width: 100%; contain: inline-size; position: relative; }
.sweep { position: relative; }
.sweep-grid { border-collapse: separate; border-spacing: 2px; font-size: 12px; width: 100%; max-width: 480px; }
.sweep-grid th { font-weight: 400; color: var(--muted); text-align: center; padding: 2px 2px; vertical-align: bottom; }
.sweep-grid th[scope="row"] { text-align: right; padding-right: 6px; white-space: nowrap; }
.sweep-grid th.current { font-weight: 600; color: var(--ink); }
.sweep-grid .axis-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.sweep-grid td { text-align: center; padding: 3px 2px; border-radius: 4px; background: color-mix(in srgb, var(--band-uncached) calc(var(--shade, 0.3) * 100%), transparent); font-variant-numeric: tabular-nums; }
.sweep-grid td.current { outline: 1.5px solid var(--ink); outline-offset: -1px; }
.sweep-grid .cell-cost, .sweep-grid .cell-pass { display: block; line-height: 1.25; }
.sweep-grid .cell-pass { color: var(--muted); font-size: 11px; }

/* The request figure's turn stepper sits in the caption beside the Table toggle. */
.turn-stepper { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.turn-stepper .turn-btn { min-width: 26px; width: 26px; padding: 0; min-height: 26px; font-size: 16px; line-height: 1; }
.turn-stepper .turn-readout { font-size: 12px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Under 720 px the caption cannot hold the title, the stepper, the Table toggle and the fold
   on one line (it ran 86 px past a 320 px screen); the stepper takes a row of its own. */
@media (max-width: 719px) {
  #chart-request figcaption { flex-wrap: wrap; }
  #chart-request figcaption .turn-stepper { flex-basis: 100%; order: 1; justify-content: flex-start; }
}

/* The pass-rate tile's table of terms: the tile spans the grid while it is open, the toggle
   sits at the end of the label line, and the terms read as a small ledger. */
.kpi .kpi-label { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.kpi .kpi-toggle { min-height: 22px; padding: 0 4px; margin: -4px -4px -4px 0; }
.kpi .kpi-body { display: grid; gap: 2px; align-content: start; }
.kpi.as-table { grid-column: 1 / -1; }
.kpi-table table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 4px; }
.kpi-table th, .kpi-table td { text-align: left; padding: 3px 6px 3px 0; border-bottom: 1px solid var(--hairline); vertical-align: top; font-weight: 400; }
.kpi-table thead th { color: var(--muted); font-size: 12px; }
.kpi-table td.pts, .kpi-table th.pts { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; vertical-align: top; }
.kpi-table tr.total th, .kpi-table tr.total td { font-weight: 500; border-bottom: none; }
.kpi-table .term-key { display: block; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.kpi-table .term-key code { font-size: 11px; }
.kpi-table .kpi-note { margin-top: 4px; }

/* The chain strip's Copy link: the word drops on a phone, the name stays. */
.timeline .copy-link { flex: none; margin-left: auto; }
@media (max-width: 719px) { .timeline .copy-link .btn-word { display: none; } .timeline .copy-link { padding: 5px 8px; } }