/* Ramp's two tabs (Each rep, Program) and the Program dashboard. Ported from the next-sandbox (base.css), scoped to the
   Ramp view and drawn with the manager portal's own tokens (manager.html :root). Square corners on cards, tiles and
   controls. Status is never colour alone: a mark and a word go with it. Scroll bars are hidden only on the Program's own
   boxes that can also be dragged sideways; the Each rep tab keeps the browser's own. */

/* ---- The tabs ---- */
#view-ramp .ramp-tabs { display: flex; gap: var(--s-4); margin: 0 0 var(--s-4); padding: 3px 3px 0; border-bottom: 1px solid var(--hairline); }
#view-ramp .ramp-tabs [role="tab"] { font-family: inherit; font-weight: 600; font-size: 0.9375rem; color: var(--text-muted); background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px; padding: var(--s-2) 2px; cursor: pointer; white-space: nowrap; min-height: 40px; }
#view-ramp .ramp-tabs [role="tab"]:hover { color: var(--ink); }
#view-ramp .ramp-tabs [role="tab"][aria-selected="true"] { color: var(--ink); border-bottom-color: var(--solar-green); }
#view-ramp .ramp-tabs [role="tab"]:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
#view-ramp .ramp-panel[hidden] { display: none; }
#view-ramp .ramp-panel .panel, #view-ramp .ramp-panel .kpi, #view-ramp .ramp-panel table.data { border-radius: 0; }
#view-ramp .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; }

/* Each rep, narrow: By start month as a compact three-column list (started and division, reps, need help). */
@media (max-width: 720px) {
  #ramp-panel-each section[aria-label="By start month"] table.data tbody tr { display: grid; grid-template-columns: 1fr auto auto; gap: 0 var(--s-3); align-items: center; padding: var(--s-2) var(--s-3); }
  #ramp-panel-each section[aria-label="By start month"] table.data td { display: none; padding: 0; width: auto; }
  #ramp-panel-each section[aria-label="By start month"] table.data td::before { display: none; }
  #ramp-panel-each section[aria-label="By start month"] table.data td:nth-child(1) { display: block; grid-column: 1; grid-row: 1; }
  #ramp-panel-each section[aria-label="By start month"] table.data td:nth-child(2) { display: block; grid-column: 1; grid-row: 2; font-size: 0.8125rem; color: var(--text-muted); }
  #ramp-panel-each section[aria-label="By start month"] table.data td:nth-child(3),
  #ramp-panel-each section[aria-label="By start month"] table.data td:nth-child(7) { display: block; grid-row: 1 / 3; text-align: right; font-size: 0.8125rem; }
  #ramp-panel-each section[aria-label="By start month"] table.data td:nth-child(3)::before,
  #ramp-panel-each section[aria-label="By start month"] table.data td:nth-child(7)::before { display: block; content: attr(data-label); width: auto; font-size: 0.6875rem; }
}

