/* Start Post-Mortem.
 *
 * Design reference: CollectUI, @sitenley's boardui chart set (post ab26b224, Aug 2026) — the
 * combo chart whose LEGEND IS A DATA GRID, rounded bars over a muted full-height track, and the
 * per-period figures in stat tiles under the plot instead of in a tooltip nobody hovers. Built
 * entirely on this app's own tokens; none of that reference's palette was imported.
 *
 * Every number is `var(--bb-mono)` + tabular-nums, which is the app-wide rule and the reason a
 * sixteen-week grid can be scanned down a column at all. The mono is ONE token — never hard-code
 * the family (see ../DESIGN.md).
 */

#pageStartpm .spm-root { padding-bottom: 48px; }

/* ------------------------------------------------------------------ controls */

.spm-bar {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start;
  justify-content: space-between; margin-bottom: 14px;
}

.spm-picker { display: flex; flex-wrap: wrap; gap: 10px; flex: 1 1 420px; min-width: 0; }

.spm-group {
  display: flex; flex-direction: column; gap: 6px;
  padding: 8px 10px; border: 1px solid var(--bb-line); border-radius: var(--bb-r-card);
  background: var(--bb-surface); box-shadow: var(--bb-sh-hairline);
}
.spm-group-k {
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--bb-ink-3); font-weight: 600;
}
.spm-books { display: flex; flex-wrap: wrap; gap: 6px; }

.spm-book {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: var(--bb-r-chip);
  border: 1px solid var(--bb-line); background: var(--bb-field);
  font-size: 12px; cursor: pointer; user-select: none;
  transition: background var(--bb-t-fast), border-color var(--bb-t-fast), color var(--bb-t-fast);
}
.spm-book:hover { background: var(--bb-hover); }
.spm-book.is-on {
  background: var(--bb-accent); border-color: var(--bb-accent); color: #fff;
}
.spm-book input { accent-color: var(--bb-accent); margin: 0; }
/* The tick has to be visible against the navy it now sits on, so the checkbox inverts too:
 * a white box with a navy tick. `accent-color` alone paints the FILL, which on navy is navy. */
.spm-book.is-on input { accent-color: #fff; }
.spm-noanchor { font-style: normal; opacity: .55; font-size: 11px; }

.spm-lensctl { display: inline-flex; border: 1px solid var(--bb-line); border-radius: var(--bb-r-control); overflow: hidden; }
.spm-lensbtn {
  padding: 7px 14px; font-size: 12px; font-weight: 600; border: 0; cursor: pointer;
  background: var(--bb-surface); color: var(--bb-ink-2);
  transition: background var(--bb-t-fast), color var(--bb-t-fast);
}
.spm-lensbtn + .spm-lensbtn { border-left: 1px solid var(--bb-line); }
.spm-lensbtn:hover { background: var(--bb-hover); }
.spm-lensbtn.is-on { background: var(--bb-accent); color: #fff; }

/* ------------------------------------------------------------------ chips + meta */

.spm-meta, .spm-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.spm-meta { margin-bottom: 14px; }

.spm-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 6px;
  border: 1px solid var(--bb-line); background: var(--bb-field);
  font-size: 11px; color: var(--bb-ink-2); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.spm-chip.is-strong { background: var(--bb-accent-tint); border-color: var(--bb-accent); color: var(--bb-ink); font-weight: 600; }
.spm-chip.is-warn { background: var(--bb-gold-tint); border-color: var(--bb-gold); color: var(--bb-gold-ink); }

.spm-absent { color: var(--bb-ink-3); font-size: 13px; padding: 18px 2px; }

/* ------------------------------------------------------------------ the roll-up */

.spm-roll {
  display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; position: relative;
  padding: 14px 16px; margin-bottom: 18px;
  border: 1px solid var(--bb-line); border-radius: var(--bb-r-card);
  background: var(--bb-surface); box-shadow: var(--bb-sh-card);
}
.spm-rollcol { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: baseline; }
.spm-rollk {
  flex: 0 0 100%; font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--bb-ink-3);
}
.spm-rollr { display: inline-flex; gap: 6px; align-items: baseline; font-size: 12px; }
.spm-rollr i { font-style: normal; color: var(--bb-ink-3); }
.spm-rollnote { margin-left: auto; font-size: 11px; color: var(--bb-ink-3); align-self: flex-end; }

/* ------------------------------------------------------------------ a division card */

.spm-div {
  border: 1px solid var(--bb-line); border-radius: var(--bb-r-card);
  background: var(--bb-surface); box-shadow: var(--bb-sh-card);
  padding: 16px; margin-bottom: 16px;
}
.spm-div.is-closed { padding: 10px 16px; }

/* A DIV, never a <header>. index.html carries a bare `header { … }` element selector that IS
 * the app's navy top bar (sticky, 56px, z-index 100, white text) — a <header> inside a page
 * therefore renders as a navy strip with centred white text, which is exactly what the first
 * cut of this card did. Same trap waits for anyone reaching for <nav> or <main>. */
.spm-div-head {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  cursor: pointer;
}
.spm-div-head h3 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.spm-div-peek { margin-left: auto; font-size: 12px; color: var(--bb-ink-3); }
.spm-toggle {
  margin-left: auto; padding: 5px 12px; font-size: 12px; font-weight: 600;
  border: 1px solid var(--bb-line); border-radius: var(--bb-r-chip);
  background: var(--bb-field); color: var(--bb-ink-2); cursor: pointer;
  transition: background var(--bb-t-fast);
}
.spm-div-peek + .spm-toggle { margin-left: 0; }
.spm-toggle:hover { background: var(--bb-hover); }

/* ------------------------------------------------------------------ KPI row */

.spm-kpis {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px; margin: 12px 0 14px;
}
.spm-kpi {
  display: flex; flex-direction: column; gap: 2px;
  padding: 9px 11px; border-radius: 8px;
  background: var(--bb-field); border: 1px solid var(--bb-line);
}
.spm-kpi-k {
  font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--bb-ink-3); font-weight: 600;
}
.spm-kpi-v { font-size: 19px; font-weight: 700; line-height: 1.15; }

