/* 28/08/2026 — veste cosmica della pagina Ville storiche.
   Le regole stanno in un file a parte perche' ho_ville.html (95 KB) non si puo'
   modificare col connettore Dropbox. Tutto e' chiuso dentro
   `body:has(.dimore)`: nessun'altra pagina di HO viene toccata.
   La copia di questo file di prima si chiama
   /ho_laboratorio_claude/ho_base_prima_cosmo_280826.css */
@import url("/ho_cosmo.css");
@import url("/ho_cielo.css");

/* ===========================================================================
   ho_base.css — la base comune di Hub Office · 22/08/2026
   
   REGOLA DI QUESTO FILE: NON SPAGINA NIENTE.
   Sopra i 640 px non contiene NESSUNA regola di impaginazione — su PC e su iPad
   in orizzontale le pagine restano identiche a com'erano. Tutto quello che c'è
   qui dentro si accende solo sul telefono e sui tablet stretti, cioè dove le
   pagine erano già rotte. L'unica eccezione, dichiarata in fondo, sono le
   rimozioni chieste da Sz, che valgono a ogni larghezza.
   
   NON VA AGGIUNTO A MANO ALLE PAGINE: `_worker.js` lo inserisce da solo in ogni
   pagina HTML servita dal sito, subito dopo <head> e quindi PRIMA del <style>
   della pagina — così le regole proprie di ogni pagina continuano a vincere.
   Vale anche per le pagine che verranno.
   
   Verificato con ho_collaudo.html, che prova ogni pagina a 390, 820 e 1440 px.
   Primo collaudo del 22/08/2026: 26 pagine su 26 con la base, zero errori.
   =========================================================================== */

/* ---- i colori di HO, disponibili a chi li vuole usare ---------------------
   Sono solo dichiarazioni di variabili: una variabile che nessuno usa non
   cambia una virgola. Le pagine che definiscono le proprie le sovrascrivono. */
:root{
  --ho-fondo:#080d16; --ho-tit:#e6ecf5; --ho-et:#7d90ab; --ho-sec:#8b9cb4;
  --ho-txt:#dbe3ef; --ho-num:#ffffff; --ho-linea:#1b2536; --ho-linea2:#141c2a;
  --ho-cardo:#0e1421; --ho-cardospicca:#131b2b; --ho-meno:#6f9fc4;
  --ho-nota:#b0515f; --ho-att:#c98a95;
  --ho-s1:#3987e5; --ho-s2:#d95926; --ho-s3:#199e70;
  /* le tre soglie, scritte una volta sola */
  --ho-telefono:640px; --ho-tablet:1024px;
}

/* ===========================================================================
   TABLET STRETTO — da 1024 px in giù
   =========================================================================== */
@media (max-width:1024px){
  /* un elemento dentro una griglia o una riga elastica, per difetto, si rifiuta
     di rimpicciolirsi sotto il proprio contenuto: è la causa numero uno delle
     pagine che sfondano di lato. Questa riga glielo permette. */
  .ho-b, [class*="griglia"] > *, [class*="grid"] > *, [class*="riga"] > *{min-width:0}
  /* niente che esca dai bordi */
  img, video, canvas{max-width:100%}
  /* le righe di filtri vanno a capo invece di allungarsi all'infinito.
     Misurato il 22/08 su ho_mappe: `.filtro-grp` era larga 1418 px dentro una
     finestra da 820, e `.tett-row` 840 px dentro 390. */
  [class*="filtro"], [class*="tett"], [class*="grp"], [class*="filtri"]{flex-wrap:wrap}
}

/* ===========================================================================
   TELEFONO — da 640 px in giù
   Qui le pagine erano rotte: tutto ciò che segue raddrizza.
   =========================================================================== */
