/* Tereso — components.css
   Stili componenti UI riusabili. Caricato dopo tokens.css e layouts.css
   (vedi base.html). US-003 (#116): popolazione regole reali per i 4
   componenti base (NavPill, Button, FormField, Card). Le sezioni rimaste
   commentate atterrano in storie successive (content-tile, content-shelf,
   hero-episode). */

/* -----------------------------------------------------------------------------
   .nav-pill — menu pillola (header navigation)
   Pill 520x67 posizionata top:30 center horizontal sopra hero/superficie.
   4 link orizzontali (Home / Catalogo / Sessioni / Profilo, decisione D-NAV=A).
   Sottolineato arancione 2px sotto il link attivo.

   Varianti (FIX-001 audit post-US-017):
   - `.nav-pill--glass` : pill traslucida bianca, da usare sopra hero scuro /
     cinema (DS Figma originale). Default storico US-003.
   - `.nav-pill--solid` : pill navy semi-opaca, da usare sopra paper-white
     nelle pagine senza hero (catalog/list, catalog/detail, course_detail,
     episode, certificates, profile, quiz, sessions) — la glass non si
     vedrebbe sul background paper.
   ----------------------------------------------------------------------------- */
.nav-pill {
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 520px;
  height: 67px;
  border-radius: 118px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  padding: 0;
  z-index: 10;
}
.nav-pill--glass {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.nav-pill--solid {
  background: var(--glass-bg-dark);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
/* FIX-008: sulle pagine senza hero (`.shell-app--no-hero`), la NavPill esce
   dal positioning absolute (DS Figma "sopra hero scuro") e passa a in-flow
   centrato sopra il contenuto. Evita overlap col `.app-branding` e con il
   primo header di pagina. */
.shell-app--no-hero .nav-pill {
  position: relative;
  top: 0;
  left: 0;
  transform: none;
  margin: var(--space-7) auto var(--space-6);
}
.nav-pill__item {
  position: relative;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 15px;
  color: var(--fg-on-dark);
  text-decoration: none;
  padding: 4px 2px;
  opacity: 0.85;
}
.nav-pill__item:hover {
  opacity: 1;
}
.nav-pill__item--active {
  opacity: 1;
}
.nav-pill__item--active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--tereso-orange);
  border-radius: 2px;
}

/* -----------------------------------------------------------------------------
   .app-branding — header brand-mark top-left
   Allineato col NavPill (top:30) sopra hero scuro. Pattern simmetrico a
   NavPill (FIX-008): in pagine senza hero (`.shell-app--no-hero`) passa
   in-flow per evitare overlap col contenuto paper-white.

   - `.app-wordmark` : fallback logo Tereso full (montagnine + scritta).
     Asset `tereso-logo-full.png` (colori orange/navy). Su hero scuro
     viene reso silhouette bianca via `brightness(0) invert(1)`; su
     paper-white (`.shell-app--no-hero`) resta a colori naturali.
   - `.org-logo`     : logo dell'organization tenant, usato se presente
     (US-004 #86). Stile inline nel template per `max-height` (non DS).
   ----------------------------------------------------------------------------- */
.app-branding {
  position: absolute;
  top: 30px;
  left: 72px;
  z-index: 10;
  height: 67px;
  display: flex;
  align-items: center;
}
.shell-app--no-hero .app-branding {
  position: relative;
  top: 0;
  left: 0;
  height: auto;
  padding: var(--space-7) 0 0 var(--space-7);
}
.app-wordmark {
  display: block;
  height: 44px;
  width: auto;
  filter: brightness(0) invert(1);
}
.shell-app--no-hero .app-wordmark {
  filter: none;
}

/* -----------------------------------------------------------------------------
   .btn — bottoni
   Base h:56 pill (var(--r-pill)), 4 varianti: primary, glass, ghost, outline.
   Audit visivo 2026-05-13: radius pill (era 14px) per matchare DS Figma.
   ----------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 0 24px;
  border-radius: var(--r-pill);
  border: none;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--size-body-sm);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.btn:focus-visible {
  outline: 2px solid var(--tereso-orange);
  outline-offset: 2px;
}
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn--primary {
  background: var(--tereso-orange);
  color: var(--fg-on-dark);
}
.btn--primary:hover {
  opacity: 0.92;
}
.btn--glass {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  color: var(--fg-on-dark);
}
.btn--ghost {
  background: rgba(142, 142, 147, 0.4);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  color: var(--fg-on-dark);
}
.btn--outline {
  background: transparent;
  color: var(--tereso-orange);
  border: 2px solid var(--tereso-orange);
}

/* -----------------------------------------------------------------------------
   .form-field — campo form (input + label + error)
   Input r:12, border --tereso-line, focus border --tereso-orange.
   Label sopra. Error sotto in rosso (--danger).
   ----------------------------------------------------------------------------- */
.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.form-field__label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--size-caption);
  color: var(--fg);
}
.form-field__input {
  height: 48px;
  padding: 0 var(--space-4);
  border-radius: var(--r-m);
  border: 1px solid var(--tereso-line);
  background: var(--bg-elevated);
  color: var(--fg-2);
  font-family: var(--font-sans);
  font-size: var(--size-body-sm);
  transition: border-color var(--dur-base) var(--ease-out);
}
.form-field__input:focus {
  outline: none;
  border-color: var(--tereso-orange);
}
.form-field--error .form-field__input {
  border-color: var(--danger);
}
.form-field__error {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--size-caption);
  color: var(--danger);
}

/* -----------------------------------------------------------------------------
   .card — superficie elevata generica
   Variante `paper` (default): warm-paper bg, radius 20, no border, shadow-card.
   Variante `navy`: superficie scura per dark surfaces.
   Renderizzata anche come `<a>` (cliccabile): ereditiamo color e text-decoration.
   ----------------------------------------------------------------------------- */
.card {
  display: block;
  border-radius: var(--r-l);
  border: none;
  padding: var(--space-5);
  box-shadow: var(--shadow-card);
  color: inherit;
  text-decoration: none;
}
.card--paper {
  background: var(--tereso-paper-3);
  color: var(--fg);
}
.card--navy {
  background: var(--tereso-navy);
  color: var(--fg-on-dark);
}

/* -----------------------------------------------------------------------------
   .content-tile — tile catalogo (pillola / corso / categoria)
   Card 294x166 (desktop) con thumbnail/gradient, flag categoria
   bottom-sinistra, titolo medium navy + durata. Hover lift -3px.
   Niente rating ★ (C3 risolto US-004: BR4.5).
   ----------------------------------------------------------------------------- */
