/* CauseWorkHub 1.5.0 accessibility and appearance foundation. */
.screen-reader-text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
.cwh-skip-link {
    position: fixed;
    left: 12px;
    top: 12px;
    z-index: 9999;
    transform: translateY(-160%);
    padding: 12px 16px;
    border: 3px solid var(--cwh-focus);
    border-radius: 10px;
    background: var(--cwh-card);
    color: var(--cwh-text);
    font-weight: 800;
    text-decoration: none;
}
.cwh-skip-link:focus { transform: none; }

/* Personal text scaling applies to rem-based interface typography. */
html.cwh-text-large { font-size: 112.5%; }
html.cwh-text-xlarge { font-size: 125%; }

/* Member-chosen themes. System mode is handled by the media query below. */
html.cwh-theme-dark {
    color-scheme: dark;
    --cwh-bg: #111418;
    --cwh-card: #191d23;
    --cwh-text: #f4f7fb;
    --cwh-muted: #c1c8d2;
    --cwh-border: #343a44;
    --cwh-border-strong: #535b68;
    --cwh-shadow: 0 18px 50px rgba(0,0,0,.28);
    --cwh-shadow-soft: 0 8px 26px rgba(0,0,0,.22);
    --cwh-soft: #242a32;
    --cwh-success-bg: #123323;
    --cwh-danger-bg: #3d1715;
    --cwh-focus: #8ab4ff;
}
@media (prefers-color-scheme: dark) {
    html.cwh-theme-system {
        color-scheme: dark;
        --cwh-bg: #111418;
        --cwh-card: #191d23;
        --cwh-text: #f4f7fb;
        --cwh-muted: #c1c8d2;
        --cwh-border: #343a44;
        --cwh-border-strong: #535b68;
        --cwh-shadow: 0 18px 50px rgba(0,0,0,.28);
        --cwh-shadow-soft: 0 8px 26px rgba(0,0,0,.22);
        --cwh-soft: #242a32;
        --cwh-success-bg: #123323;
        --cwh-danger-bg: #3d1715;
        --cwh-focus: #8ab4ff;
    }
}
html.cwh-theme-dark .cwh-home-header,
html.cwh-theme-dark .cwh-qa-library,
html.cwh-theme-dark .cwh-qa-manage-item,
html.cwh-theme-dark .cwh-qa-editor-card,
html.cwh-theme-dark .cwh-field input,
html.cwh-theme-dark .cwh-field select,
html.cwh-theme-dark .cwh-audience-mode > label,
html.cwh-theme-dark .cwh-role-options,
html.cwh-theme-dark .cwh-mobile-nav,
html.cwh-theme-dark .cwh-setting-options label,
html.cwh-theme-dark .cwh-accessibility-card,
html.cwh-theme-dark .cwh-accessibility-save,
html.cwh-theme-dark .cwh-accessibility-principles { background: var(--cwh-card); color: var(--cwh-text); }
html.cwh-theme-dark .cwh-qa-principle { background: #080a0d; }
html.cwh-theme-dark .cwh-qa-icon,
html.cwh-theme-dark .cwh-qa-empty-icon { background: var(--cwh-soft); color: var(--cwh-text); }
html.cwh-theme-dark .cwh-home-actions a,
html.cwh-theme-dark .cwh-text-link,
html.cwh-theme-dark .cwh-cancel-link,
html.cwh-theme-dark .cwh-qa-item-actions a,
html.cwh-theme-dark .cwh-qa-item-actions button,
html.cwh-theme-dark .cwh-home-signout { color: var(--cwh-muted) !important; }
html.cwh-theme-dark .cwh-count,
html.cwh-theme-dark .cwh-qa-scope-badge { background: var(--cwh-soft); color: var(--cwh-text); }
html.cwh-theme-dark .cwh-button { background: #f4f7fb; border-color: #f4f7fb; color: #111418; }
html.cwh-theme-dark .cwh-button:hover,
html.cwh-theme-dark .cwh-button:focus-visible { background: #dfe5ec; }

@media (prefers-color-scheme: dark) {
    html.cwh-theme-system .cwh-home-header,
    html.cwh-theme-system .cwh-qa-library,
    html.cwh-theme-system .cwh-qa-manage-item,
    html.cwh-theme-system .cwh-qa-editor-card,
    html.cwh-theme-system .cwh-field input,
    html.cwh-theme-system .cwh-field select,
    html.cwh-theme-system .cwh-audience-mode > label,
    html.cwh-theme-system .cwh-role-options,
    html.cwh-theme-system .cwh-mobile-nav,
    html.cwh-theme-system .cwh-setting-options label,
    html.cwh-theme-system .cwh-accessibility-card,
    html.cwh-theme-system .cwh-accessibility-save,
    html.cwh-theme-system .cwh-accessibility-principles { background: var(--cwh-card); color: var(--cwh-text); }
    html.cwh-theme-system .cwh-qa-principle { background: #080a0d; }
    html.cwh-theme-system .cwh-qa-icon,
    html.cwh-theme-system .cwh-qa-empty-icon { background: var(--cwh-soft); color: var(--cwh-text); }
    html.cwh-theme-system .cwh-home-actions a,
    html.cwh-theme-system .cwh-text-link,
    html.cwh-theme-system .cwh-cancel-link,
    html.cwh-theme-system .cwh-qa-item-actions a,
    html.cwh-theme-system .cwh-qa-item-actions button,
    html.cwh-theme-system .cwh-home-signout { color: var(--cwh-muted) !important; }
    html.cwh-theme-system .cwh-count,
    html.cwh-theme-system .cwh-qa-scope-badge { background: var(--cwh-soft); color: var(--cwh-text); }
    html.cwh-theme-system .cwh-button { background: #f4f7fb; border-color: #f4f7fb; color: #111418; }
}

/* Stronger high-contrast choice without relying on color alone. */
html.cwh-contrast-high {
    --cwh-border: #606773;
    --cwh-border-strong: #303642;
    --cwh-muted: #3f4650;
    --cwh-focus: #0047cc;
}
html.cwh-contrast-high.cwh-theme-dark {
    --cwh-border: #8d96a3;
    --cwh-border-strong: #c8d0da;
    --cwh-muted: #e0e5eb;
    --cwh-focus: #a9c7ff;
}
@media (prefers-color-scheme: dark) {
    html.cwh-contrast-high.cwh-theme-system {
        --cwh-border: #8d96a3;
        --cwh-border-strong: #c8d0da;
        --cwh-muted: #e0e5eb;
        --cwh-focus: #a9c7ff;
    }
}
html.cwh-contrast-high :focus-visible { outline-width: 4px; outline-color: var(--cwh-focus); }
html.cwh-contrast-high .cwh-home-card,
html.cwh-contrast-high .cwh-home-next,
html.cwh-contrast-high .cwh-qa-tile,
html.cwh-contrast-high .cwh-qa-manage-item,
html.cwh-contrast-high .cwh-accessibility-card { border-width: 2px; }

/* Larger controls are intentionally generous rather than minimum-compliance sized. */
html.cwh-controls-large .cwh-button,
html.cwh-controls-large .cwh-field input,
html.cwh-controls-large .cwh-field select,
html.cwh-controls-large .cwh-qa-item-actions a,
html.cwh-controls-large .cwh-qa-item-actions button,
html.cwh-controls-large .cwh-home-actions a,
html.cwh-controls-large .cwh-mobile-nav a,
html.cwh-controls-large .cwh-setting-options label { min-height: 52px; }
html.cwh-controls-large .cwh-button { padding: 13px 20px; }
html.cwh-controls-large .cwh-setting-options label { padding: 14px 16px; }

html.cwh-spacing-comfortable .cwh-home-main { padding-top: clamp(56px, 7vw, 92px); }
html.cwh-spacing-comfortable .cwh-home-grid,
html.cwh-spacing-comfortable .cwh-qa-grid,
html.cwh-spacing-comfortable .cwh-qa-manage-list,
html.cwh-spacing-comfortable .cwh-accessibility-form { gap: 24px; }
html.cwh-spacing-comfortable .cwh-home-card,
html.cwh-spacing-comfortable .cwh-home-next,
html.cwh-spacing-comfortable .cwh-accessibility-card { padding: 32px; }

/* Explicit or device-level reduced motion. */
html.cwh-motion-reduced *,
html.cwh-motion-reduced *::before,
html.cwh-motion-reduced *::after { scroll-behavior: auto !important; transition-duration: .001ms !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .001ms !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}

/* Accessibility settings page. */
.cwh-accessibility-main { max-width: 1040px; }
.cwh-accessibility-form { display: grid; gap: 18px; margin-top: 36px; }
.cwh-accessibility-card {
    padding: 26px;
    display: grid;
    grid-template-columns: minmax(260px, .8fr) minmax(0, 1.2fr);
    gap: 28px;
    align-items: center;
    background: var(--cwh-card);
    border: 1px solid var(--cwh-border);
    border-radius: 18px;
    box-shadow: var(--cwh-shadow-soft);
}
.cwh-accessibility-copy h2 { margin: 0 0 7px; font-size: 1.22rem; }
.cwh-accessibility-copy p:last-child { margin: 0; color: var(--cwh-muted); }
.cwh-setting-options { margin: 0; padding: 0; display: grid; gap: 8px; border: 0; }
.cwh-setting-options label {
    min-height: 46px;
    padding: 11px 13px;
    display: flex;
    align-items: center;
    gap: 11px;
    background: var(--cwh-card);
    border: 1px solid var(--cwh-border-strong);
    border-radius: 11px;
    cursor: pointer;
}
.cwh-setting-options label:has(input:checked) { border-width: 2px; border-color: var(--cwh-text); }
.cwh-setting-options input { width: 20px; height: 20px; flex: 0 0 auto; accent-color: var(--cwh-text); }
.cwh-setting-options span { font-weight: 700; }
.cwh-accessibility-save {
    padding: 22px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    background: var(--cwh-card);
    border: 1px solid var(--cwh-border);
    border-radius: 18px;
}
.cwh-accessibility-save p { margin: 4px 0 0; color: var(--cwh-muted); }
.cwh-accessibility-principles {
    margin-top: 28px;
    padding: 28px;
    background: var(--cwh-card);
    border: 1px solid var(--cwh-border);
    border-radius: 18px;
}
.cwh-accessibility-principles h2 { margin: 0 0 8px; }
.cwh-accessibility-principles > p:last-child { margin: 0; color: var(--cwh-muted); max-width: 850px; }

/* CauseWorkHub deliberately supports both portrait and landscape. No orientation lock. */
@media (orientation: landscape) and (max-height: 620px) {
    .cwh-home-header { position: static; }
    .cwh-home-main { padding-top: 28px; }
    .cwh-accessibility-card { grid-template-columns: minmax(220px,.8fr) minmax(320px,1.2fr); }
}

@media (max-width: 760px) {
    .cwh-accessibility-card { grid-template-columns: 1fr; gap: 18px; padding: 20px; }
    .cwh-accessibility-save { align-items: stretch; flex-direction: column; }
    .cwh-accessibility-save .cwh-button { width: 100%; }
    .cwh-mobile-nav.cwh-mobile-nav-four { grid-template-columns: repeat(4, 1fr); }
}

/* ---------------------------------------------------------
   CauseWorkHub 1.5.3 — responsive/accessibility hardening
   --------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Focus remains unmistakable in every theme and does not rely on a subtle
   border-color change. */
html :focus-visible {
    outline: 3px solid var(--cwh-focus, #2c65d8);
    outline-offset: 3px;
}
html.cwh-theme-dark :focus-visible,
html.cwh-contrast-high.cwh-theme-dark :focus-visible {
    box-shadow: 0 0 0 2px #111418, 0 0 0 6px var(--cwh-focus);
}
@media (prefers-color-scheme: dark) {
    html.cwh-theme-system :focus-visible { box-shadow: 0 0 0 2px #111418, 0 0 0 6px var(--cwh-focus); }
}

/* Native choice controls remain large and visible instead of inheriting tiny
   browser defaults. */
.cwh-setting-options input[type="radio"],
.cwh-setting-options input[type="checkbox"],
.cwh-qa-choice input[type="radio"],
.cwh-audience-mode input[type="radio"],
.cwh-role-options input[type="checkbox"] {
    inline-size: 21px;
    block-size: 21px;
    min-inline-size: 21px;
    flex: 0 0 auto;
    accent-color: var(--cwh-text);
}
html.cwh-controls-large .cwh-setting-options input[type="radio"],
html.cwh-controls-large .cwh-setting-options input[type="checkbox"],
html.cwh-controls-large .cwh-qa-choice input[type="radio"],
html.cwh-controls-large .cwh-audience-mode input[type="radio"],
html.cwh-controls-large .cwh-role-options input[type="checkbox"] {
    inline-size: 25px;
    block-size: 25px;
    min-inline-size: 25px;
}

/* Success/error messaging retains readable text contrast in dark themes. */
html.cwh-theme-dark .cwh-notice-success,
html.cwh-theme-dark .cwh-alert-success {
    color: #b9f4cf;
    border-color: #3b8b60;
    background: #123323;
}
html.cwh-theme-dark .cwh-notice-error,
html.cwh-theme-dark .cwh-alert-error {
    color: #ffd1cd;
    border-color: #a94a43;
    background: #3d1715;
}
html.cwh-theme-dark .cwh-account-status {
    color: #c8f7d9;
    border-color: #4d9d70;
    background: #123323;
}
@media (prefers-color-scheme: dark) {
    html.cwh-theme-system .cwh-notice-success,
    html.cwh-theme-system .cwh-alert-success { color: #b9f4cf; border-color: #3b8b60; background: #123323; }
    html.cwh-theme-system .cwh-notice-error,
    html.cwh-theme-system .cwh-alert-error { color: #ffd1cd; border-color: #a94a43; background: #3d1715; }
    html.cwh-theme-system .cwh-account-status { color: #c8f7d9; border-color: #4d9d70; background: #123323; }
}

/* Extra-large text should reflow, not disappear behind ellipses. */
html.cwh-text-xlarge .cwh-qa-copy strong,
html.cwh-text-xlarge .cwh-qa-launch strong,
html.cwh-text-xlarge .cwh-qa-launch small,
html.cwh-text-large .cwh-qa-launch small {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
}
html.cwh-text-xlarge .cwh-qa-tile { align-items: flex-start; }
html.cwh-text-xlarge .cwh-qa-arrow { align-self: center; }
html.cwh-text-xlarge .cwh-home-actions { gap: 12px 18px; }

/* Generous touch targets remain generous even where the base component uses a
   compact action style. */
html.cwh-controls-large .cwh-qa-choice > label,
html.cwh-controls-large .cwh-audience-mode > label,
html.cwh-controls-large .cwh-role-options label,
html.cwh-controls-large .cwh-account-status { min-height: 52px; }
html.cwh-controls-large .cwh-qa-item-actions a,
html.cwh-controls-large .cwh-qa-item-actions button { min-width: 48px; }

/* Landscape is a first-class workspace, especially for users whose device may
   be physically mounted in that orientation. */
@media (orientation: landscape) and (min-width: 721px) and (max-height: 820px) {
    .cwh-home-header { position: static; min-height: 66px; padding-top: 9px; padding-bottom: 9px; }
    .cwh-home-main { padding-top: 30px; padding-bottom: 54px; }
    .cwh-home-welcome h1 { font-size: clamp(2rem, 4.2vw, 3.2rem); }
    .cwh-qa-home { margin-top: 30px; }
    .cwh-home-grid { margin-top: 30px; }
    .cwh-accessibility-form { margin-top: 28px; }
    .cwh-accessibility-card { align-items: start; }
}

/* Very narrow screens plus extra-large text get a single-column reading flow
   without horizontal scrolling. */
body:has(.cwh-role-preview-banner) .cwh-home-header { position: relative; top: auto; }
@media (max-width: 520px) {
    html.cwh-text-xlarge .cwh-home-main { width: min(100% - 20px, 1180px); }
    html.cwh-text-xlarge .cwh-home-welcome h1 { font-size: clamp(1.85rem, 10vw, 2.55rem); }
    html.cwh-text-xlarge .cwh-section-heading { align-items: flex-start; flex-direction: column; }
    html.cwh-text-xlarge .cwh-qa-empty { grid-template-columns: 1fr; }
    html.cwh-text-xlarge .cwh-mobile-nav a { font-size: .74rem; line-height: 1.1; overflow-wrap: anywhere; }
}
.cwh-role-preview-banner{position:sticky;top:0;z-index:10000;display:flex;align-items:center;justify-content:center;gap:24px;padding:12px clamp(16px,4vw,48px);border-bottom:3px solid #7a4d00;background:#ffdf70;color:#2c1b00;box-shadow:0 6px 20px rgba(65,41,0,.18)}.cwh-role-preview-banner>div{display:flex;align-items:center;flex-wrap:wrap;gap:7px 12px}.cwh-role-preview-banner>div>strong:first-child{letter-spacing:.08em}.cwh-role-preview-warning{width:100%;color:#8b1e10}.cwh-role-preview-banner form{margin:0}.cwh-role-preview-banner button{min-height:44px;padding:9px 16px;border:2px solid #2c1b00;border-radius:10px;background:#17120a;color:#fff;font-weight:850;white-space:nowrap}.cwh-role-testing-card{margin:28px 0;padding:24px;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,.7fr);gap:24px;border:2px solid #e1b84c;border-radius:18px;background:#fff9e8}.cwh-role-testing-card h2{margin:3px 0 8px}.cwh-role-testing-card p{color:#5e4b20;line-height:1.55}.cwh-role-testing-safety{font-weight:700}.cwh-role-testing-card form{display:grid;align-content:center;gap:10px}.cwh-role-testing-card label{font-weight:800}.cwh-role-testing-card select{width:100%;min-height:48px;padding:10px 12px;border:1px solid #a67c19;border-radius:10px;background:#fff}.cwh-role-testing-card .cwh-button{justify-content:center}@media(max-width:720px){.cwh-role-preview-banner{align-items:stretch;flex-direction:column;gap:8px}.cwh-role-preview-banner button{width:100%}.cwh-role-testing-card{grid-template-columns:1fr;padding:18px}}
.cwh-demo-banner-actions{display:flex!important;align-items:center!important;gap:9px!important}.cwh-demo-banner-actions form{margin:0!important}.cwh-demo-banner-actions>a,.cwh-demo-banner-actions button{min-height:44px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;padding:9px 16px!important;border:2px solid #2c1b00!important;border-radius:10px!important;font-weight:850!important;white-space:nowrap!important}.cwh-demo-banner-actions>a{background:#fff5c4!important;color:#2c1b00!important;text-decoration:none!important}.cwh-demo-banner-actions>a:hover,.cwh-demo-banner-actions>a:focus-visible{background:#fff!important}@media(max-width:720px){.cwh-demo-banner-actions{display:grid!important;grid-template-columns:1fr 1fr!important}.cwh-demo-banner-actions>a,.cwh-demo-banner-actions button,.cwh-demo-banner-actions form{width:100%!important}}