/* bagging_performance_html — the screen's own rules. Five rules below are
 * decided once for both this screen and its drill-down panel.
 *
 * 1. THE TOKENS ARE DECLARED ON THE ROOT ELEMENT, NOT ON `:root`. The shared
 *    dependency declares the same `--px-*` names in `PX_TOKENS_CSS` and
 *    appends its block to <head> at startup, i.e. AFTER every head link. As a
 *    body <style> block this screen's `:root` band beat that; as a head link it
 *    would lose, and the values that differ include `--px-text-primary`,
 *    `--px-success` and the whole dark surface set — converting the screen
 *    would repaint it. A custom property declared on an element overrides the
 *    value it would inherit from `html` whatever the sheet order, so the band
 *    moves onto `.bp-root` and every descendant resolves this screen's values
 *    exactly as today. `[data-theme="dark"] .bp-root` at (0,2,0) beats the bare
 *    rule at (0,1,0), so the two bands need no ordering either. The module's
 *    `getComputedStyle` read moved from `document.documentElement` to the form
 *    root for the same reason.
 *
 *    What this DOES change is the app chrome: the nav drawer, sidebar and
 *    topbar stop taking bagging's token values while this screen is open and
 *    keep the estate's, which is what they use on every other screen.
 *
 * 2. THE ROOT RULE IS BARE: no `min-height` and no overflow declarations,
 *    plus `position: relative`, `flex: 1 0 auto` and the page `background`
 *    (see 5). The root is a flex item inside main's content mount
 *    (`height: 100%; display: flex; flex-direction: column; overflow: auto`); a
 *    `height`, an `overflow` or a `position: fixed` here stops the port
 *    scrolling. `.bp-page` keeps its own `position: relative` — that is what
 *    the out-of-date marker anchors to, and the wrapping root is what keeps
 *    `__init__.py`'s `querySelector('.bp-page')` resolving.
 *
 * 3. EVERY OTHER RULE IS SCOPED `:where(.bp-root)`, which adds no specificity,
 *    so each keeps the weight it had as a bare class and cannot change which
 *    declaration wins. The seven `[data-theme="dark"] X` rules keep the
 *    attribute first and take the scope behind it, so they stay (0,2,0).
 *    Nothing outside this section declares a `.bp-*` class, in
 *    `theme/assets/theme.css` or in the dependency's runtime injection.
 *
 *    The panel's rules are one class heavier than these on purpose: its asset
 *    carries `.bd-overlay` as a REAL class, so on the ten selectors the two
 *    forms disagree on the panel wins wherever its node currently sits —
 *    inside `.bp-root` between `add_component` and pxShowOverlay's portal,
 *    portaled, or re-homed on close.
 *
 * 4. THE RULES BOTH FORMS DECLARE IDENTICALLY ARE NOT HERE. `.bp-reveal` and
 *    its first four steps, `@keyframes bpReveal`, the six `.bp-section-*`
 *    rules, the four `.bp-stat-*` rules, `.bp-stat::before`, `.px-page-title`,
 *    `.px-page-title::before` and `.px-subtitle` live once in
 *    `bagging_performance.css`. `@keyframes bpPulse` stays here: it is this
 *    screen's alone and already section-prefixed.
 *
 * 5. THREE GLOBAL RULES ARE DELETED, not scoped: the universal `box-sizing`
 *    reset (`theme/assets/theme.css` already declares it app-wide),
 *    `html, body`, and `body { min-height: 100vh }`. A body <style> block could
 *    carry them; a permanent head link would impose them on every screen in the
 *    app. `html, body`'s `background: var(--px-bg-deep)` does NOT die with it:
 *    it moves onto `.bp-root`, because the element that paints behind the page
 *    is main's `.root-layout`, an ANCESTOR of this root, which resolves the
 *    dependency's token rather than bagging's.
 *
 * Two rules are NEW, for the two inline `style=` attributes a converted
 * template may not hold; both are commented where they sit.
 *
 * No designer gate. Nothing here is hidden until JavaScript runs: `.bp-reveal`
 * is a CSS animation and the designer runs animations to completion, and the
 * only `display: none` rules are the empty-state pair, gated on a
 * `[data-empty]` attribute JavaScript writes — absent on the canvas, which is
 * the correct picture there (the data panels show, the placeholders hide).
 */

