/* ==========================================================================
   APPOINTMENTS — list, appointment panel
   --------------------------------------------------------------------------
   Owned by the appointments 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.

   Every class here is prefixed `.appt-`. Where a token comes from apple.css only
   (--color-fill, --color-thumb, --shadow-thumb) it carries a fallback to a token
   app.css defines, so the panel still reads if that layer is absent.

   Contents
     1  Panel frame           6  Date and time chooser
     2  Steps and portal      7  The live appointment
     3  Copy chips            8  Actions and inline forms
     4  Forms and fields      9  Details: timeline, reminders
     5  Segmented control    10  Previous appointments, empty bits
   ========================================================================== */

/* ==========================================================================
   1 · PANEL FRAME
   ========================================================================== */

.appt-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  min-inline-size: 0;

  /* The layout answers to the width of the box the panel sits in, not to the
     window: on the application page it may be a narrow column beside other cards. */
  container: appt / inline-size;
}

/* Collapses to nothing until a message arrives; the element itself stays in the
   DOM so assistive technology announces what is inserted into it. */
.appt-announce:empty { display: none; }

.appt-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-inline-size: 0;
}

.appt-section__head { display: flex; flex-direction: column; gap: var(--space-1); }

.appt-section__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}

.appt-section__intro { color: var(--color-text-muted); font-size: var(--font-size-sm); }

.appt-muted { color: var(--color-text-muted); }

.appt-hint {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}
.appt-hint > .icon { margin-block-start: 0.2em; }

/* ==========================================================================
   2 · STEPS AND THE OFFICIAL PORTAL
   Booking happens on the official portal, by hand; recording happens here. The
   two boxes are numbered so the order of work is the order on the screen.
   ========================================================================== */

.appt-step {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-inline-size: 0;
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.appt-step__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
}

.appt-step__num {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary-fg);
  background: var(--color-primary);
  border-radius: var(--radius-circle);
}

/* Prominent, and honest about what it is: a plain link to somewhere else. */
.appt-portal {
  background: var(--color-primary-soft);
  border-color: var(--color-primary-border);
  border-inline-start: 4px solid var(--color-primary);
}

.appt-portal__lead {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
}

.appt-portal__note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text);
}
.appt-portal__note-icon { margin-block-start: 0.2em; color: var(--color-primary); }

.appt-portal__action { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* The label names the portal and can be long in some languages; let it wrap rather
   than push the button out of its box. */
.appt-portal__action .btn {
  max-inline-size: 100%;
  padding-block: var(--space-2);
  line-height: var(--line-height-snug);
  text-align: center;
  white-space: normal;
}

/* ==========================================================================
   3 · COPY CHIPS
   One tap puts a value on the clipboard (data-copy handler, dashboard.js). The
   handler sets data-copied / data-copy-failed for a couple of seconds; the state is
   shown by an icon AND a word, never by colour alone.
   ========================================================================== */

.appt-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-block-start: var(--space-1);
  padding-block-start: var(--space-4);
  border-block-start: 1px dashed var(--color-primary-border);
}

.appt-copy__title { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }

.appt-copy__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--space-2);
  margin-block-start: var(--space-1);
}

.appt-copy-chip {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  inline-size: 100%;
  min-block-size: var(--tap-target-min);
  padding-block: var(--space-2);
  padding-inline: var(--space-3);
  text-align: start;
  color: var(--color-text);
  cursor: pointer;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  transition: background-color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}
.appt-copy-chip:hover { background: var(--color-surface-hover); }

.appt-copy-chip__icon { flex: 0 0 auto; color: var(--color-text-muted); }
.appt-copy-chip__icon--done,
.appt-copy-chip__icon--fail { display: none; }

.appt-copy-chip__text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-inline-size: 0;
}
.appt-copy-chip__label { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.appt-copy-chip__value {
  overflow: hidden;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-align: start;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.appt-copy-chip__state {
  flex: 0 0 auto;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-link);
}
.appt-copy-chip__done,
.appt-copy-chip__fail { display: none; }

.appt-copy-chip[data-copied='true'] {
  background: var(--color-success-soft);
  border-color: var(--color-success);
}
.appt-copy-chip[data-copied='true'] .appt-copy-chip__icon--copy,
.appt-copy-chip[data-copied='true'] .appt-copy-chip__idle { display: none; }
.appt-copy-chip[data-copied='true'] .appt-copy-chip__icon--done { display: inline-block; color: var(--color-success-fg); }
.appt-copy-chip[data-copied='true'] .appt-copy-chip__done { display: inline; }
.appt-copy-chip[data-copied='true'] .appt-copy-chip__state { color: var(--color-success-fg); }

.appt-copy-chip[data-copy-failed='true'] {
  background: var(--color-danger-soft);
  border-color: var(--color-danger);
}
.appt-copy-chip[data-copy-failed='true'] .appt-copy-chip__icon--copy,
.appt-copy-chip[data-copy-failed='true'] .appt-copy-chip__idle { display: none; }
.appt-copy-chip[data-copy-failed='true'] .appt-copy-chip__icon--fail { display: inline-block; color: var(--color-danger-fg); }
.appt-copy-chip[data-copy-failed='true'] .appt-copy-chip__fail { display: inline; }
.appt-copy-chip[data-copy-failed='true'] .appt-copy-chip__state { color: var(--color-danger-fg); }

/* ==========================================================================
   4 · FORMS AND FIELDS
   ========================================================================== */

.appt-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-inline-size: 0;
}

