/* =============================================================================
   popups.css — the infographic vocabulary used inside popup bodies.
   Contract: brief/DATA-SHAPE.md ("Class vocabulary for `body` HTML").

   Rules obeyed here:
   • every selector is scoped under `.pop` — nothing leaks to the page;
   • colours come ONLY from the tokens of SPEC §2 (--accent, --accent-line,
     --accent-soft, --fg, --fg-2, --fg-3, --line, --line-2, --bg-3,
     --radius-*, --ease). No colour literal appears in this file;
   • accent is spent only on `.is-hi` (§2 below) and on the ONE chain connector
     dot that feeds the terminal node (§6, D7) — nowhere else;
   • SPEC §3 type-scale variables are used with literal fallbacks, so the file
     still renders correctly if main.css has not declared them yet.

   Contents: 0 body basics · 1 shared primitives · 2 accent · 3 stats ·
   4 bars · 5 chain-v · 6 chain-h · 7 ladder · 8 layers · 9 two-col ·
   10 callout · 11 quote · 12 tags · 13 tbl · 14 compare · 15 proof-slot ·
   16 mobile · 17 reduced motion.
   ========================================================================= */


/* --- 0. Body basics ---------------------------------------------------------
   Rhythm between blocks, paragraphs, generic lists and `.note`.
   `.sub` is the one class added beyond DATA-SHAPE: bodies need a small caption
   above a chart or a list ("Несценарные шоу, Nielsen, первая половина 2026").
   -------------------------------------------------------------------------- */
/* :where() keeps the reset at zero specificity so the rhythm rule below —
   which has the same selector weight — always wins on margin-top. Nothing
   further down this file may use the `margin` shorthand on a body block. */
.pop .pop-body :where(p, ul, ol, dl, dd, table, blockquote, figure, h1, h2, h3, h4, h5, h6) { margin: 0; }
.pop .pop-body > * + * { margin-top: clamp(22px, 2.4vw, 34px); }
.pop .pop-body > .sub + * { margin-top: 0; }
.pop .pop-body > .bars + .note { margin-top: 12px; }   /* caption hugs its chart */

.pop .pop-body p {
  max-width: 62ch; color: var(--fg-2);
  font-size: var(--t-body, clamp(17px, 1.2vw, 19px)); line-height: 1.55;
}
.pop .callout p + p,
.pop .quote p + p { margin-top: .7em; }
.pop .pop-body strong { color: var(--fg); font-weight: 600; }

.pop .sub { margin-bottom: 14px; color: var(--fg-3); line-height: 1.4; }
.pop .note {
  max-width: 62ch; color: var(--fg-3);
  font-size: var(--t-small, 15px); line-height: 1.5;
}

.pop .pop-body ul { padding: 0; max-width: 62ch; list-style: none; }
.pop .pop-body ul li {
  position: relative; padding-left: 22px; color: var(--fg-2);
  font-size: var(--t-small, 15px); line-height: 1.5;
}
.pop .pop-body ul li + li { margin-top: 10px; }
.pop .pop-body ul li::before {          /* 8px dash instead of a bullet glyph */
  content: ""; position: absolute; top: .62em; left: 2px;
  width: 8px; height: 2px; background: var(--fg-3);
}


/* --- 1. Shared primitives ---------------------------------------------------
   Three looks repeat across the components; defining them once keeps the
   accent budget and the type scale honest.
   -------------------------------------------------------------------------- */

/* 1a. label typography (eyebrows, node captions, table heads) */
.pop .sub,
.pop .chain-node,
.pop .layer,
.pop .ladder-cap,
.pop .quote cite,
.pop .callout::before,
.pop .tbl caption,
.pop .tbl th,
.pop .proof-slot {
  font-size: var(--t-label, 12.5px); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
}

/* 1b. tile surface */
.pop .stat,
.pop .layer,
.pop .ladder-step,
.pop .compare-i {
  border: 1px solid var(--line);
  border-radius: var(--radius-s, 10px);
  background: var(--bg-3);
}

/* 1c. big tabular number (SPEC §3 --t-num-s, Manrope 700) */
.pop .stat-n,
.pop .compare-n {
  color: var(--fg); font-size: var(--t-num-s, clamp(34px, 4vw, 56px));
  font-weight: 700; line-height: .95; letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
}


