/* Style proposals: Festival, Poster pop, Palinsesto (see js/stili.js).
   Each one changes only fonts, colors, corners and icons; the layout is untouched.
   Without html[data-stile] the site keeps its current look. */

/* =====================================================================
   FESTIVAL: Swiss festival identity (Sundance, Budapest, Karlovy Vary)
   neutral paper, black ink, one bright orange; a grotesk for everything,
   a typewriter mono for data (years, countries, numbers); square corners
   ===================================================================== */
html[data-stile="festival"] {
  color-scheme: light;
  --bg: #F1F0EC; --surface: #FFFFFF; --sunk: #E2E1DB;
  --ink: #0D0D0D; --ink-2: #393937; --ink-3: #5C5C58;
  --rule: #CFCDC6; --line: #0D0D0D;
  --accent: #E2400E; --accent-ink: #FFFFFF; --accent-soft: #FBE1D6;
  --focus: #1438FF; --ok: #1F7A3A;
  --shadow: none; --grain-opacity: 0;
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --r-1: 0; --r-2: 0; --r-round: 0; --tracking-caps: .03em;
}
html[data-stile="festival"][data-theme="dark"] {
  color-scheme: dark;
  --bg: #111110; --surface: #1B1B1A; --sunk: #050505;
  --ink: #F1F0EC; --ink-2: #C9C8C2; --ink-3: #9E9D97;
  --rule: #34342F; --line: #F1F0EC;
  --accent: #FF6A3B; --accent-ink: #111110; --accent-soft: #3B1A0E;
  --focus: #8EA6FF; --ok: #7FD39A;
}
@media (prefers-color-scheme: dark) {
  html[data-stile="festival"]:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #111110; --surface: #1B1B1A; --sunk: #050505;
    --ink: #F1F0EC; --ink-2: #C9C8C2; --ink-3: #9E9D97;
    --rule: #34342F; --line: #F1F0EC;
    --accent: #FF6A3B; --accent-ink: #111110; --accent-soft: #3B1A0E;
    --focus: #8EA6FF; --ok: #7FD39A;
  }
}