/* ---- The Program dashboard ---- */
#view-ramp .ramp-panel { container-type: inline-size; }
.pg { --rail-w: 270px; display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.pg kbd { font-weight: 600; font-size: 0.6875rem; line-height: 1; font-family: inherit; padding: 2px 5px; margin-left: 4px; border: 1px solid var(--hairline); border-radius: 0; background: var(--surface); }
.pg-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-3) var(--s-4); flex-wrap: wrap; }
.pg-where { min-width: 0; }
.pg-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px; font-size: 0.8125rem; color: var(--text-muted); min-height: 18px; }
.pg-crumbs li + li::before { content: '\203A'; margin: 0 6px; color: var(--text-muted); }
.pg-crumbs button { font: inherit; color: var(--ink); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-decoration-color: var(--hairline); text-underline-offset: 3px; }
.pg-crumbs button:hover { text-decoration-color: var(--ink); }
.pg-crumbs .pg-chipcrumb::before { content: ''; margin: 0 4px; }
.pg-crumbs .pg-chipcrumb button { font-weight: 600; font-size: 0.75rem; line-height: 1; text-decoration: none; padding: 5px 9px; background: var(--surface); border: 1px solid var(--hairline); }
.pg-titlerow { display: flex; align-items: center; gap: var(--s-2) var(--s-3); flex-wrap: wrap; }
.pg-title { margin: 2px 0 0; font-family: 'Fraunces', serif; font-size: 1.5rem; line-height: 1.15; color: var(--ink); outline: none; }
.pg-title:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.pg-eyebrow { display: block; font-family: 'Manrope', sans-serif; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 2px; }
.pg-up { display: inline-flex; align-items: center; gap: 6px; font-family: inherit; font-weight: 600; font-size: 0.8125rem; color: var(--ink); background: var(--surface-white); border: 1px solid var(--hairline); padding: 6px 12px; min-height: 32px; cursor: pointer; white-space: nowrap; }
.pg-up:hover { border-color: var(--ink); background: var(--surface); }
.pg-up span { font-size: 1rem; line-height: 1; }
.pg-source { margin: 2px 0 0; font-size: 0.75rem; color: var(--text-muted); }
.pg-controls { display: flex; gap: var(--s-2) var(--s-3); align-items: center; flex-wrap: wrap; }
.pg-divisions { display: flex; gap: var(--s-1); flex-wrap: wrap; }
/* Square corners on every control inside the dashboard, to match the cards. */
.pg .chip, .pg .btn, .pg .pg-seg, .pg .nh-filters button, .pg .pg-status { border-radius: 0; }
.pg-divisions .chip, .pg-metric .chip, .pg-pages .chip { font-family: inherit; cursor: pointer; }
.pg-seg { display: inline-flex; border: 1px solid var(--hairline); overflow: hidden; flex-shrink: 0; }
.pg-seg:has(:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.pg-seg button { font-family: inherit; font-weight: 600; font-size: 0.75rem; line-height: 1; min-height: 26px; padding: 6px 10px; border: 0; background: none; color: var(--text-muted); cursor: pointer; }
.pg-seg button:focus-visible { outline: 2px solid var(--surface-white); outline-offset: -4px; }
.pg-seg button[aria-pressed="true"] { background: var(--ink-band, #0F2038); color: #FFFFFF; }
.pg-seg-lg button { font-size: 0.8125rem; min-height: 32px; padding: 8px 14px; }
.pg button:focus-visible, .pg [tabindex="0"]:focus-visible, .pg select:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.pg .pg-seg button:focus-visible { outline: 2px solid var(--surface-white); outline-offset: -4px; box-shadow: inset 0 0 0 4px var(--ink); }

/* Headline tiles share the page grid: the last one sits over the side panel, with the same gap as the cards. Only
   numbers the data can give are tiles (--kpi-n of them). */
.pg .pg-kpis { margin: 0; display: grid; gap: var(--s-3); grid-template-columns: repeat(calc(var(--kpi-n, 5) - 1), minmax(0, 1fr)) var(--rail-w); }
.pg .pg-kpis button.kpi { border-radius: 0; padding: 8px var(--s-3); min-width: 0; }
.pg .pg-kpis button.kpi[aria-pressed="true"] { box-shadow: inset 0 3px 0 var(--solar-green-dark); border-color: var(--ink); background: var(--surface-white); }
.pg .pg-kpis .kpi .n { font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.5rem; color: var(--ink); }
.pg .pg-kpis .kpi .l { font-size: 0.6875rem; margin-top: 4px; }
.pg .pg-kpis .sub { font-size: 0.55em; color: var(--text-muted); }
.pg-few { margin: 0; font-size: 0.875rem; color: var(--text-muted); }
.pg-few-band { padding: var(--s-2) var(--s-3); border: 1px solid var(--hairline); background: var(--surface); color: var(--ink); }

.pg-body { display: grid; grid-template-columns: minmax(0, 1fr) var(--rail-w); gap: var(--s-3); align-items: start; }
.pg-main { min-width: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.pg h4 { margin: 0; font-size: 1rem; line-height: 1.25; color: var(--ink); }
.pg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(300px, 34vh, 520px); gap: var(--s-3); }
.pg .panel { margin: 0; border-radius: 0; }
.pg-card, .pg-drill { display: flex; flex-direction: column; min-height: 0; min-width: 0; overflow: hidden; padding: var(--s-2) var(--s-3); }
/* Hover draws an ink line; nothing lifts. */
.pg-card:hover { outline: 1.5px solid var(--ink); outline-offset: -1.5px; }
.pg-card-head { display: flex; justify-content: space-between; gap: var(--s-3); align-items: flex-start; }
.pg-card-head > :first-child { min-width: 0; }
.pg-card h4 { overflow-wrap: anywhere; }
.pg-card-tools { display: flex; gap: var(--s-2); align-items: center; flex-shrink: 0; }
.pg-q { margin: 2px 0 0; font-size: 0.8125rem; line-height: 1.35; color: var(--text-muted); }
.pg-drill .pg-card-head p { margin: 2px 0 0; font-size: 0.875rem; color: var(--text-muted); }
.pg-card-body { flex: 1; min-height: 0; margin-top: var(--s-2); display: flex; flex-direction: column; }
.pg-card-body > * { flex: 1; min-height: 0; }
.pg-chart { position: relative; flex: 1; min-height: 120px; min-width: 0; overflow: hidden; }
.pg-svg { display: block; font-family: 'Manrope', sans-serif; }
/* Still-here heat map: a cell with no data yet has no fill and a dashed outline (fills come from --th-heat-1..4, Program.heatCell). */
.pg-heat-empty { fill: none; stroke: var(--ink); stroke-width: 1; stroke-dasharray: 3 2; }
/* A figure on 1 to 4 reps, inside reach: its n beside it. */
.pg-n { color: var(--th-text-3); font-size: 0.75rem; font-weight: 400; margin-left: 0.25em; white-space: nowrap; }
.pg-hit { cursor: pointer; }
.pg-hit:hover rect, .pg-hit:hover circle { opacity: 0.85; }
/* Empty: one noun phrase, left-aligned. */
.pg-empty { display: grid; place-content: start; text-align: left; gap: 4px; border: 0; padding: var(--s-4); }
.pg-empty p { margin: 0; }
.pg-two { display: grid; grid-template-columns: 3fr 2fr; gap: var(--s-3); min-height: 0; }
.pg-two > * { min-height: 220px; }
.pg-stack { display: flex; flex-direction: column; gap: var(--s-2); min-height: 0; }
.pg-fill { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.pg-stat { margin: 0; font-size: 0.875rem; color: var(--text-muted); }
.pg-stat b { font-family: 'Fraunces', serif; font-size: 1.5rem; color: var(--ink); margin-right: 4px; }
.pg-big { display: flex; flex-direction: column; justify-content: center; }
.pg-big .n { font-family: 'Fraunces', serif; font-size: 3.5rem; font-weight: 600; line-height: 1; color: var(--ink); }
.pg-big .l { color: var(--text-muted); font-size: 0.875rem; margin-top: var(--s-2); }
.pg-metric { display: flex; gap: var(--s-1); flex-wrap: wrap; }
.pg-metric .chip { font-size: 0.75rem; padding: 5px 10px; min-height: 26px; }
.pg-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 4px var(--s-3); margin: 4px 0 0; padding: 0; font-size: 0.75rem; color: var(--text-muted); flex: 0 0 auto !important; }
.pg-legend button, .pg-legend span { display: inline-flex; align-items: center; gap: 6px; font-size: inherit; }
.pg-swatch { display: inline-block; width: 18px; height: 0; }
.pg-box { width: 10px; height: 10px; outline: 1px solid var(--ink); }

/* Cards waiting on data the platform does not record: one line, opened to see which. */
.pg-waiting { font-size: 0.875rem; color: var(--ink); border: 1px solid var(--hairline); background: var(--surface); padding: var(--s-2) var(--s-3); }
.pg-waiting summary { cursor: pointer; font-weight: 600; min-height: 28px; }
.pg-waiting ul { margin: var(--s-2) 0 0; padding-left: 18px; display: grid; gap: 4px; }

.pg-status { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-weight: 600; font-size: 0.75rem; color: var(--ink); padding: 2px 8px; background: var(--surface); }
.pg-good { background: color-mix(in srgb, var(--solar-green) 22%, var(--surface-white)); }
.pg-watch { background: color-mix(in srgb, var(--accent-warm) 26%, var(--surface-white)); }
.pg-risk { background: color-mix(in srgb, var(--accent-rose) 20%, var(--surface-white)); }

/* Side by side: the tiles scroll inside the card (a labelled, focusable box), with "N more" opening the card. */
.pg-multiwrap { overflow: auto; min-height: 0; scrollbar-width: none; }
.pg-multiwrap::-webkit-scrollbar { display: none; width: 0; height: 0; }
.pg-multiples { list-style: none; margin: 0; padding: 2px; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); grid-auto-rows: min-content; gap: var(--s-2); align-content: start; }
.pg-tile { width: 100%; text-align: left; font: inherit; display: flex; flex-direction: column; gap: 4px; padding: var(--s-2) var(--s-3); background: var(--surface-white); border: 1px solid var(--hairline); border-radius: 0; cursor: pointer; color: inherit; }
.pg-tile:hover { border-color: var(--ink); }
.pg-tile-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); font-size: 0.875rem; min-width: 0; }
/* A rep tile: the status sits under the name, so names are not cut short. */
.pg-tile-rep .pg-tile-head { flex-direction: column; align-items: flex-start; gap: 4px; }
.pg-tile-rep .pg-tile-head strong { white-space: normal; overflow-wrap: anywhere; }
.pg-tile-head strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-tile-nums { display: flex; flex-wrap: wrap; gap: 2px var(--s-2); font-size: 0.75rem; color: var(--text-muted); }
.pg-tile-nums b { color: var(--ink); }
.pg-more { height: 100%; justify-content: center; align-items: center; color: var(--ink); font-weight: 600; min-height: 60px; }

