/* ============================================================================
   nav.css — the brand-row accordion, and the accordion primitive it is built on
   ----------------------------------------------------------------------------
   One component, two placements:

     · variant "sidebar"  the marketplace's sidebar head (and, on a phone, the
                          same head inside the filter sheet). The panel is
                          IN FLOW: the head is a panel of its own and the pages
                          push the filters down, which is what a sidebar nav
                          does.
     · variant "bar"      the shell's sticky 56px header on agent.html and every
                          v2 document page. The panel FLOATS under the brand: a
                          sticky bar cannot grow without shoving the document
                          it is stuck to.

   Same trigger, same chevron, same ≈200ms reveal, same keyboard model. Only the
   placement differs, and nav.js emits identical markup for both.

   The reveal animates `grid-template-rows` 0fr -> 1fr rather than a measured
   pixel height: it needs no JS measurement, it survives content that changes
   after mount (the `soon` tags become links when a page ships), and it is the
   one layout property that can express "to the height this content wants".
   The page's own `--dur-200` / `--ease` carry it, and the reduced-motion block
   in tokens.css re-points --dur-200 to .01ms, so reduced motion snaps.

   Nothing below invents a colour, radius, blur, shadow or type value: every
   declaration resolves through src/shared/tokens.css, so tokens-dark.css
   re-points all of it. The one thing dark needs of its own is at the foot.

   Loaded two ways, deliberately:
     · shell.css @imports it, so every page that already wears the shell gets
       the nav's styles without a markup change
     · marketplace.html links it directly (that page does not load shell.css —
       it is a full-bleed map, not a document)
   ========================================================================== */

/* -- the accordion primitive ----------------------------------------------
   Shared by the nav and by the memory card's six deep sections, so there is
   exactly one motion and one keyboard model on the site. A panel is a grid
   whose single row animates between 0fr and 1fr; the inner wrapper carries
   `min-height:0` (without it a grid item refuses to go below its content) and
   the overflow clip. */
.acc-panel{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows var(--dur-200) var(--ease);
}
.acc-panel > .acc-in{
  min-height:0; overflow:hidden;
  opacity:0; transition:opacity var(--dur-150) var(--ease);
}
.acc-panel[data-state="open"]{ grid-template-rows:1fr; }
.acc-panel[data-state="open"] > .acc-in{ opacity:1; }
/* the chevron the whole site already uses: ▾ at rest, a quarter turn closed,
   on the same --dur-150 budget as .gchev and #rzchev */
.acc-chev{
  margin-left:auto; flex:0 0 auto; color:var(--brand); line-height:1;
  font-size:var(--fs-lg);
  transform:rotate(-90deg); transition:transform var(--dur-150) var(--ease);
}
[aria-expanded="true"] > .acc-chev{ transform:rotate(0deg); }

/* -- the nav --------------------------------------------------------------- */
.nav{ position:relative; }

/* The trigger IS the brand row. In the sidebar it must land exactly where the
   old `.head .row` did: that row was `margin-top:8px` with no padding, so the
   button takes 4px of margin plus 4px of padding and pulls its own 6px of side
   padding back out, and the mark and the wordmark do not move by a pixel. */
.nav-trigger{
  display:flex; align-items:center; gap:9px; width:100%;
  background:none; border:0; text-align:left; color:inherit;
  padding:4px 6px; border-radius:var(--r-7);
  transition:background var(--dur-140) var(--ease);
}
/* hover only where there is a pointer: on touch, `:hover` sticks after a tap
   and leaves the brand row wearing a highlight box it never earned (caught on
   the 390px sheet) */
@media (hover:hover){ .nav-trigger:hover{ background:var(--brand-08); } }
.nav[data-variant="sidebar"] .nav-trigger{ margin:4px -6px 0; }

.nav-mark{ width:30px; height:30px; border-radius:var(--r-7); flex:0 0 auto;
  object-fit:contain; }
.nav-word{ min-width:0; }

/* -- the panel ------------------------------------------------------------- */
.nav-list{ list-style:none; margin:0; padding:8px 0 2px; display:flex;
  flex-direction:column; gap:1px; }
