:root {
  /* Copertina a tutta larghezza, scheda live che la sovrappone, carosello dei giorni, linea del tempo del giorno scelto, poi cose da fare e info */
  --bg: #f2f4f9;
  --surface: #ffffff;
  --surface-2: #e9edf6;
  --ink: #141a30;
  --muted: #586080;
  --line: #dce1ec;
  --accent: #2b4ea2;
  --accent-soft: #e3e9fa;
  --teal: #0b7a6f;
  --teal-soft: #dcf2ee;
  --glow: #a8620a;
  --glow-strong: #e39a2d;
  --glow-soft: #fcefd9;
  --warn: #b3261e;
  --warn-soft: #fbe4e2;
  --shadow: 0 10px 30px rgba(15, 22, 50, 0.14);
  --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-body: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius: 18px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d1120; --surface: #161b30; --surface-2: #1d2440; --ink: #e8ebf5; --muted: #9aa2c0; --line: #29304e;
    --accent: #8aa6f2; --accent-soft: #212b4e; --teal: #5fcfbf; --teal-soft: #15332f;
    --glow: #f2b55a; --glow-strong: #f2b55a; --glow-soft: #3a2c16; --warn: #f19a92; --warn-soft: #3d1f1e;
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0d1120; --surface: #161b30; --surface-2: #1d2440; --ink: #e8ebf5; --muted: #9aa2c0; --line: #29304e;
  --accent: #8aa6f2; --accent-soft: #212b4e; --teal: #5fcfbf; --teal-soft: #15332f;
  --glow: #f2b55a; --glow-strong: #f2b55a; --glow-soft: #3a2c16; --warn: #f19a92; --warn-soft: #3d1f1e;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}
h1, h2, h3 { font-family: var(--font-display); margin: 0; line-height: 1.15; text-wrap: balance; }
p { margin: 0; }
a { color: var(--accent); }
img { max-width: 100%; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 8px; }

/* Copertina */
.hero { position: relative; height: 400px; color: #fff; overflow: hidden; background: #0d1120; }
.hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 11, 24, 0.1) 0%, rgba(8, 11, 24, 0.25) 45%, rgba(8, 11, 24, 0.9) 100%); }
.hero-inner { position: relative; z-index: 1; max-width: 760px; height: 100%; margin: 0 auto; padding: 0 16px 92px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; }
.kicker { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.9; }
.hero h1 { font-size: clamp(3.2rem, 15vw, 5.2rem); font-weight: 800; letter-spacing: -0.03em; line-height: 0.92; }
.hero .sub { opacity: 0.92; display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 0.95rem; }

.wrap { position: relative; z-index: 2; max-width: 760px; margin: -68px auto 0; padding: 0 16px 48px; display: flex; flex-direction: column; gap: 30px; }

/* Barra fissa in alto */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  background: var(--surface); border-bottom: 1px solid var(--line);
  box-shadow: 0 4px 16px rgba(15, 22, 50, 0.08);
  transform: translateY(-110%);
}
.topbar.show { transform: none; }
.topbar-inner { max-width: 760px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 10px; font-size: 0.92rem; }
.topbar .tb-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex: none; }
.topbar.is-now .tb-dot { background: var(--glow-strong); }
.topbar .tb-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .tb-text strong { font-weight: 700; }
.topbar .tb-time { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--accent); white-space: nowrap; }
.topbar.is-now .tb-time { color: var(--glow); }

