@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600&display=swap");

/* ============================================================================
   Paxis interface refinements
   ----------------------------------------------------------------------------
   Loaded AFTER styles.css, on every page.

   Sections 1-6 are the original pass: fixes for things that were broken, with
   no change to anything that wasn't.

   Section 7 is the house theme, added 2026-09-24. The app pages and the
   landing page had grown apart: cold greys and a bright pink against warm
   paper and a deeper rose. It works by remapping the design tokens in
   styles.css rather than by restyling components, so no page markup changes
   and nothing moves. Every rule in it is colour, typeface or corner radius.

   Delete this file and the <link> tags and the site is exactly as it was.
   ========================================================================= */


/* 1 — Long clinical terms must not escape their box -------------------------
   styles.css had exactly ONE wrapping rule in 5,128 lines, in a product where
   "immunohistochemistry" and "pembrolizumab" are routine. */

p, li, td, th, dd, dt, label, figcaption, blockquote, summary,
h1, h2, h3, h4, h5, h6,
.card, .badge, .chip, .tag,
.message-content, .study-title, .trial-title, .result-item {
    overflow-wrap: break-word;
}

/* A flex or grid child defaults to min-width:auto and refuses to shrink below
   its content. This is the most common reason text pushes past a container
   that looks wide enough. Changes no sizes on its own. */
.nav > *, .card > *, .message > *, .result-item > *, .study-card > *,
[class*="grid"] > *, [class*="flex"] > *, [class*="-row"] > * {
    min-width: 0;
}


/* 2 — Side nav label truncation ---------------------------------------------
   "About My Medications" was cutting to "About My Medicat...". The label can't
   wrap, because the collapse animation relies on nowrap, so the width is
   reclaimed from the gutters. Panel width, icons and positions are unchanged. */

.side-nav-link,
.side-nav-btn {
    gap: 0.625rem;
    padding: 0.5625rem 0.625rem;
}


/* 3 — Focus ------------------------------------------------------------------
   Visible for keyboard users, invisible for mouse users. Pairs with the
   accessibility work already shipped. */

:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

:focus:not(:focus-visible) {
    outline: none;
}


/* 4 — Phones -----------------------------------------------------------------
   TWO REAL BUGS. Both restorations, not redesigns.

   BUG 1. styles.css sets `.nav-links { display: none }` at 768px with no
   replacement. Only one of 35 pages has a mobile menu.

   BUG 2. styles.css slides `.side-nav-panel` off screen with
   `transform: translateX(-100%)` and reveals it with a `.mobile-open` class
   that NOTHING EVER ADDS. No JavaScript anywhere sets it.

   Together, on the 23 pages that load sideNav.js, a phone user has no
   navigation at all: they can reach a page and then cannot leave it.

   Fixed with CSS only. The top nav becomes a scrollable row; the side nav
   stays on screen as the icon rail it already knows how to render. */

@media (max-width: 768px) {

    .nav { flex-wrap: wrap; row-gap: 0.5rem; }

    .nav-links {
        display: flex !important;
        order: 3;
        width: 100%;
        margin: 0;
        padding: 0.125rem 0 0.25rem;
        gap: 0.375rem;
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .nav-links::-webkit-scrollbar { display: none; }
    .nav-links > li { flex: 0 0 auto; }
    .nav-links a { white-space: nowrap; }

    /* Bring the side nav back on screen, collapsed to icons. */
    .side-nav-panel { transform: none; width: 56px; }
    .side-nav-text, .side-nav-section-title { display: none; }
    .side-nav-link, .side-nav-btn, .side-nav-header {
        justify-content: center;
        padding: 0.75rem 0.5rem;
    }
    .side-nav-title { display: none; }

    /* styles.css zeroes this at 768px because it assumed the panel had gone. */
    body:has(.side-nav-panel) .section { padding-left: 56px; }

    /* Nothing should push the page sideways. `clip` not `hidden`, so the
       sticky header keeps working. */
    body { overflow-x: clip; }

    [class*="grid"] { grid-template-columns: 1fr; }

    /* Headings only ever get SMALLER than the styles.css values on a narrow
       screen. 2.5 / 2 / 1.5rem are the existing desktop sizes and are the
       caps here, so desktop is untouched. */
    h1 { font-size: clamp(1.75rem, 1.1rem + 2.6vw, 2.5rem); }
    h2 { font-size: clamp(1.5rem,  1.2rem + 1.2vw, 2rem); }
    h3 { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); }

    /* 44px is the accessibility floor for a touch target. */
    .btn, .nav-links a, .side-nav-link, .side-nav-btn { min-height: 44px; }
}


