/* Remocelie — feuille de style.
   Refonte visuelle. Les noms de classe sont inchangés : aucune modification de
   app.js, campaign-view.js, terms.js ni verse-view.js n'est nécessaire. Seuls
   index.html et trois fonctions de matrix-view.js bougent.

   Aucune police extérieure, comme dans la version précédente : la page doit
   s'afficher telle quelle depuis un simple serveur de fichiers. La direction
   typographique repose donc sur une pile de serif déjà présentes sur le poste.
   Si vous acceptez d'héberger un woff2, « Newsreader » est la police visée. */

:root {
  --paper: #F7F4EF;
  --panel: #FDFBF8;
  --plate: #EFEAE2;
  --ink: #241C18;
  --ink-soft: #6B5D55;
  --ink-faint: #9A8C82;
  --rule: #E2DACF;
  --rule-soft: #EDE7DE;
  --accent: #8A2B22;
  --accent-bg: #F3E0DC;
  --accent-line: #DEBFB9;
  --warn: #8A5A14;
  --warn-bg: #F3E7D2;

  --sans: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --hebrew: "Noto Serif Hebrew", "Frank Ruhl Libre", "David Libre", "Times New Roman", serif;

  --rail: 300px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1A1614;
    --panel: #221D1A;
    --plate: #171310;
    --ink: #EFE8E1;
    --ink-soft: #B3A69B;
    --ink-faint: #85776C;
    --rule: #38302B;
    --rule-soft: #2C2521;
    --accent: #D9736A;
    --accent-bg: #3A211D;
    --accent-line: #5A302A;
    --warn: #C79A3A;
    --warn-bg: #33291A;
  }
}

* { box-sizing: border-box; }

html, body { height: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
}

a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent-line); }
a:hover { border-bottom-color: var(--accent); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- la coque : barre, rail, scène ------------------------------------ */
/* La page n'est plus un document qu'on parcourt mais un poste de travail :
   la matrice occupe la scène, tout le reste se range autour d'elle. */

.shell {
  height: 100vh;
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr);
}

.masthead {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap;
  min-height: 54px; padding: 8px 16px;
  background: var(--panel); border-bottom: 1px solid var(--rule);
}
.masthead h1 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.tagline {
  margin: 0; font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint);
}
.masthead .spacer { flex: 1; min-width: 8px; }
.state { margin: 0; font-family: var(--mono); font-size: 11px; color: var(--accent); }
.state.error { color: #A33A2E; }
.trials { font-family: var(--mono); font-size: 11px; color: var(--ink-faint); }

.shell-button {
  font: inherit; font-size: 13px;
  padding: 4px 11px;
  background: none; color: var(--accent);
  border: 1px solid var(--rule); border-radius: 2px; cursor: pointer;
}
.shell-button:hover { border-color: var(--accent); }
.shell-button[aria-expanded="true"] { background: var(--accent-bg); border-color: var(--accent-line); }

/* Le texte de méthode : une phrase en barre, le reste sur demande. */
#methodPanel {
  grid-column: 1 / -1;
  padding: 18px 22px 20px;
  background: var(--panel); border-bottom: 1px solid var(--rule);
}
#methodPanel[hidden] { display: none; }
.intro .lede { margin: 0 0 14px; font-size: 16px; max-width: 72ch; }
.intro-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 18px 30px; }
.intro-columns h3 { margin: 0 0 4px; font-size: 14px; font-weight: 600; color: var(--accent); }
.intro-columns p { margin: 0; font-size: 13.5px; color: var(--ink-soft); }

.rail {
  grid-column: 1; min-height: 0;
  display: flex; flex-direction: column; gap: 10px;
  overflow: auto; padding: 10px;
  border-right: 1px solid var(--rule);
}
.stage { grid-column: 2; min-height: 0; overflow: hidden; padding: 10px; }

/* --- panneaux --------------------------------------------------------- */

.panel {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 11px 13px 13px;
}
.panel[hidden] { display: none; }
.panel h2 {
  margin: 0 0 9px;
  font-family: var(--mono); font-size: 9.5px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint);
}
.panel h3 { margin: 0 0 3px; font-size: 14px; font-weight: 600; }
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.panel-head h2 { margin-bottom: 9px; }

.row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 11px; }
.row:last-child { margin-bottom: 0; }
label { font-size: 12.5px; color: var(--ink-soft); }

