/* FuzzyTV, stili. Design tokens e componenti dalla direzione visiva approvata (docs/direzione-visiva). */
/* =====================================================================
   DESIGN TOKENS (riusabili così come sono nel frontend di produzione)
   Tema "carta" (chiaro) e tema "inchiostro" (scuro).
   ===================================================================== */
:root,
[data-theme="light"] {
  color-scheme: light;
  --bg: #F3EEE4;            /* carta */
  --surface: #FAF7F1;       /* carta più chiara: campi, pannelli */
  --sunk: #E9E2D5;          /* incavi, skeleton, fondo locandina mancante */
  --ink: #1C1A16;           /* testo principale        15.0:1 su bg */
  --ink-2: #5B5348;         /* testo secondario         6.5:1 su bg */
  --ink-3: #6B6155;         /* metadati, didascalie     5.2:1 su bg */
  --rule: #D6CCBC;          /* filetti decorativi (non testo) */
  --line: #8A7F70;          /* bordi di controlli       3.4:1 su bg */
  --accent: #B0301F;        /* rosso proiettore         5.5:1 su bg */
  --accent-ink: #FFFFFF;    /* testo su accent          6.4:1 */
  --accent-soft: #F1DDD6;   /* fondo tenue per selezioni */
  --focus: #1F4E79;         /* anello di focus          7.5:1 su bg */
  --ok: #2F6B3A;
  --shadow: 0 1px 0 rgba(28,26,22,.06), 0 8px 24px -12px rgba(28,26,22,.25);
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.11 0 0 0 0 0.10 0 0 0 0 0.09 0 0 0 1.1 -0.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-opacity: .07;
}
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #15140F;            /* inchiostro */
  --surface: #1E1C17;
  --sunk: #0E0D0A;
  --ink: #EEE7D9;           /* 15.0:1 su bg */
  --ink-2: #B3A998;         /*  7.9:1 su bg */
  --ink-3: #978D7D;         /*  5.6:1 su bg */
  --rule: #34302A;
  --line: #6F675B;          /*  3.3:1 su bg */
  --accent: #EE6B55;        /*  6.0:1 su bg */
  --accent-ink: #15140F;    /*  6.0:1 su accent */
  --accent-soft: #3A1E18;
  --focus: #8EC5FF;         /* 10.2:1 su bg */
  --ok: #8CC79A;
  --shadow: 0 1px 0 rgba(0,0,0,.4), 0 10px 30px -12px rgba(0,0,0,.7);
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.93 0 0 0 0 0.91 0 0 0 0 0.85 0 0 0 1.1 -0.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-opacity: .05;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #15140F; --surface: #1E1C17; --sunk: #0E0D0A;
    --ink: #EEE7D9; --ink-2: #B3A998; --ink-3: #978D7D;
    --rule: #34302A; --line: #6F675B;
    --accent: #EE6B55; --accent-ink: #15140F; --accent-soft: #3A1E18;
    --focus: #8EC5FF; --ok: #8CC79A;
    --shadow: 0 1px 0 rgba(0,0,0,.4), 0 10px 30px -12px rgba(0,0,0,.7);
    --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.93 0 0 0 0 0.91 0 0 0 0 0.85 0 0 0 1.1 -0.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    --grain-opacity: .05;
  }
}
:root {
  /* Tipografia */
  /* No serif. Two sans families: a condensed one for titles, Schibsted Grotesk for everything else */
  --font-display: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", sans-serif;
  --font-serif: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-sans: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; /* interfaccia */
  --fs-xs: .75rem;    /* 12 metadati in maiuscoletto */
  --fs-sm: .875rem;   /* 14 interfaccia secondaria */
  --fs-md: 1rem;      /* 16 interfaccia */
  --fs-lg: 1.25rem;   /* 20 titolo serie (mobile) */
  --fs-xl: clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem);  /* 22-30 spiegazione */
  --fs-2xl: clamp(2rem, 1.4rem + 2.6vw, 3.5rem);       /* 32-56 titolo pagina */
  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-body: 1.55;
  --tracking-caps: .08em;
  /* Spaziatura, base 4px */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  /* Raggi: quasi squadrati, la carta non ha angoli morbidi */
  --r-0: 0; --r-1: 2px; --r-2: 4px; --r-round: 999px;
  /* Layout */
  --gutter: 16px;
  --maxw: 1120px;
  --measure: 62ch;
  /* Movimento */
  --ease: cubic-bezier(.2,.7,.2,1);
  --dur: 180ms;
}
@media (min-width: 760px) { :root { --gutter: 32px; } }

/* =====================================================================
   BASE
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 var(--fs-md)/var(--lh-body) var(--font-sans);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
body::before { /* grana della carta */
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: var(--noise); opacity: var(--grain-opacity); mix-blend-mode: multiply;
}
[data-theme="dark"] body::before, :root[data-theme="dark"] body::before { mix-blend-mode: screen; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body::before { mix-blend-mode: screen; } }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--r-1); }
button { font: inherit; color: inherit; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { position: relative; z-index: 1; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.caps { font: 600 var(--fs-xs)/1.2 var(--font-sans); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* =====================================================================
   HEADER
   ===================================================================== */
.site-head { position: relative; z-index: 2; border-bottom: 1px solid var(--rule); }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 64px; }
.brand { display: inline-flex; align-items: baseline; gap: 6px; text-decoration: none; }
.brand-word { font: 600 1.75rem/1 var(--font-serif); letter-spacing: -.01em; }
.brand-tv {
  font: 700 .72rem/1 var(--font-sans); letter-spacing: .06em; padding: 4px 5px 3px; transform: translateY(-3px);
  background: var(--ink); color: var(--bg); border-radius: var(--r-1);
}
.brand:hover { color: inherit; }
/* The logo of a copy with another name (src/pagina.js inserisciMarchio): the first word solid, the second out of
   focus, its focus slowly breathing (Enrico, 13/11/2026: «sfocata», coherent with fuzzy logic: true by degrees). */
.brand-a, .brand-b { font: 400 2.1rem/1 "Anton", Impact, "Arial Narrow Bold", sans-serif; text-transform: uppercase; letter-spacing: .01em; }
.brand:has(.brand-a) { gap: .07em; }
.brand-a { color: var(--ink); }
.brand-b { color: var(--brand-rosso, var(--accent)); display: inline-block; filter: blur(.035em); animation: brand-respira 3.2s ease-in-out infinite; }
/* always red, also where the style's accent is yellow (Poster pop on dark): Enrico, 13/11/2026 «mi piaceva di più il rosso» */
html[data-stile="pop"] .brand-b { --brand-rosso: #FF5A3C; }
html[data-stile="pop"][data-theme="light"] .brand-b { --brand-rosso: #D7372A; }
@media (prefers-color-scheme: light) { html[data-stile="pop"]:not([data-theme="dark"]) .brand-b { --brand-rosso: #D7372A; } }
@keyframes brand-respira { 0%, 100% { filter: blur(.06em); } 50% { filter: blur(.02em); } }
@media (prefers-reduced-motion: reduce) { .brand-b { animation: none; } }
html[data-stile="pop"] .site-head .brand-a, html[data-stile="pop"] .site-head .brand-b { font-size: 3rem; }
@media (max-width: 559px) { html[data-stile="pop"] .site-head .brand-a, html[data-stile="pop"] .site-head .brand-b { font-size: 2.3rem; } }
/* on the home only, 30% bigger (Enrico, 13/11/2026) */
body.v2:not(.has-start) .site-head .brand-a, body.v2:not(.has-start) .site-head .brand-b { font-size: 2.75rem; }
html[data-stile="pop"] body.v2:not(.has-start) .site-head .brand-a, html[data-stile="pop"] body.v2:not(.has-start) .site-head .brand-b { font-size: 3.9rem; }
@media (max-width: 559px) { html[data-stile="pop"] body.v2:not(.has-start) .site-head .brand-a, html[data-stile="pop"] body.v2:not(.has-start) .site-head .brand-b { font-size: 2.9rem; } }
.brand:hover .brand-tv { background: var(--accent); color: var(--accent-ink); }
.head-tools { display: flex; align-items: center; gap: var(--s-4); font-size: var(--fs-sm); }
.head-tools a { color: var(--ink-2); }
.theme-toggle {
  display: inline-flex; align-items: center; gap: 8px; background: transparent; border: 1px solid var(--line);
  padding: 6px 10px; border-radius: var(--r-round); cursor: pointer; font-size: var(--fs-sm); color: var(--ink-2);
}
.theme-toggle:hover { color: var(--ink); border-color: var(--ink); }
.theme-toggle svg { width: 16px; height: 16px; }
@media (max-width: 420px) { .head-tools .how { display: none; } }

/* =====================================================================
   HERO: ricerca + manopola
   ===================================================================== */
.hero { position: relative; z-index: 3; padding: var(--s-6) 0 var(--s-5); }
.hero-grid { display: grid; gap: var(--s-6); }
@media (min-width: 900px) {
  .hero { padding: var(--s-8) 0 var(--s-6); }
  .hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8); align-items: center; }
  /* the left block (payoff and search) starts level with "La manopola dell'azzardo", not lower */
  .hero-grid > div:first-child { align-self: start; }
}
.kicker { color: var(--accent); margin: 0 0 var(--s-3); }
.hero h1 {
  font: 400 var(--fs-2xl)/1.04 var(--font-serif);
  letter-spacing: -.02em; margin: 0 0 var(--s-4); max-width: 16ch; text-wrap: balance;
}
.hero h1 em { font-style: italic; color: var(--accent); }
.hero .lede { color: var(--ink-2); font-size: 1.0625rem; max-width: 44ch; margin: 0 0 var(--s-5); }
/* «Scopri altre serie che ti daranno le stesse emozioni | (anche quando non si somigliano).»: the break
   before the brackets only where the first half fits on one line; on a phone the lines wrap by themselves,
   balanced, so no short line is left in the middle */
@media (max-width: 600px) { .hero .lede-a-capo { display: none; } .hero .lede { text-wrap: balance; } }

/* Ricerca con autocompletamento */
.search { position: relative; max-width: 560px; }
.search label { display: block; margin-bottom: var(--s-2); color: var(--ink-2); }
.search-field {
  display: flex; align-items: center; gap: var(--s-2); background: var(--surface);
  border: 1px solid var(--line); border-bottom: 2px solid var(--ink); border-radius: var(--r-1) var(--r-1) 0 0;
  padding: 0 var(--s-3);
}
.search-field:focus-within { border-color: var(--ink); outline: 2px solid var(--focus); outline-offset: 2px; }
.search-field svg { width: 20px; height: 20px; flex: none; color: var(--ink-3); }
.search-field input {
  flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); outline: none;
  font: 400 1.25rem/1.2 var(--font-serif); padding: 14px 0;
}
.search-field input::placeholder { color: var(--ink-3); font-style: italic; }
.search-clear { border: 0; background: none; color: var(--ink-3); cursor: pointer; padding: 8px; font-size: 1.25rem; line-height: 1; }
.search-clear:hover { color: var(--ink); }
.listbox {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 20; margin: 0; padding: var(--s-1) 0; list-style: none;
  background: var(--surface); border: 1px solid var(--line); border-top: 0; box-shadow: var(--shadow);
}
.listbox[hidden] { display: none; }
.option { display: grid; grid-template-columns: 32px 1fr auto; gap: var(--s-3); align-items: center; padding: var(--s-2) var(--s-3); cursor: pointer; }
.option img, .option .ph { width: 32px; height: 45px; object-fit: cover; background: var(--sunk); border-radius: var(--r-1); }
.option .t { font: 500 1.0625rem/1.2 var(--font-serif); }
.option mark { background: none; color: inherit; font-weight: 700; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: .18em; }
.option .o { display: block; font-size: var(--fs-sm); color: var(--ink-3); }
.option .y { font-size: var(--fs-sm); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.option[aria-selected="true"], .option:hover { background: var(--accent-soft); }
.no-match { padding: var(--s-4); }
.no-match p { margin: 0; }
.no-match .big { font: 400 1.25rem/1.3 var(--font-serif); margin-bottom: var(--s-2); }
.no-match .small { font-size: var(--fs-sm); color: var(--ink-2); }
.no-match .try { margin-top: var(--s-3); font-size: var(--fs-sm); color: var(--ink-2); }
.no-match .try button { background: none; border: 0; padding: 0; cursor: pointer; font: 400 1rem var(--font-serif); color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: .2em; }
.no-match .report-cta { margin-top: var(--s-3); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); font-size: var(--fs-sm); color: var(--ink-2); }
/* Documentaries in the suggestion list: recognised, not recommended (yet). A discreet tag, like the second line of a row. */
.option .doc-tag { display: block; margin-top: 2px; font-size: var(--fs-xs, .75rem); letter-spacing: .02em; color: var(--ink-3); }
/* «X è un documentario»: where to watch it, same buttons as «Guarda su» under the start series */
.no-match .doc-watch { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: var(--s-3); }
.no-match .doc-watch .sw-l { font-size: var(--fs-sm); color: var(--ink-2); margin-right: 2px; }
.no-match .doc-watch .btn { min-height: 34px; padding: 0 12px; gap: 6px; font-size: .88rem; }
.no-match .doc-watch .btn svg { width: 12px; height: 12px; }
/* «Grande Fratello è un reality»: the card of a documentary or TV programme. The poster (when there is
   one) on the left, the facts under the title in the small size, the description, then the note. */
.no-match.doc-card { display: flex; gap: var(--s-3); align-items: flex-start; }
.no-match .doc-body { min-width: 0; flex: 1; }
.no-match .doc-poster { flex: none; width: 72px; height: auto; aspect-ratio: 72 / 102; object-fit: cover; border-radius: 6px; background: var(--line); }
.no-match .doc-facts { font-size: var(--fs-sm); color: var(--ink); margin-top: 2px; }
.no-match .doc-desc { margin-top: var(--s-2); }
.no-match .doc-desc a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: .2em; white-space: nowrap; }
.no-match .doc-note { margin-top: var(--s-3); }
@media (max-width: 480px) { .no-match .doc-poster { width: 56px; } }
.option-report { border-top: 1px solid var(--line); margin-top: var(--s-1); }
.option-report .ph { display: grid; place-items: center; font: 600 1.25rem/1 var(--font-sans); color: var(--accent); background: var(--accent-soft); }
.option-report .t { font-weight: 600; }
/* «Stai cercando forse Festival di Sanremo?»: a programme that is not a series, under the list and apart
   from it. Never a choice: no hover, no pointer, a quieter background. */
.option-note { margin-top: var(--s-1); padding: var(--s-3); border-top: 1px solid var(--line); background: var(--sunk); font-size: var(--fs-sm); color: var(--ink-2); cursor: default; }
.option-note .t { color: var(--ink); }
.option-note b { font-weight: 600; }
.option-note mark { background: none; color: inherit; }
.listbox:has(.option-note) { padding-bottom: 0; }
.search .report .field, body:not(.has-start) .search .report .field { display: grid; gap: 4px; text-align: left; margin-top: var(--s-3); font-size: var(--fs-sm); color: var(--ink-2); }
.report .field i { font-style: normal; color: var(--ink-3); }
.report .field input { font: 400 1rem/1.3 var(--font-sans); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-1); padding: 10px 12px; min-height: 44px; }
.report .field input:focus { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--ink); }
.report-err { margin-top: var(--s-2) !important; font-size: var(--fs-sm); color: var(--accent); }
.report-foot { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
@media (max-width: 520px) { .report-foot .btn { flex: 1; justify-content: center; } }
.hint { margin-top: var(--s-3); font-size: var(--fs-sm); color: var(--ink-3); }
.hint button { background: none; border: 0; padding: 0; font: 400 1rem var(--font-serif); color: var(--ink); cursor: pointer; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: .2em; }
.hint button:hover { text-decoration-color: var(--accent); }

/* =====================================================================
   LA MANOPOLA DELL'AZZARDO
   ===================================================================== */
.knob-panel { position: relative; display: grid; justify-items: center; text-align: center; padding: var(--s-5) 0 0; border-top: 1px solid var(--rule); }
@media (min-width: 900px) { .knob-panel { border-top: 0; border-left: 1px solid var(--rule); padding: 0 0 0 var(--s-6); } }
.knob-panel .caps { color: var(--ink-2); margin: 0 0 var(--s-2); }
.knob {
  --size: 240px; --value: 50; position: relative; width: var(--size); height: var(--size);
  touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; border-radius: 50%;
  margin-top: 28px;
}
@media (max-width: 759px) { .knob-panel .knob { --size: 216px; } }
@media (min-width: 900px) { .knob-panel .knob { --size: 270px; } }
.w-knob .knob { margin-top: 0; }
.knob:active { cursor: grabbing; }
.knob:focus-visible { outline: none; }
.knob:focus-visible .knob-body { stroke: var(--focus); stroke-width: 3; }
.knob:focus-visible::after { content: ""; position: absolute; inset: 14%; border-radius: 50%; outline: 2px solid var(--focus); outline-offset: 6px; pointer-events: none; }
.knob svg { width: 100%; height: 100%; overflow: visible; display: block; }
.knob .tick { stroke: var(--rule); stroke-width: 2; stroke-linecap: round; transition: stroke var(--dur); }
.knob .tick.major { stroke-width: 2.5; }
.knob .tick.on { stroke: var(--accent); }
.knob .knob-shadow { fill: rgba(0,0,0,.10); }
.knob .knob-body { fill: var(--surface); stroke: var(--ink); stroke-width: 1.5; }
.knob .knurl line { stroke: var(--ink-3); stroke-width: 1; opacity: .55; }
.knob .cap { fill: var(--sunk); stroke: var(--rule); }
.knob .kb-a { stop-color: var(--surface); }
.knob .kb-b { stop-color: var(--sunk); }
.knob .pointer { stroke: var(--accent); stroke-width: 5; stroke-linecap: round; }
.knob .rotor { transform-origin: 130px 130px; transition: transform 90ms linear; }
.knob .static { opacity: calc(var(--value) / 100 * var(--value) / 100 * .85); }
/* the static is decoration only: its square is far larger than the dial and, without this, it caught
   the clicks meant for what is around it, e.g. «Ritrovala» above the roulette (Enrico, 9/11/2026) */
.knob .static, .knob .static * { pointer-events: none; }
.knob .static-anim { animation: fuzz .24s steps(3) infinite; transform-origin: 130px 130px; }
@keyframes fuzz { 0% { transform: rotate(0deg); } 33% { transform: rotate(120deg); } 66% { transform: rotate(240deg); } }
.knob-labels { position: absolute; inset: 0; pointer-events: none; font: 600 var(--fs-xs)/1.1 var(--font-sans); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-2); }
.knob-labels span { position: absolute; pointer-events: auto; cursor: pointer; padding: 4px; }
.knob-labels span:hover { color: var(--accent); }
.knob-labels .l-min { left: -6px; bottom: 6px; }
.knob-labels .l-mid { left: 50%; top: -22px; transform: translateX(-50%); }
.knob-labels .l-max { right: -18px; bottom: 6px; text-align: right; max-width: 6.5em; }
.knob-readout { margin-top: var(--s-4); min-height: 4.6em; }
.knob-readout .name { font: 400 2rem/1.05 var(--font-serif); color: var(--ink); display: block; }
.knob-readout .desc { display: block; color: var(--ink-2); font-size: var(--fs-sm); margin-top: var(--s-2); max-width: 30ch; margin-inline: auto; }
.knob-keys { font-size: var(--fs-xs); color: var(--ink-3); margin: var(--s-2) 0 0; }

