/* SideQuest — stili. Font di sistema, nessuna risorsa esterna.
   Scala di spaziatura unica: --s1 4px · --s2 8px · --s3 12px · --s4 16px · --s5 24px · --s6 32px · --s7 48px */

:root {
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --gutter: 16px;
  --radius: 18px; --radius-sm: 12px; --radius-pill: 999px;
  --tap: 44px;

  --bg: #FFFFFF;
  --surface: #F4F4F7;
  --surface-2: #EAEAF0;
  --ink: #111116;
  --muted: #5C5C6B;
  --line: #E2E2EA;
  --accent: #FF5A1F;
  --accent-ink: #111116;
  --accent-soft: #FFE8DE;
  --focus: #2563EB;
  --ok: #0B7F57;
  --warn: #9A5600;
  --danger: #C42B1C;
  --map-water: #EAF2FB;
  --map-land: #FFFFFF;
  --map-border: #C5C9D4;
  --map-hit: #FFF1EA;
  --shadow: 0 1px 2px rgba(17, 17, 22, .06), 0 8px 24px -12px rgba(17, 17, 22, .18);

  --c-urbano: #F25C3B; --c-giochi: #E0A100; --c-creativita: #E0479E; --c-cibo: #E07B00;
  --c-natura: #24994F; --c-acqua: #1F7FE0; --c-motori: #D12F3A; --c-cielo: #6A55E0;
  --c-cultura: #9C6A3A; --c-notte: #3C44A8; --c-sport: #0E9C78; --c-viaggi: #0A93A0;

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0E0E12;
    --surface: #18181F;
    --surface-2: #23232C;
    --ink: #F4F4F7;
    --muted: #A6A6B5;
    --line: #2C2C37;
    --accent: #FF6A33;
    --accent-soft: #3A2117;
    --focus: #7EA8FF;
    --ok: #4CD3A0;
    --warn: #F2B35A;
    --danger: #FF7B6E;
    --map-water: #111925;
    --map-land: #23232C;
    --map-border: #3B3B4A;
    --map-hit: #2D2420;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 28px -14px rgba(0, 0, 0, .8);
    --c-notte: #7F86F0; --c-cultura: #C9965F; --c-motori: #F25A63; --c-cielo: #9686FF;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
html.is-locked { overflow: hidden; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}
main { flex: 1; outline: none; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: 3px; }
h1, h2, h3 { line-height: 1.1; letter-spacing: -.02em; margin: 0; font-weight: 800; }
h1 { font-size: clamp(2rem, 6.5vw, 3.4rem); }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }
p { margin: 0; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 8px; }
h1[tabindex="-1"]:focus, h2[tabindex="-1"]:focus { outline: none; }
[hidden] { display: none !important; }
.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; }
.skip { position: absolute; left: var(--s3); top: -60px; z-index: 100; background: var(--ink); color: var(--bg); padding: var(--s2) var(--s4); border-radius: var(--radius-sm); font-weight: 700; }
.skip:focus { top: var(--s3); }
.print-only { display: none; }
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }
@media (min-width: 720px) { :root { --gutter: 32px; } }

.icon { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon--sm { width: 18px; height: 18px; }
.icon--xs { width: 14px; height: 14px; }
.eyebrow { font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--s2); }
.lead { font-size: 1.12rem; color: var(--muted); max-width: 36em; }
.help { font-size: .86rem; color: var(--muted); }
.meta { font-size: .9rem; font-weight: 600; color: var(--muted); margin-bottom: var(--s4); }
.loading { padding: var(--s7) var(--gutter); text-align: center; color: var(--muted); }

