/* Colori, raggi e caratteri stanno in tema.css: sostituendo quel file si
   riveste tutta l'applicazione senza toccare una riga qui. */
:root{
    box-sizing:border-box;
    padding-top:env(safe-area-inset-top,0px);
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  *,*::before,*::after{box-sizing:inherit}
  html{scroll-padding-top:env(safe-area-inset-top,0px);-webkit-text-size-adjust:100%}
  body{margin:0;background:var(--ink);color:var(--paper);
    font-family:var(--font-ui);
    font-size:16.5px;line-height:1.5;-webkit-font-smoothing:antialiased}
  button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
  :focus-visible{outline:2px solid var(--carpet);outline-offset:2px}
  .wrap{max-width:820px;margin:0 auto;padding:0 16px 96px}

  header{padding:4px 0 14px}
  .mark{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
  .mark h1{margin:0;font-size:30px;font-weight:700;letter-spacing:-.02em}
  .mark span{font-size:14px;color:var(--dim)}
  .standfirst{margin:8px 0 0;color:var(--dim);font-size:15px;max-width:54ch}

  .strip-shell{margin:18px -16px 0;padding:0 16px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
  .strip-shell::-webkit-scrollbar{display:none}
  .strip{display:flex;gap:4px;padding:2px 0 4px;min-width:min-content}
  .frame{position:relative;flex:0 0 auto;width:64px;background:var(--felt);
    border:1px solid var(--line);border-radius:var(--radius);padding:13px 0 12px;text-align:center;
    transition:background .12s ease,border-color .12s ease}
  .frame::before,.frame::after{content:"";position:absolute;left:6px;right:6px;height:5px;
    background-image:repeating-linear-gradient(to right,var(--ink) 0 5px,transparent 5px 11px);opacity:.85}
  .frame::before{top:3px} .frame::after{bottom:3px}
  .frame:hover{background:var(--felt-2)}
  .frame[aria-current="true"]{background:var(--carpet-soft);border-color:var(--carpet)}
  .frame .wd{display:block;font-size:10.5px;color:var(--dim);letter-spacing:.06em}
  .frame[aria-current="true"] .wd{color:#BFE6CE}
  .frame .dn{display:block;font-size:22px;font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums}
  .pips{display:flex;justify-content:center;gap:2.5px;height:6px;margin-top:5px}
  .pip{width:4px;height:4px;border-radius:50%;background:var(--carpet)}
  .pip.bad{background:var(--alarm)}

  .tools{display:flex;gap:6px;align-items:center;margin-top:16px;flex-wrap:wrap}
  .seg{display:flex;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
  .seg button{padding:9px 16px;font-size:15px;color:var(--dim)}
  .seg button[aria-pressed="true"]{background:var(--felt-2);color:var(--paper)}
  select{font:inherit;font-size:14.5px;color:var(--paper);background:var(--felt);
    border:1px solid var(--line);border-radius:var(--radius);padding:7px 9px;max-width:47vw}
  .spacer{flex:1}
  .ghost{font-size:14px;color:var(--dim);padding:9px 12px;border:1px solid transparent;border-radius:var(--radius)}
  .ghost:hover{border-color:var(--line);color:var(--paper)}

  .daytitle{display:flex;align-items:baseline;gap:9px;margin:26px 0 10px;
    padding-bottom:9px;border-bottom:1px solid var(--line)}
  .daytitle h2{margin:0;font-size:18px;font-weight:600}
  .daytitle .count{font-size:14px;color:var(--dim)}

  .row{display:grid;grid-template-columns:62px 1fr auto;gap:12px;align-items:start;
    padding:13px 0;border-bottom:1px solid var(--line)}
  .row.conmarca{grid-template-columns:auto 62px 1fr auto}
  /* Il verde del film scelto e uno STRATO, non uno sfondo: altrimenti
     coprirebbe la sfumatura della disponibilita, che entra da destra.
     Nel piano, dove ogni riga porta gia il colore del suo cinema, quel
     colore ha la meglio — e giusto cosi. */
  .row.picked{--gCinema:linear-gradient(to right,rgba(51,169,110,.09),transparent 65%)}
  .time{font-variant-numeric:tabular-nums;font-size:18px;font-weight:600;padding-top:1px}
  .time small{display:block;font-size:12.5px;font-weight:400;color:var(--dim)}
  .title{font-family:var(--font-titoli);font-style:italic;font-size:21px;
    line-height:1.3;margin:0 0 5px;font-weight:500}
  .meta{font-size:14px;color:var(--dim);margin:0;line-height:1.55}
  .meta b{font-weight:500;color:#A9BCAF}
  .tag{display:inline-block;font-size:12px;padding:2px 8px;margin-right:7px;
    border:1px solid var(--line);border-radius:999px;color:#A9BCAF}
  .tag.gala{border-color:var(--amber);color:var(--amber)}
  .add{align-self:center;width:38px;height:38px;border:1px solid var(--line);border-radius:50%;
    font-size:19px;line-height:1;color:var(--dim);display:grid;place-items:center;flex:0 0 auto}
  .add:hover{border-color:var(--carpet);color:var(--carpet)}
  .row.picked .add{background:var(--carpet);border-color:var(--carpet);color:var(--ink);font-weight:600}

  .gap{display:flex;align-items:center;gap:9px;margin:0 0 0 46px;padding:8px 0 9px;font-size:13.5px;flex-wrap:wrap}
  .gap .bar{width:2px;align-self:stretch;min-height:18px;background:var(--line)}
  .gap.warn .bar{background:var(--amber)}
  .gap.bad .bar{background:var(--alarm)}
  .gap .txt{color:var(--dim)}
  .gap.warn .txt{color:var(--amber)}
  .gap.bad .txt{color:var(--alarm)}
  .swap{font-size:12.5px;color:var(--paper);text-decoration:underline;text-underline-offset:3px;padding:0;text-align:left}
  .swap:hover{color:var(--carpet)}

  .empty{border:1px dashed var(--line);border-radius:var(--radius);padding:30px 22px;
    text-align:center;color:var(--dim);margin-top:22px}
  .empty p{margin:0 0 5px;font-size:15.5px}

  .summary{display:flex;gap:22px;flex-wrap:wrap;border:1px solid var(--line);
    border-left:3px solid var(--carpet);border-radius:var(--radius);padding:13px 16px;margin-top:20px}
  .summary div span{display:block;font-size:13px;color:var(--dim)}
  .summary div strong{font-size:24px;font-weight:600;font-variant-numeric:tabular-nums}
  .summary .bad strong{color:var(--alarm)}

  footer{margin-top:34px;padding-top:14px;border-top:1px solid var(--line);color:var(--dim);font-size:13px}
  footer p{margin:0 0 5px;max-width:60ch}
  footer a{color:var(--dim)}

  .toast{position:fixed;left:50%;transform:translateX(-50%);
    bottom:calc(20px + env(safe-area-inset-bottom,0px));background:var(--carpet);color:var(--ink);
    font-size:15px;font-weight:500;padding:9px 16px;border-radius:999px;opacity:0;
    pointer-events:none;transition:opacity .18s ease;z-index:10}
  .toast.on{opacity:1}

  /* --- desideri --- */
  .giorniLabel{margin:20px 0 9px;font-size:14.5px;color:var(--dim)}
  .mini{font-size:12px;color:var(--dim);border:1px solid var(--line);border-radius:var(--radius);
    padding:2px 8px;margin-left:6px}
  .mini:hover{border-color:var(--carpet);color:var(--carpet)}
  .giorni{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:12px}
  .dayChip{flex:0 0 auto;width:54px;padding:9px 0;text-align:center;background:var(--felt);
    border:1px solid var(--line);border-radius:var(--radius);font-size:19px;font-weight:600;
    color:var(--dim);font-variant-numeric:tabular-nums;line-height:1.15}
  .dayChip span{display:block;font-size:11.5px;font-weight:400;letter-spacing:.05em}
  .dayChip:hover{border-color:var(--carpet)}
  .dayChip.on{background:var(--carpet-soft);border-color:var(--carpet);color:var(--paper)}
  .dayChip.on span{color:#BFE6CE}
  .giorniConta{font-size:12.5px;color:var(--dim)}
  .frame.off{opacity:.38}
  .setts{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin:18px 0 4px;
    padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--felt)}
  .setts label{font-size:14px;color:var(--dim);display:flex;align-items:center;gap:7px}
  .setts select{padding:6px 9px;font-size:14.5px}
  .setts input[type=checkbox]{accent-color:var(--carpet);width:15px;height:15px}
  .go{display:block;width:100%;background:var(--carpet);color:var(--ink);
    font-weight:600;font-size:17px;padding:15px 18px;border-radius:var(--radius);
    margin-top:12px;letter-spacing:.01em}
  .go:hover{filter:brightness(1.08)}
  .go:disabled{opacity:.55;cursor:default}
  .gohint{margin:9px 0 0;font-size:13.5px;color:var(--dim);text-align:center}
  .search{width:100%;margin-top:14px;padding:11px 13px;font:inherit;font-size:16px;
    color:var(--paper);background:var(--felt);border:1px solid var(--line);border-radius:var(--radius)}
  .search::placeholder{color:var(--dim)}
  .wrow{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;
    padding:10px 0;border-bottom:1px solid var(--line)}
  .wrow.on{background:linear-gradient(to right,rgba(51,169,110,.09),transparent 70%)}
  .wname{font-family:var(--font-titoli);font-style:italic;font-size:19px;line-height:1.3}
  .wmeta{font-size:13px;color:var(--dim);font-family:var(--font-ui);font-style:normal}
  .star,.pick{width:38px;height:38px;border:1px solid var(--line);border-radius:50%;
    display:grid;place-items:center;font-size:15px;color:var(--dim)}
  .wrow.on .pick{background:var(--carpet);border-color:var(--carpet);color:var(--ink);font-weight:600}
  .star.hot{border-color:var(--amber);color:var(--amber)}
  .report{border:1px solid var(--line);border-left:3px solid var(--amber);border-radius:var(--radius);
    padding:14px 18px;margin-top:14px;font-size:14.5px}
  .report h3{margin:0 0 8px;font-size:15px;font-weight:600;color:var(--amber)}
  .report ul{margin:0;padding-left:17px;color:var(--dim)}
  .report li{margin-bottom:3px}
  .report em{font-family:var(--font-titoli);color:var(--paper)}
  .ticket{align-self:center;width:30px;height:30px;margin-right:6px;border:1px solid var(--line);
    border-radius:50%;font-size:11px;color:var(--line);display:grid;place-items:center}
  .ticket:hover{border-color:var(--amber);color:var(--amber)}
  .ticket.on{background:var(--amber);border-color:var(--amber);color:var(--ink)}
  .row.bought{background:linear-gradient(to right,rgba(217,164,65,.10),transparent 65%)}
  @media (prefers-reduced-motion:reduce){*{transition:none!important}}

  /* ---------------------------------------------------------------
     Schermi stretti: telefono e tablet in verticale.
     La riga passa da quattro colonne a tre livelli - orario sopra,
     titolo sotto, bottoni in fondo allineati a destra - cosi il
     titolo ha tutta la larghezza e i bersagli restano grandi.
     --------------------------------------------------------------- */
  @media (max-width:640px){
    .wrap{padding:0 13px 96px}
    body{font-size:16px}
    .mark h1{font-size:26px}
    .standfirst{font-size:14.5px}

    .row{grid-template-columns:auto 1fr;gap:4px 10px;padding:15px 0;
      grid-template-areas:"time time" "testo testo" "azioni azioni"}
    .row.conmarca{grid-template-columns:auto 1fr;
      grid-template-areas:"marca time" "testo testo" "azioni azioni"}
    .marca{grid-area:marca}
    .time{grid-area:time;display:flex;align-items:baseline;gap:9px;padding-top:0}
    .time small{display:inline}
    .testo{grid-area:testo}
    .azioni{grid-area:azioni;justify-content:flex-end;margin-top:4px}
    .azioni button{width:42px;height:42px;font-size:17px}
    .azioni .add{width:44px;height:44px;font-size:21px}
    .gap{margin-left:0;padding-left:10px;border-left:1px solid var(--line)}

    .title{font-size:20px}
    .meta{font-size:13.5px}

    .wrow{grid-template-columns:1fr auto auto;gap:8px;padding:12px 0}
    .star,.pick{width:42px;height:42px;font-size:17px}
    .dayChip{width:52px}
    .setts{gap:12px;padding:12px}
    .summary{gap:16px;padding:12px 14px}
    .summary div strong{font-size:21px}
    select{max-width:44vw;padding:9px}
    .altLista,.altCerco,.altAvviso{margin-left:0;padding-left:10px}
    .altRiga{grid-template-columns:1fr;row-gap:5px}
    .altVai{justify-self:start;padding:6px 14px;font-size:13.5px}
    .altAlt,.mioBlocco,.rimetti{padding:6px 12px;font-size:13.5px}
  }

  /* Telefoni molto stretti */
  @media (max-width:380px){
    .wrap{padding:0 10px 96px}
    .azioni button{width:38px;height:38px}
    .azioni .add{width:40px;height:40px}
    .dayChip{width:46px;font-size:17px}
    .frame{width:56px}
  }

  /* ---------------------------------------------------------------
     La settimana: giorni in colonna, ore in verticale.
     --scala sono i pixel per minuto: tutto il resto ne discende, cosi
     cambiarla allarga o stringe il calendario senza toccare altro.
     --------------------------------------------------------------- */
  .vistaSel{margin:0 0 12px;display:inline-flex}
  /* L'aggancio deve sapere che a sinistra c'e l'asse delle ore, fermo:
     scroll-padding-left gli dice di fermare i giorni DOPO l'asse, non sotto.
     Sul computer l'aggancio e morbido (proximity): non deve mai strappare
     di mano lo scorrimento a chi vuole vedere l'inizio. */
  .settimana{--scala:1.05;--asse:46px;display:flex;overflow-x:auto;position:relative;
    border:1px solid var(--line);border-radius:var(--radius);margin-top:10px;
    scroll-snap-type:x proximity;scroll-padding-left:var(--asse);
    -webkit-overflow-scrolling:touch}
  .setAsse{position:sticky;left:0;z-index:4;flex:0 0 var(--asse);background:var(--felt);
    border-right:1px solid var(--line)}
  .setGiorno{flex:1 0 118px;border-left:1px solid var(--line);scroll-snap-align:start;min-width:0}
  /* I giorni senza film non meritano una colonna intera: restano, stretti,
     perche vedere dov'e il buco e utile quanto vedere i film. */
  .setGiorno.libero{flex:0 0 54px}
  .setGiorno.libero .setTesta span{display:none}
  .setGiorno:first-of-type{border-left:0}
  .setTesta{height:46px;padding:6px 8px;font-size:13.5px;border-bottom:1px solid var(--line);
    white-space:nowrap;overflow:hidden}
  .setTesta span{display:block;font-size:11.5px;color:var(--dim)}
  .setGiorno.libero .setTesta{opacity:.55}
  .setCorpo{position:relative;height:calc(var(--minuti) * var(--scala) * 1px);
    background:repeating-linear-gradient(to bottom,var(--line) 0 1px,transparent 1px calc(60px * var(--scala)))}
  .setOra{position:absolute;right:6px;top:calc(var(--top) * var(--scala) * 1px - 7px);
    font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums}
  .setFilm{position:absolute;left:4px;right:4px;overflow:hidden;text-align:left;
    top:calc(var(--top) * var(--scala) * 1px);height:calc(var(--durata) * var(--scala) * 1px);
    border-radius:5px;padding:4px 7px;display:flex;flex-direction:column;gap:1px;
    border-left:3px solid var(--c);background:var(--cb);z-index:2;cursor:pointer}
  .setFilm:hover{filter:brightness(1.12)}
  .setOrario{font-size:11px;font-variant-numeric:tabular-nums;opacity:.85}
  .setTitolo{font-family:var(--font-titoli);font-style:italic;font-size:13.5px;line-height:1.2;
    overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
  .setSala{font-size:11px;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .setFilm.esaurito .setTitolo{text-decoration:line-through}
  .setTragitto{position:absolute;left:18px;right:18px;z-index:1;border-radius:3px;
    top:calc(var(--top) * var(--scala) * 1px);height:calc(var(--durata) * var(--scala) * 1px)}
  .setLegenda{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--dim);margin-top:4px}
  .setLegenda span{display:inline-flex;align-items:center;gap:6px}
  .setLegenda i{width:11px;height:11px;border-radius:3px;background:var(--cb);border-left:3px solid var(--c)}
  .row.lampo{outline:2px solid var(--carpet);outline-offset:3px;transition:outline-color .8s}

  /* Telefono: un giorno e mezzo per schermata, si scorre col dito e ci si
     ferma sempre all'inizio di una colonna. */
  /* Solo su schermi davvero stretti un giorno prende mezza schermata: su una
     finestra di computer, anche piccola, e meglio vederne cinque o sei. */
  @media (max-width:480px){
    .settimana{--scala:0.95;--asse:40px;scroll-snap-type:x mandatory}
    .setGiorno{flex:0 0 44vw}
    .setGiorno.libero{flex:0 0 44px}
    .setTitolo{font-size:13px}
  }
  /* Tablet in verticale: tre giorni per schermata. */
  @media (min-width:641px) and (max-width:900px){
    .setGiorno{flex:0 0 30%}
  }

  /* La barra sopra il piano: vista e soglia di respiro, affiancate e
     capaci di andare a capo sul telefono. */
  .barraPiano{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin:0 0 12px}
  .barraPiano .vistaSel{margin:0}
  .respiroSel{font-size:13.5px;color:var(--dim);display:flex;align-items:center;gap:8px}
  .respiroSel select{padding:6px 8px;font-size:14px}
  .gap .bar{width:3px}

  /* Le righe del piano hanno un filo colorato a sinistra: serve un po' di
     margine, altrimenti il pallino e i titoli ci finiscono sopra. */
  .row.conmarca{padding-left:12px}

  /* Il testo del passaggio va a capo ACCANTO alla barra, non sotto:
     su un telefono stretto i messaggi lunghi restano allineati. */
  .gap{flex-wrap:nowrap;align-items:stretch}
  .gap .txt{flex:1 1 auto;min-width:0;align-self:center}

  /* L'anteprima della trama: sta sotto la riga, larga quanto lei, e si legge
     senza aprire niente. Non deve saltare: altezza libera, testo comodo. */
  /* Si legge seduti: riga corta, interlinea larga, e un po' d'aria intorno.
     La misura giusta per l'occhio sta fra i 55 e i 70 caratteri per riga. */
  .sinossi{grid-column:1/-1;margin:10px 0 4px;padding:14px 16px;border-radius:var(--radius);
    font-size:14.5px;line-height:1.65;max-width:64ch}
  .sinTesto{margin:0 0 10px;white-space:pre-line;hyphens:auto}
  .sinTesto::first-line{letter-spacing:.01em}
  .sinLink{display:inline-block;font-size:13px;text-decoration:none;
    border-bottom:1px dotted currentColor;padding-bottom:1px}
  .sinAttesa,.sinNiente{font-size:13.5px;opacity:.75;margin-right:10px}
  @media (max-width:640px){
    .sinossi{font-size:15px;line-height:1.7;padding:14px;margin-right:2px}
  }
  .sinFonte{margin:0 0 8px;font-size:12px;opacity:.6}
  .sinExtra{margin:0 0 8px;font-size:13px;font-weight:600;letter-spacing:.01em}
  .wrow.senzaPosti .wname{opacity:.75}
  .wperche{font-weight:600}

  /* Lo stato dei posti, detto con una parola e un colore: si legge di sfuggita
     mentre si scorre, e non serve entrare nella proiezione per saperlo. */
  .posti{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;
    font-size:11.5px;font-weight:600;letter-spacing:.02em;vertical-align:1px}
  .gap{padding-left:10px;margin-right:6px}
  .sinExtra i{font-style:normal;font-weight:700}
  .row{border-right:3px solid transparent}
  .setExtra{font-size:10.5px;line-height:1.3;opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* Niente attesa del doppio tocco sul titolo: il tocco deve rispondere subito. */
  a.filmLink{touch-action:manipulation}

/* ---------- la mappa del cinema ----------
   Mappa vera, tenuta in casa. Risponde alla domanda «dov'e questo cinema»:
   due ingrandimenti, il quartiere e la via, col segnaposto fermo al centro. */
.meta .dove{background:none;border:0;padding:0;font:inherit;font-weight:700;
  color:inherit;cursor:pointer;border-bottom:1px dotted var(--dim)}
.meta .dove:hover{border-bottom-color:var(--carpet);color:var(--carpet)}
.mappaCinema{grid-column:1/-1;margin:8px 0 2px;border:1px solid var(--line);border-radius:12px;
  overflow:hidden;background:var(--felt)}
.mappaCinema .mappa{position:relative;overflow:hidden;height:230px;background:var(--felt-2)}
.mappaCinema .lastra{position:absolute}
.mappaCinema .lastra img{position:absolute;width:256px;height:256px;display:block}
.mappaCinema .segnaposto{position:absolute;left:50%;top:50%;width:16px;height:16px;
  margin:-8px 0 0 -8px;border-radius:50%;background:var(--carpet);
  box-shadow:0 0 0 3px rgba(255,255,255,.9),0 1px 6px rgba(0,0,0,.45)}
.mappaCinema .mScala{position:absolute;left:10px;bottom:9px;font-size:11px;color:#333;
  background:rgba(255,255,255,.82);padding:2px 7px;border-radius:5px;display:flex;
  align-items:center;gap:6px}
.mappaCinema .mScala span{display:inline-block;height:3px;background:#333;border-radius:2px}
.mappaCinema .mPiede{padding:9px 11px 10px;border-top:1px solid var(--line)}
.mappaCinema .mDove{font-size:13px;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.mappaCinema .mDove span{color:var(--dim)}
.mappaCinema .mBottoni{margin-top:8px;display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.mappaCinema .mZoom{font-size:12.5px;padding:4px 11px;border-radius:999px;cursor:pointer;
  border:1px solid var(--line);background:transparent;color:var(--dim)}
.mappaCinema .mZoom[aria-pressed="true"]{background:var(--felt-2);color:var(--paper);border-color:var(--felt-2)}
.mappaCinema .mFuori{margin-left:auto;font-size:12.5px;color:var(--carpet);text-decoration:none}
.mappaCinema .mFuori:hover{text-decoration:underline}
.mappaCinema .mFirma{margin:7px 0 0;font-size:11px;color:var(--dim);opacity:.75}
.mappaCinema .mManca{margin:8px 0 0;font-size:12.5px;color:var(--dim);line-height:1.5}