:root {
  --bg: #fdfcf9;
  --ink: #23222b;
  --accent: #e4572e;      /* check + ring color */
  --accent-soft: #ffe8df;
  --line: #e5e2da;
  --ok: #2e933c;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #17161d; --ink: #eceaf2; --accent: #ff7a4d; --accent-soft: #3a2a24; --line: #2c2a34; }
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.45 -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
}
main { max-width: 640px; margin: 0 auto; padding: 0 1rem 3rem; }

/* Header + ring */
.park-header { position: sticky; top: 0; background: var(--bg); padding: .75rem 0 .5rem; z-index: 10; border-bottom: 1px solid var(--line); }
.park-header h1 { font-size: 1.3rem; margin: 0 0 .25rem; }
.crumb { font-size: .8rem; color: var(--accent); text-decoration: none; }
.ring-wrap { display: flex; align-items: center; gap: .75rem; }
.ring { width: 84px; height: 84px; }
.ring circle { fill: none; stroke-width: 10; }
.ring-bg { stroke: var(--line); }
.ring-fg {
  stroke: var(--accent); stroke-linecap: round;
  stroke-dasharray: 339.292;
  stroke-dashoffset: calc(339.292 * (1 - var(--p, 0) / 100));
  transform: rotate(-90deg); transform-origin: 60px 60px;
  transition: stroke-dashoffset .6s cubic-bezier(.22, 1, .36, 1);
}
.ring-text { font-size: 26px; font-weight: 700; fill: var(--ink); }
.today-line { margin: 0; font-weight: 600; color: var(--ok); }

/* Chips + search */
.chips { display: flex; gap: .4rem; overflow-x: auto; padding: .5rem 0; }
.chips button { border: 1px solid var(--line); background: transparent; color: var(--ink); border-radius: 999px; padding: .3rem .9rem; font-size: .9rem; }
.chips button.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
#search { width: 100%; padding: .5rem .75rem; border: 1px solid var(--line); border-radius: .5rem; background: transparent; color: var(--ink); }

/* Areas + rows */
.area summary { list-style: none; cursor: pointer; padding: .75rem 0 .25rem; }
.area summary h2 { display: inline; font-size: 1.05rem; }
.exp-list { list-style: none; margin: 0; padding: 0; }
.exp { display: flex; gap: .75rem; align-items: flex-start; padding: .6rem 0; border-bottom: 1px solid var(--line); }
.checkbox {
  width: 44px; height: 44px; flex: none;               /* HIG-size touch target */
  border: 2px solid var(--accent); border-radius: 12px; background: transparent;
  font-size: 1.4rem; color: #fff; line-height: 1;
  touch-action: manipulation;  /* immediate taps on iOS — no double-tap-zoom wait */
}
.chips button, .undo, .area summary, .exp-blurb summary { touch-action: manipulation; }
/* Past-day check: faded fill. Today's check (row.is-today): full accent. */
.checkbox.is-checked {
  background: color-mix(in srgb, var(--accent) 40%, var(--bg));
  border-color: color-mix(in srgb, var(--accent) 55%, var(--bg));
  animation: pop .3s cubic-bezier(.22, 1.61, .36, 1);
}
.exp.is-today .checkbox.is-checked { background: var(--accent); border-color: var(--accent); }
@keyframes pop { 0% { transform: scale(.7); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
.exp-name { font-weight: 600; }
.dot-today { display: inline-block; width: 8px; height: 8px; margin-left: .4rem; border-radius: 50%; background: var(--ok); }
.exp-blurb summary { font-size: .8rem; color: var(--accent); cursor: pointer; }
.exp-blurb p { margin: .25rem 0 0; font-size: .9rem; }
.undo { border: none; background: none; color: var(--ink); opacity: .6; font-size: .8rem; text-decoration: underline; padding: 0; }

/* Kind filtering — CSS only, driven by data-filter on #checklist */
#checklist[data-filter="ride"] .exp:not([data-kind="ride"]),
#checklist[data-filter="show"] .exp:not([data-kind="show"]),
#checklist[data-filter="dining"] .exp:not([data-kind="dining"]),
#checklist[data-filter="shop"] .exp:not([data-kind="shop"]) { display: none; }

/* Stats page */
.bar { background: var(--accent-soft); border-radius: .4rem; height: 1.4rem; position: relative; overflow: hidden; margin: .25rem 0 .75rem; }
.bar-fill { position: absolute; inset: 0 auto 0 0; width: calc(var(--p, 0) * 1%); background: var(--accent); border-radius: .4rem; }
.bar-label { position: relative; z-index: 1; padding: 0 .5rem; font-size: .85rem; line-height: 1.4rem; font-weight: 600; }
.area-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .5rem; list-style: none; padding: 0; }
.area-grid li { border: 1px solid var(--line); border-radius: .5rem; padding: .5rem; }
.area-grid .done { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }

/* Footer, cards, misc */
.site-footer { max-width: 640px; margin: 2rem auto 0; padding: 1rem; font-size: .78rem; opacity: .7; border-top: 1px solid var(--line); }
.park-card { display: block; border: 1px solid var(--line); border-radius: .75rem; padding: 1rem; margin: .75rem 0; text-decoration: none; color: inherit; }
.park-card h2 { margin: 0 0 .25rem; }
.stats-link { text-align: center; margin-top: 1.5rem; }
.qr { max-width: 220px; }
.link-code { font-size: 2rem; letter-spacing: .3em; font-weight: 700; }
.danger { color: #c0392b; }