/* =====================================================================
   RISULTATI
   ===================================================================== */
main { position: relative; z-index: 1; }
.results-zone { padding-bottom: var(--s-8); min-height: 420px; }
.results-head { display: grid; grid-template-columns: auto 1fr; gap: var(--s-3) var(--s-4); align-items: center; padding: var(--s-5) 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); }
.results-head img { width: 48px; aspect-ratio: 210/295; object-fit: cover; border-radius: var(--r-1); }
.results-head .caps { color: var(--ink-3); margin: 0 0 var(--s-1); }
.results-head h2 { margin: 0; font: 500 1.5rem/1.15 var(--font-serif); }
.results-head .meta { color: var(--ink-3); font-size: var(--fs-sm); margin-top: 2px; }
.results-head .meta b { color: var(--accent); font-weight: 600; }
.results-list { list-style: none; margin: 0; padding: 0; counter-reset: entry; }

.entry {
  display: grid; grid-template-columns: 92px minmax(0, 1fr); grid-template-areas: "poster head" "line line" "plot plot" "actions actions";
  gap: var(--s-4) var(--s-4); padding: var(--s-6) 0; border-bottom: 1px solid var(--rule);
}
@media (min-width: 760px) {
  .entry { grid-template-columns: 148px minmax(0, 1fr); grid-template-areas: "poster head" "poster line" "poster plot" "poster actions"; column-gap: var(--s-6); row-gap: var(--s-3); align-content: start; }
}
.poster { grid-area: poster; position: relative; aspect-ratio: 210/295; background: var(--sunk); border-radius: var(--r-1); overflow: hidden; box-shadow: var(--shadow); align-self: start; }
.poster img { width: 100%; height: 100%; object-fit: cover; }
.poster-missing { position: absolute; inset: 0; display: grid; align-content: space-between; padding: 10px; background: var(--sunk); color: var(--ink-2); overflow: hidden; }
.poster-missing::before { content: ""; position: absolute; inset: 0; background-image: var(--noise); opacity: .45; }
.poster-missing > * { position: relative; }
.poster-missing .pm-title { font: 500 1rem/1.1 var(--font-serif); color: var(--ink); overflow-wrap: anywhere; }
@media (min-width: 760px) { .poster-missing .pm-title { font-size: 1.25rem; } }
.poster-missing .pm-note { font: 600 9px/1.2 var(--font-sans); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-2); }

.entry-head { grid-area: head; align-self: end; }
@media (min-width: 760px) { .entry-head { align-self: start; } }
.entry-num { display: flex; align-items: center; gap: var(--s-3); color: var(--accent); margin-bottom: var(--s-2); }
.entry-num::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.entry h3 { margin: 0; font: 600 var(--fs-lg)/var(--lh-tight) var(--font-serif); text-wrap: balance; }
.entry .orig { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--ink-3); }
.entry .orig i { font-family: var(--font-serif); font-size: 1rem; color: var(--ink-2); }
.entry .meta { margin: var(--s-1) 0 0; font-size: var(--fs-sm); color: var(--ink-3); } /* no tabular figures: they widened the comma («Drammatico , Crime») */
.entry .meta span + span::before { content: "·"; margin: 0 .45em; }

.why { grid-area: line; position: relative; margin: 0; max-width: 30em; }
.why p {
  margin: 0; font: 400 var(--fs-xl)/var(--lh-snug) var(--font-serif);
  letter-spacing: -.005em; color: var(--ink); text-wrap: pretty;
}
.why p::before { content: "«"; color: var(--accent); font-style: normal; margin-right: .08em; }
.why p::after { content: "»"; color: var(--accent); font-style: normal; margin-left: .08em; }
@media (min-width: 1100px) { .why p::before { position: absolute; left: -.62em; } }
.why .why-label { display: block; font: 600 var(--fs-xs)/1.2 var(--font-sans); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s-2); }

.plot { grid-area: plot; max-width: var(--measure); }
.plot summary { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--ink-2); list-style: none; padding: 4px 0; }
.plot summary::-webkit-details-marker { display: none; }
.plot summary::before { content: ""; flex: none; width: 7px; height: 7px; margin: 0 3px 0 2px; border: solid currentColor; border-width: 0 1.6px 1.6px 0; transform: rotate(-45deg); }
.plot[open] summary::before { transform: rotate(45deg); margin-top: -4px; }
.plot summary:hover { color: var(--ink); }
.plot p { margin: var(--s-2) 0 0; color: var(--ink-2); font-size: .975rem; }

.actions { grid-area: actions; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); padding-top: var(--s-2); }
.btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 var(--s-4);
  font: 600 var(--fs-sm)/1 var(--font-sans); text-decoration: none; border-radius: var(--r-1); cursor: pointer;
  background: var(--ink); color: var(--bg); border: 1px solid var(--ink); transition: background var(--dur), color var(--dur), border-color var(--dur);
}
.btn:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn svg { width: 14px; height: 14px; }
.btn .via { font-weight: 400; opacity: .8; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: transparent; color: var(--accent); border-color: var(--accent); }
.link-ext { font-size: var(--fs-sm); color: var(--ink-2); display: inline-flex; gap: 4px; align-items: center; }
.link-ext svg { width: 12px; height: 12px; }
.feedback { margin-left: auto; display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); color: var(--ink-3); }
@media (max-width: 520px) { .feedback { margin-left: 0; width: 100%; } }
.thumb { width: 44px; height: 44px; display: grid; place-items: center; background: transparent; border: 1px solid var(--line); border-radius: 50%; cursor: pointer; color: var(--ink-2); transition: all var(--dur); }
.thumb svg { width: 18px; height: 18px; }
.thumb:hover { color: var(--ink); border-color: var(--ink); }
.thumb[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.thumb.down svg { transform: scaleY(-1); }
.fb-thanks { color: var(--ok); font-size: var(--fs-sm); }

/* =====================================================================
   STATI
   ===================================================================== */
[data-state-panel] { display: none; }
[data-state-panel].is-on { display: block; animation: fade .25s var(--ease); }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Iniziale */
.empty { padding: var(--s-6) 0 var(--s-4); border-top: 2px solid var(--ink); }
.empty .caps { color: var(--ink-3); margin: 0 0 var(--s-5); }
.steps { display: grid; gap: var(--s-5); counter-reset: step; margin: 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); gap: var(--s-6); } }
.steps li { border-top: 1px solid var(--rule); padding-top: var(--s-4); }
.steps .n { font: 400 2.5rem/1 var(--font-serif); color: var(--accent); }
.steps h3 { font: 600 1.125rem/1.25 var(--font-serif); margin: var(--s-2) 0 var(--s-1); }
.steps p { margin: 0; color: var(--ink-2); font-size: .95rem; max-width: 34ch; }
.example {
  margin-top: var(--s-7); padding: var(--s-5); background: var(--surface); border-left: 3px solid var(--accent);
}
.example .caps { margin: 0 0 var(--s-2); color: var(--ink-3); }
.example p.q { margin: 0; font: 400 var(--fs-xl)/var(--lh-snug) var(--font-serif); max-width: 34em; }
.example p.a { margin: var(--s-2) 0 0; font-size: var(--fs-sm); color: var(--ink-2); }

/* Caricamento */
.loading-line { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-5) 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); font: 400 1.25rem/1.2 var(--font-serif); color: var(--ink-2); }
.tuner { width: 44px; height: 22px; border-radius: var(--r-1); background: var(--sunk); position: relative; overflow: hidden; flex: none; }
.tuner::before { content: ""; position: absolute; inset: -50%; background-image: var(--noise); opacity: .9; animation: snow .35s steps(4) infinite; }
@keyframes snow { 0% { transform: translate(0,0); } 25% { transform: translate(-12%,8%); } 50% { transform: translate(9%,-11%); } 75% { transform: translate(-6%,-4%); } }
.skeleton { display: grid; grid-template-columns: 92px 1fr; gap: var(--s-4); padding: var(--s-6) 0; border-bottom: 1px solid var(--rule); }
@media (min-width: 760px) { .skeleton { grid-template-columns: 148px 1fr; gap: var(--s-6); } }
.sk { position: relative; overflow: hidden; background: var(--sunk); border-radius: var(--r-1); }
.sk::before { content: ""; position: absolute; inset: -50%; background-image: var(--noise); opacity: .35; animation: snow .5s steps(4) infinite; }
.sk-poster { aspect-ratio: 210/295; }
.sk-lines { display: grid; gap: 10px; align-content: start; }
.sk-l { height: 14px; }
.sk-xl { height: 26px; }

/* Messaggi: nessun risultato, errore */
.message { padding: var(--s-7) 0; border-top: 2px solid var(--ink); display: grid; gap: var(--s-4); max-width: 640px; }
.message .glyph { width: 72px; height: 54px; border-radius: var(--r-2); background: var(--sunk); position: relative; overflow: hidden; border: 1px solid var(--rule); }
.message .glyph::before { content: ""; position: absolute; inset: 0; background-image: var(--noise); opacity: .8; }
.message .glyph.err::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; background: var(--accent); transform: translateY(-50%); }
.message h2 { margin: 0; font: 400 1.875rem/1.15 var(--font-serif); text-wrap: balance; }
.message p { margin: 0; color: var(--ink-2); max-width: 52ch; }
.message .row { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-2); }

/* =====================================================================
   FOOTER CREDITI
   ===================================================================== */
.site-foot { position: relative; z-index: 1; border-top: 1px solid var(--rule); padding: var(--s-6) 0 var(--s-7); font-size: var(--fs-sm); color: var(--ink-3); }
.site-foot .wrap { display: grid; gap: var(--s-3); }
@media (min-width: 760px) { .site-foot .wrap { grid-template-columns: 1fr auto; align-items: baseline; } }
.site-foot a { color: var(--ink-2); }
.site-foot p { margin: 0; }

/* =====================================================================
   WIDGET PER ARTICOLI
   ===================================================================== */
.ftv-widget {
  background: var(--bg); color: var(--ink); font-family: var(--font-sans); border-top: 3px solid var(--ink);
  padding: var(--s-4); position: relative; overflow: hidden; border-radius: 0 0 var(--r-1) var(--r-1);
}
.ftv-widget::before { content: ""; position: absolute; inset: 0; background-image: var(--noise); opacity: var(--grain-opacity); pointer-events: none; }
.ftv-widget > * { position: relative; }
.w-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-3); }
.w-brand { display: inline-flex; align-items: baseline; gap: 4px; text-decoration: none; }
.w-brand .brand-word { font-size: 1.125rem; }
.w-brand .brand-tv { font-size: .55rem; padding: 3px 4px 2px; transform: translateY(-2px); }
.w-title { margin: var(--s-2) 0 0; font: 400 1.25rem/1.2 var(--font-serif); }
.w-title i { color: var(--accent); }
.w-knob { display: flex; align-items: center; gap: var(--s-2); }
.w-knob .knob { --size: 56px; cursor: grab; }
.w-knob .knob .knob-body { stroke-width: 3; }
.w-knob .knob .pointer { stroke-width: 9; }
.w-knob .knob .tick { stroke-width: 5; }
.w-knob .w-val { font: 400 .9375rem/1.1 var(--font-serif); text-align: right; min-width: 5.5em; }
.w-knob .w-val small { display: block; font: 600 9px/1.2 var(--font-sans); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-3); font-style: normal; }
.w-list { list-style: none; margin: var(--s-4) 0 0; padding: 0; }
.w-item { display: grid; grid-template-columns: 52px 1fr; gap: var(--s-3); padding: var(--s-3) 0; border-top: 1px solid var(--rule); }
.w-item .poster { grid-area: auto; box-shadow: none; }
.w-item .poster-missing { padding: 4px; }
.w-item .poster-missing .pm-title { font-size: 10px; }
.w-item .poster-missing .pm-note { display: none; }
.w-item h4 { margin: 0; font: 600 1rem/1.2 var(--font-serif); }
.w-item h4 a { text-decoration: none; }
.w-item h4 a:hover { text-decoration: underline; }
.w-item .w-meta { font-size: var(--fs-xs); color: var(--ink-3); }
.w-item .w-why { margin: 6px 0 6px; font: 400 1.0625rem/1.3 var(--font-serif); }
.w-item .w-links { font-size: var(--fs-xs); display: flex; gap: var(--s-3); }
.w-item .w-links a { color: var(--ink-2); }
.w-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; padding-top: var(--s-3); border-top: 1px solid var(--rule); font-size: var(--fs-xs); color: var(--ink-3); }
.w-foot a { color: var(--ink-2); }
.w-foot .more { font-weight: 600; color: var(--ink); }

/* =====================================================================
   AGGIUNTE PER LA VERSIONE DI PRODUZIONE
   ===================================================================== */
.start-poster:empty { display: none; }
.results-head:has(.start-poster:empty) { grid-template-columns: 1fr; }
.as-link { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-size: var(--fs-sm); color: var(--ink-2); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.as-link:hover { color: var(--accent); }
.option img { width: 32px; height: 45px; }
.listbox { max-height: min(60vh, 440px); overflow-y: auto; }
[hidden] { display: none !important; }

/* Pagina widget (in iframe dentro i siti ospiti) */
.widget-page { background: transparent; }
.widget-page::before { display: none; }
.widget-page .ftv-widget { max-width: 420px; }
.w-empty { margin: var(--s-4) 0; font: 400 1.0625rem/1.3 var(--font-serif); color: var(--ink-2); }
.entry .meta span, .w-meta span { white-space: nowrap; }

/* =====================================================================
   LISTE, FILTRI, NOTORIETÀ, "MOSTRANE ALTRE" (blocco 2)
   ===================================================================== */
/* Header: La mia lista */
.mylist-link { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); }
.mylist-link .count:not(:empty) { min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-round); background: var(--accent); color: var(--accent-ink); font: 700 11px/20px var(--font-sans); text-align: center; }

/* Filters bar */
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); padding: var(--s-4) 0; border-bottom: 1px solid var(--rule); font-size: var(--fs-sm); color: var(--ink-2); }
.f-select { display: inline-flex; align-items: center; gap: var(--s-2); }
.f-select .caps { color: var(--ink-3); }
.f-select select { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-1); padding: 6px 28px 6px 10px; min-height: 36px; }
.f-toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; min-height: 36px; }
.f-toggle input { width: 18px; height: 18px; accent-color: var(--accent); margin: 0; }

/* Result card: poster column with taste buttons, extra rows */
.entry { grid-template-areas: "poster head" "line line" "plot plot" "actions actions" "deeper deeper"; transition: opacity .25s var(--ease), transform .25s var(--ease); }
@media (min-width: 760px) {
  .entry { grid-template-areas: "poster head" "poster line" "poster plot" "poster actions" "poster deeper"; }
}
.entry.is-leaving { opacity: 0; transform: translateX(-12px); }
.entry.is-seen .poster img { filter: grayscale(.8); opacity: .7; }
.poster-col { grid-area: poster; display: grid; gap: var(--s-2); align-content: start; }
.taste { display: flex; justify-content: center; gap: var(--s-2); }
.taste-btn { width: 36px; height: 36px; display: grid; place-items: center; background: transparent; border: 1px solid var(--line); border-radius: 50%; cursor: pointer; color: var(--ink-2); transition: all var(--dur); }
.taste-btn svg { width: 16px; height: 16px; }
.taste-btn.down svg { transform: scaleY(-1); }
.taste-btn:hover { color: var(--ink); border-color: var(--ink); }
.taste-btn[aria-pressed="true"].up, .taste-btn[aria-pressed="true"].up2 { background: var(--ink); color: var(--bg); border-color: var(--ink); }
/* "Voglio vederla" over the poster's bottom-right corner, half see-through (Enrico, 30/10/2026).
   In the carousel the votes sit there already: the bookmark goes to the top-right corner. */