/* titles: heavy grotesk, tight */
html[data-stile="festival"] .brand-word { font-weight: 800; font-size: 1.6rem; letter-spacing: -.045em; }
html[data-stile="festival"] .hero h1 { font-weight: 800; letter-spacing: -.045em; line-height: .96; }
html[data-stile="festival"] .entry h3, html[data-stile="festival"] .ctop-start h2,
html[data-stile="festival"] .ss-top h2, html[data-stile="festival"] .results-head h2,
html[data-stile="festival"] .section-title, html[data-stile="festival"] .steps h3,
html[data-stile="festival"] .example-title, html[data-stile="festival"] .ex-pair,
html[data-stile="festival"] #knobLabel, html[data-stile="festival"] .search label[for="q"], html[data-stile="festival"] .knob-readout .name,
html[data-stile="festival"] .hs-name, html[data-stile="festival"] .filter-btn .fb-sum em,
html[data-stile="festival"] .sheet-head h2, html[data-stile="festival"] .mylist-head h2,
html[data-stile="festival"] .message h2, html[data-stile="festival"] .more-tile .t {
  font-weight: 800; letter-spacing: -.035em;
}
html[data-stile="festival"] .entry h3 { font-size: calc(var(--fs-lg) * 1.02); line-height: 1.08; }
html[data-stile="festival"] .why p, html[data-stile="festival"] .example .ex-slide p.q { font-weight: 500; letter-spacing: -.015em; }
/* data in mono: labels, numbers, years, countries, the knob's scale */
html[data-stile="festival"] .caps, html[data-stile="festival"] .entry .meta, html[data-stile="festival"] .meta2,
html[data-stile="festival"] .origin, html[data-stile="festival"] .option .y, html[data-stile="festival"] .hs-labels,
html[data-stile="festival"] .knob-labels, html[data-stile="festival"] .my-items .y, html[data-stile="festival"] .results-head .meta,
html[data-stile="festival"] .entry .orig, html[data-stile="festival"] .ss-top .meta, html[data-stile="festival"] .hook,
html[data-stile="festival"] .view-switch button, html[data-stile="festival"] .f-vista .seg button {
  font-family: var(--font-mono); font-weight: 500; letter-spacing: .01em;
}
html[data-stile="festival"] .entry .meta, html[data-stile="festival"] .entry .orig { font-size: .86em; }
html[data-stile="festival"] .entry-num { font-size: 1rem; color: var(--ink); }
html[data-stile="festival"] .entry-num::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); flex: none; }
html[data-stile="festival"] .entry-num::after { height: 2px; background: var(--ink); }
/* logo: the "TV" in an orange dot */
html[data-stile="festival"] .site-head .brand-tv {
  display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; transform: translateY(-4px);
  background: var(--accent); color: #fff; border: 0; border-radius: 50%; box-shadow: none; font: 800 .8rem/1 var(--font-sans); letter-spacing: -.02em;
}
html[data-stile="festival"] .site-head .brand:hover .brand-tv { background: var(--ink); color: var(--bg); }
/* hard edges: black outlines, no shadows */
html[data-stile="festival"] .site-head { border-bottom: 2px solid var(--ink); }
html[data-stile="festival"] body:not(.vista-griglia):not(.vista-carosello) #results .entry,
html[data-stile="festival"] body.vista-carosello #results .entry {
  border: 2px solid var(--ink); border-radius: 0; box-shadow: none;
}
html[data-stile="festival"] body:not(.vista-griglia):not(.vista-carosello) #results .entry:hover { border-color: var(--accent); }
html[data-stile="festival"] body.vista-carosello #results .entry .poster { border-radius: 0; }
html[data-stile="festival"] body.vista-griglia #results .poster { border-radius: 0; }
html[data-stile="festival"] .poster { box-shadow: none; }
html[data-stile="festival"] .taste-btn { border-radius: 0; border: 2px solid var(--ink); color: var(--ink); background: var(--surface); }
html[data-stile="festival"] .taste-btn:hover { background: var(--ink); color: var(--bg); }
html[data-stile="festival"] .taste-btn[aria-pressed="true"].up, html[data-stile="festival"] .taste-btn[aria-pressed="true"].up2, html[data-stile="festival"] .taste-btn.save[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
html[data-stile="festival"] .taste-btn[aria-pressed="true"].down { background: var(--accent); color: #fff; border-color: var(--accent); }
html[data-stile="festival"] .btn { border-width: 2px; font-weight: 700; }
html[data-stile="festival"] .btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
html[data-stile="festival"] .search-field { border: 2px solid var(--ink); border-radius: 0; background: var(--surface); }
html[data-stile="festival"] .view-switch, html[data-stile="festival"] .f-vista .seg, html[data-stile="festival"] .theme-toggle,
html[data-stile="festival"] .filter-btn, html[data-stile="festival"] .fbar-open, html[data-stile="festival"] .f-select select { border: 2px solid var(--ink); border-radius: 0; }
html[data-stile="festival"] .view-switch button[aria-pressed="true"], html[data-stile="festival"] .f-vista .seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
html[data-stile="festival"] .hs-track { height: 4px; background: var(--ink); opacity: 1; }
html[data-stile="festival"] .hs-thumb { border-radius: 0; width: 18px; height: 18px; background: var(--accent); border: 0; box-shadow: none; }
html[data-stile="festival"] .knob.meter .meter-face { stroke: var(--ink); stroke-width: 2; }
html[data-stile="festival"] .knob.meter .meter-arc { opacity: 1; stroke-width: 2; }
html[data-stile="festival"] .knob.meter .cap { fill: var(--accent); }
html[data-stile="festival"] .example { border-left: 0; border-top: 2px solid var(--ink); background: transparent; padding-inline: 0; }
html[data-stile="festival"] .ex-nav, html[data-stile="festival"] .cnav, html[data-stile="festival"] .icon-btn, html[data-stile="festival"] .sheet-x {
  border: 2px solid var(--ink); box-shadow: none; background: var(--surface);
}
html[data-stile="festival"] .ex-nav:hover, html[data-stile="festival"] body.vista-carosello .cnav:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
html[data-stile="festival"] .filter-alert { border-width: 2px; }
html[data-stile="festival"] .ovvi { border: 2px solid var(--ink); border-radius: 0; }
html[data-stile="festival"] .why p::before, html[data-stile="festival"] .why p::after { color: var(--accent); font-weight: 800; }

/* =====================================================================
   POSTER POP: MUBI campaigns. Aubergine and yellow, coral red;
   tall poster titles, a friendly round sans for the text, pills and dots
   ===================================================================== */
html[data-stile="pop"] {
  color-scheme: light;
  --bg: #FFE4A0; --surface: #FFF4D2; --sunk: #F2D27F;
  --ink: #2A1820; --ink-2: #57373F; --ink-3: #6E4C55;
  --rule: #E8C671; --line: #2A1820;
  --accent: #D7372A; --accent-ink: #FFFFFF; --accent-soft: #FFD0AE;
  --accent-2: #2A1820;
  --focus: #2A1820; --ok: #23683F;
  --shadow: none; --grain-opacity: .07;
  --font-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --font-serif: "Figtree", system-ui, sans-serif;
  --font-sans: "Figtree", system-ui, sans-serif;
  --r-1: 10px; --r-2: 22px; --tracking-caps: .06em;
  --diff-bg: #E9AD92; --diff-ink: #5E2418; /* "Simile… ma": brick, as the platform chip is ochre */
}
html[data-stile="pop"][data-theme="dark"] {
  color-scheme: dark;
  --bg: #2A1820; --surface: #3A2430; --sunk: #1C0F15;
  --ink: #FFF1DE; --ink-2: #E9D2C4; --ink-3: #C6ABA2;
  --rule: #4E3240; --line: #8E6B78;
  --accent: #FFC233; --accent-ink: #2A1820; --accent-soft: #4A3020;
  --accent-2: #FF5A4A;
  --focus: #FFC233; --ok: #8FD7A4;
  --diff-bg: #5A261E; --diff-ink: #F6C9B6;
}
@media (prefers-color-scheme: dark) {
  html[data-stile="pop"]:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #2A1820; --surface: #3A2430; --sunk: #1C0F15;
    --ink: #FFF1DE; --ink-2: #E9D2C4; --ink-3: #C6ABA2;
    --rule: #4E3240; --line: #8E6B78;
    --accent: #FFC233; --accent-ink: #2A1820; --accent-soft: #4A3020;
    --accent-2: #FF5A4A;
    --focus: #FFC233; --ok: #8FD7A4;
    --diff-bg: #5A261E; --diff-ink: #F6C9B6;
  }
}
/* tall poster titles, upper case for the big ones */
html[data-stile="pop"] .brand-word { font-weight: 900; font-size: 2.1rem; letter-spacing: 0; text-transform: uppercase; }
html[data-stile="pop"] .hero h1 { font-weight: 900; text-transform: uppercase; letter-spacing: 0; line-height: .92; font-size: calc(min(calc(var(--fs-2xl) * 1.12), 9.3vw) * 1.12); }
@media (min-width: 900px) { html[data-stile="pop"] .hero h1 { font-size: 3.7rem; } }
@media (max-width: 759px) { html[data-stile="pop"] .hero h1 { font-size: min(2.2rem, 9.5vw); } }
html[data-stile="pop"] .entry h3, html[data-stile="pop"] .ctop-start h2, html[data-stile="pop"] .ss-top h2,
html[data-stile="pop"] .results-head h2, html[data-stile="pop"] .sheet-head h2, html[data-stile="pop"] .mylist-head h2,
html[data-stile="pop"] .message h2, html[data-stile="pop"] .more-tile .t, html[data-stile="pop"] .steps h3,
html[data-stile="pop"] .example-title, html[data-stile="pop"] .ex-pair {
  font-weight: 800; letter-spacing: .005em; text-transform: uppercase;
}
html[data-stile="pop"] .entry h3 { font-size: calc(var(--fs-lg) * 1.3); line-height: .98; }
html[data-stile="pop"] .ctop-start h2 { font-size: 1.8rem; line-height: .98; }
html[data-stile="pop"] .section-title, html[data-stile="pop"] #knobLabel, html[data-stile="pop"] .search label[for="q"], html[data-stile="pop"] .knob-readout .name {
  font-weight: 900; text-transform: uppercase; letter-spacing: 0;
}
html[data-stile="pop"] .section-title { font-size: 2.6rem; }
@media (min-width: 900px) { html[data-stile="pop"] .section-title { font-size: 3.2rem; } }
html[data-stile="pop"] #knobLabel, html[data-stile="pop"] .search label[for="q"] { font-size: 2.1rem; }
html[data-stile="pop"] .knob-readout .name, html[data-stile="pop"] .hs-name, html[data-stile="pop"] .filter-btn .fb-sum em { text-transform: uppercase; font-weight: 900; }
html[data-stile="pop"] .ex-pair { font-size: 2.2rem; }
@media (min-width: 900px) { html[data-stile="pop"] .ex-pair { font-size: 3rem; } }
html[data-stile="pop"] .why p, html[data-stile="pop"] .example .ex-slide p.q { font-weight: 600; letter-spacing: -.01em; }
html[data-stile="pop"] .caps { font-weight: 800; }
html[data-stile="pop"] .entry-num { font: 900 1.9rem/1 var(--font-display); letter-spacing: 0; color: var(--accent); }
html[data-stile="pop"] .entry-num::after { display: none; }
/* logo: "TV" on a round yellow (or red) badge */
html[data-stile="pop"] .site-head .brand-tv {
  background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 999px; box-shadow: none;
  padding: 5px 9px 4px; font: 900 .95rem/1 var(--font-display); letter-spacing: .04em; transform: translateY(-5px);
}
html[data-stile="pop"] .site-head .brand:hover .brand-tv { background: var(--ink); color: var(--bg); }
/* header logo twice as big (Enrico, 30/10/2026); a bit smaller on phones so the header stays one line */
html[data-stile="pop"] .site-head .brand { gap: 10px; }
html[data-stile="pop"] .site-head .wrap { padding-top: 28px; padding-bottom: 6px; }
html[data-stile="pop"] .site-head .brand-word { font-size: 4.2rem; }
html[data-stile="pop"] .site-head .brand-tv { font-size: 1.9rem; padding: 9px 16px 7px; transform: translateY(-10px); }
@media (max-width: 759px) {
  html[data-stile="pop"] .site-head .brand { gap: 7px; }
  html[data-stile="pop"] .site-head .wrap { padding-top: 18px; padding-bottom: 4px; }
  html[data-stile="pop"] .site-head .brand-word { font-size: 3rem; }
  html[data-stile="pop"] .site-head .brand-tv { font-size: 1.35rem; padding: 7px 12px 5px; transform: translateY(-7px); }
}
html[data-stile="pop"] .site-head { border-bottom: 0; }
/* soft blocks of color instead of outlines */
html[data-stile="pop"] body:not(.vista-griglia):not(.vista-carosello) #results .entry,
html[data-stile="pop"] body.vista-carosello #results .entry {
  border: 0; border-radius: 22px; background: var(--surface); box-shadow: none;
}
html[data-stile="pop"] body:not(.vista-griglia):not(.vista-carosello) #results .entry:hover { box-shadow: 0 0 0 3px var(--accent); }
html[data-stile="pop"] body.vista-carosello #results .entry .poster { border-radius: 22px 22px 0 0; }
html[data-stile="pop"] body.vista-griglia #results .poster { border-radius: 16px; }
html[data-stile="pop"] body.vista-griglia #results .entry:hover .poster { box-shadow: 0 0 0 3px var(--accent); }
html[data-stile="pop"] .poster { border-radius: 14px; box-shadow: none; }
html[data-stile="pop"] .btn { border-radius: 999px; font-weight: 800; background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
html[data-stile="pop"] .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
html[data-stile="pop"] .btn:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }
html[data-stile="pop"] .taste-btn { border: 0; background: var(--bg); color: var(--ink); }
html[data-stile="pop"] body.vista-carosello #results .entry .taste-btn { background: var(--surface); }
/* pressed buttons keep their color over the poster (the line above used to win: white on white) */
html[data-stile="pop"] body.vista-carosello #results .entry .taste-btn[aria-pressed="true"]:is(.up, .up2, .save) { background: var(--accent); }
html[data-stile="pop"] body.vista-carosello #results .entry .taste-btn[aria-pressed="true"].down { background: var(--accent-2); }
html[data-stile="pop"] .taste-btn:hover { background: var(--ink); color: var(--bg); }
html[data-stile="pop"] .taste-btn[aria-pressed="true"].up, html[data-stile="pop"] .taste-btn[aria-pressed="true"].up2, html[data-stile="pop"] .taste-btn.save[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
html[data-stile="pop"] .taste-btn[aria-pressed="true"].down { background: var(--accent-2); color: var(--bg); }
html[data-stile="pop"] .search-field { border: 0; border-radius: 999px; background: var(--surface); padding: 0 var(--s-4); }
html[data-stile="pop"] .search-field:focus-within { outline: 3px solid var(--accent); outline-offset: 2px; }
html[data-stile="pop"] .listbox { border-radius: 18px; border: 0; margin-top: 6px; }
html[data-stile="pop"] .view-switch, html[data-stile="pop"] .f-vista .seg { border: 0; background: var(--surface); }
html[data-stile="pop"] .view-switch button[aria-pressed="true"], html[data-stile="pop"] .f-vista .seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-radius: 999px; }
html[data-stile="pop"] .f-vista .seg button + button { border-left: 0; }
html[data-stile="pop"] .theme-toggle { border: 0; background: var(--surface); }
html[data-stile="pop"] .filter-btn, html[data-stile="pop"] .fbar-open { border: 0; }
html[data-stile="pop"] .f-select select { border: 0; border-radius: 999px; padding-left: 14px; }
html[data-stile="pop"] .hs-track { height: 10px; background: var(--sunk); }
html[data-stile="pop"] .hs-thumb { width: 26px; height: 26px; border: 0; background: var(--ink); box-shadow: 0 0 0 4px var(--accent); }
html[data-stile="pop"] .knob.meter .meter-face { fill: var(--surface); stroke: none; }
html[data-stile="pop"] .knob.meter .meter-arc { opacity: .35; }
html[data-stile="pop"] .knob.meter .pointer { stroke-width: 6; }
html[data-stile="pop"] .knob.meter .cap { fill: var(--accent); }
html[data-stile="pop"] .example { border-left: 0; border-radius: 22px; }
html[data-stile="pop"] .ex-nav, html[data-stile="pop"] .cnav, html[data-stile="pop"] .icon-btn, html[data-stile="pop"] .sheet-x {
  border: 0; background: var(--ink); color: var(--bg); box-shadow: none;
}
html[data-stile="pop"] .ex-nav:hover, html[data-stile="pop"] body.vista-carosello .cnav:hover, html[data-stile="pop"] .icon-btn:hover { background: var(--accent); color: var(--accent-ink); }
html[data-stile="pop"] .origin { border: 0; background: var(--sunk); border-radius: 999px; padding: 5px 9px; }
html[data-stile="pop"] .origin.diff { background: var(--diff-bg); color: var(--diff-ink); }
html[data-stile="pop"] .mylist-link .count:not(:empty) { background: var(--accent); color: var(--accent-ink); }
html[data-stile="pop"] .filter-alert { border: 0; border-radius: 18px; }
html[data-stile="pop"] .ovvi { border-radius: 22px; }
html[data-stile="pop"] .ovvi-title { font-weight: 800; text-transform: uppercase; letter-spacing: .005em; font-size: 1.375rem; line-height: .98; }
@media (max-width: 759px) { html[data-stile="pop"] .ovvi-title { font-size: 1.25rem; } }
html[data-stile="pop"] .ovvi-poster { border-radius: 8px; }
html[data-stile="pop"] .sheet[open] { border-radius: 28px 28px 0 0; }

