/* /Components/Layout/AppearanceToggle.razor.rz.scp.css */
/* The menu's sun-and-moon button (AppearanceToggle): a quiet round control at the far end of the row it sits in (the
   brand row, Presque's own or a clinic's), drawn like the menu's Sign out pill (the same edge, the same hover), so it
   reads as part of the menu and not as a notice. The icon is the text colour, which clears AA on the sidebar on both
   palettes; the edge is decoration. */
.pq-theme-toggle[b-mnkvcuib31] {
    flex: none;
    margin-left: auto;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
    border: 1px solid var(--pq-border);
    border-radius: 999px;
    color: var(--pq-text-soft);
    cursor: pointer;
    transition: border-color 0.14s ease, color 0.14s ease;
}

.pq-theme-toggle:hover[b-mnkvcuib31] {
    border-color: var(--pq-green);
    color: var(--pq-ink);
}

/* One face at a time, and the palette says which: app.css holds each face's display value beside the colours
   (--pq-face-moon, --pq-face-sun), light and dark. A face fills the button, so its tooltip answers anywhere on it. */
.pq-theme-face[b-mnkvcuib31] {
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
}

.pq-theme-face-moon[b-mnkvcuib31] { display: var(--pq-face-moon); }
.pq-theme-face-sun[b-mnkvcuib31] { display: var(--pq-face-sun); }

/* A fingertip target on a phone's width and on any touch screen, as app.css grows every other compact control. */
@media (max-width: 640.98px), (pointer: coarse) {
    .pq-theme-toggle[b-mnkvcuib31] {
        width: 44px;
        height: 44px;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-3hx1q2ryhf] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--pq-bg);
    /* keep content clear of the curved edges / notch in landscape */
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

main[b-3hx1q2ryhf] {
    flex: 1;
    min-width: 0;
    /* a stray wide element scrolls inside its own wrapper (.pq-table-wrap),
       never the whole page */
    overflow-x: clip;
}

.sidebar[b-3hx1q2ryhf] {
    background: var(--pq-surface);
    border-right: 1px solid var(--pq-border);
}

article.content[b-3hx1q2ryhf] {
    max-width: 1180px;
}

@media (max-width: 640.98px) {
    /* The sidebar collapses to a slim top bar; keep it (and the menu button in
       it) reachable wherever the person has scrolled to. */
    .sidebar[b-3hx1q2ryhf] {
        position: sticky;
        top: 0;
        z-index: 1030;
        border-right: none;
        border-bottom: 1px solid var(--pq-border);
        /* INSTALLED HOME-SCREEN APP (manifest display: standalone + viewport-fit=cover on App.razor): the page
           is drawn under the phone's status bar / notch, so without this the Presque mark and the menu button
           sit beneath the clock. The bar simply grows to cover the inset, which also paints that strip in the
           sidebar's own surface for free, on either palette. Zero on every ordinary browser tab. */
        padding-top: env(safe-area-inset-top);
    }

    article.content[b-3hx1q2ryhf] {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        /* 5.5rem, not 2.5: the report-a-problem button floats over the bottom-right corner on every page, which
           is exactly where a trailing Save or Send lands on a phone (docs/22 report-problem-fab-covers-primary-
           actions). The button stays where it is — that placement is deliberate, #444 — so the page reserves a
           lane beneath itself instead. Costs a little scroll on the accounts that have reporting switched on and
           nothing at all visually on the ones that do not, since the space is below the last element either way. */
        padding-bottom: 5.5rem;
    }
}

@media (min-width: 641px) {
    .page[b-3hx1q2ryhf] {
        flex-direction: row;
    }

    .sidebar[b-3hx1q2ryhf] {
        width: 258px;
        height: 100vh;
        height: 100dvh;
        position: sticky;
        top: 0;
        flex-shrink: 0;
    }

    article[b-3hx1q2ryhf] {
        padding-left: 2.2rem !important;
        padding-right: 2rem !important;
        padding-bottom: 3rem;
    }
}

