/* Vilalara Pulse, pulse-plus.css. Release 1, 01/10/2026.
   Linked right after the inline <style> of index.html, so it can override.
   Only px- prefixed classes and tokens, plus the explicit fixes of spec 3.3:
   .kpi-grid.px-grid-*, .rise.d6-.d8, the .campaign-list overflow at 880px or
   less, and .px-scroll-x. Every colour is a var(--token), so dark mode works
   through the existing [data-theme="dark"] overrides on <body>. ASCII only.

   Markup reference (what PX core emits, and what modules can hand-write):
   - tiles      .kpi-grid.px-grid-4 > .kpi.px-kpi[.px-go][.px-has-spark][.px-tone-X]
                  > .kpi-eyebrow, .px-kpi-spark, .kpi-value, .px-kpi-sub, .px-chips, .px-kpi-foot
   - chips      .px-chips > .px-chip.px-tone-{fresh|aging|stale|wait|pos|neg} > .px-dot + .px-chip-text
                  a chip with .px-chip-summary is shown only at 600px or less, and then
                  replaces the other chips of its row (the masthead source row).
   - states     .px-state.px-state-{wait|empty|error} > .px-dot + .px-state-text > .px-state-title + .px-state-body
   - actions    .px-actions > .px-action.{terra|gold|moss} (also .px-sev-*, .px-tone-*, [data-tone])
                  > .px-action-head (.px-action-month + .px-action-figs > .px-action-fig > .v + .k),
                    .px-action-text, .px-action-sug (> .px-label), .px-action-foot, .px-action-link
   - diverging  .px-diverge > .px-diverge-row > .px-diverge-label + .px-diverge-track > .px-diverge-bar.{pos|neg}
                  (width is a share of the whole track: 50% fills one side) + .px-diverge-val
   - hatch      .px-hatch on any block; colour via --px-hatch-color
   - timeline   .px-timeline > .px-timeline-track > .px-timeline-seg[.px-hatch] (left/width inline)
                  + .px-timeline-mark; .px-timeline-axis > span; .px-timeline-legend
   - matrix     .px-matrix (scrolls inside its panel) > .px-matrix-grid (style="--px-cols:5")
                  > .px-matrix-head, .px-matrix-label, .px-cell.{ok|bad|todo|none} > .px-cell-n
   - multiples  .px-multiples > .px-multiple > .px-multiple-title + .px-chart.px-chart-sm + .px-note
   - charts     .px-chart (280px) / .px-chart-sm (180px) / .px-chart-lg (360px) wrap a <canvas>
*/

