/* Graphorum · il guscio «Tre pulsanti» (guscio.js, oggi.js). Telefono: in basso le perle unite Oggi · G · Tu (fino a
   cinque), il disco delle 6 aree che sorge dalla G, i fogli che salgono dal basso sopra Oggi. Computer: la barra di
   icone a sinistra, Oggi al centro, le aree come pannelli affiancati.
   Regole del capo (polish.css): la pagina è il foglio, righe sottili e spazio, un solo arrotondamento (--radius),
   pulsanti e caselle della stessa riga alla stessa altezza; galleggiano solo le finestre che si aprono (fogli, disco,
   popup). Tutte le misure in rem: la dimensione del testo di Impostazioni › Aspetto le fa crescere insieme. */

:root {
  --c-faint: #6f7687; --c-accent-text: #2459e0; --c-accent-line: #c9daff; --c-ok-soft: #e3f7ee; --c-warn-dot: #f5b941;
  --c-sky: #38bdf8; --c-sky-light: #7dd3fc; --c-sky-deep: #2f9bff; --c-toast: #12141c; --c-toast-ink: #f3f4f8;
  --c-skel: #e9edf3; --c-skel-hi: #f5f7fa; --c-veil: rgba(9, 13, 22, .42); --c-hi-soft: #fdeced;
  --c-pop: 0 1px 2px rgba(16, 24, 40, .06), 0 1.714rem 4rem -1.286rem rgba(16, 24, 40, .34);
  --c-pop-filter: drop-shadow(0 1px 1px rgba(16, 24, 40, .07)) drop-shadow(0 1.143rem 1.857rem rgba(16, 24, 40, .22));
  --c-g-glow: 0 .714rem 1.714rem -.714rem rgba(47, 107, 255, .7), 0 2px .429rem -2px rgba(47, 107, 255, .3);
  --c-bar: 5.286rem; --c-rail: 6rem; --c-top: var(--head-h); --c-ctl: var(--ctl-h); --c-ctl-sm: var(--ctl-h-sm);   /* la scala unica (style.css) */
  /* la barra in basso: le perle unite (una per pulsante, tutte uguali), appena sopra la barra di sistema dell'iPhone; il
     diametro (--c-perl) lo calcola guscio.js perché cinque perle stiano anche in 360 px. --c-bar-top è il bordo in alto */
  --c-bar-gap: .429rem; --c-bar-b: calc(max(env(safe-area-inset-bottom, 0px), 1rem) + var(--c-bar-gap));
  --c-bar-top: calc(var(--c-bar-b) + var(--c-perl, 4.286rem));
  /* un colore per area (e per le icone di Tu e di «Tocca a te»): i colori di Graphorum, scuri abbastanza sul chiaro */
  --c-t-blue: #2f6bff; --c-t-mint: #12a56a; --c-t-amber: #b8760a; --c-t-sky: #0b8ecf; --c-t-violet: #7c5cff; --c-t-teal: #0f9a94;
  --c-t-rose: #e5484d; --c-bub-mix: 13%; --c-bub-mix2: 21%;
  --c-sheet-sh: 0 -1px 0 rgba(16, 24, 40, .04), 0 -1.286rem 3.429rem -1.429rem rgba(16, 24, 40, .38);
  --c-photo-sh: 0 1px 2px rgba(16, 24, 40, .08), 0 .714rem 1.714rem -.857rem rgba(16, 24, 40, .42);
  /* Luce (il capo, 24/10): il cervello leggero di Oggi, l'alone di colore dietro il saluto, la parola in evidenza */
  --c-g1: #38bdf8; --c-g2: #2f6bff; --c-g3: #7c5cff; --c-g4: #e8478f; --c-g5: #f26b2a;
  --c-aura: url(/static/img/aura-light.webp); --c-hi: var(--c-accent-text); --c-candy-ink: #1c1b1a;
}
:root[data-theme="dark"] {
  --c-faint: #969489; --c-accent-text: #7fa8ff; --c-accent-line: #3f5378; --c-ok-soft: #2d4038; --c-toast: #41403d;
  --c-skel: #30302e; --c-skel-hi: #383835; --c-veil: rgba(15, 15, 14, .62); --c-hi-soft: #47312f;
  --c-pop: 0 1px 2px rgba(0, 0, 0, .4), 0 2rem 4.571rem -1.286rem rgba(0, 0, 0, .8);
  --c-pop-filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .45)) drop-shadow(0 1.286rem 2.143rem rgba(0, 0, 0, .6));
  --c-g-glow: 0 .714rem 2rem -.571rem rgba(77, 134, 255, .45), 0 0 0 1px rgba(250, 249, 245, .1);
  --c-t-blue: #7fa8ff; --c-t-mint: #3ddc97; --c-t-amber: #f5b941; --c-t-sky: #38bdf8; --c-t-violet: #a794ff; --c-t-teal: #2dd4bf;
  --c-t-rose: #ff7a7f; --c-bub-mix: 19%; --c-bub-mix2: 28%;
  --c-sheet-sh: 0 -1px 0 rgba(255, 255, 255, .04), 0 -1.429rem 3.714rem -1.286rem rgba(0, 0, 0, .75);
  --c-photo-sh: 0 1px 2px rgba(0, 0, 0, .5), 0 .857rem 2rem -.857rem rgba(0, 0, 0, .8);
  --c-g1: #6ccdf7; --c-g2: #8fb2ff; --c-g3: #b5a6ff; --c-g4: #ff8fb8; --c-g5: #f5c063;
  --c-aura: url(/static/img/aura-dark.webp); --c-hi: var(--c-t-amber);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-faint: #969489; --c-accent-text: #7fa8ff; --c-accent-line: #3f5378; --c-ok-soft: #2d4038; --c-toast: #41403d;
    --c-skel: #30302e; --c-skel-hi: #383835; --c-veil: rgba(15, 15, 14, .62); --c-hi-soft: #47312f;
    --c-pop: 0 1px 2px rgba(0, 0, 0, .4), 0 2rem 4.571rem -1.286rem rgba(0, 0, 0, .8);
    --c-pop-filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .45)) drop-shadow(0 1.286rem 2.143rem rgba(0, 0, 0, .6));
    --c-g-glow: 0 .714rem 2rem -.571rem rgba(77, 134, 255, .45), 0 0 0 1px rgba(250, 249, 245, .1);
    --c-t-blue: #7fa8ff; --c-t-mint: #3ddc97; --c-t-amber: #f5b941; --c-t-sky: #38bdf8; --c-t-violet: #a794ff; --c-t-teal: #2dd4bf;
    --c-t-rose: #ff7a7f; --c-bub-mix: 19%; --c-bub-mix2: 28%;
    --c-sheet-sh: 0 -1px 0 rgba(255, 255, 255, .04), 0 -1.429rem 3.714rem -1.286rem rgba(0, 0, 0, .75);
    --c-photo-sh: 0 1px 2px rgba(0, 0, 0, .5), 0 .857rem 2rem -.857rem rgba(0, 0, 0, .8);
    --c-g1: #6ccdf7; --c-g2: #8fb2ff; --c-g3: #b5a6ff; --c-g4: #ff8fb8; --c-g5: #f5c063;
    --c-aura: url(/static/img/aura-dark.webp); --c-hi: var(--c-t-amber);
  }
}
[data-c-area="messaggi"], [data-c-tone="messaggi"], [data-tone="blue"] { --ac: var(--c-t-blue); }
[data-c-area="clienti"], [data-c-tone="clienti"], [data-tone="mint"] { --ac: var(--c-t-mint); }
[data-c-area="contenuti"], [data-c-tone="contenuti"], [data-tone="amber"] { --ac: var(--c-t-amber); }
[data-c-area="agenti"], [data-c-tone="agenti"], [data-tone="sky"] { --ac: var(--c-t-sky); }
[data-c-area="cervello"], [data-c-tone="cervello"], [data-tone="violet"] { --ac: var(--c-t-violet); }
[data-c-area="numeri"], [data-c-tone="numeri"], [data-tone="teal"] { --ac: var(--c-t-teal); }
[data-tone="rose"], .c-fan-item[data-c-area="parla"] { --ac: var(--c-t-rose); }
/* l'icona nel suo tondo colorato: il colore dell'area appena accennato, con un filo di luce sopra (profondità) */
.c-bub, .c-fan-item .ic, .c-av[data-tone], .c-rico[data-tone], .c-sico[data-c-tone] { color: var(--ac, var(--accent));
  background: linear-gradient(180deg, color-mix(in srgb, var(--ac, var(--accent)) var(--c-bub-mix), var(--surface)),
    color-mix(in srgb, var(--ac, var(--accent)) var(--c-bub-mix2), var(--surface)));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 0 0 1px color-mix(in srgb, var(--ac, var(--accent)) 16%, transparent),
    0 1px 2px color-mix(in srgb, var(--ac, var(--accent)) 22%, transparent); }
:root[data-theme="dark"] :is(.c-bub, .c-fan-item .ic, .c-av[data-tone], .c-rico[data-tone], .c-sico[data-c-tone]) {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 0 0 1px color-mix(in srgb, var(--ac, var(--accent)) 26%, transparent); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.c-bub, .c-fan-item .ic, .c-av[data-tone], .c-rico[data-tone], .c-sico[data-c-tone]) {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 0 0 1px color-mix(in srgb, var(--ac, var(--accent)) 26%, transparent); }
}
.c-bub { width: 2.571rem; height: 2.571rem; border-radius: 50%; display: grid; place-items: center; flex: none; }

/* ------------------------------------------------------------------ interfaccia classica: il guscio non c'è */
html:not(.c-shell) .c-only { display: none !important; }
/* nel guscio: via la barra in alto, la barra in basso, il menu laterale, le linguette dello spazio, i pulsanti
   flottanti (le stesse cose stanno nella G, nel disco, nei fogli e in Tu) */
html.c-shell .app > .topbar, html.c-shell .bottombar, html.c-shell #space-bar, html.c-shell #chat-dock, html.c-shell #vx-fab,
html.c-shell .app > .sidebar, html.c-shell #qc-bar, html.c-shell #more-menu, html.c-shell #scrim { display: none !important; }
html.c-shell #look-bar-box { display: none; }
/* Gestionali: le linguette dei servizi collegati restano (le pagine dell'area sono già nella testata del foglio) */
html.c-shell #space-bar:not(.hidden):has(#ext-nav [data-ext]) { display: flex !important; padding-top: .35rem; }
html.c-shell #space-bar > button[data-tab]:not([data-tab="esterni"]) { display: none; }
html.c-shell .nr-strip { display: none !important; }

/* ------------------------------------------------------------------ pezzi comuni */
html.c-shell :is(.c-btn, .c-ibtn, .c-link, .c-side, .c-g, .c-ri, .c-row, .c-tile, .c-src, .c-back, .c-done-row, .c-fan-item, .c-tabs button, .c-seg button) {
  font-family: var(--font); -webkit-tap-highlight-color: transparent; }
.c-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; height: auto; min-height: var(--c-ctl);
  padding: .2rem 1.15rem; border-radius: var(--radius); border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--ink); font: 600 var(--fs-md)/1.15 var(--font); letter-spacing: -.003em; text-align: center; box-shadow: var(--btn-hl), var(--btn-sh);
  transition: background .15s, border-color .15s, color .15s, transform .08s; cursor: pointer; }
.c-btn:hover { background: var(--surface-2); border-color: var(--line-strong); }
.c-btn.sm { height: auto; min-height: var(--c-ctl-sm); padding: .2rem .85rem; font-size: var(--fs-base); gap: .4rem; }
.c-btn.sm::after { content: ""; position: absolute; inset: -.357rem -2px; }
.c-btn svg { width: var(--ic-md); height: var(--ic-md); }
.c-btn.sm svg { width: var(--ic-sm); height: var(--ic-sm); }
.c-btn.primary { color: #fff; border-color: color-mix(in srgb, var(--accent) 80%, #000);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 88%, #fff), var(--accent));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 1px 2px rgba(16, 24, 40, .16), 0 .429rem 1rem -.571rem color-mix(in srgb, var(--accent) 80%, transparent); }
.c-btn.primary:hover { background: var(--accent-hover); }
.c-btn.ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--ink-2); }
.c-btn.ghost:hover { background: var(--surface-2); color: var(--ink); }
.c-btn.danger { color: var(--danger); }
.c-ibtn { width: var(--c-ctl); height: var(--c-ctl); min-height: 0; min-width: 0; padding: 0; display: grid; place-items: center; flex: none;
  border: 0; border-radius: var(--radius); background: transparent; color: var(--ink-2); box-shadow: none; cursor: pointer; }
.c-ibtn:hover { background: var(--surface-2); color: var(--ink); }
.c-link { display: inline-flex; align-items: center; gap: .15rem; min-height: var(--c-ctl); height: auto; padding: 0; border: 0; background: none;
  box-shadow: none; color: var(--c-accent-text); font: 600 var(--fs-md)/1.15 var(--font); text-align: left; cursor: pointer; }
