/* The top bar of every page (11.9 of docs/part2-spec.md): the landing's floating glass capsule, 56 px tall and one
   row at every width, on the same pixels on the landing, the user pages and the admin pages. The brand; the pill links
   and Setup; the menus (details.menu: a summary, then .menu-panel); Sign in and the plain Sign out. It is loaded after
   landing.css or app.css, so it sets everything the bar needs itself, every colour explicit, and nothing here reaches
   outside .bar-wrap but the page's scrollbar gutter (below). The menus work without JavaScript; static/js/menu.js only
   adds the closing rules. */

/* With classic scrollbars (always shown, as Windows can be set to), a page that doesn't scroll would be a scrollbar
   wider than one that does, and the bar, centred in it, would move sideways between them: every page keeps the
   scrollbar's room, so the bar stays put. Overlay scrollbars (phones, Windows 11 and macOS by default) take no room
   and change nothing. */
html { scrollbar-gutter: stable; }

/* The box: as wide as the landing's content (1200 px at most) with 4% of the page's width on each side, 16 to 40 px.
   A padding percentage is of the containing block's width, which is the page's width on every page (the landing's
   hero and the pages' header span the page), so the bar lands on the same pixels everywhere. Its colour scheme is its
   own, dark: app.css sets one for the account pages, landing.css none, and a panel that scrolls would show a light
   scrollbar on the landing where scrollbars are always shown. */
.bar-wrap {
  position: relative; z-index: 40; color-scheme: dark;
  box-sizing: border-box; width: 100%; max-width: 1200px; margin: 0 auto;
  padding: 14px clamp(16px, 4%, 40px) 0;
}
/* One row, 56 px (40 px controls, 7 px padding, 1 px border). Larger text than it was made for (Firefox's Zoom Text
   Only, a phone's larger font setting) must not push Menu, Sign in, Sign out or a menu off the right end: once the
   auto margins below have no room left to take, justify-content puts what doesn't fit out at the left, where the
   capsule's edge cuts it (overflow-x: clip; the panels below the bar are not cut). So the brand gives way first; and
   the bar grows taller rather than letting taller text out. At the text size it was made for none of this shows. */
