/* css/topbar.css — the shell: skip link, top bar, nav links, the phone menu, main.
   One of the files src/index.html links in order; see tokens.css for why. */

/* ==========================================================================
   Shell
   ========================================================================== */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--ink);color:var(--paper);padding:.6rem 1rem;border-radius:0 0 var(--r-sm) 0;
}
.skip-link:focus{left:0}

.topbar{
  border-bottom:1px solid var(--rule-strong);  /* structural, so not --rule */
  background:var(--field);
}
.topbar-inner{
  max-width:var(--page);margin:0 auto;padding:15px 20px;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
}
.topbar nav{display:flex;gap:.25rem;flex-wrap:wrap;margin-left:auto}
.whoami{font-family:var(--data);font-size:.75rem;color:var(--ink-soft);opacity:.8}

.navlink{
  display:inline-block;padding:.45rem .7rem;border-radius:var(--r-sm);
  text-decoration:none;color:var(--ink);font-weight:600;font-size:.9375rem;
  border:1.5px solid transparent;
}
.navlink:hover{background:var(--paper)}
.navlink[aria-current="page"]{
  border-color:var(--rule-strong);background:var(--paper);
}
/* The count badge must never include the reviewer's own entries — that is
   enforced in the query, not here. */
.navlink .count{font-family:var(--data);font-size:.75rem;color:var(--ink-soft);margin-left:.35rem}

/* THE MENU EXISTS ONLY BELOW 640px — CIT-10. Above it the links are the
   navigation, and a button that hides them would be a step backwards. Both
   halves are display:none here and switched on in the phone block below. */
.nav-toggle{display:none}
.nav-panel{display:none}

main{max-width:var(--page);margin:0 auto;padding:var(--gap-lg) var(--gap) 4rem}
.page-head{margin-bottom:30px}
.page-head p{margin:10px 0 0;color:var(--ink-soft);max-width:62ch}
/* :not(.label): the eyebrow keeps its 11px; only prose intros grow — CIT-15. */
.page-head p:not(.label){font-size:1.0625rem}

@media (max-width:640px){
  /* ---- the top bar becomes a menu — CIT-10 -------------------------------
     One line at every capability: wordmark, then the button hard right.
     Nothing wraps, because nothing is left to wrap. */
  .topbar-inner{flex-wrap:nowrap;gap:.5rem}
  .topbar-inner > .wordmark{margin-right:auto;min-width:0}
  .nav-toggle{
    display:inline-flex;align-items:center;gap:.45rem;flex:0 0 auto;
    min-height:2.5rem;padding:.45rem .7rem;
    background:var(--field);color:var(--ink);font:inherit;font-weight:600;font-size:.9375rem;
    border:1.5px solid var(--rule-strong);border-radius:var(--r-sm);cursor:pointer;
  }
  .nav-toggle[aria-expanded="true"]{background:var(--paper)}
  .nav-toggle .bars{display:block;flex:0 0 auto}
  /* The count rides on the closed button, so work waiting is visible without
     opening anything. */
  .nav-toggle .count{font-family:var(--data);font-size:.75rem;color:var(--ink-soft)}

  /* The panel is part of the bar, not a layer over the page: it pushes the
     content down rather than covering it, so nothing is hidden behind it and
     there is no scroll lock to get wrong. */
  .nav-panel{
    display:block;
    border-top:1px solid var(--rule);
    background:var(--field);
    padding:.5rem var(--gap) .75rem;
  }
  .nav-panel[hidden]{display:none}
  .nav-panel nav{display:flex;flex-direction:column;gap:.15rem;margin:0}
  .nav-panel .navlink{
    display:flex;align-items:center;justify-content:space-between;
    min-height:2.75rem;padding:.55rem .7rem;border-radius:var(--r-sm);
  }
  .nav-panel .navlink .count{margin-left:.5rem}
  .nav-panel .nav-foot{
    display:flex;align-items:center;gap:var(--gap);flex-wrap:wrap;
    margin-top:.6rem;padding-top:.6rem;border-top:1px solid var(--rule);
  }
  .nav-panel .whoami{flex:1 1 auto;min-width:0}

  /* Hidden in the bar itself below the breakpoint — they live in the panel. */
  .topbar-inner > nav,
  .topbar-inner > .whoami,
  .topbar-inner > .btn{display:none}
  /* ...except on the gate, which has no links and no panel — a menu button
     there would open a door to nowhere, so its bar keeps the shape it has. */
  .topbar--gate .topbar-inner > .whoami,
  .topbar--gate .topbar-inner > .btn{display:inline-flex}
  .topbar--gate .topbar-inner{flex-wrap:wrap}
}