.nav-item{
  display:flex; align-items:center; gap:8px; width:100%;
  padding:5px 6px; border-radius:var(--r-7);
  font-size:var(--fs-base-p); color:var(--ink); text-decoration:none;
  transition:background var(--dur-140) var(--ease), color var(--dur-140) var(--ease);
}
@media (hover:hover){ a.nav-item:hover{ background:var(--brand-08); color:var(--brand); } }
.nav-item .nav-nm{ flex:1; min-width:0; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; }
/* the leading rule is the sidebar's own category dot, drawn as a bar: it marks
   the current page without spending a colour the page does not already use */
.nav-item .nav-lead{ width:3px; height:13px; border-radius:2px; flex:0 0 auto;
  background:transparent; }
.nav-item[aria-current="page"]{ color:var(--brand); font-weight:var(--fw-semibold); }
.nav-item[aria-current="page"] .nav-lead{ background:var(--brand); }

/* the tag column, in the filter counts' type: `current` on this page, `soon`
   on a page whose file does not exist yet */
.nav-tag{ font:var(--fw-semibold) var(--fs-sm)/1 var(--font-mono);
  color:var(--graphite); text-transform:lowercase; flex:0 0 auto; }
.nav-item[aria-current="page"] .nav-tag{ color:var(--brand); }
/* Disabled entries are visible and muted, and say so with a shape as well as a
   colour: a dashed edge round the tag. Opacity is deliberately not used —
   dimming a foreground on dark drops it under the contrast floor (the rule
   marketplace.css's dark block states at length). */
.nav-item.is-soon{ color:var(--graphite); cursor:default; }
.nav-item.is-soon .nav-tag{ border:1px dashed var(--border); border-radius:4px;
  padding:1px 4px; }

/* -- variant: the shell's sticky bar --------------------------------------
   The panel floats under the brand on the tile row's own glass: --paper-97
   under --blur-tile, a 1px --brand-20 edge, the suggest list's shadow. */
.nav[data-variant="bar"]{ display:flex; align-items:center; min-width:0; }
.nav[data-variant="bar"] .nav-trigger{ padding:3px 6px; margin:0 -6px; }
.nav[data-variant="bar"] .nav-mark{ width:26px; height:26px; border-radius:var(--r-6); }
.nav[data-variant="bar"] .nav-panel{
  position:absolute; top:calc(100% + 8px); left:0; z-index:50;
  min-width:216px;
}
.nav[data-variant="bar"] .nav-panel > .acc-in{
  border-radius:var(--r-12);
  background:var(--paper-97);
  -webkit-backdrop-filter:var(--blur-tile); backdrop-filter:var(--blur-tile);
  border:1px solid var(--brand-20); box-shadow:var(--sh-3-suggest);
}
.nav[data-variant="bar"] .nav-list{ padding:6px; }
/* a closed floating panel must not eat clicks on the page under it; the border
   and shadow of a 0-height box would still paint, so it is taken out entirely */
.nav[data-variant="bar"] .nav-panel:not([data-state="open"]){ visibility:hidden; }
.nav[data-variant="bar"] .nav-panel[data-state="open"]{ visibility:visible; }

/* -- phone ----------------------------------------------------------------
   The sidebar is the filter sheet at this width (it is reached through the
   *All filters ›* tile), so the nav is already inside the sheet's head. It
   only tightens, exactly as .shell-head does. */
@media (max-width:768px){
  .nav[data-variant="bar"] .nav-mark{ width:22px; height:22px; }
  .nav[data-variant="bar"] .nav-panel{ min-width:196px; }
  /* a real touch row inside the sheet: 44px, the guideline, which the sheet can
     afford because its body already scrolls. Measured at 30px before this. */
  .nav-item{ padding:7px 6px; min-height:44px; }
}

/* -- dark ------------------------------------------------------------------
   Everything above themes itself through the tokens. The one exception is the
   floating panel's ground: --paper-97 is fully opaque on dark and reads as the
   page rather than as a raised surface, so it takes --surface-raised, which is
   what a floating control sits on in that theme. */
[data-theme="dark"] .nav[data-variant="bar"] .nav-panel > .acc-in{
  background:var(--surface-raised);
}
@media (prefers-reduced-transparency: reduce){
  .nav[data-variant="bar"] .nav-panel > .acc-in{
    backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--paper); }
  [data-theme="dark"] .nav[data-variant="bar"] .nav-panel > .acc-in{
    background:var(--surface-raised); }
}