/* --- 2. Accent — the complete list ------------------------------------------
   Everything raspberry in a popup body is declared here (plus the single
   terminal chain connector dot, §6 D7). Nothing else may take the accent.
   -------------------------------------------------------------------------- */
.pop .stat.is-hi,
.pop .layer.is-hi,
.pop .chain-node.is-hi,
.pop .compare-i.is-hi,
.pop .ladder-step.is-hi { border-color: var(--accent-line); }

.pop .layer.is-hi,
.pop .chain-node.is-hi,
.pop .ladder-step.is-hi,
.pop .stat.is-hi .stat-n,
.pop .compare-i.is-hi .compare-n { color: var(--accent-tx); }

.pop .ladder-step.is-hi { background: var(--accent-soft); }
.pop .bar.is-hi .bar-fill { background: var(--accent); }


/* --- 3. .stats — grid of stat tiles; `.stat--hero` = the two leads in p2a --- */
.pop .stats {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.pop .stat { padding: clamp(20px, 2vw, 28px); }
.pop .stat--hero { grid-column: span 2; }
.pop .stat--hero .stat-l { max-width: 46ch; }

.pop .stat-u {
  margin-top: 8px; color: var(--fg-2);
  font-size: var(--t-small, 15px); font-weight: 500; line-height: 1.3;
}
.pop .stat-l {
  margin-top: 12px; color: var(--fg-2);
  font-size: var(--t-small, 15px); line-height: 1.5;
}


/* --- 4. .bars — horizontal bar list -----------------------------------------
   Width comes from the inline `--w` custom property. Without the renderer's
   `.is-in` class the bars render straight at their final width; with it they
   grow from 0 over 1.2s. Both paths are covered (transition + keyframe), so a
   renderer that instead flips `--w` from 0 also animates.
   -------------------------------------------------------------------------- */
.pop .bars { display: grid; gap: 12px; }
.pop .bar {
  display: grid; align-items: center; gap: 16px;
  grid-template-columns: minmax(120px, 200px) 1fr auto;
}
.pop .bar-l { color: var(--fg-2); font-size: var(--t-small, 15px); line-height: 1.3; }
.pop .bar-track {
  position: relative; height: 10px; overflow: hidden;
  border-radius: 999px; background: var(--line);
}
.pop .bar-fill {
  width: var(--w, 0%); height: 100%; border-radius: inherit;
  background: var(--fg-3);
  transition: width 1.2s var(--ease, cubic-bezier(.2, .7, .2, 1));
}
.pop .bar-v {
  min-width: 5ch; text-align: right; color: var(--fg);
  font-size: var(--t-small, 15px); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.pop .is-in .bar-fill {
  animation: pop-bar-grow 1.2s var(--ease, cubic-bezier(.2, .7, .2, 1)) both;
}
@keyframes pop-bar-grow { from { width: 0; } to { width: var(--w, 0%); } }


/* --- 5. .chain-v — vertical chain (p1, p2b) ---------------------------------
   Connector = 1px hairline with an accent dot, drawn by the FOLLOWING node.
   -------------------------------------------------------------------------- */
.pop .chain-v { display: grid; gap: 34px; max-width: 40ch; }
.pop .chain-node {
  position: relative; padding: 14px 18px; line-height: 1.3; color: var(--fg);
  border: 1px solid var(--line-2); border-radius: var(--radius-s, 10px);
}
.pop .chain-v .chain-node + .chain-node::before {
  content: ""; position: absolute; top: -34px; left: 24px;
  width: 1px; height: 34px; background: var(--line-2);
}
.pop .chain-v .chain-node + .chain-node::after {
  content: ""; position: absolute; top: -20px; left: 21px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--fg-3);
}
/* B10 — the nodes are labels, not rows: at 40ch wide the box ran two thirds of
   the popup with the word ending a third of the way in. From 1024px up the
   chain shrink-wraps and every node hugs its own label. */
@media (min-width: 1024px) {
  .pop .chain-v { display: inline-grid; }
  .pop .chain-v .chain-node { width: max-content; max-width: 100%; }
}


/* --- 6. .chain-h — horizontal stepped line (p2d); vertical < 760px, see §16 - */
.pop .chain-h {
  --chain-gap: clamp(14px, 2vw, 30px);
  display: flex; flex-wrap: nowrap; align-items: stretch; gap: var(--chain-gap);
}
.pop .chain-h .chain-node {
  flex: 1 1 0; min-width: 0; padding: 13px 12px;
  /* D9 — `break-word` is what printed «ПЕРЕЛОМНЫ / Й МОМЕНТ»: it will split a
     word mid-letter as soon as the column is one pixel narrower than the word,
     and above 1040px the node was back at 13.5px in a ~106px column. The type
     below is sized so the longest word FITS instead, and the property that let
     it break is off. `hyphens: manual` states the intent: this file never asks
     the browser to hyphenate Russian. */
  overflow-wrap: normal;
  hyphens: manual;
  -webkit-hyphens: manual;
}
.pop .chain-h .chain-node + .chain-node::before {
  content: ""; position: absolute; top: 50%;
  left: calc(-1 * var(--chain-gap)); width: var(--chain-gap);
  height: 1px; background: var(--line-2);
}
.pop .chain-h .chain-node + .chain-node::after {
  content: ""; position: absolute; top: 50%; margin-top: -3px;
  left: calc(-1 * var(--chain-gap) / 2 - 3.5px);
  width: 7px; height: 7px; border-radius: 50%; background: var(--fg-3);
}
/* D7 — a connector dot on EVERY joint printed four or five raspberry beads per
   chain, so a popup body opened with more accent than the main screen it came
   from (SPEC §2: ~3 accent objects per viewport). Same rule as the main-screen
   chains (P1, blocks.css § CHAIN): the intermediate joints are muted and only
   the connector feeding the TERMINAL node stays raspberry, so the accent marks
   the outcome. Same specificity as the two rules above (four class-level
   compound selectors each), so source order is what decides — keep it here. */
.pop .chain-v .chain-node:last-child::after,
.pop .chain-h .chain-node:last-child::after { background: var(--accent); }

/* D9 — the horizontal chain only fits from 1024px up, and that is a measured
   fact, not a preference. Six uppercase Russian labels need one node of ~92px
   of CONTENT («ПЕРЕЛОМНЫЙ» at 12px), and the row's budget is
     [min(78vw, 1100) − popup padding − 5 gaps] / 6 − 2 × node padding.
   The popup padding itself steps from 80px to ~123px at 1100px, so the budget
   is not monotonic. Measured node content with the shipped geometry:
     768 → 62px · 1024 → 84px · 1180 → 97px · 1440 → 117px.
   768 cannot hold the word at ANY size at or above the 10.5px label floor this
   project holds (E6/C8), so below 1024 the chain stacks — the same vertical
   construction `p1` uses at every width (§6b). The old rule capped the small
   size at 1040px, which is why 1041+ went back to `--t-label` (13.5px from
   1024, main.css §12) in a 100px column and printed «ПЕРЕЛОМНЫ / Й МОМЕНТ».
   Two bands above that, both measured with 4px+ of slack in qa/phase8/g4.json
   → D9: 11.5px where the budget is tightest, 12.5px (the popup's own pinned
   label size, §18) once the card stops growing. */
@media (min-width: 1024px) {
  .pop .chain-h { --chain-gap: clamp(14px, 1.6vw, 26px); }
  .pop .chain-h .chain-node { padding: 12px 6px; font-size: 11.5px; letter-spacing: .06em; }
}
@media (min-width: 1280px) {
  .pop .chain-h .chain-node { padding: 12px 8px; font-size: 12.5px; }
}

/* --- 6b. .chain-h stacked below 1024 (was < 760px) ------------------------- */
@media (max-width: 1023px) {
  .pop .chain-h { display: grid; grid-template-columns: 1fr; gap: 34px; }
  .pop .chain-h .chain-node + .chain-node::before {
    top: -34px; left: 24px; width: 1px; height: 34px;
  }
  .pop .chain-h .chain-node + .chain-node::after {
    top: -20px; left: 21px; margin-top: 0;
  }
}


/* --- 7. .ladder — rate scale $0,50 → $6 (p4b) + the math tile --------------- */
.pop .ladder { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.pop .ladder-step {
  flex: 1 1 82px; padding: 16px 12px; text-align: center;
  color: var(--fg-2); font-size: clamp(16px, 1.6vw, 20px);
  font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums;
}
.pop .ladder-cap {
  display: block; margin-top: 8px; color: var(--fg-2);
  font-size: 11px; font-weight: 500; letter-spacing: .1em;
}
.pop .ladder-math {
  padding: 20px clamp(20px, 2vw, 28px); color: var(--fg);
  border: 1px solid var(--line-2); border-radius: var(--radius-s, 10px);
  font-size: clamp(16px, 1.6vw, 20px); font-weight: 600; line-height: 1.4;
  font-variant-numeric: tabular-nums;
}


/* --- 8. .layers — three stacked labels (p4a), each inset a step further ----- */
.pop .layers { display: grid; gap: 8px; max-width: 46ch; }
.pop .layer { padding: 18px 22px; color: var(--fg-2); }
.pop .layer:nth-child(2) { margin-left: clamp(0px, 3vw, 34px); }
.pop .layer:nth-child(3) { margin-left: clamp(0px, 6vw, 68px); }


/* --- 9. .two-col — two lists side by side (p2c, p2d, p6a) ------------------- */
.pop .two-col {
  display: grid; align-items: start;
  grid-template-columns: 1fr 1fr; gap: clamp(24px, 3vw, 48px);
}
.pop .two-col > * { min-width: 0; }


/* --- 10. .callout — editorial correction; label comes from data-label ------- */
.pop .callout {
  position: relative;
  padding: clamp(46px, 4vw, 54px) clamp(22px, 2.2vw, 30px) clamp(22px, 2.2vw, 30px);
  border: 1px solid var(--line-2); border-radius: var(--radius-s, 10px);
}
.pop .callout::before {
  content: attr(data-label); position: absolute;
  top: clamp(20px, 2.2vw, 26px); left: clamp(22px, 2.2vw, 30px);
  color: var(--fg-3);
}
.pop .callout p { color: var(--fg); }


/* --- 11. .quote — Forbes business effect; hairline only, no quote glyphs ---- */
.pop .quote {
  padding: 4px 0 4px clamp(20px, 2.2vw, 28px);
  border-left: 1px solid var(--line-2);
}
.pop .quote p { color: var(--fg); max-width: 56ch; }
.pop .quote cite {
  display: block; margin-top: 14px; color: var(--fg-3); font-style: normal;
}
.pop .quote + .quote { margin-top: 20px; }


/* --- 12. .tags — compact word list (p2c life themes); deliberately colourless */
.pop .tags {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 0; max-width: none; list-style: none;
}
.pop .pop-body .tags li {
  margin-top: 0; padding: 9px 16px; color: var(--fg-2);
  border: 1px solid var(--line); border-radius: 999px;
  font-size: var(--t-small, 15px); line-height: 1.3;
}
.pop .pop-body .tags li::before { content: none; }


/* --- 13. .tbl — public counters table (case-subs); `.num` right-aligned ----- */
.pop .tbl { width: 100%; border-collapse: collapse; font-size: var(--t-small, 15px); }
.pop .tbl caption { margin-bottom: 12px; color: var(--fg-3); text-align: left; }
.pop .tbl th {
  padding: 0 0 10px; color: var(--fg-3); text-align: left;
  border-bottom: 1px solid var(--line-2); letter-spacing: .1em;
}
.pop .tbl td {
  padding: 13px 0; color: var(--fg-2); vertical-align: baseline;
  border-bottom: 1px solid var(--line);
}
.pop .tbl th + th,
.pop .tbl td + td { padding-left: 16px; }
.pop .tbl td:first-child { color: var(--fg); }
.pop .tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.pop .tbl a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--line-2);
  text-underline-offset: 3px;
  transition: color .3s var(--ease, ease), text-decoration-color .3s var(--ease, ease);
}
.pop .tbl a:hover, .pop .tbl a:focus-visible {
  color: var(--accent); text-decoration-color: var(--accent);
}
.pop .tbl a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.pop .tbl tbody tr:last-child td { border-bottom: 0; }


