/* ============================================================================
   Magic Link (anonymous patient surface) — SAMS Voice AI design tokens.
   Source of truth: design_handoff_magic_link (hifi prototype). Scoped under
   .mlk-page so nothing leaks into the authenticated portal styles.
   Fonts: Plus Jakarta Sans (UI) + Spline Sans Mono (codes/timers) — loaded by
   AuthLayout via <HeadContent>. Keep every asset in a wwwroot SUBFOLDER: the
   bare /{code} route swallows root-level static files.
   ============================================================================ */

.mlk-page {
    --mlk-primary: #1976D2;
    --mlk-primary-deep: #0D47A1;
    --mlk-danger: #D93025;
    --mlk-danger-hover: #B3261E;
    --mlk-danger-bg: #FDECEA;
    --mlk-danger-border: #F4C7C3;
    --mlk-success: #34A853;
    --mlk-warn: #B45309;
    --mlk-warn-bg: #FDF3E3;
    --mlk-card-border: #E1E8F0;
    --mlk-ctl-border: #D7E1EC;
    --mlk-subtle-border: #C5D3E3;
    --mlk-text: #1C2733;
    --mlk-text-2: #4E5D6C;
    --mlk-text-3: #64748B;
    --mlk-text-4: #93A3B5;
    --mlk-muted-panel: #ECF2F9;
    --mlk-muted-panel-2: #F5F8FC;
    --mlk-key-bg: #EAF1F8;
    --mlk-shadow: 0 10px 24px -18px rgba(23, 43, 77, 0.35);
    --mlk-shadow-web: 0 14px 30px -22px rgba(23, 43, 77, 0.35);

    min-height: 100vh;
    background: linear-gradient(160deg, #EAF1F8 0%, #E3EBF5 55%, #D8E4F2 100%);
    color: var(--mlk-text);
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
}

.mlk-mono { font-family: 'Spline Sans Mono', 'JetBrains Mono', monospace; }

/* Visible to screen readers only. Used where a value is shown graphically — a three-part date tile
   reads as "Thu 20 Aug" to the eye but as disconnected fragments to a screen reader. */
.mlk-sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Shared page container — Bootstrap's .container at the xxl breakpoint. Defined here because
   magiclink.css loads first under BOTH patient layouts, so booking.css can rely on it.

   --sams-gutter is the MINIMUM space either side, and it is why containers use
   width: min(container, 100% - 2*gutter) rather than max-width alone. On a 1366px laptop a bare
   1320px max-width leaves 23px of margin, which reads as edge-to-edge; this keeps a deliberate
   margin at every screen size and only reaches the full 1320px once the window is wide enough to
   afford it. */
:root {
    --sams-container: 1320px;
    --sams-gutter: 32px;
}

@media (max-width: 640px) { :root { --sams-gutter: 14px; } }

.mlk-wrap { max-width: 720px; margin: 0 auto; padding: 18px 18px 64px; }
@media (min-width: 641px) { .mlk-wrap { padding-top: 30px; } }
.mlk-narrow { max-width: 480px; }

/* Full container width, for pages that lay out LISTS or columns. Deliberately opt-in rather than
   the default: the Magic Link page and the sign-in form are single-column reading surfaces, and a
   1320px line length makes those harder to use, not better. Width follows the content. */
.mlk-wide { width: min(var(--sams-container), 100% - 2 * var(--sams-gutter)); max-width: none; padding-left: 0; padding-right: 0; }

/* ---------- top bar: brand + secure pill + agent presence ----------
   Phone: transparent row on the gradient. Desktop: persistent full-width white
   bar spanning the window (per the prototype's ChromeWindow view). */
/* Pinned. This bar carries the practice's identity and — signed in — WHOSE portal this is, which
   is the thing a patient on a shared device needs answerable without scrolling back up. It also
   holds the only route out of a long appointment list.

   On the OUTER element, not .mlk-topbar: the outer one paints the white background and the bottom
   border at wide widths, so sticking the inner element would leave the rows scrolling through a
   transparent gap above it. */
.mlk-topbar-outer { padding: 0 18px; position: sticky; top: 0; z-index: 30; background: #fff; }
.mlk-topbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 2px 6px; flex-wrap: wrap; }
@media (min-width: 641px) {
    .mlk-topbar-outer { background: #fff; border-bottom: 1px solid var(--mlk-card-border); padding: 0 28px; }
    .mlk-topbar { width: min(var(--sams-container), 100% - 2 * var(--sams-gutter)); margin: 0 auto; padding: 13px 0; }
}
.mlk-brand { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 17px; }
.mlk-brand-avatar {
    width: 28px; height: 28px; border-radius: 9px; background: linear-gradient(135deg, #1E88E5, #1565C0);
    color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800;
}
.mlk-secure-pill {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 99px;
    background: #fff; border: 1px solid var(--mlk-ctl-border); color: var(--mlk-text-2); font-size: 12px; font-weight: 600;
}
.mlk-agent-banner {
    display: flex; align-items: center; gap: 8px; margin: 10px 0 0; padding: 8px 14px; border-radius: 12px;
    background: #E3F2FD; border: 1px solid #90CAF9; color: #0D47A1; font-size: 13px; font-weight: 600;
}
.mlk-agent-banner .mlk-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mlk-success); flex: 0 0 auto; }

/* ---------- headings & screen entry ---------- */
.mlk-screen { animation: mlk-fadeUp .28s ease both; }
.mlk-h1 { font-size: 27px; font-weight: 700; margin: 18px 0 14px; letter-spacing: -0.01em; }
@media (min-width: 641px) { .mlk-h1 { font-size: 34px; } }

/* ---------- cards ---------- */
.mlk-card {
    background: #fff; border: 1px solid var(--mlk-card-border); border-radius: 18px;
    box-shadow: var(--mlk-shadow); padding: 20px;
}
@media (min-width: 641px) { .mlk-card { border-radius: 20px; box-shadow: var(--mlk-shadow-web); padding: 24px; } }
.mlk-divider { border: 0; border-top: 1px solid var(--mlk-card-border); margin: 16px 0; }

/* ---------- appointment card: date badge + time ---------- */
.mlk-appt-head { display: flex; gap: 16px; align-items: center; }
.mlk-datebadge {
    width: 64px; flex: 0 0 auto; border: 1px solid var(--mlk-ctl-border); border-radius: 13px; overflow: hidden;
    text-align: center; background: #fff;
}
@media (min-width: 641px) { .mlk-datebadge { width: 78px; } }
.mlk-datebadge .mlk-mon {
    display: block; background: var(--mlk-primary); color: #fff; font-size: 10.5px; font-weight: 700;
    letter-spacing: 0.12em; padding: 3px 0; text-transform: uppercase;
}
.mlk-datebadge .mlk-day { display: block; font-size: 26px; font-weight: 800; line-height: 1.25; padding-top: 2px; }
@media (min-width: 641px) { .mlk-datebadge .mlk-day { font-size: 30px; } }
.mlk-datebadge .mlk-dow { display: block; font-size: 11px; font-weight: 600; color: var(--mlk-text-3); padding-bottom: 5px; text-transform: uppercase; }
.mlk-appt-time { font-size: 21px; font-weight: 700; }
.mlk-appt-meta { color: var(--mlk-text-2); font-size: 13.5px; margin-top: 3px; }

/* ---------- location row ---------- */
.mlk-loc { display: flex; gap: 10px; align-items: flex-start; }
.mlk-loc-name { font-weight: 700; font-size: 14.5px; }
.mlk-loc-addr { color: var(--mlk-text-3); font-size: 13px; margin-top: 1px; }
.mlk-link-btn { background: none; border: 0; padding: 0; color: var(--mlk-primary); font-weight: 700; font-size: 13.5px; cursor: pointer; font-family: inherit; text-decoration: none; }
.mlk-link-btn:hover { color: var(--mlk-primary-deep); }
.mlk-loc .mlk-link-btn { margin-left: auto; flex: 0 0 auto; }

/* ---------- add to calendar ---------- */
.mlk-cal-label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mlk-text-4); margin-bottom: 9px; }
.mlk-cal-row { display: flex; gap: 10px; }
.mlk-cal-btn {
    flex: 1; text-align: center; padding: 10px 0; border-radius: 12px; border: 1px solid var(--mlk-ctl-border);
    background: var(--mlk-muted-panel-2); color: var(--mlk-text-2); font-weight: 700; font-size: 13.5px;
    text-decoration: none; cursor: pointer; font-family: inherit;
}
.mlk-cal-btn:hover { background: var(--mlk-muted-panel); }

