/* =============================================================================
   OpeRan — tema «teatro d'opera»
   Sala in penombra (scuro) di default · sala illuminata (chiaro) col toggle.

   Regola non negoziabile: il TABELLONE è clinicamente neutro. Velluto, oro e
   sipario stanno tutti attorno alla prova; dentro la prova c'è solo avorio,
   inchiostro e lo stimolo. Un fondo decorato falserebbe la misura.
   ============================================================================= */
:root{
  --bg:#150d11; --bg2:#0e080b; --panel:#231519; --panel2:#2e1c21;
  --ink:#f6ede0; --ink-soft:#c8b4a4; --muted:#93796d;
  --line:#3a2429; --line2:#4d3038;
  --velluto:#8c1c33; --velluto-scuro:#5e0f22; --velluto-chiaro:#b32a45;
  --oro:#c9a227; --oro-chiaro:#e8cc6a; --oro-ink:#241408;
  --ottone:#a8823c;
  --good:#3f9c62; --bad:#cf4436; --warn:#d99a20;
  --scena:#faf5ea;        /* fondo del tabellone, sempre chiaro */
  --scena-ink:#16110c;    /* inchiostro degli stimoli          */
  --scena-line:#ddd0b8;
  --shadow:0 14px 38px rgba(0,0,0,.5);
  --radius:16px;
  --font:'Atkinson Hyperlegible',system-ui,-apple-system,sans-serif;
  --display:'Playfair Display',Georgia,serif;
}
body.theme-light{
  --bg:#efe6d6; --bg2:#e2d6c1; --panel:#fdf9f1; --panel2:#f5ecdc;
  --ink:#241713; --ink-soft:#6a5344; --muted:#8d7565;
  --line:#e0d2ba; --line2:#cdb99a;
  --velluto:#a3223c; --velluto-scuro:#7d1730; --velluto-chiaro:#c0455e;
  --oro:#9d7c15; --oro-chiaro:#c9a227; --oro-ink:#fff;
  --shadow:0 12px 30px rgba(120,90,50,.22);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font); color:var(--ink); background:var(--bg); line-height:1.45;
  background-image:
    radial-gradient(ellipse at 50% -10%, rgba(140,28,51,.28), transparent 55%),
    radial-gradient(circle at 12% 88%, rgba(201,162,39,.10), transparent 45%);
  background-repeat:no-repeat;
  -webkit-text-size-adjust:100%; min-height:100vh;
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hidden{display:none!important}
.print-only{display:none}
.print-footer{display:none}
#app{max-width:720px;margin:0 auto;padding:16px 14px 48px}
/* in somministrazione il tabellone si prende tutta la finestra */
body.in-scena #app{max-width:none;padding:8px 10px 12px}
body.in-scena .theme-toggle{display:none}
.screen{display:none}
.screen.active{display:block;animation:fade .32s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
a{color:var(--oro-chiaro)}
.theme-light a{color:var(--velluto)}

/* ───────────────────────────── toggle tema ─────────────────────────────── */
.theme-toggle{
  position:fixed;top:12px;right:12px;z-index:60;width:44px;height:44px;border-radius:50%;
  border:2px solid var(--ottone);background:var(--panel);color:var(--ink);font-size:19px;
  cursor:pointer;box-shadow:var(--shadow);transition:transform .15s}
.theme-toggle:hover{transform:scale(1.09)}

/* ───────────────────────────── testata / sipario ───────────────────────── */
.hero{text-align:center;padding:18px 8px 4px;position:relative}
.sipario{position:relative;width:100%;max-width:340px;height:74px;margin:0 auto 2px;overflow:hidden}
.drape{position:absolute;top:0;width:44%;height:74px;
  background:
    repeating-linear-gradient(90deg, var(--velluto-scuro) 0 7px, var(--velluto) 7px 15px, var(--velluto-chiaro) 15px 17px, var(--velluto) 17px 24px);
  box-shadow:inset 0 -14px 22px rgba(0,0,0,.5)}
.drape.l{left:0;border-radius:0 0 60% 12%;transform-origin:top left;animation:apri 1.1s cubic-bezier(.4,1.2,.5,1) both}
.drape.r{right:0;border-radius:0 0 12% 60%;transform-origin:top right;animation:apri 1.1s cubic-bezier(.4,1.2,.5,1) both}
@keyframes apri{from{transform:scaleX(1.5)}to{transform:scaleX(1)}}
.mask{position:absolute;left:50%;top:16px;transform:translateX(-50%);font-size:40px;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.55))}
@media (prefers-reduced-motion:reduce){.drape{animation:none}}