.c-link svg { width: var(--ic-sm); height: var(--ic-sm); stroke-width: 2.1; }
.c-link:hover { color: var(--accent); }
.c-eyebrow { margin: 0; font: 600 var(--fs-xs)/1.2 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.c-quiet { margin: 0; color: var(--muted); font: 400 var(--fs-md)/1.45 var(--font); }
.c-grow { flex: 1; }
.c-only .badge, .c-badge-n { display: inline-grid; place-items: center; min-width: 1.43rem; height: 1.43rem; padding: 0 .4rem; border-radius: 999px;
  background: var(--ink); color: var(--surface); font: 700 var(--fs-xs)/1 var(--font); font-variant-numeric: tabular-nums; box-shadow: none; border: 0; }
.c-only .badge.hidden { display: none !important; }
html.c-shell button:where(.c-btn, .c-ibtn, .c-link, .c-side, .c-ri, .c-row, .c-tile, .c-src, .c-back, .c-done-row, .c-fan-item):active:not(:disabled) { transform: translateY(1px) scale(.985); }
html.c-shell .c-g:active:not(:disabled) { transform: none; }

/* il rischio scritto a parole, con il punto colorato (per chi non distingue i colori basta la parola) */
.c-risk { display: inline-flex; align-items: center; gap: .43rem; font: 500 var(--fs-sm)/1.2 var(--font); color: var(--muted); }
.c-risk::before { content: ""; width: .571rem; height: .571rem; border-radius: 50%; background: currentColor; flex: none; }
.c-risk.high { color: var(--danger); } .c-risk.mid { color: var(--warn); } .c-risk.low { color: var(--ok); }
.c-risk.ask, .c-risk.reply { color: var(--c-accent-text); }
.c-risk.mid::before { background: var(--c-warn-dot); }
:root[data-theme="dark"] .c-risk.mid { color: var(--c-warn-dot); }

/* avatar e icone tonde: solo i cerchi veri sono tondi */
.c-av { width: 2.57rem; height: 2.57rem; border-radius: 50%; display: grid; place-items: center; flex: none; position: relative;
  background: var(--accent-soft); color: var(--c-accent-text); }
.c-av svg { width: var(--ic-lg); height: var(--ic-lg); }
.c-av.hi { background: var(--c-hi-soft); color: var(--danger); }
.c-av.ok { background: var(--c-ok-soft); color: var(--ok); }
.c-av.ok.err { background: var(--c-hi-soft); color: var(--danger); }
/* il tuo avatar: il diamante che ruota (guscio.js, gemDraw) dentro un tondo di luce */
.c-me { width: 1.86rem; height: 1.86rem; border-radius: 50%; display: grid; place-items: center; flex: none; position: relative; overflow: hidden;
  background: radial-gradient(120% 120% at 30% 15%, #ffffff 0%, #f1f6ff 50%, #d9e6ff 100%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent), 0 2px 6px -2px rgba(47, 107, 255, .4); }
.c-me.lg { width: 4.286rem; height: 4.286rem; box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent), 0 .571rem 1.286rem -.571rem rgba(47, 107, 255, .55); }
.c-gem { width: 82%; height: 82%; display: block; overflow: visible; margin-top: 4%; }
.c-gem path { stroke: rgba(255, 255, 255, .6); stroke-width: .6; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
:root[data-theme="dark"] .c-me { background: radial-gradient(120% 120% at 30% 15%, #4a4945 0%, #383835 55%, #30302e 100%);
  box-shadow: 0 0 0 1px rgba(250, 249, 245, .16), 0 2px 8px -2px rgba(0, 0, 0, .5); }
:root[data-theme="dark"] .c-gem path { stroke: rgba(255, 255, 255, .32); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .c-me { background: radial-gradient(120% 120% at 30% 15%, #4a4945 0%, #383835 55%, #30302e 100%);
    box-shadow: 0 0 0 1px rgba(250, 249, 245, .16), 0 2px 8px -2px rgba(0, 0, 0, .5); }
  :root:not([data-theme="light"]) .c-gem path { stroke: rgba(255, 255, 255, .32); }
}

/* ------------------------------------------------------------------ Oggi */
/* le fasce di avviso di sempre (AM Solutions, abbonamento, migrazione), in cima a Oggi */
.c-notices:empty { display: none; }
.c-notices { padding: .286rem 1.429rem 0; }
.c-notices .ed-band { margin: 0 0 .571rem; }
html.c-shell .c-home { background: var(--ground); color: var(--ink); overscroll-behavior: contain; container: c-home / inline-size; }
.c-top { position: sticky; top: 0; z-index: 20; min-height: var(--c-top); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .429rem .85rem;
  padding: calc(env(safe-area-inset-top, 0px) + .429rem) 1.429rem .429rem; background: var(--ground); transition: box-shadow .2s; }
.c-home.scrolled .c-top { box-shadow: 0 1px 0 var(--line); }
/* la data intera (va a capo, mai i puntini); a destra le linguette (un gruppo che va a capo) e la campanella, sempre in
   cima. Se accanto alla data non c'è posto, le linguette scendono sotto e prendono tutta la larghezza */
.c-date { margin: 0; font: 600 var(--fs-md)/1.25 var(--font); color: var(--ink-2); min-width: 0; flex: 0 1 auto; overflow-wrap: anywhere;
  align-self: flex-start; min-height: var(--c-ctl); display: flex; align-items: center; }
.c-top-r { display: flex; align-items: flex-start; gap: .4rem; min-width: min(100%, 18rem); flex: 1 1 0; justify-content: flex-end; }
.c-pills { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .4rem; min-width: 0; flex: 0 1 auto;
  align-self: center; }
.c-pills:not(:has(> :not(.hidden))) { display: none; }
/* la pillola dei lavori, la linguetta degli agenti e la campanella: gli elementi di sempre, qui al loro posto */
html.c-shell .c-top-r #work-pill, html.c-shell .c-top-r #agents-bar, html.c-shell .c-pillslot #work-pill {
  position: static !important; transform: none !important; left: auto !important; top: auto !important; animation: none;
  width: auto; height: auto; min-height: var(--c-ctl-sm); max-width: min(28rem, 100%); min-width: 0; border-radius: var(--radius); border: 1px solid var(--line-strong);
  background: transparent; box-shadow: none; padding: .3rem .85rem .3rem .7rem; font: 500 var(--fs-base)/1.25 var(--font); color: var(--ink-2); text-align: left; }
html.c-shell :is(.c-top-r, .c-pillslot) :is(.work-label, .ag-text) { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
/* il tema e le percentuali del computer stanno nella testata solo sul telefono; la data, lì, scende sopra il saluto */
.c-top .c-theme, .c-tpc, .c-day { display: none; }
/* telefono (il capo, 17/10): a sinistra il tema, al centro le percentuali del computer, a destra la campanella; sotto la
   linguetta dei lavori (o degli agenti) larga quanto la pagina */
@media (max-width: 860px) {
  html.c-shell .c-top-r { display: contents; }
  html.c-shell .c-date { display: none; }
  html.c-shell .c-top .c-theme { order: 0; display: inline-grid; width: var(--c-ctl); height: var(--c-ctl); min-height: 0; place-items: center;
    padding: 0; border: 0; border-radius: var(--radius); background: none; box-shadow: none; color: var(--ink-2); flex: none; }
  html.c-shell .c-top .c-theme svg { width: var(--ic-lg); height: var(--ic-lg); }
  html.c-shell .c-tpc { order: 1; flex: 1 1 0; min-width: 0; display: flex; justify-content: center; align-items: center; gap: clamp(.429rem, 3vw, .857rem); }
  html.c-shell .c-tpc[hidden] { display: flex; visibility: hidden; }          /* il posto resta: la campanella non si sposta */
  html.c-shell .c-top-r #nr-bell-m { order: 2; }
  html.c-shell .c-pills { order: 3; flex: 1 1 100%; }
  html.c-shell .c-pills > :is(#work-pill, #agents-bar) { flex: 1 1 100%; max-width: 100%; }
  html.c-shell .c-day { display: block; margin: 0 0 .429rem; font: 600 var(--fs-md)/1.25 var(--font); color: var(--ink-2); }
}
.c-tpc-s { display: grid; justify-items: center; gap: .071rem; min-width: 0; font-variant-numeric: tabular-nums; }
.c-tpc-s small { font: 500 var(--fs-2xs)/1.2 var(--font); color: var(--muted); letter-spacing: .02em; }
.c-tpc-s b { font: 600 var(--fs-sm)/1.2 var(--font); color: var(--ink-2); }
.c-tpc-s.hot b { color: var(--danger, #d14343); }
/* le percentuali nascoste in Aspetto: né in alto (telefono) né nella barra a sinistra (computer) */
html[data-pc-stats="off"] .c-tpc { visibility: hidden; }
html[data-pc-stats="off"] .c-rpc .c-rpc-s { display: none; }
@media (max-width: 860px) { html.c-shell .c-pills:has(> #work-pill:not(.hidden)) #agents-bar { display: none; } }   /* telefono: una linguetta alla volta */
html.c-shell .c-top-r #work-pill:hover, html.c-shell .c-top-r #agents-bar:hover { background: var(--surface); border-color: var(--line-strong); }
html.c-shell .c-top-r #nr-bell-m { display: inline-grid !important; width: var(--c-ctl); height: var(--c-ctl); place-items: center; padding: 0;
  border-radius: var(--radius); color: var(--ink-2); flex: none; }
html.c-shell .c-top-r #nr-bell-m svg { width: var(--ic-lg); height: var(--ic-lg); }
html.c-shell .c-top-r #nr-bell-m .badge { position: absolute; top: .214rem; right: 2px; min-width: 1.15rem; height: 1.15rem; padding: 0 .28rem; font-size: var(--fs-2xs);
  background: var(--ink); color: var(--surface); box-shadow: 0 0 0 2px var(--ground); border-radius: 999px; }

.c-oggi { padding: .429rem 1.429rem 0; max-width: 46rem; margin: 0 auto; }
.c-ogrid { display: grid; gap: 0; }
.c-brief { padding: .571rem 0 1.571rem; }
.c-hello { margin: 0; font: 400 var(--fs-5xl)/1.12 var(--font-display); letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
/* la seconda riga: quante cose aspettano te, con la parola in evidenza (blu in chiaro, ambra in scuro) */
.c-hello-2 { display: block; }
.c-hello-2 em { font-style: normal; color: var(--c-hi); }

/* Luce (il capo, 24/10): in testa a Oggi il saluto e, accanto, il cervello leggero con le cose imparate da ieri sera;
   dietro, un alone di colore (un'immagine già sfocata: il PC non calcola niente) */
.c-hero { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; column-gap: 1.714rem; }
.c-hero::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: -4rem; height: 28.571rem;
  background: var(--c-aura) right bottom / auto 100% no-repeat; pointer-events: none; }
.c-hbrain { position: relative; display: block; width: 100%; height: 236px; margin: 0; padding: 0; border: 0; border-radius: var(--radius); background: none;
  box-shadow: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
div.c-hbrain { cursor: default; }
html.c-shell .c-hbrain:hover { background: none; }
.c-hbrain:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.c-hb-svg { position: absolute; right: 0; top: -14px; width: 264px !important; height: 264px !important; overflow: visible; fill: none; stroke: none; }
.c-hb-svg .e { fill: none; stroke-linecap: round; }
.c-hb-svg .hl { fill: none; stroke: var(--c-t-violet); stroke-width: 1.6; stroke-dasharray: 3 6; }
.c-hb-svg .lead { stroke: var(--c-t-violet); stroke-width: 1; opacity: .55; }
.c-hb-svg .hn { fill: var(--surface); stroke: var(--c-t-violet); stroke-width: 2; }
.c-hb-labs { position: absolute; left: 0; top: 0; bottom: 0; width: calc(100% - 264px - .429rem); }
.c-hb-lab { position: absolute; left: 0; right: 0; transform: translateY(-50%); display: flex; align-items: center; gap: .571rem;
  font: 500 var(--fs-sm)/1.3 var(--font); color: var(--ink-2); }
.c-hb-lab > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.c-hb-lab i { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--c-t-violet);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-t-violet) 18%, transparent); }
.c-hb-cap { position: absolute; left: 0; bottom: 0; font: 500 var(--fs-xs)/1.3 var(--font); color: var(--muted); letter-spacing: .02em; }
.c-hbrain:not(.has-labs) .c-hb-cap { left: auto; right: 0; width: 264px; text-align: center; }
/* tre puntini che pulsano sulle cose imparate: si muovono solo misura e trasparenza, quattro volte e poi fermi */
.c-hb-pulse { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--c-t-violet); opacity: 0;
  pointer-events: none; animation: c-ping 2.6s ease-out 4 both; }
.c-hb-pulse:nth-of-type(2) { animation-delay: .8s; }
.c-hb-pulse:nth-of-type(3) { animation-delay: 1.6s; }
@media (hover: hover) { .c-hbrain:hover .c-hb-pulse { animation-name: c-ping2; animation-iteration-count: infinite; } }
@keyframes c-ping { 0% { transform: scale(1); opacity: .45; } 80%, 100% { transform: scale(3.2); opacity: 0; } }
@keyframes c-ping2 { 0% { transform: scale(1); opacity: .45; } 80%, 100% { transform: scale(3.2); opacity: 0; } }
html.g-rest .c-hb-pulse { animation-play-state: paused; }
/* stretto (telefono, Oggi accanto a un pannello): il cervello piccolo in alto a destra, senza scritte */
@container (max-width: 54.28rem) {
  .c-hbrain { position: absolute; right: -.429rem; top: 1.143rem; width: 7.429rem; height: 7.429rem; pointer-events: none; }
  .c-hb-svg { top: 0; width: 7.429rem !important; height: 7.429rem !important; }
  .c-hb-labs, .c-hb-cap, .c-hb-pulse, .c-hb-svg :is(.lead, .hl, .hn) { display: none; }
  .c-hero .c-hello { padding-right: 7.143rem; min-height: 6.429rem; font-size: var(--fs-4xl); }
  .c-hero::before { top: -2.857rem; height: 16rem;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%); mask-image: linear-gradient(90deg, transparent, #000 45%); }
}

/* le tue aree: le card colorate del Pastello, nel colore dell'area (lo stesso del disco della G e della barra di icone);
   in chiaro una tinta tenue con il quadrato pieno, in scuro il colore pieno con il testo scuro (caramella) */
.c-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.714rem, 1fr)); gap: .857rem; margin: .286rem 0 2rem; }
html.c-shell .c-card { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .857rem;
  align-items: center; min-height: 5.429rem; height: auto; margin: 0; padding: 1rem; border: 0; border-radius: var(--radius);
  background: color-mix(in srgb, var(--ac) 11%, var(--surface)); color: var(--ink); box-shadow: none; font: inherit; text-align: left; cursor: pointer;
  transition: transform .15s; }
.c-card::after { content: ""; position: absolute; z-index: -1; right: -2rem; bottom: -2rem; width: 5.143rem; height: 5.143rem; border-radius: 50%;
  background: color-mix(in srgb, var(--ac) 22%, var(--surface)); }
html.c-shell .c-card:hover { background: color-mix(in srgb, var(--ac) 11%, var(--surface)); transform: translateY(-1px); }
html.c-shell .c-card:active { transform: scale(.985); }
.c-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.c-card-ic { width: 2.286rem; height: 2.286rem; border-radius: var(--radius); display: grid; place-items: center; flex: none; background: var(--ac); color: #fff; }
.c-card-ic svg { width: var(--ic-md); height: var(--ic-md); }
.c-card-t { min-width: 0; }
.c-card-t b { display: block; font: 600 var(--fs-md)/1.25 var(--font); overflow-wrap: anywhere; }
.c-card-t span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: .143rem;
  font: 400 var(--fs-sm)/1.35 var(--font); color: color-mix(in srgb, var(--ac) 55%, var(--ink)); overflow-wrap: anywhere; }
:root[data-theme="dark"] .c-card { background: var(--ac); color: var(--c-candy-ink); }
:root[data-theme="dark"] .c-card:hover { background: var(--ac); }
:root[data-theme="dark"] .c-card::after { background: color-mix(in srgb, #fff 24%, var(--ac)); }
:root[data-theme="dark"] .c-card-ic { background: var(--c-candy-ink); color: var(--ac); }
:root[data-theme="dark"] .c-card-t span { color: color-mix(in srgb, var(--c-candy-ink) 80%, var(--ac)); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .c-card, :root:not([data-theme="light"]) .c-card:hover { background: var(--ac); color: var(--c-candy-ink); }
  :root:not([data-theme="light"]) .c-card::after { background: color-mix(in srgb, #fff 24%, var(--ac)); }
  :root:not([data-theme="light"]) .c-card-ic { background: var(--c-candy-ink); color: var(--ac); }
  :root:not([data-theme="light"]) .c-card-t span { color: color-mix(in srgb, var(--c-candy-ink) 80%, var(--ac)); }
}
/* stretto: tre per riga (due accanto a un pannello), l'icona sopra il nome */
@container (max-width: 40rem) {
  .c-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .571rem; margin-bottom: 1.571rem; }
  html.c-shell .c-card { grid-template-columns: minmax(0, 1fr); align-items: start; gap: .571rem; padding: .714rem; min-height: 0; }
  .c-card-ic { width: 2.143rem; height: 2.143rem; }
  .c-card-t b { font-size: var(--fs-base); }
  .c-card-t span { font-size: var(--fs-xs); }
}
@container (max-width: 22rem) { .c-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* le estensioni spente: la card tratteggiata che porta dove si accendono */
html.c-shell .c-card.more, html.c-shell .c-card.more:hover { background: none; border: 1.5px dashed var(--line-strong); color: var(--ink-2); }
.c-card.more::after { display: none; }
.c-card.more .c-card-ic { background: none; color: var(--muted); border: 1.5px dashed var(--line-strong); }
.c-card.more .c-card-t span { color: var(--muted); }
:root[data-theme="dark"] .c-card.more, :root[data-theme="dark"] .c-card.more:hover { background: none; color: var(--ink-2); }
:root[data-theme="dark"] .c-card.more .c-card-ic { background: none; color: var(--muted); }
:root[data-theme="dark"] .c-card.more .c-card-t span { color: var(--muted); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .c-card.more, :root:not([data-theme="light"]) .c-card.more:hover { background: none; color: var(--ink-2); }
  :root:not([data-theme="light"]) .c-card.more .c-card-ic { background: none; color: var(--muted); }
  :root:not([data-theme="light"]) .c-card.more .c-card-t span { color: var(--muted); }
}

/* Tu › Aspetto e lingua › Estensioni (guscio.js, extPanel): una riga per estensione, la copertina nel colore dell'area,
   il nome, cosa fa e l'interruttore; righe sottili, niente riquadri */
.c-ext-n { margin: 0 0 .286rem; font: 600 var(--fs-sm)/1.3 var(--font); color: var(--muted); }
.c-ext-list { list-style: none; margin: 0; padding: 0; }
.c-ext { display: grid; grid-template-columns: 3.429rem minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: .857rem 0; border-top: 1px solid var(--line); }
.c-ext-cv { position: relative; overflow: hidden; isolation: isolate; display: grid; place-items: center; width: 3.429rem; height: 2.571rem;
  border-radius: var(--radius); background: var(--ac); color: #fff; }
.c-ext-cv::before { content: ""; position: absolute; z-index: -1; left: -20%; bottom: -45%; width: 60%; aspect-ratio: 1; border-radius: 50%;
  background: color-mix(in srgb, #fff 18%, var(--ac)); }
.c-ext-cv svg { width: var(--ic-md); height: var(--ic-md); }
:root[data-theme="dark"] .c-ext-cv { color: var(--c-candy-ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .c-ext-cv { color: var(--c-candy-ink); } }
.c-ext-t { min-width: 0; display: grid; gap: .143rem; }
.c-ext-t b { font: 600 var(--fs-md)/1.3 var(--font); color: var(--ink); }
.c-ext-t span { font: 400 var(--fs-sm)/1.4 var(--font); color: var(--muted); overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .c-hb-pulse { animation: none; } html.c-shell .c-card { transition: none; } }

/* il suggerimento di oggi (Luce, oggi.js): verso una sezione che non hai ancora provato, con la sua copertina a mosaico
   nel colore dell'area */
.c-tip { display: grid; gap: .857rem; }
.c-tip-h { margin: 0; display: flex; align-items: center; gap: .5rem; font: 600 var(--fs-sm)/1.2 var(--font);
  color: color-mix(in srgb, var(--c-t-amber) 72%, var(--ink)); }
.c-tip-h svg { width: var(--ic-sm); height: var(--ic-sm); }
.c-tip-b { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 1.143rem; align-items: start; }
.c-tip-cv { position: relative; overflow: hidden; isolation: isolate; display: grid; place-items: center; height: 5.143rem; border-radius: var(--radius);
  background: var(--ac); color: #fff; }
.c-tip-cv::before, .c-tip-cv::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; }
.c-tip-cv::before { left: -18%; bottom: -34%; width: 50%; aspect-ratio: 1; background: color-mix(in srgb, #fff 18%, var(--ac)); }
.c-tip-cv::after { right: -9%; top: -18%; width: 26%; aspect-ratio: 1; background: color-mix(in srgb, #fff 11%, var(--ac)); }
.c-tip-cv svg { width: var(--ic-2xl); height: var(--ic-2xl); stroke-width: 1.6; }
.c-tip-t { margin: 0 0 .214rem; font: 600 var(--fs-lg)/1.3 var(--font); color: var(--ink); text-wrap: balance; overflow-wrap: anywhere; }
.c-tip-x { margin: 0; font: 400 var(--fs-md)/1.45 var(--font); color: var(--ink-2); text-wrap: pretty; overflow-wrap: anywhere; }
.c-tip-a { display: flex; align-items: center; gap: .857rem 1.143rem; flex-wrap: wrap; }
.c-tip-a .c-btn svg { width: var(--ic-sm); height: var(--ic-sm); }
:root[data-theme="dark"] .c-tip-cv { color: var(--c-candy-ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .c-tip-cv { color: var(--c-candy-ink); } }
@container (max-width: 24rem) { .c-tip-b { grid-template-columns: 5.714rem minmax(0, 1fr); gap: .857rem; } .c-tip-cv { height: 4.286rem; } }
html.c-shell .c-rule { width: 12rem; height: .714rem; margin: .714rem 0 .857rem; }
.c-brief-t { margin: 0; font: 400 var(--fs-xl)/1.5 var(--font); color: var(--ink-2); max-width: 34em; text-wrap: pretty; overflow-wrap: anywhere; }
.c-brief-t b { font-weight: 600; color: var(--ink); }
.c-brief-a { display: flex; align-items: center; gap: .3rem; margin-top: 1.143rem; flex-wrap: wrap; }
.c-brief-a .c-btn.sm { margin-right: .429rem; }
.c-src { display: inline-flex; align-items: center; gap: .43rem; min-height: var(--c-ctl); height: auto; padding: 0 .429rem; border: 0; background: none;
  box-shadow: none; color: var(--muted); font: 500 var(--fs-base)/1.15 var(--font); text-align: left; cursor: pointer; }
.c-src:hover { color: var(--ink); background: none; }
.c-src svg { width: var(--ic-sm); height: var(--ic-sm); }

.c-sec { border-top: 1px solid var(--line); padding: 1.143rem 0 .429rem; }
.c-oggi { container: c-oggi / inline-size; }
.c-sec-h { display: flex; align-items: center; justify-content: space-between; gap: .85rem; min-height: var(--c-ctl); }
.c-sec-h h2 { margin: 0; display: flex; align-items: center; gap: .7rem; font: 500 var(--fs-2xl)/1.2 var(--font-display); letter-spacing: -.01em; color: var(--ink); }

/* righe di «Tocca a te»: nessun riquadro, una riga sottile tra l'una e l'altra */
.c-reqs { list-style: none; margin: 0; padding: 0; }
.c-req { display: grid; grid-template-columns: 2.57rem minmax(0, 1fr); column-gap: 1rem; padding: 1.143rem 0; border-top: 1px solid var(--line); cursor: pointer; outline: 0; }
.c-req:first-child { border-top: 0; padding-top: .571rem; }
@media (hover: hover) { .c-req:hover .c-req-t, .c-done-row:hover .t1, .c-row:hover .t1 { color: var(--c-accent-text); } }
.c-req-t { margin: 0; font: 600 var(--fs-lg)/1.38 var(--font); color: var(--ink); text-wrap: pretty; overflow-wrap: anywhere; transition: color .15s; }
.c-req-w { margin: .214rem 0 0; font: 400 var(--fs-md)/1.45 var(--font); color: var(--muted); text-wrap: pretty; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.c-req-w.draft { font-style: italic; color: var(--ink-2); }
.c-req-f { display: flex; align-items: center; justify-content: space-between; gap: .7rem; margin-top: .714rem; min-height: var(--c-ctl-sm); flex-wrap: wrap; }
.c-req-m { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .7rem; min-width: 0; color: var(--muted); font: 500 var(--fs-sm)/1.2 var(--font); }
.c-req-f .c-btn { margin-left: auto; }
/* fatta una cosa: la riga si richiude e scivola via (oggi.js, hide) */
.c-req.c-leave { overflow: hidden; height: 0 !important; padding-top: 0; padding-bottom: 0; opacity: 0; transform: translateX(1.714rem);
  border-top-color: transparent; pointer-events: none;
  transition: height .24s cubic-bezier(.4, 0, .2, 1), padding .24s cubic-bezier(.4, 0, .2, 1), opacity .16s ease-out, transform .24s cubic-bezier(.4, 0, .2, 1); }
/* le immagini di una riga: la foto del post da approvare (verticale, come sul social), le foto allegate (quadrate) */
.c-req-pics { display: flex; gap: .571rem; margin: .714rem 0 .143rem; }
.c-pic { position: relative; display: block; flex: none; height: 6.429rem; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden;
  background: var(--surface-2); box-shadow: var(--c-photo-sh); }
.c-req-pics.post .c-pic { height: 12.857rem; aspect-ratio: 4 / 5; }
.c-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.c-pic-n { position: absolute; top: .429rem; right: .429rem; min-width: 1.571rem; height: 1.571rem; padding: 0 .4rem; border-radius: 999px;
  display: grid; place-items: center; background: rgba(11, 18, 32, .62); color: #fff; font: 700 var(--fs-2xs)/1 var(--font);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* le ultime immagini: un mosaico misurato, la più recente grande con il suo titolo, le altre quadrate */
.c-fgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .571rem; margin: .286rem 0 .571rem; }
.c-fgrid.n1, .c-fgrid.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.c-ftile { position: relative; display: block; aspect-ratio: 1; width: 100%; height: auto; min-height: 0; padding: 0; border: 0;
  border-radius: var(--radius); overflow: hidden; background: var(--surface-2); box-shadow: var(--c-photo-sh); cursor: pointer; color: #fff; }
.c-ftile.big { grid-column: span 2; grid-row: span 2; }
.c-ftile img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
@media (hover: hover) { .c-ftile:hover img { transform: scale(1.035); } }
.c-ftile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.c-ftile.c-nopic img { visibility: hidden; }
.c-fcap { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: .3rem; padding: 2.4rem .857rem .786rem; text-align: left;
  background: linear-gradient(180deg, transparent, rgba(8, 12, 22, .78)); pointer-events: none; }
.c-ft { font: 600 var(--fs-md)/1.25 var(--font); color: #fff; text-wrap: balance; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.c-fm { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; font: 500 var(--fs-xs)/1.15 var(--font); color: rgba(255, 255, 255, .86); }
.c-fm svg { width: var(--ic-xs); height: var(--ic-xs); flex: none; }
.c-fm > span[aria-hidden] { opacity: .7; }
.c-fchip { position: absolute; top: .357rem; right: .357rem; width: 1.571rem; height: 1.571rem; border-radius: 50%; display: grid; place-items: center;
  background: rgba(11, 18, 32, .5); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.c-fchip svg { width: var(--ic-xs); height: var(--ic-xs); }

.c-calm { padding: .429rem 0 .714rem; }
.c-calm-h { display: flex; align-items: center; gap: .7rem; margin: 0 0 .429rem; color: var(--ink); font: 600 var(--fs-base)/1.2 var(--font); }
.c-calm-h svg { width: var(--ic-md); height: var(--ic-md); color: var(--ok); }

/* configurazione da finire: in cima a Oggi finché non è finita */
.c-setup { border-top: 1px solid var(--line); padding: 1rem 0 .429rem; display: grid; gap: .571rem; }
.c-setup-bar { height: .214rem; border-radius: 2px; background: var(--surface-3); overflow: hidden; }
.c-setup-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--c-sky)); border-radius: 2px; }
.c-setup-row { display: flex; align-items: center; gap: .85rem; }
.c-setup-row > div { flex: 1; min-width: 0; }
.c-setup-row .t1 { margin: 0; font: 600 var(--fs-md)/1.35 var(--font); }
.c-setup-row .t2 { margin: 2px 0 0; font: 400 var(--fs-base)/1.4 var(--font); color: var(--muted); }
.c-setup .c-link { justify-self: start; min-height: 2.15rem; }

/* Prossimo: l'appuntamento in grande e il filo della giornata */
.c-next-main { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: 1.143rem; padding: .429rem 0 .286rem; }
.c-next-time { font: 400 var(--fs-6xl)/1 var(--font-display); letter-spacing: -.03em; color: var(--ink); }
.c-next-title { margin: 0; font: 600 var(--fs-xl)/1.3 var(--font); overflow-wrap: anywhere; }
.c-next-who { margin: 2px 0 0; font: 400 var(--fs-md)/1.4 var(--font); color: var(--muted); }
.c-next-who b { color: var(--c-accent-text); font-weight: 600; }
.c-next-more { display: grid; gap: .286rem; margin: .429rem 0 .286rem; color: var(--muted); font: 400 var(--fs-base)/1.4 var(--font); }
.c-next-more span { overflow-wrap: anywhere; }
.c-next-more b { color: var(--ink-2); font-weight: 600; margin-right: .429rem; }
.c-dayline { display: block; width: 100%; height: 3.429rem; margin: .857rem 0 .286rem; overflow: visible; }
.c-dayline .axis { stroke: var(--line-strong); stroke-width: 1.2; }
.c-dayline .past { stroke: var(--accent); stroke-width: 1.6; opacity: .55; }
.c-dayline .tick { stroke: var(--line-strong); stroke-width: 1; }
.c-dayline .node { fill: var(--surface); stroke: var(--ink-2); stroke-width: 1.6; }
.c-dayline .node.first { fill: var(--accent); stroke: var(--accent); }
.c-dayline .now { fill: var(--accent); }
.c-dayline .now-halo { fill: var(--accent); opacity: .18; }
.c-dayline text { font: 600 var(--fs-sm) var(--font); fill: var(--ink); font-variant-numeric: tabular-nums; stroke: none; }

.c-done-row { display: flex; align-items: center; gap: 1rem; width: 100%; min-height: 4.57rem; height: auto; padding: .857rem 0; border: 0;
  border-top: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; text-align: left; color: var(--ink); cursor: pointer; justify-content: flex-start; }
.c-done-row:hover { background: none; }
.c-done-row .t { flex: 1; min-width: 0; display: grid; gap: 2px; }
.c-done-row .t1 { font: 600 var(--fs-lg)/1.3 var(--font); }
.c-done-row .t2 { font: 400 var(--fs-md)/1.4 var(--font); color: var(--muted); overflow-wrap: anywhere; }
.c-done-row > svg { color: var(--muted); }

.c-end { padding: 1.286rem 0 .571rem; margin: 0; color: var(--c-faint); font: 500 var(--fs-sm)/1.4 var(--font); display: flex; align-items: center; gap: .7rem; }
.c-end::before, .c-end::after { content: ""; height: 1px; flex: 1; background: var(--line); }

/* stato «errore»: una riga in alto, la pagina resta leggibile */
.c-notice { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 1rem; padding: 1rem 0 1.143rem; margin: 0 0 .286rem;
  border-top: 2px solid var(--danger); border-bottom: 1px solid var(--line); }
.c-notice > svg { color: var(--danger); margin-top: 1px; }
.c-notice p { margin: 0; font: 600 var(--fs-lg)/1.4 var(--font); color: var(--ink); }
.c-notice p span { display: block; margin-top: 2px; color: var(--muted); font-weight: 400; font-size: var(--fs-md); }
.c-notice .c-btn { margin-top: .857rem; }

/* caricamento: scheletri, niente rotelline */
.c-sk { display: block; height: .857rem; border-radius: .429rem; background: linear-gradient(90deg, var(--c-skel) 0%, var(--c-skel-hi) 40%, var(--c-skel) 80%);
  background-size: 300% 100%; animation: c-shimmer 1.4s ease-in-out infinite; }
@keyframes c-shimmer { from { background-position: 100% 0; } to { background-position: -50% 0; } }
.c-sk-h { height: 2.143rem; width: 70%; border-radius: .571rem; }
.c-sk-row { display: grid; grid-template-columns: 2.57rem minmax(0, 1fr); column-gap: 1rem; padding: 1.286rem 0; border-top: 1px solid var(--line); }
.c-sec-h + .c-sk-row { border-top: 0; }
.c-sk-av { width: 2.57rem; height: 2.57rem; border-radius: 50%; }
.c-sk-l { display: grid; gap: .643rem; align-content: start; }

/* ------------------------------------------------------------------ la barra in basso (telefono): le perle
   Il disegno del capo (15 ottobre, poi 16): un cerchio per pulsante, staccati (niente più colli che li legano), la G in
   mezzo un pelo più grande; la forma, centrata, abbraccia solo i pulsanti. Il contorno lo calcola guscio.js
   (cerchi più raccordi, come il disco): lo stesso path fa il pieno (clip-path) e il filo sottile, senza ombra. Il
   pulsante attivo ha un disco pieno più piccolo dentro la sua perla; gli altri solo l'icona a tratto sottile. La forma
   (#c-bar-bg) sta sotto il disco delle aree, i pulsanti (#c-bar) sopra. */
.c-bar-bg, .c-bar { position: fixed; bottom: var(--c-bar-b); left: 50%; width: 12rem; height: var(--c-perl, 4.286rem); pointer-events: none; }
.c-bar-bg { z-index: 48; }
.c-bar { z-index: 50; }
/* il materiale del disegno: un pieno (in chiaro grigio chiarissimo, così il disco bianco del pulsante attivo si stacca)
   con il filo sottile. Niente ombra sfocata e niente sfocatura dietro: il capo (17/10) «questo alone non si deve vedere»
   (sul telefono l'ombra e la sfocatura uscivano tagliate a rettangolo intorno alle perle) */
.c-bar-glass { position: absolute; inset: 0; background: #f9fafd; transition: background .2s; }
.c-bar-svg { position: absolute; overflow: visible; pointer-events: none; }
.c-bar-ln { fill: none; stroke: rgba(36, 44, 96, .16); stroke-width: 1; }
:root[data-theme="dark"] .c-bar-glass { background: #30302e; }
:root[data-theme="dark"] .c-bar-ln { stroke: rgba(255, 255, 255, .2); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .c-bar-glass { background: #30302e; }
  :root:not([data-theme="light"]) .c-bar-ln { stroke: rgba(255, 255, 255, .2); }
}
/* a disco aperto e a voce la forma diventa piena, con il filo del disco: è un pezzo solo con lui */
body:is(.c-fan-on, .vx-on) .c-bar-glass, :root[data-theme="dark"] body:is(.c-fan-on, .vx-on) .c-bar-glass { background: var(--surface); }
body.c-fan-on .c-bar-ln { stroke: var(--line); }
:root[data-theme="dark"] body.c-fan-on .c-bar-ln { stroke: var(--line-strong); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body.c-fan-on .c-bar-ln { stroke: var(--line-strong); } }
/* i pulsanti: ognuno al centro della sua perla (tocco grande quanto la perla, mai meno di 44 px) */
.c-side, .c-gwrap { position: absolute; top: 0; left: 0; width: var(--c-perl, 4.286rem); height: var(--c-perl, 4.286rem); pointer-events: auto; }
/* la G un pelo più grande delle altre perle (lo stesso PERL_G di guscio.js) */
.c-bar .c-gwrap, .c-bp-b.g { transform: scale(calc(1.12 * var(--c-pulse, 1))); }
/* le perle che entrano nella G (perlSuck, guscio.js): le muove il disco fotogramma per fotogramma, niente transizioni */
.c-bar.c-suck :is(.c-side, .c-gwrap) { transition: none !important; }
.c-bar.c-suck .c-side { pointer-events: none; }
.c-side { display: grid; place-items: center; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 50%; background: none; box-shadow: none;
  color: var(--ink-2); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color .18s, opacity .2s, transform .22s cubic-bezier(.2, .8, .2, 1); }
.c-side:hover { background: none; color: var(--ink); }
/* il disco del pulsante attivo: in chiaro bianco con un'ombra morbida, in scuro chiaro traslucido con un filo sottile */
.c-side::before { content: ""; position: absolute; inset: 11%; border-radius: 50%; background: #fff; opacity: 0; transform: scale(.82);
  box-shadow: 0 .357rem 1rem -.214rem rgba(36, 44, 96, .34), 0 1px 3px rgba(16, 24, 40, .1), 0 0 0 1px rgba(36, 44, 96, .05);
  transition: opacity .2s, transform .25s cubic-bezier(.2, .8, .2, 1); }
:root[data-theme="dark"] .c-side::before { background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .34); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .c-side::before { background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .34); }
}
.c-side.on::before { opacity: 1; transform: none; }
.c-side.on { color: var(--accent); }
:root[data-theme="dark"] .c-side.on { color: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .c-side.on { color: #fff; } }
.c-side .badge { position: absolute; top: .143rem; right: .143rem; z-index: 2; box-shadow: 0 0 0 2px var(--surface); }
/* i pulsanti in più (scelti in Tu): a voce si fanno da parte (la loro perla resta) */
.c-side.c-extra.away { opacity: 0; transform: scale(.8); pointer-events: none; visibility: hidden;
  transition: opacity .2s, transform .22s cubic-bezier(.2, .8, .2, 1), visibility 0s .2s; }
.c-side:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.c-face { position: relative; z-index: 1; grid-area: 1 / 1; display: grid; place-items: center; transition: opacity .18s, transform .18s; }
.c-face svg { width: var(--ic-xl); height: var(--ic-xl); stroke-width: 1.6; }
/* niente scritte per Oggi, Tu e i pulsanti scelti: il nome lo legge il lettore dello schermo; Muto e Fine
   invece compaiono solo per un momento e hanno il loro nome sotto l'icona, dentro la perla */
.c-face.main > span:not(.c-me) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* le facce nascoste non si vedono e non si leggono (visibility): solo quella accesa */
.c-face.voice { opacity: 0; visibility: hidden; transform: translateY(.429rem); pointer-events: none; color: var(--ink); }
.c-face { transition: opacity .18s, transform .18s, visibility 0s .18s; }
.c-side.vx-on .c-face.main { opacity: 0; transform: translateY(-.429rem); pointer-events: none; visibility: hidden; }
.c-side.vx-on .c-face.voice { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.c-side.vx-on::before { opacity: 0; }
.c-face.voice { gap: .143rem; grid-auto-flow: row; }
.c-face.voice svg { width: var(--ic-md); height: var(--ic-md); stroke-width: 2; }
.c-face.voice > span { font: 700 var(--fs-2xs)/1 var(--font); letter-spacing: 0; white-space: nowrap; }
.c-side.vx-on[data-c-right] .c-face.voice { color: var(--danger); }
.c-side.vx-on.muted .c-face.voice { color: var(--c-accent-text); }
.c-side .c-face .c-me { width: 2.143rem; height: 2.143rem; }
/* Tu nella sua perla: solo il diamante, senza il tondo (il tondo è il disco del pulsante attivo) */
.c-bar .c-side .c-me, :root[data-theme="dark"] .c-bar .c-side .c-me { background: none; box-shadow: none; overflow: visible; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .c-bar .c-side .c-me { background: none; box-shadow: none; } }

/* la G: nella perla centrale, con dentro il simbolo 3D che si scompone (sulla barra di icone del computer: il suo tondo) */
.c-g { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 0; padding: 0;
  min-height: 0; border-radius: 50%;
  display: grid; place-items: center; border: 0; color: var(--ink); touch-action: none; user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none; z-index: 2; cursor: pointer;
  background: radial-gradient(120% 120% at 30% 18%, var(--surface) 0%, var(--surface) 55%, color-mix(in srgb, var(--accent) 7%, var(--surface)) 100%);
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--accent) 40%, transparent), var(--c-g-glow);
  transition: transform .22s cubic-bezier(.2, .8, .2, 1), box-shadow .2s; }
.c-g:hover { background: radial-gradient(120% 120% at 30% 18%, var(--surface) 0%, var(--surface) 55%, color-mix(in srgb, var(--accent) 10%, var(--surface)) 100%); }
.c-g:focus-visible { outline: none; box-shadow: 0 0 0 1.5px var(--accent), 0 0 0 .286rem var(--surface), 0 0 0 .429rem color-mix(in srgb, var(--accent) 60%, transparent); }
.c-g.pressed { transform: scale(.96); }
.c-g-disc { position: absolute; left: 14%; top: 14%; width: 72%; height: 72%; display: block; pointer-events: none; }
.c-g-3d { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; }
.c-g .c-g-badge { position: absolute; top: .071rem; right: 0; box-shadow: 0 0 0 2.5px var(--surface); }
/* nella barra del telefono la G non ha disco: solo il simbolo nella sua perla (l'anello compare quando parli) */
.c-bar .c-g, .c-bar .c-g:hover, body.c-fan-on .c-bar .c-g { background: none; box-shadow: none; }
.c-bar .c-g-disc { left: 15%; top: 15%; width: 70%; height: 70%; }
.c-bar .c-g-new { top: .071rem; left: 0; }
.c-bar .c-g.ptt, body.c-vx-listen .c-bar .c-g { box-shadow: 0 0 0 2px var(--c-sky), 0 .714rem 2rem -.571rem rgba(56, 189, 248, .75); }
.c-bar .c-g:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
body.c-fan-on .c-g :is(.c-g-badge, .c-g-new) { opacity: 0; }
/* una risposta della chat arrivata mentre eri altrove: il numerino azzurro a sinistra della G (la G = Scrivi) */
.c-g-new { position: absolute; top: -.286rem; left: -.5rem; min-width: 1.3rem; height: 1.3rem; padding: 0 .3rem; border-radius: 999px; display: grid;
  place-items: center; background: var(--c-sky-deep); color: #fff; font: 700 var(--fs-2xs)/1 var(--font); font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2.5px var(--surface); }
.c-g-new.hidden { display: none; }
body.c-fan-on .c-g { box-shadow: 0 0 0 1.5px var(--accent), var(--c-g-glow); }
/* l'anello: tenuta premuta (ascolta), la lezione «tieni premuto per parlare» */
.c-g-ring { position: absolute; inset: -.429rem; border-radius: 50%; pointer-events: none; }
.c-g-ring i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--c-sky); opacity: 0; }
.c-g-mic { position: absolute; left: 50%; top: -2.9rem; width: 2.15rem; height: 2.15rem; margin-left: -1.075rem; border-radius: 50%; display: grid;
  place-items: center; background: var(--c-sky-deep); color: #fff; box-shadow: 0 .429rem 1.143rem -.429rem rgba(47, 155, 255, .8); opacity: 0;
  transform: translateY(.571rem) scale(.8); transition: opacity .2s, transform .25s cubic-bezier(.2, .8, .2, 1); pointer-events: none; }
.c-g-mic svg { width: var(--ic-sm); height: var(--ic-sm); stroke-width: 2; }
.c-g.ptt .c-g-mic, .c-g.teach-ptt .c-g-mic, body.c-vx-listen .c-g .c-g-mic { opacity: 1; transform: none; }
.c-g.ptt, body.c-vx-listen .c-g { box-shadow: 0 0 0 2px var(--c-sky), 0 .714rem 2rem -.571rem rgba(56, 189, 248, .75); }
@media (prefers-reduced-motion: no-preference) {
  .c-g.ptt .c-g-ring i, .c-g.teach-ptt .c-g-ring i, body.c-vx-listen .c-g .c-g-ring i { animation: c-ripple 1.6s cubic-bezier(.2, .7, .3, 1) infinite; }
  .c-g.ptt .c-g-ring i:nth-child(2), .c-g.teach-ptt .c-g-ring i:nth-child(2), body.c-vx-listen .c-g .c-g-ring i:nth-child(2) { animation-delay: .53s; }
  .c-g.ptt .c-g-ring i:nth-child(3), .c-g.teach-ptt .c-g-ring i:nth-child(3), body.c-vx-listen .c-g .c-g-ring i:nth-child(3) { animation-delay: 1.06s; }
  body.c-vx-speak .c-g .c-g-ring i:first-child { opacity: .6; border-color: var(--accent); border-right-color: transparent; border-bottom-color: transparent;
    animation: c-spin 1.1s linear infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .c-g.ptt .c-g-ring i:first-child, .c-g.teach-ptt .c-g-ring i:first-child, body.c-vx-listen .c-g .c-g-ring i:first-child { opacity: .8; }
}
/* la chat rapida chiusa mentre risponde: l'arco gira attorno alla G; risposta pronta: il punto azzurro */
@media (prefers-reduced-motion: no-preference) {
  .c-g.qc-busy .c-g-ring i:first-child { opacity: .7; border-color: var(--c-sky); border-right-color: transparent; border-bottom-color: transparent;
    animation: c-spin 1.1s linear infinite; }
}
@media (prefers-reduced-motion: reduce) { .c-g.qc-busy .c-g-ring i:first-child { opacity: .7; border-color: var(--c-sky); border-right-color: transparent; } }
.c-g.qc-new::after { content: ""; position: absolute; top: .214rem; left: .214rem; width: .857rem; height: .857rem; border-radius: 50%; background: var(--c-sky-deep);
  box-shadow: 0 0 0 2.5px var(--surface); }
.c-g.qc-new:has(.c-g-new:not(.hidden))::after { display: none; }
@keyframes c-ripple { 0% { opacity: .75; transform: scale(1); } 100% { opacity: 0; transform: scale(1.65); } }
@keyframes c-spin { to { transform: rotate(360deg); } }

/* il suggerimento sopra la G (durante i gesti e nelle piccole lezioni) */
.c-hint { position: fixed; z-index: 55; left: 50%; bottom: calc(var(--c-bar-top) + 4.143rem); display: flex; align-items: center;
  gap: .5rem; max-width: calc(100vw - 2.286rem); width: max-content; padding: .4rem 1rem .4rem .8rem; min-height: 2.43rem; border-radius: var(--radius); background: var(--c-toast);
  color: var(--c-toast-ink); font: 600 var(--fs-base)/1.25 var(--font); box-shadow: var(--c-pop); pointer-events: none;
  opacity: 0; transform: translate(-50%, .571rem); transition: opacity .18s, transform .22s cubic-bezier(.2, .8, .2, 1); }
.c-hint.on { opacity: 1; transform: translate(-50%, 0); }
.c-hint svg { width: var(--ic-sm); height: var(--ic-sm); color: var(--c-sky-light); stroke-width: 2; }
.c-hint span { overflow-wrap: anywhere; }
body.c-fan-on .c-hint[data-kind="disc"], body.c-fan-on .c-hint[data-kind="pick"] { bottom: calc(var(--c-bar-b) + var(--c-perl, 4.286rem) / 2 + var(--c-disc, 10.3rem) + 1.2rem); }
body.c-teach .c-hint { bottom: calc(var(--c-bar-top) + 6.571rem); }

/* ------------------------------------------------------------------ il disco delle aree: nasce dalla G e dalle perle
   Un pezzo solo con le perle: stesso fondo, stessa riga sottile, raccordi tondi (guscio.js, dialPath), la base sulla
   riga dei centri delle perle. Sta fra la forma delle perle (sotto) e i pulsanti (sopra); il suo filo si vede solo fuori
   dalle perle. L'ombra sale verso l'alto e non sporca le perle; cresce solo con la scala (transform) dal centro della G. */
.c-fan { position: fixed; z-index: 49; pointer-events: none; display: none; --p: 0; --k: 1; --oy: 0; --ox: 0; }
.c-fan.on { display: block; }
.c-dial { position: absolute; left: 0; top: 0; width: 100% !important; height: 100% !important; overflow: visible; opacity: clamp(0, calc(var(--p) * 3), 1); }
.c-fan.peek .c-dial { opacity: clamp(0, calc(var(--p) * 3.4), 1); }
.c-dial .base { fill: var(--surface); stroke: none; }
.c-dial .glow { stroke: none; }
/* il bordo: un filo sottile e morbido (niente linee grezze), giunture tonde, disegno preciso */
.c-dial .edge { fill: none; stroke: color-mix(in srgb, var(--ink) 11%, transparent); stroke-width: 1.15; stroke-linejoin: round;
  stroke-linecap: round; shape-rendering: geometricPrecision; }
.c-dial .sh { fill: rgba(16, 24, 40, .26); stroke: none; }
/* il ventaglio si apre dal mezzo verso i due lati (guscio.js, fanProgress: una fetta che si allarga): segni, arco e
   puntini sono già tutti al loro posto, li scopre la fetta */
.c-dial .tick { stroke: var(--line-strong); stroke-width: 1; }
.c-dial .tick.big { stroke: var(--c-faint); stroke-width: 1.2; }
.c-dial .arc { fill: none; stroke: var(--accent); stroke-width: 1.2; opacity: .38; }
.c-dial .hub { fill: none; stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 2 3; }
.c-dial .arc.in { stroke: var(--line-strong); stroke-width: 1; opacity: .7; }
/* un puntino per area sull'arco interno, con il suo raggio verso l'area: compaiono con le aree, quello sotto il dito si accende */
.c-dial .pip { fill: var(--accent); stroke: none; transform-box: fill-box; transform-origin: center; transition: transform .15s ease-out, fill .15s; }
.c-dial .pip.on { transform: scale(1.75); filter: drop-shadow(0 0 3px color-mix(in srgb, var(--accent) 70%, transparent)); }
.c-dial .ray { stroke: var(--line-strong); stroke-width: 1; transition: stroke .15s; }
.c-dial .ray.on { stroke: var(--accent); stroke-width: 1.4; }
:root[data-theme="dark"] .c-dial .edge { stroke: rgba(255, 255, 255, .16); }
:root[data-theme="dark"] .c-dial .sh { fill: rgba(0, 0, 0, .62); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .c-dial .edge { stroke: rgba(255, 255, 255, .16); }
  :root:not([data-theme="light"]) .c-dial .sh { fill: rgba(0, 0, 0, .62); }
}
.c-fan-items { position: absolute; inset: 0; }
/* le aree escono dal centro con il disco (--k), poi ognuna compare a turno */
.c-fan-item { position: absolute; left: calc(var(--ox) * 1px + var(--dx) * var(--k) * 1px); top: calc(var(--oy) * 1px - var(--dy) * var(--k) * 1px);
  transform: translate(-50%, -50%) scale(calc(.7 * var(--c-fan-fit, 1))); opacity: 0; display: flex; flex-direction: column; align-items: center; gap: .25rem;
  height: auto; min-height: 0; min-width: 0; padding: .143rem .214rem; border: 0; border-radius: var(--radius); background: none; box-shadow: none;
  color: var(--ink); font: 600 var(--fs-xs)/1.1 var(--font); white-space: nowrap; pointer-events: none; cursor: pointer;
  transition: opacity .2s ease-out, transform .26s cubic-bezier(.2, .8, .2, 1.2), color .15s; }
.c-fan-item .lb.long { font-size: .786rem; letter-spacing: -.01em; }
.c-fan-item .lb.xlong { font-size: .714rem; letter-spacing: -.015em; }
/* --c-fan-fit (guscio.js, fanFit): con il testo molto grande su un telefono stretto le voci si fanno un po' più piccole
   tutte insieme, così nessun nome finisce sotto la voce accanto (i nomi restano interi) */
.c-fan-item.in { opacity: 1; transform: translate(-50%, -50%) scale(var(--c-fan-fit, 1)); }
/* una voce si tocca appena è comparsa, anche se il resto si sta ancora aprendo */
.c-fan.open .c-fan-item, .c-fan.on .c-fan-item.in { pointer-events: auto; }
.c-fan-item:hover { background: none; }
.c-fan-item .ic { position: relative; width: 2.286rem; height: 2.286rem; border-radius: 50%; display: grid; place-items: center;
  transition: transform .15s, box-shadow .15s; }
.c-fan-item .ic svg { width: var(--ic-md); height: var(--ic-md); stroke-width: 1.9; }
.c-fan-item .badge { position: absolute; top: -.4rem; left: 1.55rem; box-shadow: 0 0 0 2px var(--surface); }
/* a sinistra della G il numerino va sull'altro lato: così non copre il nome dell'area che viene dopo */
.c-fan-item.lft .badge { left: auto; right: 1.55rem; }
/* .c-fan davanti: vince anche sul tondo del tema scuro, così l'area sotto il dito si accende in chiaro e in scuro */
.c-fan .c-fan-item.on .ic, .c-fan .c-fan-item:hover .ic { transform: scale(1.08);
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--ac), 0 .286rem .857rem -.286rem color-mix(in srgb, var(--ac) 60%, transparent); }
.c-fan-item:focus-visible { outline: none; box-shadow: none; }
.c-fan-item:focus-visible .ic { outline: 2px solid var(--accent); outline-offset: .214rem; }
.c-fan.peek .c-fan-items { display: none; }
/* il ventaglio: voci un po' più piccole, in fila sull'arco */
.c-fan[data-shape="ventaglio"] .c-fan-item .ic { width: 2.143rem; height: 2.143rem; }
.c-fan[data-shape="ventaglio"] .c-fan-item .ic svg { width: var(--ic-md); height: var(--ic-md); }
.c-fan[data-shape="ventaglio"] .c-fan-item .lb { font-size: .821rem; }
.c-fan[data-shape="ventaglio"] .c-fan-item .lb.long { font-size: .75rem; }
.c-fan[data-shape="ventaglio"] .c-fan-item .lb.xlong { font-size: .69rem; }
/* la nuvola, stile «Bubbles»: ogni voce è una bolla come le perle della barra (vetro tondo, filo sottile, ombra
   morbida verso il basso), l'icona e il nome dentro. Posto e misura da guscio.js (bubblePlan, --bub); escono dalla G
   una dopo l'altra (fanProgress: transform e opacità a ogni fotogramma, qui niente transizioni che le rallentino) */
.c-fan[data-shape="nuvola"] .c-fan-item { width: var(--bub, 5.5rem); height: var(--bub, 5.5rem); border-radius: 50%; padding: 0 .357rem;
  justify-content: center; gap: .214rem; background: rgba(249, 250, 253, .97); border: 1px solid rgba(36, 44, 96, .14);
  box-shadow: 0 .5rem 1.143rem -.357rem rgba(36, 44, 96, .38), 0 1px 2px rgba(36, 44, 96, .1);
  transition: color .15s, box-shadow .15s, border-color .15s; will-change: transform, opacity; }
.c-fan[data-shape="nuvola"] .c-fan-item .ic { width: 2.286rem; height: 2.286rem; flex: none; }
.c-fan[data-shape="nuvola"] .c-fan-item .ic svg { width: var(--ic-md); height: var(--ic-md); }
.c-fan[data-shape="nuvola"] .c-fan-item .lb { font-size: .786rem; max-width: 100%; }
.c-fan[data-shape="nuvola"] .c-fan-item .lb.long { font-size: .714rem; }
.c-fan[data-shape="nuvola"] .c-fan-item .lb.xlong { font-size: .643rem; }
.c-fan[data-shape="nuvola"] .c-fan-item .lb.wrap { white-space: normal; text-align: center; line-height: 1.05; }
.c-fan[data-shape="nuvola"] .c-fan-item .badge { left: 1.7rem; }
/* la bolla sotto il dito: il filo si accende del suo colore */
.c-fan[data-shape="nuvola"] .c-fan-item.on, .c-fan[data-shape="nuvola"] .c-fan-item:focus-visible {
  border-color: var(--ac, var(--accent)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ac, var(--accent)) 35%, transparent),
  0 .5rem 1.143rem -.357rem rgba(36, 44, 96, .38); }
.c-fan[data-shape="nuvola"] .c-fan-item.on .ic, .c-fan[data-shape="nuvola"] .c-fan-item:hover .ic { box-shadow: none; }
:root[data-theme="dark"] .c-fan[data-shape="nuvola"] .c-fan-item { background: rgba(48, 48, 46, .97); border-color: rgba(255, 255, 255, .16);
  box-shadow: 0 .5rem 1.143rem -.357rem rgba(0, 0, 0, .7), 0 1px 2px rgba(0, 0, 0, .3); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .c-fan[data-shape="nuvola"] .c-fan-item { background: rgba(48, 48, 46, .97); border-color: rgba(255, 255, 255, .16);
    box-shadow: 0 .5rem 1.143rem -.357rem rgba(0, 0, 0, .7), 0 1px 2px rgba(0, 0, 0, .3); }
}
@media (prefers-reduced-motion: reduce) { .c-fan-item { transition: none; } }

/* ------------------------------------------------------------------ velo */
.c-veil { position: fixed; inset: 0; z-index: 40; background: var(--c-veil); opacity: 0; pointer-events: none; transition: opacity .22s; --fan: 0; }
body.c-open .c-veil { opacity: 1; pointer-events: auto; }
body.c-fan-on .c-veil { opacity: calc(var(--fan) * 1.2); pointer-events: auto; }

/* ------------------------------------------------------------------ fogli che salgono dal basso (telefono) */
.c-shead { flex: none; }
.c-grip { flex: none; height: 1.571rem; display: grid; place-items: center; cursor: grab; touch-action: none; }
.c-grip span { width: 2.714rem; height: .286rem; border-radius: 2px; background: var(--line-strong); }
.c-shead-row { flex: none; display: flex; align-items: flex-start; gap: .7rem; padding: 0 .857rem .714rem 1.429rem; touch-action: none; }
.c-sico { display: none; }
.c-ttl { flex: 1; min-width: 0; padding-top: .286rem; }
.c-ttl h2 { margin: 0; font: 500 var(--fs-3xl)/1.2 var(--font-display); letter-spacing: -.015em; color: var(--ink); overflow-wrap: anywhere; }
.c-ssub { margin: .214rem 0 0; font: 400 var(--fs-md)/1.4 var(--font); color: var(--muted); }
.c-back { display: inline-flex; align-items: center; gap: 2px; margin: -.286rem 0 .286rem -.429rem; min-height: 2.3rem; height: auto; padding: 0 .429rem; border: 0;
  background: none; box-shadow: none; color: var(--c-accent-text); font: 600 var(--fs-base)/1 var(--font); border-radius: var(--radius); cursor: pointer; }
.c-back svg { width: var(--ic-sm); height: var(--ic-sm); stroke-width: 2.1; }
.c-big { display: block; margin-top: .571rem; font: 400 var(--fs-4xl)/1.18 var(--font-display); letter-spacing: -.02em; text-wrap: balance; }
.c-ttl h2 .c-risk { font-family: var(--font); letter-spacing: 0; }
/* le linguette dell'area: le voci da sole, quella scelta in blu con il filo sotto */
.c-tabs { flex: none; display: flex; flex-wrap: wrap; column-gap: 1.286rem; padding: 0 1.429rem; border-bottom: 1px solid var(--line); }
.c-tabs button { position: relative; flex: none; display: inline-flex; align-items: center; gap: .43rem; height: 2.86rem; min-height: 0; padding: 0;
  border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--muted); font: 500 var(--fs-md)/1 var(--font); white-space: nowrap; cursor: pointer; }
.c-tabs button:hover { color: var(--ink); background: none; }
.c-tabs button.on { color: var(--c-accent-text); font-weight: 600; }
.c-tabs button.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 1px; background: var(--accent); }
.c-tabs .badge { min-width: 1.3rem; height: 1.3rem; font-size: var(--fs-2xs); background: var(--accent); color: #fff; }
.c-sbody { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 1.429rem 2rem; }
.c-sfoot { flex: none; display: flex; gap: .571rem 1.429rem; align-items: center; padding: .857rem 1.429rem calc(.857rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line); background: var(--page); flex-wrap: wrap; }

/* i contenuti dei fogli nostri */
.c-rows { list-style: none; margin: 0; padding: 0; }
.c-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 1rem; width: 100%; min-height: 4.15rem;
  height: auto; padding: .714rem 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none;
  color: var(--ink); text-align: left; cursor: pointer; justify-content: stretch; }
.c-rows > li:first-child > .c-row { border-top: 0; }
.c-row:hover { background: none; }
html.c-shell :is(.c-row, .c-done-row, .c-tile, .c-side, .c-ri, .c-fan-item, .c-tabs button, .c-link, .c-src, .c-back):hover { border-color: var(--line); }
.c-rico { width: 2.57rem; height: 2.57rem; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-2); }
.c-rico svg { width: var(--ic-lg); height: var(--ic-lg); }
.c-rtx { display: grid; gap: 2px; min-width: 0; }
.c-rtx .t1 { font: 600 var(--fs-lg)/1.3 var(--font); }
.c-rtx .t2 { font: 400 var(--fs-md)/1.4 var(--font); color: var(--muted); overflow-wrap: anywhere; }
.c-rtx .t2 .c-sum { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }   /* i riassunti di Tu: una riga */
.c-row > svg { color: var(--c-faint); }
.c-out .c-row .t1, .c-out .c-row .c-rico { color: var(--danger); }
.c-blk { border-top: 1px solid var(--line); padding: 1rem 0; display: grid; gap: .714rem; }
.c-me-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: center; padding: 0 0 1rem; }
.c-me-head .k1 { margin: 0; font: 400 var(--fs-4xl)/1.15 var(--font-display); letter-spacing: -.02em; overflow-wrap: anywhere; }
.c-me-head .k2 { margin: 2px 0 0; color: var(--muted); font: 400 var(--fs-md)/1.4 var(--font); }
.c-seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .286rem; }
.c-seg button { position: relative; height: auto; min-height: var(--c-ctl-sm); padding: .2rem .429rem; border-radius: var(--radius); border: 1px solid var(--line-strong);
  background: transparent; box-shadow: none; color: var(--ink-2); font: 500 var(--fs-base)/1.15 var(--font); overflow-wrap: anywhere; cursor: pointer; }
.c-seg button::after { content: ""; position: absolute; inset: -.357rem 0; }
.c-seg button.on { background: var(--accent-soft); color: var(--c-accent-text); border-color: transparent; font-weight: 600; }
.c-pc-t { margin: 0; font: 400 var(--fs-base)/1.45 var(--font); color: var(--ink-2); }
.c-pc .c-btn { justify-self: start; }

/* una richiesta aperta: chi l'ha preparata, perché, il contenuto, il commento che diventa lezione */
.c-by { display: flex; align-items: center; gap: .7rem; margin: .286rem 0 .857rem; color: var(--muted); font: 400 var(--fs-md)/1.4 var(--font); }
.c-by svg { width: var(--ic-sm); height: var(--ic-sm); flex: none; }
.c-by b { color: var(--ink); font-weight: 600; }
.c-why { margin: 0 0 1rem; border-left: 2px solid var(--danger); padding: 2px 0 2px 1rem; font: 400 var(--fs-lg)/1.5 var(--font); color: var(--ink-2); }
.c-why.mid { border-left-color: var(--c-warn-dot); } .c-why.low { border-left-color: var(--ok); } .c-why.ask { border-left-color: var(--accent); }
.c-mail { border-top: 1px solid var(--line); }
.c-kv { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); gap: .714rem; align-items: center; padding: .714rem 0; border-bottom: 1px solid var(--line);
  font: 400 var(--fs-md)/1.4 var(--font); }
.c-kv .k { color: var(--muted); font-weight: 500; font-size: var(--fs-base); }
.c-kv .v { color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.c-kv input { height: var(--c-ctl); }
.c-fld { display: grid; gap: .571rem; margin: 1rem 0 0; font: 500 var(--fs-base)/1.3 var(--font); color: var(--ink-2); }
.c-fld small { display: block; font-weight: 400; color: var(--muted); margin-top: 2px; }
.c-fld textarea { min-height: 7rem; line-height: 1.55; }
.c-mail-b { margin: .857rem 0 .429rem; font: 400 var(--fs-lg)/1.55 var(--font); color: var(--ink); white-space: pre-line; overflow-wrap: anywhere; }
.c-src-list { margin: 0 0 .571rem; padding-left: 1.1rem; color: var(--muted); font: 400 var(--fs-base)/1.45 var(--font); }
.c-post { position: relative; width: 100%; max-width: 26rem; aspect-ratio: 1 / 1; border-radius: var(--radius); overflow: hidden; background: var(--surface-2); margin: .286rem 0 .429rem; }
.c-post img, .c-post video { width: 100%; height: 100%; object-fit: cover; display: block; }
.c-post-n { position: absolute; top: .571rem; right: .571rem; min-width: 1.6rem; height: 1.6rem; padding: 0 .4rem; border-radius: 999px; background: rgba(0, 0, 0, .55);
  color: #fff; font: 700 var(--fs-xs)/1.6rem var(--font); text-align: center; }

/* fatto da Graphorum */
.c-done-list { list-style: none; margin: 0; padding: 0; }
.c-done-it { display: grid; grid-template-columns: 2.57rem minmax(0, 1fr); column-gap: 1rem; padding: .857rem 0; border-top: 1px solid var(--line); }
.c-done-it:first-child { border-top: 0; padding-top: .286rem; }
.c-done-b .t1 { margin: 0; font: 600 var(--fs-lg)/1.35 var(--font); overflow-wrap: anywhere; }
.c-done-b .t2 { margin: 2px 0 0; font: 400 var(--fs-base)/1.4 var(--font); color: var(--muted); }
.c-done-a { grid-column: 2; display: flex; gap: .429rem; margin-top: .571rem; flex-wrap: wrap; }
.c-done-a:empty { display: none; }

/* l'avviso con «Annulla» (10 secondi), sopra la barra */
.c-undo { position: fixed; z-index: 56; left: 1.143rem; right: 1.143rem; bottom: calc(var(--c-bar-top) + 2.857rem); max-width: 32rem;
  margin: 0 auto; display: none; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .857rem; padding: .429rem .429rem .429rem 1rem;
  min-height: 3.7rem; background: var(--c-toast); color: var(--c-toast-ink); border-radius: var(--radius); box-shadow: var(--c-pop); overflow: hidden; }
.c-undo.on { display: grid; animation: c-pop .2s cubic-bezier(.2, .8, .2, 1) both; }
.c-undo > svg { color: #3ddc97; width: var(--ic-lg); height: var(--ic-lg); }
.c-undo p { margin: 0; font: 500 var(--fs-md)/1.35 var(--font); }
.c-undo button { height: var(--c-ctl); min-height: 0; padding: 0 1rem; border: 0; border-radius: var(--radius); background: none; box-shadow: none;
  color: var(--c-sky-light); font: 700 var(--fs-md)/1 var(--font); cursor: pointer; }
.c-undo button:hover { background: rgba(255, 255, 255, .08); }
.c-undo-line { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--c-sky); transform-origin: 0 50%; animation: c-line var(--ms, 10s) linear forwards; }
@keyframes c-line { to { transform: scaleX(0); } }
@keyframes c-pop { from { opacity: 0; transform: translateY(.571rem) scale(.98); } to { opacity: 1; transform: none; } }

.c-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ================================================================== TELEFONO */
/* Ogni area, ogni foglio e la chat si aprono a tutta altezza, fino in cima (regola del capo): la testata sta sotto la
   barra di sistema del telefono (zona sicura), la barra in basso con la G resta sopra la pagina e la pagina le lascia
   il suo spazio in fondo; niente fogli a metà, niente doppio scorrimento, niente scorrimento di lato. Se ci sono lavori
   in corso la loro pillola sta in cima alla pagina e la testata scende quanto serve (--c-page-safe). */
@media (max-width: 860px) {
  html.c-shell .app { display: block; height: 100%; }
  html.c-shell .c-home { position: fixed; inset: 0; z-index: 1; overflow-y: auto; overflow-x: hidden;
    padding-bottom: calc(var(--c-bar-top) + 4rem); }
  html.c-shell #c-rail { display: none; }
  html.c-shell body { --c-page-safe: env(safe-area-inset-top, 0px); }
  html.c-shell body.c-pill-up { --c-page-safe: calc(env(safe-area-inset-top, 0px) + var(--c-slot-h, 2.4rem) + .571rem); }

  /* <main> è la pagina delle aree (le pagine di sempre, dentro); i fogli nostri uguali. Sotto la barra in basso (che
     resta in vista), sopra Oggi. Il secondo livello sta sopra il primo. */
  html.c-shell main, .c-sheet { position: fixed; left: 0; right: 0; bottom: 0; top: 0; z-index: 42; height: auto; display: flex;
    flex-direction: column; background: var(--page); border-radius: 0; box-shadow: none; overflow: hidden; }
  html.c-shell main { transform: translateY(100%); visibility: hidden;
    transition: transform .28s cubic-bezier(.2, .8, .2, 1), visibility 0s .28s; }
  html.c-shell body.c-main-open main { transform: none; visibility: visible; transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
  html.c-shell body.c-main-l2 main, .c-sheet.l2 { z-index: 44; }
  html.c-shell main.dragging, .c-sheet.dragging { transition: none !important; }
  .c-sheet { transition: transform .28s cubic-bezier(.2, .8, .2, 1); }
  .c-shead-row { transition: padding-top .2s ease; }
  .c-sheet.behind .c-sbody, .c-sheet.behind .c-sfoot { visibility: hidden; }
  @media (prefers-reduced-motion: no-preference) {
    .c-sheet.enter { animation: c-sheet-in .3s cubic-bezier(.2, .8, .2, 1) both; }
    .c-sheet.leave { animation: c-sheet-out .2s ease-in both; }
  }
  /* la testata: sotto la barra di sistema, senza maniglia (la pagina è intera); trascinata in giù chiude */
  .c-grip { display: none; }
  .c-shead-row { padding: calc(var(--c-page-safe) + .714rem) .571rem .571rem var(--pad-x); align-items: center; min-height: calc(var(--c-page-safe) + var(--head-h)); }
  html.c-shell .c-ssub { display: none; }
  .c-ttl { padding-top: 0; }
  /* lo spazio in fondo: l'ultima riga si legge sopra la barra con la G */
  html.c-shell main > .tab { flex: 1 1 auto; height: auto; min-height: 0; }
  html.c-shell main > .tab:not(.tab-chat):not(.tab-embed) { padding-bottom: calc(var(--c-bar-top) + 2rem); }
  html.c-shell main > .tab.tab-embed { padding: 0 0 var(--c-bar-top); }
  .c-sheet .c-sbody { padding-bottom: calc(var(--c-bar-top) + 1.429rem); }
  .c-sheet:has(.c-sfoot) .c-sbody { padding-bottom: 1.429rem; }
  .c-sfoot { padding-bottom: calc(var(--c-bar-top) + .571rem); }
  /* mentre scrivi in una casella (tastiera aperta) la barra si fa da parte */
  html.c-shell :is(.c-bar, .c-bar-bg) { transition: transform .22s cubic-bezier(.2, .8, .2, 1), opacity .18s; }
  html.c-shell body.c-typing:not(.vx-on) :is(.c-bar, .c-bar-bg) { transform: translateY(calc(100% + var(--c-bar-b) + 1rem)); opacity: 0; pointer-events: none; }
  html.c-shell body.c-typing main > .tab:not(.tab-chat):not(.tab-embed) { padding-bottom: 2rem; }
  /* il velo: dietro le pagine; con il disco aperto sopra la pagina (sotto la barra) */
  body.c-open.c-full .c-veil { z-index: 40; }
  body.c-fan-on .c-veil { z-index: 47; }

  /* la voce (G tenuta premuta): il pannello sta sopra la barra, la G resta in vista con il suo anello */
  html.c-shell body.vx-on .c-bar-bg { z-index: 86; }
  html.c-shell body.vx-on .c-bar { z-index: 87; }
  html.c-shell .vx { padding-bottom: calc(var(--c-bar-top)); }     /* il velo arriva in fondo, sotto le perle */
  html.c-shell .vx-panel { height: min(40rem, calc(100% - 1.714rem)); }
  /* WhatsApp e Telegram (dai filtri di Messaggi): pagine intere anche loro, come le aree */
  html.c-shell .chat-pop[data-app] { inset: 0; height: auto !important; width: auto !important; border-radius: 0; z-index: 62;
    padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px); }
  html.c-shell .toast { bottom: calc(var(--c-bar-top) + 1.286rem) !important; }
  html.c-shell body.c-typing .toast { bottom: calc(env(safe-area-inset-bottom, 0px) + 1.286rem) !important; }
  /* una pagina intera copre la testata di Oggi: la pillola dei lavori resta in vista, in cima alla pagina */
  .c-pillslot { position: fixed; z-index: 57; left: 1.143rem; right: 1.143rem; top: calc(env(safe-area-inset-top, 0px) + .286rem);
    display: flex; justify-content: center; pointer-events: none; }
  .c-pillslot > * { pointer-events: auto; }
  .c-pillslot:empty, .c-pillslot:has(> .hidden:only-child) { display: none; }
  html.c-shell .c-pillslot #work-pill { min-height: var(--c-ctl-sm); background: var(--surface); font-size: var(--fs-sm); max-width: 100%; }
  /* «Torna su» di sempre: in una pagina lunga già scorsa compare in basso a sinistra, sopra la barra */
  html.c-shell body.c-main-open.scrolled:not(.qc-on):not(.pop-open):not(.vx-on):not(.c-fan-on) #chat-dock {
    display: flex !important; left: 1rem; right: auto !important; z-index: 56; }
  html.c-shell body.c-main-open #chat-dock { bottom: calc(var(--c-bar-top) + 1rem) !important; }
  html.c-shell #chat-dock .cd-btn, html.c-shell #chat-dock #qc-orb { display: none !important; }
}
@keyframes c-sheet-in { from { transform: translateY(100%); } to { transform: none; } }
@keyframes c-sheet-out { to { transform: translateY(100%); } }

/* ================================================================== COMPUTER: barra di icone, Oggi, pannelli affiancati */
@media (min-width: 861px) {
  html.c-shell .app { display: flex; height: 100%; }
  html.c-shell .c-bar, html.c-shell .c-bar-bg, html.c-shell .c-fan, html.c-shell .c-hint, html.c-shell .c-veil, html.c-shell #c-arealist { display: none !important; }
  html.c-shell #c-rail { order: 0; }
  html.c-shell .c-home { order: 1; flex: 1 1 auto; min-width: 0; height: 100%; overflow-y: auto; padding-bottom: 3.429rem; }
  /* Oggi stretto accanto ai pannelli; sugli schermi piccoli il pannello prende tutto (Oggi torna con la sua icona) */
  html.c-shell body.c-panels .c-home { flex: 0 0 clamp(20rem, 24vw, 26rem); }
  html.c-shell body.c-wide .c-home { display: none; }
  @media (max-width: 1700px) { html.c-shell body.c-panels.c-two .c-home { display: none; } }
  @media (max-width: 1280px) { html.c-shell body.c-panels .c-home { display: none; } }
  html.c-shell .c-top { padding: 1rem 2.571rem .714rem; min-height: 4.571rem; }
  html.c-shell .c-oggi { max-width: 80rem; padding: .714rem 2.571rem 0; }
  html.c-shell body.c-panels .c-top { padding: 1rem 1.714rem .714rem; }
  html.c-shell body.c-panels .c-oggi { padding: .429rem 1.714rem 0; }
  html.c-shell body.c-panels .c-hero .c-hello { font-size: var(--fs-3xl); }   /* Oggi stretto accanto a un pannello */
  html.c-shell .c-notices { max-width: 70rem; padding: .286rem 2.571rem 0; }
  html.c-shell body.c-panels .c-notices { padding: .286rem 1.714rem 0; }

  .c-rail { flex: none; width: var(--c-rail); height: 100%; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 1rem 0;
    border-right: 1px solid var(--line); background: var(--side); overflow-y: auto; scrollbar-width: none; }
  .c-rail .c-g { position: relative; left: auto; top: auto; bottom: auto; margin: 0 0 .857rem; width: 3.714rem; height: 3.714rem; flex: none;
    box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--accent) 38%, transparent), var(--c-g-glow); }
  .c-rail .c-g-mic { top: auto; left: auto; right: -1.6rem; bottom: 50%; margin: 0 0 -1.075rem; }
  .c-ri { position: relative; width: 4.9rem; min-height: 4.15rem; height: auto; padding: .5rem 0 .429rem; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: .357rem; border: 0; border-radius: var(--radius); background: none; box-shadow: none; color: var(--muted);
    font: 500 var(--fs-xs)/1.1 var(--font); text-align: center; transition: background .15s, color .15s; cursor: pointer; flex: none; }
  .c-ri:hover { color: var(--ink); background: var(--surface-2); }
  .c-ri.on { color: var(--c-accent-text); background: var(--accent-soft); font-weight: 600; }
  /* le aree con il loro colore: l'icona sempre, il fondo tenue quando sei lì */
  .c-ri[data-c-area] svg { color: var(--ac); }
  .c-ri[data-c-area].on { color: var(--ink); background: color-mix(in srgb, var(--ac) 12%, transparent); }
  .c-ri svg { width: var(--ic-xl); height: var(--ic-xl); }
  .c-ri > span:not(.badge):not(.c-me) { max-width: 4.6rem; overflow-wrap: anywhere; hyphens: auto; }
  .c-ri .badge { position: absolute; top: .214rem; right: .929rem; min-width: 1.3rem; height: 1.3rem; font-size: var(--fs-2xs); box-shadow: 0 0 0 2px var(--side); }
  .c-ri.on .badge { box-shadow: 0 0 0 2px var(--side); }
  .c-ri .c-me { width: 2rem; height: 2rem; }
  .c-rsep { width: 2.286rem; height: 1px; background: var(--line); margin: .571rem 0; flex: none; }
  .c-rgrow { flex: 1; min-height: .857rem; }
  /* il computer nella zona vuota sopra «Parla»: percentuali in piccolo, una sotto l'altra, e le tre icone di dove
     lavorano le AI (la scelta accesa ha il fondo tenue) */
  .c-rpc { flex: none; width: 4.9rem; display: grid; gap: .071rem; padding: .571rem 0 .5rem; margin: 0 0 .286rem; border-top: 1px solid var(--line); }
  .c-rpc[hidden] { display: none; }
  .c-rpc-s { display: flex; justify-content: space-between; gap: .286rem; padding: 0 .5rem; font: 500 var(--fs-2xs)/1.4 var(--font);
    color: var(--muted); font-variant-numeric: tabular-nums; }
  .c-rpc-s b { font-weight: 600; color: var(--ink-2); }
  .c-rpc-s.hot b { color: var(--danger, #d14343); }
  .c-rmode { display: flex; justify-content: center; gap: .143rem; margin-top: .357rem; }
  .c-rmode button { width: 1.571rem; height: 1.571rem; min-height: 0; display: grid; place-items: center; padding: 0; border: 0;
    border-radius: var(--radius); background: none; box-shadow: none; color: var(--muted); cursor: pointer; transition: background .15s, color .15s; }
  .c-rmode button svg { width: var(--ic-sm, 1.071rem); height: var(--ic-sm, 1.071rem); }
  .c-rmode button:hover:not(:disabled) { color: var(--ink); background: var(--surface-2); }
  .c-rmode button.on { color: var(--c-accent-text); background: var(--accent-soft); }
  .c-rmode button:disabled:not(.on) { opacity: .45; cursor: default; }
  /* testo grande su uno schermo basso: le voci si fanno più fitte (stessa misura del testo), così stanno tutte in vista,
     fino a Tu, invece di finire sotto il bordo della finestra */
  .c-rail { container: c-rail / size; }
  @container c-rail (max-height: 47rem) {
    .c-ri { min-height: 0; padding: .3rem 0 .25rem; gap: .2rem; }
    .c-rail .c-g { width: 3.1rem; height: 3.1rem; margin-bottom: .45rem; }
    .c-rsep { margin: .3rem 0; }
    .c-rgrow { min-height: .3rem; }
  }

  /* <main> e i fogli nostri diventano pannelli a destra di Oggi */
  html.c-shell main { order: 3; flex: 1 1 0; min-width: 0; height: 100%; display: none; flex-direction: column; background: var(--page);
    border-left: 1px solid var(--line); }
  html.c-shell body.c-main-open main { display: flex; }
  html.c-shell main > .tab { flex: 1 1 auto; height: auto; min-height: 0; padding-top: 1.1rem; }
  @media (prefers-reduced-motion: no-preference) { html.c-shell body.c-main-open main { animation: c-panel-in .26s cubic-bezier(.2, .8, .2, 1); } }
  html.c-shell #c-sheets { display: contents; }
  .c-sheet { flex: 0 0 31rem; min-width: 0; height: 100%; display: flex; flex-direction: column; background: var(--page); border-left: 1px solid var(--line); }
  body:not(.c-main-open) .c-sheet { flex-basis: 34rem; }
  @media (prefers-reduced-motion: no-preference) { .c-sheet.enter { animation: c-panel-in .26s cubic-bezier(.2, .8, .2, 1) both; } }
  .c-grip { display: none; }
  .c-shead-row { padding: 1.286rem 1rem .857rem 1.714rem; align-items: center; touch-action: auto; }
  .c-sico { display: grid; place-items: center; width: 2.57rem; height: 2.57rem; border-radius: 50%; background: var(--accent-soft); color: var(--c-accent-text); flex: none; }
  .c-ri.on .c-me { box-shadow: 0 0 0 2px var(--accent); }
  /* Luce (il capo, 24/10): ogni area nel suo quadrato colorato, come le card di Oggi; Oggi blu, Parla rosa. In chiaro
     l'icona bianca sul colore, in scuro il colore pieno con l'icona scura */
  .c-ri[data-c-home] { --ac: var(--c-t-blue); }
  .c-ri[data-c-talk] { --ac: var(--c-t-rose); }
  .c-ri:is([data-c-area], [data-c-home], [data-c-talk]) { gap: .857rem; padding-top: .857rem; }
  .c-ri:is([data-c-area], [data-c-home], [data-c-talk]) svg { width: var(--ic-md); height: var(--ic-md); border-radius: 2px; background: var(--ac); color: #fff;
    box-shadow: 0 0 0 .43rem var(--ac); }   /* il quadrato è l'ombra piena: l'icona resta della misura della scala */
  :root[data-theme="dark"] .c-ri:is([data-c-area], [data-c-home], [data-c-talk]) svg { color: var(--c-candy-ink); }
  .c-sico svg { width: var(--ic-lg); height: var(--ic-lg); }
  /* Luce: l'icona dell'area nel suo quadrato colorato, come nella barra di icone e nelle card di Oggi (in scuro l'icona scura) */
  .c-sico[data-c-tone] { border-radius: var(--radius); background: var(--ac, var(--accent)); color: #fff; box-shadow: none; }
  :root[data-theme="dark"] .c-shead-row .c-sico[data-c-tone] { color: var(--c-candy-ink); box-shadow: none; }
  .c-ttl { padding-top: 0; }
  .c-ttl h2 { font-size: var(--fs-3xl); }
  .c-tabs { padding: 0 1.714rem; }
  .c-sbody { padding: 0 1.714rem 2.286rem; }
  .c-sfoot { padding: 1rem 1.714rem; }
  .c-wide-btn { display: grid; }
  .c-undo { left: auto; right: 1.714rem; bottom: 1.714rem; margin: 0; width: 26rem; }
  html.c-shell .toast { left: auto; right: 1.714rem; }
  /* le notifiche: si aprono sopra la pagina, a destra, come una finestra */
  html.c-shell .notif-rail { display: none; }
  html.c-shell body.nr-open .notif-rail { display: flex; position: fixed; top: 0; right: 0; bottom: 0; width: 23rem; z-index: 58;
    box-shadow: -1.286rem 0 2.857rem -1.286rem rgba(0, 0, 0, .35); border-left: 1px solid var(--line); }
  html.c-shell body.nr-open .nr-panel { display: flex; border-left: 0; }
}
@media (max-width: 860px) { .c-wide-btn { display: none !important; } }

/* ================================================================== LA CHAT: una sola, sempre la stessa
   «Scrivi», la G, Ctrl K, un link alla chat: la stessa pagina della chat (conversazioni, testata, messaggi, casella)
   dentro #qc-pop (app.js, qcOpen). Telefono: un foglio a tutta altezza che sale dal basso come le aree, alto quanto la
   parte di schermo sopra la tastiera (--qc-vh). Computer: un pannello a destra, alto quanto la finestra, accanto alla
   pagina che stai guardando (la pagina si stringe, niente resta coperto); entra come gli altri pannelli. Una testata
   sola, come quella dei fogli: cronologia, titolo, nuova, «Altro», chiudi. La casella sempre in fondo. */
html.c-shell #qc-pop { position: fixed; z-index: 62; display: flex; flex-direction: column; overflow: hidden; padding: 0; border: 0; border-radius: 0;
  background: var(--page); box-shadow: none; transform: none; opacity: 1; -webkit-backdrop-filter: none; backdrop-filter: none; }
html.c-shell #qc-pop.hidden { display: none !important; }
html.c-shell #qc-pop > .cp-head { display: none; }
html.c-shell #qc-pop .qc-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; background: transparent; position: relative; }
html.c-shell #qc-pop #tab-chat { position: relative; flex: 1 1 auto; height: auto; min-height: 0; padding: 0; gap: 0; display: flex; flex-direction: row;
  overflow: hidden; background: var(--page) !important; }
html.c-shell #qc-pop .chat-main { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 0; padding: 0; background: transparent; }
/* la testata: come quella dei fogli (stesse misure, stessi pulsanti a icona, la riga sottile sotto) */
html.c-shell #qc-pop .chat-head { flex: none; display: flex; align-items: center; flex-wrap: nowrap; gap: .143rem; min-height: var(--head-h);
  padding: .571rem .571rem .571rem calc(var(--pad-x) - .714rem); border-bottom: 1px solid var(--line); background: var(--page); justify-content: flex-start; row-gap: 0; }
html.c-shell #qc-pop .chat-head #chat-title { flex: 1 1 auto; min-width: 0; margin: 0 .286rem; font: 500 var(--fs-xl)/1.25 var(--font-display); letter-spacing: -.01em;
  color: var(--ink); overflow-wrap: anywhere; }
html.c-shell #qc-pop .chat-head :is(#hist-open, #chat-new-mobile, #chat-move, #chat-more, #chat-close) { display: inline-grid; place-items: center; flex: none;
  width: var(--ctl-h); height: var(--ctl-h); min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: var(--radius); background: transparent;
  box-shadow: none; color: var(--ink-2); }
html.c-shell #qc-pop .chat-head :is(#hist-open, #chat-new-mobile, #chat-move, #chat-more, #chat-close):hover { background: var(--surface-2); color: var(--ink); }
html.c-shell #qc-pop .chat-head :is(#hist-open, #chat-new-mobile, #chat-move, #chat-more, #chat-close) svg { width: var(--ic-md); height: var(--ic-md); }
html.c-shell #qc-pop .chat-head #chat-more[aria-expanded="true"] { background: var(--surface-2); color: var(--ink); }
/* rinomina, fissa, misura del testo ed elimina stanno in «Altro» (app.js, chatMoreMenu) */
html.c-shell #qc-pop .chat-head :is(.chat-fs, #chat-rename, #chat-pin, #chat-delete) { display: none !important; }
/* i messaggi: la pagina scorre da sola, la casella resta in fondo */
html.c-shell #qc-pop .chat-log { flex: 1 1 auto; min-height: 0; padding: 1.143rem var(--pad-x) 1rem; gap: 1.143rem; }
html.c-shell #qc-pop .chat-files { flex: none; padding: 0 var(--pad-x); }
html.c-shell #qc-pop .composer { flex: none; width: auto; margin: 0 var(--pad-x) calc(.857rem + env(safe-area-inset-bottom, 0px)); box-shadow: var(--field-sh); }
html.c-shell #qc-pop .composer:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
/* «Chi risponde» sulla sua riga sotto i pulsanti, intero (il pannello è stretto, il testo può essere grande) */
html.c-shell #qc-pop .composer-bar { flex-wrap: wrap; row-gap: .286rem; }
html.c-shell #qc-pop .composer .chat-model { order: 9; flex: 0 1 auto; max-width: 100%; height: auto; min-height: var(--ctl-h-sm); text-align: left; }
html.c-shell #qc-pop .composer .chat-model span { white-space: normal; overflow-wrap: anywhere; }
/* la chat vuota: il marchio, la domanda e gli spunti come righe della pagina (niente schede grigie) */
html.c-shell #qc-pop .empty-chat { margin: auto 0; justify-items: start; text-align: left; max-width: none; padding: 1rem 0; gap: .714rem; }
html.c-shell #qc-pop .empty-chat .gx-chat-mark { width: var(--ic-2xl); height: var(--ic-2xl); }
html.c-shell #qc-pop .empty-chat h3 { font: 500 var(--fs-3xl)/1.2 var(--font-display); letter-spacing: -.015em; }
html.c-shell #qc-pop .empty-chat .hint { font-size: var(--fs-md); }
html.c-shell #qc-pop .suggestions { display: block; margin-top: .571rem; border-top: 1px solid var(--line); }
html.c-shell #qc-pop .suggestions button { display: flex; width: 100%; min-height: var(--row-h-sm); padding: .714rem 0; gap: .857rem; justify-content: space-between;
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; color: var(--ink); font: 500 var(--fs-md)/1.35 var(--font);
  text-align: left; }
html.c-shell #qc-pop .suggestions button::after { content: "→"; flex: none; color: var(--muted); font: 500 var(--fs-md)/1 var(--font); }
html.c-shell #qc-pop .suggestions button:hover { background: none; color: var(--c-accent-text); }
html.c-shell #qc-pop .suggestions button:hover::after { color: var(--c-accent-text); }
/* le conversazioni: un pannello che entra da sinistra dentro la chat, sopra un velo */
html.c-shell #qc-pop .hist-panel { position: absolute; z-index: 3; top: 0; bottom: 0; left: 0; width: min(21rem, 88%); padding: 0; transform: translateX(-102%);
  visibility: hidden; transition: transform .24s cubic-bezier(.2, .8, .2, 1), visibility 0s .24s; background: var(--surface); border-right: 1px solid var(--line);
  box-shadow: 1.286rem 0 2.857rem -1.286rem rgba(0, 0, 0, .35); }
html.c-shell body.hist-open #qc-pop .hist-panel { transform: none; visibility: visible; transition: transform .24s cubic-bezier(.2, .8, .2, 1); }
html.c-shell #qc-pop #tab-chat::after { content: ""; position: absolute; inset: 0; z-index: 2; background: var(--c-veil); opacity: 0; pointer-events: none; transition: opacity .2s; }
html.c-shell body.hist-open #qc-pop #tab-chat::after { opacity: 1; pointer-events: auto; }
html.c-shell #qc-pop .hist-head { padding: calc(var(--qc-safe, 0px) + .571rem) .571rem .857rem var(--pad-x); gap: .714rem; }
html.c-shell #qc-pop .hist-head .cp-title { min-height: var(--ctl-h); }
html.c-shell #qc-pop .hist-head h3 { font: 500 var(--fs-xl)/1.25 var(--font-display); letter-spacing: -.01em; }
html.c-shell #qc-pop #hist-close { display: inline-grid; place-items: center; width: var(--ctl-h); height: var(--ctl-h); min-height: 0; padding: 0; }
html.c-shell #qc-pop .hist-list { padding: 0 .571rem; }
@media (prefers-reduced-motion: no-preference) {
  html.c-shell #qc-pop:not(.hidden) { animation: c-chat-in .26s cubic-bezier(.2, .8, .2, 1) both; }
}
html.c-shell #qc-grip { display: none; }
@media (max-width: 860px) {
  html.c-shell #qc-pop .chat-head #chat-move { display: none !important; }    /* sul telefono la chat è sempre il foglio intero */
  /* telefono: il foglio intero, alto quanto lo schermo sopra la tastiera; la testata sotto la barra di sistema */
  html.c-shell #qc-pop { top: var(--qc-vt, 0px); left: 0; right: 0; bottom: auto; width: auto !important; height: min(100dvh, var(--qc-vh, 100dvh)) !important; --qc-safe: env(safe-area-inset-top, 0px); }
  html.c-shell #qc-pop .chat-head { padding-top: calc(env(safe-area-inset-top, 0px) + .571rem); min-height: calc(env(safe-area-inset-top, 0px) + var(--head-h)); }
  html.c-shell body.qc-on::after { display: none; }
  html.c-shell body.qc-on:not(.vx-on) :is(.c-bar, .c-bar-bg, .c-pillslot) { visibility: hidden; }   /* a voce aperta la barra porta «Muto» e «Fine» */
  /* una finestra che si apre (popup della pagina) sta sopra tutto: la barra con la G si fa da parte finché è aperta */
  html.c-shell body:has(.sheet:not(.hidden)):not(.vx-on) :is(.c-bar, .c-bar-bg, .c-hint) { visibility: hidden; }
  html.c-shell #qc-pop .composer { margin-bottom: calc(.571rem + env(safe-area-inset-bottom, 0px)); }
  @keyframes c-chat-in { from { transform: translateY(100%); } to { transform: none; } }
}
@media (min-width: 861px) {
  /* computer: il pannello a destra; la pagina si stringe e gli fa posto (niente resta coperto) */
  html.c-shell { --c-chat-w: clamp(24rem, 32vw, 34rem); }
  html.c-shell #qc-pop { top: 0; right: 0; bottom: 0; left: auto; width: var(--c-chat-w) !important; height: auto !important; border-left: 1px solid var(--line); }
  html.c-shell body.qc-on .app { padding-right: var(--c-chat-w); }
  html.c-shell body.qc-on .c-undo, html.c-shell body.qc-on .toast { right: calc(var(--c-chat-w) + 1.714rem); }
  @keyframes c-chat-in { from { opacity: 0; transform: translateX(1.714rem); } to { opacity: 1; transform: none; } }
  /* sotto (Tu › Aspetto › «La chat sul computer», o il pulsante nella sua testata): la chat prende il fondo della finestra
     accanto alla barra di icone (che resta intera); Oggi e i pannelli si accorciano e le fanno posto */
  html.c-shell { --c-chat-h: clamp(16rem, 40vh, 28rem); }
  html.c-shell.qc-bottom #qc-pop { top: auto; left: var(--c-rail); width: auto !important; height: var(--c-chat-h) !important; border-left: 0;
    border-top: 1px solid var(--line); }
  html.c-shell.qc-bottom body.qc-on .app { padding-right: 0; }
  html.c-shell.qc-bottom body.qc-on :is(.c-home, main, .c-sheet) { max-height: calc(100% - var(--c-chat-h)); }
  html.c-shell.qc-bottom body.qc-on .c-undo, html.c-shell.qc-bottom body.qc-on .toast { right: 1.714rem; bottom: calc(var(--c-chat-h) + 1.714rem); }
  html.c-shell.qc-bottom #qc-pop:not(.hidden) { animation-name: c-chat-up; }
  @keyframes c-chat-up { from { opacity: 0; transform: translateY(1.714rem); } to { opacity: 1; transform: none; } }
  /* la maniglia: il bordo della chat verso la pagina (a lato quello sinistro, sotto quello in alto); come quella della barra
     laterale: invisibile finché non ci passi sopra, poi una riga del colore del tema */
  html.c-shell #qc-grip { display: block; position: absolute; z-index: 4; top: 0; bottom: 0; left: 0; width: 7px; cursor: col-resize; touch-action: none; }
  html.c-shell.qc-bottom #qc-grip { right: 0; bottom: auto; width: auto; height: 7px; cursor: row-resize; }
  html.c-shell #qc-grip::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: transparent; transition: background .15s; }
  html.c-shell.qc-bottom #qc-grip::after { right: 0; bottom: auto; width: auto; height: 2px; }
  html.c-shell #qc-grip:hover::after, html.c-shell #qc-grip:focus-visible::after, html.c-shell body.qc-resizing #qc-grip::after {
    background: color-mix(in srgb, var(--accent) 55%, transparent); }
  html.c-shell #qc-grip:focus-visible { outline: none; }
  html.c-shell body.qc-resizing, html.c-shell body.qc-resizing * { cursor: col-resize !important; user-select: none !important; }
  html.c-shell.qc-bottom body.qc-resizing, html.c-shell.qc-bottom body.qc-resizing * { cursor: row-resize !important; }
  html.c-shell body.qc-resizing :is(.app, #qc-pop) { transition: none !important; animation: none !important; }
}
@media (min-width: 861px) and (prefers-color-scheme: dark) {
  html.c-shell:not([data-theme="light"]) #qc-pop { border-left-color: var(--line-strong); }
  html.c-shell:not([data-theme="light"]) .c-ri:is([data-c-area], [data-c-home], [data-c-talk]) svg { color: var(--c-candy-ink); }
  html.c-shell:not([data-theme="light"]) .c-shead-row .c-sico[data-c-tone] { color: var(--c-candy-ink); box-shadow: none; }
}

@keyframes c-panel-in { from { opacity: 0; transform: translateX(1.714rem); } to { opacity: 1; transform: none; } }

/* «Del momento nel tuo settore» (oggi.js, trendHTML): sul telefono sotto tutto il resto; sul computer largo una colonna a
   destra di Oggi, che resta com'è (le sue due colonne ora guardano la loro larghezza, .c-omain) */
.c-omain { container-type: inline-size; min-width: 0; }
.c-trend .c-ttags { margin: 0 0 .857rem; color: var(--muted); font: 500 var(--fs-sm)/1.4 var(--font); overflow-wrap: anywhere; }
.c-tgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: row dense; gap: .857rem .571rem; }
/* una notizia: tutta la riga, fra due righe sottili (niente riquadro), con la foto dell'articolo se c'è; si legge nel
   popup (oggi.js, openNews) */
.c-tnews { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .714rem; align-items: start;
  width: 100%; height: auto; min-height: 0; margin: 0; padding: .714rem 0; border: 0; border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; font: inherit; text-align: left;
  color: var(--ink); text-decoration: none; cursor: pointer; }
.c-tnews:hover { background: none; box-shadow: none; border-color: var(--line); }
.c-tnews.has-ph { align-items: center; }
.c-tnews + .c-tnews { border-top: 0; }
.c-tn-ph { position: relative; display: block; width: 5.143rem; aspect-ratio: 1; }
.c-tn-ph img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius);
  background: var(--c-skel, var(--surface-2)); transition: opacity .15s; }
.c-tnews:hover .c-tn-ph img { opacity: .9; }
.c-tn-play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; pointer-events: none; }
.c-tn-play svg { width: 1.857rem; height: 1.857rem; padding: .429rem; border-radius: 50%; background: rgba(0, 0, 0, .55); fill: currentColor; stroke: none; }
@media (hover: hover) { .c-tnews:hover .c-tn-h { color: var(--c-accent-text, var(--accent)); } }   /* sul telefono il tocco non lascia il colore */
.c-tnews:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius); }
.c-tn-ic { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--accent-soft); color: var(--c-accent-text, var(--accent)); }
.c-tn-ic svg { width: var(--ic-sm); height: var(--ic-sm); }
.c-tn-t { display: grid; gap: .214rem; min-width: 0; }
.c-tn-h { font: 600 var(--fs-base)/1.35 var(--font); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  overflow-wrap: anywhere; transition: color .15s; }
.c-tn-t small { color: var(--muted); font-size: var(--fs-xs); overflow-wrap: anywhere; }
/* di chi parla la notizia, fra quelli che Graphorum conosce: il collegamento, in accento (niente etichette a riquadro) */
.c-tn-t small.c-tn-ab { color: var(--accent); font-weight: 600; }
.c-ttile { display: grid; gap: .357rem; min-height: 0; margin: 0; padding: 0; border: 0; background: none; box-shadow: none;
  text-align: left; color: var(--ink-2); cursor: pointer; }
