/* ==========================================================================
   The menu bar and the settings drawer. Shared by every (10) card menu:
   the root service matrix, the Bilateral Library grid, Speech Assistant,
   UN Insights, and anything built later.

   Mobile first. On a phone the cards come FIRST: no title, no lede, nothing
   above the grid but this one bar. Any explaining goes in a section BELOW the
   grid. On a wide screen the same bar sits above the same grid.

   The bar is sticky, so the card images scroll under it. It holds, left to
   right: the Bilateral Navigator wordmark (always a link home), the crumb
   trail, then hard right the two country flags and a grey gear. Flags and gear
   are one control: either opens the drawer, which expands the bar downwards.

   Tokens are the production ones and are expected to be defined by the page
   (--navy, --sky, --text, --line and friends). Nothing here invents a colour.
   ========================================================================== */

/* STICKY NEEDS THIS, and it is a real bug fix (found 2026-08-24).

   Every page on the site carries `html,body{overflow-x:hidden}` to stop sideways
   scrolling, and `overflow-x:hidden` makes that element a SCROLL CONTAINER. A
   `position:sticky` descendant then sticks to that container rather than to the
   viewport, which means it does not stick at all. Measured on live: the .topbar on
   every Speech Assistant and UN Insights page declares position:sticky and none of
   them has ever stuck (scroll 500px, the bar goes to -357px).

   `overflow-x:clip` clips exactly the same overflow WITHOUT creating a scroll
   container, so sticky works. A page that loads this stylesheet after its own
   <style> gets the fix from here; a page whose own rule wins must set `clip`
   itself. _tools/check_menu_standard.py asserts no menu page still says
   `overflow-x:hidden`.

   Caveat: `clip` needs Chrome 90+, Firefox 81+, Safari 16+. On anything older the
   bar simply scrolls away as it does today, which is the current behaviour, so
   there is no regression. */
html,body{overflow-x:clip}

/* ------------------------------------------------------------------- bar --- */
.nbar{position:sticky;top:0;z-index:80;background:rgba(9,22,37,.94);
  backdrop-filter:blur(9px);border-bottom:1px solid var(--line)}
.nbar-in{display:flex;align-items:center;gap:12px;padding:10px 14px;
  max-width:1260px;margin:0 auto}
@media(min-width:900px){.nbar-in{padding:11px 20px}}

/* the wordmark. Always a link to the site root: it is the one thing on every
   page that gets you home. */
a.nbrand{display:flex;align-items:baseline;gap:6px;white-space:nowrap;
  text-decoration:none;color:var(--text);flex:0 0 auto}
a.nbrand:hover{text-decoration:none}
a.nbrand b{font-weight:800;font-size:15px;letter-spacing:-.01em}
a.nbrand span{color:var(--sky);font-weight:600;font-size:15px}
/* Both words stay at every width: the wordmark is the only text in the bar, so
   there is room for it. Nothing sits beside it, by instruction. */

/* ------------------------------------------------------- the corner control --- */
/* Flags and gear sit hard right, on the wordmark's line, and are one button:
   whichever you press opens the same drawer. Small by instruction: 21px discs,
   against the 34px they used to be in the page body. */
.nsettings{margin-left:auto;flex:0 0 auto;display:flex;align-items:center;gap:9px;
  padding:5px 8px;border-radius:99px;border:1px solid var(--line);
  background:rgba(255,255,255,.03);cursor:pointer;transition:.15s}
.nsettings:hover,.nsettings:focus-visible{border-color:rgba(79,184,231,.45);
  background:rgba(79,184,231,.1);outline:none}
.nsettings[aria-expanded="true"]{border-color:rgba(79,184,231,.6);
  background:rgba(79,184,231,.14)}
/* Side by side with a real gap, never overlapping: two countries are two things. */
.nflags{display:flex;align-items:center;gap:6px}
.nflags .f{width:21px;height:21px;border-radius:50%;overflow:hidden;background:#28466B;
  box-shadow:0 0 0 1px rgba(255,255,255,.28);flex:0 0 auto}
.nflags .f img{width:100%;height:100%;object-fit:cover;display:block}
/* 18px box for a 17px icon: the stroked cog needs the spare half pixel or its rim
   clips against the flex item's edge. */
.ngear{width:18px;height:18px;flex:0 0 auto;color:var(--text-soft);transition:.15s;
  overflow:visible}