#blazor-error-ui[b-3hx1q2ryhf] {
    background: var(--pq-status-warn-bg);
    color: var(--pq-status-warn-ink);
    bottom: 0;
    box-shadow: var(--pq-shadow-up);
    box-sizing: border-box;
    display: none;
    left: 0;
    /* right gutter clears the absolutely-positioned dismiss button */
    padding: 0.6rem 2.6rem 0.7rem 1.25rem;
    /* stay above the home-indicator area on notched phones */
    padding-bottom: calc(0.7rem + env(safe-area-inset-bottom));
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    /* the reload link inherits the banner's amber ink: the global link green is unreadable on this
       background, and an underline is what marks it as a link once the colour cue is gone */
    #blazor-error-ui .reload[b-3hx1q2ryhf] {
        color: inherit;
        text-decoration: underline;
    }

    /* a real <button>, so the dismiss is reachable by keyboard and announced by a screen reader; these
       resets strip the UA button chrome that a <span> never had */
    #blazor-error-ui .dismiss[b-3hx1q2ryhf] {
        appearance: none;
        background: none;
        border: 0;
        color: inherit;
        cursor: pointer;
        font: inherit;
        line-height: 1;
        padding: 2px 5px;
        position: absolute;
        right: 0.6rem;
        top: 0.45rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.brand-row[b-arqxbg9bk5] {
    height: 72px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    border-bottom: 1px solid var(--pq-border-soft);
}

.brand[b-arqxbg9bk5] {
    display: flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
}

.brand-name[b-arqxbg9bk5] {
    font-family: 'Newsreader', Georgia, serif;
    font-size: calc(22rem / 15.5);
    font-weight: 500;
    color: var(--pq-ink);
    letter-spacing: -0.01em;
}

/* A clinic's logo on its host (BrandMark): a plate under the mark, nothing on the light palette and white on the dark one
   (--pq-logo-plate), drawn 2px outside the picture so the mark sits exactly where it did. The cap is the PICTURE's
   (content-box): under the border-box every element here is born with, the plate's 2px counted inside it, and a
   logo was drawn 22px high where it had been 26 (measured 2026-11-05). */
.brand-logo[b-arqxbg9bk5] {
    box-sizing: content-box;
    max-height: 26px;
    max-width: 100px;
    object-fit: contain;
    background: var(--pq-logo-plate);
    border-radius: 4px;
    padding: 2px;
    margin: -2px;
}

/* The clinic's accent on its host's brand: app.css's .pq-brand-edge draws it (and repoints it on the dark palette); the
   menu only sizes it — a 3px edge, 8px in, as it always was. */
.brand.pq-brand-edge[b-arqxbg9bk5] {
    border-left-width: 3px;
    padding-left: 8px;
}

/* A CLINIC HOST'S ROW (NavMenu's branded branch): the clinic's mark over "secured by Presque", in a column that takes
   what the appearance button leaves and may shrink (min-width: 0), so nothing in it can push the button, or on a phone
   the menu button, out of the 72px bar. The row's height is fixed (the sheet under it is sized from it), so every
   shape below is counted in lines. The tallest are two lines of the display size over the Presque line (63px) and a
   logo over a one-line name over the Presque line (60px).

   THE READER'S TEXT SIZE (app.css, TEXT SIZE) stops at this row's height, which no setting changes. The clinic's
   name is drawn as a mark, at the size the row was drawn for: it follows a smaller setting down and no larger one up,
   since two lines of it already fill the row. The Presque line is the smallest text here and the one that grows, by
   up to a quarter, where the tallest shapes still stand inside the row (66px and 63px). On a phone the column keeps
   its width at every setting: the menu button and the appearance button beside it are sized in px, not by the text
   (the menu button was in rem until 2026-11-05, and a larger setting narrowed the column as it grew).
   ClinicBrandRowBrowserTests measures each shape at a quarter and a half larger. */
.brand-stack[b-arqxbg9bk5] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    margin-right: 10px;
}

.brand-stack .brand[b-arqxbg9bk5] {
    max-width: 100%;
}

/* The name gives way, never the logo: a mark squeezed out of its proportions is worse than a caption cut short. */
.brand-stack .brand-logo[b-arqxbg9bk5] {
    flex: none;
}

/* A name with no logo may take a second line, and breaks inside a word only when a single word is wider than the row.
   Past two lines it ends in an ellipsis (the -webkit- pair is the one spelling every browser draws). */
