/* Proposta 1 · Copertina (5/11/2026), scelta dall'utente e portata nella pagina pubblica osservatorio.html.
   Dopo briciole, titolo e committente una scena larga quanto il contenuto del pannello; sotto a sinistra la didascalia,
   a destra le miniature; più sotto il testo su due colonne (situazione e «che cosa ho fatto» | risultato, strumenti, servizio).
   Sul computer il pannello prende l'altezza della stanza e la scena prende lo spazio che il testo lascia libero:
   flex 1 1 0 dentro il foglio, che non scorre. Il materiale sta intero nella scena (contain), mai ritagliato.

   Correzioni del pomeriggio del 5/11/2026:
   1. Testo lungo e schermo basso (K-AI Chat e marketing-ia, circa 100-130 parole, a 1440 × 900): la scena scendeva a 161 px
      di altezza. Disposizione «fatti accanto» (classe fatti-accanto, messa da osservatorio-caso-1.js): risultato, strumenti
      e servizio salgono accanto alla scena, nella colonna dove stavano già; situazione e «che cosa ho fatto» scorrono sotto
      su due colonne. Il JS la tiene solo se il materiale si vede almeno il 20% più largo e il foglio non scorre.
      Scena minima 160 px di altezza. Se nessuna delle due disposizioni ci sta senza scorrere (schermi bassi, 1366 × 768 e
      meno, casi lunghi), resta la copertina, il foglio scorre e la scena prende almeno 225 px (classe scorre).
   2. La didascalia ha sempre una riga riservata, anche quando non c'è (riquadri in preparazione): l'arrivo delle
      schermate con la didascalia non cambia la misura.
   3. Telefono: pannello con 16 px di margine interno ai lati (come già sotto i 381 px) e didascalia a 13 px: a 390 px
      la didascalia dell'avatar sta su due righe (servono 327 px a 13 px, 365 a 14). */
.ia .caso{--fra-colonne:clamp(28px,3vw,64px);--sotto-materiale:clamp(14px,2.4vh,30px);--scena-minima:160px}
.ia .caso.scorre{--scena-minima:225px}
@media(min-width:1101px){.ia.work-panel{height:calc(100svh - 132px)}}

.ia .caso .materiale{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"palco palco" "didascalia miniature";column-gap:clamp(20px,2.4vw,48px);row-gap:clamp(8px,1.2vh,14px);margin-bottom:var(--sotto-materiale)}
.ia .caso .materiale:not(:has(.miniature)){grid-template-columns:minmax(0,1fr);grid-template-areas:"palco" "didascalia"}
.ia .caso .palco{grid-area:palco}
.ia .caso .didascalie{grid-area:didascalia;min-height:1.4em}
.ia .caso .miniature{grid-area:miniature;justify-content:flex-end;flex-wrap:nowrap;align-self:start}
.ia .caso .testo-caso{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);column-gap:var(--fra-colonne);align-items:start}
/* Il servizio in cima alla colonna (casi senza risultato né strumenti): senza il margine sopra parte alla stessa altezza della prima etichetta. */
.ia .caso .colonna>.rimandi:first-child{margin-top:0}

