/* C'è sciopero? — direzione "The quiet instrument": colonna unica, bianco e blu notte,
   l'arancio solo sull'azione Telegram. Display Young Serif, testo Source Serif 4. */
@font-face{font-family:"Young Serif";src:url(/assets/fonts/young-serif.woff) format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url(/assets/fonts/source-serif-4.woff) format("woff");font-weight:400 600;font-display:swap}
:root{
  --bg:#ffffff; --surface:#f4f4f2; --ink:#1f2b4d; --muted:#525a70; --accent:#f7941d; --accent-ink:#1f2b4d;
  --field-dark:#0b1020; --field-dark-ink:#ffffff; --field-dark-muted:#b7bdd0; --field-warm:#e3e1dc;
  --strike:#1f2b4d; --open:#e3e1dc; --now:#f7941d; --revoked:#8a90a2;
  --display:"Young Serif",Georgia,"Times New Roman",serif; --text:"Source Serif 4",Georgia,"Times New Roman",serif;
  --step-small:clamp(.9375rem,.92rem + .1vw,1rem); --step-body:clamp(1.0625rem,1rem + .3vw,1.25rem);
  --step-lead:clamp(1.25rem,1.1rem + .6vw,1.5rem); --step-head:clamp(1.75rem,1.3rem + 1.8vw,2.5rem); --step-display:clamp(2.6rem,1.4rem + 4.6vw,5.25rem);
  --col:720px; --m:max(20px,env(safe-area-inset-left,0px)); --ease:cubic-bezier(.23,1,.32,1);
  color-scheme:light;
}
*{box-sizing:border-box}
html{background:var(--bg);color:var(--ink);-webkit-text-size-adjust:100%}
body{margin:0;font:400 var(--step-body)/1.55 var(--text);background:var(--bg);color:var(--ink);font-variant-numeric:lining-nums}
a{color:inherit;text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
img{max-width:100%;height:auto}
h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:-.02em;text-wrap:balance;margin:0}
h1{font-size:var(--step-display);line-height:.98}
h2{font-size:var(--step-head);line-height:1.08}
h3{font-size:var(--step-lead);line-height:1.2}
p{margin:0;text-wrap:pretty}
.wrap{width:min(var(--col),100% - 40px);margin-inline:auto}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:12px;background:var(--bg);padding:8px 12px;z-index:5}

/* barra */
.top{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;padding:24px var(--m);padding-right:max(20px,env(safe-area-inset-right,0px))}
.marchio{font-family:var(--display);font-size:1.25rem;text-decoration:none;white-space:nowrap}
.nav{display:flex;gap:6px 22px;flex-wrap:wrap;font-size:var(--step-small)}
.nav a{text-decoration:none;padding:6px 0}
.nav a.nav-tg{background:var(--accent);color:var(--accent-ink);padding:6px 12px;font-weight:600}
.nav a:hover,.nav a[aria-current]{text-decoration:underline}

/* apertura */
.apertura{padding-top:clamp(28px,6vh,72px)}
.lead{margin-top:20px;font-size:var(--step-lead);line-height:1.4;max-width:34ch}
.agg{margin-top:14px;font-size:var(--step-small);color:var(--muted)}

/* strumento */
.strumento{margin-top:40px;background:var(--surface);padding:28px 32px 32px;margin-inline:-32px}
.scelta{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center}
.scelta select{font:600 var(--step-body)/1.2 var(--text);color:var(--ink);background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231f2b4d' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 14px center;border:0;padding:12px 42px 12px 14px;appearance:none;cursor:pointer;max-width:100%;min-height:48px}
.giorni{display:inline-flex;gap:4px}
.giorni button{font:inherit;font-size:var(--step-small);background:none;border:0;color:var(--muted);padding:10px 14px;cursor:pointer;min-height:44px;transition:color .18s var(--ease),background .18s var(--ease)}
.giorni button[aria-pressed="true"]{color:var(--ink);background:var(--bg);font-weight:600}
.giorni button:active{transform:scale(.97)}
.esito{margin-top:24px}
.verdetto{font-family:var(--display);font-size:var(--step-head);line-height:1.08;max-width:22ch}
.dettaglio{margin-top:10px;max-width:60ch}
.azioni{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;margin-top:28px}

/* bottoni */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:12px 22px;background:var(--accent);color:var(--accent-ink);font-weight:600;text-decoration:none;border:0;cursor:pointer;transition:transform .16s var(--ease),filter .16s var(--ease)}
.btn:hover{filter:brightness(1.05);text-decoration:none}
.btn:active{transform:scale(.97)}
.btn-quieto{background:var(--ink);color:var(--bg)}

