/* ────────────────────────────────────────────────────────────────────
 * Spartan CRM — Capacity Planner V2.1 (WIP-SCHED-V2.1-INTEGRATION-01)
 * Companion to modules/30b-capacity-planner-v2.js.
 * Mirrors docs/mockups/spartan-capacity-planner-v2.1.html.
 * Scoped under .cp-page; legacy V1 .capplan-* / .cap-* untouched.
 * ──────────────────────────────────────────────────────────────────── */

.cp-page {
  --cp-red:#a16207; --cp-red-dark:#854d0e; --cp-ink:#0A0A0A;
  /* VIC/ACT/SA/TAS branch emblems are categorical data colours, not brand:
   * VIC keeps its own crimson below rather than following the accent. */
  --cp-branch-vic:#C41230; --cp-branch-vic-dark:#854d0e;
  --cp-s50:#FAFAF9; --cp-s100:#F5F5F4; --cp-s200:#E7E5E4; --cp-s300:#D6D3D1;
  --cp-s400:#A8A29E; --cp-s500:#78716C; --cp-s600:#57534E; --cp-s700:#44403C;
  --cp-s800:#292524; --cp-s900:#1C1917;
  --cp-ok-bg:#DCFCE7; --cp-ok-fg:#15803D; --cp-ok-light:#22C55E; --cp-ok-deep:#166534;
  --cp-due-bg:#FEE2E2; --cp-due-fg:#DC2626; --cp-due-deep:#991B1B;
  --cp-pending-bg:#FEF3C7; --cp-pending-fg:#D97706; --cp-pending-deep:#92400E;
  --cp-info-bg:#DBEAFE; --cp-info-fg:#1D4ED8;
  --cp-purple:#7C3AED;
  --cp-shadow-rest:0 1px 2px rgba(10,10,10,.03), 0 1px 1px rgba(10,10,10,.02);
  --cp-shadow-hover:0 1px 2px rgba(10,10,10,.04), 0 12px 28px -12px rgba(10,10,10,.18);
  --cp-ease:cubic-bezier(.4,0,.2,1); --cp-t:180ms var(--cp-ease);
  font-family:'Archivo',system-ui,sans-serif;
  color:var(--cp-ink); display:flex; flex-direction:column; gap:18px;
}

@keyframes cp-pulse-banner-critical {
  0%,100% { box-shadow:0 0 0 0 rgba(220,38,38,.35), inset 0 0 0 1.5px rgba(220,38,38,.6); }
  50%     { box-shadow:0 0 0 6px rgba(220,38,38,0), inset 0 0 0 2px rgba(220,38,38,.9); }
}
@media (prefers-reduced-motion: reduce) {
  .cp-page .cp-horizon-cell.critical { animation:none !important; }
}

.cp-page svg { width:14px; height:14px; flex-shrink:0; }
.cp-eyebrow {
  font-family:'Archivo Narrow',system-ui,sans-serif;
  font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--cp-s500);
}
.cp-empty { padding:24px; text-align:center; color:var(--cp-s500); font-size:13px; font-style:italic; }

.cp-hero { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; }
.cp-hero-l { display:flex; flex-direction:column; gap:4px; }
.cp-hero-title { font-size:32px; font-weight:900; letter-spacing:-.025em; line-height:1.05; }
.cp-hero-sub { font-size:13px; color:var(--cp-s500); font-weight:500; }
.cp-hero-sub b { color:var(--cp-ink); font-weight:700; }
.cp-hero-r { display:flex; gap:10px; }

