/* frontend_design/assets/fd_report.css
   Weekly / monthly report (REPORTS.md Phase 2). Extends the fd design system:
   IBM Plex Sans body + Plex Mono readouts, --fd-* tokens (both themes flip
   automatically), amber = POP only, teal = interactive, green/red = meaning.
   No new global utility classes; everything is namespaced rp-. */

/* The report reads as a document, not a live console: on the standalone page hide
   the app-bar live listener/trend metrics + clock (this sheet loads only on the
   report page, so it touches nothing else). The modal/embed case already uses the
   slim embed header with no metrics by design. Station identity + Back stay. */
html.fd .fd-appbar__metrics,
html.fd .fd-status{ display:none; }

.rp-wrap{
  max-width:1200px;
  margin:0 auto;
  padding:22px 26px 72px;
  color:var(--fd-ink);
  font-family:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
}

/* ---- masthead ---- */
.rp-masthead{ margin-bottom:26px; }
.rp-mast-row{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
}
.rp-eyebrow{
  font-family:"IBM Plex Mono",monospace; font-size:11px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--fd-accent);
  margin-bottom:8px;
}
.rp-station{
  font-size:32px; font-weight:600; line-height:1.05; letter-spacing:-.01em;
  margin:0; color:var(--fd-ink);
}
.rp-period{
  font-size:15px; color:var(--fd-ink-2); margin-top:4px;
  font-variant-numeric:tabular-nums;
}
.rp-mast-ctrl{ display:flex; align-items:center; gap:12px; }
.rp-gran{ display:inline-flex; border:1px solid var(--fd-hair-strong); border-radius:var(--fd-radius-sm); overflow:hidden; }
.rp-gran__opt{
  font-family:"IBM Plex Mono",monospace; font-size:11.5px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; text-decoration:none;
  padding:7px 13px; color:var(--fd-ink-2); background:transparent; transition:background 120ms,color 120ms;
}
.rp-gran__opt + .rp-gran__opt{ border-left:1px solid var(--fd-hair); }
.rp-gran__opt:hover{ color:var(--fd-ink); background:var(--fd-panel-2); }
.rp-gran__opt.is-on{ color:#fff; background:var(--fd-accent); }
:root[data-theme="light"] .rp-gran__opt.is-on,
html.fd.light .rp-gran__opt.is-on{ color:#fff; }
/* Monthly temporarily disabled: not clickable, label dimmed, accent "Soon" badge. */
.rp-gran__opt--soon{ display:inline-flex; align-items:center; gap:7px; cursor:default; color:var(--fd-ink-3); }
.rp-gran__opt--soon:hover{ color:var(--fd-ink-3); background:transparent; }
.rp-soon{
  font-size:8.5px; font-weight:700; letter-spacing:.12em; line-height:1;
  padding:3px 5px; border:1px solid var(--fd-accent); border-radius:3px;
  background:var(--fd-accent-weak); color:var(--fd-accent);
}
.rp-nav{ display:inline-flex; gap:6px; }
.rp-nav__btn{
  width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--fd-hair-strong); border-radius:var(--fd-radius-sm);
  color:var(--fd-ink-2); background:var(--fd-panel); transition:background 120ms,color 120ms,border-color 120ms;
}
.rp-nav__btn:hover{ color:var(--fd-ink); border-color:var(--fd-accent); }
.rp-nav__btn svg{ width:17px; height:17px; }
.rp-nav__btn.is-off{ opacity:.32; pointer-events:none; }
.rp-pdf-btn{ display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 13px;
  border:1px solid var(--fd-hair-strong); border-radius:var(--fd-radius-sm); color:var(--fd-ink-2);
  background:var(--fd-panel); text-decoration:none; font-family:"IBM Plex Mono",monospace;
  font-size:11.5px; font-weight:600; letter-spacing:.06em; transition:background 120ms,color 120ms,border-color 120ms; }
.rp-pdf-btn:hover{ color:var(--fd-ink); border-color:var(--fd-accent); }
.rp-pdf-btn svg{ width:16px; height:16px; }
.rp-mast-meta{
  margin-top:16px; padding-top:12px; border-top:1px solid var(--fd-hair);
  font-size:11.5px; letter-spacing:.04em; color:var(--fd-ink-3);
}
.rp-dot{ margin:0 8px; opacity:.5; }

/* ---- section heading (uppercase mono + short rule) ---- */
.rp-section{ margin:34px 0 0; }
.rp-h{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  font-family:"IBM Plex Mono",monospace; font-size:12.5px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--fd-ink);
  margin:0 0 14px;
}
.rp-h__rule{ width:26px; height:2px; background:var(--fd-accent); border-radius:2px; flex:0 0 auto; }
.rp-h__note{ font-size:10.5px; letter-spacing:.05em; color:var(--fd-ink-3); text-transform:none; font-weight:500; }