.brand{font-family:var(--display);font-weight:800;font-size:clamp(2.1rem,8vw,3.1rem);
  margin:.05em 0 0;color:var(--oro);letter-spacing:.5px;line-height:1;
  text-shadow:0 2px 0 var(--velluto-scuro),0 5px 14px rgba(0,0,0,.4)}
.brand span{color:var(--velluto-chiaro)}
.theme-light .brand{text-shadow:0 2px 0 rgba(0,0,0,.08)}
.tagline{color:var(--ink-soft);margin:.5em auto 0;max-width:44ch;font-size:.94rem}

/* ───────────────────────────── schede ──────────────────────────────────── */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px;margin:14px 0;box-shadow:var(--shadow);position:relative}
.card::before{content:"";position:absolute;inset:0 0 auto;height:3px;border-radius:var(--radius) var(--radius) 0 0;
  background:linear-gradient(90deg,transparent,var(--oro),transparent);opacity:.55}
.card h2{font-family:var(--display);font-size:1.14rem;margin:0 0 10px;color:var(--oro-chiaro);letter-spacing:.2px}
.theme-light .card h2{color:var(--velluto)}
.hint{color:var(--ink-soft);font-size:.87rem;margin:0 0 12px}
.micro{color:var(--muted);font-size:.76rem;line-height:1.5;margin:10px 0 0}
.mod-desc{margin:8px 2px 0;font-size:.85rem;color:var(--ink-soft);min-height:1.1em}
.field{margin:13px 0}
.field>label{display:block;font-weight:700;margin-bottom:6px;font-size:.93rem}
.grid-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:470px){.grid-fields{grid-template-columns:1fr}}
.tot-line{margin:12px 0 0;font-size:.88rem;color:var(--ink-soft);border-top:1px dashed var(--line2);padding-top:10px}
.tot-line strong{color:var(--oro-chiaro)}
.theme-light .tot-line strong{color:var(--velluto)}
.warn-inline{display:block;color:var(--warn);margin-top:4px;font-weight:700}

.info{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;
  background:var(--panel2);border:1px solid var(--line2);color:var(--muted);font-size:11px;cursor:help;
  vertical-align:middle;margin-left:4px;position:relative;font-weight:400}
.info:hover,.info:focus{color:var(--oro);outline:none}
.info[data-tip]:hover::after,.info[data-tip]:focus::after{
  content:attr(data-tip);position:absolute;left:50%;top:calc(100% + 8px);transform:translateX(-50%);
  width:min(80vw,320px);background:#100a0c;color:#f6ede0;border:1px solid var(--ottone);border-radius:10px;
  padding:10px 12px;font-size:.79rem;font-weight:400;line-height:1.45;z-index:50;box-shadow:var(--shadow);text-align:left}

/* ───────────────────────────── controlli ───────────────────────────────── */
.segmented{display:flex;flex-wrap:wrap;gap:6px;background:var(--panel2);border-radius:12px;padding:5px}
.segmented button{flex:1 1 auto;min-width:60px;border:1px solid transparent;background:transparent;color:var(--ink-soft);
  padding:9px 8px;border-radius:9px;font-family:var(--font);font-size:.85rem;font-weight:700;cursor:pointer;
  transition:.14s;line-height:1.15}
