:root {
  --bg: #2b3038;
  --ink: #ffffff;
  --tint: rgba(255, 255, 255, 0.12);
  --tint-strong: rgba(255, 255, 255, 0.18);
  --rule: rgba(255, 255, 255, 0.22);

  --state-open: #198141;
  --state-soon: #9a6700;
  --state-ticket: #0b5394;
  --state-closed: #9c1d14;
  --state-loading: #2b3038;

  color-scheme: light dark;
}

body.state-open     { --bg: var(--state-open); }
body.state-soon     { --bg: var(--state-soon); }
body.state-ticket   { --bg: var(--state-ticket); }
body.state-closed   { --bg: var(--state-closed); }
body.state-loading  { --bg: var(--state-loading); }

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.45;
  transition: background-color 240ms ease;
}

/* The full-screen picker is open: keep the page behind it from scrolling. */
body.picker-open { overflow: hidden; }

button { font: inherit; color: inherit; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* --- page ----------------------------------------------------------------- */

/* The question, the answer and the nearby places form one group, a little
   above the middle of the screen, with "Made for the swimmers of London" at
   the bottom. The spacing inside the group grows a little with screen height
   but is capped, so on big screens the group stays together rather than
   spreading out. If the group is taller than the screen (small phones, long
   nearby lists) the page simply scrolls. */
main {
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  max-width: 90rem;
  margin-inline: auto;
  padding: clamp(1.25rem, 4vh, 2.5rem) clamp(1.375rem, 5vw, 4.5rem) clamp(1rem, 2.5vh, 1.5rem);
  display: flex;
  flex-direction: column;
  text-align: center;
}

/* Spare height is shared above and below the group in the golden ratio
   (1 : 1.618), which lifts the group a little above the middle. With no spare
   height both spaces shrink to nothing, so they never push the footer off a
   screen it would otherwise fit on. */
main::before { content: ''; flex: 1 0 0; }
main::after { content: ''; flex: 1.618 0 0; order: 1; }
footer { order: 2; }

.group {
  /* The spacing inside the group follows the golden ratio too: the gap from
     the question to the answer is --gap, and from the answer to the nearby
     list it's --gap × φ (1.618). --gap grows on roomy screens (media query
     below). */
  --gap: clamp(1.25rem, 4vh, 3rem);
  --phi: 1.618;
  --where-size: clamp(0.9375rem, 0.85rem + 0.35vw, 1.125rem);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Phone: the question stacks over three centred lines. Wider screens: one line. */
.question {
  font-size: clamp(1.5625rem, 1rem + 1.7vw, 2.5rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
}

/* The pond name reads as part of the sentence with a dashed underline. The
   padding above it matches the underline's space below, so the words stay on
   the same line as the rest of the question when it sits in a row. */
.venue-button {
  font-weight: 800;
  letter-spacing: inherit;
  line-height: inherit;
  background: transparent;
  border: 0;
  border-bottom: 3px dashed currentColor;
  border-radius: 0.2em 0.2em 0 0;
  padding: 7px 0.15em 4px;
  margin: 0 -0.15em;
  cursor: pointer;
  transition: background-color 160ms ease;
}

.venue-button:hover { background: rgba(255, 255, 255, 0.10); }
.venue-button:focus-visible { outline: none; background: rgba(255, 255, 255, 0.16); border-bottom-style: solid; }


.answer {
  margin-top: var(--gap);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.verdict {
  font-size: clamp(5rem, min(40vw, 30vh), 17.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.05em;
  margin: 0 0 0.875rem;
}

/* "Hurry" is wider than "Yes" or "No"; "Yes, with a ticket" wraps to two lines. */
.verdict.mid  { font-size: clamp(4rem, min(30vw, 30vh), 17.5rem); margin: 0 0 1.375rem; }
.verdict.long {
  font-size: clamp(2.75rem, min(16vw, 17vh), 9.5rem);
  letter-spacing: -0.03em;
  line-height: 1.02;
  margin: 0 0 1.25rem;
  text-wrap: balance;
}

/* The countdown reads as the next sentence of the detail, in the same style. */
.detail,
.countdown {
  font-size: clamp(1.1875rem, 1rem + 0.9vw, 1.75rem);
  margin: 0 auto;
  max-width: 16em;
  text-wrap: balance;
}

.countdown { margin-top: 0.35em; }

.countdown:empty, .action:empty { display: none; }

/* "0.2 mi away" under the times, when the page is showing the
   spot nearest the visitor. */
.where {
  display: flex;
  align-items: center;
  gap: 0.45em;
  margin: 0.75rem 0 0;
  font-size: var(--where-size);
  line-height: 1.45;
  font-weight: 600;
  opacity: 0.92;
}

.where[hidden] { display: none; }

.locate-icon { flex: none; width: 0.85em; height: 0.85em; }

.action { margin: 1.25rem 0 0; }

.action a {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  color: inherit;
  background: var(--tint-strong);
  border: 2px solid currentColor;
  border-radius: 999px;
  padding: 0.6rem 1.4rem;
  font-weight: 700;
  font-size: clamp(0.9375rem, 0.8rem + 0.5vw, 1.25rem);
  text-decoration: none;
}

.action a:hover, .action a:focus-visible { background: rgba(255, 255, 255, 0.32); }

/* --- also nearby -------------------------------------------------------- */

/* The last part of the group, left-aligned, a golden-ratio step further
   from the answer than the answer is from the question. */
.nearby {
  margin-top: calc(var(--gap) * var(--phi));
  width: 100%;
  max-width: 71.25rem;
  text-align: left;
}

/* The "0.2 mi away" line takes its room from this gap rather than adding
   to it, so the nearby list sits in the same place whichever way the spot was
   chosen. The gap never gets smaller than the one above the answer. */
.answer:has(> .where:not([hidden])) + .nearby {
  margin-top: max(var(--gap), var(--gap) * var(--phi) - 0.75rem - 1.45 * var(--where-size));
}

.nearby h2 {
  font-size: 0.8125rem;
  font-weight: 600;
  opacity: 0.85;
  margin: 0 0 0.75rem;
}

.nearby-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: 0.5rem 0.75rem;
}

.near-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  background: var(--tint);
  border: 0;
  border-radius: 12px;
  padding: 0.75rem 0.875rem;
  font-size: 0.9375rem;
  text-align: left;
  cursor: pointer;
}

.near-row:hover { background: var(--tint-strong); }

.near-name { flex: 1; font-weight: 600; }

.near-dist {
  font-size: 0.8125rem;
  opacity: 0.85;
  min-width: 2.75rem;
  text-align: right;
}

.status-pill {
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.25rem 0.5625rem;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  white-space: nowrap;
}

.status-pill.state-open,   .status-dot.state-open   { background: var(--state-open); }
.status-pill.state-soon,   .status-dot.state-soon   { background: var(--state-soon); }
.status-pill.state-ticket, .status-dot.state-ticket { background: var(--state-ticket); }
.status-pill.state-closed, .status-dot.state-closed { background: var(--state-closed); }

footer {
  font-size: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  line-height: 1.5;
  opacity: 0.8;
  margin-top: clamp(1.5rem, 4vh, 3rem);
}

footer p { margin: 0 auto; max-width: 58em; }
footer a { color: inherit; }

/* --- full-screen picker ------------------------------------------------- */

.picker {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--bg);
  color: var(--ink);
  overflow-y: auto;
}

.picker::backdrop { background: var(--bg); }

.picker-inner {
  width: 100%;
  max-width: 90rem;
  margin-inline: auto;
  padding: clamp(1.5rem, 4vh, 2.5rem) clamp(1.375rem, 5vw, 4.5rem) 2rem;
}

.picker-top { display: flex; justify-content: flex-end; margin-bottom: 0.25rem; }

.pill-button {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background: transparent;
  border: 2px solid currentColor;
  border-radius: 999px;
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
}

.pill-button:hover { background: var(--tint); }

/* The pond name's place in the question becomes the search field. */
.picker-question {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.375rem;
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0.25rem 0 0.125rem;
}

.search {
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-bottom: 3px dashed currentColor;
  padding: 7px 0 4px;
  font-size: clamp(1.625rem, 1rem + 1.8vw, 2.625rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.search:focus-within { border-bottom-style: solid; }

.search-icon { flex: none; width: 0.75em; height: 0.75em; }

.search input {
  flex: 1;
  min-width: 0;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  caret-color: currentColor;
  background: transparent;
  border: 0;
  padding: 0;
  outline: none;
  appearance: none;
}

.search input::placeholder { color: inherit; opacity: 0.55; }
.search input::-webkit-search-cancel-button { appearance: none; }

.picker-meta {
  font-size: 0.8125rem;
  font-weight: 600;
  opacity: 0.9;
  margin: 0.875rem 0 0.125rem;
}

/* "All places", between "Nearest to me" and the list. */
.list-label {
  font-size: 0.8125rem;
  font-weight: 600;
  opacity: 0.85;
  margin: 1.1rem 0 0.1rem;
}

/* "Nearest to me" before we know where the visitor is. */
.nearest-entry.off .pick-name { opacity: 0.6; }

.picker-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 4.5rem;
}

.pick-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.875rem;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  padding: 0.875rem 0;
  text-align: left;
  cursor: pointer;
}

.pick-item:hover .pick-name, .pick-item:focus-visible .pick-name { text-decoration: underline; text-underline-offset: 0.12em; }
.pick-item:focus-visible { outline-offset: 2px; }

.pick-text { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.pick-name {
  font-size: clamp(1.625rem, 1rem + 1.8vw, 2.625rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

/* The current choice keeps the dashed underline it has on the main page.
   text-decoration (not a border) so it follows the words if the name wraps. */
.pick-item[aria-current="true"] .pick-name span {
  text-decoration: underline dashed;
  text-decoration-thickness: 3px;
  text-underline-offset: 0.2em;
}

.pick-name mark {
  background: none;
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 0.18em;
}

.pick-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: clamp(0.875rem, 0.8rem + 0.25vw, 1rem);
  margin-top: 0.375rem;
  opacity: 0.92;
}

.status-dot {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
}

.picker-empty { font-size: 1.125rem; padding: 1.5rem 0; margin: 0; }

.pick-tick { flex: none; width: 1.25rem; height: 1.25rem; }



/* --- wider screens -------------------------------------------------------- */

/* Screens with room to spare: a bigger --gap that grows quickly with screen
   height. Question-to-answer / answer-to-nearby come to about 54 / 88px on a
   900px-tall laptop, 73 / 118px at 1080px and 111 / 180px on the biggest
   screens. */
@media (min-width: 760px) and (min-height: 820px) {
  .group { --gap: clamp(2rem, 10.5vh - 2.5rem, 7rem); }
}

@media (min-width: 760px) {
  .question {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    column-gap: 0.35em;
  }

  .detail, .countdown { max-width: 23em; }


  .picker-question {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 0.35em;
    font-size: clamp(1.5625rem, 1rem + 1.7vw, 2.5rem);
    margin: 0.5rem 0 0.25rem;
  }

  .search { align-self: auto; flex: 0 1 14em; font-size: inherit; }

  .picker-meta { font-size: 0.9375rem; margin-top: 1.375rem; }

  .picker-list { grid-template-columns: 1fr 1fr; }

  .pick-item { padding: 1.25rem 0; }

}

@media (prefers-reduced-motion: reduce) {
  body, .venue-button { transition: none; }
}