/* The form root. A flex item in main's content mount, with no `overflow`, no
   `height` and no `position: fixed`, any of which stops the port scrolling. */
.bp-root {
  position: relative;
  flex: 1 0 auto;
  /* The screen's backdrop. The deleted `html, body` rule painted
     `--px-bg-deep` and main's `.root-layout` is an ANCESTOR of this root, so it
     resolves the dependency's token, not bagging's — without this the dark
     backdrop behind the cards changed shade. `flex: 1 0 auto` above makes this
     element cover the port, so the paint lands where body's did. */
  background: var(--px-bg-deep);
}

.bp-root {
  --px-bg-deep: #f8fafc;
  --px-bg-card: #ffffff;
  --px-bg-elevated: #f1f5f9;
  --px-border: #e2e8f0;
  --px-border-strong: #cbd5e1;
  --px-border-subtle: rgba(0, 0, 0, 0.06);
  --px-text-primary: #1e293b;
  --px-text-secondary: #475569;
  --px-text-muted: #64748b;
  --px-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  --px-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --px-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.04);
  --px-radius: 12px;
  --px-radius-sm: 8px;
  --px-font: 'DM Sans', system-ui, sans-serif;
  --px-mono: 'Space Mono', monospace;
  --px-success: #10b981;
  --px-warning: #f59e0b;
  --px-danger: #ef4444;
  --px-info: #3b82f6;

  /* Page-specific accent (bagging performance = gold) */
  --bp-accent: #d4a017;
  --bp-accent-strong: #b8860b;
  --bp-accent-soft: rgba(212, 160, 23, 0.12);
  --bp-accent-glow: rgba(212, 160, 23, 0.35);

  --bp-gold: #b88514;
  --bp-silver: #64748b;
  --bp-bronze: #a05c1f;

  --bp-acute: #4ea54e;
  --bp-acute-soft: #dff0df;
  --bp-monthly: #c79a00;
  --bp-monthly-soft: #fff4de;

  --accent: var(--bp-accent);
  --accent-subtle: var(--bp-accent-soft);
}
[data-theme="dark"] .bp-root {
  --px-bg-deep: #0b1220;
  --px-bg-card: #131c2e;
  --px-bg-elevated: #1e293b;
  --px-border: #273349;
  --px-border-strong: #3a4a66;
  --px-border-subtle: rgba(255, 255, 255, 0.06);
  --px-text-primary: #f1f5f9;
  --px-text-secondary: #cbd5e1;
  --px-text-muted: #94a3b8;
  --px-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  --px-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --px-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.45), 0 4px 8px rgba(0, 0, 0, 0.3);
  --bp-accent: #f0c84f;
  --bp-accent-strong: #5eead4;
  --bp-accent-soft: rgba(45, 212, 191, 0.16);
  --bp-accent-glow: rgba(45, 212, 191, 0.4);
  --bp-gold: #f1c464;
  --bp-silver: #cbd5e1;
  --bp-bronze: #d89468;
  --bp-acute: #73B973;
  --bp-monthly: #f7dd6f;
}

/* === Page container === */
:where(.bp-root) .bp-page {
  padding: 1.75rem 2rem 3rem;
  max-width: 1440px;
  margin: 0 auto;
  position: relative;
}
@media (max-width: 820px) { :where(.bp-root) .bp-page { padding: 1.25rem; } }

/* === Header === */
:where(.bp-root) .bp-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.75rem;
}

