.stage { align-content: start; justify-items: center; min-height: 14rem; }
.tabs { display: grid; gap: 1.5rem; width: min(100%, 34rem); justify-items: center; }
[role='tab'] { font: inherit; -webkit-tap-highlight-color: transparent; }

/* ---------- Il colore che scorre ----------
   Due copie dell'elenco: quella di base (testo grigio) e, sopra, una "accesa"
   (sfondo chiaro, testo scuro) ritagliata sul tab attivo. Muovendo il
   ritaglio, sfondo e colore del testo cambiano insieme, cosa che animare
   i colori dei singoli tab non riesce a fare. */
.seg { position: relative; width: 100%; max-width: 28rem; }
.seg__base,
.seg__lit { display: grid; grid-template-columns: repeat(3, 1fr); padding: 0.3rem; border-radius: 999px; }
.seg__base { background: var(--bg); border: 1px solid var(--line); }
.seg__base [role='tab'] { position: relative; z-index: 0; padding: 0.7rem 0.5rem; font-weight: 600; font-size: 0.92rem; color: var(--muted); cursor: pointer; background: none; border: 0; border-radius: 999px; }
.seg__lit { position: absolute; inset: 0; pointer-events: none; background: var(--text); color: #111; clip-path: inset(0 66% 0 0 round 999px); transition: clip-path 0s; }
.is-ready .seg__lit { transition: clip-path 340ms var(--ease-out); }
.seg__lit span { display: grid; place-items: center; padding: 0.7rem 0.5rem; font-weight: 600; font-size: 0.92rem; }
.seg__base [role='tab']:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; z-index: 2; }

/* ---------- Sottolineatura che si sposta ---------- */
.line { position: relative; display: flex; gap: 0.25rem; border-bottom: 1px solid var(--line); width: 100%; max-width: 28rem; }
.line [role='tab'] { padding: 0.8rem 1rem; font-weight: 600; font-size: 0.95rem; color: var(--muted); cursor: pointer; background: none; border: 0; transition: color 160ms ease; }
.line [aria-selected='true'] { color: var(--text); }
@media (hover: hover) and (pointer: fine) { .line [role='tab']:hover { color: var(--text); } }
.line [role='tab']:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; border-radius: 0.4rem; }
.line__bar { position: absolute; left: 0; bottom: -1px; height: 2px; width: var(--w, 0); background: var(--accent); border-radius: 2px; transform: translateX(var(--x, 0)); }
.is-ready .line__bar { transition: transform 300ms var(--ease-out), width 300ms var(--ease-out); }

/* ---------- Pillole con icona ---------- */
.pills { position: relative; display: inline-flex; gap: 0.25rem; padding: 0.3rem; background: var(--bg); border: 1px solid var(--line); border-radius: 1rem; }
.pills [role='tab'] { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1rem; font-weight: 600; font-size: 0.9rem; color: var(--muted); cursor: pointer; background: none; border: 0; border-radius: 0.75rem; transition: color 180ms ease, transform 160ms var(--ease-out); }
.pills [role='tab']:active { transform: scale(0.96); }
.pills [aria-selected='true'] { color: var(--text); background: #2a2a2a; }
.pills svg { width: 1.1rem; height: 1.1rem; }
@media (hover: hover) and (pointer: fine) { .pills [role='tab']:hover { color: var(--text); } }
.pills [role='tab']:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Pannelli ---------- */
.panels { width: 100%; max-width: 28rem; min-height: 8rem; }
[role='tabpanel'] { animation: panel-in 260ms var(--ease-out); }
[role='tabpanel']:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 0.5rem; }
@keyframes panel-in { from { opacity: 0; transform: translateY(0.4rem); } }
.panels h3 { margin-bottom: 0.5rem; font-size: 1.25rem; }
.panels p { color: #b8b8b8; }

/* Anteprime disegnate a CSS per il terzo gruppo */
.mini { display: grid; gap: 0.5rem; }
.mini i { display: block; background: #2a2a2a; border-radius: 0.5rem; }
.mini--grid { grid-template-columns: repeat(3, 1fr); }
.mini--grid i { aspect-ratio: 4 / 3; }
.mini--list i { height: 2.2rem; }
.mini--cal { grid-template-columns: repeat(7, 1fr); }
.mini--cal i { aspect-ratio: 1; border-radius: 0.35rem; }
.mini--cal i:nth-child(3n) { background: rgb(255 59 48 / 0.5); }