:root{
  --bg:#0a0f2c;
  --bg-2:#141b46;
  --bg-3:#1c2456;
  --ink:#ffffff;
  --ink-muted:#ccd3f2;
  --gold:#f6e7a8;
  --gold-ink:#12173a;
  --line:#2c3570;
  --focus:#8fd0ff;
  --warn:#ffb4a2;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:400 clamp(1rem,0.95rem + 0.3vw,1.125rem)/1.6 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  min-height:100vh;
  padding:2rem 1rem 4rem;
}
.wrap{max-width:46rem;margin:0 auto}
.skip{
  position:absolute;left:-9999px;top:0;
  background:var(--gold);color:var(--gold-ink);
  padding:.75rem 1rem;border-radius:.5rem;font-weight:700;
}
.skip:focus{left:1rem;top:1rem;z-index:10}

h1{
  font-size:clamp(1.9rem,1.2rem + 3.2vw,3.25rem);
  line-height:1.15;margin:0 0 .25rem;text-align:center;font-weight:700;
  letter-spacing:-0.02em;
}
h1 .moon{font-size:.9em}
.tagline{text-align:center;color:var(--ink-muted);margin:0 0 2.5rem}

a{color:var(--gold)}
a:hover{color:#fff}
.home-link{
  display:inline-block;color:var(--gold);text-decoration:none;font-weight:600;
  margin-bottom:1.5rem;
}
.home-link:hover,.home-link:focus{text-decoration:underline}

.card{
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:1rem;
  padding:1.5rem;
  margin:0 0 1.25rem;
}
h2{font-size:1.4rem;margin:0 0 .35rem;color:var(--gold);line-height:1.25}
.hint{color:var(--ink-muted);margin:0 0 1.25rem;font-size:.95rem}

label{display:block;font-weight:600;margin:0 0 .5rem}

/* ---------- Time picker ---------- */
:root{--item-h:2.75rem;--wheel-h:13.75rem}

.picker{
  position:relative;display:flex;justify-content:center;gap:.25rem;
  height:var(--wheel-h);overflow:hidden;
  background:var(--bg-3);border:1px solid var(--line);border-radius:.75rem;
  padding:0 .5rem;
  /* Fade the top and bottom rows out, so the centre row reads as the selection */
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
}
/* The selection band */
.picker::after{
  content:"";position:absolute;left:.5rem;right:.5rem;top:50%;
  height:var(--item-h);transform:translateY(-50%);
  border-top:1px solid var(--gold);border-bottom:1px solid var(--gold);
  pointer-events:none;
}
.wheel{
  height:100%;flex:0 1 5.5rem;overflow-y:scroll;
  scroll-snap-type:y mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;-ms-overflow-style:none;
  border-radius:.5rem;
  touch-action:pan-y;
}
.wheel::-webkit-scrollbar{display:none}
.wheel:focus{outline:none}
.wheel:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
.wheel ul{list-style:none;margin:0;padding:0}
.wheel li{
  height:var(--item-h);line-height:var(--item-h);
  scroll-snap-align:center;scroll-snap-stop:always;
  font-size:1.4rem;font-variant-numeric:tabular-nums;
  color:var(--ink-muted);opacity:.5;text-align:center;cursor:pointer;
  transition:opacity .15s ease,color .15s ease;
}
.wheel li.spacer{height:calc((var(--wheel-h) - var(--item-h)) / 2);cursor:default}
.wheel li.is-selected{color:var(--ink);opacity:1;font-weight:700}
.picker-summary{
  text-align:center;color:var(--ink-muted);font-size:.95rem;margin:.85rem 0 0;
}
.picker-summary strong{color:var(--gold);font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){
  .wheel li{transition:none}
}
button{
  font:inherit;font-weight:700;cursor:pointer;
  width:100%;min-height:3.25rem;padding:.85rem 1.25rem;margin-top:1rem;
  background:var(--gold);color:var(--gold-ink);
  border:2px solid transparent;border-radius:.65rem;
}
button.secondary{background:transparent;color:var(--gold);border-color:var(--gold)}
button:hover{filter:brightness(1.08)}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}

#results{margin-top:2rem}
#results:focus{outline:none}
#results h2{font-size:1.6rem;margin-bottom:.5rem}
#results ul{list-style:none;margin:1.25rem 0 0;padding:0;display:grid;gap:.75rem;
   grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}
#results li{
  background:var(--bg-3);border:1px solid var(--line);border-radius:.75rem;
  padding:1rem 1.1rem;
}
#results li.best{border-color:var(--gold)}
.time{display:block;font-size:1.75rem;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.2}
.meta{display:block;color:var(--ink-muted);font-size:.9rem;margin-top:.15rem}
.tag{
  display:inline-block;margin-top:.5rem;padding:.15rem .5rem;border-radius:.35rem;
  background:var(--gold);color:var(--gold-ink);font-size:.75rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;
}
.note{color:var(--ink-muted);font-size:.95rem;margin:1.5rem 0 0}

/* ---------- Legal pages ---------- */
.legal h1{font-size:clamp(1.7rem,1.2rem + 2.2vw,2.5rem);text-align:left;margin-bottom:.5rem}
.legal .updated{color:var(--ink-muted);font-size:.9rem;margin:0 0 2rem}
.legal h2{font-size:1.3rem;margin:2.25rem 0 .75rem}
.legal h3{font-size:1.05rem;margin:1.5rem 0 .5rem;color:var(--ink)}
.legal p,.legal li{color:var(--ink-muted)}
.legal ul{padding-left:1.25rem;margin:.75rem 0}
.legal li{margin-bottom:.4rem}
.legal table{
  width:100%;border-collapse:collapse;margin:1rem 0;font-size:.95rem;
  background:var(--bg-2);border:1px solid var(--line);border-radius:.5rem;
}
.legal caption{text-align:left;color:var(--ink-muted);font-size:.9rem;padding-bottom:.5rem}
.legal th,.legal td{
  text-align:left;padding:.7rem .85rem;border-bottom:1px solid var(--line);
  color:var(--ink-muted);vertical-align:top;
}
.legal th{color:var(--ink);font-weight:700}
.legal tbody tr:last-child td{border-bottom:none}
.table-scroll{overflow-x:auto}

/* Unfilled placeholder — deliberately loud so it can't ship by accident */
.todo{
  background:#4a1f2b;color:var(--warn);padding:.05em .4em;border-radius:.25rem;
  font-weight:700;white-space:nowrap;
}

/* ---------- Footer ---------- */
footer{text-align:center;color:var(--ink-muted);font-size:.85rem;margin-top:3rem;
  border-top:1px solid var(--line);padding-top:1.5rem}
footer nav ul{
  list-style:none;margin:0 0 1rem;padding:0;
  display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:center;
}
footer nav a{color:var(--gold);text-decoration:none;padding:.35rem 0;display:inline-block}
footer nav a:hover,footer nav a:focus{text-decoration:underline;color:#fff}
footer nav [aria-current=page]{color:var(--ink);text-decoration:underline}

/* GTM's noscript fallback iframe — kept out of the layout without an inline style
   attribute, which a strict CSP would otherwise block. */
noscript iframe{display:none;visibility:hidden}

[hidden]{display:none !important}
@media (prefers-reduced-motion:no-preference){
  #results{scroll-behavior:smooth}
}