/* ─────────────────────────────────────────────────────────────────────────
   AOne global styles. Colors and type come from the MudTheme
   (Theme/AOneTheme.cs) through MudBlazor's --mud-palette-* / --mud-typography-*
   variables — nothing here hard-codes a theme color, so light and dark stay in step.
   ───────────────────────────────────────────────────────────────────────── */

/* The brand navy, for surfaces that stay navy in both modes (page heroes, the sign-in backdrop, the
   logo mark). The theme's primary turns light blue in dark mode, so these can't read it. */
:root {
    --aone-navy: #003468;
    --aone-navy-deep: #00264D;
    --aone-navy-light: #0B4F8E;
    --aone-gradient: linear-gradient(120deg, var(--aone-navy-deep) 0%, var(--aone-navy) 50%, var(--aone-navy-light) 100%);
    --aone-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
}

html, body {
    margin: 0;
    font-family: var(--mud-typography-default-family);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

a {
    color: var(--mud-palette-primary);
}

h1:focus {
    outline: none;
}

/* Counts, percentages and times line up when digits are equal width. */
.mud-chip, .tnum, .mud-table-cell {
    font-variant-numeric: tabular-nums;
}

/* Keyboard focus is always visible, in the brand color. */
:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.blazor-error-boundary {
    padding: 12px 16px;
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-error);
    color: #fff;
}

    .blazor-error-boundary::after {
        content: "Something went wrong showing this part of the page.";
    }

/* ── Small layout utilities ── */

.page-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.muted {
    color: var(--mud-palette-text-secondary);
}

/* A soft blue panel (airrosti.com's pale tint; a deeper navy in dark mode). */
.tint {
    background: var(--mud-palette-background-gray);
    border-radius: var(--mud-default-borderradius);
}

/* ── App shell ────────────────────────────────────────────────────────────
   Flex column shell: header + scrollable middle + bottom nav. position:fixed so the shell itself can
   never scroll (on real iOS, a document-level scroll drags position:fixed bars along with it — this is
   the only layout that actually pins them). Sized with 100dvh, NOT inset:0/100vh: on iOS a fixed inset:0
   element fills the toolbar-*retracted* layout viewport, overshooting the visible area. Only .app-main
   scrolls, so the header and footer-bar never move. */

/* The fixed app-shell locks the document and scrolls an inner pane (.app-main) instead. Gated on the shell
   actually being present, so pages without it (sign-in) keep a normally scrolling document. */
html:has(.app-shell),
body:has(.app-shell) {
    height: 100%;
    overflow: hidden;
}

body {
    background: var(--mud-palette-background);
}

.app-shell {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;    /* fallback for engines without dvh */
    height: 100dvh;   /* dynamic viewport height — tracks the iOS toolbar so the nav never overshoots */
    display: flex;
    flex-direction: column;   /* header / scrolling main / bottom bar (phones) */
    background: var(--mud-palette-background);
}