@media(min-width:1101px){
 .ia .caso.con-materiale .materiale{flex:1 1 0;min-height:auto;grid-template-rows:minmax(var(--scena-minima),1fr) auto}
 .ia .caso .palco .schermo{position:absolute;inset:0;aspect-ratio:auto}
 .ia .caso .testo-caso{flex:none}

 /* Fatti accanto: scena e fatti in due metà uguali, allineate alle due colonne della storia sotto (con 1,4 : 1 la scena
    era più larga, 389 px invece di 336 a 1440 × 900, ma le colonne sotto non tornavano con quelle sopra). */
 .ia .caso.fatti-accanto:not([hidden]){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto minmax(min-content,1fr) auto;grid-template-areas:"titolo titolo" "chi chi" "materiale fatti" "storia fatti";column-gap:var(--fra-colonne)}
 .ia .caso.fatti-accanto>h2{grid-area:titolo}
 .ia .caso.fatti-accanto>.chi{grid-area:chi}
 .ia .caso.fatti-accanto .materiale{grid-area:materiale;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(var(--scena-minima),1fr) auto auto;grid-template-areas:"palco" "didascalia" "miniature"}
 .ia .caso.fatti-accanto .miniature{justify-content:flex-start}
 .ia .caso.fatti-accanto .testo-caso{display:contents}
 .ia .caso.fatti-accanto .materiale{margin-bottom:0}
 .ia .caso.fatti-accanto .fatti{grid-area:fatti;align-self:start}
 /* 5/11/2026 sera: la storia non scorre più da una colonna all'altra. «Che cosa ho fatto» sta in cima ai fatti (genera.py),
    sotto il materiale resta «La situazione»; i fatti occupano tutta la colonna destra. */
 .ia .caso.fatti-accanto .storia{grid-area:storia;align-self:start;padding-top:var(--sotto-materiale)}
 .ia .caso.fatti-accanto .storia:empty{display:none}
 .ia .caso.fatti-accanto .storia .parte{break-inside:auto}
 .ia .caso.fatti-accanto .storia h4{break-after:avoid}
 .ia .caso.fatti-accanto .storia p{orphans:2;widows:2}
}
@media(max-width:1100px){
 .ia .caso .palco .schermo{max-height:60svh;margin-inline:auto}
 .ia .caso .testo-caso{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:760px){
 .ia.work-panel{padding-inline:16px}
 .ia .caso .materiale{grid-template-columns:minmax(0,1fr);grid-template-areas:"palco" "didascalia" "miniature"}
 .ia .caso .didascalie{font-size:13px}
 .ia .caso .miniature{justify-content:flex-start;flex-wrap:wrap}
 /* Aperta con #caso-… o #servizio-… il browser porterebbe il foglio in cima e la testata fissa (72 px) coprirebbe briciole e
    titolo: 126 px è lo scarto fra pannello e foglio, così si arriva come dopo un clic (pannello in cima). 5/11/2026 */
 .ia .foglio{scroll-margin-top:126px}
}

/* Bordi (5/11/2026, segnalazione dell'utente): il foglio scorre dentro di sé (overflow:auto) e tagliava ciò che esce dal suo
   bordo: il filo d'oro della miniatura scelta a sinistra e il contorno del fuoco da tastiera (3 + 3 px). 8 px di margine
   interno, ripresi con un margine negativo: il testo resta dov'era. */
.ia .foglio{padding:8px;margin:-8px}
/* Al telefono il foglio non scorre dentro di sé (scorre la pagina): niente taglio, e il margine negativo allargava la pagina di 5 px. */
@media(max-width:760px){.ia .foglio{padding:0;margin:0;overflow:visible}}

/* Ingrandimento del materiale (5/11/2026, richiesta dell'utente): pulsante sulla scena e clic sull'immagine o sul video
   aprono il materiale a tutto schermo; sulle immagini più grandi dello schermo un secondo clic le porta a grandezza piena
   e si spostano trascinando. Il pulsante lo aggiunge osservatorio-caso-1.js (senza JS la scena resta com'è). */
.ia .ingrandisci{position:absolute;right:10px;top:10px;z-index:2;width:40px;height:40px;display:grid;place-items:center;padding:0;border:1px solid #f4c678a6;border-radius:10px;background:#0b1f2bd9;color:var(--crema);cursor:pointer;transition:background .2s ease,border-color .2s ease}
.ia .ingrandisci:hover{background:#163746e6;border-color:var(--gold)}
.ia .ingrandisci[hidden]{display:none}
.ia .ingrandisci svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ia .ingrandisci::after{right:calc(100% + 8px);top:50%;transform:translateY(-50%)}
.ia .palco.si-ingrandisce .schermo img,.ia .palco.si-ingrandisce .schermo video{cursor:zoom-in}

html.zoom-aperto{overflow:hidden}
.zoom{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#07131bf2;color:#fff7e8;font-family:"Hanken Grotesk",Arial,sans-serif}
.zoom[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.zoom::backdrop{background:#07131b}
.zoom button{font:inherit;color:inherit;cursor:pointer}
.zoom :focus-visible{outline:3px solid #f4c678;outline-offset:3px}
.zoom-barra{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px clamp(14px,2vw,28px)}
.zoom-conta{margin:0;font-size:15px;color:#f7f9f8b3}
.zoom-chiudi{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid #f4c678a6;border-radius:10px;background:#0b1f2bd9;font-size:15px;font-weight:600}
.zoom-chiudi:hover,.zoom-prec:hover,.zoom-succ:hover{border-color:#f4c678;background:#163746e6}
.zoom-chiudi svg,.zoom-prec svg,.zoom-succ svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.zoom-vista{min-height:0;display:grid;grid-template:minmax(0,1fr)/minmax(0,1fr);place-items:center;padding:0 clamp(12px,3vw,64px);overflow:hidden}
.zoom-vista img,.zoom-vista video{display:block;max-width:100%;max-height:100%;width:auto;height:auto;border-radius:8px;background:#0c2230}
.zoom-vista img{cursor:zoom-in}
.zoom.si-avvicina-no .zoom-vista img{cursor:auto}
.zoom.vicino .zoom-vista{overflow:auto;padding:0;cursor:grab;overscroll-behavior:contain}
.zoom.vicino .zoom-vista.trascina{cursor:grabbing}
.zoom.vicino .zoom-vista img{max-width:none;max-height:none;margin:auto;border-radius:0;cursor:zoom-out}
.zoom-piede{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:16px;padding:12px clamp(14px,2vw,28px) 18px}
.zoom-didascalia{margin:0 auto;max-width:90ch;font-size:15px;line-height:1.4;color:#f7f9f8d9;text-align:center}
.zoom-prec,.zoom-succ{width:44px;height:44px;display:grid;place-items:center;padding:0;border:1px solid #f4c678a6;border-radius:10px;background:#0b1f2bd9}
.zoom-prec[hidden],.zoom-succ[hidden]{display:grid;visibility:hidden}
@media(max-width:760px){
 .zoom-barra{padding:10px 12px}
 .zoom-vista{padding:0 8px}
 .zoom-piede{gap:10px;padding:10px 12px 16px}
 .zoom-didascalia{font-size:14px}
}

/* Titoletti dei fogli (5/11/2026, scelta dell'utente: variante D sull'artifact SFdoGT93KtFpY7oLBNaimy): oro in maiuscole spaziate,
   un poco più piccoli, come la riga in cima al pannello. Non si scambiano per link, che sono testo chiaro sottolineato d'oro. */
.ia .caso .parte h4,.ia .caso .rimandi h4,.ia .scelta-materiale h4,.ia .foglio .rimandi h4{color:var(--gold);font-weight:600;text-transform:uppercase;letter-spacing:.14em;font-size:calc(var(--piccolo) - 2px)}

/* Fatti accanto per tutti i casi (5/11/2026, scelta dell'utente sull'artifact SFdoGT93KtFpY7oLBNaimy).
   - La scena prende le proporzioni del materiale (osservatorio-caso-1.js mette --alto-scena e --larga-scena, al massimo lo
     spazio libero): niente bande scure sopra e sotto o ai lati; lo spazio che avanza resta in fondo al foglio.
   - La storia resta su due colonne che scorrono una nell'altra, come nella disposizione scelta: con le parti intere ognuna
     nella sua colonna K-AI scorreva di 67 px a 1536 × 730 e di 170 a 1280 × 720. */
@media(min-width:1101px){
 .ia .caso.fatti-accanto.scena-misurata:not([hidden]){grid-template-rows:auto auto auto auto;align-content:start}
 .ia .caso.fatti-accanto.scena-misurata .materiale{grid-template-rows:auto auto auto;align-self:start}
 .ia .caso.fatti-accanto.scena-misurata .palco{height:var(--alto-scena);width:var(--larga-scena);max-width:100%}
}