.brand-stack .brand-name[b-arqxbg9bk5] {
    font-size: min(calc(22rem / 15.5), 22px); /* pq-px: the row is 72px at every text size, and two lines of this fill it */
    min-width: 0;
    line-height: 1.1;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

/* The smaller size: a name too long for the display size, and any name beside a logo. */
.brand-stack-compact .brand-name[b-arqxbg9bk5] {
    font-size: min(calc(15rem / 15.5), 15px); /* pq-px: the row is 72px at every text size; a logo over this over the Presque line fills it */
    line-height: 1.15;
}

/* With a logo the name is one line, and the mark wraps: the name stands beside the logo when both fit and drops
   under it when they do not, where it has the column's whole width before it ends in an ellipsis. */
.brand-stack-logo .brand[b-arqxbg9bk5] {
    flex-wrap: wrap;
    gap: 2px 9px;
}

.brand-stack-logo .brand-name[b-arqxbg9bk5] {
    display: block;
    max-width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* "secured by Presque" (docs/17 §7: mandatory on a clinic host), under the mark, on a line of its own that no name
   can squeeze. The muted text colour, which clears AA on the sidebar on both palettes (5.0:1 light, 7.7:1 dark); the
   body text at 70% opacity it used to be drawn in read 3.4:1 on the light one. Under an accent edge it starts where
   the name does. It may wrap, and would only where the column is narrower than the line itself, where a second line
   is better than running under the button. No phone's bar is that narrow now: until 2026-11-05 the menu button grew
   with the text, and a 320px phone set past one and a half times the usual size was. */
.brand-secured[b-arqxbg9bk5] {
    font-size: min(calc(11rem / 15.5), 13.75px); /* pq-px: the row is 72px at every text size; this line grows a quarter, and the row is full */
    line-height: 1.15;
    color: var(--pq-text-muted);
}

.brand.pq-brand-edge + .brand-secured[b-arqxbg9bk5] {
    padding-left: 11px;
}

.navbar-toggler[b-arqxbg9bk5] {
    appearance: none;
    cursor: pointer;
    /* a 44px-min touch target, centred in the 72px mobile top bar. Its lengths are px, the rems they were until
       2026-11-05 at the 15.5px root (3.2, 2.75, 0.875 and 1 of it), because the bar is 72px tall whatever the
       reader's text size and a button sized by the text outgrew it: on a phone set to 200% it was 85px tall, hung
       under the bar and stood over the appearance button beside it (measured). An icon has no text to follow, and a
       reader who set smaller text keeps the full target. */
    width: 49.6px;
    height: 42.625px;
    position: absolute;
    top: 13.5625px;
    /* absolutely positioned against .sidebar, so its safe-area padding does not move this — restate the
       inset here or the button hides under the notch in the installed app (the line above is the fallback) */
    top: calc(13.5625px + env(safe-area-inset-top));
    right: 15.5px;
    border: 1px solid var(--pq-border);
    border-radius: 10px;
    /* The three bars are three gradients in the current colour, so the icon follows the palette like every other token;
       the SVG data-URI they replace had its stroke baked in, and a data-URI cannot read a token. Sized as the SVG drew
       them: 22 of a 30-unit box at 1.6rem wide, 2 units thick, 8 apart (in px for the button's reason: 1.17rem and
       0.43rem of the 15.5px root). */
    color: var(--pq-text-soft);
    background-color: var(--pq-surface);
    background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
    background-size: 18.135px 2px;
    background-position: center calc(50% - 6.665px), center 50%, center calc(50% + 6.665px);
    background-repeat: no-repeat;
}

.navbar-toggler:checked[b-arqxbg9bk5] {
    background-color: var(--pq-green-soft);
}

.nav-section[b-arqxbg9bk5] {
    font-size: calc(11rem / 15.5);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pq-text-muted);
    padding: 18px 20px 6px;
}

.nav-item[b-arqxbg9bk5] {
    font-size: 0.95rem;
    padding: 1px 10px;
}

    .nav-item[b-arqxbg9bk5]  .nav-link {
        color: var(--pq-text);
        background: none;
        border: none;
        border-radius: 10px;
        padding: 9px 10px;
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        font-weight: 500;
        position: relative;
        transition: background-color 0.14s ease, color 0.14s ease;
    }

    /* icons ride quiet until their row is hovered or active */
    .nav-item[b-arqxbg9bk5]  .nav-link svg {
        flex: none;
        color: var(--pq-text-muted);
        transition: color 0.14s ease;
    }

.nav-item[b-arqxbg9bk5]  a.active {
    background-color: var(--pq-green-soft);
    color: var(--pq-ink);
    font-weight: 600;
}

    /* a soft green reed marks the active row */
    .nav-item[b-arqxbg9bk5]  a.active::before {
        content: "";
        position: absolute;
        left: -6px;
        top: 22%;
        bottom: 22%;
        width: 3px;
        border-radius: 999px;
        background: var(--pq-green-deep);
    }

    .nav-item[b-arqxbg9bk5]  a.active svg {
        color: var(--pq-green-deep);
    }

.nav-item[b-arqxbg9bk5]  .nav-link:hover {
    background-color: var(--pq-surface-3);
    color: var(--pq-ink);
}

/* Windows High Contrast (forced colors) throws the active row's tint and its green reed away with every other
   background, so the current page was marked by nothing there: an underline survives (2026-11-04 audit; the
   app-wide rules are in app.css). */
@media (forced-colors: active) {
    .nav-item[b-arqxbg9bk5]  a.active { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
}

    .nav-item[b-arqxbg9bk5]  .nav-link:hover svg {
        color: var(--pq-green-deep);
    }

/* unread-count pill, right-aligned in its row */
.nav-badge[b-arqxbg9bk5] {
    margin-left: auto;
    background: var(--pq-green-deep);
    color: var(--pq-on-accent);
    border-radius: 999px;
    font-size: calc(11rem / 15.5);
    font-weight: 700;
    line-height: 1;
    padding: 4px 7px;
    min-width: 20px;
    text-align: center;
}

/* The door row (video-call round 10): a patient is waiting — the one nav row that should catch the eye. */
.nav-door .nav-link[b-arqxbg9bk5] {
    background: var(--pq-status-good-bg);
    border-radius: 10px;
    font-weight: 700;
    color: var(--pq-status-good-ink);
}
.nav-door .nav-link[b-arqxbg9bk5]::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--pq-green);
    margin-right: 2px;
    animation: nav-door-pulse-b-arqxbg9bk5 1.6s ease-in-out infinite;
}
@keyframes nav-door-pulse-b-arqxbg9bk5 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
    .nav-door .nav-link[b-arqxbg9bk5]::before { animation: none; }
}