/* ---------- Topbar e navigazione ---------- */
.topbar { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: saturate(1.5) blur(12px); -webkit-backdrop-filter: saturate(1.5) blur(12px); border-bottom: 1px solid var(--line); }
.topbar__inner { max-width: 1200px; margin: 0 auto; padding: var(--s3) var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: 60px; }
.brand { display: inline-flex; align-items: center; gap: var(--s2); text-decoration: none; font-size: 1.2rem; font-weight: 600; letter-spacing: -.02em; }
.brand b { font-weight: 900; }
.brand img { width: 32px; height: 32px; }
.nav--top { display: flex; gap: var(--s1); }
.nav--top a { display: inline-flex; align-items: center; gap: var(--s2); min-height: 40px; padding: 0 var(--s4); border-radius: var(--radius-pill); text-decoration: none; font-weight: 650; font-size: .95rem; }
.nav--top a:hover { background: var(--surface); }
.nav--top a[aria-current="page"] { background: var(--ink); color: var(--bg); }
.dot-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--accent); color: var(--accent-ink); font-size: .72rem; font-weight: 800; }
.tabbar { display: none; }

@media (max-width: 759px) {
  .btn--xl { padding: 0 var(--s5); }
  .nav--top { display: none; }
  .topbar__inner { min-height: 56px; padding-top: var(--s2); padding-bottom: var(--s2); }
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; padding: var(--s1) var(--s1) calc(var(--s1) + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--line); }
  .tabbar a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; text-decoration: none; font-size: .68rem; font-weight: 700; color: var(--muted); border-radius: var(--radius-sm); }
  .tabbar a[aria-current="page"] { color: var(--ink); }
  .tabbar a[aria-current="page"] .icon { color: var(--accent); }
  .tabbar .dot-count { position: absolute; top: 4px; left: calc(50% + 6px); min-width: 16px; height: 16px; font-size: .62rem; padding: 0 4px; }
}