input[type="search"], input[type="number"], input[type="text"], select, textarea {
  font: inherit; font-size: 14px;
  padding: 5px 8px;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 2px;
}
input[type="search"] { font-size: 15px; }

.controls { display: grid; grid-template-columns: 1fr; gap: 9px; }
.control { display: flex; flex-direction: column; gap: 3px; }
.control label {
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint);
}
.control.checkbox { flex-direction: row; align-items: flex-start; gap: 7px; }
.control.checkbox label {
  font-family: var(--sans); font-size: 12.5px;
  letter-spacing: 0; text-transform: none; color: var(--ink);
}

.note { margin: 7px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); max-width: 62ch; }

/* --- candidats, mots retenus ----------------------------------------- */

.candidates { display: flex; flex-direction: column; gap: 4px; margin-bottom: 11px; }
.candidate {
  display: grid; grid-template-columns: auto 1fr; align-items: baseline;
  gap: 1px 9px; width: 100%; text-align: left; font: inherit;
  padding: 6px 9px;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--rule-soft); border-left: 3px solid var(--accent);
  border-radius: 2px; cursor: pointer;
}
.candidate:hover { border-color: var(--accent); }
.candidate .lemma { font-family: var(--hebrew); font-size: 18px; direction: rtl; unicode-bidi: isolate; }
.candidate .meaning { font-size: 13px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.candidate .id { font-family: var(--mono); font-size: 10px; color: var(--ink-faint); }
.candidate .why { grid-column: 1 / -1; font-size: 11.5px; color: var(--ink-faint); }

.chosen { display: flex; flex-wrap: wrap; gap: 5px; min-height: 2rem; align-items: center; }
.chosen .empty { color: var(--ink-faint); font-size: 13px; }
.chip {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 3px 5px 3px 9px;
  background: var(--accent); border-radius: 2px;
}
.chip .word { font-family: var(--hebrew); font-size: 17px; color: var(--panel); direction: rtl; unicode-bidi: isolate; }
.chip .kind, .chip .sense { font-size: 11.5px; color: var(--accent-bg); }
.chip .sense { max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip button { font: inherit; border: 0; background: none; color: var(--accent-bg); cursor: pointer; padding: 0 3px; }

/* --- chiffres --------------------------------------------------------- */

.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: 10px; }
.figure { display: flex; flex-direction: column; gap: 1px; }
.figure .value { font-family: var(--mono); font-size: 20px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.figure .caption { font-size: 11.5px; line-height: 1.35; color: var(--ink-soft); }
.expectation .value { color: var(--accent); }

button#run {
  margin-top: 11px; width: 100%;
  font: inherit; font-size: 14px;
  padding: 7px 16px;
  background: var(--accent); color: var(--panel);
  border: 0; border-radius: 2px; cursor: pointer;
}
button#run[disabled] { background: var(--rule); color: var(--ink-faint); cursor: not-allowed; }

.status { margin: 0 0 11px; font-family: var(--mono); font-size: 11.5px; }
.status .flag { padding: 1px 5px; border-radius: 2px; background: var(--warn-bg); color: var(--warn); }

.fold, .open-matrix, .matrix-return, .word-isolate, .campaign-stop {
  font: inherit; font-size: 11.5px;
  padding: 2px 8px;
  background: none; color: var(--accent);
  border: 1px solid var(--rule); border-radius: 2px; cursor: pointer;
  white-space: nowrap;
}
.fold:hover, .open-matrix:hover, .matrix-return:hover, .word-isolate:hover { border-color: var(--accent); }

.witnesses { border: 1px solid var(--rule-soft); border-radius: 2px; padding: 9px 10px 10px; margin-bottom: 12px; }

/* --- tableaux --------------------------------------------------------- */

.scroller { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th, td { text-align: left; padding: 4px 9px 4px 0; vertical-align: baseline; }
thead th {
  font-family: var(--mono); font-size: 9px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .1em; color: var(--ink-faint);
  border-bottom: 1px solid var(--rule); padding-bottom: 5px;
}
tbody tr + tr td { border-top: 1px solid var(--rule-soft); }
td.number { font-family: var(--mono); font-variant-numeric: tabular-nums; }
td.original { font-family: var(--hebrew); font-size: 17px; direction: rtl; unicode-bidi: isolate; }
td .aramaic { font-size: 9.5px; color: var(--warn); text-transform: uppercase; letter-spacing: .08em; }

tr.result { cursor: pointer; }
tr.result:hover td { background: var(--rule-soft); }
tr.result.open td { background: var(--accent-bg); }
tr.result-detail > td { padding: 9px 0 14px; }
.detail-verse {
  border: 1px solid var(--rule-soft); border-left: 3px solid var(--accent);
  border-radius: 2px; padding: 9px 10px 10px; background: var(--paper);
}
.detail-verse + .detail-verse { margin-top: 7px; }

/* --- la matrice : la scène -------------------------------------------- */
/* Le panneau ne vit plus dans le fil du document : il EST la scène, et se
   découpe lui-même en trois — la barre de géométrie, la grille, la colonne
   des mots. `display: contents` sur .matrix-body promeut ses enfants dans
   cette grille : matrix-view.js n'a pas à savoir que la mise en page a changé. */

#matrixPanel {
  height: 100%; margin: 0; padding: 0;
  background: none; border: 0; border-radius: 0;
  display: flex; flex-direction: column; min-height: 0;
}
#matrixPanel > h2, #matrixPanel > #matrixTitle, #matrixPanel > .note { display: none; }
#matrix {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(17rem, 21rem);
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 10px;
}