.content-tile {
  display: flex;
  flex-direction: column;
  width: 294px;
  text-decoration: none;
  color: inherit;
  flex: 0 0 auto;
  transition: transform var(--dur-base) var(--ease-out);
}
.content-tile:hover {
  transform: translateY(-3px);
}
.content-tile__media {
  position: relative;
  width: 294px;
  height: 166px;
  border-radius: var(--r-l);
  background-color: var(--tereso-navy);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.content-tile__flag {
  position: absolute;
  left: 41px;
  bottom: 0;
  height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 5px 5px 0 0;
  background: var(--tereso-green);
  color: var(--fg-on-dark);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--size-micro);
  line-height: 1;
  white-space: nowrap;
}
.content-tile__title {
  margin: 12px 0 4px 0;
  min-height: 46px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--size-body);
  line-height: 1.25;
  color: var(--tereso-navy);
}
.content-tile__meta {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--size-caption);
  color: var(--tereso-navy);
}

/* -----------------------------------------------------------------------------
   .content-shelf — scaffale orizzontale di content-tile
   Section padding 40 72 0; header con titolo h3 + 2 arrow circolari;
   track flex con scroll-snap-type:x mandatory; gap 18.
   ----------------------------------------------------------------------------- */
.content-shelf {
  padding: 40px 72px 0;
}
.content-shelf__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-5);
}
.content-shelf__title {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--size-h3);
  line-height: 1.2;
  color: var(--fg);
}
.content-shelf__nav {
  display: flex;
  gap: var(--space-2);
}
.content-shelf__nav-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--r-pill);
  border: none;
  background: var(--bg-elevated);
  color: var(--fg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: opacity var(--dur-fast) var(--ease-out);
}
.content-shelf__nav-btn:hover {
  opacity: 0.85;
}
.content-shelf__nav-btn:focus-visible {
  outline: 2px solid var(--tereso-orange);
  outline-offset: 2px;
}
.content-shelf__track {
  display: flex;
  flex-direction: row;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: var(--space-4);
}
.content-shelf__track > .content-tile {
  scroll-snap-align: start;
}
.content-shelf__empty {
  margin: 0;
  padding: var(--space-7);
  text-align: center;
  font-family: var(--font-sans);
  font-size: var(--size-body-sm);
  color: var(--fg-3);
  background: var(--tereso-paper-3);
  border-radius: var(--r-l);
  box-shadow: var(--shadow-card);
}

/* -----------------------------------------------------------------------------
   .category-grid + .category-card — grid card categorie (catalogo root)
   US-007 [UI] (issue #120). Grid responsivo di card grandi categoria sulla
   pagina `/catalog/`. Padding orizzontale 65px desktop come da AC.
   `repeat(auto-fit, minmax(320px, 1fr))` come baseline responsiva: desktop
   wide -> 3 colonne, tablet -> 2, mobile -> 1. Fine-tuning per breakpoint
   (>=1280 / 768-1279 / <768) e' rimandato a US-017 (responsive globale).
   .category-card: r:20, paper bg, shadow card, strip top color-flag (h:8px,
   colore dal TOML `[ui.category_colors]`), hover translate(-3px) + shadow
   incrementata.
   ----------------------------------------------------------------------------- */
.catalog-header {
  padding: var(--space-9) 65px var(--space-7);
}
.catalog-header__intro {
  margin: var(--space-4) 0 0 0;
  color: var(--fg-2);
}
.category-grid {
  padding: 0 65px var(--space-9);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-6);
}
.category-grid--empty {
  grid-template-columns: minmax(320px, 480px);
  justify-content: center;
}
.category-card {
  display: flex;
  flex-direction: column;
  background: var(--tereso-paper-3);
  border-radius: var(--r-l);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.category-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-l);
}
.category-card__strip {
  display: block;
  height: 8px;
  width: 100%;
  background: var(--tereso-green);
}
.category-card__body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.category-card__title {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--size-h3);
  line-height: 1.2;
  color: var(--fg);
}
.category-card__count {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--size-caption);
  color: var(--fg-3);
}
.category-card--empty {
  cursor: default;
}
.category-card--empty:hover {
  transform: none;
  box-shadow: var(--shadow-card);
}

/* -----------------------------------------------------------------------------
   .hero-episode — hero full-bleed (home/episode)
   Section relative h:680 desktop; fill navy solido (no immagine, no gradient
   — audit visivo 2026-05-13). Title block absolute left:72 top:240,
   max-width 560, color white.
   ----------------------------------------------------------------------------- */
.hero-episode {
  position: relative;
  width: 100%;
  height: 880px;
  background: var(--tereso-navy);
}
.hero-episode__inner {
  position: absolute;
  left: 72px;
  top: 240px;
  max-width: 560px;
  color: var(--fg-on-dark);
}
.hero-episode__eyebrow {
  margin: 0 0 var(--space-3) 0;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--size-micro);
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: 0.85;
  color: var(--fg-on-dark);
}
.hero-episode__title {
  margin: 0 0 var(--space-4) 0;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 76px;
  line-height: 1.05;
  letter-spacing: -1px;
  color: var(--fg-on-dark);
}
.hero-episode__subtitle {
  margin: 0 0 var(--space-6) 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.4;
  opacity: 0.9;
  color: var(--fg-on-dark);
}
.hero-episode__cta {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* -----------------------------------------------------------------------------
   .auth-card — form glass card cinema (US-005 #118)
   Card centrata 480px max-width, glass bg + backdrop-blur, padding 56,
   radius 20, 1px solid rgba(white,0.12). Contiene titolo h1 + form +
   footer link. Tipografia bianca per leggibilita' sopra cinema-black.
   ----------------------------------------------------------------------------- */
.auth-card {
  width: 100%;
  max-width: 480px;
  padding: var(--space-9);
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: var(--r-l);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--fg-on-dark);
}
.auth-card .auth-page__title {
  margin: 0 0 var(--space-6) 0;
}
.auth-card .auth-page__title h1 {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--size-h2);
  line-height: var(--lh-tight);
  color: var(--fg-on-dark);
}
/* Override delle form-field label/input perche' su cinema-black servono
   colori invertiti (label bianco opacity, input bianco semitrasparente). */