.poster-wrap { position: relative; }
html .taste-btn.save.save-over {
  position: absolute; right: 8px; bottom: 8px; z-index: 3; width: 38px; height: 38px;
  background: color-mix(in srgb, var(--surface) 70%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-color: transparent; color: var(--ink); box-shadow: 0 1px 6px rgba(0, 0, 0, .28);
}
html .taste-btn.save.save-over:hover { background: var(--surface); }
html .taste-btn.save.save-over[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
body.vista-carosello #results .entry .save-over { bottom: auto; top: var(--s-3); right: var(--s-3); }
@media (max-width: 759px) { html .entry .taste-btn.save.save-over { width: 34px; height: 34px; right: 6px; bottom: 6px; } }
/* "Indimenticabile" in La mia lista */
.my-items .unforgettable { font: 600 var(--fs-xs)/1 var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--accent); white-space: nowrap; }
.taste-btn[aria-pressed="true"].down { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

.meta2 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin: var(--s-2) 0 0; font-size: var(--fs-xs); color: var(--ink-3); }
.fame { display: inline-flex; gap: 3px; align-items: flex-end; cursor: help; }
.fame svg { width: 12px; height: 14px; fill: var(--rule); display: block; }
.fame .on svg { fill: var(--ink-2); }
.origin { font: 600 var(--fs-xs)/1 var(--font-sans); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-2); border: 1px solid var(--rule); padding: 4px 6px; border-radius: var(--r-1); }
.seen-tag { font: 600 var(--fs-xs)/1 var(--font-sans); color: var(--accent); }

/* List buttons: Da vedere, Già vista, Scarta */
.list-btns { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.list-btn { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 var(--s-3); background: transparent; color: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r-round); font: 500 var(--fs-sm)/1 var(--font-sans); cursor: pointer; transition: all var(--dur); }
.list-btn svg { width: 15px; height: 15px; }
.list-btn:hover { color: var(--ink); border-color: var(--ink); }
.list-btn[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.list-btn.daVedere[aria-pressed="true"] svg path { fill: currentColor; }
.list-btn.scarta:hover { color: var(--accent); border-color: var(--accent); }
.actions .as-link { white-space: nowrap; }

/* Tooltip on hover and keyboard focus */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translate(-50%, 4px);
  width: max-content; max-width: 220px; padding: 6px 9px; border-radius: var(--r-1);
  background: var(--ink); color: var(--bg); font: 500 12px/1.3 var(--font-sans); text-align: center; white-space: normal;
  opacity: 0; pointer-events: none; transition: opacity var(--dur), transform var(--dur); z-index: 30;
}
[data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
@media (hover: none) { [data-tip]::after { display: none; } }

/* Approfondisci */
.deeper { grid-area: deeper; margin: 0; font-size: var(--fs-sm); color: var(--ink-3); }
.deeper .caps { margin-right: var(--s-2); color: var(--ink-3); }
.deeper a, .plot summary { color: var(--ink-2); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--line); text-underline-offset: 3px; }
.deeper a:hover, .plot summary:hover { color: var(--ink); text-decoration-color: currentColor; }

/* Mostrane altre */
.more-row { display: grid; justify-items: center; gap: var(--s-3); padding: var(--s-6) 0 0; }
.more-row .btn { min-width: 220px; justify-content: center; }
.more-row .btn[disabled] { opacity: .6; cursor: progress; }
.more-note { margin: 0; color: var(--ink-2); font: 400 1.0625rem/1.4 var(--font-serif); text-align: center; max-width: 46ch; }

/* La mia lista */
.mylist { padding: var(--s-5) 0 var(--s-6); border-top: 2px solid var(--ink); }
.mylist-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); flex-wrap: wrap; }
.mylist-head h2 { margin: 0; font: 400 1.875rem/1.15 var(--font-serif); }
.mylist-note { margin: var(--s-2) 0 var(--s-5); color: var(--ink-3); font-size: var(--fs-sm); }
.tabs { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-5); border-bottom: 1px solid var(--rule); }
.tabs [role="tab"] { background: none; border: 0; border-bottom: 2px solid transparent; padding: var(--s-2) 0; margin-bottom: -1px; cursor: pointer; color: var(--ink-2); font: 600 var(--fs-sm)/1.2 var(--font-sans); }
.tabs [role="tab"][aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.tabs .n { color: var(--ink-3); font-weight: 400; }
#myPanel { padding: var(--s-4) 0; }
#myPanel:focus-visible { outline-offset: 2px; }
.my-items { list-style: none; margin: 0 0 var(--s-5); padding: 0; }
.my-items li { display: grid; grid-template-columns: 40px 1fr; gap: var(--s-2) var(--s-3); align-items: center; padding: var(--s-3) 0; border-bottom: 1px solid var(--rule); }
@media (min-width: 640px) { .my-items li { grid-template-columns: 40px 1fr auto; } }
.my-items img, .my-items .ph { width: 40px; height: 56px; object-fit: cover; border-radius: var(--r-1); background: var(--sunk); }
.my-items .t { font: 500 1.0625rem/1.25 var(--font-serif); }
.my-items .y { color: var(--ink-3); font: 400 var(--fs-sm) var(--font-sans); }
.my-items .acts { display: flex; gap: var(--s-4); grid-column: 2; }
@media (min-width: 640px) { .my-items .acts { grid-column: auto; } }
.my-empty { color: var(--ink-2); font: 400 1.125rem/1.4 var(--font-serif); }

/* Toast */
.toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: var(--s-4); max-width: calc(100vw - 32px); padding: 12px 16px; background: var(--ink); color: var(--bg); border-radius: var(--r-2); box-shadow: var(--shadow); font-size: var(--fs-sm); }
.toast .as-link { color: var(--bg); font-weight: 600; }
.toast .as-link:hover { color: var(--bg); text-decoration-thickness: 2px; }
.poster-col .poster { grid-area: auto; }
.entry .meta span + span::before { margin: 0 .45em 0 0; }
/* separator at the end of a line, never at the start of the next one */
.entry .meta span + span::before { content: none; }
.entry .meta span:not(:last-child)::after { content: "·"; margin-left: .45em; }

/* Filters panel ("Restringi la ricerca") */
.filters { display: block; padding: 0; }
.filters > summary { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4) 0; cursor: pointer; list-style: none; }
.filters > summary::-webkit-details-marker { display: none; }
.filters > summary::before { content: "+"; display: inline-grid; place-items: center; width: 18px; height: 18px; border: 1px solid var(--line); border-radius: 50%; font-size: 13px; line-height: 1; color: var(--ink-2); }
.filters[open] > summary::before { content: "−"; }
.filters > summary .caps { color: var(--ink-2); }
.filters-count:not(:empty) { font-size: var(--fs-xs); font-weight: 700; color: var(--accent); }
.filters-body { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); padding: 0 0 var(--s-4); }
.f-select select { max-width: 52vw; }

/* "Omini" (notorietà) as a focusable button with a tooltip */
.fame { background: none; border: 0; padding: 4px 2px; margin: -4px -2px; cursor: help; color: inherit; }
.fame[data-tip]::after { left: 0; transform: translate(0, 4px); max-width: 260px; text-align: left; }
.fame[data-tip]:hover::after, .fame[data-tip]:focus-visible::after { transform: translate(0, 0); }
.fame.tip-open[data-tip]::after { display: block; opacity: 1; transform: translate(0, 0); }

/* =====================================================================
   VISTA CAROSELLO (variante, attivata dall'interruttore Lista / Carosello)
   ===================================================================== */
.view-switch { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-round); overflow: hidden; }
.view-switch button { background: none; border: 0; padding: 6px 10px; font: 600 var(--fs-xs)/1 var(--font-sans); letter-spacing: .02em; color: var(--ink-2); cursor: pointer; }
.view-switch button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
@media (max-width: 420px) { .head-tools { gap: var(--s-2); } .view-switch button { padding: 6px 8px; } }

/* Elements that exist only in one of the two views */
.ctop, .cnav { display: none; }
.carousel-wrap { position: relative; }

body.vista-carosello.has-start .hero { display: none; }
body.vista-carosello .ctop { display: block; padding: var(--s-4) 0 var(--s-2); border-top: 2px solid var(--ink); }
body.vista-carosello .results-head, body.vista-carosello .more-row { display: none; }
.ctop-row { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-4); }
.ctop-start .caps { margin: 0 0 2px; color: var(--ink-3); }
.ctop-start h2 { margin: 0; font: 500 1.5rem/1.15 var(--font-serif); }

/* Compact knob: horizontal slider with the five named stops */
.hslider { --value: 50; margin: var(--s-4) 0 var(--s-2); padding: 10px 0 0; cursor: pointer; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.hslider:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: var(--r-1); }
.hs-track { position: relative; height: 6px; border-radius: var(--r-round); background: var(--rule); margin: 0 10px; }
.hs-fill { position: absolute; inset: 0 auto 0 0; width: calc(var(--value) * 1%); border-radius: inherit; background: var(--accent); }
.hs-thumb { position: absolute; top: 50%; left: calc(var(--value) * 1%); width: 22px; height: 22px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--surface); border: 2px solid var(--ink); box-shadow: var(--shadow); }
.hs-labels { position: relative; height: 1.6em; margin: 10px 10px 0; font: 600 10px/1.1 var(--font-sans); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-3); }
.hs-labels span { position: absolute; transform: translateX(-50%); white-space: nowrap; cursor: pointer; }
.hs-labels span:first-child { transform: none; }
.hs-labels span:last-child { transform: translateX(-100%); }
.hs-labels span.on { color: var(--accent); }

/* The carousel itself */
body.vista-carosello .filters { border-bottom: 0; }
body.vista-carosello .filters:not([open]) > summary { padding: var(--s-2) 0; }
body.vista-carosello #results {
  display: flex; gap: var(--s-3); overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  margin: 0 calc(-1 * var(--gutter)); padding: var(--s-2) var(--gutter) var(--s-4);
  scrollbar-width: none;
}
body.vista-carosello #results::-webkit-scrollbar { display: none; }
body.vista-carosello #results .entry {
  flex: 0 0 calc(100% - 28px); max-width: 420px; scroll-snap-align: center;
  min-height: 460px; overflow: clip; /* no scroll inside the card: only the page scrolls (Enrico, 7/11/2026) */
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: 0 0 var(--s-4); border: 1px solid var(--rule); border-radius: var(--r-2); background: var(--surface); box-shadow: var(--shadow);
}
body.vista-carosello #results .entry > * { margin-inline: var(--s-4); }
body.vista-carosello #results .entry .poster-col { margin: 0; position: relative; display: block; }
body.vista-carosello #results .entry .poster { border-radius: var(--r-2) var(--r-2) 0 0; box-shadow: none; aspect-ratio: auto; height: 40%; height: calc(var(--card-h, 78svh) * .42); width: 100%; }
body.vista-carosello #results .entry .poster img { object-position: center 20%; }
body.vista-carosello #results .entry .taste { position: absolute; right: var(--s-3); bottom: var(--s-3); }
body.vista-carosello #results .entry .taste-btn { background: var(--surface); }
body.vista-carosello #results .entry-num { margin-bottom: var(--s-1); }
body.vista-carosello .why p { font-size: 1.3rem; }
body.vista-carosello .actions { padding-top: 0; }
body.vista-carosello .actions .btn { width: 100%; justify-content: center; }
body.vista-carosello .list-btns { width: 100%; }
body.vista-carosello .list-btn { flex: 1; justify-content: center; padding: 0 var(--s-2); }
body.vista-carosello #results .entry.is-leaving { transform: translateY(-16px); }

/* Last slide: pull further to load more */
.more-slide { display: none; }
body.vista-carosello .more-slide {
  display: grid; place-content: center; justify-items: center; gap: var(--s-3); text-align: center;
  flex: 0 0 60%; max-width: 280px; scroll-snap-align: end; min-height: 460px;
  border: 1px dashed var(--line); border-radius: var(--r-2); color: var(--ink-2); padding: var(--s-4);
}
.more-slide .arrow { font: 400 2.5rem/1 var(--font-serif); color: var(--accent); }
.more-slide .t { font: 400 1.25rem/1.3 var(--font-serif); color: var(--ink); }
@keyframes nudge { from { transform: translateX(0); } to { transform: translateX(8px); } }