.pg-pager { display: flex; gap: var(--s-3); align-items: center; min-width: 0; }
.pg-pages { list-style: none; display: flex; gap: var(--s-1); margin: 0; padding: 0; }
.pg-pager .hint { max-width: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; text-align: right; font-size: 0.8125rem; color: var(--text-muted); }

/* An opened card: the chart and its table side by side, what the data is, and the reps behind it. */
.pg-drill-body { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--s-4); margin: var(--s-2) 0; min-height: min(48vh, 460px); }
.pg-drill-chart, .pg-drill-table { min-height: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.pg-drill-chart > .pg-chart, .pg-drill-chart > .pg-two, .pg-drill-chart > .pg-stack, .pg-drill-chart > .pg-empty { flex: 1; min-height: 280px; }
.pg-drill-table .pg-scroll { max-height: min(62vh, 560px); }
.pg-about { font-size: 0.8125rem; color: var(--ink); margin-bottom: var(--s-2); }
.pg-about summary { cursor: pointer; color: var(--text-muted); font-weight: 600; }
.pg-about ul { margin: 4px 0; padding-left: 18px; }
.pg-about p { margin: 2px 0; }
.pg-drill-roster { min-width: 0; }

/* Tables inside cards and the roster: the header row stays in view. These boxes can be dragged sideways, so their
   scroll bars are hidden; they still scroll by wheel, trackpad, touch and keyboard. */
.pg-scroll { overflow: auto; min-height: 0; scroll-padding-top: 36px; scrollbar-width: none; }
.pg-scroll::-webkit-scrollbar { display: none; width: 0; height: 0; }
@media (pointer: fine) { .pg-scroll, .pg-multiwrap { overscroll-behavior: contain; } }
.pg-dragging { cursor: grabbing; user-select: none; }
.pg-card-body > .pg-scroll { flex: 1; }
.pg-scroll table.data { overflow: visible; font-size: 0.8125rem; border-radius: 0; }
.pg-scroll table.data th { position: sticky; top: 0; z-index: 2; background: var(--ink-band, #0F2038); white-space: nowrap; font-size: 0.6875rem; padding: 6px 10px; }
.pg-scroll table.data td { padding: 4px 10px; }
.pg-scroll table.data tbody tr:nth-child(even) { background: none; }
.pg-scroll table.data tbody tr.alt { background: var(--surface); }
.pg-scroll table.data tbody tr[data-row] { cursor: pointer; }
.pg-scroll table.data tbody tr[data-row]:hover { background: color-mix(in srgb, var(--totalhome-blue) 10%, transparent); }
.pg-rowbtn { font: inherit; font-weight: 600; color: var(--ink); background: none; border: 0; padding: 2px 0; min-height: 24px; cursor: pointer; text-align: left; text-decoration: underline; text-decoration-color: var(--hairline); text-underline-offset: 3px; white-space: nowrap; }
.pg-rowbtn:hover { text-decoration-color: var(--ink); }
.pg-sort { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-transform: inherit; letter-spacing: inherit; font-weight: inherit; }
.pg .pg-sort:focus-visible { outline: 2px solid var(--surface-white); outline-offset: 2px; }
.pg-link { font: inherit; background: none; border: 0; padding: 0; color: var(--ink); cursor: pointer; text-align: left; text-decoration: underline; text-underline-offset: 3px; }

/* The roster: a table everywhere (the portal's phone rule turns tables into cards, which would lose the sort), with the
   rep's name kept in view while the other columns slide. On a narrow screen: ten reps, then Show all, and the sort as
   a menu. The "why" text wraps instead of hiding. */
.pg-roster table.data td { white-space: nowrap; }
.pg-roster table.data td:has(.pg-why) { white-space: normal; min-width: 22ch; }
.pg-why { display: inline-block; max-width: 34ch; }
.pg-roster .pg-scroll { max-height: min(70vh, 640px); }
.pg-roster table.data th:first-child, .pg-roster table.data td:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface-white); box-shadow: 1px 0 0 var(--hairline); }
.pg-roster table.data th:first-child { z-index: 3; background: var(--ink-band, #0F2038); }
.pg-roster table.data tbody tr.alt td:first-child { background: var(--surface); }
.pg-sortpick { display: none; font-size: 0.8125rem; color: var(--text-muted); margin-bottom: var(--s-2); }
.pg-sortpick select { font: inherit; color: var(--ink); background: var(--surface-white); border: 1px solid var(--hairline); padding: 6px 8px; margin-left: 6px; min-height: 36px; }
/* Any table wider than its box says so, and fades at the edge. */
.pg-tablewrap { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.pg-tablewrap > .pg-scroll { flex: 1; }
.pg-more-cols { display: none; margin: 0 0 4px; font-size: 0.75rem; color: var(--text-muted); }
.pg-wide > .pg-more-cols, .pg-roster.pg-wide .pg-more-cols { display: block; }
.pg-wide > .pg-scroll, .pg-roster.pg-wide .pg-scroll { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%); mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%); }
.pg-showall { display: none; margin-top: var(--s-2); }
.pg-count { font-size: 0.75rem; color: var(--text-muted); margin: 4px 0 0; }
@media (max-width: 720px) {
  .pg-roster table.data { display: table; }
  .pg-roster table.data thead { display: table-header-group; }
  .pg-roster table.data tbody { display: table-row-group; }
  .pg-roster table.data tr { display: table-row; padding: 0; }
  .pg-roster table.data td { display: table-cell; width: auto; padding: 4px 10px; border-bottom: 1px solid var(--hairline-soft); }
  .pg-roster table.data td::before { content: none; display: none; }
}

/* The Reps view: who needs help, then every rep in view. */
.pg-reps { display: grid; gap: var(--s-3); }
.pg-reps .panel { padding: var(--s-2) var(--s-3); min-width: 0; }
.pg-reps .nh { margin: 0; }
.pg-reps .nh-list { max-height: 40vh; overflow: auto; }
.pg-reps .nh-head h4 { display: flex; align-items: center; gap: 8px; }
.pg .pg-nh-row { grid-template-columns: minmax(140px, 220px) max-content minmax(80px, 140px) 1fr; }
.pg-nh-row .nh-where { color: var(--text-muted); font-size: 0.8125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* The side panel: this view, a preview of whatever is pointed at, and two groups to compare. */
.pg-rail { min-width: 0; display: flex; flex-direction: column; gap: var(--s-3); position: sticky; top: calc(var(--ct-hdr-h, 0px) + 12px); }
.pg-rail .panel { padding: var(--s-2) var(--s-3); }
.pg-rail h4 { margin: 0 0 var(--s-2); font-size: 0.9375rem; overflow-wrap: anywhere; }
.pg-rail .hint { font-size: 0.75rem; color: var(--text-muted); margin: var(--s-2) 0 0; }
.pg-compare-head { display: flex; justify-content: space-between; align-items: center; }
.pg-compare-head h4 { outline: none; }
.pg-compare-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.pg-compare-col { min-width: 0; font-size: 0.75rem; }
.pg-compare-col .pg-facts { font-size: 0.75rem; }
.pg-slot { min-height: 72px; border: 1px dashed var(--hairline); border-radius: 0; display: grid; place-content: center; text-align: center; font-family: 'Fraunces', serif; font-size: 1.125rem; color: var(--text-muted); }
.pg-slot span { display: block; font-family: 'Manrope', sans-serif; font-size: 0.6875rem; padding: 0 6px; }
.pg-facts { margin: 0 0 var(--s-2); display: grid; gap: 1px; font-size: 0.8125rem; }
.pg-facts > div { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); border-bottom: 1px solid var(--hairline-soft); padding-bottom: 2px; }
.pg-facts dt { color: var(--text-muted); }
.pg-facts dd { margin: 0; font-weight: 600; color: var(--ink); text-align: right; }
.pg-mini-label { font-size: 0.75rem; color: var(--text-muted); margin: var(--s-2) 0 0; }
.pg-key { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); font-size: 0.8125rem; font-weight: 600; }
.pg-preview-tools { display: flex; gap: var(--s-2); margin-top: var(--s-2); }
.pg-spark { display: block; }

/* The Rep level. */
.pg-rep { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-2) var(--s-3); border-radius: 0; }
.pg-rep-head p { margin: 0; font-size: 0.875rem; color: var(--text-muted); }