.c-ttile:hover { background: none; box-shadow: none; }
.c-ttile img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); background: var(--c-skel, var(--surface-2));
  transition: opacity .15s; }
.c-ttile:hover img { opacity: .9; }
.c-ttile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius); }
.c-ttile { position: relative; }
/* le notizie (oggi.js, trendHTML; notizie.py): la prima in evidenza con la foto grande, le altre in fila fra righe
   sottili (niente riquadri); in arrivo, le stesse forme vuote che brillano */
.c-nlist { display: grid; }
.c-tfeat { display: grid; gap: .571rem; width: 100%; height: auto; min-height: 0; margin: 0; padding: 0 0 .857rem; border: 0;
  border-radius: 0; background: none; box-shadow: none; font: inherit; text-align: left; color: var(--ink); cursor: pointer; }
.c-tfeat:hover { background: none; box-shadow: none; }
.c-tf-ph { display: block; width: 100%; aspect-ratio: 16 / 9; }
.c-tf-ph img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius);
  background: var(--c-skel, var(--surface-2)); transition: opacity .15s; }
.c-tfeat:hover .c-tf-ph img { opacity: .92; }
.c-tfeat .c-tn-h { font: 600 var(--fs-lg)/1.3 var(--font); }
@media (hover: hover) { .c-tfeat:hover .c-tn-h { color: var(--c-accent-text, var(--accent)); } }
.c-tfeat:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius); }
.c-tfeat + .c-tnews { border-top: 1px solid var(--line); }
.c-tsk { cursor: default; pointer-events: none; }
.c-tsk .c-tn-t { gap: .5rem; align-content: center; }
.c-tn-ph.c-sk, .c-tf-ph.c-sk { height: auto; border-radius: var(--radius); }
/* senza foto: il simbolo nello stesso quadrato delle foto, così i titoli restano in colonna */
.c-nlist .c-tnews .c-tn-ic { width: 5.143rem; height: auto; aspect-ratio: 1; border-radius: var(--radius); align-self: start; }
.c-nlist .c-tnews .c-tn-ic svg { width: var(--ic-lg); height: var(--ic-lg); }
.c-nlist .c-tnews { align-items: center; }
/* un carosello: il simbolo in alto a destra, come su Instagram */
.c-tcar { position: absolute; top: .429rem; right: .429rem; display: grid; color: #fff; pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .65)); }
.c-tcar svg { width: 1.143rem; height: 1.143rem; }
/* aperto: il visualizzatore dei caroselli dei post (style.css, .sp-view-media), grande quanto una foto sola (quadrata sul
   computer, fino al 4:5 sul telefono): cambiando foto le frecce restano ferme, sopra la foto; senza riquadro dietro */
.lightbox .sp-view-media.c-tv { --tv: min(calc(100dvh - 15rem), 44rem); flex: none; width: min(100%, var(--tv)); height: var(--tv);
  background: transparent; overflow: visible; }
@media (max-width: 860px) {
  .lightbox .sp-view-media.c-tv { width: 100%; height: min(calc(100dvh - 17rem), calc((100vw - 1rem) * 1.25)); }
}
.c-tm { display: flex; flex-wrap: wrap; align-items: center; gap: .143rem .714rem; margin: 0; font: 500 var(--fs-xs)/1.3 var(--font);
  color: var(--muted); font-variant-numeric: tabular-nums; }
.c-tm > span { display: inline-flex; align-items: center; gap: .286rem; }
.c-tm svg { width: var(--ic-xs, .857rem); height: var(--ic-xs, .857rem); }
.lightbox .c-tm { justify-content: center; }
.c-tat { margin: .857rem 0 0; color: var(--muted); font-size: var(--fs-xs); }
/* la colonna delle notizie (oggi.js, newsBoard): la notizia del giorno scelta da Graphorum, le linguette degli argomenti
   (sottolineate, niente riquadri), un blocco per argomento con il suo punto di colore: mosaico di due foto, poi la fila */
.c-trend { container: c-news / inline-size; }
.c-nx-top { display: grid; gap: .714rem; width: 100%; height: auto; min-height: 0; margin: 0; padding: 0 0 1.143rem; border: 0;
  border-bottom: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; font: inherit; text-align: left;
  color: var(--ink); cursor: pointer; }
.c-nx-top:hover { background: none; box-shadow: none; }
.c-nx-top:focus-visible, .c-nx-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius); }
.c-nx-tp { display: block; width: 100%; aspect-ratio: 16 / 9; }
.c-nx-tp img, .c-nx-tph img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius);
  background: var(--c-skel, var(--surface-2)); transition: opacity .15s; }
