/* Interpretable AI (Vision Rules) — page styles. Only app.css tokens; the
   section reuses the site's .card, .strip, .disclosure, .caption, .nav-cta
   and button rules, in its OWN hue (--xai / --xai-alt) so nothing here
   borrows the FHE palette's meanings. */

/* ---- section chrome: the band under the header (the tab itself looks
   exactly like the other tabs — owner, 2026-09-07) ---- */
.xai-band {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .45rem 1.4rem; background: var(--xai-dim); color: var(--xai-ink);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-size: .85rem;
}
.xai-band .xai-dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--xai); }
.xai-band b { letter-spacing: .04em; text-transform: uppercase; font-size: .78rem; }
.xai-band span:last-child { color: var(--dim); }

/* ---- chooser ---- */
#vision-intro p { max-width: 58rem; line-height: 1.55; }
#vision-intro p:first-child { font-size: 1.08rem; }
#vision-plain-note { margin: 1rem 0 1.6rem; }

.vision-how {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem;
  list-style: none; padding: 0; margin: .5rem 0 1.2rem; counter-reset: how;
}
.vision-how-step {
  padding: .95rem 1.1rem .85rem; margin: 0; display: block; text-align: left; cursor: default;
  border-radius: .9rem;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background:
    linear-gradient(140deg,
      color-mix(in srgb, var(--xai) 8%, rgba(255, 255, 255, 0.55)),
      rgba(255, 255, 255, 0.2));
  -webkit-backdrop-filter: blur(16px) saturate(175%);
  backdrop-filter: blur(16px) saturate(175%);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--navy) 12%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  animation: rise .35s var(--ease-settle) both; animation-delay: calc(var(--i, 0) * 60ms);
}
.vision-how-step:hover { transform: none; }
.vision-how-step b { display: block; font-size: .95rem; margin-bottom: .3rem; }
.vision-how-step b::before {
  counter-increment: how; content: counter(how);
  display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; margin-right: .5rem;
  border-radius: 50%; background: var(--action); color: var(--btn-ink);
  font-family: var(--font-data); font-size: .75rem;
}
.vision-how-step p { margin: 0; color: var(--dim); font-size: .88rem; line-height: 1.45; }

.vision-models {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 20rem)); gap: .9rem;
  margin: .5rem 0 1rem;
}
.vision-model {
  display: flex; flex-direction: column; align-items: flex-start; gap: .25rem;
  padding: 1rem 1.1rem; margin: 0; text-align: left; color: var(--ink); font: inherit;
  border: 2px solid transparent;
  animation: rise .35s var(--ease-settle) both; animation-delay: calc(var(--i, 0) * 60ms);
}
.vision-model.on { border-color: var(--xai); box-shadow: 0 0 0 1px var(--xai), var(--ring); }
.vision-model-name { font-size: 1.15rem; }
.vision-model-tagline { color: var(--dim); font-size: .85rem; font-family: var(--font-data); }

.vision-explain, .vision-compare {
  border-radius: .9rem;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background:
    linear-gradient(140deg,
      color-mix(in srgb, var(--xai) 8%, rgba(255, 255, 255, 0.55)),
      rgba(255, 255, 255, 0.2));
  -webkit-backdrop-filter: blur(16px) saturate(175%);
  backdrop-filter: blur(16px) saturate(175%);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--navy) 12%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  padding: 1.05rem 1.25rem .65rem; margin: 0 0 1.6rem; max-width: 58rem;
}
.vision-explain p { line-height: 1.55; margin: 0 0 .7rem; }
.vision-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin: .2rem 0 .9rem; }
.vision-chip {
  font-size: .76rem; padding: .18rem .55rem; border-radius: 999px;
  background: var(--panel-2); color: var(--dim); border: 1px solid var(--line);
}

#vision-rulebook, #vision-cueset, #vision-result-rulebook, #vision-result-models, #vision-result-cuesets {
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin: .4rem 0 .6rem;
}
#vision-rulebook-label, #vision-cueset-label, .vision-filter-label { color: var(--dim); font-size: .85rem; font-weight: 600; }
#vision-books, #vision-cuesets { display: inline-flex; gap: .4rem; }
/* The cue-set toggle (2026-09-10) sits first in the explanation card, its
   honesty line right under it, then the chosen cue set's paragraphs. */
