/* Chronological list of the proposal round's meeting slots for the picker,
   presented as a narrow right-aligned panel (.lc-card shell) rather than
   full-bleed rows. Row chrome comes from .lc-row (molecules/row.css); this
   file adds the panel width/position, the entries stack, entry columns, the
   time/duration hierarchy, and the non-blocking conflict marker. */

.picker-slot-list {
  max-width: 26rem;
  margin-inline-start: auto;
}

.picker-slot-list__entries {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-2);
}

/* Consumer pins its own areas on the .lc-row primitive. The conflict marker
   spans its own full-width row below stack+select rather than sharing their
   row — in the narrow panel width, a 3-up "stack | conflict text | select"
   layout starved the 1fr stack column down to a few px the instant the
   (long, translated) conflict copy was present, wrapping the day/time text
   one letter per line. Conflict-free rows simply leave that area's row at
   auto (0) height. */
.picker-slot-list__entry {
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "stack   select"
    "conflict conflict";
}

.picker-slot-list__entry > .lc-row__stack {
  grid-area: stack;
}

.picker-slot-list__select-form {
  grid-area: select;
}

/* Non-blocking: a visual warning only, never disables .picker-slot-list__select. */
.picker-slot-list__conflict {
  grid-area: conflict;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-13);
  color: var(--color-warn);
}

/* Caption: weekday + date give the time context, so they sit smaller and
   muted above it. No text-transform:uppercase — Selenium's getText() applies
   the visual case transform, which would break the exact-string assertion in
   picker_slot_list_component_test.rb. */
.picker-slot-list__day {
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  color: var(--color-ink-muted);
  letter-spacing: var(--tracking-wide);
}

.picker-slot-list__meta {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
}

/* The actual bookable time is the one piece of data a picker acts on —
   it carries the visual weight the day caption had before. */
.picker-slot-list__time {
  font-family: var(--font-mono);
  font-size: var(--fs-20);
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
}

.picker-slot-list__duration {
  font-size: var(--fs-12);
  color: var(--color-ink-muted);
  background: var(--color-surface);
  border-radius: var(--r-pill);
  padding: 0 var(--sp-2);
}

.picker-slot-list__conflict-icon {
  display: block;
  width: 1.25em;
  height: 1.25em;
}