/* The nav bar on the landing, sign-in and account pages. Carl, 2026-10-04:
   "the nav bars are all different sizes across pages. Let's keep them all
   the same."

   ONE spec, written twice, because it has to be: the app is a single
   self-contained file (dist/index.html, opened by double-click) and cannot
   load this stylesheet, so src/styles.css carries the same numbers as
   --barH, --barPad and --barPadPhone. tests/nav-e2e.mjs measures all five
   bars (landing, sign-in, account, the start screen, the editor) and fails
   if any of them drifts from the others.

     56px tall, border included. 20px of side padding, 12px at 700px wide and
     under (the app's phone breakpoint, src/phone.js). The C.A.B mark on the
     left at 20px/800 with red dots, back to the landing page. The account
     button on the right, signed in only.

   Colours follow the theme like the app's bars, with the same values as its
   --panel, --line, --tx and --tx3. The landing page's bar is the exception
   (.brand): always dark, because the page under it is dark only on purpose. */
.cabnav{
  --nb:#16181d; --nmenu:#16181d; --nl:#2a2e37; --nt:#e8eaf0; --nt3:#6b7283;
  --nh:#242833; --nsh:#0008; --nacc:#E90003;
  position:fixed; top:0; left:0; right:0; z-index:40;
  height:56px; box-sizing:border-box; padding:0 20px;
  display:flex; align-items:center; gap:14px;
  background:var(--nb); border-bottom:1px solid var(--nl); color:var(--nt);
}
[data-theme=light] .cabnav{
  --nb:#ffffff; --nmenu:#ffffff; --nl:#d8dde5; --nt:#1a1d23; --nt3:#848b99;
  --nh:#eef0f4; --nsh:#00000026;
}
/* The landing page: sticky in its own flow rather than fixed, and dark in
   either theme. */
.cabnav.brand{
  --nb:rgba(0,0,0,.82); --nmenu:#0d0d0d; --nl:#262626; --nt:#fff; --nt3:#a3a3a3;
  --nh:#1f1f1f; --nsh:#000a;
  position:sticky; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
@media (max-width:700px){ .cabnav{padding:0 12px} }

.cabmark{
  margin-right:auto; font-size:20px; font-weight:800; letter-spacing:.02em;
  line-height:1; text-decoration:none; color:var(--nt);
}
.cabmark i{font-style:normal; color:var(--nacc)}
.cabmark:hover{opacity:.8}
.cabnav-right{display:flex; align-items:center; gap:10px}

/* ---- the account button and its menu, as in the app (src/account.js) ---- */
.cabacct{position:relative; display:flex}
.cabacct[hidden], .cabacct [hidden]{display:none}
.cabacct-btn{
  position:relative; padding:4px; border:0; background:none; cursor:pointer;
  color:var(--nt3); line-height:0;
}
.cabacct-btn:hover, .cabacct-btn[aria-expanded="true"]{color:var(--nt)}
.cabacct-btn svg{
  display:block; fill:none; stroke:currentColor; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
}
/* Access requests waiting, admins only: the same badge as the app's. */
.cabacct-btn[data-badge]:not([data-badge=""])::after{
  content:attr(data-badge); position:absolute; top:-5px; right:-6px;
  min-width:16px; height:16px; padding:0 4px; border-radius:8px; box-sizing:border-box;
  background:var(--nacc); color:#fff; font-size:10px; font-weight:700; line-height:16px;
  text-align:center; font-variant-numeric:tabular-nums; pointer-events:none;
}
.cabacct-menu{
  position:absolute; right:0; top:calc(100% + 10px); min-width:210px;
  background:var(--nmenu); border:1px solid var(--nl); border-radius:8px;
  box-shadow:0 10px 28px var(--nsh); padding:5px; display:flex; flex-direction:column;
  font-size:12.5px; line-height:1.45;
}
.cabacct-who{
  color:var(--nt3); font-size:11.5px; padding:7px 10px 8px; margin-bottom:4px;
  border-bottom:1px solid var(--nl); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cabacct-menu a, .cabacct-menu button{
  display:block; text-align:left; padding:7px 10px; border-radius:6px; border:0;
  background:none; color:var(--nt); font:inherit; text-decoration:none; cursor:pointer;
}
.cabacct-menu a:hover, .cabacct-menu button:hover,
.cabacct-menu a:focus-visible, .cabacct-menu button:focus-visible{background:var(--nh); outline:none}
.cabacct-count:empty{display:none}
.cabacct-count{
  margin-left:6px; padding:0 6px; border-radius:8px; background:var(--nacc); color:#fff;
  font-size:10.5px; font-weight:700; line-height:16px; display:inline-block;
}