/* Scheda live */
.live { background: var(--surface); border-radius: 20px; padding: 18px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 14px; border: 1px solid var(--line); }
.live.is-now { border-top: 5px solid var(--glow-strong); }
.block { display: flex; flex-direction: column; gap: 6px; }
.block + .block { border-top: 1px solid var(--line); padding-top: 14px; }
.eyebrow { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.eyebrow.now { color: var(--glow); }
.live h2 { font-size: 1.4rem; font-weight: 800; }
.place, .meta { color: var(--muted); font-size: 0.95rem; }
.meta strong { color: var(--ink); }
.count { display: flex; gap: 14px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.count .unit { display: flex; flex-direction: column; min-width: 52px; }
.count .num { font-family: var(--font-display); font-weight: 800; font-size: 2.5rem; line-height: 1; color: var(--accent); }
.count .lbl { font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 2px; }
.count.small .num { font-size: 1.9rem; }
.bar { height: 8px; background: var(--surface-2); border-radius: 99px; overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--glow-strong); border-radius: 99px; }

/* Intestazioni di sezione */
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.section-head h2 { font-size: 1.35rem; font-weight: 800; }
.section-head span { color: var(--muted); font-size: 0.9rem; }

/* Carosello dei giorni */
.carousel { display: flex; flex-direction: column; gap: 12px; }
.track {
  display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-padding-left: 16px;
  margin: 0 -16px; padding: 6px 16px 10px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.track::-webkit-scrollbar { display: none; }
.daycard {
  flex: 0 0 74%; max-width: 290px; height: 220px;
  position: relative; border: 0; padding: 0; border-radius: var(--radius); overflow: hidden;
  scroll-snap-align: start; cursor: pointer; text-align: left; color: #fff; background: #1b2140;
  box-shadow: 0 6px 18px rgba(15, 22, 50, 0.16);
}
.daycard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.daycard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 11, 24, 0) 30%, rgba(8, 11, 24, 0.85) 100%); }
.daycard[aria-selected="true"] { box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px var(--accent), 0 6px 18px rgba(15, 22, 50, 0.2); }
.dc-chip { position: absolute; top: 12px; left: 12px; z-index: 1; font-size: 0.75rem; font-weight: 700; padding: 3px 10px; border-radius: 99px; background: rgba(255, 255, 255, 0.92); color: #141a30; font-variant-numeric: tabular-nums; }
.dc-chip.now { background: #e39a2d; color: #1a1205; }
.dc-chip.done { background: rgba(20, 26, 48, 0.75); color: #fff; }
.dc-body { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 1; display: flex; flex-direction: column; gap: 2px; }
.dc-eyebrow { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.9; }
.dc-title { font-family: var(--font-display); font-size: 1.35rem; font-weight: 800; line-height: 1.1; }
.dc-meta { font-size: 0.85rem; opacity: 0.9; font-variant-numeric: tabular-nums; }
.dots { display: flex; gap: 6px; justify-content: center; }
.dots span { width: 7px; height: 7px; border-radius: 99px; background: var(--line); }
.dots span.on { width: 22px; background: var(--accent); }

/* Giorno scelto */
.day { display: flex; flex-direction: column; gap: 14px; }
.dayhead { display: flex; flex-direction: column; gap: 6px; }
.dayhead h2 { font-size: 1.5rem; font-weight: 800; }
.dayhead p { color: var(--muted); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 0.85rem; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.legend .noi i { background: var(--accent); }
.legend .loro i { background: var(--teal); }

.strip { position: relative; height: 24px; }
.strip .track-line { position: absolute; left: 0; right: 0; top: 10px; height: 4px; background: var(--surface-2); border-radius: 99px; }
.strip .done { position: absolute; left: 0; top: 10px; height: 4px; background: var(--accent); border-radius: 99px; }
.strip .tick { position: absolute; top: 6px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--surface); border: 2px solid var(--line); }
.strip .tick.past { background: var(--accent); border-color: var(--accent); }
.strip .tick.cur { background: var(--glow-strong); border-color: var(--glow-strong); }
.strip .nowmark { position: absolute; top: 0; width: 2px; height: 24px; margin-left: -1px; background: var(--glow-strong); }
.striplabels { display: flex; justify-content: space-between; font-size: 0.78rem; color: var(--muted); font-variant-numeric: tabular-nums; margin-top: -6px; }

.timeline { list-style: none; margin: 0; padding: 0; position: relative; display: flex; flex-direction: column; gap: 12px; }
.timeline::before { content: ""; position: absolute; left: 8px; top: 10px; bottom: 10px; width: 2px; background: var(--line); }
.tl { display: grid; grid-template-columns: 18px 1fr; gap: 10px; }
.node { width: 14px; height: 14px; margin-top: 18px; justify-self: center; position: relative; z-index: 1; border-radius: 50%; background: var(--surface); border: 3px solid var(--line); }
.node.past { background: var(--accent); border-color: var(--accent); }
.node.now { background: var(--glow-strong); border-color: var(--glow-strong); box-shadow: 0 0 0 5px var(--glow-soft); }
.node.next { border-color: var(--accent); }

.stop { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; min-width: 0; }
.stop.g-noi { border-left: 4px solid var(--accent); }
.stop.g-loro { border-left: 4px solid var(--teal); }
.stop .photo { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.stop .content { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; }
.stop .row1 { display: flex; align-items: center; justify-content: space-between; gap: 6px 10px; flex-wrap: wrap; }
.stop .time { font-weight: 700; font-size: 0.9rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.stop h3 { font-size: 1.12rem; font-weight: 600; line-height: 1.25; }
.stop .where { color: var(--muted); font-size: 0.95rem; }
.stop .note { font-size: 0.95rem; }
.stop .links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 2px; }
.mapbtn { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 700; text-decoration: none; padding: 5px 10px; border-radius: 99px; background: var(--accent-soft); color: var(--accent); }
.stop.is-done { opacity: 0.58; }
.stop.is-done h3 { text-decoration: line-through; text-decoration-thickness: 1px; }
.stop.is-now { border-color: var(--glow-strong); box-shadow: 0 0 0 3px var(--glow-soft); }
.stop.is-next { border-color: var(--accent); }

/* Prezzi */
.price { display: flex; gap: 8px; align-items: baseline; font-size: 0.9rem; font-weight: 700; color: var(--ink); background: var(--surface-2); border-radius: 10px; padding: 7px 10px; }
.price .eur { color: var(--teal); font-family: var(--font-display); font-weight: 800; }
.cost-totals { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 620px) { .cost-totals { grid-template-columns: repeat(4, 1fr); } }
.ct { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 14px; background: var(--bg); }
.ct-who { font-size: 0.8rem; color: var(--muted); font-weight: 700; }
.ct-sum { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; color: var(--accent); font-variant-numeric: tabular-nums; line-height: 1.1; }
.ct-sub { font-size: 0.76rem; color: var(--muted); }
.table-wrap { overflow-x: auto; margin: 0 -4px; }
table.costs { width: 100%; border-collapse: collapse; font-size: 0.86rem; font-variant-numeric: tabular-nums; min-width: 460px; }
table.costs th, table.costs td { padding: 8px 6px; text-align: right; border-bottom: 1px solid var(--line); vertical-align: top; }
table.costs thead th { font-size: 0.74rem; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
table.costs th[scope="row"], table.costs thead th:first-child { text-align: left; font-weight: 600; color: var(--ink); text-transform: none; letter-spacing: 0; font-size: 0.86rem; }
table.costs td.na { color: var(--muted); }
table.costs td.free { color: var(--teal); font-weight: 700; }
table.costs td.ask { color: var(--glow); font-weight: 700; font-size: 0.78rem; }
table.costs tfoot th, table.costs tfoot td { font-weight: 800; border-bottom: 0; border-top: 2px solid var(--ink); }
.cost-notes { margin: 0; padding-left: 18px; color: var(--muted); font-size: 0.86rem; display: flex; flex-direction: column; gap: 4px; }

/* Pasti da decidere */
.stop.meal { background: transparent; border: 2px dashed var(--line); }
.stop.meal.is-now { border-color: var(--glow-strong); }
.wip { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--glow); }
.wip .pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--glow-strong); }
@media (prefers-reduced-motion: no-preference) {
  .wip .pulse { animation: pulse 1.6s ease-in-out infinite; }
  @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.75); } }
}

