/* Ride check. Phone-first like the forecast page; palette, frame, buttons and the search
   sheet come from base.css. */

/* Destination and time together, both on screen from the start. Stacked on a phone rather
   than forced into two columns: at 375px a native datetime control and a place button each
   get about 170px, which is not enough for either. Side by side once there is room. */
.controls {
  display: grid;
  gap: 0.75rem;
}

/* Destination picker. A button rather than an input: the value is always chosen through
   the sheet (search, paste or GPS), never typed here. */
.destination {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  padding: 0.9rem 1rem;
  color: var(--text);
  cursor: pointer;
  min-height: 64px;
}

.destination:hover {
  border-color: var(--accent);
}

.destination-label {
  display: block;
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.02em;
}

.destination-sub {
  display: block;
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 0.25rem;
  font-variant-numeric: tabular-nums;
}

/* Shared by both fields, so the pair reads as one form rather than two unrelated widgets. */
.field-label {
  display: block;
  font-size: 0.78rem;
  color: var(--muted);
  margin-bottom: 0.35rem;
}

/* Stacked on a phone, the destination button already names itself ("Choose a destination",
   then the place), so this label is pure repetition -- and vertical space here comes
   straight out of the light below. It returns at 640px, where the two columns need
   symmetric headings to read as one row. */
.where .field-label {
  display: none;
}

.where,
.when {
  display: flex;
  flex-direction: column;
}

#ride-time {
  width: 100%;
  padding: 0.75rem;
  font-size: 1rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  /* Safari renders the native control light-on-light without this. */
  color-scheme: dark;
}

#ride-time:focus {
  outline: none;
  border-color: var(--accent);
}

/* Dimmed rather than hidden: the field is part of the question even before it can be
   answered, and seeing it locked explains why nothing has happened yet. */
#ride-time:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.when-note {
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 0.4rem;
}

/* Stoplight. Purely decorative -- the badge below it says the same thing in words. Which
   lamp settles lit comes from the verdict-* class on the card, so the markup is identical
   for all three answers and no JavaScript sets any state.

   On arrival the three lamps flick in order, then the answer lamp comes on and holds. Each
   verdict re-renders the card from scratch, which builds fresh elements and restarts these
   animations by itself. */
/* The hero: light and verdict word, sized so both clear the fold on a phone. Everything
   that explains the answer sits in the card below, deliberately past it. */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 1.5rem 0 0.5rem;
  text-align: center;
}

.stoplight {
  /* Sized against both viewport axes, because either one can be the binding constraint: vw
     keeps it from crowding a narrow screen, vh keeps a short phone from pushing the verdict
     word below the fold. Whichever is smaller wins.

     The 9vh is not arbitrary. Above the hero sit the nav header (~76px), the page header
     and both controls; on a 667px phone that leaves roughly 300px for the light and the
     word together. Raising it pushes the word off the bottom of an SE-sized screen --
     measured against a stand-in for the nav, not estimated. */
  --lamp: clamp(48px, min(28vw, 9vh), 100px);
  --housing-pad: 0.4rem;
  width: calc(var(--lamp) + 2 * var(--housing-pad));
  padding: var(--housing-pad);
  display: flex;
  flex-direction: column;
  gap: var(--housing-pad);
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: calc(var(--lamp) / 3);
}

.lamp {
  width: var(--lamp);
  height: var(--lamp);
  border-radius: 50%;
  /* currentColor drives the fill and the glow together, so each lamp sets one property. */
  background: currentColor;
  opacity: 0.15;
  animation: lamp-blink 0.16s ease-out var(--sweep) both;
}

/* The same tokens the badge uses, so the light and the word cannot drift apart. */
.lamp-red {
  color: var(--danger);
  --sweep: 0s;
}

.lamp-amber {
  color: var(--accent);
  --sweep: 0.16s;
}

.lamp-green {
  color: var(--safe);
  --sweep: 0.32s;
}

/* The answer lamp gets a second, later animation. The sweep ends at 0.48s and its `both`
   fill holds every lamp dim; lamp-on starts at 0.52s and, listed second, takes over from
   there and stays. The 40ms between them reads as a beat rather than a glitch. */
.verdict-no-go .lamp-red,
.verdict-caution .lamp-amber,
.verdict-go .lamp-green {
  animation:
    lamp-blink 0.16s ease-out var(--sweep) both,
    lamp-on 0.2s ease-out 0.52s forwards;
}

/* Waiting for an hour. Dim and deliberately still: the sweep is the sound of an answer
   arriving, so it must not play when there is no answer to arrive. */
