/* Façade « l'espace des jetons » (cas d'étude 4, J-space). Palette, typographie et traits viennent de
   common/da.css : cette feuille ne définit aucune couleur qui ne soit une variable de la DA.
   Aucune transition sur ce qui bouge par image : la capture pas à pas doit rendre deux fois la même image. */
html,body { margin:0; height:100%; background:var(--fond); color:var(--texte); font:var(--corps-travail)/1.4 var(--mono); overflow:hidden; }
#g { position:fixed; inset:0; width:100vw; height:100vh; display:block; }
.mono { font-family:var(--mono); }

/* --------------------------------------------------- la grille (le mesuré) */
/* Une case = (position, couche). Le mot qu'on y lit est celui du rang 0 de la lentille : c'est un relevé,
   posé en étiquette flottante — l'esthétique des étiquettes du volume (serif clair, ombre portée pour
   tenir sur le fond), mais ici à une place que le modèle donne (x = position, y = couche). */
#g .ligne { stroke:var(--gris-trait); stroke-width:var(--trait-fin); }
#g .coucheLab { fill:var(--texte-sourd); font:10px var(--mono); letter-spacing:.08em; }
#g .coucheLab.ici { fill:var(--neutre); }
/* couche que le garde-fou n'a pas demandée : dite, pas laissée vide (cf. espace.js, BUDGET_CASES) */
#g .coucheLab.nonLue { fill:var(--texte-sourd); opacity:.5; }
#g .ligne.nonLue { stroke-dasharray:2 6; }
/* le fond d'une case en mode « rang » : une seule teinte, l'intensité vient du rang relevé */
#g .rang { fill:var(--neutre); }
#g .rangHors { fill:var(--texte-sourd); opacity:.14; }
#g .rangN { fill:var(--fond); font:9px var(--mono); text-anchor:middle; }
#g .rangN.pale { fill:var(--texte-clair); }
/* le rang de la cible dans le top-k, et le trait qui marque sa case */
#g .rangCible { fill:var(--neutre); font:9px var(--mono); text-anchor:end; }
#g .souscible { stroke:var(--neutre); stroke-width:var(--trait-fin); }
/* le mot lu : registre « points » (un relevé), écrit — c'est du texte, pas un prop */
#g .mot { fill:var(--texte-clair); font:300 13px var(--serif); letter-spacing:.02em; text-anchor:middle;
          paint-order:stroke; stroke:var(--fond); stroke-width:3px; stroke-linejoin:round; }
#g .mot.cible { fill:var(--neutre); }
#g .mot.suivant { fill:var(--texte-clair); }
/* la rangée de l'amorce, en bas : les jetons donnés, pas lus */
#g .jetonLab { fill:var(--texte-clair); font:300 15px var(--serif); letter-spacing:.03em; text-anchor:middle; }
#g .jetonLab.vise { fill:var(--neutre); }
#g .jetonLab.bos { fill:var(--texte-sourd); }
#g .colonne { fill:var(--texte-clair); opacity:.04; }
#g .cellHit { fill:transparent; cursor:pointer; }
body[data-mode="plateau"] #g .jetonLab, body[data-mode="nu"] #g .jetonLab { font-size:clamp(18px, 1.5vw, 34px); }

