/* ==========================================================================
   SCHEDULE — crossings-by-days grid, day detail
   --------------------------------------------------------------------------
   Owned by the schedule workstream.
   Rules for this file: design TOKENS only (no hex, no px colours), LOGICAL
   properties only (inline-start/end, block-start/end — never left/right), and
   nothing that cannot survive dir="rtl" and dir="ltr" alike. Loaded after
   app.css and apple.css, so it may rely on every token they define.

   Contents
     1  Header         the official-portal link
     2  Week bar       previous · range · next · this week
     3  Grid           crossings down the side, working days across
     4  Cell states    available · full · closed · no slots · not operating
     5  Stacked grid   the same markup as one card per crossing, when narrow
     6  Legend
     7  Day page       header, totals, banner, management
     8  Slots          one row per slot, the bookings inside it
     9  Appointment list
   ========================================================================== */

/* ==========================================================================
   1 · HEADER
   ========================================================================== */

.sched-portal {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
}

.sched-portal__name {
  font-weight: var(--font-weight-regular);
  color: var(--color-text-muted);
}

.sched-portal__hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* ==========================================================================
   KPI TILES ON A PHONE
   The shared tile is built for a wide screen and stacks to one full-width card per
   number. On a phone the schedule's numbers are read together, so they sit in a
   grid (the week's four in two columns, the day's three in three), and the
   appointment summary — which doubles as three buttons — becomes three compact rows.
   ========================================================================== */

@media (max-width: 40rem) {
  .sched-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .sched-totals { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }

  .sched-kpis .stat-tile,
  .sched-totals .stat-tile {
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
  }

  .sched-kpis .stat-tile__icon { inline-size: 2rem; block-size: 2rem; }
  .sched-totals .stat-tile__icon { display: none; }

  .sched-kpis .stat-tile__value,
  .sched-totals .stat-tile__value { font-size: var(--font-size-xl); }

  .sched-kpis .stat-tile__hint,
  .sched-totals .stat-tile__hint { font-size: var(--font-size-2xs); line-height: var(--line-height-snug); }

  .sched-chips { gap: var(--space-2); }

  .sched-chips .stat-tile {
    align-items: center;
    padding: var(--space-3) var(--space-4);
  }

  .sched-chips .stat-tile__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      'label value'
      'hint hint';
    align-items: center;
    column-gap: var(--space-3);
  }

  .sched-chips .stat-tile__label { grid-area: label; }
  .sched-chips .stat-tile__value { grid-area: value; font-size: var(--font-size-xl); }
  .sched-chips .stat-tile__hint { grid-area: hint; }
}

/* ==========================================================================
   2 · WEEK BAR
   Four items in one row; under 40rem the range takes a row of its own and the
   buttons share the next, each a full-width target.
   ========================================================================== */

.sched-weeknav {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-areas: 'previous range next today';
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.sched-weeknav__previous { grid-area: previous; }
.sched-weeknav__next     { grid-area: next; }
.sched-weeknav__today    { grid-area: today; }

.sched-weeknav__range {
  grid-area: range;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-inline-size: 0;
  text-align: center;
}

.sched-weeknav__label {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

@media (max-width: 40rem) {
  .sched-weeknav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      'range range'
      'previous next'
      'today today';
  }

  .sched-weeknav .btn { inline-size: 100%; }
}

/* The KPI meter sits under the value inside a stat tile. */
.sched-kpi__meter { margin-block-start: var(--space-2); }

.sched-command {
  display: inline-block;
  max-inline-size: 100%;
  padding: var(--space-2) var(--space-3);
  overflow-wrap: anywhere;
  font-size: var(--font-size-sm);
  user-select: all;
}

/* ==========================================================================
   3 · GRID
   A container, not a viewport, decides the layout: the sidebar takes a quarter
   of a laptop screen, so "narrow" has to mean "the room this grid was given".
   Between "wide enough" and "stacked" the table scrolls inside its own box with
   the crossing column pinned.
   ========================================================================== */

.sched-board {
  container-type: inline-size;
  container-name: sched-board;
}

.sched-scroll {
  overflow-x: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overscroll-behavior-inline: contain;
}

.sched-grid {
  --sched-first-col: 11rem;
  --sched-day-min: 7.25rem;

  inline-size: 100%;
  min-inline-size: calc(var(--sched-first-col) + var(--sched-days, 5) * var(--sched-day-min));
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--font-size-sm);
}