.nsettings:hover .ngear,.nsettings[aria-expanded="true"] .ngear{color:var(--sky)}
.ngear svg{display:block;width:100%;height:100%}

/* --------------------------------------------------------------- the drawer --- */
/* It expands the bar downwards rather than floating over the page, so the bar
   grows and the grid slides down under it. */
.ndrawer{max-height:0;overflow:hidden;transition:max-height .38s cubic-bezier(.22,1,.36,1);
  border-top:0 solid var(--line)}
.ndrawer.open{max-height:min(78vh,660px);overflow-y:auto;border-top-width:1px}
.ndrawer-in{max-width:1260px;margin:0 auto;padding:16px 14px 18px}
@media(min-width:900px){.ndrawer-in{padding:18px 20px 20px}}
.ndrawer h4{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sky);font-weight:700;margin:0 0 9px}
.nsec+.nsec{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
@media(min-width:820px){
  .ndrawer-in{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:26px;align-items:start}
  .nsec+.nsec{margin-top:0;padding-top:0;border-top:none}
}

/* ------------------------------------------------------- the country pickers --- */
.npair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:520px){.npair{grid-template-columns:1fr}}
.npick{position:relative}
.npick>label{display:block;font-size:11px;color:var(--text-soft);margin-bottom:5px;
  font-weight:600}
/* the closed picker: a flag, the name, a caret */
.npick .cur{width:100%;display:flex;align-items:center;gap:8px;padding:8px 10px;
  border-radius:9px;border:1px solid var(--line);background:var(--navy-deep);
  color:var(--text);font:inherit;font-size:13.5px;cursor:pointer;text-align:left;
  transition:.15s}
.npick .cur:hover,.npick .cur:focus-visible{border-color:rgba(79,184,231,.5);outline:none}
.npick .cur .f{width:19px;height:19px;border-radius:50%;overflow:hidden;flex:0 0 auto;
  background:#28466B;box-shadow:0 0 0 1px rgba(255,255,255,.22)}
.npick .cur .f img{width:100%;height:100%;object-fit:cover;display:block}
.npick .cur .nm{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.npick .cur .car{flex:0 0 auto;color:var(--text-soft);font-size:10px;transition:transform .18s}
.npick.open .cur .car{transform:rotate(180deg)}

/* the open list. Same treatment as the similarity list at the end of a Library
   subchapter (.cblist): a capped scroll box with the thin, barely visible thumb
   the rest of the site uses, never a hard grey scrollbar. */
.npick .list{position:absolute;left:0;right:0;top:calc(100% + 5px);z-index:5;display:none;
  max-height:262px;overflow-y:auto;padding:5px;border-radius:11px;
  border:1px solid rgba(79,184,231,.3);background:#0b1a2b;box-shadow:var(--shadow,0 12px 32px rgba(4,12,22,.5));
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.16) transparent}
.npick.open .list{display:block}
.npick .list::-webkit-scrollbar{width:5px}
.npick .list::-webkit-scrollbar-track{background:transparent}
.npick .list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:99px}
.npick .list::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.3)}
.npick .list .q{width:100%;margin-bottom:4px;padding:7px 9px;border-radius:8px;
  border:1px solid var(--line);background:var(--navy);color:var(--text);font:inherit;
  font-size:13px}
.npick .list .q:focus{outline:none;border-color:rgba(79,184,231,.55)}
.npick .list button{width:100%;display:flex;align-items:center;gap:8px;padding:7px 8px;
  border:none;border-radius:8px;background:none;color:var(--text);font:inherit;
  font-size:13px;cursor:pointer;text-align:left}
.npick .list button:hover,.npick .list button:focus-visible{background:rgba(79,184,231,.16);
  outline:none}