#vision-cueset { margin-top: 0; }
#vision-cueset-note { margin: 0 0 .8rem; max-width: 58rem; line-height: 1.5; }
.vision-book {
  background: transparent; color: var(--dim); border: 1px solid var(--edge);
  padding: .45rem .9rem; font-size: .85rem; margin: 0;
}
.vision-book.on { background: var(--action); color: var(--btn-ink); border-color: var(--action); }

.vision-inputs { display: flex; align-items: center; flex-wrap: wrap; gap: .8rem; margin: .4rem 0 1rem; }
#vision-upload-label { cursor: pointer; display: inline-block; }
#vision-upload-label.disabled { opacity: .4; cursor: default; pointer-events: none; }
#vision-camera-btn { margin: 0; }

/* ---- live camera: view left, reading right ---- */
#vision-cam { margin: .6rem 0 1.6rem; }
/* Live view: the camera left, the reading right — roomy (owner, 2026-09-07:
   the first cut was too tight and lines collided). The panel never scrolls
   inside itself; the page grows instead. */
.vision-live {
  display: grid; grid-template-columns: minmax(20rem, 34rem) minmax(24rem, 1fr);
  gap: 1.6rem; align-items: start;
}
.vision-cam-frame {
  position: relative; background: #000; border-radius: .8rem; overflow: hidden;
  box-shadow: var(--ring);
}
/* The <video> is only the SOURCE: the page draws every frame itself on
   #vision-view, mirrored (Chrome with Vulkan on Linux showed the <video>
   as a white square, 2026-09-29). Kept rendered — opacity, not display —
   so every browser keeps decoding it. */
#vision-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; pointer-events: none;
}
#vision-view { display: block; width: 100%; }
#vision-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.vision-cam-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.vision-live-panel {
  border-radius: .9rem;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background:
    linear-gradient(140deg,
      color-mix(in srgb, var(--xai) 8%, rgba(255, 255, 255, 0.55)),
      rgba(255, 255, 255, 0.2));
  -webkit-backdrop-filter: blur(16px) saturate(175%);
  backdrop-filter: blur(16px) saturate(175%);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--navy) 12%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  padding: 1.2rem 1.4rem 1.3rem; display: flex; flex-direction: column; gap: .7rem;
  min-width: 0;
}
.vision-live-panel h4 {
  margin: .9rem 0 .2rem; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--dim); line-height: 1.3;
}
.vision-live-panel h4:first-child { margin-top: 0; }
#vision-live-verdict { display: flex; flex-direction: column; gap: .2rem; min-height: 3.6rem; }
#vision-live-label { font-family: var(--font-data); font-size: 2rem; font-weight: 700; line-height: 1.15; color: var(--dir, var(--dim)); }
#vision-live-prob { color: var(--dim); font-family: var(--font-data); font-size: .85rem; line-height: 1.4; }
/* One column, always (owner, 2026-09-08: stacked reads cleaner than a grid).
   The bar rows are short enough that even a 14-rule reading stays compact. */
#vision-live-rules { display: grid; gap: .3rem; }
.vision-filter { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .6rem 1rem; }
#vision-live-filter, #vision-result-filter { display: inline-flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
#vision-live-filter .vision-book, #vision-result-filter .vision-book { padding: .32rem .75rem; font-size: .8rem; }
#vision-status { min-height: 1.2rem; color: var(--dim); }

/* ---- gallery ---- */
#vision-gallery {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: .9rem; margin: .6rem 0 1.4rem;
}
.vision-tile {
  padding: 0; margin: 0; border-radius: .8rem; text-align: center;
  display: flex; flex-direction: column; color: var(--ink); font: inherit;
  animation: rise .35s var(--ease-settle) both; animation-delay: calc(var(--i, 0) * 45ms);
}
.vision-tile img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.vision-tile.unavailable { cursor: not-allowed; opacity: .55; filter: saturate(.3); }
.vision-tile.unavailable:hover { transform: none; }

/* ---- result ---- */
#vision-result-context { font-family: var(--font-data); margin: -.4rem 0 .8rem; }
.vision-result-grid {
  display: grid; grid-template-columns: minmax(0, 30rem) 14rem minmax(12rem, 1fr);
  gap: 1.4rem; align-items: start; margin: 1rem 0 1.6rem;
}
.vision-result-grid figure { margin: 0; }
#vision-source { display: block; max-width: 100%; height: auto; border-radius: .8rem; box-shadow: var(--ring); }
#vision-thumb { display: block; width: 100%; max-width: 224px; border-radius: .8rem; box-shadow: var(--ring); }
.vision-result-grid figcaption { margin-top: .4rem; }
#vision-verdict-label {
  font-family: var(--font-data); font-size: 2.2rem; font-weight: 700; line-height: 1.1;
  animation: rise .35s var(--ease-settle) both;
}
#vision-verdict-prob { margin: .3rem 0 0; color: var(--dim); font-family: var(--font-data); font-size: .85rem; }