/* ---------- Bottoni ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: var(--tap); padding: 0 var(--s5); border-radius: var(--radius-pill); border: 0; font-weight: 750; font-size: .98rem; text-decoration: none; cursor: pointer; background: var(--surface); white-space: nowrap; transition: background .12s, transform .12s, opacity .12s; }
.btn:hover { background: var(--surface-2); }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--primary:hover { background: color-mix(in srgb, var(--accent) 88%, var(--ink)); }
.btn--soft { background: var(--surface); }
.btn--soft.is-on { background: var(--ink); color: var(--bg); }
.btn--ghost { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line); }
.btn--ghost:hover { background: var(--surface); }
.btn--danger { background: transparent; color: var(--danger); box-shadow: inset 0 0 0 1.5px currentColor; }
.btn--sm { min-height: 40px; padding: 0 var(--s4); font-size: .9rem; }
.btn--xl { min-height: 56px; padding: 0 var(--s6); font-size: 1.08rem; }
.btn--block { width: 100%; white-space: normal; text-align: center; line-height: 1.2; }
.icon-btn { display: inline-grid; place-items: center; width: var(--tap); height: var(--tap); border-radius: var(--radius-pill); border: 0; background: transparent; cursor: pointer; flex: none; }
.icon-btn:hover { background: var(--surface); }
.icon-btn--soft { background: var(--surface); }
.icon-btn--soft:hover { background: var(--surface-2); }
.link-btn { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0; border: 0; background: none; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.btnrow { display: flex; flex-wrap: wrap; gap: var(--s3); }
.badge-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: var(--radius-pill); background: var(--accent); color: var(--accent-ink); font-size: .75rem; font-weight: 800; }
.badge-count--muted { background: var(--surface-2); color: var(--ink); }
.arrow-link { display: inline-flex; align-items: center; gap: var(--s2); font-weight: 750; }

/* ---------- Chip, campi, controlli ---------- */
.chips { display: flex; gap: var(--s2); }
.chips--wrap { flex-wrap: wrap; }
.chips--scroll { overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; margin: 0 calc(var(--gutter) * -1); padding-left: var(--gutter); padding-right: var(--gutter); scroll-padding: var(--gutter); }
.chips--scroll::-webkit-scrollbar { display: none; }
.chip { position: relative; display: inline-flex; flex: none; }
.chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chip > span, .chip--btn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 var(--s4); border-radius: var(--radius-pill); background: var(--surface); border: 0; font-weight: 650; font-size: .92rem; white-space: nowrap; cursor: pointer; transition: background .12s, color .12s; }
.chip > span small { font-size: .78rem; font-weight: 500; color: var(--muted); }
.chip:hover > span, .chip--btn:hover { background: var(--surface-2); }
.chip input:checked + span, .chip--btn[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.chip input:checked + span small { color: inherit; opacity: .75; }
.chip input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.chip input:disabled + span { opacity: .4; cursor: not-allowed; }
.chip--lg { min-height: var(--tap); padding: 0 var(--s5); font-size: .98rem; }
.chip--cat .icon { color: var(--cat); }
.chip--cat[aria-pressed="true"] { background: var(--cat); color: #fff; }
.chip--cat[aria-pressed="true"] .icon { color: #fff; }

.field { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
.field__label { padding: 0; font-weight: 800; font-size: 1rem; }
.field.is-flash { animation: flash 1s ease; border-radius: var(--radius-sm); }
@keyframes flash { 0%, 40% { background: var(--accent-soft); box-shadow: 0 0 0 8px var(--accent-soft); } 100% { background: transparent; box-shadow: 0 0 0 8px transparent; } }
.inline-field { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2) var(--s3); }
.inline-field > label { font-weight: 650; font-size: .92rem; }
.select, input[type="date"], input[type="search"], input[type="text"] {
  min-height: var(--tap); padding: 0 var(--s4); border-radius: var(--radius-sm); border: 0; background: var(--surface); font-weight: 600; max-width: 100%; min-width: 0;
}
.select { padding-right: var(--s5); }
.select--sm { min-height: 40px; font-size: .9rem; }
.select:hover, input[type="date"]:hover { background: var(--surface-2); }
.people { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.stepper { display: inline-flex; align-items: center; background: var(--surface); border-radius: var(--radius-pill); }
.stepper__btn { width: var(--tap); height: var(--tap); border: 0; border-radius: var(--radius-pill); background: transparent; font-size: 1.35rem; font-weight: 700; cursor: pointer; }
.stepper__btn:hover { background: var(--surface-2); }
.stepper__btn:disabled { opacity: .3; cursor: not-allowed; }
.stepper input { width: 3em; min-height: var(--tap); border: 0; background: transparent; text-align: center; font-weight: 800; font-size: 1.15rem; -moz-appearance: textfield; appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.subpick { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }

.seg { display: inline-flex; padding: var(--s1); gap: var(--s1); background: var(--surface); border-radius: var(--radius-pill); }
.seg--full { display: flex; width: 100%; }
.seg--full .seg__btn { flex: 1; }
.seg__btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 40px; min-height: 36px; padding: 0 var(--s3); border: 0; border-radius: var(--radius-pill); background: transparent; font-weight: 700; font-size: .92rem; cursor: pointer; white-space: nowrap; }
.seg__btn:hover { background: var(--surface-2); }
.seg__btn[aria-pressed="true"], .seg__btn[aria-checked="true"] { background: var(--bg); box-shadow: var(--shadow); }

.price { display: grid; gap: var(--s2); }
.price__value { font-weight: 800; font-size: 1.05rem; }
.dual { position: relative; height: 32px; --a: 0%; --b: 100%; }
.dual::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 6px; transform: translateY(-50%); border-radius: 3px; background: linear-gradient(to right, var(--surface-2) var(--a), var(--accent) var(--a), var(--accent) var(--b), var(--surface-2) var(--b)); }
.dual__input { position: absolute; inset: 0; width: 100%; height: 32px; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.dual__input::-webkit-slider-runnable-track { background: none; height: 32px; }
.dual__input::-moz-range-track { background: none; }
.dual__input::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 28px; height: 28px; margin-top: 2px; border-radius: 50%; background: var(--bg); border: 3px solid var(--accent); box-shadow: var(--shadow); cursor: grab; }
.dual__input::-moz-range-thumb { pointer-events: auto; width: 22px; height: 22px; border-radius: 50%; background: var(--bg); border: 3px solid var(--accent); cursor: grab; }
.dual__input:focus-visible { outline: none; }
.dual__input:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--focus); outline-offset: 2px; }
.dual__input:focus-visible::-moz-range-thumb { outline: 3px solid var(--focus); outline-offset: 2px; }
.dual__scale { display: flex; justify-content: space-between; font-size: .78rem; color: var(--muted); }
.range { width: 100%; accent-color: var(--accent); height: 32px; margin: 0; }

/* ---------- Interruttore ---------- */
.switch { position: relative; display: grid; grid-template-columns: auto 1fr; gap: var(--s3); align-items: start; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch__ui { position: relative; width: 44px; height: 26px; margin-top: 2px; border-radius: var(--radius-pill); background: var(--surface-2); transition: background .15s; }
.switch__ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--bg); box-shadow: var(--shadow); transition: transform .15s; }
.switch input:checked + .switch__ui { background: var(--accent); }
.switch input:checked + .switch__ui::after { transform: translateX(18px); }
.switch input:focus-visible + .switch__ui { outline: 3px solid var(--focus); outline-offset: 2px; }
.switch__text { display: grid; gap: 2px; font-size: .92rem; }
.switch__text small { color: var(--muted); font-size: .82rem; }
.quick .switch__ui, .filters.is-inline .switch__ui { background: var(--line); }

