/* S0 · Nav (SITE-21). Corgi's bar: a 64px frosted strip with a full-bleed bottom hairline, the column rails running
   through it, the logo and actions inset from the rails (founder rule), links centred. The menus hang from that
   hairline and span the column exactly, so their side borders sit on the rails. Only v2 tokens and system classes. */

.nv { position: sticky; top: 0; z-index: 50; }
/* The glass sits on a pseudo-element: backdrop-filter on the header itself would trap the fixed drawer inside it and
   flatten the menus' own frosted backdrop. */
.nv::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: rgb(255 255 255 / 0); border-bottom: 1px solid var(--hairline);
  transition: background-color var(--dur) var(--ease-out), -webkit-backdrop-filter var(--dur) var(--ease-out), backdrop-filter var(--dur) var(--ease-out);
}
/* At the top the field runs crisp under the bar (Jurni); once the page scrolls, or a menu opens, the bar frosts over. */
.nv.is-scrolled::before, .nv:has([aria-expanded="true"])::before {
  background: rgb(255 255 255 / .86); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); }
.nv__in {
  position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 64px;
  /* The page rails, carried through the bar (the wrap's outer edges are the rails). */
  box-shadow: inset 1px 0 var(--hairline), inset -1px 0 var(--hairline);
}
/* Corgi's crosses where the bar's hairline meets each rail. */
.nv__in::after {
  --t: var(--hairline-strong);
  content: ""; position: absolute; left: -5px; right: -5px; bottom: -6px; height: 11px; pointer-events: none;
  background:
    linear-gradient(var(--t), var(--t)) 5px 0 / 1px 11px no-repeat,
    linear-gradient(var(--t), var(--t)) 0 5px / 11px 1px no-repeat,
    linear-gradient(var(--t), var(--t)) calc(100% - 5px) 0 / 1px 11px no-repeat,
    linear-gradient(var(--t), var(--t)) 100% 5px / 11px 1px no-repeat;
}
.nv-logo { justify-self: start; display: inline-flex; align-items: center; padding-block: 10px; color: var(--ink); border-radius: var(--r-sm); }
.nv-logo img { height: 24px; width: auto; }
.nv__links { display: flex; align-items: center; gap: 2px; }
/* The underline lands on the bar's hairline, as Corgi's does. */
.nv__links .menu-trigger { height: 64px; }
.nv__links .menu-trigger::after { bottom: 0; }
.nv__right { justify-self: end; display: flex; align-items: center; gap: 8px; }
.nv__signin::after { display: none; }
.nv__cta { margin-left: 4px; }
.nv__burger { display: none; width: 44px; height: 44px; margin-right: -10px; border-radius: var(--r-sm); place-content: center; gap: 6px; }
.nv__burger span { display: block; width: 18px; height: 1.5px; border-radius: 1px; background: var(--ink); }
.nv__burger:hover { background: rgb(21 19 15 / .05); }

/* ── The menus: the full column, rail to rail ── */
/* Over a busy hero (headline, CTAs, the pixel field) Corgi's 85% + 6px blur lets text read through, so the nav's
   panels are near-opaque: 95% white under a 24px blur (tower, 2026-10-31). */
.nv .menu { width: min(100% - 2 * var(--gutter), var(--column)); border-color: var(--hairline);
  background: rgb(255 255 255 / .95); -webkit-backdrop-filter: blur(24px) saturate(1.3); backdrop-filter: blur(24px) saturate(1.3); }
.nv .menu__foot { background: var(--paper); padding-inline: var(--inset); }
/* The panels span rail to rail, so their outer text (the first column label, the foot line) keeps the rails' inset (R1). */
.nv .menu__head > :first-child { padding-left: var(--inset); }

/* Product card tidbits (Replo's image tiles, as pieces of Outpaced rather than screens). */
.nv-media { background: var(--paper); }
/* The hover frame is drawn on top of the tidbit (an inset shadow would paint under its cards): 1px at rest, 1.5px ink
   at 20% under the pointer or keyboard focus, eased over 160ms. Every tidbit sits ≥ 8px inside the frame. */
