/* THE ONE SITE HEADER'S STYLE (#616). The only place the header's look lives: the landing, the series pages and
 * readers, /s/<id>, /read, the site pages and /account all load this file (lib/site-header emits the link beside the
 * markup). Tokens come from tokens.css where a page has it; the literals are for the rooms that have none (/account).
 * No dark look: dark is the ONE root transform, and the paper toggle's own CSS lives with its button (lib/theme-toggle). */
.bar{ display:flex; align-items:center; gap:4px 6px; padding-block:14px 6px; flex-wrap:wrap; }
.wm{ font-family:var(--display,"askNib Display","Shantell Sans",system-ui,sans-serif); font-weight:var(--display-wt,700); font-size:24px; letter-spacing:-.02em; color:var(--ink,#3A241C);
  text-decoration:none; padding:6px 2px; margin-right:auto; white-space:nowrap; }
.wm .m1{ color:var(--strawberry,#E73069); } .wm .m2{ color:var(--blueberry,#4A5FD5); } .wm .m3{ color:var(--pistachio,#3D7A47); }
/* the smallest phones (~320px) can't fit the wordmark and the nav on one row: the nav takes its own, on the right */
.nav{ display:flex; align-items:center; gap:2px; margin-left:auto; }
.chip-btn{ min-height:var(--hit,44px); padding:0 14px; border-radius:999px; font-family:var(--text,"Shantell Sans",system-ui,sans-serif); font-weight:600; font-size:15px; color:var(--ink2,#6A5A48);
  display:inline-flex; align-items:center; gap:8px; text-decoration:none; white-space:nowrap; transition:background .15s, color .15s; }
.chip-btn:hover{ color:var(--ink,#3A241C); background:var(--hair,rgba(58,36,28,.12)); }
.icon-btn{ width:var(--hit,44px); height:var(--hit,44px); border:0; padding:0; background:none; cursor:pointer; border-radius:50%; display:grid; place-items:center;
  color:var(--ink2,#6A5A48); flex:none; transition:background .15s, color .15s; }
.icon-btn:hover{ background:var(--hair,rgba(58,36,28,.12)); color:var(--ink,#3A241C); }
.icon-btn svg, .chip-btn svg{ width:20px; height:20px; flex:none; }
#snd[aria-pressed="true"]{ color:var(--accent-strong,#C21E56); }
.glass-btn{ min-height:var(--hit,44px); padding:0 18px; border-radius:999px; background:var(--glass,rgba(251,248,241,.78)); border:1px solid var(--glass-edge,rgba(255,255,255,.75));
  box-shadow:var(--e1,0 1px 2px rgba(58,36,28,.08)); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); font-family:var(--text,"Shantell Sans",system-ui,sans-serif); font-weight:650; font-size:15px;
  display:inline-flex; align-items:center; text-decoration:none; color:var(--ink,#3A241C); white-space:nowrap; margin-left:6px;
  transition:box-shadow .2s var(--ease,ease), transform .2s var(--ease,ease); }
.glass-btn:hover{ box-shadow:var(--e2,0 4px 14px rgba(58,36,28,.16)); transform:translateY(-1px); }
.glass-btn[hidden]{ display:none; }
@media (max-width:640px){
  #navBooks span{ display:none; }   /* the icon says it; the label returns on wide screens */
  #navBooks{ width:var(--hit,44px); padding:0; justify-content:center; }
  .glass-btn{ padding:0 14px; font-size:14.5px; }
}
/* the series pages' sticky bar (public/books/book.css .booknav) restyles every link in it; the shared items keep their own look */
.booknav .wm .m1{ color:var(--strawberry,#E73069); } .booknav .wm .m2{ color:var(--blueberry,#4A5FD5); } .booknav .wm .m3{ color:var(--pistachio,#3D7A47); }
.booknav .wm{ margin-right:0; }
.booknav .chip-btn:hover, .booknav .glass-btn, .booknav .glass-btn:hover{ color:var(--ink,#3A241C); }
.booknav .glass-btn[hidden]{ display:none; }
/* the smallest phones: the series bar keeps wordmark, Series, paper, Sign in and Ask on ONE row */
@media (max-width:400px){
  .booknav{ gap:.2rem; padding-left:12px; padding-right:12px; }
  .booknav .nav{ gap:0; }
  .booknav .wm{ font-size:1.15rem; }
  .booknav .glass-btn{ padding:0 10px; font-size:13.5px; margin-left:0; }
  .booknav .askl{ padding:0 10px; font-size:13.5px; margin-left:2px; }
}
/* at ~320px the Play button is also in the bar, and the row can't hold Sign in too: it waits behind Ask (the sign-in door is one tap from there) */
@media (max-width:360px){ .booknav #navCta, .booknav #navAcct{ display:none; } }
/* a lesson's page carries its Play / Read switch in the bar: on a phone Sign in waits behind it */
@media (max-width:440px){ .booknav .prtoggle ~ #navCta, .booknav .prtoggle ~ #navAcct{ display:none; } }
/* phones: the bar's own gaps give back the room the shared items take */
@media (max-width:520px){
  .booknav{ gap:.25rem; padding-left:12px; padding-right:12px; }
  .booknav .nav{ gap:0; }
  .booknav .askl{ padding:0 12px; }
}