.matrix-head {
  grid-column: 1 / -1; grid-row: 1;
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 9px 16px;
  margin: 0; padding: 8px 12px;
  background: var(--panel); border: 1px solid var(--rule); border-radius: 3px;
}
.matrix-head .control { min-width: 9rem; }
.matrix-calibration {
  margin: 0; flex: 1 1 20rem;
  font-family: var(--mono); font-size: 11px; color: var(--ink-soft);
}

.matrix-body { display: contents; }

.grid-side {
  grid-column: 1; grid-row: 2 / span 2;
  display: flex; flex-direction: column; gap: 8px; min-height: 0; min-width: 0;
}
.matrix-probe { grid-column: 2; grid-row: 2; margin: 0; }
.matrix-words { grid-column: 2; grid-row: 3; min-height: 0; overflow: auto; }

/* La grille tient la place. Elle ne partage plus sa colonne avec le verset,
   qui est passé en fenêtre flottante, ni avec la question ciblée. */
.grid-frame {
  flex: 1; min-height: 0;
  overflow: auto; padding: 16px;
  background: var(--plate); border: 1px solid var(--rule); border-radius: 3px;
  display: flex; align-items: flex-start;
}
/* Centrer par le conteneur (justify-content) rendrait le bord de départ
   inatteignable dès que la grille déborde : c'est la marge auto qui centre. */
.grid {
  display: grid; gap: 1px; margin: auto;
  grid-template-columns: repeat(var(--columns), var(--cell, 2.4rem));
  width: max-content;
}
.grid .cell {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: var(--cell, 2.4rem); height: calc(var(--cell, 2.4rem) * 1.18);
  font-family: var(--hebrew); font-size: calc(var(--cell, 2.4rem) * .7); line-height: 1;
  color: #8A7D73;
  border-radius: 2px;
}
.grid .cell.anchor { background: var(--accent); color: var(--panel); font-weight: 700; }
.grid .cell.hit { background: var(--accent-bg); color: var(--accent); font-weight: 700; }
.grid .cell.anchor.hit { background: var(--warn); color: var(--panel); }
.grid .cell:hover { outline: 2px solid var(--accent); }
.grid .cell.pinned { outline: 2px solid var(--ink); }

/* Les règles de lignes et de colonnes, si vous appliquez le correctif 4. */
.grid .ruler {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 10px; color: #B3A69B;
}
.grid .ruler.anchor-line { color: var(--accent); }

/* --- le verset : fenêtre flottante, et non plus panneau latéral -------- */
/* C'est le changement d'ergonomie le plus net : la lettre survolée donne son
   verset là où se trouve le regard, avec le mot à mot que produit déjà
   verse-view.js — l'interlinéaire reste entier. */

.cell-info {
  position: fixed; z-index: 60;
  width: 530px; max-width: calc(100vw - 16px);
  padding: 14px 16px 15px;
  background: var(--panel);
  border: 1px solid var(--rule); border-radius: 4px;
  box-shadow: 0 14px 38px rgba(36, 28, 24, .16);
  pointer-events: none;
  max-height: 60vh; overflow: auto;
}
.cell-info:not(.shown) { display: none; }
.cell-info.pinned { pointer-events: auto; border-color: var(--accent-line); }
.cell-info .note { margin: 0; }

.verse-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.verse-head h4 { margin: 0; font-size: 15.5px; font-weight: 600; }
.verse-source {
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint);
}
.verse-text { margin: 0 0 10px; font-size: 14px; }
.verse-missing { color: var(--warn); font-size: 13px; }