/* --------------------------------------------------- panneaux (mode travail) */
input[type=range] { accent-color:var(--neutre); }
input[type=checkbox] { accent-color:var(--neutre); }
#ui { position:fixed; left:0; top:0; bottom:0; width:340px; padding:14px; box-sizing:border-box; background:rgba(7,7,10,.82); overflow-y:auto; border-right:1px solid var(--gris-trait); }
#right { position:fixed; right:0; top:0; bottom:0; width:320px; padding:14px; box-sizing:border-box; background:rgba(7,7,10,.82); overflow-y:auto; border-left:1px solid var(--gris-trait); }
body:not([data-mode="travail"]) #ui, body:not([data-mode="travail"]) #right { display:none; }
#showChrome { position:fixed; left:8px; top:8px; z-index:6; display:none; }
body:not([data-mode="travail"]) #showChrome { display:block; }
body[data-mode="nu"] #showChrome, body.capture #showChrome { display:none; }
h1 { font-size:14px; font-weight:normal; letter-spacing:.2em; margin:0 0 10px; color:var(--texte-sourd); }
h2.sub { font-size:11px; font-weight:normal; letter-spacing:.2em; color:var(--texte-sourd); margin:16px 0 4px; border-top:1px solid var(--gris-trait); padding-top:10px; }
button { background:#15151b; color:var(--texte); border:1px solid var(--gris-trait-clair); padding:6px 10px; font:inherit; cursor:pointer; }
button:hover { border-color:var(--texte-sourd); }
textarea, input[type=number], input[type=text], select { background:#0f0f14; color:var(--texte); border:1px solid var(--gris-trait-clair); font:inherit; padding:3px 6px; }
textarea { width:100%; resize:vertical; line-height:1.5; }
input[type=number] { width:64px; }
input[type=text] { width:120px; }
.row { display:flex; gap:8px; margin:8px 0; align-items:center; flex-wrap:wrap; }
.row input[type=range] { flex:1 1 110px; min-width:90px; }
.small { font-size:11px; color:var(--texte-sourd); }
.w120 { width:104px; flex:none; }
.w60 { width:52px; flex:none; }
.hideBtn { float:right; font-size:10px; padding:2px 6px; }
.note { line-height:1.5; }
#meta { line-height:1.5; }
#meta .err { color:var(--neutre); }
.legend { margin:10px 0; font-size:11px; color:var(--texte-sourd); line-height:1.6; }
.legend .l { display:flex; gap:5px; align-items:baseline; margin:3px 0; }
.legend .lg { flex:none; display:inline-block; width:10px; height:10px; margin-top:2px; background:var(--neutre); }
.legend .lg.pale { opacity:.2; }

/* --------------------------------------------------- faders (injection J-space) */
/* Une ligne par fader : le mot poussé, la couche, l'intensité. Le registre reste celui du mesuré —
   ce qui s'affiche en retour (les mots lus) vient du serveur ; ici on ne règle qu'une consigne. */
#faders .fd { display:flex; gap:5px; align-items:center; margin:5px 0; }
#faders .fd input[type=text] { flex:1 1 70px; min-width:56px; width:auto; }
#faders .fd input[type=number] { width:46px; }
#faders .fd input[type=range] { flex:1 1 70px; min-width:56px; }
#faders .fd .av { width:2.6em; text-align:right; font-size:11px; color:var(--texte-sourd); }
#faders .fd.on .av { color:var(--neutre); }
#faders .fd select { font-size:11px; }
#faders .fd .fmode { flex:0 0 auto; }

/* une case dont le mot du rang 0 a changé sous l'injection : c'est le relevé de l'écart */
#g .mot.change { fill:var(--neutre); }
#g .change_marque { fill:var(--neutre); }

/* --------------------------------------------------- ce que le modèle écrit */
/* Registre du mesuré : c'est une sortie du modèle, pas un commentaire. Le propre en blanc cassé,
   l'injecté en orange neutre — les deux teintes que la DA réserve à « actif » et « allumé ». */
#ecrit { margin:6px 0 2px; }
#ecrit .ec { margin:5px 0; line-height:1.45; }
#ecrit .ec .hk { display:block; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--texte-sourd); }
#ecrit .ec .tx { font:300 14px/1.45 var(--serif); color:var(--texte-clair); white-space:pre-wrap; }
#ecrit .ec.inj .tx { color:var(--neutre); }
#ecrit .err { color:var(--neutre); }

/* --------------------------------------------------- top-k de la case survolée */
#topk { line-height:1.7; }
#topk .lgn { display:flex; gap:.5em; }
#topk .lgn .r { width:1.6em; color:var(--texte-sourd); text-align:right; }
#topk .lgn .t { flex:1; color:var(--texte-clair); font-family:var(--serif); font-weight:300; font-size:13px; }
#topk .lgn .v { color:var(--texte-sourd); }
#topk .lgn.suivant .t { color:var(--texte-clair); text-decoration:underline; text-underline-offset:3px; }
#topk .lgn.cible .t { color:var(--neutre); }
/* deux colonnes quand une injection est posée : le témoin et l'injecté */
#topk .lgn .i { width:1.6em; color:var(--neutre); text-align:right; }
#topk .entete { display:flex; gap:.5em; font-size:10px; color:var(--texte-sourd); letter-spacing:.08em; }
#topk .entete .r, #topk .entete .i { width:1.6em; text-align:right; }
#injEtat { margin-top:6px; line-height:1.5; color:var(--texte-sourd); }
#topk .sp { color:var(--texte-sourd); }

/* --------------------------------------------------- qualité par couche (rang moyen du vrai suivant) */
/* Une ligne par couche, deux barres (une par lentille). La longueur est le rang moyen relevé, jamais
   une valeur choisie : plus la barre est courte, mieux la couche lit le jeton qui vient. */
#qual { font-size:10px; }
#qual .q { display:flex; align-items:center; gap:4px; height:12px; }
#qual .q .l { width:2.2em; color:var(--texte-sourd); text-align:right; }
#qual .q .b { flex:1; height:9px; position:relative; background:rgba(216,216,208,.05); }
#qual .q .b i { position:absolute; left:0; top:0; height:4px; background:var(--neutre); }
#qual .q .b u { position:absolute; left:0; top:5px; height:4px; background:var(--texte-sourd); }
#qual .q.ici .l { color:var(--neutre); }
#qual .q.mieux .b { outline:1px solid var(--gris-trait-clair); }

/* --------------------------------------------------- survol */
#tip { position:fixed; z-index:8; display:none; max-width:320px; padding:6px 8px; background:var(--voile);
       border:1px solid var(--gris-trait-clair); color:var(--texte-clair); font-size:12px; line-height:1.6; pointer-events:none; }
#tip .k { color:var(--texte-sourd); }
#tip .sp { color:var(--texte-sourd); }

/* --------------------------------------------------- frise de la partition (régime p) */
#score { position:fixed; left:340px; right:320px; bottom:0; z-index:5; display:none; flex-direction:column; background:rgba(7,7,10,.94); border-top:1px solid var(--gris-trait); padding:6px 12px 8px; max-height:38vh; overflow:auto; }
body.score #score { display:flex; }
body:not([data-mode="travail"]) #score { left:0; right:0; }
#score .bar { display:flex; gap:8px; align-items:center; }
#score .bar input[type=range] { flex:1; min-width:120px; }
#score .bar input[type=text] { background:#0f0f14; color:var(--texte); border:1px solid var(--gris-trait-clair); font:inherit; padding:3px 6px; }
#score .stime { color:var(--texte-sourd); font-size:11px; white-space:nowrap; min-width:8em; }
#score .tracks { margin-top:6px; }
#score .track { display:flex; align-items:center; height:12px; font-size:10px; color:var(--texte-sourd); }
#score .track .lab { width:150px; flex:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#score .track .line { position:relative; flex:1; height:1px; background:var(--gris-trait); margin-right:50px; }
#score .track .line i, #score .track .line b { position:absolute; top:-3px; width:7px; height:7px; margin-left:-3px; border-radius:50%; background:#8a8a80; }
#score .track .line b { background:var(--neutre); border-radius:1px; }
#score .track .line u { position:absolute; top:-6px; width:1px; height:13px; background:var(--neutre); }
#score .track.cursor .line { background:transparent; }

/* --------------------------------------------------- props : registre traits, provenance auteur */
#props { position:fixed; inset:0; pointer-events:none; overflow:hidden; }
#props svg.flux { position:absolute; inset:0; width:100%; height:100%; }
#props svg.flux line, #props svg.flux polyline { stroke-width:var(--trait); stroke-linecap:round; fill:none; }
#props .prop { position:absolute; white-space:nowrap; }
#props .prop.card { padding:.25em .6em; border:var(--trait) solid; border-radius:4px; background:var(--voile);
                    font:300 var(--corps-carte)/1.15 var(--serif); letter-spacing:.03em; }