/* ---------- Mappa ---------- */
.mappick { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
.mappick__svg { display: block; width: 100%; height: min(62vh, 420px); background: var(--map-water); border-radius: var(--radius); touch-action: pan-y; cursor: crosshair; user-select: none; -webkit-user-select: none; }
.mappick__region { fill: var(--map-land); stroke: var(--map-border); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.mappick__region.is-hit { fill: var(--map-hit); }
.mappick__city { fill: var(--muted); }
.mappick__label { fill: var(--ink); font-weight: 650; pointer-events: none; paint-order: stroke; stroke: var(--map-land); stroke-width: 3px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.mappick__circle { fill: color-mix(in srgb, var(--accent) 22%, transparent); stroke: var(--accent); stroke-width: 2.5; vector-effect: non-scaling-stroke; pointer-events: none; }
.mappick__center { fill: var(--accent); stroke: #fff; stroke-width: 3; vector-effect: non-scaling-stroke; cursor: move; touch-action: none; }
.mappick__center:focus-visible { outline: none; stroke: var(--focus); stroke-width: 4; }
.mappick__edge { fill: #fff; stroke: var(--accent); stroke-width: 3; vector-effect: non-scaling-stroke; cursor: ew-resize; touch-action: none; }
.mappick__row { display: flex; align-items: center; gap: var(--s3); }
.mappick__row--tools { flex-wrap: wrap; }
.mappick__row--tools .select { flex: 1 1 180px; }
.mappick__label-radius { flex: none; font-weight: 650; font-size: .92rem; min-width: 7.5em; }
.mappick__km { font-weight: 800; }

/* ---------- Home ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); padding-top: var(--s6); padding-bottom: var(--s6); }
.hero__text { display: grid; gap: var(--s4); align-content: start; }
.hero h1 { font-size: clamp(2.3rem, 8vw, 4rem); line-height: 1; letter-spacing: -.035em; }
@media (min-width: 1000px) {
  .hero { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--s7); padding-top: var(--s7); align-items: start; }
  .hero__text { position: sticky; top: 100px; }
}
.quick { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); min-width: 0; padding: var(--s5) var(--s4); background: var(--surface); border-radius: 24px; }
@media (min-width: 560px) { .quick { padding: var(--s6); } }
.quick .chip > span, .quick .chip--btn, .quick .seg, .quick .select, .quick .stepper, .quick input[type="date"] { background: var(--bg); }
.quick .chip input:checked + span, .quick .chip--btn[aria-pressed="true"] { background: var(--ink); }
.quick .seg__btn[aria-checked="true"] { background: var(--surface-2); box-shadow: none; }
.quick__actions { display: grid; gap: var(--s3); padding-top: var(--s2); }
.quick__secondary { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.quick__secondary .btn { background: var(--bg); box-shadow: none; padding: 0 var(--s3); min-width: 0; }
.section { padding-top: var(--s5); padding-bottom: var(--s5); display: grid; gap: var(--s4); }
.section__title { font-size: clamp(1.25rem, 3vw, 1.6rem); }
.section__title--sm { font-size: 1.05rem; }
.cats { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .cats { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .cats { grid-template-columns: repeat(4, 1fr); } }
.cats__tile { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s3); min-height: 64px; padding: var(--s3) var(--s4); border-radius: var(--radius); background: var(--surface); text-decoration: none; transition: background .12s; }
.cats__tile:hover { background: var(--surface-2); }
.cats__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--cat) 16%, transparent); color: var(--cat); }
.cats__label { font-weight: 750; line-height: 1.2; font-size: .95rem; }
.cats__count { font-size: .82rem; font-weight: 700; color: var(--muted); }

/* ---------- Risultati ---------- */
.results { padding-top: var(--s5); padding-bottom: var(--s7); }
.rhead { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); margin-bottom: var(--s4); }
.rhead__top { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; }
.rhead h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); }
.rhead__tools { display: flex; align-items: center; gap: var(--s2); }
.pills { display: flex; gap: var(--s2); overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gutter) * -1); padding: 2px var(--gutter); }
.pills::-webkit-scrollbar { display: none; }
.pill { flex: none; display: inline-flex; align-items: center; gap: var(--s2); min-height: 40px; padding: 0 var(--s4); border-radius: var(--radius-pill); border: 0; background: var(--surface); font-weight: 650; font-size: .9rem; cursor: pointer; white-space: nowrap; }
.pill:hover { background: var(--surface-2); }
.pill .icon { color: var(--muted); }
.pill.is-on { background: var(--ink); color: var(--bg); }
.pill.is-on .icon { color: var(--accent); }
.search { display: flex; align-items: center; gap: var(--s2); padding-left: var(--s4); margin-bottom: var(--s3); border-radius: var(--radius-pill); background: var(--surface); }
.search .icon { color: var(--muted); }
.search__input { flex: 1; background: transparent !important; border-radius: var(--radius-pill) !important; }
.search:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.search__input:focus-visible { outline: none; }
.results .chips--scroll { margin-bottom: var(--s4); }
.layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
@media (min-width: 1100px) {
  .layout { grid-template-columns: 340px minmax(0, 1fr); align-items: start; }
  .layout__side:empty { display: none; }
}
.layout__side, .layout__main { min-width: 0; }
.grid { display: grid; gap: var(--s4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1400px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.more-btn { display: flex; margin: var(--s5) auto 0; }
.outside { margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--line); display: grid; gap: var(--s4); }

/* ---------- Card ---------- */
.card { --cat: var(--accent); position: relative; display: flex; flex-direction: column; gap: var(--s2); padding: var(--s4) var(--s4) var(--s4); border-radius: var(--radius); background: var(--surface); min-width: 0; transition: background .15s, transform .15s; }
.card:hover { background: var(--surface-2); }
.card:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.card__cat { display: flex; align-items: center; gap: 6px; padding-right: 40px; font-size: .8rem; font-weight: 750; color: var(--muted); }
.card__cat .icon { color: var(--cat); }
.card__status { margin-left: auto; padding: 2px var(--s2); border-radius: var(--radius-pill); background: var(--ink); color: var(--bg); font-size: .72rem; }
.card__title { font-size: 1.15rem; line-height: 1.2; }
.card__link { text-decoration: none; }
.card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--radius); }
.card__link:focus-visible { outline: none; }
.card__pitch { color: var(--muted); font-size: .94rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card__facts { list-style: none; margin: var(--s1) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); font-size: .9rem; font-weight: 700; }
.card__facts li { display: inline-flex; align-items: center; gap: 6px; }
.card__facts .icon { color: var(--cat); }
.card__where { display: flex; align-items: center; gap: 6px; font-size: .84rem; color: var(--muted); min-width: 0; }
.card__why { margin-top: var(--s1); padding-top: var(--s2); border-top: 1px solid var(--line); font-size: .84rem; color: var(--muted); }
.card__fail { display: flex; gap: 6px; align-items: baseline; font-size: .84rem; font-weight: 650; color: var(--warn); }
.card--muted { opacity: .72; }
.card--big { padding: var(--s5); gap: var(--s3); }
.card--big .card__title { font-size: clamp(1.4rem, 4vw, 1.9rem); }
.card--big .card__pitch { -webkit-line-clamp: unset; font-size: 1.02rem; }
.fav { position: absolute; top: var(--s2); right: var(--s2); z-index: 2; display: grid; place-items: center; width: var(--tap); height: var(--tap); border-radius: var(--radius-pill); border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.fav:hover { color: var(--accent); background: var(--bg); }
.fav.is-on { color: var(--accent); }
.fav--big { position: static; width: auto; height: 40px; padding: 0 var(--s4); gap: var(--s2); display: inline-flex; background: var(--surface); color: var(--ink); font-weight: 750; font-size: .9rem; }
.fav--big .icon { width: 18px; height: 18px; color: var(--accent); }
.fav--big.is-on { background: var(--accent-soft); }
.enter { animation: rise .28s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 30ms); }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Vuoto ---------- */
.empty { display: grid; gap: var(--s3); padding: var(--s5); border-radius: var(--radius); background: var(--surface); }
.empty__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.empty__list li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
.empty__list .btn { background: var(--bg); }
.empty__actions { display: flex; flex-wrap: wrap; gap: var(--s3); }