.app-body {
    flex: 1 1 auto;
    min-height: 0;   /* let .app-main actually scroll */
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* ── Top bar ── a full-width bar in the shell's flow, above the scrolling page. It never overlaps the page:
   content always starts below it. Only .app-main scrolls, so the bar stays pinned to the top. It pads itself
   down past the status bar / notch (env() is 0 where there's no inset), so on edge-to-edge Android and iOS
   its background fills the status bar area and the logo and buttons sit below it. */

.app-top {
    flex: 0 0 auto;
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    padding-top: env(safe-area-inset-top);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    background: var(--mud-palette-appbar-background);
    color: var(--mud-palette-appbar-text);
    box-shadow: 0 2px 10px rgba(0, 20, 50, 0.12);
}

/* ── Header ── logo, centered links (desktop) and actions, centered to the page width. */

.app-header {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 1240px;
    height: 60px;
    margin: 0 auto;
    padding: 0 10px 0 18px;
}

@media (max-width: 599px) {
    .app-header {
        height: 52px;
        padding: 0 4px 0 14px;
    }
}

.app-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: inherit;
    text-decoration: none;
    border-radius: 8px;
    flex-shrink: 0;
}

.app-logo {
    display: block;
    height: 40px;
    width: auto;
}

@media (max-width: 599px) {
    .app-logo {
        height: 32px;
    }
}

.app-wordmark {
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.app-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    flex-shrink: 0;
}

.app-wordmark-by {
    margin-left: 6px;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
}

@media (max-width: 359px) {
    .app-wordmark-by {
        display: none;
    }
}

/* Desktop links, centered in the bar. Hidden on phones (BottomNav takes over). */
.top-nav {
    display: none;
    flex: 1 1 auto;
    justify-content: center;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.top-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 8px 14px;
    border-radius: 999px;
    color: var(--mud-palette-text-primary);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: color 120ms ease, background 120ms ease;
}

.top-nav-link:hover {
    color: var(--mud-palette-primary);
}

.top-nav-link.active {
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    font-weight: 600;
}

/* The dropdown triggers look exactly like the plain links beside them. */
.top-nav-menu .mud-button-root {
    padding: 8px 10px 8px 14px;
    border-radius: 999px;
    color: var(--mud-palette-text-primary);
    font-size: 0.92rem;
    font-weight: 500;
    min-width: 0;
}

.top-nav-menu .mud-button-root .mud-button-icon-end {
    margin-left: 2px;
}

.top-nav-menu .mud-button-root:hover {
    color: var(--mud-palette-primary);
    background: transparent;
}

.top-nav-menu.active .mud-button-root {
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    font-weight: 600;
}

.top-nav-popover .mud-menu-item {
    border-radius: 8px;
    margin: 0 4px;
}

.top-nav-popover.mud-popover {
    border-radius: 10px !important;
    padding: 6px 0;
    box-shadow: 0 8px 24px rgba(0, 20, 50, 0.14) !important;
}

/* ── Main content ── */

.app-main {
    flex: 1 1 auto;
    /* A flex item defaults to min-height:auto, which refuses to shrink below its content — min-height:0
       lets it shrink to the shell so its own overflow-y actually scrolls. */
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;   /* page banners span the full width */
    -webkit-overflow-scrolling: touch;
}

/* The gap between the top bar and the page. A hero pulls itself up by this much (--page-top) so it starts
   flush under the bar. */
.sticky-content {
    --page-top: 24px;
    padding-top: var(--page-top);
    padding-bottom: 48px;
}

@media (max-width: 599px) {
    .sticky-content {
        --page-top: 16px;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* ── Surfaces ── white cards with 10px corners on a barely-there shadow; pill buttons and chips. */

.mud-paper.mud-elevation-1,
.mud-paper.mud-elevation-2,
.mud-paper.mud-elevation-3,
.mud-card.mud-elevation-1,
.mud-card.mud-elevation-2 {
    border-radius: 10px !important;
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: var(--aone-shadow) !important;
}

.mud-paper-outlined {
    border-radius: 10px !important;
    border-color: var(--mud-palette-lines-default) !important;
    background: var(--mud-palette-surface);
}

.mud-button-root {
    text-transform: none;
    letter-spacing: normal;
    border-radius: 999px !important;
}

.mud-button-filled {
    box-shadow: none !important;
}

/* Filled and outlined pills are 44px tall, the mobile design's control height and the website's. */
.mud-button-filled-size-medium,
.mud-button-outlined-size-medium {
    min-height: 44px;
    padding-left: 22px;
    padding-right: 22px;
}

/* Primary actions are solid brand navy (light blue in dark mode). */
.mud-button-filled.mud-button-filled-primary {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.mud-button-filled.mud-button-filled-primary:hover {
    filter: brightness(1.06);
}

/* The one main action on a screen: an orange pill with a navy label and a soft glow. White on this
   orange is ~2.3:1; navy is ~5.5:1. */
.btn-cta.mud-button-root {
    background: var(--mud-palette-secondary) !important;
    color: var(--mud-palette-secondary-text) !important;
    box-shadow: 0 8px 22px color-mix(in srgb, var(--mud-palette-secondary) 45%, transparent) !important;
    padding-left: 22px;
    padding-right: 22px;
}

.btn-cta.mud-button-root:hover {
    filter: brightness(1.05);
}

/* A round navy badge for a card or section icon, as in the template's feature cards. */
.icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 50%;
    color: #fff;
    background: var(--aone-gradient);
    box-shadow: 0 4px 12px rgba(0, 38, 77, 0.24);
}

/* The two choices on the signed-out home page. */
.welcome-choice {
    min-height: 100%;
}

.icon-badge.small {
    width: 36px;
    height: 36px;
    box-shadow: none;
}

.mud-button-outlined-primary {
    border-width: 1.5px;
}

/* The second action beside the orange one, as on airrosti.com: an orange-outlined pill. The label stays in
   the text color (orange text on white is ~2.3:1), and goes white on the navy page hero. */
.mud-button-outlined.mud-button-outlined-secondary {
    border: 2px solid var(--mud-palette-secondary);
    color: var(--mud-palette-text-primary);
}

.mud-button-outlined.mud-button-outlined-secondary:hover {
    background: color-mix(in srgb, var(--mud-palette-secondary) 12%, transparent);
}

/* Filled orange buttons are the call to action everywhere, not only with .btn-cta. */
.mud-button-filled.mud-button-filled-secondary {
    background: var(--mud-palette-secondary);
    color: var(--mud-palette-secondary-text);
}

.mud-button-filled.mud-button-filled-secondary:hover {
    filter: brightness(1.05);
}

.mud-chip {
    border-radius: 999px !important;
}

.mud-input-outlined-border {
    border-radius: 8px !important;
}

.mud-alert {
    border-radius: 10px !important;
}

/* ── Bottom tab bar (phone) ── a normal flow element at the bottom of the flex column (not fixed),
   so it stays pinned regardless of content height or iOS scroll quirks. */

.sticky-bottom-nav {
    flex: 0 0 auto;
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    background: color-mix(in srgb, var(--mud-palette-surface) 92%, transparent);
    backdrop-filter: saturate(160%) blur(12px);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    border-top: 1px solid var(--mud-palette-lines-default);
    padding-bottom: env(safe-area-inset-bottom);   /* clear the home indicator */
}

.sticky-bottom-nav .sbn-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 8px 0 6px;
    text-decoration: none;
    color: var(--mud-palette-text-secondary);
    font-size: 11px;
    font-weight: 600;
    transition: color 120ms ease;
    background: none;   /* the "More" tab is a <button>; match the <a> tabs */
    border: 0;
    cursor: pointer;
    font-family: inherit;
}

.sticky-bottom-nav .sbn-item .mud-icon-root {
    font-size: 24px;
}

/* "Appointments" fits a 375px phone by taking a little from its neighbours; below 360px it shortens instead. */
@media (max-width: 359px) {
    .sticky-bottom-nav .sbn-item {
        min-width: 0;
    }

    .sticky-bottom-nav .sbn-item > span:last-child {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

.sticky-bottom-nav .sbn-item.active {
    color: var(--mud-palette-primary);
}

/* The unread-messages count on the Messages nav item: over the tab icon on phones, after the label on desktop. */
.sbn-icon {
    position: relative;
    display: inline-flex;
}

.nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--mud-palette-secondary);
    color: var(--aone-navy-deep, #001f3f);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.sbn-icon .nav-badge {
    position: absolute;
    top: -4px;
    right: -10px;
    box-shadow: 0 0 0 2px var(--mud-palette-surface);
}

.top-nav-link .nav-badge {
    margin-left: 6px;
}

/* ── Desktop layout (>=900px): links in the top bar replace the bottom tab bar ──
   Pure CSS (not a JS breakpoint probe) so there's no flash and it works in the MAUI WebView. */
@media (min-width: 900px) {
    .top-nav {
        display: flex;
    }

    .sticky-bottom-nav {
        display: none;
    }

    .sticky-content {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
}

/* ── Print ── the app shell is a fixed, inner-scrolling frame; for print, let the page flow and drop the
   chrome (nav, tab bar, plan bar, hero buttons) so only the content prints. */
@media print {
    html:has(.app-shell), body:has(.app-shell) { height: auto; overflow: visible; }
    .app-shell { position: static; height: auto; display: block; }
    .app-body, .app-main { display: block; overflow: visible; height: auto; }
    .app-top, .sticky-bottom-nav, .plan-bar, .page-hero-actions, .page-hero-art, .page-hero-wave, #blazor-error-ui { display: none !important; }
    .page-hero { background: none !important; color: #000 !important; padding-top: 0 !important; }
    .page-highlights { display: none !important; }
    body { background: #fff !important; }
}

/* ── Booking (/schedule) ── airrosti-app's v2 scheduling look (reactnative/screens/FastScheduleScreens,
   fastScheduleDesign.ts): a plain title with the orange headline rule, the In-Clinic / Virtual control, white
   cards on the canvas (visit type In-Clinic / Reach A Doc / ARR), a pill search field ending in an orange magnifier block, and light-blue date and time chips
   that take a 2px navy outline when picked rather than a darker fill. The flow itself is AGraph2's
   Airrosti.Scheduling.Components (MudBlazor + asch-* hooks); everything here is scoped to the page.
   Colors come from the theme (light and dark); the chip blue is the steel blue washed into the surface, which
   lands on airrosti-app's #D5ECF1 in light mode. */

.reach-schedule {
    --rs-chip: color-mix(in srgb, var(--mud-palette-tertiary) 20%, var(--mud-palette-surface));
    --rs-chip-hover: color-mix(in srgb, var(--mud-palette-tertiary) 30%, var(--mud-palette-surface));
    --rs-ink: var(--mud-palette-text-primary);
    --rs-muted: var(--mud-palette-text-secondary);
    --rs-line: var(--mud-palette-lines-inputs);
    --rs-hairline: var(--mud-palette-divider);
    --rs-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
    --rs-shadow-raised: 0 1px 9px rgba(0, 0, 0, 0.08);
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Intro: title, visit type, section heading. */
.rs-intro {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-top: 8px;
}

.rs-title {
    margin: 0;
    font-size: 1.75rem;
    line-height: 1.3;
    font-weight: 500;
    color: var(--mud-palette-primary);
    text-wrap: balance;
}

/* The headline rule: a short orange underline, as airrosti-app's HeadlineRule. */
.rs-title::after {
    content: "";
    display: block;
    width: 44px;
    height: 4px;
    margin-top: 10px;
    border-radius: 2px;
    background: var(--mud-palette-secondary);
}

.rs-visit-type {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rs-visit-label {
    font-size: 1rem;
    font-weight: 500;
    color: var(--rs-ink);
}

/* The segmented control: 48 high, 10 corners, the picked half filled navy. Full width at every size, so it lines
   up with the fields and result blocks below it. */
.rs-segments {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    height: 48px;
    padding: 3px;
    border: 1px solid var(--rs-line);
    border-radius: 10px;
    background: var(--mud-palette-surface);
}

.rs-segment {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--rs-ink);
    font: inherit;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}

.rs-segment .mud-icon-root {
    color: var(--mud-palette-tertiary);
}

.rs-segment:hover:not(.selected) {
    background: color-mix(in srgb, var(--mud-palette-primary) 6%, transparent);
}

.rs-segment.selected {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.rs-segment.selected .mud-icon-root {
    color: inherit;
}

.rs-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--rs-hairline);
}

.rs-heading {
    margin: 0;
    font-size: 1.25rem;
    line-height: 1.4;
    font-weight: 500;
    color: var(--mud-palette-primary);
}

.rs-lede {
    margin: 0;
    max-width: 62ch;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--rs-muted);
}

.rs-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 20px 24px;
    border-radius: 10px;
    background: var(--mud-palette-surface);
    box-shadow: var(--rs-shadow);
}

.rs-card-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--mud-palette-primary);
}

/* The login offer under the booking confirmation (PostBookingAccount). */
.rs-account {
    margin-top: 16px;
    align-items: stretch;
}

.rs-account form {
    width: 100%;
    max-width: 420px;
}

.rs-account-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ── The flow ── */

/* The intro already says what this is; the flow's own heading would repeat it. */
.reach-schedule .asch-clinic-search > .mud-typography-h6 {
    display: none;
}

/* Search: a pill field ending in a flush orange magnifier block (rounded on the right, square where it meets the
   field), then "use my location" beside it. */
.reach-schedule .asch-clinic-search .flex-row {
    gap: 0 !important;
    align-items: flex-start !important;
}

.reach-schedule .asch-clinic-search .mud-input-outlined-border {
    border-radius: 999px 0 0 999px !important;
    border-color: var(--rs-line);
}

.reach-schedule .asch-clinic-search .mud-input-control,
.reach-schedule .asch-clinic-search .mud-input {
    background: var(--mud-palette-surface);
    border-radius: 999px 0 0 999px;
}

.reach-schedule .asch-clinic-search .mud-input-label-outlined {
    margin-left: 10px;
}

.reach-schedule .asch-clinic-search .mud-input-slot {
    padding-left: 22px !important;
}

.reach-schedule .asch-clinic-search .mud-icon-button[aria-label="Search"] {
    flex: 0 0 auto;
    width: 58px;
    height: 56px;
    margin-top: 8px;   /* the outlined field keeps 8px above its box for the floating label */
    margin-left: -1px;
    border-radius: 0 999px 999px 0 !important;
    background: var(--mud-palette-secondary);
    color: var(--mud-palette-secondary-text);
}

.reach-schedule .asch-clinic-search .mud-icon-button[aria-label="Search"]:hover {
    filter: brightness(1.05);
}

.reach-schedule .asch-clinic-search .mud-icon-button[aria-label="Use my location"] {
    margin-top: 12px;
    margin-left: 8px;
    color: var(--mud-palette-tertiary);
}

/* Under the search: "Locations near …" as a quiet line, and the sort/filter buttons as compact outlined fields. */
.reach-schedule .asch-filters {
    margin-top: 16px !important;
    gap: 14px !important;
}

/* "Locations near …" on the left, the radius pinned to the right of the same line. */
.reach-schedule .asch-filters > .flex-row:first-child {
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px;
}

.reach-schedule .asch-filters > .flex-row:first-child .mud-select {
    flex: 0 0 132px;
    margin: 0 !important;
}

/* The filters in two full rows: Sort, Gender, Availability in thirds, then Language and Visit type in halves (five
   across cut their values off). On a phone, two columns with Visit type across the last row. Every row ends flush. */
.reach-schedule .asch-filters > .flex-row:last-child {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px 10px !important;   /* rows a little apart, so a field's floating label clears the row above */
    margin: 0 !important;
}

.reach-schedule .asch-filters > .flex-row:last-child > .mud-select,
.reach-schedule .asch-filters .asch-filter {
    min-width: 0 !important;
    margin: 0 !important;
}

@media (min-width: 600px) {
    .reach-schedule .asch-filters > .flex-row:last-child > .mud-select:nth-child(-n + 3) {
        grid-column: span 2;
    }

    .reach-schedule .asch-filters > .flex-row:last-child > .mud-select:nth-child(n + 4) {
        grid-column: span 3;
    }
}

@media (max-width: 599px) {
    .reach-schedule .asch-filters > .flex-row:last-child {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .reach-schedule .asch-filters > .flex-row:last-child > .mud-select:last-child {
        grid-column: 1 / -1;
    }
}

.reach-schedule .asch-filters .mud-typography-subtitle2 {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--rs-muted);
}

.reach-schedule .asch-filters .mud-typography-subtitle2 b {
    color: var(--rs-ink);
    font-weight: 600;
}

.reach-schedule .asch-filters .mud-input-outlined-border,
.reach-schedule .asch-location .mud-select .mud-input-outlined-border,
.reach-schedule .asch-state-picker .mud-input-outlined-border,
.reach-schedule .asch-form .mud-input-outlined-border {
    border-radius: 8px !important;
    border-color: var(--rs-line);
}

.reach-schedule .asch-filters .mud-select .mud-input,
.reach-schedule .asch-filters .mud-select .mud-select-input {
    font-size: 0.875rem;
}

.reach-schedule .asch-filters .mud-input-control,
.reach-schedule .asch-filters .mud-input {
    background: var(--mud-palette-surface);
    border-radius: 8px;
}

/* A clinic: a white card with 10 corners and the card shadow, its name a navy heading, a hairline under the
   header, address and links in the caption size. */
.reach-schedule .asch-location.mud-card {
    border: 0 !important;
    border-radius: 10px !important;
    box-shadow: var(--rs-shadow) !important;
    background: var(--mud-palette-surface);
}

.reach-schedule .asch-location .mud-card-header {
    padding: 20px 24px 14px;
    border-bottom: 1px solid var(--rs-hairline);
}

.reach-schedule .asch-location .mud-card-header .mud-typography-h6 {
    font-size: 1.25rem;
    line-height: 1.4;
    font-weight: 500;
    color: var(--mud-palette-primary);
}

.reach-schedule .asch-location .mud-card-header .mud-typography-body2 {
    font-size: 0.875rem;
    color: var(--rs-muted);
}

.reach-schedule .asch-location .mud-card-content {
    padding: 14px 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.reach-schedule .asch-location .mud-card-content > .mud-typography-body2 {
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--rs-muted);
}

.reach-schedule .asch-location .mud-card-content a {
    color: var(--mud-palette-primary);
    font-weight: 500;
}

/* "Next available appointment:" / "Step 1: Select a date": the step label. */
.reach-schedule .asch-location .mud-typography-subtitle2 {
    margin-top: 10px;
    font-size: 1rem;
    font-weight: 500;
    color: var(--rs-ink);
}

.reach-schedule .asch-location .mud-typography-caption {
    color: var(--rs-muted);
}

/* Date and time chips sit in even grid columns, every chip the width of its column, so rows line up and a short
   last row starts at the left like the rest. */
.reach-schedule .asch-chips,
.reach-schedule .asch-times {
    display: grid;
    gap: 10px;
    align-items: stretch;
}

.reach-schedule .asch-chips {
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
}

.reach-schedule .asch-times {
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
}

/* Date chips: light blue, 10 corners; the picked one keeps its fill and takes a 2px navy outline. */
.reach-schedule .asch-chips .mud-chip {
    width: 100%;
    height: 44px;
    margin: 0;
    padding: 0 8px;
    justify-content: center;
    border: 2px solid transparent !important;
    border-radius: 10px !important;
    background: var(--rs-chip) !important;
    color: var(--rs-ink) !important;
    font-size: 0.95rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.reach-schedule .asch-chips .mud-chip .mud-chip-content {
    justify-content: center;
    width: 100%;
    white-space: nowrap;
}

.reach-schedule .asch-chips .mud-chip:hover {
    background: var(--rs-chip-hover) !important;
}

.reach-schedule .asch-chips .mud-chip.mud-chip-color-primary {
    border-color: var(--mud-palette-primary) !important;
}

/* Time chips: the same blue, 39 high. */
.reach-schedule .asch-times .mud-button-root {
    width: 100%;
    min-width: 0 !important;
    margin: 0;
    white-space: nowrap;
}

.reach-schedule .asch-times .mud-button-root.mud-button-outlined {
    min-height: 39px;
    padding: 0 6px;
    border: 2px solid transparent !important;
    border-radius: 10px !important;
    background: var(--rs-chip);
    color: var(--rs-ink);
    font-size: 0.95rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.reach-schedule .asch-times .mud-button-root.mud-button-outlined:hover {
    background: var(--rs-chip-hover);
    border-color: var(--mud-palette-primary) !important;
}

/* A time someone else just took: still there, plainly unavailable. */
.reach-schedule .asch-times .mud-button-root.mud-button-text[disabled] {
    border-radius: 10px !important;
    color: var(--mud-palette-text-disabled);
    text-decoration: line-through;
}

/* "N more dates" / "N more": quiet navy text links, starting at the left edge of their row. */
.reach-schedule .asch-chips .mud-button-text,
.reach-schedule .asch-times .mud-button-text:not([disabled]) {
    grid-column: 1 / -1;
    justify-self: start;
    width: auto !important;
    padding-left: 2px;
    padding-right: 2px;
    color: var(--mud-palette-primary);
    font-weight: 500;
}

/* A single provider: a quiet outlined tag. */
.reach-schedule .asch-location .mud-chip-outlined {
    align-self: flex-start;
    border-radius: 8px !important;
    border-color: var(--rs-line);
    color: var(--rs-ink);
}

/* ── The booking sheet ── 16 corners, the raised shadow; the picked appointment with the orange rule down its left
   edge; the call to action is the orange pill. */
.reach-schedule .asch-booking.mud-paper {
    padding: 22px !important;
    border: 0 !important;
    border-radius: 16px !important;
    box-shadow: var(--rs-shadow-raised) !important;
}

.reach-schedule .asch-booking > .mud-typography-h6,
.reach-schedule .asch-booking .mud-typography-h6 {
    font-size: 1.5rem;
    line-height: 1.33;
    font-weight: 500;
    color: var(--mud-palette-primary);
}

.reach-schedule .asch-summary.mud-paper {
    border: 0 !important;
    border-left: 4px solid var(--mud-palette-secondary) !important;
    border-radius: 0 10px 10px 0 !important;
    box-shadow: none !important;
    background: var(--rs-chip);
    padding: 14px 18px !important;
}

.reach-schedule .asch-summary .mud-avatar {
    width: 48px;
    height: 48px;
}

.reach-schedule .asch-summary .mud-typography-subtitle1 {
    color: var(--mud-palette-primary);
}

.reach-schedule .asch-form .mud-button-filled.mud-button-filled-primary {
    min-height: 48px;
    background: var(--mud-palette-secondary);
    color: var(--mud-palette-secondary-text);
    font-size: 1rem;
    font-weight: 500;
}

/* The call to action before its form is complete: the orange, faded (airrosti-app's primarydisabled). */
.reach-schedule .asch-form .mud-button-filled.mud-button-filled-primary[disabled] {
    background: color-mix(in srgb, var(--mud-palette-secondary) 40%, var(--mud-palette-surface));
    color: color-mix(in srgb, var(--mud-palette-secondary-text) 55%, transparent);
}

@media (max-width: 599px) {
    .reach-schedule {
        gap: 20px;
    }

    .rs-title {
        font-size: 1.5rem;
    }

    /* Three labels across a phone: drop the glyphs so "Reach A Doc" keeps to one line. */
    .rs-segment {
        gap: 0;
        font-size: 0.9rem;
        white-space: nowrap;
    }

    .rs-segment .mud-icon-root {
        display: none;
    }

    .reach-schedule .asch-location .mud-card-header,
    .reach-schedule .asch-location .mud-card-content {
        padding-left: 18px;
        padding-right: 18px;
    }

    /* Phones: three even columns of dates and of times, as airrosti-app's SlotPicker rows. */
    .reach-schedule .asch-chips,
    .reach-schedule .asch-times {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .reach-schedule .asch-chips .mud-chip,
    .reach-schedule .asch-times .mud-button-root {
        padding: 0 4px;
        font-size: 0.9rem;
    }
}

/* The flow writes hints in the theme's secondary color, which in Reach is the orange: too faint as text on white
   (about 2.3:1). On this page they take the muted text color, as airrosti-app's hints do. */
.reach-schedule .mud-secondary-text {
    color: var(--mud-palette-text-secondary) !important;
}

/* The Reach a Doc / ARR picker's "times will appear here" placeholder: the same card as a clinic. */
.reach-schedule .asch-state-picker .mud-paper-outlined {
    border: 0 !important;
    border-radius: 10px !important;
    box-shadow: var(--rs-shadow) !important;
    background: var(--mud-palette-surface);
}

/* ── Messages (/messages, /messages/{provider}) ─────────────────────────────
   The inbox is one card of rows; a conversation is a bar, the thread and the compose box, sized to the screen so
   only the thread scrolls. The patient's messages are navy on the right, the provider's tinted on the left. */
.reach-messages,
.reach-conversation {
    max-width: 760px;
    margin: 0 auto;
}

.provider-avatar {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--mud-palette-background-gray);
}

.provider-avatar.initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 15px;
    color: var(--mud-palette-tertiary);
}

.provider-avatar.small {
    width: 36px;
    height: 36px;
    font-size: 13px;
}

.rm-list {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
    border-radius: 10px;
    background: var(--mud-palette-surface);
    box-shadow: var(--aone-shadow);
    overflow: hidden;
}

.rm-list li + li {
    border-top: 1px solid var(--mud-palette-lines-default);
}

.rm-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    color: inherit;
    text-decoration: none;
}

.rm-row:hover,
.rm-row:focus-visible {
    background: var(--mud-palette-action-default-hover);
}

.rm-row-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rm-row-top {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.rm-name {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rm-time {
    flex: none;
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
}

.rm-preview {
    font-size: 14px;
    color: var(--mud-palette-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rm-row.unread .rm-preview {
    color: var(--mud-palette-text-primary);
    font-weight: 500;
}

.reach-conversation {
    display: flex;
    flex-direction: column;
    /* The page below the top bar and above the phone tab bar (and the page's own padding); only the thread
       scrolls. */
    height: calc(100dvh - 190px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    min-height: 420px;
}

@media (min-width: 900px) {
    .reach-conversation {
        height: calc(100dvh - 140px - env(safe-area-inset-top));
    }
}

.rc-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 4px 10px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.rc-who {
    min-width: 0;
}

.rc-name {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rc-sub {
    font-size: 12px;
}

.rc-thread {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 4px;
}

.rc-older {
    display: flex;
    justify-content: center;
}

.rc-empty {
    margin: auto;
    max-width: 34ch;
    text-align: center;
}

.rc-msg {
    display: flex;
    flex-direction: column;
    max-width: min(80%, 520px);
}

.rc-msg.mine {
    align-self: flex-end;
    align-items: flex-end;
}

.rc-msg.theirs {
    align-self: flex-start;
    align-items: flex-start;
}

.rc-bubble {
    padding: 10px 14px;
    border-radius: 18px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 1.45;
}

.rc-msg.mine .rc-bubble {
    background: var(--aone-navy);
    color: #fff;
    border-bottom-right-radius: 6px;
}

.rc-msg.theirs .rc-bubble {
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-primary);
    border-bottom-left-radius: 6px;
}

.rc-msg.pending .rc-bubble {
    opacity: .7;
}

.rc-msg.failed .rc-bubble {
    opacity: 1;
    background: transparent;
    color: var(--mud-palette-text-primary);
    box-shadow: inset 0 0 0 1.5px var(--mud-palette-error);
}

.rc-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 3px;
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
}

.rc-error {
    color: var(--mud-palette-error);
}

.rc-alert {
    margin: 0 0 8px;
}

.rc-closed {
    padding: 14px 16px;
    border-radius: 10px;
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
    text-align: center;
}

.rc-compose {
    padding-top: 10px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.rc-compose-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.rc-input {
    flex: 1;
    min-width: 0;
    margin: 0 !important;
}

.rc-input .mud-input-outlined-border {
    border-radius: 22px;
}

.rc-send {
    flex: none;
    margin-bottom: 4px;
}

.rc-problem {
    margin-bottom: 8px;
    font-size: 14px;
    color: var(--mud-palette-error);
}

.rc-count {
    margin-top: 4px;
    font-size: 12px;
    text-align: right;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
}

.rc-count.over {
    color: var(--mud-palette-secondary);
    font-weight: 600;
}

/* ── Appointments (/appointments, /appointments/{guid}, …/change) ─────────────
   The list is two cards of rows (Upcoming, Past), each led by a calendar tile; an appointment is a card of facts and
   a stack of full-width actions; changing one is light-blue day and time chips that take a navy outline when picked,
   as on /schedule. */
.reach-appointments {
    --ra-chip: color-mix(in srgb, var(--mud-palette-tertiary) 20%, var(--mud-palette-surface));
    --ra-chip-hover: color-mix(in srgb, var(--mud-palette-tertiary) 30%, var(--mud-palette-surface));
    max-width: 760px;
    margin: 0 auto;
    padding-bottom: 24px;
}

.ra-heading {
    margin: 24px 0 8px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.ra-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-radius: 10px;
    background: var(--mud-palette-surface);
    box-shadow: var(--aone-shadow);
    overflow: hidden;
}

.ra-list li + li {
    border-top: 1px solid var(--mud-palette-lines-default);
}

.ra-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    color: inherit;
    text-decoration: none;
}

.ra-row:hover,
.ra-row:focus-visible {
    background: var(--mud-palette-action-default-hover);
}

.ra-date {
    flex: none;
    width: 48px;
    height: 52px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--ra-chip);
    color: var(--mud-palette-primary);
    line-height: 1.1;
}

.ra-row.past .ra-date {
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
}

.ra-date-month {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ra-date-day {
    font-size: 20px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.ra-row-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ra-when {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.ra-who,
.ra-where {
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ra-where {
    display: flex;
    align-items: center;
    gap: 4px;
}

.ra-chevron {
    flex: none;
    color: var(--mud-palette-text-secondary);
}

.ra-status {
    flex: none;
    align-self: flex-start;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
}

.ra-row-text .ra-status {
    margin-top: 4px;
}

.ra-status.cancelled,
.ra-status.noshow {
    background: color-mix(in srgb, var(--mud-palette-error) 12%, var(--mud-palette-surface));
    color: var(--mud-palette-error);
}

.ra-none {
    margin: 0;
    padding: 16px;
    border-radius: 10px;
    background: var(--mud-palette-surface);
    box-shadow: var(--aone-shadow);
}

.ra-more {
    display: flex;
    justify-content: center;
    margin-top: 8px;
}

.ra-back {
    margin: 8px 0 4px -8px;
}

.ra-card {
    position: relative;
    margin-top: 8px;
    padding: 20px;
    border-radius: 10px;
    background: var(--mud-palette-surface);
    box-shadow: var(--aone-shadow);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ra-card > .ra-status {
    position: absolute;
    top: 16px;
    right: 16px;
}

.ra-fact {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.ra-fact > .mud-icon-root {
    flex: none;
    margin-top: 2px;
    color: var(--mud-palette-primary);
}

.ra-fact-main {
    font-weight: 600;
}

.ra-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
}

.ra-note {
    margin: 12px 0 0;
    font-size: 14px;
}

.ra-cancel-open {
    margin-top: 12px;
    display: flex;
    justify-content: center;
}

.ra-cancel {
    margin-top: 16px;
    gap: 4px;
}

.ra-cancel .ra-heading {
    margin-top: 0;
}

.ra-reasons {
    display: flex;
    flex-direction: column;
}

.ra-cancel-buttons,
.ra-confirm {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}

.ra-confirm {
    flex-direction: column;
    margin-top: 24px;
}

.ra-tz {
    font-weight: 400;
    font-size: 14px;
}

/* Day chips scroll sideways on a phone; time chips wrap in a grid. */
.ra-days {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 2px 6px;
    scrollbar-width: none;
}

.ra-day,
.ra-time {
    border: 2px solid transparent;
    border-radius: 10px;
    background: var(--ra-chip);
    color: var(--mud-palette-text-primary);
    font: inherit;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
}

.ra-day {
    flex: none;
    width: 64px;
    padding: 8px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.2;
}

.ra-day-name,
.ra-day-month {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
}

.ra-day-num {
    font-size: 20px;
    font-weight: 700;
}

.ra-times {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 8px;
}

.ra-time {
    min-height: 40px;
    font-weight: 500;
}

.ra-day:hover,
.ra-time:hover {
    background: var(--ra-chip-hover);
}

.ra-day.selected,
.ra-time.selected {
    border-color: var(--mud-palette-primary);
}

/* ── Profile (/profile) ── Settings' cards: a heading with its Edit button, facts as a two-column list that stacks
   on a phone, and the forms in place. */
.rp-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.rp-facts {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 20px;
    margin: 8px 0 12px;
}

.rp-facts dt {
    color: var(--mud-palette-text-secondary);
}

.rp-facts dd {
    margin: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 480px) {
    .rp-facts {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .rp-facts dd {
        margin-bottom: 8px;
    }
}

.rp-address {
    font-style: normal;
    line-height: 1.5;
}

.rp-pending {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 4px;
    font-size: 14px;
}

.rp-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rp-row {
    display: flex;
    gap: 12px;
}

.rp-grow {
    flex: 1;
    min-width: 0;
}

.rp-zip {
    flex: 0 0 120px;
}

.rp-hint {
    margin: 0;
    font-size: 14px;
}

.rp-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* ── Exercises (/exercises) and the Home card ───────────────────────────────
   AGraph2's Airrosti.ActiveCare.Components (MudBlazor + aac-* hooks, colors from the theme); the page only sets the
   column and the card's spacing. */
.reach-exercises {
    max-width: 760px;
    margin: 0 auto;
}

/* Signed-in home: the next visit's card, then today's exercises. The rows below the card are the appointments list's. */
.reach-home {
    --ra-chip: color-mix(in srgb, var(--mud-palette-tertiary) 20%, var(--mud-palette-surface));
    max-width: 640px;
    padding-bottom: 24px;
}

.home-visit {
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-radius: 10px;
}

.home-visit-when {
    font-variant-numeric: tabular-nums;
}

.home-visit-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    font-size: 14px;
}

.home-visit-where {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.home-visit-caption {
    margin: 6px 0 10px;
}

.home-visit-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 20px;
    margin-top: 6px;
    font-size: 14px;
}

.reach-home .ra-list {
    margin-bottom: 8px;
}

.home-active-care {
    margin: 16px 0;
}

.reach-forms {
    max-width: 760px;
    margin: 0 auto;
    padding-bottom: 24px;
}