/* An inline form opened from the live card sits flush under the actions. */
.appt-form--panel {
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface-sunken);
  border-block-start: 1px solid var(--color-border);
}

.appt-form__title { font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); }

.appt-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--space-4);
}
/* app.css spaces adjacent .field siblings for a stacked form; in a grid the gap
   already does that, and the extra margin would push every second cell down. */
.appt-fields > .field { margin-block-start: 0; }

.appt-fieldset {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-inline-size: 0;
}

.appt-legend {
  padding: 0;
  margin-block-end: var(--space-1);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.appt-picked {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-success-fg);
  background: var(--color-success-soft);
  border: 1px solid var(--color-success-border);
  border-radius: var(--radius-md);
}

/* While a choice is being re-read from the server. */
.appt-is-loading { opacity: 0.6; transition: opacity var(--duration-base) var(--ease-standard); }

/* ==========================================================================
   5 · SEGMENTED CONTROL
   Two real radio inputs, so the arrow keys and the screen-reader announcement
   ("1 of 2") come from the browser. The input is laid over its label, invisible
   but still the thing that is focused and clicked.
   ========================================================================== */

.appt-seg {
  display: inline-flex;
  align-self: flex-start;
  gap: 2px;
  max-inline-size: 100%;
  padding: 3px;
  background: var(--color-fill, var(--color-surface-sunken));
  border-radius: var(--radius-pill);
}

.appt-seg__option { position: relative; display: block; flex: 1 1 auto; cursor: pointer; }

.appt-seg__input {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  margin: 0;
  cursor: pointer;
  opacity: 0;
}

.appt-seg__face {
  display: flex;
  align-items: center;
  justify-content: center;
  min-block-size: calc(var(--control-height-md) - 6px);
  padding-inline: var(--space-4);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  text-align: center;
  border-radius: var(--radius-pill);
  transition: background-color var(--duration-base) var(--ease-standard),
              color var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard);
}

.appt-seg__option:hover .appt-seg__face { color: var(--color-text); }

.appt-seg__input:checked + .appt-seg__face {
  color: var(--color-text);
  background: var(--color-thumb, var(--color-surface));
  box-shadow: var(--shadow-thumb, var(--shadow-sm));
}

.appt-seg__input:focus-visible + .appt-seg__face {
  outline: var(--focus-ring-width) solid var(--color-focus);
  outline-offset: var(--focus-ring-offset);
}

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

/* ==========================================================================
   6 · DATE AND TIME CHOOSER
   Radio-style chips: the radio is real (one tab stop, arrow keys inside the group)
   and laid over its chip. "Chosen" is a thicker rim, a tint and a check mark.
   ========================================================================== */

.appt-dates__scroll {
  max-block-size: 20rem;
  padding: var(--space-3);
  overflow-y: auto;
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.appt-dates__group + .appt-dates__group { margin-block-start: var(--space-4); }

.appt-dates__month {
  margin-block-end: var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
}

.appt-dates__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.25rem, 1fr));
  gap: var(--space-2);
}

.appt-times__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
  gap: var(--space-2);
}

.appt-chip { position: relative; display: block; cursor: pointer; }

.appt-chip__input {
  position: absolute;
  inset: 0;
  z-index: 1;
  inline-size: 100%;
  block-size: 100%;
  margin: 0;
  cursor: pointer;
  opacity: 0;
}

.appt-chip__face {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-block-size: 3.5rem;
  padding-block: var(--space-2);
  padding-inline: var(--space-2);
  color: var(--color-text);
  text-align: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  transition: background-color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}

.appt-chip:hover .appt-chip__face { background: var(--color-surface-hover); border-color: var(--color-text-subtle); }

.appt-chip__input:checked + .appt-chip__face {
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
  box-shadow: inset 0 0 0 1px var(--color-primary);
}

.appt-chip__input:focus-visible + .appt-chip__face {
  outline: var(--focus-ring-width) solid var(--color-focus);
  outline-offset: var(--focus-ring-offset);
}