/* ---------------------------------------------------------------- tokens */
:root {
  --px-tierra: #453519;
  /* sticky masthead height, measured by PX.mastHeight (pulse-core.js) on load and resize */
  --mast-h: 104px;
  --px-scroll-gap: calc(var(--mast-h) + 16px);
}
[data-theme="dark"] { --px-tierra: #A88A5E; }

/* --------------------------------------------------- animation (d6-d8) */
.rise.d6 { animation-delay: 440ms; }
.rise.d7 { animation-delay: 520ms; }
.rise.d8 { animation-delay: 600ms; }

/* ------------------------------------------------------------- grids */
/* Empty cells stay paper (no beige block): the hairlines are drawn by each
   tile's shadow inside the 1px gap instead of by the grid background. */
.kpi-grid.px-grid-2,
.kpi-grid.px-grid-3,
.kpi-grid.px-grid-4,
.kpi-grid.px-grid-6 {
  background: var(--paper);
  container-type: inline-size;
}
.kpi-grid.px-grid-2 > *,
.kpi-grid.px-grid-3 > *,
.kpi-grid.px-grid-4 > *,
.kpi-grid.px-grid-6 > * {
  min-width: 0;
  box-shadow: 1px 0 0 var(--line), 0 1px 0 var(--line), 1px 1px 0 var(--line);
}
.kpi-grid.px-grid-2 { --px-cols: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kpi-grid.px-grid-3 { --px-cols: 3; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpi-grid.px-grid-4 { --px-cols: 4; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpi-grid.px-grid-6 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
@media (max-width: 1100px) {
  .kpi-grid.px-grid-4 { --px-cols: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .kpi-grid.px-grid-2,
  .kpi-grid.px-grid-3,
  .kpi-grid.px-grid-4 { --px-cols: 1; grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------- tiles */
.px-kpi { cursor: default; min-height: 168px; scroll-margin-top: var(--px-scroll-gap); }
.px-kpi:hover { background: var(--paper); }
.px-kpi.px-go { cursor: pointer; }
.px-kpi.px-go:hover { background: var(--surface); }
.px-kpi:not(.px-go) .kpi-eyebrow .arrow { display: none; }
.px-kpi.px-go:focus-visible { outline: 2px solid var(--ink-2); outline-offset: -2px; }
.px-kpi::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: transparent;
  opacity: 0.7;
}
.px-kpi.px-tone-pos::before, .px-kpi.px-tone-fresh::before { background: var(--moss); }
.px-kpi.px-tone-neg::before, .px-kpi.px-tone-stale::before { background: var(--terra); }
.px-kpi.px-tone-aging::before { background: var(--gold); }
.px-kpi .kpi-eyebrow { gap: var(--s-2); align-items: flex-start; }
.px-kpi .kpi-eyebrow > span:first-child { min-width: 0; }
.px-kpi .kpi-value {
  font-size: 2.25rem;
  line-height: 1.05;
  overflow-wrap: break-word;
}
.px-kpi .kpi-value em { font-style: italic; color: var(--ink-2); }
@supports (width: 1cqi) {
  .kpi-grid.px-grid-2 .px-kpi .kpi-value,
  .kpi-grid.px-grid-3 .px-kpi .kpi-value,
  .kpi-grid.px-grid-4 .px-kpi .kpi-value {
    font-size: clamp(1.5rem, calc((100cqi / var(--px-cols, 4) - 3rem) * 0.16), 2.75rem);
  }
}
.kpi-grid.px-grid-6 .px-kpi { min-height: 0; padding: var(--s-4) var(--s-4) var(--s-3); }
.kpi-grid.px-grid-6 .px-kpi .kpi-value { font-size: 1.875rem; }
.px-kpi-sub {
  font-size: 0.8125rem;
  color: var(--ink-2);
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}
.px-kpi .px-chips { margin-top: 2px; }
.px-kpi-foot {
  margin-top: auto;
  padding-top: var(--s-2);
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--ink-2);
}
.px-kpi-spark {
  position: absolute;
  top: var(--s-4);
  right: var(--s-4);
  line-height: 0;
  opacity: 0.8;
  pointer-events: none;
}
.px-kpi-spark svg { width: 96px; height: auto; display: block; }
.px-kpi.px-has-spark .kpi-eyebrow { padding-right: 104px; }
@supports (width: 1cqi) {
  .kpi-grid .px-kpi-spark svg { width: min(96px, calc(100cqi / var(--px-cols, 4) * 0.3)); }
  .kpi-grid .px-kpi.px-has-spark .kpi-eyebrow { padding-right: calc(min(96px, calc(100cqi / var(--px-cols, 4) * 0.3)) + 8px); }
}
.px-spark { overflow: visible; }

/* ------------------------------------------------------------- chips */
.px-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.px-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 3px 10px 3px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  font-family: var(--body);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1.4;
  color: var(--ink-2);
  white-space: nowrap;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}
.px-chip-text { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.px-chip.px-go, button.px-chip {
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.px-chip.px-go:hover, button.px-chip:hover { border-color: var(--line-strong); color: var(--ink); }
.px-chip.px-tone-pos { color: var(--moss); }
.px-chip.px-tone-neg { color: var(--terra); }
.px-dot {
  display: inline-block;
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-3);
}
.px-tone-fresh .px-dot, .px-tone-pos .px-dot { background: var(--moss); }
.px-tone-aging .px-dot { background: var(--gold); }
.px-tone-stale .px-dot, .px-tone-neg .px-dot { background: var(--terra); }
.px-tone-wait .px-dot { background: var(--ink-3); }
.px-chip-summary, .px-chips > .px-summary { display: none; }
#px-chips { min-width: 0; margin-top: 6px; }
#px-chips:empty { display: none; }
@media (max-width: 600px) {
  .px-chips > .px-chip-summary, .px-chips > .px-summary { display: inline-flex; }
  .px-chips > .px-chip-summary ~ .px-chip,
  .px-chips > .px-summary ~ .px-chip,
  .px-chips:has(> .px-chip-summary) > .px-chip:not(.px-chip-summary),
  .px-chips:has(> .px-summary) > .px-chip:not(.px-summary) { display: none; }
}

/* ------------------------------------------------------------- states */
.px-state {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  max-width: 72ch;
  padding: var(--s-4) var(--s-5);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--paper);
  color: var(--ink-2);
}
.px-state .px-dot { margin-top: 0.5em; }
.px-state-text { min-width: 0; }
.px-state-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.3;
  color: var(--ink);
}
.px-state-body {
  margin: 4px 0 0;
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink-2);
}
.px-state-wait .px-dot { background: var(--ink-3); }
.px-state-empty .px-dot { background: var(--line-strong); }
.px-state-error .px-dot { background: var(--terra); }

/* ------------------------------------------------------------- actions */
.px-actions { display: flex; flex-direction: column; gap: var(--s-3); }
.px-action {
  display: block;
  position: relative;
  padding: var(--s-4) var(--s-5);
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--ink-3);
  border-radius: var(--radius);
  color: var(--ink-2);
  line-height: 1.5;
}
.px-action.terra, .px-action.px-terra, .px-action.px-sev-terra, .px-action.px-tone-neg,
.px-action.px-tone-stale, .px-action[data-tone="terra"] { border-left-color: var(--terra); }
.px-action.gold, .px-action.px-gold, .px-action.px-sev-gold, .px-action.px-tone-aging,
.px-action[data-tone="gold"] { border-left-color: var(--gold); }
.px-action.moss, .px-action.px-moss, .px-action.px-sev-moss, .px-action.px-tone-pos,
.px-action.px-tone-fresh, .px-action[data-tone="moss"] { border-left-color: var(--moss); }
.px-action-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2) var(--s-5);
  margin-bottom: var(--s-2);
}
.px-action-month {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: 1.375rem;
  line-height: 1.15;
  color: var(--ink);
}
.px-action-figs { display: flex; flex-wrap: wrap; gap: var(--s-5); font-variant-numeric: tabular-nums; }
.px-action-fig { display: flex; flex-direction: column; gap: 2px; text-align: right; }
.px-action-fig .v {
  font-family: var(--display);
  font-weight: 300;
  font-size: 1.25rem;
  line-height: 1.1;
  color: var(--ink);
  white-space: nowrap;
}
.px-action-fig .k,
.px-label {
  font-family: var(--body);
  font-style: normal;
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.px-action-text { font-size: 0.9375rem; color: var(--ink-2); margin: 0; }
.px-action-text strong { color: var(--ink); font-weight: 500; }
.px-action-sug {
  margin-top: var(--s-2);
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: 0.9375rem;
  color: var(--ink-2);
}
.px-action-sug .px-label { margin-right: 8px; }
.px-action-foot { margin-top: var(--s-2); font-size: 0.75rem; color: var(--ink-3); }
.px-action-link {
  display: inline-block;
  margin-top: var(--s-3);
  padding-bottom: 1px;
  border-bottom: 1px solid var(--line-strong);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
  cursor: pointer;
}
.px-action-link:hover { color: var(--ink); border-bottom-color: var(--ink-2); }
@media (max-width: 600px) {
  .px-action { padding: var(--s-3) var(--s-4); }
  .px-action-fig { text-align: left; }
}

/* ------------------------------------------------- diverging bars (CSS) */
.px-diverge { display: flex; flex-direction: column; gap: var(--s-3); }
.px-diverge-row {
  display: grid;
  grid-template-columns: minmax(72px, 1fr) minmax(0, 3fr) minmax(96px, auto);
  align-items: center;
  gap: var(--s-4);
}
.px-diverge-label { font-size: 0.875rem; color: var(--ink); min-width: 0; }
.px-diverge-track {
  position: relative;
  height: 12px;
  background: var(--surface);
  border-radius: 2px;
}
.px-diverge-track::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -3px;
  bottom: -3px;
  width: 1px;
  background: var(--line-strong);
}
.px-diverge-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  min-width: 2px;
  background: var(--ink-3);
}
.px-diverge-bar.pos, .px-diverge-bar.px-pos { left: 50%; background: var(--moss); border-radius: 0 2px 2px 0; }
.px-diverge-bar.neg, .px-diverge-bar.px-neg { right: 50%; background: var(--terra); border-radius: 2px 0 0 2px; }
.px-diverge-val {
  text-align: right;
  font-size: 0.875rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.px-diverge-val .sub, .px-diverge-val span {
  display: block;
  font-size: 0.6875rem;
  color: var(--ink-3);
  letter-spacing: 0.04em;
}
.px-diverge-val.pos, .px-diverge-row.pos .px-diverge-val { color: var(--moss); }
.px-diverge-val.neg, .px-diverge-row.neg .px-diverge-val { color: var(--terra); }
@media (max-width: 600px) {
  .px-diverge-row { grid-template-columns: minmax(64px, 1fr) minmax(0, 2fr) minmax(84px, auto); gap: var(--s-3); }
}

/* ------------------------------------------------------- hatched fill */
.px-hatch {
  background-color: transparent;
  background-image: repeating-linear-gradient(135deg,
    var(--px-hatch-color, var(--ink-3)) 0 1.5px, transparent 1.5px 6px);
  box-shadow: inset 0 0 0 1px var(--px-hatch-color, var(--ink-3));
}
.px-hatch.gold { --px-hatch-color: var(--gold); }
.px-hatch.moss { --px-hatch-color: var(--moss); }
.px-hatch.terra { --px-hatch-color: var(--terra); }

/* ------------------------------------------------- coverage timeline */
.px-timeline { display: flex; flex-direction: column; gap: var(--s-2); }
.px-timeline-track {
  position: relative;
  height: 14px;
  background: var(--surface);
  border-radius: 2px;
  overflow: hidden;
}
.px-timeline-seg {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--gold);
}
.px-timeline-seg.px-hatch { background-color: transparent; --px-hatch-color: var(--ink-3); }
.px-timeline-mark {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 2px;
  margin-left: -1px;
  background: var(--ink);
}
.px-timeline-axis {
  display: flex;
  justify-content: space-between;
  gap: var(--s-2);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.px-timeline-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  font-size: 0.75rem;
  color: var(--ink-2);
}

