/* Appointment request page (LIGHT-1, restyled in MEDA-20). Two themes (light / dark) with "system" as the default: no data-theme
   attribute follows prefers-color-scheme. Every colour on this page comes from the --bk-* tokens below; tests check that both
   themes define the same tokens and that text/background pairs keep a contrast ratio of at least 4.5:1.
   Dark canvas, recessed field and accent are the measured Figma values (design canons 04-EXTRACTED-VALUES). Implementation choices that
   are NOT Figma facts: the dark card surface (grouping), charcoal text on the green accent (white on that green is about 2.6:1), the
   darker light-theme accent (so white text stays legible), --bk-line (decorative only). Map: docs/light/MEDA-20-DESIGN.md. */
:root {
  color-scheme: light;
  --bk-bg: #f6f8f7; --bk-surface: #ffffff; --bk-field: #ffffff; --bk-line: #dfe5e1; --bk-fg: #1b2621; --bk-muted: #4d5b54; --bk-border: #74837a;
  --bk-accent: #0e7443; --bk-on-accent: #ffffff; --bk-link: #0b6b3d; --bk-focus: #1b2621;
  --bk-ok: #0b6b3d; --bk-warn: #7d5200; --bk-danger: #b3261e; --bk-scrim: rgba(0, 0, 0, 0.5);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bk-bg: #323233; --bk-surface: #3b3b3c; --bk-field: #1d1d1d; --bk-line: #626263; --bk-fg: #ffffff; --bk-muted: #b8b8b8; --bk-border: #8a8a8b;
  --bk-accent: #21b46d; --bk-on-accent: #10241a; --bk-link: #6ee7a8; --bk-focus: #ffffff;
  --bk-ok: #6ee7a8; --bk-warn: #f5c26b; --bk-danger: #ff9a92; --bk-scrim: rgba(0, 0, 0, 0.5);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bk-bg: #323233; --bk-surface: #3b3b3c; --bk-field: #1d1d1d; --bk-line: #626263; --bk-fg: #ffffff; --bk-muted: #b8b8b8; --bk-border: #8a8a8b;
    --bk-accent: #21b46d; --bk-on-accent: #10241a; --bk-link: #6ee7a8; --bk-focus: #ffffff;
    --bk-ok: #6ee7a8; --bk-warn: #f5c26b; --bk-danger: #ff9a92; --bk-scrim: rgba(0, 0, 0, 0.5);
  }
}

body[data-page="book"] { background: var(--bk-bg); color: var(--bk-fg); }
body[data-page="book"] .bar { background: var(--bk-bg); gap: 8px 12px; }
body[data-page="book"] .brand { color: var(--bk-link); }
body[data-page="book"] .tag, body[data-page="book"] .help { color: var(--bk-muted); }
body[data-page="book"] h1, body[data-page="book"] h2 { color: var(--bk-fg); margin: 0 0 8px; }
body[data-page="book"] h1 { font: 600 26px/32px var(--mb-font-text); }
body[data-page="book"] a { color: var(--bk-link); }
body[data-page="book"] main { gap: 16px; }
body[data-page="book"]:not([data-view]) .card { display: grid; gap: 20px; padding: 16px; background: var(--bk-surface); border: 1px solid var(--bk-line); border-radius: 12px; color: var(--bk-fg); }
body[data-page="book"]:not([data-view]) .card > p { margin: 0; }
body[data-page="book"] button { min-height: 48px; padding: 0 16px; border-radius: 8px; font: 600 16px/22px var(--mb-font-text);
  background: transparent; color: var(--bk-link); border: 1px solid var(--bk-link); cursor: pointer; }
body[data-page="book"] button.primary { background: var(--bk-accent); color: var(--bk-on-accent); border-color: var(--bk-accent); }
body[data-page="book"] button:disabled, body[data-page="book"] button.primary:disabled { cursor: not-allowed; background: var(--bk-surface); color: var(--bk-muted); border-color: var(--bk-border); }
body[data-page="book"] select, body[data-page="book"] input[type=text] {
  background: var(--bk-field); color: var(--bk-fg); border: 1px solid var(--bk-border); border-radius: 8px; }