/* Solo-plan rows: team features that come with the Practice plan — visible and honest, but not links. */
.nav-link-disabled[b-arqxbg9bk5] {
    color: var(--pq-text-muted);
    cursor: default;
}

.nav-chip[b-arqxbg9bk5] {
    margin-left: auto;
    font-size: calc(10rem / 15.5);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--pq-text-muted);
    background: var(--pq-surface-3);
    border-radius: 999px;
    padding: 3px 8px;
    white-space: nowrap;
}

.nav-footer[b-arqxbg9bk5] {
    margin-top: 22px;
    padding: 16px 20px;
    border-top: 1px solid var(--pq-border-soft);
}

.user-chip[b-arqxbg9bk5] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.user-chip-text[b-arqxbg9bk5] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.user-name[b-arqxbg9bk5] {
    font-weight: 600;
    color: var(--pq-ink);
    font-size: calc(14rem / 15.5);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* the sign-in address under the name — which account this is, at a glance */
.user-email[b-arqxbg9bk5] {
    font-size: calc(12rem / 15.5);
    color: var(--pq-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-role[b-arqxbg9bk5] {
    font-size: calc(12.5rem / 15.5);
    color: var(--pq-text-muted);
}

.signout[b-arqxbg9bk5] {
    background: none;
    border: 1px solid var(--pq-border);
    border-radius: 999px;
    padding: 6px 16px;
    font-size: calc(13.5rem / 15.5);
    font-weight: 600;
    color: var(--pq-text);
    cursor: pointer;
    transition: border-color 0.14s ease, color 0.14s ease;
}

.signout:hover[b-arqxbg9bk5] {
    border-color: var(--pq-green);
    color: var(--pq-ink);
}

/* The clinician↔practice view switch (docs/13 F3) — a small segmented control near the top of the nav, shown only
   for a both-hats founder. */
.view-switch[b-arqxbg9bk5] {
    display: flex;
    gap: 2px;
    margin: 6px 12px 12px;
    padding: 3px;
    background: var(--pq-surface-3);
    border-radius: 9px;
}

.view-switch-btn[b-arqxbg9bk5] {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--pq-text);
    font: inherit;
    font-size: calc(13rem / 15.5);
    font-weight: 600;
    padding: 6px 8px;
    border-radius: 7px;
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease;
}

.view-switch-btn:hover:not(.active)[b-arqxbg9bk5] {
    background: var(--pq-surface-4);
    color: var(--pq-ink);
}

.view-switch-btn.active[b-arqxbg9bk5] {
    background: var(--pq-green-deep);
    color: var(--pq-on-accent);
    box-shadow: var(--pq-shadow-soft);
}

.nav-scrollable[b-arqxbg9bk5] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-arqxbg9bk5] {
    display: block;
}

@media (max-width: 640.98px) {
    /* The brand row is the phone's top bar, and the menu button stands over its far end (absolutely placed: 15.5px in,
       49.6px wide). The appearance button (AppearanceToggle, a child component, hence ::deep) stops 8px short of it:
       the menu button's 65.1px, less the row's own 20px of padding. In px as the menu button is, so the two keep
       their distance at any text size. */
    .brand-row[b-arqxbg9bk5]  .pq-theme-toggle {
        margin-right: 53.1px;
    }

    /* A clinic's column ends where that button begins (the bar, less the button's 44px, its margin above and the
       column's own 10px), which is the width it has anyway. Said outright because with no JavaScript the button is
       not drawn (the head's noscript rule) and its margin with it: a long name would run under the menu button. The
       65.1px is the menu button's (15.5px in, 49.6px wide), in px as it is. */
    .brand-stack[b-arqxbg9bk5] {
        max-width: calc(100% - 65.1px - 42px);
    }

    /* A 13.5px label in 6px of padding is a ~28px target, and this one signs you out — the last control in the
       sheet, reached with the thumb at the far end of a stretch (docs/22 nav-signout-and-crumb-targets-small).
       min-height rather than more padding so the pill keeps its shape. */
    .signout[b-arqxbg9bk5] {
        min-height: 44px;
        padding-left: 20px;
        padding-right: 20px;
    }

    /* The opened menu drops over the page as a sheet under the sticky top bar
       (never pushes the content down), and scrolls on its own when the role's
       menu is taller than the phone. */
    .navbar-toggler:checked ~ .nav-scrollable[b-arqxbg9bk5] {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--pq-surface);
        border-bottom: 1px solid var(--pq-border);
        box-shadow: var(--pq-shadow);
        max-height: calc(100vh - 72px - env(safe-area-inset-top));
        max-height: calc(100dvh - 72px - env(safe-area-inset-top));
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-bottom: 8px;
    }

    /* comfortable 44px touch rows */
    .nav-item[b-arqxbg9bk5]  .nav-link {
        padding: 11px 12px;
    }

    .nav-footer[b-arqxbg9bk5] {
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
    }
}

