/* ===========================================================================
   "Easier to read"
   ---------------------------------------------------------------------------
   v1 2026-09-11. v2 2026-10-06. v3 2026-10-07: one switch (js/accessibility.js).

   The median age at a cancer diagnosis in the United States is 66 to 67, so an
   older user with reduced vision, tremor or low digital confidence is not an
   edge case on this product. They are the typical user.

   HOW THIS FILE IS SAFE
   Everything that changes a page is scoped to html.a11y (plus .a11y-text-lg
   or .a11y-text-xl for the size), which is absent by default. With the mode
   off, this file styles only its own components (the switch, the bar, the
   skip link, the Listen button) and section 8, which applies only to people
   who already asked their operating system for less motion.

   WHAT THE MODE DOES
   1. Larger text, in two sizes.
   2. A trimmed header: logo, the switch, the account button.
   3. The side menu folded to its icons (the JS folds it; the rail is styled
      larger here). It can still be opened.
   4. One column, bigger buttons and fields, no animation or shadows.
   5. Grey text a step darker.

   Sizes are in rem almost everywhere in styles.css, so moving the root font
   size scales the interface in proportion. Keep using rem.

   ORDER
   Load AFTER styles.css and refinements.css.
   =========================================================================== */


/* ---------------------------------------------------------------------------
   1. Type scale. styles.css sets the root to 18px on desktop and 16px at
   768px and below. A is +25%, A+ is +40%.
   --------------------------------------------------------------------------- */

html.a11y-text-lg { font-size: 22.5px; }
html.a11y-text-xl { font-size: 25.2px; }

@media (max-width: 768px) {
    html.a11y-text-lg { font-size: 20px; }
    html.a11y-text-xl { font-size: 22.4px; }
}

/* The two px sizes in styles.css, restated in rem so they scale too. */
html.a11y .ph-example { font-size: 0.95rem; }


/* ---------------------------------------------------------------------------
   2. Darker text. One step on the grey scale, so secondary text reads easily
   without the page changing character.
   --------------------------------------------------------------------------- */

html.a11y {
    --gray-400: #6c6c75;
    --gray-500: #55555c;
    --gray-600: #4a4a50;
    --gray-700: #2a2a2e;
}

