/* Building a bias — the five-step primer, as it sits inside the V4 Pairs page.
 *
 * PORTED, not re-drawn. Every declaration below is the one `css/pairs-desk.css` carried
 * for the same class when the primer was the third tab on the retired desk. The classes
 * keep their `pd-pr*` names so the restored tab stays diffable against that file and
 * against the page ForexFundamentals renders from the same artifact; re-styling it by eye
 * is how two readers of one document come to disagree about what it says.
 *
 * FIVE THINGS ARE DIFFERENT, and each is a consequence of the new host rather than a
 * change of design. They are the whole delta: everything else is the original.
 *
 *   1. Scoped under `#view-pairs`, because this sheet is loaded on every page and the
 *      original was a whole-page stylesheet that owned its own wrapper.
 *   2. The `--pd-*` role vars, which the original declared on `.pd-wrap`. There is no
 *      `.pd-wrap` here, so they are declared on `.pd-pr` — and on `.pd-prrates`, which is
 *      drawn on the OTHER tab too, outside any `.pd-pr` — and aliased onto the V4 page's
 *      own token names rather than re-resolved from the app tokens twice. The four base
 *      rules the card carries with it (`.pd-eyebrow`, `.pd-rule`, `.pd-h1`, `.pd-h2`) are
 *      scoped to the view for the same reason.
 *   3. The RECESSED LADDER is shifted one notch — see the alias block. The V4 port's own
 *      header records measuring this: `--surface-sunken` matches the reference's recessed
 *      grey in 2 of 8 palette/mode combinations, `--surface-row-active` in 8 of 8. Left
 *      literal, every panel on this tab would have painted a notch lighter than the panels
 *      on the tab beside it, on six of the eight.
 *   4. The hero headline drops from 38px to 30px. That is the ORIGINAL rule's own
 *      reasoning applied to the new neighbours: it was set to 38px to match `.pd-h1--d` on
 *      the story tab, "because a reader switching tabs should not cross a type-scale
 *      boundary". The tab beside it now sets its pair name at 34px and its headline at
 *      23px, so 38px is the boundary that rule existed to prevent.
 *   5. `.pd-prrates` — "What the money earns" — is drawn on BOTH tabs. Its own placement
 *      on The desk's case is `.cheadg` in `pairs-board.css`; everything about how the
 *      card itself looks stays here, so the two appearances cannot diverge.
 */

/* ── the role vars, and the one-notch alias ──────────────────────────────────
   The three font roles stay separate names so the ROLE each plays is still legible in
   the rules below. `--surface-sunken` and `--surface-row-active` are REBOUND for this
   subtree only: `--sunk`/`--sunk2` were computed on `#view-pairs` from the original
   app tokens, so pointing the two names at them shifts the whole recessed ladder down
   one step without touching a single ported declaration. Alias by VALUE, never by name
   — `sunken` and `sunk` are the same word and two different greys. */
/* `.pd-prrates` is named beside `.pd-pr` because "What the money earns" is drawn on BOTH
   halves of a pair's page — in this page's hero, and beside the headline on The desk's
   case, where it has no `.pd-pr` ancestor to inherit any of this from. */
#view-pairs .pd-pr,
#view-pairs .pd-prrates {
  --pd-sans: var(--fsans);
  --pd-mono: var(--fmono);
  --pd-serif: var(--fdisp);
  --pd-line: var(--rule2);
  --pd-t3: var(--faint);
  --surface-sunken: var(--sunk);
  --surface-row-active: var(--sunk2);
  font-family: var(--pd-sans);
}

/* ── the label voice: tracked caps, the design's signature ───────────────────
   Scoped to the view rather than to `.pd-pr` for the same reason: the rate card takes
   these four with it when it is drawn outside the primer. The `pd-` prefix is this
   page's primer vocabulary and nothing else on `#view-pairs` uses it. */