body[data-page="book"] select { height: 40px; width: auto; max-width: 100%; padding: 0 8px; }
body[data-page="book"] input[type=text] { display: block; width: 100%; height: 48px; padding: 0 14px; font-size: 16px; margin-top: 6px; }
body[data-page="book"] input[type=text]::placeholder { color: var(--bk-muted); }
body[data-page="book"] input[type=text]:focus-visible { border-color: var(--bk-accent); }
body[data-page="book"] input[type=text][aria-invalid="true"], body[data-page="book"] input[type=text][aria-invalid="true"]:focus-visible { border-color: var(--bk-danger); border-width: 2px; }
body[data-page="book"] :focus-visible { outline: 3px solid var(--bk-focus); outline-offset: 2px; }
body[data-page="book"] label.help { display: block; color: var(--bk-fg); font: 600 15px/20px var(--mb-font-text); }
body[data-page="book"] .row { display: flex; flex-wrap: wrap; gap: 8px; }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.prefs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.prefs label { display: flex; gap: 6px; align-items: center; color: var(--bk-muted); font: 500 13px/18px var(--mb-font-text); }

.bk-doctor { display: grid; gap: 4px; }
.bk-doctor .doc-top { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.bk-doctor h2 { margin: 0; overflow-wrap: anywhere; }
.bk-badge { padding: 1px 8px; border: 1px solid var(--bk-border); border-radius: 999px; color: var(--bk-muted); font: 600 11px/16px var(--mb-font-text); text-transform: uppercase; }

fieldset { margin: 0; padding: 0; border: 0; min-inline-size: 0; }
legend { padding: 0; margin-bottom: 8px; color: var(--bk-fg); font: 600 16px/22px var(--mb-font-text); }
.bk-options { display: flex; flex-wrap: wrap; gap: 8px; }
.bk-opt { position: relative; }
.bk-opt input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.bk-opt span { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; min-width: 64px; padding: 0 14px;
  border: 1px solid var(--bk-border); border-radius: 8px; background: var(--bk-field); color: var(--bk-fg); font: 500 15px/20px var(--mb-font-text); }
.bk-opt input:checked + span { background: var(--bk-accent); border-color: var(--bk-accent); color: var(--bk-on-accent); font-weight: 700; }
.bk-opt input:checked + span::before { content: "✓\00a0"; }
.bk-opt input:focus-visible + span { outline: 3px solid var(--bk-focus); outline-offset: 2px; }
.bk-opt input:disabled { cursor: not-allowed; }
.bk-opt input:disabled + span { color: var(--bk-muted); background: transparent; border-style: dashed; }
.bk-day { margin: 12px 0 6px; color: var(--bk-muted); font: 600 14px/20px var(--mb-font-text); }
/* MEDA-65: telemed.css `.card p` (0,1,1) beat `.bk-day` (0,1,0), gluing each later day heading to the previous slot row. This outranks it for
   headings that follow a slot row only; the first heading and every other `.card p` keep their spacing. */
body[data-page="book"] #slotDays > .bk-options + .bk-day { margin: 12px 0 6px; }
.bk-field-error { margin: 6px 0 0; color: var(--bk-danger); font: 600 14px/20px var(--mb-font-text); }
.bk-field-error::before { content: "✕\00a0"; }

#statusBox { margin: 0; padding: 12px 14px; border: 2px solid var(--bk-border); border-radius: 12px; background: var(--bk-surface);
  font: 600 15px/22px var(--mb-font-text); overflow-wrap: anywhere; }
#statusBox:empty { display: none; }
#statusBox[data-tone="ok"] { border-color: var(--bk-ok); color: var(--bk-ok); }
#statusBox[data-tone="warn"] { border-color: var(--bk-warn); color: var(--bk-warn); }
#statusBox[data-tone="error"] { border-color: var(--bk-danger); color: var(--bk-danger); }
#statusBox[data-tone="ok"]::before { content: "✓ "; }
#statusBox[data-tone="warn"]::before { content: "! "; }
#statusBox[data-tone="error"]::before { content: "✕ "; }