/* Class hue: teal (xai) = class 1 (male / 20+), plum (xai-alt) = class 0.
   It answers WHICH class; the rule rows below answer whether a rule agrees
   with the reading on screen, in their own green/red. */
.toward-1 { --dir: var(--xai-ink); }
.toward-0 { --dir: var(--xai-alt-ink); }
#vision-verdict-label, #vision-live-label, .vision-feed-item b { color: var(--dir, var(--ink)); }

/* A rule's vote (owner, 2026-09-08): green backs the verdict shown, red pulls
   the other way, and --wt (0..1, |weight| over the book's heaviest rule, set
   by vision.js) drives both the bar and the shade — the heavier the rule,
   the louder the row. */
.votes-with { --vote: var(--xai-yes); }
.votes-against { --vote: var(--xai-no); }

#vision-legend { display: flex; gap: .6rem; flex-wrap: wrap; margin: .3rem 0 .8rem; }
.vision-legend-note { font-size: .8rem; color: var(--dim); }

#vision-rules { display: grid; gap: .3rem; max-width: 58rem; }
/* The heading over each block of rows, in the block's own vote colour. */
.vision-rule-group {
  font-size: .78rem; letter-spacing: .06em; text-transform: uppercase;
  font-weight: 700; color: var(--vote); margin: .9rem 0 .15rem;
}
.vision-rule-group:first-child { margin-top: 0; }
/* One rule = one row: number, bar, words. The bar column is a fixed track so
   every bar shares a baseline AND a scale — that alignment is what makes the
   list read as a histogram (owner, 2026-09-08). */
.vision-rule {
  display: grid; grid-template-columns: 3.2rem 9rem 1fr; gap: .8rem;
  align-items: baseline; padding: .4rem .7rem; border-radius: .35rem;
  /* Colour rides --wt as well as the bar — magnitude is said more than once
     on purpose. The wash stays light: the row's own text must clear AA
     against it at every step of the ramp. */
  background: color-mix(in srgb, var(--vote) calc(3% + var(--wt, 0) * 9%), var(--panel));
  border-left: 4px solid color-mix(in srgb, var(--vote) calc(25% + var(--wt, 0) * 75%), var(--panel-2));
  border-left-width: calc(3px + var(--wt, 0) * 5px);
  animation: rise .3s var(--ease-settle) both; animation-delay: calc(var(--i, 0) * 40ms);
}
.vision-rule.compact {
  grid-template-columns: 2.9rem 5.5rem 1fr; gap: .6rem;
  padding: .35rem .55rem; animation: none;
  background: color-mix(in srgb, var(--vote) calc(5% + var(--wt, 0) * 13%), var(--panel-2));
}
/* The bar: a visible track so a short bar reads as a small share of the
   book's heaviest rule, not as a stray dash. One direction only — the block
   heading already says which side these rules are on. */
.vision-weightbar {
  position: relative; height: .5rem; border-radius: 3px;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  /* Sits on the FIRST line of the words, not centred in the row: a rule with
     three condition lines would otherwise float its bar halfway down. */
  align-self: start; margin-top: .45rem;
}
.vision-weightbar i {
  position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px;
  background: var(--vote); width: calc(var(--wt, 0) * 100%); min-width: 3px;
}
/* Darkened toward ink: the vote hue alone falls just under AA on the
   deepest wash of the live panel. Weight rides --wt too (owner, 2026-09-08)
   — a system stack has no variable axis, so it snaps to the faces the font
   ships; it supports the colour, it does not replace it. */
.vision-weight {
  font-family: var(--font-data); font-size: .85rem; font-variant-numeric: tabular-nums;
  text-align: right; white-space: nowrap;
  font-weight: calc(450 + var(--wt, 0) * 250);
  color: color-mix(in srgb, var(--vote) 85%, var(--ink));
}
.vision-conds { color: var(--ink); min-width: 0; }
.vision-cond { margin: .15rem 0; font-size: .95rem; font-weight: calc(400 + var(--wt, 0) * 300); }
.vision-rule.compact .vision-cond { font-size: .92rem; line-height: 1.4; margin: .15rem 0; }
.vision-or { color: var(--faint); font-weight: 400; font-style: italic; margin-right: .4rem; }
/* The alternatives of a fired rule that did not hold: one muted line under
   the held part, off the --wt weight ramp so it never competes with the row. */