#view-pairs .pd-eyebrow {
  font-family: var(--pd-mono);
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--pd-t3);
  font-size: 10.5px;
}
/* A rule that eats the space between a heading and whatever sits at the far right of
   its line — the design's `flex: 1` spacer, named. */
#view-pairs .pd-rule { flex: 1 1 auto; min-width: 0; }
#view-pairs .pd-h1 {
  margin: 0; font: 600 42px/1.08 var(--pd-serif); letter-spacing: -.022em;
  max-width: 26ch; text-wrap: balance; color: var(--text); text-transform: none;
}
#view-pairs .pd-h2 {
  margin: 0; font: 600 25px/1.2 var(--pd-serif); letter-spacing: -.015em;
  color: var(--text); text-transform: none;
}
/* The three empty states — loading, not written yet, not built for this lineage. */
#view-pairs .pd-empty {
  padding: 26px 22px; border: 1px dashed var(--rule2); border-radius: 14px;
  font-size: 14.5px; line-height: 1.6; color: var(--soft);
}

/* Body copy runs the FULL width of its card. The format's own 64ch reading column was
   set for a 1000px page; on the desk's wider column it left a third of every card empty
   and the page read as a narrow strip with a margin. The display type keeps its
   measure — the hero headline and the closing line are set to a width on purpose, and
   the format does the same. */
#view-pairs .pd-pr { display: flex; flex-direction: column; gap: 24px; }

/* ── hero ──────────────────────────────────────────────────────────────────── */
#view-pairs .pd-prhero {
  display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 44px;
  align-items: start;
}
#view-pairs .pd-prhero-l { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
/* The headline runs the full width of its column too. The format caps it at 14ch over
   a 500px hero column; the desk's is wider, so the same cap broke it into four short
   lines with the right half of the hero empty. The grid still bounds it - the rate panel
   sits beside it - so "full width" here means the column, not the page. */
#view-pairs .pd-h1--pr { font-size: 30px; }
/* The standfirst is ONE paragraph in three parts, so it gets a paragraph gap of its
   own rather than the hero column's section gap. The format nests it the same way. */
#view-pairs .pd-prstands { display: flex; flex-direction: column; gap: 10px; }
#view-pairs .pd-prstand { font-size: 17px; line-height: 1.55; color: var(--text-2); }
/* The design bolds its second standfirst paragraph — the punch line that sits alone.
   Keyed on position rather than on a class the model could forget to ask for. */
#view-pairs .pd-prstand:nth-of-type(2) { color: var(--text); font-weight: 600; }

#view-pairs .pd-prrates {
  display: flex; flex-direction: column; gap: 20px;
  padding: 22px 24px; border-radius: 12px;
  background: var(--surface-sunken); border: 1px solid var(--pd-line);
}
#view-pairs .pd-prside { display: flex; flex-direction: column; gap: 12px; }
#view-pairs .pd-prside-n { font-size: 14px; font-weight: 600; color: var(--text); }
#view-pairs .pd-prrow { display: flex; flex-direction: column; gap: 6px; }
#view-pairs .pd-prrow-t { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
#view-pairs .pd-prrow-l { font-size: 12px; color: var(--text-2); min-width: 0; }
#view-pairs .pd-prrow-v {
  font-family: var(--pd-mono); font-variant-numeric: tabular-nums;
  font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap;
}
#view-pairs .pd-prbar {
  display: block; height: 8px; border-radius: 3px; overflow: hidden;
  background: rgba(var(--hairline-rgb), .95);
}
#view-pairs .pd-prbar > i { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
#view-pairs .pd-prnote { font-size: 11px; line-height: 1.45; color: var(--text-faint); }
#view-pairs .pd-prgap {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding-top: 16px; border-top: 1px solid var(--pd-line);
}
#view-pairs .pd-prgap span { font-size: 13px; line-height: 1.45; color: var(--text-2); max-width: 22ch; }
#view-pairs .pd-prgap b {
  font-family: var(--pd-mono); font-variant-numeric: tabular-nums;
  font-size: 15px; font-weight: 600; color: var(--text); text-align: right;
}