.appt-chip__weekday { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.appt-chip__main { font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); }
.appt-chip__places { font-size: var(--font-size-xs); color: var(--color-text-muted); }

.appt-chip__check {
  position: absolute;
  inset-block-start: var(--space-1);
  inset-inline-end: var(--space-1);
  inline-size: 0.875rem;
  block-size: 0.875rem;
  color: var(--color-primary);
  display: none;
}
.appt-chip__input:checked + .appt-chip__face .appt-chip__check { display: block; }
.appt-chip__input:checked + .appt-chip__face .appt-chip__main,
.appt-chip__input:checked + .appt-chip__face .appt-chip__weekday { color: var(--color-link); }

/* ==========================================================================
   7 · THE LIVE APPOINTMENT
   A ticket: the date and time are the largest thing on it, the crossing and the
   reference sit beside them.
   ========================================================================== */

.appt-live {
  min-inline-size: 0;
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
}

.appt-live__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-3);
  padding-inline: var(--space-5);
  background: var(--color-surface-sunken);
  border-block-end: 1px solid var(--color-border);
}

.appt-live__body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--space-5);
  padding: var(--space-5);
}

.appt-live__main { display: flex; flex-direction: column; gap: var(--space-4); min-inline-size: 0; }

.appt-when {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-inline-size: 8rem;
  padding: var(--space-4);
  text-align: center;
  background: var(--color-primary-soft);
  border: 1px solid var(--color-primary-border);
  border-radius: var(--radius-lg);
}
.appt-when__weekday { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-link); }
.appt-when__day { font-size: var(--font-size-3xl); font-weight: var(--font-weight-bold); line-height: 1.1; }
.appt-when__month { font-size: var(--font-size-sm); }
.appt-when__time {
  inline-size: 100%;
  margin-block-start: var(--space-2);
  padding-block-start: var(--space-2);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  border-block-start: 1px solid var(--color-primary-border);
}
.appt-when__zone { font-size: var(--font-size-2xs); color: var(--color-text-muted); }

/* Held locally, not yet confirmed by the official side: a warning shape plus words. */
.appt-pending {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  font-weight: var(--font-weight-semibold);
  color: var(--color-warning-fg);
  background: var(--color-warning-soft);
  border: 1px solid var(--color-warning-border);
  border-inline-start: 4px solid var(--color-warning);
  border-radius: var(--radius-md);
}
.appt-pending__icon { flex: 0 0 auto; margin-block-start: 0.1em; }

.appt-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--space-3) var(--space-5);
}
.appt-facts__row { min-inline-size: 0; }
.appt-facts__row--wide { grid-column: 1 / -1; }
.appt-facts dt { font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--color-text-muted); }
.appt-facts dd { overflow-wrap: anywhere; }

/* ==========================================================================
   8 · ACTIONS AND INLINE FORMS
   ========================================================================== */

.appt-live__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-block: var(--space-4);
  padding-inline: var(--space-5);
  border-block-start: 1px solid var(--color-border);
}

.appt-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* The button whose form is open is ringed — a shape, so it reads without colour. */
.appt-actions .btn[aria-expanded='true'] {
  box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-primary);
}

/* Cancelling is the one action that gives something up; it reads as such without
   shouting, because pressing it only opens a form that asks for a reason. */
.appt-btn--danger { color: var(--color-danger-fg); border-color: var(--color-danger-border); }
.appt-btn--danger:hover { color: var(--color-danger-fg); background: var(--color-danger-soft); border-color: var(--color-danger); }

/* The words that explain a disabled button — a disabled control cannot take focus
   to explain itself, so the reason is plain text beside it. */
.appt-reason {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* ==========================================================================
   9 · DETAILS — status history and reminders
   A <details>: no script. Its triangle points along the writing direction when shut
   and down when open, so the state is a shape.
   ========================================================================== */

.appt-details { border-block-start: 1px solid var(--color-border); }

.appt-details__summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: var(--tap-target-min);
  padding-inline: var(--space-5);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  cursor: pointer;
  list-style: none;
}
.appt-details__summary::-webkit-details-marker { display: none; }
.appt-details__summary:hover { color: var(--color-text); background: var(--color-surface-hover); }