/* The jump menu (Ctrl K), centred at every size. */
.pg-jump { position: fixed; inset: 0; margin: 10vh auto auto; width: min(560px, calc(100vw - 32px)); max-height: 70vh; padding: 0; border: 1px solid var(--hairline); border-radius: 0; background: var(--surface-white); color: var(--ink); box-shadow: var(--shadow-md); }
.pg-jump[open] { display: flex; flex-direction: column; }
.pg-jump::backdrop { background: color-mix(in srgb, var(--ink) 35%, transparent); }
.pg-jump input { border: 0; border-bottom: 1px solid var(--hairline); padding: var(--s-4); font: inherit; font-size: 1rem; outline: none; }
.pg-jump input:focus-visible { box-shadow: inset 0 -2px 0 var(--ink); }
.pg-jump [role="listbox"] { padding: var(--s-2); overflow: auto; outline: none; }
.pg-jump [role="option"] { display: flex; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) var(--s-3); cursor: pointer; font-size: 0.875rem; }
.pg-jump [role="option"].on { background: var(--surface); font-weight: 600; box-shadow: inset 3px 0 0 var(--ink); }
.pg-jump-group { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); padding: var(--s-2) var(--s-3) 2px; }
.pg-jump-hint { color: var(--text-muted); font-size: 0.8125rem; text-align: right; }
.pg-jump-empty { margin: 0; padding: var(--s-3) var(--s-4); color: var(--ink); }
/* Close: on phones and touch screens, where there is no Esc key to hand. */
.pg-jump-top { display: none; justify-content: flex-end; padding: var(--s-2) var(--s-2) 0; }
@media (max-width: 560px), (pointer: coarse) { .pg-jump-top { display: flex; } .pg-jumpbtn kbd { display: none; } }
.pg-sort-text { display: none; }
.pg-nodata { color: var(--text-muted); }
.pg-ns { color: var(--text-muted); font-size: 0.875em; font-weight: 400; }
.pg-axis { margin: 0; font-size: 0.75rem; color: var(--text-muted); }

