/* Performance desk — platform revenue + impressions.
   Ported from apps/platform-performance/template.html in the analytics-unification
   project. Two deliberate differences from the standalone artifact:

   1. EVERY selector is scoped under `.ppd`. The standalone page styles bare
      elements (body, h2, table, th, td, button, section, footer); dropped into the
      Ledger bundle unscoped, those would restyle every other surface in the app.
   2. The Auto/Light/Dark palette is scoped to the DESK, not the document. Ledger
      itself is light-only, so stamping `data-theme` on <html> would darken this
      board while leaving the page it sits on cream. `data-ppd-theme` lives on the
      desk root instead, and the desk paints its own background out to the edges of
      the content area (the negative margins below) so the dark surface is
      continuous rather than a dark card floating on paper.

   Light maps onto the Ledger design tokens rather than re-declaring hexes — same
   cream paper, same tape yellow, one palette to change. Chart colours are read from
   these variables at paint time, so switching theme needs no redraw. */

.ppd {
  --bg: var(--lc-paper, #F2F0EB);
  --card: var(--lc-paper-2, #FBFAF6);
  --raised: #FFFFFF;
  --sunken: #EAE7E0;
  --text: var(--lc-ink, #0E1218);
  --body: #2A2E36;
  --muted: #6B7280;
  --faint: #9AA2B1;
  --hair: #E4E2DB;
  --rule: var(--lc-ink, #0E1218);
  --yellow: var(--lc-yellow, #FCEE21);
  --yellow-deep: var(--lc-yellow-deep, #E6D400);
  --red: var(--lc-red, #E71D25);
  --rev: var(--lc-yellow, #FCEE21);
  --rev-stroke: var(--lc-ink, #0E1218);
  --rev-soft: rgba(230, 212, 0, .30);
  --imp: #6E7686;
  --grid: rgba(14, 18, 24, .09);
  --chip: #EAE7E0;
  --chip-on: var(--lc-ink, #0E1218);
  --chip-on-text: var(--lc-yellow, #FCEE21);
  /* The two colours that have to swap between palettes: on cream, crime red is the
     accent and the alarm; on navy, red loses too much contrast, so the accent
     becomes tape yellow and the alarm a lifted red. */
  --accent: var(--lc-red, #E71D25);
  --alarm: var(--lc-red, #E71D25);
  --spark: var(--yellow-deep);
  --shadow-pop: 0 8px 28px rgba(14, 18, 24, .16);
  /* Categorical slots for the share donuts — the validated eight-hue palette
     (dataviz reference), fixed order, never cycled; the tail folds into Other. */
  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100;
  --s5: #e87ba4; --s6: #008300; --s7: #4a3aa7; --s8: #e34948; --s-other: #9AA2B1;
  /* Change direction. Always paired with an arrow and a sign, never colour alone. */
  --up: #1a7f37; --down: var(--lc-red, #E71D25);
  font-size: 14px;
  line-height: 1.5;
  color: var(--body);
  /* Bleed the desk's own surface out over `.content`'s padding, so a dark board
     fills the pane instead of sitting on cream. Keeps `.content` scrolling. */
  background: var(--bg);
  margin: -26px -28px -60px;
  padding: 26px 28px 60px;
  min-height: 100%;
}

/* Dark = the brand's navy-ink surface. Declared twice on purpose: once for
   "Auto" (follow the OS, root left unstamped) and once for an explicit choice.
   Auto must NOT stamp the attribute — that is what hands the decision back to
   prefers-color-scheme. */
@media (prefers-color-scheme: dark) {
  .ppd:not([data-ppd-theme="light"]) {
    --bg: #151A24; --card: #1C2330; --raised: #212938; --sunken: #11161F;
    --text: #F2F0EB; --body: #DDE1E8; --muted: #9AA2B1; --faint: #6E7686;
    --hair: #2A3240; --rule: #F2F0EB;
    --rev-stroke: transparent; --rev-soft: rgba(252, 238, 33, .22);
    --imp: #9AA2B1;
    --grid: rgba(242, 240, 235, .10);
    --chip: #2A3240; --chip-on: #FCEE21; --chip-on-text: #0E1218;
    --accent: var(--yellow); --alarm: #FF6169; --spark: var(--yellow);
    --shadow-pop: 0 8px 28px rgba(0, 0, 0, .55);
    --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500;
    --s5: #d55181; --s6: #008300; --s7: #9085e9; --s8: #e66767; --s-other: #6E7686;
    --up: #4cc26b; --down: #FF6169;
  }
}
.ppd[data-ppd-theme="dark"] {
  --bg: #151A24; --card: #1C2330; --raised: #212938; --sunken: #11161F;
  --text: #F2F0EB; --body: #DDE1E8; --muted: #9AA2B1; --faint: #6E7686;
  --hair: #2A3240; --rule: #F2F0EB;
  --rev-stroke: transparent; --rev-soft: rgba(252, 238, 33, .22);
  --imp: #9AA2B1;
  --grid: rgba(242, 240, 235, .10);
  --chip: #2A3240; --chip-on: #FCEE21; --chip-on-text: #0E1218;
  --accent: var(--yellow); --alarm: #FF6169; --spark: var(--yellow);
  --shadow-pop: 0 8px 28px rgba(0, 0, 0, .55);
  --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500;
  --s5: #d55181; --s6: #008300; --s7: #9085e9; --s8: #e66767; --s-other: #6E7686;
  --up: #4cc26b; --down: #FF6169;
}

/* The page chrome reads Ledger tokens, which are light-only — restate the two
   that would otherwise render near-black ink on navy. */
.ppd .page-title { color: var(--text); }
.ppd .eyebrow { color: var(--accent); }

/* Ledger's design-system pieces this desk borrows are light-only — the secondary
   button is ink-on-transparent with an ink border, which is nearly invisible on
   navy. Restated against the desk's own variables so ONE rule covers both palettes
   rather than a duplicate inside each dark block. */
.ppd .lc-btn--secondary { color: var(--text); border-color: var(--rule); }
.ppd .lc-btn--secondary:hover { background: var(--text); color: var(--bg); }
.ppd .ai-empty { color: var(--muted); }
.ppd .ai-saved { color: var(--text); font-size: 12.5px; }
.ppd .login__err { color: var(--alarm); border-color: var(--alarm); background: transparent; }

/* Three-way theme control, sitting with Refresh in the page head. */
.ppd-theme { display: inline-flex; }
.ppd-theme button { padding: 4px 11px; font-size: 10px; letter-spacing: .11em; }

.ppd h2 {
  font-family: var(--font-display), "Bebas Neue", sans-serif;
  font-weight: 400; text-transform: uppercase; line-height: .92;
  letter-spacing: .01em; color: var(--text); margin: 0;
}

/* ---- header meta (replaces the standalone masthead) ---- */
.ppd-meta { font-size: 12px; color: var(--muted); text-align: right; line-height: 1.7;
  font-variant-numeric: tabular-nums; }
.ppd-meta b { color: var(--text); font-weight: 700; }
.ppd-meta .stale { color: var(--alarm); font-weight: 700; }
.ppd-head-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }

/* ---- controls ---- */
.ppd .controls { position: sticky; top: 0; z-index: 30; background: var(--bg);
  border-bottom: 1px solid var(--hair); padding: 14px 0 15px; margin-bottom: 26px; }
.ppd .ctl-row { display: flex; flex-wrap: wrap; gap: 20px 26px; align-items: flex-start; }
.ppd .ctl { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.ppd .ctl-label { font-size: 10px; font-weight: 800; letter-spacing: .15em;
  text-transform: uppercase; color: var(--muted); }
.ppd .ctl-set { display: flex; flex-wrap: wrap; gap: 6px; }

.ppd button { font-family: inherit; font-size: inherit; cursor: pointer; }
.ppd .seg { display: inline-flex; border: 1.5px solid var(--rule); border-radius: 6px; overflow: hidden; }
.ppd .seg button { border: 0; background: transparent; color: var(--body); padding: 7px 15px;
  font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  border-right: 1px solid var(--hair); transition: background .14s ease, color .14s ease; }
.ppd .seg button:last-child { border-right: 0; }
.ppd .seg button[aria-pressed="true"] { background: var(--chip-on); color: var(--chip-on-text); }
.ppd .seg button:hover:not([aria-pressed="true"]) { background: var(--sunken); }

.ppd .chip { border: 1px solid var(--hair); background: var(--chip); color: var(--body);
  padding: 6px 12px; border-radius: 6px; font-size: 12px; font-weight: 600;
  transition: background .14s ease, color .14s ease, border-color .14s ease;
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.ppd .chip:hover { border-color: var(--muted); }
.ppd .chip[aria-pressed="true"] { background: var(--chip-on); color: var(--chip-on-text);
  border-color: var(--chip-on); }
.ppd .chip .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .55; }
.ppd .chip[aria-pressed="true"] .dot { opacity: 1; }

.ppd :where(button, [tabindex], input):focus-visible { outline: none;
  box-shadow: 0 0 0 3px var(--red); border-radius: 6px; }

/* platform picker */
.ppd .picker { position: relative; }
.ppd .picker-btn { border: 1.5px solid var(--rule); background: var(--card); color: var(--text);
  padding: 7px 14px; border-radius: 6px; font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; gap: 9px; letter-spacing: .03em; }
.ppd .picker-btn .caret { font-size: 9px; opacity: .6; }
/* The popup opens under its button and, by default, to the RIGHT of it. When the
   button sits near the right edge of the pane — which is where the control lands
   at most desktop widths — that pushed 330px of list past the viewport, so the
   list (and its own scrollbar) could only be reached by scrolling the whole page
   sideways. `--flip` anchors it to the button's right edge instead; the class is
   applied on open, from the measured position, so it is correct at any width.
   Height is capped against the viewport for the same reason, vertically. */
.ppd .picker-pop { position: absolute; top: calc(100% + 7px); left: 0; right: auto; z-index: 60;
  width: 330px; max-width: calc(100vw - 32px);
  max-height: min(400px, calc(100vh - 220px)); overflow: auto;
  background: var(--raised); border: 1.5px solid var(--rule);
  border-radius: 8px; box-shadow: var(--shadow-pop); padding: 12px; }
.ppd .picker-pop--flip { left: auto; right: 0; }
.ppd .picker-pop[hidden] { display: none; }
.ppd .picker-tools { display: flex; gap: 8px; margin-bottom: 10px; position: sticky; top: -12px;
  background: var(--raised); padding: 2px 0 8px; border-bottom: 1px solid var(--hair); }
.ppd .picker-tools button { flex: 1; border: 1px solid var(--hair); background: var(--chip);
  color: var(--body); border-radius: 5px; padding: 5px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; }
.ppd .picker-tools button:hover { border-color: var(--muted); }
.ppd .pgroup { font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin: 12px 0 5px; padding-bottom: 4px; border-bottom: 1px solid var(--hair); }
.ppd .pgroup:first-of-type { margin-top: 2px; }
.ppd .popt { display: flex; align-items: center; gap: 9px; padding: 5px 4px; border-radius: 5px;
  cursor: pointer; font-size: 13px; }
.ppd .popt:hover { background: var(--sunken); }
.ppd .popt input { accent-color: var(--red); width: 14px; height: 14px; margin: 0; flex: none; }
.ppd .popt .pv { margin-left: auto; font-size: 11px; color: var(--muted);
  font-variant-numeric: tabular-nums; }

/* ---- KPI tiles ---- */
.ppd .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: 1px; background: var(--hair); border: 1px solid var(--hair); margin-bottom: 34px; }
.ppd .kpi { background: var(--card); padding: 17px 18px 15px; }
.ppd .kpi-l { font-size: 10px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 9px; }
.ppd .kpi-v { font-family: var(--font-display), "Bebas Neue", sans-serif; font-size: 44px;
  line-height: .86; color: var(--text); letter-spacing: .01em;
  font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 4px; }
.ppd .kpi-v .u { font-size: 22px; color: var(--accent); }
.ppd .kpi-s { font-size: 11.5px; color: var(--muted); margin-top: 8px; font-variant-numeric: tabular-nums; }
.ppd .kpi.accent { box-shadow: inset 0 -4px 0 var(--yellow); }

/* ---- sections ---- */
.ppd section { margin-bottom: 40px; }
.ppd .sec-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 14px; border-bottom: 2px solid var(--rule); padding-bottom: 9px; margin-bottom: 18px; }
.ppd .sec-head h2 { font-size: 25px; }
.ppd .sec-sub { font-size: 12px; color: var(--muted); margin-top: 5px; max-width: 64ch; line-height: 1.55; }
.ppd .legend { display: flex; gap: 16px; font-size: 11.5px; color: var(--muted); align-items: center;
  flex-wrap: wrap; }
.ppd .legend i { width: 13px; height: 13px; display: inline-block; margin-right: 6px;
  vertical-align: -2px; border-radius: 2px; }
.ppd .sw-rev { background: var(--rev); border: 1px solid var(--rev-stroke); }
.ppd .sw-imp { background: var(--imp); }
.ppd .sw-part { background: var(--card); border: 1px dashed var(--muted); }

.ppd .note { display: flex; gap: 10px; background: var(--card); border: 1px solid var(--hair);
  border-left: 4px solid var(--yellow); padding: 12px 15px; font-size: 12.5px;
  color: var(--body); margin-bottom: 18px; line-height: 1.6; }
.ppd .note.warn { border-left-color: var(--alarm); }
.ppd .note b { color: var(--text); }

/* ---- charts ---- */
.ppd .chart-scroll { overflow-x: auto; background: var(--card); border: 1px solid var(--hair);
  padding: 14px 8px 6px; }
.ppd .chart-scroll svg { display: block; min-width: 680px; width: 100%; height: auto; }
.ppd .gridline { stroke: var(--grid); stroke-width: 1; }
.ppd .axis-t { font-size: 11px; fill: var(--muted); font-family: var(--font-text), sans-serif;
  font-variant-numeric: tabular-nums; }
.ppd .bar-rev { fill: var(--rev); stroke: var(--rev-stroke); stroke-width: 1; }
.ppd .bar-rev.part { fill: url(#ppdhatch); stroke-dasharray: 2 2; }
.ppd .line-imp { fill: none; stroke: var(--imp); stroke-width: 2.25; stroke-linejoin: round;
  stroke-linecap: round; }
.ppd .dot-imp { fill: var(--imp); }
.ppd .hit { fill: transparent; }
.ppd .hit:hover { fill: var(--imp); fill-opacity: .10; }

/* ---- ranked list ---- */
.ppd .ranked { border: 1px solid var(--hair); background: var(--card); }
.ppd .rank-row { display: grid; grid-template-columns: minmax(150px, 1.35fr) minmax(90px, 2fr) 84px
  minmax(90px, 2fr) 72px 62px 78px; gap: 12px; align-items: center; padding: 9px 15px;
  border-bottom: 1px solid var(--hair); font-variant-numeric: tabular-nums; font-size: 12.5px; }
.ppd .rank-row:last-child { border-bottom: 0; }
.ppd .rank-row:hover { background: var(--sunken); }
.ppd .rank-head { font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted); background: var(--sunken); position: sticky; top: 0; }
.ppd .rank-head:hover { background: var(--sunken); }
.ppd .rname { font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.ppd .rname small { display: block; font-weight: 500; font-size: 10.5px; color: var(--muted);
  letter-spacing: .03em; text-transform: uppercase; margin-top: 1px; }
.ppd .track { height: 15px; background: var(--sunken); position: relative; border-radius: 2px; }
.ppd .track span { position: absolute; inset: 0 auto 0 0; border-radius: 2px; }
.ppd .track .f-rev { background: var(--rev); border: 1px solid var(--rev-stroke); }
.ppd .track .f-imp { background: var(--imp); }
.ppd .num { text-align: right; font-weight: 600; color: var(--text); }
.ppd .num.dim { font-weight: 500; color: var(--muted); }
.ppd .cov { font-size: 10.5px; text-align: right; }
.ppd .cov b { font-weight: 700; }
.ppd .cov.full { color: var(--muted); }
.ppd .cov.gap { color: var(--alarm); }

/* ---- small multiples ---- */
.ppd .smalls { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 1px;
  background: var(--hair); border: 1px solid var(--hair); }
.ppd .sm { background: var(--card); padding: 13px 14px 9px; }
.ppd .sm-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  margin-bottom: 2px; }
.ppd .sm-n { font-weight: 700; font-size: 12.5px; color: var(--text); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.ppd .sm-v { font-family: var(--font-display), "Bebas Neue", sans-serif; font-size: 19px;
  color: var(--text); letter-spacing: .02em; flex: none; font-variant-numeric: tabular-nums; }
.ppd .sm-m { font-size: 10.5px; color: var(--muted); margin-bottom: 7px;
  font-variant-numeric: tabular-nums; }
.ppd .sm svg { display: block; width: 100%; height: auto; }
.ppd .sm-area { fill: var(--rev-soft); }
.ppd .sm-line { fill: none; stroke: var(--spark); stroke-width: 1.75; stroke-linejoin: round; }
.ppd .sm-imp { fill: none; stroke: var(--imp); stroke-width: 1.25; stroke-dasharray: 3 2.5; opacity: .85; }

/* ---- table ---- */
.ppd .tbl-scroll { overflow: auto; max-height: 520px; border: 1px solid var(--hair); background: var(--card); }
.ppd table { border-collapse: collapse; width: 100%; font-size: 12.5px;
  font-variant-numeric: tabular-nums; }
.ppd th { position: sticky; top: 0; background: var(--sunken); text-align: right; padding: 9px 14px;
  font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted); border-bottom: 1.5px solid var(--rule); white-space: nowrap; z-index: 2; }
.ppd th.l { text-align: left; }
.ppd td { padding: 7px 14px; text-align: right; border-bottom: 1px solid var(--hair); color: var(--body); }
.ppd td.l { text-align: left; }
.ppd tbody tr:hover td { background: var(--sunken); }
.ppd td.k { font-weight: 700; color: var(--text); }
.ppd .pill { display: inline-block; padding: 1px 7px; border-radius: 99px; font-size: 10px;
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  border: 1px solid var(--hair); color: var(--muted); }
.ppd .pill.part { border-color: var(--alarm); color: var(--alarm); }

/* ---- tooltip (fixed-position, appended inside the desk root) ---- */
.ppd-tip { position: fixed; z-index: 90; pointer-events: none; background: var(--raised);
  border: 1.5px solid var(--rule); box-shadow: var(--shadow-pop);
  padding: 10px 13px; font-size: 12px; border-radius: 6px; min-width: 172px;
  font-variant-numeric: tabular-nums; line-height: 1.65; color: var(--body); }
.ppd-tip[hidden] { display: none; }
.ppd-tip .tt { font-family: var(--font-display), "Bebas Neue", sans-serif; font-size: 16px;
  color: var(--text); letter-spacing: .03em; margin-bottom: 4px; }
.ppd-tip .tr { display: flex; justify-content: space-between; gap: 20px; color: var(--muted); }
.ppd-tip .tr b { color: var(--text); font-weight: 700; }

.ppd .empty { padding: 44px; text-align: center; color: var(--muted); background: var(--card);
  border: 1px dashed var(--hair); font-size: 13px; }
.ppd .foot { border-top: 1px solid var(--hair); padding-top: 16px; font-size: 11.5px;
  color: var(--faint); line-height: 1.75; }
.ppd .foot code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px;
  color: var(--muted); }

@media (prefers-reduced-motion: reduce) { .ppd * { transition: none !important; animation: none !important; } }
/* Narrow: drop the impressions BAR and the CPM column. Five cells remain
   (platform · revenue bar · USD · impressions · days), so the template must
   declare five columns — the standalone page declared four, which pushed the
   last cell onto a second line. */
@media (max-width: 900px) {
  .ppd .rank-row { grid-template-columns: minmax(120px, 1.4fr) minmax(70px, 1.6fr) 84px 62px 70px;
    gap: 9px; }
  .ppd .rank-row > .c-impbar, .ppd .rank-row > .c-cpm { display: none; }
}

/* ---- Phase 1 (2026-09-21): range, compare, benchmarks, share, table views ---- */

/* date range: preset select + custom dates + the resolved window */
.ppd .range { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ppd .range-sel, .ppd .range input[type=date] { font: inherit; font-size: 12px; font-weight: 700;
  color: var(--text); background: var(--card); border: 1.5px solid var(--rule); border-radius: 6px;
  padding: 6px 10px; color-scheme: light; }
.ppd[data-ppd-theme="dark"] .range-sel, .ppd[data-ppd-theme="dark"] .range input[type=date] { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
  .ppd:not([data-ppd-theme="light"]) .range-sel,
  .ppd:not([data-ppd-theme="light"]) .range input[type=date] { color-scheme: dark; }
}
.ppd .range-dates { display: inline-flex; align-items: center; gap: 6px; }
.ppd .range-dash { color: var(--muted); }
.ppd .range-note { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; flex-basis: 100%; }

/* change marks */
.ppd .dl, .ppd-tip .dl { font-weight: 700; font-size: .92em; white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.ppd .dl.up, .ppd-tip .dl.up { color: var(--up); }
.ppd .dl.down, .ppd-tip .dl.down { color: var(--down); }
.ppd .dl.flat, .ppd .dl.na, .ppd-tip .dl.flat, .ppd-tip .dl.na { color: var(--muted); font-weight: 500; }
.ppd .dl sup, .ppd-tip .dl sup { font-size: .75em; margin-left: 1px; }
.ppd .kpi.t-up .kpi-v { color: var(--up); }
.ppd .kpi.t-down .kpi-v { color: var(--down); }

/* benchmark marks on the trend chart */
.ppd .bench { stroke: var(--text); stroke-width: 2; stroke-dasharray: 5 3; opacity: .75; pointer-events: none; }
.ppd .sw-bench { height: 0 !important; border-top: 2px dashed var(--text); border-radius: 0 !important;
  vertical-align: 3px !important; opacity: .75; }
.ppd-tip .tsep { margin-top: 6px; padding-top: 5px; border-top: 1px solid var(--hair);
  font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ppd-tip .tnote span { font-size: 10.5px; font-style: italic; }

/* share donuts + legend table */
.ppd .share { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 22px; align-items: start; }
.ppd .donuts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; background: var(--card);
  border: 1px solid var(--hair); padding: 16px 12px; }
.ppd .donut { margin: 0; }
.ppd .donut svg { display: block; width: 100%; max-width: 210px; margin: 0 auto; height: auto; }
.ppd .slice { stroke: var(--card); stroke-width: 2; cursor: pointer; transition: opacity .12s ease; }
.ppd .slice.other { cursor: default; }
.ppd .donuts:hover .slice { opacity: .55; }
.ppd .donuts .slice:hover { opacity: 1; }
.ppd .donut-v { font-family: var(--font-display), "Bebas Neue", sans-serif; font-size: 30px;
  fill: var(--text); letter-spacing: .01em; }
.ppd .donut-l { font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  fill: var(--muted); }
.ppd .share-tbl { border: 1px solid var(--hair); background: var(--card); overflow: auto; }
.ppd .share-tbl .sw { display: inline-block; width: 11px; height: 11px; border-radius: 2px;
  margin-right: 8px; vertical-align: -1px; }
.ppd .share-tbl .pill { margin-left: 6px; }
.ppd .share-tbl td.sh { color: var(--text); font-weight: 700; }
.ppd .share-tbl tr.pick { cursor: pointer; }
@media (max-width: 1100px) { .ppd .share { grid-template-columns: 1fr; } .ppd .donuts { max-width: 480px; } }

/* table views */
.ppd .tbl-ctls { display: flex; gap: 10px; flex-wrap: wrap; }
.ppd .tbl-ctls .seg[hidden] { display: none; }
.ppd tfoot td { position: sticky; bottom: 0; background: var(--sunken); font-weight: 700;
  color: var(--text); border-top: 1.5px solid var(--rule); border-bottom: 0; }
.ppd tfoot tr.sub td { font-weight: 500; color: var(--muted); border-top: 1px solid var(--hair);
  bottom: 0; }
.ppd tfoot tr:first-child:not(:last-child) td { bottom: 33px; }
.ppd table.pivot td, .ppd table.pivot th { white-space: nowrap; }
.ppd table.pivot td.l, .ppd table.pivot th.l { position: sticky; left: 0; z-index: 1; background: var(--card);
  white-space: normal; min-width: 170px; box-shadow: 1px 0 0 var(--hair); }
.ppd table.pivot th.l { z-index: 3; background: var(--sunken); }
.ppd table.pivot tfoot td.l { z-index: 3; background: var(--sunken); }
.ppd table.pivot .tot { font-weight: 700; color: var(--text); box-shadow: inset 1px 0 0 var(--hair); }
.ppd table.pivot th.part { color: var(--alarm); }
.ppd table.pivot td.nil { color: var(--faint); }

/* ranked list gains a change column when a prior window exists */
.ppd .ranked--d .rank-row { grid-template-columns: minmax(150px, 1.35fr) minmax(90px, 2fr) 84px 70px
  minmax(90px, 2fr) 72px 62px 78px; }
@media (max-width: 900px) {
  .ppd .ranked--d .rank-row { grid-template-columns: minmax(120px, 1.4fr) minmax(70px, 1.6fr) 84px 64px 62px 70px; }
}

/* The control bar is sticky so filters stay in reach while scrolling. Once it wraps
   to several rows (narrow pane) or the window is short, a pinned bar would cover
   most of the screen, so it scrolls away with the page instead. */
@media (max-width: 1359px), (max-height: 819px) {
  .ppd .controls { position: static; }
}

/* Phase 2: controls that exist only when the payload carries backfill/inventory. */
.ppd .ctl[hidden], .ppd .seg[hidden] { display: none; }

/* ---- Viewership (HOV) tab — Viewership.jsx. Reuses every .ppd class above; these
   are the only pieces the revenue desk has no equivalent for. ---- */
.ppd select.picker-btn, .ppd input.picker-btn { font-size: 12.5px; padding: 6px 10px; border-radius: 6px; }
.ppd.hov .hov-mix { display: flex; height: 12px; background: var(--sunken); border-radius: 2px; overflow: hidden; }
.ppd.hov .hov-mix span { display: block; height: 100%; }
.ppd.hov .kpi-s .num { font-size: 11.5px; }
.ppd.hov .legend i { border-radius: 2px; }
.ppd.hov td.k { white-space: nowrap; }