/**
 * Section: Consultation scheduler
 *
 * Ported from _mockups/index.html `.c-book` / `.c-sched` / `.c-day` /
 * `.c-slot` / `.c-specialist`. `book-consultation.html` re-declares the same
 * card verbatim under `.bc-` names; that is drift, and index.html wins per the
 * inventory. One component, one stylesheet.
 *
 * SINGLE CONSUMER, so it belongs here and not in components.css. The ticked
 * list is the exception: `.pasia-ticklist` is already shared by feature-row,
 * checklist-pair and process-flow, so this section uses it and adds nothing
 * but the spacing that follows it.
 *
 * Every rule is a descendant of `.consultation-scheduler`. `csched-` is this
 * section's short internal prefix; the section id is on the root element.
 *
 * Tokens only. The literals that remain are ratios and hairlines, not design
 * values: em paddings that scale with their own font size (the same idiom as
 * `--btn-padding-block: .95em` and `.pasia-ticklist { padding-left: 1.7em }`),
 * letter-spacing in em (as `.ph-badge` and `.tag` do in components.css), 1px
 * hairlines, a 2px hover lift matching `.btn:hover`, and the 52px portrait,
 * which is `.hcard .avatar`'s 60px idiom one step down. There is no token for
 * any of those and tokens.css is not this agent's file.
 *
 * ===========================================================================
 * CONTRAST, MEASURED RATHER THAN ESTIMATED
 * ===========================================================================
 * Band is `--surface-2` #efeadd. Card is `--paper` #ffffff.
 *
 *   ON --surface-2 #efeadd
 *     --ink            #14231f   heading            13.55:1
 *     --ink-soft       #45524d   body, points, note  6.81:1
 *     --gold-deep      #7e622e   eyebrow, tick mark  4.76:1  AA, tight
 *
 *   ON --paper #ffffff
 *     --ink            #14231f   card head, numeral 16.28:1
 *     --ink-soft       #45524d   slot label          8.18:1
 *     --ink-faint      #5f6b66   caption, month,
 *                                day name, fine      5.55:1
 *     --gold-deep on the badge fill #f9f3e9           5.18:1
 *     --gold-deep      #7e622e   today's day name    5.72:1
 *
 *   ON --forest #0e4038, the pressed state
 *     --gold-bright    #d8b25e   day name            5.78:1
 *     --paper          #ffffff   numeral, slot      11.61:1
 *
 * All of the above clear AA for normal text.
 *
 * THE DISABLED STATE, WHICH ONLY EXISTS WITH JAVASCRIPT OFF.
 *
 * Day and slot buttons use the mock-up's own
 * `.c-day:disabled { opacity: .38 }`, which the inventory names as the
 * existing vocabulary for exactly this. Measured, that composites to 1.71:1
 * for the day name, 2.33:1 for the numeral and 1.90:1 for a slot. Those fail
 * AA and are permitted to: WCAG 1.4.3 exempts inactive user interface
 * components, nothing in the row is actionable, and the caption, the
 * `[Client to supply: live availability]` badge on the slots and the closing
 * line all carry the meaning in full-contrast text beside them.
 *
 * There is no second disabled state. An earlier version of this section
 * rendered the mock-up's "Confirm booking" button permanently disabled and
 * restyled it to clear AA at 6.81:1, which fixed the contrast and left the
 * affordance: with JavaScript off it was the only fully legible control in a
 * card of faded ones, so the one permanently dead thing read as the most
 * alive. The button is gone. See the section file's header.
 *
 * Re-measure everything above if any of these tokens moves.
 */

/* ===========================================================================
 * LAYOUT
 * ======================================================================== */

/* Mobile first. The mock-up writes `@media (max-width: 860px)`; 860 is the
   documented "split heroes stack" breakpoint in tokens.css. --s-7 is 4.5rem,
   which is the mock-up's own clamp ceiling exactly. */
.consultation-scheduler .csched-grid {
  display: grid;
  gap: var(--s-5);
}

@media (min-width: 861px) {
  .consultation-scheduler .csched-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-7);
    align-items: center;
  }
}

/* ===========================================================================
 * COPY COLUMN
 * ======================================================================== */
.consultation-scheduler .csched-copy h2 {
  font-size: var(--text-3xl);
  margin: var(--s-3) 0;
}

.consultation-scheduler .csched-body {
  color: var(--ink-soft);
  font-size: var(--text-lg);
  margin-bottom: var(--s-4);
}

/* The specialist pill hugs its content and never exceeds its column. It has to
   be `max-width: max-content` and not `width: max-content`, which was measured
   rather than guessed: `width` makes the element's min-content CONTRIBUTION
   equal to its max-content, so the single-column grid track above it sized to
   the full role line and pushed the page to 358px of scroll at a 320px
   viewport. `max-width` only caps, so the pill fills the column when the role
   line is longer than the column and hugs when it is not. */
