/* styles/phone-reports.css — THE PHONE REPORTS PAGE (6 Oct 2026, phone page group 5), Hugo's phone mockup 16:
   the layout pills, then dark frosted glass cards over the project photo (the shell's .shl-glass / .shl-label),
   big condensed numbers, amber links, token-coloured charts. src/PhoneReports.jsx.
   - Phone tier only: every rule sits under body[data-ui-tier="s"]; the desktop never sees any of it.
   - Tokens only (no hex / rgb / hsl); the chart colours are the skin's --chart-* tokens (as on the desktop).
   - Readable type >= 12px; every control >= 40px; nothing past the right edge at 412 / 390 / 360. */

body[data-ui-tier="s"] .prp-page { --prp-gap: 10px; --prp-inset: color-mix(in srgb, var(--card-bg-solid) 46%, transparent); --prp-rule: color-mix(in srgb, var(--ink) 10%, transparent); }
body[data-ui-tier="s"] .prp-page > .pk-page-body { gap: var(--prp-gap); padding-top: 2px; padding-bottom: var(--pk-6); }

/* ════════ LAYOUT PILLS: all six visible, wrapped 4 + 2 ════════ */
/* four to a row (equal), the second row at its own widths (Finance = one column, AI footprint a little wider) */
body[data-ui-tier="s"] .prp-layouts { display: flex; flex-wrap: wrap; gap: 8px; }
body[data-ui-tier="s"] .prp-layouts > .prp-pill { flex: 1 1 calc(25% - 6px); }
body[data-ui-tier="s"] .prp-layouts > .prp-pill:nth-child(n+5) { flex: 0 0 auto; min-width: calc(25% - 6px); padding: 0 14px; }
/* 40px to tap, 34px to see: transparent 3px top + bottom borders; the fill and the edge stop at them */
body[data-ui-tier="s"] .prp-pill {
  min-height: 40px; min-width: 0; padding: 0 6px; border-radius: var(--pk-radius-chip) / calc(var(--pk-radius-chip) + 3px);
  border: 3px solid transparent; border-left-width: 0; border-right-width: 0; background-clip: padding-box;
  box-shadow: inset 0 0 0 1px var(--shl-line);
  background-color: var(--shl-glass); color: var(--ink); font-family: var(--font-body); font-size: var(--fs-13); font-weight: var(--fw-semi);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-tap-highlight-color: transparent;
}
body[data-ui-tier="s"] .prp-layouts.is-few > .prp-pill { flex: 0 0 auto; padding: 0 16px; }
body[data-ui-tier="s"] .prp-pill.is-on { background: var(--accent); background-clip: padding-box; box-shadow: none; color: var(--card-bg-solid); font-weight: var(--fw-bold); }

/* ════════ CARD CHROME ════════ */
body[data-ui-tier="s"] .prp-card { display: flex; flex-direction: column; gap: 7px; min-width: 0; padding: 12px 13px; container: prp-card / inline-size; }
body[data-ui-tier="s"] .prp-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; min-width: 0; }
body[data-ui-tier="s"] .prp-card-titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body[data-ui-tier="s"] .prp-label { letter-spacing: var(--track-08); line-height: 1.3; overflow-wrap: break-word; }
body[data-ui-tier="s"] .prp-card-sub { font-size: var(--fs-12); text-transform: uppercase; letter-spacing: var(--track-06); color: var(--ink-muted); }
body[data-ui-tier="s"] .prp-big {
  font-family: var(--font-display); font-size: 32px; line-height: 1; color: var(--ink); letter-spacing: var(--track-01);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
body[data-ui-tier="s"] .prp-big--md { font-size: 26px; }
body[data-ui-tier="s"] .prp-big--sm { font-size: 22px; }
body[data-ui-tier="s"] .prp-sub { font-size: var(--fs-12); color: var(--ink-muted); line-height: 1.35; }
body[data-ui-tier="s"] .prp-sub.is-over,
body[data-ui-tier="s"] .prp-mini-sub.is-over { color: var(--danger); }
body[data-ui-tier="s"] .prp-mini-lbl { font-size: var(--fs-12); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--track-04); color: var(--ink); line-height: 1.25; }
body[data-ui-tier="s"] .prp-mini-sub { font-size: var(--fs-12); color: var(--ink-muted); line-height: 1.3; }
body[data-ui-tier="s"] .prp-empty { font-size: var(--fs-12); color: var(--ink-muted); line-height: 1.4; }
body[data-ui-tier="s"] .prp-empty.is-italic { font-style: italic; }
body[data-ui-tier="s"] .prp-note { font-size: var(--fs-12); font-style: italic; color: var(--ink-muted); line-height: 1.35; }
body[data-ui-tier="s"] .prp-foot-note { font-size: var(--fs-12); color: var(--ink-muted); text-align: right; margin-top: auto; }
body[data-ui-tier="s"] .prp-foot-note b { color: var(--ink); margin-left: 4px; }
body[data-ui-tier="s"] .prp-total {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding-top: 10px;
  border-top: 1px solid var(--prp-rule); font-size: var(--fs-13); color: var(--ink);
}
body[data-ui-tier="s"] .prp-total b { font-family: var(--font-display); font-size: 19px; font-weight: normal; letter-spacing: var(--track-01); }
body[data-ui-tier="s"] .prp-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; display: inline-block; }
body[data-ui-tier="s"] .prp-grow { flex: 1 1 auto; min-width: 0; }
body[data-ui-tier="s"] .prp-rule { display: block; height: 1px; background: var(--prp-rule); margin: 6px 0; }

/* the amber "View shots →" links: a 40px tap target that reads as a text link */
body[data-ui-tier="s"] .prp-link {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; min-height: 40px; min-width: 40px; padding: 0; margin: -6px 0;
  border: 0; background: transparent; color: var(--accent); font-family: var(--font-body); font-size: var(--fs-12); font-weight: var(--fw-semi);
  white-space: nowrap;
}
body[data-ui-tier="s"] .prp-foot-link { margin-top: auto; margin-bottom: -10px; }