@media (min-width: 641px) {
    .navbar-toggler[b-arqxbg9bk5] {
        display: none;
    }

    .nav-scrollable[b-arqxbg9bk5] {
        /* Never collapse the sidebar for wide screens; allow scroll for tall menus. */
        display: flex;
        flex-direction: column;
        height: calc(100vh - 72px);
        height: calc(100dvh - 72px);
        overflow-y: auto;
        padding-top: 10px;
    }

    .nav-scrollable > nav[b-arqxbg9bk5] {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
    }

    .nav-footer[b-arqxbg9bk5] {
        margin-top: auto;
    }
}

/* ---- Collapsible nav GROUPS (founder 2026-08-07: "the menu is long… wrap up Account and Your therapy…
   unwrap if there is any notification"). A native <details>, so it opens on a click or the keyboard with NO
   JS at all; the summary is a plain .nav-section header plus a chevron. Two things open a group on their own:
   the server opens the one holding the CURRENT page (so you always see where you are), and attention.js opens
   one whose badge fills (so nothing waiting stays hidden). A group the reader closes again stays closed —
   the script auto-opens each group at most once per page, and never fights the poll. ---- */
.nav-group > summary[b-arqxbg9bk5] {
    /* A degree larger and a tier darker than a plain .nav-section label, because unlike a label this is the
       CONTROL that opens ten pages — Tasks, Forms, Shared notes, Sign-in & security. At 11px on the old muted
       grey it read as a caption, and a patient could conclude Tasks simply is not in the menu. */
    font-size: calc(12rem / 15.5);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pq-text);
    padding: 18px 20px 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    list-style: none;            /* Firefox's default triangle */
    user-select: none;
}

/* Safari/Chrome's default disclosure triangle — the chevron below replaces it */
.nav-group > summary[b-arqxbg9bk5]::-webkit-details-marker { display: none; }

.nav-group > summary:hover[b-arqxbg9bk5] { color: var(--pq-text-soft); }

.nav-group > summary:focus-visible[b-arqxbg9bk5] {
    outline: 2px solid var(--pq-green-deep);
    outline-offset: -2px;
    border-radius: 8px;
}

.nav-group-chevron[b-arqxbg9bk5] {
    flex: none;
    color: var(--pq-text-muted);
    transition: transform 0.15s ease;
}

.nav-group[open] > summary .nav-group-chevron[b-arqxbg9bk5] { transform: rotate(90deg); }

/* What's waiting INSIDE a closed group, summed by attention.js — so collapsing a section can never hide the
   fact that something needs doing. Rendered empty + hidden; CSS drops it the moment the group opens, because
   then the per-row badges say it better. */
.nav-group-badge[b-arqxbg9bk5] {
    margin-left: auto;
    background: var(--pq-green-deep);
    color: var(--pq-on-accent);
    border-radius: 999px;
    font-size: calc(10rem / 15.5);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    padding: 3px 6px;
    min-width: 18px;
    text-align: center;
}

.nav-group[open] > summary .nav-group-badge[b-arqxbg9bk5] { display: none; }

/* Help / Privacy in the footer, and the standing crisis line beneath Sign out (docs/22
   shell-has-no-help-privacy-or-crisis-line, no-crisis-pointer-anywhere). Both are quiet by design — a patient
   should be able to stop noticing them — but both clear AA and carry real tap height on a phone. */