/* 5 — Type -------------------------------------------------------------------
   The app pages ran on Nunito, which is safe and a little characterless next to
   Fraunces on the marketing pages. Plus Jakarta Sans is warmer, has more going
   on at small sizes, and is the pairing the Fraunces designers point to. Nunito
   stays as the fallback so nothing breaks if the new face fails to load. */

:root {
    --font-sans: "Plus Jakarta Sans", "Nunito", system-ui, -apple-system,
                 "Segoe UI", Roboto, sans-serif;
}

body {
    letter-spacing: -0.006em;
}

.btn, button, input, select, textarea {
    font-family: var(--font-sans);
    letter-spacing: -0.012em;
}


/* 6 — The side navigation ----------------------------------------------------
   Three things made it read as a control panel rather than part of the product:
   a white-to-grey gradient, a border AND a shadow doing one job, and section
   labels at 0.65rem in shouty caps. */

.side-nav-panel {
    background: #fff;
    border-right: 1px solid var(--gray-200);
    box-shadow: none;
}

.side-nav-header {
    border-bottom: 1px solid var(--gray-200);
    background: #fff;
}

/* The component already writes "Your care" and "My health" in sentence case and
   the CSS was shouting them. Let the words be the words. */
.side-nav-section-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--gray-400);
    padding: 1rem 0.75rem 0.375rem;
}

.side-nav-link,
.side-nav-btn {
    font-size: 0.875rem;
    border-radius: 0.5rem;
}

/* Was a flat 10% pink block. A softer fill with the label carrying the weight
   reads as "you are here" instead of "this is selected". */
.side-nav-link.active {
    background: rgba(225, 29, 72, .07);
    font-weight: 600;
}

.side-nav-link:hover,
.side-nav-btn:hover:not(:disabled) {
    background: var(--gray-50);
}

.side-nav-toggle {
    border-radius: var(--radius-sm);
    width: 28px;
    height: 28px;
    padding: 0;
}

.side-nav-panel::-webkit-scrollbar { width: 10px; }
.side-nav-panel::-webkit-scrollbar-thumb {
    background: var(--gray-300);
    border: 3px solid #fff;
    border-radius: 999px;
}


/* ============================================================================
   7 — The house theme
   ============================================================================
   One set of colours and one pair of typefaces across the landing page, the
   patient side, the clinician side and the demos.

   The greys are remapped rather than replaced: each step keeps its position
   on the light-to-dark scale, so every existing text-on-background pair keeps
   the contrast ratio it had and only the temperature changes. --gray-900
   through --gray-500 are text, and all five still clear WCAG AA on paper. */

:root {
    /* The four colours the landing page is built from. */
    --paper:      #fbf8f4;
    --paper-deep: #f4efe8;
    --line:       #e6ded4;
    --rose:       #b8123c;
    --rose-soft:  #fdf2f4;

    /* styles.css pink was #e11d48, a shade brighter than the logo and the
       marketing pages. Everything using --primary follows this down. */
    --primary:       #b8123c;
    --primary-dark:  #9d0f33;
    --primary-light: #e8869d;
    --secondary:      #9d0f33;
    --secondary-dark: #820c2a;
    --accent:         #b8123c;
    --accent-dark:    #9d0f33;

    /* Warmed neutrals, same luminance order as before. */
    --gray-50:  #f7f3ee;
    --gray-100: #efe8e0;
    --gray-200: #e6ded4;
    --gray-300: #d8cec2;
    --gray-400: #8d8d96;
    --gray-500: #6c6c75;
    --gray-600: #55555c;
    --gray-700: #4a4a50;
    --gray-800: #2a2a2e;
    --gray-900: #1a1a1c;

    /* Fraunces carries the headings, Plus Jakarta Sans everything else. */
    --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;

    /* Corners were 0.375-1rem; the landing page runs a little rounder. */
    --radius-sm: 0.45rem;
    --radius-md: 0.7rem;
    --radius-lg: 0.9rem;
    --radius-xl: 1.1rem;

    /* Long, soft and warm rather than short, hard and grey. */
    --shadow-sm: 0 1px 2px rgba(26, 26, 28, .04);
    --shadow-md: 0 8px 20px -14px rgba(26, 26, 28, .35);
    --shadow-lg: 0 14px 30px -20px rgba(26, 26, 28, .35);
    --shadow-xl: 0 22px 44px -28px rgba(26, 26, 28, .4);
}

