/* RISE tab — home-style guided tour.

   Reuses the landing kit (the fk-band / lp-step / lp-row / pq-row / lp-bar
   / lp-hero recipes shared with styles/tabs/home.css — all global
   selectors). This file only adds:
     - the #tab-rise copy of the width-animation hooks (home scopes .lp-w
       to #tab-home), and
     - a handful of RISE-specific atoms (headline figures, grade keys, the
       two-line value sub, the timeline scroller).
   RISE joins FULL_BLEED_TABS (js/index.js), so body.home-fullbleed already
   zeroes the .main-inner gutters + hides the filter chrome site-wide.
   Tokens only — see CLAUDE.md "Tokens, not literals". */

/* Full-bleed: the gutter/width rules are global on body.home-fullbleed; only
   the tab-content padding is home-scoped, so mirror it for #tab-rise. */
#tab-rise.tab-content { padding: 0; }

/* Width-animation hooks — home scopes these to #tab-home; the lp-* bar
   recipes themselves are unscoped, so RISE just needs its own width hook
   + the pre-animation zero state (set by _animateIn on #tab-rise). */
#tab-rise .lp-w {
  width: var(--w, 0%);
  transition: width var(--t-slow) cubic-bezier(0.25, 1, 0.4, 1);
}
#tab-rise.lp-anim-pre .lp-w { width: 0; }

.rise-tab { display: flex; flex-direction: column; }

/* ── Headline figures (band 01) ──────────────────────────────────── */
.rise-figs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-7);
  margin-top: var(--space-4);
}
.rise-fig { display: flex; flex-direction: column; gap: var(--space-1); }
.rise-fig-n {
  font-family: "Charter", "Iowan Old Style", "Cambria", Georgia, serif;
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: var(--lh-tight);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.rise-fig-l {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  color: var(--ink-3);
  font-weight: 600;
}
.rise-asat {
  font-size: var(--text-xs);
  line-height: var(--lh-base);
  color: var(--ink-3);
  margin: var(--space-3) 0 0;
}

/* ── Grade-at-entry (band 02) ─────────────────────────────────────── */
.rise-mix { margin-bottom: var(--space-3); max-width: 760px; }
.rise-keys { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.rise-key {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  color: var(--ink-2);
}
.rise-key b { color: var(--ink); font-variant-numeric: tabular-nums; }
.rise-key-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--r-full);
  background: var(--dot-bg, var(--rule));
  flex-shrink: 0;
}

/* ── Ranked boards (bands 03 / 04) ────────────────────────────────── */
.rise-board { margin-top: var(--space-2); }
/* The percentage sub under the count in a .pq-row value cell (geo board). */
.rise-val-sub {
  font-size: var(--text-10);
  font-weight: 400;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* "Who runs them" sortable table — the home .lp-tx-* recipe with a RISE
   column grid (rank · trust · RISE schools · share · schools · bar) plus a
   magnitude bar that tracks the active sort column. Band 03 is non-alt
   (--paper), so the sticky header tracks --paper (like home's fin/grow). */
.lp-tx--rise .lp-tx-head { background: var(--paper); }
.lp-tx--rise .lp-tx-head,
.lp-tx--rise .lp-tx-row {
  grid-template-columns: 26px minmax(0, 1fr) 92px 64px 72px minmax(96px, 200px);
}
.rise-tx-bar {
  height: 8px;
  background: var(--rule-2);
  border-radius: 2px;
  overflow: hidden;
  align-self: center;
}
.rise-tx-bar > .lp-w { display: block; height: 100%; background: var(--accent); }

/* Phone: keep every column and scroll the table sideways (like home's
   fin/grow tables) instead of the generic .lp-tx reflow, which is tuned to
   the step-03 column set and would drop the RISE-schools + share columns. */
@media (max-width: 640px) {
  #tab-rise .lp-tx--rise { overflow-x: auto; }
  #tab-rise .lp-tx--rise .lp-tx-head,
  #tab-rise .lp-tx--rise .lp-tx-row {
    min-width: 520px;
    grid-template-columns: 22px minmax(0, 1fr) 84px 56px 64px minmax(80px, 160px);
  }
  #tab-rise .lp-tx--rise .lp-tx-head > :nth-child(3),
  #tab-rise .lp-tx--rise .lp-tx-head > :nth-child(4),
  #tab-rise .lp-tx--rise .lp-tx-row > :nth-child(3),
  #tab-rise .lp-tx--rise .lp-tx-row > :nth-child(4) { display: revert; }
}

/* ── Timeline (band 05) ───────────────────────────────────────────── */
/* The whole cohort is ~410 rows — uncapped it dwarfs the story bands
   above, so cap the height and scroll within (mirrors home's scrollable
   step-03 board), keeping the page scannable. */
.rise-timeline-scroll {
  max-height: 72vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Footer band + states ─────────────────────────────────────────── */
.rise-foot-band { padding-bottom: var(--space-7); }
.rise-foot {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--text-xs);
  line-height: var(--lh-base);
  color: var(--ink-3);
  border-top: 1px solid var(--rule);
  padding-top: var(--space-3);
}
.rise-foot p { margin: 0; max-width: 80ch; }
.rise-loading,
.rise-empty-note {
  font-size: var(--text-md);
  color: var(--ink-3);
  margin: 0;
  padding: var(--space-5) 0;
}