body[data-zone="dates"] {
  background:
    radial-gradient(circle at top right, rgba(196, 71, 43, 0.16), transparent 50%),
    radial-gradient(circle at bottom left, rgba(224, 168, 46, 0.12), transparent 50%),
    var(--paper) var(--grain);
}

/* The plan reads as an itinerary: numbered stops down the page, in order. */
.steps { list-style: none; margin: 10px 0 0; padding: 0; }
.step {
  display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start;
  padding: 14px 0; border-top: 1px solid var(--line);
}
.step:first-child { border-top: 0; padding-top: 4px; }
.step.loading { grid-template-columns: 1fr; }
/* A note rather than a numbered step: no .step-n, so without this its text
   lands in the 40px number column and wraps one word per line. That is what
   free mode looked like whenever the city was busy but nothing was priced at
   zero — which is most nights. */
.step.aside { grid-template-columns: 1fr; }

.step-n {
  display: grid; place-items: center; width: 34px; height: 34px;
  font-family: var(--font-display); font-weight: 900; font-size: 18px;
  background: var(--gold, #e0a82e); color: var(--ink);
  border: 2px solid var(--ink); border-radius: 50%; box-shadow: 2px 2px 0 var(--ink);
}
.step-label {
  display: block; font-family: var(--font-body); font-weight: 700; font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 2px;
}
.step-title {
  display: block; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(20px, 4.5vw, 26px); line-height: 1.12; color: var(--ink); text-decoration: none;
}
/* The rule has to hug the words. The title is display:block, so a border on
   it ran the full width of the column — a 900px underline under "You won't be
   paying" reads as a divider, not as a link. */
a.step-title { display: inline; border-bottom: 2px solid var(--red); }
a.step-title:hover { color: var(--red-ink); }
.step p { margin: 4px 0 0; }

.plan .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.sources li { margin: 8px 0; }

@media (max-width: 720px) {
  .step { grid-template-columns: 30px 1fr; gap: 10px; }
  .step-n { width: 28px; height: 28px; font-size: 15px; }
  .plan .actions .btn { flex: 1 1 0; justify-content: center; }
}

/* ---- modes ---- */
.modes { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.modes .chip { cursor: pointer; }
.modes .chip[aria-pressed="true"] { background: var(--card-tint); color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.modes .veto-toggle { margin-left: auto; }

/* ---- veto: three nights, one survivor ---- */
.veto-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin: 12px 0 4px; }
.veto-opt {
  display: flex; flex-direction: column; gap: 6px; padding: 14px;
  border: 2px solid var(--ink); border-radius: 16px 8px 18px 10px / 10px 18px 8px 16px;
  background: color-mix(in srgb, var(--card-tint) 8%, var(--paper-2));
  box-shadow: 3px 3px 0 var(--ink);
  animation: veto-in .3s var(--spring) backwards;
}
.veto-opt b { font-size: clamp(17px, 3.6vw, 21px); line-height: 1.15; }
.veto-opt p { margin: 0; flex: 1; }
.veto-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.btn.small { padding: 5px 11px; font-size: 13px; min-height: 0; }
@keyframes veto-in { from { opacity: 0; transform: translateY(8px) rotate(-1deg); } }

/* ---- been there ---- */
.been { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.been .chip { cursor: pointer; }
.been .chip:hover { background: var(--red); color: #fff8ec; }

/* ---- did you go ---- */
.went .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

@media (max-width: 720px) {
  .modes .veto-toggle { margin-left: 0; }
  .veto-actions .btn { flex: 1 1 0; justify-content: center; }
  .went .actions .btn { flex: 1 1 0; justify-content: center; }
}

/* The idea of the day. A rule down the left rather than a coloured panel:
   this is a caption on the plan, not an alert about it. */
.theme {
  margin: 0 0 16px; padding: 2px 0 2px 14px; border-left: 4px solid var(--zone);
  font-family: var(--font-hand); font-size: 20px; line-height: 1.3; color: var(--muted);
}
.theme strong { font-family: var(--font-body); font-weight: 700; color: var(--ink); display: block; font-size: 18px; }

/* ---- plan a different night ----
   A fold, not a panel with a fold inside it.

   Every other card on the site wears its <h2> as a pill pulled 26px ABOVE the
   card's own top edge. That works for a panel with content under it. On a
   closed <details> it left the title hovering over the card while the card
   itself stayed open to its full padded height — a long empty band with a
   lone chevron parked at the right-hand end, which read as a panel that had
   failed to load rather than one you could open.

   So when this is shut, the summary IS the card: one row, the label, what the
   plan is currently for, and a chevron, with no body under it at all. */
.when-fold { padding: 0; overflow: hidden; }
/* The grout seam runs along the top of every panel. Here the summary occupies
   that strip, and a dotted rule behind a row of type is just noise. */
.when-fold::before { display: none; }

.when-fold > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px;
  padding: 13px 18px; margin: 0; min-height: 52px;
  transition: background .15s;
}
.when-fold > summary::-webkit-details-marker { display: none; }
.when-fold > summary:hover { background: color-mix(in srgb, var(--zone) 8%, transparent); }

/* The pill sits IN the row rather than above the card. Its negative margin and
   the hover-scale that the generic rule gives it are both wrong here: one puts
   it outside the box, the other makes a 52px row jump every time the pointer
   crosses it. */
.when-fold > summary h2 {
  margin: 0; flex: 0 0 auto; white-space: nowrap; transform: rotate(-1.5deg);
}
.when-fold:hover > summary h2, .when-fold > summary:hover h2 { transform: rotate(-3deg); }

/* What the plan is currently for, so a page showing Saturday afternoon cannot
   look like a page showing tonight. */
.when-fold summary em {
  font-style: normal; color: var(--muted); font-size: 14px; margin-right: auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.when-fold.custom summary em { color: var(--zone); font-weight: 700; }
/* Shut and on tonight's default, the row would be a label and a chevron with
   30rem of nothing between them. A hint fills it with something worth reading. */
.when-fold:not([open]):not(.custom) summary em::after {
  content: "Tonight at eight — tap to pick another day or time";
}
.when-fold[open] summary em::after { content: none; }

.when-fold > summary::after {
  content: "▸"; margin-left: auto; font-size: 18px; color: var(--muted);
  flex: 0 0 auto; transition: transform .25s var(--spring);
}
.when-fold.custom > summary::after,
.when-fold:not([open]):not(.custom) > summary::after { margin-left: 10px; }
.when-fold[open] > summary::after { transform: rotate(90deg); }

/* Open: the form, inside the card's padding, with a hairline under the row it
   belongs to so the two parts read as one panel. */
.when-form {
  display: grid; gap: 14px; padding: 16px 18px 18px;
  border-top: 1px solid var(--line);
  animation: when-open .28s var(--spring);
}
@keyframes when-open { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) {
  .when-form { animation: none; }
  .when-fold > summary::after { transition: none; }
}
.when-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.when-row label {
  font-family: var(--font-body); font-weight: 700; font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); min-width: 52px;
}
.when-row input[type="date"], .when-row select { font: inherit; font-size: 17px; flex: 1 1 160px; min-width: 0; }
.when-actions { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 720px) {
  /* The label pill and the "what this plan is for" line will not share a row
     at 390px: the line gets about four characters and an ellipsis. The line
     drops underneath instead, where it has the full width. */
  .when-fold > summary { padding: 12px 14px; flex-wrap: wrap; row-gap: 5px; }
  .when-fold > summary h2 { flex: 1 1 auto; }
  .when-fold > summary::after { order: 2; margin-left: auto; }
  .when-fold summary em { order: 3; flex: 0 0 100%; margin: 0; white-space: normal; overflow: visible; }
  .when-fold:not([open]):not(.custom) summary em::after { content: "Tonight at eight — tap to pick another day or time"; }
  .when-form { padding: 14px 14px 16px; }
  .when-actions .btn { flex: 1 1 0; justify-content: center; }
}

/* The skeleton rows borrow the step grid so the shape that loads is the shape
   that arrives — same 40px number column, same rule between rows. */
.step.skel-step { align-items: center; }
.step.skel-step .skel.line { display: block; }
.step.skel-step .skel.dot { width: 34px; height: 34px; }
.veto-opt .skel.line { display: block; }
@media (max-width: 720px) { .step.skel-step .skel.dot { width: 28px; height: 28px; } }