.nav-footer-links[b-arqxbg9bk5] {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: calc(12.5rem / 15.5);
    color: var(--pq-text-muted);
    margin-bottom: 6px;
}

.nav-footer-links a[b-arqxbg9bk5] {
    color: var(--pq-text);
    text-decoration: none;
    padding: 6px 0;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
}

.nav-footer-links a:hover[b-arqxbg9bk5] { color: var(--pq-ink); text-decoration: underline; }

/* /Components/Layout/PracticeSwitcher.razor.rz.scp.css */
.practice-switcher[b-lw6khr85cx] {
    padding: 4px 0 2px;
}

/* Mirrors NavMenu's .nav-section (CSS isolation doesn't cross the component boundary).
   Custom properties DO inherit across the boundary, so colors come from the pq tokens. */
.practice-switcher .nav-section[b-lw6khr85cx] {
    font-size: calc(11rem / 15.5);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pq-text-muted);
    padding: 18px 20px 6px;
}

.practice-switcher-form[b-lw6khr85cx] {
    padding: 0 16px 6px;
}

.practice-select[b-lw6khr85cx] {
    width: 100%;
    padding: 8px 10px;
    font-family: var(--pq-sans);
    font-size: calc(14rem / 15.5);
    color: var(--pq-ink);
    background-color: var(--pq-surface);
    border: 1px solid var(--pq-border);
    border-radius: var(--pq-radius-sm);
    cursor: pointer;
}

.practice-select:hover[b-lw6khr85cx] {
    border-color: var(--pq-green);
}

/* Matches .pq-select's focus treatment (app.css): green border + soft ring, 2px-offset keyboard outline. */
.practice-select:focus[b-lw6khr85cx] {
    outline: none;
    border-color: var(--pq-green);
    box-shadow: 0 0 0 3px var(--pq-green-soft);
}

.practice-select:focus-visible[b-lw6khr85cx] {
    outline: 2px solid var(--pq-green-deep);
    outline-offset: 2px;
}

/* The no-JS fallback submit — a small brand pill. */
.practice-switch-go[b-lw6khr85cx] {
    margin-top: 6px;
    padding: 6px 14px;
    font-size: calc(13rem / 15.5);
    font-weight: 600;
    color: var(--pq-green-deep);
    background-color: var(--pq-green-soft);
    border: 1px solid transparent;
    border-radius: 999px;
    cursor: pointer;
}

.practice-switch-go:hover[b-lw6khr85cx] {
    background-color: var(--pq-green);
    color: var(--pq-on-accent);
}

/* iOS zooms into any focused control set below 16px — meet it on phones. The floor is a length on purpose: the size
   grows with the reader's text setting (app.css, TEXT SIZE) and must not fall under what Safari tests. */
@media (max-width: 640.98px) {
    .practice-select[b-lw6khr85cx] {
        font-size: max(16px, 16rem / 15.5); /* pq-px: the iOS focus-zoom floor */
    }

    .practice-switch-go[b-lw6khr85cx] {
        padding: 9px 16px;
        font-size: calc(14rem / 15.5);
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
/* Visibility per reconnect state — blazor.web.js toggles the components-reconnect-* classes on the
   dialog; these selectors are a framework contract and must keep their exact names. */
.components-reconnect-first-attempt-visible[b-4mpprepy8z],
.components-reconnect-repeated-attempt-visible[b-4mpprepy8z],
.components-reconnect-failed-visible[b-4mpprepy8z],
.components-pause-visible[b-4mpprepy8z],
.components-resume-failed-visible[b-4mpprepy8z],
.components-rejoining-animation[b-4mpprepy8z] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-4mpprepy8z],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-4mpprepy8z],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-4mpprepy8z],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-4mpprepy8z],
#components-reconnect-modal.components-reconnect-retrying[b-4mpprepy8z],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-4mpprepy8z],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-4mpprepy8z],
#components-reconnect-modal.components-reconnect-failed[b-4mpprepy8z],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-4mpprepy8z] {
    display: block;
}

/* The dialog itself: a pq-card, not a template box — brand surface, 18px radius, soft shadow.
   Colors come from the pq tokens (custom properties inherit into isolated CSS). */
#components-reconnect-modal[b-4mpprepy8z] {
    background-color: var(--pq-surface);
    color: var(--pq-text);
    font-family: var(--pq-sans);
    width: 20rem;
    max-width: calc(100vw - 2rem);
    margin: 20vh auto;
    padding: 2rem;
    border: 1px solid var(--pq-border-soft);
    border-radius: var(--pq-radius);
    box-shadow: var(--pq-shadow);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
}

