/* Telefono (sotto i 640 px), tutti i temi: barra di navigazione in basso, pagine elenco con «Filtri», schede con barra delle azioni, modulo evento con «Altre opzioni»,
 * Amministrazione compatta, Da scoprire, Idee e Posti. Prima stava in vetrina.css (solo tema Vetrina); il JS corrispondente è in js/app.js (renderBottomNav, enhance*). Caricato dopo il tema scelto. */
/* ---- telefono: tutto più compatto, così il contenuto parte più in alto (pulsanti e schede più piccoli, senza perdere la zona da toccare) ---- */
@media (max-width:640px){
  .btn,.tab{min-height:40px}
  /* barra delle sezioni: una riga di etichette, senza numeri sotto */
  .sections button{padding:8px 2px;font-size:13.5px}
  .sections.with-extra button:not(.extra){white-space:nowrap}
  .sections:not(.with-extra) .n,.sections.with-extra button:not(.extra) .n{display:none}
  .sections button.extra{padding:8px 6px;font-size:13.5px}
  /* eventi: Home, schede, esporta e interruttori più piccoli, affiancati */
  #tabs{gap:8px;padding-bottom:10px}
  #tabs .tabscroll{gap:6px}
  #tabs .tab{padding:8px 13px;font-size:14px;min-height:38px}
  #tabs .tab .n{font-size:12px;margin-left:4px}
  #tabs .back-home,#tabs .export-btn{padding:8px 14px;font-size:14px;min-height:38px}
  #tabs .viewswitch button{padding:8px 14px;font-size:14px;min-height:38px}
  .viewswitch button{padding:7px 13px;font-size:14px}
  .fchip{padding:6px 12px;font-size:13.5px}
  /* cinema */
  .cin-tabs{gap:6px}
  .cin-tabs .tab{padding:8px 10px;font-size:14.5px;min-height:40px}
  .cin-bar{gap:8px}
  .cin-bar .export-btn{padding:8px 14px;font-size:14px;min-height:38px}
  .cin-bar .sortby select{min-height:38px;font-size:14px;padding:6px 12px}
  /* amministrazione */
  .admin .btn{min-height:40px;padding:8px 16px;font-size:14.5px}
  .admin .adm-tabs,.admin .ds-tabs{gap:6px}
  .admin .adm-tabs .tab,.admin .ds-tabs .tab{min-height:40px;padding:8px 10px;font-size:14.5px}
  .admin .fchip{min-height:34px;padding:6px 12px;font-size:13.5px}
  .admin select{min-height:40px;font-size:14px}
  .admin .ds-actions .btn{flex:1 1 auto}
  .admin .adm-tabs,.admin .ds-tabs,.cin-tabs{display:flex;flex-wrap:wrap}
  .admin .adm-tabs .tab,.admin .ds-tabs .tab,.cin-tabs .tab{flex:0 0 auto}
  .ideas-intro,.admin .intro,.export .intro,.people-admin .intro{font-size:14.5px;line-height:1.5}
  .site-foot{font-size:13px}
  .btn.big{padding:12px 22px;font-size:16px}
}

/* ---- telefono: le categorie (Incontro, Festa, Cibo…) su due righe e più piccole; si scorre di lato se sono tante ---- */
@media (max-width:640px){
  .catfilter.tiles,.v-cats{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto);grid-auto-columns:76px;gap:6px;overflow-x:auto;padding:2px 2px 6px}
  .catfilter.tiles .ctile,.v-cats .ctile{width:76px;height:62px;padding:4px 2px;gap:2px;border-radius:14px;font-size:11px;line-height:1.1}
  .catfilter.tiles .ctile-ic,.v-cats .ctile-ic{font-size:19px}
}