/* Desktop: several cards side by side, arrow buttons */
@media (min-width: 760px) {
  body.vista-carosello #results .entry { flex-basis: 380px; }
  body.vista-carosello .cnav {
    display: grid; place-items: center; position: absolute; top: 45%; z-index: 5; width: 44px; height: 44px;
    border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 400 1.75rem/1 var(--font-serif);
    cursor: pointer; box-shadow: var(--shadow);
  }
  body.vista-carosello .cnav.prev { left: -12px; }
  body.vista-carosello .cnav.next { right: -12px; }
  body.vista-carosello .cnav:hover { border-color: var(--accent); color: var(--accent); }
}
/* "Anteprima telefono": desktop only, and never inside the preview frame itself */
.phone-preview { color: var(--ink-2); font-size: var(--fs-sm); }
@media (max-width: 759px) { .phone-preview { display: none; } }
/* view switch: icons + labels, icons only on narrow screens */
.view-switch button { display: inline-flex; align-items: center; gap: 6px; }
.view-switch svg { width: 14px; height: 14px; }
.view-switch .vs-l:not(.sr-only) { display: inline; }
@media (max-width: 520px) { .view-switch .vs-l { display: none !important; } .view-switch button { padding: 7px 9px; } .mylist-link { white-space: nowrap; } }
/* slider head: current level in words */
.hs-head { display: flex; align-items: baseline; gap: var(--s-2); margin-bottom: var(--s-3); }
.hs-head .caps { color: var(--ink-3); }
.hs-name { font: 400 1.25rem/1 var(--font-serif); color: var(--accent); }
.hs-labels { height: 2.4em; }
.hs-labels span:last-child { text-align: right; }
/* keep hidden helper text inside the scroller, so the page never widens sideways on phones */
body.vista-carosello #results { position: relative; }
/* End of carousel: friction before loading the next 6 */
.more-slide .s { font-size: .9rem; color: var(--ink-3); max-width: 22ch; }
.more-slide .pull { width: 120px; height: 4px; border-radius: 2px; background: var(--sunk); overflow: hidden; opacity: .35; transition: opacity .2s; }
.more-slide .pull-fill { display: block; height: 100%; width: calc(var(--pull, 0) * 100%); background: var(--accent); transition: width .12s linear; }
.more-slide.is-armed .pull { opacity: 1; }
.more-slide.is-armed .arrow { animation: nudge .9s var(--ease) infinite alternate; }
.more-slide .pull-btn { font: 500 .85rem/1 var(--font-sans, inherit); background: none; border: 1px solid var(--line); border-radius: var(--r-round); padding: 8px 14px; color: var(--ink-2); cursor: pointer; }
.more-slide .pull-btn:hover { border-color: var(--accent); color: var(--accent); }
.more-slide.is-loading .pull, .more-slide.is-loading .pull-btn { visibility: hidden; }
.more-slide.is-loading .arrow { font-size: 0; width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--sunk); border-top-color: var(--accent); animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (hover: none) { .more-slide .pull-btn { display: none; } }
@media (prefers-reduced-motion: reduce) { .more-slide .arrow { animation: none !important; } }
/* Poster: tap to see it whole */
.poster-open { all: unset; display: block; width: 100%; height: 100%; cursor: zoom-in; }
.poster-open:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.poster-open img { display: block; width: 100%; height: 100%; object-fit: cover; }
.poster-viewer { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100dvh; margin: 0; cursor: zoom-out; }
.poster-viewer::backdrop { background: rgba(14, 13, 10, .88); }
.poster-viewer[open] { display: grid; place-items: center; }
.poster-viewer figure { margin: 0; display: grid; justify-items: center; gap: var(--s-3); padding: 48px 16px 24px; }
.poster-viewer img { max-width: min(92vw, 680px); max-height: calc(100dvh - 120px); width: auto; height: auto; border-radius: var(--r-1); box-shadow: 0 30px 80px -20px rgba(0,0,0,.7); }
.poster-viewer figcaption { font: 400 1.1rem/1.3 var(--font-serif); color: #eee7d9; text-align: center; }
.pv-close { position: fixed; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(238,231,217,.4); background: rgba(14,13,10,.5); color: #eee7d9; font-size: 1.6rem; line-height: 1; cursor: pointer; }
html.pv-open { overflow: hidden; }

/* Phones, carousel view: slider and filters move into a sheet opened by "Filtri" */
.filter-btn { display: none; }
.sheet { display: none; }
@media (max-width: 759px) {
  body.vista-carosello .ctop > .hslider,
  body.vista-carosello #filters { display: none; }
  body.vista-carosello .ctop-row { margin-bottom: var(--s-2); }
  body.vista-carosello .filter-btn {
    display: flex; align-items: center; gap: var(--s-2); width: 100%;
    font: 500 .95rem/1.2 var(--font-sans); color: var(--ink); background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--r-round); padding: 9px 14px; cursor: pointer;
  }
  body.vista-carosello .filter-btn svg { width: 18px; height: 18px; flex: none; }
  .filter-btn .fb-sum { margin-left: auto; color: var(--ink-2); font-size: .9rem; }
  .filter-btn .fb-sum em { font: 400 1.05rem/1 var(--font-serif); color: var(--accent); }
}
.sheet[open] {
  display: flex; flex-direction: column; position: fixed; inset: auto 0 0 0; margin: 0; width: 100%; max-width: 560px; margin-inline: auto;
  max-height: 88dvh; padding: 0; border: 0; border-radius: 18px 18px 0 0;
  background: var(--bg); color: var(--ink); box-shadow: 0 -20px 60px -20px rgba(0,0,0,.45);
  animation: sheet-up .22s var(--ease, ease-out);
}
.sheet::backdrop { background: rgba(14, 13, 10, .5); }
@keyframes sheet-up { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: var(--s-3) var(--s-4) 0; }
.sheet-head h2 { font: 400 1.4rem/1.2 var(--font-serif); margin: 0; }
.sheet-x { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: none; color: var(--ink); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.sheet-body { overflow-y: auto; padding: var(--s-4); display: grid; gap: var(--s-5, 24px); }
.sheet-body .filters-body { display: grid; grid-template-columns: 1fr; gap: var(--s-3); padding: 0; }
.sheet-body .f-select select { width: 100%; }
.sheet-foot { padding: var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom)); border-top: 1px solid var(--rule); }
.sheet-foot .btn { width: 100%; justify-content: center; }
html.sheet-open { overflow: hidden; }
.sheet-body .f-select { display: grid; grid-template-columns: 9.5em 1fr; align-items: center; gap: var(--s-3); }
/* small examples under a filter name: smaller and lighter than the name they explain */
.f-label { display: flex; flex-direction: column; gap: 2px; }
.f-sub { font-size: .6875rem; line-height: 1.25; color: var(--ink-3); }
/* Carousel top: start-series poster on the left of title and "Filtri" (or the slider on desktop) */
.ctop-poster { display: none; }
body.vista-carosello .ctop { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s-4); align-items: start; }
body.vista-carosello .ctop > :not(.ctop-poster) { grid-column: 2; }
body.vista-carosello .ctop-poster { display: block; grid-column: 1; grid-row: 1 / span 2; align-self: stretch; width: 84px; }
body.vista-carosello .ctop-poster .poster { width: 100%; height: 100%; max-height: 132px; aspect-ratio: 210/295; box-shadow: var(--shadow); }
@media (min-width: 760px) { body.vista-carosello .ctop-poster { width: 96px; } body.vista-carosello .ctop-poster .poster { max-height: 140px; } }
@media (max-width: 759px) { body.vista-carosello .ctop-start h2 { font-size: 1.3rem; } }
/* Poster viewer zoom: the page itself must not zoom or scroll under the fingers */
.poster-viewer { touch-action: none; overflow: hidden; }
.poster-viewer img { transform-origin: center center; will-change: transform; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.poster-viewer.is-zoomed { cursor: grab; }
.poster-viewer.is-zoomed figcaption { opacity: 0; }
.poster-viewer figure { position: relative; }
.pv-close { z-index: 2; }
/* "Cambia serie" as a magnifying-glass icon */
.icon-btn { flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; transition: border-color var(--dur), color var(--dur); }
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn:hover, .icon-btn:focus-visible { border-color: var(--accent); color: var(--accent); }
.ctop-row { align-items: center; }
/* carousel cards are a column: every block takes the full width (the list-view
   alignment of the header would push short headers to the right) */
body.vista-carosello #results .entry > * { align-self: stretch; }
/* Carousel "Cambia serie": the whole home page (search + knob) as an overlay above the proposals */
.search-x, .search-actions { display: none; }
body.vista-carosello.has-start.searching .hero {
  display: block; position: fixed; inset: 0; z-index: 1000; overflow-y: auto; overscroll-behavior: contain;
  background: var(--bg); padding: var(--s-5) 0 0; animation: search-in .2s var(--ease, ease-out);
}
@keyframes search-in { from { transform: translateY(-16px); opacity: 0; } to { transform: none; opacity: 1; } }
body.searching .search-x { display: inline-grid; position: absolute; top: 0; right: var(--gutter); font-size: 1.5rem; line-height: 1; z-index: 2; }
body.searching .hero h1 { padding-right: 52px; }
body.searching .search-actions {
  display: grid; gap: var(--s-2); position: sticky; bottom: 0; z-index: 30; margin-top: var(--s-5);
  padding: var(--s-3) var(--gutter) calc(var(--s-3) + env(safe-area-inset-bottom));
  background: var(--bg); border-top: 1px solid var(--rule);
}
body.searching .search-actions .row { display: grid; grid-template-columns: 1fr 2fr; gap: var(--s-3); max-width: var(--maxw); margin: 0 auto; width: 100%; }
body.searching .search-actions .btn { justify-content: center; }
.search-actions .btn:disabled { opacity: .45; cursor: default; }
.search-picked { margin: 0 auto; max-width: var(--maxw); width: 100%; font-size: var(--fs-sm); color: var(--ink-2); }
.search-picked:empty { display: none; }
body.searching main { z-index: 1000; } /* main is a stacking layer below the header: lift it while the search is open */
/* Carousel top: title and poster open the start series' details */
.ctop-open { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; text-align: left; cursor: pointer; }
h2 > .ctop-open { text-decoration: underline; text-decoration-color: var(--line); text-decoration-thickness: 1px; text-underline-offset: .18em; }
h2 > .ctop-open:hover { text-decoration-color: var(--accent); }
.ctop-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ctop-poster .ctop-open { display: block; }
.ctop-poster .ctop-open img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ctop-noimg { display: grid; place-items: center; height: 100%; padding: 6px; font: 400 .8rem/1.1 var(--font-serif); text-align: center; }
/* Start series details sheet */
.series-sheet .sheet-head .caps { margin: 0; color: var(--ink-3); }
.series-sheet .sheet-body { gap: var(--s-4); padding-bottom: calc(var(--s-5) + env(safe-area-inset-bottom)); }
.ss-top { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--s-4); align-items: start; }
.ss-top .poster { width: 100%; }
.ss-top h2 { margin: 0 0 var(--s-1); font: 500 1.5rem/1.15 var(--font-serif); }
.ss-top .orig, .ss-top .meta { margin: 0 0 var(--s-2); color: var(--ink-2); font-size: var(--fs-sm); }
.ss-top .meta2 { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; margin: 0; }
.ss-plot .caps { margin: 0 0 var(--s-1); color: var(--ink-3); }
.ss-plot p:last-child { margin: 0; line-height: 1.5; }
.series-sheet .actions { padding: 0; }
.series-sheet .deeper { margin: 0; }
/* card pieces reused in the sheet carry list-view grid areas: neutralize them here */
.series-sheet .sheet-body { display: flex; flex-direction: column; }
.series-sheet .sheet-body > *, .ss-top > * { grid-area: auto; }
.ss-top .poster { align-self: start; }
.ss-top .meta span + span::before { content: "·"; margin: 0 .45em; }

/* Phones, carousel, browsing proposals: no header (vertical space). It is back on the home
   page, "Cambia serie" and the list. */
@media (max-width: 759px) {
  /* (phone, carousel open: the header stays visible behind a veil, see "sheet over the home") */
  body.vista-carosello .ctop { position: relative; }
}
/* "Cambia serie" overlay: the header stays on top of it */
body.searching .site-head { position: fixed; top: 0; left: 0; right: 0; z-index: 1001; background: var(--bg); }
body.vista-carosello.has-start.searching .hero { padding-top: calc(var(--head-h, 65px) + var(--s-4)); }
/* Phone, browsing proposals: no top rule (it belonged under the header) */
@media (max-width: 759px) {
  body.vista-carosello.has-start:not(.searching):not([data-panel="lista"]) .ctop { border-top: 0; }
}
/* Header logo: red "TV" mark with a white ring, same in both themes */
.site-head .brand-tv { background: #D7261E; color: #fff; border: 2px solid #fff; border-radius: 5px; padding: 3px 5px 2px; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.site-head .brand:hover .brand-tv { background: #B51E17; color: #fff; }
/* Carousel top, final layout: [lens] [Partendo da / title] ........ [poster]
                                [Filtri (phone) or slider (desktop)] [poster] */
body.vista-carosello .ctop { grid-template-columns: minmax(0, 1fr) auto; }
body.vista-carosello .ctop > :not(.ctop-poster) { grid-column: 1; }
body.vista-carosello .ctop-poster { grid-column: 2; grid-row: 1 / span 2; }
body.vista-carosello .ctop-row { justify-content: flex-start; gap: var(--s-3); }
body.vista-carosello .ctop-row > #changeSeries { order: -1; }
body.vista-carosello .ctop-start { min-width: 0; }
/* Poster with a fixed size; the space above "Filtri" absorbs one- or two-line titles, so
   "Filtri" always sits on the poster's bottom edge and nothing moves between series. */
body.vista-carosello .ctop { grid-template-rows: 1fr auto; }
body.vista-carosello .ctop-poster { width: 90px; height: 128px; align-self: start; }
body.vista-carosello .ctop-poster .poster { height: 100%; max-height: none; }
body.vista-carosello .ctop-row { align-self: start; margin-bottom: var(--s-2); }
body.vista-carosello .ctop > .filter-btn { align-self: end; }
@media (min-width: 760px) { body.vista-carosello .ctop-poster { width: 96px; height: 136px; } body.vista-carosello .ctop > .hslider { align-self: end; margin-bottom: 0; } }
/* "La manopola dell'azzardo" is the section title, not a label: serif, larger, sentence case,
   with room below so the dial's "LATERALE" doesn't read as its second line */
#knobLabel, .search label[for="q"] { font: 500 1.55rem/1.15 var(--font-serif); letter-spacing: 0; text-transform: none; color: var(--ink); margin: 0 0 var(--s-5); }
#knobLabel em { color: var(--accent); }


/* ---------------- Sans-serif only (no serif, no decorative italics) ---------------- */
.brand-word { font: 800 1.6rem/1 var(--font-sans); letter-spacing: -.035em; font-style: normal; }
.hero h1 { font-weight: 700; letter-spacing: -.035em; line-height: 1.02; }
.hero h1 em, #knobLabel em, .filter-btn .fb-sum em { font-style: normal; }
.entry h3, .ss-top h2, .ctop-start h2, .results-head h2 { font-weight: 700; letter-spacing: -.02em; }
.message h2, .mylist-head h2, .sheet-head h2, .w-title, .steps h3 { font-weight: 700; letter-spacing: -.02em; }
#knobLabel, .search label[for="q"] { font-weight: 700; letter-spacing: -.02em; }
.knob-readout .name { font-weight: 700; letter-spacing: -.03em; }
.entry .orig i, .ss-top .orig i { font-style: normal; font-family: var(--font-sans); font-weight: 600; color: var(--ink); }
/* the "why" sentence: the product. Medium weight, slightly smaller than the old serif quote */
.why p, .example p.q, .w-item .w-why { font-size: var(--fs-lg); font-weight: 500; line-height: 1.38; letter-spacing: -.01em; font-style: normal; }
.hint button, .no-match .try button { font-weight: 600; font-style: normal; }
.steps .n { font-weight: 800; }
.option .t, .my-items .t { font-weight: 600; }
.search-field input { font-weight: 500; }
.search-field input::placeholder { font-style: normal; }
.hs-name { font-weight: 700; }
.hero h1 em { display: block; }
.why p, .example p.q, .w-item .w-why { font-size: 1.125rem; }
@media (max-width: 759px) { body.vista-carosello .ctop-start h2 { font-size: 1.12rem; line-height: 1.2; } }


/* ---------------- Titles: condensed display sans (Barlow Condensed) ---------------- */
.brand-word, .hero h1, #knobLabel, .search label[for="q"], .knob-readout .name, .hs-name, .filter-btn .fb-sum em,
.entry h3, .ss-top h2, .ctop-start h2, .results-head h2, .message h2, .mylist-head h2,
.sheet-head h2, .w-title, .w-item h4, .steps h3, .steps .n {
  font-family: var(--font-display); letter-spacing: -.005em;
}
.brand-word { font-weight: 700; font-size: 1.85rem; letter-spacing: -.01em; }
.hero h1 { font-weight: 700; font-size: calc(var(--fs-2xl) * 1.12); line-height: .98; letter-spacing: -.01em; }
#knobLabel, .search label[for="q"] { font-weight: 600; font-size: 1.8rem; }
.knob-readout .name { font-weight: 600; font-size: 2.4rem; }
.hs-name, .filter-btn .fb-sum em { font-weight: 600; font-size: 1.3rem; }
.entry h3 { font-weight: 600; font-size: calc(var(--fs-lg) * 1.15); line-height: 1.05; }
.ss-top h2, .results-head h2, .message h2, .mylist-head h2, .sheet-head h2 { font-weight: 600; }
.ctop-start h2 { font-weight: 600; font-size: 1.55rem; line-height: 1.05; }
@media (max-width: 759px) { body.vista-carosello .ctop-start h2 { font-size: 1.4rem; line-height: 1.05; } }
.hero h1 { font-size: min(calc(var(--fs-2xl) * 1.12), 9.3vw); }
.hero h1 { max-width: none; text-wrap: wrap; }
.hero h1 em { white-space: nowrap; }

/* ---------------- Knob as a half-circle meter (main page) ---------------- */
.knob.meter { --size: 300px; height: calc(var(--size) * 150 / 260); border-radius: 0; margin-top: var(--s-4); }
@media (max-width: 759px) { .knob-panel .knob.meter { --size: min(300px, 82vw); } }
@media (min-width: 900px) { .knob-panel .knob.meter { --size: 320px; } }
.knob.meter .meter-face { fill: var(--surface); stroke: var(--line); stroke-width: 1; }
.knob.meter .meter-arc { fill: none; stroke: var(--ink); stroke-width: 1.5; opacity: .5; }
.knob.meter .tick { stroke-width: 2.5; }
.knob.meter .tick.major { stroke-width: 3.5; }
.knob.meter .pointer { stroke-width: 4; }
.knob.meter .cap { fill: var(--ink); stroke: none; }
.knob.meter .rotor { transition: transform 90ms linear; }
.knob.meter .static-anim { transform-origin: 130px 138px; }
.knob.meter:focus-visible::after { inset: -6px; border-radius: 12px; outline-offset: 0; }
/* labels at the two ends of the arc and above its top */
.knob.meter .knob-labels .l-min { left: -4px; top: auto; bottom: -24px; }
.knob.meter .knob-labels .l-max { right: -4px; left: auto; top: auto; bottom: -24px; max-width: none; white-space: nowrap; }
.knob.meter .knob-labels .l-mid { top: -24px; }
.knob-panel .knob.meter + .knob-readout { margin-top: calc(var(--s-5) + 8px); }
/* stacked home (phones): half the space between the example titles and the knob's top rule */
@media (max-width: 899px) { .hero-grid { row-gap: 12px; } #hint { margin-bottom: 11px; } }

/* Few results while filters are on: name them and offer the reset */
.filter-alert { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; justify-content: space-between;
  margin: var(--s-3) 0; padding: var(--s-3) var(--s-4); border: 1px solid var(--accent); border-radius: var(--r-2);
  background: var(--accent-soft, var(--surface)); color: var(--ink); font-size: var(--fs-sm); }
.filter-alert[hidden] { display: none; }

/* "Suggerimenti ovvi" (Enrico, 30/10/2026): same saga, remakes, same characters, kept out of the
   proposals. Always open since 8/11/2026: a heading with its note, then one row of small posters
   (the title in a tooltip), in a darker tone than the page and the cards. */
.ovvi { margin: var(--s-3) 0 var(--s-4); padding: 14px 18px 14px; background: var(--sunk); border-radius: var(--r-2, 8px); }
.ovvi[hidden] { display: none; }
.ovvi-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--s-3); margin-bottom: 10px; }
.ovvi-title { margin: 0; font: 600 1.25rem/1.1 var(--font-display); letter-spacing: -.005em; color: var(--ink); }
.ovvi-note { margin: 0; min-width: 0; flex: 1 1 18em; font-size: .9375rem; font-style: italic; text-wrap: pretty; color: var(--ink-2); line-height: 1.35; } /* slanted, asked by Enrico (30/10/2026). No italic cut is loaded on purpose: the browser leans the same letters (the real italic looked like another typeface) */
.ovvi-list {
  list-style: none; margin: 0; padding: 2px 2px 4px; display: flex; gap: 10px;
  overflow-x: auto; scroll-snap-type: x proximity; overscroll-behavior-x: contain; scrollbar-width: thin;
}
.ovvi-list li { flex: none; width: 64px; scroll-snap-align: start; }
.ovvi-item { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; border-radius: var(--r-1, 4px); }
.ovvi-poster { display: block; aspect-ratio: 2 / 3; border-radius: var(--r-1, 4px); overflow: hidden; background: var(--surface); transition: transform var(--dur, .15s) ease; }
.ovvi-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ovvi-noimg { display: flex; align-items: center; justify-content: center; height: 100%; padding: 4px; text-align: center; font-size: 10px; line-height: 1.15; color: var(--ink-2); overflow: hidden; }
.ovvi-item:hover .ovvi-poster { transform: translateY(-2px); }
.ovvi-item:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* the tooltip, outside the scrolling row (it would clip it), styled like the other tooltips */
.ovvi-tip {
  position: fixed; z-index: 60; width: max-content; max-width: 220px; padding: 6px 9px; border-radius: var(--r-1);
  background: var(--ink); color: var(--bg); font: 500 12px/1.3 var(--font-sans); text-align: center; pointer-events: none;
}
.ovvi-tip[hidden] { display: none; }
@media (max-width: 759px) {
  .ovvi { padding: 12px 14px; }
  .ovvi-title { font-size: 1.125rem; }
  .ovvi-note { font-size: .875rem; }
  .ovvi-list li { width: 56px; }
}
@media (prefers-reduced-motion: reduce) { .ovvi-poster { transition: none; } .ovvi-item:hover .ovvi-poster { transform: none; } }

