/* reset minimo */
*{margin:0}
img{max-width:100%}
[hidden]{display:none!important}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}

  /* Palette presa dalla locandina stessa: il rosso del cerchio dietro al
     cavallo, il blu della scritta FestivASL, la carta del programma di sala.
     Chiaro di giorno; chi ha il telefono in modalità scura in platea riceve
     la versione notturna, così in sala non si accendono 200 schermi bianchi. */
  :root{
    --ground:#F2F5FA;
    --ground-2:#E8EDF7;
    --surface:#FFFFFF;
    --surface-hi:#F6F9FE;
    --line:#CFD8E8;
    --line-soft:#E1E8F3;
    --ink:#18223C;
    --ink-soft:#4C5A79;
    --ink-faint:#7C89A4;
    --rosso:#B4232C;
    --rosso-hi:#C9323B;
    --rosso-tenue:#FAEBEC;
    --blu:#22418F;
    --verde:#2E8B59;
    --velo:rgba(180,35,44,.07);
    --ombra:0 1px 2px rgba(24,34,60,.05),0 10px 28px -14px rgba(24,34,60,.30);
    --ombra-carta:0 2px 4px rgba(24,34,60,.06),0 22px 48px -20px rgba(24,34,60,.42);
    --display:"Bodoni Moda","Didot",Georgia,"Times New Roman",serif;
    --ui:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  }
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]){
      --ground:#0D1424;
      --ground-2:#141D33;
      --surface:#18223B;
      --surface-hi:#202C49;
      --line:#313E60;
      --line-soft:#243050;
      --ink:#EDF1FA;
      --ink-soft:#A8B4CC;
      --ink-faint:#7A87A3;
      --rosso:#E4606A;
      --rosso-hi:#EE7B83;
      --rosso-tenue:rgba(228,96,106,.13);
      --blu:#8AA4EC;
      --verde:#4FB37C;
      --velo:rgba(228,96,106,.10);
      --ombra:0 1px 2px rgba(0,0,0,.35),0 10px 28px -14px rgba(0,0,0,.7);
      --ombra-carta:0 2px 6px rgba(0,0,0,.4),0 24px 52px -20px rgba(0,0,0,.8);
    }
  }
  :root[data-theme="dark"]{
    --ground:#0D1424;
    --ground-2:#141D33;
    --surface:#18223B;
    --surface-hi:#202C49;
    --line:#313E60;
    --line-soft:#243050;
    --ink:#EDF1FA;
    --ink-soft:#A8B4CC;
    --ink-faint:#7A87A3;
    --rosso:#E4606A;
    --rosso-hi:#EE7B83;
    --rosso-tenue:rgba(228,96,106,.13);
    --blu:#8AA4EC;
    --verde:#4FB37C;
    --velo:rgba(228,96,106,.10);
    --ombra:0 1px 2px rgba(0,0,0,.35),0 10px 28px -14px rgba(0,0,0,.7);
    --ombra-carta:0 2px 6px rgba(0,0,0,.4),0 24px 52px -20px rgba(0,0,0,.8);
  }

  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    background:var(--ground);
    background-image:radial-gradient(125% 52% at 50% -10%,var(--velo),transparent 62%);
    background-repeat:no-repeat;
    color:var(--ink);
    font-family:var(--ui);
    font-size:16px;line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  .app{min-height:100%;display:flex;flex-direction:column}

  .topbar{
    position:sticky;top:env(safe-area-inset-top,0px);z-index:20;
    background:linear-gradient(to bottom,var(--ground) 72%,transparent);
    padding:12px 16px 20px;
    display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;
  }
  .brand{display:flex;align-items:baseline;gap:9px;min-width:0}
  .brand b{font-family:var(--display);font-weight:700;font-size:20px;white-space:nowrap}
  .brand span{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);white-space:nowrap}
  .switch{display:flex;gap:2px;background:var(--ground-2);border:1px solid var(--line-soft);border-radius:999px;padding:3px}
  .switch button{
    font:inherit;font-size:12px;font-weight:600;letter-spacing:.03em;
    color:var(--ink-soft);background:none;border:0;border-radius:999px;
    padding:7px 14px;cursor:pointer;white-space:nowrap;
  }
  .switch button[aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--ombra)}
  .switch button:hover{color:var(--ink)}

  main{flex:1;padding:0 16px 48px}
  .wrap{max-width:860px;margin:0 auto;width:100%}
  .stretto{max-width:520px;margin:0 auto;width:100%}

  .avviso{
    max-width:520px;margin:0 auto 20px;width:100%;
    display:flex;gap:9px;align-items:flex-start;
    border:1px solid var(--line);border-left:3px solid var(--rosso);border-radius:6px;
    padding:11px 14px;background:var(--rosso-tenue);
    font-size:12.5px;line-height:1.45;color:var(--ink-soft);
  }
  .avviso b{color:var(--rosso);font-weight:600}

  /* ---------- la locandina, intatta ---------- */
  .locandina{
    background:#fff;border-radius:6px;
    padding:18px 16px 22px;
    box-shadow:var(--ombra-carta);
    display:flex;flex-direction:column;align-items:center;gap:14px;
  }
  .testata{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;width:100%}
  .testata img{display:block;height:auto}
  .testata .sst{width:82px}
  .testata .scritta{width:min(228px,58%)}
  .testata .cuore{width:48px}
  .locandina .cavallo{display:block;width:100%;max-width:330px;height:auto;border-radius:3px}

  .richiamo{
    font-family:var(--display);font-weight:700;
    font-size:clamp(25px,6.6vw,34px);line-height:1.12;text-align:center;
    text-wrap:balance;margin:26px 0 0;
  }
  .richiamo em{font-style:italic;color:var(--rosso)}

  /* ---------- scheda di voto ---------- */
  .urna{
    margin-top:18px;background:var(--surface);
    border:1px solid var(--line);border-top:3px solid var(--rosso);
    border-radius:8px;padding:20px;box-shadow:var(--ombra);
  }
  .stato-riga{display:flex;align-items:center;gap:8px;margin-bottom:16px}
  .pallino{width:8px;height:8px;border-radius:50%;background:var(--ink-faint);flex:none}
  .pallino.aperto{background:var(--verde);box-shadow:0 0 0 4px rgba(46,139,89,.16)}
  .pallino.chiuso{background:var(--rosso)}
  .stato-testo{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--ink-soft)}

  label.etichetta{display:block;font-size:13px;color:var(--ink-soft);margin-bottom:8px}
  .tendina{position:relative}
  .tendina::after{
    content:"";position:absolute;right:16px;top:50%;width:9px;height:9px;
    border-right:2px solid var(--rosso);border-bottom:2px solid var(--rosso);
    transform:translateY(-70%) rotate(45deg);pointer-events:none;
  }
  select{
    font:inherit;font-size:16px;font-weight:500;width:100%;
    appearance:none;-webkit-appearance:none;
    background:var(--ground-2);color:var(--ink);
    border:1px solid var(--line);border-radius:6px;
    padding:15px 42px 15px 15px;cursor:pointer;
  }
  select:hover:not(:disabled){border-color:var(--rosso)}
  select:disabled{opacity:.5;cursor:not-allowed}

  .btn{
    font:inherit;font-size:14px;font-weight:600;letter-spacing:.01em;
    padding:12px 18px;border-radius:6px;cursor:pointer;
    background:var(--surface);color:var(--ink);border:1px solid var(--line);
  }
  .btn:hover:not(:disabled){background:var(--surface-hi);border-color:var(--ink-faint)}
  .btn:disabled{opacity:.42;cursor:not-allowed}
  .btn.primario{background:var(--rosso);border-color:var(--rosso);color:#fff}
  .btn.primario:hover:not(:disabled){background:var(--rosso-hi);border-color:var(--rosso-hi)}
  .btn.pericolo{color:var(--rosso);border-color:var(--line);background:none}
  .btn.pericolo:hover:not(:disabled){background:var(--rosso-tenue);border-color:var(--rosso)}
  .btn.largo{width:100%;padding:15px;font-size:15px;margin-top:12px}

  .esito{border:1px solid var(--line);border-radius:6px;background:var(--ground-2);padding:18px;text-align:center}
  .esito .occhiello{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--rosso);font-weight:700}
  .esito .nome{font-family:var(--display);font-weight:700;font-size:clamp(21px,5vw,27px);line-height:1.15;margin:7px 0 2px;text-wrap:balance}
  .esito .canz{font-family:var(--display);font-style:italic;font-size:15px;color:var(--ink-soft);margin:0}
  .esito .nota{font-size:12.5px;color:var(--ink-faint);margin:13px 0 0}
  .esito .btn{margin-top:14px}
  .chiusa{text-align:center;color:var(--ink-soft);font-size:14.5px;margin:0;padding:6px 0}

  /* ---------- scaletta ---------- */
  .sezione{padding-block:26px 0}
  .sezione h2{
    font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.2em;
    text-transform:uppercase;color:var(--ink-faint);margin:0 0 12px;
  }
  .scaletta{list-style:none;margin:0;padding:0;border:1px solid var(--line-soft);border-radius:8px;overflow:hidden;background:var(--surface);box-shadow:var(--ombra)}
  .scaletta li+li{border-top:1px solid var(--line-soft)}
  .voce{display:flex;align-items:center;gap:14px;padding:13px 15px;width:100%;text-align:left}
  button.voce{background:none;border:0;font:inherit;color:var(--ink);cursor:pointer}
  button.voce:hover{background:var(--surface-hi)}
  .scaletta li.sul-palco{background:var(--rosso-tenue);box-shadow:inset 3px 0 0 var(--rosso)}
  .ord{font-family:var(--display);font-size:15px;color:var(--ink-faint);font-variant-numeric:tabular-nums;flex:none;width:22px}
  .scaletta li.sul-palco .ord{color:var(--rosso)}
  .nomi{flex:1;min-width:0}
  .nomi b{display:block;font-weight:600;font-size:15px;overflow-wrap:anywhere}
  .nomi span{display:block;font-family:var(--display);font-style:italic;font-size:13.5px;color:var(--ink-faint);overflow-wrap:anywhere}
  .chip{
    flex:none;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
    color:#fff;background:var(--rosso);border-radius:999px;padding:5px 10px;
  }
  .cifre{flex:none;text-align:right;font-variant-numeric:tabular-nums}
  .cifre b{display:block;font-size:16px;font-weight:600}
  .cifre span{display:block;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
  .pie{font-size:12px;color:var(--ink-faint);margin:12px 0 0;text-align:center}

  /* ---------- regia ---------- */
  .quadro{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);border-radius:8px;overflow:hidden;box-shadow:var(--ombra)}
  .cella{background:var(--surface);padding:14px 15px}
  .cella dt{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 5px}
  .cella dd{margin:0;font-size:19px;font-weight:600;font-variant-numeric:tabular-nums}
  .cella dd.piccolo{font-size:15px;font-weight:500;line-height:1.3}
  .comandi{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
  details{border:1px solid var(--line-soft);border-radius:8px;background:var(--surface);margin-top:12px;box-shadow:var(--ombra)}
  summary{padding:12px 15px;cursor:pointer;font-size:13px;font-weight:600;color:var(--ink-soft)}
  summary:hover{color:var(--ink)}
  .corpo-details{padding:0 15px 15px;display:flex;flex-direction:column;gap:10px}
  textarea{
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;line-height:1.75;
    width:100%;min-height:158px;resize:vertical;
    background:var(--ground-2);color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:11px 12px;
  }
  .aiuto{font-size:12px;color:var(--ink-faint);margin:0}
  .qr-blocco{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
  .qr-cassa{background:#fff;padding:10px;border-radius:6px;line-height:0;flex:none;border:1px solid var(--line);box-shadow:var(--ombra)}
  .qr-cassa img,.qr-cassa canvas{display:block;width:124px;height:124px}
  .indirizzo{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:var(--ink-soft);overflow-wrap:anywhere;min-width:180px;flex:1}

  /* grafico dei parziali: una sola serie, quindi un solo colore; il nome
     dell'artista è testo, non colore. Barre scalate sul primo in classifica. */
  .grafico{background:var(--surface);border:1px solid var(--line-soft);border-radius:8px;box-shadow:var(--ombra);padding:15px}
  .grafico-testa{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:16px}
  .grafico-testa .tendina{flex:1;min-width:210px}
  .grafico-testa select{font-size:14px;padding:10px 38px 10px 12px}
  .barre{list-style:none;margin:0;padding:0;display:grid;gap:13px}
  .barre li{border-radius:4px}
  .barra-testa{display:flex;align-items:baseline;gap:10px}
  .barra-testa b{flex:1;min-width:0;font-weight:600;font-size:14.5px;overflow-wrap:anywhere}
  .barra-testa .delta{flex:none;font-size:12px;color:var(--ink-faint);font-variant-numeric:tabular-nums}
  .barra-testa .val{flex:none;font-size:14.5px;font-weight:600;font-variant-numeric:tabular-nums;min-width:74px;text-align:right}
  .barra-testa .val small{font-size:12px;font-weight:400;color:var(--ink-faint);margin-left:5px}
  .traccia{height:10px;margin-top:5px;border-radius:4px;background:var(--ground-2)}
  .riempi{height:100%;border-radius:4px;background:var(--blu)}
  .barre li:hover .riempi{background:var(--ink)}
  .grafico .aiuto{margin-top:14px}

  /* ---------- maxischermo ---------- */
  .maxi{padding-block:12px;text-align:center}
  .maxi h1{font-family:var(--display);font-weight:700;font-size:clamp(30px,6.4vw,54px);margin:0 0 4px;text-wrap:balance}
  .maxi .sotto{color:var(--ink-faint);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;margin:0 0 26px}
  .sigillo{border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:38px 22px;margin-bottom:18px;box-shadow:var(--ombra)}
  .sigillo .grande{font-family:var(--display);font-style:italic;font-size:clamp(21px,4.6vw,31px);color:var(--rosso);margin:0 0 10px}
  .sigillo p{margin:0;color:var(--ink-soft);font-size:14.5px}
  .podio{display:grid;gap:9px}
  .posto{display:flex;align-items:center;gap:16px;text-align:left;background:var(--surface);border:1px solid var(--line-soft);border-radius:8px;padding:15px 18px;box-shadow:var(--ombra)}
  .posto.p1{border-color:var(--rosso);background:linear-gradient(90deg,var(--rosso-tenue),var(--surface) 64%)}
  .posto.p2,.posto.p3{border-color:var(--line)}
  .pos-num{font-family:var(--display);font-weight:700;font-size:clamp(29px,6vw,44px);color:var(--ink-faint);flex:none;width:52px;text-align:center;font-variant-numeric:tabular-nums}
  .posto.p1 .pos-num{color:var(--rosso)}
  .posto.p2 .pos-num,.posto.p3 .pos-num{color:var(--blu)}
  .pos-nomi{flex:1;min-width:0}
  .pos-nomi b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(18px,3.7vw,27px);line-height:1.15;overflow-wrap:anywhere}
  .pos-nomi span{display:block;font-family:var(--display);font-style:italic;font-size:14px;color:var(--ink-faint);overflow-wrap:anywhere}
  .pos-voto{flex:none;text-align:right;font-variant-numeric:tabular-nums}
  .pos-voto b{display:block;font-family:var(--display);font-size:clamp(23px,4.6vw,33px);font-weight:700}
  .pos-voto span{display:block;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}

  /* strumenti della pagina classifica: piccoli, non devono rubare la scena */
  .strumenti{display:flex;gap:8px;justify-content:center;margin:0 0 22px}
  .strumenti .btn{font-size:12.5px;padding:8px 14px}
  .solo-stampa{display:none}

  /* Su carta: nero su bianco, niente ombre, niente pulsanti. Serve a chi legge
     i risultati dal palco, e come scorta se il portatile fa i capricci. */
  @media print{
    :root{
      --ground:#fff;--ground-2:#fff;--surface:#fff;--surface-hi:#fff;
      --line:#999;--line-soft:#ccc;--ink:#000;--ink-soft:#222;--ink-faint:#555;
      --rosso:#000;--blu:#000;--velo:transparent;--ombra:none;--ombra-carta:none;
    }
    body{background:#fff!important;background-image:none!important;color:#000;font-size:12pt}
    .no-stampa,.topbar,.sigillo,.strumenti{display:none!important}
    .solo-stampa{display:block!important}
    main{padding:0}
    .maxi{padding-block:0}
    .maxi h1{font-size:21pt;margin-bottom:1.5mm}
    .maxi .sotto{font-size:8.5pt;margin-bottom:4mm}
    /* Stretto quanto basta: 18 artisti devono stare in un foglio solo. */
    .podio{gap:.7mm}
    .posto{break-inside:avoid;page-break-inside:avoid;gap:5mm;padding:.7mm 4mm;box-shadow:none;background:#fff!important}
    .posto.p1{background:#fff!important;border-color:#000;border-width:1.5px}
    .pos-num{font-size:12pt;width:9mm}
    .pos-nomi b{font-size:10pt;line-height:1.2}
    .pos-nomi span{font-size:8.5pt;line-height:1.2}
    .pos-voto b{font-size:11pt}
    .pos-voto span{font-size:7pt}
    .piede-stampa{margin-top:4mm;font-size:8pt;color:#444;text-align:center}
  }

  :where(button,summary,textarea,select,a):focus-visible{outline:2px solid var(--rosso);outline-offset:2px}
  @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
  @media (max-width:420px){
    .brand span{display:none}
    .switch button{padding:7px 10px;font-size:11.5px}
  }