/* Façade « relation » (cas d'étude « attention »). 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); }

/* --------------------------------------------------- les arcs et les points (le mesuré) */
/* un arc = un poids d'attention (attn_probs) : orange neutre, épaisseur et opacité ∝ poids */
#g .arc { fill:none; stroke:var(--neutre); stroke-linecap:round; }
/* les points : masse reçue (clés) et concentration de la ligne (requêtes). Blanc cassé = actif ;
   <bos> reste visible mais atténué — il absorbe l'essentiel de la masse sur gemma. */
#g .pt { fill:var(--texte-clair); cursor:pointer; }
/* <bos> reste un jeton mesuré comme les autres : même registre, teinte sourde — le bleu froid, lui,
   veut dire « éteint par l'injection » ailleurs dans la DA et n'a rien à faire ici. */
#g .pt.bos { fill:var(--texte-sourd); }
#g .rangee { stroke:var(--gris-trait); stroke-width:var(--trait-fin); }
#g .rangeeLab { fill:var(--texte-sourd); font:10px var(--mono); letter-spacing:.12em; text-transform:uppercase; }
#g .jetonLab { fill:var(--texte-clair); font:300 15px var(--serif); letter-spacing:.03em; text-anchor:middle; }
#g .jetonLab.vise { fill:var(--neutre); }
body[data-mode="plateau"] #g .jetonLab, body[data-mode="nu"] #g .jetonLab { font-size:clamp(20px, 1.8vw, 44px); }
body[data-mode="plateau"] #g .rangeeLab, body[data-mode="nu"] #g .rangeeLab { font-size:15px; }

/* --------------------------------------------------- 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:300px; 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], 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:70px; }
.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); }
#stats { margin-top:10px; line-height:1.5; }

/* --------------------------------------------------- damier (Head Finder) : 26 couches × 8 têtes */
/* une case = une tête ; l'intensité suit la métrique choisie, normalisée sur les 208 têtes de l'export.
   Une seule teinte : c'est le relevé qui décide de l'intensité, pas une couleur choisie. */
#damier { display:grid; grid-template-columns:repeat(var(--nh, 8), 1fr); gap:1px; margin:8px 0 4px; }
#damier .case { display:block; height:11px; background:var(--neutre); cursor:pointer; }
#damier .case:hover { outline:1px solid var(--texte-clair); outline-offset:0; }
#damier .case.ici { outline:1px solid var(--texte-clair); }
#damierEch { line-height:1.5; }

/* --------------------------------------------------- mesures (deux colonnes) */
#mesures { width:100%; border-collapse:collapse; font-size:11px; }
#mesures th { font-weight:normal; text-align:left; color:var(--texte-sourd); padding:2px 4px; }
#mesures thead th { border-bottom:1px solid var(--gris-trait); text-align:right; }
#mesures thead th:first-child { text-align:left; }
#mesures td { text-align:right; padding:2px 4px; color:var(--texte-clair); }
#mesures td.ex { color:var(--texte-sourd); }

.legend { margin:10px 0; font-size:11px; color:var(--texte-sourd); line-height:2; }
.legend .lg { display:inline-block; width:10px; height:10px; margin-right:4px; vertical-align:-1px; }
.legend .arc { background:var(--neutre); height:3px; }
.legend .pt { background:var(--texte-clair); border-radius:50%; }

/* --------------------------------------------------- survol */
#tip { position:fixed; z-index:8; display:none; max-width:340px; padding:6px 8px; background:var(--voile);
       border:1px solid var(--gris-trait-clair); color:var(--texte-clair); font-size:12px; line-height:1.5; 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:300px; 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; }
/* les blocs du HUD sont posés sur le tracé : le voile de la DA les garde lisibles sans les opacifier */
#hud > div { background:var(--voile); padding:.3em .5em; }
#hud .hamorce { position:absolute; left:3vw; top:3vh; 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 .htete { position:absolute; right:3vw; top:3vh; text-align:right; }
#hud .htete .hv { font:300 1.8em/1.1 var(--serif); color:var(--neutre); }
#hud .hmes { position:absolute; right:3vw; bottom:4vh; width:30vw; }
#hud .hmes .hl { display:flex; gap:.6em; font-size:.62em; margin-top:.25em; }
#hud .hmes .hn { flex:1; color:var(--texte-sourd); }
#hud .hmes .ha { min-width:4em; text-align:right; color:var(--texte-clair); }
#hud .hmes .hb { min-width:4em; text-align:right; color:var(--texte-sourd); }
#hud .hseuil { position:absolute; left:3vw; bottom:4vh; width:24vw; }
#hud .hseuil .hn { font:300 .9em/1.2 var(--serif); color:var(--texte-clair); margin-top:.15em; }
#hud .hseuil .hbar { height:.28em; background:rgba(216,216,208,.12); position:relative; margin-top:.35em; }
#hud .hseuil .hbar i { position:absolute; left:0; top:0; bottom:0; background:var(--neutre); }
#hud .dim { opacity:.25; }
#hud .focus { opacity:1; }