/* Static open state — the entry/exit animations below only layer on when motion is welcome. */
#components-reconnect-modal[open][b-4mpprepy8z] {
    opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
    #components-reconnect-modal[b-4mpprepy8z] {
        animation: components-reconnect-modal-fadeOutOpacity-b-4mpprepy8z 0.5s both;
    }

    #components-reconnect-modal[open][b-4mpprepy8z] {
        animation: components-reconnect-modal-slideUp-b-4mpprepy8z 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-4mpprepy8z 0.5s ease-in-out 0.3s;
        animation-fill-mode: both;
    }
}

/* Backdrop tinted from the brand ink, not plain black. */
#components-reconnect-modal[b-4mpprepy8z]::backdrop {
    background-color: var(--pq-backdrop);
    opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
    #components-reconnect-modal[b-4mpprepy8z]::backdrop {
        animation: components-reconnect-modal-fadeInOpacity-b-4mpprepy8z 0.5s ease-in-out;
    }
}

@keyframes components-reconnect-modal-slideUp-b-4mpprepy8z {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-4mpprepy8z {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-4mpprepy8z {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-4mpprepy8z] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-4mpprepy8z] {
    margin: 0;
    text-align: center;
}

/* Brand pill buttons (mirrors .pq-btn-primary — the global class can't be added here because the
   state-visibility rules above own these buttons' display). */
#components-reconnect-modal button[b-4mpprepy8z] {
    border: 1px solid transparent;
    background-color: var(--pq-green);
    color: var(--pq-on-accent);
    font-family: var(--pq-sans);
    font-size: calc(15rem / 15.5);
    font-weight: 600;
    line-height: 1.2;
    padding: 10px 24px;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: var(--pq-shadow-btn);
}

    #components-reconnect-modal button:hover[b-4mpprepy8z] {
        background-color: var(--pq-green-deep);
    }

    #components-reconnect-modal button:active[b-4mpprepy8z] {
        background-color: var(--pq-green-deep);
    }

    #components-reconnect-modal button:focus-visible[b-4mpprepy8z] {
        outline: 2px solid var(--pq-green-deep);
        outline-offset: 2px;
    }

.components-rejoining-animation[b-4mpprepy8z] {
    position: relative;
    width: 80px;
    height: 80px;
}

    /* Static fallback: with motion reduced, the rings rest as a calm sage echo of the open-circle mark. */
    .components-rejoining-animation div[b-4mpprepy8z] {
        position: absolute;
        border: 3px solid var(--pq-green);
        border-radius: 50%;
        top: 20px;
        left: 20px;
        width: 40px;
        height: 40px;
        opacity: 0.75;
    }

        .components-rejoining-animation div:nth-child(2)[b-4mpprepy8z] {
            top: 30px;
            left: 30px;
            width: 20px;
            height: 20px;
        }

@media (prefers-reduced-motion: no-preference) {
    .components-rejoining-animation div[b-4mpprepy8z] {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
        animation: components-rejoining-animation-b-4mpprepy8z 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-4mpprepy8z] {
            animation-delay: -0.5s;
        }
}

@keyframes components-rejoining-animation-b-4mpprepy8z {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Layout/ReportProblem.razor.rz.scp.css */
/* The floating report-a-problem affordance: pinned to the bottom-right of every signed-in page, clear of the
   curved edges / home indicator on phones. column-reverse so the native <details> opens its panel ABOVE the
   button — the button is the anchor, the panel grows away from the thumb. */
.rp-root[b-psjt4zv9ty] {
    position: fixed;
    right: max(18px, env(safe-area-inset-right));
    bottom: max(18px, env(safe-area-inset-bottom));
    z-index: 1040;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
    gap: 10px;
}

/* The button is the <summary>, so open/close is native and keyboardable; the default disclosure marker goes. */
.rp-fab[b-psjt4zv9ty] {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--pq-ink);
    color: var(--pq-on-accent);
    cursor: pointer;
    box-shadow: var(--pq-shadow-float);
    transition: background var(--pq-dur) var(--pq-ease);
}

.rp-fab[b-psjt4zv9ty]::-webkit-details-marker { display: none; }
.rp-fab[b-psjt4zv9ty]::marker { content: ""; }

.rp-fab:hover[b-psjt4zv9ty] { background: var(--pq-green-deep); }

.rp-fab:focus-visible[b-psjt4zv9ty] {
    outline: 2px solid var(--pq-green-deep);
    outline-offset: 2px;
}

.rp-root[open] > .rp-fab[b-psjt4zv9ty] { background: var(--pq-green-deep); }

.rp-panel[b-psjt4zv9ty] {
    width: min(360px, calc(100vw - 36px));
    background: var(--pq-surface);
    border: 1px solid var(--pq-border);
    border-radius: var(--pq-radius-sm);
    box-shadow: var(--pq-shadow);
    padding: 16px;
}