.vision-cond.vision-others { font-size: .8rem; font-weight: 400; color: var(--dim); margin-top: .05rem; }
.vision-rule.compact .vision-cond.vision-others { font-size: .76rem; }
.vision-others-lead, .vision-others-more { font-style: italic; color: var(--dim); margin-right: .4rem; }
.vision-others-more { margin-left: .4rem; margin-right: 0; }
/* Inside a line that mixes true and false literals — the "also fires on"
   line and the What if? rows — a literal the face/row HAS takes the ROW's
   colour (the same mix as its rank/weight label: green with the verdict,
   red against, faint on a quiet editor row), one it lacks keeps the line's
   gray (owner, 2026-09-16). Its WEIGHT is the held part's, never more:
   under a fired row it rides the row's --wt ramp exactly like the words
   above it (owner's third pass: a fixed 600 read heavier than the held
   part of a light rule), in an editor row it is the held line's 600. The
   held part of a fired row is all-true and keeps its --wt ramp untouched. */
.vision-others .vision-lit.holds,
.vision-whatif-rule .vision-cond .vision-lit.holds {
  color: color-mix(in srgb, var(--vote, var(--faint)) 85%, var(--ink));
}
.vision-others .vision-lit.holds { font-weight: calc(400 + var(--wt, 0) * 300); }
.vision-whatif-rule .vision-cond .vision-lit.holds { font-weight: 600; }
#vision-footer {
  font-family: var(--font-data); font-size: .85rem; color: var(--dim);
  border-top: 1px solid var(--line); padding-top: .7rem; margin: 1rem 0 1.6rem; max-width: 58rem;
}

/* Concept gauges: a grid on the result, a compact list in the live panel. */
#vision-concepts {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(5.4rem, 1fr));
  gap: .5rem .6rem; margin: .5rem 0 1.4rem;
}
.vision-gauge { display: flex; flex-direction: column; gap: .2rem; font-size: .7rem; color: var(--dim); }
.vision-gauge-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vision-gauge.active .vision-gauge-name { color: var(--ink); font-weight: 600; }
.vision-bar { position: relative; height: .5rem; background: var(--panel-2); border-radius: 3px; overflow: visible; }
.vision-bar .fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--score, 0) * 100%); background: var(--faint); border-radius: 3px; }
.vision-gauge.active .vision-bar .fill { background: var(--xai); }
.vision-gauge.hesitant .vision-bar .fill { background: var(--warn); }
.vision-bar .cut { position: absolute; top: -.2rem; bottom: -.2rem; width: 2px; left: calc(var(--cut, .5) * 100%); background: var(--ink); opacity: .6; }
.vision-gauge-val { font-family: var(--font-data); font-variant-numeric: tabular-nums; }
.vision-list { display: grid; gap: .5rem; }
.vision-list .vision-gauge { flex-direction: row; align-items: center; gap: .8rem; font-size: .88rem; line-height: 1.3; }
.vision-list .vision-gauge-name { flex: 0 0 11rem; }
.vision-list .vision-bar { flex: 1; min-width: 4rem; height: .55rem; background: var(--panel-2); }
.vision-list .vision-gauge-val { flex: 0 0 2.8rem; text-align: right; }

.vision-result-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; }
#vision-result-rulebook, #vision-result-models, #vision-result-cuesets { margin: 0; }
#vision-compare-btn { margin-left: .6rem; }
/* Compare (2026-09-10): two columns, one per cue set, on the glass recipe of
   the explanation card; the agree/disagree line is the block's verdict. */