.cp-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:9px 14px; font-size:13px; font-weight:600; border-radius:9px;
  cursor:pointer; transition:all var(--cp-t); border:1px solid transparent;
  white-space:nowrap; font-family:inherit;
}
.cp-btn-w { background:#fff; color:var(--cp-s700); border-color:var(--cp-s200); box-shadow:var(--cp-shadow-rest); }
.cp-btn-w:hover { border-color:var(--cp-ink); color:var(--cp-ink); }
.cp-btn-d { background:var(--cp-ink); color:#fff; border-color:var(--cp-ink); }
.cp-btn-d:hover { background:var(--cp-s900); }
.cp-btn-sm { padding:6px 11px; font-size:12px; border-radius:8px; }

/* KPI strip */
.cp-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.cp-kpi { background:#fff; border:1px solid var(--cp-s200); border-radius:12px; padding:14px 16px; box-shadow:var(--cp-shadow-rest); display:flex; flex-direction:column; gap:6px; position:relative; overflow:hidden; }
.cp-kpi::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; }
.cp-kpi.crew::before { background:var(--cp-red); }
.cp-kpi.hours::before { background:var(--cp-info-fg); }
.cp-kpi.frames::before { background:var(--cp-purple); }
.cp-kpi.gap::before { background:var(--cp-ok-fg); }
.cp-kpi-label { font-family:'Archivo Narrow'; font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--cp-s500); }
.cp-kpi-row { display:flex; align-items:baseline; gap:8px; }
.cp-kpi-num { font-size:28px; font-weight:900; letter-spacing:-.025em; line-height:1; }
.cp-kpi-unit { font-family:'Archivo Narrow'; font-size:11px; font-weight:700; color:var(--cp-s500); letter-spacing:.04em; }
.cp-kpi-sub { font-size:11px; color:var(--cp-s500); font-weight:500; line-height:1.3; }
.cp-kpi-sub b { color:var(--cp-ink); font-weight:700; }
.cp-kpi-sub b.up { color:var(--cp-ok-fg); }

/* State legend */
.cp-state-legend {
  display:flex; align-items:center; gap:14px; padding:10px 16px;
  background:var(--cp-s50); border:1px solid var(--cp-s200); border-radius:10px;
}
.cp-state-legend-title { font-family:'Archivo Narrow'; font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--cp-s700); }
.cp-state-item { display:flex; align-items:center; gap:7px; font-family:'Archivo Narrow'; font-size:11.5px; font-weight:700; color:var(--cp-s700); letter-spacing:.02em; }
.cp-state-swatch { width:14px; height:10px; border-radius:2px; }
.cp-state-swatch.locked { background:#facc15; }
.cp-state-swatch.proposed { background:repeating-linear-gradient(45deg,var(--cp-pending-fg) 0,var(--cp-pending-fg) 3px,#F59E0B 3px,#F59E0B 6px); }

/* Week nav */
.cp-weeknav {
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 16px; background:#fff; border:1px solid var(--cp-s200); border-radius:10px;
}
.cp-weeknav-l { display:flex; align-items:center; gap:12px; }
.cp-weeknav-range { font-size:13px; font-weight:700; letter-spacing:-.005em; }
.cp-weeknav-context { font-family:'Archivo Narrow'; font-size:11px; color:var(--cp-s500); font-weight:600; letter-spacing:.02em; }
.cp-weeknav-context b { color:var(--cp-ink); }

/* Section shell */
.cp-section { background:#fff; border:1px solid var(--cp-s200); border-radius:14px; box-shadow:var(--cp-shadow-rest); overflow:hidden; }
.cp-section-h {
  padding:16px 22px;
  display:flex; justify-content:space-between; align-items:center;
  border-bottom:1px solid var(--cp-s200);
  background:linear-gradient(180deg,var(--cp-s50) 0%,transparent 100%);
}
.cp-section-h-l { display:flex; flex-direction:column; gap:2px; }
.cp-section-title { font-weight:800; font-size:16px; letter-spacing:-.01em; display:flex; align-items:center; gap:9px; }
.cp-section-sub { font-size:11.5px; color:var(--cp-s500); font-weight:500; }

/* Installer load table */
.cp-table { padding:0; }
.cp-row {
  padding:14px 22px; border-bottom:1px solid var(--cp-s200);
  display:grid; grid-template-columns:220px 1fr 220px; gap:18px; align-items:center;
  cursor:pointer; transition:background var(--cp-t);
}
.cp-row:last-child { border-bottom:0; }
.cp-row:hover { background:var(--cp-s50); }
.cp-info { display:flex; align-items:center; gap:11px; }
.cp-avatar { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; color:#fff; flex-shrink:0; }
.cp-avatar.a { background:#DC2626; }
.cp-avatar.b { background:#F59E0B; }
.cp-avatar.c { background:#16A34A; }
.cp-avatar.d { background:#7C3AED; }
.cp-avatar.e { background:#0EA5E9; }
.cp-info-text { display:flex; flex-direction:column; gap:1px; min-width:0; }
.cp-name { font-weight:800; font-size:13.5px; letter-spacing:-.005em; }
.cp-sub { font-family:'Archivo Narrow'; font-size:10.5px; color:var(--cp-s500); font-weight:600; letter-spacing:.02em; }

.cp-bar-wrap { display:flex; flex-direction:column; gap:5px; }
.cp-bar-meta { display:flex; justify-content:space-between; font-family:'Archivo Narrow'; font-size:11px; color:var(--cp-s600); font-weight:600; letter-spacing:.02em; }
.cp-bar-meta b { color:var(--cp-ink); font-weight:700; }
.cp-bar-meta .over { color:var(--cp-due-fg); }
.cp-bar { height:16px; background:var(--cp-s100); border-radius:8px; overflow:visible; position:relative; }
.cp-bar.over { background:rgba(220,38,38,.12); }
.cp-seg { height:100%; display:flex; align-items:center; justify-content:flex-start; padding-left:6px; font-family:'Archivo Narrow'; font-size:9.5px; font-weight:800; color:#fff; letter-spacing:.04em; text-transform:uppercase; }
.cp-seg.locked { background:#facc15; color:#000; border-radius:8px 0 0 8px; }
.cp-seg.proposed { background:repeating-linear-gradient(45deg,var(--cp-pending-fg) 0,var(--cp-pending-fg) 4px,#F59E0B 4px,#F59E0B 8px); }
.cp-seg:only-child, .cp-seg:last-child:not(:only-child) { border-radius:0 8px 8px 0; }
.cp-seg.locked:only-child { border-radius:8px; }
.cp-bar-marker { position:absolute; top:-3px; bottom:-3px; width:2px; background:var(--cp-ink); box-shadow:0 0 6px rgba(10,10,10,.4); }

.cp-summary { display:flex; flex-direction:column; gap:4px; align-items:flex-start; }
.cp-summary-row { display:flex; align-items:center; gap:7px; font-family:'Archivo Narrow'; font-size:11px; color:var(--cp-s700); font-weight:600; letter-spacing:.02em; }
.cp-dot { width:8px; height:8px; border-radius:50%; }
.cp-dot.locked { background:var(--cp-red); }
.cp-dot.proposed { background:var(--cp-pending-fg); }
.cp-status-pill {
  display:inline-flex; align-items:center;
  font-family:'Archivo Narrow'; font-size:9.5px; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase;
  padding:2px 7px; border-radius:5px;
}
.cp-status-pill.healthy { background:var(--cp-ok-bg); color:var(--cp-ok-fg); }
.cp-status-pill.full { background:var(--cp-pending-bg); color:var(--cp-pending-deep); }
.cp-status-pill.over { background:var(--cp-due-bg); color:var(--cp-due-fg); }
.cp-status-pill.idle { background:var(--cp-info-bg); color:var(--cp-info-fg); }

/* 8-week horizon */
.cp-horizon-wrap { padding:18px 22px; display:flex; flex-direction:column; gap:12px; overflow-x:auto; }
.cp-horizon-grid { display:grid; grid-template-columns:120px repeat(9,1fr); gap:6px; min-width:880px; }
.cp-horizon-h-label { font-family:'Archivo Narrow'; font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--cp-s500); padding:8px 10px; align-self:center; }
.cp-horizon-h-week { display:flex; flex-direction:column; align-items:center; padding:6px 4px; gap:1px; background:var(--cp-s50); border-radius:7px; border:1px solid var(--cp-s200); }
.cp-horizon-h-week.current { background:var(--cp-ink); border-color:var(--cp-ink); }
.cp-horizon-h-week.current .cp-h-week-label, .cp-horizon-h-week.current .cp-h-week-date { color:#fff; }
.cp-horizon-h-week.flag-week { background:rgba(220,38,38,.08); border-color:var(--cp-due-fg); }
.cp-h-week-label { font-family:'Archivo Narrow'; font-size:9px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--cp-s500); }
.cp-h-week-date { font-size:11.5px; font-weight:800; color:var(--cp-ink); letter-spacing:-.005em; }
.cp-horizon-h-week.flag-week .cp-h-week-label,
.cp-horizon-h-week.flag-week .cp-h-week-date { color:var(--cp-due-deep); }

.cp-horizon-row-label {
  display:flex; align-items:center; gap:9px; padding:10px 12px;
  background:#fff; border:1px solid var(--cp-s200); border-radius:8px;
}
.cp-horizon-flag-emblem {
  width:24px; height:14px; border-radius:3px;
  font-family:'Archivo Narrow'; font-size:8.5px; font-weight:800;
  color:#fff; display:flex; align-items:center; justify-content:center;
  letter-spacing:.06em; flex-shrink:0;
}
.cp-horizon-flag-emblem.vic { background:linear-gradient(135deg,var(--cp-branch-vic),var(--cp-branch-vic-dark)); }
.cp-horizon-flag-emblem.act { background:linear-gradient(135deg,var(--cp-info-fg),#1E3A8A); }
.cp-horizon-flag-emblem.sa  { background:linear-gradient(135deg,#16A34A,#166534); }
.cp-horizon-flag-emblem.tas { background:linear-gradient(135deg,#F59E0B,#92400E); }
.cp-horizon-row-name { font-weight:700; font-size:13px; letter-spacing:-.005em; }
.cp-horizon-row-installers { font-family:'Archivo Narrow'; font-size:10.5px; color:var(--cp-s500); font-weight:600; letter-spacing:.02em; margin-left:auto; }
.cp-horizon-row-installers b { color:var(--cp-ink); font-weight:700; }

.cp-horizon-cell {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:10px 4px; border-radius:8px; cursor:pointer;
  transition:all var(--cp-t); border:1.5px solid transparent;
  position:relative; min-height:54px;
}
.cp-horizon-cell:hover { transform:translateY(-1px); box-shadow:var(--cp-shadow-rest); border-color:var(--cp-ink); }
.cp-horizon-cell.light { background:linear-gradient(180deg,#F0FDF4,#DCFCE7); color:var(--cp-ok-deep); }
.cp-horizon-cell.healthy { background:linear-gradient(180deg,#DCFCE7,#BBF7D0); color:var(--cp-ok-deep); }
.cp-horizon-cell.full { background:linear-gradient(180deg,#FEF3C7,#FDE68A); color:var(--cp-pending-deep); }
.cp-horizon-cell.overbooked { background:linear-gradient(180deg,#FED7AA,#FDBA74); color:#9A3412; }
.cp-horizon-cell.critical {
  background:linear-gradient(180deg,var(--cp-due-bg),#FECACA);
  color:var(--cp-due-deep); border-color:var(--cp-due-fg);
  animation:cp-pulse-banner-critical 2.4s ease-in-out infinite;
}
.cp-horizon-cell.critical::after {
  content:'!'; position:absolute; top:2px; right:5px;
  font-family:'Archivo Narrow'; font-size:11px; font-weight:900; color:var(--cp-due-fg);
}
.cp-horizon-cell-pct { font-size:14.5px; font-weight:900; letter-spacing:-.02em; line-height:1; }
.cp-horizon-cell-hours { font-family:'Archivo Narrow'; font-size:9.5px; font-weight:700; letter-spacing:.04em; margin-top:2px; }

.cp-horizon-foot {
  display:flex; justify-content:space-between; align-items:center;
  padding-top:8px; border-top:1px dashed var(--cp-s200); margin-top:4px;
}
.cp-horizon-legend { display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.cp-horizon-leg { display:flex; align-items:center; gap:6px; font-family:'Archivo Narrow'; font-size:10.5px; font-weight:700; color:var(--cp-s600); letter-spacing:.02em; }
.cp-horizon-leg-swatch { width:14px; height:10px; border-radius:2px; }
.cp-horizon-leg-swatch.light { background:#DCFCE7; }
.cp-horizon-leg-swatch.healthy { background:#BBF7D0; }
.cp-horizon-leg-swatch.full { background:#FDE68A; }
.cp-horizon-leg-swatch.overbooked { background:#FDBA74; }
.cp-horizon-leg-swatch.critical { background:#FECACA; border:1px solid var(--cp-due-fg); }

/* Branch summary */
.cp-branch-grid { padding:18px 22px; display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.cp-branch-card { background:#fff; border:1px solid var(--cp-s200); border-radius:11px; padding:14px 16px; display:flex; flex-direction:column; gap:8px; }
.cp-branch-card-h { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.cp-branch-name { font-weight:800; font-size:13.5px; letter-spacing:-.005em; display:flex; align-items:center; gap:8px; }
.cp-branch-flag { font-family:'Archivo Narrow'; font-size:9.5px; font-weight:800; letter-spacing:.06em; padding:3px 7px; border-radius:4px; color:#fff; }
.cp-branch-flag.vic { background:linear-gradient(135deg,var(--cp-branch-vic),var(--cp-branch-vic-dark)); }
.cp-branch-flag.act { background:linear-gradient(135deg,var(--cp-info-fg),#1E3A8A); }
.cp-branch-flag.sa  { background:linear-gradient(135deg,#16A34A,#166534); }
.cp-branch-flag.tas { background:linear-gradient(135deg,#F59E0B,#92400E); }
.cp-branch-stat-row { display:flex; justify-content:space-between; font-family:'Archivo Narrow'; font-size:11px; color:var(--cp-s600); font-weight:600; letter-spacing:.02em; }
.cp-branch-stat-row b { color:var(--cp-ink); font-weight:700; }
.cp-branch-mini-bar { height:6px; background:var(--cp-s200); border-radius:3px; overflow:hidden; display:flex; margin-top:2px; }
.cp-branch-mini-bar .l { background:#facc15; }
.cp-branch-mini-bar .p { background:var(--cp-pending-fg); }

/* ────────────────────────────────────────────────────────────────────
 * RESPONSIVE / FOLDABLE (A-668)
 *
 * Every grid above was authored against the 1440px mockup and states its
 * track count as a literal — `repeat(4,1fr)` for the KPI strip and the branch
 * summary, `220px 1fr 220px` for an installer row. A `1fr` track's floor is
 * `auto`, i.e. its own min-content, so those grids do NOT shrink to fit a
 * narrow screen: they keep their intrinsic width and overflow. And because
 * `.cp-section` sets `overflow:hidden` for its rounded corners, the overhang
 * is CLIPPED rather than scrollable — the sweep found Tasmania's branch card
 * simply gone at every viewport from 344px right up to a 1024px tablet, with
 * the page reporting no horizontal overflow at all.
 *
 * These rules are fenced off `<html data-vp>` (stamped by modules/_lib/
 * viewport.js before the first paint), and xl — the 1440px control — is
 * deliberately excluded from all of them so the desktop layout is untouched.
 * ──────────────────────────────────────────────────────────────────── */

/* Card grids: let the track count follow the width instead of asserting it.
 * `auto-fit` collapses the empty tracks and the surviving `1fr`s share the
 * whole row, so on any width that already fitted four cards this is the same
 * layout it was — it only ever ADDS a wrap point. */
:root:not([data-vp="xl"]) .cp-kpis { grid-template-columns:repeat(auto-fit,minmax(165px,1fr)); }
:root:not([data-vp="xl"]) .cp-branch-grid { grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }
/* The branch name is what floored each card's min-content in the first place
 * ("South Aus" + the state emblem + the status pill on one nowrap line), so
 * the track floor above only holds if the card itself is allowed to be that
 * narrow. */
.cp-branch-card, .cp-branch-card-h, .cp-branch-name { min-width:0; }
.cp-branch-name { overflow-wrap:anywhere; }

/* A section header is a title on the left and its controls on the right. At
 * 344px that squeezes "Installer load · this week" into four lines to make
 * room for two buttons; wrapping puts the controls on their own line and
 * gives the title the full width, which is the order you read them in. */
:root[data-vp="xs"] .cp-section-h,
:root[data-vp="sm"] .cp-section-h,
:root[data-vp="md"] .cp-section-h {
  flex-wrap:wrap; align-items:flex-start; gap:10px;
}
:root[data-vp="xs"] .cp-section-h { padding:13px 14px; }

/* Hero: a 32px title and three buttons cannot share a phone row — the last
 * button ("Open target console") ran off the right edge. Stack, and let the
 * buttons wrap and grow so each is a comfortable tap target. */
:root[data-vp="xs"] .cp-hero,
:root[data-vp="sm"] .cp-hero,
:root[data-vp="md"] .cp-hero {
  flex-direction:column; align-items:stretch; gap:12px;
}
:root[data-vp="xs"] .cp-hero-r,
:root[data-vp="sm"] .cp-hero-r,
:root[data-vp="md"] .cp-hero-r { flex-wrap:wrap; }
:root[data-vp="xs"] .cp-hero-r .cp-btn,
:root[data-vp="sm"] .cp-hero-r .cp-btn { flex:1 1 auto; min-height:40px; }
:root[data-vp="xs"] .cp-hero-title { font-size:24px; }

/* KPI strip at xs: two up rather than one. A single column pushes the week
 * nav and the installer list off the bottom of the screen, and 156px is wide
 * enough for the label to wrap onto two words instead of one letter per line
 * — which is what `repeat(4,1fr)` was doing at 74px a track. */
:root[data-vp="xs"] .cp-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
:root[data-vp="xs"] .cp-kpi { padding:12px 13px; }
:root[data-vp="xs"] .cp-kpi-label { letter-spacing:.08em; }
:root[data-vp="xs"] .cp-kpi-num { font-size:24px; }

/* The legend and the horizon footer are label rows, not layouts — wrapping
 * them costs nothing and is the difference between five readable chips and
 * five 9px ones. */
:root[data-vp="xs"] .cp-state-legend,
:root[data-vp="sm"] .cp-state-legend { flex-wrap:wrap; gap:8px 12px; padding:10px 13px; }
:root[data-vp="xs"] .cp-horizon-foot { flex-direction:column; align-items:flex-start; gap:8px; }
:root[data-vp="xs"] .cp-horizon-wrap { padding:14px; }

/* Week nav: "Mon, 24 Aug — Sun, 30 Aug" plus the by-installer/by-branch
 * toggle is two separate jobs; side by side at 344px neither is legible. */
:root[data-vp="xs"] .cp-weeknav { flex-direction:column; align-items:stretch; gap:10px; padding:10px 13px; }
:root[data-vp="xs"] .cp-weeknav-l { flex-wrap:wrap; gap:8px; }

/* Installer load rows. The 220px name column and the 220px summary column
 * left the load bar — the one thing the row exists to show — 78px wide on a
 * phone. Stack at xs/sm; at md give the bar the whole of the second track and
 * drop the summary to its own full-width line under it. */
:root[data-vp="xs"] .cp-row,
:root[data-vp="sm"] .cp-row { grid-template-columns:minmax(0,1fr); gap:10px; padding:12px 14px; }
:root[data-vp="md"] .cp-row { grid-template-columns:170px minmax(0,1fr); gap:12px 16px; }
:root[data-vp="md"] .cp-row > .cp-summary { grid-column:1 / -1; flex-direction:row; flex-wrap:wrap; gap:6px 14px; }
:root[data-vp="xs"] .cp-summary,
:root[data-vp="sm"] .cp-summary { flex-direction:row; flex-wrap:wrap; gap:6px 14px; }

/* Branch summary padding, so a 190px card is 190px of card and not 190px of
 * gutter. */
:root[data-vp="xs"] .cp-branch-grid { padding:14px; gap:10px; }

/* The 8-week horizon is a 10-column matrix — it is legitimately wider than a
 * phone and `.cp-horizon-wrap` already scrolls it. Just shorten the swipe:
 * a narrower branch column and a 700px floor put four weeks on screen at 344px
 * instead of two, and the cell text (a percentage) stays legible at 56px. */
:root[data-vp="xs"] .cp-horizon-grid { min-width:730px; grid-template-columns:118px repeat(9,1fr); }

/* The branch row label lives in a 120px track of the horizon matrix, and
 * "<b>N</b> active" is pushed to its far end by `margin-left:auto` — below a
 * desktop that collides with the branch name it is meant to annotate. The
 * same count is already in the ACTIVE INSTALLERS tile at the top of the page,
 * so drop it here rather than shrink both. */
:root[data-vp="xs"] .cp-horizon-row-installers,
:root[data-vp="sm"] .cp-horizon-row-installers,
:root[data-vp="md"] .cp-horizon-row-installers { display:none; }