/* pairs: two cards side by side, equal heights (nothing below moves) */
body[data-ui-tier="s"] .prp-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--prp-gap); align-items: stretch; }
body[data-ui-tier="s"] .prp-pair--cost { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
body[data-ui-tier="s"] .prp-pair--succ { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }

/* ════════ CHARTS ════════ */
body[data-ui-tier="s"] .prp-ring { position: relative; }
body[data-ui-tier="s"] .prp-ring svg { display: block; width: 100%; height: 100%; }
body[data-ui-tier="s"] .prp-ring-track { stroke: color-mix(in srgb, var(--ink) 12%, transparent); }
body[data-ui-tier="s"] .prp-ring-mid { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 18%; }
body[data-ui-tier="s"] .prp-ring-top { font-size: var(--fs-12); color: var(--ink-muted); line-height: 1.15; }
body[data-ui-tier="s"] .prp-ring-big { font-family: var(--font-display); font-size: 24px; line-height: 1; color: var(--ink); white-space: nowrap; }
body[data-ui-tier="s"] .prp-donut-row { display: flex; align-items: center; gap: 14px; min-width: 0; }
body[data-ui-tier="s"] .prp-donut-row > .prp-legend { flex: 1 1 auto; min-width: 0; }

/* the legend is its own size container: one line (label, value, pct) when it has room, two lines when it is narrow */
body[data-ui-tier="s"] .prp-legend { display: flex; flex-direction: column; gap: 6px; min-width: 0; container: prp-leg / inline-size; }
body[data-ui-tier="s"] .prp-leg { display: grid; grid-template-columns: 9px minmax(0, 1fr) auto auto; align-items: center; column-gap: 7px; font-size: var(--fs-12); color: var(--ink); }
body[data-ui-tier="s"] .prp-leg-label { min-width: 0; overflow-wrap: break-word; line-height: 1.25; }
body[data-ui-tier="s"] .prp-leg-val { font-weight: var(--fw-bold); text-align: right; font-variant-numeric: tabular-nums; }
body[data-ui-tier="s"] .prp-leg-pct { font-size: var(--fs-12); color: var(--ink-muted); text-align: right; min-width: 36px; font-variant-numeric: tabular-nums; }
body[data-ui-tier="s"] .prp-lines { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
body[data-ui-tier="s"] .prp-lines-plot { position: relative; min-width: 0; }
body[data-ui-tier="s"] .prp-lines-plot svg { display: block; width: 100%; height: 100%; overflow: visible; }
body[data-ui-tier="s"] .prp-grid { stroke: color-mix(in srgb, var(--ink) 9%, transparent); stroke-width: 1; }
body[data-ui-tier="s"] .prp-area { fill-opacity: 0.22; }
body[data-ui-tier="s"] .prp-axis { position: relative; height: 16px; margin: 0 2px; }
body[data-ui-tier="s"] .prp-axis-tick { position: absolute; top: 0; transform: translateX(-50%); font-size: var(--fs-12); color: var(--ink-muted); white-space: nowrap; line-height: 16px; }
body[data-ui-tier="s"] .prp-axis-tick.is-first { transform: none; }
body[data-ui-tier="s"] .prp-axis-tick.is-last { transform: translateX(-100%); }
body[data-ui-tier="s"] .prp-legend-inline { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; font-size: var(--fs-12); color: var(--ink-muted); }
body[data-ui-tier="s"] .prp-legend-inline span { display: inline-flex; align-items: center; gap: 6px; }
body[data-ui-tier="s"] .prp-legend-inline i { width: 14px; height: 3px; border-radius: var(--pk-radius-small); display: inline-block; }

body[data-ui-tier="s"] .prp-cols { display: flex; flex-direction: column; gap: 4px; }
body[data-ui-tier="s"] .prp-cols-plot { display: flex; align-items: stretch; gap: 4px; height: 96px; }
body[data-ui-tier="s"] .prp-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 3px; }
body[data-ui-tier="s"] .prp-col-n { font-size: var(--fs-12); color: var(--ink-muted); line-height: 1; min-height: 12px; }
body[data-ui-tier="s"] .prp-col-bar { width: 100%; max-width: 22px; border-radius: var(--pk-radius-small) var(--pk-radius-small) 0 0; }

body[data-ui-tier="s"] .prp-bars { display: flex; flex-direction: column; gap: 8px; }
body[data-ui-tier="s"] .prp-bar { display: grid; grid-template-columns: minmax(0, 104px) minmax(24px, 1fr) auto 44px; align-items: center; column-gap: 8px; font-size: var(--fs-13); }
body[data-ui-tier="s"] .prp-bar-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
body[data-ui-tier="s"] .prp-bar-track { height: 8px; border-radius: var(--pk-radius-small); background: color-mix(in srgb, var(--ink) 10%, transparent); overflow: hidden; }
body[data-ui-tier="s"] .prp-bar-track i { display: block; height: 100%; border-radius: var(--pk-radius-small); }
body[data-ui-tier="s"] .prp-bar-val { font-weight: var(--fw-bold); text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
body[data-ui-tier="s"] .prp-bar-pct { font-size: var(--fs-12); color: var(--ink-muted); text-align: right; font-variant-numeric: tabular-nums; }
body[data-ui-tier="s"] .prp-split { display: flex; height: 6px; border-radius: var(--pk-radius-small); overflow: hidden; gap: 2px; background: color-mix(in srgb, var(--ink) 8%, transparent); }
body[data-ui-tier="s"] .prp-split i { display: block; min-width: 0; }
body[data-ui-tier="s"] .prp-split--tall { height: 12px; }
body[data-ui-tier="s"] .prp-chipkey { display: flex; flex-wrap: wrap; gap: 4px 12px; }
body[data-ui-tier="s"] .prp-chipkey span { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-12); color: var(--ink-muted); }
body[data-ui-tier="s"] .prp-chipkey i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

/* ════════ COSTS I'VE PAID ════════ */
body[data-ui-tier="s"] .prp-costs { gap: 6px; }
body[data-ui-tier="s"] .prp-costs-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
body[data-ui-tier="s"] .prp-costs-fold {
  display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0; margin: -10px 0 -6px;
  border: 0; background: transparent; color: var(--ink);
}
body[data-ui-tier="s"] .prp-costs-chev { display: inline-flex; color: var(--ink-muted); transition: transform 0.15s ease; }
body[data-ui-tier="s"] .prp-costs-chev.is-shut { transform: rotate(-90deg); }
/* 44px to tap, 36px to see */
body[data-ui-tier="s"] .prp-costs-add {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; margin: -4px 0 -6px; border-radius: var(--pk-radius-control) / calc(var(--pk-radius-control) + 4px);
  border: 4px solid transparent; border-left-width: 0; border-right-width: 0; background-clip: padding-box;
  box-shadow: inset 0 0 0 1px var(--shl-line); background-color: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink);
  font-family: var(--font-body); font-size: var(--fs-14); font-weight: var(--fw-bold); white-space: nowrap; -webkit-tap-highlight-color: transparent;
}
body[data-ui-tier="s"] .prp-costs-add svg { width: 16px; height: 16px; }
body[data-ui-tier="s"] .prp-costs-total { margin-top: -10px; }
body[data-ui-tier="s"] .prp-costs-empty { margin: 2px 0 0; font-size: var(--fs-12); font-style: italic; color: var(--ink-muted); line-height: 1.45; }
body[data-ui-tier="s"] .prp-costs-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; }
body[data-ui-tier="s"] .prp-cost-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 40px; align-items: center; gap: 8px; min-height: 48px; border-top: 1px solid var(--prp-rule); }
body[data-ui-tier="s"] .prp-cost-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body[data-ui-tier="s"] .prp-cost-what { font-size: var(--fs-14); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-ui-tier="s"] .prp-cost-what em { color: var(--ink-muted); font-style: italic; }
body[data-ui-tier="s"] .prp-cost-meta { font-size: var(--fs-12); color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-ui-tier="s"] .prp-cost-amt { font-weight: var(--fw-bold); font-size: var(--fs-14); font-variant-numeric: tabular-nums; }
body[data-ui-tier="s"] .prp-cost-del {
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
  border: 0; background: transparent; color: var(--ink-muted);
}
/* the Add cost sheet */
body[data-ui-tier="s"] .prp-form { display: flex; flex-direction: column; gap: 14px; padding: 8px 0 16px; }
body[data-ui-tier="s"] .prp-field { display: flex; flex-direction: column; gap: 6px; }
body[data-ui-tier="s"] .prp-field > span { font-size: var(--fs-12); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--track-06); color: var(--ink-muted); }
body[data-ui-tier="s"] .prp-field input,
body[data-ui-tier="s"] .prp-field select {
  width: 100%; min-height: 48px; padding: 0 12px; border-radius: var(--pk-radius-control); border: 1px solid var(--shl-line);
  background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); font-family: var(--font-body); font-size: var(--fs-16);
}
body[data-ui-tier="s"] .prp-field input::placeholder { color: color-mix(in srgb, var(--ink-muted) 60%, transparent); font-style: italic; }
body[data-ui-tier="s"] .prp-form-foot { display: flex; flex-direction: column; gap: 8px; }
body[data-ui-tier="s"] .prp-form-err { font-size: var(--fs-13); color: var(--danger); }

/* ════════ TIME & USAGE ════════ */
body[data-ui-tier="s"] .prp-time-grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 10px; align-items: stretch; }
body[data-ui-tier="s"] .prp-inset { border-radius: var(--pk-radius-row); border: 1px solid var(--shl-line); background: var(--prp-inset); padding: 9px 10px; min-width: 0; }
body[data-ui-tier="s"] .prp-time-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-content: start; }
body[data-ui-tier="s"] .prp-mini { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
body[data-ui-tier="s"] .prp-time-chart { display: flex; flex-direction: column; gap: 8px; }
body[data-ui-tier="s"] .prp-time-chart .prp-lines { flex: 1 1 auto; justify-content: flex-end; }
body[data-ui-tier="s"] .prp-time-chart .prp-lines-plot { flex: 1 1 auto; }

/* ════════ TOTAL COST | SHOTS ════════ */
body[data-ui-tier="s"] .prp-cost .prp-legend { margin-top: 2px; gap: 7px; }
body[data-ui-tier="s"] .prp-shots { gap: 6px; }
body[data-ui-tier="s"] .prp-shot-row { display: flex; align-items: flex-start; gap: 8px; min-width: 0; padding-top: 6px; }
body[data-ui-tier="s"] .prp-shot-row.is-total { padding-top: 0; }
body[data-ui-tier="s"] .prp-shot-row:not(.is-total) { border-top: 1px solid var(--prp-rule); padding-top: 10px; }
body[data-ui-tier="s"] .prp-shot-ico { display: inline-flex; color: var(--ink-muted); padding-top: 1px; }
body[data-ui-tier="s"] .prp-shot-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body[data-ui-tier="s"] .prp-shots .prp-link { margin-top: -8px; }

/* ════════ GENERATIONS | SPEND ════════ */
body[data-ui-tier="s"] .prp-gens .prp-legend { gap: 7px; }
body[data-ui-tier="s"] .prp-spend .prp-bars { padding: 2px 0 4px; }

/* ════════ THE KPI TILES: real assets (tall, left) | images, videos / prompts, voiceover, copied ════════ */
body[data-ui-tier="s"] .prp-kpis { display: grid; grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr); gap: 8px; align-items: stretch; }
body[data-ui-tier="s"] .prp-kpis-side { display: grid; grid-template-rows: auto 1fr; gap: 8px; min-width: 0; }
body[data-ui-tier="s"] .prp-kpis-row { display: grid; gap: 8px; min-width: 0; }
body[data-ui-tier="s"] .prp-kpis-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body[data-ui-tier="s"] .prp-kpis-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body[data-ui-tier="s"] .prp-kpi { display: flex; flex-direction: column; gap: 5px; padding: 10px 9px; min-width: 0; }
body[data-ui-tier="s"] .prp-kpi-lbl { font-size: var(--fs-12); font-weight: var(--fw-bold); color: var(--ink); line-height: 1.2; overflow-wrap: break-word; }
body[data-ui-tier="s"] .prp-kpi-ico { display: inline-flex; color: var(--ink-muted); }
body[data-ui-tier="s"] .prp-kpi .prp-big { margin-top: auto; }
body[data-ui-tier="s"] .prp-kpi--assets .prp-big { margin-top: 0; }
body[data-ui-tier="s"] .prp-kpi-cats { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }
body[data-ui-tier="s"] .prp-kpi-cats div { display: flex; justify-content: space-between; gap: 6px; font-size: var(--fs-12); color: var(--ink-muted); }
body[data-ui-tier="s"] .prp-kpi-cats span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-ui-tier="s"] .prp-kpi-cats b { color: var(--ink); font-weight: var(--fw-semi); }
body[data-ui-tier="s"] .prp-kpi--assets .prp-foot-link { margin-top: 4px; }

