/* The shared second bar (spec 2026-09-17, amended). Consumes tokens.css;
 * declares no tokens of its own. Linked from _shell.html's persistent head
 * for the same reason rail.css is: a <link> inside the swap region does not
 * travel on a client-side navigation, so the bar would arrive unstyled from
 * any other page.
 *
 * It replaces sidenav.css. The 226px left column is gone, so the page under
 * this bar is the whole site column. */

.subnav {
  position: sticky;
  /* Under the header, never over it. --topbarh is the measured bar height
     _topbar.html publishes; --bandh is daily's sticky band (absent here, so
     the fallback is 0). z-index stays BELOW the header's 20: `.topbar` is a
     stacking context, so anything at 20 or above paints over the open
     Research dropdown — /play's marquee was exactly that bug. */
  top: calc(var(--topbarh, 56px) + var(--bandh, 0px));
  z-index: 15;
  margin-bottom: var(--sp-5);
}

/* The bar's SURFACE spans the viewport while its CONTENT keeps the site
   column, and it does that without any `100vw` arithmetic: 100vw includes
   the scrollbar, so a width or margin computed from it overflows by ~15px
   and gives the whole page a horizontal scrollbar. A box-shadow spread
   cannot overflow anything, which is why the surface is drawn as one.
   `clip-path` then stops the 100vmax spread painting over the entire page —
   and it lives HERE, on a pseudo-element with no children, because
   clip-path clips descendants: on `.subnav` itself it would cut the open
   account panel (~400px) off at the bar's own hairline.
   Two pseudos rather than one: the shadow's spread is uniform, so a single
   element cannot carry both a full-width panel and a full-width 1px rule
   under it. */
.subnav::before,
.subnav::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  /* Behind the bar's own content. `.subnav` is a stacking context (it is
     positioned and has a z-index), so this cannot fall behind the page. */
  z-index: -1;
  pointer-events: none;
  clip-path: inset(0 -100vmax);
}
.subnav::before {
  top: 0;
  bottom: 0;
  background: var(--panel);
  box-shadow: 0 0 0 100vmax var(--panel);
}
.subnav::after {
  bottom: -1px;
  height: 1px;
  background: var(--hair);
  box-shadow: 0 0 0 100vmax var(--hair);
}

/* No width or padding of its own: the shell's `.wrap` around #pageroot IS
   the site column (max-width --colw, 20px gutters), so this element's
   content box already lines up with `.topbar-in`'s. Re-stating --colw here
   would cap and pad a second time inside the first — the exact defect task
   14 took out of this page's own `.wrap`. */
.subnav-in {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 62px;
}

.sb-lead { min-width: 0; flex: 0 1 auto; }

.sb-links {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  /* The divider between "which account" and "which part of it". A border
     rather than a separate element, so an empty lead slot (Research, phase
     2) draws no orphaned rule. */
  border-left: 1px solid var(--hair);
  margin-left: var(--sp-2);
  padding-left: var(--sp-3);
}
.sb-lead:empty + .sb-links { border-left: 0; margin-left: 0; padding-left: 0; }

.sb-link {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex: none;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  /* The top bar's own tab step, so the two menu levels read as one system. */
  font: var(--w-mid) var(--fs-1)/1.2 var(--body);
  color: var(--dim);
  text-decoration: none;
  white-space: nowrap;
}
.sb-link:hover { background: var(--soft); color: var(--ink); }
.sb-link.on { background: var(--duck-bg); color: var(--duck-deep); }
.sb-link:focus-visible { outline: 2px solid var(--duck); outline-offset: 1px; }
.sb-ic {
  width: 16px; height: 16px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.sb-badge {
  font: var(--w-bold) var(--fs-0)/1 var(--body);
  color: var(--duck-deep); background: var(--paper);
  border: 1px solid var(--duck-bg); border-radius: var(--r-pill);
  padding: 3px 7px;
}
/* `display` on the rule above would beat the UA's [hidden]; say it outright. */
.sb-badge[hidden] { display: none; }

/* The one link that looks ACROSS what the tabs are scoped to, so it sits at
   the far end rather than among them. */
.sb-trail {
  margin-left: auto;
  flex: none;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  font: var(--w-mid) var(--fs-1)/1.2 var(--body);
  color: var(--duck-deep);
  text-decoration: none;
  white-space: nowrap;
}
.sb-trail:hover { background: var(--soft); }
.sb-trail.on { background: var(--duck-bg); }
.sb-trail:focus-visible { outline: 2px solid var(--duck); outline-offset: 1px; }

/* Below the seam rail.css and _topbar.html already use, the bar becomes two
   rows: the lead full width, then the tabs as ONE horizontally scrolling
   strip. The strip takes the overflow so the PAGE never scrolls sideways,
   and the tabs drop their pill for an underline — a row of pills that runs
   off the edge reads as a broken grid, an underlined strip reads as more to
   the right. */
@media (max-width: 1023px) {
  /* A GRID, not a wrapping flex row. Flex wrapping puts an item on the
     current line whenever it fits, and a zero-basis strip always fits — so
     the tabs landed on the picker's own full-width line at width 0 and
     pushed Manage to a third row (a 170px bar). Two rows, stated. */
  .subnav-in {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    min-height: 0;
    padding-top: var(--sp-2);
    gap: 0;
  }
  /* Its own row, full width: a picker that has to share a line with four
     tabs has nothing left for the strategy it names. */
  .sb-lead { grid-column: 1 / -1; }
  .sb-links {
    grid-column: 1;
    min-width: 0;
    border-left: 0; border-top: 1px solid var(--hair);
    margin: var(--sp-2) 0 0; padding: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .sb-links::-webkit-scrollbar { display: none; }
  .sb-link {
    border-radius: 0;
    padding: var(--sp-3) var(--sp-2);
    border-bottom: 2px solid transparent;
  }
  .sb-link.on { background: none; border-bottom-color: var(--duck); }
  .sb-ic { display: none; }
  /* Beside the strip, never inside it: `margin-left:auto` on a row that
     scrolls pushes Manage past the right edge, where nothing can reach it.
     It keeps its own column and the four tabs scroll under it — with a rule
     between them, because a tab scrolled half out of view sitting flush
     against "Manage accounts" reads as one long run of words. */
  .sb-trail {
    grid-column: 2;
    display: flex;
    align-items: center;
    margin: var(--sp-2) 0 0;
    border-radius: 0;
    border-top: 1px solid var(--hair);
    border-left: 1px solid var(--hair);
    border-bottom: 2px solid transparent;
    padding: var(--sp-3) 0 var(--sp-3) var(--sp-3);
  }
  .sb-trail:hover, .sb-trail.on { background: none; }
  .sb-trail.on { border-bottom-color: var(--duck); }
}