.nv .menu__card:hover .menu__media, .nv .menu__card:focus-visible .menu__media { box-shadow: none; }
.nv-media::after, .nv-thumb::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgb(21 19 15 / .06); transition: box-shadow 160ms var(--ease-out); }
.nv .menu__card:hover .nv-media::after, .nv .menu__card:focus-visible .nv-media::after { box-shadow: inset 0 0 0 1.5px rgb(21 19 15 / .2); }
.nv .menu__card .nv-media > * { transition: translate 200ms var(--ease-out); }
.nv .menu__card:hover .nv-media > *, .nv .menu__card:focus-visible .nv-media > * { translate: 0 -2px; }
.nv-personas { display: grid; gap: 6px; justify-items: start; }
.nv-personas .chip { background: var(--canvas); transition: box-shadow 240ms var(--ease-out), border-color 240ms; }
.nv-personas .chip.is-on { border-color: color-mix(in oklab, var(--orange) 45%, transparent); box-shadow: 0 0 0 3px rgb(255 90 36 / .12), var(--shadow-xs); }
.nv-covers { position: relative; width: 100%; height: 100%; }
.nv-cover { position: absolute; top: 20px; left: 50%; }
.nv-cover .cover { box-shadow: var(--shadow-sm), 0 0 0 1px rgb(21 19 15 / .06); }
.nv-cover:nth-child(1) { translate: -125% 6px; rotate: -9deg; }
.nv-cover:nth-child(2) { translate: 25% 6px; rotate: 9deg; }
.nv-cover:nth-child(3) { translate: -50% -4px; z-index: 1; }
.nv-week { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; width: calc(100% - 28px); }
.nv-day { position: relative; display: grid; justify-items: center; gap: 8px; padding: 10px 0 12px; border-radius: var(--r-sm); background: var(--canvas); box-shadow: 0 0 0 1px var(--hairline); }
.nv-day b { color: var(--ink-58); font-weight: 400; }
.nv-day i { width: 18px; height: 18px; border-radius: 5px; }
/* TikTok and Instagram app marks, as SITE-20's tool rows draw them. */
.nv-day i.is-tt { background: var(--ink); box-shadow: inset 2px 0 0 #25F4EE, inset -2px 0 0 #FE2C55; }
.nv-day i.is-ig { background: radial-gradient(circle at 30% 110%, #FFD776 0%, #F56040 35%, #C13584 65%, #5B51D8 100%); }
.nv-day em { position: absolute; top: -13px; font-style: normal; font-size: 11px; height: 22px; padding: 0 7px; }
.nv-runs { display: grid; gap: 4px; width: calc(100% - 24px); }
.nv-run { display: grid; grid-template-columns: 18px 1fr; align-items: center; gap: 8px; padding: 4px 8px; border-radius: var(--r-sm); background: var(--canvas); box-shadow: 0 0 0 1px var(--hairline); font-size: 12px; line-height: 1.2; }
.nv-run i { width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; background: var(--sky-soft); color: var(--sky-ink); }
.nv-run i svg { width: 10px; }
.nv-run > span { display: grid; gap: 2px; min-width: 0; }
.nv-run b { font-weight: 500; white-space: nowrap; }
.nv-run small { color: var(--ink-58); white-space: nowrap; }

/* ── Mobile drawer ── */
.nv-drawer .drawer__top { height: 64px; }
.nv-dlink { gap: 14px; padding: 10px 0; }
.nv-thumb { position: relative; flex: none; width: 72px; height: 48px; overflow: hidden; border-radius: var(--r-md); background: var(--paper); }
/* The menu card's tidbit at 30%: the same pieces, so the drawer and the panel tell the same story. */
.nv-thumb__in { position: absolute; left: 50%; top: 50%; width: 240px; height: 160px; display: grid; place-items: center; translate: -50% -50%; scale: .3; }
/* Tablets (600–959px) get their own drawer: the four products as a 2 × 2 of cards with the tidbits at 80%, as in the
   desktop panel, rather than phone rows stretched across the sheet. */
@media (min-width: 600px) {
  .nv-dprod { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
  .nv-dprod > p { grid-column: 1 / -1; }
  .nv-dprod .nv-dlink { flex-direction: column; align-items: stretch; gap: 12px; padding: 4px 0 20px; }
  .nv-dprod .nv-thumb { width: 100%; height: 136px; }
  .nv-dprod .nv-thumb__in { scale: .8; }
}
.nv-dind__toggle { width: 100%; text-align: left; }
.nv-dind__toggle svg { width: 12px; height: 12px; margin-left: 10px; transition: transform 160ms var(--ease-out); }
.nv-dind__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.nv-dind__count { margin-left: auto; color: var(--ink-58); }
.nv-dind__panel { padding-bottom: 8px; border-bottom: 1px solid var(--hairline); }
/* SITE-31's drawer group sits inside the disclosure, whose row already says "Industries". */
.nv-dind .ind-drawer > p:first-child { display: none; }
.nv-drawer__note { text-align: center; }

@media (max-width: 1100px) {
  .nv__links .menu-trigger { padding: 0 9px; }
}
@media (max-width: 959px) {
  .nv__links, .nv__signin, .nv .menu { display: none; }
  .nv__in { grid-template-columns: 1fr auto; }
  .nv__cta { height: 44px; }   /* a touch target (M4) once the bar is the touch layout */
  .nv__burger { display: grid; }
}
@media (max-width: 479px) {
  .nv__cta { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nv::before, .nv-personas .chip, .nv-dind__toggle svg, .nv-media::after, .nv .menu__card .nv-media > * { transition: none; }
}

/* The page's skip link (page shell) lands on the bar: give it a 44px touch target (SITE-26 M4). Move to base.css
   when SITE-20 next touches it. */
.skip:focus { display: inline-flex; align-items: center; min-height: 44px; }