/* ---- KPI readout strip ---- */
.rp-kpis{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:1px;
  background:var(--fd-hair); border:1px solid var(--fd-hair);
  border-radius:var(--fd-radius); overflow:hidden; margin-top:20px;
}
.rp-kpi{ background:var(--fd-panel); padding:14px 15px 13px; display:flex; flex-direction:column; gap:6px; }
.rp-kpi__label{
  font-family:"IBM Plex Mono",monospace; font-size:10px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--fd-ink-3);
}
.rp-kpi__val{ font-size:26px; font-weight:600; line-height:1; color:var(--fd-ink); font-variant-numeric:tabular-nums; }
.rp-kpi--pop{ position:relative; }
.rp-kpi--pop::after{ content:""; position:absolute; left:0; top:0; width:3px; height:100%; background:var(--fd-pop); }
.rp-kpi__delta{ font-size:11px; font-family:"IBM Plex Mono",monospace; letter-spacing:.03em; }
.rp-kpi__wow{ color:var(--fd-ink-3); font-family:"IBM Plex Sans",sans-serif; letter-spacing:0; margin-left:2px; }
.rp-kpi__na,.rp-kpi__flat{ color:var(--fd-ink-3); }
.rp-tone--pos{ color:var(--fd-pos); }
.rp-tone--neg{ color:var(--fd-neg); }
.rp-tone--flat{ color:var(--fd-ink-3); }