/* ------------------------------------------------------------- matrix */
/* width 0 + min-width 100% keeps the matrix out of the page's intrinsic
   width, so it scrolls inside its panel and the page never does. */
.px-matrix {
  width: 0;
  min-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.px-matrix-grid {
  display: grid;
  grid-template-columns: minmax(150px, 1.6fr) repeat(var(--px-cols, 5), minmax(64px, 1fr));
  gap: 2px;
  min-width: 520px;
  font-size: 0.8125rem;
}
.px-matrix-head {
  padding: 6px 8px;
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: center;
}
.px-matrix-head:first-child { text-align: left; }
.px-matrix-label {
  padding: 8px 8px 8px 0;
  color: var(--ink);
  min-width: 0;
  overflow-wrap: anywhere;
}
.px-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 4px;
  border-radius: 2px;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
  background: var(--surface);
}
.px-cell.ok, .px-cell.certo { background: var(--moss); color: var(--paper); }
.px-cell.bad, .px-cell.errado { background: var(--terra); color: var(--paper); }
.px-cell.todo, .px-cell.por-testar {
  background-color: transparent;
  background-image: repeating-linear-gradient(135deg, var(--line-strong) 0 1.5px, transparent 1.5px 6px);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--ink-2);
}
.px-cell.none, .px-cell.sem-testes {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink-3);
}
.px-cell-n { white-space: nowrap; }

