/* ==========================================================================
   CALENDAR — month, week, day, agenda
   --------------------------------------------------------------------------
   Owned by the calendar workstream. Prefix: .cal-
   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  Board          the container every layout answers to
     2  Toolbar        previous · today · next · views · filters
     3  Month          the grid, the compact month, the selected day
     4  Entries        one appointment as a row, one as a card
     5  Week           the time grid, and the same markup as a list by day
     6  Day            crossings, slots, the people in them
     7  Agenda
     8  Legend
   ========================================================================== */

/* ==========================================================================
   1 · BOARD
   A container, not the viewport, decides the layout: the sidebar takes a quarter
   of a laptop screen, so "narrow" has to mean "the room this board was given".
   The same pattern the schedule grid uses.
   ========================================================================== */

.cal-root {
  /* Shared by every layout below. */
  --cal-gutter: 3.75rem;
  --cal-cell-min: 6.75rem;
  --cal-row-min: 3.5rem;

  /* "Not open": a hatch, so the state is a pattern and not only a tint. */
  --cal-hatch: repeating-linear-gradient(
    135deg,
    transparent 0 0.5rem,
    var(--color-border-subtle) 0.5rem calc(0.5rem + 1px)
  );
  --cal-hatch-strong: repeating-linear-gradient(
    135deg,
    transparent 0 0.375rem,
    var(--color-border-strong) 0.375rem calc(0.375rem + 1px)
  );
}

.cal-board {
  container-type: inline-size;
  container-name: cal-board;
  min-inline-size: 0;
}

/* A small tag for a crossing's code. */
.cal-code {
  display: inline-block;
  padding-inline: var(--space-1);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-2xs);
  line-height: var(--line-height-snug);
  color: var(--color-text-muted);
  background: var(--color-fill);
  border-radius: var(--radius-xs);
}

/* ==========================================================================
   2 · TOOLBAR
   One surface, two rows. The first says where you are and how to move; the second
   narrows what is shown. Everything in the first row is a link.
   ========================================================================== */

.cal-toolbar {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.cal-toolbar__top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: 'nav title views';
  align-items: center;
  gap: var(--space-3) var(--space-4);
}

.cal-toolbar__nav {
  grid-area: nav;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.cal-toolbar__title {
  grid-area: title;
  min-inline-size: 0;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  text-align: start;
  overflow-wrap: anywhere;
}

.cal-views { grid-area: views; }

.cal-toolbar__filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--space-3);
  align-items: start;
}

.cal-toolbar__zone {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: var(--control-height-sm);
  margin: 0;
  font-size: var(--font-size-sm);
}

@media (max-width: 52rem) {
  .cal-toolbar__top {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      'title title'
      'nav views';
  }
}

@media (max-width: 40rem) {
  .cal-toolbar { padding: var(--space-3); gap: var(--space-3); }

  .cal-toolbar__top {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      'title'
      'nav'
      'views';
  }

  .cal-toolbar__title { font-size: var(--font-size-lg); }

  /* Three controls share the row; each stays at least a tap target wide. */
  .cal-toolbar__nav { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; }

  /* Four views share the row evenly instead of scrolling off it. */
  .cal-views { inline-size: 100%; }
  .cal-views .tabs__tab { flex: 1 1 0; justify-content: center; padding-inline: var(--space-2); }

  .cal-toolbar__filters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
  .cal-toolbar__zone { grid-column: 1 / -1; min-block-size: 0; }

  /* The hint is still read out (it is the select's description); it just does not take a
     third of the phone's screen. */
  .cal-toolbar__filters .field__help { display: none; }
}

/* ==========================================================================
   3 · MONTH
   ========================================================================== */

.cal-month { display: grid; gap: var(--space-4); }

.cal-month__narrow { display: none; }

/* -- the grid ---------------------------------------------------------------- */

.cal-month__wide {
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.cal-grid {
  inline-size: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}

.cal-grid th,
.cal-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);
}

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

.cal-grid th.cal-grid__weekday {
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  background: var(--color-surface-sunken);
}

/* A weekday no crossing in view opens on: shaded, and said in words. */
.cal-grid__weekday.is-closed {
  background-color: var(--color-surface-sunken);
  background-image: var(--cal-hatch);
}

.cal-grid__short { display: none; }