.verdict-idle .lamp {
  animation: none;
}

/* Glow scales off the lamp, so a big phone light and a trimmed desktop one look the same. */
@keyframes lamp-blink {
  0%, 100% { opacity: 0.15; box-shadow: none; }
  50% { opacity: 1; box-shadow: 0 0 calc(var(--lamp) / 5) calc(var(--lamp) / 40) currentColor; }
}

@keyframes lamp-on {
  to { opacity: 1; box-shadow: 0 0 calc(var(--lamp) / 4) calc(var(--lamp) / 24) currentColor; }
}

/* Still answer the question, just without the theatre. */
@media (prefers-reduced-motion: reduce) {
  .lamp,
  .verdict-no-go .lamp-red,
  .verdict-caution .lamp-amber,
  .verdict-go .lamp-green {
    animation: none;
  }

  .verdict-no-go .lamp-red,
  .verdict-caution .lamp-amber,
  .verdict-go .lamp-green {
    opacity: 1;
    box-shadow: 0 0 calc(var(--lamp) / 4) calc(var(--lamp) / 24) currentColor;
  }
}

/* Styleless wrapper. It exists only to hold the verdict-* class above both the hero and the
   card, so one class drives the lamp, the word and the card's edge. */
.verdict {
  margin-top: 0.5rem;
}

/* The explanation. Below the fold on a phone by design -- the light answered the question,
   this is for when you want the why. */
.verdict-detail {
  background: var(--card);
  border-radius: 0.9rem;
  border-left: 4px solid var(--muted);
  padding: 1rem;
  margin-top: 1rem;
}

.verdict-go .verdict-detail {
  border-left-color: var(--safe);
}

.verdict-caution .verdict-detail {
  border-left-color: var(--accent);
}

.verdict-no-go .verdict-detail {
  border-left-color: var(--danger);
}

/* The word, because colour alone is not an answer for everyone. Sized against the viewport
   like the light above it, so the pair scales together. */
.verdict-badge {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 9vw, 2.6rem);
  line-height: 1.05;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.verdict-go .verdict-badge {
  color: var(--safe);
}

.verdict-caution .verdict-badge {
  color: var(--accent);
}

.verdict-no-go .verdict-badge {
  color: var(--danger);
}

.verdict-headline {
  font-size: 1.05rem;
  color: var(--muted);
}

/* First child of the card, which already has padding. */
.verdict-when {
  font-size: 0.85rem;
  color: var(--text);
}

.verdict-reason {
  font-size: 0.9rem;
  line-height: 1.45;
  margin-top: 0.4rem;
}

.verdict-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
}

.verdict-numbers dt {
  font-size: 0.7rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.verdict-numbers dd {
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  margin-top: 0.1rem;
}

/* Provenance. Always present: which model answered is part of the answer, especially past
   48h where the only model left is the coarse one. */
.verdict-source {
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 0.9rem;
  font-variant-numeric: tabular-nums;
}

.verdict-source .coarse {
  color: var(--accent);
}

/* Band table */
.bands {
  margin-top: 1.25rem;
  background: var(--card);
  border-radius: 0.9rem;
  padding: 0.75rem 1rem;
}

.bands[hidden] {
  display: none;
}

.bands summary {
  font-size: 0.85rem;
  color: var(--muted);
  cursor: pointer;
}

.bands-body {
  margin-top: 0.75rem;
}

.bands-intro {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.45;
}

.bands-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.75rem 0;
  font-size: 0.82rem;
}

.bands-table th {
  text-align: left;
  font-size: 0.7rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-bottom: 0.35rem;
}

.bands-table td {
  padding: 0.4rem 0;
  border-top: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}

.bands-table .band-go {
  color: var(--safe);
}

.bands-table .band-caution {
  color: var(--accent);
}

.bands-table .band-no-go {
  color: var(--danger);
}

/* The layout is tuned for a phone held in one hand. On anything wider the light has no
   viewport to scale against and would just float in a large empty band, so pin it to a
   fixed size and let the hero settle rather than grow. */
@media (min-width: 640px) {
  /* Room for both fields on one row now. */
  .controls {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }

  /* Both columns get a heading, so the row reads as one form. */
  .where .field-label {
    display: block;
  }

  /* Matched to .destination so the two controls are the same size side by side. Only here:
     on a phone those 17px come out of the light. */
  #ride-time {
    min-height: 64px;
  }

  .stoplight {
    --lamp: 56px;
  }

  .hero {
    padding: 1rem 0 0.5rem;
  }
}