.auth-card .form-field__label {
  color: var(--fg-on-dark);
  opacity: 0.85;
  font-size: var(--size-body-sm);
}
.auth-card .form-field__input {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--fg-on-dark);
}
.auth-card .form-field__input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}
.auth-card .btn {
  width: 100%;
}
.auth-card__footer {
  margin-top: var(--space-5);
  text-align: center;
}
.auth-card__footer a {
  color: var(--fg-on-dark);
  opacity: 0.7;
  text-decoration: none;
  font-size: var(--size-body-sm);
}
.auth-card__footer a:hover {
  opacity: 1;
}
/* Layout minimale verify_error: icona + messaggio + bottone glass. */
.auth-card--minimal {
  text-align: center;
}
.auth-card--minimal .auth-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: var(--space-5);
  color: var(--danger);
}
.auth-card--minimal .auth-card__message {
  margin: 0 0 var(--space-6) 0;
  font-size: var(--size-body-sm);
  color: var(--fg-on-dark);
  opacity: 0.85;
}

/* -----------------------------------------------------------------------------
   .flashes / .flash — toast flottante top-center (FIX-010: estese a shell-app)
   Regole base condivise fra cinema (auth pages) e app (autenticato). Le
   varianti `.shell-cinema .flash` aggiungono il glass scuro tipico delle
   pagine cinema (sfondo nero); su `.shell-app` (paper-white) i flash usano
   bordo + tinta della categoria, leggibili senza overlay.
   ----------------------------------------------------------------------------- */
.flashes {
  list-style: none;
  margin: 0;
  padding: 0;
  position: fixed;
  top: var(--space-5);
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: min(480px, calc(100% - var(--space-8)));
}
.flash {
  margin: 0;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--r-m);
  font-size: var(--size-body-sm);
  text-align: center;
  background: var(--bg-elevated);
  border: 1px solid var(--tereso-line);
  color: var(--fg);
  box-shadow: var(--shadow-m);
}
.flash-error {
  border-color: var(--danger);
  color: var(--danger);
}
.flash-success {
  border-color: var(--success);
  color: var(--success);
}
.flash-info {
  border-color: var(--info);
  color: var(--info);
}
/* Cinema override: glass scuro per leggibilita' su sfondo nero. */
.shell-cinema .flash {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--fg-on-dark);
  box-shadow: none;
}
.shell-cinema .flash-error { border-color: var(--danger); color: var(--fg-on-dark); }
.shell-cinema .flash-success { border-color: var(--success); color: var(--fg-on-dark); }
.shell-cinema .flash-info { border-color: var(--info); color: var(--fg-on-dark); }

/* -----------------------------------------------------------------------------
   .course-header — header pagina dettaglio corso (US-009 [UI] #122)
   Card paper con strip top color-flag categoria (h:8), h1 + body description,
   meta strip (count pillole + durata + flag categoria), progress bar lineare
   pillole completate, eventuale badge "Certificato ottenuto" + CTA download.
   Pattern coerente con `.catalog-detail-header` (layouts.css) ma piu' ricco
   per il livello corso: la composizione e' specifica del pattern di pagina
   "course detail" (l'header categoria resta in layouts.css come pattern
   distinto). Riusabile anche da US-010 (header pillola con stessa anatomia
   strip+h1+meta+progress).
   ----------------------------------------------------------------------------- */
.course-header {
  margin: var(--space-5) 65px var(--space-7);
  background: var(--tereso-paper-3);
  border-radius: var(--r-l);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.course-header__strip {
  display: block;
  height: 8px;
  width: 100%;
  background: var(--tereso-green);
}
.course-header__body {
  padding: var(--space-7) var(--space-7) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.course-header__intro {
  margin: 0;
  color: var(--fg-2);
}
.course-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin: 0;
}
.course-meta__item {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--size-caption);
  color: var(--fg-3);
}
.course-meta__flag {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 var(--space-3);
  border-radius: var(--r-pill);
  background: var(--tereso-green);
  color: var(--fg-on-dark);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--size-micro);
  line-height: 1;
}
.course-progress {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
}
.course-progress-bar,
.course-progress__bar {
  height: 10px;
  width: 100%;
  border-radius: var(--r-pill);
  background: var(--tereso-line);
  overflow: hidden;
}
.course-progress__fill {
  display: block;
  height: 100%;
  background: var(--tereso-orange);
  border-radius: var(--r-pill);
  transition: width var(--dur-base) var(--ease-out);
}
.course-progress__label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--size-caption);
  color: var(--fg-2);
}
.course-certificate {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
}
.course-certificate__badge {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 var(--space-3);
  border-radius: var(--r-pill);
  background: var(--success);
  color: var(--fg-on-dark);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--size-caption);
}
.course-certificate__cta {
  color: var(--fg-link);
  text-decoration: none;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--size-body-sm);
}
.course-certificate__cta:hover {
  text-decoration: underline;
}

/* -----------------------------------------------------------------------------
   .content-tile--completed — variante tile pillola completata (FIX-003).
   Stato "completato dall'utente" gestito direttamente dalla macro
   `content_tile` via parametro `completed_badge_label`. Effetto:
   thumbnail opacizzata + badge inline in alto a destra della media.
   ----------------------------------------------------------------------------- */
.content-tile--completed .content-tile__media {
  opacity: 0.55;
}
.content-tile__badge-completed {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 var(--space-3);
  border-radius: var(--r-pill);
  background: var(--success);
  color: var(--fg-on-dark);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--size-micro);
  line-height: 1;
  pointer-events: none;
}

/* -----------------------------------------------------------------------------
   .tools-section + .tools-list + .tool-row — strumenti del corso (US-009 #122)
   Sezione sotto la shelf pillole: titolo h2 + card list verticale (1 tool per
   riga) o empty state. Ogni `.tool-row` ha icona Lucide a sinistra (tipo
   risorsa: PDF/Excel/Word generic), nome + descrizione al centro, CTA outline
   "Scarica" a destra. Riusabile da US-010 (tools della pillola) con la stessa
   anatomia.
   ----------------------------------------------------------------------------- */
.tools-section {
  margin: var(--space-7) 65px var(--space-9);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.tools-section__title {
  margin: 0;
}
.tools-section__empty {
  margin: 0;
  padding: var(--space-7);
  text-align: center;
  font-family: var(--font-sans);
  font-size: var(--size-body-sm);
  color: var(--fg-3);
  background: var(--tereso-paper-3);
  border-radius: var(--r-l);
  box-shadow: var(--shadow-card);
}
.tools-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.tool-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  background: var(--tereso-paper-3);
  border-radius: var(--r-l);
  box-shadow: var(--shadow-card);
}
.tool-row__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-m);
  background: var(--tereso-fog);
  color: var(--fg);
}
.tool-row__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}
.tool-row__name {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--size-body);
  color: var(--fg);
}
.tool-row__desc {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--size-body-sm);
  color: var(--fg-2);
}
.tool-row__cta {
  flex: 0 0 auto;
}