/* ---------- Sorprendimi ---------- */
.stage { display: grid; gap: var(--s4); max-width: 720px; perspective: 1200px; }
.stage__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.stage__actions .btn { padding: 0 var(--s3); min-width: 0; }
.stage.is-drawing .card { animation: draw .4s cubic-bezier(.2, .9, .25, 1.1) both; transform-origin: 50% 80%; }
.stage.is-drawing .dice-icon { animation: spin .4s ease-out; }
@keyframes draw { 0% { opacity: 0; transform: rotateX(-30deg) translateY(16px) scale(.97); } 100% { opacity: 1; transform: none; } }
@keyframes spin { from { transform: rotate(-200deg); } to { transform: rotate(0); } }
.recent { margin-top: var(--s6); display: grid; gap: var(--s3); max-width: 720px; }
.linklist { margin: 0; padding-left: 1.2em; display: grid; gap: var(--s2); }

/* ---------- Pannello filtri ---------- */
.filters { display: flex; flex-direction: column; background: var(--bg); }
.filters__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) var(--s3) var(--s3) var(--s5); border-bottom: 1px solid var(--line); }
.filters__head h2 { font-size: 1.25rem; outline: none; }
.filters__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); align-content: start; padding: var(--s5); overflow-y: auto; overscroll-behavior: contain; }
.filters__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--bg); }
.filters__apply { flex: 1; }
.filters__count { width: 100%; font-size: .86rem; font-weight: 650; color: var(--muted); }
.more { border-top: 1px solid var(--line); padding-top: var(--s4); }
.more summary { display: flex; align-items: center; gap: var(--s2); min-height: var(--tap); list-style: none; cursor: pointer; font-weight: 800; }
.more summary::-webkit-details-marker { display: none; }
.more summary > span:first-child { flex: 1; }
.more__chev { transition: transform .15s; color: var(--muted); }
.more[open] .more__chev { transform: rotate(90deg); }
.more__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); padding: var(--s3) 0 var(--s2); }
.filters:not(.is-inline) { position: fixed; z-index: 60; top: 0; right: 0; bottom: 0; width: min(100vw, 480px); box-shadow: -24px 0 60px rgba(0, 0, 0, .25); transform: translateX(100%); transition: transform .22s ease; }
.filters:not(.is-inline).is-open { transform: none; }
.filters:not(.is-inline) .filters__count { display: none; }
@media (max-width: 559px) {
  .filters:not(.is-inline) { top: auto; left: 0; width: 100%; height: min(92vh, 100%); border-radius: 22px 22px 0 0; transform: translateY(100%); }
  .filters:not(.is-inline) .filters__body { padding: var(--s4); }
}
html.is-locked::after { content: ""; position: fixed; inset: 0; z-index: 50; background: rgba(10, 10, 14, .5); }
.filters.is-inline { position: sticky; top: 80px; max-height: calc(100vh - 96px); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.filters.is-inline .filters__head, .filters.is-inline .filters__foot { background: var(--surface); border-color: var(--surface-2); }
.filters.is-inline .filters__body { padding: var(--s4); }
.filters.is-inline .filters__close, .filters.is-inline .filters__apply { display: none; }
.filters.is-inline .chip > span, .filters.is-inline .chip--btn, .filters.is-inline .seg, .filters.is-inline .select, .filters.is-inline .stepper, .filters.is-inline input[type="date"] { background: var(--bg); }
.filters.is-inline .chip input:checked + span, .filters.is-inline .chip--btn[aria-pressed="true"] { background: var(--ink); }
.filters.is-inline .more { border-color: var(--surface-2); }

/* ---------- Dettaglio ---------- */
.detail { padding-top: var(--s4); padding-bottom: var(--s7); }
.back { display: inline-flex; align-items: center; gap: var(--s2); min-height: var(--tap); padding: 0; border: 0; background: none; font-weight: 700; cursor: pointer; margin-bottom: var(--s2); }
.dhead { display: grid; gap: var(--s4); }
.dhead h1 { font-size: clamp(1.9rem, 6vw, 3rem); }
.dhead__type { margin-left: var(--s2); padding: 2px var(--s2); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink); font-size: .74rem; }
.tiles { display: grid; gap: var(--s3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) { .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tile { display: grid; gap: 2px; padding: var(--s4); border-radius: var(--radius); background: var(--surface); min-width: 0; }
.tile .icon { color: var(--cat); margin-bottom: var(--s1); }
.tile__k { font-size: .78rem; font-weight: 650; color: var(--muted); }
.tile strong { font-size: 1rem; line-height: 1.25; }
.actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.detail__loading { padding: var(--s6) 0; color: var(--muted); }
.detail__grid { display: grid; gap: var(--s6); grid-template-columns: minmax(0, 1fr); margin-top: var(--s5); }
@media (min-width: 980px) { .detail__grid { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; } .detail__side { position: sticky; top: 84px; } }
.detail__main { display: grid; gap: 0; }
.mission { display: grid; gap: var(--s1); padding: var(--s5); border-radius: var(--radius); background: var(--ink); color: var(--bg); margin-bottom: var(--s3); }
.mission .eyebrow { color: var(--accent); margin: 0; }
.mission__text { font-weight: 750; font-size: clamp(1.1rem, 2.6vw, 1.35rem); line-height: 1.35; }
.dsec { display: grid; gap: var(--s3); padding: var(--s5) 0; border-bottom: 1px solid var(--line); }
.dsec:last-child { border-bottom: 0; }
.dsec h2 { font-size: 1.15rem; }
.dsec h3 { margin-top: var(--s2); }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; display: grid; gap: var(--s3); }
.steps li { counter-increment: s; display: grid; grid-template-columns: 32px 1fr; gap: var(--s3); align-items: start; }
.steps li::before { content: counter(s); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--cat); color: #fff; font-weight: 800; font-size: .85rem; }
.bullets { margin: 0; padding-left: 1.2em; display: grid; gap: var(--s1); }
.bullets--alert li::marker { color: var(--danger); }
.dl { margin: 0; display: grid; border-radius: var(--radius-sm); background: var(--surface); overflow: hidden; }
.dl__row { display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr); gap: var(--s3); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--bg); }
.dl__row:last-child { border-bottom: 0; }
.dl dt { color: var(--muted); font-size: .9rem; }
.dl dd { margin: 0; font-weight: 650; }
@media (max-width: 420px) { .dl__row { grid-template-columns: 1fr; gap: 2px; } }
.months { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s1); max-width: 480px; }
@media (min-width: 520px) { .months { grid-template-columns: repeat(12, 1fr); } }
.months li { padding: 6px 0; border-radius: 8px; text-align: center; font-size: .76rem; font-weight: 700; background: var(--surface); color: var(--muted); }
.months li.on { background: var(--cat); color: #fff; }
.sources { margin: 0; padding-left: 1.1em; display: grid; gap: var(--s3); }
.ext { font-weight: 650; word-break: break-word; }
.match { display: grid; gap: var(--s3); padding: var(--s5); border-radius: var(--radius); background: var(--surface); }
.match h2 { font-size: 1.05rem; }
.match--ok { box-shadow: inset 4px 0 0 var(--ok); }
.match--ko { box-shadow: inset 4px 0 0 var(--warn); }
.warnings { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); font-size: .86rem; color: var(--muted); }
.warnings li { display: flex; gap: var(--s2); align-items: baseline; }

