/* ============================================================
   Bone Wizardry header. One structure, three variants.
     data-variant="home"     hd-deck1 only. Default across / and every hub.
     data-variant="content"  hd-deck1 + hd-deck2. Deep dives.
     data-variant="app"      hd-deck1 + .commandbar. Cluecards, QBank.
   Flat surfaces. No gradients, no colour glows, no glass.
   Accent carries state only.
   ============================================================ */

#hd-header,[id^="hd-header-"]{
  --h-ink:oklch(97% .006 300); --h-soft:oklch(80% .016 300);
  --h-mute:oklch(63% .020 300); --h-faint:oklch(52% .018 300);
  --h-bg:oklch(14.5% .016 300); --h-panel:oklch(17% .017 300);
  --h-raise:oklch(22% .020 300); --h-line:oklch(100% 0 0 / .085);
  --h-hair:oklch(100% 0 0 / .05); --h-accent:oklch(80% .155 300);
  --h-wash:oklch(80% .155 300 / .12); --h-gold:oklch(84% .085 85);
  --h-e:cubic-bezier(.2,.8,.3,1); --h-bar:3.5rem;
  --h-pop:0 1px 0 0 var(--h-line) inset, 0 26px 64px -30px rgb(0 0 0 / .9), 0 10px 24px -14px rgb(0 0 0 / .55);
  position:relative;z-index:30;width:100%;background:var(--h-bg);color:var(--h-ink);
  font-family:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;font-size:.9375rem;line-height:1.5}
#hd-header *,[id^="hd-header-"] *{box-sizing:border-box}
#hd-header a,[id^="hd-header-"] a{color:inherit;text-decoration:none}
#hd-header button,[id^="hd-header-"] button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
#hd-header :focus-visible,[id^="hd-header-"] :focus-visible{outline:2px solid var(--h-accent);outline-offset:3px;border-radius:8px}

/* deck 1 */
.hd-deck1{border-bottom:1px solid var(--h-hair);background:var(--h-bg)}
.hd-bar{display:flex;align-items:center;gap:1.5rem;max-width:78rem;margin:0 auto;padding:0 1.5rem;min-height:var(--h-bar)}
.hd-brandwrap{position:relative;display:flex;align-items:center;gap:.125rem;flex:0 0 auto}
.hd-brand{display:inline-flex;align-items:center;gap:.5rem;font-weight:500;letter-spacing:-.015em}
.hd-logo{width:1.5rem;height:1.5rem;display:block;flex:0 0 auto}
.hd-mark{background:currentColor;-webkit-mask:url(/logo/bw-logo-mask.png) center/contain no-repeat;mask:url(/logo/bw-logo-mask.png) center/contain no-repeat}
.hd-brand:hover .hd-mark{background:var(--h-accent)}
.hd-word{white-space:nowrap}
.hd-launch-btn{display:grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:6px;color:var(--h-faint);transition:color .16s var(--h-e)}
.hd-launch-btn svg{width:.6875rem;height:.6875rem;transition:transform .22s var(--h-e)}
.hd-launch-btn:hover{color:var(--h-ink)}
.hd-launch-btn[aria-expanded="true"]{color:var(--h-accent)}
.hd-launch-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.hd-nav{display:flex;align-items:center;gap:.0625rem;flex:1 1 auto;min-width:0}
.hd-navitem{position:relative;flex:0 0 auto}
.hd-navlink{display:inline-flex;align-items:center;height:1.875rem;padding:0 .5625rem;border-radius:7px;color:var(--h-soft);white-space:nowrap;transition:color .16s var(--h-e),background .16s var(--h-e)}
.hd-navlink:hover{color:var(--h-ink);background:var(--h-panel)}
.hd-navlink.is-current,.hd-navlink[aria-current="page"]{color:var(--h-ink)}
.hd-navlink.is-current::after{content:"";position:absolute;left:.5625rem;right:.5625rem;bottom:-1px;height:1px;background:var(--h-accent)}
.hd-navlink.is-pres{color:var(--h-accent)}
.hd-live-join,.hd-tutoring-session{color:var(--h-gold)}
.hd-live-join-mobile,.hd-tutoring-session-mobile{display:none}
.hd-search{display:inline-flex;align-items:center;gap:.5rem;height:1.875rem;padding:0 .625rem;flex:0 0 auto;border:1px solid var(--h-line);border-radius:8px;color:var(--h-mute);transition:border-color .16s var(--h-e),color .16s var(--h-e)}
.hd-search:hover{border-color:var(--h-accent);color:var(--h-ink)}
.hd-search svg{width:.875rem;height:.875rem}
.hd-search .k{font-size:.6875rem;letter-spacing:.06em;color:var(--h-faint)}
.hd-acct{display:inline-flex;align-items:center;gap:.375rem;height:1.875rem;padding:0 .875rem;flex:0 0 auto;border-radius:8px;background:var(--h-accent);color:oklch(14% .02 300);font-weight:500;transition:filter .16s var(--h-e)}
.hd-acct:hover{filter:brightness(1.07)}
.hd-acct-ar{font-size:.8125rem}
.hd-burger{display:none;width:1.875rem;height:1.875rem;place-items:center;border-radius:7px;color:var(--h-soft);flex:0 0 auto}
.hd-burger:hover{background:var(--h-panel);color:var(--h-ink)}