/* ---- what changed ---- */
.rp-changed{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.rp-changed__col{ background:var(--fd-panel); border:1px solid var(--fd-hair); border-radius:var(--fd-radius); padding:14px 16px; }
.rp-changed__cap,.rp-side-cap{
  font-family:"IBM Plex Mono",monospace; font-size:11px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; margin-bottom:10px;
}
.rp-cap--up{ color:var(--fd-pos); }
.rp-cap--down{ color:var(--fd-neg); }
.rp-line{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:7px 0; border-top:1px solid var(--fd-hair); text-decoration:none; color:var(--fd-ink);
  font-size:13.5px;
}
.rp-line:first-of-type{ border-top:0; }
.rp-line:hover .rp-art,.rp-line:hover .rp-ti{ color:var(--fd-accent); }
.rp-art{ font-weight:600; }
.rp-ti{ color:var(--fd-ink-2); }
.rp-sep{ color:var(--fd-ink-3); }
.rp-line__to{ margin-left:auto; font-size:11.5px; color:var(--fd-ink-3); }
.rp-muted{ color:var(--fd-ink-3); font-size:13px; margin:6px 0; }

/* move chip */
.rp-move{ font-family:"IBM Plex Mono",monospace; font-size:11.5px; font-weight:600; letter-spacing:.02em; white-space:nowrap; }
.rp-move--pos{ color:var(--fd-pos); }
.rp-move--neg{ color:var(--fd-neg); }
.rp-move--flat,.rp-move--na{ color:var(--fd-ink-3); }

/* ---- recommendations ---- */
/* minmax(0,1fr), not 1fr: a bare 1fr track has an `auto` (content) minimum, so a
   long recommendation line refuses to shrink and the 3-card grid overflows its
   container on the right (visible in the narrower report modal). minmax(0,...)
   lets the tracks shrink and the text ellipsize, keeping the grid inside the box. */
.rp-recs{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.rp-rec{
  display:flex; align-items:center; gap:12px; text-decoration:none;
  background:var(--fd-panel); border:1px solid var(--fd-hair); border-left-width:3px;
  border-radius:var(--fd-radius); padding:13px 15px; color:var(--fd-ink); transition:border-color 120ms,background 120ms;
}
.rp-rec:hover{ background:var(--fd-panel-2); }
.rp-rec--increase{ border-left-color:var(--fd-pos); }
.rp-rec--rest{ border-left-color:var(--fd-neg); }
.rp-rec--watch{ border-left-color:var(--fd-warn); }
.rp-rec__tag{
  font-family:"IBM Plex Mono",monospace; font-size:9.5px; font-weight:700; letter-spacing:.1em;
  padding:3px 7px; border-radius:4px; background:var(--fd-panel-3); color:var(--fd-ink-2); flex:0 0 auto;
}
.rp-rec--increase .rp-rec__tag{ color:var(--fd-pos); }
.rp-rec--rest .rp-rec__tag{ color:var(--fd-neg); }
.rp-rec--watch .rp-rec__tag{ color:var(--fd-warn); }
.rp-rec__body{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.rp-rec__trk{ font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rp-rec__txt{ font-size:11.5px; color:var(--fd-ink-3); }
.rp-rec__pop{ margin-left:auto; font-size:12px; font-weight:600; color:var(--fd-ink-2); flex:0 0 auto; }

/* ---- scorecard table ---- */
.rp-tablewrap{ overflow-x:auto; border:1px solid var(--fd-hair); border-radius:var(--fd-radius); background:var(--fd-panel); }
.rp-table{ width:100%; border-collapse:collapse; font-size:13px; }
.rp-table thead th{
  font-family:"IBM Plex Mono",monospace; font-size:10px; font-weight:600;
  letter-spacing:.07em; text-transform:uppercase; color:var(--fd-ink-3);
  text-align:left; padding:11px 12px; border-bottom:1px solid var(--fd-hair-strong); white-space:nowrap;
}
.rp-table tbody td{ padding:9px 12px; border-bottom:1px solid var(--fd-hair); vertical-align:middle; }
.rp-table tbody tr:last-child td{ border-bottom:0; }
.rp-table tbody tr:hover{ background:var(--fd-panel-2); }
.rp-c-num{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.rp-c-rank{ color:var(--fd-ink-3); width:34px; }
.rp-c-trk a{ text-decoration:none; color:var(--fd-ink); }
.rp-c-trk a:hover .rp-art,.rp-c-trk a:hover .rp-ti{ color:var(--fd-accent); }
.rp-c-pop{ }
.rp-popval{ font-weight:600; }
.rp-popval::before{
  content:""; display:inline-block; width:7px; height:7px; border-radius:50%;
  margin-right:6px; vertical-align:middle;
}
.rp-band--good::before{ background:var(--fd-good); }
.rp-band--warn::before{ background:var(--fd-warn); }
.rp-band--bad::before{ background:var(--fd-bad); }
.rp-band--na::before{ background:var(--fd-ink-3); }
.rp-spinmove{ color:var(--fd-ink-3); font-size:11px; margin-left:4px; }
.rp-hold--good{ color:var(--fd-pos); }
.rp-hold--bad{ color:var(--fd-neg); }
.rp-badge-add{
  font-family:"IBM Plex Mono",monospace; font-size:9px; font-weight:700; letter-spacing:.08em;
  color:var(--fd-accent); border:1px solid var(--fd-accent); border-radius:3px; padding:1px 4px; margin-left:7px;
}
/* profile tags: an observed read, not the station's rotation. Kept deliberately
   quiet (hairline, muted) so they read as a soft annotation, not an authoritative
   category. Power Gold gets only a faint amber hairline as its whisper of emphasis. */
.rp-tier{
  font-family:"IBM Plex Mono",monospace; font-size:9.5px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; padding:2px 7px; border-radius:4px; border:1px solid var(--fd-hair);
  color:var(--fd-ink-3); background:transparent;
}
.rp-tier--steady{ color:var(--fd-ink-2); border-color:rgba(var(--fd-pop-rgb),.32); }
.rp-tier--heavy,.rp-tier--new{ color:var(--fd-ink-2); }
.rp-tier--occasional,.rp-tier--building{ color:var(--fd-ink-3); }
/* legacy label fallbacks (harmless if an old tier string appears) */
.rp-tier--power-gold,.rp-tier--power,.rp-tier--currents,.rp-tier--gold,.rp-tier--active,.rp-tier--rotation{ color:var(--fd-ink-3); }
/* "Entered airplay" tenure figure: a plain, muted mono number (e.g. "7 mo"),
   not a badge - it states exactly the observed time in our tracking. */
.rp-tier-age{ font-size:11px; color:var(--fd-ink-3); font-variant-numeric:tabular-nums; white-space:nowrap; }

/* ---- quadrant ---- */
.rp-quad-layout{ display:grid; grid-template-columns:1.55fr 1fr; gap:18px; align-items:start; }
.rp-quad{ margin:0; background:var(--fd-panel); border:1px solid var(--fd-hair); border-radius:var(--fd-radius); padding:8px; }
.rp-quad svg{ width:100%; height:auto; display:block; }
.rp-zone--gold{ fill:rgba(var(--fd-pop-rgb),.05); }
.rp-zone--power{ fill:rgba(52,211,153,.05); }
.rp-zone--over{ fill:rgba(248,113,113,.05); }
.rp-zone--low{ fill:transparent; }
.rp-axis{ stroke:var(--fd-hair-strong); stroke-width:1; }
.rp-div{ stroke:var(--fd-hair-strong); stroke-width:1; stroke-dasharray:3 4; }
.rp-tick{ font-family:"IBM Plex Mono",monospace; font-size:10px; fill:var(--fd-ink-3); }
.rp-zlab{ font-family:"IBM Plex Mono",monospace; font-size:10px; font-weight:600; letter-spacing:.07em; }
.rp-zlab--gold{ fill:var(--fd-pop); }
.rp-zlab--power{ fill:var(--fd-pos); }
.rp-zlab--over{ fill:var(--fd-neg); }
.rp-zlab--low{ fill:var(--fd-ink-3); }
.rp-zsub{ font-family:"IBM Plex Sans",sans-serif; font-size:9.5px; fill:var(--fd-ink-3); }
.rp-axcap{ font-family:"IBM Plex Mono",monospace; font-size:9.5px; letter-spacing:.08em; fill:var(--fd-ink-3); }
.rp-dot{ opacity:.85; stroke:var(--fd-panel); stroke-width:1; }
.rp-dot--gold{ fill:var(--fd-pop); }
.rp-dot--power{ fill:var(--fd-pos); }
.rp-dot--over{ fill:var(--fd-neg); }
.rp-dot--low{ fill:var(--fd-ink-3); }

/* quadrant side lists */
.rp-quad-side{ display:flex; flex-direction:column; gap:16px; }
.rp-side-block{ background:var(--fd-panel); border:1px solid var(--fd-hair); border-radius:var(--fd-radius); padding:13px 15px; }
.rp-side-sub{ font-size:11.5px; color:var(--fd-ink-3); margin:-4px 0 8px; }
.rp-side-line{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 0; border-top:1px solid var(--fd-hair); text-decoration:none; color:var(--fd-ink); font-size:12.5px; }
.rp-side-line:first-of-type{ border-top:0; }
.rp-side-line:hover .rp-art,.rp-side-line:hover .rp-ti{ color:var(--fd-accent); }
.rp-side-name{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rp-side-num{ font-size:11px; color:var(--fd-ink-3); flex:0 0 auto; }

/* ---- comeback candidates ---- */
.rp-comeback{ background:var(--fd-panel); border:1px solid var(--fd-hair); border-radius:var(--fd-radius); padding:6px 15px; }
.rp-cb-row{ display:grid; grid-template-columns:26px 1fr auto auto; align-items:center; gap:14px; padding:9px 0; border-top:1px solid var(--fd-hair); text-decoration:none; color:var(--fd-ink); }
.rp-cb-row:first-child{ border-top:0; }
.rp-cb-row:hover .rp-art,.rp-cb-row:hover .rp-ti{ color:var(--fd-accent); }
.rp-cb-rank{ color:var(--fd-ink-3); font-size:12px; }
.rp-cb-name{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13.5px; }
.rp-cb-off{ font-size:11px; color:var(--fd-ink-3); white-space:nowrap; }

/* ---- genre performance ---- */
.rp-genres{ background:var(--fd-panel); border:1px solid var(--fd-hair); border-radius:var(--fd-radius); padding:6px 15px; }
.rp-gen-row{ display:grid; grid-template-columns:170px 1fr 46px 50px; align-items:center; gap:14px; padding:8px 0; border-top:1px solid var(--fd-hair); }
.rp-gen-row:first-child{ border-top:0; }
.rp-gen-name{ font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rp-gen-n{ color:var(--fd-ink-3); font-size:10px; margin-left:5px; letter-spacing:.02em; }
.rp-gen-track{ position:relative; height:10px; background:var(--fd-panel-3); border-radius:3px; }
.rp-gen-bar{ position:absolute; left:0; top:0; height:100%; border-radius:3px; opacity:.6; background:var(--fd-ink-3); }
.rp-genfill-good{ background:var(--fd-good); }
.rp-genfill-warn{ background:var(--fd-warn); }
.rp-genfill-bad{ background:var(--fd-bad); }
.rp-gen-avgline{ position:absolute; top:-3px; width:2px; height:16px; background:var(--fd-ink-2); opacity:.65; }
.rp-gen-val{ text-align:right; font-weight:600; font-variant-numeric:tabular-nums; }
.rp-gen-diff{ text-align:right; font-size:11.5px; font-variant-numeric:tabular-nums; }
/* performance-tier group headers (top 3 / mid 2 / bottom 3) */
.rp-gen-tier-h{ font-family:"IBM Plex Mono",monospace; font-size:9.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--fd-ink-3); padding:11px 0 3px; border-top:1px solid var(--fd-hair); }
.rp-genres > .rp-gen-tier-h:first-child{ border-top:0; padding-top:3px; }
.rp-gen-tier-h--top{ color:var(--fd-good); }
.rp-gen-tier-h--bottom{ color:var(--fd-bad); }
.rp-gen-tier-h + .rp-gen-row{ border-top:0; }
/* quadrant low-exposure caveat (light C, POP_VARIANTS.md §9.9) */
.rp-quad-caveat{ font-size:11.5px; line-height:1.45; color:var(--fd-ink-3); background:color-mix(in srgb, var(--fd-warn) 8%, transparent); border-left:2px solid var(--fd-warn); border-radius:0 4px 4px 0; padding:7px 11px; margin:0 0 12px; }

/* ---- audience ---- */
.rp-aud{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.rp-aud__panel{ background:var(--fd-panel); border:1px solid var(--fd-hair); border-radius:var(--fd-radius); padding:13px 15px; }
.rp-aud__cap{ font-size:10.5px; letter-spacing:.06em; color:var(--fd-ink-3); margin-bottom:8px; }
.rp-aud-svg{ width:100%; height:auto; display:block; }
.rp-aud-bar{ fill:rgba(var(--fd-accent-rgb),.5); }
.rp-aud-peak{ stroke:var(--fd-accent); stroke-width:1.5; }
.rp-hour-area{ fill:rgba(var(--fd-accent-rgb),.12); }
.rp-hour-line{ stroke:var(--fd-accent); stroke-width:1.75; }
.rp-hour-peak{ fill:var(--fd-pop); }
.rp-hour-peaklab{ font-size:10px; fill:var(--fd-ink-2); }

/* ---- methodology ---- */
.rp-method{ margin-top:34px; border-top:1px solid var(--fd-hair); padding-top:16px; }
.rp-method summary{
  cursor:pointer; font-family:"IBM Plex Mono",monospace; font-size:11.5px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--fd-ink-2); list-style:none;
}
.rp-method summary::-webkit-details-marker{ display:none; }
.rp-method summary::before{ content:"+ "; color:var(--fd-accent); }
.rp-method[open] summary::before{ content:"\2212 "; }
.rp-method__body{ margin-top:12px; max-width:820px; }
.rp-method__body p{ font-size:13px; line-height:1.6; color:var(--fd-ink-2); margin:0 0 10px; }
.rp-method__body b{ color:var(--fd-ink); font-weight:600; }
.rp-method__scope{ font-size:11px; color:var(--fd-ink-3); }

/* ---- empty ---- */
.rp-empty{ padding:60px 20px; text-align:center; color:var(--fd-ink-3); }
.rp-soon-panel{ padding:80px 20px; }
.rp-soon-panel__t{ margin:0; font-size:19px; font-weight:600; letter-spacing:.02em; color:var(--fd-ink); }
.rp-soon-panel__s{ margin:10px auto 0; max-width:460px; font-size:13px; line-height:1.55; color:var(--fd-ink-2); }

/* ---- responsive ---- */
@media (max-width:960px){
  .rp-quad-layout{ grid-template-columns:1fr; }
  .rp-recs{ grid-template-columns:1fr; }
}
@media (max-width:720px){
  .rp-wrap{ padding:18px 16px 60px; }
  .rp-changed{ grid-template-columns:1fr; }
  .rp-aud{ grid-template-columns:1fr; }
  .rp-gen-row{ grid-template-columns:110px 1fr 40px 44px; gap:10px; }
  .rp-station{ font-size:26px; }
}
@media (prefers-reduced-motion:reduce){
  .rp-gran__opt,.rp-nav__btn,.rp-rec{ transition:none; }
}