.segmented button:hover{color:var(--ink)}
.segmented button.active{background:var(--velluto);color:#fff;box-shadow:0 2px 10px rgba(0,0,0,.3)}
.seg-2 button{flex:1 1 45%}
.seg-3 button{flex:1 1 30%}
#seg-modalita button.active{background:var(--oro);color:var(--oro-ink)}

.stepper{display:flex;align-items:center;gap:0;background:var(--panel2);border:1px solid var(--line2);border-radius:11px;overflow:hidden}
.stepper button{width:42px;height:42px;flex:0 0 42px;border:0;background:var(--velluto);color:#fff;
  font-size:1.15rem;font-weight:700;cursor:pointer;transition:.12s;font-family:var(--font)}
.stepper button:hover{background:var(--velluto-chiaro)}
.stepper button:disabled{background:var(--line2);color:var(--muted);cursor:not-allowed}
.stepper output{flex:1;text-align:center;font-weight:700;font-size:1.02rem;font-variant-numeric:tabular-nums}
.stepper.wide button{width:56px;flex:0 0 56px}

.derivato{margin:0;padding:10px 12px;background:var(--panel2);border:1px dashed var(--line2);
  border-radius:11px;font-size:.86rem;color:var(--muted)}
.derivato strong{font-size:1.15rem;color:var(--oro-chiaro);margin-right:5px;font-variant-numeric:tabular-nums}
.theme-light .derivato strong{color:var(--velluto)}
.checkline{margin-top:14px}
.check{display:flex;align-items:flex-start;gap:9px;font-weight:400!important;font-size:.9rem;cursor:pointer;line-height:1.35}
.check input{width:22px;height:22px;flex:0 0 22px;accent-color:var(--velluto);cursor:pointer;margin-top:1px}

input[type=text],input[type=search],select{
  width:100%;padding:11px 12px;border-radius:10px;border:1px solid var(--line2);
  background:var(--panel2);color:var(--ink);font-family:var(--font);font-size:.95rem}
input:focus,select:focus,button:focus-visible{outline:2px solid var(--oro);outline-offset:2px}
.mini{padding:8px 10px;font-size:.84rem;width:auto;flex:1 1 auto;min-width:110px}
.mini-btn{padding:8px 12px;font-size:.82rem;border-radius:9px;border:1px solid var(--line2);
  background:var(--panel2);color:var(--ink-soft);cursor:pointer;font-family:var(--font);font-weight:700}
.mini-btn:hover{color:var(--ink);border-color:var(--ottone)}

.btn{border:0;border-radius:12px;padding:13px 20px;font-family:var(--font);font-weight:700;font-size:.97rem;
  cursor:pointer;transition:.15s;background:var(--panel2);color:var(--ink)}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:linear-gradient(180deg,var(--velluto-chiaro),var(--velluto));color:#fff;
  box-shadow:0 6px 18px rgba(140,28,51,.4)}
.btn.ghost{background:transparent;border:1px solid var(--line2);color:var(--ink-soft)}
.btn.ghost:hover{color:var(--ink);border-color:var(--oro)}
.btn.ghost.danger:hover{color:var(--bad);border-color:var(--bad)}
.btn.small{padding:9px 14px;font-size:.86rem}
.btn.big{display:block;width:100%;padding:18px;font-size:1.12rem;font-family:var(--display);font-weight:600;
  letter-spacing:.4px;margin:20px 0 6px}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}

/* ───────────────────────── schede a fisarmonica ────────────────────────── */
.card-collapse{width:100%;display:flex;align-items:center;gap:10px;background:transparent;border:0;
  color:var(--ink);cursor:pointer;padding:0;font-family:var(--font);text-align:left}
.cc-title{font-family:var(--display);font-size:1.1rem;color:var(--oro-chiaro);flex:0 0 auto}
.theme-light .cc-title{color:var(--velluto)}
.cc-hint{color:var(--muted);font-size:.8rem;flex:1}
.chev{transition:transform .2s;color:var(--oro);font-size:1.1rem}
.card:not(.collapsed) .chev{transform:rotate(180deg)}
.collapse-body{padding-top:14px}
.card.collapsed .collapse-body{display:none}

/* ─────────── pannello dei parametri, chiuso finché non serve ───────────── */
.param-toggle{width:100%;display:flex;align-items:center;gap:10px;padding:13px 16px;margin:14px 0 0;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);color:var(--ink);
  cursor:pointer;font-family:var(--font);text-align:left;box-shadow:var(--shadow)}
.param-toggle:hover{border-color:var(--ottone)}
.pt-lab{font-family:var(--display);font-size:1.06rem;color:var(--oro-chiaro);flex:0 0 auto}
.theme-light .pt-lab{color:var(--velluto)}
.pt-sum{flex:1;color:var(--muted);font-size:.81rem;line-height:1.3}
.param-toggle .chev{transition:transform .2s;color:var(--oro);font-size:1.1rem}
.param-toggle[aria-expanded="true"] .chev{transform:rotate(180deg)}
.param-wrap.chiuso{display:none}

/* ─────────────────────── barra azioni del setup ────────────────────────── */
.azioni-setup{display:flex;gap:9px;margin:20px 0 4px;flex-wrap:wrap}
.azioni-setup .btn{flex:1 1 150px;text-align:center;padding:16px 12px;font-size:1rem}
.azioni-setup .btn.primary{flex:1 1 190px;font-family:var(--display);font-weight:600;font-size:1.08rem}
.azioni-nota{text-align:center}
@media(max-width:520px){.azioni-setup .btn{flex:1 1 100%}}

/* ───────────────────────────── locandine ───────────────────────────────── */
.preset-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
@media(max-width:470px){.preset-grid{grid-template-columns:1fr}}
.preset{display:flex;flex-direction:column;gap:2px;text-align:left;padding:11px 13px;border-radius:12px;
  border:1px solid var(--line2);background:var(--panel2);color:var(--ink);cursor:pointer;
  font-family:var(--font);transition:.14s;position:relative;overflow:hidden}