.c-nx-top:hover .c-nx-tp img, .c-nx-tile:hover .c-nx-tph img { opacity: .92; }
.c-nx-tt { display: grid; gap: .5rem; min-width: 0; }
.c-nx-k { display: flex; flex-wrap: wrap; align-items: center; gap: .357rem; color: var(--c-accent-text, var(--accent));
  font: 700 var(--fs-xs)/1.2 var(--font); letter-spacing: .05em; text-transform: uppercase; }
.c-nx-k svg { width: var(--ic-sm); height: var(--ic-sm); }
.c-nx-k span { color: var(--muted); font-weight: 600; }
.c-nx-k span::before { content: "·"; margin-right: .357rem; }
.c-nx-h { font: 700 var(--fs-xl)/1.25 var(--font-display, var(--font)); letter-spacing: -.01em; overflow-wrap: anywhere;
  transition: color .15s; }
@media (hover: hover) { .c-nx-top:hover .c-nx-h, .c-nx-tile:hover .c-nx-th { color: var(--c-accent-text, var(--accent)); } }
.c-nx-why { padding-left: .714rem; border-left: 2px solid var(--accent); color: var(--ink-2); font: 500 var(--fs-sm)/1.45 var(--font); }
.c-nx-top small, .c-nx-tile small { color: var(--muted); font-size: var(--fs-xs); overflow-wrap: anywhere; }
.c-nx-tabs { display: flex; gap: 1.143rem; margin: .571rem 0 0; overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--line); -webkit-overflow-scrolling: touch; }
.c-nx-tabs::-webkit-scrollbar { display: none; }
.c-nx-tab { flex: none; height: auto; min-height: 2.571rem; margin: 0 0 -1px; padding: .571rem 0; border: 0; border-bottom: 2px solid transparent;
  border-radius: 0; background: none; box-shadow: none; color: var(--muted); font: 600 var(--fs-sm)/1 var(--font); cursor: pointer;
  white-space: nowrap; }