/* The submitted request: its left edge and status pill follow the server status, so "waiting" can never look like "accepted". */
#requestView { border-inline-start: 6px solid var(--bk-border); }
#requestView[data-status="pending"] { border-inline-start-color: var(--bk-warn); }
#requestView[data-status="accepted"] { border-inline-start-color: var(--bk-ok); }
#requestView[data-status="rejected"] { border-inline-start-color: var(--bk-danger); }
#requestView[data-status="cancelled"] { border-inline-start-color: var(--bk-muted); }
.bk-cancel { margin: 0 0 12px; }
#editForm, #moveForm { display: grid; gap: 8px; margin-top: 8px; }
#editForm[hidden], #moveForm[hidden] { display: none; }
.bk-facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 12px; margin: 0 0 8px; }
.bk-facts dt { color: var(--bk-muted); font: 500 14px/20px var(--mb-font-text); }
.bk-facts dd { margin: 0; font: 600 15px/20px var(--mb-font-text); overflow-wrap: anywhere; }
.bk-facts dd.bk-status { justify-self: start; }
.bk-history { margin: 0 0 12px; padding-left: 20px; }
.bk-event { font: 500 15px/22px var(--mb-font-text); color: var(--bk-fg); }
.bk-link { display: block; padding: 8px 10px; border: 1px dashed var(--bk-border); border-radius: 8px; overflow-wrap: anywhere;
  font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; user-select: all; }
#copyStatus:empty { display: none; }

/* Compact mobile (375-480px): full-width controls, one-column preferences, nothing wider than the viewport. */
@media (max-width: 480px) {
  body[data-page="book"] .card { padding: 14px; }
  body[data-page="book"] .row button { flex: 1 1 100%; }
  .bk-facts { grid-template-columns: 1fr; gap: 0; }
  .bk-facts dt { margin-top: 8px; }
  .bk-opt { flex: 0 1 calc(33% - 8px); }
  .bk-opt span { width: 100%; }
}

/* MEDA-29 booking time/format grid: equal cells, never a lone trailing row; a long localized label ("10:00 · Taken") wraps inside the chip (never past its border, never clipped); the time stays first.
   Compact: 2 columns (4 slots -> 2x2, 2 formats -> 1 row). Wider: 4 columns. Inbox keeps its own one-per-row list. */
.bk-options.bk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.bk-grid .bk-opt { min-width: 0; }
.bk-grid .bk-opt span { width: 100%; min-width: 0; padding: 6px 8px; box-sizing: border-box; text-align: center; white-space: normal; overflow-wrap: anywhere; }
@media (min-width: 481px) { .bk-options.bk-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 360px) { .bk-options.bk-grid { grid-template-columns: minmax(0, 1fr); } }
/* MEDA-65: grid items stretch, so a two-line taken chip and a one-line available chip share one row height (min 48px stays).
   The two format choices get two wide columns from 481px (not four ~118px cells), so a selected check+label never splits inside a word;
   words still wrap (no nowrap/ellipsis/clipping) and <=360px stays one column. */