/* styles.css hardcodes white here rather than using a token. */
body { background: var(--paper); }

/* Headings. Weight drops from 700 to 400 because Fraunces at 400 has the
   presence that Nunito needed 700 for, and 700 Fraunces reads as shouting.
   h4-h6 stay in the sans: they are labels, not display type. */
h1, h2, h3,
.hero-title, .page-title, .section-title, .card-title {
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: -0.018em;
    line-height: 1.16;
}

h3, .card-title { letter-spacing: -0.012em; }

/* The italic-rose emphasis from the landing page and the waitlist. */
h1 em, h2 em, .hero-title em {
    font-style: italic;
    color: var(--rose);
}

/* Surfaces. White cards on warm paper is the whole look; the grey-on-grey
   card headers flatten it, so those go to paper-deep. */
.header {
    background: rgba(251, 248, 244, .88);
    backdrop-filter: saturate(1.2) blur(10px);
    -webkit-backdrop-filter: saturate(1.2) blur(10px);
    border-bottom: 1px solid var(--line);
}

.card {
    border-radius: var(--radius-xl);
    border: 1px solid var(--line);
    box-shadow: none;
}

.card:hover { box-shadow: var(--shadow-md); }
.card-header { background: var(--paper-deep); border-bottom-color: var(--line); }