.filter-alert p { margin: 0; flex: 1 1 14em; line-height: 1.4; }
.filter-alert strong { color: var(--accent); }
.filter-alert .btn { min-height: 36px; flex: none; }
.filter-btn .fb-sum { white-space: nowrap; }
.filter-btn .fb-sum em { font-size: 1.12rem; }
/* "Voglio vederla" (bookmark) next to the thumbs: filled when saved */
.taste-btn.save[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.taste-btn.save[aria-pressed="true"] svg path { fill: currentColor; }

/* ---------------- Grid view: posters only, the card opens on top ---------------- */
.tile-open, .hook { display: none; }
body.vista-griglia .more-row { display: none; }
body.vista-griglia #results {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s-5) var(--s-3);
  padding: var(--s-4) 0 var(--s-6);
}
@media (min-width: 760px) { body.vista-griglia #results { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--s-6) var(--s-4); } }
body.vista-griglia #results .entry { display: flex; flex-direction: column; gap: 6px; position: relative; padding: 0; border: 0; }
body.vista-griglia #results .entry > :not(.poster-col):not(.entry-head):not(.tile-open) { display: none; }
body.vista-griglia #results .entry .taste, body.vista-griglia #results .entry-num,
body.vista-griglia #results .entry-head > :not(h3):not(.hook):not(.title-line) { display: none; }
body.vista-griglia #results .poster { width: 100%; aspect-ratio: 210/295; border-radius: var(--r-2); }
body.vista-griglia #results .poster-open { pointer-events: none; }
body.vista-griglia #results h3 { font-size: 1.15rem; line-height: 1.05; margin: 0; }
body.vista-griglia #results .hook { display: block; margin: 2px 0 0; font: 600 var(--fs-xs)/1.25 var(--font-sans); letter-spacing: .02em; color: var(--accent); }
body.vista-griglia #results .tile-open { display: block; position: absolute; inset: 0; z-index: 2; background: none; border: 0; padding: 0; cursor: pointer; border-radius: var(--r-2); }
body.vista-griglia #results .tile-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
body.vista-griglia #results .entry:hover .poster { box-shadow: 0 0 0 2px var(--accent); }
/* count tile with the pull, across the whole row */
body.vista-griglia #results .more-tile {
  display: grid; justify-items: center; gap: var(--s-2); grid-column: 1 / -1; text-align: center;
  padding: var(--s-5) var(--s-4); border: 1px dashed var(--line); border-radius: var(--r-2); color: var(--ink-2);
}
.more-tile .t { font: 600 1.3rem/1.2 var(--font-display, var(--font-sans)); color: var(--ink); }
/* the card opened from a tile */
.card-viewer[open] { max-height: 92dvh; }
.card-viewer .cv-body { overflow-y: auto; padding: 0 var(--s-4) calc(var(--s-5) + env(safe-area-inset-bottom)); }
.card-viewer .entry { border-bottom: 0; padding-top: var(--s-3); }
.card-viewer .sheet-head .caps { margin: 0; color: var(--ink-3); }

/* View selector inside the filters (Lista · Griglia · Carosello, like Finder's views) */
.f-vista { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; grid-column: 1 / -1; }
.f-vista .seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-round); overflow: hidden; }
.f-vista .seg button { background: none; border: 0; padding: 7px 14px; font: 600 var(--fs-xs)/1 var(--font-sans); color: var(--ink-2); cursor: pointer; }
.f-vista .seg button + button { border-left: 1px solid var(--line); }
.f-vista .seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.filters-body .f-vista { flex-basis: 100%; }
body.vista-griglia #results .entry > * { align-self: stretch; }
/* list view and card viewer on phones: room for three buttons under the poster */
@media (max-width: 759px) {
  .entry { grid-template-columns: 112px minmax(0, 1fr); }
  .entry .taste { gap: 6px; justify-content: flex-start; }
  .entry .taste-btn { width: 32px; height: 32px; }
}
/* wide screens: 5 posters per row, 15 per batch (whole rows) */
@media (min-width: 900px) { body.vista-griglia #results { grid-template-columns: repeat(5, minmax(0, 1fr)); } }


/* ---------------- Carousel as a page on top of the home ---------------- */
.back-results { display: none; margin: var(--s-2) 0 0; }
body.vista-carosello.has-start.carousel-closed .hero { display: block; }
body.vista-carosello.has-start.carousel-closed #zone { display: none; }
body.vista-carosello:not(.v2).has-start:not(.carousel-closed) #zone { animation: page-up .55s cubic-bezier(.22, .8, .25, 1); }
@keyframes page-up { from { transform: translateY(70%); } to { transform: none; } }
/* top bar: poster on the left, title in the middle, × on the right */
body.vista-carosello .ctop { grid-template-columns: auto minmax(0, 1fr); }
body.vista-carosello .ctop > :not(.ctop-poster) { grid-column: 2; }
body.vista-carosello .ctop-poster { grid-column: 1; }
body.vista-carosello .ctop-row { justify-content: space-between; }
body.vista-carosello .ctop-row > #changeSeries { order: 1; font-size: 1.6rem; line-height: 1; }

/* Phone, carousel open: a sheet resting on the home. The real header stays visible and whole
   behind a dark veil (tap it to close the carousel); the sheet overlaps it slightly with rounded
   corners, a thin edge and a soft shadow, so the stacking reads in both themes. */
@media (max-width: 759px) {
  body.vista-carosello:not(.v2).has-start:not(.carousel-closed):not(.searching):not([data-panel="lista"]) .site-head { position: relative; cursor: pointer; }
  body.vista-carosello:not(.v2).has-start:not(.carousel-closed):not(.searching):not([data-panel="lista"]) .site-head::after {
    content: ""; position: absolute; inset: 0; z-index: 5; background: rgba(0, 0, 0, .5);
  }
  body.vista-carosello:not(.v2).has-start:not(.carousel-closed):not(.searching):not([data-panel="lista"]) #zone {
    position: relative; z-index: 6; margin-top: -14px; background: var(--bg);
    border-radius: 16px 16px 0 0; border-top: 1px solid var(--line); box-shadow: 0 -8px 22px rgba(0, 0, 0, .35);
  }
}

/* ---------------- Less distance between titles and text ----------------
   Wide screens: text about +18%, headline a little smaller. Phones: headline and knob titles
   smaller, closer to the text. A huge headline over tiny text is a look Enrico dislikes. */
@media (min-width: 900px) {
  :root { --fs-xs: .875rem; --fs-sm: 1.03rem; --fs-md: 1.18rem; --fs-lg: 1.45rem; }
  .hero .lede { font-size: 1.25rem; }
  .hero h1 { font-size: 3.25rem; }
  #knobLabel, .search label[for="q"] { font-size: 1.9rem; }
  .knob-readout .name { font-size: 2.2rem; }
  .knob-readout .desc { font-size: var(--fs-md); }
  .hs-labels { font-size: 12px; }
}
@media (max-width: 759px) {
  .hero h1 { font-size: min(1.85rem, 8vw); }
  #knobLabel, .search label[for="q"] { font-size: 1.5rem; }
  .knob-readout .name { font-size: 1.9rem; }
}
@media (min-width: 900px) { .why p, .example p.q, .w-item .w-why { font-size: 1.3rem; } }
/* Knob: one line under the title; no "laterale" label at the top of the meter (it read as a
   heading); the level is still named under the needle */
#knobLabel, .search label[for="q"] { margin-bottom: var(--s-2); }
.knob-intro { margin: 0 0 var(--s-3); color: var(--ink-2); font-size: var(--fs-sm); max-width: 46ch; text-wrap: balance; }
.knob.meter .knob-labels .l-mid { display: none; }
.knob-panel .knob.meter { margin-top: var(--s-3); }
/* the sheet must sit ABOVE the veiled header: main is its own layer, lift it over the header */
@media (max-width: 759px) {
  body.vista-carosello:not(.v2).has-start:not(.carousel-closed):not(.searching):not([data-panel="lista"]) main { z-index: 10; }
  body.vista-carosello:not(.v2).has-start:not(.carousel-closed):not(.searching):not([data-panel="lista"]) #zone {
    margin-top: -10px; border-radius: 28px 28px 0 0; border-top: 1px solid var(--line); box-shadow: 0 -10px 28px rgba(0, 0, 0, .35);
  }
  body.vista-carosello:not(.v2).has-start:not(.carousel-closed):not(.searching):not([data-panel="lista"]) .ctop { padding-top: 26px; }
}
/* the rounded corners must rest on the veil: extend it below the header (the sheet covers it) */
@media (max-width: 759px) {
  body.vista-carosello:not(.v2).has-start:not(.carousel-closed):not(.searching):not([data-panel="lista"]) .site-head::after { bottom: -40px; }
}

/* ---------------- "Come funziona": a real hierarchy ----------------
   section title > step titles > text, and the text at the page's normal size */
.section-title { margin: 0 0 var(--s-5); font: 700 2rem/1.05 var(--font-display, var(--font-sans)); letter-spacing: -.01em; color: var(--ink); }
.steps .n { font-size: 2.2rem; line-height: 1; }
.steps h3 { margin: var(--s-2) 0 var(--s-2); font: 700 1.45rem/1.15 var(--font-display, var(--font-sans)); letter-spacing: -.005em; color: var(--ink); }
.steps p { font-size: var(--fs-md); line-height: 1.5; max-width: 36ch; }
.example-title { margin: 0 0 var(--s-2); font: 700 1.45rem/1.15 var(--font-display, var(--font-sans)); color: var(--ink); }
.example p.q { font-size: var(--fs-lg); }
.example p.a { font-size: var(--fs-md); }
@media (min-width: 900px) {
  .section-title { font-size: 2.6rem; }
  .steps h3, .example-title { font-size: 1.8rem; }
  .steps .n { font-size: 2.6rem; }
}

/* ---------------- List view: each proposal is a card with an outline ----------------
   (a list of options to choose from, not a continuous blog-like scroll) */
body:not(.vista-griglia):not(.vista-carosello) #results { display: grid; gap: var(--s-4); padding-top: var(--s-4); }
body:not(.vista-griglia):not(.vista-carosello) #results .entry {
  padding: var(--s-4); border: 1px solid var(--line); border-radius: 14px; background: var(--surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 6px 18px -10px rgba(0, 0, 0, .25);
}
@media (min-width: 760px) {
  body:not(.vista-griglia):not(.vista-carosello) #results { gap: var(--s-5); }
  body:not(.vista-griglia):not(.vista-carosello) #results .entry { padding: var(--s-5) var(--s-6) var(--s-5) var(--s-5); }
}
body:not(.vista-griglia):not(.vista-carosello) #results .entry:hover { border-color: var(--ink-3); }
/* example: title, then the pair of series, then the sentence */
.ex-pair { margin: 0 0 var(--s-2); font: 600 1.25rem/1.2 var(--font-display, var(--font-sans)); color: var(--ink); }
.ex-pair .ex-arrow { color: var(--accent); margin: 0 .25em; }
@media (min-width: 900px) { .ex-pair { font-size: 1.5rem; } }
.ex-pair { font-weight: 700; font-size: 1.4rem; }
.example p.q { font-size: var(--fs-md); line-height: 1.5; }
@media (min-width: 900px) { .ex-pair { font-size: 1.6rem; } .example p.q { font-size: 1.15rem; } }
.ex-pair { font-size: 1.45rem; }
@media (min-width: 900px) { .ex-pair { font-size: 1.7rem; } }

/* Examples carousel in "Come funziona": slides stacked, one visible, fading */
.ex-track { display: grid; margin: 0; padding: 0; list-style: none; }
.ex-slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility 0s linear .6s; }
.ex-slide.is-on { opacity: 1; visibility: visible; transition: opacity .6s ease; }
.ex-slide .q { margin: 0 0 var(--s-2); }
.ex-try { font-size: var(--fs-sm); }
.ex-dots { display: flex; gap: 8px; margin-top: var(--s-3); }
.ex-dot { width: 10px; height: 10px; padding: 0; border-radius: 50%; border: 1px solid var(--ink-3); background: transparent; cursor: pointer; }
.ex-dot[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); }
@media (pointer: coarse) { .ex-dot { width: 14px; height: 14px; } .ex-dots { gap: 12px; } }

/* Examples banner: small label, big pair, larger sentence; slides move sideways */
.ex-label { margin: 0 0 var(--s-2); color: var(--ink-3); }
.ex-stage { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-2); }
.ex-viewport { overflow: hidden; }
.ex-track { display: flex; grid-area: auto; transition: transform .6s cubic-bezier(.22, .8, .25, 1); }
.ex-slide { flex: 0 0 100%; min-width: 0; grid-area: auto; opacity: 1; visibility: visible; transition: none; padding: 0 var(--s-1); }
.ex-pair { font-size: 1.9rem; line-height: 1.1; margin-bottom: var(--s-2); }
.ex-slide .q { font-size: 1.15rem; line-height: 1.45; color: var(--ink); }
.ex-nav { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.ex-nav:hover { border-color: var(--accent); color: var(--accent); }
@media (min-width: 900px) {
  .ex-pair { font-size: 2.5rem; }
  .ex-slide .q { font-size: 1.45rem; max-width: 40ch; }
  .ex-nav { width: 48px; height: 48px; }
}
@media (prefers-reduced-motion: reduce) { .ex-track { transition: none; } }
.example .ex-slide p.q { font-size: 1.15rem; line-height: 1.45; color: var(--ink); }
@media (min-width: 900px) { .example .ex-slide p.q { font-size: 1.45rem; } }
/* phones: full width for the text, arrows on a row below it (dots between them) */
@media (max-width: 759px) {
  .ex-stage { grid-template-columns: 1fr auto auto; grid-template-areas: "vp vp vp" ". prev next"; row-gap: var(--s-3); }
  .ex-viewport { grid-area: vp; }
  .ex-nav.prev { grid-area: prev; }
  .ex-nav.next { grid-area: next; }
  .ex-dots { margin-top: calc(-40px - var(--s-1)); height: 40px; align-items: center; }
}

/* Carousel on wider screens: whole cards only (2 or 3 across), aligned from the left edge */
@media (min-width: 760px) {
  /* the clip hides the slivers of the neighbouring cards that would peek into the side padding */
  body.vista-carosello #results { scroll-padding-inline: var(--gutter); clip-path: inset(-40px var(--gutter)); }
  body.vista-carosello #results .entry { flex: 0 0 calc((100% - var(--s-3)) / 2); max-width: none; scroll-snap-align: start; }
  body.vista-carosello .cnav.prev { left: -22px; }
  body.vista-carosello .cnav.next { right: -22px; }
}
@media (min-width: 1100px) {
  body.vista-carosello #results .entry { flex-basis: calc((100% - 2 * var(--s-3)) / 3); }
}

/* ---------------- "Nuova stagione": a liked series is back because a season aired after the like ---------------- */
.poster-col { position: relative; }
.new-season {
  font: 700 11px/1.15 var(--font-sans); letter-spacing: .05em; text-transform: uppercase;
  background: var(--accent); color: var(--accent-ink); padding: 5px 7px; border-radius: var(--r-1);
}
.poster-col .new-season {
  position: absolute; top: 6px; left: 6px; z-index: 1; max-width: calc(100% - 12px);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .3); pointer-events: none;
}
.my-items .new-season { display: inline-block; margin-left: 4px; padding: 3px 6px; font-size: 10px; vertical-align: 2px; }

/* Start series: the same three vote buttons as the proposals (it may be a series the user
   doesn't know yet, picked just to explore), left-aligned under its title */
.taste.start-taste { justify-content: flex-start; margin-top: var(--s-3); }
.results-head { align-items: start; }
body.vista-carosello .ctop .start-taste { margin-top: 6px; gap: 6px; }
body.vista-carosello .ctop .start-taste .taste-btn { width: 32px; height: 32px; }
body.vista-carosello .ctop .start-taste .taste-btn svg { width: 15px; height: 15px; }
.ss-top .start-taste { margin-top: var(--s-3); }
/* Grid: the reason for the link opens with a small chain ("collegata perché…") */
body.vista-griglia #results .hook { display: flex; align-items: baseline; gap: 5px; }
body.vista-griglia #results .hook::before {
  content: ""; flex: none; width: 1em; height: 1em; background: currentColor; transform: translateY(.14em);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg transform='rotate(-45 12 12)' fill='none' stroke='%23000' stroke-width='2.6'%3E%3Crect x='1.5' y='8' width='12.5' height='8' rx='4'/%3E%3Crect x='10' y='8' width='12.5' height='8' rx='4'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg transform='rotate(-45 12 12)' fill='none' stroke='%23000' stroke-width='2.6'%3E%3Crect x='1.5' y='8' width='12.5' height='8' rx='4'/%3E%3Crect x='10' y='8' width='12.5' height='8' rx='4'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}
/* Carousel on wider screens: cards as tall as their content (no inner scroll, the page scrolls),
   all cards of a row equally tall; the poster keeps a steady height */
