/* Guided run-of-show builder (host intake).
   --------------------------------------------------------------------------
   Scoped to the intake pages and loaded only from their {% block head_extra %}.
   app.css is NOT edited by this feature, and nothing in here may touch the
   compact phone header: no .topnav/.topbar/.nav-* selector, no bare element
   selector, no position:fixed, and no z-index above 60 (the clips preview
   layer). A static test pins all of that.

   Every colour is an existing :root token from app.css — no new palette. The
   three button states map onto the app's non-red semantics, because red is
   already spoken for: --prefill-red means "suggested from your last submission,
   not yet confirmed" and the RED confirm gate lives two sections up this very
   page. The owner's "inverse colouring" is expressed as solid fill vs hollow
   outline instead:
       filled            solid  --success   (same as .btn-success)
       empty + required  hollow --warn      (same family as .pill-amber)
       empty + optional  resting chrome     (same as the base .btn)
   ========================================================================== */

.timeline-builder { margin-top: 12px; }

.timeline-lede {
  color: var(--muted); font-size: 13px; margin: 0 0 12px; line-height: 1.5;
}
.timeline-lede strong { color: var(--text); }

.timegroups { display: flex; flex-direction: column; gap: 10px; }
.timegroup { margin: 0; }

/* ---------------------------------------------------------- summary button */

/* PLAN 94 sweep: `flex-wrap` and a value that may shrink. The row had neither, and
   `.timebtn-value` was `white-space: nowrap`, so a long answer — "Venue limit — 250
   (Main Warehouse)", or plan 93's "GA + VIP + Tables" — pushed the caret 13px past a
   390px viewport and gave the whole page a horizontal scrollbar. Text inside a flex
   row must wrap (lama-ui/text-mobile); this control predated the rule. */
.timebtn {
  display: flex; align-items: center; gap: 10px; width: 100%; flex-wrap: wrap;
  min-height: 48px; padding: 8px 14px; border-radius: var(--radius);
  font-size: 15px; font-weight: 600; text-align: left; cursor: pointer;
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border);
}
.timebtn-label { flex: 1 1 auto; min-width: 0; }
.timebtn-value { font-weight: 800; min-width: 0; overflow-wrap: anywhere; }
.timebtn-state {
  font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  white-space: nowrap; opacity: 0.85;
}
.timebtn-caret { transition: transform 120ms ease; font-size: 12px; }
.timebtn[aria-expanded="true"] .timebtn-caret { transform: rotate(180deg); }
.timebtn:hover { filter: brightness(1.12); }
.timebtn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* (a) we have a value */
.timebtn.is-filled {
  background: var(--success); border-color: var(--success); color: #042417;
}
/* (b) empty and required — the inverse/hollow state */
.timebtn.is-required {
  background: transparent; border: 2px solid var(--warn); color: var(--warn);
}
/* (c) empty and optional */
.timebtn.is-optional {
  background: var(--surface-2); border: 1px solid var(--border); color: var(--muted);
}
/* (d) this group failed validation. It must beat is-filled outright: red text on
   the solid green fill is unreadable, and "we have a value" is no longer true. */
.timebtn.is-error, .timebtn.is-filled.is-error {
  background: transparent; border: 2px solid var(--error); color: var(--error);
}
/* the next still-empty required question (never auto-opened) */
.timebtn.is-next { box-shadow: 0 0 0 2px var(--primary); }
.timebtn.is-inferred .timebtn-value::after { content: " ~"; opacity: 0.7; }

.timegroup-hint {
  color: var(--primary); font-size: 12px; font-weight: 700; margin: 4px 0 0;
}

/* ---------------------------------------------------------------- options */

.timeopts {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 10px; margin-top: 6px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius);
}
.timeopt {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 64px; margin: 0; padding: 6px 14px;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface-2); color: var(--text);
  font-size: 14px; font-weight: 600; cursor: pointer;
}
.timeopt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.timeopt:hover { border-color: var(--primary); }
.timeopt:has(input:checked) {
  background: var(--success); border-color: var(--success); color: #042417;
}
.timeopt:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }

/* These carry a `display`, so the UA's [hidden] rule loses to them — say it here
   or the disclosure never actually closes. */
.timeopts[hidden], .timeopt-otherwrap[hidden], .timeopt-other[hidden],
.timeline-fold[hidden], .timeline-preview-empty[hidden] { display: none; }

.timeopt-otherwrap { display: inline-flex; align-items: center; gap: 6px; }
.timeopt-other { width: 110px; min-height: 44px; }
.timeopt-unit { color: var(--muted); font-size: 13px; }
.timeopt-hint {
  flex: 1 0 100%; color: var(--muted); font-size: 12px; margin: 2px 0 0; line-height: 1.45;
}

.timeline-fold {
  margin-top: 10px; padding: 10px; border-radius: var(--radius);
  border: 1px solid var(--warn); background: rgba(255, 176, 32, 0.12);
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.timeline-fold-q { flex: 1 0 100%; margin: 0 0 4px; font-size: 13px; font-weight: 700; }

/* screen-reader announcement region */
.timeline-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; margin: 0;
}

/* ------------------------------------------------------- run-of-show card */