/* -----------------------------------------------------------------------------
   .episode-page — pattern di pagina pillola (US-010 [UI] #123)
   Composizione: breadcrumb (in layouts.css) + header pillola (riusa
   `.course-header`) + player Mux wrappato (`.episode-player-wrapper`) +
   CTA quiz card (`.episode-quiz-cta`) + sezione tools (`.tools-section`).
   La `.episode-meta-strip` e' una variante della `.course-meta` con stesso
   layout flex wrap: il modificatore esiste per consentire eventuali tweak
   minori (allineamento posizione "N di M" rispetto a duration + flag) senza
   forkare la regola condivisa.
   ----------------------------------------------------------------------------- */
.episode-page {
  display: flex;
  flex-direction: column;
}
.episode-player-wrapper {
  margin: 0 65px;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  width: calc(100% - 130px);
  aspect-ratio: 16 / 9;
  border-radius: var(--r-l);
  overflow: hidden;
  box-shadow: var(--shadow-l);
  background: var(--tereso-navy);
}
.episode-player-wrapper--status {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tereso-paper-3);
  color: var(--fg-2);
}
.episode-player-wrapper--danger {
  background: var(--tereso-paper-3);
  color: var(--danger);
}
.episode-status-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-7);
  text-align: center;
  max-width: 480px;
}
.episode-status-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  color: inherit;
}
.episode-status-card__message {
  margin: 0;
  color: inherit;
}

/* -----------------------------------------------------------------------------
   .episode-quiz-cta — card "Fai il quiz" sotto al player (US-010 #123)
   Visibile solo se `is_completed=true` E `quiz_id` esiste (gate D-CERT-AGGREGATO).
   Layout flex row con titolo+body a sinistra e bottone primary a destra.
   ----------------------------------------------------------------------------- */
.episode-quiz-cta {
  margin: var(--space-6) 65px 0;
  padding: var(--space-6) var(--space-7);
  background: var(--tereso-paper-3);
  border-radius: var(--r-l);
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}
.episode-quiz-cta__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}
.episode-quiz-cta__title {
  margin: 0;
}
.episode-quiz-cta__intro {
  margin: 0;
  color: var(--fg-2);
}

/* -----------------------------------------------------------------------------
   .quiz-* — player quiz (US-011 [UI] #124)
   Refactor del CSS inline di `quiz/take.html` + stilizzazione `quiz/result.html`.
   Card paper 20r shadow-card padding 40, opzioni listbox custom con radio
   nascosto, card flip Sprout (D-QUIZ-EXPLAIN) con animation `quiz-flip-in`
   sull'explanation panel. Tutte le regole riusate da take e result.
   ----------------------------------------------------------------------------- */
.quiz-page {
  margin: var(--space-5) 65px var(--space-9);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.quiz-page__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.quiz-progress {
  margin: 0;
}
.quiz-question {
  background: var(--tereso-paper-3);
  border-radius: var(--r-l);
  box-shadow: var(--shadow-card);
  padding: 40px;
  border: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.quiz-question[hidden] { display: none; }
.quiz-question legend { padding: 0; margin-bottom: var(--space-3); }
.quiz-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.quiz-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.quiz-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--bg-elevated);
  border: 2px solid var(--tereso-line);
  border-radius: var(--r-m);
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-out);
}
.quiz-option:hover { border-color: var(--tereso-line-3); }
.quiz-option:has(input[type="radio"]:checked) {
  border-color: var(--warning);
}
.quiz-option input[type="radio"] { accent-color: var(--warning); }
/* Card flip stile Sprout (D-QUIZ-EXPLAIN): dopo la risposta evidenziamo la
   corretta in verde (`--success`) e opacizziamo le errate non scelte. */
.quiz-question[data-locked="true"] .quiz-option { cursor: default; }
.quiz-question[data-locked="true"] .quiz-option--correct {
  border-color: var(--success);
  background: rgba(64, 185, 24, 0.08);
}
.quiz-question[data-locked="true"] .quiz-option:not(.quiz-option--correct):not(:has(input[type="radio"]:checked)) {
  opacity: 0.55;
}
.quiz-explanation {
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: var(--bg-elevated);
  border: 1px solid var(--success);
  border-radius: var(--r-m);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  animation: quiz-flip-in var(--dur-base) var(--ease-out);
}
.quiz-explanation[hidden] { display: none; }
.quiz-explanation__correct {
  font-weight: 600;
  color: var(--success);
}
.quiz-explanation__rationale-title {
  font-weight: 600;
  margin: 0;
}
.quiz-explanation__rationale-text {
  margin: 0;
  color: var(--fg-2);
}
@keyframes quiz-flip-in {
  from { opacity: 0; transform: rotateX(-20deg); }
  to   { opacity: 1; transform: rotateX(0); }
}
.quiz-nav {
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
  align-items: center;
  margin-top: var(--space-5);
}
.quiz-nav .btn[hidden] { display: none; }
.quiz-empty {
  padding: var(--space-7);
  text-align: center;
  color: var(--fg-3);
  background: var(--tereso-paper-3);
  border-radius: var(--r-l);
  box-shadow: var(--shadow-card);
}

/* Result page — card centrata con badge esito + recap + (opzionale) lista
   domande di review (riusa `.quiz-explanation`). */