.c-nx-tab:hover { background: none; color: var(--ink); }
.c-nx-tab.on { color: var(--ink); border-bottom-color: var(--accent); }
.c-nx-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.c-nx-sec { --nx: var(--accent); padding: 1.143rem 0 .286rem; container: c-nxsec / inline-size; }
.c-nx-sec + .c-nx-sec { border-top: 1px solid var(--line); }
.c-nx-sh { display: flex; align-items: center; gap: .5rem; margin: 0 0 .714rem; color: var(--ink);
  font: 700 var(--fs-xs)/1.2 var(--font); letter-spacing: .06em; text-transform: uppercase; }
.c-nx-sh small { margin-left: auto; color: var(--muted); font-weight: 600; letter-spacing: 0; }
.c-nx-dot { flex: none; width: .571rem; height: .571rem; border-radius: 50%; background: var(--nx); }
.c-nx-sec[data-topic="perte"] { --nx: var(--accent); }
.c-nx-sec[data-topic="ai"] { --nx: #7c5cff; }
.c-nx-sec[data-topic="tech"] { --nx: #38bdf8; }
.c-nx-sec[data-topic="software"] { --nx: #4f5bd5; }
.c-nx-sec[data-topic="sicurezza"] { --nx: #f5b941; }
.c-nx-sec[data-topic="business"], .c-nx-sec[data-topic="economia"] { --nx: #12a56a; }
.c-nx-sec[data-topic="marketing"] { --nx: #d6336c; }
.c-nx-sec[data-topic="gadget"] { --nx: #64748b; }
.c-nx-sec[data-topic="leggi"] { --nx: #2f6bff; }
.c-nx-sec[data-topic="fisco"] { --nx: #c98a0c; }
.c-nx-sec[data-topic="politica"] { --nx: #0f9f8c; }
.c-nx-sec[data-topic="lavoro"] { --nx: #0b8fd6; }
.c-nx-sec[data-topic="energia"] { --nx: #3ddc97; }
.c-nx-sec[data-topic="trasporti"] { --nx: #2f9bff; }
.c-nx-sec[data-topic="salute"] { --nx: #0891b2; }
.c-nx-mo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem .857rem; margin: 0 0 .429rem; }
.c-nx-tile { display: grid; align-content: start; gap: .429rem; width: 100%; height: auto; min-height: 0; margin: 0; padding: 0; border: 0;
  border-radius: 0; background: none; box-shadow: none; font: inherit; text-align: left; color: var(--ink); cursor: pointer; }
.c-nx-tile:hover { background: none; box-shadow: none; }
.c-nx-tph { display: block; width: 100%; aspect-ratio: 4 / 3; }
.c-nx-th { font: 600 var(--fs-sm)/1.3 var(--font); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere; transition: color .15s; }
.c-nx-tile .c-tn-ab { color: var(--accent); font-weight: 600; }
.c-nx-fe { margin: 0 0 .286rem; }
.c-nx-fe .c-nx-tph { aspect-ratio: 16 / 9; }
.c-nx-ft { display: grid; gap: .357rem; min-width: 0; }
.c-nx-fe .c-nx-th { font-size: var(--fs-base); -webkit-line-clamp: 3; }
.c-nx-sec .c-tnews { padding: .571rem 0; }
.c-nx-sec .c-nlist .c-tnews:first-child { border-top: 0; }
.c-nx-sec .c-nlist .c-tnews:last-child { border-bottom: 0; }
.c-nx-sec .c-nlist .c-tnews .c-tn-ph, .c-nx-sec .c-nlist .c-tnews .c-tn-ic { width: 4rem; }
.c-nx-sec .c-tn-h { font-size: var(--fs-sm); }
.c-nx-more { display: inline-flex; align-items: center; gap: .286rem; margin: .286rem 0 0; }
.c-nx-more svg { width: var(--ic-sm); height: var(--ic-sm); }
/* la colonna larga (tablet, telefono in orizzontale): la notizia del giorno con la foto a sinistra; dentro un blocco largo,
   le file su due colonne (il blocco guarda la sua larghezza: nella fascia del computer i blocchi sono stretti) */
@container c-news (min-width: 34rem) {
  .c-nx-top:not(.no-ph) { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 1.429rem; align-items: center; }
  .c-nx-h { font-size: var(--fs-2xl); }
}
@container c-nxsec (min-width: 34rem) {
  .c-nx-sec .c-nlist { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.714rem; }
  .c-nx-sec .c-nlist .c-tnews { grid-column: auto; }
  .c-nx-sec .c-nlist .c-tnews { border-top: 0; border-bottom: 1px solid var(--line); }
  .c-nx-sec .c-nlist .c-tnews:nth-last-child(-n + 2):nth-child(odd), .c-nx-sec .c-nlist .c-tnews:last-child { border-bottom: 0; }
  .c-nx-mo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.143rem 1.714rem; }
  .c-nx-mo .c-nx-tph { aspect-ratio: 16 / 9; }
  .c-nx-fe { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 1.714rem; align-items: center; }
  .c-nx-fe .c-nx-th { font-size: var(--fs-lg); }
}
@media (prefers-reduced-motion: reduce) { .c-nx-tp img, .c-nx-tph img, .c-nx-h, .c-nx-th { transition: none; } }
.c-trend-act { display: inline-flex; align-items: center; gap: .429rem; }
.c-trend-re svg { width: var(--ic-sm); height: var(--ic-sm); }
.c-trend-re.on svg { animation: c-spin 1s linear infinite; }               /* sta rileggendo */
.c-trend-re:disabled { opacity: 1; cursor: progress; }
.c-trend .c-btn { margin-top: .857rem; }
/* sul computer largo le notizie sono una fascia sotto la home, come la prima pagina di un giornale (il capo, 26/10: «le
   notizie non restano orfane, niente scroll infinito»): la notizia del giorno con le ultime arrivate accanto, poi i
   blocchi degli argomenti su colonne divise da una riga sottile (oggi.js, newsBoard: pochi blocchi, corti) */
@container c-home (min-width: 82rem) {      /* 1150 px alla misura «Normale» */
  html.c-shell .c-oggi:has(> .c-owrap > .c-trend) { max-width: 90rem; }
  .c-owrap > .c-trend { margin-top: 1.143rem; padding-top: 1.714rem; border-top: 1px solid var(--line); }
  .c-owrap > .c-trend > .c-sec-h h2 { font-size: var(--fs-2xl); }
  .c-nx-lead { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); column-gap: 2.857rem; align-items: start;
    padding-bottom: 1.143rem; border-bottom: 1px solid var(--line); }
  .c-nx-lead > .c-nx-top { padding-bottom: 0; border-bottom: 0; }
  .c-nx-latest { min-width: 0; padding-left: 1.429rem; margin-left: -1.429rem; border-left: 1px solid var(--line); }
  .c-nx-latest .c-nx-sh .c-nx-dot { background: var(--accent); }
  .c-nx-latest .c-nlist .c-tnews:first-child { border-top: 0; }
  .c-nx-latest .c-nlist .c-tnews:last-child { border-bottom: 0; }
  .c-nx-latest .c-tnews .c-tn-ph, .c-nx-latest .c-tnews .c-tn-ic { width: 4rem; }
  .c-nx-latest .c-tn-h { font-size: var(--fs-sm); }
  .c-nx-tabs { margin-top: 1.143rem; }
  .c-nx-secs { columns: 3 17rem; column-gap: 2.857rem; column-rule: 1px solid var(--line); padding-top: .286rem; }
  .c-nx-secs > .c-nx-sec { break-inside: avoid; padding-bottom: 1.143rem; }
  .c-nx-secs > .c-nx-sec + .c-nx-sec { border-top: 0; }
  .c-nx-rest { display: flex; flex-wrap: wrap; align-items: baseline; gap: .286rem 1rem; margin: .571rem 0 0; color: var(--muted);
    font-size: var(--fs-sm); }
  .c-nx-rest .c-link { height: auto; min-height: 0; padding: 0; font-size: var(--fs-sm); }
}

/* Oggi largo: due colonne quando c'è spazio (computer senza pannelli, tablet) */
@container (min-width: 54.29rem) {          /* 760 px alla misura «Normale»: in rem, così vale a ogni misura del testo */
  .c-ogrid { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); column-gap: 4rem; align-items: start; }
  .c-colb { position: sticky; top: 5.143rem; }
  .c-colb > .c-sec:first-child { border-top: 0; padding-top: .429rem; }
  .c-hero { grid-template-columns: minmax(0, 1fr) 30rem; }
  .c-brief { padding-top: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .c-sk { animation: none; }
  .c-undo-line { animation: none; }
  html.c-shell main, .c-sheet, .c-veil, .c-face, .c-g, .c-hint { transition-duration: 1ms !important; }
}

/* ------------------------------------------------------------------ «Pulsanti della barra» (Tu): anteprima e scelte */
.c-bp { display: grid; place-items: center; padding: 1.714rem 0 .857rem; }
.c-bp-perl { position: relative; max-width: 100%; }
.c-bp .c-bp-perl > svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible;
  filter: drop-shadow(0 .214rem .571rem rgba(36, 44, 96, .18)); }
.c-bp-perl > svg path { fill: color-mix(in srgb, var(--accent) 4%, var(--surface-2)); stroke: var(--line); stroke-width: 1; }
.c-bp-b { position: absolute; top: 0; display: grid; place-items: center; border-radius: 50%; color: var(--ink-2); }
.c-bp-b svg { position: relative; width: var(--ic-sm); height: var(--ic-sm); }
.c-bp-b.on { color: var(--accent); }
.c-bp-b.on::before { content: ""; position: absolute; inset: 11%; border-radius: 50%; background: var(--surface);
  box-shadow: 0 .143rem .429rem -.071rem rgba(36, 44, 96, .24); }
:root[data-theme="dark"] .c-bp-b.on { color: #fff; }
:root[data-theme="dark"] .c-bp-b.on::before { background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .c-bp-b.on { color: #fff; }
  :root:not([data-theme="light"]) .c-bp-b.on::before { background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
}
.c-bp-b.g svg { width: var(--ic-md); height: var(--ic-md); fill: var(--accent); stroke: none; }
.c-bp-b.me .c-me, :root[data-theme="dark"] .c-bp-b.me .c-me { width: 1.429rem; height: 1.429rem; background: none; box-shadow: none; overflow: visible; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .c-bp-b.me .c-me { background: none; box-shadow: none; } }
.c-bp-note { margin: 0 0 .286rem; text-align: center; }
.c-chips { display: flex; flex-wrap: wrap; gap: .429rem; margin-top: .429rem; }
.c-chip { display: inline-flex; align-items: center; gap: .429rem; height: var(--c-ctl-sm); min-height: 0; padding: 0 .786rem; border-radius: var(--radius);
  border: 1px solid var(--line-strong); background: transparent; color: var(--ink-2); font: 500 var(--fs-base)/1 var(--font); cursor: pointer; box-shadow: none; }
.c-chip svg { width: var(--ic-sm); height: var(--ic-sm); }
.c-chip:hover { background: transparent; color: var(--ink); border-color: var(--c-faint); }
.c-chip.on { color: var(--c-accent-text); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.c-chip:disabled { opacity: .4; cursor: default; }