.bar-wrap > .bar {
  box-sizing: border-box; display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 12px;
  min-height: 56px; min-width: 0; margin: 0; padding: 7px 7px 7px 12px; border-radius: 999px; overflow-x: clip;
  background: rgba(6, 10, 28, .62); border: 1px solid rgba(150, 175, 255, .2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}

/* ---------- the brand: PandaMode.io's M icon and "kie for Claude" (on the admin pages "· Admin" beside it) ---------- */
.bar .brand {
  flex: none; box-sizing: border-box; display: inline-flex; align-items: center; gap: 10px; min-height: 40px;
  margin: 0; padding: 0; border-radius: 999px;
  font: 500 17px/1 "Sora", "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif; letter-spacing: -.01em;
  color: #F3F6FF; text-decoration: none; white-space: nowrap;
}
.bar .brand b { font-weight: 700; }
.bar .brand-mark {
  flex: none; display: block; width: 25px; height: 28px; max-width: none;
  filter: drop-shadow(0 0 8px rgba(56, 217, 255, .35));
}
.bar .brand-tag {
  flex: none; margin-left: -7px;
  font: 500 17px/1 "Sora", "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif; letter-spacing: -.01em;
  color: #A9B6E3; white-space: nowrap;
}

/* ---------- the right side: pushed to the bar's right end (the landing's Sign in, .bar-end, the phone's Menu or the
   admin's plain Sign out); with nothing there (a signed-out page, the admin's sign-in) the brand keeps left ---------- */
.bar-wrap > .bar > .bar-end, .bar-wrap > .bar > .signin, .bar-wrap > .bar > .nav-phone,
.bar-wrap > .bar > .signout-pill { margin-left: auto; }
.bar-wrap > .bar > .brand:last-child, .bar-wrap > .bar > .brand-tag:last-child { margin-right: auto; }
.bar .bar-end { flex: 0 1 auto; min-width: 68px; display: flex; align-items: center; gap: 4px; }
.bar .nav { flex: none; display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; }

/* The destinations and Setup: pill links, the current page in mint. */
.bar .nav > a, .bar .nav summary {
  box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px; min-height: 40px;
  margin: 0; padding: 0 13px; border-radius: 999px; border: 0; background: transparent; box-shadow: none;
  font: 500 14.5px/1 "Sora", "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif; letter-spacing: -.005em;
  color: #D3DBF7; text-decoration: none; white-space: nowrap; cursor: pointer;
}
@media (hover: hover) {
  .bar .nav > a:hover, .bar .nav summary:hover { background: rgba(255, 255, 255, .06); color: #F3F6FF; }
}
.bar .nav .menu[open] > summary { background: rgba(255, 255, 255, .08); color: #F3F6FF; }
.bar .nav > a[aria-current="page"], .bar .nav summary.current, .bar .nav .menu[open] > summary.current {
  background: rgba(67, 245, 184, .14); color: #43F5B8; box-shadow: inset 0 0 0 1px rgba(67, 245, 184, .4);
}

/* Sign in, the account menu's <Name>, the phone's Menu and the admin's plain Sign out: the landing's glass pill. */
.bar .signin, .bar .acct, .bar .menu-btn, .bar .signout-pill button {
  box-sizing: border-box; display: inline-flex; align-items: center; gap: 8px; min-height: 40px;
  margin: 0; padding: 8px 18px; border-radius: 999px;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(190, 205, 255, .32); box-shadow: none;
  font: 600 15px/1 "Sora", "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif; letter-spacing: normal;
  color: #F3F6FF; text-decoration: none; white-space: nowrap; cursor: pointer; transform: none;
  -webkit-appearance: none; appearance: none; transition: background-color .25s, border-color .25s;
}
.bar .acct { padding: 8px 13px 8px 16px; }
.bar .menu-btn { padding: 8px 16px 8px 13px; }
@media (hover: hover) {
  .bar .signin:hover, .bar .acct:hover, .bar .menu-btn:hover, .bar .signout-pill button:hover {
    background: rgba(255, 255, 255, .14); border-color: rgba(190, 205, 255, .6); color: #F3F6FF; transform: none;
  }
}
.bar .menu[open] > .acct, .bar .menu[open] > .menu-btn { background: rgba(255, 255, 255, .14); border-color: rgba(190, 205, 255, .6); }
.bar .signout-pill button:active { transform: none; }
.bar .signout-pill { flex: none; display: flex; margin: 0; }
/* A long name gives way first: the pill may shrink and the name is cut with an ellipsis (its title has all of it), to
   68 px at the least (the chevron and a letter or two: never reached at this text size, from 320 px up; .bar-end
   and the menu keep the same room), so that larger text cuts the brand instead of the menu's trigger. The summary holds
   its hidden "Your account: " (position: relative), so that stays inside the bar too. */
.bar .acct { position: relative; min-width: 68px; max-width: 100%; }
.bar .menu.menu-account { min-width: 68px; }
.bar .acct-name { display: block; min-width: 0; max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.25; }

/* ---------- menus: a disclosure (details/summary), no marker, a chevron that turns when open ---------- */
.bar .menu { position: static; flex: 0 1 auto; min-width: 0; display: block; padding: 0; }
.bar .menu-setup { position: relative; }
/* The phone's Menu stands in a navigation landmark of its own (Main), there while the Menu is closed too. */
.bar .nav-phone { flex: none; margin: 0; padding: 0; }
/* A block-level flex box, not inline: no line box around it, so every trigger is exactly its 40 px. */
.bar .menu > summary { display: flex; list-style: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.bar .menu > summary::-webkit-details-marker { display: none; }
.bar .menu > summary::marker { content: ""; }
.bar .chev { flex: none; display: block; width: 12px; height: 12px; opacity: .85; }
.bar .menu[open] > summary .chev { transform: rotate(180deg); }
@media (prefers-reduced-motion: no-preference) {
  .bar .chev { transition: transform .2s cubic-bezier(.2, .7, .2, 1); }
}
.bar .lines { flex: none; display: block; width: 18px; height: 18px; }

/* The panel: the bar's navy, opaque (text behind a 97 % panel still showed through on the phone Menu), 16 px below
   its trigger and right-aligned with it, never wider than the screen less 16 px a side and never taller than the
   screen below the bar (it scrolls instead). Absolutely placed, so opening it moves nothing. Setup's hangs from
   Setup itself (it shows only on wide screens, far from the edges). Every other menu's trigger ends the bar, so its
   panel is placed in .bar-wrap: 8 px below the bar, its right edge the trigger's (the bar's side gutter plus the
   bar's 1 px border and 7 px padding), and at most .bar-wrap's width less that and 16 px. A percentage there is of
   .bar-wrap, the page's width without a classic scrollbar (100vw would count one in, and a long name's panel would
   reach the left edge). */
.bar .menu-panel {
  position: absolute; z-index: 50; top: calc(100% + 16px); right: 0;
  box-sizing: border-box; width: max-content; min-width: 224px; max-width: min(340px, calc(100vw - 40px));
  max-height: calc(100vh - 100px); max-height: calc(100dvh - 100px); overflow-y: auto; overscroll-behavior: contain;
  margin: 0; padding: 8px; border-radius: 16px;
  background: #0A102C; border: 1px solid rgba(150, 175, 255, .2);
  box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .9), 0 0 0 1px rgba(6, 10, 28, .5), inset 0 1px 0 rgba(255, 255, 255, .05);
  text-align: left; white-space: normal; cursor: auto;
}
.bar .menu:not(.menu-setup) > .menu-panel {
  top: calc(100% + 8px); right: calc(clamp(16px, 4%, 40px) + 8px);
  max-width: min(340px, calc(100% - clamp(16px, 4%, 40px) - 24px));
}
/* On the landing the bar stands in the hero, which hides what leaves it (the aurora). Signed in, it is the person's
   /app bar, with /app's menus: every panel starts 78 px down (Setup's 16 px below Setup, the others 8 px below the
   bar), so each ends at 678 px at the most, before the hero does (710 px at the least, at any width), and scrolls if
   it needs more (the phone Menu's with a long name or email). */
.v-aurora .bar .menu-panel { max-height: min(600px, calc(100vh - 100px)); max-height: min(600px, calc(100dvh - 100px)); }
.bar .menu-nav { display: block; margin: 0; padding: 0; }
/* Rows: at least 42 px tall; hover is the bar's glass, at once (Sign out too, which app.css's buttons would fade), the
   current page the bar's mint. */
.bar .menu-panel a, .bar .menu-panel form.signout button {
  box-sizing: border-box; display: flex; align-items: center; width: 100%; min-height: 42px;
  margin: 0; padding: 0 14px; border-radius: 10px; border: 0; background: transparent; box-shadow: none;
  font: 500 15px/1.2 "Sora", "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif; letter-spacing: -.005em;
  color: #D3DBF7; text-decoration: none; text-align: left; white-space: nowrap; cursor: pointer; transform: none;
  justify-content: flex-start; -webkit-appearance: none; appearance: none; transition: none;
}
@media (hover: hover) {
  .bar .menu-panel a:hover, .bar .menu-panel form.signout button:hover { background: rgba(255, 255, 255, .07); color: #F3F6FF; transform: none; }
}
.bar .menu-panel form.signout button:active { transform: none; }
.bar .menu-panel a[aria-current="page"] {
  background: rgba(67, 245, 184, .14); color: #43F5B8; box-shadow: inset 0 0 0 1px rgba(67, 245, 184, .4);
}
.bar .menu-panel form.signout { display: block; margin: 0; }
/* Setup's heading and the account part (who is signed in, Sign out), each after a hairline. */
.bar .menu-group, .bar .menu-who { margin: 6px 0 0; padding: 6px 0 0; border-top: 1px solid rgba(150, 175, 255, .16); }
.bar .menu-panel > .menu-who:first-child { margin: 0; padding: 0; border-top: 0; }
.bar .menu-label {
  margin: 0; padding: 8px 14px 6px;
  font: 500 11.5px/1.3 "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  letter-spacing: .12em; text-transform: uppercase; color: #A9B6E3;
}
.bar .menu-id { display: grid; gap: 3px; margin: 0; padding: 8px 14px 10px; }
.bar .menu-name {
  font: 600 15px/1.35 "Sora", "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif; letter-spacing: -.005em;
  color: #F3F6FF; overflow-wrap: anywhere;
}
.bar .menu-email, .bar .menu-note {
  font: 400 14px/1.4 "DM Sans", "Segoe UI", "Helvetica Neue", Roboto, Arial, sans-serif; color: #A9B6E3; overflow-wrap: anywhere;
}

/* ---------- focus: the Aurora ring (inside the rows of a panel, which scrolls and would cut it) ---------- */
.bar a:focus-visible, .bar summary:focus-visible, .bar button:focus-visible { outline: 3px solid #8FF0FF; outline-offset: 3px; }
.bar .menu-panel a:focus-visible, .bar .menu-panel button:focus-visible { outline-offset: -3px; }
.bar a:focus:not(:focus-visible), .bar summary:focus:not(:focus-visible), .bar button:focus:not(:focus-visible) { outline: none; }

/* ---------- widths: below 880 px the destinations and the account menu fold into the one Menu ---------- */
/* Below 1000 px the row's name is cut sooner, so the row fits from 880 px with room to spare (a classic scrollbar
   takes 17 px of it). */
@media (max-width: 999.98px) {
  .bar .menu-account.bar-wide .acct-name { max-width: 8rem; }
}
.bar .bar-narrow { display: none; }
@media (max-width: 879.98px) {
  .bar .bar-wide { display: none; }
  .bar .bar-narrow { display: block; }
}
/* Phones: the landing's narrow bar (a little less padding, the brand at 16 px). Below 400 px the admin's plain Sign out
   is a little narrower, so "· Admin" fits beside it down to 375 px (and a classic scrollbar's room still leaves it in
   the bar at 320). Below 375 px "· Admin" gives way to the account menu or Sign out; with nothing beside it (the
   admin's sign-in page) it stays. */
@media (max-width: 479.98px) {
  .bar-wrap > .bar { padding-left: 10px; }
  .bar .brand, .bar .brand-tag { font-size: 16px; }
}
@media (max-width: 399.98px) {
  .bar .signout-pill button { padding-left: 12px; padding-right: 12px; }
}
@media (max-width: 374.98px) {
  .bar .brand-tag:not(:last-child) { display: none; }
}

/* ---------- forced colours (Windows High Contrast): backgrounds and shadows are replaced, so the current page (and
   Setup, on a Setup page) gets an outline of the text's colour, as a focused control gets its ring ---------- */
@media (forced-colors: active) {
  .bar .nav > a[aria-current="page"]:not(:focus-visible), .bar .nav summary.current:not(:focus-visible),
  .bar .menu-panel a[aria-current="page"]:not(:focus-visible) {
    outline: 2px solid CanvasText; outline-offset: -2px;
  }
}