/*
 * show/picker — the picker's stylesheet for THE SHOW's page (GET /show),
 * linked after show.css by src/api/show-page.js.
 *
 * MOVED. Every rule between `.seg-pick` and `.show-record:disabled` is
 * show.css's, verbatim (S-38): the menu cards, the badges, the FOCUS selects,
 * the Add ghost and the Record button. show.css was AT its 500-line ceiling
 * (tests/unit/monolith-budget.test.mjs) and the answer to that ratchet is
 * another file, never a bigger number. `.seg-heading` and `.show-intro`
 * stayed behind: the stage renders them too.
 *
 * NEW, below the moved block: the paged menu (`[hidden]` cards and the
 * Suggest control), the three states of the Add control, and the run sheet —
 * the producer's word for what airs and in what order; the listener sees it
 * headed "On the show". Colours are the ten tokens show.css declares and the
 * teal recipe `.seg-pick.on` already uses; no new semantic colour.
 *
 * Mobile-first for 320 / 768 / 1024 / 1440. Every control is >= 44px.
 */

/* ---------- moved verbatim from show.css --------------------------------- */

.seg-pick {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--surface-2, #171e2e);
  border: 1px solid var(--border, #2a3348);
  border-radius: 12px;
  padding: 11px 13px;
  margin-bottom: 9px;
  cursor: pointer;
}
.seg-pick input {
  margin-top: 3px;
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  accent-color: #2dd4bf;
}
.seg-pick.on {
  border-color: rgba(45, 212, 191, 0.55);
  background: rgba(45, 212, 191, 0.06);
}
.seg-title {
  font-weight: 700;
  font-size: 0.92rem;
}
.seg-kind {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: 999px;
  margin-left: 6px;
  text-transform: uppercase;
}
.seg-kind.conflict {
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.5);
}
.seg-kind.bench {
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.5);
}
.seg-kind.game {
  color: #4f8ff7;
  border: 1px solid rgba(79, 143, 247, 0.5);
}
.seg-kind.custom {
  color: #2dd4bf;
  border: 1px solid rgba(45, 212, 191, 0.5);
}
.seg-detail {
  color: var(--muted);
  font-size: 0.76rem;
  margin-top: 2px;
}
.show-custom {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  align-items: center;
  margin: 10px 0;
}
.show-custom select {
  width: 100%;
  padding: 9px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.85rem;
}
.show-custom .vs {
  color: var(--muted);
  font-weight: 700;
  font-size: 0.8rem;
}
.show-add {
  background: transparent;
  border: 1px dashed var(--border);
  color: var(--muted);
  border-radius: 10px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 0.8rem;
  width: 100%;
}
.show-record {
  display: block;
  width: 100%;
  margin-top: 14px;
  background: #2dd4bf;
  color: #06251f;
  border: none;
  border-radius: 12px;
  padding: 15px;
  font-size: 1.02rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 8px 26px rgba(45, 212, 191, 0.28);
}
.show-record:disabled {
  opacity: 0.5;
  cursor: default;
  box-shadow: none;
}

/* ---------- the paged menu (S-38) ----------------------------------------- */

/* `.seg-pick` is display:flex, which beats the UA's `[hidden]{display:none}`
   on specificity — without this rule every card would paint regardless. */
.seg-pick[hidden] {
  display: none;
}
/* One more offer at a time: a pitch, not an inventory. The ghost register
   of the old Add button, in the page's accent, at the 44px floor. */
.show-suggest {
  display: block;
  width: 100%;
  min-height: 44px;
  margin: 2px 0 6px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--show);
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 700;
}
/* The receipt: one border pulse on the card just revealed or the chip just
   added. Off under reduced motion, where the change itself is the receipt. */
@keyframes segFlash {
  0%,
  100% {
    border-color: rgba(45, 212, 191, 0.55);
  }
  50% {
    border-color: var(--show);
    box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.25);
  }
}
.flash {
  animation: segFlash 0.6s ease;
}

/* ---------- the Add control's three states ------------------------------- */

/* `.show-add` above is the idle ghost, sized under the floor since the move
   (8px + 8px padding on 0.8rem type); the floor is set here for every state.
   aria-disabled, not disabled: idle still answers a click by focusing the
   select the listener needs. */
.show-add {
  min-height: 44px;
  padding: 10px 12px;
}
/* Ready: the `.seg-pick.on` recipe — a solid teal border and a tint. NOT the
   Record button's fill; Record stays the page's one filled button. */
.show-add.ready {
  border: 1px solid rgba(45, 212, 191, 0.55);
  background: rgba(45, 212, 191, 0.06);
  color: var(--show);
  font-weight: 700;
}

/* ---------- the run sheet ------------------------------------------------ */

/* A bar — the <details> of chips and the Record button beside it — that
   docks to the bottom of the viewport while the menu scrolls above it and
   settles into place at the end of the flow: sticky in flow, no JS. Closed,
   the bar is the head and Record. `docked` comes off on Record so it stops
   floating over the transcript, and it never comes back. */
.run-sheet {
  margin-top: 14px;
  background: var(--bg);
  border-top: 1px solid var(--border);
}
.run-sheet.docked {
  position: sticky;
  bottom: 0;
  z-index: 5;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
/* The head is the toggle at 320 (closed by default there) and the heading at
   >= 768 (open by default). The `.seg-heading` register, at the floor. */
.run-sheet-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 2px;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--show);
  cursor: pointer;
  list-style: none;
}
.run-sheet-head::-webkit-details-marker {
  display: none;
}
.run-sheet-n {
  color: var(--muted);
  font-weight: 500;
  letter-spacing: 0;
}
.run-sheet-empty {
  color: var(--muted);
  font-size: 0.82rem;
  padding: 4px 2px 8px;
}
/* Chips: full-width rows at 320, wrapping pills from 768. */
.run-sheet-chips {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* One control: the badge, the title and the ×. Clicking it takes the segment
   off the show. */
.rs-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  width: 100%;
  padding: 8px 12px;
  background: var(--surface-2);
  border: 1px solid rgba(45, 212, 191, 0.55);
  border-radius: 10px;
  color: var(--text);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.rs-chip .seg-kind {
  margin-left: 0;
  flex: 0 0 auto;
}
.rs-chip .rs-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}
.rs-chip .rs-x {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1;
}
@media (min-width: 768px) {
  .run-sheet-chips {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .rs-chip {
    width: auto;
    border-radius: 999px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .flash {
    animation: none;
  }
}

/* Hidden leagues (ch. 14 S-47): the count, then the 44px way back to
   Leagues & Invites — beside it where it fits, under it at 320. */
.show-hidden-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 10px;
}
.show-hidden-foot .show-state-go {
  margin-top: 0;
}