/*
 * Il sistema STBLE dentro Sesamoh (02-11-2026).
 *
 * Il design system di STBLE nasce con Tracka, l'app di punta: monocromo, un
 * solo accento acceso usato come RIEMPIMENTO, blocchi grandi e tondi, numeri e
 * titoli in Anton, tutto il resto in Inter 400/700. Le superfici si staccano
 * col colore e non con le linee: niente contorni, ombre solo per ciò che
 * galleggia. Tracka è un'app da telefono; Sesamoh è una dashboard, e qui il
 * sistema si allarga con le sue stesse aggiunte desktop (barra laterale,
 * finestre centrate, tabelle, hover, anello di focus).
 *
 * Questo file viene DOPO styles.css e fa tre cose:
 *   1. i token STBLE (chiaro e scuro, più le cinque famiglie d'accento);
 *   2. i vecchi nomi di Sesamoh (--canvas, --paper, --azione…) puntati sui
 *      token, così le 2.400 righe di styles.css si ricolorano da sole;
 *   3. la forma dei componenti: card, tasti, campi, menu, tabelle, il segno
 *      di STBLE AI e i segnaposto delle icone 3D.
 *
 * L'accento di base è il giallo acido di Tracka. Come in Tracka chi usa la
 * dashboard può sceglierne un altro fra i cinque del sistema (Impostazioni →
 * Aspetto): tema.js mette `data-accento` sulla radice prima che la pagina si
 * dipinga, e cambia solo la famiglia dell'accento: superfici, testo e rossi
 * restano.
 *
 * Il tema lo decide tema.js (data-tema="chiaro" | "scuro"), non il sistema.
 */

/* ══ 1. Token ══════════════════════════════════════════════════════════ */

:root {
  /* Fondo e superfici: la pagina è grigia, le card salgono al bianco. */
  --bg: #ececec;
  --bg-2: #f6f6f6;
  --surface: #ffffff;
  --surface-2: #d6d6d6;
  --sheet: #ececec;
  --border: #c4c4c4;
  --divider: rgba(0, 0, 0, .10);

  /* Testo. text-muted solo su surface o da 15px in su. */
  --text: #000000;
  --text-2: #565656;
  --text-muted: #666666; /* era #6e6e6e: 4,3:1 sul fondo grigio, ora 4,8:1 (03-11-2026) */

  /* Invertito: la coppia gira sempre intera. */
  --inverted: #000000;
  --on-inverted: #ffffff;
  --on-inverted-muted: rgba(255, 255, 255, .72);
  --surface-on-inverted: rgba(255, 255, 255, .2);

  /* Accento: solo riempimento, con glifi neri sopra. */
  --on-accent: #000000;
  --on-accent-muted: rgba(0, 0, 0, .68);
  --surface-on-accent: rgba(0, 0, 0, .12);

  --command-bar: #ffffff;
  --tab-bg: #000000;
  --tab-glyph: rgba(255, 255, 255, .72);
  --tab-circle: rgba(255, 255, 255, .13);
  --tab-label: rgba(255, 255, 255, .62);
  --button-on-sheet: #d6d6d6;
  --on-button-on-sheet: #000000;

  /* Semantici: uno stato porta sempre anche una parola o un'icona. */
  --success: #1e874b;
  --progress: #0b7a74;
  --warning: #c8901c;
  /* Aggiunta di Sesamoh: il warning come INCHIOSTRO. #c8901c sul bianco è
     2,9:1 e la dashboard scrive in arancio orari e scadenze; questo è lo
     stesso tono scurito a 5,0:1. */
  --warning-ink: #8f6410;
  --danger: #ff5656;
  --danger-ink: #d71921;
  --danger-ink-inverted: #ff5656;
  --on-danger: #000000;
  --info: #2563eb;
  --premium: #c8901c;

  /* STBLE AI: il rosso con gli occhi, fuori dal tema e dall'accento. */
  --ai: #da3832;
  --ai-violet: #8a4dff;
  --ai-pink: #ff5fd2;
  --ai-cyan: #2fc6ff;

  --overlay: rgba(0, 0, 0, .35);
  --overlay-image: rgba(0, 0, 0, .55);
  --on-image: #ffffff;

  /* Tipografia: Anton per titoli di pagina e numeri, Inter per il resto. */
  --font-display: Anton, Impact, "Arial Narrow", sans-serif;
  --font-body: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Spazio */
  --space-xxs: 2px;
  --space-xs: 4px;
  --space-sm: 10px;
  --space-md: 16px;
  --space-lg: 18px;
  --space-xl: 22px;
  --space-xxl: 34px;
  --space-xxxl: 48px;
  --card-padding: 20px;
  --block-gap: 24px;
  --section-gap: 12px;
  --row-min: 52px;
  --touch-min: 44px;
  --tabbar-clearance: 124px;
  --page-margin-tablet: 32px;
  --page-margin-desktop: 40px;
  --content-max: 1200px;
  --reading-max: 680px;
  --sidebar-width: 248px;
  --dialog-max: 560px;

  /* Raggi: capsule per ciò che sta su una riga, 30 per i blocchi. */
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 30px;
  --radius-xl: 38px;
  --radius-full: 9999px;

  /* Ombre: solo per ciò che galleggia. */
  --shadow-float: 0 6px 14px rgba(0, 0, 0, .35);
  --shadow-tabbar: 0 6px 16px rgba(0, 0, 0, .18);
  --shadow-banner: 0 4px 12px rgba(0, 0, 0, .25);
  --shadow-tile: 0 2px 6px rgba(0, 0, 0, .12);
  --shadow-lifted: 0 10px 22px rgba(0, 0, 0, .3);

  /* Movimento */
  --duration-fast: 150ms;
  --duration-base: 220ms;
  --duration-slow: 320ms;
  --duration-sheet: 360ms;
  --duration-breath: 2800ms;
  --ease-out: cubic-bezier(0, 0, .58, 1);
  --ease-in-out: cubic-bezier(.42, 0, .58, 1);
  --ease-sheet: cubic-bezier(.33, 1, .68, 1);
  --ease-spring: cubic-bezier(.3, 1.6, .55, 1);
  --ease-press: cubic-bezier(.2, .9, .3, 1.25);
}

:root[data-tema="scuro"] {
  color-scheme: dark;
  --bg: #000000;
  --bg-2: #0e0e0e;
  --surface: #181818;
  --surface-2: #2c2c2c;
  --sheet: #242424;
  --border: #383838;
  --divider: rgba(255, 255, 255, .12);
  --text: #ffffff;
  --text-2: #b5b5b5;
  --text-muted: #8f8f8f;
  --inverted: #ffffff;
  --on-inverted: #000000;
  --on-inverted-muted: rgba(0, 0, 0, .6);
  --surface-on-inverted: rgba(0, 0, 0, .12);
  --command-bar: #242424;
  --tab-bg: #242424;
  --tab-circle: rgba(255, 255, 255, .08);
  --tab-label: rgba(255, 255, 255, .72);
  --button-on-sheet: #8f8f8f;
  --success: #34c77b;
  --progress: #1db3a2;
  --warning: #e0b341;
  --warning-ink: #e0b341;
  --danger-ink: #ff5656;
  --danger-ink-inverted: #d71921;
  --info: #4d8af0;
  --premium: #e0b341;
  --overlay-image: rgba(0, 0, 0, .7);
  --shadow-tabbar: 0 6px 16px rgba(0, 0, 0, .35);
}

/* Le cinque famiglie d'accento, tutte chiare e tutte con glifi neri; la prima
   è quella di base. accent-ink è l'accento quando fa da inchiostro: nero sul
   chiaro, l'accento stesso sullo scuro. I cinque campioni restano fissi per
   la scelta in Impostazioni. */