/* ------------------------------------------------------- small multiples */
.px-multiples {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5);
}
.px-multiples > * { min-width: 0; }
.px-multiple-title {
  font-family: var(--display);
  font-size: 1rem;
  color: var(--ink);
  margin: 0 0 var(--s-2);
}
@media (max-width: 1100px) { .px-multiples { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .px-multiples { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------- chart wrappers */
.px-chart { position: relative; height: 280px; min-width: 0; }
.px-chart-sm { position: relative; height: 180px; min-width: 0; }
.px-chart-lg { position: relative; height: 360px; min-width: 0; }
.px-chart.px-chart-sm { height: 180px; }
.px-chart.px-chart-lg { height: 360px; }
@media (max-width: 600px) {
  .px-chart { height: 240px; }
  .px-chart-lg, .px-chart.px-chart-lg { height: 280px; }
}

/* ------------------------------------------------------- panels, lists */
.panel.px-panel { min-height: 0; }
.px-panel-auto { min-height: 0; }
.px-seglist .seg-row:nth-child(n+7) .seg-bar-fill { background: var(--ink-3); opacity: 0.55; }
.px-seglist .px-seg-outros .seg-bar-fill { background: var(--line-strong); opacity: 1; }
.px-seglist .px-seg-outros .seg-name { color: var(--ink-2); font-style: italic; }
.px-seglist .seg-val { white-space: nowrap; }
.px-seg-empty {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  color: var(--ink-3);
  font-size: 0.9375rem;
}

/* ------------------------------------------------------- sections, text */
.px-sec { scroll-margin-top: var(--px-scroll-gap); }
.px-note {
  margin: var(--s-3) 0 0;
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-3);
}
.px-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.px-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--ink-2);
}
.px-legend i, .px-legend .px-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border-radius: 2px;
  vertical-align: -1px;
  background: var(--ink-3);
}
.px-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.px-btn:hover { border-color: var(--ink-2); color: var(--ink); }

