/* The pages menu: the About footer's own groups (clusterz, Features, Docs), in its order and words.
   From 700px: the three group names in the top bar beside the logo, each opening its pages under it.
   Under 700px the three names do not fit beside the logo and the hero's LFG, so a phone keeps the side tab
   (.pg, below), which opens to the left into the same three groups, headed as the footer heads them.
   The menus take the app's colours: --k-g1 fill, --k-g2 under the pointer and for the page you are on, --k-w8 text,
   --k-gr chevrons, --k-hl hairline, and the app's glyphs (src/chrome/icons.ts).
   No script: each group is a <details name="pn">, so a click or a tap opens it and opening one closes the others;
   with a mouse, resting on a name opens it too; a press anywhere outside an open group closes it (the backdrop below). */

.pn{
  --pn-fill:#0d0b1c;   /* --k-g1 */
  --pn-lit:#161522;    /* --k-g2 (--v2-card) */
  --pn-text:#f8f8f8;   /* --k-w8 */
  --pn-soft:#c9c9d1;
  --pn-muted:#9899a3;  /* --k-gr */
  --pn-line:rgba(203,208,235,.10);  /* --k-hl: the hairline round a menu */
  --pn-focus:#8b58e4;
  position:relative; display:flex; align-items:center; gap:2px;
  font-family:-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
}
.pn details{ position:relative; }
.pn summary{ display:flex; align-items:center; gap:6px; padding:8px 10px; border-radius:8px; list-style:none; cursor:pointer;
  font-size:14px; font-weight:600; line-height:1; color:var(--pn-soft); white-space:nowrap;
  -webkit-tap-highlight-color:transparent; user-select:none; }
.pn summary::-webkit-details-marker{ display:none; }
.pn summary::marker{ content:''; }
.pn summary:hover, .pn details[open] > summary, .pn-g:has([aria-current="page"]) > summary{ color:var(--pn-text); }
.pn summary:focus-visible{ outline:2px solid var(--pn-focus); outline-offset:0; }
.pn-chev{ display:block; width:14px; height:14px; flex:none; color:var(--pn-muted); }
.pn details[open] > summary .pn-chev{ transform:rotate(180deg); }
/* an open group lays a clear backdrop over the page from its own name, so a press anywhere outside lands on the
   name and closes it; the group's pages sit above it */
.pn details[open] > summary::before{ content:''; position:fixed; inset:0; z-index:90; cursor:default; }
/* the other names stay above it, so one press moves from one group to the next */
.pn details:not([open]) > summary{ position:relative; z-index:92; }

/* a group's pages, under its name */
.pn-menu{ position:absolute; z-index:91; top:calc(100% + 8px); left:0; box-sizing:border-box; padding:8px;
  border-radius:12px; border:1px solid var(--pn-line); background:var(--pn-fill); box-shadow:0 24px 60px rgba(0,0,0,.7); }
.pn-menu{ min-width:224px; }
.pn-menu::before{ content:''; position:absolute; left:0; right:0; top:-8px; height:8px; } /* the pointer's way down */
.pn-menu a{ display:block; padding:10px 12px; border-radius:8px; font-size:14px; font-weight:500; line-height:1.2;
  color:var(--pn-soft); text-decoration:none; white-space:nowrap; }
.pn-menu a:hover, .pn a[aria-current="page"]{ background:var(--pn-lit); color:var(--pn-text); }
.pn a:focus-visible{ outline:2px solid var(--pn-focus); outline-offset:-2px; }

/* with a mouse, resting on a name opens its group while none is open by a click (a closed <details> keeps its
   content in ::details-content) */
@media (hover:hover) and (pointer:fine){
  .pn:not(:has(details[open])) .pn-g:hover::details-content{ content-visibility:visible; }
  .pn-g:hover > summary{ color:var(--pn-text); }
  .pn-g:hover > summary .pn-chev{ transform:rotate(180deg); }
}

/* a feature page: the names beside the logo */
.bar > .wrap .pn{ margin-right:auto; }

/* /about: the bar floats over the hero, so the names sit beside the logo and clear of the hero's LFG, carry the
   logo's shadow, and past the hero sit on the same ink plate as the logo */