.preset:hover{border-color:var(--oro);transform:translateY(-2px)}
.preset b{font-size:.93rem;font-weight:700}
.preset small{color:var(--muted);font-size:.77rem;line-height:1.3}
.preset::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--oro);opacity:.7}
.preset.on{border-color:var(--oro);background:rgba(201,162,39,.13);box-shadow:0 0 0 1px var(--oro) inset}
.preset.on::after{width:5px;opacity:1}
.preset.on b::before{content:"✓ ";color:var(--oro)}

/* ───────────────────────── chip di selezione ───────────────────────────── */
.chip-grid{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px}
.chip{display:inline-flex;align-items:center;gap:7px;padding:9px 13px;border-radius:999px;
  border:2px solid var(--line2);background:var(--panel2);color:var(--ink-soft);cursor:pointer;
  font-family:var(--font);font-weight:700;font-size:.88rem;transition:.13s}
.chip:hover{border-color:var(--ottone);color:var(--ink)}
.chip.on{border-color:var(--oro);background:var(--oro);color:var(--oro-ink)}
.chip .pastiglia{width:17px;height:17px;border-radius:50%;border:1.5px solid rgba(0,0,0,.35);flex:0 0 17px}
.chip .glifo{font-size:1.12rem;font-weight:700;min-width:1ch;text-align:center}

/* ───────────────────────────── galleria figure ─────────────────────────── */
.filtri{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.galleria{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:8px;
  max-height:340px;overflow-y:auto;padding:8px;background:var(--bg2);border:1px solid var(--line);border-radius:12px}
.gal-item{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 3px;border-radius:10px;
  border:2px solid transparent;background:var(--panel2);cursor:pointer;transition:.12s}
.gal-item:hover{border-color:var(--ottone)}
.gal-item.on{border-color:var(--oro);background:rgba(201,162,39,.16)}
.gal-item img{width:42px;height:42px;pointer-events:none}
.gal-item span{font-size:.66rem;color:var(--ink-soft);text-align:center;line-height:1.15;word-break:break-word}
.gal-item .sil{font-size:.6rem;color:var(--muted)}
.gal-vuota{grid-column:1/-1;text-align:center;color:var(--muted);padding:26px 10px;font-size:.86rem}

/* ═══════════════════════════ IL TABELLONE ═══════════════════════════════
   Da qui in giù: nessuna decorazione. Solo avorio e inchiostro.            */
.board{
  display:grid;gap:var(--gap,10px);justify-content:center;align-content:start;
  background:var(--scena);border-radius:12px;padding:var(--pad,16px);
  border:1px solid var(--scena-line);
  grid-template-columns:repeat(var(--cols,10),var(--cell,64px));
}
.cell{
  width:var(--cell,64px);height:var(--cell,64px);
  display:flex;align-items:center;justify-content:center;
  position:relative;border-radius:8px;user-select:none;-webkit-user-select:none;
}
.cell img{width:100%;height:100%;object-fit:contain;pointer-events:none;display:block}
.cell .glifo{
  font-family:var(--font);font-weight:700;color:var(--scena-ink);line-height:1;
  font-size:calc(var(--cell,64px) * .72);font-variant-numeric:lining-nums}
.cell .pastiglia-c{width:82%;height:82%;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}

/* faretto dell'allenamento */
.cell.faretto::after{content:"";position:absolute;inset:-6px;border:4px solid var(--velluto);border-radius:12px;
  box-shadow:0 0 0 3px rgba(140,28,51,.18)}
.cell.nascosta{visibility:hidden}

/* annotazione post-prova */
.board.tagmode .cell{cursor:pointer;border:1px dashed transparent}
.board.tagmode .cell:hover{border-color:var(--scena-line)}
.cell.tag-err::after{content:"✗";position:absolute;top:-3px;right:-1px;color:var(--bad);font-weight:700;
  font-size:calc(var(--cell,64px) * .34);line-height:1;text-shadow:0 0 3px var(--scena)}
.cell.tag-err{background:rgba(207,68,54,.13);box-shadow:inset 0 0 0 2px rgba(207,68,54,.5)}
.cell.tag-esi::after{content:"~";position:absolute;top:-6px;right:1px;color:var(--warn);font-weight:700;
  font-size:calc(var(--cell,64px) * .38);line-height:1;text-shadow:0 0 3px var(--scena)}
.cell.tag-esi{background:rgba(217,154,32,.13);box-shadow:inset 0 0 0 2px rgba(217,154,32,.5)}

.badge-ant{display:inline-block;padding:2px 9px;border-radius:999px;background:var(--oro);color:var(--oro-ink);
  font-weight:700;font-size:.74rem;letter-spacing:.4px;text-transform:uppercase;margin-right:4px}
.board.preview{margin:0 auto;outline:2px dashed var(--ottone);outline-offset:5px}
.prev-wrap{padding:6px 0 20px;overflow-x:auto}
.prev-actions{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.bar{display:flex;align-items:center;gap:10px;padding:10px 0 6px;position:sticky;top:0;z-index:20;background:var(--bg)}
.bar-title{flex:1;text-align:center;font-family:var(--display);color:var(--oro-chiaro);font-size:1.05rem}

/* ═════════════════════════ SCHERMATA IN SCENA ═══════════════════════════ */
#screen-run.active{display:flex;flex-direction:column;min-height:100vh}
.runbar{
  position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:9px 10px;background:var(--panel);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow);margin-bottom:12px}
.rb-left{display:flex;align-items:baseline;gap:10px;flex:1;min-width:150px}
.chrono{font-family:var(--display);font-variant-numeric:tabular-nums;font-size:clamp(1.7rem,6.5vw,2.4rem);
  font-weight:800;color:var(--oro);line-height:1;letter-spacing:.5px}
.theme-light .chrono{color:var(--velluto)}
.rb-meta{font-size:.78rem;color:var(--muted);line-height:1.25}
.rb-right{display:flex;gap:7px;flex-wrap:wrap}
.rb-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  min-width:60px;padding:7px 10px;border-radius:11px;border:1px solid var(--line2);
  background:var(--panel2);color:var(--ink);cursor:pointer;font-family:var(--font);transition:.12s}