/* ===== Telefono, tappa 1: navigazione in basso (Home · Eventi · Concerti · Cinema · Altro) ===== */
.bottomnav,.more-sheet{display:none}
@media (max-width:640px){
  #sections{display:none}   /* il vecchio menu a 3 righe: sul telefono lo sostituisce la barra in basso */
  .bottomnav:not([hidden]){position:fixed;left:0;right:0;bottom:0;z-index:45;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:2px;
    padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px));background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(0,0,0,.07)}
  .bottomnav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:54px;padding:4px 2px;border:0;border-radius:14px;background:none;
    color:var(--ink-2);font:inherit;font-size:11.5px;font-weight:600;line-height:1.1;cursor:pointer}
  .bottomnav button .ic{font-size:22px;line-height:1}
  .bottomnav button[aria-current="page"]{color:var(--accent-text,var(--accent));background:var(--accent-soft)}
  .bottomnav button:active{transform:scale(.96)}
  .bottomnav button:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
  body:has(.bottomnav:not([hidden])){padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  body:has(.bottomnav:not([hidden])) #openForm,body:has(.bottomnav:not([hidden])) #openIdea,body:has(.bottomnav:not([hidden])) #openPlace,body:has(.bottomnav:not([hidden])) #openFilm{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  /* con un modulo aperto (proposta di un evento, idea, posto, film) la barra si toglie di mezzo: i pulsanti del modulo restano liberi */
  body:has(#form:not([hidden])) .bottomnav,body:has(#ideaForm:not([hidden])) .bottomnav,body:has(#placeForm:not([hidden])) .bottomnav,body:has(#filmForm:not([hidden])) .bottomnav{display:none}
  body:has(#form:not([hidden])),body:has(#ideaForm:not([hidden])),body:has(#placeForm:not([hidden])),body:has(#filmForm:not([hidden])){padding-bottom:0}
  /* foglio «Altro» */
  .more-sheet[open]{display:block;position:fixed;inset:auto 0 0 0;margin:0;width:100%;max-width:none;box-sizing:border-box;border:0;border-radius:22px 22px 0 0;
    padding:16px 16px calc(18px + env(safe-area-inset-bottom,0px));background:var(--surface);color:var(--ink);box-shadow:0 -10px 40px rgba(0,0,0,.25)}
  .more-sheet::backdrop{background:rgba(10,14,24,.5)}
  .ms-head{display:flex;align-items:center;justify-content:space-between;margin:0 0 12px;font-size:18px}
  .ms-x{min-width:44px;min-height:44px;border:0;border-radius:50%;background:var(--surface-2);color:var(--ink);font-size:24px;line-height:1;cursor:pointer}
  .ms-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .ms-item{display:flex;align-items:center;gap:10px;min-height:56px;padding:10px 12px;border:1px solid var(--line);border-radius:16px;background:var(--surface-2);color:var(--ink);font:inherit;font-weight:600;font-size:15px;text-align:left;cursor:pointer}
  .ms-item .ic{font-size:22px;line-height:1}
  .ms-item .tx{flex:1;min-width:0}
  .ms-item .n{min-width:24px;padding:2px 8px;border-radius:99px;background:var(--surface);font-size:13px;text-align:center;color:var(--ink-2)}
  .ms-item:active{transform:scale(.98)}
  .ms-item:focus-visible,.ms-x:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
}

/* ===== Telefono, tappa 2: testata compatta (banner più basso, ricerca in una riga + «Quando e dove») ===== */
.v-filtri{display:none}
@media (max-width:640px){
  .v-hero::before,.v-hero-eventi::before,.v-hero-concerti::before,.v-hero-cinema::before{height:140px;max-height:none;background-position:center 40%}
  .v-hero-in,.v-hero-eventi .v-hero-in,.v-hero-concerti .v-hero-in,.v-hero-cinema .v-hero-in{margin-top:-22px;padding:0 12px 12px;gap:10px}
  /* Concerti e Cinema: l'immagine intera (2048×768 → 37,5vw di altezza), con lo slogan in basso; la ricerca sta sotto, non sopra */
  .v-hero-concerti::before,.v-hero-cinema::before{height:max(140px,37.5vw);background-position:center 100%}
  .v-hero-concerti .v-hero-in,.v-hero-cinema .v-hero-in{margin-top:12px}
  .v-search{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 6px;padding:6px 6px 6px 14px;border-radius:26px}
  .v-search > label:nth-of-type(1){grid-column:1;grid-row:1;padding:0}
  .v-search > .btn{grid-column:2;grid-row:1;margin:0;min-height:44px;padding:10px 20px}
  .v-search > label:nth-of-type(n+2){display:none;grid-column:1 / -1;padding:0 4px;border:0;border-top:1px solid var(--line)}
  .v-search > label:nth-of-type(2){grid-row:3}
  .v-search > label:nth-of-type(3){grid-row:4}
  .v-search.open > label:nth-of-type(n+2){display:flex}
  .v-search > .v-filtri{display:block;grid-column:1 / -1;grid-row:2;min-height:36px;margin:0;padding:4px 8px 4px 2px;border:0;background:none;color:var(--accent-text,var(--accent));font:inherit;font-size:13.5px;font-weight:600;text-align:left;cursor:pointer}
  .v-search > .v-filtri:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:8px}
}

/* ===== Telefono, tappa 3: pagine elenco con una riga di controlli + foglio «Filtri e vista» ===== */
.mf-btn{display:none}
@media (max-width:640px){
  /* ricerca nelle pagine elenco (Concerti, Cinema, Trekking): «Cosa» + «Cerca» in una riga, «Quando e dove» a richiesta (come nella home) */
  .con-search{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 6px;padding:6px 6px 6px 14px;border-radius:22px;flex-direction:row}
  .con-search > label:nth-of-type(1){grid-column:1;grid-row:1;padding:0;border:0}
  .con-search > .btn[type=submit]{grid-column:2;grid-row:1;margin:0;border-radius:999px;min-height:44px;padding:10px 20px}
  .con-search > label:nth-of-type(n+2){display:none;grid-column:1 / -1;padding:0 4px;border:0;border-top:1px solid var(--line)}
  .con-search > label:nth-of-type(2){grid-row:3}
  .con-search > label:nth-of-type(3){grid-row:4}
  .con-search.open > label:nth-of-type(n+2){display:flex}
  .con-search > .v-filtri{display:block;grid-column:1 / -1;grid-row:2;min-height:36px;margin:0;padding:4px 8px 4px 2px;border:0;background:none;color:var(--accent-text,var(--accent));font:inherit;font-size:13.5px;font-weight:600;text-align:left;cursor:pointer}
  .con-search > .v-filtri:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:8px}
  .con-search.con-search-uni{grid-template-columns:minmax(0,1fr)}   /* barra unica (senza pulsante «Cerca»): una sola colonna */
  /* una riga: ← Home · schede (scorrono di lato) · ⚙ Filtri */
  #tabs:not([hidden]),.cin-bar.con-controls{display:flex;flex-wrap:nowrap;align-items:center;gap:8px;overflow:visible}
  #tabs .tabscroll,.con-controls .ds-tabs{flex:1 1 auto;min-width:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  #tabs .tabscroll::-webkit-scrollbar,.con-controls .ds-tabs::-webkit-scrollbar{display:none}
  #tabs .tabscroll > *,.con-controls .ds-tabs > *{flex:none}
  .con-controls .back-home,#tabs .back-home{flex:none}
  .con-controls .con-end:empty,#filters:empty{display:none}
  .mf-btn{display:inline-flex;align-items:center;gap:6px;flex:none;min-height:40px;padding:6px 14px;border-radius:999px;font-weight:700;white-space:nowrap}
  .mf-n{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:var(--accent);color:var(--accent-ink);font-size:12px;font-weight:800}
  /* riquadro «da verificare» (organizzatori): solo titolo e pulsante */
  .v-todo{padding:12px 14px}
  .v-todo p{display:none}
  /* foglio «Filtri e vista» */
  .filters-sheet[open]{display:flex;flex-direction:column;max-height:88vh}
  .filters-sheet .mf-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-bottom:6px}
  .filters-sheet .mf-grp{margin:0 0 6px}
  .filters-sheet .mf-grp h4{margin:14px 0 8px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
  .filters-sheet .mf-grp > *{margin-left:0;margin-right:0}
  .filters-sheet .provfilter,.filters-sheet .venfilter,.filters-sheet .catfilter{margin:0 0 10px;flex-wrap:wrap;overflow:visible;padding:0}
  .filters-sheet .catfilter.tiles{display:flex;flex-wrap:wrap;gap:8px}
  .filters-sheet .viewswitch{display:inline-flex;margin:0 8px 8px 0}
  .filters-sheet .sortby{display:flex;margin:0 0 8px}
  .filters-sheet .export-btn{width:100%;min-height:46px}
  .filters-sheet .mf-done{margin-top:12px;width:100%;min-height:48px;font-size:16px}
}