#bar .pn{ align-self:flex-start; margin:2px auto 0 6px; border-radius:8px; transition:background-color .2s; }
#bar:not(.plate) .pn summary{ text-shadow:0 2px 14px rgba(0,0,0,.65); }
#bar.plate .pn{ background:var(--ink, #060510); }

/* ---- a phone: the side tab --------------------------------------------------------------------------------------
   The app's own edge tab, the collapsed Positions panel (src/styles/v2-positions-frame.css #rreopen, App.tsx): 44px
   wide, flush to the screen's right edge under the bar, its free side rounded, a --k-g1 fill with no edge, the
   chevrons in muted grey over the word set on its side. It scrolls away with the page and opens to the left into the
   three groups, each under its name set as the footer sets it (about.css .foot-links b: green capitals, wide). */
.pg{ display:none; }
@media (max-width:699.98px){
  .pn{ display:none; }
  /* a feature page's title wraps before the tab instead of running under it (/about's opens further down) */
  .hero h1#top{ padding-right:32px; }
  .pg{
    --pg-fill:#0d0b1c;   /* --k-g1 */
    --pg-lit:#161522;    /* --k-g2 (--v2-card) */
    --pg-text:#f8f8f8;   /* --k-w8 */
    --pg-soft:#c9c9d1;
    --pg-muted:#9899a3;  /* --k-gr */
    --pg-line:rgba(203,208,235,.10);  /* --k-hl */
    --pg-focus:#8b58e4;
    display:block; position:absolute; top:64px; right:0; z-index:90;
    font-family:-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  }
}
.pg-tab{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:10px;
  width:44px; padding:14px 0; box-sizing:border-box; border-radius:12px 0 0 12px; border:0;
  background:var(--pg-fill); color:var(--pg-text); list-style:none; cursor:pointer;
  -webkit-tap-highlight-color:transparent; user-select:none; }
.pg-tab::-webkit-details-marker{ display:none; }
.pg-tab::marker{ content:''; }
.pg-tab:focus-visible{ outline:2px solid var(--pg-focus); outline-offset:-2px; }
.pg-chev{ display:block; width:18px; height:18px; flex:none; color:var(--pg-muted); }
.pg-l{ writing-mode:vertical-rl; transform:rotate(180deg); font-size:14px; font-weight:500; letter-spacing:.02em; line-height:1; }
.pg[open] > .pg-tab{ border-radius:0; }
/* open, the tab lays a clear backdrop over the page, so a tap anywhere outside lands on the tab and closes it */
.pg[open] > .pg-tab::before{ content:''; position:fixed; inset:0; cursor:default; }

/* the panel: out to the left of the tab, the same fill, so the two read as one piece; above the backdrop. Its four
   groups sit two by two, as the footer sets them on a phone, so it ends well inside the screen */
.pg-panel{ position:absolute; z-index:2; top:0; right:44px; width:min(320px, calc(100vw - 60px)); box-sizing:border-box;
  padding:8px; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:4px;
  border-radius:12px 0 12px 12px; background:var(--pg-fill); box-shadow:0 24px 60px rgba(0,0,0,.7); }
.pg-panel > div:nth-child(n+3){ margin-top:4px; padding-top:4px; border-top:1px solid var(--pg-line); }
.pg-panel b{ display:block; padding:12px 12px 6px; font-size:12px; font-weight:600; line-height:1; letter-spacing:.12em;
  text-transform:uppercase; color:#21c95e; }
.pg-panel a{ display:block; padding:10px 12px; border-radius:8px; font-size:14px; font-weight:500; line-height:1.2;
  color:var(--pg-soft); text-decoration:none; overflow-wrap:anywhere; }
.pg-panel a:hover, .pg-panel a[aria-current="page"]{ background:var(--pg-lit); color:var(--pg-text); }
.pg-panel a:focus-visible{ outline:2px solid var(--pg-focus); outline-offset:-2px; }

/* the one movement: a menu drops in under its name */
@media (prefers-reduced-motion: no-preference){
  .pn-menu{ transition:opacity .16s ease, transform .16s ease; }
  @starting-style{ .pn-menu{ opacity:0; transform:translateY(-6px); } }
  .pg-panel{ transition:opacity .16s ease, transform .16s ease; }
  @starting-style{ .pg-panel{ opacity:0; transform:translateX(8px); } }
  .pn-chev{ transition:transform .16s ease; }
}