/* --- 14. .compare — the "2 → 5" pair with captions (p2a) -------------------- */
.pop .compare {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(16px, 2.5vw, 36px);
}
.pop .compare-i { flex: 1 1 180px; padding: clamp(20px, 2vw, 28px); }
.pop .compare-c {
  margin-top: 12px; color: var(--fg-2);
  font-size: var(--t-small, 15px); line-height: 1.45;
}
.pop .compare-arw { flex: 0 0 auto; color: var(--fg-3); font-size: 24px; line-height: 1; }


/* --- 15. .proof-slot — dashed 16:9 frame for a case with no screenshot yet -- */
.pop .proof-slot {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 16 / 9; padding: 24px; text-align: center;
  border: 1px dashed var(--line-2); border-radius: var(--radius-m, 18px);
  background: repeating-linear-gradient(135deg,
    rgba(255,255,255,.02) 0 8px, transparent 8px 16px);
  color: var(--fg-2); line-height: 1.6;
}
.pop .proof-cap { max-width: 34ch; }
.pop .proof-pill {
  position: absolute; top: 14px; left: 14px;
  padding: 5px 12px;
  border: 1px solid var(--line-2); border-radius: 999px;
  color: var(--fg-3);
  font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; line-height: 1.4;
}


/* --- 16. Mobile < 760px (SPEC §6) -------------------------------------------
   Stat tiles stack, two-col collapses, bars keep a full-width track under
   their label, the ladder becomes a 3-column grid. The horizontal chain turns
   vertical much earlier now — at 1023px, in §6b.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .pop .stats { grid-template-columns: minmax(0, 1fr); }
  .pop .stat--hero { grid-column: 1 / -1; }
  .pop .proof-pill { top: 10px; left: 10px; }

  .pop .two-col { grid-template-columns: 1fr; }

  .pop .bar { grid-template-columns: 1fr auto; gap: 6px 12px; }
  .pop .bar-l { grid-area: 1 / 1; }
  .pop .bar-v { grid-area: 1 / 2; }
  .pop .bar-track { grid-area: 2 / 1 / 3 / -1; }

  /* the stacked chain-h now starts at 1023px, not 760px — see §6b */

  /* D10 — as a wrapping flex row the seven steps broke 5 + 2 (because `$0,50`
     is twice the width of `$1`, so `flex: 1 1 60px` gave it twice the space),
     and the highlighted `$6` — the top of the scale — landed second on the
     last row, reading as an afterthought. A fixed 3-column grid makes every
     rate the same width, `minmax(0, 1fr)` stops `$0,50` from pushing its
     column, and the highlight spans the full width on its own row: the ladder
     climbs 0,50→5 over two rows and arrives at $6. */
  .pop .ladder {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
  .pop .ladder-step { padding: 13px 8px; }
  .pop .ladder-step.is-hi { grid-column: 1 / -1; }

  .pop .layer:nth-child(2),
  .pop .layer:nth-child(3) { margin-left: 0; }

  .pop .compare { gap: 12px; }
  .pop .compare-arw { flex: 0 0 100%; text-align: center; transform: rotate(90deg); }

  .pop .tbl { font-size: 14px; }
  .pop .tbl th + th,
  .pop .tbl td + td { padding-left: 10px; }
}


/* --- 17. Reduced motion (SPEC §0.8) — final values, no growth -------------- */
@media (prefers-reduced-motion: reduce) {
  .pop .bar-fill { transition: none; }
  .pop .is-in .bar-fill { animation: none; width: var(--w, 0%); }
}

/* --- 18. Desktop type lift (>= 1024px): NOT here ---------------------------
   main.css § 12 raises --t-label to 13.5px from 1024px for the main screens.
   Popup internals were tuned separately and stay where they were, so the one
   group in this file that reads the token is pinned back. */
@media (min-width: 1024px) {
  .pop .ladder-cap,
  .pop .quote cite,
  .pop .callout::before,
  .pop .tbl caption,
  .pop .tbl th,
  .pop .proof-slot { font-size: 12.5px; }
}