/* =====================================================================
   PALINSESTO: TV broadcast graphics and teletext (RTS, Holographik,
   Postred). Electric blue as the ink, red frames, a mono for data,
   pixel numbers like teletext pages, square corners
   ===================================================================== */
html[data-stile="palinsesto"] {
  color-scheme: light;
  --bg: #FAFAF7; --surface: #FFFFFF; --sunk: #E8E9FD;
  --ink: #1B22F2; --ink-2: #3239E6; --ink-3: #565CD3;
  --rule: #CBCEF8; --line: #1B22F2;
  --accent: #FF2D1F; --accent-ink: #FFFFFF; --accent-soft: #FFE0DC;
  --focus: #FF2D1F; --ok: #0E8A4F;
  --shadow: none; --grain-opacity: 0;
  --font-display: "Instrument Sans", "Arial Narrow", sans-serif;
  --font-serif: "Instrument Sans", system-ui, sans-serif;
  --font-sans: "Instrument Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --font-pixel: "VT323", "IBM Plex Mono", monospace;
  --r-1: 0; --r-2: 0; --r-round: 0; --tracking-caps: .04em;
}
html[data-stile="palinsesto"][data-theme="dark"] {
  color-scheme: dark;
  --bg: #070A3A; --surface: #0E1252; --sunk: #04062A;
  --ink: #EEF0FF; --ink-2: #BCC1FF; --ink-3: #959BF2;
  --rule: #262C7C; --line: #7D84FF;
  --accent: #FF4B3A; --accent-ink: #FFFFFF; --accent-soft: #3D1236;
  --focus: #FFE14A; --ok: #6BE3A4;
}
@media (prefers-color-scheme: dark) {
  html[data-stile="palinsesto"]:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #070A3A; --surface: #0E1252; --sunk: #04062A;
    --ink: #EEF0FF; --ink-2: #BCC1FF; --ink-3: #959BF2;
    --rule: #262C7C; --line: #7D84FF;
    --accent: #FF4B3A; --accent-ink: #FFFFFF; --accent-soft: #3D1236;
    --focus: #FFE14A; --ok: #6BE3A4;
  }
}
/* condensed titles */
html[data-stile="palinsesto"] .brand-word, html[data-stile="palinsesto"] .hero h1, html[data-stile="palinsesto"] .entry h3,
html[data-stile="palinsesto"] .ctop-start h2, html[data-stile="palinsesto"] .ss-top h2, html[data-stile="palinsesto"] .results-head h2,
html[data-stile="palinsesto"] .section-title, html[data-stile="palinsesto"] .steps h3, html[data-stile="palinsesto"] .example-title,
html[data-stile="palinsesto"] .ex-pair, html[data-stile="palinsesto"] #knobLabel, html[data-stile="palinsesto"] .search label[for="q"], html[data-stile="palinsesto"] .knob-readout .name,
html[data-stile="palinsesto"] .hs-name, html[data-stile="palinsesto"] .filter-btn .fb-sum em, html[data-stile="palinsesto"] .sheet-head h2,
html[data-stile="palinsesto"] .mylist-head h2, html[data-stile="palinsesto"] .message h2, html[data-stile="palinsesto"] .more-tile .t {
  font-stretch: 75%; font-weight: 700; letter-spacing: -.01em;
}
html[data-stile="palinsesto"] .hero h1 { line-height: .98; }
html[data-stile="palinsesto"] .brand-word { font-size: 1.85rem; }
html[data-stile="palinsesto"] .why p, html[data-stile="palinsesto"] .example .ex-slide p.q { font-weight: 500; }
/* data in mono */
html[data-stile="palinsesto"] .caps, html[data-stile="palinsesto"] .entry .meta, html[data-stile="palinsesto"] .meta2,
html[data-stile="palinsesto"] .origin, html[data-stile="palinsesto"] .option .y, html[data-stile="palinsesto"] .hs-labels,
html[data-stile="palinsesto"] .knob-labels, html[data-stile="palinsesto"] .my-items .y, html[data-stile="palinsesto"] .results-head .meta,
html[data-stile="palinsesto"] .entry .orig, html[data-stile="palinsesto"] .ss-top .meta, html[data-stile="palinsesto"] .hook,
html[data-stile="palinsesto"] .view-switch button, html[data-stile="palinsesto"] .f-vista .seg button, html[data-stile="palinsesto"] .btn {
  font-family: var(--font-mono); letter-spacing: 0;
}
html[data-stile="palinsesto"] .entry .meta, html[data-stile="palinsesto"] .entry .orig { font-size: .84em; }
html[data-stile="palinsesto"] .btn { font-weight: 600; text-transform: uppercase; font-size: .85rem; }
/* proposal numbers as teletext pages: P101, P102… */
html[data-stile="palinsesto"] .entry-num { font: 400 1.6rem/1 var(--font-pixel); letter-spacing: .02em; color: var(--accent); text-transform: none; }
html[data-stile="palinsesto"] .entry-num { gap: 0; }
html[data-stile="palinsesto"] .entry-num::before { content: "P1"; }
html[data-stile="palinsesto"] .entry-num::after { margin-left: 12px; }
html[data-stile="palinsesto"] .entry-num::after { height: 2px; background: var(--ink); }
html[data-stile="palinsesto"] .steps .n { font: 400 2.6rem/1 var(--font-pixel); color: var(--accent); }
/* logo: TV in a blue box, pixel letters; the four colored keys of the remote under the header */
html[data-stile="palinsesto"] .site-head .brand-tv {
  background: var(--ink); color: var(--bg); border: 0; border-radius: 0; box-shadow: none;
  padding: 3px 6px 1px; font: 400 1.2rem/1 var(--font-pixel); letter-spacing: .04em; transform: translateY(-4px);
}
html[data-stile="palinsesto"] .site-head .brand:hover .brand-tv { background: var(--accent); }
html[data-stile="palinsesto"] .site-head {
  border-bottom: 0;
  background-image: linear-gradient(90deg, #FF2D1F 0 25%, #12B04A 25% 50%, #FFD21A 50% 75%, #13B6F0 75% 100%);
  background-size: 100% 5px; background-repeat: no-repeat; background-position: bottom;
}
/* frames: blue outlines on cards, red frames on posters */
html[data-stile="palinsesto"] body:not(.vista-griglia):not(.vista-carosello) #results .entry,
html[data-stile="palinsesto"] body.vista-carosello #results .entry {
  border: 2px solid var(--ink); border-radius: 0; box-shadow: none;
}
html[data-stile="palinsesto"] body:not(.vista-griglia):not(.vista-carosello) #results .entry:hover { border-color: var(--accent); }
html[data-stile="palinsesto"] .poster { border-radius: 0; box-shadow: none; outline: 4px solid var(--accent); outline-offset: -4px; }
html[data-stile="palinsesto"] body.vista-carosello #results .entry .poster { border-radius: 0; outline: 0; border-bottom: 4px solid var(--accent); }
html[data-stile="palinsesto"] body.vista-griglia #results .poster { border-radius: 0; outline-width: 5px; outline-offset: -5px; }
html[data-stile="palinsesto"] body.vista-griglia #results .entry:hover .poster { box-shadow: none; outline-color: var(--ink); }
html[data-stile="palinsesto"] .poster-open img { image-rendering: auto; }
html[data-stile="palinsesto"] .taste-btn { border-radius: 0; border: 2px solid var(--ink); color: var(--ink); background: var(--surface); }
html[data-stile="palinsesto"] .taste-btn:hover { background: var(--ink); color: var(--bg); }
html[data-stile="palinsesto"] .taste-btn[aria-pressed="true"].up, html[data-stile="palinsesto"] .taste-btn[aria-pressed="true"].up2, html[data-stile="palinsesto"] .taste-btn.save[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
html[data-stile="palinsesto"] .taste-btn[aria-pressed="true"].down { background: var(--accent); color: #fff; border-color: var(--accent); }
html[data-stile="palinsesto"] .btn { border-width: 2px; }
html[data-stile="palinsesto"] .btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
html[data-stile="palinsesto"] .search-field { border: 2px solid var(--ink); border-radius: 0; background: var(--surface); }
html[data-stile="palinsesto"] .search-field input { font-family: var(--font-mono); }
html[data-stile="palinsesto"] .view-switch, html[data-stile="palinsesto"] .f-vista .seg, html[data-stile="palinsesto"] .theme-toggle,
html[data-stile="palinsesto"] .filter-btn, html[data-stile="palinsesto"] .fbar-open, html[data-stile="palinsesto"] .f-select select { border: 2px solid var(--ink); border-radius: 0; }
html[data-stile="palinsesto"] .f-vista .seg button + button { border-left: 2px solid var(--ink); }
html[data-stile="palinsesto"] .view-switch svg, html[data-stile="palinsesto"] .filter-btn svg, html[data-stile="palinsesto"] .f-vista svg { width: 13px; height: 13px; }
html[data-stile="palinsesto"] .hs-track { height: 6px; background: var(--rule); }
html[data-stile="palinsesto"] .hs-thumb { border-radius: 0; width: 14px; height: 24px; background: var(--accent); border: 0; box-shadow: none; }
html[data-stile="palinsesto"] .knob.meter .meter-face { stroke: var(--ink); stroke-width: 2; }
html[data-stile="palinsesto"] .knob.meter .meter-arc { opacity: 1; }
html[data-stile="palinsesto"] .knob.meter .cap { fill: var(--accent); }
html[data-stile="palinsesto"] .knob-readout .name { color: var(--accent); }
html[data-stile="palinsesto"] .example { border-left: 0; border: 2px solid var(--ink); background: var(--surface); }
html[data-stile="palinsesto"] .ex-nav, html[data-stile="palinsesto"] .cnav, html[data-stile="palinsesto"] .icon-btn, html[data-stile="palinsesto"] .sheet-x {
  border-radius: 0; border: 2px solid var(--ink); box-shadow: none; background: var(--surface); color: var(--ink);
}
html[data-stile="palinsesto"] .ex-nav:hover, html[data-stile="palinsesto"] body.vista-carosello .cnav:hover, html[data-stile="palinsesto"] .icon-btn:hover {
  background: var(--ink); color: var(--bg);
}
html[data-stile="palinsesto"] .ex-dot { border-radius: 0; }
html[data-stile="palinsesto"] .origin { border: 2px solid var(--ink); color: var(--ink); }
html[data-stile="palinsesto"] .filter-alert { border-width: 2px; border-radius: 0; }
html[data-stile="palinsesto"] .ovvi { border: 2px solid var(--ink); border-radius: 0; }
html[data-stile="palinsesto"] .ovvi-poster { border-radius: 0; }
html[data-stile="palinsesto"] .sheet[open] { border-radius: 0; border-top: 5px solid var(--accent); }
html[data-stile="palinsesto"] .why p::before, html[data-stile="palinsesto"] .why p::after { color: var(--accent); }

/* custom icons are drawn already pointing down: no flip */
html[data-stile] .taste-btn { width: 38px; height: 38px; }
html[data-stile] .taste-btn svg { width: 18px; height: 18px; }
html[data-stile="palinsesto"] .taste-btn svg { width: 15px; height: 15px; }
@media (max-width: 759px) { html[data-stile] .entry .taste-btn { width: 34px; height: 34px; } }
html[data-stile] .taste-btn.down svg { transform: none; }
html[data-stile] .fame svg { height: 13px; }

/* =====================================================================
   THE PICKER: a neutral tool, the same in every style
   ===================================================================== */
.stile-picker {
  position: fixed; left: 12px; bottom: 12px; z-index: 1100;
  font: 500 13px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif; color: #fff; letter-spacing: 0; text-transform: none;
}
.stile-picker button { font: inherit; color: inherit; cursor: pointer; }
.sp-toggle {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px; background: rgba(17, 17, 17, .88); box-shadow: 0 6px 20px rgba(0,0,0,.3);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.sp-toggle b { font-weight: 700; }
.sp-caret { font-size: 10px; opacity: .7; }
.sp-menu {
  position: absolute; left: 0; bottom: calc(100% + 8px); display: grid; gap: 2px; min-width: 210px; padding: 8px;
  background: #161616; border: 1px solid rgba(255,255,255,.18); border-radius: 14px; box-shadow: 0 12px 34px rgba(0,0,0,.4);
}
.sp-menu[hidden] { display: none; }
.sp-title { margin: 2px 8px 6px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.sp-menu button { display: flex; align-items: center; gap: 10px; padding: 9px 8px; border: 0; border-radius: 9px; background: none; text-align: left; }
.sp-menu button:hover { background: rgba(255,255,255,.1); }
.sp-menu button[aria-pressed="true"] { background: #fff; color: #111; font-weight: 700; }
.sp-sw { display: inline-flex; }
.sp-sw i { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(128,128,128,.45); margin-left: -4px; }
.sp-sw i:first-child { margin-left: 0; }
@media print { .stile-picker { display: none; } }
@media (max-width: 759px) { .stile-picker { left: 8px; bottom: 8px; font-size: 12px; } .sp-toggle { padding: 7px 11px; } }
html[data-stile] .start-line .taste-btn { width: 32px; height: 32px; }
html[data-stile] .start-line .taste-btn svg { width: 15px; height: 15px; }
/* Poster pop: the vote buttons of the start series have no visible circle, so line the first
   icon (not the invisible circle) up with the title */
html[data-stile="pop"] .taste.start-taste { margin-left: -9px; }
/* «La serie che hai amato» (7/11/2026): a little smaller than the knob title, still clearly
   bigger than the title typed in the box under it */
.search label[for="q"] { font-size: 1.5rem; }
html[data-stile="pop"] .search label[for="q"] { font-size: 1.75rem; }
@media (min-width: 900px) { .search label[for="q"] { font-size: 1.6rem; } }
@media (max-width: 759px) {
  .search label[for="q"] { font-size: 1.3rem; }
  html[data-stile="pop"] .search label[for="q"] { font-size: 1.45rem; }
}

/* ---------------- Poster pop: the meter is half a roulette wheel (7/11/2026, version D) ----------------
   knob.js draws both the needle meter (.mt) and the wheel (.rl); only Poster pop shows the wheel.
   Ball in the chosen pocket, the spoke pointing at it lit up. Colours from the approved mockup
   (docs/direzione-visiva/mezza-roulette.html). */
.knob.meter .rl { display: none; }
html[data-stile="pop"] .knob.meter .mt { display: none; }
html[data-stile="pop"] .knob.meter .rl { display: inline; }
html[data-stile="pop"] {
  --rl-red: #B23A2E; --rl-black: #2A1820; --rl-green: #1F5A3A;
  --rl-rim: #2A1820; --rl-fret: #FFF4D2; --rl-cone: #FFF4D2; --rl-num: #FFF4D2;
  --rl-ball: #FFFDF6; --rl-ball-2: #E9DCC0; --rl-ball-edge: #2A1820;
  --rl-hi: #2A1820; --rl-lit: #D7372A; --rl-spoke: #2A1820; --rl-spoke-op: .18;
}
html[data-stile="pop"][data-theme="dark"] {
  --rl-red: #B8473B; --rl-black: #150C11; --rl-green: #2A6643;
  --rl-rim: #B48A3E; --rl-fret: #B48A3E; --rl-cone: #3A2430; --rl-num: #FFF1DE;
  --rl-ball: #FFF1DE; --rl-ball-2: #D6BFA0; --rl-ball-edge: #150C11;
  --rl-hi: #FFC233; --rl-lit: #FFC233; --rl-spoke: #B48A3E; --rl-spoke-op: .55;
}
@media (prefers-color-scheme: dark) {
  html[data-stile="pop"]:not([data-theme="light"]) {
    --rl-red: #B8473B; --rl-black: #150C11; --rl-green: #2A6643;
    --rl-rim: #B48A3E; --rl-fret: #B48A3E; --rl-cone: #3A2430; --rl-num: #FFF1DE;
    --rl-ball: #FFF1DE; --rl-ball-2: #D6BFA0; --rl-ball-edge: #150C11;
    --rl-hi: #FFC233; --rl-lit: #FFC233; --rl-spoke: #B48A3E; --rl-spoke-op: .55;
  }
}
.knob .rl-rim { fill: var(--rl-rim); }
.knob .rl-cone { fill: var(--rl-cone); }
.knob .pk { stroke: var(--rl-fret); stroke-width: 1.2; stroke-linejoin: round; }
.knob .pk-r { fill: var(--rl-red); }
.knob .pk-b { fill: var(--rl-black); }
.knob .pk-g { fill: var(--rl-green); }
.knob .pk.on { stroke: var(--rl-hi); stroke-width: 2.2; }
.knob .zone-fret { stroke: var(--rl-fret); stroke-width: 2.6; stroke-linecap: round; }
.knob .pk-num { fill: var(--rl-num); font: 800 10px/1 var(--font-sans); }
.knob .spoke { stroke: var(--rl-spoke); stroke-width: 1.1; stroke-linecap: round; opacity: var(--rl-spoke-op); }
.knob .spoke.on { stroke: var(--rl-lit); stroke-width: 4.6; opacity: 1; }
.knob .rl-glow { stroke: var(--rl-lit); stroke-width: 12; stroke-linecap: round; opacity: .5; }
.knob .rl-beam { fill: var(--rl-lit); opacity: .25; }
.knob .rl-hub { fill: var(--rl-rim); }
.knob .rl-hub-dot { fill: var(--rl-lit); }
.knob .ball { stroke: var(--rl-ball-edge); stroke-width: 1.3; }
.knob .ball-a { stop-color: var(--rl-ball); }
.knob .ball-b { stop-color: var(--rl-ball-2); }
.knob .ball-shadow { fill: #000; opacity: .28; }
.knob .rl-rotor { transition: transform 140ms cubic-bezier(.2, .7, .2, 1); }
@media (prefers-reduced-motion: reduce) { .knob .rl-rotor { transition: none; } }
/* the ball in the green pocket: "zero" turns green, label and name */
html[data-stile="pop"] .knob.rl-zero .knob-labels .l-min,
html[data-stile="pop"] .knob-panel:has(.knob.rl-zero) .knob-readout .name { color: var(--ok); }
/* in Poster pop the knob is a wheel: "la manopola" becomes "la ruota" */
.w-ruota { display: none; }
html[data-stile="pop"] .w-manopola { display: none; }
html[data-stile="pop"] .w-ruota { display: inline; }
/* Poster pop: the bookmark next to the title keeps a visible circle also on the page background */
html[data-stile="pop"] .title-line .taste-btn.save:not([aria-pressed="true"]), html[data-stile="pop"] .title-line .taste-btn.premio:not(:hover):not(.tip-open) { background: var(--surface); }
/* the start series has no bookmark beside the stars any more: no offset for its circle */
html[data-stile="pop"] .taste.start-taste { margin-left: 0; }
html[data-stile="pop"] body #results .entry .title-line .taste-btn.save:not([aria-pressed="true"]), html[data-stile="pop"] body #results .entry .title-line .taste-btn.premio:not(:hover):not(.tip-open) { background: var(--bg); }