.sched-grid th,
.sched-grid td {
  padding: 0;
  text-align: start;
  vertical-align: top;
  border-block-end: 1px solid var(--color-border-subtle);
  border-inline-end: 1px solid var(--color-border-subtle);
}

.sched-grid tr > :last-child { border-inline-end: 0; }
.sched-grid tbody tr:last-child > * { border-block-end: 0; }

.sched-grid thead th {
  padding: var(--space-3);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  text-align: center;
  background: var(--color-surface-sunken);
  border-block-end: 1px solid var(--color-border);
}

.sched-grid thead .sched-grid__corner {
  inline-size: var(--sched-first-col);
  text-align: start;
}

/* Pinned crossing column: scrolled cells slide beneath it. */
.sched-grid__corner,
.sched-grid__crossing {
  position: sticky;
  inset-inline-start: 0;
  z-index: 1;
}

.sched-grid .sched-grid__crossing {
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border-inline-end: 1px solid var(--color-border);
}

.sched-crossing__name {
  display: block;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  line-height: var(--line-height-snug);
}

.sched-crossing__city {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-muted);
}

/* -- day headers ------------------------------------------------------------ */

.sched-day__weekday,
.sched-day__date { display: block; }

.sched-day__weekday {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

.sched-day__date {
  font-weight: var(--font-weight-regular);
  color: var(--color-text-muted);
}

/* Today is named and ringed: a tint alone would be lost on a monochrome screen. */
.sched-grid thead .sched-grid__day.is-today {
  background: var(--color-primary-soft);
  box-shadow: inset 0 3px 0 var(--color-primary);
}

.sched-day__today,
.sched-cell__today {
  display: inline-block;
  padding-block: 0.0625rem;
  padding-inline: var(--space-2);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
  color: var(--color-primary-fg);
  background: var(--color-primary);
  border-radius: var(--radius-pill);
}

.sched-day__today { margin-block-start: var(--space-1); }

/* ==========================================================================
   4 · CELL STATES
   ========================================================================== */

.sched-cell { position: relative; }

.sched-cell.is-today { background: var(--color-primary-soft); }

/* A past day is quieter, not faded: reduced opacity would drop the figures below
   the contrast the rest of the page holds them to. */
.sched-cell.is-past { background: var(--color-surface-sunken); }
.sched-cell.is-past .sched-cell__figures { color: var(--color-text-muted); }

.sched-cell__link {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-block-size: 5.5rem;
  padding: var(--space-3);
  color: var(--color-text);
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-standard);
}

a.sched-cell__link:hover {
  color: var(--color-text);
  text-decoration: none;
  background: var(--color-table-hover);
}

a.sched-cell__link:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus);
  outline-offset: -3px;
}

/* The wide table has a column header for the day; only the stacked layout shows it. */
.sched-cell__when { display: none; }

.sched-cell__figures {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
}

.sched-cell__note {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.sched-cell__badge { display: inline-flex; }

/* A day closed with a booking kept open: say so, with the lock, in words. */
.sched-cell__partial,
.sched-cell__reason,
.sched-cell__shut {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
}

/* Slots on a day the crossing is shut: bookings somebody has to deal with. The triangle
   and the words carry it; the colour only agrees. */
.sched-cell__reason { color: var(--color-warning-fg); }

/* A holiday or closure on a day with nothing on it: its name stands where a dash would. */
.sched-cell__shut {
  justify-content: center;
  text-align: center;
}

.sched-cell__empty {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* -- the meter ----------------------------------------------------------------
   `--fill` is the only thing the markup passes in. The fill is a bar whose length
   carries the number; the pattern on a full one is a second cue besides colour. */

.sched-meter {
  display: block;
  inline-size: 100%;
  block-size: 0.5rem;
  overflow: hidden;
  background: var(--color-fill);
  border-radius: var(--radius-pill);
}

.sched-meter::before {
  content: '';
  display: block;
  inline-size: var(--fill, 0%);
  block-size: 100%;
  background: var(--color-primary);
  border-radius: inherit;
}

.sched-cell--full .sched-meter::before,
.sched-slot--full .sched-meter::before {
  background-color: var(--color-warning);
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0 0.25rem,
    color-mix(in srgb, var(--color-surface) 55%, transparent) 0.25rem 0.5rem
  );
}

/* -- no slots at all: an outline, because there is nothing to measure -------- */

.sched-cell--empty .sched-cell__link { justify-content: center; }
.sched-cell--empty .sched-cell__empty {
  align-self: center;
  padding-block: var(--space-1);
  padding-inline: var(--space-2);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-sm);
}