/* A narrow grid abbreviates the weekday; the full name stays for a screen reader. */
@container cal-board (max-width: 52rem) {
  .cal-grid th.cal-grid__weekday { position: relative; padding-inline: var(--space-2); }

  .cal-grid__long {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    white-space: nowrap;
    clip-path: inset(50%);
  }

  .cal-grid__short { display: inline; }
}

.cal-grid__closed {
  display: block;
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-subtle);
}

.cal-cell { background: var(--color-surface); }

.cal-cell__link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  block-size: 100%;
  min-block-size: var(--cal-cell-min);
  padding: var(--space-2) var(--space-3);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-standard);
}

.cal-cell__link:hover { background: var(--color-surface-hover); text-decoration: none; }

/* A cell sits inside a clipped box, so its focus ring is drawn inside it. */
.cal-cell__link:focus-visible,
.cal-mini__link:focus-visible,
.cal-wk__daylink:focus-visible {
  outline-offset: calc(var(--focus-ring-width) * -1);
}

.cal-cell__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.cal-cell__num {
  display: inline-grid;
  place-items: center;
  min-inline-size: 1.75rem;
  block-size: 1.75rem;
  padding-inline: var(--space-1);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  border-radius: var(--radius-pill);
}

.cal-cell__today {
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-link);
}

.cal-cell.is-outside { background: var(--color-surface-sunken); }
.cal-cell.is-outside .cal-cell__num { color: var(--color-text-subtle); font-weight: var(--font-weight-regular); }

.cal-cell.is-today .cal-cell__num {
  color: var(--color-primary-fg);
  background: var(--color-primary);
}

/* The day the page is anchored on: a ring, because a tint alone would not survive. */
.cal-cell.is-selected .cal-cell__link { box-shadow: inset 0 0 0 2px var(--color-primary); }

/* Not a working day: hatched. A blocked day also says why, in words, with a lock. */
.cal-cell.is-shut { background-color: var(--color-surface-sunken); background-image: var(--cal-hatch); }

.cal-cell__shut {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-1);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-snug);
  color: var(--color-text-subtle);
}

.cal-cell__shut .icon { flex: 0 0 auto; margin-block-start: 0.125rem; }

.cal-cell.is-blocked .cal-cell__shut { color: var(--color-warning-fg); font-weight: var(--font-weight-semibold); }

.cal-cell__chips { display: flex; flex-wrap: wrap; gap: var(--space-1); }

.cal-cell__avail {
  margin-block-start: auto;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.cal-cell__avail-short { display: none; }

@container cal-board (max-width: 52rem) {
  .cal-cell__avail-long { display: none; }
  .cal-cell__avail-short { display: inline; }
}

/* -- the compact month ------------------------------------------------------- */

.cal-mini {
  inline-size: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: var(--space-1);
}

.cal-mini__weekday {
  padding-block: var(--space-1);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-align: center;
  color: var(--color-text-muted);
}

.cal-mini__weekday.is-closed { color: var(--color-text-subtle); }

.cal-mini__cell { padding: 0; }

.cal-mini__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-block-size: 3.5rem;
  padding: var(--space-1);
  color: inherit;
  text-decoration: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
}

.cal-mini__link:hover { text-decoration: none; background: var(--color-surface-hover); }

.cal-mini__num {
  display: inline-grid;
  place-items: center;
  min-inline-size: 1.5rem;
  block-size: 1.5rem;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  border-radius: var(--radius-pill);
}

.cal-mini__cell.is-outside .cal-mini__link { color: var(--color-text-subtle); background: var(--color-surface-sunken); }

.cal-mini__cell.is-shut .cal-mini__link {
  background-color: var(--color-surface-sunken);
  background-image: var(--cal-hatch);
}

.cal-mini__cell.is-today .cal-mini__num { color: var(--color-primary-fg); background: var(--color-primary); }

.cal-mini__cell.is-selected .cal-mini__link {
  background-color: var(--color-primary-soft);
  border-color: var(--color-primary);
  box-shadow: inset 0 0 0 1px var(--color-primary);
}

.cal-mini__lock { color: var(--color-warning-fg); }

.cal-mini__count { font-size: var(--font-size-xs); }

/* Narrow: the board has been given too little room for seven columns of chips. */
@container cal-board (max-width: 40rem) {
  .cal-month__wide { display: none; }
  .cal-month__narrow { display: block; }
}

/* -- the selected day -------------------------------------------------------- */

.cal-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.cal-panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-block-end: 1px solid var(--color-hairline);
}

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

.cal-panel__sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-block-start: var(--space-1);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.cal-panel__shut { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--color-warning-fg); font-weight: var(--font-weight-semibold); }

.cal-panel__empty { padding: var(--space-5); }

/* ==========================================================================
   4 · ENTRIES
   An appointment is written the same way everywhere: when, who, which application,
   which reference, what state, what can be done. A status's colour is only a
   decoration on the leading edge — the badge carries the meaning.
   ========================================================================== */

.cal-entries {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cal-entry {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) auto;
  grid-template-areas:
    'time body state'
    'time actions actions';
  gap: var(--space-1) var(--space-4);
  align-items: start;
  padding: var(--space-3) var(--space-5);
  border-block-start: 1px solid var(--color-border-subtle);
  border-inline-start: 3px solid transparent;
}

.cal-entry:first-child { border-block-start: 0; }

.cal-entry--scheduled { border-inline-start-color: var(--color-warning); }
.cal-entry--confirmed { border-inline-start-color: var(--color-info); }
.cal-entry--completed { border-inline-start-color: var(--color-success); }
.cal-entry--cancelled,
.cal-entry--rescheduled,
.cal-entry--expired { border-inline-start-color: var(--color-neutral); }
.cal-entry--no_show { border-inline-start-color: var(--color-danger); }

.cal-entry.is-attention { background: var(--color-danger-soft); }

.cal-entry__time {
  grid-area: time;
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

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

.cal-entry__body { grid-area: body; min-inline-size: 0; }

.cal-entry__who {
  margin: 0;
  font-weight: var(--font-weight-semibold);
  overflow-wrap: anywhere;
}

.cal-entry__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  margin: var(--space-1) 0 0;
  font-size: var(--font-size-sm);
}

.cal-fact { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
.cal-fact__label { color: var(--color-text-subtle); }

.cal-entry__state {
  grid-area: state;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-1);
}

.cal-entry__actions {
  grid-area: actions;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-block-start: var(--space-1);
}

.cal-entry__why {
  flex: 1 1 14rem;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}


@container cal-board (max-width: 40rem) {
  .cal-entry {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      'time state'
      'body body'
      'actions actions';
    padding-inline: var(--space-4);
  }

  .cal-entry__time { display: flex; align-items: baseline; gap: var(--space-2); }
  .cal-entry__until::before { content: '–'; margin-inline-end: var(--space-1); }
  .cal-entry__until { display: inline; }
  .cal-entry__state { justify-content: flex-end; }
}

/* A link in a row is a tap target on a touch screen: tall enough to hit, whatever its words. */
@media (pointer: coarse) {
  .cal-entry__who .table__link,
  .cal-fact .table__link,
  .cal-card__fact .table__link {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--tap-target-min);
  }

  .cal-fact { align-items: center; }
}

/* -- the card: one appointment in a week cell ------------------------------- */

.cal-card {
  min-inline-size: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-inline-start-width: 3px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-xs);
}

.cal-card--scheduled { border-inline-start-color: var(--color-warning); }
.cal-card--confirmed { border-inline-start-color: var(--color-info); }
.cal-card--completed { border-inline-start-color: var(--color-success); }
.cal-card--cancelled,
.cal-card--rescheduled,
.cal-card--expired { border-inline-start-color: var(--color-neutral); }
.cal-card--no_show { border-inline-start-color: var(--color-danger); }

.cal-card.is-attention { background: var(--color-danger-soft); }

.cal-card__summary {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-1) var(--space-2);
  cursor: pointer;
  list-style: none;
}

.cal-card__summary::-webkit-details-marker { display: none; }

.cal-card__line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
}

.cal-card__time { font-weight: var(--font-weight-bold); font-size: var(--font-size-sm); }

/* A badge never loses its words to an ellipsis: the line wraps instead. */
.cal-card__line .badge { flex: 0 0 auto; }

.cal-card__name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  overflow-wrap: anywhere;
}

.cal-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  font-size: var(--font-size-2xs);
  color: var(--color-text-muted);
}

.cal-card__meta .mono { white-space: nowrap; }

.cal-card__flag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-danger-fg);
}

.cal-card__more {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-2);
  font-size: var(--font-size-xs);
  border-block-start: 1px solid var(--color-border-subtle);
}

.cal-card__fact { margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }

.cal-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block-start: var(--space-1);
}

@media (pointer: coarse) {
  .cal-card__summary { min-block-size: var(--tap-target-min); }
}

/* ==========================================================================
   5 · WEEK
   One markup. Wide, a grid whose rows are shared by all seven days (a subgrid), so a busy
   Tuesday morning makes that row taller everywhere and the times still line up. Narrow,
   the same elements restack as a list by day and the rows with nothing in them go.
   ========================================================================== */

.cal-week {
  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;
}

.cal-wk {
  display: grid;
  grid-template-columns: var(--cal-gutter) repeat(7, minmax(7.25rem, 1fr));
  grid-template-rows: auto repeat(var(--cal-rows), minmax(var(--cal-row-min), auto));
  min-inline-size: calc(var(--cal-gutter) + 7 * 7.25rem);
}

.cal-wk__times {
  grid-column: 1;
  grid-row: 1 / -1;
  display: grid;
  grid-template-rows: subgrid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cal-wk__time {
  grid-row: calc(var(--row) + 1);
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-2xs);
  color: var(--color-text-muted);
  text-align: end;
  border-block-start: 1px solid var(--color-border-subtle);
}

.cal-wk__day {
  grid-column: var(--col);
  grid-row: 1 / -1;
  display: grid;
  grid-template-rows: subgrid;
  min-inline-size: 0;
  border-inline-start: 1px solid var(--color-border-subtle);
}

.cal-wk__head {
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2);
  background: var(--color-surface-sunken);
  border-block-end: 1px solid var(--color-hairline);
}

.cal-wk__day.is-today .cal-wk__head { background: var(--color-primary-soft); }

/* A weekday no crossing in view opens on: shaded and labelled, not left out. */
.cal-wk__day.is-closed .cal-wk__head { background-image: var(--cal-hatch); }

.cal-wk__title { margin: 0; font-size: var(--font-size-sm); line-height: var(--line-height-tight); }

.cal-wk__daylink {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-2);
  color: inherit;
  text-decoration: none;
}

.cal-wk__daylink:hover { text-decoration: underline; }

.cal-wk__dow { font-weight: var(--font-weight-bold); }
.cal-wk__dom { color: var(--color-text-muted); font-weight: var(--font-weight-regular); }

.cal-wk__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  margin: 0;
  font-size: var(--font-size-2xs);
  color: var(--color-text-muted);
}

.cal-wk__shut {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-weight: var(--font-weight-semibold);
  color: var(--color-warning-fg);
}

.cal-wk__day.is-closed:not(.is-blocked) .cal-wk__shut { color: var(--color-text-subtle); font-weight: var(--font-weight-regular); }

.cal-wk__cells {
  grid-row: 2 / -1;
  display: grid;
  grid-template-rows: subgrid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cal-wk__cell {
  grid-row: var(--row);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-inline-size: 0;
  padding: var(--space-1) var(--space-2) var(--space-1) var(--space-3);
  border-block-start: 1px solid var(--color-border-subtle);
}

/* The capacity of the row, drawn as a gauge on its leading edge: the filled part is what is
   taken. The words ("6 left", "Full") say the same, so nothing leans on the fill alone. */
.cal-wk__cell--open::before,
.cal-wk__cell--full::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 0.25rem;
  background: linear-gradient(
    to top,
    var(--color-primary) var(--fill, 0%),
    var(--color-fill) var(--fill, 0%)
  );
}

.cal-wk__cell--full::before { background: var(--color-warning); }

/* Shut for a reason that can be named: hatched, with the reason in words. */
.cal-wk__cell--blocked {
  background-color: var(--color-surface-sunken);
  background-image: var(--cal-hatch-strong);
}

/* Outside opening hours, nothing to say. */
.cal-wk__cell--off { background-color: var(--color-surface-sunken); }

.cal-wk__cell.is-past:not(.cal-wk__cell--blocked):not(.cal-wk__cell--off) { background: var(--color-bg-subtle); }

.cal-wk__reason {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-1);
  padding: 0 var(--space-1);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  color: var(--color-warning-fg);
  background: var(--color-surface);
  border-radius: var(--radius-xs);
}

.cal-wk__reason .icon { flex: 0 0 auto; margin-block-start: 0.1rem; }

.cal-wk__capacity {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-2xs);
  color: var(--color-text-muted);
}

.cal-wk__meter { display: none; }

.cal-wk__cards { display: grid; gap: var(--space-1); }

.cal-wk__more {
  align-self: flex-start;
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-semibold);
}

/* Said only when the layout has dropped the time column. */
.cal-wk__when { display: none; }

@media (pointer: coarse) {
  .cal-wk__daylink { min-block-size: var(--tap-target-min); align-items: center; }
  .cal-wk__more { display: inline-flex; align-items: center; min-block-size: var(--tap-target-min); }
}

/* Narrow: a vertical list by day. */
@container cal-board (max-width: 56rem) {
  .cal-week { overflow-x: visible; }

  .cal-wk { display: block; min-inline-size: 0; }

  .cal-wk__times { display: none; }

  .cal-wk__day {
    display: block;
    border-inline-start: 0;
    border-block-end: 1px solid var(--color-hairline);
  }

  .cal-wk__day:last-child { border-block-end: 0; }

  .cal-wk__head { flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: space-between; padding: var(--space-3) var(--space-4); }
  .cal-wk__title { font-size: var(--font-size-md); }

  .cal-wk__cells { display: block; }

  .cal-wk__cell {
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4) var(--space-2) var(--space-5);
  }

  /* No appointments and nothing to explain: the day's header already says it. */
  .cal-wk__cell.is-quiet,
  .cal-wk__cell.is-cont,
  .cal-wk__cell.cal-wk__cell--off { display: none; }

  /* The day's header already says how many places are left; one line per row would be noise. */
  .cal-wk__capacity { display: none; }

  /* The gauge is a column-wise device; stacked, the day's header carries the figure. */
  .cal-wk__cell--open::before,
  .cal-wk__cell--full::before { display: none; }

  .cal-wk__when {
    display: inline;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-muted);
  }

  .cal-wk__cards { gap: var(--space-2); }
}

/* ==========================================================================
   6 · DAY
   ========================================================================== */

.cal-day { display: grid; gap: var(--space-4); }

.cal-day__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.cal-group {
  display: grid;
  gap: var(--space-3);
  padding-block-end: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.cal-group > .alert { margin-inline: var(--space-5); }

.cal-group__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  padding: var(--space-4) var(--space-5) 0;
}

.cal-group__heading { min-inline-size: 0; }

.cal-group__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

.cal-group__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin-block-start: var(--space-1);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.cal-group__hours { display: inline-flex; align-items: center; gap: var(--space-1); }

.cal-group__aside {
  display: grid;
  gap: var(--space-1);
  justify-items: end;
  font-size: var(--font-size-sm);
}

.cal-group__load {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  color: var(--color-text-muted);
}

.cal-group__load .cal-meter { inline-size: 7rem; }

.cal-group__manage { display: inline-flex; align-items: center; min-block-size: var(--control-height-sm); }

.cal-group__empty { padding-inline: var(--space-5); padding-block-end: var(--space-3); margin: 0; }

/* -- the meter ----------------------------------------------------------------
   `--fill` is the only thing the markup passes in. */

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

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

.cal-slot--full .cal-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
  );
}

.cal-slot--closed .cal-meter { background-image: var(--cal-hatch-strong); }
.cal-slot--closed .cal-meter::before,
.cal-slot--past .cal-meter::before { background: var(--color-neutral); }

/* -- the slots ---------------------------------------------------------------- */

.cal-slots {
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-start: 1px solid var(--color-hairline);
}

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

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

.cal-slot--closed { background-color: var(--color-surface-sunken); background-image: var(--cal-hatch); }

.cal-slot--past .cal-slot__time { color: var(--color-text-muted); }

.cal-slot__head {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2) var(--space-4);
}

.cal-slot__time { margin: 0; font-weight: var(--font-weight-bold); }

.cal-slot__load {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-inline-size: 0;
}

.cal-slot__load .cal-meter { flex: 1 1 4rem; max-inline-size: 14rem; }

.cal-slot__figures { flex: 0 0 auto; font-size: var(--font-size-sm); color: var(--color-text-muted); }

.cal-slot__left { color: var(--color-text); }

.cal-slot__reason {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-warning-fg);
}

/* The people in a slot sit inside it, a step in. */
.cal-entries--nested {
  margin-inline-start: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.cal-entries--nested .cal-entry { padding-inline: var(--space-4); }

.cal-loose__title {
  padding: var(--space-2) var(--space-5);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  border-block-start: 1px solid var(--color-hairline);
}

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

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

.cal-quiet__list { margin: 0; padding: 0; list-style: none; }

.cal-quiet__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding-block: var(--space-2);
  font-size: var(--font-size-sm);
  border-block-start: 1px solid var(--color-border-subtle);
}

.cal-quiet__item:first-child { border-block-start: 0; }

.cal-quiet__name { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-weight: var(--font-weight-semibold); }

@container cal-board (max-width: 44rem) {
  .cal-group__head { padding-inline: var(--space-4); }
  .cal-group__aside { justify-items: start; }
  .cal-group > .alert { margin-inline: var(--space-4); }
  .cal-group__empty { padding-inline: var(--space-4); }

  .cal-slot { padding-inline: var(--space-4); }

  .cal-slot__head {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      'time state'
      'load load';
  }

  .cal-slot__time { grid-area: time; }
  .cal-slot__state { grid-area: state; }
  .cal-slot__load { grid-area: load; }

  .cal-entries--nested { margin-inline-start: 0; }
  .cal-loose__title { padding-inline: var(--space-4); }
}

/* ==========================================================================
   7 · AGENDA
   ========================================================================== */

.cal-agenda { display: grid; gap: var(--space-4); }

.cal-agenda__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.cal-agenda__day {
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.cal-agenda__day.is-today { border-color: var(--color-primary-border); }

.cal-agenda__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3) var(--space-5);
  background: var(--color-surface-sunken);
  border-block-end: 1px solid var(--color-hairline);
}

.cal-agenda__day.is-today .cal-agenda__head { background: var(--color-primary-soft); }

.cal-agenda__title { margin: 0; font-size: var(--font-size-md); font-weight: var(--font-weight-bold); }

.cal-agenda__daylink {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--control-height-sm);
  color: inherit;
  text-decoration: none;
}

.cal-agenda__daylink:hover { text-decoration: underline; }

.cal-agenda__count { margin-inline-start: auto; }

/* ==========================================================================
   8 · LEGEND
   Every swatch is the same drawing the grids use — a badge, a bar, a hatch, a lock — so the
   key teaches the shapes, not just the colours.
   ========================================================================== */

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

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

.cal-legend__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

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

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

.cal-swatch--available::before,
.cal-swatch--available::after {
  content: '';
  position: absolute;
  inset-block: 0.3125rem;
  inset-inline-start: 0.1875rem;
  border-radius: var(--radius-pill);
}

.cal-swatch--available::before { inset-inline-end: 0.1875rem; background: var(--color-fill); }
.cal-swatch--available::after { inline-size: 55%; background: var(--color-primary); }

.cal-swatch--blocked { background-color: var(--color-surface-sunken); background-image: var(--cal-hatch-strong); }
.cal-swatch--closed { background-color: var(--color-surface-sunken); background-image: var(--cal-hatch); color: var(--color-text-subtle); }
.cal-swatch--today { background: var(--color-primary-soft); border-color: var(--color-primary); }

@media (max-width: 40rem) {
  .cal-legend { padding: var(--space-3) var(--space-4); }
  .cal-legend__list { gap: var(--space-2) var(--space-4); }
  .cal-legend__item { font-size: var(--font-size-xs); }
}

/* ==========================================================================
   Forced colours: the hatches are borders there, so keep them visible.
   ========================================================================== */

@media (forced-colors: active) {
  .cal-cell.is-shut,
  .cal-mini__cell.is-shut .cal-mini__link,
  .cal-wk__cell--blocked,
  .cal-slot--closed { border-style: dashed; }

  .cal-cell.is-selected .cal-cell__link,
  .cal-mini__cell.is-selected .cal-mini__link { outline: 2px solid Highlight; }
}