/* DocSana brand tokens — sampled from the final logo (Option 2: "many paths, one destination").
   EVERY brand color lives here as a CSS variable. Nothing is hard-coded anywhere else.
   To rebrand: edit the values below (and swap the logo files in /assets). */
/* Guard: never let page content widen the layout viewport on small screens.
   (Over-wide headers/tabbars used to push fixed elements — back/forward
   buttons, chat FAB, hamburger — off-screen on mobile.) */
html, body { overflow-x: clip; }
/* Visually-hidden text: a real label for text readers / assistive tech
   without changing the visual design (eval fix batch A.1, 2026-10-26). */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:root {
  /* Logo palette (sampled 2026-10-02) */
  --brand-primary: #005264;      /* deep teal — center dot; primary buttons */
  --brand-primary-dark: #003f4d; /* hover/active state */
  --brand-ink: #415361;         /* dark slate — wordmark, headings */
  --brand-teal: #77aeab;        /* path arm */
  --brand-sage: #84ac8a;        /* path arm */
  --brand-plum: #895182;        /* path arm */
  --brand-amber: #eaa94d;       /* path arm */
  --brand-slate: #658296;       /* path arm */

  /* UI neutrals (calm, warm) */
  --bg: #f4f6f5;
  --card: #ffffff;
  --border: #dce3e1;
  --text: #1f2e33;
  --muted: #4a5d60;
  --faint: #eef3f2;

  /* Tints derived from the palette */
  --tint-teal: #dcebea;
  --tint-amber: #fce8d6;
  --tint-amber-text: #8a3a05;
  --tint-green-text: #0a3f3b;

  /* Logo assets (swappable) */
  --logo-header: url('/assets/docsana-logo-horizontal.webp');
  --logo-stacked: url('/assets/docsana-logo-final.webp');
  --logo-icon: url('/assets/docsana-icon.webp');

  /* Type + shape */
  --font: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;
}

/* ---------- sticky bottom tab bar (mobile; replaces hamburger) ---------- */
.tabbar { display: none; }
@media (max-width: 900px) {
  header.site .header-in > nav.main { display: none; }
  header.site .header-in > .btn-outline { display: inline-block; margin-left: auto; padding: 8px 14px; font-size: 13px; }
  .tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: var(--card); border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .tabbar a {
    flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; min-height: 62px; padding: 8px 4px; text-align: center;
    font-size: 12px; font-weight: 700; color: var(--text); text-decoration: none;
  }
  /* 28px = Brad's frozen tab-bar spec (2026-10-11): the frozen copies carry
     width="28" attributes, and this rule silently overrode them to 22px on
     every brand.css page — icons shrank on navigation (Bug 4, 2026-10-14). */
  .tabbar a svg { width: 28px; height: 28px; flex: 0 0 auto; }
  .tabbar a.active { color: var(--brand-primary); }
  /* Clearance for the fixed tab bar INCLUDING its protruding center
     logo (the bar's border box alone under-measures by ~10px, which
     left footers/CTAs tucked under the logo — nightly QA 2026-10-14). */
  body { padding-bottom: 96px; }
}
/* Narrow phones: the header "Provider sign in" pill doesn't fit next to
   logo + AI button + search + hamburger (it pushed the hamburger ~50px
   off-screen, which widened the layout viewport on iOS and clipped fixed
   UI like the chat dialog). Provider sign-in stays one tap away in the
   hamburger menu and the bottom tab bar. */
@media (max-width: 640px) {
  header.site .header-in > .btn-outline { display: none; }
}