.verse-scroller { overflow-x: auto; padding-top: 9px; border-top: 1px solid var(--rule-soft); }
.verse-words { border-collapse: separate; border-spacing: 3px 0; font-size: 12px; width: max-content; }
.verse-words td {
  min-width: 54px; max-width: 118px;
  padding: 5px 7px;
  background: var(--paper);
  border: 1px solid var(--rule-soft); border-radius: 2px;
  text-align: center; vertical-align: middle; white-space: nowrap;
}
.verse-original { font-family: var(--hebrew); font-size: 19px; line-height: 1.25; }
.verse-original b { color: var(--accent); font-weight: 700; }
.verse-strong { font-family: var(--mono); font-size: 9px; color: var(--ink-faint); }
.verse-sense { color: var(--ink-soft); font-size: 11.5px; white-space: normal; text-wrap: pretty; }
td.used { background: var(--accent-bg); border-color: var(--accent-line); }
td.verse-original.used { font-weight: 600; }

/* --- légende ---------------------------------------------------------- */

.matrix-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 9px; }
.matrix-legend:empty { display: none; }
.legend-note { font-size: 12.5px; color: var(--ink-soft); }
.legend-item { display: inline-flex; align-items: baseline; gap: 5px; }
.legend-meaning { font-size: 12.5px; color: var(--ink-soft); }
.legend-word {
  font-family: var(--hebrew); font-size: 17px; line-height: 1;
  direction: rtl; unicode-bidi: isolate;
  padding: 2px 7px; border-radius: 2px; color: var(--panel);
}
.legend-shape { position: relative; display: inline-block; width: .85rem; height: .85rem; }
.legend-shape::before { content: ''; position: absolute; inset: 0; z-index: 0; }

/* --- balayage, mots trouvés ------------------------------------------- */

.matrix-words h3 { margin: 0 0 3px; font-size: 14px; }
.scan-count { margin: 3px 0 0; font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint); }

.matrix-word {
  display: grid; grid-template-columns: 1fr auto; gap: 5px;
  margin-top: 9px; padding: 0; background: none; border: 0;
}
.word-select {
  display: grid; gap: 1px;
  text-align: left; font: inherit;
  padding: 7px 9px;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--rule-soft); border-left: 3px solid var(--warn);
  border-radius: 2px; cursor: pointer;
}
.word-select:hover { border-color: var(--warn); }
.word-select .word { font-family: var(--hebrew); font-size: 18px; direction: rtl; unicode-bidi: isolate; }
.word-select .meaning { font-size: 13px; color: var(--ink-soft); }
.word-select .where { font-family: var(--mono); font-size: 10px; color: var(--ink-faint); }

/* --- question ciblée -------------------------------------------------- */

.matrix-probe {
  background: var(--panel);
  border: 1px solid var(--rule); border-left: 3px solid var(--accent);
  border-radius: 3px; padding: 11px 13px 13px;
}
.probe-form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.probe-form label {
  flex: 0 0 100%;
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint);
}
.probe-query { flex: 1 1 10rem; min-width: 0; }
.probe-form button, .probe-run-list, .probe-run-chosen, .campaign-propose {
  font: inherit; font-size: 13px;
  padding: 5px 12px;
  background: var(--accent); color: var(--panel);
  border: 0; border-radius: 2px; cursor: pointer;
}
.probe-form + .note { margin-top: 6px; }