.consultation-scheduler .csched-specialist {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  max-width: max-content;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: var(--s-1) var(--s-4) var(--s-1) var(--s-1);
  box-shadow: var(--shadow-s);
}

.consultation-scheduler .csched-portrait {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}

.consultation-scheduler .csched-name {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--ink);
  line-height: var(--leading-snug);
}

.consultation-scheduler .csched-role {
  font-size: var(--text-xs);
  color: var(--ink-faint);
}

/* Shown only while a portrait is on the page and no real name has arrived.
   --ink-soft rather than --ink-faint: this is compliance copy, and --ink-faint
   measures 4.62:1 on this band where --ink-soft measures 6.81:1. */
.consultation-scheduler .csched-photo-note {
  margin-top: var(--s-2);
  font-size: var(--text-sm);
  color: var(--ink-soft);
  max-width: 46ch;
}

/* The ticked list is `.pasia-ticklist` from components.css and needs nothing
   added: its own `margin: var(--s-4) 0 0` is the mock-up's spacing above, and
   the rule below is the spacing below. Re-porting the list here would give one
   rule two owners, which is how the button system broke in Phase 0.

   Derived, not a field: no button means no gap under the list. */
.consultation-scheduler .csched-actions {
  margin-top: var(--s-5);
}

/* The outstanding-detail line under the button: a badge and its explanation,
   which should break as one thing rather than leaving the badge stranded on a
   line of its own. `.cta-dark-note` and `.cta-split-note` are the identical
   treatment and this is deliberately a third copy of five declarations rather
   than a shared class: both of those live in their own section stylesheets,
   and a section stylesheet is not enqueued on a page that does not contain
   that section. /book-consultation/ has no `cta-dark` band at all, which is
   the whole reason this field exists, so borrowing the class would ship an
   unstyled line on the one page it is for. AGENTS.md §2.

   --ink-soft, matching `.csched-photo-note` above and for the same reason:
   this is compliance copy and --ink-faint measures 4.62:1 on this band. */
.consultation-scheduler .csched-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5em;
  margin-top: var(--s-4);
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

/* ===========================================================================
 * THE PREVIEW CARD
 * ======================================================================== */
.consultation-scheduler .csched-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  box-shadow: var(--shadow-lift);
}

@media (min-width: 561px) {
  .consultation-scheduler .csched-card {
    padding: var(--s-5);
  }
}

.consultation-scheduler .csched-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
}

.consultation-scheduler .csched-card-head h3 {
  font-size: var(--text-lg);
}

.consultation-scheduler .csched-month {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-faint);
}

/* The caption is a flex row rather than the mock-up's `display: block`,
   because it holds the placeholder badge beside the label. */
.consultation-scheduler .csched-cap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1);
  margin-bottom: var(--s-1);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* The badge is a sentence, not a label. It must not inherit the caption's
   uppercase or its wide tracking. */
.consultation-scheduler .csched-cap .ph-badge {
  text-transform: none;
  letter-spacing: .04em;
}

/* ---- days ---------------------------------------------------------------
   Six columns is the design, and it is a min-width feature rather than the
   base. A grid item's `min-width` is `auto`, so a `1fr` track cannot shrink
   below the button's min-content width, and that floor is 41px: a three-letter
   weekday at --text-xs plus the em padding and the 1.5px border. Six of those
   plus five gaps plus the card padding plus the page gutter needs 374px.

   MEASURED, in the shipped cascade, forcing six columns at a 320px viewport:
   shipped 0px of overflow, six columns forced 5px. Not 358px. An earlier
   version of this comment claimed 358, which is the pill's number and belongs
   to the note on `.csched-specialist` above; two comments cannot both own it.
   The audit measured 1px for the same counterfactual against the previous
   revision, before the today marker's border doubled and widened the track
   that sizes every column.

   5px is still small, so target size is the load-bearing reason rather than
   the makeweight. Day button widths swept 320 to 1920: 71.33 at 320, 84.66 at
   360, 89.66 at 375, 102.20 at 414, 146.00 at 560, 66.48 at 561, 97.53 at 768,
   111.33 at 860, 45.27 at 861, 45.39 at 900, 53.13 at 1024, 65.66 at 1440 and
   above. Heights run 58.39 to 63.78.

   The narrowest the control ever gets is 45.27 x 60.86 at 861px, where the
   two-column grid first engages and the card is at its most cramped. That
   clears SC 2.5.8 Target Size (Minimum), which is 24x24 at AA, and it also
   clears SC 2.5.5 Enhanced's 44x44, which is AAA and not this project's bar.
   Every width in the sweep clears both.

   The first version of this comment named the wrong success criterion (2.5.8
   is 24x24, the 44x44 figure is 2.5.5), the wrong threshold and the wrong
   width, and claimed this rule was the first time the control cleared 44px,
   which was never true. */
.consultation-scheduler .csched-days {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-1);
  margin-bottom: var(--s-4);
}

@media (min-width: 561px) {
  .consultation-scheduler .csched-days {
    grid-template-columns: repeat(6, 1fr);
  }
}

