/* SP-IN · Copyright (c) 2026 Diego Cavalli. Tutti i diritti riservati.
   Autore: Diego Cavalli. È vietato copiare, modificare, distribuire o usare questo codice, in tutto o in parte, senza l'autorizzazione scritta dell'autore. */
/* Guida al referto · classi .rgd-* · design system del referto (tokens.css + components.css v1). */

/* ---------- benvenuto ---------- */
.rgd-wel{max-width:1132px;margin:0 auto;padding:var(--space-24);display:flex;flex-direction:column;gap:var(--space-20);font-family:var(--font-body);color:var(--ink)}
.rgd-hero{display:flex;align-items:center;gap:28px;padding:28px 32px;border-radius:var(--radius-lg);background:var(--scorebox);color:#fff}
.rgd-hero-c{flex:none;padding:8px 4px}
.rgd-court{display:block;filter:drop-shadow(0 14px 24px rgba(0,0,0,.35))}
.rgd-cf{fill:var(--primary);stroke:#fff;stroke-width:4}
.rgd-cl{fill:none;stroke:#fff;stroke-width:3}
.rgd-bb{stroke-width:4}.rgd-sb{stroke-width:5}.rgd-dash{stroke-dasharray:7 6;stroke-width:2}
.rgd-hp{fill:#fff;stroke:var(--scorebox);stroke-width:3.5}.rgd-hp-lo{fill:var(--scorebox)}
.rgd-hero-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px}
.rgd-kick{font-size:var(--fs-12);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#9bcbf2}
.rgd-hero h1{margin:0;font-size:34px;font-weight:800;letter-spacing:-.01em;line-height:1.05}
.rgd-hero p{margin:0;max-width:620px;font-size:16px;line-height:1.5;color:#dde3e8}
.rgd-dur{flex:none;display:flex;flex-direction:column;align-items:center;gap:2px;padding:14px 18px;border-radius:14px;background:rgba(255,255,255,.08)}
.rgd-dur b{font-family:var(--font-mono,"JetBrains Mono",monospace);font-size:30px;font-weight:500}
.rgd-dur small{font-size:16px}
.rgd-dur span{font-size:var(--fs-12);color:#c9d0d6}
.rgd-phs{display:flex;gap:var(--space-16)}
.rgd-ph{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px;padding:18px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface)}
.rgd-ph header{display:flex;align-items:center;gap:12px}
.rgd-ph header b{font-size:var(--fs-20);font-weight:800}
.rgd-n{width:32px;height:32px;flex:none;display:grid;place-items:center;border-radius:var(--radius-round);background:var(--primary-fill);color:var(--on-fill);font-weight:800}
.rgd-ph-i{margin-left:auto;color:var(--primary);display:grid}
.rgd-ph p{margin:0;font-size:var(--fs-14);line-height:1.45;color:var(--muted)}
.rgd-ph ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.rgd-ph li{display:flex;gap:8px;align-items:flex-start;font-size:var(--fs-14);line-height:1.35}
.rgd-ph li .rgd-i{flex:none;margin-top:1px;color:var(--ok)}
.rgd-act{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-top:4px}
.rgd-grow{flex:1}
.rgd-mute{display:inline-flex;align-items:center;gap:10px;font-size:var(--fs-14);color:var(--muted);cursor:pointer}
.rgd-mute input{width:22px;height:22px;margin:0;accent-color:var(--primary-fill)}
.rgd-where{margin:0;display:flex;align-items:center;gap:10px;font-size:var(--fs-14);color:var(--muted)}
.rgd-where .rgd-i{box-sizing:content-box;padding:5px;border:1.5px solid var(--line-strong);border-radius:var(--radius-round);color:var(--ink)}
.rgd-where b{color:var(--ink)}
/* PC piccolo / tablet verticale */
@media (max-width:980px){
  .rgd-hero{flex-wrap:wrap}.rgd-hero-c{order:-1}.rgd-hero-t{flex-basis:100%}.rgd-dur{display:none}
  .rgd-phs{flex-direction:column}
}

/* ---------- giro guidato ---------- */
.rgd-layer{position:fixed;inset:0;z-index:1000;font-family:var(--font-body);color:var(--ink)}
.rgd-block{position:absolute;inset:0;background:transparent}       /* niente tocchi sull'app durante la guida */
.rgd-layer.is-free .rgd-block{background:rgba(20,32,43,.66)}
.rgd-spot{position:absolute;box-shadow:0 0 0 3px #fff,0 0 0 9999px rgba(20,32,43,.66);pointer-events:none;transition:left .25s var(--ease,ease),top .25s var(--ease,ease),width .25s var(--ease,ease),height .25s var(--ease,ease)}
.rgd-card{position:absolute;box-sizing:border-box;display:flex;flex-direction:column;gap:10px;padding:18px 18px 14px;border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-3);outline:none;transition:left .25s var(--ease,ease),top .25s var(--ease,ease),opacity .15s}
.rgd-layer.is-busy .rgd-card{opacity:0}
.rgd-arrow{position:absolute;width:16px;height:16px;background:var(--surface);transform:rotate(45deg);border-radius:2px}
.rgd-arrow[data-side=bottom]{top:-8px}.rgd-arrow[data-side=top]{bottom:-8px}
.rgd-arrow[data-side=right]{left:-8px}.rgd-arrow[data-side=left]{right:-8px}
.rgd-card header{display:flex;align-items:center;justify-content:space-between}
.rgd-step{font-size:var(--fs-12);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.rgd-exit{border:0;background:none;padding:6px 0 6px 12px;font-size:var(--fs-13);font-weight:700;color:var(--muted)}
.rgd-exit:hover{color:var(--ink)}
.rgd-body{display:flex;gap:12px;align-items:flex-start}
.rgd-ic{width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:var(--radius-round);background:var(--primary-soft,#dcefff);color:var(--primary)}
.rgd-body h2{margin:0 0 6px;font-size:var(--fs-20);font-weight:800;letter-spacing:-.01em;line-height:1.15}
.rgd-body p{margin:0;font-size:var(--fs-15);line-height:1.45}
.rgd-card footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:6px}
.rgd-dots{display:inline-flex;gap:6px;align-items:center}
.rgd-dots i{width:7px;height:7px;border-radius:var(--radius-pill);background:var(--line-strong);opacity:.55}
.rgd-dots i.on{width:18px;background:var(--primary);opacity:1}
.rgd-btns{display:inline-flex;gap:8px}
.rgd-btns .btn{height:40px}
.rgd-btns .btn svg{width:16px;height:16px}
.rgd-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- fine guida ---------- */
.rgd-scrim{position:fixed;inset:0;z-index:1000;background:rgba(20,32,43,.66)}
.rgd-end{position:fixed;z-index:1001;left:50%;top:50%;transform:translate(-50%,-50%);width:min(600px,calc(100vw - 32px));box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:16px;padding:30px;border-radius:20px;background:var(--surface);box-shadow:var(--shadow-3);text-align:center;font-family:var(--font-body);color:var(--ink)}
.rgd-end-i{width:64px;height:64px;display:grid;place-items:center;border-radius:var(--radius-round);background:var(--ok-soft);color:var(--ok)}
.rgd-end h2{margin:0;font-size:28px;font-weight:800}
.rgd-end p{margin:0;max-width:480px;font-size:var(--fs-15);line-height:1.5;color:var(--muted)}
.rgd-end p b{color:var(--ink)}
.rgd-end div{display:flex;gap:10px;padding-top:6px}

/* ---------- voto ---------- */
.rgd-vote{display:flex;flex-direction:column;gap:14px;padding:22px 24px}
.rgd-vote h2{margin:0;font-size:22px;font-weight:800}
.rgd-vote-sub{margin:-8px 0 0;font-size:var(--fs-14);color:var(--muted)}
.rgd-stars{display:flex;align-items:center;gap:10px}
.rgd-stars button{border:0;background:none;padding:0;color:var(--line-strong);display:grid;border-radius:var(--radius-sm)}
.rgd-stars button.on{color:#ff9300}
.rgd-stars button.on svg{fill:currentColor}
.rgd-star-l{margin-left:8px;font-size:16px}
.rgd-tags{margin:0;padding:0;border:0;display:flex;flex-wrap:wrap;gap:8px}
.rgd-tags legend{padding:0;margin-bottom:8px;font-size:var(--fs-13);font-weight:700}
.rgd-tags button{height:38px;padding:0 16px;border-radius:var(--radius-pill);border:1.5px solid var(--line-strong);background:var(--surface);color:var(--ink);font-size:var(--fs-14);font-weight:700}
.rgd-tags button[aria-pressed=true]{border-color:var(--primary);background:var(--primary-soft,#dcefff);color:var(--primary)}
.rgd-note{min-height:76px;box-sizing:border-box;padding:10px 12px;border:1.5px solid var(--line-strong);border-radius:var(--radius-md);background:var(--surface);color:var(--ink);font:inherit;font-size:var(--fs-15);resize:vertical}
.rgd-vote-act{display:flex;justify-content:flex-end;gap:10px}
.rgd-vote-done{margin:0;display:flex;align-items:center;gap:10px;padding:16px 20px;font-weight:700}
.rgd-vote-done .rgd-i{color:var(--ok)}

@media (prefers-reduced-motion:reduce){.rgd-spot,.rgd-card{transition:none}}

/* SP-IN (2026-10-26): pagina della guida (Tuo profilo › Guida al referto) e benvenuto a tutto schermo sopra il referto */
.rgd-page{flex:1;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch}
.rgd-ov{position:fixed;inset:0;z-index:900;display:flex;flex-direction:column;padding:var(--top-pad,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);background:var(--bg)}
.rgd-ov>.appbar{flex:none}
.rgd-note-ph{max-width:640px;margin:var(--space-24) auto;padding:0 var(--space-16)}

/* SP-IN (2026-10-27, Diego): pulsante "Guida" accanto a quello che avvia il referto (Compila, Continua la preparazione,
   Riprendi). Insieme occupano lo spazio del solo pulsante principale; la guida è stretta e nei colori opposti (fondo chiaro,
   testo e bordo nel colore del principale). --rg-c: colore del pulsante principale. */
.rgd-row{display:flex;gap:var(--space-8);align-items:stretch;min-width:0}
.rgd-row>.btn:first-child{flex:1;min-width:0}
.btn.rgd-btn{flex:none;gap:6px;padding:0 var(--space-12);background:var(--surface);color:var(--rg-c,var(--primary-fill));border:2px solid var(--rg-c,var(--primary-fill))}
.btn.rgd-btn svg{width:18px;height:18px}
.btn.rgd-btn.rgd-btn--ok{--rg-c:var(--ok-fill)}
/* registri della v2 (pagina dell'evento): pulsanti inclinati, il fondo è nel ::before; il principale pieno è --action o --ok-fill */
.sp[data-register] .btn.rgd-btn{color:var(--action);border:0;background:none}
.sp[data-register] .btn.rgd-btn::before{background:var(--surface);box-shadow:inset 0 0 0 2px var(--action)}
.sp[data-register] .btn.rgd-btn.rgd-btn--ok{color:var(--ok-fill)}
.sp[data-register] .btn.rgd-btn.rgd-btn--ok::before{box-shadow:inset 0 0 0 2px var(--ok-fill)}

/* SP-IN (2026-10-27, Diego): su tablet, nel browser, il referto si apre solo dall'icona sulla schermata Home (appNeedHTML) */
.appneed{display:flex;flex-direction:column;gap:var(--space-8);padding:var(--space-16);border-radius:var(--radius-md);background:var(--primary-soft,#dcefff);color:var(--ink);font-size:var(--fs-15);line-height:1.45}
.appneed-t{font-size:var(--fs-17)}
.appneed p{margin:0}
.appneed ol{margin:0;padding-left:1.4em;display:flex;flex-direction:column;gap:var(--space-4)}
.appneed .btn{align-self:flex-start}
.appneed-n{color:var(--muted);font-size:var(--fs-14)}
.appneed-bar{flex:none;display:flex;align-items:center;gap:var(--space-12);padding:var(--space-8) var(--space-16);background:var(--primary-soft,#dcefff);color:var(--ink);font-size:var(--fs-14);font-weight:600}
.appneed-bar .btn{flex:none;height:36px}