.rb-btn b{font-size:1.12rem;line-height:1}
.rb-btn small{font-size:.63rem;color:var(--muted);letter-spacing:.2px}
.rb-btn:hover{transform:translateY(-1px);border-color:var(--ottone)}
.rb-btn:active{transform:scale(.95)}
.rb-btn.err{border-color:rgba(207,68,54,.55)} .rb-btn.err b{color:var(--bad)}
.rb-btn.autoc{border-color:rgba(217,154,32,.55)} .rb-btn.autoc b{color:var(--warn)}
.rb-btn.go{background:var(--good);color:#fff;min-width:76px} .rb-btn.go b,.rb-btn.go small{color:#fff}
.rb-btn.go.stop{background:var(--bad)}
.rb-btn.abort{min-width:40px;padding:7px;color:var(--muted)}
.rb-btn.conta{position:relative}
.rb-btn .badge{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;border-radius:10px;
  background:var(--velluto);color:#fff;font-size:.7rem;font-weight:700;display:flex;align-items:center;
  justify-content:center;padding:0 5px}
/* margin:auto invece di justify-content:center — con la centratura flex, un
   tabellone più largo del contenitore viene tagliato a sinistra e non si può
   scorrere fin lì */
.run-wrap{flex:1;display:flex;overflow:auto;padding:2px 0;min-height:0}
.run-wrap>.board{margin:auto}
.kbd-hint{text-align:center;font-size:.75rem;color:var(--muted);margin:10px 0 4px}
.kbd-hint kbd{background:var(--panel2);border:1px solid var(--line2);border-radius:5px;padding:1px 6px;
  font-family:var(--font);font-size:.72rem;margin:0 1px}

/* ═════════════════════════ RECENSIONE ═══════════════════════════════════ */
.res-hero{text-align:center;padding:16px 8px 2px}
.applause{font-size:44px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.4));animation:inchino 2.6s ease-in-out infinite}
@keyframes inchino{0%,86%,100%{transform:rotate(0)}91%{transform:rotate(-9deg)}96%{transform:rotate(7deg)}}
@media (prefers-reduced-motion:reduce){.applause{animation:none}}
.res-hero h2{font-family:var(--display);font-size:1.7rem;margin:.15em 0 0;color:var(--oro)}
.theme-light .res-hero h2{color:var(--velluto)}

.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(126px,1fr));gap:10px}
.stat{background:var(--panel2);border:1px solid var(--line2);border-radius:12px;padding:12px 11px;text-align:center}
.stat .v{font-family:var(--display);font-size:1.5rem;font-weight:800;color:var(--oro-chiaro);line-height:1.1;
  font-variant-numeric:tabular-nums}
.theme-light .stat .v{color:var(--velluto)}
.stat .k{font-size:.74rem;color:var(--muted);margin-top:3px;line-height:1.3}
.stat.spicca{border-color:var(--oro);background:rgba(201,162,39,.09)}