.appt-details__summary::before {
  content: '';
  flex: 0 0 auto;
  inline-size: 0.3125rem;
  block-size: 0.5rem;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
[dir='rtl'] .appt-details__summary::before { clip-path: polygon(100% 0, 0 50%, 100% 100%); }
.appt-details[open] > .appt-details__summary::before {
  inline-size: 0.5rem;
  block-size: 0.3125rem;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.appt-details__body {
  display: grid;
  gap: var(--space-5);
  padding-block: var(--space-2) var(--space-5);
  padding-inline: var(--space-5);
}

.appt-details__title { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }

.appt-timeline {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-block-start: var(--space-3);
  padding-inline-start: var(--space-5);
  border-inline-start: 2px solid var(--color-border);
}
.appt-timeline__item { position: relative; }
.appt-timeline__item::before {
  content: '';
  position: absolute;
  inset-block-start: 0.45em;
  inset-inline-start: calc(-1 * (var(--space-5) + 1px + 0.3125rem));
  inline-size: 0.625rem;
  block-size: 0.625rem;
  background: var(--color-surface);
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-circle);
}
/* The newest entry is the one that says where things stand now. */
.appt-timeline__item:first-child::before { background: var(--color-primary); border-color: var(--color-primary); }
.appt-timeline__what { font-weight: var(--font-weight-semibold); }
.appt-timeline__meta { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.appt-timeline__note { margin-block-start: var(--space-1); font-size: var(--font-size-sm); }

.appt-reminders { display: flex; flex-direction: column; margin-block-start: var(--space-2); }
.appt-reminders__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-4);
  padding-block: var(--space-2);
  font-size: var(--font-size-sm);
}
.appt-reminders__item + .appt-reminders__item { border-block-start: 1px solid var(--color-border-subtle); }
.appt-reminders__offset { min-inline-size: 7rem; font-weight: var(--font-weight-medium); }
.appt-reminders__when { flex: 1 1 auto; color: var(--color-text-muted); }
.appt-reminders__channel { color: var(--color-text-muted); }

/* ==========================================================================
   10 · PREVIOUS APPOINTMENTS, MISSING DOCUMENTS
   ========================================================================== */

.appt-past { display: flex; flex-direction: column; gap: var(--space-3); }

.appt-past__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-inline-size: 0;
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.appt-past__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
}
.appt-past__when { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); }

.appt-past__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}
.appt-past__key { font-size: var(--font-size-xs); }

.appt-past__chain {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
}
.appt-past__reason { font-size: var(--font-size-sm); overflow-wrap: anywhere; }

/* The history opened from a past item is part of the item, not a second card. */
.appt-past__item .appt-details { margin-block-start: var(--space-1); }
.appt-past__item .appt-details__summary { padding-inline: 0; }
.appt-past__item .appt-details__body { padding-inline: 0; }

.appt-missing {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  inline-size: 100%;
  max-inline-size: 28rem;
  margin-inline: auto;
}
.appt-missing__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  color: var(--color-danger-fg);
  background: var(--color-danger-soft);
  border: 1px solid var(--color-danger-border);
  border-radius: var(--radius-md);
}
.appt-missing__icon { flex: 0 0 auto; }

/* ==========================================================================
   NARROW — a calm single column, whatever the window (375 px phone, or a narrow
   column on a wide screen). Written as a container query on `.appt-stack`.
   ========================================================================== */

@container appt (max-inline-size: 36rem) {
  .appt-step { padding: var(--space-3); }

  /* The date block becomes a strip above the facts instead of a column beside them. */
  .appt-live__body { grid-template-columns: minmax(0, 1fr); padding: var(--space-4); }
  .appt-when {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-1) var(--space-3);
    padding: var(--space-3);
  }
  .appt-when__day { font-size: var(--font-size-2xl); }
  .appt-when__time {
    inline-size: auto;
    margin-block-start: 0;
    padding-block-start: 0;
    font-size: var(--font-size-lg);
    border-block-start: 0;
  }

  .appt-live__head,
  .appt-live__actions,
  .appt-form--panel,
  .appt-details__summary,
  .appt-details__body { padding-inline: var(--space-4); }

  .appt-actions .btn,
  .appt-portal__action .btn { flex: 1 1 100%; inline-size: 100%; }

  /* Two long labels share the width, so they may take two lines; a pill that tall
     would be a capsule with bulging ends, hence the softer corners. */
  .appt-seg { display: flex; align-self: stretch; inline-size: 100%; border-radius: var(--radius-lg); }
  .appt-seg__face {
    padding-block: var(--space-1);
    padding-inline: var(--space-2);
    line-height: var(--line-height-snug);
    border-radius: var(--radius-md);
  }

  .appt-dates__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .appt-times__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .appt-copy__list { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .appt-chip__face,
  .appt-seg__face,
  .appt-copy-chip,
  .appt-is-loading { transition: none; }
}

/* Forced colours drop backgrounds, so "chosen" falls back to a heavier outline. */
@media (forced-colors: active) {
  .appt-chip__input:checked + .appt-chip__face,
  .appt-seg__input:checked + .appt-seg__face { outline: 3px solid Highlight; outline-offset: -3px; }
  .appt-copy-chip[data-copied='true'],
  .appt-copy-chip[data-copy-failed='true'] { border-width: 3px; }
}