/* ui-rows.css — the rows' readings (P2 H4c-1; ui-rows.js): DemandCell and AllowanceLine, from ds/DemandCell and
   ds/AllowanceLine. */

/* DemandCell: the figure (mono) and its unit, then the bar on the set's own scale. */
.ui-demand { display: inline-flex; flex-direction: column; gap: 6px; position: relative; }
.ui-demand-fig { color: var(--faint); font-size: var(--type-meta-size); line-height: 1.2; white-space: nowrap; }
.ui-demand-num { color: var(--ink); font: var(--type-small-size)/1.2 var(--font-mono); font-variant-numeric: tabular-nums; }
.ui-demand-none .ui-demand-num { color: var(--faint); }
.ui-demand-bar { position: relative; display: block; width: 72px; height: 4px; border-radius: 2px; background: var(--track); }
.ui-demand-fill { position: absolute; top: 0; height: 4px; border-radius: 2px; background: var(--heat); }
.ui-demand-fill.ui-demand-band { background: var(--heat-lo); }
.ui-demand[tabindex]:focus-visible { outline: var(--focus-width) solid var(--focus-color); outline-offset: var(--focus-offset); border-radius: 2px; }

/* AllowanceLine: the word on the left, the figure on the right (mono, ink), the bar under them. */
.ui-allow-line { display: flex; flex-direction: column; gap: 6px; }
.ui-allow-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); font-size: var(--type-small-size); }
.ui-allow-label { color: var(--muted); font-weight: 500; }
.ui-allow-fig { color: var(--ink); font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-allow-figs { display: inline-flex; align-items: baseline; gap: var(--space-2); }
.ui-allow-over { color: var(--warn); font-weight: 600; white-space: nowrap; }
.ui-allow-free { color: var(--muted); white-space: nowrap; }
.ui-allow-bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--track); }
.ui-allow-bar > i { display: block; flex: none; height: 100%; }
.ui-allow-used { background: var(--ink); }
.ui-allow-add { background: var(--heat); }
/* One segment per slot up to 100 slots, the count readable at a glance: 1px gaps, 2px radius. */
.ui-allow-slots { gap: 1px; background: none; border-radius: 0; overflow: visible; }
.ui-allow-slots > i { flex: 1 1 0; min-width: 0; border-radius: 2px; }
.ui-allow-slots > .ui-allow-slot { background: var(--track); }
/* The header meter: a 96 × 6 continuous bar beside its words. */
.ui-allow-meter { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--type-meta-size); color: var(--muted); }
.ui-allow-meter > .ui-allow-bar { width: 96px; height: 6px; border-radius: 3px; flex: none; }
.ui-allow-meter .ui-allow-label { font-weight: 400; }
/* The words alone, beside the act that spends the allowance. */
.ui-allow-words { font-size: var(--type-small-size); }
.ui-allow-words .ui-allow-label { font-weight: 400; color: var(--body); }
/* The refusal's served words under the bar, at or over the cap (ds/AllowanceLine). */
.ui-allow-note { margin-top: 4px; padding: 8px 10px; border-radius: var(--radius-md); background: var(--track); color: var(--body);
  font-size: var(--type-small-size); line-height: 1.45; }

/* OutcomePath (ds/OutcomePath; Questions' board): one column per step, the squares stacked up from one baseline, five
   to a row; No answer stored set apart, hollow, before a dashed rule. Every stack is as tall as the tallest, so the
   baselines line up. */