@media (min-width: 760px) {
  body.vista-carosello #results .entry { height: auto; min-height: 0; overflow: hidden; }
  body.vista-carosello #results .entry .poster { height: clamp(240px, 36vh, 360px); flex: none; }
  body.vista-carosello .more-slide { height: auto; min-height: 420px; }
}
/* list and grid head: vote buttons on the line of the dates, before them (keeps the head short) */
.start-line { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2) var(--s-3); margin-top: var(--s-1); }
.start-line .taste.start-taste { margin: 0; gap: 6px; }
.start-line .taste-btn { width: 32px; height: 32px; }
.start-line .taste-btn svg { width: 15px; height: 15px; }
.results-head .start-line .meta { margin: 0; }
.results-head { align-items: center; }
/* Drop-down menus: our own chevron, away from the right edge (the browser's one sits glued to it,
   whatever the padding); drawn with the text color, so it follows every style and theme */
.f-select { position: relative; }
.f-select select { -webkit-appearance: none; appearance: none; padding-right: 40px; cursor: pointer; }
.f-select::after {
  content: ""; position: absolute; right: 17px; top: 50%; width: 7px; height: 7px; pointer-events: none;
  border-right: 1.6px solid var(--ink-2); border-bottom: 1.6px solid var(--ink-2); transform: translateY(-70%) rotate(45deg);
}
.f-select select::-ms-expand { display: none; }
.sheet-body .f-select select { max-width: none; }
/* The "why" sentence (list, carousel, opened card): the same small chain as in the grid,
   in front of it, on the first line */
.why { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .45em; align-items: start; }
.why > p { grid-column: 2; }
.why::before {
  content: ""; grid-column: 1; grid-row: 1; width: 1.1rem; height: 1.1rem; margin-top: .32rem; background: var(--ink-3);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg transform='rotate(-45 12 12)' fill='none' stroke='%23000' stroke-width='2.6'%3E%3Crect x='1.5' y='8' width='12.5' height='8' rx='4'/%3E%3Crect x='10' y='8' width='12.5' height='8' rx='4'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg transform='rotate(-45 12 12)' fill='none' stroke='%23000' stroke-width='2.6'%3E%3Crect x='1.5' y='8' width='12.5' height='8' rx='4'/%3E%3Crect x='10' y='8' width='12.5' height='8' rx='4'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}
/* the opening « no longer hangs in the margin: the chain is there */
@media (min-width: 1100px) { .why p::before { position: static; } }
/* Start series head: audience and badges on the line of the dates; plot and links below, side by side */
.start-line .meta2 { margin: 0; }
.start-line .meta2:empty, .start-more:empty { display: none; }
.start-more { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--s-5); margin-top: var(--s-2); }
.start-more .plot[open] { flex-basis: 100%; }
.start-more .deeper { margin: 0; }
.results-head { align-items: start; }
.results-head .start-poster { margin-top: 2px; }

/* ---------------- Closed carousel: the sheet rests at the bottom ----------------
   Closing the carousel never leaves you stranded: the sheet slides down into a strip with the
   start series. Tap it (or pull it up) and the proposals come back as they were. */
.carousel-dock { display: none; }
body.vista-carosello.has-start.carousel-closed:not(.searching) .carousel-dock {
  position: fixed; z-index: 900; left: 50%; bottom: 0; transform: translateX(-50%);
  width: min(100%, 560px); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 18px 18px calc(12px + env(safe-area-inset-bottom)); border: 1px solid var(--line); border-bottom: 0;
  border-radius: 22px 22px 0 0; background: var(--bg); color: var(--ink); text-align: left; cursor: pointer;
  font: inherit; box-shadow: 0 -10px 28px rgba(0, 0, 0, .28); animation: dock-in .4s cubic-bezier(.22, .8, .25, 1);
}
@keyframes dock-in { from { transform: translate(-50%, 100%); } to { transform: translate(-50%, 0); } }
/* while typing a new series, the keyboard needs the room */
body.carousel-closed:has(#q:focus) .carousel-dock { display: none !important; }
.cd-grip { position: absolute; top: 7px; left: 50%; width: 38px; height: 4px; margin-left: -19px; border-radius: 2px; background: var(--line); }
.cd-poster { width: 34px; height: 48px; border-radius: 4px; overflow: hidden; background: var(--line); }
.cd-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cd-text { display: grid; gap: 2px; min-width: 0; }
.cd-kicker { font-size: var(--fs-xs); color: var(--ink-2); }
.cd-title { font-weight: 700; font-size: var(--fs-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-up { width: 26px; height: 26px; color: var(--accent); }
/* room for the strip at the end of the page, and the style picker sits above it */
body.vista-carosello.has-start.carousel-closed:not(.searching) { padding-bottom: 90px; }
body.vista-carosello.has-start.carousel-closed:not(.searching) .stile-picker { bottom: 96px; }

/* ---------------- "Non fanno per me": genres never wanted ----------------
   A row of chips; a pressed chip is excluded, drawn struck through so it reads as "no". */
.filters-body .f-evita { flex-basis: 100%; }
/* TVmaze rating selector: the same segmented look as Lista / Griglia / Carosello */
.filters-body .f-voto { flex-basis: 100%; display: grid; gap: 6px; justify-items: start; }
.f-voto .seg button { padding: 9px 14px; font-size: var(--fs-sm); }
.f-voto .f-evita-hint { margin: 0; max-width: 60ch; }
.f-evita[hidden] { display: none; }
.f-evita-hint { margin: 4px 0 var(--s-2); font-size: var(--fs-xs); color: var(--ink-2); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 6px 13px;
  border: 1px solid var(--line); border-radius: var(--r-round, 999px); background: none; color: var(--ink);
  font: 500 var(--fs-xs)/1 var(--font-sans); cursor: pointer;
}
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.chip[aria-pressed="true"]::before { content: ""; width: 9px; height: 9px; flex: none;
  background: linear-gradient(45deg, transparent 42%, currentColor 42% 58%, transparent 58%), linear-gradient(-45deg, transparent 42%, currentColor 42% 58%, transparent 58%); }

/* "Simile… ma è...": the big difference from the start series. */
/* same look as the platform badge: the words say it is a difference. On narrow cards the
   longer ones go on two lines: some line spacing, and lines of similar length. */
.origin.diff { line-height: 1.3; text-wrap: balance; }
/* the difference reads as a warning: a muted red, next to the neutral platform chip */
.origin.diff { color: color-mix(in srgb, var(--accent) 70%, var(--ink)); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }

/* guests of the private preview: no phone preview link (a tool for Enrico) */
html[data-stile-fisso] #phonePreview { display: none; }

/* ---------------- Filter bar ----------------
   A bar "Filtri" (opens the panel with the detailed filters), and under it what is used most:
   the three views and the two quick choices. The detailed filters live only in the panel. */
.filters { padding: var(--s-4) 0; }
.fbar-open {
  display: flex; align-items: center; gap: var(--s-2); width: 100%; padding: 12px 16px; cursor: pointer; text-align: left;
  font: 600 1rem/1.2 var(--font-sans); color: var(--ink); background: var(--surface, var(--bg));
  border: 1px solid var(--line); border-radius: var(--r-round, 999px);
}
.fbar-open:hover { border-color: var(--ink); }
.fbar-open svg { width: 18px; height: 18px; flex: none; }
.fbar-open .fbar-chev { margin-left: auto; width: 16px; height: 16px; color: var(--ink-2); }
.fbar-open .filters-count:not(:empty) { color: var(--accent); font-size: var(--fs-sm); }
.filters-quick { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); margin-top: var(--s-3); font-size: var(--fs-sm); color: var(--ink-2); }
.filters > #filtersAdv { display: none; }
.f-vista .seg button { display: inline-flex; align-items: center; gap: 6px; }
.f-vista .seg svg { width: 14px; height: 14px; flex: none; }
/* views as big as the "Filtri" bar (Enrico, 30/10/2026) */
.filters-quick .f-vista .seg button { padding: 12px 18px; gap: var(--s-2); font: 600 1rem/1.2 var(--font-sans); }
.filters-quick .f-vista .seg svg { width: 18px; height: 18px; }
.sheet-body .filters-quick { margin: 0; display: grid; gap: var(--s-3); }
/* panel sections (abbonamenti, menus, rating, genres, countries) set apart by space and a thin rule */
.sheet-body #filtersAdv > .f-voto, .sheet-body #filtersAdv > .f-generi, .sheet-body #filtersAdv > .f-paesi { margin-top: var(--s-3); padding-top: var(--s-5); border-top: 1px solid var(--rule); }
.sheet-body #filtersAdv > .f-abbonamenti { margin-bottom: var(--s-3); padding-bottom: var(--s-5); border-bottom: 1px solid var(--rule); }
/* hierarchy (Enrico, 7/11/2026): a section title is bigger than everything it introduces (chips, the
   "Includi le serie senza voto" box, menus at 16px), and a field name is never smaller than its menu.
   Never small caps captions as titles. The panel title "Filtri" stays the biggest. */
#filterSheet .sheet-head h2 { font-size: 2rem; }
.sheet-body #filtersAdv .f-evita > .caps, .sheet-body #filtersAdv .f-voto > .caps {
  display: block; font: 700 1.45rem/1.15 var(--font-display); letter-spacing: -.005em; text-transform: none; color: var(--ink); margin-bottom: 2px; }
html[data-stile="pop"] .sheet-body #filtersAdv .f-evita > .caps, html[data-stile="pop"] .sheet-body #filtersAdv .f-voto > .caps { font-weight: 800; text-transform: uppercase; letter-spacing: .005em; }
.sheet-body #filtersAdv .f-select .caps { font: 600 var(--fs-md)/1.2 var(--font-sans); letter-spacing: 0; text-transform: none; color: var(--ink); }
/* wide screens: the filter panel opens in the middle of the page */
@media (min-width: 760px) {
  #filterSheet[open] { inset: 0; margin: auto; width: min(640px, calc(100% - 48px)); max-height: 85vh; height: fit-content; border-radius: 18px;
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .5); }
}

/* "Parti da questa serie": an outlined button (less loud than "Dove vederla"), its icon a bit
   larger than the small arrows so the dot and the path read */
.btn .ico-start { width: 18px; height: 18px; }

/* ---------------- "La mia lista" takes the whole page ----------------
   No search and knob above it (they do nothing there, and long lists need the room); the way
   back sits at the top left, where people look for it. */
body[data-panel="lista"] .hero { display: none; }
.my-back { display: inline-flex; align-items: center; gap: 6px; margin: 40px 0 28px; padding: 8px 0; border: 0; background: none;
  font: 600 1.25rem/1.2 var(--font-sans); color: var(--ink); cursor: pointer; }
.my-back:hover { color: var(--accent); }
.my-back svg { width: 22px; height: 22px; margin-left: -5px; }

/* "La mia lista": under each title, the way to remember what the series is */
.my-items .my-more { display: block; margin-top: 4px; font: 400 var(--fs-sm)/1.4 var(--font-sans); color: var(--ink-3); }
.my-items .my-more a, .my-items .my-more .as-link { color: var(--ink-2); font-size: inherit; }
.my-items .my-title { padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.my-items .my-title .mt-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--line); }
.my-items .my-title .ico-info { width: 17px; height: 17px; margin-left: 6px; vertical-align: -2px; color: var(--accent); }
.my-items .my-title:hover { color: var(--accent); }
.my-items .my-title:hover .mt-name { text-decoration-color: currentColor; }

/* Series sheet on wide screens: docked at the foot of the page, wide (80%) and short, no veil,
   poster on the left and the rest on the right. Phones keep the modal sheet from below. */
@media (min-width: 900px) {
  #seriesSheet.docked[open] { position: fixed; z-index: 1000; inset: auto 0 0 0; margin: 0 auto; width: min(80vw, 1100px); max-width: none;
    max-height: 76vh; border-radius: 18px 18px 0 0; box-shadow: 0 -18px 50px -18px rgba(0, 0, 0, .45); border: 1px solid var(--line); border-bottom: 0; }
  #seriesSheet .sheet-body { display: grid; grid-template-columns: 150px minmax(0, 1fr); column-gap: var(--s-5); row-gap: var(--s-3);
    align-content: start; padding: var(--s-2) var(--s-5) 56px; }
  #seriesSheet .ss-top { display: contents; }
  #seriesSheet .ss-top > .poster { grid-column: 1; grid-row: 1 / span 4; }
  #seriesSheet .sheet-body > :not(.ss-top), #seriesSheet .ss-top > :not(.poster) { grid-column: 2; }
  #seriesSheet .sheet-head { padding: var(--s-3) var(--s-5) 0; }
}

/* changing view: the old proposals fade a little while the new ones arrive */
#results.refreshing { opacity: .45; transition: opacity .15s; pointer-events: none; }
body.boot-list .hero, body.boot-list [data-state-panel="caricamento"] { display: none; }

/* "Fama" in front of the little people, in the same small capitals as the badges next to it */
.fame { align-items: center; }
.vote b { font: 600 var(--fs-sm)/1 var(--font-sans); color: var(--ink); }
.vote { cursor: help; }
.fame-l { margin-right: 5px; font: 600 var(--fs-xs)/1 var(--font-sans); letter-spacing: var(--tracking-caps, .06em); text-transform: uppercase; color: var(--ink-3); }

/* ---------------- Home: like a search engine, everything on one centred axis ----------------
   Payoff, a larger search and the knob under it; no explanations on the page (they live in
   the welcome panel). Only before a series is chosen: afterwards the hero keeps its two columns. */
body:not(.has-start) .hero { text-align: center; }
body:not(.has-start) .hero-grid { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: var(--s-6); max-width: 860px; margin-inline: auto; }
body:not(.has-start) .hero-grid > div:first-child { width: 100%; }
body:not(.has-start) .hero h1 { max-width: none; margin-inline: auto; }
body:not(.has-start) .hero .lede { margin-inline: auto; max-width: 48ch; }
body:not(.has-start) .search { max-width: 660px; margin-inline: auto; }
body:not(.has-start) .search label { text-align: center; }
body:not(.has-start) .search .listbox { text-align: left; }
body:not(.has-start) .search-field { box-shadow: 0 2px 4px rgba(0, 0, 0, .06), 0 10px 28px -12px rgba(0, 0, 0, .3); }
body:not(.has-start) .search-field input { padding: 17px 0; }
@media (min-width: 760px) { body:not(.has-start) .search-field input { font-size: 1.3rem; padding: 18px 0; } }
body:not(.has-start) .search-field svg { width: 22px; height: 22px; }
body:not(.has-start) .knob-panel { border: 0; padding: 0; width: 100%; }
@media (min-width: 900px) {
  body:not(.has-start) .hero { padding: var(--s-7, 48px) 0 var(--s-6); }
  body:not(.has-start) .knob-panel .knob.meter { --size: 280px; }
}
/* "Come funziona" on the line of the three starting series, as a small outlined button */
.how-again { display: none; }
body:not(.has-start) .how-again { display: inline-block; margin-left: var(--s-3); vertical-align: middle; }
.hint .how-again .btn { display: inline-flex; align-items: center; font: 600 .9rem/1 var(--font-sans); text-decoration: none; padding: 7px 14px; gap: 6px; color: var(--ink); border: 1.5px solid var(--ink-3); border-radius: 999px; background: transparent; }
.hint .how-again .btn:hover { border-color: var(--ink); }
.hint .how-again .btn svg { width: 17px; height: 17px; }
body:not(.has-start) .hero .lede { max-width: 62ch; }
body:not(.has-start) .results-zone:has([data-state-panel="iniziale"].is-on) { min-height: 0; padding-bottom: var(--s-5); }
@media (min-width: 900px) {
  body:not(.has-start) .hero { padding-top: var(--s-6); }
  body:not(.has-start) .hero-grid { gap: var(--s-5); }
}

/* Header "Come funziona": label on wide screens, the question-mark icon alone on small phones */
.head-tools .how { display: inline-flex; align-items: center; gap: 6px; }
.head-tools .how svg { width: 18px; height: 18px; flex: none; }
@media (max-width: 420px) {
  .head-tools .how .lbl { display: none; }
  .head-tools .how svg { width: 22px; height: 22px; }
}

/* ---------------- Welcome panel ----------------
   A sheet from the bottom on phones, a centred panel on computers. Title larger than the
   step titles, step titles larger than their text. */
#welcome .sheet-head { padding-bottom: 0; }
#welcome .welcome-body { gap: var(--s-5); padding-top: 0; }
.welcome-intro { text-align: left; }
.welcome-intro .kicker { margin: 0 0 var(--s-2); }
#wTitle { margin: 0 0 var(--s-2); font: 700 1.9rem/1.05 var(--font-display, var(--font-sans)); letter-spacing: -.01em; color: var(--ink); }
.w-lede { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--ink-2); max-width: 52ch; }
#welcome .steps { gap: var(--s-3); }
#welcome .steps li { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); column-gap: var(--s-2); padding-top: var(--s-3); }
#welcome .steps .n { grid-row: span 2; font-size: 1.7rem; line-height: 1; }
#welcome .steps h3 { margin: 0 0 4px; font-size: 1.2rem; line-height: 1.15; }
#welcome .steps p { font-size: .95rem; line-height: 1.45; max-width: none; }
#welcome .w-examples { padding: var(--s-4) 0 0; border-top: 1px solid var(--rule); }
#welcome .example { margin: 0; }
#welcome .ex-label { margin: 0 0 var(--s-3); font: 700 1.2rem/1.15 var(--font-display, var(--font-sans)); color: var(--ink); text-transform: none; letter-spacing: 0; }
#welcome .ex-pair { font-size: 1.1rem; line-height: 1.2; }
#welcome .ex-slide .q { font-size: 1rem; line-height: 1.45; }
#welcome .ex-dots { justify-content: center; }
.welcome-foot { display: flex; align-items: center; gap: var(--s-4); }
.w-note { display: none; margin: 0; font-size: var(--fs-sm); color: var(--ink-3); }
#welcome[open] { max-height: 92dvh; }
@media (min-width: 760px) {
  #welcome[open] { inset: 0; margin: auto; width: min(900px, calc(100% - 48px)); max-width: none; max-height: 88vh; height: fit-content;
    border-radius: 18px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .5); }
  #welcome .sheet-head { padding: var(--s-4) var(--s-5) 0; }
  #welcome .welcome-body { padding: 0 var(--s-6) var(--s-5); gap: var(--s-6); }
  #wTitle { font-size: 2.6rem; }
  .w-lede { font-size: 1.15rem; }
  #welcome .steps { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
  #welcome .steps li { display: block; }
  #welcome .steps .n { display: block; font-size: 2rem; margin-bottom: var(--s-2); }
  #welcome .steps h3 { font-size: 1.3rem; }
  #welcome .ex-pair { font-size: 1.25rem; }
  .welcome-foot { justify-content: space-between; padding: var(--s-4) var(--s-6); }
  .welcome-foot .btn { width: auto; min-width: 10em; }
  .w-note { display: block; }
}
html[data-stile="pop"] #wTitle { font-weight: 900; text-transform: uppercase; letter-spacing: 0; line-height: .95; }
html[data-stile="pop"] #welcome .ex-label { font-weight: 800; text-transform: uppercase; }

