/* =========================================================
   Birchtech — Accessibility widget + modes
   Self-contained. Base design untouched unless a mode is active.
   ========================================================= */

/* ---------- Floating button ---------- */
.a11y-fab{position:fixed; right:22px; bottom:22px; z-index:9998; width:54px; height:54px; border-radius:50%; border:0; cursor:pointer; background:#1D7686; color:#fff; display:grid; place-items:center; box-shadow:0 10px 28px rgba(0,0,0,.28); transition:transform .25s ease, background .25s;}
.a11y-fab:hover{transform:scale(1.06); background:#13565f}
.a11y-fab:focus-visible{outline:3px solid #7fd0db; outline-offset:3px}
.a11y-fab svg{width:30px; height:30px}

/* ---------- Panel ---------- */
.a11y-panel{position:fixed; right:22px; bottom:88px; z-index:9999; width:300px; max-width:calc(100vw - 44px); background:#ffffff; color:#1f1f1f; border:1px solid #e4ebec; border-radius:14px; box-shadow:0 24px 60px rgba(16,40,44,.3); padding:18px 18px 16px; font-family:"Inter",system-ui,-apple-system,sans-serif; letter-spacing:-.01em; opacity:0; visibility:hidden; transform:translateY(12px) scale(.98); transition:opacity .22s ease, transform .22s ease, visibility .22s;}
.a11y-panel.open{opacity:1; visibility:visible; transform:translateY(0) scale(1)}
.a11y-panel h2{font-size:1.02rem; font-weight:700; margin:0 0 2px; color:#1f1f1f; letter-spacing:-.02em}
.a11y-panel .a11y-sub{font-size:.78rem; color:#5e7480; margin:0 0 14px}
.a11y-row{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 0; border-top:1px solid #eef2f3}
.a11y-row:first-of-type{border-top:0}
.a11y-row .lab{font-size:.92rem; font-weight:600; color:#27302f}
.a11y-row .lab small{display:block; font-weight:500; font-size:.74rem; color:#5e7480; margin-top:1px}
.a11y-switch{position:relative; width:46px; height:26px; flex:none; background:#cdd6d8; border-radius:20px; border:0; cursor:pointer; transition:background .2s}
.a11y-switch::after{content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; transition:transform .2s; box-shadow:0 1px 3px rgba(0,0,0,.3)}
.a11y-switch[aria-pressed="true"]{background:#1D7686}
.a11y-switch[aria-pressed="true"]::after{transform:translateX(20px)}
.a11y-switch:focus-visible{outline:3px solid #7fd0db; outline-offset:2px}
.a11y-text-ctl{display:flex; align-items:center; gap:6px}
.a11y-text-ctl button{width:34px; height:30px; border:1px solid #d3dee0; background:#fff; border-radius:8px; cursor:pointer; font-weight:700; color:#1D7686; line-height:1; display:grid; place-items:center}
.a11y-text-ctl button:hover{background:#eaf2f3}
.a11y-text-ctl button:focus-visible{outline:3px solid #7fd0db; outline-offset:2px}
.a11y-text-ctl .lvl{min-width:34px; text-align:center; font-size:.82rem; font-weight:700; color:#27302f}
.a11y-reset{margin-top:14px; width:100%; border:1px solid #d3dee0; background:#f5f8f8; color:#27302f; font-weight:600; font-size:.86rem; padding:10px; border-radius:9px; cursor:pointer; font-family:inherit}
.a11y-reset:hover{background:#eaf2f3}
.a11y-reset:focus-visible{outline:3px solid #7fd0db; outline-offset:2px}
@media(max-width:520px){.a11y-fab{right:16px; bottom:16px} .a11y-panel{right:16px; bottom:80px}}

/* panel in dark mode */
html.a11y-dark .a11y-panel{background:#202628; color:#e7eaea; border-color:#363d3f}
html.a11y-dark .a11y-panel h2{color:#f1f3f3}
html.a11y-dark .a11y-row{border-top-color:#2e3537}
html.a11y-dark .a11y-row .lab{color:#e7eaea}
html.a11y-dark .a11y-row .lab small,html.a11y-dark .a11y-panel .a11y-sub{color:#9aa8ad}
html.a11y-dark .a11y-text-ctl button{background:#2a3133; border-color:#454d4f; color:#7fd0db}
html.a11y-dark .a11y-reset{background:#2a3133; border-color:#454d4f; color:#e7eaea}

/* MODE: Reduce motion */
html.a11y-motion *,html.a11y-motion *::before,html.a11y-motion *::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
html.a11y-motion .reveal{opacity:1 !important; transform:none !important}

/* MODE: Larger text */
html.a11y-text-1{font-size:112.5%}
html.a11y-text-2{font-size:125%}
html.a11y-text-1 body{font-size:1.12rem}
html.a11y-text-2 body{font-size:1.18rem}


/* ===== DARK: variables ===== */
html.a11y-dark{color-scheme:dark;--bg:#16191a;--bg-soft:#1f2527;--bg-tint:#252d2f;--line:#363d3f;--line-2:#454d4f;--muted:#aab8bd;--muted-2:#8c9a9f;}
html.a11y-dark body{background:#16191a;color:#e7eaea}
html.a11y-dark h1,html.a11y-dark h2,html.a11y-dark h3,html.a11y-dark h4,html.a11y-dark h5,html.a11y-dark h6{color:#f1f3f3}
html.a11y-dark p,html.a11y-dark li,html.a11y-dark dd,html.a11y-dark dt,html.a11y-dark figcaption,html.a11y-dark blockquote,html.a11y-dark .hero-sub,html.a11y-dark .lead,html.a11y-dark .apply-tag,html.a11y-dark .eyebrow{color:#cdd5d6}

/* ===== DARK: solid + gradient light surfaces -> dark ===== */
html.a11y-dark .section--soft,
html.a11y-dark .section--tint,
html.a11y-dark .dropdown,
html.a11y-dark .mega-child,
html.a11y-dark .ms-node,
html.a11y-dark .ms-card,
html.a11y-dark .ms-sec .ms-card.is-active,
html.a11y-dark .card,
html.a11y-dark .card .ico,
html.a11y-dark .inv-card,
html.a11y-dark .lhero,
html.a11y-dark .tmem-sec,
html.a11y-dark .tmem-photo,
html.a11y-dark .roles,
html.a11y-dark .apply,
html.a11y-dark .apply-form,
html.a11y-dark .catab,
html.a11y-dark .catab-media,
html.a11y-dark .dcard,
html.a11y-dark .dcard-thumb,
html.a11y-dark .wfeat,
html.a11y-dark .wf-ico,
html.a11y-dark .scard,
html.a11y-dark .scard-media.contain,
html.a11y-dark .scard-ico,
html.a11y-dark .mcard-media,
html.a11y-dark .rsb-ico,
html.a11y-dark .mc2,
html.a11y-dark .mc2-img,
html.a11y-dark .rs-cta-memb a,
html.a11y-dark .rs-cta-form,
html.a11y-dark .rs-cta-form input,
html.a11y-dark .rs-cta-form textarea,
html.a11y-dark .ca-chem,
html.a11y-dark .ca-chem-fig,
html.a11y-dark .chemflow,
html.a11y-dark .cf-n,
html.a11y-dark .hero-visual,
html.a11y-dark .tm-photo,
html.a11y-dark .stat-panel,
html.a11y-dark .inv-section,
html.a11y-dark .tick-pill,
html.a11y-dark .quote-by img,
html.a11y-dark .checklist .ck,
html.a11y-dark .media-frame,
html.a11y-dark .person .ph,
html.a11y-dark .person .av,
html.a11y-dark .leader-photo,
html.a11y-dark .leader-photo .av,
html.a11y-dark .cta-split .right,
html.a11y-dark .field input,
html.a11y-dark .field select,
html.a11y-dark .field textarea,
html.a11y-dark .info-card,
html.a11y-dark .info-card .ico,
html.a11y-dark .tl-item,
html.a11y-dark .job,
html.a11y-dark .pill,
html.a11y-dark .nav-menu,
html.a11y-dark .section--sep,
html.a11y-dark .soltab-btn,
html.a11y-dark .hero-tag,
html.a11y-dark .datacard,
html.a11y-dark .stat-chip,
html.a11y-dark .member,
html.a11y-dark .member-plate,
html.a11y-dark .cinfo-card,
html.a11y-dark .cinfo-ico,
html.a11y-dark .art-page,
html.a11y-dark .art-row,
html.a11y-dark .art-thumb,
html.a11y-dark .art-cat,
html.a11y-dark .side-card,
html.a11y-dark .side-search input,
html.a11y-dark .side-follow a,
html.a11y-dark .side-recent img,
html.a11y-dark .side-tags span,
html.a11y-dark .iu-section,
html.a11y-dark .iu-search input,
html.a11y-dark .iu-chip,
html.a11y-dark .iu-feat-card,
html.a11y-dark .iu-side-card,
html.a11y-dark .iu-side-tag,
html.a11y-dark .iu-section .iu-card,
html.a11y-dark .iu-card-thumb,
html.a11y-dark .iu-card-thumb.iu-webinar,
html.a11y-dark .iu-card-thumb.iu-regulatory,
html.a11y-dark .iu-card-thumb.iu-industry,
html.a11y-dark .iu-pg,
html.a11y-dark .iu-card-thumb.has-img,
html.a11y-dark .smart-card,
html.a11y-dark .smart-ico,
html.a11y-dark .cw-quote,
html.a11y-dark .cw-member,
html.a11y-dark .wts-frame,
html.a11y-dark .wts-ico,
html.a11y-dark .integ-card,
html.a11y-dark .flow-row span,
html.a11y-dark .hww-card,
html.a11y-dark .hww-img,
html.a11y-dark .prod-panel,
html.a11y-dark .prod-stat,
html.a11y-dark .cont-frame,
html.a11y-dark .wtype-card,
html.a11y-dark .wtype-img,
html.a11y-dark .reason-ico,
html.a11y-dark .eng-figure,
html.a11y-dark .spec-grid,
html.a11y-dark .spec-ico,
html.a11y-dark .hww-tabs .soltab-btn,
html.a11y-dark .hww-stage,
html.a11y-dark .hww-panel-img,
html.a11y-dark .spec-card:not(.spec-next):hover,
html.a11y-dark .resin-dl,
html.a11y-dark .sc-img,
html.a11y-dark .crit-sec,
html.a11y-dark .crit-card,
html.a11y-dark .chal-ico,
html.a11y-dark .life-card,
html.a11y-dark .prodx-feats,
html.a11y-dark .prodx-fico,
html.a11y-dark .prodx-apps,
html.a11y-dark .prodx-pill,
html.a11y-dark .iu-res-pacer,
html.a11y-dark .iu-res-tag,
html.a11y-dark .mission-quote,
html.a11y-dark .mission-badge,
html.a11y-dark .ms-sec .ms-card,
html.a11y-dark .resin--sac .resin-dl,
html.a11y-dark .resin--sba .resin-dl,
html.a11y-dark .resin--mb .resin-dl,
html.a11y-dark .drop-link{background-color:#23292b;background-image:none;border-color:#363d3f}

/* ===== DARK: textured bands keep image, darken base ===== */
html.a11y-dark .iu-links,
html.a11y-dark .wts-sec,
html.a11y-dark .eng-sec,
html.a11y-dark .cwork-sec{background-color:#171b1c}

/* ===== DARK: dark text -> light ===== */
html.a11y-dark .btn-ghost,
html.a11y-dark .nav-link,
html.a11y-dark .drop-link .t,
html.a11y-dark .mega-parent .t,
html.a11y-dark .mega-child .t,
html.a11y-dark .ms-yr,
html.a11y-dark .ms-card h3,
html.a11y-dark .ms-panel h3,
html.a11y-dark .cv-item h4,
html.a11y-dark .tech-intro-head h2,
html.a11y-dark .tech-intro-body p strong,
html.a11y-dark .tech-tile .t,
html.a11y-dark .inv-card .ml,
html.a11y-dark .hero-sub strong,
html.a11y-dark .hero-cred b,
html.a11y-dark .lhs b,
html.a11y-dark .tmem-body h3,
html.a11y-dark .role-id h3,
html.a11y-dark .catab,
html.a11y-dark .rs-vid-cap b,
html.a11y-dark .rs-cta-form,
html.a11y-dark .rs-cta-form input,
html.a11y-dark .rs-cta-form textarea,
html.a11y-dark .cf-head b,
html.a11y-dark .cf-name,
html.a11y-dark .iu-more.dark,
html.a11y-dark .iu-links h4,
html.a11y-dark .team-intro strong,
html.a11y-dark .tick-pill b,
html.a11y-dark .leader-info p,
html.a11y-dark .field input,
html.a11y-dark .field select,
html.a11y-dark .field textarea,
html.a11y-dark .prose p,
html.a11y-dark .prose li,
html.a11y-dark .soltab-btn,
html.a11y-dark .hero-tag-txt strong,
html.a11y-dark .datacard h4,
html.a11y-dark .member-body strong,
html.a11y-dark .cinfo-card h4,
html.a11y-dark .art-row h3,
html.a11y-dark .side-card h4,
html.a11y-dark .side-about strong,
html.a11y-dark .side-follow a,
html.a11y-dark .side-recent b,
html.a11y-dark .iu-search input,
html.a11y-dark .iu-side-card>strong,
html.a11y-dark .iu-side-link,
html.a11y-dark .iu-card h3,
html.a11y-dark .iu-pg,
html.a11y-dark .smart-card h4,
html.a11y-dark .cw-quote blockquote,
html.a11y-dark .cw-quote-by strong,
html.a11y-dark .wts-card h4,
html.a11y-dark .wts-card p strong,
html.a11y-dark .pilot-step-body h4,
html.a11y-dark .integ-card h4,
html.a11y-dark .integ-tag,
html.a11y-dark .flow-title,
html.a11y-dark .flow-row span,
html.a11y-dark .hww-body h4,
html.a11y-dark .prod-main h3,
html.a11y-dark .prod-feats strong,
html.a11y-dark .prod-apps b,
html.a11y-dark .prod-step strong,
html.a11y-dark .cont-txt strong,
html.a11y-dark .wtype-body h3,
html.a11y-dark .reason-body h4,
html.a11y-dark .eng-meta b,
html.a11y-dark .spec-card h4,
html.a11y-dark .hww-panel-txt h3,
html.a11y-dark .resin-card h4,
html.a11y-dark .sc-txt strong,
html.a11y-dark .crit-card h4,
html.a11y-dark .life-card h4,
html.a11y-dark .prodx-feat h4,
html.a11y-dark .cip-step h4,
html.a11y-dark .iu-res-pacer h3,
html.a11y-dark .iu-pacer-row,
html.a11y-dark .mission-quote,
html.a11y-dark .resin--sac .resin-tag,
html.a11y-dark .resin--sac .resin-dl{color:#e9eded}
html.a11y-dark input,html.a11y-dark textarea,html.a11y-dark select{background-color:#1c2224!important;color:#e7eaea!important;border-color:#454d4f!important}
html.a11y-dark input::placeholder,html.a11y-dark textarea::placeholder{color:#8c9a9f}
html.a11y-dark .catab.is-active{background:var(--teal);color:#fff}

/* ===== DARK: header / nav ===== */
html.a11y-dark .site-header,html.a11y-dark .art-page .site-header{background:rgba(18,21,22,.95);border-bottom-color:#2a3032}
html.a11y-dark .nav-toggle span{background:#e7eaea}
html.a11y-dark .chev{color:#cdd5d6}
html.a11y-dark .nav-link.is-current,html.a11y-dark .nav-link.is-current-parent{color:#7fd0db}
/* dropdown hover (lighter than card so it stands out) */
html.a11y-dark .drop-link:hover,html.a11y-dark .mega-child:hover{background:#30393b}
html.a11y-dark .mega-child:hover .t,html.a11y-dark .drop-link:hover .t{color:#9fe0ea}
/* current page highlight */
html.a11y-dark .drop-link.is-current,html.a11y-dark .mega-parent.is-current,html.a11y-dark .mega-child.is-current{background:rgba(127,208,219,.15)}
html.a11y-dark .drop-link.is-current .t,html.a11y-dark .mega-parent.is-current .t,html.a11y-dark .mega-child.is-current .t{color:#9fe0ea}
/* accents */
html.a11y-dark .accent{color:#7fd0db}
html.a11y-dark .accent--air{color:#79c2b4}
html.a11y-dark .accent--water{color:#5cc3df}

/* keep media natural */
html.a11y-dark img,html.a11y-dark video,html.a11y-dark .os-svg{filter:none}

/* dark: article detail text that uses var(--ink) directly */
html.a11y-dark .art-prose>p:first-of-type,
html.a11y-dark .art-callout{color:#eef2f2}
html.a11y-dark .art-prose a{color:#5cc3df}

/* dark: desktop nav bar should blend with the header, not show as a lighter box */
html.a11y-dark .nav-menu{background:transparent}
@media(max-width:860px){
  html.a11y-dark .nav-menu{background:#16191a}
}

/* DARK: bio fade matches dark surface (no white shade) */
html.a11y-dark .tmem-bio::after{background:linear-gradient(to bottom,rgba(35,41,43,0),#23292b)}

/* DARK: header logo -> light version (dark logo is invisible on the dark header) */
html.a11y-dark .site-header .brand img{content:url("/assets/img/logo-light.svg")}