@media (max-width:640px){

  /* --- 1 · niente sfonda più di lato ------------------------------------- */
  *{min-width:0}
  img, video, canvas, svg, iframe{max-width:100%}
  /* iOS ingrandisce da solo i testi quando ruoti: glielo si toglie */
  html{-webkit-text-size-adjust:100%}

  /* --- 2 · le griglie si riordinano, NON si incolonnano ------------------
     ⚠ CORRETTO IL 22/08 SU SEGNALAZIONE DI SZ. La prima versione mandava tutto
     a UNA colonna: le sfere e i tasti azzurri, che stavano a coppie, si erano
     messi in fila indiana e lo scorrimento era diventato chilometrico.
     Con `auto-fit` le caselle si appaiano da sole finché ci stanno — su 390 px
     vuol dire due per riga — e vanno a una colonna solo quando davvero non
     entrano. Quattro colonne su 390 restano escluse: farebbero 97 px l'una. */
  [class*="griglia"], [class*="grid"], .cifre, .misura, .cap, .fonti, .mod, .riep,
  .due, .scorci, .cifre-riga{
    grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)) !important;
  }

  /* --- 3 · le fasce lunghe scorrono invece di sfondare ------------------- */
  .striscia, [class*="carosello"]{
    overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%;
  }
  /* IL METEO — i quindici giorni vanno a capo, non si trascinano di lato.
     Prima versione: la striscia (2008 px) scorreva in orizzontale, e per vedere
     giovedì bisognava trascinare. Sul telefono non va bene: i giorni si
     dispongono in righe da tre e si vedono tutti scorrendo in giù, come tutto
     il resto della pagina. */
  .meteo-striscia{
    flex-wrap:wrap !important; overflow-x:visible !important; max-width:100%;
    justify-content:flex-start; gap:6px;
  }
  .meteo-striscia > *{flex:1 1 30% !important; min-width:0}
  .meteo-dett-grid{grid-template-columns:repeat(2,1fr) !important}

  /* --- 4 · le tabelle scorrono dentro il loro riquadro ------------------- */
  .scorri, .tabella-scorri, [class*="scorri"]{
    overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%;
  }
  table{font-size:12px}
  th, td{padding-left:7px; padding-right:7px}

  /* --- 5 · i nomi degli allegati vanno a capo, non si troncano ----------- */
  [class*="alleg"], [class*="allegato"], [class*="attach"], [class*="file-nome"],
  .og, .last, .n{
    white-space:normal !important;
    overflow:visible !important;
    overflow-wrap:anywhere;
    word-break:break-word;
    text-overflow:clip;
  }
  /* NOTA — verificato il 22/08 aprendo la posta a 390 px: i nomi degli allegati
     e degli oggetti stanno in `span.og` e `span.last`, con `nowrap`,
     `overflow:hidden` e `text-overflow:clip`. Con `clip` il nome veniva tagliato
     di netto, senza nemmeno i puntini che avvertono che manca qualcosa. */

  /* --- 6 · le barre di comandi vanno a capo invece di stringersi --------- */
  nav, [class*="barra"], [class*="comandi"], [class*="tabs"], [class*="toolbar"]{
    flex-wrap:wrap;
  }
  /* i tasti si appaiano invece di prendere una riga ciascuno */
  nav button, [class*="barra"] button{flex:1 1 40%}

  /* --- 7 · i campi non fanno più ingrandire la pagina --------------------
     Sotto i 16 px iOS zuma da solo quando tocchi un campo, e da lì in poi la
     pagina resta ingrandita e sembra rotta. */
  input, select, textarea{font-size:16px}

  /* --- 8 · le mappe e i grafici prendono un'altezza sensata -------------- */
  .mappa iframe, .satellite iframe, iframe[src*="google.com/maps"]{height:300px}

  /* --- 9 · titoli e margini più stretti, senza cambiare la gerarchia ----- */
  .avvolgi, .wrap, [class*="avvolgi"], [class*="wrap"]{padding-left:14px; padding-right:14px}

  /* --- 10 · i percorsi dei file vanno a capo -----------------------------
     Misurato il 22/08 su ho_rendiconto: il <code> con il percorso Dropbox era
     largo 550 px in una finestra da 390, e da solo spingeva fuori la pagina. */
  code, pre, kbd, samp{
    overflow-wrap:anywhere; word-break:break-word; white-space:pre-wrap; max-width:100%;
  }

  /* --- 11 · le celle delle tabelle si stringono invece di allargare ------ */
  td, th{overflow-wrap:anywhere}

  /* --- 12 · l'ultima rete: la pagina non scorre mai di lato --------------
     `clip` e non `hidden`: `hidden` romperebbe le testate che restano attaccate
     in alto, `clip` no. I riquadri che devono scorrere hanno il loro scorrimento
     e continuano a funzionare. */
  html{overflow-x:clip}
}

/* ===========================================================================
   TELEFONO STRETTO — da 400 px in giù (iPhone in verticale)
   =========================================================================== */
@media (max-width:400px){
  .meteo-dett-grid{grid-template-columns:1fr !important}
  table{font-size:11.5px}
}

/* ===========================================================================
   STAMPA — perché una scheda si stampa e oggi esce nera
   =========================================================================== */