#props .prop.card .sp { color:var(--texte-sourd); }
#props .prop.label { transform:translate(0,-50%); font:300 var(--corps-etiquette)/1.1 var(--serif); letter-spacing:.08em; text-transform:uppercase; }

/* --------------------------------------------------- HUD (mode plateau) : dérivé, taille vidéo, sans champ */
#hud { position:fixed; inset:0; pointer-events:none; display:none; font-size:var(--corps-plateau); line-height:1.25; color:var(--texte-clair); }
body[data-mode="plateau"] #hud { display:block; }
#hud .hk { color:var(--texte-sourd); font-size:.6em; letter-spacing:.12em; text-transform:uppercase; }
#hud > div { background:var(--voile); padding:.3em .5em; }
#hud .hamorce { position:absolute; left:3vw; top:2.5vh; max-width:52vw; font:300 1em/1.4 var(--serif); }
#hud .hamorce .t { margin-right:.35em; }
#hud .hamorce .t.vise { color:var(--neutre); }
#hud .hamorce .t .sp { color:var(--texte-sourd); }
#hud .hlentille { position:absolute; right:3vw; top:2.5vh; text-align:right; }
#hud .hlentille .hv { font:300 1.5em/1.1 var(--serif); color:var(--neutre); }
/* Répartition des blocs du HUD. La DA veut que le HUD tienne les bords et laisse le centre à la
   grille : `cadre()` réserve 13 % en haut et 20 % en bas, et AUCUN bloc ne doit sortir de ces deux
   bandes — sinon il mord sur les couches. La bande haute porte l'amorce (gauche) et la lentille
   (droite) ; la bande basse porte le texte produit (large, à gauche : c'est le plan), puis le mot
   cible et la qualité. Deux jets ont été nécessaires pour l'apprendre : cible et texte superposés en
   bas à gauche, puis cible remontée à droite — où elle recouvrait la grille. */
#hud .hcible { position:absolute; left:56vw; width:17vw; bottom:3.5vh; }
#hud .hqual { position:absolute; right:3vw; bottom:3.5vh; width:22vw; }
#hud .hqual .hv { font:300 1.2em/1.2 var(--serif); color:var(--texte-clair); }
#hud .hqual .hn { font-size:.62em; color:var(--texte-sourd); margin-top:.2em; }
#hud .hqual .hbar { height:.28em; background:rgba(216,216,208,.12); position:relative; margin-top:.35em; }
#hud .hqual .hbar i { position:absolute; left:0; top:0; bottom:0; background:var(--neutre); }
/* le texte produit, en mode plateau : c'est le plan « le modèle prépare un mot et on le lui change » */
#hud .htexte { position:absolute; left:3vw; width:47vw; bottom:3.5vh; }
#hud .htexte .hl { margin-top:.25em; font:300 .8em/1.35 var(--serif); }
#hud .htexte .hl .hk { display:inline-block; min-width:5.5em; font-size:.55em; }
#hud .htexte .hl.inj { color:var(--neutre); }
#hud .dim { opacity:.25; }
#hud .focus { opacity:1; }