/* The footer was near-black and cold. Ink is the landing page's dark. */
.footer { background: #1a1a1c; color: #c9c2b9; }
.footer a { color: #e6ded4; }

/* Pills, inputs and buttons pick up the softer radius from the tokens; these
   are the few places styles.css hardcoded a value instead. */
.btn { border-radius: 999px; }
.btn-primary { box-shadow: 0 8px 20px -14px rgba(184, 18, 60, .8); }

input, select, textarea { border-radius: var(--radius-md); }
input:focus, select:focus, textarea:focus {
    border-color: var(--rose);
    box-shadow: 0 0 0 3px rgba(184, 18, 60, .12);
    outline: none;
}

/* The side nav sits on paper with the rest of the page now, not on white. */
.side-nav-panel, .side-nav-header { background: var(--paper); }
.side-nav-panel { border-right: 1px solid var(--line); }
.side-nav-link.active { background: rgba(184, 18, 60, .07); }
.side-nav-link:hover, .side-nav-btn:hover:not(:disabled) { background: var(--paper-deep); }
.side-nav-panel::-webkit-scrollbar-thumb { border-color: var(--paper); }


/* ============================================================================
   8 — Clinician shell: layout and spacing
   ============================================================================ */

/* The top nav. Seven items plus a 48px logo did not fit the row, so the list
   wrapped onto two lines and the second line ran back underneath the logo.
   The logo is pinned at its own size, the links stop breaking mid-label, and
   the row is allowed to wrap cleanly from the right instead. */

.nav { gap: 1.5rem; align-items: center; }
.nav .logo { flex: 0 0 auto; }

/* index.html sets height:48px inline on the image. It is the tallest thing in
   a 74px bar and the main reason the row ran out of width. */
.nav .logo img { height: 34px !important; width: auto !important; }

.nav-links {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.35rem 0.45rem;
    row-gap: 0.4rem;
}

.nav-links a {
    white-space: nowrap;
    padding: 0.5rem 0.7rem;
}

/* js/interfaceSwitch.js now drops the audience toggle straight after the
   logo, the same place it sits on landing.html. The link list keeps to the
   right of it. */
.nav-links { margin-left: auto; }

/* Header proportions, matched to the landing page's bar: 0.85rem of padding
   around a 34px logo rather than 1.5rem around a 48px one. */
.header { padding: 0.85rem 0; }

/* Two solid rose buttons side by side in the same corner read as a conflict.
   The account button keeps the fill and everything beside it is an outline,
   which is also the correct hierarchy between them. */
.btn-outline {
    background: transparent;
    color: var(--rose);
    border: 1px solid var(--rose);
}

.btn-outline:hover { background: var(--rose-soft); }

/* The home logo was set at min(480px, 86vw). At 480px it filled a third of
   the screen and pushed the search box below the fold. */
.hero-logo img { width: min(300px, 62vw) !important; }
.hero-inner { gap: 1.75rem; }

/* The search pill: the rose focus ring in section 7 was landing on the
   borderless textarea INSIDE the pill, drawing a second outline within the
   first. The ring belongs on the pill itself. */
.hero-input:focus,
.hero-input:focus-visible {
    box-shadow: none;
    outline: none;
    border: none;
}

.hero-search { border: 1px solid var(--line); box-shadow: var(--shadow-md); }
.hero-search:focus-within {
    border-color: var(--rose);
    box-shadow: 0 0 0 3px rgba(184, 18, 60, .1), var(--shadow-md);
}

/* Breathing room under the fold, where the page currently stops dead. */
.hero { padding-bottom: 2.5rem; }
.hero-chat:empty { min-height: 0; }


/* ============================================================================
   9 — Header, side menu and sign-in: layout pass (2026-10-07)
   ============================================================================
   Checked at 390, 768, 1000, 1280 and 1440px wide.

   Before this, the header broke at ordinary laptop widths: at 1000px the
   links wrapped inside their own box, so "Create account / Login" dropped to
   a second line under the others, and the audience toggle's "For clinicians"
   ran out of its pill. On phones, section 8's `flex-wrap: wrap` (outside any
   media query, and later in the file) overrode section 4's scrolling row, so
   the links stacked into two or three ragged lines. */

/* One row on a laptop: logo, toggle, then everything else pushed right,
   with room between the items so each reads as its own thing. */
.header .nav {
    flex-wrap: nowrap;
    gap: 1.5rem;
}
.header .nav-links {
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}
.header .nav-links > li {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}
.header .nav-links a:not(.btn) {
    padding: 0.6rem 0.8rem;
    font-size: 0.95rem;
    border-radius: 999px;
}
.header .nav-links .btn-sm {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 1.3rem;
    font-size: 0.95rem;
    line-height: 1;
}
.header .nav-links .nav-auth { margin-left: 0.5rem; }
.header { padding: 1rem 0; }

/* The audience toggle needs about 270px. Below 1240px there is not room for it
   and a full set of links, and the logo now goes to the landing page, which
   carries the same toggle. */
@media (max-width: 1239px) {
    .header .nav > .seg { display: none; }
}

/* Tablets and phones: two rows. The logo on the first, and the links on a
   second row that scrolls sideways if it has to, with the account button
   first so it is never the one scrolled out of view. */
@media (max-width: 900px) {
    .header .nav { flex-wrap: wrap; row-gap: 0.5rem; }
    .header .nav-links {
        order: 3;
        width: 100%;
        margin: 0;
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 0.125rem 0 0.25rem;
    }
    .header .nav-links::-webkit-scrollbar { display: none; }
    .header .nav-links .nav-auth { order: -1; margin-left: 0; }
}

/* The side menu folded to icons. The logo mark was clipped at the left edge,
   the toggle was a 13px chevron, and the section titles left empty gaps when
   they were hidden. */
.side-nav-toggle {
    width: 32px;
    height: 32px;
    margin-left: auto;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #ffffff;
    color: var(--gray-600);
}
.side-nav-toggle:hover { color: var(--gray-900); border-color: var(--gray-300); }
.toggle-icon-svg { width: 16px; height: 16px; }

.side-nav-panel.collapsed .side-nav-header {
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem 0;
}
.side-nav-panel.collapsed .side-nav-toggle { margin-left: 0; }
.side-nav-panel.collapsed .side-nav-section-title { display: none; }
.side-nav-panel.collapsed .side-nav-section { padding: 0.25rem 0.5rem; margin: 0; }
.side-nav-panel.collapsed .side-nav-section + .side-nav-section {
    border-top: 1px solid var(--line);
    padding-top: 0.5rem;
    margin-top: 0.25rem;
}
.side-nav-panel.collapsed .side-nav-link,
.side-nav-panel.collapsed .side-nav-btn {
    justify-content: center;
    padding: 0.7rem 0;
}

/* Text everyone has to be able to read. Found by an axe-core WCAG check.
   - The global `p { color: var(--gray-600) }` in styles.css reached into the
     dark footer, so the "not a substitute for professional medical advice"
     line rendered at about 2.4:1. Footer text now takes the footer's colour.
   - Side menu section titles were --gray-400 on paper, 3.1:1; --gray-500 is
     4.9:1.
   - On phones the icon rail hid its labels with display:none, which hides
     them from screen readers too, so each link was announced as just "link".
     They are now hidden visually only; the rail looks the same. */
.footer p,
.footer-bottom { color: inherit; }

.side-nav-section-title { color: var(--gray-500); }

@media (max-width: 768px) {
    .side-nav-panel:not(.collapsed) .side-nav-text,
    .side-nav-text {
        display: block !important;
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0;
    }
}

/* Sign-in. The form sat in a card with rounded corners and no padding, so the
   corner clipped the "E" of "Email" and the white box ended flush with the
   fields. It is a proper card now. */
.auth-shell .auth-col { max-width: 440px; }
.auth-shell .card {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    overflow: visible;
}
.auth-shell .card-body { padding: 1.5rem 1.5rem 1.25rem; }
.auth-shell .form-label { font-size: 0.85rem; }
@media (max-width: 480px) {
    .auth-shell .card-body { padding: 1.25rem 1rem 1rem; }
}

/* The sign-in page's header carried the clinician tool links (Home, My
   Collections, Upload, Trial Finder), none of which work signed out, and a
   "Create account / Login" button pointing at the page you are on. Patients
   sign in here too. The logo goes back to the landing page. */
body:has(.auth-shell) .header .nav-links > li:not(.nav-auth) { display: none; }
body:has(.auth-shell) .header #authLink { display: none !important; }

/* Phones. The side menu is an icon rail here and cannot be widened, so its
   show/hide button only got in the way of the logo mark. */
@media (max-width: 768px) {
    .side-nav-toggle { display: none; }
    .side-nav-header { justify-content: center; padding: 0.75rem 0; }
}

/* Phones: the home page's ask box was one line tall beside its button, so the
   prompt was cut off mid-word; the chat header's three actions squeezed
   against its title; the clinician search box's 1.4rem text clipped too. */
@media (max-width: 600px) {
    .ph-wrap .ph-ask { flex-direction: column; align-items: stretch; }
    .ph-wrap .ph-ask textarea { min-height: 84px; }
    .ph-wrap .ph-ask .btn { width: 100%; min-height: 48px; }

    .chat-container .pq-chat-head {
        flex-wrap: wrap;
        gap: 0.4rem;
        padding: 0.75rem 1rem;
    }
    .chat-container .pq-chat-head > span:last-child {
        display: flex;
        flex-wrap: wrap;
        gap: 0.15rem 1rem;
    }
    .chat-container .pq-chat-head .pq-clear { margin-left: 0 !important; padding: 0.35rem 0; }

    .hero-search .hero-input { font-size: 1.05rem; }

    /* Rows of tabs (admin, the patient inbox) scroll sideways inside their
       own strip instead of pushing the whole page sideways. */
    .tabs, .pi-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .tabs::-webkit-scrollbar, .pi-tabs::-webkit-scrollbar { display: none; }
    .tabs .tab-button, .pi-tabs .pi-tab { flex: 0 0 auto; white-space: nowrap; }
}


/* ============================================================================
   10 — The side menu as an ordinary app sidebar (2026-10-12)
   ============================================================================
   Feedback on the live site: the menu felt "off", was not obvious to use, and
   ran over the page. Laid out the way people already know from other apps:

   - One logo. The menu carried a second Paxis mark under the header's.
   - The show/hide control is a labelled row ("Hide menu") with the usual
     sidebar icon, not a 13px chevron next to a logo.
   - Wide enough for every label (240px), so nothing ends in "...".
   - The selected page has a rose bar on its left as well as a tint.
   - Never scrolls sideways; scrolls up and down only if the window is short.
   - Phones: no permanent strip of unlabeled icons. A "Menu" button in the
     header opens the full menu over the page; tap outside, press Escape or
     pick a page to close it.

   Scoped to .snv2, which js/sideNav.js adds, so the static sidebar copies in
   the walkthrough pages keep their own look. */

.side-nav-menu-btn { display: none; }
.side-nav-backdrop { display: none; }

.side-nav-panel.snv2 {
    width: 240px;
    /* Only the list of pages scrolls; the show/hide control stays at the
       top and the account and "Easier to read" stay at the bottom. */
    overflow: hidden;
    background: var(--paper);
    border-right: 1px solid var(--line);
    box-shadow: none;
    scrollbar-width: thin;
}
.side-nav-panel.snv2.collapsed { width: 64px; }
body:has(.side-nav-panel.snv2) .section { padding-left: 240px; }
body:has(.side-nav-panel.snv2.collapsed) .section { padding-left: 64px; }
/* The menu runs to the bottom of the window, so the footer starts after it. */
body:has(.side-nav-panel.snv2) .footer { padding-left: 240px; }
body:has(.side-nav-panel.snv2.collapsed) .footer { padding-left: 64px; }

/* Top row: just the show/hide control, set apart from the pages below it. */
.side-nav-panel.snv2 .side-nav-header {
    display: block;
    min-height: 0;
    padding: 0.75rem;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid var(--line);
    background: transparent;
}
.side-nav-panel.snv2 .side-nav-toggle {
    width: 100%;
    height: auto;
    min-height: 40px;
    margin: 0;
    padding: 0.5rem 0.625rem;
    gap: 0.625rem;
    justify-content: flex-start;
    border: 1px solid transparent;
    border-radius: 0.6rem;
    background: transparent;
    color: var(--gray-600);
    font: 600 0.85rem/1.2 var(--font-sans);
}
.side-nav-panel.snv2 .side-nav-toggle:hover {
    background: var(--paper-deep);
    border-color: var(--line);
    color: var(--gray-900);
}
.side-nav-panel.snv2 .side-nav-toggle-icon { width: 20px; height: 20px; flex: 0 0 auto; }
.side-nav-panel.snv2.collapsed .side-nav-toggle { justify-content: center; padding: 0.5rem 0; }
.side-nav-panel.snv2.collapsed .side-nav-toggle-label { display: none; }

/* Sections and links. */
.side-nav-panel.snv2 .side-nav-header,
.side-nav-panel.snv2 .side-nav-footer { flex: none; }
.side-nav-panel.snv2 .side-nav-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    padding: 0 0 0.5rem;
}
.side-nav-panel.snv2 .side-nav-section { padding: 0 0.75rem; margin: 0 0 0.25rem; }
.side-nav-panel.snv2 .side-nav-section-title {
    padding: 0.85rem 0.625rem 0.35rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--gray-500);
}
.side-nav-panel.snv2 .side-nav-link,
.side-nav-panel.snv2 .side-nav-btn {
    position: relative;
    min-height: 40px;
    padding: 0.5rem 0.625rem;
    gap: 0.75rem;
    border-radius: 0.6rem;
    color: var(--gray-700);
    font-size: 0.9rem;
    font-weight: 500;
}
.side-nav-panel.snv2 .side-nav-link:hover,
.side-nav-panel.snv2 .side-nav-btn:hover:not(:disabled) {
    background: var(--paper-deep);
    color: var(--gray-900);
}
.side-nav-panel.snv2 .side-nav-link.active {
    background: var(--rose-soft);
    color: var(--rose);
    font-weight: 700;
}
.side-nav-panel.snv2 .side-nav-link.active::before {
    content: "";
    position: absolute;
    left: -0.75rem;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--rose);
}
.side-nav-panel.snv2 .side-nav-text { overflow: visible; text-overflow: clip; }