.spm-num { font-family: var(--bb-mono); font-variant-numeric: tabular-nums; }

.spm-dev { font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.spm-dev.is-up { color: var(--bb-green); }
.spm-dev.is-down { color: var(--bb-red); }
.spm-dev-none { color: var(--bb-ink-3); font-weight: 400; }

/* The "Todo pago" label gets its own line above the strip. Absolutely positioning it in the
 * corner put it on top of the sixth KPI card — a label overlapping the number it labels. */
.spm-paidline { display: flex; flex-direction: column-reverse; gap: 2px; }
.spm-paidline .spm-kpis { margin-top: 0; }
.spm-paidline-k {
  font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--bb-ink-3); font-weight: 600;
}

/* ------------------------------------------------------------------ flags */

.spm-flags { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 6px; }
.spm-flag {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 9px 12px; border-radius: 8px;
  border: 1px solid var(--bb-line); background: var(--bb-field);
  border-left-width: 3px;
}
.spm-flag.is-red { border-left-color: var(--bb-red); background: var(--bb-red-tint); }
.spm-flag.is-amber { border-left-color: var(--bb-gold); background: var(--bb-gold-tint); }
.spm-flag.is-good { border-left-color: var(--bb-green); background: var(--bb-green-tint); }
.spm-flag-sev {
  flex: 0 0 auto; font-size: 10px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; padding-top: 2px; color: var(--bb-ink-2);
}
.spm-flag b { font-size: 13.5px; display: block; }
.spm-flag p { margin: 2px 0 0; font-size: 12.5px; color: var(--bb-ink-2); line-height: 1.45; }

/* ------------------------------------------------------------------ charts */

.spm-lenses { display: grid; gap: 18px; }
.spm-lens { min-width: 0; }
.spm-lens-head { display: flex; gap: 10px; align-items: baseline; }
.spm-lens h4 { margin: 0; font-size: 14px; font-weight: 700; }
.spm-lens-parts { font-size: 11px; color: var(--bb-ink-3); }

.spm-chart { margin: 0 0 14px; min-width: 0; }
.spm-chart-head { display: flex; gap: 10px; align-items: baseline; margin-bottom: 4px; }
.spm-chart-title { font-size: 12.5px; font-weight: 600; color: var(--bb-ink); }
.spm-chart-sub { font-size: 11px; color: var(--bb-ink-3); font-variant-numeric: tabular-nums; }

.spm-leg { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 6px; }
.spm-leg-item { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--bb-ink-2); }
/* Each series states its own MAX, because each is drawn on its own scale — see the scaling
 * note in startpm.js. Without the max printed, a bar chart with per-series scales is a lie. */
