/* ═══ TAB NAV (d-brief-1) — LAUREL v1.0 tokens only, zero new palette values ═══
   Token sources differ per surface: the live root index.html ships --amber
   (back-compat alias), briefings/watchlist ship --accent (LAUREL §1). Both are
   sage #8BAF80 — the fallback chain var(--accent, var(--amber)) resolves the
   same value on every surface. No JetBrains Mono anywhere (LAUREL §4). */
.tabnav{
  display:flex; justify-content:center; align-items:baseline; gap:30px;
  padding:16px 16px 0;
}
.tabnav:empty{display:none}
.tabnav a{
  font-family:var(--font-body); font-weight:500; font-size:11px;
  letter-spacing:.18em; text-transform:uppercase; text-decoration:none;
  color:var(--text-3); padding-bottom:6px;
  border-bottom:1px solid transparent;
  transition:color .15s, border-color .15s;
  /* PHONE VIEW (D-CC2-MOBILE-UI-BATCH-2 item A2) — a flex item defaults to
     flex-shrink:1, so a narrow viewport SHRANK these links and clipped the
     longest label ("GRAVEYARD" -> "GRAV", founder screenshot). A label is never
     truncated: the item refuses to shrink and never breaks, and the strip
     scrolls instead (LAUREL 6.13 "horizontal scroll strip, no hamburger"). */
  flex:0 0 auto; white-space:nowrap; position:relative;
}
/* Item A3 — 44px tap target without moving the 11px baseline or the underline:
   an invisible overlay centred on the link, inside the link's own box so
   adjacent tabs can never steal each other's taps. */
.tabnav a::after{content:""; position:absolute; left:0; right:0; top:50%;
  transform:translateY(-50%); height:44px}
.tabnav a:hover{color:var(--text)}
.tabnav a[aria-current="page"]{
  color:var(--accent, var(--amber));
  border-bottom-color:var(--accent, var(--amber));
}
.tabnav a:focus-visible{outline:1px solid var(--accent, var(--amber)); outline-offset:3px}

/* Overlay variant for full-viewport flex-centered surfaces (watchlist empty
   state): pinned to the top so the centered card keeps its exact position. */
.tabnav--overlay{position:absolute; top:0; left:0; right:0}

/* ── BackLink (D-CC2-WATCHLIST-UI-BATCH-1 items 2+9) — the ONE back
   affordance: left arrow + label, top-left, house style. Server-rendered on
   the watchlist name-detail and /member surfaces; briefings detail builds it
   client-side. One definition here so it can never fork per-surface. ── */
.backlink{
  display:inline-block; font-family:var(--font-body,inherit); font-weight:500;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  text-decoration:none; color:var(--text-3); padding:14px 0 0;
}
.backlink:hover{color:var(--accent, var(--amber))}
.backlink:focus-visible{outline:1px solid var(--accent, var(--amber)); outline-offset:3px}
.backlink .arrow{letter-spacing:0; margin-right:7px}
/* Item A3 — the back affordance is the one-handed escape hatch on every
   surface, so it carries a real 44px target at every width (padding-top
   already lifts it clear of the nav; the extra bottom padding is the target,
   not decoration). */
.backlink{padding-bottom:14px; min-height:44px}

/* Item A3 — the home page's edition picker lives inside byte-frozen index.html,
   so its 44px target has to be carried by a stylesheet that page already loads.
   The id selector (1,0,0) beats index.html's own bare `select` rule (0,0,1)
   whatever the source order, and that rule declares no min-height to conflict
   with. Measured in-engine at 390px: 35px before, 44px after; page overflow
   unchanged at 0. */
#reportSelect{min-height:44px}

/* ═══ PHONE VIEW (D-CC2-MOBILE-UI-BATCH-2 item A) ═══
   720px is the house narrow breakpoint — briefings/briefings.css already ships
   it, so the site has ONE number, not a per-surface dialect. Below it the tab
   strip stops centring (a centred strip scrolls its active tab off-screen) and
   becomes a snap-scrolling rail flush to the content gutter. */
@media (max-width:720px){
  .tabnav{
    /* the 10px bottom padding is LOAD-BEARING, not rhythm: overflow-x:auto
       also clips the block axis, so the 44px ::after overlay on a ~20px link
       gets cut back to the strip's content box unless the padding box is tall
       enough to contain it (measured: 20px hit height before, 45px after). */
    justify-content:flex-start; gap:22px; padding:12px 20px 10px;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity; scrollbar-width:none;
  }
  .tabnav::-webkit-scrollbar{display:none}
  .tabnav a{scroll-snap-align:start}
}