/* ============================================================
   styles-nav.css — NAVIGATION & INTERACTION PASS  (2026-09-13)
   ------------------------------------------------------------
   Loaded LAST, and deliberately UNSCOPED.

   styles-refined-dark.css is scoped html[data-theme="dark"];
   this file must hold in BOTH themes, so every colour below
   resolves through a token styles.css defines for light AND
   dark alike (--bg-elev-1, --line, --brand, --text-3 …).
   No layout is invented here — this only changes how existing
   sections behave as you move through them.
   ============================================================ */

:root {
  --sticky-top: 56px;   /* height of the sticky .top bar (z-index 50) */
  --cap-h:      420px;  /* tallest a capped list may grow before it scrolls */
}

/* ── 1 ─ Section headers travel with the reader ──────────────
   Nine screens deep there was nothing saying which section you
   were in. .sh already carries background:var(--bg-elev-1) from
   styles.css, so it stays opaque when it lifts off the page.

   NOTE the `html body` prefix: styles-refined-dark.css:193 sets
   `html[data-theme="dark"] .sh { position: relative }` (specificity
   0,2,1) to anchor its gold ::before tick. A plain `.card > .sh`
   (0,2,0) loses to it and the header silently stays relative — it
   did, on the first deploy. `html body .card > .sh` is 0,2,2 and
   wins in both themes without !important. Sticky also establishes a
   containing block, so that gold tick still anchors correctly. */
html body .card > .sh {
  position: sticky;
  top: var(--sticky-top);
  z-index: 20;                    /* under the .top bar's 50 */
  background: var(--bg-elev-1);
}
/* soft seam so rows don't appear welded to the title while scrolling */
html body .card > .sh::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 100%;
  height: 10px;
  pointer-events: none;
  background: linear-gradient(var(--bg-elev-1), transparent);
}

/* ── 2 ─ Tall lists scroll in place instead of owning the page ──
   Applied to the three long tables on Today. The list stays
   complete — you scroll inside it — but the page stops being
   as tall as the headcount. */
.cap-scroll {
  max-height: var(--cap-h);
  overflow-y: auto;
  overscroll-behavior: contain;   /* don't chain scroll to the page */
  scrollbar-width: thin;
  scrollbar-color: var(--line-hi, var(--line)) transparent;
}
/* Column headings stay put inside the capped scroller.
   The doubled .cap-scroll.cap-scroll plus `html body` is deliberate:
   styles-editorial.css sets `html[data-aesthetic="editorial"] .t thead th
   { background: transparent }` at specificity 0,2,3, which beats a plain
   `.cap-scroll > table thead th` (0,1,3) and leaves a sticky heading you
   can see the rows slide under — in BOTH themes. This lands at 0,2,5 and
   wins outright, while staying scoped to capped scrollers so the
   editorial transparency is untouched everywhere else. */
html body .cap-scroll.cap-scroll > table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-elev-1);
}
.cap-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.cap-scroll::-webkit-scrollbar-track { background: transparent; }
.cap-scroll::-webkit-scrollbar-thumb {
  background: var(--line-hi, var(--line));
  border-radius: 10px;
  border: 3px solid var(--bg-elev-1);
  background-clip: padding-box;
}
.cap-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--text-3);
  border: 3px solid var(--bg-elev-1);
  background-clip: padding-box;
}

/* ── 3 ─ Collapsible sections ────────────────────────────────
   SectionHeader toggles .sec-collapsed on its own .card; the
   rule below hides everything in that card except the header,
   so no per-section markup was needed. Default is expanded —
   nothing changes until the reader clicks. */
.sh-caret {
  background: none;
  border: 0;
  padding: 0;
  margin-inline-end: 7px;
  color: var(--text-3);
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
  display: inline-block;
  transition: transform .18s ease, color .18s ease;
}
.sh-caret:hover { color: var(--brand); }
.sh.is-collapsed .sh-caret { transform: rotate(-90deg); }

.card.sec-collapsed > *:not(.sh) { display: none !important; }
.card.sec-collapsed > .sh { border-bottom: 0; }
.card.sec-collapsed > .sh::after { display: none; }

/* ── 4 ─ Keyboard focus you can actually see ─────────────────
   The app was navigable by keyboard but not *visibly* so, which
   is the difference between "works" and "professional". */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── 5 ─ Respect reduced-motion ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .sh-caret { transition: none; }
}