.vision-compare { margin: 1rem 0 1.4rem; max-width: none; padding-bottom: 1.05rem; }
.vision-compare h3 { margin: 0 0 .3rem; }
#vision-compare-verdict { font-weight: 600; margin: 0 0 .9rem; }
#vision-compare-verdict.disagree { color: var(--xai-ink); }
.vision-compare-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; align-items: start; }
.vision-compare-col { background: var(--panel-2); border-radius: .8rem; padding: 1rem 1.1rem; min-width: 0; }
.vision-compare-col h4 { margin: 0 0 .5rem; font-size: .85rem; color: var(--dim); font-family: var(--font-data); }
.vision-compare-reading { display: flex; align-items: baseline; flex-wrap: wrap; gap: .3rem .8rem; margin: 0 0 .7rem; }
.vision-compare-label { font-family: var(--font-data); font-size: 1.6rem; font-weight: 700; line-height: 1.15; color: var(--dir, var(--dim)); }
.vision-compare-prob { color: var(--dim); font-size: .85rem; }
.vision-compare-rules { display: grid; gap: .3rem; }
.vision-compare-footer { margin: .6rem 0 0; }
#vision-feed { margin: 1.5rem 0; }
#vision-feed summary { cursor: pointer; font-weight: 600; }
#vision-feed-list { margin: .5rem 0 0; padding-left: 0; list-style: none; font-size: .85rem; }
.vision-feed-item {
  display: flex; align-items: center; gap: .7rem; padding: .3rem .4rem; width: 100%;
  margin: 0; border: 0; border-radius: .4rem; background: transparent; color: var(--ink);
  font: inherit; text-align: left; cursor: pointer; border-bottom: 1px solid var(--line);
}
.vision-feed-item:hover { background: var(--panel-2); }
.vision-feed-item.on { background: var(--xai-dim); }
#vision-result-models button:disabled, #vision-result-cuesets button:disabled, #vision-result-rulebook button:disabled { opacity: .45; cursor: default; }
.vision-feed-thumb { width: 2.4rem; height: 2.4rem; object-fit: cover; border-radius: .4rem; }
.vision-feed-meta { color: var(--dim); margin-left: .6rem; font-family: var(--font-data); font-size: .76rem; }

@media (max-width: 66rem) {
  .vision-live { grid-template-columns: 1fr; }
}
@media (max-width: 52rem) {
  .vision-how { grid-template-columns: 1fr; }
  .vision-compare-grid { grid-template-columns: 1fr; }
  .vision-list .vision-gauge-name { flex-basis: 8rem; }
}
@media (max-width: 46rem) {
  .vision-result-grid { grid-template-columns: 1fr; }
}
/* Too narrow for three tracks: number and bar hold the first line, the words
   drop below rather than squeezing into a two-word column. */
@media (max-width: 34rem) {
  .vision-rule, .vision-rule.compact { grid-template-columns: 3.2rem 1fr; row-gap: .2rem; }
  .vision-conds { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .vision-tile, .vision-rule, .vision-model, .vision-how-step, #vision-verdict-label,
  .vision-drift-row { animation: none; }
}

/* Notes/hints on the Interpretable AI page read darker so they stay legible
   over the pale gradient background (owner, 2026-09-08). */
#vision .caption, #vision-result .caption, #vision .vision-or { color: var(--ink); }

/* ---- What if? (owner, 2026-09-09) ----------------------------------------
   The panel under a result where the visitor edits the book by hand: the
   inputs (concept flags, rule weights) on the left, the reading the rules
   alone give on the right — sticky, so it stays in view while the 39 + 26
   rows scroll. The reading above the panel is never touched. */
.vision-whatif {
  border-radius: .9rem;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background:
    linear-gradient(140deg,
      color-mix(in srgb, var(--xai) 8%, rgba(255, 255, 255, 0.55)),
      rgba(255, 255, 255, 0.2));
  -webkit-backdrop-filter: blur(16px) saturate(175%);
  backdrop-filter: blur(16px) saturate(175%);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--navy) 12%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  padding: .9rem 1.25rem 1rem; margin: 1rem 0 1.4rem;
}
.vision-whatif > summary { cursor: pointer; font-weight: 700; color: var(--xai-ink); font-size: 1.05rem; }
.vision-whatif > .caption { margin: .5rem 0 .8rem; max-width: 58rem; line-height: 1.5; }
.vision-whatif h4 {
  margin: 1rem 0 .2rem; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--dim); line-height: 1.3;
}
.vision-whatif h4:first-child { margin-top: 0; }
.vision-whatif-bar { display: flex; align-items: center; gap: .8rem; margin: 0 0 .6rem; }
#vision-whatif-changes { font-family: var(--font-data); font-size: .85rem; color: var(--dim); }
#vision-whatif-changes.some { color: var(--xai-ink); font-weight: 700; }
#vision-whatif-reset, #vision-whatif-apply { padding: .32rem .75rem; font-size: .8rem; }
#vision-whatif-reset:disabled { opacity: .45; cursor: default; }
#vision-whatif-apply { background: var(--action); color: var(--btn-ink); border-color: var(--action); margin-top: .5rem; }
.vision-whatif-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(20rem, 26rem);
  gap: 1.4rem; align-items: start;
}
.vision-whatif-out {
  position: sticky; top: 5.5rem; background: var(--panel-2); border-radius: .8rem;
  padding: 1rem 1.1rem 1.1rem; min-width: 0;
}
#vision-whatif-verdict { display: flex; flex-direction: column; gap: .15rem; min-height: 3.4rem; }
#vision-whatif-label { font-family: var(--font-data); font-size: 2rem; font-weight: 700; line-height: 1.15; color: var(--dir, var(--dim)); }
#vision-whatif-prob { color: var(--dim); font-family: var(--font-data); font-size: .85rem; line-height: 1.4; }
#vision-whatif-compare { font-weight: 600; margin: .3rem 0 0; }
#vision-whatif-compare.flipped { color: var(--xai-ink); }
#vision-whatif-footer {
  font-family: var(--font-data); font-size: .8rem; color: var(--dim);
  border-top: 1px solid var(--line); padding-top: .5rem; margin: .6rem 0 .2rem;
}
/* ONE column of rule rows, like the other hosts (owner, 2026-09-08). */
#vision-whatif-rules { display: grid; gap: .3rem; }
#vision-whatif-cf { margin: .2rem 0 0; line-height: 1.45; }

