/* Named apart from the page palette in learn.css on purpose: the bar is dark
   furniture on a light page, so it cannot inherit --panel or --text and read
   correctly, and site/index.html and site/privacy.html carry their own copies
   of the page palette that this file must not collide with. */
:root{
  --bar-bg:#0E2318; --bar-bg-2:#16311F; --bar-line:rgba(198,163,83,.34);
  --bar-text:#D7E2DA; --bar-gold:#C6A353; --bar-gold-soft:#E6D5A8;
  --menu-bg:#FFFFFF; --menu-stroke:#DCE5DE; --menu-text:#1B2C23;
  --menu-muted:#5D6E64; --menu-hover:#EFF4F0; --menu-head:#0F3626;
}
.topbar{
  position:sticky;top:0;z-index:60;
  background:var(--bar-bg);
  border-bottom:1px solid var(--bar-line);
  box-shadow:0 1px 12px -4px rgba(0,0,0,.5)
}
.topbar-in{
  max-width:760px;margin:0 auto;height:56px;padding:0 22px;
  display:flex;align-items:center;gap:6px;
  /* This file is injected into pages whose own stylesheet it does not control,
     so the row states what it needs rather than inheriting it. */
  text-align:left;line-height:1.2
}
/* The mark is the home link, and on a phone it is the whole home link: the
   wordmark is the first thing dropped, because the three menu labels are what
   the bar is for and they have to fit before it does. */
.brand{
  display:flex;align-items:center;gap:9px;flex:none;
  text-decoration:none;color:var(--bar-gold-soft);
  font-weight:700;font-size:1.06rem;letter-spacing:-.01em;
  padding:6px 8px 6px 0;border-radius:9px
}
/* The mark is a dark felt square, which on a dark felt bar is nearly nothing.
   The hairline is what makes it read as a mark rather than a hole. */
