/* 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; }

/* A phone's label (portfolio_sections `short`); only the <=640px block
   below shows it. The trail's icon is likewise a phone-only mark: at width
   it is a text link at the far end, not a sixth tab. */
.sb-short { display: none; }
.sb-trail .sb-ic { 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); }
  /* No lead (Settings): the top padding, the strip's margin and its hairline
     exist to part the picker row from the tabs. With nothing above, they
     drew an empty band and a second rule under the header's own (owner,
     2026-10-13: the padding "looks weird ... (double)"). */
  .subnav-in:has(> .sb-lead:empty) { padding-top: 0; }
  .sb-lead:empty ~ .sb-links,
  .sb-lead:empty ~ .sb-trail { margin-top: 0; border-top: 0; }
}

/* A PHONE: the five places on ONE row that never scrolls (owner,
   2026-10-08: the strip "looks odd, hard to scroll"). At 390px the
   scrolling strip showed Overview and Strategies and hid the other two —
   the open section included — behind a strip with no scrollbar and no
   cue. So each place gets a cell, its icon over a short label, the
   way a phone's own tab bar reads; Manage takes the fifth cell as
   "Accounts". Opt-in by class (`subnav--fit`): the macro's bar carries it,
   and since 2026-10-13 so does Settings' hand-drawn six-cell bar (owner:
   its menu on a phone "is weird" — the strip showed three of five tabs),
   which gets there on short labels: Letter, Alerts, Profile, Danger. */
@media (max-width: 640px) {
  /* Each cell is its label's width plus an equal share of what is left
     (flex 1 1 auto), not an equal fifth: a fifth of a 320px phone's 288 is
     narrower than "Strategies", while the five labels together need ~235.
     Six labels (Settings) need ~269 of it, so the floor phone still fits. */
  .subnav--fit .sb-links { overflow: visible; }
  /* The trail is its own grid column, and the row's `gap: 0` left it flush
     against the strip's last cell: with six cells at 320px (Settings) the
     trail's label touched its neighbour's and "Profile Danger" read as one
     word. The room is PADDING inside the strip, not a column gap: each
     element draws its own hairline above itself, and a gap between the two
     breaks that line for its width. */
  .subnav--fit .sb-links { padding-right: var(--sp-1); }
  .subnav--fit .sb-link { flex: 1 1 auto; }
  .subnav--fit .sb-link,
  .subnav--fit .sb-trail {
    position: relative;
    flex-direction: column;
    justify-content: center;
    gap: var(--sp-1);
    min-width: 0;
    min-height: 52px;
    padding: var(--sp-2) 2px;
    font: var(--w-mid) var(--fs-1)/1.2 var(--body);
    text-align: center;
  }
  .subnav--fit .sb-trail {
    margin: var(--sp-2) 0 0;
    border-left: 0;
    color: var(--dim);
  }
  .subnav--fit .sb-link.on,
  .subnav--fit .sb-trail.on { color: var(--duck-deep); }
  .subnav--fit .sb-ic,
  .subnav--fit .sb-trail .sb-ic { display: block; width: 20px; height: 20px; }
  .subnav--fit .sb-text,
  .subnav--fit .sb-short {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .subnav--fit .sb-link:has(.sb-short) .sb-text,
  .subnav--fit .sb-trail:has(.sb-short) .sb-text { display: none; }
  .subnav--fit .sb-short { display: block; }
  /* The count alone, pinned to the icon's corner. */
  .subnav--fit .sb-badge {
    position: absolute;
    top: 4px;
    left: calc(50% + 6px);
    padding: 2px 5px;
    font-size: var(--fs-0);
  }
  .subnav--fit .sb-badge-word { display: none; }
}
/* The narrowest phones (320): 12px is the type floor (tokens.css), so the
   cells give up their side padding and a hair of tracking instead, which is
   what keeps all five labels whole in 288px. */
@media (max-width: 360px) {
  .subnav--fit .sb-link,
  .subnav--fit .sb-trail { padding-left: 0; padding-right: 0; letter-spacing: -0.02em; }
}