/* ------------------------------------------------------- mobile fixes */
/* Wide div tables scroll inside their panel; the page itself never does. */
.px-scroll-x {
  width: 0;
  min-width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.px-scroll-x > * { min-width: 560px; }
@media (max-width: 880px) {
  .campaign-list {
    width: 0;
    min-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--line-strong) transparent;
  }
  .campaign-list > .campaign-row { min-width: 560px; }
  .px-sec .section-meta { white-space: normal; }
}

/* ===================================================== review fixes, r1 */

/* legacy .kpi tiles inside the 4-column grid (Comercial Cap I and the Cap III
   pace tiles): the same container clamp as .px-kpi, so values fit their tile */
@supports (width: 1cqi) {
  .kpi-grid.px-grid-4 > .kpi:not(.px-kpi) .kpi-value {
    font-size: clamp(1.375rem, calc((100cqi / var(--px-cols, 4) - 3rem) * 0.15), 2.75rem);
    white-space: nowrap;
  }
}

/* tile values line up across a row when one label wraps to two lines */
@media (min-width: 601px) {
  .kpi-grid .px-kpi .kpi-eyebrow { min-height: 3.1em; }
  .kpi-grid.px-grid-6 .px-kpi .kpi-eyebrow { min-height: 3.1em; }
}