/* menus: elevated, borderless, two-line rows, no internal rules */
.hd-launch-menu,.hd-sub,.hd-back-menu{
  position:absolute;top:calc(100% + .5rem);z-index:40;padding:.5rem;
  background:var(--h-panel);border:0;border-radius:18px;box-shadow:var(--h-pop);
  opacity:0;visibility:hidden;transform:translateY(-.5rem) scale(.985);transform-origin:top left;
  transition:opacity .19s var(--h-e),transform .19s var(--h-e),visibility .19s}

.hd-sub{left:-.75rem;min-width:17rem;max-width:min(90vw,26rem)}
.hd-back-menu{left:0;min-width:19rem;max-width:min(90vw,26rem)}
.hd-launch-btn[aria-expanded="true"]~.hd-launch-menu,
.hd-navitem:hover>.hd-sub,.hd-navitem:focus-within>.hd-sub,
.hd-back-caret[aria-expanded="true"]~.hd-back-menu{opacity:1;visibility:visible;transform:translateY(0) scale(1)}


.hd-fly-head::-webkit-details-marker{display:none}
.hd-fly-head::marker{content:""}


.hd-launch-menu a,.hd-sub a,.hd-back-menu a,.hd-flyout a,.hd-drow>a{
  display:block;padding:.4375rem .75rem;border-radius:11px;color:var(--h-soft);font-size:.9375rem;line-height:1.5;
  transition:color .13s var(--h-e),background .13s var(--h-e)}
.hd-launch-menu a:hover,.hd-sub a:hover,.hd-back-menu a:hover,.hd-flyout a:hover,.hd-drow>a:hover{color:var(--h-ink);background:var(--h-raise)}
.hd-launch-menu a small,.hd-sub a small,.hd-back-menu a small,.hd-drow a small{display:block;font-size:.75rem;color:var(--h-faint);margin-top:.0625rem}
.hd-back-menu a.is-current,.hd-launch-menu a.is-current{color:var(--h-ink);background:var(--h-wash)}
.hd-flyout-all{color:var(--h-accent)!important;margin-top:.25rem}
.hd-sub-foot{font-size:.75rem;color:var(--h-faint);padding:.5rem .75rem 0;margin-top:.25rem}
.hd-sub-mega{min-width:32rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:0 .75rem}
.hd-dgroup{min-width:0}
.hd-dsub{display:block;color:var(--h-faint);font-size:.75rem;padding:0 .75rem .25rem}
.hd-dcaret{display:none}