/* Folded to icons. */
.side-nav-panel.snv2.collapsed .side-nav-section { padding: 0 0.5rem; }
.side-nav-panel.snv2.collapsed .side-nav-section-title { display: none; }
.side-nav-panel.snv2.collapsed .side-nav-section + .side-nav-section {
    border-top: 1px solid var(--line);
    margin-top: 0.35rem;
    padding-top: 0.35rem;
}
.side-nav-panel.snv2.collapsed .side-nav-link,
.side-nav-panel.snv2.collapsed .side-nav-btn { justify-content: center; padding: 0.5rem 0; }
.side-nav-panel.snv2.collapsed .side-nav-link.active::before { left: -0.5rem; }

/* Footer: the signed-in person, and the clinician menu's For Patients link. */
.side-nav-panel.snv2 .side-nav-footer { border-top: 1px solid var(--line); padding: 0.75rem; }
.side-nav-panel.snv2 .side-nav-user { background: transparent; padding: 0.35rem 0.4rem; }
.side-nav-panel.snv2 .side-nav-user-email,
.side-nav-panel.snv2 #sideNavUserEmail { font-size: 0.85rem; color: var(--gray-700); font-weight: 600; }
.side-nav-panel.snv2.collapsed .side-nav-footer { padding: 0.75rem 0.5rem; }
.side-nav-panel.snv2.collapsed .side-nav-user { justify-content: center; padding: 0.35rem 0; }