/* ===== Telefono, tappa 4: schede (barra delle azioni in basso) e modulo evento (campi essenziali + «Altre opzioni») ===== */
.detail-bar,.opt-toggle{display:none}
@media (max-width:640px){
  /* scheda evento/film: pulsante principale sempre sotto il pollice, sopra la barra di navigazione */
  .detail-bar{position:fixed;left:0;right:0;bottom:calc(67px + env(safe-area-inset-bottom,0px));z-index:44;display:flex;align-items:stretch;gap:8px;padding:8px 12px;background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(0,0,0,.07)}
  .detail-bar > .btn:not(.detail-more){flex:1 1 0;min-width:0;min-height:48px;margin:0;font-size:15px;font-weight:700;white-space:normal;line-height:1.15}
  .detail-bar .detail-more{flex:none;width:52px;min-height:48px;padding:0;font-size:24px;line-height:1;margin:0}
  body:has(.detail-bar){padding-bottom:calc(76px + 68px + env(safe-area-inset-bottom,0px))}
  .detail-bar.con-rapide{flex-wrap:wrap}
  .detail-bar.con-rapide .detail-more{margin-left:auto}
  .detail-bar.solo-rapide{flex-wrap:nowrap}
  .detail-bar.solo-rapide .detail-quick{flex:1 1 0;min-width:0}
  body:has(.detail-bar.solo-rapide){padding-bottom:calc(76px + 68px + env(safe-area-inset-bottom,0px))}
  .detail-bar .detail-quick{flex:1 0 100%;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .detail-bar .detail-quick::-webkit-scrollbar{display:none}
  .detail-bar .detail-quick .btn{flex:none;min-height:44px;width:auto;padding:8px 14px;margin:0;font-size:15px}
  body:has(.detail-bar.con-rapide){padding-bottom:calc(76px + 68px + 56px + env(safe-area-inset-bottom,0px))}
  .actions-sheet[open]{display:flex;flex-direction:column;max-height:88vh}
  .actions-sheet .ac-body{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:8px;overscroll-behavior:contain;padding-bottom:4px}
  .actions-sheet .ac-body > .btn,.actions-sheet .ac-body button.btn{width:100%;min-height:48px;margin:0}
  .actions-sheet .addcal{display:flex;flex-direction:column;gap:8px;margin:4px 0}
  .actions-sheet .addcal .btn{width:100%;min-height:46px}
  .actions-sheet .danger-zone{margin-top:6px}
  /* modulo evento */
  .propose:not(.show-opts) .field.opt{display:none}
  .propose .opt-toggle{display:block}
  .opt-toggle .btn{display:block;width:100%;min-height:52px;padding:10px 14px;border:1px solid var(--line);border-radius:14px;text-align:left;font-weight:700;white-space:normal;line-height:1.25}
  .opt-toggle .btn::after{content:"▾";float:right;color:var(--ink-3)}
  .propose.show-opts .opt-toggle .btn::after{content:"▴"}
  .opt-toggle .btn small{display:block;margin:2px 0 0;font-weight:500;color:var(--ink-3);font-size:12.5px}
  .propose .form-actions{position:sticky;bottom:0;z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 -16px -16px;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -6px 18px rgba(0,0,0,.06)}
  .propose .form-actions .btn.primary{flex:1 1 auto;min-height:48px}
  .propose .form-actions .form-msg{flex:1 0 100%}
  .propose input,.propose select,.propose textarea{font-size:16px}   /* sotto i 16 px iOS ingrandisce la pagina quando si tocca un campo */
}
@media (max-width:640px){
  /* con un modulo aperto (proponi, modifica, idea, posto, film) la barra delle azioni della scheda si toglie di mezzo */
  body:has(#form:not([hidden])) .detail-bar,body:has(#ideaForm:not([hidden])) .detail-bar,body:has(#placeForm:not([hidden])) .detail-bar,body:has(#filmForm:not([hidden])) .detail-bar{display:none}
  body:has(#form:not([hidden])):has(.detail-bar),body:has(#ideaForm:not([hidden])):has(.detail-bar),body:has(#placeForm:not([hidden])):has(.detail-bar),body:has(#filmForm:not([hidden])):has(.detail-bar){padding-bottom:0}
  .actions-sheet .ac-body > :empty{display:none}
}

/* ===== Telefono, tappa 5a: Amministrazione compatta (testata su una riga, linguette che scorrono, riquadri a due colonne, tabelle a schede, sezioni a fisarmonica) ===== */
@media (max-width:640px){
  .admin{gap:10px}
  .admin .ds-head{flex-wrap:nowrap;gap:10px}
  .admin .ds-head .back{flex:none;min-height:40px;width:40px;padding:0;font-size:20px;line-height:1}
  .admin .ds-head h2{font-size:22px;min-width:0}
  .admin .ds-private{margin-left:auto;flex:none;padding:6px 10px}
  .admin .adm-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:8px;margin-inline:-16px;padding:2px 16px 6px}
  .admin .adm-tabs::-webkit-scrollbar{display:none}
  .admin .adm-tabs .tab{flex:none;min-height:42px;padding:8px 16px;font-size:15px;white-space:nowrap}
  .admin .small,.admin small,.admin .cc-chips .chip,.admin .scan-pill,.admin dt{font-size:13px}
  /* la frase di presentazione di Concerti e Cinema: già detta dai titoli delle sezioni */
  .admin .cc > p.muted:first-child{display:none}
  /* sezioni numerate a fisarmonica */
  .admin details.cc-acc{border-top:1px solid var(--line)}
  .admin details.cc-acc > summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:52px;padding:10px 2px;font-size:17px;font-weight:800;letter-spacing:-.01em}
  .admin details.cc-acc > summary::-webkit-details-marker{display:none}
  .admin details.cc-acc > summary::after{content:"▾";font-size:18px;color:var(--ink-3);transition:transform .15s}
  .admin details.cc-acc[open] > summary::after{transform:rotate(180deg)}
  .admin details.cc-acc > :not(summary){margin-bottom:12px}
  /* tabelle: ogni riga diventa una scheda con le etichette delle colonne */
  .admin .cc-tablewrap{overflow:visible;border:0;border-radius:0}
  .admin .cc-table,.admin .cc-table tbody,.admin .cc-table tr,.admin .cc-table td{display:block;width:100%;box-sizing:border-box}
  .admin .cc-table thead{display:none}
  .admin .cc-table tr{margin:0 0 8px;padding:8px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
  .admin .cc-table td{display:flex;justify-content:space-between;gap:12px;padding:3px 0;border:0;font-size:14px;text-align:right;overflow-wrap:anywhere}
  .admin .cc-table td::before{content:attr(data-l);flex:none;max-width:45%;text-align:left;color:var(--ink-3);font-size:13px;font-weight:700}
}

/* ===== Telefono, tappa 5b: «Da scoprire» (avvisi a una riga, filtri che scorrono, selezione compatta, schede più basse) ===== */
@media (max-width:640px){
  .admin details.ds-fold{padding:0}
  .admin details.ds-fold > summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:46px;padding:8px 14px;font-weight:700;font-size:14.5px;line-height:1.3}
  .admin details.ds-fold > summary::-webkit-details-marker{display:none}
  .admin details.ds-fold > summary::after{content:"▾";flex:none;font-size:17px;color:var(--ink-3);transition:transform .15s}
  .admin details.ds-fold[open] > summary::after{transform:rotate(180deg)}
  .admin details.ds-fold > :not(summary){display:block;margin:0;padding:0 14px 10px;font-size:14px;line-height:1.45}
  .admin details.ds-fold > .btn{margin:0 14px 12px;width:calc(100% - 28px);padding:0 14px}
  .discover > .ds-provs,.discover > .ds-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:8px;margin-inline:-16px;padding:2px 16px 6px}
  .discover > .ds-provs::-webkit-scrollbar,.discover > .ds-tabs::-webkit-scrollbar{display:none}
  .discover > .ds-provs > *,.discover > .ds-tabs > *{flex:none;white-space:nowrap}
  .discover > .ds-tabs .tab{min-height:42px;padding:8px 16px;font-size:15px}
  .ds-list{gap:10px}
  .ds-card{padding:14px;gap:8px;border-radius:16px}
  .ds-card h3{font-size:18px;line-height:1.25}
  .ds-top{gap:6px 8px}
  .ds-top .chip,.ds-flag,.ds-venue{font-size:13px}
  .ds-found{margin-left:0;flex:1 1 150px;font-size:13px}   /* T5.5c: sta sulla stessa riga di «NON VERIFICATA» se c'è posto */
  .ds-facts{gap:4px;font-size:14.5px}
  .ds-desc{font-size:14.5px;line-height:1.45}
  .ds-checks{padding:8px 12px;gap:0}
  .ds-checks-h{font-size:13px;margin:0 0 2px}
  .ds-ck{align-items:center;min-height:44px;font-size:14.5px}
  .ds-actions{flex-wrap:nowrap;gap:8px}
  .ds-actions .btn{flex:1 1 0;min-width:0;margin:0;padding-inline:10px;white-space:normal;line-height:1.2}
  .ds-prov{font-size:18px;margin-top:6px}
}

