/* Shared top bar for every standalone page (teachers, pricing, account, contact, legal, admin...).
   It is the one place these pages take their header look from, and it matches the home page bar
   (.rbar / .acct in web/index.html) and the course and reader bars (#course .acct, #reader .rd-bar .acct
   in pages.css) value for value. Link it AFTER a page's own <style> so it wins.
   Header links: 13px, weight 600, ink, no underline until hover. Signed-in email: weight 500, soft ink. */
header { display:flex; align-items:center; gap:16px; padding:10px 24px; min-height:42px; line-height:normal;
  background:#f7f7f8; border-bottom:1px solid #e4e4e7; font-family:"Inter",-apple-system,"Segoe UI",system-ui,sans-serif; }
header .wm { display:inline-flex; align-items:center; gap:6px; font-size:17px; letter-spacing:-.035em; white-space:nowrap;
  color:#09090b; text-decoration:none; }
header .wm b { font-weight:700; }
header .wm svg { width:17px; height:17px; }
header .sp { flex:1; }
header .in { flex:none; font-size:13px; font-weight:600; color:#09090b; padding:2px 0; white-space:nowrap;
  text-decoration:none; line-height:1.2; min-width:0; }
header .in:hover { text-decoration:underline; }
header .in.on { font-weight:500; color:#3f3f46; max-width:46vw; overflow:hidden; text-overflow:ellipsis; }
header .in.on:hover { color:#1e3a8a; }
@media (max-width:760px) { header { padding:9px 14px; } }
/* A phone has no room for "For Teachers", "For Homeschool", search and Sign in on one line: the
   links drop their "For " (the pages wrap it in span.for) and sit closer, so Sign in stays on screen. */
@media (max-width:480px) { header { gap:11px; } header .in .for { display:none; } }
@media (max-width:380px) { header { gap:8px; padding-left:12px; padding-right:12px; } header .in { font-size:12px; } header .wm { font-size:16px; } }