/* The price strip: has the money actually moved. 1px gutters over a hairline ground,
   which is the design's own way of drawing a joined row rather than three cards. */
#view-pairs .pd-prmoves {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px; background: var(--pd-line);
  border: 1px solid var(--pd-line); border-radius: 8px; overflow: hidden;
}
#view-pairs .pd-prmove { display: flex; flex-direction: column; gap: 7px; padding: 14px 18px; background: var(--surface); }
#view-pairs .pd-prmove-v {
  font-family: var(--pd-mono); font-variant-numeric: tabular-nums;
  font-size: 22px; font-weight: 600; line-height: 1.1; color: var(--text);
}
/* The span the figure was measured over, under it. `since_call` is a variable window,
   so without this the biggest number on the page names no period at all. */
#view-pairs .pd-prmove-c { font-size: 12px; line-height: 1.4; color: var(--text-2); }
#view-pairs .pd-prfollows { font-size: 13px; line-height: 1.55; color: var(--text-2); }

/* ── a step ────────────────────────────────────────────────────────────────── */
#view-pairs .pd-prstep {
  border: 1px solid var(--pd-line); border-radius: 12px; overflow: hidden;
  background: var(--surface);
}
#view-pairs .pd-prstep-h {
  display: flex; align-items: center; gap: 14px; padding: 12px 24px;
  background: var(--surface-sunken); border-bottom: 1px solid var(--pd-line);
}
#view-pairs .pd-prstep-n {
  font-family: var(--pd-mono); font-size: 11px; font-weight: 600; letter-spacing: .06em;
  color: var(--accent); background: var(--surface-row-active);
  border: 1px solid var(--accent-edge); border-radius: 4px; padding: 3px 9px;
  white-space: nowrap;
}
/* The verdict, coloured by whether the step AGREES with the desk rather than by which
   currency it names — so a reader scanning five chips is reading the argument, not the
   alphabet. Neutral on a range call, where there is no view to agree with. */
#view-pairs .pd-prv {
  font-family: var(--pd-mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; border-radius: 4px; padding: 4px 10px; white-space: nowrap;
  color: var(--text-2); background: var(--surface-row-active);
  border: 1px solid var(--pd-line);
}
#view-pairs .pd-prv.is-pos { color: var(--bull-text); background: var(--bull-tint); border-color: var(--bull-edge); }
#view-pairs .pd-prv.is-neg { color: var(--bear-text); background: var(--bear-tint); border-color: var(--bear-edge); }

#view-pairs .pd-prstep-b { padding: 26px 24px 28px; display: flex; flex-direction: column; gap: 20px; }
#view-pairs .pd-prstep-t {
  font: 600 22px/1.25 var(--pd-serif); letter-spacing: -.01em; color: var(--text);
  margin: 0;
}
#view-pairs .pd-prblock { display: flex; flex-direction: column; gap: 10px; }
#view-pairs .pd-prp { font-size: 15px; line-height: 1.62; color: var(--text); margin: 0; }

/* The callout is the design's hardest-painted moment: the "why this matters as money
   moving" block. Accent edge and a tinted ground, both from tokens. */
#view-pairs .pd-prcall {
  display: flex; flex-direction: column; gap: 10px;
  border-left: 2px solid var(--accent); border-radius: 0 8px 8px 0;
  padding: 16px 20px; background: var(--surface-sunken);
}
#view-pairs .pd-prcall .pd-eyebrow { color: var(--accent); }
#view-pairs .pd-prex {
  display: flex; flex-direction: column; gap: 9px;
  border-left: 2px solid var(--pd-line); padding: 4px 0 4px 20px;
}
#view-pairs .pd-prtiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px; background: var(--pd-line);
  border: 1px solid var(--pd-line); border-radius: 8px; overflow: hidden;
}
#view-pairs .pd-prtile {
  display: flex; flex-direction: column; gap: 5px; padding: 12px 15px;
  background: var(--surface-sunken); min-width: 0;
}
#view-pairs .pd-prtile-v {
  font-family: var(--pd-mono); font-variant-numeric: tabular-nums;
  font-size: 14px; font-weight: 600; color: var(--text); overflow-wrap: anywhere;
}
#view-pairs .pd-prtile-c { font-size: 12px; line-height: 1.45; color: var(--text-2); }
#view-pairs .pd-prwhere {
  font-size: 12px; line-height: 1.5; color: var(--text-faint); margin: 0;
  padding-top: 12px; border-top: 1px solid var(--pd-line);
}