.brand img{width:27px;height:27px;display:block;border-radius:7px;box-shadow:0 0 0 1px rgba(198,163,83,.3)}
.brand:hover{color:#fff}
.brand:focus-visible{outline:none;box-shadow:0 0 0 2px var(--bar-gold)}
.topnav{display:flex;align-items:center;gap:2px;flex:1 1 auto;min-width:0}
/* The Play button sits outside .topnav so that the nav's flex-grow pushes it to
   the far end of the bar whatever the menu labels turn out to measure. */
.bar-play{
  flex:none;margin-left:auto;
  background:var(--bar-gold);color:#0B1D15;
  font-weight:700;font-size:.93rem;text-decoration:none;
  padding:8px 16px;border-radius:9px;white-space:nowrap
}
.bar-play:hover{background:var(--bar-gold-soft);color:#0B1D15}
.bar-play:focus-visible{outline:none;box-shadow:0 0 0 2px #fff}
.menu{position:relative}
.menu>summary{
  list-style:none;cursor:pointer;white-space:nowrap;
  display:flex;align-items:center;gap:5px;
  padding:8px 11px;border-radius:9px;
  color:var(--bar-text);font-size:.94rem;font-weight:600
}
/* Safari draws its own disclosure triangle and ignores list-style. */
.menu>summary::-webkit-details-marker{display:none}
.menu>summary::marker{content:""}
.menu>summary:hover{background:var(--bar-bg-2);color:var(--bar-gold-soft)}
.menu>summary:focus-visible{outline:none;box-shadow:0 0 0 2px var(--bar-gold)}
.menu[open]>summary{background:var(--bar-bg-2);color:var(--bar-gold-soft)}
/* The section the current page belongs to, marked on the closed bar so that a
   reader who arrived from a search result can see where they landed.
   A pseudo-element rather than an inset shadow or a border: both of those follow
   the 9px corner radius, and on a box this small the curve runs far enough up
   the sides to read as a ring around the label rather than a line under it. */
.menu.on>summary{color:var(--bar-gold-soft);position:relative}
.menu.on>summary::after{
  content:"";position:absolute;left:10px;right:10px;bottom:2px;
  height:2px;border-radius:2px;background:var(--bar-gold)
}
.menu>summary .caret{
  width:0;height:0;flex:none;margin-top:1px;
  border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid currentColor;opacity:.8;transition:transform .16s
}
.menu[open]>summary .caret{transform:rotate(180deg)}
/* Search.
   A real <form> with a GET action and nothing else: it lands on /learn/ with
   ?q=, and the search page — which already owns the index, the ranking and the
   results list — does the work. Two things follow from that. It works with
   JavaScript off, like the rest of this bar. And the 134KB index stays off
   every other page on the site: what sits up here is a text field, not a
   search engine. */
.bar-search{display:flex;align-items:center;flex:0 1 auto;min-width:0;margin-left:6px}
.bar-search input{
  width:clamp(110px,16vw,190px);min-width:0;
  /* Shrinkable, and deliberately. At every width above 640px the nav strip carries
     no overflow net — that is scoped to the narrow band where the panels are
     fixed — so anything that outgrows the row here widens the DOCUMENT. Letting
     the field give way first means the failure is a narrower search box rather
     than a page that scrolls sideways. */
  padding:7px 10px;border-radius:9px;
  border:1px solid rgba(198,163,83,.30);
  background:var(--bar-bg-2);color:var(--bar-text);
  font:inherit;font-size:.88rem;font-weight:500;
  -webkit-appearance:none;appearance:none
}
.bar-search input::placeholder{color:#8CA396}
.bar-search input:focus{outline:none;border-color:var(--bar-gold);background:#12281D}
/* Safari draws its own clear affordance on type=search; this field is 190px at
   its widest and has no room for furniture it did not ask for. */
.bar-search input::-webkit-search-decoration,
.bar-search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.bar-search button{
  display:flex;align-items:center;justify-content:center;
  flex:none;width:34px;height:34px;margin-left:2px;padding:0;
  border:0;border-radius:9px;background:none;color:var(--bar-text);cursor:pointer
}
.bar-search button:hover{background:var(--bar-bg-2);color:var(--bar-gold-soft)}
.bar-search button:focus-visible{outline:none;box-shadow:0 0 0 2px var(--bar-gold)}
.bar-search svg{width:17px;height:17px;display:block}
/* The panel is a white card hanging off a dark bar, because it is a piece of the
   page rather than a piece of the bar: what it holds is twenty-five links of
   running text, and that is the thing the rest of this redesign moved onto
   white. */
.menu-panel{
  position:absolute;top:calc(100% + 7px);left:0;
  width:max(232px,100%);
  max-height:calc(100vh - 78px);overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:var(--menu-bg);border:1px solid var(--menu-stroke);border-radius:13px;
  box-shadow:0 18px 44px -16px rgba(11,29,21,.45);padding:8px
}
/* The guide menu is the long one — ten chapters plus two ways in — so it gets
   two columns on a screen wide enough to hold them rather than a scrollbar. */
.menu-panel.wide{width:min(400px,calc(100vw - 28px))}
.menu-panel.wide .menu-cols{columns:2;column-gap:6px}
.menu-panel.wide .menu-cols a{break-inside:avoid}
.menu-panel a{
  display:block;padding:7px 11px;border-radius:8px;
  text-decoration:none;color:var(--menu-text);font-size:.92rem;line-height:1.35
}
.menu-panel a:hover{background:var(--menu-hover);color:var(--menu-head)}
.menu-panel a:focus-visible{outline:none;box-shadow:0 0 0 2px var(--bar-gold)}
/* The page you are on is a link to itself; say so rather than just styling it. */
.menu-panel a[aria-current="page"]{color:var(--menu-head);font-weight:650;background:var(--menu-hover)}
.menu-h{
  font-size:.67rem;text-transform:uppercase;letter-spacing:.1em;font-weight:700;
  color:var(--menu-muted);margin:10px 11px 4px
}
.menu-h:first-child{margin-top:2px}
.menu-sep{height:1px;background:var(--menu-stroke);margin:7px 6px}
/* Below this the panels stop being drop-downs and become sheets: pinned under
   the bar and as wide as the viewport, because at 380px a 232px card hanging off
   the third summary would run off the right-hand edge. */
/* No room for the field. The magnifier stays and submits an empty q, which
   lands on /learn/ with the cursor already in that page's own search box — one
   tap, and the keyboard is up on the page that can actually answer.
   860px was the first guess and it was far too cautious: it hid the field from
   every half-screen laptop window. Measured on the deployed bar, the row needs
   674 of 680 with the field shown, and the margin is a near-constant 6px from
   680px all the way up — because the field is clamped to 16vw and shrinks with
   the viewport, so it never gets its own breakpoint wrong. 640px is where the
   compact bar starts anyway, which makes this one number instead of two. */
@media(max-width:640px){ .bar-search input{display:none} }
@media(max-width:640px){
  .topbar-in{height:52px;gap:2px;padding:0 10px}
  .bar-search{margin-left:2px}
  .bar-search button{width:30px;height:30px}
  /* The last resort, and it should never be reached: the three labels are fixed
     strings and the rules below size them to fit a 320px phone. It is here
     because the alternative failure is the whole PAGE scrolling sideways — the
     bar is the one element that spans the viewport, so anything that overflows
     it overflows the document. Scrolling the strip instead keeps that contained.

     ONLY inside this query, and that restriction is the rule. overflow-x makes
     the strip a scroll container, and a scroll container clips BOTH axes: when
     one axis scrolls, the other computes from visible to auto. The strip is
     34px tall and a drop-down hangs ~320px below it, so on a wide screen — where
     a panel is position:absolute — this clipped every menu out of existence.
     They still opened, they still had their geometry, and nothing was drawn or
     clickable, which is why it survived a round of testing: a clipped element
     reports the same getBoundingClientRect as a visible one.

     Below 640px a panel is position:fixed, whose containing block is the
     viewport, so no ancestor's overflow can reach it and the net costs nothing.
     Never lift this out of the query without making the panels fixed at every
     width. */
  .topnav{overflow-x:auto;scrollbar-width:none}
  .topnav::-webkit-scrollbar{display:none}
  /* Clipped, not display:none. The wordmark is the only text in the link, so
     hiding it outright leaves a link whose accessible name is an <img alt="">
     — that is, nothing. This keeps it for a screen reader and takes the space
     back from the layout, which is all the narrow bar actually needs. */
  .brand span{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0
  }
  .menu>summary{padding:7px 8px;font-size:.86rem}
  .bar-play{padding:7px 13px;font-size:.87rem}
  .menu-panel,.menu-panel.wide{
    position:fixed;top:53px;left:8px;right:8px;width:auto;
    max-height:calc(100vh - 66px)
  }
  .menu-panel.wide .menu-cols{columns:1}
}
/* A 360px Android, which is narrower than any iPhone: the compact sizes above
   leave the row about 8px too wide there, and the brand mark is already down to
   its icon. What is left to give is padding and a little type. */
@media(max-width:400px){
  .topbar-in{padding:0 6px}
  /* Measured: below this the three menus, the mark and Play already fill the
     row exactly. The magnifier is the thing that goes, because search is still
     the second item in the Guide menu and nothing else here has a second home. */
  .bar-search{display:none}
  .menu>summary{padding:7px 5px;gap:3px;font-size:.82rem}
  .bar-play{padding:7px 11px;font-size:.83rem}
}
@media(prefers-reduced-motion:reduce){ .menu>summary .caret{transition:none} }

/* The bar's suggestion dropdown. Generated by scripts/build-search.mjs. */
.bar-search{position:relative}
.bs-pop{
  position:absolute;top:calc(100% + 6px);right:0;z-index:60;
  width:min(420px,calc(100vw - 24px));
  background:var(--bar-bg-2,#12281D);border:1px solid rgba(255,255,255,.14);
  border-radius:12px;box-shadow:0 14px 34px rgba(0,0,0,.45);
  padding:5px;max-height:min(62vh,420px);overflow-y:auto
}
.bs-row{
  display:block;padding:8px 10px;border-radius:8px;
  color:#E8F0EA;text-decoration:none;line-height:1.32
}
.bs-row .bs-t{display:block;font-size:.94rem}
.bs-row .bs-w{display:block;font-size:.78rem;color:#8CA396;margin-top:1px}
.bs-row mark{background:rgba(212,175,55,.26);color:inherit;border-radius:2px}
.bs-row:hover{background:rgba(255,255,255,.09)}
/* The keyboard selection has to be obvious at a glance — it is the thing Enter
   will act on, and a wash this faint reads as "nothing is selected". Hover can
   stay subtle; the pointer is already telling you where you are. */
.bs-row.on{
  background:rgba(212,175,55,.17);
  box-shadow:inset 0 0 0 1px rgba(212,175,55,.5);
  outline:none
}
.bs-all{font-size:.84rem;color:var(--bar-gold-soft,#D9C77F)}
.bs-none{margin:0;padding:9px 10px;font-size:.88rem;color:#8CA396}
/* Hidden wherever the bar hides its field, at the same BAR_FIELD_BREAKPOINT the
   field's own rule uses -- interpolated, not retyped, because retyping it is
   exactly how the two came apart. Below it only the magnifier remains, which
   submits an empty q and lands on /learn/ with the cursor in the real field. No
   field, nothing to suggest into. */
@media(max-width:640px){ .bs-pop{display:none} }