:where(.bp-root) .bp-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
:where(.bp-root) .bp-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--bp-accent-soft);
  color: var(--bp-accent-strong);
  font-family: var(--px-mono);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 700;
  border: 1px solid color-mix(in srgb, var(--bp-accent) 25%, transparent);
}
[data-theme="dark"] :where(.bp-root) .bp-live-pill { color: var(--bp-accent-strong); }
:where(.bp-root) .bp-live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--bp-accent);
  box-shadow: 0 0 0 0 var(--bp-accent-glow);
  animation: bpPulse 1.8s ease-out infinite;
}
@keyframes bpPulse {
  0% { box-shadow: 0 0 0 0 var(--bp-accent-glow); }
  70% { box-shadow: 0 0 0 10px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* === Top strip (individual-focused metrics, NOT org totals) === */
:where(.bp-root) .bp-top-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 1.5rem;
}
@media (max-width: 900px) {
  :where(.bp-root) .bp-top-strip { grid-template-columns: repeat(2, 1fr); }
}
:where(.bp-root) .bp-stat {
  background: var(--px-bg-card);
  border: 1px solid var(--px-border);
  border-radius: var(--px-radius);
  padding: 1rem 1.2rem;
  box-shadow: var(--px-shadow);
  position: relative;
  overflow: hidden;
}
:where(.bp-root) .bp-stat-value .unit {
  font-size: 0.8rem;
  color: var(--px-text-muted);
  font-weight: 400;
  margin-left: 4px;
}
:where(.bp-root) .bp-stat-sub .delta-up { color: var(--px-success); font-weight: 600; }
:where(.bp-root) .bp-stat-sub .delta-down { color: var(--px-danger); font-weight: 600; }

/* === Empty-state: hide all data panels behind a single "no activity" message === */
:where(.bp-root) .bp-page[data-empty="true"] .bp-leaderboard,
:where(.bp-root) .bp-page[data-empty="true"] .bp-row-2,
:where(.bp-root) .bp-page[data-empty="true"] #bp-perperson-chart,
:where(.bp-root) .bp-page[data-empty="true"] #bp-rate-chart {
  display: none;
}
:where(.bp-root) .bp-page[data-empty="true"] .bp-chart-empty {
  display: flex;
}
:where(.bp-root) .bp-page:not([data-empty="true"]) .bp-chart-empty {
  display: none;
}
/* Snapshot pill (historical view) — drop the live pulse */
:where(.bp-root) .bp-live-dot.historical {
  background: var(--px-text-muted) !important;
  animation: none !important;
}

/* === Hero chart row (per-person + acute/monthly side-by-side) === */
:where(.bp-root) .bp-rate-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 1400px) {
  :where(.bp-root) .bp-rate-row { grid-template-columns: 1fr 1fr; }
}
:where(.bp-root) #bp-rate-chart,
:where(.bp-root) #bp-perperson-chart {
  min-height: 320px;
  width: 100%;
}
:where(.bp-root) .bp-chart-empty {
  min-height: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--px-mono);
  font-size: 0.85rem;
  color: var(--px-text-muted);
  text-align: center;
  padding: 2rem 1rem;
}
:where(.bp-root) .bp-chart-empty strong {
  display: block;
  font-size: 1rem;
  color: var(--px-text-secondary);
  margin-bottom: 0.4rem;
  font-family: var(--px-sans);
  font-weight: 600;
}

/* === Leaderboard table === */
/* The leaderboard card's body carried `style="padding:0 0 4px;"`, tighter
   than the `.bp-section-body` padding it overrode inline. It wears the
   second class `bp-leaderboard-body-pad` now; at (0,2,0) it beats the
   shared asset's `:where(.bp-root, .bd-overlay) .bp-section-body` at
   (0,1,0) from any position in the head. */
:where(.bp-root) .bp-leaderboard-body-pad { padding: 0 0 4px; }
:where(.bp-root) .bp-leaderboard {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
:where(.bp-root) .bp-leaderboard thead th {
  text-align: left;
  font-family: var(--px-mono);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--px-text-muted);
  padding: 10px 12px;
  border-bottom: 1px solid var(--px-border);
  background: var(--px-bg-elevated);
}
:where(.bp-root) .bp-leaderboard thead th.num { text-align: right; }
/* The rank column carried `style="width:44px;"`. The `th` stays in the
   selector: `theme.css` styles `.px-table td` at (0,1,1), so a bare class
   at (0,1,0) would be the guide's "double it" case the day this table
   gains `.px-table`. It has not, and the rule is written that way anyway. */