/* ---------------- "Condividi": the card, then the ways to send it ----------------
   A sheet from the bottom on phones, a centred panel on computers. */
.btn .ico-share { width: 18px; height: 18px; }
#shareSheet .share-body { gap: var(--s-3); padding-top: var(--s-3); justify-items: center; }
.share-preview { width: 100%; display: grid; place-items: center; min-height: 200px; }
.share-preview img { display: block; width: auto; max-width: 100%; max-height: min(56dvh, 520px); aspect-ratio: 1080 / 1350; border-radius: 14px; border: 2px solid var(--ink); box-shadow: 0 14px 34px -16px rgba(0, 0, 0, .5); }
.share-wait { margin: 0; color: var(--ink-2); display: flex; align-items: center; gap: var(--s-2); }
.share-text { margin: 0; width: 100%; font-size: var(--fs-sm); color: var(--ink-2); overflow-wrap: anywhere; }
.share-foot { display: grid; gap: var(--s-2); }
.share-foot .btn { width: 100%; justify-content: center; }
.share-foot [hidden] { display: none; }
@media (min-width: 760px) {
  #shareSheet[open] { inset: 0; margin: auto; width: min(560px, calc(100% - 48px)); max-width: none; max-height: 92vh; height: fit-content;
    border-radius: 18px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .5); }
  .share-foot { grid-template-columns: repeat(3, auto); justify-content: center; }
  .share-foot .btn { width: auto; }
}

/* Welcome: the three buttons under each proposal, explained */
#welcome .w-taste { padding-top: var(--s-4); border-top: 1px solid var(--rule); }
#welcome .w-h { margin: 0 0 var(--s-3); font: 700 1.2rem/1.15 var(--font-display, var(--font-sans)); color: var(--ink); }
html[data-stile="pop"] #welcome .w-h { font-weight: 800; text-transform: uppercase; }
#welcome .w-taste ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
#welcome .w-taste li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--s-3); align-items: start; }
#welcome .w-taste .taste-btn { cursor: default; pointer-events: none; width: 40px; height: 40px; display: grid; place-items: center; border: 1.5px solid var(--ink); border-radius: 50%; color: var(--ink); background: var(--surface); }
#welcome .w-taste .taste-btn svg { width: 19px; height: 19px; }
#welcome .w-taste p { margin: 0; font-size: .95rem; line-height: 1.45; color: var(--ink-2); }
#welcome .w-taste b { color: var(--ink); }
@media (min-width: 760px) {
  #welcome .w-h { font-size: 1.3rem; }
  #welcome .w-taste ul { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
}

/* ---------------- List view on wide screens: the buttons and the links in a right column ----------------
   The card gets shorter (more proposals on screen); phones and the other views keep their layout. */
/* big screens: the page widens a little, so the sentence keeps its room next to the column */
@media (min-width: 1400px) { :root { --maxw: 1260px; } }
/* (v2 has the chat column beside the proposals: its cards keep the two-column layout of tablets) */
/* the buttons and links travel together: one block on the right on wide screens, and on
   narrow screens (and in the other views) the block disappears and they sit in the card's grid */
.entry .side { display: contents; }
/* "Dove vederla" next to the title: only in the list on wide screens (elsewhere it stays with the other buttons) */
.entry .watch-top { display: none; }
@media (min-width: 1180px) {
  body:not(.vista-griglia):not(.vista-carosello):not(.v2) #results .entry {
    grid-template-columns: 148px minmax(0, 1fr) 224px;
    grid-template-areas: "poster head side" "poster line side" "poster plot side";
    grid-template-rows: auto auto 1fr;
    column-gap: var(--s-5);
  }
  body:not(.vista-griglia):not(.vista-carosello):not(.v2) #results .entry .side {
    grid-area: side; display: flex; flex-direction: column; gap: 36px; align-self: start;
    padding-left: var(--s-4); border-left: 1px solid var(--rule);
  }
  body:not(.vista-griglia):not(.vista-carosello):not(.v2) #results .entry .actions .watch { display: none; }
  body:not(.vista-griglia):not(.vista-carosello):not(.v2) #results .entry .actions .btn { min-height: 40px; }
  body:not(.vista-griglia):not(.vista-carosello):not(.v2) #results .entry-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-4); }
  body:not(.vista-griglia):not(.vista-carosello):not(.v2) #results .entry-head > * { grid-column: 1; }
  /* its top lines up with the number and with "Parti da questa serie" */
  body:not(.vista-griglia):not(.vista-carosello):not(.v2) #results .entry-head .watch-top { display: inline-flex; grid-column: 2; grid-row: 1 / span 2; align-self: start; white-space: nowrap; }
  body:not(.vista-griglia):not(.vista-carosello):not(.v2) #results .entry-head .entry-num { margin-top: 0; }
  body:not(.vista-griglia):not(.vista-carosello):not(.v2) #results .entry .actions { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: var(--s-2); padding: 0; }
  body:not(.vista-griglia):not(.vista-carosello):not(.v2) #results .entry .actions .btn { justify-content: center; width: 100%; padding: 0 var(--s-3); white-space: nowrap; }
  body:not(.vista-griglia):not(.vista-carosello):not(.v2) #results .entry .why { max-width: none; }
  /* links big enough to hit, with room between them (no dots) */
  body:not(.vista-griglia):not(.vista-carosello):not(.v2) #results .entry .deeper { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .95rem; line-height: 1.3; }
  body:not(.vista-griglia):not(.vista-carosello):not(.v2) #results .entry .deeper .caps { flex-basis: 100%; margin: 0 0 2px; }
  body:not(.vista-griglia):not(.vista-carosello):not(.v2) #results .entry .deeper > span[aria-hidden] { display: none; }
  body:not(.vista-griglia):not(.vista-carosello):not(.v2) #results .entry .deeper a { padding: 4px 0; }
}

/* Phones: the buttons under a proposal all as wide as the card (no staircase of widths) */
@media (max-width: 759px) {
  .entry .actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
  .entry .actions .btn { width: 100%; justify-content: center; }
}

