/* ============================================================
   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. */
.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. */
.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}

/* ============================================================
   No membership badges in the header.
   Owner decision 2026-07-26: "no badges on any headers", "no
   elite no founder on it", "get rid of the founder and Icon".

   Three paths build one: the pre-paint inline script on each
   page, bw-header.js beside the wordmark, and member-ui.js which
   swaps .hd-elite for .brand-pro on founder and tutor accounts.
   Suppressed here, the one place all three render through. Every
   part is named so no fragment survives as a stray dot or coin
   next to the wordmark. Delete this block to bring them back.
   ============================================================ */
.hd-elite,
.hd-elite-ico,
.hd-elite-star,
.hd-elite-div,
.hd-elite-word,
.brand-pro,
.brand-pro-mark,
.brand-pro-star,
.brand-pro-div,
.brand-pro-word{display:none !important}