/* Concept rows: name, the three-state flag, the flip impact. */
#vision-whatif-concepts { display: grid; gap: .25rem; }
.vision-whatif-concept {
  display: grid; grid-template-columns: 11rem auto minmax(0, 1fr); gap: .8rem; align-items: center;
  padding: .25rem .5rem; border-radius: .35rem; font-size: .88rem;
}
.vision-whatif-concept.overridden { background: var(--xai-dim); }
.vision-whatif-concept.seen .vision-whatif-name { color: var(--ink); font-weight: 600; }
.vision-whatif-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--dim); }
.vision-whatif-states { display: inline-flex; gap: .3rem; }
.vision-whatif-states .vision-book { padding: .22rem .55rem; font-size: .74rem; }
.vision-whatif-flip { font-family: var(--font-data); font-size: .78rem; color: var(--dim); }
.vision-whatif-flip.flips { color: var(--dir, var(--ink)); font-weight: 700; }

/* Rule rows: number, words, slider, number box, mute. The wash and the edge
   ride --vote / --wt exactly like .vision-rule, so an edited weight is seen
   in the row itself before the reading on the right moves. */
#vision-whatif-weights { display: grid; gap: .3rem; }
.vision-whatif-rule {
  display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) 9rem 5.2rem auto;
  gap: .8rem; align-items: center; padding: .4rem .7rem; border-radius: .35rem;
  background: color-mix(in srgb, var(--vote, var(--faint)) calc(3% + var(--wt, 0) * 9%), var(--panel));
  border-left: 4px solid color-mix(in srgb, var(--vote, var(--faint)) calc(25% + var(--wt, 0) * 75%), var(--panel-2));
  border-left-width: calc(3px + var(--wt, 0) * 5px);
}
.vision-whatif-rule.quiet { --vote: var(--faint); opacity: .72; }
.vision-whatif-rule.muted .vision-conds { text-decoration: line-through; color: var(--faint); }
.vision-whatif-rule.edited { outline: 1px dashed var(--xai); outline-offset: 1px; }
.vision-whatif-rule .vision-cond { font-weight: 400; color: var(--dim); font-size: .88rem; }
.vision-whatif-rule .vision-cond.holds { color: var(--ink); font-weight: 600; }
.vision-whatif-rule .vision-weight { font-weight: 600; }
.vision-whatif-rule .vision-mute { padding: .22rem .55rem; font-size: .74rem; }
.vision-whatif-rule input[type="number"] {
  width: 5.2rem; margin: 0; padding: .25rem .4rem; font-family: var(--font-data);
  font-variant-numeric: tabular-nums; text-align: right; font-size: .85rem;
  border: 1px solid var(--edge); border-radius: .35rem; background: var(--panel); color: var(--ink);
}
/* The slider, in the section's own hue (--p = the travelled share, set by
   vision.js on every input). */