/* deck 2 */
.hd-deck2{border-bottom:1px solid var(--h-hair);background:var(--h-bg)}
.hd-d2-inner{display:flex;align-items:center;gap:.875rem;min-width:0;max-width:78rem;margin:0 auto;padding:.5625rem 1.5rem}
.hd-backwrap{position:relative;display:flex;align-items:center;flex:0 0 auto}
.hd-back{display:inline-flex;align-items:center;gap:.375rem;height:1.625rem;padding:0 .5rem 0 .375rem;border-radius:7px;color:var(--h-faint);font-size:.8125rem;transition:color .16s var(--h-e)}
.hd-back:hover{color:var(--h-ink)}
.hd-back-caret{display:grid;place-items:center;width:1.25rem;height:1.625rem;border-radius:7px;color:var(--h-faint)}
.hd-back-caret svg{width:.6875rem;height:.6875rem;transition:transform .22s var(--h-e)}
.hd-back-caret:hover{color:var(--h-ink)}
.hd-back-caret[aria-expanded="true"]{color:var(--h-accent)}
.hd-back-caret[aria-expanded="true"] svg{transform:rotate(180deg)}
.hd-topic{min-width:0;flex:1 1 auto;font-family:'Newsreader',Georgia,serif;font-size:1.0625rem;color:var(--h-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hd-topic::before{content:"";display:inline-block;width:1px;height:.8125rem;background:var(--h-line);margin-right:.875rem;vertical-align:-1px}
.hd-progress{height:1px;background:transparent}
.hd-progress-fill{height:1px;background:var(--h-accent);width:0;transition:width .12s linear}

/* commandbar */
.commandbar{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;max-width:78rem;margin:0 auto;padding:1.75rem 1.5rem 1.25rem}
.zone-title{min-width:0}
.zone-title h1{margin:0;font-family:'Newsreader',Georgia,serif;font-weight:500;font-size:clamp(1.5rem,3vw,2rem);letter-spacing:-.02em;line-height:1.1;color:var(--h-ink);text-wrap:balance}
.zone-title p{margin:.375rem 0 0;font-size:.9375rem;line-height:1.6;color:var(--h-mute);max-width:46ch;text-wrap:pretty}
.top-actions{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;flex:0 0 auto}
.top-action{display:inline-flex;align-items:center;height:2.25rem;padding:0 1rem;border-radius:10px;border:1px solid var(--h-line);color:var(--h-soft);font-size:.875rem;font-weight:500;white-space:nowrap;transition:border-color .16s var(--h-e),color .16s var(--h-e)}
.top-action:hover{border-color:var(--h-accent);color:var(--h-ink)}
.top-action.primary{background:var(--h-accent);border-color:var(--h-accent);color:oklch(14% .02 300)}
.top-action.primary:hover{filter:brightness(1.07)}

.hd-drawer{display:none;position:absolute;top:100%;left:0;right:0;z-index:40;background:var(--h-bg);border-bottom:1px solid var(--h-line);max-height:min(70vh,32rem);overflow-y:auto}
.hd-drawer.hd-open{display:block}
.hd-drawer-inner{max-width:78rem;margin:0 auto;padding:.75rem 1.5rem 1.25rem}

/* variants */
[data-variant="home"] .hd-deck2,[data-variant="home"] .commandbar{display:none}
/* home differs in exactly one way: no rule underneath, so a hero can sit
   flush. Bar height, width, logo and nav colour match the other variants,
   because three variants of one header should read as one header. */
[data-variant="home"] .hd-deck1{border-bottom:0}
[data-variant="app"] .hd-deck2{display:none}
/* content: deck 1 scrolls away, the context deck pins to the top */

/* content: deck 1 scrolls away, the context deck pins to the top */
#hd-header[data-variant="content"],[id^="hd-header-"][data-variant="content"]{
  position:sticky;top:calc(-1 * var(--h-bar) - 1px);z-index:30}
[data-variant="content"] .commandbar{display:none}
[data-variant="content"] .hd-d2-inner{max-width:78rem}


@media (max-width:1400px){
  [data-variant="content"] .hd-nav{display:none}
  [data-variant="content"] .hd-burger{display:grid}
  [data-variant="content"] .hd-brandwrap{flex:1 1 auto}}
@media (max-width:1220px){
  .hd-nav,.hd-search .k{display:none}
  .hd-burger{display:grid}
  .hd-brandwrap{flex:1 1 auto}
  .hd-bar{gap:.75rem}
  .hd-live-join-mobile,.hd-tutoring-session-mobile{display:block}
  }
@media (max-width:640px){
  .hd-bar,.hd-d2-inner,.hd-drawer-inner,.commandbar{padding-left:1rem;padding-right:1rem}
  .hd-acct-label{display:none}
  .hd-acct{padding:0 .625rem}
  .hd-launch-menu,.hd-sub,.hd-back-menu{left:0;max-width:calc(100vw - 2rem)}
  
  .commandbar{padding-top:1.25rem;align-items:flex-start}
  .top-actions{width:100%}
  .top-action{flex:1 1 auto;justify-content:center}}
@media (max-width:400px){.hd-word{display:none}.hd-topic{font-size:.9375rem}}
@media (prefers-reduced-motion:reduce){
  [class*="hd-"],[class*="hd-"] *,.commandbar *,.cmd,.cmd *{transition-duration:.01ms!important;animation-duration:.01ms!important}}

/* command palette: same panel language as the menus */
.cmd{position:fixed;inset:0;z-index:60;display:none;font-family:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;
  --h-ink:oklch(97% .006 300);--h-soft:oklch(80% .016 300);--h-mute:oklch(63% .020 300);--h-faint:oklch(52% .018 300);
  --h-panel:oklch(17% .017 300);--h-raise:oklch(22% .020 300);--h-line:oklch(100% 0 0 / .085);--h-hair:oklch(100% 0 0 / .05);
  --h-accent:oklch(80% .155 300);--h-wash:oklch(80% .155 300 / .12);--h-e:cubic-bezier(.2,.8,.3,1)}
.cmd.open{display:block}
.cmd-scrim{position:absolute;inset:0;background:oklch(9% .012 300 / .70)}
.cmd-inner{position:relative;width:min(42rem,calc(100vw - 2rem));margin:min(12vh,7rem) auto 0;max-height:min(72vh,40rem);
  display:flex;flex-direction:column;background:var(--h-panel);border:0;border-radius:20px;overflow:hidden;
  box-shadow:0 1px 0 0 var(--h-line) inset, 0 32px 80px -32px rgb(0 0 0 / .92)}
.cmd-top{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem .75rem}
.cmd-brand{display:inline-flex;align-items:center;gap:.5rem;color:var(--h-soft);font-weight:500;font-size:.875rem}
.cmd-brand img{width:1.25rem;height:1.25rem}
.cmd-close{display:grid;place-items:center;width:1.75rem;height:1.75rem;border-radius:8px;color:var(--h-faint);font-size:1.25rem;line-height:1;transition:color .14s var(--h-e),background .14s var(--h-e)}
.cmd-close:hover{color:var(--h-ink);background:var(--h-raise)}
.cmd-search{display:flex;align-items:center;gap:.75rem;padding:0 1.25rem 1rem;border-bottom:1px solid var(--h-hair)}
.cmd-search svg{width:1.0625rem;height:1.0625rem;color:var(--h-faint);flex:0 0 auto}
.cmd-search input{flex:1 1 auto;min-width:0;background:none;border:0;outline:none;color:var(--h-ink);font:inherit;font-size:1.0625rem;padding:0}
.cmd-search input::placeholder{color:var(--h-faint)}
.cmd-clear{color:var(--h-faint);font-size:1.125rem;line-height:1}
.cmd-kbd{font-size:.6875rem;letter-spacing:.06em;color:var(--h-faint);border:1px solid var(--h-line);border-radius:6px;padding:.125rem .375rem;flex:0 0 auto}
.cmd-label-row{display:flex;align-items:baseline;justify-content:space-between;padding:.875rem 1.25rem .5rem}
.cmd-label{margin:0;font-size:.75rem;color:var(--h-faint)}
.cmd-count{font-size:.75rem;color:var(--h-faint)}
.cmd-results{overflow-y:auto;padding:0 .75rem .25rem;flex:1 1 auto}
.cmd-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:.125rem}
.cmd-card{display:flex;align-items:center;gap:.75rem;padding:.625rem .75rem;border-radius:12px;min-width:0;color:var(--h-soft);transition:background .13s var(--h-e),color .13s var(--h-e)}
.cmd-card:hover,.cmd-card.active{background:var(--h-raise);color:var(--h-ink)}
.cmd-card .ci{flex:0 0 auto;width:1.5rem;height:1.5rem;display:grid;place-items:center;border-radius:8px;background:var(--h-wash);color:var(--h-accent);font-size:.75rem;font-weight:500}
.cmd-card .copy{min-width:0;display:flex;flex-direction:column;gap:.0625rem}
.cmd-card .t{font-size:.9375rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmd-card .d,.cmd-card .meta{font-size:.75rem;color:var(--h-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmd-card mark{background:var(--h-wash);color:var(--h-accent);border-radius:4px;padding:0 .0625rem}
.cmd-empty{display:none;flex-direction:column;align-items:center;gap:.5rem;padding:2.5rem 1rem 3rem;text-align:center}
.cmd.no .cmd-empty{display:flex}
.cmd-empty .ico{color:var(--h-faint);opacity:.5}
.cmd-empty .ico svg{width:1.375rem;height:1.375rem}
.cmd-empty .h{font-size:1rem;color:var(--h-soft)}
.cmd-empty .p{font-size:.8125rem;color:var(--h-faint);max-width:32ch}
.cmd-foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:.875rem 1.25rem;border-top:1px solid var(--h-hair)}
.cmd-hint{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;font-size:.75rem;color:var(--h-faint)}
.cmd-hint kbd{font:inherit;font-size:.6875rem;color:var(--h-mute);border:1px solid var(--h-line);border-radius:6px;padding:.125rem .375rem;margin-right:.25rem}
.cmd-signin{display:inline-flex;align-items:center;gap:.75rem;height:2.25rem;padding:0 .5rem 0 1rem;border-radius:11px;background:var(--h-accent);color:oklch(14% .02 300);transition:filter .16s var(--h-e)}
.cmd-signin:hover{filter:brightness(1.07)}
.cmd-signin .si-copy{display:flex;flex-direction:column;line-height:1.15;text-align:left}
.cmd-signin .si-copy strong{font-size:.875rem;font-weight:500}
.cmd-signin .si-copy small{font-size:.6875rem;opacity:.72;white-space:nowrap}
.cmd-signin>span:last-child{flex:0 0 auto;width:1.75rem;height:1.75rem;border-radius:9px;display:grid;place-items:center;background:oklch(14% .02 300 / .16)}
@media (max-width:640px){
  .cmd-inner{width:calc(100vw - 1.5rem);margin-top:4vh;max-height:88vh;border-radius:18px}
  .cmd-grid{grid-template-columns:1fr}
  .cmd-hint{display:none}
  .cmd-signin{width:100%;justify-content:space-between}}

/* the palette CTA holds a two-line label, so it sizes to content, not to a
   single-line control height */
.cmd-signin{height:auto;min-height:2.75rem;padding:.4375rem .5rem .4375rem 1rem;
  align-items:center;gap:.875rem}
.cmd-signin .si-copy{gap:.0625rem}
.cmd-signin .si-copy strong{line-height:1.3}
.cmd-signin .si-copy small{line-height:1.35;opacity:.75}
.cmd-signin>span:last-child{width:1.875rem;height:1.875rem;border-radius:9px;font-size:.9375rem}
@media (max-width:640px){
  .cmd-signin{width:100%;justify-content:space-between;min-height:3rem;padding:.5rem .5rem .5rem 1rem}
}

/* ---- launch menu: two-level cascade, level 2 opens to the right ---- */
.hd-launch-menu{
  position:absolute;top:calc(100% + .5rem);left:-.75rem;z-index:40;
  width:15.5rem;padding:.4375rem;
  background:var(--h-panel);border:0;border-radius:16px;box-shadow:var(--h-pop);
  opacity:0;visibility:hidden;transform:translateY(-.5rem) scale(.985);transform-origin:top left;
  transition:opacity .18s var(--h-e),transform .18s var(--h-e),visibility .18s}
.hd-fly{position:relative;display:block}
.hd-fly-head{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  list-style:none;cursor:pointer;padding:.5rem .75rem;border-radius:11px;
  color:var(--h-soft);font-size:.9375rem;
  transition:color .13s var(--h-e),background .13s var(--h-e)}
.hd-fly-head::-webkit-details-marker{display:none}
.hd-fly-head::marker{content:""}
.hd-fly-head::after{
  content:"";width:.4375rem;height:.4375rem;flex:0 0 auto;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(-45deg);opacity:.55;transition:transform .18s var(--h-e),opacity .18s var(--h-e)}
.hd-fly-head:hover{background:var(--h-raise);color:var(--h-ink)}
.hd-fly[open]>.hd-fly-head{background:var(--h-raise);color:var(--h-ink)}
.hd-fly[open]>.hd-fly-head::after{opacity:1;transform:rotate(-45deg) translate(1px,1px)}
.hd-flyout{
  position:absolute;top:-.4375rem;left:calc(100% + .5rem);z-index:41;
  min-width:14rem;max-width:min(80vw,18rem);padding:.4375rem;
  background:var(--h-panel);border:0;border-radius:16px;box-shadow:var(--h-pop);
  animation:hd-fly-in .16s var(--h-e) both}
@keyframes hd-fly-in{from{opacity:0;transform:translateX(-.375rem)}to{opacity:1;transform:none}}
.hd-flyout-head{
  display:block;padding:.4375rem .75rem .3125rem;color:var(--h-faint);font-size:.72rem;letter-spacing:.02em}
.hd-launch-menu a{
  display:block;padding:.4375rem .75rem;border-radius:11px;color:var(--h-soft);
  font-size:.9375rem;line-height:1.5;transition:color .13s var(--h-e),background .13s var(--h-e)}
.hd-launch-menu a:hover{color:var(--h-ink);background:var(--h-raise)}
.hd-flyout-all{color:var(--h-accent)!important;margin-top:.25rem}
@media (max-width:640px){
  .hd-launch-menu{width:min(20rem,calc(100vw - 2rem))}
  .hd-flyout{position:static;left:auto;top:auto;margin:.125rem 0 .375rem .75rem;
    padding:.25rem 0 .25rem .5rem;min-width:0;max-width:none;
    border-radius:0;box-shadow:none;background:none;
    border-left:1px solid var(--h-line);animation:none}
  .hd-flyout-head{display:none}
}

/* ---- submenu icons: masked so they take currentColor ---- */
.bw-ico{display:inline-block;flex:0 0 auto;width:1.25rem;height:1.25rem;
  background:currentColor;-webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.bw-ico-subjects{-webkit-mask-image:url(/logo/submenu/bw-submenu-subjects.png);mask-image:url(/logo/submenu/bw-submenu-subjects.png)}
.bw-ico-mnemonics{-webkit-mask-image:url(/logo/submenu/bw-submenu-mnemonics.png);mask-image:url(/logo/submenu/bw-submenu-mnemonics.png)}
.bw-ico-cluecards{-webkit-mask-image:url(/logo/submenu/bw-submenu-cluecards.png);mask-image:url(/logo/submenu/bw-submenu-cluecards.png)}
.bw-ico-qbank{-webkit-mask-image:url(/logo/submenu/bw-submenu-qbank.png);mask-image:url(/logo/submenu/bw-submenu-qbank.png)}
.bw-ico-live{-webkit-mask-image:url(/logo/submenu/bw-submenu-live-classrooms.png);mask-image:url(/logo/submenu/bw-submenu-live-classrooms.png)}
.bw-ico-tutoring{-webkit-mask-image:url(/logo/submenu/bw-submenu-tutoring.png);mask-image:url(/logo/submenu/bw-submenu-tutoring.png)}
.bw-ico-physicians{-webkit-mask-image:url(/logo/submenu/bw-submenu-physicians.png);mask-image:url(/logo/submenu/bw-submenu-physicians.png)}
.bw-ico-prescryption{-webkit-mask-image:url(/logo/submenu/bw-submenu-prescryption.png);mask-image:url(/logo/submenu/bw-submenu-prescryption.png)}
/* qbank and live read thin at small sizes, so give them a touch more room */
.cmd-card .bw-ico-qbank,.cmd-card .bw-ico-live{width:1.375rem;height:1.375rem}
.cmd-card .ci:has(.bw-ico){background:var(--h-wash)}
.cmd-card .ci .bw-ico{color:var(--h-accent)}
.hd-sub a .bw-ico,.hd-launch-menu a .bw-ico{margin-right:.5rem;vertical-align:-.2rem;opacity:.75}
.hd-sub a:hover .bw-ico,.hd-launch-menu a:hover .bw-ico{opacity:1;color:var(--h-accent)}

/* Palette CTA: the filled accent pill put near-white text on light violet
   (~1.8:1). A search palette footer is not a state, so the accent comes off
   the fill and goes to the text and the border instead. */
.cmd .cmd-signin,.cmd a.cmd-signin{
  background:transparent!important;
  border:1px solid oklch(80% .155 300 / .45);
  color:var(--h-ink)!important;
  box-shadow:none;
  transition:border-color .15s var(--h-e),background .15s var(--h-e)}
.cmd .cmd-signin:hover{background:oklch(80% .155 300 / .10)!important;border-color:var(--h-accent)}
.cmd .cmd-signin .si-copy strong{color:var(--h-accent);font-weight:500}
.cmd .cmd-signin .si-copy small{color:var(--h-mute);opacity:1}
.cmd .cmd-signin>span:last-child{
  background:oklch(80% .155 300 / .14);color:var(--h-accent);
  width:1.75rem;height:1.75rem;border-radius:9px}
.cmd .cmd-signin:hover>span:last-child{background:oklch(80% .155 300 / .22)}

/* ---- palette: staggered blur-to-focus cascade on open, instant while typing ----
   bw-cmd.js already emits style="--i:n" per card and toggles .intro / .searching */
@keyframes bw-card-in{
  0%{opacity:0;transform:translateY(14px) scale(.97);filter:blur(6px)}
  60%{filter:blur(0)}
  100%{opacity:1;transform:none;filter:blur(0)}
}
@keyframes bw-panel-in{
  from{opacity:0;transform:translateY(-8px) scale(.985)}
  to{opacity:1;transform:none}
}
.cmd.open .cmd-inner{animation:bw-panel-in .22s var(--h-e) both}
.cmd.open .cmd-scrim{animation:bw-fade .18s var(--h-e) both}
@keyframes bw-fade{from{opacity:0}to{opacity:1}}
.cmd.intro .cmd-card{animation:bw-card-in .5s var(--h-e) both;
  animation-delay:calc(var(--i,0)*42ms + .1s)}
.cmd.intro .cmd-label,.cmd.intro .cmd-count{animation:bw-card-in .38s var(--h-e) both}
/* once the user types, results must land instantly */
.cmd.searching .cmd-card{animation:none!important}
.cmd-card{transition:background .13s var(--h-e),color .13s var(--h-e),transform .13s var(--h-e)}
.cmd-card:active{transform:scale(.99)}
.cmd-card .g{transition:transform .16s var(--h-e),opacity .16s var(--h-e);opacity:.5}
.cmd-card:hover .g,.cmd-card.is-active .g{opacity:1;transform:translateX(3px)}
.cmd-search svg{transition:color .18s var(--h-e)}
.cmd-search:focus-within svg{color:var(--h-accent)}
@media (prefers-reduced-motion:reduce){
  .cmd.intro .cmd-card,.cmd.intro .cmd-label,.cmd.intro .cmd-count,
  .cmd.open .cmd-inner,.cmd.open .cmd-scrim{animation:none!important}
}

/* ---- nav: even spread, grouped order ---- */
.hd-nav{justify-content:center;gap:.125rem}
.hd-navitem.hd-nav-gap{margin-left:.875rem;position:relative}
.hd-navitem.hd-nav-gap::before{content:"";position:absolute;left:-.5rem;top:50%;transform:translateY(-50%);
  width:1px;height:.9rem;background:var(--h-line)}

/* the page sets a:hover{text-decoration:underline}; the palette is UI, not prose */
.cmd a,.cmd a:hover,.cmd a:focus,.cmd a:active,.cmd a:visited,
.cmd-card,.cmd-card:hover,.cmd-card:focus,.cmd-card:active,
.cmd-signin,.cmd-signin:hover,.cmd-signin:focus,.cmd-signin:active{text-decoration:none}
.cmd a *,.cmd-card *{text-decoration:inherit}

/* ---- subject dropdown: read down column one, then column two ----
   It was a 2-col grid with the heading occupying cell 1, which pushed the
   first subject into column 2 and made the whole list zigzag. Multicol fills
   top-to-bottom, and the heading and footer span the full width. */
.hd-sub-mega{
  display:block;min-width:34rem;
  columns:2;column-gap:1.5rem;column-fill:balance}
.hd-sub-mega .hd-sub-head{column-span:all;margin-bottom:.375rem}
.hd-sub-mega .hd-sub-foot,.hd-sub-mega a.hd-flyout-all,.hd-sub-mega a[href$="/subjects/"]:last-child{
  column-span:all;margin-top:.375rem;padding-top:.5rem;border-top:1px solid var(--h-hair)}
.hd-sub-mega a,.hd-sub-mega .hd-dgroup,.hd-sub-mega .hd-drow{
  break-inside:avoid;-webkit-column-break-inside:avoid;display:block}

/* closed panels must not contribute width, and the mobile flyout must shrink */
.hd-launch-menu,.hd-sub,.hd-back-menu{overflow:hidden;max-width:calc(100vw - 2rem)}
.hd-launch-menu a,.hd-sub a,.hd-back-menu a,.hd-flyout a{min-width:0;overflow-wrap:anywhere}
@media (max-width:640px){
  .hd-flyout{min-width:0;max-width:100%;width:auto}
  .hd-launch-menu{width:min(20rem,calc(100vw - 2rem))}
}

/* ================= BW overrides (Mo, 2026-07-25) ================= */
/* Sign in keeps the canonical toolkit treatment (matches Mo's reference shot). */

/* Burger duplicates the search control; both call bwCmd(true). Keep one. */
@media (min-width:1221px){.hd-burger{display:none !important}}

/* Search stays left of the account control, per reference. */

/* Never collapse the account control to a bare arrow. */
@media (max-width:640px){
  .hd-acct-label{display:inline !important}
  .hd-acct-ar{display:none}
  .hd-acct{padding:0 .5rem}
}

/* Elite / founder badge: mini gold icon only, no letters, no glyphs. */
.hd-elite{display:inline-flex;align-items:center;margin-left:.4rem;vertical-align:middle}
.hd-elite-ico{
  display:inline-block;width:.875rem;height:.875rem;flex:0 0 auto;
  background:linear-gradient(150deg,#f6e27a 0%,#e3b341 45%,#b8860b 100%);
  -webkit-mask-image:url(/logo/bw-logo-sparkle-mask.png);mask-image:url(/logo/bw-logo-sparkle-mask.png);
  -webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
}
.hd-elite[data-tier="elite"] .hd-elite-ico{
  background:linear-gradient(150deg,#eae6dd 0%,#c9c6bd 45%,#8f8c85 100%);
}
.hd-elite-word,.hd-elite-star,.hd-elite-div{display:none !important}

/* Mobile palette: real sheet, real tap targets. */
@media (max-width:640px){
  .cmd-inner{width:100%;max-width:none;margin:0;border-radius:14px 14px 0 0;
    position:fixed;left:0;right:0;bottom:0;top:auto;max-height:88vh;display:flex;flex-direction:column}
  .cmd-list{overflow-y:auto;-webkit-overflow-scrolling:touch}
  .cmd-card{padding:.75rem .875rem;min-height:3rem}
  .cmd-top,.cmd-search{flex:0 0 auto}
}

/* The 468 pages style .hd-elite themselves (foil background, padding, borders)
   with inline !important rules. bw-header.js rebuilds the node icon-only; these
   resets neutralise the container so no slab or foil survives around the icon. */
.hd-elite{
  display:inline-flex !important;align-items:center !important;
  background:none !important;border:0 !important;box-shadow:none !important;
  padding:0 !important;margin-left:.4rem !important;gap:0 !important;
  width:auto !important;height:auto !important;min-width:0 !important;
  font-size:0 !important;letter-spacing:normal !important;
}
.hd-elite-ico{display:inline-block !important;width:.875rem !important;height:.875rem !important}

/* Search matched neither the 44px touch floor nor its neighbour at 38px. */
.hd-search{width:2.375rem;height:2.375rem;border-radius:999px}
@media (pointer:coarse){
  .hd-search{width:2.75rem;height:2.75rem}
  .hd-acct{height:2.75rem;border-radius:999px}
}

/* ---- bar layout guard (2026-07-25) ---- */
/* Retiring the old hd-* rules from theme.css/nav.css also removed the flex
   layout for the bar, so search and account wrapped to a second row on the
   left. The canonical sheet must own this, not the legacy stylesheets. */
.hd-bar{display:flex;align-items:center;gap:.75rem;flex-wrap:nowrap;width:100%}
.hd-brandwrap{flex:0 0 auto;display:flex;align-items:center;gap:.5rem}
.hd-nav{display:flex;align-items:center;flex:1 1 auto;min-width:0;justify-content:center}
.hd-search,.hd-acct{flex:0 0 auto}
.hd-acct{margin-left:.25rem}

/* ---- deck1 is the row: brand+nav, then search and account hard right ---- */
/* .hd-search and .hd-acct are children of .hd-deck1, not .hd-bar, so with
   .hd-deck1 as display:block they dropped to a second line on the left. */
.hd-deck1{display:flex;align-items:center;gap:.625rem;width:100%}
.hd-deck1 > .hd-bar{flex:1 1 auto;min-width:0}
.hd-deck1 > .hd-search,.hd-deck1 > .hd-acct{flex:0 0 auto}
.hd-deck1 > .hd-search{margin-left:auto}

/* ---- Sign in: dark pill, hairline border, white label (Mo's reference) ---- */
.hd-acct{
  background:rgba(18,16,26,.92) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  color:#fff !important;
  border-radius:10px;height:2.25rem;padding:0 .9375rem;
  font-size:.8125rem;font-weight:600;box-shadow:none !important;
}
.hd-acct:hover{background:rgba(34,30,46,.95) !important;border-color:rgba(255,255,255,.30) !important;filter:none}
.hd-acct .hd-acct-ar{display:inline}

/* The homepage inline <style> sets .hd-deck1 display:block and loads after
   this sheet, so the row rules need to be marked to win. */
@media (min-width:1221px){.hd-deck1{display:flex !important;align-items:center !important;gap:.625rem !important;width:100% !important;flex-wrap:nowrap !important}}
.hd-deck1 > .hd-bar{flex:1 1 auto !important;min-width:0 !important;width:auto !important}
.hd-deck1 > .hd-search{flex:0 0 auto !important;margin-left:auto !important}
.hd-deck1 > .hd-acct{flex:0 0 auto !important}

/* ---- decorative aurora: contain it instead of deleting it ---- */
/* The blobs were switched off because they dragged page width. overflow-x:clip
   contains them without creating a scroll container, so the motion comes back
   and the horizontal scrollbar does not. */
html{overflow-x:clip}
body{overflow-x:clip;position:relative}
.blob,#aurora,.cluecards-aura{pointer-events:none;will-change:transform}

/* ---- kill the frosted haze band under the bar (2026-07-25) ---- */
/* backdrop-filter:blur(18px) saturate(1.3) on .hd-deck1 renders as a washed
   out box over the dark hero and dulls the aurora behind it. The bar keeps
   its own solid surface, so the blur buys nothing. */
.hd-deck1{-webkit-backdrop-filter:none !important;backdrop-filter:none !important}
.hd-header,.hd-deck1,.hd-deck2{-webkit-backdrop-filter:none !important;backdrop-filter:none !important}

/* ---- hero headline: no solid box behind the second line ---- */
/* An unclassed <span> inside the h1 carries background-color oklch(.16 .016 300),
   which paints a dark rectangle behind "YOU MISS THE CLUE." The drop-shadow on
   it is the intended glow; the fill is not. */
h1 span:not([class]):not([style*="background-clip"]){background-color:transparent !important}
.hero-line1,.hero-line2{background-color:transparent !important}

/* ---- soften every hard seam (2026-07-25) ---- */
/* The decorative blobs must stay radial glows, never a flat fill: a solid
   colour under filter:blur() renders as a smeared rectangle with visible
   edges, which is what put the haze band across the hero. */
.blob{border-radius:50% !important;background-color:transparent !important;mix-blend-mode:normal !important}
.blob-1,.blob-2,.blob-3,.blob-4,.blob-5{background-color:transparent !important}
/* No rule under the home bar, and no hard edge where the hero meets the page. */
[data-variant="home"] .hd-deck1{border-bottom:0 !important;box-shadow:none !important}
.hd-header{border-bottom:0 !important}

/* ---- feather the glow layer instead of clipping it flat ---- */
/* .bg-blobs is position:fixed with overflow:hidden at viewport height, so the
   radial glows were cut off dead straight, which reads as a hard band across
   the page. Fade the layer out at its edges so there is no cut line. */
.bg-blobs{
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 46%, rgba(0,0,0,.55) 72%, transparent 96%);
  mask-image:linear-gradient(to bottom, #000 0%, #000 46%, rgba(0,0,0,.55) 72%, transparent 96%);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
}
/* Section joins: no hard rule where one band meets the next. */
section + section,section + div[class*="section"]{border-top:0 !important}
[class*="hero"]{box-shadow:none !important}

/* ---- pull the glow up to the top of the page ---- */
/* The colour should sit behind the hero, not halfway down. Anchor the blobs
   to the upper band and let them fall off before the hex grid. */
.blob-1{top:-26vh !important;bottom:auto !important}
.blob-2{top:2vh !important;bottom:auto !important}
.blob-3{top:-6vh !important;bottom:auto !important}
.blob-4{top:10vh !important;bottom:auto !important}
.blob-5{top:-14vh !important;bottom:auto !important}

/* ---- never blank out gradient text ---- */
/* Elements that clip a gradient to their glyphs must keep their background
   image, or the text renders transparent on transparent and vanishes. */
[style*="background-clip"],[class*="grad"],.cta h2,.cta h3,.curtain h2{
  background-image:revert !important;-webkit-background-clip:text;background-clip:text;
}
/* The closing call to action must be legible regardless of gradient support. */
.cta .btn,.cta a[class*="btn"],a.btn-gold,.start-free,a[href="/free"]{
  color:#fff !important;border-color:rgba(255,255,255,.35) !important;
}

/* ---- the closing CTA must never be dark-on-dark ---- */
/* "Start free" is dark ink on a gold fill. A blanket gold-removal pass took the
   fill and left the ink, so the primary call to action rendered invisible. */
a:where([href="/free"],[href="/free/"],.start-free,.btn-gold),
button:where(.btn-gold,.start-free){
  background:linear-gradient(150deg,#ffeaa7 0%,#f0cf7a 48%,#dcb45c 100%) !important;
  color:#1a140a !important;
  border:1px solid rgba(255,246,208,.55) !important;
  font-weight:700;
}
a:where([href="/free"],[href="/free/"],.start-free,.btn-gold):hover,
button:where(.btn-gold,.start-free):hover{filter:brightness(1.06)}

/* ================= MOBILE (2026-07-25) =================
   The desktop nav was rendering on phones and running off screen. Three of my
   own rules caused it: .hd-burger{display:none!important} removed the mobile
   affordance, flex-wrap:nowrap!important stopped the bar collapsing, and the
   deck1 row rules applied at every width. Scope them to desktop and give the
   phone its own layout. */
@media (max-width:1220px){
  /* the horizontal nav is desktop only */
  #hd-header .hd-nav{display:none !important}
  #hd-header .hd-navitem,#hd-header .hd-navlink{display:none !important}
  /* the bar is brand on the left, search and account on the right */
  .hd-deck1{display:flex !important;align-items:center !important;flex-wrap:nowrap !important;
            gap:.5rem !important;padding:0 1rem !important;min-height:3.5rem}
  .hd-deck1 > .hd-bar{flex:1 1 auto !important;min-width:0 !important}
  .hd-deck1 > .hd-search{margin-left:auto !important;flex:0 0 auto !important}
  .hd-deck1 > .hd-acct{flex:0 0 auto !important}
  /* search is the menu on phones, so it must be a real target */
  .hd-search{width:2.75rem !important;height:2.75rem !important}
  .hd-acct{height:2.5rem !important;padding:0 .875rem !important}
  .hd-brandwrap{min-width:0;overflow:hidden}
  .hd-word{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* iOS: dvh so the glow layer is not clipped to zero by the toolbars */
  .bg-blobs{height:100dvh !important;min-height:100vh}
}
/* a header must never collapse to zero height */
#hd-header{display:block !important}

/* ---- the hamburger is gone at every width ---- */
/* Search opens the same palette the burger did, and that palette is the mobile
   nav. Two controls for one action, and Mo wants the burger gone. */
.hd-burger{display:none !important}
@media (max-width:1220px){
  .hd-deck1 > .hd-bar{flex:1 1 auto !important}
  .hd-deck1 > .hd-search{margin-left:auto !important}
  .hd-deck1 > .hd-acct{margin-right:0 !important}
}

/* ---- launch menu on phones: one column, inside the viewport ---- */
/* The panel is a three column grid on desktop. At 390px those columns ran off
   screen, so it stacks and clamps to the viewport instead. */
@media (max-width:1220px){
  .hd-launch-menu,.hd-sub,.hd-back-menu{
    left:.75rem !important;right:.75rem !important;
    width:auto !important;max-width:calc(100vw - 1.5rem) !important;
    max-height:min(72vh,72dvh) !important;overflow-y:auto !important;
    -webkit-overflow-scrolling:touch;
  }
  .hd-launch-menu .hd-flywrap,.hd-launch-menu > div{
    display:block !important;grid-template-columns:none !important;
  }
  .hd-fly{width:auto !important;max-width:100% !important;border-left:0 !important}
  .hd-flyout{position:static !important;width:auto !important;max-width:100% !important;
             box-shadow:none !important;background:transparent !important}
  .hd-fly-head{padding:.625rem .75rem}
  .hd-flyout a{display:block;padding:.625rem .75rem;min-height:2.75rem}
}

/* ---- iOS: never let the page composite to white ---- */
/* mask-image on a position:fixed layer creates an isolated group in WebKit.
   If anything in that group blends, the backdrop resolves to white and the
   whole page washes out. Pin the base colour and keep the layer behind. */
html{background-color:#020617 !important}
body{background-color:#020617 !important}
.bg-blobs{
  z-index:0 !important;isolation:isolate;
  background-color:transparent !important;
  mix-blend-mode:normal !important;
  pointer-events:none;
}
.blob,.blob-1,.blob-2,.blob-3,.blob-4,.blob-5{mix-blend-mode:normal !important}
/* Safari needs the prefixed property or the mask is ignored entirely, which
   previously left a hard clipped edge instead of a fade. */
@supports not ((-webkit-mask-image:linear-gradient(#000,#000)) or (mask-image:linear-gradient(#000,#000))){
  .bg-blobs{-webkit-mask-image:none;mask-image:none}
}