/* ======================================================================
   LAYOUT DESKTOP DELL'AREA RISERVATA v3  —  3/9/2026
   ----------------------------------------------------------------------
   COSA FA
   Sopra i 1200px l'area riservata smette di essere una colonna da 480px
   in mezzo al vuoto. Due cose:

   1. IL RIORDINO diventa due colonne, esattamente come il wizard: la sua
      barra appoggiata in fondo (#roBar sulle acque e sulla consegna,
      .ro-choicebar sulla conferma) e' la stessa che qui si ferma a
      destra come riquadro. Non e' una copia: e' quell'elemento, spostato.
      Nessun markup nuovo, nessun JavaScript.

   2. ABBONAMENTI, ORDINI E DATI prendono una navigazione ferma a
      sinistra: le tre schermate diventano tre voci sempre in vista, e non
      serve piu' tornare indietro o aprire il menu a tendina per passare
      dall'una all'altra. Questa e' l'unica parte che chiede markup:
      areaNavHtml() in v3-area.js, un <nav class="ar-side"> in testa a
      #view. Sul telefono quel nav e' display:none (la regola sta in
      v3-area.css, che il telefono legge davvero) e la barra in basso
      resta la navigazione di sempre.

   LE REGOLE CHE MI SONO DATO (le stesse di v3-desktop.css)
   1. Ogni regola vive dentro @media (min-width:1200px): sotto quella
      soglia il browser non legge una riga di questo file. Lo verifica
      tools/check-v3-desktop.py, che fallisce se trova una sola
      dichiarazione fuori da una media query.
   2. Ogni regola parte da html[data-vista^="/area"]: wizard e home non
      vengono sfiorati. La home resta sulla sua soglia di 1024px
      (v3-home-desktop.css), wizard e area stanno a 1200.
   3. Il riordino non ha un data-vista suo (gira sotto /area/home): lo si
      riconosce dal contenuto con :has(), come gia' fa la home con
      .app:has(.v3h). Niente :has() dentro :has(): non e' valido.
   4. Niente colori scritti a mano che valgano per un tema solo.

   PERCHE' 1200 E NON 1024
   Stessa ragione del wizard, e qui vale doppio: la scelta acque del
   riordino ha gli stessi chip dei filtri, che a 1024 non entrano piu' su
   una riga sola.

   PER TORNARE INDIETRO
   Commentare il <link> in index.html. Il <nav> resta nel DOM ma invisibile
   (display:none in v3-area.css), quindi non si vede niente di rotto.
   ====================================================================== */