/* Fontes board: a stacked card per pipeline on phones (no sideways scroll) */
@media (max-width: 600px) {
  .campaign-list.px-fontes { width: auto; min-width: 0; overflow-x: visible; }
  .campaign-list.px-fontes > .campaign-row {
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "name state" "last last" "next next" "feeds feeds";
    row-gap: 4px;
    column-gap: var(--s-3);
  }
  .campaign-list.px-fontes > .campaign-row.header { display: none; }
  .px-fontes .px-f-name { grid-area: name; }
  .px-fontes .px-f-state { grid-area: state; align-self: start; }
  .px-fontes .px-f-last { grid-area: last; }
  .px-fontes .px-f-next { grid-area: next; }
  .px-fontes .px-f-feeds { grid-area: feeds; }
  .px-fontes .px-f-last, .px-fontes .px-f-next, .px-fontes .px-f-feeds { font-size: 0.8125rem !important; }
}
.px-f-k { display: none; }
@media (max-width: 600px) {
  .px-fontes .px-f-k {
    display: inline;
    font-size: 0.625rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
}

/* Aprendizagem Cap VII matrix: the five language columns fit a phone */
@media (max-width: 600px) {
  .px-matrix-grid {
    grid-template-columns: minmax(96px, 1.2fr) repeat(var(--px-cols, 5), minmax(36px, 1fr));
    min-width: 0;
    font-size: 0.75rem;
  }
  .px-matrix-label small, .px-matrix-label .px-note { display: none; }
  .px-matrix-head { padding: 6px 2px; letter-spacing: 0.08em; }
  .px-cell { padding: 2px; font-size: 0.6875rem; }
}

/* Digital stat rows (.pace-horizons with inline auto-fit grids): values fit */
.pace-h { min-width: 0; }
.pace-h .v { font-size: clamp(1.25rem, 2vw, 1.875rem); white-space: nowrap; }
@media (max-width: 600px) {
  .pace-horizons { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .pace-h { padding: var(--s-4) var(--s-3) var(--s-3); }
  .pace-h .v { font-size: 1.25rem; }
}

/* story heroes on phones: less side padding, the eyebrow may wrap */
@media (max-width: 600px) {
  .story { padding: var(--s-5) var(--s-4) var(--s-4); }
  .story-eyebrow { flex-wrap: wrap; row-gap: 4px; }
  .story-eyebrow .badge { white-space: nowrap; }
  .story-eyebrow .sep { display: none; }
}

/* shorter phone pages: two-up small tiles, compact big tiles */
@media (max-width: 600px) {
  .kpi-grid.px-grid-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-grid.px-grid-6 .px-kpi .kpi-value { font-size: 1.5rem; }
  .kpi-grid.px-grid-4 .px-kpi { min-height: 0; }
  .kpi-grid.px-grid-4 .px-kpi .kpi-value { font-size: 2rem; }
}

/* action rows on phones: the two figures side by side */
@media (max-width: 600px) {
  .px-action-figs { display: grid; grid-template-columns: 1fr 1fr; width: 100%; gap: var(--s-3); }
  .px-action-fig .k { letter-spacing: 0.1em; }
}

/* breakdown lists of the new views: wider label column, neutral bars */
.seg-list.px-seglist .seg-row { grid-template-columns: minmax(0, 2.3fr) minmax(48px, 1fr) auto; }
.px-seglist .seg-row .seg-bar-fill { background: var(--gold); opacity: 1; }
.px-seglist .seg-row:nth-child(n+7) .seg-bar-fill { background: var(--ink-3); opacity: 0.55; }
.px-seglist .px-seg-outros .seg-bar-fill { background: var(--line-strong); opacity: 1; }

/* a chart canvas never widens the page if a resize is missed */
.px-chart, .px-chart-sm, .px-chart-lg { overflow: hidden; }

/* masthead on phones: one-line date, a real touch target for the summary chip */
@media (max-width: 600px) {
  .masthead-date { font-size: 1rem; }
  .px-chip.px-chip-summary { min-height: 32px; padding: 6px 12px 6px 10px; }
}
.px-align-start { align-self: start; }

/* Aprendizagem: Parte A and Parte B dividers share one look */
.px-part {
  margin: 0 0 var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line-strong);
  scroll-margin-top: var(--px-scroll-gap);
}
.px-part .section-head { margin-bottom: 0; }
.px-part h2 {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(2rem, 4.2vw, 2.75rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
}

/* sparkline under the value (not beside the label), so labels need not wrap
   around it and every value in a row starts at the same height */
.kpi-grid .px-kpi-spark { position: static; order: 1; align-self: flex-start; margin-top: 2px; }
.kpi-grid .px-kpi .px-kpi-sub,
.kpi-grid .px-kpi .px-chips,
.kpi-grid .px-kpi .px-kpi-foot { order: 2; }
.kpi-grid .px-kpi.px-has-spark .kpi-eyebrow { padding-right: 0; }
@media (min-width: 601px) {
  .kpi-grid.px-grid-4 > .kpi:not(.px-kpi) .kpi-eyebrow { min-height: 3.1em; align-items: flex-start; }
  .kpi-grid.px-grid-6 .px-kpi .kpi-eyebrow { letter-spacing: 0.1em; }
}

/* ===================================================== review fixes, r2 */

/* phones: the six-tile strips are two-up, so a label on two lines must not
   push its value below the value of the tile beside it */
@media (max-width: 600px) {
  .kpi-grid.px-grid-6 .px-kpi .kpi-eyebrow {
    min-height: 3.1em;
    align-items: flex-start;
    letter-spacing: 0.08em;
  }
}

/* masthead on phones: the date on one line (the weekday drops), the pill never wraps */
@media (max-width: 600px) {
  .masthead-date { white-space: nowrap; }
  .masthead-date .md-wd { display: none; }
  .masthead .tool-pill { white-space: nowrap; }
}

/* ===================================================== review fixes, r3 */

/* desktop: the source chips stay on one line (scrolling sideways when they do
   not fit), so the sticky masthead keeps one height and never covers a fifth
   of the screen; every scroll target uses the measured height (--mast-h) */
@media (min-width: 601px) {
  #px-chips > .px-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    padding-bottom: 1px;
  }
  #px-chips > .px-chips.px-overflow {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }
  #px-chips > .px-chips::-webkit-scrollbar { display: none; }
  #px-chips > .px-chips > .px-chip { flex: none; }
}

/* every chapter (also the legacy ones) lands below the sticky masthead */
.view .section { scroll-margin-top: var(--px-scroll-gap); }