/* Phones: the menu opens over the page from the header's Menu button. */
@media (max-width: 768px) {
    .side-nav-menu-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        min-height: 44px;
        padding: 0 0.9rem 0 0.75rem;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: #fff;
        color: var(--gray-800);
        font: 600 0.9rem/1 var(--font-sans);
        cursor: pointer;
    }
    .side-nav-menu-btn svg { width: 20px; height: 20px; }
    .side-nav-menu-btn[aria-expanded="true"] { border-color: var(--rose); color: var(--rose); }

    .side-nav-panel.snv2,
    .side-nav-panel.snv2.collapsed {
        width: min(300px, 86vw);
        transform: translateX(-105%);
        visibility: hidden;
        transition: transform 0.2s ease, visibility 0s linear 0.2s;
        z-index: 120;
        box-shadow: 0 22px 44px -18px rgba(26, 26, 28, 0.45);
    }
    .side-nav-panel.snv2.mobile-open {
        transform: none;
        visibility: visible;
        transition: transform 0.2s ease;
    }
    /* The page uses the full width; earlier rules kept a 56px rail. */
    body:has(.side-nav-panel.snv2) .section,
    body:has(.side-nav-panel.snv2.collapsed) .section,
    body:has(.side-nav-panel.snv2) .footer,
    body:has(.side-nav-panel.snv2.collapsed) .footer { padding-left: 0; }

    /* Inside the open menu every label shows, folded or not (section 9 hid
       them visually on phones for the old icon rail). */
    .side-nav-panel.snv2 .side-nav-text,
    .side-nav-panel.snv2:not(.collapsed) .side-nav-text {
        display: inline !important;
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        clip: auto;
    }
    .side-nav-panel.snv2 .side-nav-section-title { display: block !important; }
    .side-nav-panel.snv2 .side-nav-header { display: none; }
    .side-nav-panel.snv2 .side-nav-link,
    .side-nav-panel.snv2.collapsed .side-nav-link { justify-content: flex-start; padding: 0.6rem 0.625rem; }
    .side-nav-panel.snv2.collapsed .side-nav-section { padding: 0 0.75rem; }
    .side-nav-panel.snv2.collapsed .side-nav-section + .side-nav-section { border-top: 0; margin-top: 0; padding-top: 0; }
    .side-nav-panel.snv2.collapsed .side-nav-user { justify-content: flex-start; }
    .side-nav-panel.snv2.collapsed .side-nav-user-email,
    .side-nav-panel.snv2.collapsed #sideNavUserEmail { display: inline; }
    .side-nav-panel.snv2 .side-nav-content { padding-top: 0.5rem; }

    .side-nav-backdrop:not([hidden]) {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 110;
        background: rgba(26, 26, 28, 0.32);
    }
    body.side-nav-open { overflow: hidden; }

    /* The header on a phone: Menu, the logo, then the account button.
       Page links live in the menu (js/sideNav.js marks them). */
    body:has(.side-nav-panel.snv2) .header .nav {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 0.5rem 0.75rem;
    }
    body:has(.side-nav-panel.snv2) .header .nav > .side-nav-menu-btn { order: 0; }
    body:has(.side-nav-panel.snv2) .header .nav > .logo { order: 1; margin-right: auto; }
    body:has(.side-nav-panel.snv2) .header .nav > .logo img { height: 36px !important; }
    body:has(.side-nav-panel.snv2) .header .nav-links {
        order: 2;
        width: auto;
        margin-left: auto;
        padding: 0;
        overflow: visible;
        gap: 0.5rem;
    }
    body:has(.side-nav-panel.snv2) .header .nav-links > li.in-menu-on-phone { display: none; }
    /* The menu shows who is signed in; the header keeps just the button. */
    body:has(.side-nav-panel.snv2) .header .nav-links > li:has(> #authBadge) { display: none; }
    body:has(.side-nav-panel.snv2) .header .nav-links .nav-auth { margin-left: 0; }
    body:has(.side-nav-panel.snv2) .header .nav-links .btn-sm { padding: 0 1rem; }
    body:has(.side-nav-panel.snv2) .header { padding: 0.75rem 0; }
}
/* The patient's name opens My Health (js/sideNav.js linkAccount). */
/* Header link rules (colour, padding, hover fill) would otherwise turn the
   badge into grey text on red. */