.bk-grid .bk-opt { display: flex; }
@media (min-width: 481px) { .bk-options.bk-grid#formatOptions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* MEDA-18 doctor catalog (ui/doctors.html): same --bk-* tokens as the booking page, so theme and look carry across the journey.
   The old green card with white text is replaced here: white on the old brand green is below 4.5:1. */
body[data-page="doctors"] { background: var(--bk-bg); color: var(--bk-fg); }
body[data-page="doctors"] .bar { background: var(--bk-bg); gap: 8px 12px; }
body[data-page="doctors"] .brand { color: var(--bk-link); }
body[data-page="doctors"] .tag, body[data-page="doctors"] .help { color: var(--bk-muted); }
body[data-page="doctors"] h1, body[data-page="doctors"] h3 { color: var(--bk-fg); }
body[data-page="doctors"] h1 { font: 600 26px/32px var(--mb-font-text); margin: 0 0 8px; }
body[data-page="doctors"] a { color: var(--bk-link); }
body[data-page="doctors"] .card { background: var(--bk-surface); border: 1px solid var(--bk-border); color: var(--bk-fg); }
body[data-page="doctors"] button { background: var(--bk-bg); color: var(--bk-link); border: 1px solid var(--bk-link); }
body[data-page="doctors"] select, body[data-page="doctors"] input[type=text] { background: var(--bk-field); color: var(--bk-fg); border: 1px solid var(--bk-border); }
body[data-page="doctors"] select { height: 40px; max-width: 100%; }
body[data-page="doctors"] input[type=text] { height: 44px; font-size: 16px; }
body[data-page="doctors"] input[type=text]::placeholder { color: var(--bk-muted); }
body[data-page="doctors"] :focus-visible { outline: 3px solid var(--bk-focus); outline-offset: 2px; }
body[data-page="doctors"] #resultSummary.empty { color: var(--bk-fg); }
body[data-page="doctors"] .doctor { background: var(--bk-surface); border: 1px solid var(--bk-border); color: var(--bk-fg); }
body[data-page="doctors"] .doc-name { color: var(--bk-fg); overflow-wrap: anywhere; }
body[data-page="doctors"] .doc-badge { background: transparent; border: 1px solid var(--bk-border); color: var(--bk-muted); }
body[data-page="doctors"] .doc-langs { color: var(--bk-muted); }
body[data-page="doctors"] .doc-format { border-color: var(--bk-border); color: var(--bk-fg); }
body[data-page="doctors"] .doc-book { background: var(--bk-accent); color: var(--bk-on-accent); min-height: 44px; box-sizing: border-box; display: inline-flex; align-items: center; }
@media (max-width: 520px) { body[data-page="doctors"] .filters { grid-template-columns: 1fr; } }

/* MEDA-92 W1: details sheet. Desktop = centred dialog, <=520px = bottom sheet with safe-area inset.
   --bk-scrim (defined with the tokens above) is the overlay state only and is the same in both themes; the sheet surface/text come from the themed --bk-* tokens. */
body[data-page="doctors"] .doc-details { justify-self: start; margin-top: 4px; }
body[data-page="doctors"] .doc-details, body[data-page="doctors"] .sheet-close { min-height: 44px; box-sizing: border-box; padding: 0 14px; border-radius: 8px;
  background: transparent; color: var(--bk-accent-text, var(--bk-link)); border: 2px solid var(--bk-accent); font-family: inherit; font-weight: 600; font-size: 15px; line-height: 20px; cursor: pointer; }
.sheet-scrim { position: fixed; inset: 0; background: var(--bk-scrim); z-index: 40; }
.sheet { position: fixed; z-index: 41; background: var(--bk-surface); color: var(--bk-fg); border: 1px solid var(--bk-border);
  left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto;
  box-sizing: border-box; padding: 20px; border-radius: 16px; display: grid; gap: 8px; }
.sheet p { margin: 0; }
.sheet-handle { display: none; width: 40px; height: 4px; border-radius: 2px; background: var(--bk-border); justify-self: center; }
.sheet-title { margin: 0; font-size: 20px; line-height: 26px; color: var(--bk-link); overflow-wrap: anywhere; }
.sheet-body { display: grid; gap: 6px; }
.sheet-actions { display: grid; gap: 8px; margin-top: 8px; }
.sheet-book { display: flex; align-items: center; justify-content: center; min-height: 48px; box-sizing: border-box; border-radius: 8px; text-decoration: none;
  background: var(--bk-accent); color: var(--bk-on-accent); font-family: inherit; font-weight: 600; font-size: 16px; line-height: 20px; }
/* MEDA-115 (UX01/UXC31): `body[data-page="doctors"] a` (link colour) is more specific than `.sheet-book`, so the sheet's primary link
   inherited --bk-link on the --bk-accent background (about 1.1:1 light / 1.7:1 dark). Same page-scoped specificity + every link state keeps the
   primary pair --bk-on-accent on --bk-accent (the same pair as .doc-book / button.primary). */
body[data-page="doctors"] .sheet-book, body[data-page="doctors"] .sheet-book:visited, body[data-page="doctors"] .sheet-book:hover,
body[data-page="doctors"] .sheet-book:active, body[data-page="doctors"] .sheet-book:focus-visible { background: var(--bk-accent); color: var(--bk-on-accent); }
.sheet :focus-visible, .sheet-book:focus-visible { outline: 3px solid var(--bk-focus); outline-offset: 2px; }
html.sheet-open body { overflow: hidden; }
@media (max-width: 520px) {
  .sheet { left: 0; right: 0; top: auto; bottom: 0; transform: none; width: auto; max-height: 85vh; border-radius: 16px 16px 0 0; border-bottom: 0;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
  .sheet-handle { display: block; }
}

/* MEDA-28: one shared language/theme bar on every page that has .prefs (catalog, booking, inbox) - no data-page restriction.
   <=520px: the bar stacks, the two labels share ONE row (text above its select), selects are 48px tall and may shrink to 0,
   so 320px Armenian text never clips or overflows. Colours/focus come from the themed --bk-* tokens. */
@media (max-width: 520px) {
  body[data-page] .bar { flex-direction: column; align-items: stretch; }
  body[data-page] .prefs { width: 100%; flex-wrap: nowrap; align-items: stretch; }
  body[data-page] .prefs label { flex: 1 1 0; min-width: 0; flex-direction: column; align-items: stretch; gap: 4px; }
  body[data-page] .prefs label > span { overflow-wrap: anywhere; }
  body[data-page] .prefs select { width: 100%; min-width: 0; height: 48px; min-height: 48px; }
}

/* LIGHT-2 doctor inbox (ui/doctor-inbox.html shares the page tokens above; no extra colours). */
/* MEDA-21: the inbox cards use the same surface, border and radius as the booking cards, and the card edge follows the server status
   like the patient's request card (#requestView). The pill (icon + text) carries the status; the edge is only a second cue. */
body[data-view="inbox"] .card { display: grid; gap: 12px; padding: 16px; background: var(--bk-surface); border: 1px solid var(--bk-line); border-radius: 12px; color: var(--bk-fg); }
body[data-view="inbox"] .card > p { margin: 0; }
body[data-view="inbox"] select#selDoctor { width: 100%; }
body[data-view="inbox"] .bk-req .bk-facts { margin: 0; }
.bk-list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 12px; }
.bk-req { display: grid; gap: 8px; border-inline-start: 6px solid var(--bk-border); }
.bk-req[data-status="pending"] { border-inline-start-color: var(--bk-warn); }
.bk-req[data-status="accepted"] { border-inline-start-color: var(--bk-ok); }
.bk-req[data-status="rejected"] { border-inline-start-color: var(--bk-danger); }
.bk-req[data-status="cancelled"] { border-inline-start-color: var(--bk-muted); }
.bk-req .doc-top { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; }
body[data-view="inbox"] .bk-req fieldset { display: grid; gap: 8px; }
.bk-opt input[aria-invalid="true"] + span { border-color: var(--bk-danger); border-width: 2px; }
#listInfo { margin: 0; }
#listInfo:empty { display: none; }
#listInfo[data-tone="error"] { color: var(--bk-danger); font-weight: 600; }
#listInfo[data-tone="warn"] { color: var(--bk-warn); font-weight: 600; }
#listInfo[data-tone="error"]::before { content: "✕ "; }
#listInfo[data-tone="warn"]::before { content: "… "; }
@media (max-width: 480px) {
  body[data-view="inbox"] .bk-session { flex-direction: column; align-items: stretch; }
  body[data-view="inbox"] .bk-opt { flex: 1 1 100%; }
  body[data-view="inbox"] .bk-opt span { justify-content: flex-start; }
}
.bk-session { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.bk-status { padding: 1px 10px; border: 2px solid var(--bk-border); border-radius: 999px; color: var(--bk-fg); font: 700 12px/18px var(--mb-font-text); }
.bk-status[data-status="accepted"] { border-color: var(--bk-ok); color: var(--bk-ok); }
.bk-status[data-status="accepted"]::before { content: "✓ "; }
.bk-status[data-status="rejected"] { border-color: var(--bk-danger); color: var(--bk-danger); }
.bk-status[data-status="rejected"]::before { content: "✕ "; }
.bk-status[data-status="cancelled"] { border-color: var(--bk-muted); color: var(--bk-muted); }
.bk-status[data-status="cancelled"]::before { content: "– "; }
.bk-status[data-status="pending"] { border-color: var(--bk-warn); color: var(--bk-warn); }
.bk-status[data-status="pending"]::before { content: "… "; }
.bk-status[data-status="unknown"]::before { content: "? "; }

/* MEDA-69 "Other dates" calendar: same --bk-* tokens in both themes. One month on mobile, two side by side from 720px (matches monthCount() in book.js). */
.cal-toggle { margin-bottom: 8px; }
.cal { display: grid; gap: 12px; margin-bottom: 8px; padding: 12px; border: 1px solid var(--bk-line); border-radius: 12px; background: var(--bk-field); }
.cal-nav { display: flex; gap: 8px; justify-content: space-between; }
body[data-page="book"] .cal-step { min-width: 48px; padding: 0 8px; }
.cal-months { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 720px) { .cal-months { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
body[data-page="book"] .cal-title { margin: 0 0 6px; text-align: center; color: var(--bk-fg); font: 600 15px/20px var(--mb-font-text); overflow-wrap: anywhere; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-wd { text-align: center; color: var(--bk-muted); font: 600 12px/20px var(--mb-font-text); overflow: hidden; }
body[data-page="book"] .cal-day { min-height: 44px; min-width: 0; padding: 0; font: 600 15px/20px var(--mb-font-text); }
body[data-page="book"] .cal-day:disabled { border-color: transparent; background: transparent; color: var(--bk-muted); opacity: .55; }
body[data-page="book"] .cal-day.is-picked { background: var(--bk-accent); border-color: var(--bk-accent); color: var(--bk-on-accent); }

/* MEDA-97 portal theme surfaces (admin / schedule / doctor-activate). Appended to book.css; uses ONLY the existing --bk-* tokens, no new ones.
   Why: telemed.css `.card` is a fixed white tile and `body` is white, while book.css only themes `body[data-page="book"]:not([data-view]) .card`
   and `input[type=text]`. Admin (data-view="admin") therefore kept a white card under --bk-fg text (white on white in dark), and the schedule /
   doctor-activate pages (data-page != "book") never received the themed body, buttons or fields. */
body[data-view="admin"] .card { background: var(--bk-surface); border: 1px solid var(--bk-line); border-radius: 12px; color: var(--bk-fg); }
body[data-view="admin"] input[type=email], body[data-view="admin"] input[type=password], body[data-view="admin"] input[type=date],
body[data-page="schedule"] input[type=email], body[data-page="schedule"] input[type=password], body[data-page="schedule"] input[type=date], body[data-page="schedule"] input[type=text],
body[data-page="doctor-activate"] input[type=password] {
  display: block; width: 100%; height: 48px; padding: 0 14px; margin-top: 6px; font-size: 16px; background: var(--bk-field); color: var(--bk-fg); border: 1px solid var(--bk-border); border-radius: 8px; }
body[data-page="schedule"] input::placeholder { color: var(--bk-muted); }
body[data-view="admin"] input[aria-invalid="true"], body[data-page="doctor-activate"] input[aria-invalid="true"] { border-color: var(--bk-danger); border-width: 2px; }

body[data-page="schedule"], body[data-page="doctor-activate"] { background: var(--bk-bg); color: var(--bk-fg); }
body[data-page="schedule"] .bar, body[data-page="doctor-activate"] .bar { background: var(--bk-bg); }
body[data-page="schedule"] .brand, body[data-page="doctor-activate"] .brand, body[data-page="schedule"] a, body[data-page="doctor-activate"] a { color: var(--bk-link); }
body[data-page="schedule"] .tag, body[data-page="schedule"] .help, body[data-page="doctor-activate"] .tag, body[data-page="doctor-activate"] .help { color: var(--bk-muted); }
body[data-page="schedule"] label.help, body[data-page="doctor-activate"] label.help { color: var(--bk-fg); }
body[data-page="schedule"] h1, body[data-page="schedule"] h2, body[data-page="schedule"] h3,
body[data-page="doctor-activate"] h1, body[data-page="doctor-activate"] h2 { color: var(--bk-fg); }
body[data-page="schedule"] .card, body[data-page="doctor-activate"] .card { background: var(--bk-surface); border: 1px solid var(--bk-line); border-radius: 12px; color: var(--bk-fg); }
body[data-page="schedule"] select, body[data-page="doctor-activate"] select { background: var(--bk-field); color: var(--bk-fg); border: 1px solid var(--bk-border); border-radius: 8px; }
/* :not(.sc-day) keeps the month-grid day buttons on their own schedule.css surface/state colours. */
body[data-page="schedule"] button:not(.sc-day), body[data-page="doctor-activate"] button { background: transparent; color: var(--bk-link); border: 1px solid var(--bk-link); }
body[data-page="schedule"] button.primary:not(.sc-day), body[data-page="doctor-activate"] button.primary { background: var(--bk-accent); color: var(--bk-on-accent); border-color: var(--bk-accent); }
body[data-page="schedule"] button:disabled:not(.sc-day), body[data-page="doctor-activate"] button:disabled,
body[data-page="schedule"] button.primary:disabled:not(.sc-day), body[data-page="doctor-activate"] button.primary:disabled { background: var(--bk-surface); color: var(--bk-muted); border-color: var(--bk-border); }
body[data-page="schedule"] :focus-visible, body[data-page="doctor-activate"] :focus-visible { outline: 3px solid var(--bk-focus); outline-offset: 2px; }
/* MEDA-102: inline choice summary before Send request (existing tokens, no new colours) */
body[data-page="book"] .bk-summary { margin: 12px 0 0; padding: 10px 12px; border: 1px solid var(--bk-line); border-radius: 8px; color: var(--bk-fg); font: 600 15px/22px var(--mb-font-text); overflow-wrap: anywhere; }
body[data-page="book"] .bk-summary:empty { display: none; }

/* MEDA-116: no free time = no name field and no Send button; the next step (other doctors) is a full-size control, not a bare text link. */
body[data-page="book"] #btnSubmit[hidden], body[data-page="book"] #nameBlock[hidden], body[data-page="book"] .row:has(> #btnSubmit[hidden]) { display: none; }
body[data-page="book"] #otherDoctors { display: inline-flex; align-items: center; min-height: 48px; padding: 0 16px; border: 1px solid var(--bk-border); border-radius: 8px; font-weight: 600; text-decoration: none; }
body[data-page="book"] #otherDoctors[hidden] { display: none; }

/* MEDA-125 next steps / visit information */
.bk-next { margin: 0 0 12px; padding: 12px; border: 1px solid var(--bk-line); border-radius: 8px; }
.bk-next h3 { margin: 0 0 6px; }
.bk-pre { white-space: pre-wrap; font-weight: 400; }
.bk-next a { overflow-wrap: anywhere; }

/* UX117 (MEDA-117): responsive catalog + compact portal chrome. Append-only; scoped to body[data-page="doctors"] so the
   booking/login pages keep their 560px form width. The shared MEDA-28 .prefs bar (one layout on every page) is NOT overridden here. Colours come only from the existing --bk-* tokens (none added). The 115 sheet CTA
   rules (.sheet-book --bk-accent / --bk-on-accent) are untouched. */
html.mb-boot body[data-page="doctors"] > header, html.mb-boot body[data-page="doctors"] main { visibility: hidden; }

/* portal entries: native <details> menu (open without script); the labelled summary only exists on a phone */
body[data-page] .portal { flex: 1 1 100%; }
body[data-page] .portal-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
body[data-page] .portal-list a { display: flex; align-items: center; min-height: 44px; box-sizing: border-box; padding: 0 12px; border: 1px solid var(--bk-border);
  border-radius: 8px; color: var(--bk-link); text-decoration: none; font: 600 14px/18px var(--mb-font-text); overflow-wrap: anywhere; }
body[data-page] .portal-list a[aria-current="page"] { background: var(--bk-surface); color: var(--bk-fg); border-color: var(--bk-link); border-width: 2px; }
body[data-page] .portal-menu > summary, body[data-page="doctors"] .filters-box > summary { display: flex; align-items: center; min-height: 44px; cursor: pointer;
  font: 600 15px/20px var(--mb-font-text); color: var(--bk-fg); }

/* catalog filters: one disclosure with the active count in its summary; Clear is visible only while a condition is active */
body[data-page="doctors"] .filters-bar { display: grid; gap: 8px; margin-top: 4px; }
body[data-page="doctors"] #btnClear { min-height: 44px; }
body[data-page="doctors"] #btnClear[hidden] { display: none; }

@media (max-width: 520px) {
  body[data-page="doctors"] .bar { flex-direction: row; flex-wrap: wrap; align-items: center; padding: 8px 16px; gap: 2px 12px; }
  body[data-page="doctors"] .tag { flex: 1 1 0; min-width: 0; text-align: right; font-size: 10px; line-height: 12px; }
  body[data-page="doctors"] main { padding-top: 4px; gap: 8px; }
  body[data-page="doctors"] h1 { font-size: 22px; line-height: 28px; margin: 0 0 4px; }
  body[data-page="doctors"] .hello .help { margin: 0; font-size: 13px; line-height: 18px; }
  body[data-page="doctors"] .card { padding: 12px; }
  body[data-page="doctors"] .doctors { gap: 8px; }
}
@media (max-width: 360px) {
  body[data-page] .portal-list { grid-template-columns: 1fr; }
}

@media (min-width: 521px) {
  body[data-page] .portal-menu > summary, body[data-page="doctors"] .filters-box > summary { display: none; }
  body[data-page] .portal-list { display: flex; flex-wrap: wrap; gap: 8px; }
  body[data-page="doctors"] .bar { padding-bottom: 8px; }
  body[data-page="doctors"] main { max-width: 1120px; }
  body[data-page="doctors"] .hello .help { max-width: 70ch; }
  body[data-page="doctors"] .filters-bar { grid-template-columns: 1fr auto; align-items: end; }
  body[data-page="doctors"] #btnClear { flex: none; min-width: 160px; }
  body[data-page="doctors"] .doctors { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); align-items: start; gap: 12px; }
}

/* MEDA-137: the institution entry is text, not a link; dashed border + words (not colour) say it is unavailable. */
body[data-page] .portal-list .portal-off { display: flex; align-items: center; min-height: 44px; box-sizing: border-box; padding: 0 12px; border: 1px dashed var(--bk-border);
  border-radius: 8px; color: var(--bk-fg); font: 600 14px/18px var(--mb-font-text); overflow-wrap: anywhere; }
body[data-page="book"] .bar, body[data-page="reference"] .bar { flex-wrap: wrap; }
/* MEDA-142 public booking help: large, clear targets; colours come from the theme variables only. */
.bk-help summary { cursor: pointer; font-size: 1.1rem; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.bk-help a.bk-help-link { display: inline-block; min-height: 44px; padding: 10px 14px; font-size: 1.1rem; font-weight: 600; border: 1px solid var(--bk-line); border-radius: 8px; overflow-wrap: anywhere; }
/* PRIVATE-BOOKING-QR-TRANSFER-01: the code is a private bearer copy. The figure is ALWAYS opaque white with black modules (theme-independent), never scaled,
   filtered, inverted or cropped; if the layout cannot show it at >= 3 CSS px per module the script hides it and the existing Copy link remains. */
.bk-qr { margin-top: 12px; }
.bk-qr button { min-height: 44px; }
.bk-qr-ack { display: flex; gap: 10px; align-items: flex-start; min-height: 44px; margin: 8px 0; }
.bk-qr-ack input { width: 24px; height: 24px; flex: none; margin: 0; }
.bk-qr-figure { display: block; width: max-content; max-width: 100%; overflow: visible; margin: 8px 0; background: white; color-scheme: light; forced-color-adjust: none; }
.bk-qr-figure svg { display: block; background: white; max-width: none; }
@media print { .bk-qr { display: none !important; } }

/* MEDA-1123 usability correction (observed on accepted MEDA-1112). Recovery links (#nextActions) get a >=44px target in both dimensions and wrap
   instead of overflowing; display is set on the links only, so the container's [hidden] (telemed.css) still wins. The help summary used the
   telemed.css `details summary` heading colour (dark grey, ~1.2:1 on the dark card); it now inherits the page foreground token like the card. */
body[data-page="book"] #nextActions a { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 44px; min-width: 44px; max-width: 100%; padding: 10px 14px; border: 1px solid var(--bk-link); border-radius: 8px; font-weight: 600; text-align: center; }
body[data-page="book"] .bk-help summary { color: var(--bk-fg); }