/* -- not a working day for this crossing: hatched, with a dash --------------- */

.sched-cell--off {
  background-color: var(--color-surface-sunken);
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0 0.5rem,
    var(--color-border-subtle) 0.5rem calc(0.5rem + 1px)
  );
}

.sched-cell__static {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-block-size: 5.5rem;
  padding: var(--space-3);
  color: var(--color-text-subtle);
}

.sched-cell__dash { font-size: var(--font-size-lg); line-height: 1; }

/* Words for a screen reader in the table; shown in the stacked layout. */
.sched-cell__off {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}

/* ==========================================================================
   5 · STACKED GRID
   Narrow: one card per crossing, one full-width row per day. The day label that
   was a column header comes back inside each row, so nothing depends on the
   header that is no longer there. Every row is at least a tap target tall.
   ========================================================================== */

@container sched-board (max-width: 46rem) {
  .sched-scroll {
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .sched-grid {
    display: block;
    min-inline-size: 0;
    table-layout: auto;
  }

  /* Still there for a screen reader; visually replaced by the per-row labels. */
  .sched-grid thead {
    position: absolute;
    display: block;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .sched-grid tbody {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .sched-grid tbody tr {
    display: block;
    overflow: hidden;
    background: var(--color-surface);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
  }

  .sched-grid th,
  .sched-grid td {
    display: block;
    border: 0;
  }

  .sched-grid tbody tr > .sched-cell { border-block-start: 1px solid var(--color-border-subtle); }

  .sched-grid .sched-grid__crossing {
    position: static;
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface-sunken);
    border: 0;
  }

  .sched-cell__link {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      'when figures'
      'meter note';
    align-items: center;
    column-gap: var(--space-4);
    row-gap: var(--space-2);
    min-block-size: var(--tap-target-min);
    padding: var(--space-3) var(--space-4);
  }

  .sched-cell__when {
    grid-area: when;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    min-inline-size: 0;
  }

  .sched-cell__weekday { font-weight: var(--font-weight-bold); }
  .sched-cell__date { color: var(--color-text-muted); }

  .sched-cell__figures,
  .sched-cell__empty { grid-area: figures; justify-self: end; }

  .sched-meter { grid-area: meter; }

  .sched-cell__note,
  .sched-cell__badge { grid-area: note; justify-self: end; }

  /* Closed has no figures: the badge takes their place beside the day. */
  .sched-cell--closed .sched-cell__badge { grid-area: figures; }

  /* Extra lines (part-closed, a shut day with bookings) take whatever row is free, full width. */
  .sched-cell__partial,
  .sched-cell__reason { grid-column: 1 / -1; }

  .sched-cell--empty .sched-cell__link { justify-content: initial; }
  .sched-cell--empty .sched-cell__empty { align-self: center; }

  .sched-cell__static {
    flex-direction: row;
    justify-content: space-between;
    min-block-size: var(--tap-target-min);
    padding: var(--space-2) var(--space-4);
  }

  .sched-cell__static .sched-cell__dash { display: none; }
  .sched-cell__static .sched-cell__shut { justify-content: flex-end; text-align: end; }

  .sched-cell__off {
    position: static;
    inline-size: auto;
    block-size: auto;
    clip-path: none;
    font-size: var(--font-size-xs);
  }
}

/* ==========================================================================
   6 · LEGEND
   Every swatch is the same drawing the cell uses — a bar, a hatched bar, a lock,
   a dashed outline, a dash — so the key teaches the shapes, not just the colours.
   ========================================================================== */

.sched-legend {
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
}

.sched-legend__title {
  margin-block-end: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
}

.sched-legend__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}

.sched-legend__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.sched-swatch {
  position: relative;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  inline-size: 1.75rem;
  block-size: 1.25rem;
  overflow: hidden;
  font-size: var(--font-size-xs);
  line-height: 1;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-xs);
}

.sched-swatch--available::before,
.sched-swatch--full::before {
  content: '';
  position: absolute;
  inset-block: 0.3125rem;
  inset-inline: 0.1875rem;
  background: var(--color-fill);
  border-radius: var(--radius-pill);
}

.sched-swatch--available::after,
.sched-swatch--full::after {
  content: '';
  position: absolute;
  inset-block: 0.3125rem;
  inset-inline-start: 0.1875rem;
  inline-size: 55%;
  background: var(--color-primary);
  border-radius: var(--radius-pill);
}