.consultation-scheduler .csched-day {
  display: grid;
  gap: var(--space-3xs);
  justify-items: center;
  padding: .6em .2em;
  border: var(--btn-border-width) solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
  font-family: var(--sans);
  cursor: pointer;
  transition: border-color var(--dur-fast) ease,
              background-color var(--dur-fast) ease,
              transform var(--dur-fast) var(--ease-out-soft);
}

.consultation-scheduler .csched-day-name {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  line-height: var(--leading-tight);
}

.consultation-scheduler .csched-day-num {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--text-lg);
  color: var(--ink);
  line-height: var(--leading-tight);
}

/* Today. A real fact about the calendar, not a selection, so it is a marker
   and never `aria-pressed`.

   Three signals, because one of them is colour and SC 1.4.1 says colour cannot
   be the only one. The border DOUBLES in width, which is the non-colour signal
   and survives any colour vision; the keyline goes gold, which measures only
   2.56:1 against paper and so could not carry this alone; and the weekday
   takes --gold-deep at 5.72:1. The accessible name ends ", today", so a screen
   reader never depended on any of the three.

   Used values measured at DPR 1: 3px against a plain cell's 1px, because
   1.5px rounds down and 3px does not, so the difference reads as 3x rather
   than 2x. That also widens the track that sizes every column by 3px, which
   is why the counterfactual in the day-grid note below moved. */
.consultation-scheduler .csched-day.is-today {
  border-width: calc(var(--btn-border-width) * 2);
  border-color: var(--gold);
}

.consultation-scheduler .csched-day.is-today .csched-day-name {
  color: var(--gold-deep);
}

/* `:not([aria-pressed="true"])` rather than source order. Hover and pressed
   used to be ordered rules at (0,4,0) and (0,3,0), and hover won: the slot's
   hover sets `color: var(--forest)` while pressed sets `background:
   var(--forest)`, so the label of the slot you had just clicked composited to
   1.00:1 and vanished under the pointer that selected it. The mock-up escapes
   because both its rules are (0,3,0) and pressed is declared later; adding
   `:not(:disabled)` here is what flipped the winner. Excluding the pressed
   state outright makes the outcome independent of specificity and of order,
   which is the only version of this that cannot be re-broken by an edit
   somewhere else in the file. */
.consultation-scheduler .csched-day:hover:not(:disabled):not([aria-pressed="true"]) {
  border-color: var(--pine);
  transform: translateY(-2px);
}

.consultation-scheduler .csched-day[aria-pressed="true"] {
  border-color: var(--forest);
  background: var(--forest);
}

.consultation-scheduler .csched-day[aria-pressed="true"] .csched-day-name {
  color: var(--gold-bright);
}

.consultation-scheduler .csched-day[aria-pressed="true"] .csched-day-num {
  color: var(--paper);
}

/* ---- slots -------------------------------------------------------------- */
.consultation-scheduler .csched-slots {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-1);
  margin-bottom: var(--s-4);
}

.consultation-scheduler .csched-slot {
  padding: .7em;
  border: var(--btn-border-width) solid var(--line);
  border-radius: var(--r-pill);
  background: var(--paper);
  font-family: var(--sans);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-soft);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--dur-fast) ease,
              background-color var(--dur-fast) ease,
              color var(--dur-fast) ease;
}

/* See the note on the day button's hover rule. This is the one that measured
   1.00:1: forest text on a forest ground, on the state you are left in the
   instant after clicking a slot. */
.consultation-scheduler .csched-slot:hover:not(:disabled):not([aria-pressed="true"]) {
  border-color: var(--pine);
  color: var(--forest);
}

.consultation-scheduler .csched-slot[aria-pressed="true"] {
  border-color: var(--forest);
  background: var(--forest);
  color: var(--paper);
}

/* ---- the no-JavaScript state -------------------------------------------
   The mock-up's own `.c-day:disabled`. See the contrast block at the top of
   this file for the numbers and for why they are permitted to fail AA. The
   mock-up has no slot equivalent; without one the two rows would disagree
   about what "unavailable" looks like. */
.consultation-scheduler .csched-day:disabled,
.consultation-scheduler .csched-slot:disabled {
  opacity: .38;
  cursor: not-allowed;
}

.consultation-scheduler .csched-day:disabled:hover,
.consultation-scheduler .csched-slot:disabled:hover {
  border-color: var(--line);
  transform: none;
}

/* ---- the closing line ---------------------------------------------------
   There is no confirm button, so this closes the card and is given a hairline
   to do it deliberately rather than look truncated. The mock-up's gold
   "Confirm booking" pill is gone on purpose; the reasoning is in the section
   file's header. */
.consultation-scheduler .csched-fine {
  margin-top: 0;
  padding-top: var(--s-3);
  border-top: 1px solid var(--line-soft);
  text-align: center;
  font-size: var(--text-xs);
  color: var(--ink-faint);
}