/* ===== Telefono, tappa 5c: Idee e Posti (un solo pulsante «Filtri», testo introduttivo breve), Trekking (pulsante «Proponi» accorciato) ===== */
@media (max-width:640px){
  #filters:not([hidden]):has(> .mf-btn){display:flex;justify-content:flex-end;padding:0;margin:0}
  .filters-sheet .place-tools{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
  .ideas-intro{margin:6px 0;font-size:14px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .con-controls .con-end .btn{white-space:nowrap}
}

/* tappa 5c, moduli idea e posto: prima i campi essenziali, poi «Altre opzioni» (l'ordine visivo cambia solo sul telefono) */
@media (max-width:640px){
  #ideaForm .field:has(#i-title){order:1} #ideaForm .field:has(#i-cat){order:2} #ideaForm .field:has(#i-desc){order:3} #ideaForm .opt-toggle{order:4} #ideaForm .field.opt{order:5}
  #placeForm .field:has(#p-name){order:1} #placeForm .field:has(#p-kind){order:2} #placeForm .field:has(#p-city){order:3} #placeForm .field:has(#p-desc){order:4} #placeForm .opt-toggle{order:5} #placeForm .field.opt{order:6}
}

/* Concerti, telefono: il «Giorno» a calendario resta sempre in vista (sotto «Cosa»), «Quando e dove» a richiesta */
@media (max-width:640px){
  .con-search > label.s-day:nth-of-type(n+2),.v-search > label.s-day:nth-of-type(n+2){display:flex;grid-column:1 / -1;grid-row:2;padding:0 4px;border:0;border-top:1px solid var(--line)}
  .con-search:has(> .s-day) > .v-filtri,.v-search:has(> .s-day) > .v-filtri{grid-row:3}
  .con-search:has(> .s-day) > label:nth-of-type(2),.v-search:has(> .s-day) > label:nth-of-type(2){grid-row:4}
  .con-search:has(> .s-day) > label:nth-of-type(4),.v-search:has(> .s-day) > label:nth-of-type(4){grid-row:5}
  .con-search .s-day input,.v-search .s-day input{width:100%;padding:10px 0}
}

/* ===== Telefono, T5.1 (2026-10-07): bersagli di tocco ≥ 44 px, testi ≥ 12 px, campi a 16 px, testata snella. Misure: tools/tests/telefono (piano: docs/piano-telefono.md) ===== */
@media (max-width:640px){
  /* testata: solo logo e profilo. Amministrazione, I miei eventi e Le mie richieste si aprono dal foglio «Altro» (renderBottomNav), con il numero rosso come pallino sulla voce «Altro» */
  body:has(#bottomnav:not([hidden])) header.top .top-actions .dis-btn{display:none}
  header.top{padding-block:6px}
  header.top .brand h1{margin:0}
  #homeLink{display:inline-flex;align-items:center;min-height:44px}
  .me-link{min-width:44px;min-height:44px;justify-content:center;padding:0}
  .me .me-link img{width:36px;height:36px}
  .pm-item{min-height:44px}
  /* bersagli di tocco */
  .btn,.tab,.fchip,.v-filtri,.mf-btn,.chip-btn,summary,.ms-item,.back-home,.export-btn{min-height:44px}
  .btn.small,.btn.ghost{min-height:44px}
  label.cc-check,.ds-ck,.ds-bulk label{min-height:44px;display:flex;align-items:center;gap:8px}
  /* testi: mai sotto i 12 px (etichette, badge, note); il corpo resta com'è */
  .badge,.n,.ds-private,.chip,.wd,.m,small,.small,.muted.small,.cc-l,.scan-pill{font-size:max(12px,1em)}
  .badge,.n.hot{min-width:20px;height:20px;line-height:20px}
  /* campi: 16 px (il browser non ingrandisce e il testo si legge) */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea{font-size:16px}
  /* pallino su «Altro» */
  .bottomnav button{position:relative}
  .bottomnav .dot{position:absolute;top:2px;left:calc(50% + 6px);min-width:20px;height:20px;padding:0 5px;border-radius:99px;background:#C62D33;color:#fff;font-size:12px;font-weight:700;line-height:20px;text-align:center;box-sizing:border-box}
  .ms-me{margin-top:14px}
  .ms-me .ms-grid{grid-template-columns:1fr}
  .more-sheet[open]{max-height:88dvh;overflow-y:auto;overscroll-behavior:contain}
  .ms-me h4{margin:0 0 8px;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2)}
  .ms-item .n.hot{background:#C62D33;color:#fff}
}

/* T5.1, «pavimento»: alcune regole di sezione (Amministrazione, Cinema, Concerti, schede, piè di pagina) fissano altezze di 40-42 px o caratteri di 14-15 px nei campi.
 * Questo blocco è l'ultimo caricato e vale su tutto il telefono: da qui in giù niente scende sotto i 44 px di tocco né i 16 px nei campi. */
@media (max-width:640px){
  :is(.btn,.tab,.fchip,.v-filtri,.mf-btn,.vote,.show-time,.star,.heart,.back,.rm,.lg-chips button,.sf-link,#sfHelp,#sfPrivacy,#sfPublic,.install-bar .btn,.push-bar .btn){min-height:44px!important}
  :is(.btn.ghost,.back,.rm,.star,.heart){min-width:44px!important}
  :is(.star,.heart,.sf-link,#sfHelp,#sfPrivacy,#sfPublic){display:inline-flex;align-items:center;justify-content:center}
  :is(select,input[type=time],input.tm-in,input[type=date],input[type=search],input[type=text],input[type=url],input[type=email],input[type=number],textarea,.fm-search){font-size:16px!important}
  :is(select,input[type=time],input.tm-in,input[type=date],.fm-search){min-height:44px!important}
}

/* T5.1, seconda passata */
@media (max-width:640px){
  :is(.ctile,.lg-chips button,.cat-tile){min-height:44px!important}
  :is(input,select,textarea):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=hidden]){min-height:44px}
  textarea{min-height:88px}
  a.ext{display:inline-flex;align-items:center;min-height:44px}
  .leaflet-bar a,.leaflet-control-zoom a{width:44px!important;height:44px!important;line-height:44px!important;font-size:22px!important}
  /* testi sotto i 12 px: barra in basso, pareri, contatori */
  .bottomnav button .tx,.vl,.cnt,.ctile,.ctile *{font-size:max(12px,1em)}
  .bottomnav button .tx{font-size:12px}
}


/* T5.1, terza passata: i testi di 10-11 px (date, etichette, badge, contatori) salgono a 12 px sul telefono. Stessi selettori delle regole originali (style.css), caricate prima: qui vincono per ordine. */
@media (max-width:640px){
  .stub .wd,.chip,.badge,.cal-wd,.cal-ev b,.cal-more,.vote .vl,.irow .vote .vl,.p-date .wd,.p-date .m,.p-cat,.p-seats,.fact .lbl,.place-score .cnt,.datebadge .wd,.datebadge .m,.datebadge .more,
  .erow-date .more,.ccard-date .more,.st-h span,.fp-date i,.rc-row small,.sections .n,.catfilter.tiles .ctile,.v-cats .ctile{font-size:12px}
  .viewswitch button,.layout-switch button{min-height:44px}
  a.chip,button.chip{display:inline-flex;align-items:center;min-height:44px}
  summary{min-width:44px}
  /* caselle di spunta: Chrome ignora il padding sulle caselle native, quindi l'area di tocco di 44 px sta nell'etichetta che le contiene... */
  label:has(> input[type=checkbox]),label:has(> input[type=radio]){min-height:44px;display:flex;align-items:center;gap:10px}
  /* ...e la casella di selezione delle schede di «Da scoprire» (senza etichetta) è disegnata a mano: 44×44 di tocco, quadrato di 22 px */
  .v-pills button,.v-pills a{min-height:44px}
}

/* T5.1: a 360-380 px il menu «Quando vuoi» (16 px) non entra nella barra di ricerca: la ricerca prende lo spazio che serve al menu, che si accorcia con i puntini invece di tagliare le lettere */
@media (max-width:640px){
  .searchbar .s-what{flex:1 1 40%;min-width:0}
  .searchbar .s-when{flex:0 1 52%;min-width:0}
  .searchbar .s-when select{text-overflow:ellipsis}
  .searchbar label{padding:0 10px}
}

/* T5.2 — home e pagine elenco sul telefono (piano: docs/piano-telefono.md). Home: un solo carosello (in evidenza) con schede basse, Concerti e «vicino a te» a 3 righe,
 * mappa bassa, striscione basso; «Esplora per categoria» e «Come funziona» non si disegnano sul telefono (js/app.js, vetrinaHome: le categorie sono già nelle pillole).
 * Elenchi: sull'«Elenco» a righe (predefinito sul telefono, `rowsPref` in app.js) le intestazioni dei mesi restano agganciate sotto la testata. */
@media (max-width:640px){
  .v-sec{margin-top:12px;gap:12px}
  .v-head h2{font-size:22px}
  .v-cards .cover{aspect-ratio:16 / 7}
  .v-cards .ecard{flex-basis:84%}
  .v-cards .ebody{gap:4px}
  .v-near{gap:12px}
  .v-map-box{min-height:170px!important;height:170px}
  .v-map-wrap{gap:4px}
  .v-banner,.v-banner.photo{height:170px!important;min-height:0;padding:0 18px 16px!important;margin-top:18px}
  .v-banner h2{font-size:22px}
  .v-banner p{display:none}
  .v-list li{padding-bottom:8px}
  .month-h,.group-h,.period-h{position:sticky;top:56px;z-index:5;margin:0 -16px;padding:8px 16px;background:var(--bg-sticky,var(--surface));box-shadow:0 1px 0 var(--line)}   /* sfondo pieno del tema (prima: un blu scuro fisso, illeggibile nei temi chiari) */
}

/* T5.3 — scheda film sul telefono: tessere (uscita, genere, trailer, fonte, IMDb) più basse, sempre una sotto l'altra con icona a sinistra. */
@media (max-width:640px){
  .film-facts{gap:8px}
  .film-facts .fact{gap:10px;padding:8px 12px;align-items:center}
  .film-facts .fact > .ico{width:32px;height:32px;padding:7px;flex:none}
  .film-facts .fact .val,.film-facts .fact .val a.ext{font-size:16px;line-height:1.25;margin-top:0}
}
@media (max-width:640px){
  details.fold > summary{list-style:none;cursor:pointer;min-height:44px;display:flex;align-items:center;justify-content:space-between}
  details.fold > summary::-webkit-details-marker{display:none}
  details.fold > summary::after{content:'▾';margin-left:8px;color:var(--ink-3)}
  details.fold[open] > summary::after{content:'▴'}
  details.fold > summary .sec-h{margin:0}
}

/* T5.4 — moduli idea, posto e film sul telefono: via il paragrafo introduttivo (il titolo e i segnaposto dicono già cosa serve) e la nota «campo obbligatorio» più piccola. */
@media (max-width:640px){
  #ideaForm .form-hint,#placeForm .form-hint,#filmForm .form-hint{display:none}
  .propose .f-reqnote{margin:0}
}

/* T5.5 — Amministrazione sul telefono: pulsanti-titolo delle tabelle Cinema con area di tocco di 44 px. */
@media (max-width:640px){
  .ci-open{display:inline-flex;align-items:center;min-height:44px}
  .ci-film{display:inline-block!important;padding:12px 0}
}

/* T5.5 — Statistiche sul telefono: riquadri dei numeri a due colonne e più bassi (1fr di style.css a ≤ 720 px, qui 2). */
@media (max-width:640px){
  .st-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .st-card{padding:12px}
  .st-card strong{font-size:28px}
  .st-card span{font-size:13px}
}
@media (max-width:640px){
  details.ds-filtri{margin:8px 0}
  details.ds-filtri > summary{list-style:none;cursor:pointer;min-height:44px;display:flex;align-items:center;gap:6px;padding:0 14px;border:1px solid var(--line);border-radius:12px;font-weight:600}
  details.ds-filtri > summary::-webkit-details-marker{display:none}
  details.ds-filtri > summary::after{content:'▾';margin-left:auto}
  details.ds-filtri[open] > summary::after{content:'▴'}
  details.ds-filtri > summary small{font-weight:400;color:var(--ink-3)}
  details.ds-filtri > .ds-provs,details.ds-filtri > .ds-selects{margin-top:8px}
}
@media (max-width:640px){
  details.ds-fold > summary{list-style:none;cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:600}
  details.ds-fold > summary::-webkit-details-marker{display:none}
  details.ds-fold > summary::after{content:'▾';margin-left:auto}
  details.ds-fold[open] > summary::after{content:'▴'}
}

/* T5.5 — «Da scoprire»: la barra di selezione è una sola riga (conteggio + pulsanti) che scorre di lato, invece di 4 righe. */
@media (max-width:640px){
}

/* T5.5 — «Da scoprire»: scheda compatta; il resto sta in «Dettagli e verifica». */
@media (max-width:640px){
  .ds-card{padding:10px 14px;gap:2px}
  .ds-card .ds-top{gap:4px 8px;margin-bottom:0}
  .ds-card h3{margin:2px 0 0}
}

/* T5.5 — carte delle ricerche (Concerti, Sagre, Cinema, Da scoprire › Ricerche): più basse, stesse informazioni. */
@media (max-width:640px){
  .scan-card{padding:12px 14px;gap:4px}
  .scan-card p{margin:2px 0;font-size:14px;line-height:1.35}
  .scan-card .scan-top{margin-bottom:2px}
  .scan-card h3{font-size:17px}
  .scan-card .scan-help{padding:8px 10px}
  /* T5.5b: una riga per ricerca (nome, stato), «Quando» e «Ultima esecuzione» si aprono al tocco; il pulsante «▶» resta sempre sotto */
  .scan-fold > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;min-height:44px}
  .scan-fold > summary::-webkit-details-marker{display:none}
  .scan-fold > summary h3{flex:1;min-width:0}
  .scan-fold > summary::after{content:"▾";flex:none;font-size:17px;color:var(--ink-3);transition:transform .15s}
  .scan-fold[open] > summary::after{transform:rotate(180deg)}
  .scan-fold > p{padding-bottom:4px}
}

/* T5.6 — Aiuto sul telefono: sezioni di domande ripiegate (titolo + numero di domande). */
@media (max-width:640px){
  details.help-gfold > summary{list-style:none;cursor:pointer;min-height:48px;display:flex;align-items:center;gap:10px}
  details.help-gfold > summary::-webkit-details-marker{display:none}
  details.help-gfold > summary h3{margin:0;flex:1}
  details.help-gfold > summary .help-n{font-size:13px;color:var(--ink-3)}
  details.help-gfold > summary::after{content:'▾';color:var(--ink-3)}
  details.help-gfold[open] > summary::after{content:'▴'}
  details.help-gfold[open] > summary{margin-bottom:6px}
}

/* T5.6 — Profilo, I miei eventi, Riepilogo, Aiuto: più bassi sul telefono (computer e tablet invariati) */
@media (max-width:640px){
  .pf-avatar{width:72px;height:72px}   /* il resto della testata del profilo (copertina, foto a cavallo) è in css/style.css */
  .pf-id h2{font-size:var(--t-lg)}
  .pf-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .pf-stat{padding:10px 10px;gap:2px;border-radius:14px}
  .pf-stat strong{font-size:var(--t-xl)}
  .myev-act{flex-wrap:wrap;align-items:center}
  .myev-act > .btn,.myev-more > summary{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .myev-more{display:contents}
  .myev-more > summary{list-style:none;cursor:pointer}
  .myev-more > summary::-webkit-details-marker{display:none}
  .myev-more-b{flex:1 1 100%;display:flex;flex-wrap:wrap;gap:8px;order:9}
  body:has(.export) .catfilter.tiles{grid-template-rows:auto}
  .myev > .ds-provs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:8px;margin-inline:-16px;padding:2px 16px 6px}
  .myev > .ds-provs::-webkit-scrollbar{display:none}
  .myev > .ds-provs > *{flex:none;white-space:nowrap}
  .help-group{margin-top:0;gap:4px}
  details.help-gfold > summary{min-height:44px}
}

/* T7: chi chiede meno movimento (impostazione del telefono) non vede animazioni né transizioni, comprese quelle nuove (fisarmoniche, frecce, fogli) */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ===== Home Eventi sul telefono: nuova immagine (versione verticale) con titolo, ricerca e scelte SOPRA l'immagine (2026-10-09) ===== */
@media (max-width:640px){
  .v-hero.v-hero-eventi{min-height:320px;border-radius:0 0 26px 26px}
  .v-hero-eventi::before{height:auto;max-height:none;background-image:url("../img/hero-home-mobile.webp");background-position:center bottom;background-size:cover}
  .v-hero-eventi .v-hero-in{margin:0;padding:22px 14px 150px;gap:8px}
  .v-hero-eventi h2{font-size:26px;max-width:16ch}
  .v-hero-eventi p{display:none}      /* il sottotitolo si legge nelle pagine interne: sul telefono si risparmia spazio */
  .v-hero-eventi .v-ask,.v-hero-concerti .v-ask,.v-hero-cinema .v-ask{margin:4px 0 0;font-size:14px}
}

/* ===== Home Concerti sul telefono: ritaglio verticale del concerto con titolo e ricerca SOPRA l'immagine (2026-10-09) ===== */
@media (max-width:640px){
  .v-hero.v-hero-concerti{min-height:380px;border-radius:0 0 26px 26px}
  .v-hero-concerti::before{height:auto;max-height:none;background-image:url("../img/hero-concerti-mobile.webp");background-position:center bottom;background-size:cover}
  .v-hero-concerti::after{background:linear-gradient(180deg,rgba(var(--hero-ov,16,10,44),.68) 0%,rgba(var(--hero-ov,16,10,44),.45) 55%,rgba(var(--hero-ov,16,10,44),0) 100%)}
  .v-hero-concerti .v-hero-in{margin:0;padding:8px 14px 40px;gap:8px}
  .v-hero-concerti h2{font-size:26px;max-width:16ch}
  .v-hero-concerti p{display:none}
}

/* ===== Home Trekking sul telefono: ritaglio verticale del trekking con titolo e ricerca SOPRA l'immagine (2026-10-09) ===== */
@media (max-width:640px){
  .v-hero.v-hero-trekking{min-height:434px;border-radius:0 0 26px 26px}
  .v-hero-trekking::before{height:auto;max-height:none;background-image:url("../img/hero-trekking-mobile.webp");background-position:center bottom;background-size:cover}
  .v-hero-trekking::after{background:linear-gradient(180deg,rgba(var(--hero-ov,16,10,44),.68) 0%,rgba(var(--hero-ov,16,10,44),.45) 55%,rgba(var(--hero-ov,16,10,44),0) 100%)}
  .v-hero-trekking .v-hero-in{margin:0;padding:22px 14px 40px;gap:8px}
  .v-hero-trekking h2{font-size:26px;max-width:16ch}
  .v-hero-trekking p{display:none}
}

/* ===== Home Cinema sul telefono: ritaglio verticale della sala con titolo e ricerca SOPRA l'immagine (2026-10-10) ===== */
@media (max-width:640px){
  .v-hero.v-hero-cinema{min-height:434px;border-radius:0 0 26px 26px}
  .v-hero-cinema::before{height:auto;max-height:none;background-image:url("../img/hero-cinema-mobile.webp");background-position:center bottom;background-size:cover}
  .v-hero-cinema::after{background:linear-gradient(180deg,rgba(var(--hero-ov,16,10,44),.68) 0%,rgba(var(--hero-ov,16,10,44),.45) 55%,rgba(var(--hero-ov,16,10,44),0) 100%)}
  .v-hero-cinema .v-hero-in{margin:0;padding:22px 14px 40px;gap:8px}
  .v-hero-cinema h2{font-size:26px;max-width:16ch}
  .v-hero-cinema p{display:none}
}

/* ===== Idee sul telefono: ritaglio verticale della terrazza con titolo e ricerca SOPRA l'immagine (2026-10-10) ===== */
@media (max-width:640px){
  .v-hero.v-hero-idee{min-height:434px;border-radius:0 0 26px 26px}
  .v-hero-idee::before{height:auto;max-height:none;background-image:url("../img/hero-idee-mobile.webp");background-position:center bottom;background-size:cover}
  .v-hero-idee::after{background:linear-gradient(180deg,rgba(var(--hero-ov,16,10,44),.68) 0%,rgba(var(--hero-ov,16,10,44),.45) 55%,rgba(var(--hero-ov,16,10,44),0) 100%)}
  .v-hero-idee .v-hero-in{margin:0;padding:22px 14px 40px;gap:8px}
  .v-hero-idee h2{font-size:26px;max-width:16ch}
  .v-hero-idee p{display:none}
}

/* ===== Dove andare sul telefono: ritaglio verticale del borgo sul lago (2026-10-10) ===== */
@media (max-width:640px){
  .v-hero-andare::before{background-image:url("../img/hero-andare-mobile.webp");background-position:center bottom}
  .v-hero-mangiare::before{background-image:url("../img/hero-mangiare-mobile.webp");background-position:center bottom}
}

/* Scheda evento: «Proposto da» (nome dell'organizzatore) è alto 44 px come gli altri bersagli di tocco */
@media (max-width:640px){ .organizer.org-link{min-height:44px} }

/* «Azzera i filtri» accanto a «Filtri» e nel foglio (A-78, tappa 3) */
.mf-clear{display:none}
@media (max-width:640px){ .mf-clear{display:inline-flex;align-items:center;justify-content:center;flex:none;min-width:44px;min-height:44px;padding:0 12px;font-size:20px;line-height:1}
  .filters-sheet .mf-reset{width:100%;min-height:44px;margin:6px 0} }