.timeline-preview {
  margin-top: 16px; padding: 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.timeline-preview-head { margin: 0 0 10px; font-size: 15px; }
.timeline-preview-sub { color: var(--muted); font-weight: 400; font-size: 13px; }
.timeline-preview-empty { color: var(--muted); font-size: 13px; margin: 0; }

.timeline-rows { list-style: none; margin: 0; padding: 0; }
/* Explicit placement, because the row's children are a fixed script (time, what,
   day, edit, utc, gap) and auto-flow puts the 44px edit control on a line of its
   own — three wasted lines per row on a phone. */
.timeline-row {
  display: grid; gap: 2px 10px; align-items: baseline; padding: 8px 0;
  grid-template-columns: 78px minmax(0, 1fr) auto;
  border-top: 1px solid var(--border);
}
.timeline-row:first-child { border-top: 0; }
/* Clear the sticky top bar and the sticky submit summary when anything scrolls a
   row into view — otherwise the row's [edit] control lands under page chrome. */
.timeline-row { scroll-margin: 76px 0 120px; }
.timeline-time { grid-area: 1 / 1; }
.timeline-what { grid-area: 1 / 2; }
.timeline-day { grid-area: 1 / 3; }
.timeline-row-edit { grid-area: 2 / 3; justify-self: end; align-self: center; }
.timeline-utc { grid-area: 2 / 1 / 3 / 3; align-self: center; }
.timeline-gap { grid-area: 3 / 1 / 4 / 4; }
.timeline-pin { grid-area: 4 / 1 / 5 / 4; }
/* The "headliner on stage" line collapses to a bare gap label when there are no
   openers — it must not reserve the empty grid rows above it. */
.timeline-row:has(> .timeline-gap:only-child) {
  display: block; border-top: 0; padding: 0 0 8px;
}
.timeline-time { font-weight: 800; font-variant-numeric: tabular-nums; }
.timeline-what { min-width: 0; }
.timeline-day { color: var(--muted); font-size: 12px; white-space: nowrap; }
.timeline-utc {
  grid-column: 1 / -1; color: var(--muted); font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.timeline-gap {
  grid-column: 1 / -1; color: var(--muted); font-size: 12px; padding-left: 10px;
  border-left: 2px solid var(--border); margin: 2px 0 0;
}
.timeline-row.is-pinned .timeline-time { color: var(--var-blue); }

.timeline-row-edit {
  min-height: 44px; min-width: 44px; padding: 4px 10px; border-radius: 8px;
  background: transparent; border: 1px solid var(--border); color: var(--muted);
  font-size: 12px; font-weight: 700; cursor: pointer;
}
.timeline-row-edit:hover { border-color: var(--primary); color: var(--primary); }
.timeline-row-edit:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.timeline-pin {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-top: 6px;
}
.timeline-pin input[type="time"] { width: auto; min-height: 44px; }
.timeline-pin select { width: auto; min-height: 44px; }

.timeline-badges { margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.timeline-badge {
  display: inline-block; border-radius: 999px; padding: 2px 10px;
  font-size: 12px; font-weight: 700; white-space: normal;
  color: var(--warn); border: 1px solid var(--warn); background: rgba(255, 176, 32, 0.12);
}
.timeline-badge-dst { color: var(--var-blue); border-color: var(--var-blue); background: var(--var-bg); }
.timeline-total { margin: 8px 0 0; font-size: 13px; font-weight: 700; }
.timeline-utc-note {
  margin: 4px 0 0; color: var(--muted); font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere;
}
.timeline-offline { color: var(--warn); font-size: 13px; margin: 8px 0 0; }
.timeline-error { color: var(--error); font-size: 13px; font-weight: 600; margin: 8px 0 0; }
.timeline-error[hidden] { display: none; }
/* Stale = the answers on screen no longer add up; the last good schedule stays
   visible underneath so the host can see what they are fixing. */
.timeline-preview.is-stale .timeline-rows { opacity: 0.45; }

/* ------------------------------------------------- exact-UTC escape hatch */

.timeline-mode { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.timeline-exact-toggle {
  min-height: 44px; padding: 8px 14px; border-radius: var(--radius);
  background: transparent; border: 1px solid var(--border); color: var(--muted);
  font-size: 13px; font-weight: 600; cursor: pointer; text-align: left; width: 100%;
}
.timeline-exact-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Collapsed with max-height rather than [hidden]/<details>, deliberately: the
   five legacy inputs must stay laid out so scripted fills and any API client
   that walks the form keep working, and a keyboard user who tabs into the panel
   opens it (see the focusin handler in intake_timeline.js) instead of landing on
   something invisible. */
.timeline-exact { overflow: hidden; transition: max-height 140ms ease; }
.timeline-exact[data-collapsed="1"] { max-height: 0; }
.timeline-exact[data-collapsed="0"] { max-height: 1200px; }
.timeline-exact-inner { padding-top: 10px; }

/* ------------------------------------------------------------- responsive */

@media (min-width: 768px) {
  .timeline-row { grid-template-columns: 92px minmax(0, 1fr) auto auto; }
  .timeline-row-edit { grid-area: 1 / 4; }
  .timeline-utc { grid-area: 2 / 2 / 3 / 5; }
  .timeline-gap, .timeline-pin { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .timeline-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
  .timeline-preview { position: sticky; top: 76px; margin-top: 0; z-index: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .timebtn-caret, .timeline-exact { transition: none; }
}
@media (prefers-contrast: more) {
  .timebtn, .timeopt { border-width: 2px; }
}