/* righello delle 24 ore */
.righello{margin-top:24px}
.r-pista{position:relative;height:64px;background:var(--bg)}
.strumento .r-pista{background:var(--bg)}
.blocco .r-pista,.giorno .r-pista{background:var(--surface)}
.r-sciopero{position:absolute;top:0;bottom:0;background:var(--strike);transform-origin:left}
.r-garantita{position:absolute;top:0;bottom:0;background:var(--open);display:grid;place-items:center;overflow:hidden}
.r-garantita b{font-weight:600;font-size:var(--step-small);white-space:nowrap;font-variant-numeric:tabular-nums}
.r-adesso{position:absolute;top:-10px;bottom:-10px;width:4px;margin-left:-2px;background:var(--now)}
.r-vuota{position:absolute;inset:0;display:flex;align-items:center;padding-inline:16px;font-style:normal;font-size:var(--step-small)}
.r-ore{position:relative;height:24px;margin-top:8px;font-size:var(--step-small);color:var(--muted);font-variant-numeric:tabular-nums}
.r-ore span{position:absolute;transform:translateX(-50%)}
.r-ore span:first-child{transform:none}.r-ore span:last-child{transform:translateX(-100%)}
.legenda{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:10px;font-size:var(--step-small);color:var(--muted)}
.legenda i{display:inline-block;width:14px;height:14px;margin-right:8px;vertical-align:-2px}

/* sezioni */
.sezione{margin-top:clamp(88px,12vh,140px)}
.sezione>p,.testo p{margin-top:16px;max-width:62ch}
.sezione h2+*{margin-top:20px}
.testo h2{margin-top:56px}.testo h3{margin-top:32px}
.testo ul,.testo ol{padding-left:1.2em;max-width:60ch}.testo li{margin-top:8px}

/* elenco scioperi: righe alternate, data a sinistra */
.elenco{list-style:none;padding:0;margin:24px 0 0}
.elenco>li{display:grid;grid-template-columns:9.5rem minmax(0,1fr);gap:4px 20px;padding:16px 14px;margin-inline:-14px}
.elenco>li:nth-child(odd){background:var(--surface)}
.elenco .q{font-weight:600}
.elenco .q a{text-decoration:none}.elenco .q a:hover{text-decoration:underline}
.elenco .chi{font-weight:600}
.elenco .come{color:var(--ink);font-size:1rem;margin-top:2px}
.stato{font-weight:600}
.stato-annullato .chi,.stato-annullato .come{color:var(--muted)}
.stato-annullato .chi{text-decoration:line-through}
.vuoto{margin-top:20px;padding:18px 20px;background:var(--surface)}

/* blocco del prossimo sciopero */
.blocco{margin-top:24px}
.blocco .fatti{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:16px 28px;margin:20px 0 0}
.fatti dt{font-size:var(--step-small);color:var(--muted)}
.fatti dd{margin:2px 0 0;font-weight:600}
.fonte{margin-top:16px;font-size:1rem;color:var(--ink)}
.r-tit{margin-top:22px;font-weight:600}

/* giornata (pagina data) */
.giorno{margin-top:44px}
.giorno h3{font-size:var(--step-lead)}
.giorno .come{margin-top:6px}

/* calendario del mese */
.mese{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;margin-top:24px;font-variant-numeric:tabular-nums}
.mese .gs{font-size:var(--step-small);color:var(--muted);padding:4px 6px}
.mese a,.mese span.d{display:block;min-height:64px;padding:8px;background:var(--surface);text-decoration:none}
.mese a{background:var(--ink);color:var(--bg)}
.mese a:hover{filter:brightness(1.25)}
.mese .n{display:block;font-size:var(--step-small);margin-top:4px}
.mese .oggi{outline:3px solid var(--accent);outline-offset:-3px}

