/* Picker panel */
.panel { padding: 24px; min-width: 0; }
.panel h2 { font-size: 1.3rem; margin: 26px 0 12px; }
.panel h2:first-of-type { margin-top: 22px; }
.current { color: var(--ink); }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.step {
  display: block;
  padding: 0;
  margin: 0 0 10px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Messages */
.note {
  margin: 0 0 20px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--tan);
  border-radius: 8px;
  background: hsl(42 36% 96.5%);
  font-size: 0.95rem;
}

/* Length segmented control */
.seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  background: var(--beige);
  border-radius: 8px;
}
.seg span {
  display: block;
  padding: 8px 12px;
  text-align: center;
  border-radius: 6px;
  font-weight: 500;
  color: var(--brown);
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}
.seg span:hover { background: hsl(33 32% 84%); }
.seg input:checked + span {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 2px hsl(30 20% 20% / 0.08);
}

/* Time section and zone line */
.step-time { margin-top: 26px; scroll-margin-top: 16px; }
.zone { margin: 0 0 12px; font-size: 0.85rem; color: var(--muted); }

/* Zone switcher, built by book.js inside .zone (absent without JS) */
.tz-pick { position: relative; display: flex; align-items: center; }
.tz-pick select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  max-width: 380px;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink);
  padding: 8px 28px 8px 34px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  text-overflow: ellipsis;
  transition: border-color 150ms ease, background-color 150ms ease;
}
.tz-pick select:hover { background: hsl(33 32% 89% / 0.5); }
.tz-pick select:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.tz-pick svg {
  position: absolute;
  pointer-events: none;
  fill: none; stroke: var(--brown); stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.tz-pick .globe { left: 10px; width: 18px; height: 18px; }
.tz-pick .caret { left: min(calc(100% - 24px), 356px); width: 16px; height: 16px; }
.tz-note { display: block; margin: 2px 0 0 36px; font-size: 0.8rem; }

/* Day list: one <details name="days"> per day, an exclusive accordion without JS */
.days { border-top: 1px solid var(--line-soft); }
.days > p { padding: 14px 4px; color: var(--muted); }
.day { border-bottom: 1px solid var(--line-soft); }
.day summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 4px;
  cursor: pointer;
  border-radius: 6px;
}
.day summary::-webkit-details-marker { display: none; }
.day summary::after {
  content: "";
  flex: none;
  width: 7px; height: 7px;
  margin: 0 5px 0 2px;
  border-right: 1.75px solid var(--muted);
  border-bottom: 1.75px solid var(--muted);
  transform: rotate(-45deg);
  transition: transform 150ms ease;
}
.day[open] summary::after { transform: rotate(45deg); }
.day summary:hover .d { color: var(--brown); }
.day summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.d { font-family: var(--serif); font-weight: 700; font-size: 1.02rem; }
.n { margin-left: auto; font-size: 0.85rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.day:has(input:checked) .n { color: var(--brown); font-weight: 600; }
.day:has(input:checked) .n::before { content: "Selected · "; }
.day .slots { padding: 2px 0 16px; grid-template-columns: repeat(3, 1fr); }

/* Time buttons */
.slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
}
.slots span, .chips .t {
  display: block;
  padding: 9px 6px;
  text-align: center;
  font-size: 0.92rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
}
.slots span:hover, .chips .t:hover { border-color: var(--tan); }
.slots input:checked + span { background: var(--brown); border-color: var(--brown); color: var(--on-dark); }

/* The taken page's nearest open times: chips that pick a time in the list below, laid out like it */
.chips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 8px;
  margin: -8px 0 20px;
}
.chips[hidden], .chips .t[hidden] { display: none; }
/* with JS the chips are buttons (keyboard reachable); they keep the chip look, not the submit button's */
.chips button.t { margin: 0; width: 100%; min-width: 0; line-height: inherit; }
.chips button.t:hover { background: var(--surface); }

/* Focus ring for the visually hidden radios */
.sr:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }