/* Scheduling screens (P-13–P-15, S-01–S-06). Tokens only (static/css/tokens.css). */
@layer components {
  .booking { display: grid; gap: var(--space-6); max-width: 60rem; margin: 0 auto; padding: var(--space-6) var(--space-4); }
  .booking__cards { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); list-style: none; padding: 0; margin: 0; }
  .booking__meta { color: var(--color-text-secondary); font-size: var(--text-sm); }
  .booking__with { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; margin: 0; }
  .booking__with a[aria-current="true"] { background: var(--color-surface-selected); border-color: var(--color-border-strong); }
  .booking__time { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 48rem) { .booking__time { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
  .month { width: 100%; border-collapse: collapse; table-layout: fixed; }
  .month caption { font-weight: var(--font-weight-semibold); text-align: start; padding-block-end: var(--space-2); }
  .month th { font-size: var(--text-xs); color: var(--color-text-secondary); font-weight: var(--font-weight-medium); padding: var(--space-1); }
  .month td { padding: var(--space-0-5); text-align: center; vertical-align: top; }
  .month__day { display: grid; gap: var(--space-0-5); min-height: 3.25rem; padding: var(--space-1); border: var(--border-width) solid transparent; border-radius: var(--radius-control); color: var(--color-text-muted); text-decoration: none; }
  .month__day--open { border-color: var(--color-border); color: var(--color-text); background: var(--color-surface); }
  .month__day--open:hover { background: var(--color-surface-hover); }
  .month__day--selected { border-color: var(--color-border-accent); background: var(--color-surface-selected); }
  .month__day--other { visibility: hidden; }
  .month__flag { font-size: var(--text-xs); color: var(--color-text-accent); }
  .month__nav { display: flex; justify-content: space-between; gap: var(--space-2); margin-block-start: var(--space-2); }
  .slots { display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); list-style: none; padding: 0; margin: 0; }
  .slots form { margin: 0; }
  .slots button { width: 100%; }
  .booking__zone { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: end; }
  .booking__summary { display: grid; gap: var(--space-1); }
  .booking__notice { font-size: var(--text-sm); color: var(--color-text-secondary); }
  .booking__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
  .visually-hidden-field { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
  .calendar { display: grid; gap: var(--space-4); }
  .calendar__toolbar { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
  .calendar__days { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
  .calendar__day { border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card); padding: var(--space-3); background: var(--color-surface); }
  .calendar__day--today { border-color: var(--color-border-accent); }
  .calendar__items { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
  .calendar__item { display: grid; gap: var(--space-0-5); padding: var(--space-2); border-radius: var(--radius-control); background: var(--color-bg-subtle); }
  .calendar__item--busy { background: repeating-linear-gradient(135deg, var(--color-bg-subtle), var(--color-bg-subtle) 6px, var(--color-surface) 6px, var(--color-surface) 12px); }
  .calendar__item--hold { border: var(--border-width) dashed var(--color-border-strong); background: transparent; }
  .slot-choices { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; margin: 0; }
  .rules { display: grid; gap: var(--space-2); }
  .rules__row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
  .settings-form { display: grid; gap: var(--space-4); max-width: 44rem; }
  .settings-form__grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }

  /* ------------------------------------------------------------------ CRM calendar (S-01)
     UI-DARK-2, mock panel 04 "APPOINTMENTS": Calendar/List + Today toggles, the month/week/day
     segmented control with the period beside it, the month grid of coloured event pills
     (.cal-grid / dash/calendar_cell from components.css) and "Today's appointments" with a
     coloured time bar per row. Tokens only. */
  .cal-toolbar { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
  .cal-seg { display: flex; gap: var(--space-px); padding: var(--space-px); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-full); background: var(--color-surface-sunken); }
  .cal-seg__item { display: inline-flex; gap: var(--space-1-5); align-items: center; min-height: 2rem; padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); color: var(--color-text-secondary); font-size: var(--text-sm); font-weight: var(--font-weight-medium); line-height: var(--leading-ui); text-decoration: none; white-space: nowrap; }
  .cal-seg__item:hover { background: var(--color-surface-hover); color: var(--color-text); text-decoration: none; }
  .cal-seg__item[aria-current="page"] { background: var(--color-primary-bg); color: var(--color-primary-text); }
  .cal-seg__item[aria-current="page"]:hover { background: var(--color-primary-bg-hover); color: var(--color-primary-text); }
  .cal-head { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
  .cal-head__period { flex: 1 1 12rem; margin: 0; color: var(--color-text); font-size: var(--text-xl); font-weight: var(--font-weight-semibold); }
  .cal-head__nav { display: flex; gap: var(--space-2); align-items: center; margin-inline-start: auto; }
  .cal-toolbar .cal-filters { margin-inline-start: auto; }
  .cal-toolbar .cal-filters[open] { flex: 1 0 100%; margin-inline-start: 0; }
  .cal-filters { border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface); }
  .cal-filters__summary { display: flex; gap: var(--space-2); align-items: center; min-height: 2.5rem; padding: var(--space-2) var(--space-3); color: var(--color-text-secondary); font-size: var(--text-sm); font-weight: var(--font-weight-medium); cursor: pointer; }
  .cal-filters[open] .cal-filters__summary { border-block-end: var(--border-width) solid var(--color-border-subtle); }
  .cal-filters .calendar__toolbar { padding: var(--space-3); align-items: end; }
  /* The month grid's pills carry time, type and person, so they wrap to two lines like the mock.
     Below 48em components.css collapses each pill to a dot; that rule must keep winning. */
  @media (min-width: 48em) {
    /* The mock's pills are filled blocks whose text wraps to two lines: a wash of the pill's own
       colour over the sunken surface, light enough that --color-text keeps its AA contrast. */
    .cal-grid--appointments .cal-pill {
      min-height: 1.5rem;  /* 24px target (SC 2.5.8) */
      background-color: color-mix(in srgb, var(--cal-pill-accent) 16%, var(--color-surface-sunken));
      white-space: normal;
    }
    .cal-grid--appointments a.cal-pill:hover { background-color: color-mix(in srgb, var(--cal-pill-accent) 26%, var(--color-surface-sunken)); }
    .cal-grid--appointments .cal-pill__text { display: block; white-space: normal; }
    .cal-grid--appointments .cal-cell { min-height: 6.5rem; }
  }
  /* Day and list views: the same colour vocabulary as the grid's pills. */
  .calendar__item { border-inline-start: var(--border-width-accent) solid var(--color-border-strong); }
  .calendar__item--1 { border-inline-start-color: var(--color-chart-1); }
  .calendar__item--2 { border-inline-start-color: var(--color-chart-2); }
  .calendar__item--3 { border-inline-start-color: var(--color-chart-3); }
  .calendar__item--4 { border-inline-start-color: var(--color-chart-4); }
  .calendar__item--5 { border-inline-start-color: var(--color-chart-5); }
  .calendar__item--6 { border-inline-start-color: var(--color-chart-6); }
  .calendar__item--7 { border-inline-start-color: var(--color-chart-7); }
  .calendar__item--success { border-inline-start-color: var(--color-success-border); }
  .calendar__item--danger { border-inline-start-color: var(--color-danger-border); }
  .calendar__item--neutral { border-inline-start-color: var(--color-border-strong); }
  .today-appts { display: grid; gap: var(--space-2); padding: var(--space-4); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface); }
  .today-appts__date { color: var(--color-text-muted); font-size: var(--text-sm); }
  .today-appts__more { margin: 0; text-align: end; }
  .today-appts__empty { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }
  .today-appts__list { display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); margin: 0; padding: 0; list-style: none; }
  .appt-row { --appt-accent: var(--color-chart-1); display: grid; gap: var(--space-1) var(--space-3); grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; min-height: 3rem; padding: var(--space-2) var(--space-3); border-radius: var(--radius-control); background: var(--color-surface-sunken); color: var(--color-text); text-decoration: none; }
  .appt-row:hover { background: var(--color-surface-hover); text-decoration: none; }
  .appt-row__bar { align-self: stretch; width: var(--border-width-accent); min-height: 2rem; border-radius: var(--radius-full); background: var(--appt-accent); }
  .appt-row__time { color: var(--color-text-secondary); font-size: var(--text-sm); font-variant-numeric: var(--font-numeric-tabular); white-space: nowrap; }
  .appt-row__text { display: grid; min-width: 0; }
  .appt-row__title { overflow: hidden; font-size: var(--text-sm); font-weight: var(--font-weight-semibold); text-overflow: ellipsis; white-space: nowrap; }
  .appt-row__who { overflow: hidden; color: var(--color-text-muted); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
  .appt-row__status { justify-self: end; }
  .appt-row--1 { --appt-accent: var(--color-chart-1); }
  .appt-row--2 { --appt-accent: var(--color-chart-2); }
  .appt-row--3 { --appt-accent: var(--color-chart-3); }
  .appt-row--4 { --appt-accent: var(--color-chart-4); }
  .appt-row--5 { --appt-accent: var(--color-chart-5); }
  .appt-row--6 { --appt-accent: var(--color-chart-6); }
  .appt-row--7 { --appt-accent: var(--color-chart-7); }
  .appt-row--success { --appt-accent: var(--color-success-border); }
  .appt-row--danger { --appt-accent: var(--color-danger-border); }
  .appt-row--neutral { --appt-accent: var(--color-border-strong); }

  /* ------------------------------------------------------------------ UI-POLISH-CAL
     Scheduling settings and appointment pages: cards on a two-column page (details left,
     actions right; one column in DOM order below 64em, no reordering), list rows with their
     action at the end, the person picker, the 7-day open-times preview and numbered steps. */
  .sched-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-items: start; }
  .sched-page__main,
  .sched-page__side { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); min-width: 0; align-content: start; }
  @media (min-width: 64em) {
    .sched-page--split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-6); }
  }
  .sched-narrow { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); max-width: 48rem; }
  .sched-form { display: grid; gap: var(--space-4); }
  .sched-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); align-items: start; }
  /* A hint sits under its input (error last), so a field with a hint lines up with its neighbours. */
  .sched-grid > .field > .field__hint { order: 1; }
  .sched-grid > .field > .field__error { order: 2; }
  .sched-reminders { display: grid; gap: var(--space-3); }
  .sched-reminders__presets { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0; padding: 0; border: 0; }
  .sched-reminders__presets legend { margin-block-end: var(--space-2); padding: 0; }
  .sched-reminders__custom { max-inline-size: 24rem; }
  .sched-checks { display: grid; gap: var(--space-3); }
  .sched-help { margin: 0; color: var(--color-text-secondary); font-size: var(--text-sm); line-height: var(--leading-ui); }
  .sched-picker { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: end; }
  .sched-picker .field { flex: 0 1 16rem; margin: 0; }
  .sched-rows { display: grid; margin: 0; padding: 0; list-style: none; }
  .sched-row { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center; padding-block: var(--space-3); border-block-start: var(--border-width) solid var(--color-border-subtle); }
  .sched-row:first-child { border-block-start: 0; padding-block-start: 0; }
  .sched-row:last-child { padding-block-end: 0; }
  .sched-row__label { flex: 0 0 7rem; font-weight: var(--font-weight-semibold); }
  .sched-row__body { display: grid; flex: 1 1 14rem; gap: var(--space-1); min-width: 0; }
  .sched-row__body > .badge { justify-self: start; }
  .sched-row__line { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); align-items: center; }
  .sched-row__meta { color: var(--color-text-secondary); font-size: var(--text-sm); }
  .sched-row__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; }
  .sched-rule { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); align-items: center; justify-content: space-between; }
  .sched-rule form { margin: 0; }
  .sched-week { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
  .sched-week__day { display: grid; gap: var(--space-1-5); }
  .sched-week__date { margin: 0; font-size: var(--text-sm); font-weight: var(--font-weight-semibold); }
  .sched-times { display: flex; flex-wrap: wrap; gap: var(--space-1-5); margin: 0; padding: 0; list-style: none; }
  .sched-time { padding: var(--space-0-5) var(--space-2); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-full); background: var(--color-surface-sunken); font-size: var(--text-sm); font-variant-numeric: var(--font-numeric-tabular); }
  .sched-empty-line { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }
  .sched-feed-url { overflow-wrap: anywhere; }
  .cal-filters .calendar__toolbar .field { flex: 0 1 14rem; }
}