/* View transitions between levels, skipped for reduced motion. */
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }

/* The layout follows the width the Program panel has, not the window, so it fits whatever column the page gives it.
   Wide: three cards a row and a wider side panel. Narrow: the side panel moves under the cards, then one card a row. */
@container (min-width: 1500px) { .pg { --rail-w: 20rem; } .pg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (min-width: 2200px) { .pg-grid { grid-auto-rows: clamp(340px, 36vh, 640px); } .pg-title { font-size: 1.75rem; } }
@container (min-width: 3000px) { .pg { --rail-w: 24rem; } .pg-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@container (max-width: 1000px) {
  .pg-body { grid-template-columns: minmax(0, 1fr); }
  .pg .pg-kpis { grid-template-columns: repeat(var(--kpi-n, 5), minmax(0, 1fr)); }
  .pg-rail { position: static; display: grid; grid-template-columns: 1fr 1fr; }
}
@container (max-width: 900px) { .pg-drill-body { grid-template-columns: 1fr; } }
@container (max-width: 720px) { .pg-grid { grid-template-columns: 1fr; grid-auto-rows: 340px; } .pg-two { grid-template-columns: 1fr; } .pg-rail { grid-template-columns: 1fr; } }
@container (max-width: 560px) {
  .pg .pg-kpis { grid-template-columns: repeat(var(--kpi-narrow, 2), minmax(0, 1fr)); gap: var(--s-2); }
  .pg .pg-kpis .kpi .n { font-size: 1.25rem; }
  .pg-title { font-size: 1.25rem; }
  .pg-titlerow { flex-direction: column; align-items: flex-start; }
  .pg-card-head { flex-wrap: wrap; }
  .pg-pager .hint { display: none; }
  .pg .pg-nh-row { grid-template-columns: 1fr auto; }
  .pg-nh-row .nh-where { display: none; }
  .pg-nh-row .nh-chips { grid-column: 1 / -1; }
  .pg-reps .nh-list { max-height: none; overflow: visible; }
  /* The roster flows with the page: ten reps, then Show all; sort from a menu. */
  .pg-roster .pg-scroll { max-height: none; overflow-y: visible; }
  .pg-roster.pg-capped tr.pg-extra, .nh.pg-capped li.pg-extra { display: none; }
  .pg-roster.pg-capped .pg-showall, .nh.pg-capped .pg-showall { display: inline-flex; }
  .pg-sortpick { display: block; }
  /* On a phone the menu sorts; the headers are plain text, and the Why column stays out of the layout. */
  .pg-roster .pg-sort { display: none; }
  .pg-roster .pg-sort-text { display: inline; }
  .pg-roster .pg-col-why { display: none !important; }
}