.probe-candidates { display: flex; flex-direction: column; gap: 4px; }
.probe-candidates:empty { display: none; }
.probe-candidate, .probe-row {
  display: grid; grid-template-columns: auto 1fr; align-items: baseline;
  gap: 1px 9px; width: 100%; text-align: left; font: inherit;
  margin-top: 6px; padding: 5px 9px;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--rule-soft); border-radius: 2px;
}
.probe-candidate { cursor: pointer; }
.probe-candidate:hover { border-color: var(--accent); }
.probe-candidate .word, .probe-row .word { font-family: var(--hebrew); font-size: 17px; direction: rtl; unicode-bidi: isolate; }
.probe-candidate .meaning, .probe-row .meaning { font-size: 12.5px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.probe-candidate .why, .probe-row .said { grid-column: 1 / -1; font-family: var(--mono); font-size: 10px; color: var(--ink-faint); }
.probe-row.present { border-left: 3px solid var(--accent); cursor: pointer; }
.probe-row.absent { border-left: 3px solid var(--rule); color: var(--ink-soft); }

.probe-answer:empty { display: none; }
.probe-verdict { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 9px; margin: 11px 0 0; }
.probe-word {
  font-family: var(--hebrew); font-size: 18px; line-height: 1;
  direction: rtl; unicode-bidi: isolate;
  padding: 2px 8px; border-radius: 2px;
}
.probe-word.present { background: var(--accent); color: var(--panel); }
.probe-word.absent { background: var(--rule-soft); color: var(--ink-soft); }
.probe-meaning { font-size: 13.5px; color: var(--ink); }
.probe-said, .probe-summary { font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint); }
.probe-summary { font-size: 11.5px; color: var(--ink-soft); margin: 11px 0 0; }
.probe-hit {
  display: block; width: 100%; text-align: left;
  font: inherit; font-family: var(--mono); font-size: 10.5px;
  margin-top: 4px; padding: 4px 8px;
  background: var(--paper); color: var(--ink-soft);
  border: 1px solid var(--rule-soft); border-radius: 2px; cursor: pointer;
}
.probe-hit:hover { border-color: var(--accent); color: var(--ink); }

.probe-list { margin-top: 12px; border-top: 1px solid var(--rule-soft); padding-top: 9px; }
.probe-list summary, .campaign-entry summary { font-size: 12.5px; color: var(--accent); cursor: pointer; }
.probe-lines, .campaign-lines {
  display: block; width: 100%; margin-top: 7px;
  font-size: 13px; resize: vertical;
}

.probe-proposals:empty, .campaign-proposals:empty { display: none; }
.proposal { display: grid; grid-template-columns: minmax(5rem, 10rem) 1fr; gap: 6px; align-items: center; margin-top: 5px; }
.proposal-asked { font-size: 13px; color: var(--ink-soft); }
.proposal-choice { font-size: 13px; padding: 3px 5px; }
.proposal-choice:disabled { color: var(--ink-soft); background: var(--panel); }

/* --- campagne --------------------------------------------------------- */

