/* Ramp Dashboard (ramp-board.js): the landing page, the pathway timeline, Rep View, Program View and By start month.
   Colours come only from the portal themes (/portal-theme.css, the --th-* tokens: Alabaster, Light, Bright and Dark)
   through the --rb-* roles below, so one rule serves all four. The Designer's rules (2026-10-23):
   - square everything (cards, chips, buttons, tabs, inputs);
   - one hero number per screen, on the navy tile with a lime number; at most four hard-edged tiles per screen, with the
     4px offset shadow on the outer element; every other panel has the soft edge;
   - the gradient (--th-grad-bar) only on bars, eyebrows and the header band, never behind a number;
   - the tinted wash behind the first screen only (the landing and Rep View), faded out on every side, none in Bright;
   - steel #2F6F9F is a fill, rule and ring, never text on the light themes (text uses --th-blue-ink); Trinity green is a
     fill, never text on light (text uses --th-accent-ink);
   - colour is never the only cue: marks have shapes, chips have glyphs and words; motion is off under reduced motion;
     every target is 24px, and 44px on a touch screen. */
:root {
  /* Each role is one theme token (theme-tokens.css, the four themes), with its Light value as the fallback. */
  --rb-base: var(--th-bg, #E5E5E4); --rb-card: var(--th-surface, #FFFFFF); --rb-raised: var(--th-surface-2, #F4F4F3); --rb-track: var(--th-surface-3, #DEDEDC);
  --rb-ink: var(--th-text, #1A2332); --rb-muted: var(--th-text-2, #45484E); --rb-tick: var(--th-text-3, #5C5F65);
  --rb-line: var(--th-border, #CFCFCC); --rb-edge: var(--th-border-strong, #1A2332);
  --rb-green: var(--th-accent-ink, #2A7008); --rb-blue: var(--th-blue, #2F6F9F); --rb-blue-ink: var(--th-blue-ink, #2A6590);
  --rb-tg: var(--th-ok, #266406); --rb-ember: var(--th-warn-mark, #8F5400); --rb-ember-ink: var(--th-warn, #8F5400); --rb-warn-tint: var(--th-warn-tint, #FBE0A6);
  --rb-focus: var(--th-focus, #2F6F9F); --rb-tile: var(--th-surface-ink, #1A2332); --rb-on-ink: var(--th-on-ink, #FFFFFF); --rb-on-ink-2: var(--th-on-ink-2, #B9C2D0);
  --rb-hero: var(--th-hero-num, #78C832); --rb-bar: var(--th-grad-bar, linear-gradient(90deg, #78C832 0%, #63B362 25%, #4F9D7D 50%, #3D8790 75%, #2F6F9F 100%));
  /* The bar gradient standing up, for the Cohorts columns (the same stops as --th-grad-bar). */
  --rb-bar-v: linear-gradient(0deg, #78C832 0%, #63B362 25%, #4F9D7D 50%, #3D8790 75%, #2F6F9F 100%);
  --rb-hard: var(--th-shadow-hard, 4px 4px 0 #1A2332); --rb-soft: var(--th-shadow-soft, 2px 2px 0 rgb(26 35 50 / 0.12)); --rb-press: var(--th-shadow-press, 1px 1px 0 #1A2332);
  --rb-wash: var(--th-bg-wash, none);
  /* A selected control (a segment, an active chip, the active tab): the theme's selected gradient, never solid navy. */
  --rb-selected: var(--th-selected, linear-gradient(135deg, #245A82, #2E7D74)); --rb-on-selected: var(--th-on-selected, #FFFFFF);
  /* Cards: the theme's card line and its soft offset (an ink edge with a 4px 4px 3px shadow on the light themes). */
  --rb-card-line: var(--th-card-line, #1A2332); --rb-card-shadow: var(--th-shadow-card, 4px 4px 3px rgb(26 35 50 / 0.22));
  /* A bar track's edge: the strong edge on the light themes; in Dark, where the strong edge is lime, the tertiary grey,
     so lime stays the mark of the one hard tile. */
  --rb-trk-edge: var(--rb-edge);
}
:root[data-theme="dark"] { --rb-trk-edge: var(--th-text-3, #9B9DA4); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- The board's ground ---------- */
#board-host, #view-ramp { max-width: 1600px; }
.rb-root { position: relative; isolation: isolate; color: var(--rb-ink); min-width: 0; }
.rb-root:is([data-view="dashboard"], [data-view="reps"])::before {
  content: ''; position: absolute; z-index: -1; inset: -16px 0 auto 0; height: 640px; pointer-events: none;
  background-image: var(--rb-wash); background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 12%, black 45%, transparent), linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent, black 12%, black 45%, transparent), linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  mask-composite: intersect;
}
.rb-root :is(h2, h3, h4, h5) { color: var(--rb-ink); }
:is(#view-dashboard, #view-ramp) :is(a, button, select, summary, [tabindex]):focus-visible { outline: 2px solid var(--rb-focus); outline-offset: 2px; }
:is(#view-dashboard, #view-ramp) kbd { font-weight: 600; font-size: 0.6875rem; line-height: 1; font-family: inherit; padding: 2px 5px; margin-left: 4px; border: 1px solid var(--rb-line); border-radius: 0; background: var(--rb-raised); color: var(--rb-ink); }

/* ---------- Edges ---------- */
.rb-card { background: var(--rb-card); color: var(--rb-ink); border: 1.5px solid var(--rb-card-line); border-radius: 0; padding: var(--s-4) var(--s-5); margin: 0 0 var(--s-4); box-shadow: var(--rb-card-shadow); }
.rbx-soft { border: 1.5px solid var(--rb-card-line); box-shadow: var(--rb-card-shadow); border-radius: 0; }
.rbx-hard { border: 1px solid var(--rb-edge); box-shadow: var(--rb-hard); border-radius: 0; }
a.rbx-hard { transition: transform 0.12s, box-shadow 0.12s; }
a.rbx-hard:active { transform: translate(3px, 3px); box-shadow: var(--rb-press); }
.rb-card h3, .rb-card h4 { margin: 0 0 var(--s-3); }
.rb-card h4 { font-size: 1.0625rem; font-weight: 600; }
.rb-card h5 { font-family: inherit; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--rb-muted); margin: var(--s-3) 0 var(--s-2); }
.rb-cardhead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2) var(--s-3); margin: 0 0 var(--s-3); }
.rb-cardhead :is(h3, h4) { margin: 0; }
.rb-when { color: var(--rb-muted); font-size: 0.8125rem; font-weight: 500; }
.rb-ns { color: var(--rb-muted); cursor: help; }
/* A figure on 1 to 4 reps in reach carries its n (Program.isSmall), the reason in its tooltip. */
.rb-nsmall { font-family: 'Manrope', sans-serif; font-size: 0.75rem; font-weight: 600; letter-spacing: 0; color: var(--rb-tick); white-space: nowrap; cursor: help; }
.rbx-fig .rb-nsmall { font-size: 13px; vertical-align: middle; }
.rbx-herofig .rb-nsmall, .rb-hero .rb-nsmall { color: var(--rb-on-ink-2); }
.rb-ringn { margin-left: -2px; }
.rb-sharechip .rb-nsmall { color: inherit; }
.rb-wait { display: inline-flex; margin: 0; padding: 4px 12px; border: 1px dashed var(--rb-line); border-radius: 0; background: var(--rb-raised); color: var(--rb-muted); font-size: 0.8125rem; font-weight: 600; cursor: help; max-width: none; }
.rb-link { font: inherit; background: none; border: 0; padding: 0; min-height: 24px; color: var(--rb-blue-ink); text-decoration: underline; cursor: pointer; }
:is(#view-dashboard, #view-ramp) .nh-count { font-family: 'Manrope', sans-serif; font-size: 1rem; font-weight: 700; color: var(--rb-muted); background: none; border-radius: 0; padding: 0; min-width: 0; font-variant-numeric: tabular-nums; margin-left: 4px; }

/* ---------- Numbers and labels ---------- */
.rbx-num { font-variant-numeric: tabular-nums; }
.rbx-fig { font-family: 'Plus Jakarta Sans', 'Manrope', sans-serif; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1; font-size: 40px; color: var(--rb-ink); }
.rbx-fig .rb-unit { font-size: 0.55em; color: var(--rb-muted); }
.rbx-fig .rb-ns { font-size: 0.7em; }
.rbx-label { font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.rb-eyebrow { font-family: 'Manrope', sans-serif; font-size: 11.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--th-grad-eyebrow, linear-gradient(92deg, #2E780A, #2A6590)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Bars: the gradient on a track with a 1px strong edge (the fill alone is under 3:1 on white) ---------- */
.rbx-trk { position: relative; display: block; box-sizing: border-box; background: var(--rb-track); border: 1px solid var(--rb-trk-edge); border-radius: 0; overflow: hidden; }
.rbx-bar { position: absolute; left: 0; top: 0; bottom: 0; display: block; background: var(--rb-bar); transform-origin: left center; animation: rb-grow 0.7s cubic-bezier(.2,.8,.2,1) both; }
.rbx-late { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(135deg, var(--rb-ember) 0 3px, transparent 3px 6px); border-left: 1px solid var(--rb-edge); }
@keyframes rb-grow { from { transform: scaleX(0); } }

/* ---------- Landing ---------- */
.rb-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-4); margin: 0 0 var(--s-4); }
.rb-head h2 { margin: 0; }
.rb-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.rb-divs { display: flex; flex-wrap: wrap; gap: 6px; }
.rb-divs .chip { min-height: 32px; border-radius: 0; background: var(--rb-card); color: var(--rb-ink); border: 1px solid var(--rb-line); }
.rb-divs .chip.active { background: var(--rb-selected); border-color: transparent; color: var(--rb-on-selected); }
.rb-month select { font: inherit; font-size: 0.8125rem; min-height: 32px; padding: 4px 8px; border: 1px solid var(--rb-line); border-radius: 0; background: var(--rb-card); color: var(--rb-ink); }
.rb-jumpbtn { min-height: 32px; border-radius: 0; }
.rb-arrow { margin-left: auto; transition: transform 0.15s; }
.rb-kpis { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 9fr); gap: var(--s-5); margin: 0 0 var(--s-5); padding: 0 4px 4px 0; }
.rb-hero { display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-3); min-height: 150px; box-sizing: border-box; padding: var(--s-5) var(--s-5) var(--s-4);
  background: var(--rb-tile); color: var(--rb-on-ink); text-decoration: none; }
.rb-hero-top { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-2) var(--s-4); }
.rbx-herofig { font-size: clamp(56px, 6vw, 84px); color: var(--rb-hero); }
.rbx-herofig .rb-ns { color: var(--rb-on-ink-2); }
.rb-sharechip { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; padding: 2px 8px; background: var(--rb-warn-tint); color: var(--rb-ember-ink); border: 1px solid var(--rb-ember); font-size: 0.75rem; font-weight: 700; }
.rb-hero-l { display: flex; align-items: center; gap: 8px; color: var(--rb-on-ink-2); }
.rb-hero:hover .rb-arrow, .rb-kpi:hover .rb-arrow, .rb-golink:hover .rb-arrow { transform: translateX(4px); }
/* The hero's ring is the page's focus colour drawn outside the navy, where it reads against the page (not the lime). */
.rb-hero:focus-visible { outline: 2px solid var(--rb-focus) !important; outline-offset: 2px; }
.rb-strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--rb-line); }
.rb-strip > li { background: var(--rb-card); min-width: 0; }
.rb-kpi { display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-3); height: 100%; box-sizing: border-box; padding: var(--s-4) var(--s-4) var(--s-3); color: var(--rb-ink); text-decoration: none; }
.rb-kpi:hover { background: var(--rb-raised); }
.rb-kpi .rbx-label { display: flex; align-items: center; gap: 6px; color: var(--rb-muted); }
.rb-kpi .rb-arrow { opacity: 0; }
.rb-kpi:hover .rb-arrow, .rb-kpi:focus-visible .rb-arrow { opacity: 1; }
.rb-part { height: 8px; width: 100%; }
.rb-part-none { display: block; height: 8px; }
.rb-pulse { display: grid; gap: 0 var(--s-4); margin: 0 0 var(--s-1); }
.rb-pulse-i { min-width: 0; }
.rb-pulse .rb-card { padding: var(--s-3) var(--s-4); }
@media (min-width: 1280px) { .rb-pulse-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .rb-pulse-wide { grid-column: 1 / -1; } }
.rb-two { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--s-4); align-items: start; }
.rb-two > .rb-card { margin: 0; }
.rb-more { display: inline-flex; align-items: center; gap: 4px; margin: var(--s-3) 0 0 var(--s-3); font-weight: 700; color: var(--rb-blue-ink); min-height: 24px; text-decoration: none; }
.rb-more:hover { text-decoration: underline; }
.rb-go ul { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
.rb-golink { display: flex; align-items: center; gap: var(--s-3); min-height: 56px; box-sizing: border-box; padding: var(--s-3) var(--s-4); background: var(--rb-card); color: var(--rb-ink); text-decoration: none;
  font-family: 'Fraunces', Georgia, serif; font-size: 1.25rem; font-weight: 600; }
.rb-golink:hover { border-color: var(--rb-edge); background: var(--rb-raised); }
.rb-golink .rb-arrow { color: var(--rb-green); font-family: 'Manrope', sans-serif; }

/* Needs help: filters, then rows of name, day, count chips and the plan bar under a Courses head. */
:is(#view-dashboard, #view-ramp) .nh-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-3); margin-bottom: var(--s-2); }
:is(#view-dashboard, #view-ramp) .nh-head h3 { margin: 0; }
:is(#view-dashboard, #view-ramp) .nh-filters { display: flex; flex-wrap: wrap; gap: 6px; }
:is(#view-dashboard, #view-ramp) .nh-filters button { font: inherit; font-size: 0.8125rem; font-weight: 600; min-height: 32px; padding: 2px 10px; border: 1px solid var(--rb-line); border-radius: 0; background: var(--rb-card); color: var(--rb-ink); cursor: pointer; }
:is(#view-dashboard, #view-ramp) .nh-filters button[aria-pressed="true"] { background: var(--rb-selected); border-color: transparent; color: var(--rb-on-selected); }
:is(#view-dashboard, #view-ramp) .nh-filters .nh-n { font-variant-numeric: tabular-nums; margin-left: 2px; }
:is(#view-dashboard, #view-ramp) .rb-hhead, :is(#view-dashboard, #view-ramp) .rb-hrow { display: grid; grid-template-columns: minmax(0, 10rem) 4.5rem minmax(0, 1fr) 9rem; gap: 6px var(--s-3); align-items: center; }
:is(#view-dashboard, #view-ramp) .rb-hhead { padding: 0 0 4px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rb-muted); }
:is(#view-dashboard, #view-ramp) .nh-list { list-style: none; margin: 0; padding: 0; }
:is(#view-dashboard, #view-ramp) .rb-hrow { padding: 8px 0; border-top: 1px solid var(--rb-line); }
:is(#view-dashboard, #view-ramp) .rb-hrow[hidden] { display: none; }
:is(#view-dashboard, #view-ramp) .nh-name { font-weight: 700; color: var(--rb-ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; min-height: 24px; padding: 2px 0; box-sizing: border-box; }
:is(#view-dashboard, #view-ramp) .nh-name:hover { color: var(--rb-green); text-decoration: underline; }
:is(#view-dashboard, #view-ramp) .rb-hday { font-size: 0.8125rem; color: var(--rb-muted); }
:is(#view-dashboard, #view-ramp) .rb-ccs { display: flex; flex-wrap: wrap; gap: 6px; }
:is(#view-dashboard, #view-ramp) .rb-cc { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border: 1px solid var(--rb-ember); background: var(--rb-warn-tint); color: var(--rb-ember-ink); font-size: 0.75rem; font-weight: 600; white-space: nowrap; cursor: help; }
:is(#view-dashboard, #view-ramp) .rb-plan { display: flex; align-items: center; gap: 8px; min-width: 0; }
:is(#view-dashboard, #view-ramp) .rb-plan .rbx-trk { flex: 1; height: 10px; min-width: 64px; }
:is(#view-dashboard, #view-ramp) .rb-plan > .rbx-num { flex-shrink: 0; font-size: 0.75rem; font-weight: 700; }
:is(#view-dashboard, #view-ramp) .nh-more { margin-top: var(--s-2); border-radius: 0; }

/* Coming due: the five group bars are the key and the filter (radio buttons, visually hidden; the chosen bar takes the
   selected edge). Under them one row per rep: the name, a strip of squares (squares.css), one Copy per rep. */
.rb-due-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); margin: 0 0 var(--s-2); }
.rb-due-top h3 { margin: 0; }
.rb-due-acts { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rb-due-all { display: inline-flex; align-items: center; min-height: 28px; padding: 2px 10px; border: 1px solid var(--rb-line); background: var(--rb-card); color: var(--rb-ink); font-size: 0.8125rem; font-weight: 600; cursor: pointer; }
.rb-due-all:has(:checked) { background: var(--rb-selected); border-color: transparent; color: var(--rb-on-selected); }
.rb-due-groups { display: flex; flex-direction: column; margin: 0 0 var(--s-3); }
.rb-due-g { display: flex; align-items: center; gap: var(--s-3); min-height: 36px; padding: 0 6px; border-top: 1px solid var(--rb-line); font-size: 0.875rem; cursor: pointer; }
.rb-due-g:hover { background: var(--rb-raised); }
.rb-due-g:has(:checked) { background: var(--rb-raised); box-shadow: inset 3px 0 0 var(--rb-edge); }
.rb-due-g:has(:checked) .rb-due-l { font-weight: 800; }
.rb-due-g.rb-due-g0 { cursor: default; color: var(--rb-muted); }
.rb-due-g.rb-due-g0:hover { background: none; }
:is(.rb-due-g, .rb-due-all):has(:focus-visible) { outline: 2px solid var(--rb-focus); outline-offset: -2px; }
.rb-due-l { width: 13rem; flex-shrink: 0; font-weight: 600; }
.rb-due-bar { flex: 1; min-width: 0; height: 12px; }
.rb-due-g strong { min-width: 2.5rem; text-align: right; font-size: 1.0625rem; font-family: 'DM Mono', ui-monospace, monospace; }
/* The five marks: shape and colour together. Past due is squares.css's hatch (sq-late). */
.rb-dsq { --sq-size: 14px; }
.rb-dsq-dueSoon { --sq-ink: var(--rb-blue); background: var(--rb-blue); }
.rb-dsq-later { --sq-ink: var(--rb-tg); background: color-mix(in srgb, var(--rb-tg) 22%, var(--rb-card)); }
.rb-dsq-renewing { --sq-ink: var(--rb-green); border-style: double; border-width: 3px; background: var(--rb-card); }
.rb-dsq-open { --sq-ink: var(--rb-tick); background: var(--rb-track); }
.rb-dr-list { list-style: none; margin: 0; padding: 0; }
.rb-dr { display: grid; grid-template-columns: minmax(0, 10rem) minmax(0, 1fr) auto; gap: 6px var(--s-3); align-items: center; padding: 6px 0; border-top: 1px solid var(--rb-line); }
.rb-dr[hidden] { display: none; }
.rb-dr-name { font-weight: 700; color: var(--rb-ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-height: 24px; display: inline-flex; align-items: center; }
.rb-dr-name:hover { text-decoration: underline; }
.rb-dstrip { --sq-gap: 4px; }
.rb-dstrip .sq { width: 24px; height: 24px; }   /* every square is a 24px target; the mark fills it */
.rb-due .btn, .rb-copy { min-height: 28px; padding: 4px 10px; border-radius: 0; }
.rb-dr-box > [data-due-more] { margin-top: var(--s-2); }
/* The landing's compact row: name, one bar split by group, the count in DM Mono, Copy. */
.rb-dr.rb-dr-c { grid-template-columns: minmax(0, 10rem) minmax(0, 1fr) 2.5rem auto; }
.rb-dbar { display: flex; height: 14px; background: var(--rb-track); }
.rb-dseg { flex: none; height: 100%; box-sizing: border-box; border-right: 1px solid var(--rb-card); }
.rb-dseg-overdue { background: repeating-linear-gradient(135deg, var(--th-bad, #B3261E) 0 2px, var(--th-bad-tint, #F6D5D2) 2px 4px); }
.rb-dseg-dueSoon { background: var(--rb-blue); }
.rb-dseg-later { background: color-mix(in srgb, var(--rb-tg) 45%, var(--rb-card)); }
.rb-dseg-renewing { background: var(--rb-card); box-shadow: inset 0 0 0 3px var(--rb-green); }
.rb-dseg-open { background: color-mix(in srgb, var(--rb-tick) 35%, var(--rb-track)); }
.rb-dr-n { text-align: right; font-family: 'DM Mono', ui-monospace, monospace; font-size: 1rem; }
.rb-dr-gn { display: none; }
.rb-due:has(.rb-due-r[value="overdue"]:checked) .rb-dr:not([data-gs~="overdue"]), .rb-due:has(.rb-due-r[value="overdue"]:checked) .rb-dsq[data-g]:not([data-g="overdue"]), .rb-due:has(.rb-due-r[value="overdue"]:checked) .rb-dseg:not([data-g="overdue"]) { display: none; }
.rb-due:has(.rb-due-r[value="overdue"]:checked) .rb-dr-gn[data-g="overdue"] { display: inline; }
.rb-due:has(.rb-due-r[value="dueSoon"]:checked) .rb-dr:not([data-gs~="dueSoon"]), .rb-due:has(.rb-due-r[value="dueSoon"]:checked) .rb-dsq[data-g]:not([data-g="dueSoon"]), .rb-due:has(.rb-due-r[value="dueSoon"]:checked) .rb-dseg:not([data-g="dueSoon"]) { display: none; }
.rb-due:has(.rb-due-r[value="dueSoon"]:checked) .rb-dr-gn[data-g="dueSoon"] { display: inline; }
.rb-due:has(.rb-due-r[value="later"]:checked) .rb-dr:not([data-gs~="later"]), .rb-due:has(.rb-due-r[value="later"]:checked) .rb-dsq[data-g]:not([data-g="later"]), .rb-due:has(.rb-due-r[value="later"]:checked) .rb-dseg:not([data-g="later"]) { display: none; }
.rb-due:has(.rb-due-r[value="later"]:checked) .rb-dr-gn[data-g="later"] { display: inline; }
.rb-due:has(.rb-due-r[value="renewing"]:checked) .rb-dr:not([data-gs~="renewing"]), .rb-due:has(.rb-due-r[value="renewing"]:checked) .rb-dsq[data-g]:not([data-g="renewing"]), .rb-due:has(.rb-due-r[value="renewing"]:checked) .rb-dseg:not([data-g="renewing"]) { display: none; }
.rb-due:has(.rb-due-r[value="renewing"]:checked) .rb-dr-gn[data-g="renewing"] { display: inline; }
.rb-due:has(.rb-due-r[value="open"]:checked) .rb-dr:not([data-gs~="open"]), .rb-due:has(.rb-due-r[value="open"]:checked) .rb-dsq[data-g]:not([data-g="open"]), .rb-due:has(.rb-due-r[value="open"]:checked) .rb-dseg:not([data-g="open"]) { display: none; }
.rb-due:has(.rb-due-r[value="open"]:checked) .rb-dr-gn[data-g="open"] { display: inline; }
.rb-due:has(.rb-due-r:not([value=""]):checked) .rb-dr-t { display: none; }
/* Needs help with nobody behind: a zero in hero size and the on-pace mark. */
.rb-zero { display: flex; align-items: center; gap: var(--s-3); cursor: help; }
.rb-zero .rbx-herofig { color: var(--rb-ink); font-family: 'DM Mono', ui-monospace, monospace; letter-spacing: 0; }
.rb-zero-mark { color: var(--rb-tg); font-size: 28px; line-height: 1; }

/* ---------- The pathway timeline: dots in lanes (ramp-board.js layout()), the axis with due days, graduation targets
   and the hatched grace days, the counts under it. Each dot has a shape as well as a colour. ---------- */
.rb-tl { container-type: inline-size; margin: 0 0 var(--s-4); }
.rb-tl-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); margin: 0 0 var(--s-2); }
.rb-tl-head h4 { margin: 0; flex: 1; min-width: 12rem; font-family: 'Fraunces', Georgia, serif; font-size: 1.125rem; }
.rb-legend { display: flex; flex-wrap: wrap; gap: var(--s-3); list-style: none; margin: 0; padding: 0; font-size: 0.8125rem; color: var(--rb-muted); }
.rb-legend li { display: inline-flex; align-items: center; gap: 6px; }
.rb-legend strong { color: var(--rb-ink); }
.rb-shape { position: relative; display: inline-block; width: 16px; height: 16px; }
.rb-plot { position: relative; padding: 0 14px; overflow-x: clip; }
.rb-dots { position: relative; list-style: none; margin: 0; padding: 0; height: 24px; }
.rb-dots li { height: 0; }
.rb-dot { position: absolute; top: 0; z-index: 1; width: 24px; height: 24px; margin-left: -12px; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 0; animation: rb-pop 0.45s cubic-bezier(.2,.9,.3,1.3) backwards; animation-delay: calc(var(--i, 0) * 25ms); }
@keyframes rb-pop { from { opacity: 0; transform: translateY(8px) scale(0.4); } }
.rb-dot::before, .rb-shape::before { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; box-sizing: border-box; transform: translate(-50%, -50%); box-shadow: 0 0 0 2px var(--rb-card); transition: transform 0.15s ease-out; }
.rb-pace::before { border-radius: 50%; background: var(--rb-tg); }
.rb-help::before { width: 12px; height: 12px; background: var(--rb-ember); transform: translate(-50%, -50%) rotate(45deg); }
.rb-grad::before { border-radius: 50%; background: var(--rb-card); border: 3px solid var(--rb-blue); }
.rb-dot.rb-pace { color: var(--rb-tg); } .rb-dot.rb-help { color: var(--rb-ember); } .rb-dot.rb-grad { color: var(--rb-blue); }
.rb-dot:is(:hover, :focus-visible) { z-index: 3; }
.rb-dot:is(:hover, :focus-visible)::before { transform: translate(-50%, -50%) scale(1.35); }
.rb-dot.rb-help:is(:hover, :focus-visible)::before { transform: translate(-50%, -50%) rotate(45deg) scale(1.35); }
.rb-dot.rb-me::before { width: 20px; height: 20px; }
.rb-dot.rb-me.rb-help::before { width: 16px; height: 16px; }
.rb-dot.rb-over::before { opacity: 0.85; }
.rb-dot::after { content: attr(data-tip); position: absolute; left: 50%; top: calc(100% + 6px); transform: translateX(-50%); z-index: 4; padding: 5px 9px; background: var(--rb-tile); color: var(--rb-on-ink); font: 600 0.75rem/1.3 'Manrope', sans-serif; white-space: nowrap; pointer-events: none; opacity: 0; visibility: hidden; }
.rb-dot:is(:hover, :focus-visible)::after { opacity: 1; visibility: visible; }
.rb-dot.rb-tip-l::after { left: 0; transform: none; }
.rb-dot.rb-tip-r::after { left: auto; right: 0; transform: none; }
.rb-drop { position: absolute; left: 50%; top: 50%; width: 1px; height: var(--drop, 0px); background: linear-gradient(180deg, color-mix(in srgb, var(--rb-tick) 55%, transparent), transparent); z-index: -1; pointer-events: none; }
.rb-axis { position: relative; height: 88px; margin-top: 2px; font-size: 0.75rem; }
.rb-base { position: absolute; left: 0; right: 0; top: 33px; height: 10px; box-sizing: border-box; border: 1px solid var(--rb-trk-edge); }
.rb-grace { position: absolute; top: 33px; height: 10px; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--rb-tick) 40%, transparent) 0 4px, transparent 4px 9px), var(--rb-track); }
.rb-grace-l { position: absolute; right: 2px; top: -16px; font-size: 0.6875rem; font-weight: 600; color: var(--rb-muted); }
.rb-tick { position: absolute; top: 29px; width: 2px; height: 18px; margin-left: -1px; background: var(--rb-tick); }
.rb-tick-l, .rb-end-l { position: absolute; top: 50px; transform: translateX(-50%); color: var(--rb-muted); font-weight: 600; white-space: nowrap; }
.rb-end-l.rb-first { left: 0; transform: none; }
.rb-end-l.rb-last { right: 0; left: auto; transform: none; }
/* Graduation targets: a soft static halo, no animation. */
.rb-target { position: absolute; top: 23px; width: 3px; height: 30px; margin-left: -1px; background: var(--rb-green); box-shadow: 0 0 0 1px var(--rb-card), 0 0 12px 3px color-mix(in srgb, var(--th-accent, #78C832) 55%, transparent); }
.rb-target::before { content: ''; position: absolute; left: 50%; top: -3px; width: 9px; height: 9px; background: var(--rb-green); transform: translate(-50%, 0) rotate(45deg); }
.rb-target-l { position: absolute; top: 68px; transform: translateX(-50%); color: var(--rb-green); font-weight: 800; white-space: nowrap; }
.rb-tick-l.rb-left, .rb-target-l.rb-left { transform: none; }
.rb-tick-l.rb-right, .rb-target-l.rb-right { transform: translateX(-100%); }
.rb-short { display: none; }
@container (max-width: 640px) { .rb-long { display: none; } .rb-short { display: inline; } }
.rb-ring { position: relative; display: inline-grid; place-items: center; width: 52px; height: 52px; flex-shrink: 0; }
.rb-ring svg { position: absolute; inset: 0; }
.rb-ring-trk { stroke: color-mix(in srgb, var(--rb-ink) 14%, transparent); }
.rb-ring-v { position: relative; font-size: 0.8125rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--rb-ink); }
.rb-graceswatch::before { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--rb-tick) 40%, transparent) 0 4px, transparent 4px 9px), var(--rb-track); border: 1px solid var(--rb-edge); width: 20px; height: 12px; }
.rb-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); }
.rb-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; box-sizing: border-box; padding: 4px 12px; border: 1px solid var(--rb-line); border-radius: 0; background: var(--rb-raised); color: var(--rb-ink); font-size: 0.8125rem; text-decoration: none; }
.rb-chip:hover { border-color: var(--rb-edge); }
.rb-chip-warn { background: var(--rb-warn-tint); border-color: var(--rb-ember); color: var(--rb-ember-ink); }
.rb-chip-warn::before { content: '◆'; font-size: 0.7em; }
.rb-chip.rb-on { background: var(--rb-selected); border-color: transparent; color: var(--rb-on-selected); }
.rb-chip[hidden] { display: none; }
.rb-tl-past .rb-wait, .rb-tl-none .rb-wait { margin-top: var(--s-2); }

/* ---------- Rep View ---------- */
.rb-h2 { margin: 0 0 var(--s-2); font-size: 1.25rem; }
.rb-h2 a { color: var(--rb-ink); text-decoration: none; }
.rb-h2 a:hover { text-decoration: underline; }
.rb-rvbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); margin: 0 0 var(--s-3); }
.rb-seg { display: inline-flex; flex-wrap: wrap; gap: 0; }
.rb-seg a, .rb-listbar a.chip { min-height: 32px; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; border-radius: 0; }
.rb-seg a.chip { margin-left: -1px; background: var(--rb-card); color: var(--rb-muted); border: 1px solid var(--rb-line); }
.rb-seg a.chip.active, .rb-listbar a.chip.active { background: var(--rb-selected); border-color: transparent; color: var(--rb-on-selected); }
.rb-listbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-3); }
table.rb-reps td { padding-top: 8px; padding-bottom: 8px; vertical-align: middle; }
table.rb-reps .rb-plan { min-width: 9rem; }
.rb-rowsmore { margin-top: var(--s-3); border-radius: 0; }
.rb-rowsmore .rb-when { margin-left: 6px; }
/* Status chips (statusChip in ramp-board.js): square, a glyph and a word; the warning one on the warn tint. */
.rb-st { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border: 1px solid var(--rb-line); border-radius: 0; background: var(--rb-raised); color: var(--rb-ink); font-size: 0.75rem; font-weight: 700; white-space: nowrap; }
.rb-st > span[aria-hidden] { font-size: 0.85em; }
.rb-st-warn { background: var(--rb-warn-tint); border-color: var(--rb-ember); color: var(--rb-ember-ink); }
.rb-st-grad { color: var(--rb-blue-ink); border-color: var(--rb-blue); }
.rb-st-ok { color: var(--rb-green); }
.rb-st-plain { color: var(--rb-muted); }
.rb-joined { text-decoration: underline dotted; cursor: help; }
.rb-rep-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-4); margin: 0 0 var(--s-3); }
.rb-rep-top h3 { margin: 0; font-size: 1.75rem; }
.rb-rep-top .btn { border-radius: 0; }
.rb-record { margin-left: auto; font-weight: 700; color: var(--rb-blue-ink); }
.rb-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); gap: var(--s-3); margin: 0; }
.rb-facts > div { padding: 10px 12px; background: var(--rb-raised); }
.rb-facts dt { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--rb-muted); }
.rb-facts dd { margin: 4px 0 0; font-weight: 700; color: var(--rb-ink); max-width: none; font-size: 1.0625rem; }
.rb-flags { margin-top: var(--s-3); }
:is(#view-dashboard, #view-ramp) td a[data-go] { display: inline-block; min-height: 24px; padding: 2px 0; box-sizing: border-box; color: var(--rb-ink); }

/* The view tabs: the active tab takes the selected gradient; on a phone the row scrolls with an edge fade. */
#view-ramp .ramp-tabs { display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; border-bottom: 1px solid var(--rb-line); margin-bottom: var(--s-4); }
#view-ramp .ramp-tabs::-webkit-scrollbar { display: none; }
#view-ramp .ramp-tabs [role="tab"] { flex-shrink: 0; min-height: 40px; padding: 8px 16px; border: 1px solid transparent; border-bottom: 0; border-radius: 0; background: none; color: var(--rb-muted); font: inherit; font-weight: 700; cursor: pointer; }
#view-ramp .ramp-tabs [role="tab"][aria-selected="true"] { background: var(--rb-selected); color: var(--rb-on-selected); }
@media (max-width: 640px) {
  #view-ramp .ramp-tabs { padding-right: 40px; -webkit-mask-image: linear-gradient(to right, black calc(100% - 48px), transparent); mask-image: linear-gradient(to right, black calc(100% - 48px), transparent); }
}

/* ---------- Program View ---------- */
.rb-pvbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin: 0 0 var(--s-3); }
.rb-pvbar .btn { border-radius: 0; }
.rb-pvbar .rb-jumpbtn { margin-left: auto; }
.rb-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; list-style: none; margin: 0; padding: 0; font-size: 0.9375rem; }
.rb-crumbs li + li::before { content: '\203A' / ''; color: var(--rb-muted); margin-right: 8px; }
.rb-pvtitle { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 var(--s-4); font-size: 1.75rem; }
.rb-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-4); align-items: start; }
.rb-pair > .rb-card, .rb-col > .rb-card { margin: 0 0 var(--s-4); }
.rb-fn { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.rb-fn li { display: grid; grid-template-columns: minmax(6rem, 13rem) minmax(4rem, 1fr) 3.5rem; gap: var(--s-3); align-items: center; font-size: 0.875rem; }
.rb-fn-bar { height: 20px; }
.rb-fn-start .rbx-bar { background: color-mix(in srgb, var(--rb-tick) 35%, var(--rb-track)); }   /* Started: a neutral tint of the track, never a solid grey (Dark included) */
.rb-fn-n { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.rb-fn-off .rb-fn-bar { display: flex; align-items: center; padding-left: 8px; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--rb-tick) 30%, transparent) 0 5px, transparent 5px 10px), var(--rb-card); cursor: help; }
.rb-fn-bar em { font-style: normal; font-size: 0.6875rem; font-weight: 700; color: var(--rb-muted); }
.rb-kids ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: var(--s-2); }
.rb-kid { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px var(--s-3); width: 100%; box-sizing: border-box; min-height: 44px; padding: var(--s-2) var(--s-3); font: inherit; text-align: left; background: var(--rb-raised); border: 1px solid var(--rb-line); border-radius: 0; color: var(--rb-ink); cursor: pointer; }
.rb-kid > span:first-child { font-weight: 700; flex: 1 0 auto; min-width: 0; overflow-wrap: normal; }
button.rb-kid:hover { border-color: var(--rb-edge); }
.rb-kid.rb-few { cursor: default; color: var(--rb-muted); background: transparent; border-style: dashed; }
.rb-kidbar { flex-basis: 100%; height: 6px; order: 9; }
/* Trainers: a group per division, the chance test drawn on the plot. */
.rb-trg { position: relative; display: grid; grid-template-columns: minmax(8rem, 13rem) minmax(0, 1fr) 3.5rem; column-gap: var(--s-3); row-gap: 8px; align-items: center; margin: 0 0 var(--s-4); font-size: 0.8125rem; }
.rb-trh { grid-column: 1 / -1; grid-row: 1; font-weight: 800; font-size: 0.8125rem; color: var(--rb-ink); }
.rb-tr-l { grid-column: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rb-tr-bar { grid-column: 2; height: 18px; overflow: visible; }
.rb-trg .rb-fn-n { grid-column: 3; }
.rbx-bar.rb-other { background: linear-gradient(90deg, var(--rb-muted), var(--rb-tick)); }
.rb-ci { position: absolute; top: 50%; height: 0; border-top: 2px solid var(--rb-ink); z-index: 2; }
.rb-ci::before, .rb-ci::after { content: ''; position: absolute; top: -6px; width: 2px; height: 10px; background: var(--rb-ink); }
.rb-ci::before { left: -1px; } .rb-ci::after { right: -1px; }
.rb-chance { grid-column: 2; position: relative; align-self: stretch; pointer-events: none; z-index: 3; }
.rb-chance-w { position: absolute; top: -4px; bottom: -4px; background: color-mix(in srgb, var(--rb-blue) 28%, transparent); }
.rb-chance-n { position: absolute; inset: -5px -3px; border: 1.5px dashed var(--rb-tick); }
.rb-chance-b { position: absolute; top: -3px; bottom: -3px; border: 1px solid var(--rb-edge); z-index: 1; }
.rb-band-higher { background: color-mix(in srgb, var(--rb-tg) 30%, transparent); }
.rb-band-lower { background: color-mix(in srgb, var(--rb-ember) 30%, transparent); }
.rb-band-about-the-same { background: color-mix(in srgb, var(--rb-tick) 30%, transparent); }
.rb-chance-m { position: absolute; left: 50%; top: -20px; transform: translateX(-50%); font-weight: 800; font-size: 14px; color: var(--rb-ink); }
.rb-chance-n .rb-chance-m { left: 4px; transform: none; }
.rb-chance-mb { left: auto; right: 0; transform: none; }
.rb-chance-key { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); font-size: 0.75rem; font-weight: 700; color: var(--rb-muted); }
.rb-chance-key li { display: inline-flex; align-items: center; gap: 8px; cursor: help; min-height: 24px; }
.rb-ck { display: inline-block; width: 28px; height: 16px; box-sizing: border-box; }
.rb-ck-within { background: linear-gradient(90deg, transparent 8px, color-mix(in srgb, var(--rb-blue) 28%, transparent) 8px 20px, transparent 20px); }
.rb-ck-beyond { background: linear-gradient(color-mix(in srgb, var(--rb-tick) 35%, transparent), color-mix(in srgb, var(--rb-tick) 35%, transparent)) 2px 0 / 10px 5px no-repeat, linear-gradient(color-mix(in srgb, var(--rb-tick) 35%, transparent), color-mix(in srgb, var(--rb-tick) 35%, transparent)) 9px 6px / 10px 5px no-repeat, linear-gradient(color-mix(in srgb, var(--rb-tick) 35%, transparent), color-mix(in srgb, var(--rb-tick) 35%, transparent)) 16px 11px / 10px 5px no-repeat; }
.rb-ck-none { border: 1.5px dashed var(--rb-tick); }

/* ---------- Cohorts ---------- */
.rb-cotable, .rb-heat { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.rb-cotable th, .rb-heat thead th { text-align: left; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rb-muted); padding: 6px 12px 6px 0; border-bottom: 1px solid var(--rb-line); }
.rb-cotable td { padding: 8px 12px 8px 0; border-bottom: 1px solid var(--rb-line); vertical-align: middle; }
.rb-cotable a[data-go] { color: var(--rb-ink); }
.rb-fold { display: none; font-weight: 500; color: var(--rb-muted); }
.rb-cdone { display: inline-flex; align-items: center; gap: 8px; }
.rb-cbar { width: 64px; height: 8px; flex-shrink: 0; }
.rb-cocharts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: var(--s-4) var(--s-5); margin: 0 0 var(--s-4); }
.rb-cochart { margin: 0; min-width: 0; }
.rb-cochart figcaption { margin: 0 0 var(--s-2); font-size: 0.875rem; }
.rb-cochart .rb-wait { margin-top: var(--s-2); }
.rb-cols { display: flex; align-items: flex-end; gap: 6px; height: 170px; padding-bottom: 2px; border-bottom: 1px solid var(--rb-trk-edge); overflow-x: auto; }
.rb-colw { flex: 1 1 0; min-width: 34px; max-width: 64px; height: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.rb-colv { font-size: 0.75rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--rb-ink); }
.rb-colbar { flex: 1; width: 100%; }
.rbx-bar.rb-vbar { top: auto; right: 0; width: auto; background: var(--rb-bar-v); transform-origin: center bottom; animation-name: rb-growv; }
@keyframes rb-growv { from { transform: scaleY(0); } }
.rb-coll { font-size: 0.6875rem; color: var(--rb-muted); white-space: nowrap; font-family: 'DM Mono', ui-monospace, monospace; }
.rb-coll-skip { visibility: hidden; }
.rb-grads { display: grid; gap: var(--s-2) var(--s-5); }
.rb-heat { border-collapse: separate; border-spacing: 2px; min-width: 520px; }
.rb-heat thead th { padding: 2px; text-align: center; letter-spacing: 0; font-size: 10.5px; }
.rb-heat tbody th { text-align: left; white-space: nowrap; font-weight: 700; padding-right: 8px; }
.rb-heat td { min-width: 26px; height: 24px; padding: 0; text-align: center; font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--hi1); }
:root[data-theme="alabaster"] .rb-heat td { color: var(--hi0); }
:root[data-theme="bright"] .rb-heat td { color: var(--hi2); }
:root[data-theme="dark"] .rb-heat td { color: var(--hi3); }
.rb-heat td.rb-heat-none { background: transparent !important; outline: 1px dashed var(--rb-tick); outline-offset: -2px; }
/* A wide table's cue on a phone: a shade at the right edge while there is more to scroll to. */
.rb-fade-x { background: linear-gradient(to right, transparent, var(--rb-card) 70%) 100% 0 / 40px 100% no-repeat local,
  linear-gradient(to left, color-mix(in srgb, var(--rb-ink) 22%, transparent), transparent) 100% 0 / 18px 100% no-repeat scroll; }

/* ---------- The Ctrl K jump ---------- */
.rb-jump { position: fixed; inset: 0; margin: 10vh auto auto; width: min(560px, calc(100vw - 32px)); max-height: 70vh; padding: 0; border: 1px solid var(--rb-edge); border-radius: 0; background: var(--rb-card); color: var(--rb-ink); box-shadow: var(--rb-hard); }
.rb-jump[open] { display: flex; flex-direction: column; }
.rb-jump::backdrop { background: color-mix(in srgb, #1A2332 45%, transparent); }
.rb-jump input { border: 0; border-bottom: 1px solid var(--rb-line); padding: var(--s-4); font: inherit; font-size: 1rem; outline: none; background: var(--rb-card); color: var(--rb-ink); }
.rb-jump input:focus-visible { box-shadow: inset 0 -2px 0 var(--rb-focus); }
.rb-jump [role="listbox"] { padding: var(--s-2); overflow: auto; outline: none; }
.rb-jump [role="option"] { display: flex; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) var(--s-3); min-height: 24px; cursor: pointer; font-size: 0.875rem; }
.rb-jump [role="option"].on { background: var(--rb-raised); font-weight: 600; box-shadow: inset 3px 0 0 var(--rb-tg); }
.rb-jump-group { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--rb-muted); padding: var(--s-2) var(--s-3) 2px; }
.rb-jump-empty { margin: 0; padding: var(--s-3) var(--s-4); }
.rb-jump-top { display: none; justify-content: flex-end; padding: var(--s-2) var(--s-2) 0; }

/* ---------- Widths ---------- */
@media (max-width: 1200px) { .rb-kpis { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1100px) { .rb-two, .rb-pair { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) {
  .rb-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rb-go ul { grid-template-columns: minmax(0, 1fr); }
  .rb-card { padding: var(--s-3); }
  .rb-fn li { grid-template-columns: minmax(5rem, 8rem) minmax(0, 1fr) 3rem; }
  .rb-trg { grid-template-columns: minmax(6rem, 8rem) minmax(0, 1fr) 3rem; }
  .rb-record { margin-left: 0; }
  :is(#view-dashboard, #view-ramp) .rb-hhead { display: none; }
  :is(#view-dashboard, #view-ramp) .rb-hrow { grid-template-columns: minmax(0, 1fr) auto; }
  :is(#view-dashboard, #view-ramp) .rb-hrow > .rb-ccs, :is(#view-dashboard, #view-ramp) .rb-hrow > .rb-plan { grid-column: 1 / -1; }
  .rb-due-g { flex-wrap: wrap; gap: 4px var(--s-3); padding: 6px; }
  .rb-due-l { width: auto; flex: 1 1 calc(100% - 32px); }
  .rb-due-bar { flex: 1 1 0; margin-left: 26px; }
  .rb-dr { grid-template-columns: minmax(0, 1fr) auto; }
  .rb-dr > .rb-dstrip { grid-column: 1 / -1; grid-row: 2; }
  .rb-dr.rb-dr-c { grid-template-columns: minmax(0, 1fr) 2.5rem auto; }
  .rb-dr-c > .rb-dbar { grid-column: 1 / -1; grid-row: 2; }
  .rb-root:is([data-view="dashboard"], [data-view="reps"])::before { display: none; }
  .rb-cotable .rb-wide { display: none; }
  .rb-fold { display: block; }
  .rbx-fig { font-size: 32px; }
}
@media (max-width: 560px), (pointer: coarse) { .rb-jump-top { display: flex; } .rb-jumpbtn kbd { display: none; } }
@media (pointer: coarse) {
  .rb-dot { width: 44px; height: 44px; margin-left: -22px; }
  .rb-dots { height: 44px; }
  .rb-dstrip .sq { width: 44px; height: 44px; }
  .rb-chip, .rb-divs .chip, .rb-month select, .rb-jumpbtn, .rb-seg a, .rb-due-g, .rb-due-all, .rb-due .btn, .rb-copy, .rb-dr-name, .rb-link, .rb-more, :is(#view-dashboard, #view-ramp) .nh-filters button, :is(#view-dashboard, #view-ramp) .nh-more { min-height: 44px; }
  .rb-jump [role="option"] { min-height: 44px; align-items: center; }
  #view-ramp .ramp-tabs [role="tab"], .rb-crumbs .rb-link, .nh-name, :is(#view-dashboard, #view-ramp) td a[data-go], .rb-h2 a, .rb-chance-key li { min-height: 44px; display: inline-flex; align-items: center; }
}
/* All motion off for anyone who asked for less: no count-up (ramp-board.js countUp), no pop, grow, glow or press. */
@media (prefers-reduced-motion: reduce) {
  :is(#view-dashboard, #view-ramp) *, :is(#view-dashboard, #view-ramp) *::before, :is(#view-dashboard, #view-ramp) *::after { animation: none !important; transition: none !important; }
  a.rbx-hard:active { transform: none; }
}
.tbl-scroll + .rb-due, .empty + .rb-due { margin-top: var(--s-4); }
.ramp-panel .rb-bar { margin: 0 0 var(--s-4); }
.rb-pvtitle .rb-when { font-family: 'Manrope', sans-serif; font-size: 0.9375rem; font-weight: 600; }