html.a11y ::placeholder { color: #6c6c75; opacity: 1; }

html.a11y .footer p,
html.a11y .footer-bottom { color: #e6ded4; }


/* ---------------------------------------------------------------------------
   3. The header: logo, the switch, the account button. Everything else in it
   is a choice this person does not need to make right now. Its own sizes are
   in px so it stays one tidy row whatever the text size.
   --------------------------------------------------------------------------- */

html.a11y .header .seg,
html.a11y .header .nav-links > li:not(.nav-auth) {
    display: none !important;
}

html.a11y .header { padding-bottom: 0; }
html.a11y .header .a11y-bar { margin-top: 12px; }

/* With only the account button left, it shares the logo's row on a phone
   instead of taking a second row of its own. */
@media (max-width: 900px) {
    html.a11y .header .nav { flex-wrap: nowrap; }
    html.a11y .header .nav-links { order: 0; width: auto; margin-left: auto; overflow: visible; }
}
/* On a phone the name badge and Logout did not both fit beside the logo, and
   Logout ran off the screen (2026-10-12). The badge goes; Logout stays. */
@media (max-width: 600px) {
    html.a11y .header .nav-links > li:has(> #authBadge) { display: none; }
}

/* Sign-in tabs stay on one line at the larger size. */
html.a11y .auth-shell .tab-button { white-space: nowrap; padding-left: 0.75rem; padding-right: 0.75rem; }

html.a11y .header .nav-links .btn,
html.a11y .header .auth-badge {
    font-size: 16px;
    min-height: 44px;
    padding: 0 18px;
}


/* ---------------------------------------------------------------------------
   4. The side menu, folded to icons. Bigger icons and targets than the normal
   rail, and a clear button to show the labels.
   --------------------------------------------------------------------------- */

@media (min-width: 769px) {
    html.a11y .side-nav-panel.collapsed { width: 76px; }
    html.a11y body:has(.side-nav-panel.collapsed) .section { padding-left: 76px; }
    html.a11y .side-nav-panel:not(.collapsed) { width: 270px; }
    html.a11y body:has(.side-nav-panel:not(.collapsed)) .section { padding-left: 270px; }
}

html.a11y .side-nav-panel .side-nav-icon-svg { width: 24px; height: 24px; }
html.a11y .side-nav-panel .side-nav-link,
html.a11y .side-nav-panel .side-nav-btn {
    min-height: 52px;
    font-size: 16px;
}
html.a11y .side-nav-panel:not(.collapsed) .side-nav-text {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}
html.a11y .side-nav-section-title { font-size: 13px; }


/* ---------------------------------------------------------------------------
   5. One column, bigger targets, calmer page.
   --------------------------------------------------------------------------- */

/* No animation, no shadows. Fewer moving parts is the single biggest gain for
   someone tired or with treatment-related "chemo brain". */
html.a11y *,
html.a11y *::before,
html.a11y *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
}
html.a11y .section .card,
html.a11y .section .btn { box-shadow: none !important; }

/* Promotional and secondary furniture. */
html.a11y .feature-nav,
html.a11y .demo-banner,
html.a11y .promo,
html.a11y .footer-links { display: none !important; }

/* One column. */
html.a11y .section .grid,
html.a11y .section .ph-grid,
html.a11y .section .ph-cards,
html.a11y .section .ph-steps,
html.a11y .section .form-grid,
html.a11y .section .two-col {
    display: flex !important;
    flex-direction: column;
    gap: 1rem;
}
/* Page-specific rows and grids that sit two or three across. */
html.a11y .section .pd-grid,
html.a11y .section .dc-field-row { display: flex !important; flex-direction: column; gap: 1rem; }
html.a11y .section .pt-row { flex-direction: column; flex-wrap: nowrap; }
html.a11y .section .pt-row > *,
html.a11y .section .pd-grid > *,
html.a11y .section .dc-field-row > * { width: 100%; max-width: 100%; }

html.a11y .section .ph-cards > *,
html.a11y .section .ph-steps > *,
html.a11y .section .grid > *,
html.a11y .section .form-grid > * { width: 100%; max-width: 100%; }

/* Reading width. Long lines lose the eye. */
html.a11y .section p,
html.a11y .section li { line-height: 1.7; max-width: 68ch; }
html.a11y .section h1,
html.a11y .section h2,
html.a11y .section h3 { line-height: 1.25; }

/* Buttons and fields. 48px is the working minimum for a hand with a tremor. */
html.a11y .section .btn,
html.a11y .section button:not(.a11y-listen):not(.side-nav-toggle) {
    min-height: 48px;
}
html.a11y .section .btn-primary,
html.a11y .section button[type="submit"],
html.a11y #heroBtn { min-height: 54px; font-weight: 700; }

html.a11y .section input[type="text"],
html.a11y .section input[type="email"],
html.a11y .section input[type="password"],
html.a11y .section input[type="search"],
html.a11y .section input[type="tel"],
html.a11y .section input[type="number"],
html.a11y .section input[type="date"],
html.a11y .section select,
html.a11y .section textarea {
    min-height: 52px;
    width: 100%;
    max-width: 100%;
    font-size: 1rem;
    line-height: 1.5;
}

html.a11y input[type="checkbox"],
html.a11y input[type="radio"] { width: 1.3rem; height: 1.3rem; }

/* Links inside text are underlined, not marked by colour alone. */
html.a11y .section p a:not(.btn),
html.a11y .section li a:not(.btn) {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

/* A floor under small secondary text. Each page sets its own captions and
   notes between 0.68rem and 0.9rem. */
html.a11y .ph-cards p, html.a11y .ph-step p, html.a11y .ph-safety,
html.a11y .ph-status p, html.a11y .ph-section-title p,
html.a11y .pq-notice, html.a11y .message-sources, html.a11y .pq-clear,
html.a11y .pt-msg, html.a11y .pt-note, html.a11y .pt-sources,
html.a11y .pt-entry-meta, html.a11y .pt-del,
html.a11y .pc-msg, html.a11y .pc-note, html.a11y .pc-or, html.a11y .pc-sub,
html.a11y .pd-empty, html.a11y .pd-fact, html.a11y .pd-card h2 a,
html.a11y .dc-msg, html.a11y .dc-note, html.a11y .dc-item-meta,
html.a11y .dc-remove, html.a11y .dc-field-row input,
html.a11y .pi-context, html.a11y .pi-meta, html.a11y .pi-msg, html.a11y .pi-tab,
html.a11y .tl-date, html.a11y .tl-detail,
html.a11y .consent label, html.a11y .counter, html.a11y .fine,
html.a11y .srcs, html.a11y .gate p, html.a11y .examples button,
html.a11y #reportInput {
    font-size: 0.95rem;
    line-height: 1.6;
}
html.a11y .gate h2 { font-size: 1.35rem; }

/* Form labels in sentence case. Capitals with letter-spacing are harder to
   read, and read as headings. */
html.a11y .section .form-label { text-transform: none; letter-spacing: 0; font-size: 0.95rem; }

/* Small capital-letter tags become sentence case at a readable size. */
html.a11y .ph-tag, html.a11y .pd-pill, html.a11y .pt-sev,
html.a11y .pi-urgency, html.a11y .pi-count, html.a11y .dc-status,
html.a11y .msg .who {
    font-size: 0.85rem;
    text-transform: none;
    letter-spacing: 0;
}

/* Home page: the ask box and its button stack; example questions become a
   list of full-width buttons (one tap beats typing). */
html.a11y .ph-ask { flex-direction: column; align-items: stretch; }
html.a11y .ph-ask textarea { min-height: 110px; }
html.a11y .ph-ask .btn { width: 100%; }
html.a11y .ph-examples {
    flex-direction: column;
    align-items: stretch;
    max-width: 640px;
    margin: 0 auto;
}
html.a11y .ph-example {
    text-align: left;
    border-radius: 12px;
    padding: 0.8rem 1rem;
    color: var(--gray-800);
}
html.a11y .ph-cards .card { padding: 1.25rem 1.4rem; }

/* The chat grows with the page instead of scrolling inside a fixed box, so
   there is one scrollbar, the page's own. */
html.a11y .chat-container { height: auto !important; min-height: 0; overflow: visible; }
html.a11y .chat-messages {
    flex: none;
    min-height: 10rem;
    max-height: none !important;
    overflow: visible;
}
html.a11y .message-content { max-width: 100%; }
html.a11y .message { scroll-margin-top: 9rem; }
html.a11y .chat-input-container { flex-direction: column; align-items: stretch; gap: 0.75rem; }
html.a11y .chat-input-container .chat-input { width: 100%; min-height: 110px; }
html.a11y .chat-input-container .btn { width: 100%; }
html.a11y .pq-chat-head { flex-wrap: wrap; gap: 0.75rem; }
html.a11y .pq-chat-head > span:last-child { display: flex; flex-wrap: wrap; gap: 0.6rem; }
html.a11y .pq-clear {
    margin-left: 0 !important;
    border: 1px solid var(--gray-300);
    border-radius: 999px;
    background: #ffffff;
    color: var(--gray-800);
    padding: 0 1rem;
}
/* join.html caps its conversation at 52vh; here it grows with the page. */
html.a11y .chat { max-height: none; overflow: visible; }

@media (max-width: 768px) {
    html.a11y .pq-wrap { padding-left: 12px; padding-right: 12px; }
    html.a11y .chat-messages { padding: 16px 12px; }
    html.a11y .message-content { padding: 14px 16px; }
    html.a11y .message-avatar { display: none; }
    html.a11y .chat-input-container { padding: 16px 12px; }
    html.a11y .pq-chat-head { padding: 16px 12px; }
    /* On a phone the header and the bar together would hold too much of the
       screen if they stayed pinned, so they scroll away with the page. */
    html.a11y .header { position: static; }
}


/* ---------------------------------------------------------------------------
   6. The switch, the bar and the Listen button. Their own sizes are in px so
   they never grow with the text.

   The switch floats in the bottom-right corner on every covered page: always
   in the same place, always in reach of a thumb, and out of the header. Off,
   it is a dark pill; on, a white one that says so, and a second press turns
   the mode off. The page gets room at the bottom so it never sits on top of
   the last line of anything.
   --------------------------------------------------------------------------- */

.a11y-trigger {
    position: fixed;
    right: 20px;
    /* A page with a sticky composer (patient-qa.html) sets this to sit the
       switch just above it, so it never covers the Send button. */
    bottom: var(--a11y-trigger-bottom, 20px);
    /* Above the page and its menus, below every pop-up window (2026-10-12):
       at 9998 it sat on top of the set-up wizard's Continue button. */
    z-index: 990;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 52px;
    padding: 0 20px 0 16px;
    background: #1a1a1c;
    color: #ffffff;
    border: 2px solid #1a1a1c;
    border-radius: 999px;
    box-shadow: 0 8px 24px -6px rgba(26, 26, 28, 0.45);
    font-family: var(--font-sans, "Plus Jakarta Sans", "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
    font-weight: 700;
    font-size: 16px;
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
    cursor: pointer;
}
.a11y-trigger:hover { background: #2a2a2e; }
.a11y-trigger svg { width: 22px; height: 22px; flex: none; }
.a11y-trigger[aria-pressed="true"] {
    background: #ffffff;
    border-color: #1a1a1c;
    color: #1a1a1c;
}
.a11y-trigger[aria-pressed="true"]:hover { background: #f4efe8; }

/* On a phone the switch is a round icon button, so it covers as little of
   the page as possible. Its words stay for screen readers. */
@media (max-width: 600px) {
    .a11y-trigger {
        right: 12px; bottom: var(--a11y-trigger-bottom, 12px);
        width: 52px; height: 52px; min-height: 52px; padding: 0;
        justify-content: center; border-radius: 50%;
    }
    .a11y-trigger svg { width: 26px; height: 26px; }
    .a11y-trigger .a11y-trigger__label {
        position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
        overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }
}

/* Room for the switch at the end of the page. */
.footer { padding-bottom: 84px !important; }
body:not(:has(.footer)) { padding-bottom: 84px; }

.a11y-bar {
    background: #1a1a1c;
    color: #ffffff;
    font-family: var(--font-sans, "Plus Jakarta Sans", "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
    font-size: 16px;
    line-height: 1.3;
}
.a11y-bar[hidden] { display: none; }
.a11y-bar__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 8px 24px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 20px;
}
.a11y-bar__title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    margin-right: auto;
    color: #ffffff;
}
.a11y-bar__title svg { width: 20px; height: 20px; flex: none; }
.a11y-bar__sizes { display: inline-flex; align-items: center; gap: 6px; }
.a11y-bar__label { color: #e6ded4; margin-right: 4px; }
.a11y-bar button {
    min-height: 40px;
    min-width: 44px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid #55555c;
    background: transparent;
    color: #ffffff;
    font-family: inherit;
    font-weight: 700;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}
.a11y-bar button:hover { border-color: #e6ded4; }
.a11y-bar button[data-size][aria-pressed="true"] {
    background: #ffffff;
    border-color: #ffffff;
    color: #1a1a1c;
}
.a11y-bar .a11y-bar__xl { font-size: 19px; }
.a11y-bar .a11y-bar__off { background: #ffffff; color: #1a1a1c; border-color: #ffffff; }
.a11y-bar .a11y-bar__read {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.a11y-bar .a11y-bar__read[hidden] { display: none; }
.a11y-bar .a11y-bar__read svg { width: 20px; height: 20px; flex: none; }
.a11y-bar .a11y-bar__read[aria-pressed="true"] { background: #fdf2f4; border-color: #fdf2f4; color: #820c2a; }
.a11y-bar .a11y-bar__off:hover { background: #e6ded4; }

@media (max-width: 600px) {
    .a11y-bar__inner { padding: 8px 12px; gap: 8px 12px; }
    .a11y-bar__title { width: 100%; margin-right: 0; }
}

.a11y-listen {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.6rem;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid #d8cec2;
    border-radius: 999px;
    background: #ffffff;
    color: #1a1a1c;
    font-family: inherit;
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}
.a11y-listen:hover { border-color: #9d0f33; }
.a11y-listen[aria-pressed="true"] { border-color: #9d0f33; background: #fdf2f4; color: #820c2a; }
.a11y-listen svg { width: 20px; height: 20px; flex: none; }

@media print { .a11y-trigger, .a11y-bar, .a11y-listen { display: none !important; } }


/* ---------------------------------------------------------------------------
   7. Focus, skip link, screen-reader-only text. These apply to everyone.
   --------------------------------------------------------------------------- */

html.a11y :focus-visible {
    outline: 3px solid #1d4ed8;
    outline-offset: 3px;
}
html.a11y textarea:focus-visible,
html.a11y input:focus-visible {
    outline: 3px solid #1d4ed8 !important;
    outline-offset: 2px;
}
.a11y-trigger:focus-visible,
.a11y-bar button:focus-visible,
.a11y-listen:focus-visible {
    outline: 3px solid #1d4ed8;
    outline-offset: 2px;
}
.a11y-bar button:focus-visible { outline-color: #ffbf00; }

.a11y-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 10000;
    padding: 0.9rem 1.4rem;
    background: #1a1a1c;
    color: #ffffff;
    font-weight: 700;
    text-decoration: none;
    border-radius: 0 0 6px 0;
}
.a11y-skip-link:focus { left: 0; outline: 3px solid #ffbf00; outline-offset: 2px; }

.a11y-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}


/* ---------------------------------------------------------------------------
   8. Respect the operating system. Applies only to people who set these.
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

@media (forced-colors: active) {
    .a11y-trigger,
    .a11y-bar button { border: 2px solid ButtonText; }
    .a11y-trigger[aria-pressed="true"],
    .a11y-bar button[aria-pressed="true"],
    .a11y-listen[aria-pressed="true"] { border: 4px solid Highlight; }
}


/* ---------------------------------------------------------------------------
   Docked in the side menu (2026-10-12)
   ---------------------------------------------------------------------------
   On pages with the side menu, wider than a phone, js/sideNav.js moves the
   switch into the bottom of the menu, under the account name, instead of
   leaving it floating over the page. Floating, it covered buttons near the
   bottom-right corner ("Manage" on the dashboard, "New conversation" on the
   Ask page at tablet width). It is still in the same place on every page.
   Folded to icons, it is an icon like the rest of the menu. On phones the
   menu is a drawer, so sideNav.js puts the switch back on <body> to float. */
.a11y-trigger.a11y-trigger--docked {
    position: static;
    display: flex;
    width: 100%;
    min-height: 44px;
    margin-top: 0.5rem;
    padding: 0.45rem 0.75rem;
    gap: 0.6rem;
    justify-content: flex-start;
    border-radius: 0.6rem;
    box-shadow: none;
    font-size: 0.9rem;
    line-height: 1.2;
    white-space: normal;
    text-align: left;
}
.a11y-trigger.a11y-trigger--docked svg { width: 20px; height: 20px; }
.side-nav-panel.collapsed .a11y-trigger.a11y-trigger--docked {
    width: 40px;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    justify-content: center;
}
.side-nav-panel.collapsed .a11y-trigger--docked .a11y-trigger__label {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Nothing floats over the end of the page then. */
body:has(.a11y-trigger--docked) .footer { padding-bottom: 2rem !important; }
body:has(.a11y-trigger--docked):not(:has(.footer)) { padding-bottom: 0; }