.quiz-result__card {
  background: var(--tereso-paper-3);
  border-radius: var(--r-l);
  box-shadow: var(--shadow-card);
  padding: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
}
.quiz-result__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: var(--r-pill);
}
.quiz-result__icon--passed {
  background: rgba(64, 185, 24, 0.12);
  color: var(--success);
}
.quiz-result__icon--failed {
  background: rgba(255, 122, 0, 0.12);
  color: var(--warning);
}
.quiz-result__status {
  margin: 0;
}
.quiz-result__status--passed { color: var(--success); }
.quiz-result__status--failed { color: var(--warning); }
.quiz-result__recap {
  margin: 0;
  color: var(--fg-2);
}
.quiz-result__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--space-3);
}
.quiz-result__review {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.quiz-result__review-title {
  margin: 0;
}
.quiz-result__review-item {
  background: var(--tereso-paper-3);
  border-radius: var(--r-l);
  box-shadow: var(--shadow-card);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.quiz-result__review-question {
  margin: 0;
}

/* -----------------------------------------------------------------------------
   .certificate-grid + .certificate-card — lista certificati (US-012 #125)
   Pagina "I miei certificati": grid responsivo di card autonome (D-FIDELITY
   = C-modificato: la pagina non e' rappresentata nel DS, ma il pattern card
   replica il look DS — paper bg, r:20, shadow-card, palette Tereso).
   Breakpoint: desktop wide >=1280 -> 3 colonne; tablet 768-1279 -> 2;
   mobile <768 -> 1 (US-017 finalizzera' il responsive globale, qui i
   breakpoint sono gia' espliciti come da AC).
   .certificate-card: padding 32, gap interno per stack verticale, CTA
   primary in coda allineata sinistra. Icona Lucide `award` 48px in box
   r:12 con bg orange-soft + color orange.
   ----------------------------------------------------------------------------- */
.certificate-grid {
  padding: 0 65px var(--space-9);
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .certificate-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1280px) {
  .certificate-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.certificate-grid--empty {
  grid-template-columns: minmax(320px, 480px);
  justify-content: center;
}
@media (min-width: 768px) {
  .certificate-grid--empty {
    grid-template-columns: minmax(320px, 480px);
  }
}
@media (min-width: 1280px) {
  .certificate-grid--empty {
    grid-template-columns: minmax(320px, 480px);
  }
}
.certificate-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-7);
  background: var(--tereso-paper-3);
  border-radius: var(--r-l);
  box-shadow: var(--shadow-card);
}
.certificate-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--r-m);
  background: var(--tereso-orange-soft);
  color: var(--tereso-orange);
  margin-bottom: var(--space-2);
}
.certificate-card__icon svg {
  width: 28px;
  height: 28px;
}
.certificate-card__meta {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--size-body-sm);
  color: var(--fg-3);
}
.certificate-card .btn {
  align-self: flex-start;
  margin-top: var(--space-2);
}
.certificate-card--empty {
  align-items: center;
  text-align: center;
  gap: var(--space-4);
}
.certificate-card--empty .btn {
  align-self: center;
}

/* -----------------------------------------------------------------------------
   .coach-grid + .coach-card — lista coach sessioni 1:1 (US-013 [UI] #126)
   Refactor del CSS inline di `templates/sessions/list.html` al pattern DS.
   D-FIDELITY = C-modificato: pagina non rappresentata nel DS; il pattern card
   replica il look DS (paper bg, r:20, shadow-m, palette Tereso).
   Breakpoint: desktop wide >=1280 -> 3 colonne; tablet 768-1279 -> 2; mobile
   <768 -> 1 (allineato a .certificate-grid, US-017 finalizzera' il responsive
   globale).
   .coach-card: paper bg, r:20, shadow-m, foto circolare 120x120, nome h3,
   titolo body fg-3, chips pill orange-soft/navy, hover translateY(-3px).
   ----------------------------------------------------------------------------- */
.coach-grid {
  padding: 0 65px var(--space-9);
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .coach-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1280px) {
  .coach-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.coach-grid--empty {
  grid-template-columns: minmax(320px, 480px);
  justify-content: center;
}
@media (min-width: 768px) {
  .coach-grid--empty {
    grid-template-columns: minmax(320px, 480px);
  }
}
@media (min-width: 1280px) {
  .coach-grid--empty {
    grid-template-columns: minmax(320px, 480px);
  }
}
.coach-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--tereso-paper-3);
  border-radius: var(--r-l);
  box-shadow: var(--shadow-m);
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur-base) var(--ease-out);
}
.coach-card:hover {
  transform: translateY(-3px);
}
.coach-card__photo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--tereso-paper-2);
}
.coach-card__name {
  margin: 0;
  text-align: center;
}
.coach-card__title {
  margin: 0;
  color: var(--fg-3);
  text-align: center;
}
.coach-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
  margin: var(--space-2) 0 0 0;
  padding: 0;
  list-style: none;
}
.coach-card__chip {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--r-pill);
  background: var(--tereso-orange-soft);
  color: var(--tereso-navy);
  font-family: var(--font-sans);
  font-size: var(--size-caption);
}
.coach-empty {
  padding: var(--space-7);
  text-align: center;
  color: var(--fg-3);
  background: var(--tereso-paper-3);
  border-radius: var(--r-l);
  box-shadow: var(--shadow-card);
}

/* -----------------------------------------------------------------------------
   .coach-detail-header + .slot-day-card + .slot-chips — dettaglio coach +
   slot picker prenotazione (US-014 [UI] #127). Refactor del CSS inline di
   `templates/sessions/detail.html` al pattern DS.
   D-FIDELITY = C-modificato: pagina non rappresentata nel DS; il pattern
   slot picker (lista-slot-per-giorno) e' disegnato autonomamente nel look DS
   (card paper, chips orari, btn primary).
   .coach-detail-header: layout orizzontale (foto 160x160 sinistra + body
   destro), paddings allineati a .catalog-detail-header (65px laterali).
   Su mobile il layout collassa a colonna (foto sopra, body sotto), allineato
   al pattern responsive .coach-card.
   .slot-day-card: card paper r:20 shadow-card padding 24, header con data
   formato italiano (es. "Lunedi 15 maggio") e lista chip orari sotto.
   .slot-chip: button h:48 r:pill, border --tereso-line, hover border
   --tereso-orange. Ogni chip e' avvolto in proprio <form> POST per minimizzare
   il JS lato client (no JS: il browser invia direttamente lo slot specifico).
   ----------------------------------------------------------------------------- */
.coach-detail-header {
  display: flex;
  gap: var(--space-6);
  align-items: flex-start;
  margin: var(--space-5) 65px var(--space-7);
}
@media (max-width: 767px) {
  .coach-detail-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}
.coach-detail-header__photo {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--tereso-paper-2);
  flex-shrink: 0;
}
.coach-detail-header__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.coach-detail-header__name {
  margin: 0;
  color: var(--fg);
}
.coach-detail-header__title {
  margin: 0;
  color: var(--fg-3);
}
.coach-detail-header__description {
  margin: 0;
  color: var(--fg);
  white-space: pre-line;
}
.coach-detail-header__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-2) 0 0 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 767px) {
  .coach-detail-header__chips {
    justify-content: center;
  }
}
.coach-detail-header__chip {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--r-pill);
  background: var(--tereso-orange-soft);
  color: var(--tereso-navy);
  font-family: var(--font-sans);
  font-size: var(--size-caption);
}

.slot-picker-section {
  padding: 0 65px var(--space-9);
}
.slot-picker-section__title {
  margin: 0 0 var(--space-3) 0;
  color: var(--fg);
}
.slot-picker-section__subtitle {
  margin: 0 0 var(--space-6) 0;
  color: var(--fg-3);
}