.spm-leg-max { font-family: var(--bb-mono); font-variant-numeric: tabular-nums; color: var(--bb-ink-3); }
.spm-key { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.spm-key-line { height: 2px; border-radius: 1px; width: 14px; }

.spm-chart svg { width: 100%; height: 260px; display: block; overflow: visible; }

.spm-grid { stroke: var(--bb-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.spm-track { fill: var(--bb-hover); opacity: .5; }
.spm-bar { transition: opacity var(--bb-t-fast); }
.spm-bar:hover { opacity: .75; }
.spm-line { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.spm-dot { stroke: var(--bb-surface); stroke-width: 1; vector-effect: non-scaling-stroke; }

.spm-ax {
  font-family: var(--bb-mono); font-size: 9.5px; fill: var(--bb-ink-3);
  font-variant-numeric: tabular-nums;
}
.spm-ax-l { text-anchor: end; }
.spm-ax-r { text-anchor: start; }
.spm-ax-x { text-anchor: middle; }

/* The series colours. Spend and NLE take the brand navy because they are the figures leadership
 * quotes; leads and previous take the lighter tint of the same hue so the pair reads as one
 * family; the rate lines take gold, which is the only colour in the app reserved for a rate. */
.spm-bar.is-spend, .spm-key.is-spend { fill: var(--bb-accent); background: var(--bb-accent); }
.spm-bar.is-leads, .spm-key.is-leads { fill: var(--bb-cyan); background: var(--bb-cyan); }
.spm-bar.is-nle, .spm-key.is-nle { fill: var(--bb-accent); background: var(--bb-accent); }
.spm-bar.is-prev, .spm-key.is-prev { fill: var(--bb-cyan); background: var(--bb-cyan); }
/* A <polyline> FILLS by default, and `fill` on a shared `.spm-line.is-cpl, .spm-dot.is-cpl`
 * rule overrode the `fill: none` above it — the CPL line rendered as a solid gold polygon
 * swallowing half the plot. The line and the dot need opposite fills, so they never share a
 * declaration block again. */
.spm-line.is-cpl { stroke: var(--bb-gold); fill: none; }
.spm-dot.is-cpl  { stroke: var(--bb-surface); fill: var(--bb-gold); }
.spm-key-line.is-cpl { background: var(--bb-gold); }
.spm-line.is-cr { stroke: var(--bb-orange); fill: none; }
.spm-dot.is-cr  { stroke: var(--bb-surface); fill: var(--bb-orange); }
.spm-key-line.is-cr { background: var(--bb-orange); }

/* ------------------------------------------------------------------ the week grid
 * The CollectUI move: the legend IS a data table. Sixteen weeks of five figures you can read
 * out loud, sitting under the chart that shows their shape. */

.spm-wks {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 6px; margin-bottom: 6px;
}
.spm-wk {
  display: flex; flex-direction: column; gap: 1px;
  padding: 7px 9px; border-radius: 7px;
  border: 1px solid var(--bb-line); background: var(--bb-field);
}
.spm-wk-n { font-size: 11px; font-weight: 700; color: var(--bb-ink); }
.spm-wk-d { font-family: var(--bb-mono); font-size: 9.5px; color: var(--bb-ink-3); margin-bottom: 2px; font-variant-numeric: tabular-nums; }
.spm-wk-r { display: flex; justify-content: space-between; gap: 6px; font-size: 10.5px; }
.spm-wk-r i { font-style: normal; color: var(--bb-ink-3); }
.spm-wk-r b { font-weight: 600; font-size: 10.5px; }

/* ------------------------------------------------------------------ donut */

.spm-donut-body { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.spm-donut svg { width: 150px; height: 150px; flex: 0 0 auto; }
.spm-arc { transition: opacity var(--bb-t-fast); }
.spm-arc:hover { opacity: .78; }
.spm-arc.is-g1 { stroke: var(--bb-accent); }
.spm-arc.is-g2 { stroke: var(--bb-cyan); }
.spm-arc.is-m1 { stroke: var(--bb-orange); }
.spm-arc.is-m2 { stroke: var(--bb-gold); }
.spm-key.is-g1 { background: var(--bb-accent); }
.spm-key.is-g2 { background: var(--bb-cyan); }
.spm-key.is-m1 { background: var(--bb-orange); }
.spm-key.is-m2 { background: var(--bb-gold); }
.spm-donut-c {
  text-anchor: middle; font-family: var(--bb-display); font-size: 20px; font-weight: 700;
  fill: var(--bb-ink); font-variant-numeric: tabular-nums;
}
.spm-donut-s { text-anchor: middle; font-size: 8px; fill: var(--bb-ink-3); letter-spacing: .08em; text-transform: uppercase; }

.spm-mix { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; min-width: 240px; }
.spm-mix li { display: grid; grid-template-columns: 10px 1fr auto auto; gap: 8px; align-items: baseline; font-size: 12px; }
.spm-mix-l { color: var(--bb-ink-2); }
.spm-mix-n { font-family: var(--bb-mono); font-variant-numeric: tabular-nums; color: var(--bb-ink-3); font-size: 11px; }

/* ------------------------------------------------------------------ narrow
 * Keyed off content width, never the viewport — the layout layer this app uses lives on
 * html[data-cw] (responsive.css/js), and a viewport query is wrong the moment the sidebar
 * collapses. These are the in-card fallbacks for a genuinely small box. */

@media (max-width: 1100px) {
  .spm-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .spm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spm-chart svg { height: 210px; }
  .spm-wks { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
  .spm-donut-body { gap: 12px; }
  .spm-mix { min-width: 0; }
}

/* ------------------------------------------------------------------ CRM reconciliation
 * The one panel WildFi cannot produce. A table, not a chart: five figures per channel that a
 * reader quotes in a meeting, and every caveat in a chip's title rather than in prose. */

.spm-crm-div + .spm-crm-div { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--bb-line); }
.spm-crm-head { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.spm-crm-head b { font-size: 14px; }
.spm-chip.is-ok { background: var(--bb-green-tint); border-color: var(--bb-green); color: var(--bb-ink); }

.spm-crm-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.spm-crm-tbl th {
  text-align: right; font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--bb-ink-3); font-weight: 600; padding: 4px 8px; border-bottom: 1px solid var(--bb-line);
}
.spm-crm-tbl th:first-child, .spm-crm-tbl td:first-child { text-align: left; }
.spm-crm-tbl td { text-align: right; padding: 5px 8px; border-bottom: 1px solid var(--bb-line); }
.spm-crm-tbl tr:last-child td { border-bottom: 0; }
.spm-crm-tbl tbody tr:hover { background: var(--bb-hover); }
.spm-ren { font-style: normal; color: var(--bb-ink-3); margin-left: 4px;
}
.spm-ren[title] { cursor: help; }

/* A dropped read gets a NAMED failure and a way out, never an empty state that claims the
 * read found nothing. Same rule the Campaigns empty state and By PM both learned. */
.spm-fail {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 12px 14px; border-radius: var(--bb-r-card);
  border: 1px solid var(--bb-gold); background: var(--bb-gold-tint);
  font-size: 13px; margin-bottom: 14px;
}
.spm-fail span { color: var(--bb-ink-2); }
.spm-retry {
  margin-left: auto; padding: 5px 12px; font-size: 12px; font-weight: 600;
  border: 1px solid var(--bb-line); border-radius: var(--bb-r-chip);
  background: var(--bb-surface); color: var(--bb-ink); cursor: pointer;
}
.spm-retry:hover { background: var(--bb-hover); }
.spm-retry:disabled { opacity: .6; cursor: default; }

/* ------------------------------------------------------------------ matrículas por campaña */

.spm-dl {
  margin-left: auto; padding: 6px 14px; font-size: 12px; font-weight: 600;
  border-radius: var(--bb-r-chip); text-decoration: none;
  background: var(--bb-accent); color: #fff; border: 1px solid var(--bb-accent);
  transition: filter var(--bb-t-fast);
}
.spm-dl:hover { filter: brightness(1.12); }
.spm-div-head .spm-dl + .spm-toggle { margin-left: 8px; }

.spm-cov { margin-bottom: 14px; max-width: 560px; }
.spm-cov tr.is-total td { font-weight: 700; border-top: 1px solid var(--bb-line-strong); }

/* The detail table is the one place on this page with enough rows to need its own scroll.
 * Tables may scroll horizontally; the page body must never. */
.spm-enr-wrap { overflow-x: auto; max-height: 560px; overflow-y: auto; border: 1px solid var(--bb-line); border-radius: 8px; }
.spm-enr-tbl { font-size: 12px; }
.spm-enr-tbl thead th { position: sticky; top: 0; background: var(--bb-surface); z-index: 1; }
.spm-enr-tbl tr.is-total td { font-weight: 600; background: var(--bb-field); }
/* A month row is a detail of the TOTAL above it, and reads as one. */
.spm-enr-tbl tr.is-month td { color: var(--bb-ink-2); }
.spm-enr-tbl tr.is-month td:first-child,
.spm-enr-tbl tr.is-month td:nth-child(2),
.spm-enr-tbl tr.is-month td:nth-child(3) { color: transparent; }
.spm-enr-tbl tr.is-month:hover td { color: var(--bb-ink-2); }
.spm-camp { max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Below the 25-lead floor a rate is shown but never ranked — it is dimmed so it cannot be
 * mistaken for a comparable figure. docs/rules/lte.md. */
.spm-enr-tbl td.is-thin { opacity: .55; }
.spm-enr .spm-toggle { margin-left: 0; margin-top: 10px; }