/* ---------- Diario, prosa ---------- */
.diary, .prose { padding-top: var(--s5); padding-bottom: var(--s7); }
.diary { display: grid; gap: var(--s4); }
.prose { max-width: 780px; display: grid; gap: var(--s4); }
.prose h2 { margin-top: var(--s4); }
.notice { padding: var(--s3) var(--s4); border-radius: var(--radius-sm); font-weight: 600; font-size: .92rem; }
.notice--ok { background: color-mix(in srgb, var(--ok) 12%, var(--bg)); }
.notice--warn { background: color-mix(in srgb, var(--warn) 16%, var(--bg)); }
.diary__grid { display: grid; gap: var(--s4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .diary__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.box { display: grid; gap: var(--s3); align-content: start; padding: var(--s5); border-radius: var(--radius); background: var(--surface); }
.box h2 { display: flex; align-items: center; gap: var(--s2); font-size: 1.1rem; }
.box .chip > span { background: var(--bg); }
.box .chip input:checked + span { background: var(--ink); }
.box .btn--soft { background: var(--bg); }
.mini-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); }
.mini-list li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s2); padding-left: var(--s2); }
.mini-list li > .icon { color: var(--cat); }
.mini-list a { font-weight: 650; text-decoration: none; line-height: 1.3; }
.mini-list a:hover { text-decoration: underline; }
.table { border-collapse: collapse; width: 100%; max-width: 440px; }
.table th, .table td { padding: var(--s2) var(--s3); text-align: left; border-bottom: 1px solid var(--line); }