.sched-swatch--full::after {
  inline-size: calc(100% - 0.375rem);
  background-color: var(--color-warning);
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0 0.25rem,
    color-mix(in srgb, var(--color-surface) 55%, transparent) 0.25rem 0.5rem
  );
}

.sched-swatch--closed { background: var(--color-neutral-soft); }
.sched-swatch--partial { background: var(--color-neutral-soft); border-style: dashed; }
.sched-swatch--empty { border-style: dashed; }

.sched-swatch--off {
  background-color: var(--color-surface-sunken);
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0 0.5rem,
    var(--color-border-subtle) 0.5rem calc(0.5rem + 1px)
  );
}

.sched-swatch--today { background: var(--color-primary-soft); border-color: var(--color-primary); }
.sched-swatch--past { background: var(--color-surface-sunken); }

/* ==========================================================================
   7 · DAY PAGE
   ========================================================================== */

/* What the crossing is, in one quiet line under the title. */
.sched-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-5);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.sched-meta__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.sched-meta__label {
  margin-inline-end: var(--space-1);
  color: var(--color-text-subtle);
}

/* Previous and next working day: one each side, however many are present. */
.sched-daynav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.sched-daynav__previous { margin-inline-end: auto; }
.sched-daynav__next { margin-inline-start: auto; }

.sched-daynav .btn {
  white-space: normal;
  text-align: center;
}

@media (max-width: 40rem) {
  .sched-daynav .btn { flex: 1 1 8rem; }
}

.sched-banner__reason { display: block; }

/* Close on one side, reopen on the other; they stack when there is no room. */
.sched-manage {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  align-items: flex-start;
}

.sched-manage__form {
  flex: 1 1 20rem;
  max-inline-size: 36rem;
}

.sched-manage__reopen {
  flex: 0 1 18rem;
  padding-inline-start: var(--space-6);
  border-inline-start: 1px solid var(--color-hairline);
}

@media (max-width: 40rem) {
  .sched-manage__reopen {
    flex-basis: 100%;
    padding-inline-start: 0;
    padding-block-start: var(--space-4);
    border-inline-start: 0;
    border-block-start: 1px solid var(--color-hairline);
  }
}

/* ==========================================================================
   8 · SLOTS
   One row per slot: the time, how full it is, what state it is in — and, under it,
   the people booked into it. The list is a container so the rows answer to the room
   they are given, not to the screen.
   ========================================================================== */

.sched-slots {
  display: flex;
  flex-direction: column;
  container-type: inline-size;
  container-name: sched-slots;
}

.sched-slot {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-block-end: 1px solid var(--color-hairline);
}

.sched-slot:last-child { border-block-end: 0; }

/* A slot whose time has come is quieter: sunken, not faded. */
.sched-slot.is-past { background: var(--color-surface-sunken); }
.sched-slot.is-past .sched-meter::before { background: var(--color-neutral); }

.sched-slot__head {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr) auto;
  grid-template-areas: 'time load state';
  align-items: center;
  gap: var(--space-4);
}

.sched-slot__time {
  grid-area: time;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
}

.sched-slot__load {
  grid-area: load;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-inline-size: 0;
}

.sched-slot__load .sched-meter {
  flex: 1 1 6rem;
  max-inline-size: 20rem;
}

.sched-slot__state { grid-area: state; }

.sched-slot__figures {
  flex: 0 0 auto;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* A closed slot offers nothing to measure: the bar is hatched and empty. */
.sched-slot--closed .sched-meter {
  background-color: var(--color-neutral-soft);
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0 0.25rem,
    var(--color-border-strong) 0.25rem calc(0.25rem + 1px)
  );
}
.sched-slot--closed .sched-meter::before { background: var(--color-neutral); }

.sched-slot__why {
  min-inline-size: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

/* -- the bookings inside a slot --------------------------------------------- */

.sched-bookings {
  display: grid;
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
}

.sched-booking {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.2fr) auto minmax(0, 1fr);
  grid-template-areas: 'citizen application status reference';
  align-items: center;
  gap: var(--space-3);
  min-block-size: var(--tap-target-min);
  padding: var(--space-2) var(--space-3);
}

.sched-booking + .sched-booking { border-block-start: 1px solid var(--color-border-subtle); }

.sched-booking__citizen     { grid-area: citizen; min-inline-size: 0; overflow-wrap: anywhere; }
.sched-booking__application { grid-area: application; min-inline-size: 0; }
.sched-booking__status      { grid-area: status; }
.sched-booking__reference   { grid-area: reference; min-inline-size: 0; overflow-wrap: anywhere; }