/* Verified badge — matches FindBestDoc */
.verified-badge{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:4px 10px 4px 7px;border:1px solid #c8addb;border-radius:9px;background:#f2eaf8;color:#561e78;font-size:.8rem;font-weight:500;white-space:nowrap}
.verified-badge .verified-shield{width:18px;height:20px;flex:0 0 18px;color:#6f32a1}
.vnote{display:inline-block;position:relative;font-weight:500;margin-left:6px;vertical-align:middle}
.vnote summary{display:inline;cursor:pointer;font-size:11px;text-decoration:underline;list-style:none;color:#561e78;opacity:.85}
.vnote summary::-webkit-details-marker{display:none}
.vnote .vpop{position:absolute;top:calc(100% + 6px);left:0;z-index:60;min-width:210px;max-width:250px;background:#fff;color:#233b3d;border:1px solid #dfe7e7;border-radius:10px;padding:10px 12px;font-size:13px;line-height:1.5;box-shadow:0 8px 24px rgba(0,0,0,.14);font-weight:400;text-align:left;white-space:normal}
.vnote .vpop a{color:#0b6e6b;font-weight:600}

/* Floating back/forward history buttons, bottom-right above the tab bar */
.hist-float{position:fixed;right:14px;bottom:88px;z-index:80;display:flex;gap:8px}
.hist-float button{width:46px;height:46px;border-radius:50%;border:1px solid var(--border);background:var(--card);color:var(--text);font-size:22px;font-weight:500;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0 0 3px;box-shadow:0 4px 14px rgba(0,0,0,.16)}
.hist-float button:active{background:var(--faint)}
@media(min-width:641px){.hist-float{bottom:24px}}

/* Back button for inner pages (Brad 2026-10-07: every inner page gets one) */
.back-btn{background:none;border:none;cursor:pointer;padding:8px;margin-left:-8px;color:var(--brand-ink,#0b3f3c);display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border-radius:50%}
.back-btn:active{background:rgba(0,0,0,.06)}

/* Share component — elegant icon circles with real brand glyphs.
   One component everywhere (.dshare): white 44px circles, soft ring +
   shadow, brand glyph in its brand color, hover lift + deepened glyph. */
.share-block { margin:30px 0; }
.share-card { background:var(--card, #fff); border:1px solid var(--border, #e5e7eb); border-radius:16px; padding:24px 22px; }
.share-card .share-label { display:block; font-size:16px; font-weight:700; color:var(--brand-ink, #0b3f3c); margin-bottom:16px; }
.dshare { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.dshare-lbl { font-size:14.5px; font-weight:600; color:var(--muted, #4a6660); margin-right:2px; }
.dshare-btn { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; min-width:44px; min-height:44px; border-radius:50%; background:#fff; border:1px solid var(--border, #dfe7e5); box-shadow:0 1px 3px rgba(11,63,60,.10), 0 3px 10px rgba(11,63,60,.06); cursor:pointer; text-decoration:none; padding:0; margin:0; line-height:0; -webkit-appearance:none; appearance:none; transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.dshare-btn svg { display:block; width:20px; height:20px; transition:filter .16s ease; }
.dshare-btn:hover { transform:translateY(-2px); border-color:#b9cfcb; box-shadow:0 4px 14px rgba(11,63,60,.15); }
.dshare-btn:hover svg { filter:brightness(.85) saturate(1.15); }
.dshare-btn:active { transform:scale(.94); }
.dshare-btn:focus-visible { outline:2px solid var(--brand-primary, #0b6e6b); outline-offset:2px; }
.dshare-toast { font-size:13.5px; font-weight:600; color:#0b6e4f; opacity:0; transform:translateX(-4px); transition:opacity .2s ease, transform .2s ease; pointer-events:none; }
.dshare-toast.on { opacity:1; transform:none; }

/* Provider Q&A (public .qa-block rendered by assets/qa.js) */
.qa-block { margin: 30px 0; }
.qa-card { background: var(--card, #fff); border: 1px solid var(--border, #e5e7eb); border-radius: 16px; padding: 18px 20px; }
.qa-card h2 { font-size: 20px; font-weight: 600; color: var(--brand-ink, #0b3f3c); margin: 0 0 6px; }
.qa-note { font-size: 13.5px; color: var(--muted, #4a5d60); margin: 0 0 6px; }
.qa-item { border-top: 1px solid var(--border, #e5e7eb); padding: 16px 0; }
.qa-item:last-child { padding-bottom: 4px; }
.qa-q { font-weight: 600; font-size: 16px; color: var(--text, #1f2e33); margin-bottom: 6px; }
.qa-a { font-size: 15px; line-height: 1.55; color: var(--text, #1f2e33); white-space: pre-line; }
.qa-meta { margin-top: 8px; font-size: 13.5px; color: var(--muted, #4a5d60); }
.qa-meta a { color: var(--brand-primary, #005264); font-weight: 600; text-decoration: none; }
.qa-meta a:hover { text-decoration: underline; }
.qa-report { font-size: 12.5px; color: var(--muted, #4a5d60); text-decoration: underline; background: none; border: none; cursor: pointer; padding: 6px 0 6px 8px; margin: 0; font-family: inherit; }
.qa-report-form { margin-top: 8px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.qa-report-form input { flex: 1; min-width: 160px; font-size: 14px; padding: 10px 12px; border: 1px solid var(--border, #e5e7eb); border-radius: 8px; font-family: inherit; color: var(--text, #1f2e33); }
.qa-report-form button { font-size: 13px; font-weight: 600; padding: 10px 14px; min-height: 44px; border-radius: 8px; border: none; background: var(--brand-primary, #005264); color: #fff; cursor: pointer; font-family: inherit; }
.qa-thanks { font-size: 13.5px; color: var(--muted, #4a5d60); font-style: italic; }
.qa-provider-link { display: inline-block; font-size: 14px; color: var(--muted, #4a5d60); text-decoration: none; margin: 30px 0; }
.qa-provider-link:hover { color: var(--brand-primary, #005264); text-decoration: underline; }
header.site.ds-hdr, header.site.ds-hdr *, .search-overlay.ds-ovl, .search-overlay.ds-ovl * { box-sizing: border-box; }
/* ---------- Canonical site header (Option J, unified 2026-10-14) ----------
   One header for the whole main site. Rules are scoped to header.site.ds-hdr
   (and .search-overlay.ds-ovl) so they can never leak into Connect, the
   provider dashboard, or page content. Values mirror the home page header. */
header.site.ds-hdr { background:#ffffff; border-bottom:1px solid #cbded9; position:sticky; top:0; z-index:50; }
header.site.ds-hdr .header-in { width:min(1180px,calc(100% - 40px)); margin:0 auto; min-height:72px; display:flex; align-items:center; gap:14px; padding:0; }
/* Nightly QA 2026-10-18: SSR templates (functions/lib/site.js) add a generic
   .header-in{padding:14px 20px} rule that static pages don't carry. The extra
   40px pushed the hamburger 22px off-screen at 390px (measured right edge
   412px in a 390px viewport). padding:0 above restores the canonical header;
   the narrow-phone rules below shrink logo/icons/gaps so the row also fits
   360px-class phones. */
header.site.ds-hdr .nav-drop { position:relative; }
header.site.ds-hdr .nav-drop > a { display:inline-flex; align-items:center; gap:5px; }
header.site.ds-hdr .nav-drop > a svg { transition:transform .2s; }
header.site.ds-hdr .nav-drop.open > a svg { transform:rotate(180deg); }
header.site.ds-hdr .mega { position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(10px); display:grid; grid-template-columns:repeat(4,minmax(150px,1fr)); gap:8px 28px; background:#fff; border:1px solid #cbded9; border-radius:16px; box-shadow:0 24px 60px rgba(0,35,35,.16); padding:22px 26px; min-width:660px; opacity:0; visibility:hidden; transition:opacity .18s, transform .18s, visibility .18s; z-index:80; }
header.site.ds-hdr .nav-drop.open .mega, header.site.ds-hdr .nav-drop:hover .mega, header.site.ds-hdr .nav-drop:focus-within .mega { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
header.site.ds-hdr .mega-col { display:flex; flex-direction:column; gap:2px; }
header.site.ds-hdr .mega-h { font-size:13px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#102c3a !important; margin-bottom:8px; }
header.site.ds-hdr span.mega-h { cursor:default; }
header.site.ds-hdr .mega-col a:not(.mega-h) { font-size:14.5px; padding:6px 0; white-space:nowrap; }
header.site.ds-hdr .header-spacer { flex:1; }
header.site.ds-hdr .hamburger { display:none; background:none; border:1px solid #cbded9; border-radius:9px; cursor:pointer; padding:10px; margin-left:2px; }
header.site.ds-hdr .hamburger span { display:block; width:22px; height:2px; background:#102c3a; border-radius:2px; margin:5px 0; transition:transform .2s, opacity .2s; }
header.site.ds-hdr .hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
header.site.ds-hdr .hamburger.open span:nth-child(2) { opacity:0; }
header.site.ds-hdr .hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
header.site.ds-hdr .drawer-backdrop { display:none; position:fixed; inset:0; background:rgba(15,35,32,.5); z-index:150; }
header.site.ds-hdr .drawer-backdrop.open { display:block; animation:drawerFade .25s ease; }
header.site.ds-hdr .nav-drawer { position:fixed; top:0; left:0; bottom:0; width:min(340px,85vw); background:#fff; z-index:151; transform:translateX(-105%); transition:transform .28s ease; display:flex; flex-direction:column; box-shadow:8px 0 32px rgba(0,0,0,.18); }
header.site.ds-hdr .nav-drawer.open { transform:translateX(0); }
header.site.ds-hdr .drawer-head { display:flex; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid #cbded9; }
header.site.ds-hdr .drawer-back { background:none; border:none; cursor:pointer; padding:10px; min-width:44px; min-height:44px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:#102c3a; }
header.site.ds-hdr .drawer-back:active { background:#eef3f2; }
header.site.ds-hdr .drawer-logo { flex:1; text-align:center; }
header.site.ds-hdr .drawer-logo img { height:36px; width:auto; display:inline-block; }
header.site.ds-hdr .drawer-spacer { width:44px; flex:0 0 44px; }
header.site.ds-hdr .drawer-items { overflow-y:auto; padding:6px 0 24px; -webkit-overflow-scrolling:touch; }
header.site.ds-hdr .drawer-items a, header.site.ds-hdr .drawer-items button.drawer-link { display:flex; align-items:center; gap:14px; width:100%; padding:16px 20px; font-size:17px; font-weight:500; color:#102c3a; text-decoration:none; background:none; border:none; border-bottom:1px solid #cbded9; cursor:pointer; text-align:left; font-family:inherit; }
header.site.ds-hdr .drawer-items a:active, header.site.ds-hdr .drawer-items button.drawer-link:active { background:#eef3f2; }
header.site.ds-hdr .drawer-items a svg, header.site.ds-hdr .drawer-items button.drawer-link svg { width:22px; height:22px; flex:0 0 22px; opacity:.7; }
header.site.ds-hdr .drawer-items a .chev, header.site.ds-hdr .drawer-items button.drawer-link .chev { margin-left:auto; flex:0 0 18px; opacity:.35; }
header.site.ds-hdr .drawer-items a:last-child { border-bottom:none; }
header.site.ds-hdr .drawer-group .drawer-sub { display:none; background:#eef3f2; }
header.site.ds-hdr .drawer-group.open .drawer-sub { display:block; }
header.site.ds-hdr .drawer-group .drawer-sub a { padding:13px 20px 13px 56px; font-size:15.5px; border-bottom:1px solid #cbded9; }
header.site.ds-hdr .drawer-group.open #drawerResBtn .chev { transform:rotate(90deg); }
header.site.ds-hdr .drawer-group #drawerResBtn .chev { transition:transform .2s; }
.search-overlay.ds-ovl[hidden] { display:none; }
.search-overlay.ds-ovl { position:fixed; top:0; left:0; right:0; z-index:95; background:#ffffff; border-bottom:1px solid #cbded9; padding:calc(10px + env(safe-area-inset-top)) 12px 12px; box-shadow:0 10px 30px rgba(0,0,0,.12); }
.search-overlay.ds-ovl form { display:flex; gap:8px; align-items:center; max-width:720px; margin:0 auto; }
.search-overlay.ds-ovl input { flex:1; min-width:0; font-size:16px; padding:12px 14px; border:1.5px solid #087f78; border-radius:12px; font-family:inherit; background:#f7fbfa; color:#102c3a; }
@media (max-width:640px) {
.search-overlay.ds-ovl .ov-go { background:#075f5c;color:#fff;border:none;border-radius:999px;padding:10px 20px;font-weight:600;font-size:15px;cursor:pointer;flex-shrink:0;font-family:inherit }
.search-overlay.ds-ovl { position:fixed; top:0; left:0; right:0; z-index:95; background:#ffffff; border-bottom:1px solid #cbded9; padding:calc(10px + env(safe-area-inset-top)) 12px 12px; box-shadow:0 10px 30px rgba(0,0,0,.12); }
.search-overlay.ds-ovl form { display:flex; gap:8px; align-items:center; }
.search-overlay.ds-ovl svg.mag { flex:0 0 auto; color:#075f5c; }
.search-overlay.ds-ovl input { flex:1; min-width:0; font-size:16px; padding:12px 14px; border:1.5px solid #087f78; border-radius:12px; font-family:inherit; background:#f7fbfa; color:#102c3a; }
.search-overlay.ds-ovl input:focus { outline:none; box-shadow:0 0 0 3px rgba(11,110,107,.15); }
.search-overlay.ds-ovl .ov-close { flex:0 0 auto; width:44px; height:44px; border-radius:50%; border:1px solid #cbded9; background:#ffffff; color:#102c3a; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
}
@media (max-width: 960px) {
header.site.ds-hdr .hamburger { display:block; }
}
@media (max-width: 640px) {
header.site.ds-hdr .header-in { width:calc(100% - 28px); min-height:60px; gap:8px; }
header.site.ds-hdr .brand-j img { height:44px !important; }
header.site.ds-hdr .icon-btn-j { width:38px; height:38px; }
}
/* Narrow phones: keep all 5 tab labels on one line (nightly QA 2026-10-18:
   "For patient" truncated to "For patie…" on its own page at 390px). */
@media (max-width: 400px) {
  .tabbar a { font-size:11px; padding-left:2px; padding-right:2px; }
}
header.site.ds-hdr .brand-j { display:flex; flex-direction:column; text-decoration:none; line-height:1.2; flex-shrink:0; gap:1px; }
header.site.ds-hdr .brand-j .brand-wm { font-size:28px; font-weight:700; color:#102c3a; letter-spacing:-.5px; }
header.site.ds-hdr .brand-j .brand-wm span { color:#075f5c; font-size:15px; vertical-align:super; }
header.site.ds-hdr .brand-j .brand-sub { font-size:11px; color:#075f5c; font-weight:600; background:#e3f0ef; border-radius:999px; padding:3px 12px; display:inline-block; width:fit-content; margin-top:3px; }
header.site.ds-hdr .main-j { display:flex; gap:26px; align-items:center; margin-left:96px; margin-right:auto; }
header.site.ds-hdr .main-j a { text-decoration:none; color:#102c3a; font-weight:600; font-size:15px; padding:6px 0; position:relative; white-space:nowrap; }
header.site.ds-hdr .main-j a.active { color:#075f5c; }
header.site.ds-hdr .main-j a.active::after { content:''; position:absolute; bottom:-19px; left:0; right:0; height:3px; background:#075f5c; border-radius:2px; }
header.site.ds-hdr .main-j .nav-drop { position:relative; }
header.site.ds-hdr .mega-new { width: min(1120px, calc(100vw - 40px)) !important; padding: 0 !important; border-radius: 18px !important; overflow: hidden; display: block !important; grid-template-columns: none !important; }
header.site.ds-hdr .mega-new .mega-main { display: flex; gap: 0; }
header.site.ds-hdr .mega-new .mega-main .mega-col { flex: 1 1 0; min-width: 0; }
header.site.ds-hdr .mega-new .mega-side { flex: 0 0 250px; }
header.site.ds-hdr .mega-new .mega-col { padding: 24px 22px; border-right: 1px solid #cbded9; }
header.site.ds-hdr .mega-new .mega-kicker { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #0e6b6b; margin-bottom: 4px; }
header.site.ds-hdr .mega-new a.mega-kicker { font-size: 17px; letter-spacing: 0; text-transform: none; text-decoration: none; margin-bottom: 2px; }
header.site.ds-hdr .mega-new a.mega-kicker:hover { text-decoration: underline; }
header.site.ds-hdr .mega-new .mega-desc { display: block; font-size: 12.5px; color: #4c6771; margin-bottom: 14px; line-height: 1.4; }
header.site.ds-hdr .mega-new .mega-col a { display: block; font-size: 14.5px; color: #102c3a; text-decoration: none; padding: 5px 0; font-weight: 500; }
header.site.ds-hdr .mega-new .mega-col a:hover { color: #0e6b6b; }
header.site.ds-hdr .mega-new .mega-all { color: #0e6b6b !important; font-weight: 700 !important; margin-top: 8px; }
header.site.ds-hdr .mega-new .mega-side { background: #f0f5f4; padding: 24px 22px; display: flex; flex-direction: column; align-items: flex-start; }
header.site.ds-hdr .mega-new .mega-side-icon { width: 40px; height: 40px; background: #fff; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 12px; }
header.site.ds-hdr .mega-new .mega-side strong { font-size: 16px; color: #0b3d39; }
header.site.ds-hdr .mega-new .mega-side p { font-size: 13.5px; color: #4c6771; margin: 8px 0 16px; line-height: 1.5; }
header.site.ds-hdr .btn-mega { display: inline-block; background: #0b3d39; color: #fff !important; font-weight: 700; font-size: 14.5px; border-radius: 999px; padding: 11px 24px; text-decoration: none; margin-bottom: 12px; }
header.site.ds-hdr .btn-mega:hover { background: #0e6b6b; }
header.site.ds-hdr .mega-new .mega-link { font-size: 13.5px; color: #0e6b6b; font-weight: 600; text-decoration: underline; }
header.site.ds-hdr .mega-new .mega-crisis { display: flex; justify-content: space-between; align-items: center; gap: 16px; background: #fef6e8; border-top: 1px solid #f0e0c0; padding: 14px 24px; font-size: 13.5px; color: #5f4a1a; flex-wrap: wrap; }
header.site.ds-hdr .mega-new .mega-crisis a { color: #5f4a1a; }
/* Resources mega-menu column heads: lime chip-rectangles (Brad, 2026-10-30).
   Head block = kicker + desc wrapped in one <a class="mega-head"> hub link. */
header.site.ds-hdr .mega-new .mega-col a.mega-head { display: flex; flex-direction: column; justify-content: center; white-space: normal; min-height: 86px; background: #ecfccb; border: 1px solid #84cc16; border-radius: 11px; padding: 10px 14px 11px; margin: 0 0 14px; text-decoration: none; transition: background .15s ease, border-color .15s ease; }
header.site.ds-hdr .mega-new .mega-head .mega-kicker { display: block; font-size: 17px; font-weight: 700; letter-spacing: 0; text-transform: none; color: #102c3a; margin: 0 0 2px; }
header.site.ds-hdr .mega-new .mega-head .mega-desc { display: block; font-size: 12.5px; line-height: 1.4; color: #4c6771; margin: 0; }
header.site.ds-hdr .mega-new .mega-col a.mega-head:hover, header.site.ds-hdr .mega-new .mega-col a.mega-head:focus-visible { background: #a3e635; border-color: #65a30d; }
header.site.ds-hdr .mega-new .mega-head:hover .mega-desc, header.site.ds-hdr .mega-new .mega-head:focus-visible .mega-desc { color: #1a2e05; }
/* Guard (2026-10-30): nav dropdown fragments belong ONLY inside the site
   header. All .mega styling is header-scoped, so a fragment dropped into page
   content renders unstyled in-flow — this garbled the /resources/ topic bar.
   If a build transform ever re-inserts one into <main>, it must never render. */
main .nav-drop, main .mega { display: none !important; }
@media (max-width: 900px) {
header.site.ds-hdr .mega-new .mega-main { grid-template-columns: 1fr 1fr; }
header.site.ds-hdr .mega-new .mega-side { grid-column: 1 / -1; border-top: 1px solid #cbded9; }
}
header.site.ds-hdr .icon-btn-j { position:relative; width:42px; height:42px; border-radius:50%; border:1.5px solid #cbded9; background:#fff; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; color:#102c3a; flex-shrink:0; }
header.site.ds-hdr .icon-btn-j:hover { border-color:#075f5c; }
header.site.ds-hdr .icon-btn-j .count-badge { position:absolute; top:-5px; right:-5px; background:#e0447c; color:#fff; font-size:10px; font-weight:700; min-width:19px; height:19px; border-radius:10px; display:flex; align-items:center; justify-content:center; padding:0 5px; border:2px solid #fff; }
header.site.ds-hdr .signin-j { font-weight:600; font-size:15px; color:#102c3a; text-decoration:none; white-space:nowrap; }
header.site.ds-hdr .signin-j:hover { color:#075f5c; }
header.site.ds-hdr .cta-j { background:#0b3d39; color:#fff; font-weight:700; font-size:15px; border-radius:999px; padding:12px 26px; text-decoration:none; white-space:nowrap; flex-shrink:0; }
header.site.ds-hdr .cta-j:hover { background:#075f5c; }
/* Narrow phones ≤400px (390px-class): explicit spec breakpoint from the
   2026-10-16 header-overflow diagnosis (hidden_files/qa/
   2026-10-16-header-390-diagnosis.md). Header row math at 390px:
   brand 132 + icons 3×40 + hamburger 46 + gaps 5×8 = 338px ≤ 362px
   available. Nothing removed or hidden; >400px untouched.
   PLACEMENT MATTERS: this block sits AFTER the base .icon-btn-j rule
   above on purpose — at equal specificity the later rule wins, and the
   ≤640px block's 38px icon size is dead for exactly that reason (the
   base 42px rule follows it in this file). The logo keeps !important
   because the <img> carries an inline height style. */
@media (max-width: 400px) {
header.site.ds-hdr .header-in { gap:8px; }
header.site.ds-hdr .brand-j img { height:44px !important; }
header.site.ds-hdr .icon-btn-j { width:40px; height:40px; }
}
@media (max-width:1100px) {
header.site.ds-hdr .main-j { gap:18px; }
header.site.ds-hdr .main-j a { font-size:14px; }
}
@media (max-width:900px) {
header.site.ds-hdr .main-j, header.site.ds-hdr .signin-j, header.site.ds-hdr .cta-j { display:none; }
}
@keyframes drawerFade { from { opacity:0; } to { opacity:1; } }

/* Providers dropdown panel (2026-10-15): narrow single-column mega in the
 * Resources mega-menu language — Join DocSana / Provider sign in /
 * For providers. Base panel behavior comes from .mega above. */
header.site.ds-hdr .mega-prov { width:350px; min-width:0; display:block; padding:10px; }
header.site.ds-hdr .mega-prov .prov-item { display:block; padding:10px 12px; border-radius:12px; text-decoration:none; }
header.site.ds-hdr .mega-prov .prov-item:hover { background:#f0f5f4; }
header.site.ds-hdr .mega-prov .prov-item strong { display:block; font-size:15px; font-weight:600; color:#102c3a; }
header.site.ds-hdr .mega-prov .prov-item span { display:block; font-size:13px; line-height:1.45; color:#4c6771; margin-top:1px; }