/* ════════ SUCCESS | SUBSCRIPTIONS · PIPELINE | LIVES · TRENDS | CONTRIBUTORS · NOTES | COMMENTS ════════ */
body[data-ui-tier="s"] .prp-success-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
body[data-ui-tier="s"] .prp-success-row > .prp-legend { flex: 1 1 auto; min-width: 0; }
body[data-ui-tier="s"] .prp-success .prp-ring-big { font-size: 18px; }
body[data-ui-tier="s"] .prp-subs-list { display: flex; flex-direction: column; gap: 8px; }
body[data-ui-tier="s"] .prp-sub-row { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
body[data-ui-tier="s"] .prp-sub-row .prp-dot { margin-top: 4px; }
body[data-ui-tier="s"] .prp-sub-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body[data-ui-tier="s"] .prp-sub-tool { font-size: var(--fs-13); color: var(--ink); font-weight: var(--fw-semi); }
body[data-ui-tier="s"] .prp-sub-nums { font-size: var(--fs-12); color: var(--ink-muted); }
body[data-ui-tier="s"] .prp-lives-ring { display: flex; justify-content: center; padding: 2px 0 4px; }
body[data-ui-tier="s"] .prp-lives .prp-ring-big { font-size: 22px; }
body[data-ui-tier="s"] .prp-trends .prp-lines { margin-top: auto; }
body[data-ui-tier="s"] .prp-contribs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
body[data-ui-tier="s"] .prp-contrib-row { display: grid; grid-template-columns: 10px 24px minmax(0, 1fr) auto; align-items: center; gap: 7px; }
body[data-ui-tier="s"] .prp-contrib-rank { font-size: var(--fs-12); color: var(--ink-muted); font-weight: var(--fw-bold); }
body[data-ui-tier="s"] .prp-av {
  width: 24px; height: 24px; border-radius: 50%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--ink) 14%, transparent); color: var(--ink); font-size: var(--fs-12); font-weight: var(--fw-bold);
}
body[data-ui-tier="s"] .prp-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
body[data-ui-tier="s"] .prp-contrib-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
body[data-ui-tier="s"] .prp-contrib-name { font-size: var(--fs-13); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-ui-tier="s"] .prp-contrib-bar { display: block; height: 5px; border-radius: var(--pk-radius-small); background: color-mix(in srgb, var(--ink) 10%, transparent); overflow: hidden; }
body[data-ui-tier="s"] .prp-contrib-bar i { display: block; height: 100%; border-radius: var(--pk-radius-small); background: var(--accent); }
body[data-ui-tier="s"] .prp-contrib-val { font-family: var(--font-display); font-size: 17px; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
body[data-ui-tier="s"] .prp-count-row { display: flex; align-items: center; gap: 10px; }
body[data-ui-tier="s"] .prp-count-ico { display: inline-flex; color: var(--ink-muted); }
body[data-ui-tier="s"] .prp-count-sub { font-size: var(--fs-12); color: var(--ink-muted); line-height: 1.35; }

/* ════════ SUMMARY / COMPACT / EDITORIAL / FINANCE pieces ════════ */
body[data-ui-tier="s"] .prp-kv { display: flex; flex-direction: column; }
body[data-ui-tier="s"] .prp-kv-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--prp-rule); font-size: var(--fs-13); color: var(--ink-muted); }
body[data-ui-tier="s"] .prp-kv-row:last-child { border-bottom: 0; }
body[data-ui-tier="s"] .prp-kv-row b { color: var(--ink); font-size: var(--fs-13); text-align: right; }
body[data-ui-tier="s"] .prp-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--prp-gap); }
body[data-ui-tier="s"] .prp-tile { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 11px 12px; }
body[data-ui-tier="s"] .prp-tile-head { display: flex; align-items: center; gap: 6px; color: var(--ink-muted); min-width: 0; }
body[data-ui-tier="s"] .prp-tile .prp-split { margin-top: auto; }
body[data-ui-tier="s"] .prp-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
body[data-ui-tier="s"] .prp-item { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--prp-rule); min-width: 0; }
body[data-ui-tier="s"] .prp-item-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: 0 0 8px; margin-top: 5px; }
body[data-ui-tier="s"] .prp-item-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body[data-ui-tier="s"] .prp-item-title { font-size: var(--fs-12); font-weight: var(--fw-bold); color: var(--ink); }
body[data-ui-tier="s"] .prp-item-text { font-size: var(--fs-13); color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body[data-ui-tier="s"] .prp-item-meta { font-size: var(--fs-12); color: var(--ink-muted); }
body[data-ui-tier="s"] .prp-export { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
body[data-ui-tier="s"] .prp-export .prp-asof { text-align: left; }

/* the page's foot line and the locked notice, on the photo */
body[data-ui-tier="s"] .prp-asof { font-size: var(--fs-12); text-align: center; color: color-mix(in srgb, var(--ink-cream-7) 80%, transparent); }
body[data-ui-tier="s"] .prp-locked p { margin: 0; font-size: var(--fs-13); line-height: 1.5; color: var(--ink); }
body[data-ui-tier="s"] .prp-locked .pk-btn { align-self: flex-start; }

/* ════════ NARROW CARDS (a card in a pair): a bar's label sits above it; a narrow legend goes two-line (label, then
   value + pct); a ring stacks over its legend when even that is too tight ════════ */
@container prp-card (max-width: 260px) {
  body[data-ui-tier="s"] .prp-bar { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "label val pct" "track track track"; row-gap: 5px; }
  body[data-ui-tier="s"] .prp-bar-label { grid-area: label; font-size: var(--fs-12); text-transform: uppercase; letter-spacing: var(--track-04); }
  body[data-ui-tier="s"] .prp-bar-track { grid-area: track; }
  body[data-ui-tier="s"] .prp-bar-val { grid-area: val; }
  body[data-ui-tier="s"] .prp-bar-pct { grid-area: pct; min-width: 40px; }
}
@container prp-leg (max-width: 150px) {
  body[data-ui-tier="s"] .prp-leg { grid-template-columns: 9px auto minmax(0, 1fr); grid-template-areas: "dot label label" ". val pct"; row-gap: 2px; }
  body[data-ui-tier="s"] .prp-leg .prp-dot { grid-area: dot; }
  body[data-ui-tier="s"] .prp-leg-label { grid-area: label; }
  body[data-ui-tier="s"] .prp-leg-val { grid-area: val; text-align: left; font-family: var(--font-display); font-size: 17px; font-weight: normal; line-height: 1; }
  body[data-ui-tier="s"] .prp-leg-pct { grid-area: pct; min-width: 0; padding-left: 6px; }
}
@container prp-card (max-width: 165px) {
  body[data-ui-tier="s"] .prp-success-row { flex-direction: column; align-items: flex-start; }
  body[data-ui-tier="s"] .prp-success-row > .prp-legend { width: 100%; }
}

/* ════════ AI FOOTPRINT: the desktop's own report, its buttons made thumb-sized ════════ */
body[data-ui-tier="s"] .prp-footprint { min-width: 0; }
body[data-ui-tier="s"] .prp-footprint button { min-height: 40px; min-width: 40px; }

/* ════════ NARROW PHONES (390 / 360): the tall assets tile takes the full row, the hours chart goes under its
   figures, the pills tighten ════════ */
@media (max-width: 400px) {
  body[data-ui-tier="s"] .prp-time-grid { grid-template-columns: minmax(0, 1fr); }
  body[data-ui-tier="s"] .prp-time-chart .prp-lines-plot { min-height: 64px; }
  body[data-ui-tier="s"] .prp-pill { padding: 0 4px; }
  body[data-ui-tier="s"] .prp-kpis { grid-template-columns: minmax(0, 1fr); }
  body[data-ui-tier="s"] .prp-kpi--assets .prp-kpi-cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
}

/* ════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   THE MOCKUP 16 GEOMETRY + MATERIAL (6 Oct 2026, measured: phone-specs/16-reports.spec.md, CSS px at 412 wide).
   Coordinator: "each phone page must look EXACTLY like his mockup". Mockup 16's header (no bar: ☰, a 17.5px
   wordmark, three 28px frosted discs on the photo) and band (PROJECT, the 38px title + a small navy ▾, then ONE row:
   the album and song chips, DEVELOPMENT, the online pill), then ONE translucent navy glass sheet from y 116 to the
   bottom holding everything else: the pinned "Reports" heading and the six layout pills (4 + 2, 23px, the active
   one solid amber), and under them the scrolling cards - near-solid navy (92%) with a cool lighter 1px rim, no
   shadow, in tight pairs 6px apart, 11px from the edges, their type at the mockup's own small sizes (labels 6-8px,
   Bebas numbers 13-28px) - and mockup 16's 50px bottom bar. Every size is the mockup's; controls keep a 40px tap
   area through transparent borders / invisible ::before areas where the layout allows.
   ════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
body[data-ui-tier="s"] .prp-page {
  --prp-card: color-mix(in srgb, var(--card-bg-solid) 92%, transparent);
  --prp-rim: color-mix(in srgb, var(--blue-5, var(--ink)) 22%, var(--card-bg-solid));
  --prp-sub-rim: color-mix(in srgb, var(--blue-5, var(--ink)) 12%, var(--card-bg-solid));
  --prp-rule: color-mix(in srgb, var(--blue-5, var(--ink)) 12%, var(--card-bg-solid));
  --prp-track: color-mix(in srgb, var(--blue-5, var(--ink)) 20%, var(--card-bg-solid));
  --prp-muted: color-mix(in srgb, var(--ink-muted) 82%, var(--blue-5, var(--ink-muted)));
  --prp-label: color-mix(in srgb, var(--ink) 55%, var(--ink-muted));
  --prp-link: color-mix(in srgb, var(--status-warn) 76%, var(--ink));
  --prp-gap: 5.6px;
  /* THE SHEET: navy glass from under the band to the bottom, dense on the left and thinning to the right, so the
     sunset glows through it warm down the right edge (mockup 16: #111d2a on the left, #8a643a top-right) */
  --prp-sheet-navy: color-mix(in srgb, var(--card-bg-solid) 72%, var(--bg));
  --prp-sheet: linear-gradient(90deg, color-mix(in srgb, var(--prp-sheet-navy) 92%, transparent) 0%, color-mix(in srgb, var(--prp-sheet-navy) 86%, transparent) 45%,
    color-mix(in srgb, var(--prp-sheet-navy) 62%, transparent) 80%, color-mix(in srgb, var(--prp-sheet-navy) 42%, transparent) 100%);
  overflow: hidden; padding-bottom: 0; margin-top: -1.6px;
  background: var(--prp-sheet);
  border-top: 1px solid color-mix(in srgb, var(--ink) 20%, transparent);
  border-radius: var(--pk-radius-card) var(--pk-radius-card) 0 0;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
body[data-ui-tier="s"] .main-content > .pk-page.prp-page { background: var(--prp-sheet); }
/* mockup 16's colours (7 Oct, measured): the chart series lifted from the skin's own chart tokens to the mockup's brighter
   amber / blue / yellow / light blue / grey blue, a mint for the first pipeline stage, the white text NEUTRAL (the skin's
   ink is cream) and the small caps labels a cool pale slate. Glass family only: a pale skin keeps its own palette. */
body[data-ui-tier="s"][data-skin-family="glass"] .prp-page {
  --prp-pal-1: oklch(from var(--chart-1) calc(l + 0.045) calc(c * 1.03) h);
  --prp-pal-2: oklch(from var(--chart-2) calc(l + 0.06) calc(c * 1.55) calc(h + 5.5));
  --prp-pal-3: oklch(from var(--chart-3) calc(l + 0.104) calc(c * 1.043) calc(h + 5.3));
  --prp-pal-4: oklch(from var(--chart-2) calc(l + 0.11) calc(c * 1.215) calc(h + 2.6));
  --prp-pal-5: oklch(from var(--chart-2) calc(l + 0.033) calc(c * 0.933) calc(h + 7.4));
  --prp-ok: oklch(from var(--chart-ok) calc(l + 0.06) calc(c * 1.17) h);
  --prp-fail: oklch(from var(--chart-fail) calc(l + 0.017) calc(c * 1.04) h);
  --prp-pipe-1: oklch(from var(--chart-ok) calc(l + 0.145) calc(c * 0.46) calc(h + 32.3));
  --prp-pipe-2: oklch(from var(--chart-2) calc(l + 0.085) calc(c * 1.42) calc(h + 4.6));
  --prp-pipe-3: oklch(from var(--chart-3) calc(l + 0.088) calc(c * 1.023) calc(h + 5.2));
  --ink: color-mix(in srgb, var(--white) 90%, var(--ink-muted));
  --prp-label: color-mix(in srgb, var(--white) 55%, color-mix(in srgb, var(--blue-5, var(--ink-muted)) 55%, var(--ink-muted)));
}
body[data-ui-tier="s"] .prp-page > .pk-page-body { flex: 1 1 auto; min-height: 0; gap: 0; padding: 0; }
body[data-ui-tier="s"] .prp-top { flex: 0 0 auto; padding: 0 11px 0 15.5px; }
body[data-ui-tier="s"] .prp-scroll {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: var(--prp-gap); padding: 1.3px 11px 5.8px;
}

/* ════════ "Reports" + THE LAYOUT PILLS (pinned) ════════ */
body[data-ui-tier="s"] .prp-title { margin: 5.6px 0 0; font-family: var(--font-body); font-size: 16.6px; font-weight: var(--fw-bold); line-height: 1; letter-spacing: -0.02em; color: var(--ink); }
body[data-ui-tier="s"] .prp-page .prp-layouts { gap: 4.5px 4px; margin: 3.8px 0 5.2px; }
body[data-ui-tier="s"] .prp-page .prp-layouts > .prp-pill { flex: 0 0 auto; }
body[data-ui-tier="s"] .prp-page .prp-pill {
  height: 40px; min-height: 0; margin: -8px 0; padding: 0; border-width: 8px 0;
  border-radius: var(--pk-radius-chip) / calc(var(--pk-radius-chip) + 8px);
  background-color: color-mix(in srgb, color-mix(in srgb, var(--ink) 22%, var(--black)) 86%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 9%, transparent);
  font-size: 10px; font-weight: var(--fw-med); color: color-mix(in srgb, var(--ink) 90%, var(--ink-muted));
}
body[data-ui-tier="s"] .prp-page .prp-pill:nth-child(1) { width: 80.7px; }
body[data-ui-tier="s"] .prp-page .prp-pill:nth-child(2) { width: 86.5px; }
body[data-ui-tier="s"] .prp-page .prp-pill:nth-child(3) { width: 86.5px; }
body[data-ui-tier="s"] .prp-page .prp-pill:nth-child(4) { width: 82px; }
body[data-ui-tier="s"] .prp-page .prp-pill:nth-child(5) { width: 85.9px; }
body[data-ui-tier="s"] .prp-page .prp-pill:nth-child(6) { width: 93px; }
body[data-ui-tier="s"] .prp-page .prp-layouts > .prp-pill:nth-child(n+5) { min-width: 0; padding: 0; }
body[data-ui-tier="s"] .prp-page .prp-pill.is-on {
  background: linear-gradient(180deg, oklch(from var(--accent) calc(l + 0.05) calc(c * 1.03) h), oklch(from var(--accent) calc(l + 0.035) calc(c * 1.03) calc(h - 1))) padding-box; box-shadow: none;
  color: color-mix(in srgb, var(--accent) 25%, var(--black)); font-weight: var(--fw-semi);
}

/* ════════ THE CARDS: near-solid navy, a cool lighter 1px rim, no shadow ════════ */
body[data-ui-tier="s"] .prp-page .prp-card,
body[data-ui-tier="s"] .prp-page .prp-kpi {
  gap: 0; padding: 0; border-radius: var(--pk-radius-card); background: var(--prp-card); border: 1px solid var(--prp-rim); box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; position: relative;
}
body[data-ui-tier="s"] .prp-page .prp-pair { gap: var(--prp-gap); }
body[data-ui-tier="s"] .prp-page .prp-card-head { padding: 0; gap: 4px; }
/* the card labels: the mockup's small TRACKED caps (0.09em); each card's own size below follows the mockup's width */
body[data-ui-tier="s"] .prp-page .prp-label,
body[data-ui-tier="s"] .prp-page .prp-kpi-lbl {
  font-family: var(--font-body); font-size: 6.2px; font-weight: var(--fw-semi); letter-spacing: 0.09em; line-height: 1.3; text-transform: uppercase; color: var(--prp-label);
}
body[data-ui-tier="s"] .prp-page .prp-time .prp-label { font-size: 6.9px; letter-spacing: 0.066em; }
body[data-ui-tier="s"] .prp-page .prp-costs .prp-label { font-size: 6.9px; letter-spacing: 0.052em; }
body[data-ui-tier="s"] .prp-page .prp-cost .prp-label { font-size: 6.85px; letter-spacing: 0.016em; }
body[data-ui-tier="s"] .prp-page .prp-card-sub { font-size: 7.1px; font-weight: var(--fw-med); letter-spacing: 0.06em; color: var(--prp-muted); line-height: 1.1; }
body[data-ui-tier="s"] .prp-page .prp-big { font-size: 27.7px; line-height: 1; letter-spacing: 0; }
body[data-ui-tier="s"] .prp-page .prp-big--md { font-size: 21.2px; }
body[data-ui-tier="s"] .prp-page .prp-big--sm { font-size: 18.5px; }
body[data-ui-tier="s"] .prp-page .prp-mini-lbl { font-size: 5.63px; font-weight: var(--fw-bold); letter-spacing: 0.09em; line-height: 1.25; color: var(--ink); }
body[data-ui-tier="s"] .prp-page .prp-mini-sub,
body[data-ui-tier="s"] .prp-page .prp-sub { font-size: 7.6px; line-height: 1.2; color: var(--prp-muted); }
body[data-ui-tier="s"] .prp-page .prp-link {
  min-height: 0; height: 40px; margin: -16px 0; padding: 0; gap: 3px; font-size: 7.8px; letter-spacing: -0.035em; font-weight: var(--fw-semi); color: var(--prp-link); position: relative;
}

body[data-ui-tier="s"] .prp-page .prp-foot-link { margin: auto 0 -9px; }
body[data-ui-tier="s"] .prp-page .prp-dot { width: 8.4px; height: 8.4px; flex: 0 0 8.4px; }
body[data-ui-tier="s"] .prp-page .prp-empty { font-size: 8.1px; line-height: 1.5; color: var(--prp-muted); }
body[data-ui-tier="s"] .prp-page .prp-total { padding-top: 0; border-top: 1px solid var(--prp-rule); font-size: 8px; color: color-mix(in srgb, var(--ink) 80%, var(--ink-muted)); align-items: center; }
body[data-ui-tier="s"] .prp-page .prp-total b { font-size: 12px; }
body[data-ui-tier="s"] .prp-page .prp-foot-note { font-size: 7.6px; color: color-mix(in srgb, var(--ink) 80%, var(--ink-muted)); }
body[data-ui-tier="s"] .prp-page .prp-foot-note b { font-weight: var(--fw-semi); color: var(--ink); margin-left: 3.5px; }

/* COSTS I'VE PAID (79 tall): the label, the total, Add cost on the right, two italic lines */
body[data-ui-tier="s"] .prp-page .prp-costs { height: 79.4px; box-sizing: border-box; padding: 0 9.3px 0 11.6px; }
body[data-ui-tier="s"] .prp-page .prp-costs-head { position: absolute; left: 11.6px; right: 9.3px; top: 0; }
body[data-ui-tier="s"] .prp-page .prp-costs-fold { min-height: 0; height: 40px; margin: 0; padding: 10.7px 0 0; align-items: flex-start; }
body[data-ui-tier="s"] .prp-page .prp-costs-chev { display: none; }
body[data-ui-tier="s"] .prp-page .prp-costs-add {
  position: absolute; right: 0; top: 4.8px; min-height: 0; height: 40px; margin: 0; padding: 0 4px; border-width: 6px 0; gap: 4.2px;
  border-radius: var(--pk-radius-control) / calc(var(--pk-radius-control) + 6px);
  background-color: color-mix(in srgb, var(--card-bg-solid) 94%, var(--blue-5, var(--ink))); box-shadow: inset 0 0 0 1px var(--prp-rim);
  font-size: 9.6px; font-weight: var(--fw-bold); width: 73.6px; justify-content: center;
}
body[data-ui-tier="s"] .prp-page .prp-costs-add svg { width: 10px; height: 10px; }
body[data-ui-tier="s"] .prp-page .prp-costs-total { position: absolute; left: 9.6px; top: 22px; margin: 0; font-size: 25px; }
body[data-ui-tier="s"] .prp-page .prp-costs-empty { position: absolute; left: 11.6px; top: 52.6px; width: 196px; margin: 0; font-size: 7.7px; line-height: 12.3px; color: var(--prp-muted); }
body[data-ui-tier="s"] .prp-page .prp-costs-list { position: absolute; left: 11.6px; right: 9.3px; top: 52px; margin: 0; }
body[data-ui-tier="s"] .prp-page .prp-costs:has(.prp-cost-row) { height: auto; min-height: 79.4px; padding-top: 52px; padding-bottom: 6px; }
body[data-ui-tier="s"] .prp-page .prp-costs:has(.prp-cost-row) .prp-costs-list { position: static; }
body[data-ui-tier="s"] .prp-page .prp-cost-row { min-height: 26px; grid-template-columns: minmax(0, 1fr) auto 26px; gap: 6px; }
body[data-ui-tier="s"] .prp-page .prp-cost-what { font-size: 9px; }
body[data-ui-tier="s"] .prp-page .prp-cost-meta { font-size: 7.6px; }
body[data-ui-tier="s"] .prp-page .prp-cost-amt { font-size: 9px; }
body[data-ui-tier="s"] .prp-page .prp-cost-del { width: 40px; height: 40px; margin: -7px -7px -7px 0; }

/* TIME & USAGE (119.5): two inset boxes - the two figures | the 10-week chart */
body[data-ui-tier="s"] .prp-page .prp-time { height: 119.5px; box-sizing: border-box; padding: 7.4px 7.6px 0 7.7px; }
body[data-ui-tier="s"] .prp-page .prp-time .prp-card-head { padding-left: 1.9px; height: 13.2px; }
body[data-ui-tier="s"] .prp-page .prp-time-grid { grid-template-columns: minmax(0, 160.8fr) minmax(0, 208.6fr); gap: 5.2px; }
body[data-ui-tier="s"] .prp-page .prp-inset { height: 91.1px; box-sizing: border-box; border-radius: var(--pk-radius-row); border: 1px solid var(--prp-sub-rim); background: transparent; padding: 0; }
body[data-ui-tier="s"] .prp-page .prp-time-stats { display: grid; grid-template-columns: 76.5px minmax(0, 1fr); gap: 0; padding: 17.8px 0 0 6.8px; }
body[data-ui-tier="s"] .prp-page .prp-time-stats .prp-mini { gap: 0; }
body[data-ui-tier="s"] .prp-page .prp-time-stats .prp-mini + .prp-mini { border-left: 1px solid var(--prp-rule); padding-left: 4.3px; height: 44.6px; margin-top: -1.9px; }
body[data-ui-tier="s"] .prp-page .prp-time-stats .prp-big { margin: 0.4px 0 0; font-size: 27.2px; }
body[data-ui-tier="s"] .prp-page .prp-time-stats .prp-mini-lbl { font-size: 6.25px; letter-spacing: 0.04em; }
body[data-ui-tier="s"] .prp-page .prp-time-stats .prp-mini-sub { margin-top: 0.5px; font-size: 7.7px; letter-spacing: -0.05em; }
body[data-ui-tier="s"] .prp-page .prp-time-chart { padding: 5px 4.5px 0 5.4px; gap: 0; }
body[data-ui-tier="s"] .prp-page .prp-time-chart > .prp-mini-lbl { font-size: 6.5px; letter-spacing: 0.09em; }
body[data-ui-tier="s"] .prp-page .prp-time-chart .prp-lines { margin-top: 4.8px; gap: 7.4px; flex: 0 0 auto; }
body[data-ui-tier="s"] .prp-page .prp-time-chart .prp-axis { margin: 0 2px 0 -1px; }
body[data-ui-tier="s"] .prp-page .prp-time-chart .prp-lines-plot { flex: 0 0 auto; height: 46.5px !important; }
body[data-ui-tier="s"] .prp-page .prp-axis { height: 7px; margin: 0 2px; }
body[data-ui-tier="s"] .prp-page .prp-axis-tick { font-size: 5.8px; line-height: 7px; color: var(--prp-muted); }
body[data-ui-tier="s"] .prp-page .prp-grid { stroke: color-mix(in srgb, var(--ink) 7%, transparent); }

/* TOTAL PROJECT COST | TOTAL SHOTS (135) */
body[data-ui-tier="s"] .prp-page .prp-pair--cost { grid-template-columns: minmax(0, 185.3fr) minmax(0, 198.9fr); }
body[data-ui-tier="s"] .prp-page .prp-cost,
body[data-ui-tier="s"] .prp-page .prp-shots { height: 135px; box-sizing: border-box; padding: 8.7px 8.4px 0 11.6px; }
body[data-ui-tier="s"] .prp-page .prp-cost .prp-big { margin-top: 3.4px; font-size: 27px; letter-spacing: -0.024em; }
body[data-ui-tier="s"] .prp-page .prp-cost .prp-sub { margin-top: -0.5px; font-size: 8px; letter-spacing: -0.03em; }
body[data-ui-tier="s"] .prp-page .prp-cost { padding-right: 12.6px; }
body[data-ui-tier="s"] .prp-page .prp-cost .prp-legend { margin-top: 7.9px; gap: 0; }
body[data-ui-tier="s"] .prp-page .prp-cost .prp-leg { height: 18.4px; grid-template-columns: 8.4px minmax(0, 1fr) auto 22.5px; column-gap: 6.4px; font-size: 8px; letter-spacing: -0.035em; }
body[data-ui-tier="s"] .prp-page .prp-cost .prp-leg-label { color: color-mix(in srgb, var(--ink) 74%, var(--ink-muted)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-ui-tier="s"] .prp-page .prp-cost .prp-leg-val { font-family: var(--font-display); font-size: 11.4px; letter-spacing: 0.041em; font-weight: 400; }
body[data-ui-tier="s"] .prp-page .prp-cost .prp-leg-pct { font-size: 8.1px; letter-spacing: -0.05em; min-width: 0; transform: scaleX(0.89); transform-origin: right center; color: color-mix(in srgb, var(--ink) 74%, var(--ink-muted)); }

body[data-ui-tier="s"] .prp-page .prp-shots { padding-right: 11.6px; padding-left: 9px; }
body[data-ui-tier="s"] .prp-page .prp-shot-row { display: flex; align-items: flex-start; gap: 0; padding: 0; }
body[data-ui-tier="s"] .prp-page .prp-shot-row.is-total { height: 27.6px; padding-top: 1.4px; box-sizing: border-box; justify-content: space-between; }
body[data-ui-tier="s"] .prp-page .prp-shot-row.is-total .prp-big { font-size: 26px; letter-spacing: 0; }
body[data-ui-tier="s"] .prp-page .prp-shot-row:not(.is-total) { height: 36.9px; box-sizing: border-box; border-top: 1px solid var(--prp-rule); padding-top: 7.4px; }
body[data-ui-tier="s"] .prp-page .prp-shot-row .prp-link { margin-left: auto; margin-top: -10.5px; }
body[data-ui-tier="s"] .prp-page .prp-shot-row.is-total .prp-link { margin-top: -9.2px; }
body[data-ui-tier="s"] .prp-page .prp-shot-ico { width: 20.7px; flex: 0 0 20.7px; padding-top: 0.6px; color: var(--ink); }
body[data-ui-tier="s"] .prp-page .prp-shot-ico svg { width: 13.4px; height: 13.4px; }
body[data-ui-tier="s"] .prp-page .prp-shot-row--active .prp-shot-ico svg { width: 14.3px; height: 14.3px; }
body[data-ui-tier="s"] .prp-page .prp-shot-txt { gap: 2.2px; }
body[data-ui-tier="s"] .prp-page .prp-shots .prp-mini-lbl { font-size: 6.2px; letter-spacing: 0.02em; font-weight: var(--fw-semi); color: var(--prp-label); }
body[data-ui-tier="s"] .prp-page .prp-shots .prp-big--sm { font-size: 16.1px; }

/* GENERATIONS BY MODEL | API SPEND PER MODEL (138) */
body[data-ui-tier="s"] .prp-page .prp-pair--gens { grid-template-columns: minmax(0, 184fr) minmax(0, 200.2fr); }
body[data-ui-tier="s"] .prp-page .prp-gens,
body[data-ui-tier="s"] .prp-page .prp-spend { height: 138.2px; box-sizing: border-box; padding: 8.2px 5px 0 11.6px; }
body[data-ui-tier="s"] .prp-page .prp-gens .prp-donut-row { margin: 9.2px 0 0 -3.2px; gap: 3.9px; align-items: flex-start; }
body[data-ui-tier="s"] .prp-page .prp-gens .prp-legend { gap: 0; margin-top: 0; }
body[data-ui-tier="s"] .prp-page .prp-gens .prp-leg { height: 16.8px; grid-template-columns: 6.5px minmax(0, 1fr) auto 19px; column-gap: 3px; font-size: 6.2px; }
body[data-ui-tier="s"] .prp-page .prp-gens .prp-dot { width: 6.5px; height: 6.5px; flex-basis: 6.5px; }
body[data-ui-tier="s"] .prp-page .prp-gens .prp-leg-label {
  display: block; width: calc(100% / 0.94); transform: scaleX(0.94); transform-origin: left center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.045em; color: color-mix(in srgb, var(--ink) 82%, var(--ink-muted));
}
body[data-ui-tier="s"] .prp-page .prp-gens .prp-leg-val { font-size: 6.6px; }
body[data-ui-tier="s"] .prp-page .prp-gens .prp-leg-pct { font-size: 6.1px; letter-spacing: -0.03em; min-width: 0; }
body[data-ui-tier="s"] .prp-page .prp-gens .prp-foot-link { right: 5px; }
body[data-ui-tier="s"] .prp-page .prp-ring-mid { padding: 0 12%; }
body[data-ui-tier="s"] .prp-page .prp-ring-top { font-size: 5.9px; font-weight: var(--fw-semi); letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.25; color: color-mix(in srgb, var(--ink) 74%, var(--ink-muted)); }
body[data-ui-tier="s"] .prp-page .prp-ring-big { font-size: 17px; }
body[data-ui-tier="s"] .prp-page .prp-gens .prp-ring-top { font-size: 6px; letter-spacing: 0.01em; line-height: 11px; }
body[data-ui-tier="s"] .prp-page .prp-gens .prp-foot-link { position: absolute; left: 11.6px; right: 9.5px; top: 102.2px; margin: 0; height: 40px; }
body[data-ui-tier="s"] .prp-page .prp-gens .prp-foot-link::after { content: ""; position: absolute; left: 0; right: 0; top: 9.6px; height: 1px; background: var(--prp-rule); }
body[data-ui-tier="s"] .prp-page .prp-spend .prp-bars { padding: 0; margin-top: 10.6px; gap: 0; }
body[data-ui-tier="s"] .prp-page .prp-spend .prp-bar { height: 18.9px; grid-template-columns: minmax(0, 64.3fr) minmax(0, 67.4fr) minmax(0, 23.7fr) minmax(0, 26fr); column-gap: 0; font-size: 7.4px; }
body[data-ui-tier="s"] .prp-page .prp-spend .prp-bar-label { color: color-mix(in srgb, var(--ink) 88%, var(--ink-muted)); letter-spacing: -0.035em; overflow: visible; }
body[data-ui-tier="s"] .prp-page .prp-spend .prp-bar-track { height: 6.5px; background: var(--prp-track); }
body[data-ui-tier="s"] .prp-page .prp-spend .prp-bar-track i { min-width: 4.5px; }   /* a tiny spend still reads, as in the mockup */
body[data-ui-tier="s"] .prp-page .prp-spend .prp-bar-val { font-family: var(--font-display); font-size: 10.6px; letter-spacing: -0.02em; font-weight: 400; }
body[data-ui-tier="s"] .prp-page .prp-spend .prp-bar-pct { font-size: 6.9px; letter-spacing: -0.03em; color: color-mix(in srgb, var(--ink) 74%, var(--ink-muted)); }
body[data-ui-tier="s"] .prp-page .prp-spend .prp-card-head { margin: -2px 0 0 -3px; }
body[data-ui-tier="s"] .prp-page .prp-spend .prp-total { position: absolute; left: 9px; right: 8px; top: 104.6px; height: 24px; font-size: 7.3px; letter-spacing: -0.025em; }
body[data-ui-tier="s"] .prp-page .prp-spend .prp-total b { font-size: 10.7px; letter-spacing: 0.025em; }
body[data-ui-tier="s"] .prp-page .prp-spend .prp-note { display: none; }

/* THE KPI TILES: Real assets (127 x 156) | Images, Videos (69) over Prompts, Voiceover, Prompts copied (82) */
body[data-ui-tier="s"] .prp-page .prp-kpis { grid-template-columns: minmax(0, 125.9fr) minmax(0, 259.5fr); gap: 4.6px; }
body[data-ui-tier="s"] .prp-page .prp-kpis-side { grid-template-rows: 69.1px 82px; gap: 4.6px; }
body[data-ui-tier="s"] .prp-page .prp-kpis-row { gap: 4.6px; }
body[data-ui-tier="s"] .prp-page .prp-kpi { height: 100%; box-sizing: border-box; padding: 3.7px 6px 0 7.9px; gap: 0; }
body[data-ui-tier="s"] .prp-page .prp-kpi--assets { height: 155.6px; }
body[data-ui-tier="s"] .prp-page .prp-kpi-lbl { font-size: 6.2px; letter-spacing: 0.09em; line-height: 9.2px; color: var(--prp-label); white-space: normal; max-width: 60px; min-height: 18.4px; }
body[data-ui-tier="s"] .prp-page .prp-kpi--assets .prp-kpi-lbl { min-height: 0; max-width: none; }
body[data-ui-tier="s"] .prp-page .prp-kpi-ico { margin-top: 3.3px; color: var(--ink); }
body[data-ui-tier="s"] .prp-page .prp-kpi-ico svg { width: 14px; height: 14px; }
body[data-ui-tier="s"] .prp-page .prp-kpi--pr .prp-kpi-ico svg { width: 15.7px; height: 15.7px; }
body[data-ui-tier="s"] .prp-page .prp-kpi--vo .prp-kpi-ico svg { width: 14.8px; height: 14.8px; }
body[data-ui-tier="s"] .prp-page .prp-kpi:not(.prp-kpi--assets) .prp-kpi-lbl { letter-spacing: 0.045em; line-height: 9.5px; min-height: 19px; }
body[data-ui-tier="s"] .prp-page .prp-kpi--img { padding-left: 10.1px; }
body[data-ui-tier="s"] .prp-page .prp-kpi--img .prp-kpi-ico,
body[data-ui-tier="s"] .prp-page .prp-kpi--vid .prp-kpi-ico { margin-top: 5.6px; }
body[data-ui-tier="s"] .prp-page .prp-kpi .prp-big { margin-top: 5.8px; font-size: 20.4px; }
body[data-ui-tier="s"] .prp-page .prp-kpi--assets .prp-kpi-ico { margin-top: 4.8px; }
body[data-ui-tier="s"] .prp-page .prp-kpi--assets .prp-big { margin-top: 2px; }
body[data-ui-tier="s"] .prp-page .prp-kpi-cats { gap: 0; margin-top: 0; }
body[data-ui-tier="s"] .prp-page .prp-kpi-cats div { height: 10.1px; align-items: center; font-size: 7.1px; color: color-mix(in srgb, var(--ink) 74%, var(--ink-muted)); padding-right: 3.5px; }
body[data-ui-tier="s"] .prp-page .prp-kpi-cats b { font-weight: var(--fw-semi); color: var(--ink); }
body[data-ui-tier="s"] .prp-page .prp-kpi--assets .prp-foot-link { position: absolute; left: 7.9px; top: 124px; margin: 0; }
body[data-ui-tier="s"] .prp-page .prp-kpi--pr .prp-kpi-ico,
body[data-ui-tier="s"] .prp-page .prp-kpi--vo .prp-kpi-ico,
body[data-ui-tier="s"] .prp-page .prp-kpi--cp .prp-kpi-ico { margin-top: 3.7px; }
body[data-ui-tier="s"] .prp-page .prp-kpi--pr .prp-big,
body[data-ui-tier="s"] .prp-page .prp-kpi--vo .prp-big,
body[data-ui-tier="s"] .prp-page .prp-kpi--cp .prp-big { margin-top: 4px; }
/* (after the shared tile rules) the two short tiles' figures sit higher; the three tall tiles' labels are tighter */
body[data-ui-tier="s"] .prp-page .prp-kpi--img .prp-big,
body[data-ui-tier="s"] .prp-page .prp-kpi--vid .prp-big { margin-top: 1.2px; }
body[data-ui-tier="s"] .prp-page .prp-kpi.prp-kpi--pr .prp-kpi-lbl,
body[data-ui-tier="s"] .prp-page .prp-kpi.prp-kpi--vo .prp-kpi-lbl,
body[data-ui-tier="s"] .prp-page .prp-kpi.prp-kpi--cp .prp-kpi-lbl { line-height: 8.35px; min-height: 16.7px; }

/* SUCCESS | SUBSCRIPTIONS (86) · PIPELINE | WHERE EVERY SHOT LIVES (108.5) */
body[data-ui-tier="s"] .prp-page .prp-pair--succ { grid-template-columns: minmax(0, 185.3fr) minmax(0, 202.8fr); }
body[data-ui-tier="s"] .prp-page .prp-success,
body[data-ui-tier="s"] .prp-page .prp-subs { height: 85.9px; box-sizing: border-box; padding: 6.8px 9px 0 10.6px; }
body[data-ui-tier="s"] .prp-page .prp-success .prp-label { width: 70px; line-height: 8.9px; }
body[data-ui-tier="s"] .prp-page .prp-success-row { margin: 0.4px 0 0 -4px; gap: 10.4px; align-items: center; }
body[data-ui-tier="s"] .prp-page .prp-success .prp-ring-big { font-size: 14.2px; }
body[data-ui-tier="s"] .prp-page .prp-success .prp-legend { gap: 0; margin-top: -3px; }
body[data-ui-tier="s"] .prp-page .prp-success .prp-leg { height: 13.5px; grid-template-columns: 6.5px minmax(0, 1fr) auto 24px; column-gap: 4px; font-size: 7px; letter-spacing: -0.02em; }
body[data-ui-tier="s"] .prp-page .prp-success .prp-leg-label { white-space: nowrap; }
body[data-ui-tier="s"] .prp-page .prp-success .prp-dot { width: 6.5px; height: 6.5px; flex-basis: 6.5px; }
body[data-ui-tier="s"] .prp-page .prp-success .prp-legend { width: 100.1px; flex: 0 0 100.1px; }
body[data-ui-tier="s"] .prp-page .prp-success .prp-leg-pct { font-size: 7.1px; min-width: 0; }
body[data-ui-tier="s"] .prp-page .prp-subs .prp-label { font-size: 6.75px; letter-spacing: 0.03em; }
body[data-ui-tier="s"] .prp-page .prp-subs .prp-empty { margin-top: 8.3px; font-style: italic; font-size: 7.9px; letter-spacing: -0.019em; }
body[data-ui-tier="s"] .prp-page .prp-pipe,
body[data-ui-tier="s"] .prp-page .prp-lives { height: 108.5px; box-sizing: border-box; padding: 8.2px 9.7px 0 11.7px; }
body[data-ui-tier="s"] .prp-page .prp-pipe { grid-column: auto; padding-right: 5px; }
body[data-ui-tier="s"] .prp-page .prp-pipe + .prp-lives,
body[data-ui-tier="s"] .prp-page .prp-pair:has(.prp-pipe) { grid-template-columns: minmax(0, 198.9fr) minmax(0, 187.9fr); }
body[data-ui-tier="s"] .prp-page .prp-pipe .prp-label { font-size: 6.2px; }
body[data-ui-tier="s"] .prp-page .prp-pipe .prp-bars { margin-top: 9.2px; gap: 0; }
/* the mockup's row: label | an 84px track | the count right-aligned | 6px | the share */
body[data-ui-tier="s"] .prp-page .prp-pipe .prp-bar { height: 15.4px; grid-template-columns: 53px 90px minmax(0, 1fr) 26px; grid-template-areas: none; column-gap: 0; row-gap: 0; font-size: 7.4px; }
body[data-ui-tier="s"] .prp-page .prp-pipe .prp-bar-label { grid-area: auto; font-size: 7.2px; text-transform: uppercase; letter-spacing: 0.02em; color: color-mix(in srgb, var(--ink) 88%, var(--ink-muted)); }
body[data-ui-tier="s"] .prp-page .prp-pipe .prp-bar-track { grid-area: auto; height: 7px; background: var(--prp-track); }
body[data-ui-tier="s"] .prp-page .prp-pipe .prp-bar-val { grid-area: auto; font-size: 7.4px; font-weight: var(--fw-semi); text-align: right; padding-right: 0; }
body[data-ui-tier="s"] .prp-page .prp-pipe .prp-bar-pct { grid-area: auto; min-width: 0; padding-left: 5px; overflow: visible; text-align: left; font-size: 7.4px; color: color-mix(in srgb, var(--ink) 80%, var(--ink-muted)); }
body[data-ui-tier="s"] .prp-page .prp-pipe .prp-foot-note,
body[data-ui-tier="s"] .prp-page .prp-lives .prp-foot-note { position: absolute; left: 11.7px; right: 9.7px; margin: 0; padding-top: 6px; border-top: 1px solid var(--prp-rule); text-align: right; }
body[data-ui-tier="s"] .prp-page .prp-pipe .prp-foot-note { top: 76.3px; right: 6px; }
body[data-ui-tier="s"] .prp-page .prp-pipe .prp-foot-note,
body[data-ui-tier="s"] .prp-page .prp-lives .prp-foot-note { font-size: 7.5px; }
body[data-ui-tier="s"] .prp-page .prp-foot-note .prp-fn-in { display: inline-block; transform: scaleX(0.89); transform-origin: right center; }
body[data-ui-tier="s"] .prp-page .prp-lives .prp-foot-note { top: 91.6px; padding-top: 3.4px; right: 7.7px; }
body[data-ui-tier="s"] .prp-page .prp-lives-ring { padding: 0; margin: 1.1px 0 0; }
body[data-ui-tier="s"] .prp-page .prp-lives .prp-card-head { margin: -2px 0 0 -2px; }
body[data-ui-tier="s"] .prp-page .prp-lives .prp-ring-mid { gap: 5.5px; }
body[data-ui-tier="s"] .prp-page .prp-lives .prp-ring-top { font-size: 5.6px; letter-spacing: 0.03em; white-space: nowrap; }
body[data-ui-tier="s"] .prp-page .prp-lives .prp-ring-big { font-size: 13.6px; letter-spacing: 0.02em; }
body[data-ui-tier="s"] .prp-page .prp-lives .prp-legend { margin-top: 0.2px; }
body[data-ui-tier="s"] .prp-page .prp-lives .prp-leg { height: 12px; grid-template-columns: 6.5px minmax(0, 1fr) auto 22px; column-gap: 5px; font-size: 7.6px; }
body[data-ui-tier="s"] .prp-page .prp-lives .prp-dot { width: 6.5px; height: 6.5px; flex-basis: 6.5px; }
body[data-ui-tier="s"] .prp-page .prp-lives .prp-leg-val { font-weight: 400; }
body[data-ui-tier="s"] .prp-page .prp-lives .prp-leg-pct { font-size: 7.4px; min-width: 0; }

/* TRENDS | TOP CONTRIBUTORS (91) · OPEN NOTES | UNRESOLVED COMMENTS (57.5) */
body[data-ui-tier="s"] .prp-page .prp-pair:has(.prp-trends) { grid-template-columns: minmax(0, 218.9fr) minmax(0, 169.2fr); }
body[data-ui-tier="s"] .prp-page .prp-trends,
body[data-ui-tier="s"] .prp-page .prp-contrib { height: 91.1px; box-sizing: border-box; padding: 4.2px 8.2px 0 10.3px; }
body[data-ui-tier="s"] .prp-page .prp-trends .prp-label { font-size: 6px; }
body[data-ui-tier="s"] .prp-page .prp-trends .prp-card-titles { gap: 2.2px; }
body[data-ui-tier="s"] .prp-page .prp-trends .prp-card-sub { font-size: 6.2px; letter-spacing: 0; }
body[data-ui-tier="s"] .prp-page .prp-trends .prp-card-head { position: relative; z-index: 1; }
body[data-ui-tier="s"] .prp-page .prp-trends .prp-lines { position: absolute; left: 6.5px; right: 2.2px; top: 6.5px; margin: 0; gap: 5.8px; }
body[data-ui-tier="s"] .prp-page .prp-trends .prp-lines-plot { height: 53.6px !important; }
body[data-ui-tier="s"] .prp-page .prp-trends .prp-legend-inline { margin-top: -1.8px; font-size: 6.4px; gap: 0 6px; transform: translateX(-2.9px); }
body[data-ui-tier="s"] .prp-page .prp-trends .prp-axis-tick { font-size: 5px; letter-spacing: -0.04em; }
body[data-ui-tier="s"] .prp-page .prp-trends .prp-lines-plot,
body[data-ui-tier="s"] .prp-page .prp-trends .prp-axis { margin-left: 5.3px; margin-right: 5.3px; }
body[data-ui-tier="s"] .prp-page .prp-trends .prp-axis-tick.is-first,
body[data-ui-tier="s"] .prp-page .prp-trends .prp-axis-tick.is-last { transform: translateX(-50%); }
body[data-ui-tier="s"] .prp-page .prp-pt {
  position: absolute; width: 2.8px; height: 2.8px; margin: -1.4px 0 0 -1.4px; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 0.6px color-mix(in srgb, var(--card-bg-solid) 80%, transparent);
}
body[data-ui-tier="s"] .prp-page .prp-legend-inline { gap: 0 10px; font-size: 6.8px; margin-top: 2px; color: color-mix(in srgb, var(--ink) 80%, var(--ink-muted)); }
body[data-ui-tier="s"] .prp-page .prp-legend-inline i { width: 9px; height: 2px; }
body[data-ui-tier="s"] .prp-page .prp-contrib { padding: 5.2px 9.8px 0 7.7px; }
body[data-ui-tier="s"] .prp-page .prp-contrib .prp-card-titles { gap: 1px; }
body[data-ui-tier="s"] .prp-page .prp-contrib .prp-label,
body[data-ui-tier="s"] .prp-page .prp-contrib .prp-card-sub { font-size: 6.3px; font-weight: var(--fw-semi); letter-spacing: 0; color: var(--prp-label); }
body[data-ui-tier="s"] .prp-page .prp-contrib .prp-card-head { margin: -2.5px 0 0 -1.1px; }
body[data-ui-tier="s"] .prp-page .prp-contribs { gap: 0; margin-top: 4.4px; }
body[data-ui-tier="s"] .prp-page .prp-contrib-row { height: 16.4px; grid-template-columns: 7.5px 13.5px minmax(0, 1fr) 45px 15px; gap: 0 3.2px; }
body[data-ui-tier="s"] .prp-page .prp-contrib-rank { font-size: 7.3px; font-weight: 400; color: var(--ink); }
body[data-ui-tier="s"] .prp-page .prp-av { width: 13.5px; height: 13.5px; font-size: 5.5px; }
body[data-ui-tier="s"] .prp-page .prp-contrib-name { font-size: 7.3px; letter-spacing: -0.02em; color: color-mix(in srgb, var(--ink) 88%, var(--ink-muted)); }
body[data-ui-tier="s"] .prp-page .prp-contrib-bar { height: 5px; background: var(--prp-track); }
body[data-ui-tier="s"] .prp-page .prp-contrib-val { font-family: var(--font-body); font-size: 7.6px; font-weight: var(--fw-bold); text-align: right; }
body[data-ui-tier="s"] .prp-page .prp-contrib .prp-foot-link { position: absolute; left: 7px; top: 61.4px; margin: 0; font-size: 7.6px; transform: scaleX(0.9); }
body[data-ui-tier="s"] .prp-page .prp-pair:has(.prp-count) { grid-template-columns: minmax(0, 184fr) minmax(0, 204.1fr); }
body[data-ui-tier="s"] .prp-page .prp-count { height: 57.5px; box-sizing: border-box; padding: 4.8px 9px 0 13.6px; }
body[data-ui-tier="s"] .prp-page .prp-count .prp-label { font-size: 5.7px; }
body[data-ui-tier="s"] .prp-page .prp-pair > .prp-count:first-child .prp-label { font-size: 6.2px; letter-spacing: 0.061em; }
body[data-ui-tier="s"] .prp-page .prp-count-row { gap: 0; align-items: flex-start; margin-top: 1.6px; }
body[data-ui-tier="s"] .prp-page .prp-count-ico { width: 19.3px; flex: 0 0 19.3px; padding-top: 1.3px; color: var(--ink); }
body[data-ui-tier="s"] .prp-page .prp-count-ico svg { width: 10.5px; height: 10.5px; }
body[data-ui-tier="s"] .prp-page .prp-count-main { display: flex; flex-direction: column; gap: 0; min-width: 0; }
body[data-ui-tier="s"] .prp-page .prp-count .prp-big { font-size: 16px; transform: scaleX(0.84); transform-origin: left center; }
body[data-ui-tier="s"] .prp-page .prp-pair > .prp-count:first-child .prp-count-ico svg { width: 15px; height: 15px; }
body[data-ui-tier="s"] .prp-page .prp-pair > .prp-count:first-child .prp-count-ico { margin-left: -2.9px; width: 22.2px; flex-basis: 22.2px; }
body[data-ui-tier="s"] .prp-page .prp-pair > .prp-count:last-child .prp-big { margin-top: 2.6px; }
body[data-ui-tier="s"] .prp-page .prp-pair > .prp-count:first-child .prp-big { font-size: 17px; }
body[data-ui-tier="s"] .prp-page .prp-pair > .prp-count:last-child .prp-count-sub { margin-top: -2.6px; }
body[data-ui-tier="s"] .prp-page .prp-pair > .prp-count:last-child .prp-count-ico svg { width: 11.4px; height: 11.4px; }
body[data-ui-tier="s"] .prp-page .prp-count-sub { font-size: 6.5px; letter-spacing: -0.03em; color: var(--prp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the link's 40px tap area grows UP over the card (not 12px below it: that overhang was the page's scroll end) */
body[data-ui-tier="s"] .prp-page .prp-count .prp-foot-link { position: absolute; left: 9.1px; right: 8.6px; top: 17.5px; margin: 0; height: 40px; align-items: center; font-size: 7.2px; padding-top: 24.3px; box-sizing: border-box; }
body[data-ui-tier="s"] .prp-page .prp-pair > .prp-count:first-child .prp-foot-link { padding-left: 1.1px; }
body[data-ui-tier="s"] .prp-page .prp-pair > .prp-count:last-child .prp-foot-link { padding-left: 3.2px; }
body[data-ui-tier="s"] .prp-page .prp-count .prp-foot-link > *,
body[data-ui-tier="s"] .prp-page .prp-contrib .prp-foot-link > * { flex: 0 0 auto; }
body[data-ui-tier="s"] .prp-page .prp-count .prp-foot-link,
body[data-ui-tier="s"] .prp-page .prp-contrib .prp-foot-link { transform-origin: left center; }
body[data-ui-tier="s"] .prp-page .prp-count .prp-foot-link { transform: scaleX(0.93); width: calc((100% - 17.7px) / 0.93); right: auto; }
body[data-ui-tier="s"] .prp-page .prp-count .prp-foot-link::after { content: ""; position: absolute; left: 0; right: 0; top: 25.1px; height: 1px; background: var(--prp-rule); }

/* the scroller is a column: its cards keep their own heights (never shrink to fit) */
body[data-ui-tier="s"] .prp-scroll > * { flex-shrink: 0; }
/* the mockup's narrow cards keep ONE line per legend row / bar row (the kit's narrow-card stacking is off here) */
body[data-ui-tier="s"] .prp-page .prp-leg,
body[data-ui-tier="s"] .prp-page .prp-bar { grid-template-areas: none; row-gap: 0; }
body[data-ui-tier="s"] .prp-page .prp-leg > *,
body[data-ui-tier="s"] .prp-page .prp-bar > * { grid-area: auto; }
body[data-ui-tier="s"] .prp-page .prp-leg-val { font-family: var(--font-body); font-size: inherit; font-weight: var(--fw-bold); text-align: right; line-height: 1.2; }
body[data-ui-tier="s"] .prp-page .prp-leg-pct { padding-left: 0; text-align: right; }
body[data-ui-tier="s"] .prp-page .prp-bar-label { text-transform: none; letter-spacing: 0; font-size: inherit; }
body[data-ui-tier="s"] .prp-page .prp-success-row { flex-direction: row; align-items: center; }
body[data-ui-tier="s"] .prp-page .prp-success-row > .prp-legend { width: auto; }
body[data-ui-tier="s"] .prp-page .prp-shots .prp-label { font-size: 6.65px; letter-spacing: 0.021em; }

/* the other money layouts (Summary, Compact, Editorial, Finance: no mockup of their own) at the same density as the
   Overview's cards, so a layout switch never changes the type scale */
body[data-ui-tier="s"] .prp-page .prp-rowscard,
body[data-ui-tier="s"] .prp-page .prp-assets,
body[data-ui-tier="s"] .prp-page .prp-weekly,
body[data-ui-tier="s"] .prp-page .prp-list,
body[data-ui-tier="s"] .prp-page .prp-fin,
body[data-ui-tier="s"] .prp-page .prp-breakdown,
body[data-ui-tier="s"] .prp-page .prp-pipesucc { padding: 8.2px 9.5px 9px 11.6px; gap: 4px; }
body[data-ui-tier="s"] .prp-page .prp-kv-row { padding: 3.6px 0; font-size: 8.4px; }
body[data-ui-tier="s"] .prp-page .prp-kv-row b { font-size: 8.4px; }
body[data-ui-tier="s"] .prp-page .prp-tiles { gap: var(--prp-gap); }
body[data-ui-tier="s"] .prp-page .prp-tile { padding: 8px 9px 9px 11px; gap: 3px; }
body[data-ui-tier="s"] .prp-page .prp-tile-head svg { width: 11px; height: 11px; }
body[data-ui-tier="s"] .prp-page .prp-tile .prp-mini-sub { font-size: 6.9px; }
body[data-ui-tier="s"] .prp-page .prp-spend .prp-donut-row .prp-leg,
body[data-ui-tier="s"] .prp-page .prp-breakdown .prp-leg,
body[data-ui-tier="s"] .prp-page .prp-fin .prp-leg { font-size: 7.4px; grid-template-columns: 6.5px minmax(0, 1fr) auto 26px; column-gap: 4px; }
body[data-ui-tier="s"] .prp-page .prp-spend .prp-donut-row { margin-top: 8px; }
body[data-ui-tier="s"] .prp-page .prp-item { padding: 6px 0; gap: 7px; }
body[data-ui-tier="s"] .prp-page .prp-item-title { font-size: 7.6px; }
body[data-ui-tier="s"] .prp-page .prp-item-text { font-size: 8.4px; }
body[data-ui-tier="s"] .prp-page .prp-item-meta { font-size: 7px; }
body[data-ui-tier="s"] .prp-page .prp-item-dot { width: 6px; height: 6px; flex-basis: 6px; margin-top: 3px; }
body[data-ui-tier="s"] .prp-page .prp-col-n { font-size: 6.6px; min-height: 8px; }
body[data-ui-tier="s"] .prp-page .prp-cols-plot { height: 70px; }
body[data-ui-tier="s"] .prp-page .prp-chipkey span { font-size: 7px; }
body[data-ui-tier="s"] .prp-page .prp-asof { font-size: 7.4px; }
body[data-ui-tier="s"] .prp-page .prp-export .pk-btn {   /* 28px to see, 40px to tap (transparent top + bottom borders) */
  min-height: 0; height: 40px; margin: -6px 0; border: 6px solid transparent; border-left-width: 0; border-right-width: 0; background-clip: padding-box;
  border-radius: var(--pk-radius-control) / calc(var(--pk-radius-control) + 6px); font-size: 9px;
}
body[data-ui-tier="s"] .prp-page .prp-costs-add svg { flex: 0 0 auto; width: 10.6px; height: 10.6px; stroke-width: 2; }
body[data-ui-tier="s"] .prp-page .prp-bar > * { min-width: 0; }
body[data-ui-tier="s"] .prp-page .prp-bar-val,
body[data-ui-tier="s"] .prp-page .prp-bar-pct { overflow: hidden; text-overflow: clip; white-space: nowrap; }

/* the closed side drawer's shadow (responsive.css: 26px 0 70px) darkened this page's left ~80px even while the drawer
   is shut (measured: the active pill read 17% darker at x 20 than at x 56); off while closed, as the drawer opens it returns.
   (A shell-wide fix belongs in responsive.css - flagged to the coordinator.) */
body[data-ui-tier="s"]:has(.prp-page):not(.sb-mobile-open) .sidebar { box-shadow: none; }

/* the other layouts (Summary, Compact, Editorial, Finance) put a link under the success, lives and pipeline cards: those
   cards grow for it (the Overview's fixed mockup heights have no link) and the link keeps its 40px to tap */
body[data-ui-tier="s"] .prp-page .prp-foot-link { flex-shrink: 0; }
body[data-ui-tier="s"] .prp-page .prp-success:has(> .prp-foot-link),
body[data-ui-tier="s"] .prp-page .prp-lives:has(> .prp-foot-link),
body[data-ui-tier="s"] .prp-page .prp-pipe:has(> .prp-foot-link) { height: auto; padding-bottom: 9px; }
body[data-ui-tier="s"] .prp-page .prp-lives:has(> .prp-foot-link) .prp-foot-note,
body[data-ui-tier="s"] .prp-page .prp-pipe:has(> .prp-foot-link) .prp-foot-note { position: static; margin-top: 6px; }