/* ---------- Footer e toast ---------- */
.footer { margin-top: var(--s6); padding: var(--s5) 0 calc(var(--s5) + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); font-size: .88rem; color: var(--muted); }
.footer__inner { display: flex; flex-direction: column; gap: var(--s3); }
@media (min-width: 800px) { .footer__inner { flex-direction: row; align-items: center; justify-content: space-between; } }
.footer nav { display: flex; flex-wrap: wrap; gap: var(--s4); }
.footer a { font-weight: 700; color: var(--ink); }
.toast { position: fixed; z-index: 80; left: 50%; bottom: calc(var(--s4) + env(safe-area-inset-bottom)); max-width: min(92vw, 480px); padding: var(--s3) var(--s4); border-radius: var(--radius-sm); background: var(--ink); color: var(--bg); box-shadow: var(--shadow); transform: translate(-50%, calc(100% + 40px)); visibility: hidden; transition: transform .2s ease, visibility 0s linear .2s; }
.toast.is-visible { transform: translate(-50%, 0); visibility: visible; transition: transform .2s ease; }
@media (max-width: 759px) { .toast { bottom: calc(76px + env(safe-area-inset-bottom)); } }
.toast p { font-weight: 650; }
.toast__input { width: 100%; margin-top: var(--s2); color: var(--ink); background: var(--bg); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- Stampa: piano della missione ---------- */
@media print {
  :root { --bg: #fff; --surface: #f3f3f3; --surface-2: #e8e8e8; --ink: #000; --muted: #333; --line: #bbb; }
  body { background: #fff; color: #000; font-size: 11pt; padding: 0; }
  .topbar, .footer, .tabbar, .toast, .no-print, .filters, .fav, .skip, .actions { display: none !important; }
  .print-only { display: block; }
  span.print-only { display: inline; font-size: 9pt; word-break: break-all; }
  .mission { background: #fff !important; color: #000 !important; border: 1px solid #000; }
  .detail__grid { display: block; }
  .detail__side { position: static; margin-top: var(--s4); }
  .dsec { break-inside: avoid; }
  .months li.on { background: #000 !important; color: #fff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .plan p { margin: 10px 0; }
  a { text-decoration: none; }
}