@media print{
  body{background:#fff !important; color:#000 !important}
  nav, .barra, [class*="tasto"], #tip{display:none !important}
  .scheda, .cif, .g{border:1px solid #999 !important; background:#fff !important; break-inside:avoid}
}

/* ===========================================================================
   RIMOZIONI CHIESTE DA SZ — 22/08/2026
   Vale a TUTTE le larghezze: non è un adattamento, è una cosa che non deve più
   comparire. Sta qui e non nelle pagine perché così basta togliere due righe
   per farla riapparire, senza rimettere le mani in cinque file.
   =========================================================================== */

/* Il cartiglio tecnico in fondo alle pagine — «Progetto · Sorgenti · Revisione ·
   Viste · Apertura · Meteo · Cadenze» — e la nota «Fatto il … / Non ancora
   costruito …» che lo segue. Erano appunti di lavorazione, non contenuto.
   Stanno fuori dal commutatore delle viste, quindi sparendo da qui spariscono
   in tutte e quattro: giorno, settimana, mese e anno.
   Presenti su: calendario · finanza · settore · grafico · biblioteca titoli. */
.sheet .cart,
.sheet .cart ~ p.nota{display:none !important}

/* ===========================================================================
   26/08/2026 — LA BARRA DELL'APP INSTALLATA
   Hub Office e' installato col tasto «installa app»: si apre in finestra
   propria, e Chrome le disegna sopra una striscia con ICONA E NOME dell'app,
   all'angolo in alto a sinistra. E' cornice della finestra, non pagina: per
   settimane l'abbiamo cercata dentro l'HTML, dove non poteva esserci.

   Il manifest chiede gia' `window-controls-overlay`: in quel modo Chrome
   TOGLIE la striscia e lascia solo i tre tasti della finestra a destra,
   consegnando alla pagina anche quella fascia. Non era attivo perche' l'app
   era stata installata quando il manifest ancora non lo chiedeva, e Chrome
   tiene il manifest del giorno dell'installazione: va reinstallata.

   Qui si prepara la pagina a quel modo, e SOLO a quel modo — la regola vive
   dentro `@media (display-mode: window-controls-overlay)`, quindi nel browser
   normale e su telefono non cambia assolutamente niente.
     · si tiene libera la fascia dei tasti di finestra a destra, altrimenti
       l'orologio della testata ci finirebbe sotto;
     · la testata diventa presa per trascinare la finestra, che altrimenti
       resterebbe senza un punto dove afferrarla;
     · i tasti dentro la testata restano cliccabili (app-region: no-drag),
       se no il trascinamento se li mangia.
   =========================================================================== */
/* === GUASTO DEL 27/08/2026 — LA TESTATA SI MANGIAVA I CLIC ================
   Sintomo: nell'app installata, dentro il cestino della posta non si
   spuntavano piu' le caselle e il tasto «Elimina definitivamente» non
   rispondeva. Nel browser normale funzionava tutto.
   Causa: qui sotto `-webkit-app-region: drag` era su TUTTA `.hot-testata`,
   che e' alta 178px e larga quanto la finestra. Una zona di trascinamento
   NON e' un normale elemento sovrapposto: Chrome la tratta come cornice
   della finestra e si mangia i clic **qualunque sia lo z-index di cio' che
   ci sta sopra**. La barra del cestino cade fra y 108 e y 161, cioe' dentro
   quel rettangolo: i clic finivano nel trascinamento della finestra.
   Nel browser la regola non si applica, ed e' per questo che a me
   funzionava e a Sz no.
   Cura: la presa per trascinare non e' piu' tutta la testata, ma solo la
   striscia centrale in alto, alta quanto la barra del titolo e larga il
   32%, la stessa usata da `ho_home.html` e dalla biblioteca: li' non c'e'
   nessun contenuto della pagina.
   REGOLA: `app-region: drag` non si mette mai su un contenitore grande.
   ========================================================================= */
@media (display-mode: window-controls-overlay) {
  .hot-testata {
    padding-right: calc(100vw - env(titlebar-area-width, 100vw) + 12px);
    -webkit-app-region: no-drag;
    app-region: no-drag;
  }
  .hot-testata::before {
    content: '';
    position: fixed;
    top: 0;
    left: 34%;
    width: 32%;
    height: env(titlebar-area-height, 33px);
    -webkit-app-region: drag;
    app-region: drag;
  }
  .hot-testata a,
  .hot-testata button,
  .hot-testata .hot-luogo,
  .hot-testata [onclick] {
    -webkit-app-region: no-drag;
    app-region: no-drag;
  }
}