:root {
  --accent-acido: #ebff38; --accent-verde: #2bff88; --accent-azzurro: #18c8ff; --accent-rosa: #ff6fb0; --accent-arancio: #ff8a00;
}
:root, :root[data-accento="acido"] {
  --accent: #ebff38; --accent-soft: #f4ffb0; --accent-shade: #c7d800;
  --accent-ink: #000000; --accent-ink-inverted: #ebff38;
}
:root[data-tema="scuro"], :root[data-tema="scuro"][data-accento="acido"] {
  --accent-soft: #2d3200; --accent-shade: #f4ffb0; --accent-ink: #ebff38; --accent-ink-inverted: #000000;
}
:root[data-accento="azzurro"] { --accent: #18c8ff; --accent-soft: #d2f1ff; --accent-shade: #00a8dc; --accent-ink-inverted: #18c8ff; }
:root[data-tema="scuro"][data-accento="azzurro"] { --accent-soft: #003345; --accent-shade: #d2f1ff; --accent-ink: #18c8ff; }
:root[data-accento="verde"] { --accent: #2bff88; --accent-soft: #cdfdd8; --accent-shade: #00d466; --accent-ink-inverted: #2bff88; }
:root[data-tema="scuro"][data-accento="verde"] { --accent-soft: #05381a; --accent-shade: #cdfdd8; --accent-ink: #2bff88; }
:root[data-accento="rosa"] { --accent: #ff6fb0; --accent-soft: #ffe1ec; --accent-shade: #e8508f; --accent-ink-inverted: #ff6fb0; }
:root[data-tema="scuro"][data-accento="rosa"] { --accent-soft: #491b30; --accent-shade: #ffe1ec; --accent-ink: #ff6fb0; }
:root[data-accento="arancio"] { --accent: #ff8a00; --accent-soft: #ffe5cc; --accent-shade: #db7600; --accent-ink-inverted: #ff8a00; }
:root[data-tema="scuro"][data-accento="arancio"] { --accent-soft: #482200; --accent-shade: #ffe5cc; --accent-ink: #ff8a00; }

/* ══ 2. I nomi di Sesamoh, sui token STBLE ═════════════════════════════
   styles.css parla ancora con i nomi di prima: qui ognuno trova il suo token.
   L'indaco non c'è più. «azione» è l'accento come inchiostro (nero sul chiaro);
   dove serviva come riempimento lo dice la parte 3. */
:root, :root[data-tema="scuro"] {
  --canvas: var(--bg);
  --paper: var(--surface);
  --ink: var(--text);
  --muted: var(--text-2);
  --line: var(--divider);
  --line-forte: var(--border);
  --sidebar: var(--tab-bg);
  --sidebar-muted: var(--tab-label);
  --azione: var(--accent-ink);
  /* Il testo sopra «azione» (03-11-2026): bianco sul nero del chiaro; nero
     dove «azione» diventa l'accento (scuro, barra laterale), se no era bianco
     sul giallo, illeggibile. */
  --on-azione: #ffffff;
  --azione-scura: var(--accent-ink);
  --azione-soft: var(--accent-soft);
  --blue: var(--info);
  --blue-soft: color-mix(in srgb, var(--info) 14%, transparent);
  --green: var(--success);
  --green-soft: color-mix(in srgb, var(--success) 14%, transparent);
  --orange: var(--warning-ink);
  --orange-soft: color-mix(in srgb, var(--warning) 18%, transparent);
  --red: var(--danger-ink);
  --red-soft: color-mix(in srgb, var(--danger) 16%, transparent);
  --purple: var(--text-2);
  --purple-soft: var(--surface-2);
  --purple-dark: var(--text);
  --teal: var(--progress);
  --magia: var(--premium);
  --magia-soft: color-mix(in srgb, var(--premium) 16%, transparent);
  --stble-rosso: #da3832;
  --radius: var(--radius-lg);
  --radius-controllo: var(--radius-sm);
  --pillola: var(--radius-full);
  --shadow: none;
  --shadow-alta: var(--shadow-lifted);
  --anello: 0 0 0 2px var(--surface), 0 0 0 4px var(--text);
}
/* Nello scuro «azione» è l'accento: il testo sopra torna nero. */
:root[data-tema="scuro"] { --on-azione: #000000; }

/* ══ 3. I componenti ═══════════════════════════════════════════════════ */

/* ── Base ── */
body {
  font-family: var(--font-body);
  font-size: 15px; line-height: 1.4;
  font-feature-settings: normal;
  background: var(--bg); color: var(--text);
}
::selection { background: var(--accent); color: var(--on-accent); }
:root[data-tema="scuro"] ::selection { background: var(--accent); color: var(--on-accent); }


/* Il focus da tastiera: anello pieno di 2px nell'inchiostro, staccato di 3. */
:where(a, button, [tabindex], summary, select):focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }

/* I link: inchiostro pieno e grassetto, si sottolineano al passaggio. */
a { color: var(--text); font-weight: 700; }
a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.come-link, .contatti-piede, .accesso .sotto-modulo button { color: var(--text); font-weight: 700; }
.come-link:hover { text-underline-offset: 3px; }

/* Tutto ciò che si preme si stringe a 0,97. */
.bottone, .campanella, .bottone-ia, .tastone-ia, .linguette a, .movimento, .scelta-grande, .chip-ia, .riga-ia,
.sidebar nav a, .sidebar nav .voce-menu, .menu-mobile .voce, .gruppo-menu, .accesso .schede button {
  transition: transform var(--duration-fast) var(--ease-press), background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.bottone:active, .campanella:active, .bottone-ia:active, .tastone-ia:active, .linguette a:active, .movimento:active,
.scelta-grande:active, .chip-ia:active, .sidebar nav a:active, .sidebar nav .voce-menu:active, .menu-mobile .voce:active { transform: scale(.97); }

/* Hover (solo col puntatore): un velo dell'inchiostro all'8% sopra il pieno. */
@media (hover: hover) {
  .bottone:hover, .linguette a:hover, .movimento:hover, .chip-ia:hover, .campanella:hover, .scelta-grande:hover,
  .sidebar nav a:hover, .accesso .schede button:hover, .menu-mobile .voce:hover, .riga-ia:hover {
    box-shadow: inset 0 0 0 999px color-mix(in srgb, currentColor 8%, transparent);
    text-decoration: none;
  }
  tbody tr:hover td { background: color-mix(in srgb, var(--text) 5%, transparent); }
}

/* ── Impianto: la pagina e la sua colonna ── */
#app { grid-template-columns: calc(var(--sidebar-width) + 16px) minmax(0, 1fr); }
main { padding: 26px var(--page-margin-desktop) 64px; max-width: calc(var(--content-max) + 2 * var(--page-margin-desktop)); }

/* ── La barra laterale: la capsula nera di Tracka, alzata in verticale ──
   Dentro, i vecchi nomi diventano quelli di una superficie invertita: il
   bianco è l'inchiostro, i fili e i campi sono veli di bianco. */
.sidebar {
  --ink: #ffffff; --muted: var(--tab-label); --sidebar-muted: var(--tab-label);
  --line: rgba(255, 255, 255, .12); --line-forte: rgba(255, 255, 255, .18);
  --paper: rgba(255, 255, 255, .12); --canvas: rgba(255, 255, 255, .08);
  --azione: var(--accent); --on-azione: #000000; --azione-soft: rgba(255, 255, 255, .12);
  --text: #ffffff; --text-2: var(--tab-label);
  margin: 16px 0 16px 16px; top: 16px; height: calc(100vh - 32px);
  background: var(--tab-bg); color: #fff; border: 0; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-tabbar);
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent;
}
.sidebar .marchio { padding: 18px 20px 14px; }
/* Il link per saltare il menu: invisibile finché non ha il fuoco da tastiera (03-11-2026). */
.salta-al-contenuto:not(:focus-visible) { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.salta-al-contenuto:focus-visible { position: absolute; left: 12px; top: 12px; z-index: 50; padding: 10px 16px; border: 0; border-radius: var(--radius-full); background: var(--accent); color: var(--on-accent); font: inherit; font-weight: 700; }
/* Sul telefono la barra laterale è la fila di icone in fondo: lì il salto non ha senso. */
@media (max-width: 860px) { .salta-al-contenuto { display: none; } }
main:focus { outline: none; }
.sidebar .logo-testo b { color: #fff; }
.sidebar .logo-firma { color: var(--tab-label); }
.sidebar .logo-firma strong { color: #fff; }

/* Il segno di Sesamoh (03-11-2026, app.js `marchio`): la tessera è l'accento
   come riempimento, il seme è pieno e nero come ogni glifo sull'accento, il
   punto è il rosso di STBLE.
   Cambiando accento in Aspetto cambia anche la tessera. */
.segno .tessera { fill: var(--accent, #ebff38); }
.segno .seme { fill: var(--on-accent, #000); transform-box: fill-box; transform-origin: 50% 50%; }
.segno .punto { fill: var(--stble-rosso, #da3832); transform-box: fill-box; transform-origin: 50% 50%; }
/* Apriti sesamo: sotto il puntatore il seme gira come una chiave nella
   serratura e torna, e il punto risponde un attimo dopo. */
.logo:hover .seme { animation: segno-chiave .8s cubic-bezier(.3, 1.35, .5, 1); }
.logo:hover .punto { animation: segno-punto .45s .3s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes segno-chiave { 0% { transform: none } 45% { transform: rotate(-50deg) } 75% { transform: rotate(7deg) } 100% { transform: none } }
@keyframes segno-punto { 0%, 100% { transform: none } 50% { transform: scale(1.4) } }
/* All'avvio il seme cade sulla tessera e si posa inclinato, poi spunta il
   punto: l'unico momento in cui il segno si muove da solo. */
.avvio .seme { animation: segno-cade .7s cubic-bezier(.2, .9, .3, 1.25) both; }
.avvio .punto { animation: segno-spunta .35s .55s cubic-bezier(.3, 1.7, .5, 1) both; }
@keyframes segno-cade { from { transform: translateY(-24px) rotate(-70deg); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes segno-spunta { from { transform: scale(0) } to { transform: none } }
@media (prefers-reduced-motion: reduce) {
  .segno .seme, .segno .punto { animation: none !important; }
}
/* La scelta della struttura (03-11-2026): una capsula come le voci del menu,
   alta uguale, con tutto lo spazio al nome (un glifo davanti lo tagliava).
   La freccia è disegnata (quella del sistema stava schiacciata sul bordo) e il
   fuoco è un colore, non un contorno: Chrome dà a una tendina il fuoco «da
   tastiera» anche quando la si apre col mouse, e il campo teneva un anello
   bianco fisso dopo ogni scelta. Così il fuoco si vede, ma come le superfici di
   STBLE: la capsula si schiarisce. */
.sceltaStruttura { padding: 0 12px 12px; }
.sidebar select, .sceltaStruttura select {
  -webkit-appearance: none; appearance: none; width: 100%; min-height: 48px; border: 0; border-radius: var(--radius-full);
  padding: 0 40px 0 18px; color: #fff; font-size: 15px; font-weight: 700; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: rgba(255, 255, 255, .12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center / 14px 14px;
}
.sidebar select:hover, .sceltaStruttura select:hover { background-color: rgba(255, 255, 255, .18); }
.sidebar select:focus, .sceltaStruttura select:focus { outline: none; background-color: rgba(255, 255, 255, .22); }
.sidebar select option { background: var(--tab-bg); color: #fff; }
.sidebar nav { padding: 4px 12px 12px; }
.sidebar nav a {
  gap: 12px; min-height: 48px; padding: 0 16px; margin: 0 0 4px;
  border-radius: var(--radius-full); color: var(--tab-label);
  font-size: 15px; font-weight: 700; line-height: 1.2;
}
.sidebar nav a .testo { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar nav a .glifo { flex: 0 0 22px; width: 22px; height: 22px; opacity: 1; color: var(--tab-glyph); }
.sidebar nav a .glifo svg { width: 22px; height: 22px; }
.sidebar nav a:hover { background: none; color: #fff; }
.sidebar nav a.attiva { background: var(--accent); color: var(--on-accent); font-weight: 700; }
.sidebar nav a.attiva .glifo { color: var(--on-accent); }
.sidebar nav a .pallino {
  background: var(--danger); color: var(--on-danger); min-width: 20px; height: 20px; padding: 0 6px;
  font-size: 12px; font-weight: 700; line-height: 20px; text-align: center; border-radius: var(--radius-full);
}
/* Le sottosezioni: capsule più basse, allineate all'etichetta; la scelta è un
   velo di bianco, perché l'accento è già della sezione. */
.sidebar nav a.sotto-voce {
  min-height: 40px; margin: 0 0 2px; padding: 0 14px 0 50px; border: 0;
  border-radius: var(--radius-full); font-size: 14px;
}
.sidebar nav a.sotto-voce.attiva { background: rgba(255, 255, 255, .14); color: #fff; }
.gruppo-menu {
  width: 100%; margin: 14px 0 4px; padding: 6px 16px; border-radius: var(--radius-full);
  font-size: 13px; font-weight: 700; letter-spacing: .8px; color: var(--tab-label);
}
.gruppo-menu:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.sidebar nav a.bloccata, .sidebar nav a.bloccata:hover,
:root[data-tema="scuro"] .sidebar nav a.bloccata, :root[data-tema="scuro"] .sidebar nav a.bloccata:hover { background: none; color: rgba(255, 255, 255, .35); }
.sidebar nav a.da-piano { color: rgba(255, 255, 255, .45); }
.sidebar nav a.da-piano:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.sidebar nav a.da-piano.attiva { background: rgba(255, 255, 255, .14); color: #fff; }
.sidebar nav a .solo-vista { border: 0; background: rgba(255, 255, 255, .14); color: #fff; font-size: 12px; font-weight: 700; padding: 1px 8px; }
.sidebar .piede { margin: 0 12px; padding: 14px 8px 18px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 13px; color: var(--tab-label); }
.sidebar .piede > div:not(.scelta-tema) { color: #fff; }
.sidebar .piede .secondario { color: var(--tab-label); }
.sidebar .piede button {
  border: 0; background: rgba(255, 255, 255, .14); color: #fff; min-height: 32px; padding: 0 14px;
  border-radius: var(--radius-full); font-size: 13px; font-weight: 700;
}
.sidebar .piede button:hover { background: rgba(255, 255, 255, .22); color: #fff; }
.sidebar .piede .contatti-piede { display: block; background: none; padding: 0; min-height: 28px; color: var(--tab-label); }
.sidebar .piede .contatti-piede:hover { background: none; color: #fff; text-decoration: underline; }
.sidebar .scelta-tema { border: 0; background: rgba(255, 255, 255, .12); padding: 4px; }
/* Fuori dalla barra (Impostazioni, accesso): il segmentato di Tracka, la scelta è invertita. */
.scheda .scelta-tema, .scheda .scelta-lingua, .accesso .scelta-tema { border: 0; background: var(--bg); padding: 4px; }
.scheda .scelta-tema button, .scheda .scelta-lingua button { min-height: 38px; font-size: 14px; font-weight: 700; color: var(--text-2); }
.scheda .scelta-tema button.attiva, .scheda .scelta-lingua button.attiva { background: var(--inverted); color: var(--on-inverted); box-shadow: none; }

/* La scelta dell'accento: cinque tondi pieni del loro colore, il glifo nero
   sopra quello scelto e l'anello d'inchiostro intorno. */
.scelta-accento { display: flex; flex-wrap: wrap; gap: 12px; }
.scelta-accento button {
  width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; background: var(--campione); color: #000;
  transition: transform var(--duration-fast) var(--ease-press), box-shadow var(--duration-fast) var(--ease-out);
}
.scelta-accento button svg { width: 22px; height: 22px; display: block; }
.scelta-accento button:active { transform: scale(.97); }
.scelta-accento button[aria-checked="true"] { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--text); animation: stble-rimbalzo 360ms var(--ease-spring); }
.scelta-accento-nome { margin-top: 10px; font-size: 13px; color: var(--text-2); }
.sidebar .piede .scelta-tema button { background: none; min-height: 30px; color: var(--tab-label); }
.sidebar .piede .scelta-tema button.attiva { background: #fff; color: #000; box-shadow: none; }
.sidebar .tag { background: rgba(255, 255, 255, .14); color: #fff; }

/* ── Testate ── */
.testata { align-items: center; gap: 16px; margin-bottom: var(--block-gap); }
.testata .con-icona { display: flex; align-items: center; gap: 18px; min-width: 0; }
.testata .titoli { min-width: 0; }
.testata h1 {
  font-family: var(--font-display); font-weight: 400; font-size: 36px; line-height: 1;
  letter-spacing: .2px; text-transform: uppercase;
}
.testata p { color: var(--text-2); font-size: 15px; line-height: 1.35; margin-top: 6px; max-width: var(--reading-max); }
.testata .azioni { gap: 10px; align-items: center; }
/* L'azione principale della pagina sta nella testata, in accento: una per vista. */
/* In Sesamoh l'azione principale è il tasto pieno più a destra della fila:
   quello che non ha altri tasti pieni dopo di sé. */
main > .testata .azioni > .bottone:not(.chiaro):not(.pericolo):not(:has(~ .bottone:not(.chiaro):not(.pericolo))) { background: var(--accent); color: var(--on-accent); }
.indietro .bottone small { color: var(--text-2); font-weight: 400; font-size: 13px; }

/* Le linguette di una sezione: chip bianchi, la scelta è invertita. */
.linguette { gap: 8px; margin: 0 0 var(--block-gap); }
.linguette a {
  display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px; border: 0;
  border-radius: var(--radius-full); background: var(--surface); color: var(--text);
  font-size: 14px; font-weight: 700;
}
.linguette a:hover { color: var(--text); }
.linguette a.attiva, :root[data-tema="scuro"] .linguette a.attiva { background: var(--inverted); color: var(--on-inverted); border: 0; }
.indice-pagina { background: var(--bg); }

/* ── Card ── */
.scheda {
  background: var(--surface); border: 0; border-radius: var(--radius-lg);
  padding: var(--card-padding); margin-bottom: var(--space-lg); box-shadow: none;
}
.scheda > h2, .testa-oggi h2 { font-size: 20px; font-weight: 700; line-height: 1.2; letter-spacing: -.2px; margin-bottom: 6px; }
.scheda > h2 + .sotto, .scheda-bisogno > .sotto { color: var(--text-2); font-size: 13px; margin-bottom: var(--section-gap); }
.griglia { gap: var(--space-lg); }
.riquadro-chiuso .scheda { box-shadow: none; }

/* I numeri: card con l'etichetta maiuscola e il numero in Anton. */
.numero { background: var(--surface); border: 0; border-radius: var(--radius-lg); padding: var(--card-padding); box-shadow: none; }
.numero .etichetta { font-size: 13px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--text-2); }
.numero .valore { font-family: var(--font-display); font-weight: 400; font-size: 34px; letter-spacing: 0; line-height: 1; margin-top: 10px; }
.numero .nota { font-size: 13px; color: var(--text-2); margin-top: 6px; }
.riepilogo-casa .numero .valore { font-size: 27px; letter-spacing: 0; margin-top: 8px; }
.riepilogo-casa .numero .etichetta { font-size: 13px; }
.riepilogo-casa .numero.allarme .valore { color: var(--warning-ink); }
/* Il ritmo del colore: il primo numero di una fila è la card invertita, IL
   numero che conta. Tutto ciò che contiene si ricolora. */
.griglia.quattro > .numero:first-child, .griglia.tre > .numero:first-child {
  background: var(--inverted); color: var(--on-inverted);
  --text: var(--on-inverted); --text-2: var(--on-inverted-muted); --ink: var(--on-inverted); --muted: var(--on-inverted-muted);
}

/* ── Tasti: capsule piene, mai un contorno ── */
.bottone {
  justify-content: center; gap: 8px; min-height: 52px; padding: 8px 22px;
  background: var(--inverted); color: var(--on-inverted); border: 0; border-radius: var(--radius-full);
  font-size: 16px; font-weight: 700; line-height: 1.2; box-shadow: none; text-decoration: none;
}
a.bottone, a.bottone:hover { color: var(--on-inverted); }
.bottone:hover { background: var(--inverted); }
.bottone:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; box-shadow: none; }
.bottone:disabled { opacity: .45; }
.bottone.spento:disabled { background: var(--surface-2); color: var(--text-muted); border: 0; opacity: 1; }
.bottone.chiaro, a.bottone.chiaro { background: var(--surface-2); color: var(--text); border: 0; box-shadow: none; }
.bottone.chiaro:hover { background: var(--surface-2); color: var(--text); }
.bottone.pericolo, :root[data-tema="scuro"] .bottone.pericolo { background: var(--danger); color: var(--on-danger); box-shadow: none; }
.bottone.pericolo:hover, :root[data-tema="scuro"] .bottone.pericolo:hover { background: var(--danger); }
.bottone.piccolo { min-height: 38px; padding: 4px 14px; font-size: 14px; font-weight: 700; }
.accesso .bottone { min-height: 52px; padding: 8px 22px; font-size: 16px; }
.accesso .riquadro button[type="submit"].bottone, .piede-reg button[type="submit"].bottone { background: var(--accent); color: var(--on-accent); }
.avviso.errore a.bottone.chiaro { color: var(--text); }

/* ── Campi: pieni, senza filo; la forma segue il contenuto ── */
.campo { margin-bottom: 14px; }
.riga { row-gap: 14px; }
/* Un campo sotto una riga di campi: lo stesso passo che c'è fra due campi (i campi della riga non hanno margine). */
.riga + .campo { margin-top: 14px; }
.campo > span { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.campo > span .aiuto { font-size: 13px; font-weight: 400; color: var(--text-2); opacity: 1; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=tel],
input[type=date], input[type=time], input[type=url], input[type=search], select, textarea {
  min-height: 44px; padding: 10px 16px; border: 1px solid transparent; border-radius: var(--radius-full);
  background: var(--surface); color: var(--text); font-size: 15px; line-height: 1.3;
}
/* Sulla pagina un campo è bianco (surface); dentro una card scende al grigio
   della pagina (bg), come in Tracka. */
:is(.scheda, .numero, .modale, .pannello-ia, .pannello-notifiche, .pwa-installa, .accesso .riquadro, .colonna-oggi) :is(input[type=text], input[type=email], input[type=password], input[type=number],
input[type=tel], input[type=date], input[type=time], input[type=url], input[type=search], select, textarea) { background: var(--bg); }
textarea { border-radius: var(--radius-md); padding: 12px 16px; font-family: var(--font-mono); font-size: 14px; }
input:hover, select:hover, textarea:hover,
:root[data-tema="scuro"] input:hover, :root[data-tema="scuro"] select:hover, :root[data-tema="scuro"] textarea:hover { border-color: transparent; }
input:focus, select:focus, textarea:focus { border-color: transparent; box-shadow: none; outline: 2px solid var(--text); outline-offset: 2px; }
input::placeholder, textarea::placeholder { color: var(--text-muted); }
input[type=checkbox], input[type=radio] { accent-color: var(--inverted); width: 18px; height: 18px; }
.pl-vai { font-size: 13px; color: var(--text-2); }
.pl-vai input, .pl-vai select { min-height: 38px; padding: 4px 12px; font-size: 14px; }
.suggerimenti { border: 0; border-radius: var(--radius-md); box-shadow: var(--shadow-banner); padding: 6px; }
.suggerimento { border: 0; border-radius: var(--radius-sm); min-height: 44px; }
.suggerimento:hover, .suggerimento:focus { background: color-mix(in srgb, var(--text) 6%, transparent); }
.suggerimento span { font-size: 13px; color: var(--text-2); }

/* ── Tabelle: le regole della lista, in colonne ── */
table { font-size: 15px; }
th {
  font-size: 13px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--text-2);
  padding: 14px 12px 10px; border-bottom: 0; white-space: nowrap;
}
td { padding: 14px 12px; border-bottom: 0; border-top: 1px solid var(--divider); }
th:first-child, td:first-child { padding-left: 0; }
th:last-child, td:last-child { padding-right: 0; }
tbody tr:hover td, :root[data-tema="scuro"] tbody tr:hover td { background: none; }
td.num, th.num { font-variant-numeric: tabular-nums; }
td.num { font-weight: 700; }
.scorre { margin: 0 calc(-1 * var(--card-padding)); padding: 0 var(--card-padding); }

/* ── Etichette: capsule piene, il colore nel testo ── */
.tag { border-radius: var(--radius-full); padding: 2px 10px; font-size: 13px; font-weight: 700; line-height: 1.35; }
.tag.blu, :root[data-tema="scuro"] .tag.blu { background: var(--accent-soft); color: var(--text); }
.tag.verde { background: color-mix(in srgb, var(--success) 18%, transparent); color: var(--success); }
.tag.arancio { background: color-mix(in srgb, var(--warning) 20%, transparent); color: var(--warning-ink); }
.tag.rosso, :root[data-tema="scuro"] .tag.rosso { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger-ink); }
.tag.viola, .tag.grigio { background: var(--surface-2); color: var(--text-2); box-shadow: none; }
abbr.manuale { color: var(--warning-ink); border-bottom-color: var(--warning); }
.manuale-legenda { font-size: 13px; color: var(--text-2); }
.manuale-legenda b { color: var(--warning-ink); }

/* ── Avvisi: blocchi pieni, niente fili, niente bordo colorato su un lato ── */
.avviso { border: 0; border-radius: var(--radius-md); padding: 14px 18px; font-size: 15px; color: var(--text); }
.avviso.info, :root[data-tema="scuro"] .avviso.info { background: var(--accent-soft); color: var(--text); }
.avviso.attenzione, :root[data-tema="scuro"] .avviso.attenzione { background: color-mix(in srgb, var(--warning) 18%, var(--surface)); color: var(--text); }
.avviso.errore, :root[data-tema="scuro"] .avviso.errore { background: color-mix(in srgb, var(--danger) 16%, var(--surface)); border-left: 0; color: var(--text); }
.avviso.errore b { color: var(--danger-ink); }
.avviso.errore a, :root[data-tema="scuro"] .avviso.errore a { color: var(--text); }
.avviso.ok, :root[data-tema="scuro"] .avviso.ok { background: color-mix(in srgb, var(--success) 16%, var(--surface)); color: var(--text); }
.avviso a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.banner-prova { background: var(--inverted); color: var(--on-inverted); font-size: 13px; font-weight: 700; }
.banner-prova a { color: var(--on-inverted); }

/* ── Finestre: la Dialog centrata, il foglio dal basso sul telefono ── */
.velo, :root[data-tema="scuro"] .velo { background: var(--overlay); -webkit-backdrop-filter: none; backdrop-filter: none; }
.modale {
  border: 0; border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-lifted);
  max-width: var(--dialog-max); animation: stble-compare var(--duration-base) var(--ease-out) both;
}
.modale.larga { max-width: 900px; }
.modale h2 { font-size: 22px; font-weight: 700; letter-spacing: -.2px; line-height: 1.2; margin-bottom: 14px; }
.modale .sotto { color: var(--text-2); font-size: 13px; }
.modale .piede { gap: 10px; margin-top: 22px; }

/* ── Elenchi: righe alte, fili leggeri ── */
.elenco-piatto li { min-height: var(--row-min); padding: 12px 0; border-bottom: 0; border-top: 1px solid var(--divider); align-items: center; }
.elenco-piatto li:first-child { border-top: 0; }
.elenco-piatto .principale { font-size: 15px; font-weight: 700; line-height: 1.25; }
.elenco-piatto .secondario, .secondario { font-size: 13px; color: var(--text-2); }
.vuoto { color: var(--text-2); font-size: 15px; padding: 34px 12px; }
.caricamento { color: var(--text-2); font-size: 15px; animation: stble-pulsa 1.6s var(--ease-in-out) infinite; }
.mono, code { font-family: var(--font-mono); }
:root[data-tema="scuro"] code { color: var(--text); }

/* ── Panoramica ── */
.colonna-oggi { background: var(--bg); border: 0; border-radius: var(--radius-md); padding: 14px 16px 6px; }
.movimenti-oggi .colonna-oggi { border: 0; }
.movimenti-oggi .mov-esce { background: color-mix(in srgb, var(--warning) 16%, var(--surface)); }
.movimenti-oggi .mov-entra { background: color-mix(in srgb, var(--success) 14%, var(--surface)); }
.movimenti-oggi .mov-casa { background: var(--accent-soft); }
.testa-colonna { font-size: 13px; font-weight: 700; color: var(--text-2); }
.movimenti-oggi .testa-colonna { font-size: 15px; gap: 12px; }
.testa-colonna b { font-family: var(--font-display); font-weight: 400; font-size: 34px; letter-spacing: 0; line-height: 1; }
.movimenti-oggi .colonna-oggi .elenco-piatto li { border-top-color: var(--divider); }
.colonna-oggi .nessuno { font-size: 13px; color: var(--text-2); }
.testa-blocco { font-size: 13px; font-weight: 700; letter-spacing: .8px; color: var(--text-2); }
.blocco-bisogno + .blocco-bisogno { border-top-color: var(--divider); }
.mov-prossimi { border-top-color: var(--divider); }
.movimento {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border: 0;
  border-radius: var(--radius-full); background: var(--bg); color: var(--text); font-size: 13px; font-weight: 700;
}
.movimento span { font-size: 13px; font-weight: 400; color: var(--text-2); }
.movimento.entra { background: color-mix(in srgb, var(--success) 16%, var(--surface)); }
.movimento.esce { background: color-mix(in srgb, var(--warning) 20%, var(--surface)); }
.movimento.casa { background: var(--accent-soft); }
.movimento.casa i, .freccia.entra, .movimento.entra i { color: var(--success); }
.movimento.casa i { color: var(--text); }
.mov-giorno .movimento, .mov-fermi .movimento { font-size: 13px; padding: 0 12px; }
.giorno-agenda b { font-size: 15px; font-weight: 700; }
.giorno-agenda span { font-size: 13px; color: var(--text-2); }
.punto.blu { background: var(--accent); }
.barretta, .canale-barra { height: 8px; background: var(--surface-2); }
.barretta i { background: var(--text); }
.istogramma .barra { background: var(--text); opacity: 1; border-radius: 6px 6px 2px 2px; }
.istogramma .colonna:hover .barra { background: var(--accent); }
.istogramma .giorno { font-size: 12px; color: var(--text-2); }
.istogramma.stat .giorno { font-size: 12px; }
.canale-num { font-size: 13px; color: var(--text-2); }
.blocchi-home { gap: 0 var(--space-lg); }
.blocchi-home.in-modifica .blocco-home { border-radius: var(--radius-lg); }
.blocchi-home.in-modifica .blocco-home.bersaglio { border-color: var(--text); background: var(--accent-soft); }

/* ── Planning e calendari: oggi e la scelta sono accento ── */
.pl-angolo, .pl-nome { background: var(--surface); border-color: var(--divider); font-size: 13px; font-weight: 700; }
.pl-mese, .pl-giorno, .pl-corsie { border-color: var(--divider); }
.pl-giorno { font-size: 12px; color: var(--text-2); }
.pl-giorno b { font-size: 13px; font-weight: 700; }
.pl-giorno.oggi b { background: var(--accent); color: var(--on-accent); }
.pl-cella { border-color: var(--divider); }
.pl-cella.oggi { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.pl-cella.libera:hover { background: color-mix(in srgb, var(--accent) 26%, transparent); }
.pl-cella.scelta { background: color-mix(in srgb, var(--accent) 50%, transparent); }
.pl-barra { border-radius: var(--radius-full); font-size: 12px; font-weight: 700; }
.pl-barra.diretta { background: var(--success); }
.giorno-tariffa { border: 0; border-radius: var(--radius-sm); background: var(--bg); }
.giorno-tariffa:hover { box-shadow: inset 0 0 0 2px var(--text); }
.giorno-tariffa.scelto { box-shadow: inset 0 0 0 2px var(--text); background: var(--accent-soft); }
.giorno-tariffa.occupato { background: var(--surface-2); color: var(--text-2); }
.giorno-tariffa.chiuso, :root[data-tema="scuro"] .giorno-tariffa.chiuso { background: color-mix(in srgb, var(--danger) 18%, transparent); }
.mese h3 { font-size: 15px; font-weight: 700; }
.mese .intestazioni span { font-size: 12px; color: var(--text-2); }
.pin { border: 0; background: var(--bg); border-radius: var(--radius-md); }
.pila, :root[data-tema="scuro"] .pila { height: 8px; border: 0; background: var(--surface-2); }
.pin .codice { font-family: var(--font-display); font-weight: 400; font-size: 27px; letter-spacing: .14em; }

/* ── Registrazione guidata: i passi di Tracka (StepBar) e le tessere di scelta ── */
.passi-reg { gap: 6px; }
.passi-reg span { font-size: 13px; color: var(--text-2); }
.passi-reg i { width: 28px; height: 28px; border: 0; background: var(--bg); color: var(--text-muted); font-size: 13px; font-weight: 700; }
.passi-reg span.fatto i { background: var(--accent); color: var(--on-accent); border: 0; }
.passi-reg span.ora { color: var(--text); font-weight: 700; }
.passi-reg span.ora i { background: var(--accent-soft); color: var(--accent-ink); border: 0; box-shadow: inset 0 0 0 2px var(--text); }
.titolo-passo { display: flex; align-items: center; gap: 16px; font-size: 22px; font-weight: 700; letter-spacing: -.2px; line-height: 1.2; margin-bottom: 14px; }
.scelta-grande { border: 0; border-radius: var(--radius-md); background: var(--bg); padding: 14px 18px; }
.scelta-grande span { font-size: 13px; color: var(--text-2); }
.scelta-grande:hover { border: 0; }
.scelta-grande.attiva { background: var(--inverted); color: var(--on-inverted); box-shadow: none; }
.scelta-grande.attiva span { color: var(--on-inverted-muted); }
.passi-configura span.ora i { background: var(--accent); color: var(--on-accent); }

/* ── Accesso: la pagina grigia, il modulo in una card ── */
.accesso { background: var(--bg); }
.accesso .riquadro { background: var(--surface); border: 0; border-radius: var(--radius-lg); padding: 28px; box-shadow: none; }
.accesso h1, .accesso .titolo-accesso { font-size: 22px; font-weight: 700; letter-spacing: -.2px; }
.accesso p.intro { color: var(--text-2); font-size: 15px; }
.accesso input, .accesso select, .accesso textarea { min-height: 52px; padding: 12px 18px; }
.accesso .schede { background: var(--bg); border: 0; padding: 4px; }
.accesso .schede button { min-height: 44px; color: var(--text-2); font-weight: 700; }
.accesso .schede button.attiva, :root[data-tema="scuro"] .accesso .schede button.attiva { background: var(--inverted); color: var(--on-inverted); box-shadow: none; border: 0; }
.vetrina .i3d { margin-bottom: 18px; }
.vetrina h1 {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(48px, 7vw, 96px); line-height: .98; letter-spacing: .2px;
}
/* L'evidenziazione è un blocco suo (03-11-2026): da elemento in linea lo
   sfondo copriva tutta l'area del glifo di Anton (1,5 volte il corpo) e non
   l'interlinea di 0,98, così saliva sulla riga sopra e la tagliava a metà
   («APRITI», «OPEN SESAME,» e la virgola). In blocco è alto quanto la riga. */
.vetrina h1 span { display: inline-block; color: var(--on-accent); background: var(--accent); padding: .04em .12em 0; margin-top: .08em; border-radius: .12em; }
.vetrina .lede { color: var(--text-2); font-size: 18px; line-height: 1.45; }
/* Prezzo e prova sotto il titolo (03-11-2026): la risposta alla prima domanda, in neretto e senza colore — il giallo è del titolo. */
.vetrina .prezzo-vetrina { margin: -8px 0 12px; font-size: 17px; font-weight: 700; line-height: 1.4; color: var(--text); }
.vetrina .punti li { min-height: 38px; border: 0; background: var(--surface); box-shadow: none; font-size: 14px; font-weight: 700; padding: 0 16px 0 12px; }
.vetrina .punti li i { background: var(--accent); }
.vetrina .punti li:nth-child(n+2) i { background: var(--text); }
.firma-grande i { color: var(--text-2); }

/* ── La campanella e l'angolo in alto: tondi che galleggiano ── */
.campanella {
  width: 46px; height: 46px; border: 0; background: var(--surface); color: var(--text);
  box-shadow: var(--shadow-tabbar);
}
.campanella:hover, .campanella.con-novita { color: var(--text); border: 0; }
.campanella:focus-visible { box-shadow: var(--shadow-tabbar); outline: 2px solid var(--text); outline-offset: 3px; }
.campanella svg { width: 22px; height: 22px; }
.campanella .pallino { background: var(--danger); color: var(--on-danger); font-size: 12px; font-weight: 700; box-shadow: 0 0 0 2px var(--bg); }
.angolo-alto { top: 22px; right: 28px; }
.angolo-alto .pillola-piano { height: 38px; box-shadow: var(--shadow-tabbar); }
/* «Pubblica» nel Community Center, al posto del piano (03-11-2026). */
/* È l'azione principale della pagina anche lì: in accento, come nella testata. */
.angolo-alto .pubblica-angolo, .barra-mobile .pubblica-angolo { background: var(--accent); color: var(--on-accent); }
.angolo-alto .pubblica-angolo { min-height: 44px; padding: 0 22px; box-shadow: var(--shadow-tabbar); }
.pillola-piano { border: 0; background: var(--surface); color: var(--text); font-size: 13px; font-weight: 700; }
.segno-piano { color: var(--premium); }
.bottone-tema { min-height: 38px; }

/* L'avviso in alto (nuova versione): la capsula nera di Tracka, a misura del testo. */
.pwa-versione {
  width: max-content; background: var(--tab-bg); color: #fff; font-size: 13px; font-weight: 700;
  padding: 4px 4px 4px 16px; box-shadow: var(--shadow-banner); animation: stble-cala var(--duration-slow) var(--ease-out) both;
}
.pwa-versione .bottone { min-height: 32px; padding: 0 14px; font-size: 13px; background: var(--accent); color: var(--on-accent); }
@keyframes stble-cala { from { opacity: 0; translate: 0 -16px; } to { opacity: 1; translate: 0 0; } }
.pwa-installa { border: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-lifted); }

/* ══ STBLE AI ══════════════════════════════════════════════════════════
   Il segno dell'assistente in tutti i prodotti STBLE: un tondo rosso con due
   occhi bianchi che guardano e sbattono le palpebre, sempre in movimento (un
   pallino rosso fermo si legge come una notifica). Il rosso è solo dell'AI.
   La sfumatura viola → rosa → ciano esiste solo come aura diffusa dietro le
   schermate dell'assistente. Mai sfumature blu-viola su testi o tasti. */
.ai-dot {
  --s: 16px; width: var(--s); height: var(--s); border-radius: 50%; background: var(--ai);
  display: inline-grid; place-items: center; overflow: hidden; flex: none; vertical-align: middle;
}
.ai-occhi { display: flex; gap: calc(var(--s) * .08); transform: translateY(calc(var(--s) * -.12)); animation: ai-sguardo 5s ease-in-out infinite; }
.ai-occhi i { display: block; width: calc(var(--s) * .18); height: calc(var(--s) * .18); border-radius: 50%; background: #fff; animation: ai-palpebre 5s ease-in-out infinite; }
@keyframes ai-sguardo { 0% { translate: 0 } 8% { translate: calc(var(--s) * -.09) } 28% { translate: calc(var(--s) * .09) } 48% { translate: calc(var(--s) * -.09) } 56%, 100% { translate: 0 } }
@keyframes ai-palpebre { 0%, 60% { scale: 1 1 } 61.4% { scale: 1 .1 } 63.2%, 73.2% { scale: 1 1 } 74.6% { scale: 1 .1 } 76.4%, 100% { scale: 1 1 } }
@keyframes ai-respiro { from { transform: scale(1) } to { transform: scale(1.03) } }
@keyframes ai-alone { from { opacity: 0; transform: scale(1) } to { opacity: .35; transform: scale(1.2) } }
/* Il tondo nella testata respira una volta ogni 11,8 secondi circa. */
@keyframes ai-respiro-raro { 0%, 88%, 100% { transform: scale(1) } 91% { transform: scale(1.03) } 94% { transform: scale(1) } 97% { transform: scale(1.03) } }

/* La pill: capsula con il tondo da 16 e il nome. */
.pill-ia {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 4px; border-radius: var(--radius-full);
  background: var(--surface); color: var(--text); font-size: 13px; font-weight: 700; line-height: 17.6px;
  text-transform: none; letter-spacing: 0; white-space: nowrap;
}

/* Il tondo nella testata (46) e nella barra del telefono (40). */
.bottone-ia, .bottone-ia.da-piano {
  --lato-ia: 46px; width: var(--lato-ia); height: var(--lato-ia); padding: 0; border: 0; border-radius: 50%;
  background: var(--ai); box-shadow: var(--shadow-float);
  animation: ai-respiro-raro 11.8s var(--ease-in-out) infinite;
}
.bottone-ia::before { content: none; }
.bottone-ia .ai-dot { width: 100%; height: 100%; background: transparent; }
.bottone-ia:hover { transform: none; box-shadow: var(--shadow-float); }
.bottone-ia:focus-visible { box-shadow: var(--shadow-float); outline: 2px solid var(--text); outline-offset: 3px; }

/* La card dell'assistente in Panoramica: superficie neutra con l'aura dietro,
   il testo a sinistra e il pulsante AI da 78 a destra. */
.scheda-ia { background: var(--surface); color: var(--text); border: 0; isolation: isolate; }
.scheda-ia::before {
  inset: 0; z-index: 0; filter: blur(8px); opacity: .55; animation: none;
  background:
    radial-gradient(farthest-corner at 12% 18%, color-mix(in srgb, var(--ai-violet) 50%, transparent), transparent 45%),
    radial-gradient(farthest-corner at 90% 28%, color-mix(in srgb, var(--ai-pink) 50%, transparent), transparent 45%),
    radial-gradient(farthest-corner at 50% 100%, color-mix(in srgb, var(--ai-cyan) 50%, transparent), transparent 45%);
}
.scheda-ia::after { content: none; }
.scheda-ia.chiusa::before { opacity: .3; }
.scheda-ia-testa { align-items: center; gap: 22px; flex-wrap: nowrap; }
.scheda-ia-testa h2 { color: var(--text); font-size: 22px; font-weight: 700; letter-spacing: -.2px; margin: 12px 0 6px; }
.scheda-ia-testa p { color: var(--text-2); font-size: 15px; }
.scheda-ia-sopra { gap: 8px; color: var(--text); text-transform: none; letter-spacing: 0; }
.tag-piano-ia { background: var(--surface); color: var(--premium); font-size: 13px; padding: 3px 10px; }

/* Il pulsante AI (78): fondo rosso con una luce dall'alto, respira, e dietro
   un alone dello stesso rosso. */
.tastone-ia {
  position: relative; display: block; flex: none; width: 78px; height: 78px; padding: 0; border: 0;
  background: none; color: #fff; box-shadow: none; border-radius: 50%; letter-spacing: 0;
}
.tastone-ia:hover { transform: none; box-shadow: none; }
.tastone-ia:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; }
.tastone-ia .alone, .tastone-ia .nucleo { position: absolute; inset: 0; border-radius: 50%; background: var(--ai); }
.tastone-ia .alone { opacity: 0; animation: ai-alone 1.4s ease-in-out infinite alternate; }
.tastone-ia .nucleo {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; overflow: hidden;
  box-shadow: var(--shadow-float); font-size: 13px; font-weight: 700; line-height: 16px;
  background-image: linear-gradient(rgba(255, 255, 255, .2), rgba(255, 255, 255, .08) 35%, rgba(255, 255, 255, 0) 75%);
  animation: ai-respiro 1.4s ease-in-out infinite alternate;
}
.tastone-ia .nucleo .ai-dot { background: transparent; }
.chip-ia, .pannello-ia .chip-ia {
  min-height: 32px; padding: 6px 14px; border: 0; border-radius: var(--radius-full);
  background: var(--surface-2); color: var(--text); font-size: 13px; font-weight: 700; line-height: 1.35;
  -webkit-backdrop-filter: none; backdrop-filter: none; text-align: left;
}
.scheda-ia .chip-ia { background: var(--surface); }
.chip-ia:hover, .pannello-ia .chip-ia:hover { background: var(--surface-2); border: 0; }
.scheda-ia .chip-ia:hover { background: var(--surface); }

/* Il pannello: una finestra con l'aura in testa. */
.pannello-ia { border: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-lifted); background: var(--surface); }
.pannello-ia .aurora {
  top: -40px; left: 0; right: 0; height: 200px; animation: none; filter: blur(8px); opacity: .55;
  background:
    radial-gradient(farthest-corner at 12% 30%, color-mix(in srgb, var(--ai-violet) 50%, transparent), transparent 45%),
    radial-gradient(farthest-corner at 88% 20%, color-mix(in srgb, var(--ai-pink) 50%, transparent), transparent 45%),
    radial-gradient(farthest-corner at 50% 100%, color-mix(in srgb, var(--ai-cyan) 40%, transparent), transparent 45%);
  -webkit-mask-image: linear-gradient(#000 40%, transparent); mask-image: linear-gradient(#000 40%, transparent);
}
.pannello-ia .testa { padding: 18px 20px 10px; }
.pannello-ia h2 { font-size: 22px; font-weight: 700; letter-spacing: -.2px; gap: 10px; }
.pannello-ia .titolo-ia { gap: 8px; }
.pannello-ia .powered-ia { padding-left: 0; text-transform: none; letter-spacing: 0; font-size: 13px; }
.pannello-ia .chiudi {
  width: 40px; height: 40px; padding: 0; border-radius: 50%; background: var(--surface-2); color: var(--text);
  display: inline-grid; place-items: center; font-size: 22px;
}
.pannello-ia .chiudi:hover { background: var(--surface-2); color: var(--text); }
.vuoto-ia { color: var(--text-2); }
.msg-ia { border-radius: 22px; font-size: 15px; line-height: 1.45; }
.msg-ia.domanda { background: var(--inverted); color: var(--on-inverted); border-bottom-right-radius: 8px; }
.msg-ia.risposta { background: var(--bg); border: 0; border-bottom-left-radius: 8px; }
.msg-ia.errore { background: color-mix(in srgb, var(--danger) 16%, var(--surface)); color: var(--danger-ink); }
.msg-ia .meta-ia { font-size: 13px; color: var(--text-2); }
.msg-ia.pensa span { background: var(--ai); }
.riga-ia { border: 0; border-radius: var(--radius-md); background: var(--surface); min-height: 44px; font-size: 15px; }
.riga-ia:hover { border: 0; }
.modulo-ia input { min-height: 52px; padding: 0 20px; }
.modulo-ia .bottone { min-height: 52px; }

/* ══ Icone 3D ══════════════════════════════════════════════════════════
   Le icone principali di Sesamoh sono in 3D: ogni COSA che la dashboard
   rappresenta (una sezione, un arrivo, un passo della registrazione) ha la
   sua. Sono PNG coi loro colori, uguali nei due temi, mai tinte dal tema.
   Finché un disegno non c'è, al suo posto c'è un segnaposto tratteggiato col
   nome (app.js, icona3d). Grandi e galleggianti 72-110, al massimo 1-2 per
   vista; medie 28-40 nelle righe. I glifi a linea restano per le azioni. */
.i3d { --i3d: 40px; width: var(--i3d); height: var(--i3d); flex: none; display: inline-grid; place-items: center; animation: i3d-arriva .75s var(--ease-spring) both; }
.i3d.galleggia { animation: i3d-arriva .75s var(--ease-spring) both, i3d-galleggia 5s var(--ease-in-out) .75s infinite; }
.i3d img { width: 100%; height: 100%; object-fit: contain; display: block; }
.i3d.segnaposto {
  border: 2px dashed var(--text-muted); border-radius: calc(var(--i3d) * .29); color: var(--text-muted);
  font-size: 12px; font-weight: 700; line-height: 1.1; text-align: center; padding: 4px; overflow: hidden; overflow-wrap: anywhere;
}
@keyframes i3d-arriva { from { scale: .2; translate: 0 14px; } to { scale: 1; translate: 0 0; } }
@keyframes i3d-galleggia { 0%, 100% { transform: translateY(5px); } 50% { transform: translateY(-5px); } }

/* Movimento condiviso */
@keyframes stble-compare { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes stble-pulsa { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes stble-rimbalzo { from { transform: scale(.9); } to { transform: scale(1); } }

/* ══ Telefono (< 861px) ════════════════════════════════════════════════ */
@media (max-width: 860px) {
  #app { grid-template-columns: 1fr; }
  main { padding: 12px var(--space-xl) calc(var(--tabbar-clearance) + env(safe-area-inset-bottom)); }

  /* La barra di navigazione: una capsula nera che galleggia in basso, un
     tondo per voce, la voce attiva in accento. Niente vetro né sfocatura. */
  .sidebar, :root[data-tema="scuro"] .sidebar {
    left: 50%; right: auto; top: auto; bottom: calc(12px + env(safe-area-inset-bottom));
    width: max-content; max-width: calc(100% - 40px); height: auto; margin: 0; padding: 5px;
    transform: translateX(-50%); border-radius: var(--radius-full); background: var(--tab-bg);
    border: 1px solid rgba(255, 255, 255, .18); box-shadow: var(--shadow-tabbar);
    -webkit-backdrop-filter: none; backdrop-filter: none; overflow: visible;
  }
  :root[data-tema="scuro"] .sidebar { border-color: rgba(255, 255, 255, .1); }
  .sidebar nav { gap: 8px; padding: 0; justify-content: center; }
  .sidebar nav a, .sidebar nav .voce-menu {
    flex: 0 1 56px; width: 56px; min-width: 44px; height: auto; min-height: 0; aspect-ratio: 1; margin: 0; padding: 0;
    justify-content: center; border-radius: 50%; background: var(--tab-circle); color: var(--tab-glyph);
  }
  .sidebar nav a .breve, .sidebar nav .voce-menu .breve { display: none; }
  .sidebar nav a .glifo, .sidebar nav a .glifo svg, .sidebar nav .voce-menu .glifo, .sidebar nav .voce-menu .glifo svg { width: 24px; height: 24px; flex: none; }
  .sidebar nav a.attiva, .sidebar nav .voce-menu.attiva { background: var(--accent); color: var(--on-accent); animation: stble-rimbalzo 360ms var(--ease-spring); }
  .sidebar nav a.attiva .glifo { color: var(--on-accent); }
  .sidebar nav a .pallino { top: -3px; right: -3px; box-shadow: 0 0 0 2px var(--tab-bg); }
  /* Sotto la barra il fondo sfuma verso il colore della pagina. */
  #app::after {
    content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: 110px; z-index: 39; pointer-events: none;
    background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 0%, transparent), var(--bg) 75%);
  }

  /* La riga in cima: la pagina stessa, senza vetro; tondi pieni. */
  .barra-mobile, :root[data-tema="scuro"] .barra-mobile {
    margin: -12px calc(-1 * var(--space-xl)) 14px; padding: 10px var(--space-xl);
    background: var(--bg); border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; gap: 8px;
  }
  /* Il logo a sinistra, i tasti a destra: la struttura ha la sua riga sotto. */
  .barra-mobile > :first-child { margin-right: auto; }
  /* La stessa capsula della barra laterale: la freccia disegnata, il fuoco è un colore. */
  .scelta-mobile select {
    -webkit-appearance: none; appearance: none; min-height: 44px; border: 0; font-size: 15px; font-weight: 700; padding: 0 36px 0 16px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
    background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111114' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 12px 12px;
  }
  :root[data-tema="scuro"] .scelta-mobile select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
  .scelta-mobile select:focus { outline: none; background-color: var(--surface-2); }
  .barra-mobile .bottone-ia { --lato-ia: 40px; display: inline-flex; box-shadow: none; }
  .barra-mobile .campanella { width: 40px; height: 40px; box-shadow: none; }
  .barra-mobile .bottone { min-height: 40px; }

  .testata h1 { font-size: 36px; letter-spacing: .2px; }
  .testata .con-icona { gap: 14px; }
  .testata .i3d { --i3d: 56px !important; }
  .scheda { padding: var(--card-padding); border-radius: var(--radius-lg); }
  .numero { padding: 16px 18px; border-radius: var(--radius-lg); }
  .numero .valore { font-size: 27px; letter-spacing: 0; }
  .scorre { margin: 0 calc(-1 * var(--card-padding)); padding: 0 var(--card-padding); }
  .linguette a { min-height: 38px; padding: 0 14px; font-size: 14px; }
  .avviso { font-size: 15px; }
  .scheda-ia-testa { flex-wrap: wrap; }
  .tastone-ia { width: 78px; }
  input[type=text], input[type=email], input[type=password], input[type=number], input[type=tel],
  input[type=date], input[type=time], input[type=url], input[type=search], select, textarea { font-size: 16px; }

  /* Le finestre diventano fogli dal basso, senza rimbalzo. */
  .velo { padding: 0; align-items: end; }
  .modale {
    max-width: none; width: 100%; max-height: 88vh; padding: 10px 18px calc(28px + env(safe-area-inset-bottom));
    border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: var(--sheet);
    animation: stble-foglio var(--duration-sheet) var(--ease-sheet) both;
  }
  .modale::before { content: ""; display: block; width: 40px; height: 5px; border-radius: 9px; background: var(--border); margin: 0 auto 18px; }
  .velo .modale :is(input[type=text], input[type=email], input[type=password], input[type=number], input[type=tel],
  input[type=date], input[type=time], input[type=url], input[type=search], select, textarea) { background: var(--surface); }
  .modale .bottone.chiaro { background: var(--button-on-sheet); color: var(--on-button-on-sheet); }
  .modale .piede { flex-direction: column-reverse; align-items: stretch; }
  .modale .piede .bottone { width: 100%; }

  /* Il menu a tutto schermo: un gruppo per card, righe con il riquadro icona. */
  .menu-mobile { background: var(--bg); padding: 14px var(--space-xl) calc(var(--tabbar-clearance) + env(safe-area-inset-bottom)); }
  .menu-mobile .testa .chiudi { width: 46px; height: 46px; border: 0; background: var(--surface); font-size: 24px; }
  .menu-mobile .gruppo { margin-top: var(--space-lg); background: var(--surface); border-radius: var(--radius-lg); padding: 16px 18px 6px; }
  .menu-mobile .gruppo h3 { margin: 0 0 4px; font-size: 13px; font-weight: 700; letter-spacing: .8px; color: var(--text-2); }
  .menu-mobile .voce {
    min-height: 60px; padding: 10px 2px; margin: 0; border: 0; border-top: 1px solid var(--divider);
    border-radius: 0; background: none; color: var(--text); font-size: 15px; font-weight: 700;
  }
  .menu-mobile .gruppo h3 + .voce { border-top: 0; }
  .menu-mobile .voce .glifo {
    display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-sm);
    background: var(--surface-2); color: var(--text);
  }
  .menu-mobile .voce .glifo svg { width: 20px; height: 20px; }
  .menu-mobile .voce.attiva {
    background: var(--accent-soft); color: var(--text); border-color: transparent;
    margin-inline: -12px; padding-inline: 14px; border-radius: var(--radius-md);
  }
  .menu-mobile .voce.attiva + .voce { border-top-color: transparent; }
  .menu-mobile .voce.bloccata { background: none; color: var(--text-muted); }
  .menu-mobile .voce .pallino { background: var(--danger); color: var(--on-danger); font-size: 12px; }
  .menu-mobile .piede { border-top: 0; margin-top: var(--block-gap); }
  .pwa-installa { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}
@keyframes stble-foglio { from { transform: translateY(100%); } to { transform: none; } }

/* Tablet: margini di 32. */
@media (min-width: 641px) and (max-width: 860px) {
  main { padding-inline: var(--page-margin-tablet); }
  .barra-mobile, :root[data-tema="scuro"] .barra-mobile { margin-inline: calc(-1 * var(--page-margin-tablet)); padding-inline: var(--page-margin-tablet); }
}

/* Con «riduci movimento» si ferma tutto: gli occhi restano a metà corsa. */
@media (prefers-reduced-motion: reduce) {
  .ai-occhi, .ai-occhi i, .bottone-ia, .tastone-ia .alone, .tastone-ia .nucleo, .i3d, .i3d.galleggia,
  .modale, .caricamento, .sidebar nav a.attiva, .sidebar nav .voce-menu.attiva { animation: none !important; }
  .ai-occhi { translate: calc(var(--s) * -.045); }
  .tastone-ia .alone { display: none; }
  .bottone:active, .campanella:active, .bottone-ia:active, .tastone-ia:active, .linguette a:active, .movimento:active,
  .scelta-grande:active, .chip-ia:active, .sidebar nav a:active, .sidebar nav .voce-menu:active, .menu-mobile .voce:active { transform: none; }
}

@media print {
  .sidebar, .angolo-alto { display: none; }
  .scheda, .numero { background: #fff; }
}

/* ══ La barra del Community Center (03-11-2026) ═══════════════════════════
   Nel Community Center la barra laterale è un'altra: il ritorno alla
   dashboard, poi le voci della community, i club e i forum. Entrando e
   uscendo la barra si capovolge: quella vecchia gira di un quarto e sparisce
   di taglio, quella nuova arriva dall'altro lato. */
.barra-community nav a.torna-dashboard { min-height: 58px; margin: 0 0 6px; background: rgba(255, 255, 255, .08); color: #fff; }
.barra-community nav a.torna-dashboard:hover { background: rgba(255, 255, 255, .14); }
.barra-community nav a.torna-dashboard .glifo { color: #fff; }
.barra-community nav a .testo { white-space: normal; line-height: 1.22; }
.barra-community nav a .testo b, .barra-community nav a .testo small { display: block; }
.barra-community nav a .testo small { font-size: 12px; font-weight: 500; color: var(--tab-label); }
.barra-community nav a.attiva .testo small { color: var(--on-accent-muted, var(--on-accent)); }
.titolo-barra-cc { padding: 14px 16px 6px; font-size: 12px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--tab-label); }
.gruppo-barra-cc { display: flex; gap: 12px; align-items: flex-start; padding: 18px 16px 6px; color: #fff; }
.gruppo-barra-cc .glifo { flex: 0 0 22px; width: 22px; height: 22px; color: var(--tab-glyph); }
.gruppo-barra-cc .glifo svg { width: 22px; height: 22px; }
.gruppo-barra-cc b { display: block; font-size: 15px; }
.gruppo-barra-cc small { display: block; font-size: 12px; color: var(--tab-label); }
.barra-community nav a.club-barra { min-height: 56px; gap: 12px; padding: 0 12px; }
.barra-community .emblema-club { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 12px; display: inline-grid; place-items: center; background: rgba(43, 255, 136, .14); color: #2bff88; }
.barra-community .emblema-club svg { width: 20px; height: 20px; }
.barra-community nav a.attiva .emblema-club { background: rgba(0, 0, 0, .12); color: var(--on-accent); }
.barra-community nav a.forum-barra { min-height: 42px; padding: 0 14px 0 50px; font-size: 14px; font-weight: 600; }
.barra-community nav a.forum-barra .testo { white-space: normal; line-height: 1.25; }
.barra-community .freccia-cc { margin-left: auto; color: var(--tab-label); font-size: 20px; }
.vuoto-barra-cc { padding: 4px 16px 8px 50px; font-size: 13px; color: var(--tab-label); }
.vuoto-barra-cc a { color: #fff; }

@keyframes barra-esce { to { transform: perspective(1400px) rotateY(90deg); opacity: .25; } }
@keyframes barra-entra { from { transform: perspective(1400px) rotateY(-90deg); opacity: .25; } to { transform: perspective(1400px) rotateY(0deg); opacity: 1; } }
@keyframes barra-esce-telefono { to { rotate: x 90deg; opacity: .25; } }
@keyframes barra-entra-telefono { from { rotate: x -90deg; opacity: .25; } to { rotate: x 0deg; opacity: 1; } }
.sidebar.gira-esce { animation: barra-esce 200ms cubic-bezier(.5, 0, .9, .5) forwards; transform-origin: 50% 50%; }
.sidebar.gira-entra { animation: barra-entra 360ms cubic-bezier(.15, .8, .3, 1) both; transform-origin: 50% 50%; }

@media (max-width: 860px) {
  /* Sul telefono la capsula in fondo ha indietro, home, messaggi e notifiche; il resto è in cima alla pagina. */
  .barra-community .solo-computer, .barra-community .titolo-barra-cc { display: none !important; }
  .barra-community nav a.torna-dashboard { min-height: 0; margin: 0; background: rgba(255, 255, 255, .14); }
  /* La capsula sta già traslata a metà schermo: il giro usa `rotate`, che si somma. */
  .sidebar.gira-esce { animation-name: barra-esce-telefono; }
  .sidebar.gira-entra { animation-name: barra-entra-telefono; }
  .menu-community .voce-cc { display: none; }
  .menu-community .voce-cc[href$="aggiornamenti"], .menu-community .voce-cc[href$="moderazione"] { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar.gira-esce, .sidebar.gira-entra { animation: none !important; }
}

/* ══ Bersagli da dito (03-11-2026) ═════════════════════════════════════
   Sui dispositivi touch nessun controllo sotto i 44 pixel (linee guida Apple
   e WCAG 2.5.5): col mouse si resta compatti come prima. */
@media (pointer: coarse) {
  .bottone.piccolo, .linguette a, .movimento, .barra-mobile .bottone { min-height: 44px; }
  .barra-mobile .bottone-ia { --lato-ia: 44px; }
  .barra-mobile .campanella { width: 44px; height: 44px; }
}

/* Il Planning sul telefono (03-11-2026): il calendario è il motivo per cui si
   apre, e stava sotto quattro righe di spiegazione e due tasti a tutta
   larghezza. La spiegazione resta sul computer; i due tasti stanno su una riga. */
@media (max-width: 860px) {
  #app[data-sezione="planning"] main > .testata .titoli p { display: none; }
  #app[data-sezione="planning"] main > .testata .azioni { display: flex; flex-direction: row; flex-wrap: nowrap; }
  #app[data-sezione="planning"] main > .testata .azioni > .bottone { flex: 1 1 0; min-width: 0; padding-inline: 10px; }
}

/* L'assistenza (03-11-2026): le richieste dell'host e la conversazione con il team. */
.assistenza-richieste button { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.assistenza-richieste button > span:first-child { display: grid; gap: 2px; min-width: 0; }
.assistenza-filo { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 10px; }
.assistenza-filo li { padding: 10px 14px; border-radius: 16px; background: var(--surface-2); max-width: 92%; }
.assistenza-filo li.team { justify-self: end; background: var(--accent); color: var(--on-accent); }
.assistenza-filo li.team .secondario { color: var(--on-accent-muted); }
.assistenza-filo .testo { white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 4px; line-height: 1.5; }
/* Il gettone col quadratino nascosto (Il tuo menu): da tastiera si vede dove si è. */
.gettone:has(input:focus-visible) { outline: 2px solid var(--text); outline-offset: 2px; }
.assistenza-filo + .aiuto { margin: 0 0 14px; }