.slot-day-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.slot-day-card {
  background: var(--tereso-paper-3);
  border-radius: var(--r-l);
  box-shadow: var(--shadow-card);
  padding: var(--space-6);
}
.slot-day-card__header {
  margin: 0 0 var(--space-4) 0;
  color: var(--fg);
}
.slot-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  list-style: none;
  padding: 0;
  margin: 0;
}
.slot-chips form {
  margin: 0;
}
.slot-chip {
  height: 48px;
  padding: 0 var(--space-5);
  border: 1px solid var(--tereso-line);
  border-radius: var(--r-pill);
  background: var(--bg-elevated);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--size-body-sm);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.slot-chip:hover {
  border-color: var(--tereso-orange);
}
.slot-chip:focus-visible {
  outline: 2px solid var(--tereso-orange);
  outline-offset: 2px;
}

.slot-picker-empty {
  padding: var(--space-7);
  text-align: center;
  color: var(--fg-3);
  background: var(--tereso-paper-3);
  border-radius: var(--r-l);
  box-shadow: var(--shadow-card);
}

/* -----------------------------------------------------------------------------
   .booking-section + .booking-list + .booking-card — lista "Le tue sessioni"
   (US-015 [UI] #128). Refactor del CSS inline di
   `templates/sessions/my_bookings.html` al pattern DS.
   D-FIDELITY = C-modificato: pagina non rappresentata nel DS, il pattern
   booking-card e' disegnato autonomamente nel look DS (paper bg, r:20,
   shadow-card, palette Tereso). Booking card layout orizzontale: foto coach
   80x80 a sinistra + info al centro (nome, data, durata, badge) + CTA primary
   "Apri Google Meet" a destra (solo per upcoming con meeting_url).
   Collapse "passate" via `<details>`: chevron rotato a 90deg quando aperto.
   ----------------------------------------------------------------------------- */
.booking-section {
  padding: 0 65px var(--space-7);
}
.booking-section__title {
  margin: 0 0 var(--space-5) 0;
  color: var(--fg);
}
.booking-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.booking-list--empty {
  align-items: center;
}
.booking-card {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-6);
  background: var(--tereso-paper-3);
  border-radius: var(--r-l);
  box-shadow: var(--shadow-card);
}
@media (max-width: 767px) {
  .booking-card {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }
}
.booking-card__photo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--tereso-paper-2);
  flex-shrink: 0;
}
.booking-card__info {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}
.booking-card__info h3,
.booking-card__info h4 {
  margin: 0;
}
.booking-card__info h4 {
  color: var(--fg-2);
}
.booking-card__meta {
  margin: 0;
  color: var(--fg-3);
}
.booking-card .btn {
  flex-shrink: 0;
  align-self: center;
}
@media (max-width: 767px) {
  .booking-card .btn {
    align-self: stretch;
  }
}

/* Variante "past": opacita' leggera per indicare "consumato", coerente con
   `.content-tile--completed`. */
.booking-card--past {
  opacity: 0.85;
}
.booking-card--past .booking-card__photo {
  opacity: 0.7;
}

/* Empty state Prossime: stessa anatomia delle altre empty-card del progetto
   (`.certificate-card--empty`, `.coach-empty`). Icona Lucide arancione in
   box r:12, copy centrato, CTA primary verso la lista coach. */
.booking-card--empty {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-4);
  padding: var(--space-7);
  max-width: 480px;
  width: 100%;
}
.booking-card__empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--r-m);
  background: var(--tereso-orange-soft);
  color: var(--tereso-orange);
}
.booking-card__empty-icon svg {
  width: 28px;
  height: 28px;
}

/* Badge stato: 3 colori brand (upcoming arancione, past verde, cancelled
   rosso). `align-self: flex-start` per non stirarsi nella colonna flex. */
.booking-status-badge {
  align-self: flex-start;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--r-pill);
  color: var(--fg-on-dark);
  font-family: var(--font-sans);
  font-size: var(--size-caption);
  font-weight: 600;
  line-height: 1.4;
}
.booking-status-badge--upcoming {
  background: var(--tereso-orange);
}
.booking-status-badge--past {
  background: var(--success);
}
.booking-status-badge--cancelled {
  background: var(--danger);
}

/* Collapse "passate" via `<details>` nativo. Summary stilizzato come riga
   cliccabile (pill paper) con chevron a destra che ruota a 90deg quando
   aperto (pseudo-elemento `::after` con icona Unicode per non dipendere da
   Lucide initialization su summary nativi). */
.bookings-past-toggle {
  background: var(--tereso-paper-3);
  border-radius: var(--r-l);
  box-shadow: var(--shadow-card);
  padding: var(--space-5) var(--space-6);
}
.bookings-past-toggle[open] {
  padding-bottom: var(--space-6);
}
.bookings-past-toggle__summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  color: var(--fg);
}
.bookings-past-toggle__summary::-webkit-details-marker {
  display: none;
}
.bookings-past-toggle__summary::after {
  content: "›";
  font-size: 24px;
  line-height: 1;
  color: var(--fg-3);
  transform: rotate(0deg);
  transition: transform var(--dur-fast) var(--ease-out);
}
.bookings-past-toggle[open] .bookings-past-toggle__summary::after {
  transform: rotate(90deg);
}
.bookings-past-toggle[open] .booking-list {
  margin-top: var(--space-5);
}
.bookings-past-toggle .booking-card {
  /* Quando le card sono dentro il collapse, lo sfondo paper della
     `.bookings-past-toggle` gia' fornisce la superficie: rimuoviamo lo
     shadow-card per evitare double elevation. */
  box-shadow: none;
  background: var(--bg-elevated);
}

/* -----------------------------------------------------------------------------
   .profile-section + .profile-quick-links + .profile-quick-link-card —
   pagina profilo (US-016 [UI] #129). 4 sezioni stack: anagrafica, consensi
   GDPR, quick links, account. D-FIDELITY = C-modificato: la pagina profilo
   non e' rappresentata nel DS; il pattern sezione/card replica il look DS
   (paper bg, r:20, shadow-card, padding 32, palette Tereso).
   .profile-section: card paper r:20 shadow-card padding 32 con header h3 +
   eventuale CTA (es. "Modifica" sull'anagrafica) allineata destra.
   .profile-consents: lista verticale (privacy l'unico item visibile, gli
   altri 4 nascosti per D-GDPR-CONSENSI-MIN).
   .profile-quick-links: grid 2 colonne desktop, 1 colonna mobile. Le card
   sono <a> intere cliccabili, hover lift -3px (coerente con .category-card).
   .profile-section--account: footer pagina con bottoni outline (cambia
   password + logout). I bottoni stanno in `.profile-section__actions`,
   layout flex con gap.
   ----------------------------------------------------------------------------- */