.pill { display: inline-flex; align-items: center; font-size: 0.78rem; font-weight: 700; padding: 3px 9px; border-radius: 99px; white-space: nowrap; font-variant-numeric: tabular-nums; background: var(--accent-soft); color: var(--accent); }
.pill.done { background: var(--surface-2); color: var(--muted); }
.pill.now { background: var(--glow-soft); color: var(--glow); }
.tag { display: inline-flex; font-size: 0.76rem; font-weight: 700; padding: 3px 9px; border-radius: 99px; border: 1px solid var(--glow-strong); color: var(--glow); }
.tag.noi { border-color: transparent; background: var(--accent-soft); color: var(--accent); }
.tag.loro { border-color: transparent; background: var(--teal-soft); color: var(--teal); }

.daynav { display: flex; justify-content: space-between; gap: 10px; }
.navbtn { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; text-align: left; }
.navbtn.next { text-align: right; }
.navbtn small { color: var(--muted); font-size: 0.78rem; }
.navbtn strong { font-weight: 700; }
.navbtn[hidden] { display: block; visibility: hidden; }

/* Schede generiche */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.card h2 { font-size: 1.3rem; font-weight: 800; }
.progress-line { color: var(--muted); font-size: 0.92rem; }
.checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.check { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; padding: 10px 0; border-top: 1px solid var(--line); }
.check:first-child { border-top: 0; }
.check input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--accent); cursor: pointer; }
.check label { cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.check .what { font-weight: 700; }
.check .det { color: var(--muted); font-size: 0.92rem; }
.check .due { align-self: flex-start; font-size: 0.76rem; font-weight: 700; padding: 2px 8px; border-radius: 6px; background: var(--warn-soft); color: var(--warn); margin-top: 2px; }
.check.is-checked .what { text-decoration: line-through; color: var(--muted); }
.check.is-checked .due { display: none; }

.info { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 560px) { .info { grid-template-columns: 1fr 1fr; } }
.info > div { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 14px; background: var(--bg); border-top: 3px solid var(--accent); }
.info h3 { font-size: 1rem; font-weight: 600; }
.info p { font-size: 0.93rem; color: var(--muted); }
.info p strong { color: var(--ink); font-variant-numeric: tabular-nums; }

footer { display: flex; flex-direction: column; gap: 10px; color: var(--muted); font-size: 0.86rem; }
.sim { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sim input, .sim button { font: inherit; font-size: 0.88rem; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.sim button { cursor: pointer; font-weight: 700; }
.simnote { color: var(--glow); font-weight: 700; }

@media (min-width: 700px) {
  .hero { height: 460px; }
  .daycard { flex-basis: 260px; }
}
@media (prefers-reduced-motion: no-preference) {
  .topbar { transition: transform 0.25s ease; }
  .bar > span, .strip .done { transition: width 0.6s ease; }
  .day.swap { animation: fadein 0.25s ease; }
  @keyframes fadein { from { opacity: 0.3; transform: translateY(4px); } to { opacity: 1; transform: none; } }
}