/* ---------- buttons ---------- */
.mlk-btn {
    display: block; width: 100%; padding: 14px 18px; border-radius: 13px; border: 0; cursor: pointer;
    font-family: inherit; font-size: 15.5px; font-weight: 700; text-align: center; text-decoration: none;
}
.mlk-btn-primary { background: var(--mlk-primary); color: #fff; }
.mlk-btn-primary:hover { background: var(--mlk-primary-deep); }
.mlk-btn-danger { background: var(--mlk-danger); color: #fff; }
.mlk-btn-danger:hover { background: var(--mlk-danger-hover); }
.mlk-btn-danger-outline { background: #fff; color: var(--mlk-danger); border: 1px solid var(--mlk-danger-border); }
.mlk-btn-danger-outline:hover { background: var(--mlk-danger-bg); }
.mlk-btn-outline { background: #fff; color: var(--mlk-text-2); border: 1px solid var(--mlk-ctl-border); }
.mlk-btn-outline:hover { background: var(--mlk-muted-panel-2); }
.mlk-btn-text { background: none; color: var(--mlk-text-3); border: 0; font-weight: 600; }
.mlk-btn-text:hover { color: var(--mlk-text); }
.mlk-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
@media (min-width: 641px) { .mlk-actions { flex-direction: row; } .mlk-actions .mlk-btn { flex: 1; } }

/* ---------- privacy footnote / info boxes ---------- */
.mlk-privacy {
    margin-top: 16px; padding: 13px 15px; border: 1.5px dashed var(--mlk-subtle-border); border-radius: 13px;
    color: var(--mlk-text-3); font-size: 12.5px; line-height: 1.55;
}
.mlk-infobox {
    margin-top: 16px; padding: 13px 15px; border-radius: 13px; background: var(--mlk-muted-panel);
    color: var(--mlk-text-2); font-size: 13.5px; line-height: 1.55;
}
.mlk-warnbox { margin-top: 14px; padding: 12px 15px; border-radius: 13px; background: var(--mlk-warn-bg); color: #8F5A0B; font-size: 13px; line-height: 1.5; }
.mlk-cancelled-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 99px;
    background: var(--mlk-danger-bg); color: var(--mlk-danger); font-size: 12.5px; font-weight: 700;
}

/* ---------- empty state (screen B) ---------- */
.mlk-empty { text-align: center; padding: 30px 18px; }
.mlk-empty .mlk-empty-icon { font-size: 42px; color: var(--mlk-primary); margin-bottom: 8px; }
.mlk-empty h2 { font-size: 21px; font-weight: 700; margin: 6px 0 8px; }
.mlk-empty p { color: var(--mlk-text-2); font-size: 14.5px; line-height: 1.55; margin: 0 0 18px; }

/* ---------- verified chip ---------- */
.mlk-verified-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 99px;
    background: #E4EFE7; color: #1E7B3C; font-size: 12.5px; font-weight: 700; margin-bottom: 12px;
}

/* ---------- back affordance ---------- */
.mlk-back {
    display: inline-flex; align-items: center; gap: 5px; background: none; border: 0; cursor: pointer; padding: 4px 6px 4px 0;
    color: var(--mlk-text-2); font-family: inherit; font-size: 14px; font-weight: 700;
}
.mlk-back:hover { color: var(--mlk-text); }

/* The portal hand-off variant. `.mlk-back` is an inline-flex <button> used INSIDE a card; this one
   is an <a> sitting at the top of the wrap, above the card, so it needs to be its own line and to
   sit flush with the left edge of the column below it — the card's left edge is the line the eye
   already follows, and an indented back link reads as belonging to nothing. */
.mlk-back-portal {
    display: inline-flex;
    margin: 0 0 10px;
    padding-left: 0;
    text-decoration: none;
}
.mlk-back-portal:focus-visible { outline: 3px solid #93b4ff; outline-offset: 2px; border-radius: 8px; }

/* ---------- schedule picker (screen D) ---------- */
.mlk-held { color: var(--mlk-text-2); font-size: 13.5px; margin: 2px 0 14px; }
.mlk-datechips { display: flex; gap: 10px; overflow-x: auto; padding: 2px 0 10px; }
.mlk-datechip {
    flex: 0 0 auto; min-width: 74px; text-align: center; padding: 9px 12px; border-radius: 13px; cursor: pointer;
    background: #fff; border: 1px solid var(--mlk-card-border); font-family: inherit;
}
.mlk-datechip .mlk-chip-dow { display: block; font-size: 11px; font-weight: 600; opacity: .75; }
.mlk-datechip .mlk-chip-label { display: block; font-size: 16px; font-weight: 700; margin-top: 2px; }
@media (min-width: 641px) { .mlk-datechip .mlk-chip-label { font-size: 17px; } }
.mlk-datechip.selected { background: var(--mlk-primary); border-color: var(--mlk-primary); color: #fff; }
.mlk-slotgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 8px; }
@media (min-width: 641px) { .mlk-slotgrid { grid-template-columns: repeat(4, 1fr); } }
.mlk-slot {
    padding: 12px 6px; border-radius: 12px; border: 1px solid var(--mlk-ctl-border); background: #fff;
    font-family: inherit; font-size: 14px; font-weight: 700; color: var(--mlk-text-2); cursor: pointer; text-align: center;
}
.mlk-slot.selected { background: var(--mlk-primary); border-color: var(--mlk-primary); color: #fff; }
.mlk-sticky-confirm { position: sticky; bottom: 0; padding: 14px 0 6px; background: linear-gradient(transparent, #E3EBF5 35%); }
.mlk-btn-disabled { background: var(--mlk-subtle-border) !important; color: #6B7A8C !important; cursor: default !important; }

/* ---------- cancel screen (screen E) ---------- */
.mlk-reason-label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mlk-text-4); margin: 16px 0 9px; }
.mlk-reason-chips { display: flex; gap: 9px; flex-wrap: wrap; }
.mlk-reason-chip {
    padding: 8px 14px; border-radius: 99px; border: 1px solid var(--mlk-ctl-border); background: var(--mlk-muted-panel-2);
    color: var(--mlk-text-2); font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.mlk-reason-chip.selected { border-color: var(--mlk-primary); color: var(--mlk-primary); background: #E3F2FD; }
.mlk-summary { font-weight: 700; font-size: 15.5px; }
.mlk-summary-sub { color: var(--mlk-text-3); font-size: 13.5px; margin-top: 2px; }

/* ---------- done screen (screen F) ---------- */
.mlk-done { text-align: center; padding-top: 26px; }
.mlk-done-icon {
    width: 62px; height: 62px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-size: 32px; margin-bottom: 14px;
}
.mlk-done-icon.green { background: var(--mlk-success); }
.mlk-done-icon.grey { background: var(--mlk-text-3); }
.mlk-done h1 { font-size: 26px; font-weight: 800; margin: 0 0 16px; }
.mlk-done .mlk-card { text-align: center; }
.mlk-revokebox { margin: 16px 0; padding: 13px 15px; border-radius: 13px; background: var(--mlk-muted-panel); color: var(--mlk-text-2); font-size: 13.5px; line-height: 1.55; text-align: left; }

/* ---------- error screen (screen G) ---------- */
.mlk-error { text-align: center; padding-top: 30px; }
.mlk-error .mlk-error-icon { font-size: 46px; color: var(--mlk-warn); margin-bottom: 10px; }
.mlk-error h1 { font-size: 24px; font-weight: 800; margin: 0 0 10px; }
@media (min-width: 641px) { .mlk-error h1 { font-size: 27px; } }
.mlk-error p { color: var(--mlk-text-2); font-size: 14.5px; line-height: 1.6; margin: 0 auto 18px; max-width: 420px; }
.mlk-helpbox { padding: 13px 15px; border-radius: 13px; background: var(--mlk-muted-panel); color: var(--mlk-text-2); font-size: 13.5px; line-height: 1.55; }

/* ---------- OTP step-up (screen C): bottom sheet on mobile, modal on web ---------- */
.mlk-overlay { position: fixed; inset: 0; background: rgba(13, 27, 51, 0.45); z-index: 1300; display: flex; align-items: flex-end; justify-content: center; }
.mlk-sheet {
    background: #fff; width: 100%; border-radius: 26px 26px 0 0; padding: 12px 22px 26px;
    animation: mlk-sheetUp .32s cubic-bezier(.3,.9,.4,1) both; max-height: 92vh; overflow-y: auto;
}
.mlk-sheet-handle { width: 42px; height: 5px; border-radius: 99px; background: var(--mlk-ctl-border); margin: 0 auto 14px; }
@media (min-width: 641px) {
    .mlk-overlay { align-items: center; padding: 16px; }
    .mlk-sheet { width: 410px; border-radius: 22px; padding: 24px 26px 26px; animation: mlk-fadeUp .28s ease both; }
    .mlk-sheet-handle { display: none; }
}
.mlk-otp-h2 { font-size: 20px; font-weight: 800; margin: 0 0 6px; text-align: center; }
.mlk-otp-body { color: var(--mlk-text-2); font-size: 13.5px; line-height: 1.55; text-align: center; margin: 0 0 16px; }
.mlk-otp-center { text-align: center; padding: 26px 0; color: var(--mlk-text-2); font-size: 14px; }

.mlk-otp-boxes { display: flex; gap: 8px; justify-content: center; margin-bottom: 12px; }
.mlk-otp-boxes.shake { animation: mlk-shake .4s both; }
.mlk-otp-box {
    width: 44px; height: 56px; border-radius: 13px; border: 1.5px solid var(--mlk-ctl-border);
    display: inline-flex; align-items: center; justify-content: center;
    font-family: 'Spline Sans Mono', monospace; font-size: 24px; font-weight: 700;
}
@media (min-width: 380px) { .mlk-otp-box { width: 48px; height: 60px; } }
.mlk-otp-box.active { border-color: var(--mlk-primary); }
.mlk-otp-box.error { border-color: var(--mlk-danger); }

.mlk-otp-error { color: var(--mlk-danger); font-size: 13px; font-weight: 600; text-align: center; margin: 4px 0 8px; }
.mlk-otp-expired { color: var(--mlk-warn); font-size: 13px; font-weight: 600; text-align: center; margin: 4px 0 8px; }
.mlk-otp-ttl { color: var(--mlk-text-3); font-size: 13px; text-align: center; margin: 4px 0 12px; }
.mlk-otp-kbdhint { display: none; color: var(--mlk-text-4); font-size: 12px; text-align: center; margin-bottom: 8px; }
@media (min-width: 641px) { .mlk-otp-kbdhint { display: block; } }

.mlk-keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin: 0 auto; }
@media (min-width: 641px) { .mlk-keypad { max-width: 280px; } }
.mlk-key {
    padding: 13px 0; border-radius: 12px; border: 0; background: var(--mlk-key-bg); cursor: pointer;
    font-family: inherit; font-size: 19px; font-weight: 700; color: var(--mlk-text);
}
.mlk-key:hover { background: var(--mlk-muted-panel); }
.mlk-key.mlk-key-blank { background: transparent; cursor: default; }
.mlk-key.mlk-key-del { background: transparent; }

.mlk-otp-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; }
.mlk-resend { background: none; border: 0; cursor: pointer; font-family: inherit; font-size: 13.5px; font-weight: 700; color: var(--mlk-primary); }
.mlk-resend:disabled { color: #A6B4C4; cursor: default; }

.mlk-otp-fail-icon, .mlk-otp-lock-icon, .mlk-otp-sms-icon {
    width: 54px; height: 54px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    font-size: 28px; margin-bottom: 12px;
}
.mlk-otp-fail-icon { background: var(--mlk-danger-bg); color: var(--mlk-danger); }
.mlk-otp-lock-icon { background: var(--mlk-warn-bg); color: var(--mlk-warn); }
.mlk-otp-sms-icon { background: #E3F2FD; color: var(--mlk-primary); }
.mlk-lock-count { font-family: 'Spline Sans Mono', monospace; font-size: 34px; font-weight: 600; color: var(--mlk-warn); margin: 10px 0; }

/* ---------- spinner ---------- */
.mlk-spinner {
    width: 32px; height: 32px; border-radius: 50%; border: 3px solid var(--mlk-ctl-border); border-top-color: var(--mlk-primary);
    animation: mlk-spin .8s linear infinite; margin: 0 auto 14px;
}
.mlk-center { display: flex; justify-content: center; align-items: center; padding: 60px 16px; }

/* ---------- animations ---------- */
@keyframes mlk-fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes mlk-sheetUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
@keyframes mlk-shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-7px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(5px); } }
@keyframes mlk-spin { to { transform: rotate(360deg); } }

/* ---- signed-out portal: centre the form on the page ----
   .mlk-wrap is a top-anchored reading column, which is right for the Magic Link page and for the
   signed-in console. The sign-in form is neither: it is one small card, and anchored to the top it
   leaves most of the screen empty below it, which reads as a page still loading.

   min-height, not height: the registration step is taller than the phone step, and on a short phone
   in landscape a fixed height would centre a card that no longer fits and clip its buttons off the
   bottom. Centring gives way to scrolling exactly when it has to.

   The subtraction is the topbar (57px) plus this wrap's own bottom padding, so the card is centred
   in the space actually left to it rather than in the viewport it does not own. */
/* Centred by LAYOUT, not by arithmetic.
   The first version subtracted a hand-counted 57px top bar and 64px of padding. That number was
   measured against a bar that carried the account chip; removing the chip made the bar shorter, the
   subtraction over-reserved, and the form sat high with dead space under it. Any magic number here
   is wrong the next time the bar changes.
   The page is a column that fills the viewport, the bar takes its own height, and this takes
   whatever is left — so the form is centred in the space that actually exists. */
.mlk-page {
    display: flex;
    flex-direction: column;
}

.mlk-signin {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* min-height:0 lets this shrink below its content when the viewport is short, so a tall
       registration step scrolls instead of overflowing the column. */
    min-height: 0;
}

/* The card sizes to its content rather than stretching down the flex line. */
.mlk-signin > * { flex: 0 0 auto; }

/* ---- top bar after the account chip was removed ----
   The bar's padding was 14px top / 6px bottom: deliberately lopsided, because the chip was taller
   than the brand and the extra top space kept the two optically level. With the brand alone that
   asymmetry just reads as the bar sitting low in its own box. Even again. */
.mlk-topbar { padding: 10px 2px; }
@media (min-width: 641px) {
    .mlk-topbar { padding: 11px 0; }
}

/* ---- ONE topbar height, shared by everything that aligns to it ----
   The portal's rail is position:fixed at top: --pp-topbar, and that was hand-set to 60px against a
   bar that has since changed twice (the account chip came out, the padding was evened up). The real
   bar became ~51px, so the rail started 9px BELOW the header and left a white band between them.

   Any hand-counted offset here goes stale the next time the bar is touched, so the height is now
   declared once and ENFORCED on the element, and every consumer reads the same variable:
   booking.css maps --pp-topbar to it, and the narrow-screen bar sticks to it.

   border-box so the 1px bottom border at >=641px is inside the number rather than added to it —
   otherwise desktop and mobile differ by a pixel and the rail is misaligned on one of them. */
.mlk-page { --sams-topbar-h: 52px; }

/* min-height, NOT height. This bar is shared: the Magic Link page puts a security pill beside the
   brand and .mlk-topbar wraps, so a fixed height would clip the second line on a narrow phone with
   a long clinic name. A floor guarantees the alignment the rail needs while still letting the bar
   grow when it genuinely has to — and the only page with a rail carries the brand alone, so there
   it cannot grow.

   Vertical padding is dropped in favour of the floor; keeping both would make the bar as tall as
   min-height + padding. align-items:center on the row does the centring. */
.mlk-topbar-outer { box-sizing: border-box; }
.mlk-topbar { min-height: var(--sams-topbar-h); padding-top: 0; padding-bottom: 0; }

/* The 1px bottom border only exists at this width, so the inner box gives that pixel back — the
   OUTER box then measures the same 52px in both, which is what the rail is pinned to. */
@media (min-width: 641px) {
    .mlk-topbar { min-height: calc(var(--sams-topbar-h) - 1px); }
}