/* collegamenti */
.collegamenti{display:grid;grid-template-columns:repeat(auto-fill,minmax(10.5rem,1fr));gap:2px 24px;list-style:none;padding:0;margin:20px 0 0}
.collegamenti a{display:block;padding:8px 0}

/* telegram: fascia scura con il messaggio vero del bot */
.avvisi{margin-top:clamp(96px,14vh,160px);background:var(--field-dark);color:var(--field-dark-ink);padding:clamp(64px,10vh,112px) 0}
.avvisi .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center;width:min(1040px,100% - 40px)}
.avvisi p{margin-top:16px;color:var(--field-dark-ink);max-width:40ch}
.avvisi .piccolo{color:var(--field-dark-muted);font-size:var(--step-small)}
.avvisi .btn{margin-top:28px}
.chat{background:#17212b;padding:20px;font:400 16px/1.45 var(--text)}
.chat .tit{display:flex;gap:12px;align-items:center;color:#fff;font-weight:600;font-size:15px}
.chat .tit i{width:36px;height:36px;border-radius:50%;background:var(--accent);display:inline-block}
.chat .tit small{display:block;font-weight:400;color:#8ea2b5;font-size:13px}
.msg{margin-top:16px;background:#22344a;color:#e6edf3;padding:12px 14px;border-radius:12px;max-width:40ch;white-space:pre-line}
.msg+.msg{margin-top:8px}
.msg .ora{display:block;text-align:right;font-size:13px;color:#b4c2cf;margin-top:4px}

/* domande frequenti: testo continuo, domanda in grassetto */
.faq p{margin-top:18px;max-width:62ch}
.faq b{font-weight:600}

/* pubblicità: spazio riservato, niente salti di layout */
.pub{margin-top:40px;min-height:120px;background:var(--surface);display:grid;place-items:center}
.pub small{font-size:var(--step-small);color:var(--muted)}

/* chiusura */
.piede{margin-top:clamp(96px,14vh,160px);background:var(--field-warm);padding:72px 0 48px}
.piede .nome{font-family:var(--display);font-size:clamp(2.4rem,1.2rem + 5vw,5.5rem);line-height:.95;letter-spacing:-.02em}
.piede .wrap{width:min(1040px,100% - 40px)}
.piede .cols{display:grid;grid-template-columns:repeat(4,auto);justify-content:space-between;gap:32px;margin-top:48px}
@media (max-width:900px){.piede .cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
.piede h2{font-size:1.25rem}
.piede ul{list-style:none;padding:0;margin:12px 0 0}
.piede li a{display:block;padding:5px 0;text-decoration:none}
.piede li a:hover{text-decoration:underline}
.piede .nota{margin-top:48px;font-size:1rem;max-width:75ch}

/* entrate */
.in-attesa{opacity:0;transform:translateY(12px);transition:opacity .4s var(--ease),transform .45s var(--ease);transition-delay:calc(var(--i,0)*60ms)}
.in-attesa.in-vista{opacity:1;transform:none}
@media (prefers-reduced-motion:no-preference){
  .r-sciopero,.r-garantita{animation:apri .55s var(--ease) both}
  .r-garantita{animation-delay:.12s}
  .r-adesso{animation:respira 2.4s ease-in-out infinite}
  .esito.cambia{animation:entra .32s var(--ease) both}
  @keyframes apri{from{transform:scaleX(0)}}
  @keyframes respira{50%{opacity:.4}}
  @keyframes entra{from{opacity:0;transform:translateY(8px)}}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.in-attesa{opacity:1;transform:none}}

@media (max-width:800px){.strumento{margin-inline:-20px;padding:22px 20px 26px}}
@media (max-width:760px){
  .elenco>li{grid-template-columns:1fr;gap:2px}
  .avvisi .wrap{grid-template-columns:1fr;gap:36px}
  .r-garantita b{display:none}
  .r-pista{height:52px}
  .mese a,.mese span.d{min-height:48px;padding:6px}
  .mese .n{display:none}
}

/* tabella fasce (dati reali: righe alternate, niente linee) */
.tabella{width:100%;border-collapse:collapse;font-size:var(--step-body)}
.tabella th{text-align:left;font-weight:600;padding:12px 14px;background:var(--field-warm)}
.tabella td{padding:12px 14px;vertical-align:top}
.tabella tbody tr:nth-child(even){background:var(--surface)}