.npick .list button[aria-selected="true"]{background:rgba(79,184,231,.12);font-weight:700}
.npick .list button .f{width:18px;height:18px;border-radius:50%;overflow:hidden;flex:0 0 auto;
  background:#28466B;box-shadow:0 0 0 1px rgba(255,255,255,.2)}
.npick .list button .f img{width:100%;height:100%;object-fit:cover;display:block}
.npick .list .none{padding:9px;font-size:12.5px;color:var(--text-soft)}

.nchange{margin-top:11px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.nbtn{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:10px;
  border:1px solid rgba(79,184,231,.5);background:rgba(79,184,231,.16);color:var(--text);
  font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;transition:.15s}
.nbtn:hover{background:rgba(79,184,231,.3)}
.nbtn:disabled{opacity:.4;cursor:not-allowed}
.nbtn.ghost{background:transparent;border-color:var(--line);color:var(--text-soft);
  font-weight:500}
.nbtn.ghost:hover{color:var(--text);border-color:rgba(79,184,231,.4)}
.nnote{font-size:11.5px;color:var(--text-soft);line-height:1.5}

/* ------------------------------------------------------------ usage, limits --- */
.nmeter+.nmeter{margin-top:12px}
.nmeter .top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  font-size:12px;margin-bottom:5px}
.nmeter .top b{font-weight:600;color:var(--text)}
.nmeter .top span{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--text-soft)}
.nmeter .track{height:7px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.nmeter .fill{height:100%;border-radius:99px;background:linear-gradient(90deg,#2F5D9E,#4FB8E7)}
.nmeter.warn .fill{background:linear-gradient(90deg,#B58A2A,#E8B84B)}
.ncred{margin-top:13px;display:flex;align-items:baseline;gap:8px}
.ncred b{font-family:'IBM Plex Mono',monospace;font-size:21px;color:var(--sky);line-height:1}
.ncred span{font-size:12px;color:var(--text-soft)}

/* ------------------------------------------------------------------ selects --- */
.nfield+.nfield{margin-top:11px}
.nfield label{display:block;font-size:11px;color:var(--text-soft);margin-bottom:5px;
  font-weight:600}
.nfield select{width:100%;padding:8px 10px;border-radius:9px;border:1px solid var(--line);
  background:var(--navy-deep);color:var(--text);font:inherit;font-size:13.5px}
.nfield select:focus{outline:none;border-color:rgba(79,184,231,.55)}

/* --------------------------------------------------------------- close rail --- */
/* Closing the drawer: four ways out, because a drawer you cannot dismiss is
   worse than no drawer. Esc, a click outside, the same flags-and-gear button, or
   this rail, which is also the drawer's bottom edge and reads as "done". */
.nclose{margin-top:16px;width:100%;display:flex;align-items:center;justify-content:center;
  gap:8px;padding:9px;border:none;border-radius:10px;background:rgba(255,255,255,.05);
  color:var(--text-soft);font:inherit;font-size:12px;font-weight:600;cursor:pointer;
  transition:.15s}
.nclose:hover,.nclose:focus-visible{background:rgba(79,184,231,.14);color:var(--text);
  outline:none}
.nclose .grip{width:34px;height:3px;border-radius:99px;background:rgba(255,255,255,.3)}
@media(min-width:820px){.nclose{grid-column:1/-1;margin-top:4px}}

/* A saved change says so, briefly, instead of the drawer just shutting. */
.ntoast{position:fixed;left:50%;transform:translateX(-50%) translateY(10px);bottom:22px;
  z-index:120;padding:10px 16px;border-radius:11px;font-size:13px;font-weight:600;
  background:rgba(72,199,154,.16);border:1px solid rgba(72,199,154,.5);color:#A9E5CE;
  opacity:0;pointer-events:none;transition:.22s}
.ntoast.show{opacity:1;transform:translateX(-50%)}

/* ---------------------------------------------------------- mobile first grid --- */
/* On a phone the cards are the first thing in the page. Anything that used to sit
   above them, the flag row, the big title, the lede, the notes, moves below the
   grid and is marked .below-grid. On a wide screen it can come back above. */
/* One clear line between the bar and the top row of cards, so they never touch
   before you scroll. `body` is on the selector deliberately: the page's own
   `.wrap{padding:0 20px 90px}` sets padding-top:0 at the same specificity and, being
   later in the document, used to win and close the gap to nothing. */
body .cards-first{padding-top:18px}
@media(min-width:900px){body .cards-first{padding-top:22px}}
/* The grids carry their own margin-top from the days when a title sat above them
   (14px on the root matrix, 26px on the Library, 20px in the sections). Left alone
   that stacks on the padding above and the "single line" becomes three. Zero it: the
   gap is set in one place, here. */
body .cards-first .tgrid,
body .cards-first .chgrid,
body .cards-first #tiles{margin-top:0}
.below-grid{margin-top:30px;padding-top:20px;border-top:1px solid var(--line)}