.vision-whatif input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 1.2rem;
  background: transparent; border: 0; padding: 0; margin: 0; cursor: pointer;
}
.vision-whatif input[type="range"]::-webkit-slider-runnable-track {
  height: 5px; border-radius: 3px;
  background: linear-gradient(to right, var(--xai) 0 var(--p, 50%), var(--line) var(--p, 50%) 100%);
}
.vision-whatif input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 14px; height: 14px; border-radius: 50%;
  margin-top: -4.5px; background: var(--panel); border: 2px solid var(--xai);
}
.vision-whatif input[type="range"]::-moz-range-track { height: 5px; border-radius: 3px; background: var(--line); }
.vision-whatif input[type="range"]::-moz-range-progress { height: 5px; border-radius: 3px; background: var(--xai); }
.vision-whatif input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%; background: var(--panel); border: 2px solid var(--xai);
}
.vision-whatif input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--xai) 35%, transparent);
}
.vision-whatif input[type="range"]:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--xai) 35%, transparent);
}

/* Marks elsewhere: a forced concept in the gauges, the note in the live view. */
.vision-gauge.overridden .vision-gauge-name { outline: 1px dashed var(--xai); outline-offset: 2px; border-radius: 3px; }
#vision-live-whatif { color: var(--xai-ink); font-family: var(--font-data); font-size: .8rem; font-weight: 600; }

@media (max-width: 66rem) {
  .vision-whatif-grid { grid-template-columns: 1fr; }
  .vision-whatif-out { position: static; }
}
@media (max-width: 46rem) {
  .vision-whatif-rule { grid-template-columns: 3.2rem minmax(0, 1fr); row-gap: .3rem; }
  .vision-whatif-rule .vision-conds { grid-column: 1 / -1; }
  .vision-whatif-rule input[type="range"] { grid-column: 1 / 2; }
  .vision-whatif-concept { grid-template-columns: 1fr; gap: .3rem; }
}

/* The same editor under the camera (owner, 2026-09-09): no reading of its
   own — the live panel above is the output — so the inputs sit side by
   side, concepts left, rules right. */
#vision-live-editor { margin: 1rem 0 0; }
.vision-whatif-grid.editor { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
.editor .vision-whatif-concept { grid-template-columns: 9rem auto minmax(0, 1fr); }
#vision-live-editor-concepts, #vision-live-editor-weights { display: grid; gap: .25rem; }
#vision-live-baseline { color: var(--dim); font-family: var(--font-data); font-size: .8rem; }

/* The row's buttons: Mute, and Restore (the book's own weight back), the
   latter shown only once the row is edited. */
.vision-whatif-actions { display: inline-flex; gap: .3rem; }
.vision-whatif-rule .vision-restore { padding: .22rem .55rem; font-size: .74rem; }

/* ---- The feedback and monitoring loop (2026-09-14) -----------------------
   On the chooser page: the story (a second three-card strip on the
   "How it works" recipe, then "Why it matters" on the explanation card's
   glass). Under a result: one glass panel, three columns — the drift
   strip, the corrections, the two editions — on the panel-2 wash, each
   reusing the page's bars, chips and pills in the section's own hue. */
#vision-loop-how-title { margin-top: 1.6rem; }
/* Five maintenance cards (2026-09-14, the training repo's maintenance brief):
   one row wide, 2+2+1 on a laptop, one column on a phone — the id outranks
   .vision-how's three tracks, so each breakpoint restates the width. */
#vision-loop-how { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 66rem) {
  #vision-loop-how { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 52rem) {
  #vision-loop-how { grid-template-columns: 1fr; }
}
#vision-loop-why h4 {
  margin: 0 0 .5rem; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--dim); line-height: 1.3;
}
#vision-loop-how-note { max-width: 58rem; line-height: 1.5; margin: -.6rem 0 1.4rem; }
.vision-loop { max-width: none; margin: 1rem 0 1.4rem; padding-bottom: 1rem; }
.vision-loop h3 { margin: 0 0 .3rem; }
.vision-loop h4 {
  margin: 0 0 .2rem; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--dim); line-height: 1.3;
}
.vision-loop > .caption { margin: 0 0 1rem; max-width: 58rem; line-height: 1.5; }
.vision-loop-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; align-items: start; }
.vision-loop-grid > div { background: var(--panel-2); border-radius: .8rem; padding: 1rem 1.1rem; min-width: 0; }
.vision-loop-grid .caption { margin: .2rem 0 .7rem; line-height: 1.45; font-size: .85rem; }
/* The drift strip: two bars per concept, the session's in the section hue
   over the training rate in grey; words only on the rows the service
   marked notable. */