/* The labels name a value that is already beside its column on a wide row. */
.sched-booking__label {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}

@container sched-slots (max-width: 38rem) {
  .sched-slot { padding: var(--space-3) var(--space-4); }

  .sched-slot__head {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      'time state'
      'load load';
    gap: var(--space-2) var(--space-3);
  }

  .sched-slot__load {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1);
  }

  /* In a column the flex-basis would be a height: the bar is its own height, full width. */
  .sched-slot__load .sched-meter { flex: 0 0 auto; max-inline-size: none; }

  .sched-booking {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      'citizen status'
      'application application'
      'reference reference';
    row-gap: var(--space-1);
    padding-block: var(--space-3);
  }

  .sched-booking__status { justify-self: end; }

  .sched-booking__application,
  .sched-booking__reference {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
  }

  /* An application number is one token: never broken at its hyphens. */
  .sched-booking .mono { white-space: nowrap; }

  .sched-booking__label {
    position: static;
    inline-size: auto;
    block-size: auto;
    margin-inline-end: var(--space-1);
    font-size: var(--font-size-xs);
    clip-path: none;
    color: var(--color-text-subtle);
  }

  .sched-booking__application,
  .sched-booking__reference { font-size: var(--font-size-sm); }
}

/* ==========================================================================
   9 · APPOINTMENT LIST
   ========================================================================== */

.sched-results {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* The filter row is one control per line on a phone, which is three screens of
   dropdowns before the first appointment. Two to a line, and the clear button full width. */
@media (max-width: 40rem) {
  .sched-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sched-filters .filter-bar__actions { grid-column: 1 / -1; }
  .sched-filters .filter-bar__actions .btn { inline-size: 100%; }
}

/* Five time windows do not fit one row of a phone; a segmented control that scrolls
   sideways hides the last two. Let it wrap instead, so every window is on screen. */
@media (max-width: 40rem) {
  .sched-tabs {
    flex-wrap: wrap;
    inline-size: 100%;
    border-radius: var(--radius-lg);
  }

  .sched-tabs .tabs__tab {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* -- the cells that are more than a word ------------------------------------- */

.sched-when { display: flex; flex-direction: column; }
.sched-when__date { font-weight: var(--font-weight-semibold); white-space: nowrap; }

/* An application number or a reference is one token: never broken at its hyphens. */
.sched-table .mono { white-space: nowrap; }

.sched-when__time {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.sched-status {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
}

/* A booking with no reference yet: named and marked with a triangle, not just tinted. */
.sched-unconfirmed {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-warning-fg);
}

/* -- narrow: one card per appointment ----------------------------------------
   Eight columns do not fit a phone and a sideways scroll hides the two that matter
   (the status and the way into the application). So the same rows restack: the
   citizen and the status on top, the rest in pairs beneath, each value labelled by
   its own column name since the header row is no longer there. */

.sched-listwrap {
  container-type: inline-size;
  container-name: sched-list;
}

@container sched-list (max-width: 52rem) {
  .sched-table thead {
    position: absolute;
    display: block;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .sched-table,
  .sched-table tbody { display: block; }

  .sched-table tbody tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      'citizen status'
      'when when'
      'application service'
      'crossing reference'
      'action action';
    gap: var(--space-2) var(--space-4);
    padding: var(--space-4);
    border-block-end: 1px solid var(--color-hairline);
  }

  .sched-table tbody tr:last-child { border-block-end: 0; }

  .sched-table td {
    display: block;
    min-inline-size: 0;
    padding: 0;
    overflow-wrap: anywhere;
    border: 0;
  }

  .sched-td--citizen     { grid-area: citizen; font-size: var(--font-size-md); }
  .sched-td--status      { grid-area: status; justify-self: end; }
  .sched-td--when        { grid-area: when; }
  .sched-td--application { grid-area: application; }
  .sched-td--service     { grid-area: service; }
  .sched-td--crossing    { grid-area: crossing; }
  .sched-td--reference   { grid-area: reference; }
  .sched-td--action      { grid-area: action; }

  /* app.css gives the action cell a 1% width so it hugs a button in the table; a card wants it full. */
  .sched-table td.sched-td--action { inline-size: auto; white-space: normal; text-align: start; }
  .sched-td--action .btn { inline-size: 100%; }

  .sched-td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-subtle);
  }

  /* The date already reads as a heading of its own. */
  .sched-td--when::before { display: none; }

  .sched-table .sched-when { flex-direction: row; flex-wrap: wrap; gap: var(--space-2); align-items: baseline; }
}