.ui-path { position: relative; display: grid; grid-template-columns: repeat(var(--path-steps), minmax(0, 1fr)); }
.ui-path.ui-path-apart { grid-template-columns: 172px repeat(var(--path-steps), minmax(0, 1fr)); }
.ui-path.ui-path-apart::before { content: ""; position: absolute; left: 172px; top: 12px; bottom: 12px; border-left: 1px dashed var(--line); }
.ui-path-step { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 12px 14px 14px; border: 0; border-radius: 10px;
  background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ui-path-step:hover { background: var(--hover); }
.ui-path-step[aria-pressed="true"] { background: var(--hover); box-shadow: inset 0 0 0 1.5px var(--ink); }
.ui-path-step:focus-visible { outline: var(--focus-width) solid var(--focus-color); outline-offset: var(--focus-offset); }
.ui-path-stack { --sq: 16px; --sq-gap: 4px; display: flex; flex-wrap: wrap-reverse; align-content: flex-start; gap: var(--sq-gap);
  width: calc(5 * var(--sq) + 4 * var(--sq-gap)); height: calc(var(--path-rows) * var(--sq) + (var(--path-rows) - 1) * var(--sq-gap)); }
.ui-path-sq { display: block; width: var(--sq, 12px); height: var(--sq, 12px); border-radius: 4px; box-sizing: border-box; background: var(--path-c); }
.ui-path-base { display: block; height: 0; margin: 0 -14px; border-top: 1.5px solid var(--line); }
.ui-path-head { display: flex; flex-direction: column; gap: 2px; }
.ui-path-num { color: var(--ink); font-size: var(--type-stat-size); font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ui-path-step .ui-path-word { color: var(--ink); font-weight: 600; }
.ui-path-meaning { min-height: 32px; color: var(--faint); font-size: var(--type-meta-size); }
.ui-path-share { display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: var(--type-meta-size); }
.ui-path-pct { color: var(--ink); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.ui-path-bar { position: relative; display: block; width: 100%; max-width: 132px; height: 4px; border-radius: 2px; background: var(--track); }
.ui-path-bar > i { position: absolute; left: 0; top: 0; height: 4px; border-radius: 2px; background: var(--path-c); }
.ui-path-end { position: absolute; right: 12px; top: calc(var(--path-rows) * 20px - 2px); display: inline-flex; align-items: center; gap: 4px; color: var(--faint);
  font-size: var(--type-meta-size); pointer-events: none; }
.ui-path-end svg { position: absolute; right: -19px; top: 3px; width: 12px; height: 12px; fill: none; stroke: var(--edge); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; }
/* A large set's grouping, said under the path or the list (RD, 10-05 12:07). */
.ui-path-scale { margin: 8px 0 0; color: var(--muted); font-size: var(--type-meta-size); }
/* The outcomes' colours: the squares and the share's bar carry them; the words carry the outcome. */
.ui-path-winning, .ui-outcome-winning { --path-c: var(--pos); }
.ui-path-named_not_picked, .ui-outcome-named_not_picked { --path-c: var(--warn); }
.ui-path-open, .ui-outcome-open { --path-c: var(--heat); }
.ui-path-losing, .ui-outcome-losing { --path-c: var(--neg); }
.ui-path-not_known, .ui-outcome-not_known { --path-c: var(--tone-neg); }
.ui-path-no_answer, .ui-outcome-no_answer { --path-c: transparent; }
.ui-path-no_answer .ui-path-sq { border: 1.5px dashed var(--muted); }
.ui-path-no_answer .ui-path-base { border-top-color: transparent; }
.ui-path-no_answer .ui-path-bar > i { background: var(--muted); }
/* At a phone's width, three steps to a row, smaller squares; the rule and the end mark go. */
@media (max-width: 720px) {
  .ui-path, .ui-path.ui-path-apart { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ui-path.ui-path-apart::before, .ui-path-end { display: none; }
  .ui-path-stack { --sq: 12px; --sq-gap: 3px; }
  .ui-path-step { padding: 10px; }
  .ui-path-base { margin: 0 -10px; }
}
/* First days' list: the squares, the word, then the served example. */
/* One lead column for every row, as wide as the widest lead and never under the board's 150px. */
.ui-path-list { display: grid; grid-template-columns: minmax(150px, max-content) minmax(0, 1fr); column-gap: 12px; margin: 0; padding: 0; list-style: none; }
.ui-path-row { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; align-items: center; min-height: 34px; border-top: 1px solid var(--line-soft); }
.ui-path-lead { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
/* Ten to a line, so fifty squares stay inside the lead column's 150px. */
.ui-path-sqs { display: flex; flex-wrap: wrap; gap: 3px; max-width: 147px; }
.ui-path-sqs .ui-path-sq { width: 12px; height: 12px; border-radius: 3px; }
.ui-path-row .ui-path-word { color: var(--ink); font-weight: 500; }
.ui-path-said { color: var(--body); font-size: var(--type-small-size); }
.ui-path-none { color: var(--faint); }
/* outcomeMark: a row's dot and word. */
.ui-outcome { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); font-weight: 500; font-size: var(--type-small-size); }
.ui-outcome > i { flex: none; width: 8px; height: 8px; border-radius: 50%; box-sizing: border-box; background: var(--path-c); }
.ui-outcome-no_answer > i { border: 1.5px solid var(--muted); }

/* ProofSquares (ds/ProofSquares): a labelled row of state squares and its count; the states told apart by fill and
   edge. Sizes from the boards: 14 (Next moves), 9 (Questions' coverage), 8 (Shopping's catalogue). */
.ui-proof { display: flex; flex-direction: column; gap: 10px; }
.ui-proof-rows { display: grid; grid-template-columns: fit-content(40%) minmax(0, 1fr) auto; gap: 6px 10px; margin: 0; padding: 0; list-style: none; }
.ui-proof-row { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; align-items: center; }
.ui-proof-label { min-width: 0; color: var(--ink); font-size: var(--type-small-size); }
.ui-proof-count { color: var(--ink); font: var(--type-meta-size)/1.2 var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.ui-proof-strip { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--proof-gap); min-width: 0; }
/* A held row stays on one line. Wider than its column, it scrolls inside itself, never under the count or past the
   card (Codex's H4c-2 review); the padding holds the threshold line inside the strip. */
.ui-proof-strip.ui-proof-held { flex-wrap: nowrap; overflow-x: auto; padding-block: 6px; }
.ui-proof-14 { --proof-sq: 14px; --proof-gap: 3px; --proof-r: 3px; --proof-edge: 1.5px; }
.ui-proof-9 { --proof-sq: 9px; --proof-gap: 3px; --proof-r: 2px; --proof-edge: 1px; }
.ui-proof-8 { --proof-sq: 8px; --proof-gap: 2px; --proof-r: 2px; --proof-edge: 1px; }
.ui-proof-strip > i { display: block; flex: none; width: var(--proof-sq); height: var(--proof-sq); border-radius: var(--proof-r); box-sizing: border-box; }
.ui-proof-solid.ui-proof-pos { background: var(--pos); }
.ui-proof-solid.ui-proof-heat { background: var(--heat); }
.ui-proof-solid.ui-proof-ink { background: var(--ink); }
.ui-proof-outline { border: var(--proof-edge, 1px) solid var(--edge); }
.ui-proof-slot { border: 1px solid var(--line); }
.ui-proof-dashed.ui-proof-warn { background: var(--track); border: 1.5px dashed var(--warn); }
/* The threshold: a dashed rule after the at-th square, through the row. */
.ui-proof-line { position: absolute; top: 0; bottom: 0; left: calc(var(--proof-at) * (var(--proof-sq) + var(--proof-gap)) - var(--proof-gap) / 2 - 0.75px);
  border-left: 1.5px dashed var(--muted); }
/* At a phone's width, the label and its count share a line, the strip under them. */
@media (max-width: 520px) {
  .ui-proof-rows { grid-template-columns: minmax(0, 1fr) auto; row-gap: 10px; }
  .ui-proof-label { grid-column: 1; grid-row: 1; }
  .ui-proof-row > :last-child { grid-column: 2; grid-row: 1; }
  .ui-proof-row > .ui-proof-strip { grid-column: 1 / -1; grid-row: 2; }
}
/* D-302: the shared scale under the rows, as OutcomePath says its own. */
.ui-proof-scale { margin: 8px 0 0; color: var(--muted); font-size: var(--type-meta-size); }
.ui-proof-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 10px 0 0; border-top: 1px solid var(--line-soft); list-style: none;
  color: var(--muted); font-size: var(--type-small-size); }
.ui-proof-legend > li { display: inline-flex; align-items: center; gap: 6px; }
.ui-proof-legend i { display: block; width: 10px; height: 10px; border-radius: 2px; box-sizing: border-box; }

/* ---- MoveRow and MoveCard (H4b-1; work-move-row.js) ---- */
/* ds/MoveRow and ds/MoveCard share the same served parts. */
.ui-move,
.ui-move-ranked { display: grid; grid-template-columns: 24px minmax(0, 1fr) minmax(100px, 160px) minmax(64px, 100px) minmax(100px, 180px) 30px;
  grid-template-areas: "rank body impact demand action more"; gap: 12px; align-items: start;
  padding: 12px; border-top: 1px solid var(--line-soft); background: var(--surface);
  color: var(--body); font: 400 var(--type-small-size)/1.45 var(--font-sans); min-width: 0; }
.ui-move:hover { background: var(--hover); }
.ui-move-blocker, .ui-move-blocker:hover { background: var(--neg-soft); box-shadow: inset 3px 0 0 var(--neg); }
/* The drawer holds this move: an ink ring, as a pressed step (ui-rows.css); a blocker keeps its rule inside it. */
.ui-move-open { box-shadow: inset 0 0 0 1.5px var(--ink); }
.ui-move-blocker.ui-move-open { box-shadow: inset 0 0 0 1.5px var(--ink), inset 3px 0 0 var(--neg); }
.ui-move-rank { grid-area: rank; font: 400 var(--type-meta-size)/1.6 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--faint); overflow-wrap: anywhere; }
.ui-move-badge { grid-area: rank; width: 20px; height: 20px; border-radius: 50%; background: var(--neg);
  color: var(--btn-ink); font-weight: 700; font-size: var(--type-meta-size); line-height: 20px; text-align: center; }
.ui-move-body { grid-area: body; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ui-move-title { position: relative; display: block; align-self: flex-start; max-width: 100%; padding: 0; border: 0;
  background: none; color: var(--ink); font: 500 var(--type-small-size)/1.45 var(--font-sans); text-align: left; overflow-wrap: anywhere; cursor: pointer; }
.ui-move-title:hover { color: var(--link); }
.ui-move-title:focus-visible, .ui-move-more:focus-visible { outline: var(--focus-width) solid var(--focus-color); outline-offset: var(--focus-offset); border-radius: var(--r-sm); }
.ui-move-details { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 6px; min-width: 0; }
.ui-move-meta { font-size: var(--type-meta-size); color: var(--muted); overflow-wrap: anywhere; }
.ui-move-why { color: var(--body); overflow-wrap: anywhere; }
.ui-move-impact { grid-area: impact; min-width: 0; }
.ui-move-demand { grid-area: demand; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.ui-move-demand-tip, .ui-move-verb-tip { font-size: var(--type-meta-size); color: var(--muted); overflow-wrap: anywhere; }
.ui-move-action { grid-area: action; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; min-width: 0; }
.ui-move-verb { position: relative; min-width: 24px; min-height: 26px; max-width: 100%; height: auto; padding: 4px 10px;
  font-family: var(--font-sans); line-height: 1.3; white-space: normal; overflow-wrap: anywhere; }
.ui-move-note { grid-area: action; font-size: var(--type-meta-size); color: var(--muted); overflow-wrap: anywhere; }
.ui-move-more { grid-area: more; width: 30px; height: 30px; padding: 0; border: 0; border-radius: var(--r-sm);
  background: none; color: var(--muted); font: 500 var(--type-body-size)/1 var(--font-sans); cursor: pointer; }
.ui-move-more:hover { background: var(--hover); color: var(--ink); }
.ui-move-set-aside { grid-template-columns: minmax(0, 1fr) minmax(100px, 180px) auto;
  grid-template-areas: "body note action"; align-items: center; }
.ui-move-set-aside .ui-move-note { grid-area: note; }
.ui-move-card { grid-template-columns: 24px minmax(0, 1fr) 30px;
  grid-template-areas: "rank body body" "impact impact impact" "demand demand demand" "note note note" "action action more";
  gap: 12px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius-card); }
.ui-move-card .ui-move-body { gap: 6px; }
.ui-move-card .ui-move-note { grid-area: note; }
.ui-move-card .ui-move-action { align-items: flex-start; }
.ui-move-card.ui-move-set-aside { grid-template-areas: "body body body" "note note note" "action action action"; }
@media (max-width: 760px) {
  .ui-move { grid-template-columns: 24px minmax(0, 1fr) 30px;
    grid-template-areas: "rank body body" "impact impact impact" "demand demand demand" "note note note" "action action more"; }
  .ui-move .ui-move-note { grid-area: note; }
  .ui-move .ui-move-action { align-items: flex-start; }
  .ui-move-set-aside { grid-template-areas: "body body body" "note note note" "action action action"; }
}

/* ---- RatingBars (H4b-1; work-rating.js) ---- */
/* ds/RatingBars: the word and its basis beside four rising bars. */
.ui-rating { display: inline-grid; grid-template-columns: auto minmax(0, 1fr); gap: 1px 8px;
  align-items: start; max-width: 100%; font-size: var(--type-small-size); line-height: 1.4; color: var(--ink); }
.ui-rating-bars { grid-column: 1; grid-row: 1 / span 2; display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; margin-top: 2px; }
.ui-rating-bars i { display: block; width: 4px; height: 14px; border-radius: 1px; background: var(--track); }
.ui-rating-bars i:nth-child(1) { height: 5px; }
.ui-rating-bars i:nth-child(2) { height: 8px; }
.ui-rating-bars i:nth-child(3) { height: 11px; }
.ui-rating-bars i.ui-rating-on { background: var(--ink); }
.ui-rating-word { grid-column: 2; font-weight: 500; overflow-wrap: anywhere; }
.ui-rating-sub { grid-column: 2; font-size: var(--type-meta-size); color: var(--muted); overflow-wrap: anywhere; }
.ui-rating-none { grid-template-columns: minmax(0, 1fr); color: var(--muted); }
.ui-rating-none .ui-rating-word { grid-column: 1; font-weight: 400; }

/* ---- EngineAnswerRow (H4b-2; ui-rows.js) ---- */
/* ds/EngineAnswerRow: engine | outcome | the sentence that decides | the way to the answer, the whole row one button. */
.ui-ear { display: grid; grid-template-columns: 110px auto minmax(0, 1fr) 56px; gap: 12px; align-items: center; width: 100%;
  min-height: 24px; padding: 8px; border: 0; border-top: 1px solid var(--line-soft); border-radius: var(--radius-md);
  background: transparent; color: var(--body); font: inherit; text-align: left; cursor: pointer; }
.ui-ear:hover { background: var(--hover); }
.ui-ear:focus-visible { outline: var(--focus-width) solid var(--focus-color); outline-offset: var(--focus-offset); }
.ui-ear-open { box-shadow: inset 0 0 0 1.5px var(--ink); }
.ui-ear-eng { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--type-small-size); font-weight: 500; color: var(--ink); }
.ui-ear-name { overflow-wrap: anywhere; }
.ui-ear-out { display: inline-flex; align-items: center; min-width: 0; }
/* A long picked brand wraps inside a capped column, so it never pushes the end past the row. */
.ui-ear-pick { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 160px; font-size: var(--type-small-size); color: var(--ink); }
.ui-ear-brand { min-width: 0; overflow-wrap: anywhere; }
.ui-ear-swatch { width: 10px; height: 10px; flex: 0 0 10px; box-sizing: border-box; border-radius: 2px; background: var(--ear-series); }
.ui-ear-swatch-none { background: transparent; border: 1.5px dashed var(--muted); }
.ui-ear-sent { min-width: 0; font-size: var(--type-small-size); line-height: 1.4; color: var(--body);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.ui-ear-sent mark { padding: 0 3px; border-radius: 3px; background: var(--mark); color: var(--ink); font-weight: 600; }
/* fit "line" (a drawer): one line with an ellipsis, in CSS alone; the whole sentence stays in the DOM. */
.ui-ear-line .ui-ear-sent { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-ear-end { display: flex; justify-content: flex-end; color: var(--faint); }
.ui-ear-end svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ui-ear-word { font-size: var(--type-small-size); font-weight: 500; color: var(--link); }

/* ---- ReadingBand (H4b-2; ui-rows.js) ---- */
/* ds/ReadingBand: readings in one card, split by rules; every row a filter. */
.ui-band { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); padding: 18px 0;
  border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); color: var(--body); }
.ui-band-seg { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 0 22px; }
.ui-band-seg + .ui-band-seg { border-left: 1px solid var(--line-soft); }
.ui-band-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ui-band-label { font-weight: 500; color: var(--muted); }
.ui-band-aside { font-size: var(--type-meta-size); color: var(--faint); text-align: right; }
.ui-band-fig { display: flex; align-items: baseline; gap: 8px; }
.ui-band-value { font: var(--type-stat-weight) var(--type-stat-size)/1 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.ui-band-of { font-size: var(--type-small-size); color: var(--body); }
.ui-band-range, .ui-band-foot, .ui-band-axis { font-size: var(--type-meta-size); color: var(--faint); }
.ui-band-text { margin: 0; color: var(--body); }
.ui-band-rows { display: flex; flex-direction: column; gap: 2px; }
.ui-band-stack { display: flex; height: 10px; gap: 2px; margin-bottom: 8px; }
.ui-band-stack i { display: block; min-width: 2px; border-radius: 2px; box-sizing: border-box; }
.ui-band-look-heat { background: var(--heat); }
.ui-band-look-track { background: var(--track); }
.ui-band-look-unknown { background: transparent; border: 1.5px dashed var(--muted); }
.ui-band-row { display: grid; align-items: center; gap: 8px; min-height: 24px; margin: 0 -4px; padding: 3px 4px; border: 0;
  border-radius: var(--radius-md); background: transparent; color: var(--body); font: inherit; font-size: var(--type-small-size); text-align: left; cursor: pointer; }
.ui-band-row:hover { background: var(--hover); }
.ui-band-row[aria-pressed="true"] { background: var(--hover); box-shadow: inset 0 0 0 1.5px var(--ink); }
.ui-band-row:focus-visible { outline: var(--focus-width) solid var(--focus-color); outline-offset: var(--focus-offset); }
.ui-band-legend { grid-template-columns: 10px minmax(0, 1fr) auto; }
.ui-band-key { width: 10px; height: 10px; box-sizing: border-box; border-radius: 2px; }
.ui-band-bar { grid-template-columns: minmax(0, 130px) minmax(0, 1fr) 28px; }
.ui-band-engine { grid-template-columns: minmax(0, 74px) minmax(0, 1fr) 34px; }
.ui-band-row-label { min-width: 0; overflow-wrap: anywhere; }
.ui-band-count { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink); text-align: right; }
.ui-band-track { height: 8px; border-radius: 3px; background: var(--track); }
.ui-band-track i { display: block; height: 8px; border-radius: 3px; background: var(--ink); opacity: .8; }
.ui-band-mini { position: relative; height: 12px; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.ui-band-mini-band { position: absolute; top: 5px; height: 2px; background: var(--heat-lo); }
.ui-band-mini-dot { position: absolute; top: 2px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--ink); }

@media (max-width: 390px) {
  .ui-band { grid-auto-flow: row; grid-template-columns: 1fr; gap: 14px; }
  .ui-band-seg + .ui-band-seg { border-left: 0; border-top: 1px solid var(--line-soft); padding-top: 14px; }
  .ui-ear { grid-template-columns: minmax(0, auto) auto 1fr; grid-template-areas: "eng out end" "sent sent sent"; row-gap: 4px; }
  .ui-ear-eng { grid-area: eng; } .ui-ear-out { grid-area: out; } .ui-ear-sent { grid-area: sent; } .ui-ear-end { grid-area: end; }
}

/* ---- SettingRow (H4e) ----
   DOM words are label, value, note; the note spans the value column on desktop and both on the phone. */
.ui-setting {
  display: grid; grid-template-columns: 130px minmax(0, 1fr) 14px; grid-template-rows: auto auto;
  column-gap: 14px; row-gap: 3px; align-items: center; width: 100%; padding: 11px 4px;
  border: 0; border-top: 1px solid var(--line-soft); border-radius: 0;
  background: transparent; color: var(--ink); font: inherit; text-align: left;
}
button.ui-setting { cursor: pointer; }
button.ui-setting:hover { background: var(--hover); }
.ui-setting:focus-visible { outline: 2px solid var(--heat); outline-offset: 2px; }
.ui-setting-open { box-shadow: inset 0 0 0 1px var(--ink); border-radius: 6px; }
.ui-setting-label { grid-column: 1; grid-row: 1 / 3; color: var(--muted); font-size: 12px; }
.ui-setting-value { grid-column: 2; grid-row: 1; font-size: 13px; font-weight: 500; overflow-wrap: anywhere; }
.ui-setting-note { grid-column: 2; grid-row: 2; color: var(--faint); font-size: 12px; overflow-wrap: anywhere; }
.ui-setting-warn { color: var(--warn); }
.ui-setting-chevron { grid-column: 3; grid-row: 1 / 3; color: var(--faint); }
@media (max-width: 760px) {
  .ui-setting { grid-template-columns: minmax(0, auto) minmax(0, 1fr) 14px; }
  .ui-setting-label { grid-row: 1; }
  .ui-setting-value { text-align: right; }
  .ui-setting-note { grid-column: 1 / 3; }
  .ui-setting-chevron { grid-row: 1 / 3; }
}

/* ---- InboxItem (H4b-3; ui-rows.js) ---- */
/* ds/InboxItem: the kind and when, the title, the verbs. A card in Next moves' column; across Visibility's strip, a row. */
.ui-inbox { container-type: inline-size; container-name: inbox; }
.ui-inbox-in { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "kind meta" "title title" "note note" "verbs verbs";
  column-gap: 8px; align-items: center; padding: 14px 18px; border: 1px solid var(--line);
  border-radius: var(--radius-card); background: var(--surface); }
.ui-inbox-kind { grid-area: kind; display: flex; }
.ui-inbox-meta { grid-area: meta; min-width: 0; font-size: var(--type-meta-size); color: var(--faint); overflow-wrap: anywhere; }
.ui-inbox-title { grid-area: title; margin-top: 6px; color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }
.ui-inbox-failed .ui-inbox-note { grid-area: note; margin: 6px 0 0; font-size: var(--type-small-size); color: var(--neg); }
.ui-inbox-verbs { grid-area: verbs; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.ui-inbox-verb { white-space: nowrap; }
/* A running act: its pressed verb carries aria-busy and the busy mark; nothing dims or disables, the row says nothing (D-35). */
.ui-inbox-busy .ui-inbox-verb[aria-busy="true"] .ui-inbox-mark { display: inline-block; width: 14px; height: 14px; margin-left: 6px; vertical-align: -2px; }
.ui-inbox-mark svg { display: block; width: 100%; height: 100%; }
/* Wide, measured by the item's own container (Visibility's strip): the kind a fixed column, the title over its meta, the verbs at the end, the filled one last. */
@container inbox (min-width: 480px) {
  .ui-inbox-in { padding: 0; border: 0; background: transparent; grid-template-columns: 76px minmax(0, 1fr) auto; grid-template-areas: "kind title verbs" "kind meta verbs" "kind note verbs";
    column-gap: 14px; }
  .ui-inbox-kind { justify-content: center; }
  .ui-inbox-title { margin-top: 0; font-weight: 600; }
  .ui-inbox-meta { margin-top: 2px; color: var(--muted); }
  .ui-inbox-failed .ui-inbox-note { margin-top: 2px; }
  .ui-inbox-verbs { margin-top: 0; justify-content: flex-end; }
}

/* ds/TrackSuggestion: an untracked name, its served counts and spellings, and two quiet acts. */
.ui-track { container-type: inline-size; container-name: track-suggestion; padding: 14px 0; border-top: 1px solid var(--line-soft); }
.ui-track-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: center; }
.ui-track-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ui-track-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ui-track-swatch { flex: none; width: 9px; height: 9px; box-sizing: border-box; border: 1.5px dashed var(--muted); border-radius: 2px; }
.ui-track-open { appearance: none; border: 0; padding: 0; background: transparent; color: var(--ink); font: inherit;
  font-weight: 600; text-align: left; overflow-wrap: anywhere; min-width: 0; min-height: 32px; cursor: pointer; }
.ui-track-counts { color: var(--body); font: var(--type-small-size)/1.5 var(--font-mono); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ui-track-detail { color: var(--muted); font-size: var(--type-meta-size); overflow-wrap: anywhere; }
.ui-track-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.ui-track-act { min-height: 32px; white-space: nowrap; }
.ui-track-track { border-color: var(--ink); color: var(--ink); }
.ui-track-open:hover { text-decoration: underline; }
.ui-track-open:focus-visible { outline: var(--focus-width) solid var(--focus-color); outline-offset: var(--focus-offset); border-radius: 2px; }
.ui-track-spark { display: block; width: 160px; max-width: 100%; }
.ui-track-spark .blk-plot { display: block; width: 100%; height: 32px; overflow: visible; }
.ui-track-spark .blk-plot .blk-ln { fill: none; stroke: var(--muted); stroke-width: 2; }
.ui-track-spark .blk-plot .blk-pt { fill: var(--muted); }
/* A missing week is a marker, not a break (F1): a dashed bridge in the muted line, an open ring at each missing week. */
.ui-track-spark .blk-plot .blk-bridge { fill: none; stroke: var(--muted); stroke-width: 2; stroke-dasharray: 2 4; stroke-linecap: round; }
.ui-track-spark .blk-plot .blk-gap-pt { fill: var(--surface); stroke: var(--muted); stroke-width: 1.5; }
@container track-suggestion (min-width: 480px) {
  .ui-track-in { grid-template-columns: minmax(0, 1fr) auto; gap: 16px; }
  .ui-track-acts { justify-content: flex-end; }
}
@media (max-width: 600px) {
  .ui-track-open, .ui-track-act { min-height: 44px; }
}

/* ---- ClaimRow (H4b-3; ui-rows.js) ----
   ds/ClaimRow: the claim opens, the meta names the engines and what the record says, three quiet verbs at the end.
   A decided claim keeps the claim and shows the decision as a status tag. Busy dims nothing (D-35). */
.ui-claim { container-type: inline-size; container-name: claim-row; padding: 10px 0; border-top: 1px solid var(--line-soft); }
.ui-claim-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px 12px; align-items: center; }
.ui-claim-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ui-claim-open { appearance: none; align-self: flex-start; max-width: 100%; min-height: 28px; border: 0; padding: 0; background: transparent; color: var(--ink);
  font: inherit; font-size: 13.5px; font-weight: 500; text-align: left; overflow-wrap: anywhere; cursor: pointer; }
.ui-claim-open:hover { text-decoration: underline; }
.ui-claim-open:focus-visible { outline: var(--focus-width) solid var(--focus-color); outline-offset: var(--focus-offset); border-radius: 2px; }
.ui-claim-meta { color: var(--faint); font-size: 12px; overflow-wrap: anywhere; }
.ui-claim-note { margin: 4px 0 0; font-size: var(--type-small-size); color: var(--neg); }
.ui-claim-verbs, .ui-claim-decision { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ui-claim-verb { white-space: nowrap; }
.ui-claim-verb[aria-busy="true"] .ui-claim-mark { display: inline-block; width: 14px; height: 14px; margin-left: 6px; vertical-align: -2px; }
.ui-claim-mark svg { display: block; width: 100%; height: 100%; }
@container claim-row (min-width: 480px) {
  .ui-claim-in { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
  .ui-claim-verbs, .ui-claim-decision { justify-content: flex-end; }
}
@media (max-width: 600px) {
  .ui-claim-open, .ui-claim-verb { min-height: 44px; }
}

/* ---- SelectionBar (H4c-3; ui-rows.js) ----
   ds/SelectionBar: in the list head's place on the hover ground, sticky under the page header; in a panel's foot it sits above the
   panel's own act. One DOM: the row, the acts and the More list dissolve into one flex row on the desktop; the phone stacks them
   (count, Clear, one act and More; the allowance; the filled act full width) and pins the bar at the list's foot. */
.ui-selbar { position: sticky; top: var(--selbar-top, 0px); z-index: 3; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-height: 48px; box-sizing: border-box;
  padding: 8px 18px; background: var(--hover); border-bottom: 1px solid var(--line-soft); font: 13px/1.4 var(--font-sans); color: var(--body); }
.ui-selbar-foot { top: auto; bottom: 0; border-bottom: 0; border-top: 1px solid var(--line-soft); }
.ui-selbar-row, .ui-selbar-acts, .ui-selbar-over { display: contents; }
.ui-selbar [role="status"] { position: absolute; }
.ui-selbar-count { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-selbar-link { font-size: 12.5px; white-space: nowrap; }
.ui-selbar .ui-allow-over { margin-left: 6px; }
.ui-selbar-gap { flex-grow: 1; }
.ui-selbar-act, .ui-selbar-more { white-space: nowrap; }
.ui-selbar-more { display: none; }
.ui-selbar .ui-allow-words { font-size: 12.5px; color: var(--muted); }
.ui-selbar .ui-allow-label { font-weight: 400; color: var(--muted); }
.ui-selbar-note { font-size: 12.5px; color: var(--muted); }
@media (max-width: 759px) {
  .ui-selbar { top: auto; bottom: var(--selbar-offset, 0px); flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 8px; min-height: 0; padding: 10px 16px;
    background: var(--surface); border-bottom: 0; border-top: 1px solid var(--line); box-shadow: var(--shadow-float); }
  .ui-selbar-row { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .ui-selbar-acts { display: flex; align-items: center; gap: 8px; }
  .ui-selbar-more { display: inline-flex; justify-content: center; min-width: 44px; min-height: 44px; padding: 0; }
  .ui-selbar-over { display: none; position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 4; flex-direction: column; align-items: stretch; gap: 4px;
    padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-float); }
  .ui-selbar-open .ui-selbar-over { display: flex; }
  .ui-selbar-link, .ui-selbar-act { min-height: 44px; }
  .ui-selbar-fill { justify-content: center; width: 100%; }
}

/* ---- FindingRow (H4b-3; ui-rows.js) ----
   ds/FindingRow: the kind (faint), the title (ink, 500), the sub (muted), the verb in a fixed 64 px button, the menu at 32 px (44 on the phone). */
.ui-frow { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line-soft); }
.ui-frow-copy { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ui-frow-kindrow { display: flex; align-items: center; gap: 8px; }
.ui-frow-kind { font-size: 12px; color: var(--faint); overflow-wrap: anywhere; }
.ui-frow-blocker { display: inline-flex; }
.ui-frow-blocker .ui-tag { color: var(--neg); background: var(--neg-soft); }
.ui-frow-title { color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }
.ui-frow-sub { color: var(--muted); font-size: 12.5px; overflow-wrap: anywhere; }
.ui-frow-acts { flex: none; display: flex; align-items: center; gap: 8px; }
.ui-frow-verb { box-sizing: border-box; width: 64px; height: 32px; padding: 0; justify-content: center; }
.ui-frow-menu { box-sizing: border-box; width: 32px; height: 32px; padding: 0; justify-content: center; }
@media (max-width: 600px) {
  .ui-frow-verb { height: 44px; }
  .ui-frow-menu { width: 44px; height: 44px; }
}