/* driveawake-h24-home.css - Le 24 ore nella home: lente 9:16 sulla curva, didascalia, visione sopra la home.
   Lotto 2, 27.10.2026, Claude AI · DA - Web v8 Total. Prefissi h3-lens, h3-lcap, h3-vis. Colori del sito; il blu e' la veglia. */
/* .h3-sr: definita in home-v3.css */
/* grafico: la curva resta nelle altezze; la barra scelta e' larga 9:16 */
.h3 .h3-st24.h3-lens{--chH:166px;--selW:calc(var(--chH)*.5625);list-style:none;margin:0;padding:0;height:calc(var(--chH) + 22px);display:grid;grid-template-columns:repeat(24,minmax(0,1fr));gap:4px;align-items:end;touch-action:pan-y;-webkit-user-select:none;user-select:none;transition:grid-template-columns .28s ease}
.h3-lens li{height:100%;min-width:0;margin:0;padding:0}
.h3-lens .h3-st-h{position:relative;height:100%;display:flex;flex-direction:column-reverse;align-items:stretch;-webkit-tap-highlight-color:transparent;text-decoration:none}
.h3-lens .h3-st-n{display:block;height:22px;padding-top:6px;line-height:1}
.h3-lens .h3-st-b{max-height:calc(100% - 22px)}
.h3-lens a.h3-st-h:focus-visible{outline:2px solid var(--h3-blue,#4A9EFF);outline-offset:2px}
/* finestra del fotogramma: a tutta altezza del grafico, visibile solo sulla barra scelta */
.h3-st-w{position:absolute;left:0;right:0;top:0;bottom:22px;border-radius:6px 6px 0 0;overflow:hidden;opacity:0;pointer-events:none;background:#000;transition:opacity .28s}
.h3-st-w img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.h3-lens .sel .h3-st-w{opacity:1}
.h3-lens .sel .h3-st-b{visibility:hidden}
.h3-lens .sel .h3-st-n{color:var(--h3-ink,#F2F4F8);font-weight:600}
/* D1 (Matteo, 27.10): minimale, solo la linea sottile del livello della curva */
.h3-st-l{position:absolute;left:0;right:0;height:0;display:none;pointer-events:none}
.h3-lens .sel .h3-st-l{display:block;bottom:calc(22px + min(var(--bh,0%), 100% - 22px));border-top:1.5px solid var(--h3-blue,#4A9EFF)}
/* D2: il segno di apertura serve solo al tocco */
.h3-st-pl{position:absolute;left:50%;top:calc(50% - 11px);transform:translate(-50%,-50%);width:30px;height:30px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;font-size:11px;display:none;align-items:center;justify-content:center}
@media (hover:none),(pointer:coarse){.h3-lens .sel .h3-st-pl{display:flex}}
/* didascalia stabile */
.h3-lcap{display:grid;grid-template-columns:44px minmax(0,1fr) 44px auto;gap:8px;align-items:center;margin:14px 0 0;padding:10px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(255,255,255,.025)}
.h3-lcap-ar{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.16);background:none;color:var(--h3-ink,#F2F4F8);cursor:pointer;font-size:22px;line-height:1}
.h3-lcap-ar[hidden]{display:none}
.h3-lcap:not(.js){grid-template-columns:minmax(0,1fr) auto}
.h3-lcap-t{margin:0;min-width:0;color:var(--h3-ink,#F2F4F8);font-size:15px;line-height:1.35}
.h3-lcap-t b{font-variant-numeric:tabular-nums;color:var(--h3-blue,#4A9EFF);margin-right:8px}
.h3-lcap-n{font-weight:600}
.h3-lcap-t small{display:block;color:var(--h3-mut,#8B94A1);font-size:12.5px;margin-top:2px}
.h3 .h3-lcap-go{display:inline-flex;align-items:center;gap:6px;min-height:48px;padding:0 18px;border-radius:24px;background:var(--h3-blue,#4A9EFF);color:#06101f;font-weight:600;text-decoration:none;white-space:nowrap;border:0}
@media (max-width:900px){.h3 .h3-st24.h3-lens{--chH:166px}}
/* rifinitura mobile (27.10, proposta da confrontare con Matteo): fascia piu' bassa, didascalia piu' raccolta; comandi sempre >= 44 px */
@media (max-width:720px){
  .h3 .h3-st24.h3-lens{--chH:132px;gap:2px}
  .h3-lens .h3-st-n{font-size:10px;white-space:nowrap;visibility:hidden;margin:0 -6px;text-align:center}
  .h3-lens li:nth-child(3n+1) .h3-st-n,.h3-lens .sel .h3-st-n{visibility:visible}
  .h3-lcap{grid-template-columns:44px minmax(0,1fr) 44px}
  .h3-lcap:not(.js){grid-template-columns:minmax(0,1fr)}
  .h3 .h3-lcap-go{grid-column:1/-1;justify-content:center;min-height:44px}
  .h3-lcap{gap:6px 8px;margin-top:10px;padding:8px}
}
@media (prefers-reduced-motion:reduce){.h3 .h3-st24.h3-lens,.h3-st-w{transition:none}}
/* visione sopra la home */
html.h3-vis-on,html.h3-vis-on body{overflow:hidden}
.h3-vis{position:fixed;inset:0;z-index:2147483000;background:#000;color:#ECEEF1;overflow-y:auto;overscroll-behavior:contain;display:grid;grid-template-columns:minmax(0,1fr);align-content:start;font:16px/1.5 Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
.h3-vis[hidden]{display:none}
.h3-vis button{font:inherit;color:inherit}
.h3-vis :focus-visible{outline:2px solid #4A9EFF;outline-offset:2px}
.h3-vis .h3-vis-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border-radius:22px;border:1px solid rgba(255,255,255,.18);background:transparent;color:#ECEEF1;text-decoration:none;cursor:pointer;font-size:15px}
.h3-vis .h3-vis-btn.p{background:#4A9EFF;border-color:#4A9EFF;color:#06101f;font-weight:600}
.h3-vis-stage{position:relative;height:calc(100svh - 96px);min-height:300px;background:#000;display:flex;align-items:center;justify-content:center;padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left)}
.h3-vis:fullscreen .h3-vis-stage,.h3-vis:-webkit-full-screen .h3-vis-stage{height:100vh}
.h3-vis video{max-width:100%;max-height:100%;height:100%;aspect-ratio:9/16;object-fit:contain;background:#000}
.h3-vis video::cue{font-size:clamp(14px,2.4vh,20px);background:rgba(0,0,0,.65)}
.h3-vis-surf{position:absolute;inset:0;touch-action:pan-y}
.h3-vis-top{position:absolute;left:0;right:0;top:0;display:flex;gap:8px;align-items:flex-start;padding:calc(10px + env(safe-area-inset-top)) calc(10px + env(safe-area-inset-right)) 24px calc(14px + env(safe-area-inset-left));background:linear-gradient(180deg,rgba(0,0,0,.75),rgba(0,0,0,0))}
.h3-vis-t{flex:1;min-width:0;margin:6px 0 0;font-size:clamp(17px,2.4vw,22px);line-height:1.25;font-weight:600;color:#ECEEF1}
.h3-vis-t b{color:#4A9EFF;font-variant-numeric:tabular-nums;margin-right:8px}
.h3-vis-t:focus{outline:none}
.h3-vis-lang{display:flex;gap:2px}
.h3-vis-lang button{min-width:40px;min-height:44px;border:0;background:none;color:#A8B2C0;cursor:pointer;border-radius:8px;font-size:13px}
.h3-vis-lang button[aria-pressed="true"]{color:#ECEEF1;background:rgba(255,255,255,.12)}
.h3-vis-x{width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.12);cursor:pointer;font-size:18px}
.h3-vis-nav{position:absolute;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:6px;min-width:48px;min-height:64px;padding:0 10px;border:0;background:rgba(0,0,0,.42);color:#fff;cursor:pointer;font-size:30px}
.h3-vis-prev{left:env(safe-area-inset-left);border-radius:0 12px 12px 0}
.h3-vis-next{right:env(safe-area-inset-right);border-radius:12px 0 0 12px}
.h3-vis-nl{font-size:12.5px;line-height:1.25;font-variant-numeric:tabular-nums}
.h3-vis-big{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:76px;height:76px;border-radius:50%;border:0;background:rgba(74,158,255,.92);color:#06101f;font-size:28px;cursor:pointer}
.h3-vis-msg{position:absolute;left:50%;top:62%;transform:translateX(-50%);max-width:min(90%,420px);padding:10px 14px;border-radius:12px;background:rgba(0,0,0,.75);text-align:center;font-size:14px}
.h3-vis-msg .h3-vis-btn{margin:8px 4px 0}
.h3-vis-end{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(92%,420px);padding:18px;border-radius:16px;background:rgba(14,15,19,.94);border:1px solid rgba(255,255,255,.08);text-align:center}
.h3-vis-end p{margin:0}.h3-vis-end .k{color:#8B94A1;font-size:13px}.h3-vis-end .t{margin:4px 0;font-weight:600;font-size:18px}.h3-vis-end .c{margin:0 0 10px;color:#A8B2C0;font-size:13px}
.h3-vis-end .b{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.h3-vis-bar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:4px;padding:28px calc(8px + env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) calc(8px + env(safe-area-inset-left));background:linear-gradient(0deg,rgba(0,0,0,.8),rgba(0,0,0,0))}
.h3-vis-c{min-width:44px;height:44px;border:0;background:none;cursor:pointer;font-size:15px;border-radius:8px;padding:0 6px}
.h3-vis-c[aria-pressed="true"]{background:rgba(255,255,255,.16)}
.h3-vis-seek{flex:1;min-width:60px;height:44px;accent-color:#4A9EFF;margin:0}
.h3-vis-time{font-size:12px;font-variant-numeric:tabular-nums;color:#A8B2C0;white-space:nowrap}
.h3-vis-info{max-width:780px;margin:0 auto;padding:16px 16px calc(32px + env(safe-area-inset-bottom));color:#A8B2C0}
.h3-vis-claim{color:#ECEEF1;font-size:18px;margin:0 0 6px}
.h3-vis-meta{margin:0 0 12px;font-size:13.5px;color:#8B94A1}
.h3-vis-chap{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.h3-vis-chap button{min-height:36px;padding:0 12px;border-radius:18px;border:1px solid rgba(255,255,255,.08);background:none;color:#A8B2C0;cursor:pointer;font-size:13px}
.h3-vis-chap button[aria-current="true"]{border-color:#4A9EFF;color:#ECEEF1}
.h3-vis-k{margin:0;color:#FF6B35;font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.h3-vis-src p{margin:4px 0;font-size:14px}.h3-vis-src a{color:#4A9EFF}
.h3-vis-src summary{cursor:pointer;min-height:36px;display:flex;align-items:center}
.h3-vis-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.h3-vis-copyalt{display:flex;flex-direction:column;gap:4px;flex:1 1 100%;font-size:13px;color:#A8B2C0}.h3-vis-copyalt[hidden]{display:none}
.h3-vis-copyalt input{width:100%;min-height:40px;padding:0 10px;border-radius:8px;border:1px solid rgba(255,255,255,.18);background:#0E0F13;color:#ECEEF1;font:13px/1.2 ui-monospace,Menlo,monospace}
@media (max-width:720px){.h3-vis-stage{height:calc(100svh - 72px)}.h3-vis-nl{display:none}.h3-vis-time{display:none}.h3-vis-lang button{min-width:36px}.h3-vis-c{min-width:40px}}
@media (min-width:1024px){.h3-vis{grid-template-columns:minmax(0,1fr) 360px}.h3-vis-stage{height:100vh;grid-row:1}.h3-vis-info{grid-row:1;height:100vh;overflow:auto;padding-top:72px;margin:0;border-left:1px solid rgba(255,255,255,.08)}}