:where(.bp-root) .bp-leaderboard th.bp-th-rank { width: 44px; }
:where(.bp-root) .bp-leaderboard tbody tr {
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
:where(.bp-root) .bp-leaderboard tbody tr:hover {
  background: var(--bp-accent-soft);
}
:where(.bp-root) .bp-leaderboard tbody td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--px-border-subtle);
  vertical-align: middle;
}
:where(.bp-root) .bp-leaderboard tbody tr:last-child td { border-bottom: none; }
:where(.bp-root) .bp-leaderboard td.num { text-align: right; }

/* Rank cell */
:where(.bp-root) .bp-rank {
  width: 44px;
  text-align: center;
  font-family: var(--px-mono);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--px-text-muted);
}
:where(.bp-root) .bp-rank-medal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--px-bg-elevated);
  border: 1px solid var(--px-border);
  font-size: 0.9rem;
}
:where(.bp-root) .bp-rank-1 .bp-rank-medal {
  background: linear-gradient(135deg, #fff4d6 0%, #f7dd6f 100%);
  border-color: #d4a017;
  color: #7a4d0d;
  box-shadow: 0 2px 6px rgba(212, 160, 23, 0.25);
}
[data-theme="dark"] :where(.bp-root) .bp-rank-1 .bp-rank-medal {
  background: linear-gradient(135deg, #3d2e0a 0%, #6b4e12 100%);
  border-color: var(--bp-gold);
  color: var(--bp-gold);
}
:where(.bp-root) .bp-rank-2 .bp-rank-medal {
  background: linear-gradient(135deg, #f1f5f9 0%, #cbd5e1 100%);
  border-color: #94a3b8;
  color: #334155;
}
[data-theme="dark"] :where(.bp-root) .bp-rank-2 .bp-rank-medal {
  background: linear-gradient(135deg, #2a3650 0%, #3a4a66 100%);
  color: #cbd5e1;
}
:where(.bp-root) .bp-rank-3 .bp-rank-medal {
  background: linear-gradient(135deg, #fde5d1 0%, #e8b079 100%);
  border-color: #b07336;
  color: #6d3f14;
}
[data-theme="dark"] :where(.bp-root) .bp-rank-3 .bp-rank-medal {
  background: linear-gradient(135deg, #3a2414 0%, #5e3b1e 100%);
  color: var(--bp-bronze);
}

/* Name cell */
:where(.bp-root) .bp-user {
  display: flex;
  align-items: center;
  gap: 12px;
}
:where(.bp-root) .bp-status-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
}
:where(.bp-root) .bp-status-dot.active {
  background: var(--px-success);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--px-success) 20%, transparent);
  animation: bpPulse 1.8s ease-out infinite;
}
:where(.bp-root) .bp-status-dot.idle {
  background: var(--px-text-muted);
  opacity: 0.5;
}
:where(.bp-root) .bp-status-dot.historical {
  background: var(--bp-accent-strong);
  opacity: 0.6;
}
:where(.bp-root) .bp-user-name {
  font-weight: 600;
  color: var(--px-text-primary);
  font-size: 0.95rem;
}
:where(.bp-root) .bp-user-meta {
  font-family: var(--px-mono);
  font-size: 0.68rem;
  color: var(--px-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 2px;
}

/* Rate cell */
:where(.bp-root) .bp-rate {
  font-family: var(--px-mono);
  font-weight: 700;
  color: var(--px-text-primary);
  font-size: 1.15rem;
  line-height: 1.1;
}
:where(.bp-root) .bp-rate-split {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  justify-content: flex-end;
}
:where(.bp-root) .bp-split-chip {
  font-family: var(--px-mono);
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid transparent;
}
:where(.bp-root) .bp-split-chip.acute {
  background: var(--bp-acute-soft);
  color: #2d6b2d;
  border-color: color-mix(in srgb, var(--bp-acute) 40%, transparent);
}
[data-theme="dark"] :where(.bp-root) .bp-split-chip.acute {
  background: rgba(115, 185, 115, 0.15);
  color: var(--bp-acute);
}
:where(.bp-root) .bp-split-chip.monthly {
  background: var(--bp-monthly-soft);
  color: #7a5a00;
  border-color: color-mix(in srgb, var(--bp-monthly) 50%, transparent);
}
[data-theme="dark"] :where(.bp-root) .bp-split-chip.monthly {
  background: rgba(247, 221, 111, 0.15);
  color: var(--bp-monthly);
}

/* Last hour cell */
:where(.bp-root) .bp-lasthr {
  font-family: var(--px-mono);
  font-weight: 700;
  font-size: 1rem;
  color: var(--px-text-primary);
}

/* Items/Bags/Trays numeric cells */
:where(.bp-root) .bp-num {
  font-family: var(--px-mono);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--px-text-primary);
}
:where(.bp-root) .bp-num-muted { color: var(--px-text-muted); }

/* Sparkline */
:where(.bp-root) .bp-spark {
  width: 80px;
  height: 28px;
}
:where(.bp-root) .bp-spark svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Last action cell */
:where(.bp-root) .bp-last-action {
  font-family: var(--px-mono);
  font-size: 0.78rem;
  color: var(--px-text-secondary);
  white-space: nowrap;
}
:where(.bp-root) .bp-last-action.stale { color: var(--px-warning); font-weight: 700; }
:where(.bp-root) .bp-last-action.idle { color: var(--px-danger); font-weight: 700; }

/* Shown only while an automatic refresh has failed, so the
   leaderboard on screen is visibly ageing. Deliberately NOT
   .bp-last-action.stale above - that one means an idle bagger, a
   different thing that happens to use the same warning colour. */
:where(.bp-root) .bp-stale-banner {
  color: var(--px-warning);
  font-weight: 700;
  padding: 0.5rem 0 0 0;
}

/* === Second row: acute/monthly comparative + activity heatmap === */
:where(.bp-root) .bp-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
@media (max-width: 900px) {
  :where(.bp-root) .bp-row-2 { grid-template-columns: 1fr; }
}

:where(.bp-root) #bp-split-chart { min-height: 260px; }

/* Heatmap — idle block visual */
:where(.bp-root) .bp-heatmap {
  padding: 12px 4px 4px;
}
:where(.bp-root) .bp-heatmap-legend {
  display: flex;
  gap: 14px;
  margin-bottom: 12px;
  font-family: var(--px-mono);
  font-size: 0.7rem;
  color: var(--px-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
:where(.bp-root) .bp-heatmap-legend-item { display: flex; align-items: center; gap: 6px; }
:where(.bp-root) .bp-heatmap-swatch { width: 14px; height: 14px; border-radius: 3px; }
:where(.bp-root) .bp-heatmap-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
:where(.bp-root) .bp-heatmap-name {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--px-text-secondary);
  text-align: right;
}
:where(.bp-root) .bp-heatmap-track {
  display: flex;
  height: 14px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--px-bg-elevated);
  border: 1px solid var(--px-border);
}
:where(.bp-root) .bp-heatmap-cell {
  flex: 1;
  transition: opacity 0.15s;
  position: relative;
}
:where(.bp-root) .bp-heatmap-cell[data-level="0"] { background: transparent; }
:where(.bp-root) .bp-heatmap-cell[data-level="1"] { background: color-mix(in srgb, var(--bp-accent) 20%, transparent); }
:where(.bp-root) .bp-heatmap-cell[data-level="2"] { background: color-mix(in srgb, var(--bp-accent) 45%, transparent); }
:where(.bp-root) .bp-heatmap-cell[data-level="3"] { background: color-mix(in srgb, var(--bp-accent) 70%, transparent); }
:where(.bp-root) .bp-heatmap-cell[data-level="4"] { background: var(--bp-accent); }
:where(.bp-root) .bp-heatmap-cell[data-level="gap"] { background: repeating-linear-gradient(-45deg, transparent 0 3px, color-mix(in srgb, var(--px-danger) 20%, transparent) 3px 6px); }
:where(.bp-root) .bp-heatmap-axis {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 12px;
  margin-top: 8px;
  font-family: var(--px-mono);
  font-size: 0.62rem;
  color: var(--px-text-muted);
  letter-spacing: 0.08em;
}
:where(.bp-root) .bp-heatmap-axis-ticks {
  display: flex;
  justify-content: space-between;
}

/* === Context row: scope-note + date picker side-by-side === */
:where(.bp-root) .bp-context-row {
  display: flex;
  align-items: stretch;
  gap: 1rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
  /* DOM order paints later siblings on top: without an explicit
     stacking context here, .bp-top-strip and .bp-section-card render
     above the popover regardless of the popover's own z-index. */
  position: relative;
  z-index: 100;
}
:where(.bp-root) .bp-context-row .bp-scope-note { flex: 1 1 320px; margin-bottom: 0; }

/* === Smoothing toggle (10-min raw vs 30-min rolling) === */
:where(.bp-root) .bp-smoothing-toggle {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  background: var(--px-bg-card);
  border: 1px solid var(--px-border);
  border-radius: var(--px-radius-sm);
  padding: 3px;
  gap: 2px;
  flex: 0 0 auto;
  align-self: stretch;
}
:where(.bp-root) .bp-smoothing-toggle button {
  flex: 1 1 0;
  background: transparent;
  border: none;
  color: var(--px-text-muted);
  padding: 6px 14px;
  font-family: var(--px-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.15s ease, color 0.15s ease;
}
:where(.bp-root) .bp-smoothing-toggle button:hover:not(.active) {
  color: var(--px-text-primary);
}
:where(.bp-root) .bp-smoothing-toggle button.active {
  background: var(--bp-accent);
  color: #fff;
}

/* === Date picker pill + popover === */
:where(.bp-root) .bp-date-picker {
  position: relative;
  flex: 0 0 auto;
  /* Establish a stacking context above the top-strip cards so the
     calendar popover doesn't render behind them. */
  z-index: 100;
}
:where(.bp-root) .bp-date-trigger {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px 10px 14px;
  border-radius: var(--px-radius-sm);
  background: linear-gradient(145deg, var(--px-bg-card), var(--px-bg-elevated));
  border: 1px solid var(--px-border);
  cursor: pointer;
  font-family: var(--px-sans);
  color: var(--px-text-primary);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
  min-width: 240px;
  height: 100%;
}
:where(.bp-root) .bp-date-trigger:hover {
  border-color: var(--bp-accent);
  box-shadow: 0 4px 14px -8px var(--bp-accent);
}
:where(.bp-root) .bp-date-trigger:active { transform: translateY(1px); }
:where(.bp-root) .bp-date-trigger .bp-date-icon {
  width: 30px; height: 30px;
  border-radius: var(--px-radius-sm);
  background: var(--bp-accent-soft);
  color: var(--bp-accent-strong);
  display: inline-flex;
  align-items: center; justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
:where(.bp-root) .bp-date-trigger .bp-date-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
  flex: 1;
}
:where(.bp-root) .bp-date-trigger .bp-date-label {
  font-family: var(--px-mono);
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--px-text-muted);
}
:where(.bp-root) .bp-date-trigger .bp-date-value {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--px-text-primary);
  margin-top: 2px;
}
:where(.bp-root) .bp-date-trigger .bp-date-chevron {
  color: var(--px-text-muted);
  transition: transform 0.2s ease, color 0.15s ease;
  font-size: 12px;
}
:where(.bp-root) .bp-date-picker.open .bp-date-trigger { border-color: var(--bp-accent); }
:where(.bp-root) .bp-date-picker.open .bp-date-chevron { transform: rotate(180deg); color: var(--bp-accent); }

/* Popover */
:where(.bp-root) .bp-date-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 1000;
  background: var(--px-bg-card);
  border: 1px solid var(--px-border);
  border-radius: var(--px-radius);
  box-shadow: 0 18px 38px -12px rgba(15, 23, 42, 0.18);
  padding: 14px;
  min-width: 300px;
  opacity: 0;
  transform: translateY(-4px) scale(0.98);
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
:where(.bp-root) .bp-date-picker.open .bp-date-popover {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
:where(.bp-root) .bp-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
:where(.bp-root) .bp-cal-title {
  font-family: var(--px-sans);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--px-text-primary);
}
:where(.bp-root) .bp-cal-nav {
  background: transparent;
  border: 1px solid var(--px-border);
  color: var(--px-text-secondary);
  width: 28px; height: 28px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center; justify-content: center;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  font-size: 14px;
}
:where(.bp-root) .bp-cal-nav:hover:not(:disabled) {
  background: var(--bp-accent-soft);
  border-color: var(--bp-accent);
  color: var(--bp-accent-strong);
}
:where(.bp-root) .bp-cal-nav:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
:where(.bp-root) .bp-cal-dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 4px;
}
:where(.bp-root) .bp-cal-dow span {
  text-align: center;
  font-family: var(--px-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--px-text-muted);
  padding: 4px 0;
}
:where(.bp-root) .bp-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
:where(.bp-root) .bp-cal-day {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 8px 0;
  font-family: var(--px-mono);
  font-size: 0.85rem;
  color: var(--px-text-primary);
  cursor: pointer;
  transition: background 0.1s ease, color 0.1s ease, border-color 0.1s ease, transform 0.05s ease;
  line-height: 1;
}
:where(.bp-root) .bp-cal-day.empty { visibility: hidden; cursor: default; }
:where(.bp-root) .bp-cal-day:hover:not(:disabled):not(.empty) {
  background: var(--bp-accent-soft);
  color: var(--bp-accent-strong);
}
:where(.bp-root) .bp-cal-day:active:not(:disabled):not(.empty) { transform: scale(0.97); }
:where(.bp-root) .bp-cal-day.today:not(.selected) {
  border-color: var(--bp-accent);
  color: var(--bp-accent-strong);
  font-weight: 700;
}
:where(.bp-root) .bp-cal-day.selected {
  background: var(--bp-accent);
  color: #fff;
  font-weight: 700;
  border-color: var(--bp-accent);
}
:where(.bp-root) .bp-cal-day:disabled {
  color: var(--px-text-muted);
  opacity: 0.35;
  cursor: not-allowed;
}
:where(.bp-root) .bp-cal-footer {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--px-border-subtle);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--px-mono);
  font-size: 0.7rem;
  color: var(--px-text-muted);
}
:where(.bp-root) .bp-cal-today-btn {
  background: transparent;
  border: 1px solid var(--bp-accent);
  color: var(--bp-accent-strong);
  padding: 4px 10px;
  border-radius: 6px;
  font-family: var(--px-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
:where(.bp-root) .bp-cal-today-btn:hover { background: var(--bp-accent); color: #fff; }
:where(.bp-root) .bp-cal-today-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* === Scope banner === */
:where(.bp-root) .bp-scope-note {
  background: var(--bp-accent-soft);
  border: 1px dashed color-mix(in srgb, var(--bp-accent) 35%, transparent);
  border-radius: var(--px-radius-sm);
  padding: 10px 14px;
  font-size: 0.8rem;
  color: var(--px-text-secondary);
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: 10px;
}
:where(.bp-root) .bp-scope-note strong { color: var(--bp-accent-strong); font-weight: 700; }
:where(.bp-root) .bp-scope-note .bp-scope-icon {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--bp-accent);
  color: #fff;
  display: inline-flex;
  align-items: center; justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}