/* ── the tally ─────────────────────────────────────────────────────────────── */
#view-pairs .pd-prtally { display: flex; flex-direction: column; gap: 12px; }
#view-pairs .pd-prtrows {
  border: 1px solid var(--pd-line); border-radius: 12px; overflow: hidden;
  background: var(--surface); margin-top: 6px;
}
#view-pairs .pd-prtrow {
  display: grid; grid-template-columns: 130px minmax(0, 1fr) 120px; gap: 0 20px;
  align-items: baseline; padding: 14px 22px; border-bottom: 1px solid var(--pd-line);
}
#view-pairs .pd-prtrow:last-child { border-bottom: 0; }
#view-pairs .pd-prtrow .pd-prp { font-size: 14px; line-height: 1.55; }
#view-pairs .pd-prtv {
  font-family: var(--pd-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; text-align: right; color: var(--text-2);
}
#view-pairs .pd-prtv.is-pos { color: var(--bull-text); }
#view-pairs .pd-prtv.is-neg { color: var(--bear-text); }

/* ── the close ─────────────────────────────────────────────────────────────── */
#view-pairs .pd-prclose {
  display: flex; flex-direction: column; gap: 14px;
  padding: 30px 32px; border-radius: 12px;
  background: var(--surface-sunken); border: 1px solid var(--pd-line);
  border-left: 3px solid var(--accent);
}
#view-pairs .pd-prline {
  font: 600 26px/1.35 var(--pd-serif); letter-spacing: -.01em; color: var(--text);
  max-width: 26ch; margin: 0;
}
#view-pairs .pd-prout { font-size: 14px; line-height: 1.6; color: var(--text-2); margin: 0; }
#view-pairs .pd-prdrop { font-size: 12px; line-height: 1.55; color: var(--text-faint); margin: 0; }

/* The correlation note under the tally. Not a warning and not an error — it is the
   sentence that stops a correct count reading as a verdict, so it sits quiet and
   explanatory rather than amber. */
#view-pairs .pd-prcorr {
  font-size: 12.5px; line-height: 1.6; color: var(--text-2); margin: 12px 0 0;
  padding-left: 14px; border-left: 2px solid var(--pd-line);
}

/* The editorial palette paints the hero as an ink band and bleeds it to the page edge.
   `surface.css` already carries that rule for `.pd-prhero` — it matches on the class, so
   it followed the renderer here — but the bleed it reads is the RETIRED desk's page
   padding. These two lines re-point it at this page's own, which is the whole reason the
   band is a token rather than a margin. */
:root[data-palette="editorial"] #view-pairs .pd-prhero {
  --hero-pad: 40px 46px 44px; --hero-bleed-x: -46px;
}

@media (max-width: 1180px) {
  #view-pairs .pd-prhero { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 860px) {
  #view-pairs .pd-h1--pr { font-size: 26px; }
  #view-pairs .pd-prtrow { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  #view-pairs .pd-prtv { text-align: left; }
  #view-pairs .pd-prline { font-size: 22px; }
  #view-pairs .pd-prstep-b { padding: 20px 16px 22px; }
  :root[data-palette="editorial"] #view-pairs .pd-prhero {
    --hero-pad: 30px 20px 34px; --hero-bleed-x: -20px;
  }
}