.header .nav-links a.auth-badge-link,
.header .nav-links a.auth-badge-link:hover {
    color: #ffffff; background: var(--secondary); padding: 0.3rem 0.6rem; border-radius: 999px;
    text-decoration: none; cursor: pointer;
}
.header .nav-links a.auth-badge-link:hover { filter: brightness(1.15); }
a.auth-badge-link:focus-visible { outline: 3px solid #1a1a1c; outline-offset: 2px; }
.side-nav-panel.snv2 a.side-nav-user-link { text-decoration: none; color: inherit; border-radius: 0.6rem; }
.side-nav-panel.snv2 a.side-nav-user-link:hover { background: var(--paper-deep); }
.side-nav-panel.snv2 a.side-nav-user-link[aria-current="page"] { background: var(--rose-soft, #fdf2f4); }

/* Links copied into the menu for phones only. */
.side-nav-panel.snv2 .side-nav-phone-only { display: none; }
@media (max-width: 768px) {
    .side-nav-panel.snv2 .side-nav-phone-only { display: block; }
    /* No icons on these; line the words up with the links above. */
    .side-nav-panel.snv2 .side-nav-phone-only .side-nav-link { padding-left: calc(0.625rem + 20px + 0.75rem); }
    /* While the menu is open, the floating switch sits under the dimmed
       backdrop with the rest of the page. */
    body.side-nav-open .a11y-trigger { z-index: 100; }
}

@media (prefers-reduced-motion: reduce) {
    .side-nav-panel.snv2, .side-nav-panel.snv2.mobile-open { transition: none; }
}


/* ============================================================================
   11 — Panels that belong to the page (2026-10-12)
   ============================================================================
   The main panels on the patient and clinician pages were pure white on the
   warm paper background, so they sat on the page like pasted-in boxes. They
   now use the warm sand of the landing page's "What you can do" band, with
   the same hairline and a soft warm shadow, so they read as part of one
   design. Form fields stay white inside them, which keeps them obviously
   fillable. */

:root {
    --surface: #f7f2eb;
    --surface-shadow: 0 1px 0 rgba(26, 26, 28, 0.02), 0 10px 24px -20px rgba(80, 52, 30, 0.28);
}

.card,
.auth-shell .card {
    background: var(--surface);
    border-color: var(--line);
    box-shadow: var(--surface-shadow);
}
.card:hover { box-shadow: var(--surface-shadow); }
.card-header { background: var(--paper-deep); }
/* styles.css paints the card body white too, which hid the card colour. */
.card-body,
.card-footer { background: transparent; }


/* ============================================================================
   12 — One button size (2026-10-12)
   ============================================================================
   styles.css sizes .btn from the 18px root with the body's 1.6 line height,
   so an ordinary button was 65px tall: taller than the header buttons (44px)
   and than the fields beside it, and the outline ones (with a border) came
   out a different height from the filled ones next to them. Ordinary buttons
   are now 48px, the same whether filled or outlined, which is still well
   above the 44px touch target. :where() keeps this at the specificity of
   .btn, so any page or component that sizes its own buttons still wins. */
.btn:where(:not(.btn-sm):not(.btn-lg)) {
    min-height: 48px;
    padding: 0.5rem 1.35rem;
    line-height: 1.25;
}
.btn-sm { line-height: 1.25; }
/* On a phone a long label wraps inside its button instead of running out of
   the card (with "Easier to read" on, "Download selected PDFs as one book"
   stuck out of its card). */
@media (max-width: 600px) {
    .btn { white-space: normal; max-width: 100%; }
}


/* ============================================================================
   13 — Clinician home on tablets and phones (2026-10-12)
   ============================================================================
   The search box's hint wraps to two lines on a tablet and three on a phone,
   and only the first showed in full, so while the box is empty it is tall
   enough for all of it. The
   Preferences switch was pinned over the big logo; on a phone it sits in its
   own row above it instead. */
@media (max-width: 1100px) {
    body:not(.chat-fullscreen-active) #heroSearch .hero-input:placeholder-shown { min-height: calc(2.8em + 2rem); }
}
@media (max-width: 600px) {
    body:not(.chat-fullscreen-active) #heroSearch .hero-input:placeholder-shown { min-height: calc(4.2em + 2rem); }
    .hero > .preferences-trigger {
        position: static;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 16px 0;
    }
}