/* Welcome: real examples side by side (swipe, or the arrows), each cut under its sentence */
#welcome .w-example { padding-top: var(--s-4); border-top: 1px solid var(--rule); min-width: 0; }
#welcome .w-ex-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-3); }
#welcome .w-ex-head .w-h { margin: 0; }
#welcome .w-ex-nav { display: none; gap: var(--s-2); }
@media (min-width: 760px) and (pointer: fine) { #welcome .w-ex-nav { display: flex; } }
#welcome .w-strip { display: grid; grid-auto-flow: column; grid-auto-columns: 86%; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain; scrollbar-width: none; padding-bottom: 4px; }
#welcome .w-strip::-webkit-scrollbar { display: none; }
@media (min-width: 760px) { #welcome .w-strip { grid-auto-columns: 78%; } }
#welcome .w-ex { margin: 0; scroll-snap-align: start; display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
#welcome .w-ex figcaption { font-size: .95rem; color: var(--ink-2); }
#welcome .w-ex figcaption b { color: var(--ink); }
#welcome .w-card { margin: 0; }
#welcome .w-card .entry { padding: var(--s-4); border: 1px solid var(--line); border-radius: 14px; background: var(--surface); overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 64px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 64px), transparent); }
#welcome .w-ex .w-try { align-self: flex-start; }
#welcome .w-wait { display: flex; align-items: center; gap: var(--s-2); color: var(--ink-2); padding: var(--s-4) 0; margin: 0; }
@media (min-width: 760px) { #welcome .w-card .entry { padding: var(--s-5); } }
#welcome .w-card .entry-num { display: none; }

/* "I miei abbonamenti": where the proposal is streaming today, among the user's services.
   Filled, unlike the outlined "Originale ...": it is the answer to "can I watch it tonight?" */
.oggi-su { font: 600 var(--fs-xs)/1 var(--font-sans); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--bg); background: var(--ok); padding: 5px 7px; border-radius: var(--r-1); }
.f-abbonamenti #fAbbNote { margin-top: 2px; }
.f-abbonamenti #fAbbNote a { color: inherit; }
/* "I miei abbonamenti": pressed means "I have it", not "excluded": green with a check mark */
#fAbbonamenti .chip[aria-pressed="true"] { background: var(--ok); border-color: var(--ok); color: var(--bg); text-decoration: none; }
#fAbbonamenti .chip[aria-pressed="true"]::before { width: 10px; height: 6px; background: none; border: solid currentColor; border-width: 0 0 2px 2px; transform: translateY(-2px) rotate(-45deg); }

/* "Guarda su Netflix" / "Dove vederla" on a line of its own: it is the main action; the other
   buttons ("Parti da questa serie", "Condividi") go together on the line below.
   Phones (all buttons stacked) and the wide list (buttons in the side column) don't need the break. */
.entry .actions-break { flex-basis: 100%; height: 0; }
@media (max-width: 759px) { .entry .actions-break { display: none; } }
@media (min-width: 1180px) { body:not(.vista-griglia):not(.vista-carosello) #results .entry .actions-break { display: none; } }
body.vista-carosello #results .entry .actions-break { display: none; }
/* on its own line it can be a little bigger than the buttons below */
@media (min-width: 760px) { .entry .actions .watch { min-height: 46px; padding-inline: 22px; font-size: var(--fs-md); } }

/* «Ritrova la serie» (beta): menu entry and the label shared with its page */
/* «Parliamone» (internal test) in the top menu: icon and word, only the icon on narrow phones */
.pm-link { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.pm-link[hidden] { display: none; }
.pm-link svg { width: 18px; height: 18px; flex: none; }
@media (max-width: 520px) { .pm-link .lbl { display: none; } .pm-link svg { width: 22px; height: 22px; } }
/* on narrow phones there is no room for one more icon: for who sees Parliamone (Enrico and Mattia,
   who know the site) it takes the place of «Come funziona»; on wider screens both stay */
@media (max-width: 420px) { .head-tools:has(.pm-link:not([hidden])) .how { display: none; } }
/* Top menu on medium screens (tablets, narrow windows): words never break onto two lines, and when
   room runs out «Come funziona», «Parliamone» and «Tema scuro» keep only their icon (the word is still
   read aloud). Admins have five links and need it below 1100px; guests (data-stile-fisso) have three
   and keep the words down to 700px. */
.head-tools > * { white-space: nowrap; }
@media (max-width: 1100px) {
  html:not([data-stile-fisso]) .head-tools :is(.how, .pm-link, .theme-toggle) .lbl {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  }
  html:not([data-stile-fisso]) .head-tools :is(.how, .pm-link) svg { width: 22px; height: 22px; }
  html:not([data-stile-fisso]) .head-tools .theme-toggle { padding: 6px 8px; }
}
@media (max-width: 700px) {
  .head-tools :is(.how, .pm-link, .theme-toggle) .lbl {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  }
  .head-tools :is(.how, .pm-link) svg { width: 22px; height: 22px; }
  .head-tools .theme-toggle { padding: 6px 8px; }
}
.ritrova-link { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ritrova-link[hidden] { display: none; }
.beta-tag { display: inline-block; padding: 1px 7px; border-radius: 999px; background: var(--accent); color: var(--bg);
  font: 700 .72rem/1.4 var(--font-sans); letter-spacing: .02em; text-transform: uppercase; }
@media (max-width: 520px) { .ritrova-link .beta-tag, .ritrova-link .rl-long { display: none; } }
/* Hierarchy pass (Enrico, 7/11/2026): no title or field name smaller than what it introduces.
   "Serie di partenza" shares the knob title rules above (selectors next to #knobLabel). */
.search label[for="q"] { margin-bottom: var(--s-3); }
/* "Approfondisci": the same small label as VOTO and NOTORIETÀ, on its own line above the links
   (card cleanup, Enrico 12/11/2026; before it was a bold lead-in as big as the links) */
.deeper .caps { display: block; margin: 0 0 6px; font: 600 var(--fs-xs)/1.2 var(--font-sans); letter-spacing: var(--tracking-caps, .06em); text-transform: uppercase; color: var(--ink-3); }
body:not(.vista-griglia):not(.vista-carosello):not(.v2) #results .entry .deeper .caps { margin: 0 0 2px; }
/* welcome: section titles bigger than the example cards' titles, texts at the page's body size */
#welcome .w-h { font-size: 1.75rem; }
@media (min-width: 760px) { #welcome .w-h { font-size: 2.2rem; } }
#welcome .steps h3 { font-size: 1.7rem; }
#welcome .steps p, #welcome .w-taste p { font-size: 1em; }
/* login page: field names as big as the fields */
label.caps[for="id"], label.caps[for="pw"] { font: 600 var(--fs-md)/1.2 var(--font-sans); letter-spacing: 0; text-transform: none; color: var(--ink); }
/* Festival and Palinsesto set every .caps in mono: the "Serie di partenza" title keeps the title font */
.search label.caps[for="q"] { font-family: var(--font-display); letter-spacing: -.01em; }

/* «Includi anche animazioni / anime»: the name on the left like the menus, the two boxes on the right */
.sheet-body #filtersAdv .f-kinds { display: grid; grid-template-columns: 9.5em 1fr; align-items: start; gap: var(--s-3); }
.sheet-body #filtersAdv .f-kinds > .caps { font: 600 var(--fs-md)/1.2 var(--font-sans); letter-spacing: 0; text-transform: none; color: var(--ink); padding-top: 8px; }
.f-kinds-boxes { display: grid; gap: 2px; }
.filters > #filtersAdv .f-kinds { display: none; }
/* the four format boxes in two columns where there is room */
@media (min-width: 520px) { .f-formati { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-4); } }
/* «Tutti» on its own line above the four formats */
@media (min-width: 520px) { .f-formati .f-tutti { grid-column: 1 / -1; } }
/* «Anni»: a slider with two handles (two native range inputs on one track: keyboard and screen
   readers work as usual) */
.f-anni-ctl { min-width: 0; }
.f-anni-val { margin: 6px 0 4px; font: 600 var(--fs-md)/1.2 var(--font-sans); color: var(--ink); }
.range2 { position: relative; height: 32px; }
.range2-track { position: absolute; left: 11px; right: 11px; top: 50%; height: 6px; margin-top: -3px; border-radius: 3px; background: var(--rule); }
.range2-fill { position: absolute; top: 0; bottom: 0; left: 0; right: 0; border-radius: 3px; background: var(--accent); }
.range2 input[type=range] { position: absolute; inset: 0; width: 100%; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.range2 input[type=range]::-webkit-slider-runnable-track { background: none; height: 32px; }
.range2 input[type=range]::-moz-range-track { background: none; }
.range2 input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 22px; height: 22px; margin-top: 5px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--accent); box-shadow: 0 1px 3px rgba(0,0,0,.25); cursor: grab; }
.range2 input[type=range]::-moz-range-thumb { pointer-events: auto; width: 18px; height: 18px; border-radius: 50%; background: var(--surface); border: 2px solid var(--accent); cursor: grab; }
.range2 input[type=range]:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--accent); outline-offset: 2px; }
.range2-ticks { position: relative; height: 1.3em; font-size: .85rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.range2-ticks span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.range2-ticks span:first-child { transform: none; margin-left: -11px; }
.range2-ticks span:last-child { transform: translateX(-100%); margin-left: 11px; }
/* phones: a narrower name column, so the boxes, the slider and the menus get the room (Enrico, 7/11/2026) */
@media (max-width: 519px) {
  .sheet-body .f-select, .sheet-body #filtersAdv .f-kinds { grid-template-columns: 6.4em minmax(0, 1fr); gap: var(--s-2); }
}
/* «Azzera» next to what a slider says: a small text link, shown only when there is something to reset */
.f-reset { margin-left: 8px; padding: 0; border: 0; background: none; font: 500 .9rem/1.2 var(--font-sans); color: var(--ink-2);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.f-reset:hover { color: var(--accent); }
.f-reset[hidden] { display: none; }

/* ---------------- The vote: 1-5 stars with the meaning under them (7/11/2026) ----------------
   Traffic-light colours: 1-2 red, 3 yellow, 4-5 green (a colour-blind friendly version will come
   with the final site). The label is real text, readable, so people know what they are voting. */
:root {
  --sv-rosso: #C8372D; --sv-giallo: #E0A100; --sv-verde: #2E8B47;
  --sv-rosso-ink: #A42A21; --sv-giallo-ink: #7A5700; --sv-verde-ink: #23703A;
}
[data-theme="dark"] {
  --sv-rosso: #FF6E5E; --sv-giallo: #FFC93D; --sv-verde: #6FD08C;
  --sv-rosso-ink: #FF8A7D; --sv-giallo-ink: #FFD25C; --sv-verde-ink: #8FDCA6;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sv-rosso: #FF6E5E; --sv-giallo: #FFC93D; --sv-verde: #6FD08C;
    --sv-rosso-ink: #FF8A7D; --sv-giallo-ink: #FFD25C; --sv-verde-ink: #8FDCA6;
  }
}
.taste { align-items: flex-start; }
.stars { display: grid; justify-items: center; gap: 2px; --sv: var(--ink-2); --sv-ink: var(--ink-2); }
.stars[data-tone="rosso"] { --sv: var(--sv-rosso); --sv-ink: var(--sv-rosso-ink); }
.stars[data-tone="giallo"] { --sv: var(--sv-giallo); --sv-ink: var(--sv-giallo-ink); }
.stars[data-tone="verde"] { --sv: var(--sv-verde); --sv-ink: var(--sv-verde-ink); }
.stars-row { display: flex; gap: 0; }
.star { width: 30px; height: 32px; padding: 0; display: grid; place-items: center; background: none; border: 0; cursor: pointer; color: var(--ink-3); border-radius: 6px; }
.star svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; transition: transform 120ms, fill 120ms; }
.star.on { color: var(--sv); }
.star.on svg { fill: currentColor; }
.star:hover svg { transform: scale(1.12); }
.star:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.stars-label { margin: 0; min-height: 1.3em; font-size: var(--fs-sm); font-weight: 600; line-height: 1.3; color: var(--sv-ink); text-align: center; white-space: nowrap; }
.stars:not([data-tone]) .stars-label, .stars[data-tone=""] .stars-label { font-weight: 500; color: var(--ink-3); }
.stars.preview .stars-label { opacity: .85; }
@media (prefers-reduced-motion: reduce) { .star svg { transition: none; } .star:hover svg { transform: none; } }
/* the FuzzyTV rating beside the fame */
.vote .vote-star { width: 13px; height: 13px; fill: var(--sv-giallo); margin: 0 1px 0 4px; vertical-align: -1px; }
/* "La mia lista": the stars given */
.my-stars { display: inline-flex; align-items: center; gap: 3px; font-size: var(--fs-xs); font-weight: 600; color: var(--sv-ink, var(--ink-2)); }
.my-stars[data-tone="rosso"] { --sv-ink: var(--sv-rosso-ink); --sv: var(--sv-rosso); }
.my-stars[data-tone="giallo"] { --sv-ink: var(--sv-giallo-ink); --sv: var(--sv-giallo); }
.my-stars[data-tone="verde"] { --sv-ink: var(--sv-verde-ink); --sv: var(--sv-verde); }
.my-stars svg { width: 13px; height: 13px; fill: var(--sv); }
/* welcome help: the star and the traffic light */
#welcome .w-taste .w-star svg { fill: var(--sv-giallo); stroke: var(--ink); stroke-width: 1.2; }
#welcome .w-taste .w-semaforo { display: grid; grid-auto-flow: row; gap: 2px; place-content: center; }
#welcome .w-taste .w-semaforo i { width: 8px; height: 8px; border-radius: 50%; background: var(--sv-rosso); }
#welcome .w-taste .w-semaforo i:nth-child(2) { background: var(--sv-giallo); }
#welcome .w-taste .w-semaforo i:nth-child(3) { background: var(--sv-verde); }
/* under the poster the column can be narrow (112px on a phone): the five stars share its width
   and the label may take two lines (space kept, so the card does not jump while choosing) */
.poster-col .taste { width: 100%; }
.poster-col .stars { width: 100%; grid-template-columns: minmax(0, 1fr); }
.poster-col .stars-row { width: 100%; justify-content: center; }
.poster-col .star { flex: 0 1 30px; min-width: 0; }
.poster-col .star svg { width: min(24px, 100%); height: auto; aspect-ratio: 1; }
.poster-col .stars-label, .poster-col .why-btn { font-size: 14px; }
.poster-col .stars-label { white-space: normal; text-wrap: balance; }
.poster-col { grid-template-columns: minmax(0, 1fr); }
/* carousel: the stars sit on the poster, on a light strip so they read on any image */
body.vista-carosello #results .entry .taste { left: var(--s-3); right: var(--s-3); width: auto; justify-content: center; }
body.vista-carosello #results .entry .stars { width: auto; background: var(--surface); border-radius: 14px; padding: 2px 10px 4px; box-shadow: var(--shadow); }
body.vista-carosello #results .entry .stars-label { min-height: 1.3em; white-space: nowrap; }
/* the FuzzyTV rating sits right above the stars: voting moves it (Enrico, 7/11/2026) */
/* «L'hai già vista?» and the «i» that explains what a vote does (tap on phones, hover elsewhere) */
.stars-foot { display: flex; align-items: center; justify-content: center; gap: 5px; min-width: 0; }
.stars-foot .stars-label { min-width: 0; }
.stars-info { flex: 0 1 auto; padding: 0; margin: 0; background: none; border: 0; cursor: help; }
.stars-info .sl-t, .why-btn span, .plot-btn span { text-decoration: underline dotted; text-decoration-thickness: 1.5px; text-decoration-color: var(--ink-3); text-underline-offset: 4px; }
.stars-info:hover .sl-t, .stars-info.tip-open .sl-t { color: var(--ink); }
.stars-info:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.stars-info[data-tip]::after { max-width: 230px; text-align: left; }
.stars-info.tip-open[data-tip]::after { display: block; opacity: 1; transform: translate(-50%, 0); }
/* on the main page (where the «Perché» box exists) the question opens that box instead of this tooltip */
body:has(#whyTip) .stars-info[data-tip]::after { display: none; }
.taste-under .stars-foot, .start-taste .stars-foot { justify-content: flex-start; }
.stars-voto { margin: 0 0 1px; line-height: 1.2; text-align: center; }
.stars-voto .vote { margin: 0; }
.stars-voto .vote-none { font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-3); }

/* carousel: the vote and the stars go under the poster, right below the fame line (Enrico, 7/11/2026);
   in the list they stay under the poster */
.taste-under { display: none; }
body.vista-carosello #results .entry .poster-col .taste { display: none; }
body.vista-carosello #results .entry .taste-under { display: flex; position: static; justify-content: flex-start; margin-top: var(--s-3); width: auto; }
body.vista-carosello #results .entry .taste-under .stars { justify-items: start; background: none; box-shadow: none; padding: 0; }
body.vista-carosello #results .entry .taste-under .stars-voto, body.vista-carosello #results .entry .taste-under .stars-label { text-align: left; }
body.vista-carosello #results .entry .taste-under .stars-row { margin-left: -4px; }
/* on phones the side block is "display: contents": its own children need the card's side margins */
body.vista-carosello #results .entry > .side > * { margin-inline: var(--s-4); }
/* carousel arrows: in the middle of the screen's height, fixed while the page scrolls, so they are
   always at hand, and never over the votes or the text (Enrico, 7/11/2026). They show while the
   carousel crosses the middle of the screen (app.js, .cnav-on). Wide screens: outside the cards;
   narrower ones: smaller, in the side margin, touching only the card's edge. */
@media (min-width: 760px) {
  body.vista-carosello .cnav {
    position: fixed; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; font-size: 1.5rem;
    opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s;
  }
  body.vista-carosello.cnav-on .cnav { opacity: 1; visibility: visible; }
  body.vista-carosello .cnav.prev { left: max(2px, calc(var(--gutter) - 34px)); }
  body.vista-carosello .cnav.next { right: max(2px, calc(var(--gutter) - 34px)); }
}
@media (min-width: 1180px) {
  body.vista-carosello .cnav { width: 44px; height: 44px; font-size: 1.75rem; }
  body.vista-carosello .cnav.prev { left: calc(max(0px, (100vw - var(--maxw)) / 2) + var(--gutter) - 60px); }
  body.vista-carosello .cnav.next { right: calc(max(0px, (100vw - var(--maxw)) / 2) + var(--gutter) - 60px); }
}
/* the start series (top of the carousel, list header, details sheet): vote, stars and label line up
   on the left, next to the bookmark, under the title */
.taste.start-taste { align-items: center; }
.taste.start-taste .stars { justify-items: start; }
.taste.start-taste .stars-voto, .taste.start-taste .stars-label { text-align: left; }
.taste.start-taste .stars-row { margin-left: -4px; }

/* «Voglio vederla»: the bookmark sits right after the title, on its line (Enrico, 7/11/2026);
   on the poster it was hard to see on some images */
/* The title flows as text and the bookmark (and the cup) follow its last word: with flex, a title on
   two lines took the whole width and pushed the bookmark to the far right (Pesci piccoli, 9/11/2026) */
.title-line { display: block; }
.title-line > h2, .title-line > h3, .title-line > p { display: inline; }
.title-line .taste-btn.save, .title-line .taste-btn.premio { display: inline-grid; vertical-align: middle; margin-left: var(--s-2); position: relative; top: -.1em; }
.title-line .taste-btn.premio { margin-left: 4px; }
.title-line .taste-btn.save { flex: none; width: 36px; height: 36px; }
.title-line .taste-btn.save svg { width: 18px; height: 18px; }
html[data-stile] .title-line .taste-btn.save { width: 36px; height: 36px; }
body.vista-griglia #results .title-line .taste-btn.save { width: 30px; height: 30px; }

/* the cup of the big awards, next to the bookmark (7/11/2026): same look as the bookmark, an empty
   line icon that fills on hover, focus or tap */
#startSave, #ctopSave { display: inline-flex; align-items: center; gap: var(--s-2); }
.title-line .taste-btn.premio, html[data-stile] .title-line .taste-btn.premio { flex: none; width: 36px; height: 36px; cursor: help; }
.title-line .taste-btn.premio svg { width: 19px; height: 19px; }
.taste-btn.premio .coppa { transition: fill var(--dur); }
.taste-btn.premio:hover .coppa, .taste-btn.premio:focus-visible .coppa, .taste-btn.premio.tip-open .coppa { fill: currentColor; }
.premio[data-tip]::after { max-width: 280px; width: max-content; text-align: left; }
.premio.tip-open[data-tip]::after { display: block; opacity: 1; }
@media (max-width: 759px) { .premio[data-tip]::after { max-width: 220px; } }
body.vista-griglia #results .title-line .taste-btn.premio { width: 30px; height: 30px; }
/* the coccarda closes the title line: its tooltip opens towards the left, never off the screen */
.premio[data-tip]::after { left: auto; right: -4px; transform: translate(0, 4px); }
.premio[data-tip]:hover::after, .premio[data-tip]:focus-visible::after, .premio.tip-open[data-tip]::after { transform: translate(0, 0); }
/* start series header: the vote on the left; on the right two lines, first the facts (years,
   seasons, country, azzardo), then the badges (where to watch, notorietà, origin) (Enrico, 7/11/2026) */
.start-line { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s-5); row-gap: var(--s-1); align-items: center; }
.start-line > #startTaste { grid-row: 1 / span 2; }
.start-line > .meta { grid-column: 2; align-self: end; }
.start-line > .meta2 { grid-column: 2; align-self: start; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
@media (max-width: 759px) {
  .start-line { grid-template-columns: minmax(0, 1fr); }
  .start-line > #startTaste { grid-row: auto; }
  .start-line > .meta, .start-line > .meta2 { grid-column: 1; }
}

/* «Ritrova la serie» under the search (7/11/2026): one line */
.ritrova-hint { margin: var(--s-2) 0 0; font-size: var(--fs-sm); color: var(--ink-2); text-wrap: balance; }
.ritrova-hint a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: .2em; }
.ritrova-hint a:hover { text-decoration-thickness: 2px; }
.ritrova-hint .beta-tag { display: inline; vertical-align: 1px; margin-left: 2px; } /* inline: it stays on the line of the last word */
/* always visible, also when a series is already in the box (only the suggestions list covers it) */

/* Home before a series is chosen, wide screens: two parallel levels again instead of one centred
   pile (Enrico, 9/11/2026: «accatastato e confuso»). Left, aligned left: payoff, search, examples and
   Ritrova; right, past a rule: the roulette. The search label repeats the payoff: kept for screen
   readers only. Phones keep the single column. */
@media (min-width: 900px) {
  body:not(.has-start) .hero { text-align: left; }
  body:not(.has-start) .hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); justify-items: stretch; align-items: center; gap: var(--s-8); max-width: var(--maxw); margin-inline: auto; } /* the same width as header and footer (9/11: «none» let it run edge to edge on big screens) */
  body:not(.has-start) .hero h1, body:not(.has-start) .hero .lede { margin-inline: 0; }
  body:not(.has-start) .search { max-width: none; margin-inline: 0; }
  body:not(.has-start) .search label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  body:not(.has-start) .knob-panel { border-left: 1px solid var(--rule); padding: var(--s-2) 0 var(--s-2) var(--s-6); }
}

/* «Perché questa serie?» (12/11/2026): a quiet question under the stars, and the box it opens */
.why-btn {
  justify-self: center; display: inline-flex; justify-content: center; margin: 0; padding: 4px 2px;
  background: none; border: 0; cursor: help; font: 400 var(--fs-sm)/1.3 var(--font-sans); color: var(--ink-3);
  text-align: center; text-wrap: balance;
}
.why-btn:hover, .why-btn[aria-expanded="true"] { color: var(--ink); }
/* under the stars: a thin line, then the question, both lines centered and alike */
.poster-col .why-btn { justify-self: stretch; margin-top: 4px; padding: 12px 0 0; border-top: 1px solid var(--rule); }
body.vista-griglia #results .why-btn { display: none; } /* the small tiles: it is in the card they open */
body.vista-carosello #results .why-btn { margin-top: var(--s-2); }
.why-tip {
  position: fixed; z-index: 70; box-sizing: border-box; padding: 14px 16px; border-radius: 12px;
  background: var(--ink); color: var(--bg); font: 400 var(--fs-sm)/1.45 var(--font-sans);
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
}
.why-tip[hidden] { display: none; }
/* the plot can be long: a little wider, and it scrolls inside past about 14 lines */
.why-tip.is-plot { max-height: min(60vh, 22rem); overflow-y: auto; overscroll-behavior: contain; }
.why-tip p { margin: 0; }
.why-tip .why-tip-t { font-weight: 700; margin-bottom: 6px; }
.why-tip-act {
  margin-top: 12px; padding: 7px 14px; border-radius: 999px; border: 1.5px solid currentColor; background: transparent;
  color: inherit; font: 600 var(--fs-sm)/1 var(--font-sans); cursor: pointer;
}
.why-tip-act:hover { background: var(--bg); color: var(--ink); }

/* Card cleanup (Enrico, 12/11/2026): the card buttons share one corner, and the outlined ones have the
   same border as the round bookmark and cup buttons (the styles with pill buttons keep their pills) */
.entry .btn { border-radius: 6px; }
.entry .btn-ghost:not(:hover), .entry .taste-btn:not(:hover):not([aria-pressed="true"]) { border-color: var(--ink-3); }

/* Tablets held upright and wide phones, 560-759px (Enrico, 12/11/2026): the phone card left a big empty
   space beside the poster and pushed the title down, with the buttons as wide as the card. Here the
   card is the computer one, a little tighter: the poster column on the left the whole height, the
   title at the top, the buttons side by side at their own width. */
@media (min-width: 560px) and (max-width: 759px) {
  body:not(.vista-griglia):not(.vista-carosello) #results .entry {
    grid-template-columns: 128px minmax(0, 1fr);
    grid-template-areas: "poster head" "poster line" "poster plot" "poster actions" "poster deeper";
    column-gap: var(--s-5); row-gap: var(--s-3); align-content: start; padding: var(--s-5);
  }
  body:not(.vista-griglia):not(.vista-carosello) #results .entry-head { align-self: start; }
  body:not(.vista-griglia):not(.vista-carosello) #results .entry .actions { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); }
  body:not(.vista-griglia):not(.vista-carosello) #results .entry .actions .btn { width: auto; }
}

/* «La trama, senza spoiler»: a question with a dotted underline like «L'hai già vista?» and «Perché questa
   serie?», answered in the same box (Enrico, 12/11/2026); before, a fold that opened inside the card */
.plot-btn { grid-area: plot; justify-self: start; align-self: start; display: inline-flex; margin: 0; padding: 4px 0;
  background: none; border: 0; cursor: help; font: 400 var(--fs-sm)/1.3 var(--font-sans); color: var(--ink-2); text-align: left; }
.plot-btn:hover, .plot-btn[aria-expanded="true"] { color: var(--ink); }
.plot-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Dark theme (Enrico, 12/11/2026): the answer box and the small tooltips were light boxes (the ink colour
   used as background), too bright on the dark page. Now dark like the page, a thin edge and a shadow to
   lift them off the card. The light theme keeps its dark boxes. */
html[data-theme="dark"] .why-tip, html[data-theme="dark"] [data-tip]::after {
  background: var(--bg); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 14px 36px rgba(0, 0, 0, .55);
}
html[data-theme="dark"] .why-tip-act:hover { background: var(--ink); color: var(--bg); }
/* start series: the plot question no longer sits glued to «Approfondisci» when they wrap (12/11/2026) */
.start-more { row-gap: var(--s-2); }