/* ── 6 ─ Attention strip ─────────────────────────────────────
   The one section that is allowed to sit above everything else,
   because it is the only one that is silent when there is
   nothing to say. Tokens only — holds in both themes. */
.attn {
  padding: 14px 16px;
  margin-bottom: 8px;
  border-color: color-mix(in oklab, var(--warn) 38%, var(--line));
  background: color-mix(in oklab, var(--warn) 7%, var(--bg-elev-1));
}
.attn-head {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--warn);
  font-weight: 600;
  margin-bottom: 11px;
}
.attn-n {
  font-weight: 700;
  border: 1px solid color-mix(in oklab, var(--warn) 45%, transparent);
  border-radius: 4px;
  padding: 1px 7px;
  letter-spacing: 0;
}
.attn-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.attn-list li { display: flex; gap: 11px; align-items: center; font-size: 13px; }
.attn-list b { color: var(--text); font-weight: 600; }
.attn-why { color: var(--text-2); }
.attn-tag {
  margin-inline-start: auto;
  flex: none;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 1px solid var(--line-hi, var(--line));
  border-radius: 4px;
  padding: 2px 7px;
  color: var(--text-3);
}
.attn-tag.err   { color: var(--err);   border-color: color-mix(in oklab, var(--err) 40%, transparent); }
.attn-tag.warn  { color: var(--warn);  border-color: color-mix(in oklab, var(--warn) 40%, transparent); }
.attn-tag.brand { color: var(--brand); border-color: color-mix(in oklab, var(--brand) 40%, transparent); }
.attn-more { margin-top: 10px; font-size: 12px; color: var(--text-3); }

/* All-clear: same slot, deliberately quiet — a calm line, not a
   green banner shouting that nothing is wrong. */
.attn-clear {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-2);
  border-color: color-mix(in oklab, var(--ok) 30%, var(--line));
  background: color-mix(in oklab, var(--ok) 5%, var(--bg-elev-1));
}
.attn-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ok); flex: none;
}

/* ── 7 ─ Pinned nav items + the section jumper ───────────────
   The pin only appears on hover (or focus, or when already
   pinned) so the sidebar stays quiet at rest. */
.nav-pin {
  margin-inline-start: auto;
  flex: none;
  background: none;
  border: 0;
  padding: 0 2px;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  color: var(--text-3);
  /* Visible at rest. This was opacity:0-until-hover, which hid the
     feature so completely that it read as not existing at all. A
     faint star on every row is discoverable without being loud. */
  opacity: .3;
  transition: opacity .14s ease, color .14s ease;
}
.nav-item:hover .nav-pin,
.nav-pin:focus-visible,
.nav-pin.is-pinned { opacity: 1; }
.nav-pin:hover { color: var(--brand); }
.nav-pin.is-pinned { color: var(--gold, var(--brand)); }
.nav-group-pinned { margin-bottom: 6px; }

/* The in-page section jumper sits ~40px under the topbar's global
   ⌘K search and looked like a second copy of it. It is NOT a
   duplicate — that one searches pages, this one jumps to a section
   on this page — so it keeps its function and loses the competing
   visual weight instead of being removed. */
.sec-jump { opacity: .72; transition: opacity .15s ease; }
.sec-jump:hover, .sec-jump:focus-within { opacity: 1; }

/* ── 8 ─ The masthead greeting stops competing with the data ──
   `.ph h2` ("Good morning, Miro.") rendered at 36px — the exact
   size as .kpi-value, so a salutation carried the same visual
   weight as the numbers it sat above, and pushed the KPIs off the
   first screen. Same words, same font, subordinate rank.

   .ph.ph is doubled on purpose: styles-editorial.css sets
   `html[data-aesthetic="editorial"] .ph h2 { font-size: 36px }` at
   0,2,2, and <html> carries data-aesthetic="editorial" here. A plain
   `html body .ph h2` is only 0,1,3 and loses on class count. This is
   0,2,3. (Third rule in this file that the editorial sheet outranked
   — it prefixes everything with that attribute selector.) */
html body .ph.ph h2 {
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1.25;
}

/* Card grids get a taller ceiling than tables: a per-user card row is
   ~215px, so a 420px cut lands mid-row and reads as broken. 560px
   shows two full rows and scrolls for the rest. */
.cap-scroll.cap-grid { --cap-h: 560px; padding-right: 4px; }