.lap-chart{display:flex;align-items:flex-end;gap:7px;min-height:118px;padding:8px 2px 0}
.lap-bar{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.lap-bar .col{width:100%;border-radius:5px 5px 0 0;background:linear-gradient(180deg,var(--velluto-chiaro),var(--velluto));
  min-height:5px;transition:height .5s ease}
.lap-bar .col.lenta{background:linear-gradient(180deg,var(--warn),#a86f10)}
.lap-bar .col.veloce{background:linear-gradient(180deg,var(--good),#2a6e44)}
.lap-bar .et{font-size:.66rem;color:var(--muted);white-space:nowrap}
.lap-bar .vv{font-size:.68rem;color:var(--ink-soft);font-variant-numeric:tabular-nums}

.tab-wrap{overflow-x:auto}
.tabella{width:100%;border-collapse:collapse;font-size:.87rem}
.tabella th,.tabella td{padding:8px 9px;text-align:left;border-bottom:1px solid var(--line)}
.tabella th{color:var(--muted);font-size:.75rem;text-transform:uppercase;letter-spacing:.4px;font-weight:700}
.tabella th.num,.tabella td.num{text-align:right;font-variant-numeric:tabular-nums}
.tabella .mini-img{width:26px;height:26px;vertical-align:middle;margin-right:7px}
.tabella .pastiglia-t{display:inline-block;width:15px;height:15px;border-radius:50%;vertical-align:middle;
  margin-right:7px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.3)}

.conf-riga{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:.88rem}
.conf-riga:last-child{border-bottom:0}
.conf-riga .cq{flex:1;color:var(--ink-soft)}
.conf-riga .cv{font-variant-numeric:tabular-nums;font-weight:700}
.delta{font-size:.82rem;font-weight:700;padding:2px 8px;border-radius:999px;white-space:nowrap}
.delta.su{background:rgba(63,156,98,.16);color:var(--good)}
.delta.giu{background:rgba(207,68,54,.16);color:var(--bad)}
.delta.pari{background:var(--panel2);color:var(--muted)}

.reg-item{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.reg-item:last-of-type{border-bottom:0}
.reg-item .ri-main{flex:1;min-width:0}
.reg-item .ri-t{font-weight:700;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reg-item .ri-s{font-size:.76rem;color:var(--muted)}
.reg-item .ri-v{font-variant-numeric:tabular-nums;font-weight:700;color:var(--oro-chiaro);white-space:nowrap}
.theme-light .reg-item .ri-v{color:var(--velluto)}
.reg-item .ri-x{background:none;border:0;color:var(--muted);cursor:pointer;font-size:1rem;padding:4px 6px}
.reg-item .ri-x:hover{color:var(--bad)}
.reg-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.reg-vuoto{color:var(--muted);font-size:.87rem;text-align:center;padding:16px 0}

.res-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.res-actions.finali{margin:16px 0 8px}
.res-actions.finali .btn{flex:1 1 200px;text-align:center}
.codice-row{display:flex;gap:8px}
.codice-row input{flex:1;font-family:ui-monospace,monospace;font-size:.82rem}

/* ═══════════════════ familiarizzazione ══════════════════════════════════ */
.fam-lista{display:grid;gap:9px;margin-bottom:14px}
.fam-item{display:flex;align-items:center;gap:13px;padding:10px 13px;background:var(--panel);
  border:1px solid var(--line);border-left:5px solid var(--line2);border-radius:13px}
.fam-item.stato-ok{border-left-color:var(--good)}
.fam-item.stato-alt{border-left-color:var(--warn)}
.fam-item.stato-no{border-left-color:var(--bad)}
.fam-fig{flex:0 0 auto;background:var(--scena);border-radius:10px;padding:5px;border:1px solid var(--scena-line)}
.fam-fig .cell{width:68px;height:68px}
.fam-centro{flex:1;min-width:0}
.fam-nome{font-weight:700;font-size:1.05rem}
.fam-sost{font-size:.82rem;color:var(--warn);min-height:1.1em}
.fam-btn{display:flex;gap:6px;flex:0 0 auto}
.fam-b{width:46px;height:46px;border-radius:11px;border:1px solid var(--line2);background:var(--panel2);
  color:var(--ink-soft);font-size:1.15rem;cursor:pointer;font-family:var(--font);transition:.12s}
.fam-b:hover{border-color:var(--ottone);color:var(--ink)}
.fam-b.ok.on{background:var(--good);color:#fff;border-color:var(--good)}
.fam-b.alt.on{background:var(--warn);color:#2a1d05;border-color:var(--warn)}
.fam-b.no.on{background:var(--bad);color:#fff;border-color:var(--bad)}
@media(max-width:440px){
  .fam-item{flex-wrap:wrap}
  .fam-btn{width:100%;justify-content:flex-end}
}

/* ═══════════════════ player · landing · condivisione ════════════════════ */
.player-intro{color:var(--ink-soft);font-size:.95rem;margin:0}
.player-intro strong{color:var(--ink)}
.player-config{margin:14px 0;padding:13px;background:var(--panel2);border:1px dashed var(--line2);
  border-radius:12px;font-size:.9rem;color:var(--ink-soft);text-align:center;line-height:1.6}
.player-config b{color:var(--oro-chiaro)}
.theme-light .player-config b{color:var(--velluto)}
.player-credit{margin-top:14px;font-size:.8rem;color:var(--muted);text-align:center}
.land-chips{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0}
.land-chips span{padding:6px 12px;border-radius:999px;background:var(--panel2);border:1px solid var(--line2);
  color:var(--ink-soft);font-size:.8rem;font-weight:700}
.land-cta{margin-top:16px}
.land-cta .btn{display:block;text-align:center;text-decoration:none}

/* in modalità player spariscono tutti gli strumenti del clinico */
body.player #card-tag,body.player #card-confronto,body.player #card-archivio,
body.player #card-items,body.player .theme-toggle{display:none!important}

#modal-root:empty{display:none}
.modal-fondo{position:fixed;inset:0;z-index:80;background:rgba(8,4,6,.72);
  display:flex;align-items:center;justify-content:center;padding:18px;overflow:auto}
.modal-box{background:var(--panel);border:1px solid var(--line2);border-radius:var(--radius);
  padding:20px;max-width:430px;width:100%;box-shadow:var(--shadow)}
.modal-titolo{font-family:var(--display);font-size:1.2rem;color:var(--oro-chiaro);margin-bottom:5px}
.theme-light .modal-titolo{color:var(--velluto)}
.modal-msg{color:var(--ink-soft);font-size:.87rem;margin-bottom:13px}
.share-link{display:flex;gap:8px;margin-bottom:12px}
.share-link input{flex:1;min-width:0;padding:10px;border-radius:9px;border:1px solid var(--line2);
  background:var(--panel2);color:var(--ink);font-size:.78rem;font-family:ui-monospace,monospace}
.share-opts{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.share-opt{flex:1 1 auto;text-align:center;padding:10px;border-radius:9px;background:var(--panel2);
  border:1px solid var(--line2);color:var(--ink);text-decoration:none;font-weight:700;font-size:.84rem;cursor:pointer;
  font-family:var(--font)}
.share-opt:hover{border-color:var(--oro)}
.share-qr{text-align:center;margin:10px 0}
.share-qr img{width:168px;height:168px;border-radius:10px;background:#fff;padding:6px}
.modal-azioni{display:flex;justify-content:flex-end;gap:8px;margin-top:6px}

.credits{text-align:center;color:var(--muted);font-size:.8rem;margin-top:26px;padding-top:16px;
  border-top:1px solid var(--line);line-height:1.6}
.credits p{margin:.35em 0}

/* ═════════════════════════ STAMPA ═══════════════════════════════════════
   Due usi: il tabellone su A4 per somministrare su carta, e il referto.    */
@page{size:A4;margin:12mm}
@media print{
  body{background:#fff!important;color:#000!important}
  /* nel flusso, non position:fixed: fissato in fondo alla pagina Chrome gli
     apre un foglio in più tutto vuoto. Così chiude l'ultima pagina e basta. */
  .print-footer{display:block;text-align:center;font-size:8pt;color:#777;
    border-top:1px solid #ddd;padding-top:5px;margin-top:16px;page-break-inside:avoid}
  #app{max-width:none;padding:0}
  .theme-toggle,.bar,.runbar,.prev-actions,.res-actions,.reg-actions,.hint,.info,
  .card-collapse,.credits,.kbd-hint,#card-registro,#card-codice,#btn-vai,.preset-grid,
  #card-tag .hint,.sipario,.applause,#card-archivio,#card-confronto.vuoto,
  #modal-root,.modal-fondo,.land-chips,.land-cta,.player-credit,.res-actions.finali{display:none!important}
  .print-only{border-bottom:1px solid #999;padding-bottom:6px}
  .print-only .cod{font-size:.62rem;color:#777;word-break:break-all;margin-top:2px}
  .print-only .campi{font-size:.85rem;color:#000;margin-top:6px}
  .screen{display:none!important}
  .screen.active{display:block!important}
  .card{box-shadow:none;border:1px solid #bbb;background:#fff;page-break-inside:avoid;margin:8px 0}
  .card::before{display:none}
  .card h2,.res-hero h2,.brand{color:#000!important;text-shadow:none!important}
  .board{background:#fff;border:0;padding:0;gap:12px}
  .board.preview{outline:0!important}
  .cell .glifo{color:#000}
  .stat{border:1px solid #ccc;background:#fff}
  .stat .v{color:#000!important}
  .lap-bar .col{background:#666!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .cell .pastiglia-c,.chip .pastiglia,.tabella .pastiglia-t{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .print-only{display:block;text-align:center;margin-bottom:10px}
  .print-only h3{font-family:var(--display);margin:0 0 2px}
  .print-only p{margin:0;font-size:.8rem;color:#444}
  .tabella{font-size:.8rem}
  a[href]::after{content:""}
}

.sost-tag{margin-left:8px;padding:1px 8px;border-radius:999px;background:rgba(217,154,32,.16);
  color:var(--warn);font-size:.74rem;font-weight:700;white-space:nowrap}
.sost-tag.no{background:rgba(207,68,54,.16);color:var(--bad)}

/* ═══════════════════ grafici ════════════════════════════════════════════
   Tinte validate con lo script del design system (checks OKLCH + CVD
   Machado 2009): due sole famiglie, una per gruppo di prove, più il grigio
   di de-enfasi per l'alternata, che nel contrasto non entra.
   scuro  #c93d55 / #2a9d8f su superficie #231519 — tutti i check passati
   chiaro #b32a45 / #2a9d8f su superficie #fdf9f1 — tutti i check passati */
:root{ --serie-alfa:#c93d55; --serie-nonalfa:#2a9d8f; --serie-mista:#93796d; }
body.theme-light{ --serie-alfa:#b32a45; --serie-nonalfa:#2a9d8f; --serie-mista:#8d7565; }

.gr-legenda{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:14px}
.gr-voce{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;color:var(--ink-soft)}
.gr-pastiglia{width:11px;height:11px;border-radius:3px;flex:0 0 11px}
.gr-pastiglia.g-alfa{background:var(--serie-alfa)}
.gr-pastiglia.g-nonalfa{background:var(--serie-nonalfa)}
.gr-pastiglia.g-mista{background:var(--serie-mista)}

.gr-barre{display:grid;gap:9px}
.gr-riga{display:grid;grid-template-columns:88px 1fr 56px;align-items:center;gap:10px}
.gr-et{font-size:.83rem;color:var(--ink-soft);text-align:right}
.gr-pista{height:15px;background:var(--panel2);border-radius:4px;overflow:hidden}
.gr-barra{height:100%;border-radius:0 4px 4px 0;transition:width .5s ease}
.gr-barra.g-alfa{background:var(--serie-alfa)}
.gr-barra.g-nonalfa{background:var(--serie-nonalfa)}
.gr-barra.g-mista{background:var(--serie-mista)}
.gr-val{font-size:.82rem;font-variant-numeric:tabular-nums;color:var(--ink);font-weight:700}
@media(max-width:440px){.gr-riga{grid-template-columns:70px 1fr 50px;gap:7px}.gr-et{font-size:.76rem}}

/* linea dell'andamento: una serie sola, una tinta, nessuna legenda */
.and-svg{width:100%;height:auto;display:block;margin:4px 0 8px;overflow:visible}
.and-grid{stroke:var(--line2);stroke-width:1}
.and-tick,.and-data{fill:var(--muted);font-size:11px;font-family:var(--font)}
.and-linea{stroke:var(--serie-alfa);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.and-alone{fill:var(--serie-alfa);stroke:var(--panel);stroke-width:2}
.and-punto{cursor:help}
.and-punto:hover .and-alone{r:7}
.and-ultimo{fill:var(--ink);font-size:12px;font-weight:700;font-family:var(--font)}
@media print{.and-grid{stroke:#ccc}.and-linea{stroke:#444}.and-alone{fill:#444;stroke:#fff}}

/* avviso di modalità in anteprima: chi arriva dal vecchio OpeRan cerca il cursore */
.avviso-modo{display:flex;gap:12px;align-items:flex-start;padding:13px 15px;margin:0 0 14px;
  border-radius:13px;background:var(--panel);border:1px solid var(--line);border-left:5px solid var(--oro);
  font-size:.88rem;line-height:1.45;box-shadow:var(--shadow)}
.avviso-modo strong{color:var(--oro-chiaro);display:block;margin-bottom:2px}
.theme-light .avviso-modo strong{color:var(--velluto)}
.avviso-modo em{display:block;margin-top:6px;color:var(--ink-soft);font-style:normal;font-size:.83rem}
.am-icona{font-size:1.5rem;line-height:1;flex:0 0 auto}
@media print{.avviso-modo{display:none!important}}