.rp-path[b-psjt4zv9ty] {
    font-family: var(--pq-mono, ui-monospace, monospace);
    font-size: calc(11.5rem / 15.5);
    overflow-wrap: anywhere;
}

/* The PRG notice floats where the button lives, above it, so "sent" lands beside the thing that sent it —
   fixed independently of .rp-root because a refusal must show even when the button itself is gone. */
.rp-toast[b-psjt4zv9ty] {
    position: fixed;
    right: max(18px, env(safe-area-inset-right));
    bottom: max(76px, calc(env(safe-area-inset-bottom) + 58px));
    z-index: 1041;
    width: min(360px, calc(100vw - 36px));
    margin: 0;
    box-shadow: var(--pq-shadow);
}
/* /Components/Layout/SiteSwitcher.razor.rz.scp.css */
/* The site lens, styled as the practice switcher's twin (CSS isolation doesn't cross the component boundary,
   so the rules are restated rather than shared — the two controls must read as one family in the nav). */

.site-switcher[b-vkodsqz3um] {
    padding: 0 0 2px;
}

/* Mirrors NavMenu's .nav-section. Custom properties DO inherit across the boundary, so colors come from the
   pq tokens; the top padding is tighter than the practice switcher's because this sits directly under it. */
.site-switcher .nav-section[b-vkodsqz3um] {
    font-size: calc(11rem / 15.5);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pq-text-muted);
    padding: 10px 20px 6px;
}

.site-switcher-form[b-vkodsqz3um] {
    padding: 0 16px 6px;
}

.site-select[b-vkodsqz3um] {
    width: 100%;
    padding: 8px 10px;
    font-family: var(--pq-sans);
    font-size: calc(14rem / 15.5);
    color: var(--pq-ink);
    background-color: var(--pq-surface);
    border: 1px solid var(--pq-border);
    border-radius: var(--pq-radius-sm);
    cursor: pointer;
}

.site-select:hover[b-vkodsqz3um] {
    border-color: var(--pq-green);
}

/* Matches .pq-select's focus treatment (app.css): green border + soft ring, 2px-offset keyboard outline. */
.site-select:focus[b-vkodsqz3um] {
    outline: none;
    border-color: var(--pq-green);
    box-shadow: 0 0 0 3px var(--pq-green-soft);
}

.site-select:focus-visible[b-vkodsqz3um] {
    outline: 2px solid var(--pq-green-deep);
    outline-offset: 2px;
}

/* The no-JS fallback submit — a small brand pill. */
.site-switch-go[b-vkodsqz3um] {
    margin-top: 6px;
    padding: 6px 14px;
    font-size: calc(13rem / 15.5);
    font-weight: 600;
    color: var(--pq-green-deep);
    background-color: var(--pq-green-soft);
    border: 1px solid transparent;
    border-radius: 999px;
    cursor: pointer;
}

.site-switch-go:hover[b-vkodsqz3um] {
    background-color: var(--pq-green);
    color: var(--pq-on-accent);
}

/* iOS zooms into any focused control set below 16px — meet it on phones. The floor is a length on purpose: the size
   grows with the reader's text setting (app.css, TEXT SIZE) and must not fall under what Safari tests. */
@media (max-width: 640.98px) {
    .site-select[b-vkodsqz3um] {
        font-size: max(16px, 16rem / 15.5); /* pq-px: the iOS focus-zoom floor */
    }

    .site-switch-go[b-vkodsqz3um] {
        padding: 9px 16px;
        font-size: calc(14rem / 15.5);
    }
}

/* The chosen site's ID, under the select — deliberately quiet: an orientation cue you can find when you go
   looking, never a number competing with the site's own name. */
.site-id[b-vkodsqz3um] {
    padding: 2px 16px 4px;
    font-size: calc(11rem / 15.5);
    letter-spacing: 0.04em;
    color: var(--pq-text-muted);
}

.site-id strong[b-vkodsqz3um] {
    font-family: var(--pq-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-weight: 700;
    color: var(--pq-ink);
}
/* /Components/Practice/PracticeIdentity.razor.rz.scp.css */
.pq-practice-identity[b-cfwgh05xri] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding: 6px 12px 6px 6px;
    background: var(--pq-surface);
    border: 1px solid var(--pq-border);
    border-radius: 999px;
}

.pq-practice-logo[b-cfwgh05xri] {
    height: 28px;
    width: 28px;
    object-fit: contain;
    border-radius: 6px;
}

.pq-practice-name[b-cfwgh05xri] {
    font-weight: 600;
    font-size: calc(14.5rem / 15.5);
    color: var(--pq-ink);
}