.campaign-entry { margin-top: 12px; border-top: 1px solid var(--rule-soft); padding-top: 9px; }
.campaign-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 11px; margin-top: 7px; }
.campaign-file { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-soft); }
.campaign-file input { font-size: 11.5px; }
.campaign-stop { color: var(--warn); border-color: var(--warn); margin: 5px 0 12px; }
.campaign-stop[disabled] { opacity: .7; cursor: default; }
.campaign-mode { margin: 0 0 7px; font-family: var(--mono); font-size: 11px; color: var(--ink-soft); }
.campaign-figures { margin: 0; font-family: var(--mono); font-size: 11.5px; }
.campaign-verdict { margin: 7px 0 0; font-size: 13.5px; max-width: 72ch; }
.campaign-table td { vertical-align: middle; }
.campaign-word { display: block; font-family: var(--hebrew); font-size: 17px; direction: rtl; unicode-bidi: isolate; text-align: left; }
.campaign-meaning { display: block; font-size: 11.5px; color: var(--ink-soft); max-width: 20rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.campaign-table tr.beats td:nth-child(5) { color: var(--accent); font-weight: 600; }
.campaign-table tr.large td:nth-child(6) { color: var(--ink-faint); }
.campaign-table tr.stopped td { color: var(--warn); }

/* --- ancrages multiples et mots cherchés ------------------------------ */
/* Même principe qu'avant : famille chaude contre famille froide, et une forme
   derrière la couleur pour qui distingue mal les teintes. */

:root {
  --anchor-0: #8A2B22;
  --anchor-1: #6B3F7A;
  --anchor-2: #3F5F2A;
  --anchor-3: #1F4F8C;
  --find-0: #1F4F8C;
  --find-1: #8A5A14;
  --find-2: #7A2D5F;
  --find-3: #2A6A5A;
}
@media (prefers-color-scheme: dark) {
  :root {
    --anchor-0: #D9736A;
    --anchor-1: #A67CB8;
    --anchor-2: #86A868;
    --anchor-3: #6F9CD4;
    --find-0: #6F9CD4;
    --find-1: #C79A3A;
    --find-2: #C97BA8;
    --find-3: #58A899;
  }
}

.grid .cell.anchor-0, .legend-word.anchor-0 { background: var(--anchor-0); }
.grid .cell.anchor-1, .legend-word.anchor-1 { background: var(--anchor-1); }
.grid .cell.anchor-2, .legend-word.anchor-2 { background: var(--anchor-2); }
.grid .cell.anchor-3, .legend-word.anchor-3 { background: var(--anchor-3); }

.grid .cell.find { color: var(--panel); font-weight: 700; }
.grid .cell.find::before, .grid .cell.ring::before { content: ''; position: absolute; z-index: -1; }
.grid .cell.find::before { inset: 0; }
.grid .cell.ring::before { inset: 17%; }
.grid .cell.find-0::before, .legend-shape.find-0::before, .legend-word.find-0 { background: var(--find-0); }
.grid .cell.find-1::before, .legend-shape.find-1::before, .legend-word.find-1 { background: var(--find-1); }
.grid .cell.find-2::before, .legend-shape.find-2::before, .legend-word.find-2 { background: var(--find-2); }
.grid .cell.find-3::before, .legend-shape.find-3::before, .legend-word.find-3 { background: var(--find-3); }

.shape-carre::before { border-radius: 1px; }
.shape-rond::before { border-radius: 50%; }
.shape-losange::before { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.shape-triangle::before { clip-path: polygon(50% 4%, 100% 100%, 0 100%); }

.inline-original { font-family: var(--hebrew); font-size: 17px; unicode-bidi: isolate; }
.inline-sense { margin-inline-start: 6px; unicode-bidi: isolate; }

/* --- poste étroit ----------------------------------------------------- */
/* Le téléphone n'est pas visé. En deçà de 1100 px, la colonne des mots passe
   sous la grille plutôt que de lui manger sa largeur. */

@media (max-width: 1100px) {
  #matrix { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto; }
  .grid-side { grid-column: 1; grid-row: 2; }
  .matrix-probe { grid-column: 1; grid-row: 3; }
  .matrix-words { grid-column: 1; grid-row: 4; overflow: visible; }
}
@media (max-width: 820px) {
  .shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto minmax(0, 1fr); }
  .rail { grid-column: 1; border-right: 0; border-bottom: 1px solid var(--rule); max-height: 40vh; }
  .stage { grid-column: 1; }
}
/* --- la barre d'échelle sous la grille -------------------------------- */
/* Les faits de la grille et le réglage de sa taille au même endroit : sous
   elle, là où le regard revient. Le raisonnement sur le seuil se déplie. */

.grid-scale {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  padding: 8px 12px;
  background: var(--panel); border: 1px solid var(--rule); border-radius: 3px;
}
.grid-scale .matrix-calibration {
  margin: 0; flex: 1 1 18rem;
  font-family: var(--mono); font-size: 11px; color: var(--ink-soft); max-width: none;
}

.scale-steps { display: flex; align-items: center; gap: 1px; }
.scale-steps button {
  font: inherit; font-size: 15px; line-height: 1;
  width: 26px; height: 24px;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--rule); cursor: pointer;
}
.scale-steps button:hover { border-color: var(--accent); color: var(--accent); }
.scale-out { border-radius: 2px 0 0 2px; }
.scale-in { border-radius: 0 2px 2px 0; }
.scale-value {
  min-width: 52px; padding: 0 6px; text-align: center;
  font-family: var(--mono); font-size: 11px; color: var(--ink-faint);
}
/* Une échelle posée à la main se voit : sinon on cherche pourquoi « ajuster »
   ne semble rien faire. */
.scale-value.manual { color: var(--accent); }
.scale-auto {
  width: auto !important; height: 24px;
  margin-left: 7px; padding: 0 9px;
  font-size: 12px !important;
  background: none !important; color: var(--accent) !important;
  border-radius: 2px;
}

.matrix-why { flex: 0 0 auto; }
.matrix-why summary {
  font-size: 12px; color: var(--accent); cursor: pointer;
  padding: 2px 8px; border: 1px solid var(--rule); border-radius: 2px;
  list-style: none;
}
.matrix-why summary::-webkit-details-marker { display: none; }
.matrix-why summary:hover { border-color: var(--accent); }
.matrix-why[open] { flex: 1 1 100%; }
.matrix-why[open] summary { display: inline-block; margin-bottom: 7px; background: var(--accent-bg); border-color: var(--accent-line); }
.matrix-threshold { margin: 0; max-width: 88ch; font-size: 13px; }

/* Le cadre prend le clavier : « + », « − » et « 0 » n'agissent que dedans. */
.grid-frame:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.matrix-head-hint {
  margin: 0; flex: 1 1 14rem;
  font-size: 12.5px; color: var(--ink-soft);
}