.profile-section {
  margin: 0 65px var(--space-6);
  padding: var(--space-7);
  background: var(--tereso-paper-3);
  border-radius: var(--r-l);
  box-shadow: var(--shadow-card);
}
.profile-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.profile-section__header h3 {
  margin: 0;
  color: var(--fg);
}
.profile-section__form {
  display: flex;
  flex-direction: column;
}
.profile-section__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin-top: var(--space-2);
}
.profile-section__logout-form {
  display: inline-flex;
  margin: 0;
}

/* Variante readonly del form-field: input visivamente "spento" (no border focus,
   bg leggermente piu' chiaro) per segnalare che il campo non e' editabile.
   Usata dalla macro `form_field` quando `readonly=True` (US-016 #129). */
.form-field--readonly .form-field__input {
  background: var(--tereso-paper-2);
  color: var(--fg-3);
  cursor: not-allowed;
}

/* Consensi GDPR (D-GDPR-CONSENSI-MIN: 1 visibile, 4 nascosti). Layout lista
   verticale: label sinistra, status destra. Stile minimal coerente con
   l'unica voce visibile (privacy). */
.profile-consents {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.profile-consents__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--tereso-line);
}
.profile-consents__item:last-child {
  border-bottom: none;
}
.profile-consents__label {
  font-family: var(--font-sans);
  font-weight: 500;
  color: var(--fg);
}
.profile-consents__status {
  font-family: var(--font-sans);
  color: var(--fg-3);
  font-size: var(--size-body-sm);
}

/* Quick links: grid responsivo (2 colonne desktop, 1 mobile). Card intere
   cliccabili (<a>), layout orizzontale icona + body, hover lift -3px. */
.profile-quick-links {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 768px) {
  .profile-quick-links {
    grid-template-columns: repeat(2, 1fr);
  }
}
.profile-quick-link-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--bg-elevated);
  border-radius: var(--r-m);
  box-shadow: var(--shadow-xs);
  color: inherit;
  text-decoration: none;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.profile-quick-link-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
}
.profile-quick-link-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--r-m);
  background: var(--tereso-orange-soft);
  color: var(--tereso-orange);
  flex-shrink: 0;
}
.profile-quick-link-card__icon svg {
  width: 24px;
  height: 24px;
}
.profile-quick-link-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}
.profile-quick-link-card__body h4 {
  margin: 0;
  color: var(--fg);
}
.profile-quick-link-card__sub {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--size-body-sm);
  color: var(--fg-3);
}

/* =============================================================================
   US-017 [UI] (#130) — Mobile responsive pass + hamburger drawer.
   Breakpoint definiti in `static/css/layouts.css` (`--bp-tablet=768px`,
   `--bp-desktop=1280px`). Le @media queries qui sotto coprono lo scaling dei
   componenti riusabili. Le regole pagina-level vivono in layouts.css; le
   regole grid (3/2/1 colonne) sono gia' in-place nei rispettivi blocchi
   `.certificate-grid`, `.coach-grid`, `.profile-quick-links` e qui sotto
   completiamo `.category-grid` (oggi auto-fit, AC chiede breakpoint espliciti).
   ============================================================================= */

/* -----------------------------------------------------------------------------
   .nav-pill — desktop >=768 (DS): pill 520x67. Mobile <768: nascosta
   (sostituita dall'hamburger trigger del layout, vedi `.nav-hamburger`).
   ----------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .nav-pill {
    display: none;
  }
}

/* -----------------------------------------------------------------------------
   .nav-hamburger — trigger mobile-only. Icona Lucide `menu` 24x24 dentro un
   bottone glass piccolo r:pill p:8. Posizione absolute top-right, allineata
   come la nav-pill desktop ma a destra invece che centro. Visibile solo
   mobile <768 (su desktop la nav-pill standard prende il posto).
   ----------------------------------------------------------------------------- */
.nav-hamburger {
  display: none;
}
@media (max-width: 767px) {
  .nav-hamburger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: var(--space-5);
    right: var(--space-5);
    width: 40px;
    height: 40px;
    padding: 8px;
    border: none;
    border-radius: var(--r-pill);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    color: var(--fg-on-dark);
    cursor: pointer;
    z-index: 10;
  }
  .nav-hamburger svg {
    width: 24px;
    height: 24px;
  }
  .nav-hamburger:focus-visible {
    outline: 2px solid var(--tereso-orange);
    outline-offset: 2px;
  }
}

/* -----------------------------------------------------------------------------
   .nav-drawer — overlay full-viewport (rgba(0,0,0,0.7)) con drawer right
   slide-in 280px wide, bg navy, padding 32. Lista verticale voci con icone
   Lucide. Default chiuso (`hidden`); JS toggle `nav_drawer.js` rimuove
   l'attributo per aprirlo.
   ----------------------------------------------------------------------------- */
.nav-drawer[hidden] {
  display: none;
}
.nav-drawer {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 100;
}
.nav-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 280px;
  padding: var(--space-7);
  background: var(--tereso-navy);
  color: var(--fg-on-dark);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  box-shadow: var(--shadow-l);
}
.nav-drawer__close {
  align-self: flex-end;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  color: var(--fg-on-dark);
  cursor: pointer;
  border-radius: var(--r-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nav-drawer__close:focus-visible {
  outline: 2px solid var(--tereso-orange);
  outline-offset: 2px;
}
.nav-drawer__close svg {
  width: 22px;
  height: 22px;
}
.nav-drawer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.nav-drawer__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--r-m);
  color: var(--fg-on-dark);
  text-decoration: none;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--size-body);
  opacity: 0.85;
}
.nav-drawer__item:hover {
  opacity: 1;
}
.nav-drawer__item svg {
  width: 20px;
  height: 20px;
}
.nav-drawer__item--active {
  opacity: 1;
  background: rgba(255, 130, 0, 0.18); /* tereso-orange 18% on navy surface */
  color: var(--fg-on-dark);
}
.nav-drawer__item--active::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 20px;
  background: var(--tereso-orange);
  border-radius: 2px;
  margin-right: var(--space-2);
}

/* -----------------------------------------------------------------------------
   .hero-episode — scaling per breakpoint (US-017 #130 AC).
   Desktop: h:680 padding-left:72 title 76px (gia' nelle regole base).
   Tablet : h:500 padding-left:48 title 56px.
   Mobile : h:400 padding-left:24 title 40px, max-width 100%.
   Sul title `__inner` cambia solo `left` e `top` (top scala con altezza
   per restare verticalmente ben centrato sul terzo basso dell'hero).
   ----------------------------------------------------------------------------- */