#vision-drift-summary { font-weight: 600; margin: 0 0 .5rem; }
#vision-drift-summary.some { color: var(--xai-ink); }
#vision-drift-toggle { padding: .32rem .75rem; font-size: .8rem; margin: 0 0 .6rem; }
#vision-drift-legend { display: flex; gap: 1rem; margin: 0 0 .5rem; font-size: .78rem; color: var(--dim); }
.vision-drift-key { display: inline-flex; align-items: center; gap: .35rem; }
.vision-drift-key i { display: inline-block; width: .9rem; height: .5rem; border-radius: 3px; background: var(--faint); }
.vision-drift-key.session i { background: var(--xai); }
#vision-drift-rows { display: grid; gap: .3rem; }
.vision-drift-row {
  display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: .3rem .6rem; align-items: center;
  padding: .25rem .4rem; border-radius: .35rem; font-size: .8rem; color: var(--dim);
  animation: rise .3s var(--ease-settle) both; animation-delay: calc(var(--i, 0) * 25ms);
}
.vision-drift-row.notable { background: var(--xai-dim); color: var(--ink); }
.vision-drift-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vision-drift-bars { display: grid; gap: .15rem; }
.vision-drift-bars .vision-bar { height: .4rem; }
.vision-drift-bars .session .fill { background: var(--xai); }
.vision-drift-bars .train .fill { background: var(--faint); }
.vision-drift-bars .none .fill { width: 0; }
.vision-drift-words { grid-column: 1 / -1; font-size: .78rem; color: var(--xai-ink); font-weight: 600; line-height: 1.35; }
#vision-drift-empty { margin: .5rem 0 0; }
/* Corrections: the count in the section hue once there is one, then the
   list in words, newest first. */
#vision-corrections-count { font-family: var(--font-data); font-size: .85rem; color: var(--dim); margin: 0 0 .2rem; }
#vision-corrections-count.some { color: var(--xai-ink); font-weight: 700; }
#vision-corrections-note, #vision-corrections-limit { margin: 0 0 .5rem; }
#vision-corrections-list { list-style: none; padding: 0; margin: 0; font-size: .85rem; display: grid; gap: .3rem; }
.vision-correction { display: flex; flex-direction: column; gap: .1rem; padding: .3rem 0; border-bottom: 1px solid var(--line); }
.vision-correction .vision-feed-meta { margin-left: 0; }
#vision-corrections-confirmed { margin: 0 0 .3rem; }
/* The maintenance sheet: the lead button and its done line, the hidden
   sheet (rows on the gauge recipe: name, value, one-word toggle), the two
   exits. A marked row strikes its name in the "against" red. */
.vision-maintain-lead { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin: 0 0 1rem; }
#vision-maintain-done { margin: 0; font-size: .85rem; color: var(--xai-ink); font-weight: 600; }
.vision-maintain { background: var(--panel-2); border-radius: .8rem; padding: 1rem 1.1rem; margin: 0 0 1.2rem; }
.vision-maintain h5 {
  margin: .8rem 0 .3rem; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--dim);
}
#vision-maintain-seen, #vision-maintain-unseen {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .3rem .8rem;
}
.vision-maintain-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .5rem; align-items: center;
  padding: .25rem .4rem; border-radius: .35rem; font-size: .85rem; color: var(--dim);
}
.vision-maintain-row.active, .vision-maintain-row.verdict { color: var(--ink); }
.vision-maintain-row.verdict { font-size: 1rem; margin-bottom: .4rem; }
.vision-maintain-row.verdict b { color: var(--dir, var(--ink)); font-family: var(--font-data); }
.vision-maintain-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vision-wrong { padding: .18rem .55rem; font-size: .74rem; }
.vision-wrong.on { background: var(--xai-no); border-color: var(--xai-no); color: var(--btn-ink); }
.vision-maintain-row:has(.vision-wrong.on) .vision-maintain-name { text-decoration: line-through; color: var(--xai-no); }
.vision-maintain-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin-top: 1rem; }
#vision-maintain-pending { margin: 0; }
#vision-maintain-open:disabled, #vision-maintain-submit:disabled, #vision-maintain-confirm:disabled { opacity: .45; cursor: default; }
@media (max-width: 66rem) {
  .vision-loop-grid { grid-template-columns: 1fr; }
}