@media (min-width: 1200px) {

  /* ====================================================================
     IL RIORDINO  —  contenuto a sinistra, la sua barra a destra
     ==================================================================== */

  /* .app si allarga solo quando dentro c'e' una delle barre del riordino. */
  html[data-vista^="/area"] .app:has(#roBar),
  html[data-vista^="/area"] .app:has(.ro-choicebar) {
    max-width: 1280px;
    padding-left: 24px;
    padding-right: 24px;
  }

  /* La barra di scorrimento va e viene cambiando passaggio: senza questo
     la pagina salta di 15px a ogni schermata. */
  html[data-vista^="/area"] { scrollbar-gutter: stable; }

  html[data-vista^="/area"] #view:has(#roBar),
  html[data-vista^="/area"] #view:has(.ro-choicebar) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 384px;
    column-gap: 28px;
    align-items: start;
  }
  /* Nessun grid-column sui figli generici: un selettore con #view batte
     per specificita' quelli a classe della barra, che finirebbe a
     sinistra. La colonna 2 e' occupata dalla barra su tutte le righe,
     quindi agli altri resta la 1 per auto-placement. */
  html[data-vista^="/area"] #view:has(#roBar) > *,
  html[data-vista^="/area"] #view:has(.ro-choicebar) > * { min-width: 0; }

  /* Lo spaziatore esisteva per non farsi coprire dalla barra in fondo. */
  html[data-vista^="/area"] #view:has(#roBar) .ro-spacer,
  html[data-vista^="/area"] #view:has(.ro-choicebar) .ro-spacer { display: none; }

  /* --- la barra diventa riquadro ------------------------------------ */
  html[data-vista^="/area"] #roBar,
  html[data-vista^="/area"] .ro-choicebar {
    grid-column: 2;
    grid-row: 1 / span 50;
    position: sticky;
    top: 20px;
    left: auto;
    right: auto;
    bottom: auto;
    transform: none;
    width: auto;
    max-width: none;
    z-index: 20;
    align-self: start;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    border-radius: 18px;
    border: 1px solid var(--glass-bd);
    padding: 16px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: 0 14px 38px rgba(0, 0, 0, .38);
  }
  html[data-theme="light"][data-vista^="/area"] #roBar,
  html[data-theme="light"][data-vista^="/area"] .ro-choicebar {
    border: 1px solid rgba(15, 23, 42, .12);
    box-shadow: 0 10px 30px rgba(16, 24, 40, .10);
  }

  /* La pulsazione (@keyframes bppulse) rimette translateX(-50%) a ogni
     fotogramma: con la barra a destra la sparerebbe a mezza pagina. */
  html[data-vista^="/area"] #roBar.pulse { animation: none; }

  /* --- dentro il riquadro delle acque: incolonnato, casse a sinistra -- */
  html[data-vista^="/area"] #roBar .bx-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    flex-wrap: nowrap;
  }
  html[data-vista^="/area"] #roBar .bx-crates { justify-content: flex-start; }
  html[data-vista^="/area"] #roBar .bx-crate  { padding: 6px; }
  html[data-vista^="/area"] #roBar .bx-slot   { width: 19px; height: 23px; }
  html[data-vista^="/area"] #roBar .bx-meta   { gap: 3px; }
  html[data-vista^="/area"] #roBar .bx-stat   { font-size: 15px; }
  html[data-vista^="/area"] #roBar .bx-cnt,
  html[data-vista^="/area"] #roBar .bx-see    { font-size: 13px; }
  html[data-vista^="/area"] #roBar .bx-col3 {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  html[data-vista^="/area"] #roBar .bx-tot { font-size: 30px; line-height: 1; text-align: left; }
  html[data-vista^="/area"] #roBar .bx-cta,
  html[data-vista^="/area"] #roBar .bx-cta.big {
    width: 100%;
    padding: 15px 20px;
    font-size: 16px;
    min-height: 48px;
  }

  /* --- dentro il riquadro della consegna e della conferma ------------ */
  html[data-vista^="/area"] #roBar .ro-bar-meta { gap: 3px; }
  html[data-vista^="/area"] #roBar .ro-bar-cta,
  html[data-vista^="/area"] .ro-choicebar .ro-cbar-primary {
    width: 100%;
    padding: 15px 20px;
    font-size: 16px;
    min-height: 48px;
  }
  html[data-vista^="/area"] .ro-choicebar .ro-cf-tot {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  html[data-vista^="/area"] .ro-choicebar .ro-cf-tot b { font-size: 30px; line-height: 1; }

  /* --- i filtri vanno a capo, non scorrono --------------------------
     Sul telefono i chip stanno su una riga che scorre col dito, e va bene.
     Qui no: la fascia dei filtri del riordino sta DENTRO .ar-wrap, quindi e'
     larga quanto la colonna di sinistra (868px, non i 1280 pieni del wizard)
     e gli ultimi chip finivano fuori vista, dietro uno scorrimento
     orizzontale che col mouse non si vede nemmeno. A capo si vedono tutti. */
  html[data-vista^="/area"] .ro-waters .fchips,
  html[data-vista^="/area"] .ro-waters .ftoks {
    flex-wrap: wrap;
    overflow-x: visible;
    row-gap: 8px;
  }

  /* --- le schede acqua: una per riga, aperta in orizzontale ---------- */
  html[data-vista^="/area"] .ro-waters .wlist { gap: 14px; }
  html[data-vista^="/area"] .ro-waters .wcard {
    flex-direction: row;
    align-items: stretch;
    gap: 22px;
    padding: 16px;
    transition: border-color .18s ease;
  }
  html[data-vista^="/area"] .ro-waters .wcard:hover { border-color: var(--sel-bd); }
  html[data-theme="light"][data-vista^="/area"] .ro-waters .wcard:hover { border-color: rgba(112, 98, 255, .45); }
  html[data-vista^="/area"] .ro-waters .wcleft {
    width: 156px;
    min-width: 156px;
    min-height: 184px;
    border-radius: 14px;
  }
  /* Nel riordino la scheda non ha le fasce .wc-info/.wc-buy del wizard:
     i pezzi stanno tutti dentro .wcright, quindi la colonna d'acquisto la
     si costruisce qui allineando prezzo e pulsante a destra. */
  html[data-vista^="/area"] .ro-waters .wcright {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 232px;
    grid-template-rows: auto auto auto auto;
    align-content: center;
    column-gap: 26px;
  }
  html[data-vista^="/area"] .ro-waters .wcright > .wbrand,
  html[data-vista^="/area"] .ro-waters .wcright > .wprem,
  html[data-vista^="/area"] .ro-waters .wcright > .wfmt,
  html[data-vista^="/area"] .ro-waters .wcright > .wmeta,
  html[data-vista^="/area"] .ro-waters .wcright > .wchem { grid-column: 1; }
  /* La fascia dei valori sta larga quanto le sue due misure, non quanto la
     colonna: allargata sembrava una barra da riempire. */
  html[data-vista^="/area"] .ro-waters .wcright > .wchem {
    justify-self: start;
    margin-top: 3px;
  }
  html[data-vista^="/area"] .ro-waters .wcright > .wprice {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    justify-self: end;
    text-align: right;
    margin-top: 0;
  }
  html[data-vista^="/area"] .ro-waters .wcright > .addbtn,
  html[data-vista^="/area"] .ro-waters .wcright > .card-stepper {
    grid-column: 2;
    grid-row: 3 / span 2;
    align-self: center;
    justify-self: end;
    margin-top: 0;
  }

  /* --- la conferma: le casse si vedono, non sono una miniatura ---------
     Sul telefono il riquadro delle acque e' largo quanto lo schermo e la
     cassa lo riempie. Qui la scheda e' larga 820 e la cassa da 124px ci
     galleggiava dentro come un francobollo: e' l'unico posto dove si
     controlla cosa si sta per pagare, quindi le bottiglie devono
     riconoscersi. Slot da 34 a 64: la cassa passa da 124 a 230px, e
     resta allineata a sinistra come su ogni altra schermata. Tre box
     entrano ancora in riga e dal quarto vanno a capo, invece di
     scorrere di lato (col mouse uno scorrimento orizzontale non si
     vede nemmeno). */
  html[data-vista^="/area"] .ro-crate { padding: 16px; }
  html[data-vista^="/area"] .ro-crate .bx-crates {
    flex-wrap: wrap;
    gap: 12px;
    row-gap: 12px;
  }
  html[data-vista^="/area"] .ro-crate .bx-crate { gap: 8px; padding: 12px; border-radius: 14px; }
  html[data-vista^="/area"] .ro-crate .bx-slot  { width: 76px; height: 91px; border-radius: 11px; }
  /* Qui la bottiglia e' grande abbastanza perche' le gocce ci stiano
     sopra senza coprirla: stesso segno del listino delle acque, cosi'
     naturale e frizzante si riconoscono anche nell'anteprima delle
     casse. L'immagine scende di 10px per lasciargliele passare. */
  /* Con la bottiglia a 76px la pillola torna esattamente quella del
     listino, misure comprese: sotto la soglia resta un filo piu' piccola
     perche' la miniatura e' meta'. */
  html[data-vista^="/area"] .ro-crate .bx-fz { padding: 3px 6px; border-radius: 10px; top: 5px; }
  html[data-vista^="/area"] .ro-crate .bx-fz .fz-dot { width: 7px; height: 10px; }
  html[data-vista^="/area"] .ro-crate .bx-slot.full img { padding-top: 12px; box-sizing: border-box; }

  /* La dashboard ha lo stesso riquadro di miniature: su monitor la scheda
     e' larga il triplo, quindi le bottiglie crescono anche li'. Restano
     piu' piccole di quelle della conferma (76): li' si guarda cosa si sta
     per pagare, qui e' un promemoria dell'ultimo ordine. */
  html[data-vista^="/area"] .ar-box .bx-slot { width: 64px; height: 77px; border-radius: 10px; }
  html[data-vista^="/area"] .ar-box .bx-slot.full img { padding-top: 10px; }

  /* --- i pannelli che salgono dal basso: col mouse, finestre al centro */
  html[data-vista^="/area"] .dsheet {
    top: 50%;
    bottom: auto;
    height: auto;
    max-height: 82vh;
    max-width: 560px;
    border-radius: 20px;
    transform: translate(-50%, -50%) scale(.96);
    opacity: 0;
    transition: transform .24s cubic-bezier(.4, 0, .2, 1), opacity .24s ease, visibility 0s linear .24s;
  }
  html[data-vista^="/area"] .dsheet.open {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    transition: transform .24s cubic-bezier(.4, 0, .2, 1), opacity .24s ease, visibility 0s;
  }
  html[data-vista^="/area"] .d-grab { display: none; }
  html[data-vista^="/area"] .d-x    { display: flex; }

  /* Lo stesso per il foglio dell'area (dettaglio acque, sposta consegna,
     menu): su schermo alto un pannello che sale dal basso resta
     lontanissimo dal puntatore.
     visibility: sul telefono il foglio chiuso sta FUORI schermo
     (translateY(102%)), quindi non da' fastidio a nessuno. Qui invece resta
     al centro della pagina, trasparente ma cliccabile: la sua striscia
     invisibile rubava i click alla scheda acqua che gli capitava sotto
     (i pulsanti + / - / Rimuovi della prima acqua non rispondevano).
     Stesso rimedio del .dsheet del wizard: nascosto davvero da chiuso,
     con la visibility che cambia a fine transizione. */
  html[data-vista^="/area"] .ar-sheet {
    top: 50%;
    bottom: auto;
    max-width: 520px;
    border: 1px solid var(--glass-bd);
    border-radius: 20px;
    max-height: 82vh;
    transform: translateY(-50%) scale(.96);
    opacity: 0;
    visibility: hidden;
    transition: transform .24s cubic-bezier(.4, 0, .2, 1), opacity .24s ease, visibility 0s linear .24s;
  }
  html[data-vista^="/area"] .ar-sheet.open {
    transform: translateY(-50%) scale(1);
    opacity: 1;
    visibility: visible;
    transition: transform .24s cubic-bezier(.4, 0, .2, 1), opacity .24s ease, visibility 0s;
  }
  html[data-vista^="/area"] .ar-sheet-grab { display: none; }


  /* ====================================================================
     ABBONAMENTI, ORDINI, DATI  —  la navigazione si ferma a sinistra
     ==================================================================== */

  html[data-vista^="/area"] .app:not(:has(#roBar)):not(:has(.ro-choicebar)) {
    max-width: 1180px;
    padding-left: 24px;
    padding-right: 24px;
  }
  /* La colonna e' di servizio: si usa per cambiare schermata, non e' la
     schermata. Percio' NON e' un riquadro (niente sfondo, bordo, ombra):
     e' un elenco di parole in un margine, e il contenuto a destra resta
     l'unica cosa che pesa. Quello che si toglie e' peso VISIVO, non
     leggibilita': i colori restano quelli delle variabili, che su
     entrambi i temi stanno sopra il 7:1 chiesto dal livello AAA
     (bianco .85 su #0B1020 = 13,7:1; inchiostro .82 su #E7ECF3 = 9,2:1). */
  html[data-vista^="/area"] #view:has(> .ar-side) {
    display: grid;
    grid-template-columns: 196px minmax(0, 1fr);
    column-gap: 28px;
    align-items: start;
  }
  html[data-vista^="/area"] #view:has(> .ar-side) > * { min-width: 0; }

  html[data-vista^="/area"] .ar-side {
    display: flex;                 /* di base e' none: vedi v3-area.css */
    grid-column: 1;
    grid-row: 1 / span 50;
    position: sticky;
    top: 20px;
    flex-direction: column;
    gap: 2px;
    padding: 4px 0 0;
    border: none;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  /* min-height 44: e' la misura minima di un bersaglio secondo il criterio
     AAA 2.5.5. Il riquadro attorno alla voce non si vede piu', ma la zona
     che si puo' cliccare resta grande come prima. */
  html[data-vista^="/area"] .ar-side-i {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 44px;
    appearance: none;
    cursor: pointer;
    text-align: left;
    background: none;
    border: none;
    border-left: 2px solid transparent;
    border-radius: 0 10px 10px 0;
    padding: 10px 12px 10px 11px;
    font: 500 14.5px var(--font);
    color: var(--on-dark-mut);
    transition: background-color .14s ease;
  }
  html[data-vista^="/area"] .ar-side-i:hover {
    background: var(--fill-soft);
    color: var(--on-dark);
  }
  /* Il puntatore ha l'evidenziazione, chi va con la tastiera vuole un segno
     suo: contorno pieno, staccato, sopra il 3:1 su tutti e due i temi. */
  html[data-vista^="/area"] .ar-side-i:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
  }
  /* Dove sono: non piu' una pillola colorata (pesava quanto un pulsante)
     ma un filetto a lato piu' il nome in evidenza. Il segno non e' solo il
     colore, e aria-current="page" lo dice comunque a chi non lo vede. */
  html[data-vista^="/area"] .ar-side-i[aria-current="page"] {
    background: none;
    border-left-color: var(--sel);
    color: var(--on-dark);
    font-weight: 700;
  }
  html[data-vista^="/area"] .ar-side-sep {
    height: 1px;
    background: var(--glass-bd);
    margin: 10px 12px 10px 13px;
  }

  /* Col menu sempre in vista il "← Home" in cima non serve piu'. Resta
     invece nel riordino, dove la nav non c'e' e serve per uscire. */
  html[data-vista^="/area"] #view:has(> .ar-side) .ar-back { display: none; }

  /* Col mouse serve un appiglio in piu' sulle righe che si possono aprire. */
  html[data-vista^="/area"] .ar-subpick-row,
  html[data-vista^="/area"] .ar-scard { transition: border-color .18s ease; }
  html[data-vista^="/area"] .ar-subpick-row:hover { border-color: var(--sel-bd); }

  html[data-vista^="/area"] .btn-theme { display: flex; }
}

@media (min-width: 1200px) and (prefers-reduced-motion: reduce) {
  html[data-vista^="/area"] .dsheet,
  html[data-vista^="/area"] .ar-sheet { transition: none; }
}