@media (max-width: 1279px) and (min-width: 768px) {
  .hero-episode {
    height: 500px;
  }
  .hero-episode__inner {
    left: 48px;
    top: 180px;
    max-width: 480px;
  }
  .hero-episode__title {
    font-size: 56px;
  }
}
@media (max-width: 767px) {
  .hero-episode {
    height: 400px;
  }
  .hero-episode__inner {
    left: 24px;
    right: 24px;
    top: 160px;
    max-width: 100%;
  }
  .hero-episode__title {
    font-size: 40px;
  }
  .hero-episode__subtitle {
    font-size: 17px;
  }
}

/* -----------------------------------------------------------------------------
   .content-tile — scaling per breakpoint.
   Desktop: 294x166 (regola base).
   Tablet : 240x135.
   Mobile : full-width (carosello scroll-snap mantiene scrolling orizzontale
            ma con 1 tile per viewport, "peek" del prossimo tramite max-width
            85% del container shelf).
   ----------------------------------------------------------------------------- */
@media (max-width: 1279px) and (min-width: 768px) {
  .content-tile,
  .content-tile__media {
    width: 240px;
  }
  .content-tile__media {
    height: 135px;
  }
}
@media (max-width: 767px) {
  .content-tile {
    width: 85%;
    max-width: 320px;
  }
  .content-tile__media {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }
}

/* -----------------------------------------------------------------------------
   .content-shelf — scaling per breakpoint.
   Padding: 72 desktop / 48 tablet / 24 mobile.
   Arrow buttons nascosti su mobile (scroll touch nativo).
   ----------------------------------------------------------------------------- */
@media (max-width: 1279px) and (min-width: 768px) {
  .content-shelf {
    padding: 40px 48px 0;
  }
}
@media (max-width: 767px) {
  .content-shelf {
    padding: var(--space-7) 24px 0;
  }
  .content-shelf__nav {
    display: none;
  }
}

/* -----------------------------------------------------------------------------
   .category-grid + .catalog-header — breakpoint espliciti (AC: 3/2/1 colonne).
   Override l'auto-fit delle regole base e allinea il padding al pattern del
   resto delle pagine (72/48/24 per breakpoint).
   ----------------------------------------------------------------------------- */
@media (max-width: 1279px) and (min-width: 768px) {
  .catalog-header {
    padding: var(--space-9) 48px var(--space-7);
  }
  .category-grid {
    padding: 0 48px var(--space-9);
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 767px) {
  .catalog-header {
    padding: var(--space-7) 24px var(--space-6);
  }
  .category-grid {
    padding: 0 24px var(--space-9);
    grid-template-columns: 1fr;
  }
}

/* -----------------------------------------------------------------------------
   Pattern card-list (course/episode/quiz/profile/sessions) — padding e margin
   per breakpoint. Le pagine consumer (catalog/course_detail.html,
   catalog/episode.html, profile/profile.html, sessions/*) usano `margin: ...
   65px ...` su `.course-header`, `.episode-quiz-cta`, `.tools-section`,
   `.quiz-page`, `.profile-section`, `.slot-picker-section`,
   `.coach-detail-header`, `.booking-section`. Su tablet/mobile riduciamo
   uniformemente i padding orizzontali allineati alla griglia 48/24.
   ----------------------------------------------------------------------------- */
@media (max-width: 1279px) and (min-width: 768px) {
  .course-header,
  .episode-quiz-cta,
  .tools-section,
  .quiz-page,
  .profile-section,
  .coach-detail-header {
    margin-left: 48px;
    margin-right: 48px;
  }
  .episode-player-wrapper {
    margin-left: 48px;
    margin-right: 48px;
    width: calc(100% - 96px);
  }
  .slot-picker-section,
  .booking-section,
  .certificate-grid,
  .coach-grid {
    padding-left: 48px;
    padding-right: 48px;
  }
}
@media (max-width: 767px) {
  .course-header,
  .episode-quiz-cta,
  .tools-section,
  .quiz-page,
  .profile-section,
  .coach-detail-header {
    margin-left: 24px;
    margin-right: 24px;
  }
  .episode-player-wrapper {
    margin-left: 24px;
    margin-right: 24px;
    width: calc(100% - 48px);
  }
  .slot-picker-section,
  .booking-section,
  .certificate-grid,
  .coach-grid {
    padding-left: 24px;
    padding-right: 24px;
  }
  /* Quiz: card domanda full-width, padding ridotto, button group sticky bottom.
     Le option sono gia' stack column nelle regole base (display: flex;
     flex-direction: column;), non richiedono override. */
  .quiz-question,
  .quiz-result__card {
    padding: var(--space-6);
  }
  .quiz-nav {
    position: sticky;
    bottom: 0;
    background: var(--bg);
    padding-top: var(--space-3);
    margin-left: calc(-1 * var(--space-3));
    margin-right: calc(-1 * var(--space-3));
    padding-left: var(--space-3);
    padding-right: var(--space-3);
    z-index: 5;
  }
  .quiz-nav .btn {
    flex: 1 1 auto;
  }
  /* Profile section padding ridotto. */
  .profile-section {
    padding: var(--space-6);
  }
  /* Auth pages cinema (gia' max-width 480 su .auth-card): su mobile usiamo
     90% width e riduciamo il padding interno (56 -> 32). */
  .auth-card {
    max-width: 90%;
    padding: var(--space-7);
  }
}

/* -----------------------------------------------------------------------------
   .search-bar — SearchBar globale (US-004, DRIFT-13 / issue #131).
   Container navy 1080x73 r:36 (DS Figma Homepage). Form GET con icona
   lucide `search` a SINISTRA dell'input (icon-first layout, coerente con
   SearchBar.jsx del DS). Full-width entro padding pagina su viewport
   stretti: `max-width:1080px; width:100%` invece di width fissa, padding
   orizzontale 0 24px.
   ----------------------------------------------------------------------------- */
.search-bar {
  max-width: 1080px;
  width: 100%;
  height: 73px;
  border-radius: var(--r-2xl);
  background: var(--tereso-navy);
  box-shadow: var(--shadow-l);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 24px;
  color: var(--fg-on-dark);
  margin: var(--space-8) auto 0;
  box-sizing: border-box;
}
.search-bar:focus-within {
  outline: 2px solid var(--tereso-orange);
  outline-offset: 2px;
}
.search-bar__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--fg-on-dark);
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.search-bar__submit:hover {
  opacity: 0.7;
}
.search-bar__submit:focus-visible {
  outline: 2px solid var(--tereso-orange);
  outline-offset: 4px;
  border-radius: 2px;
}
.search-bar__submit i[data-lucide] {
  width: 20px;
  height: 20px;
}
.search-bar__input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--fg-on-dark);
  font-family: var(--font-sans);
  font-size: var(--size-body-sm);
  font-weight: 500;
  caret-color: var(--tereso-orange);
}
.search-bar__input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}