/* ============================================================
   The Policy Page — page-only styles, direction E (R-121; R-118(a), R-120(b)).
   Loads after e.css and never edits it. Newsreader only.
   R-111(i) lifts R-78 for this page only. The hook classes policy-page.js reads
   (.compare*, .pin, .is-armed/.is-in/.is-on, [data-reveal]/.is-revealed,
   [data-swap]/.pp-swap-card/.pp-swap-cap, .pp-count .rcpt, .pp-clip) are kept and
   restyled here. Everything is readable at rest and without script; motion only
   arms when the script runs and reduced motion is off.
   ============================================================ */

/* ---------- Masthead ---------- */
.pp-eyebrow a { color: var(--e-soft); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; text-decoration-color: var(--e-underline); }
.dir-e .pp-eyebrow a:hover { color: var(--e-ink); }
.e-masthead .pp-stamp { margin-top: 32px !important; margin-bottom: 0 !important; font-size: var(--t-label); }

/* ---------- The compare: the thesis ---------- */
.dir-e .pp-hero { padding-top: 96px; }
.compare.e-figure { margin-top: 0; }
.compare-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px 32px; margin-bottom: 20px; }
.compare-bar .compare-label { margin-bottom: 0 !important; }
.compare-seg { display: flex; gap: 28px; }
.compare-seg button {
    font: inherit; font-size: var(--t-small); line-height: 1.3; color: var(--e-soft);
    background: none; border: 0; padding: 10px 0; cursor: pointer;
    text-decoration: underline; text-decoration-color: transparent;
    text-underline-offset: 6px; text-decoration-thickness: 1px;
    transition: color .2s ease, text-decoration-color .2s ease;
}
.compare-seg button:hover { color: var(--e-ink); }
.compare-seg button[aria-pressed="true"] { color: var(--e-ink); text-decoration-color: var(--e-ink); }
.compare-seg button:focus-visible { outline: 2px solid var(--e-ink); outline-offset: 3px; }

.compare-mat { padding: 40px 6% 0; background: var(--e-surface); }
.compare-frame { display: grid; }
.compare-shot { grid-area: 1 / 1; position: relative; align-self: start; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s; }
.compare-shot.is-on { opacity: 1; visibility: visible; transition: opacity .35s ease; }
.compare-shot img { width: 100%; height: auto; box-shadow: 0 0 0 1px var(--e-rule); }

/* Pins: markers on the screenshot, keyed to the legend. Serif numerals. */
.pin {
    position: absolute; transform: translate(-50%, -50%);
    width: 28px; height: 28px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--e-ink); color: var(--e-ground);
    font-family: "Newsreader", Georgia, serif; font-size: var(--t-label); font-weight: 600; line-height: 1;
    font-variant-numeric: lining-nums;
    box-shadow: 0 0 0 3px var(--e-surface);
    transition: opacity .25s ease, transform .25s ease;
}
.compare.is-armed .compare-shot[data-view="after"] .pin:not(.is-in) { opacity: 0; transform: translate(-50%, -50%) scale(.6); }

.compare-legend { counter-reset: pin; max-width: 760px; margin-top: 32px; }
.compare-legend li {
    counter-increment: pin; display: grid; grid-template-columns: 40px 1fr; align-items: baseline;
    padding: 14px 0; border-top: 1px solid var(--e-rule); font-size: var(--t-body); line-height: 1.55;
    transition: opacity .25s ease;
}
.compare-legend li:last-child { border-bottom: 1px solid var(--e-rule); }
.compare-legend li::before { content: counter(pin); color: var(--e-soft); font-variant-numeric: lining-nums; }
.compare-legend[hidden] { display: none; }
.compare.is-armed .compare-legend[data-view="after"] li:not(.is-in) { opacity: 0; }
.compare figcaption { margin-top: 20px; }

/* ---------- Article rhythm ---------- */
.dir-e .e-prose .pp-tag { margin-top: 88px !important; margin-bottom: 0 !important; }
.dir-e .e-prose h2 + .pp-tag { margin-top: 64px !important; }
.dir-e .e-prose .pp-tag + h3 { margin-top: 6px !important; }
.pp-decision { margin-top: 120px; }
.e-figure + .e-figure-pair { margin-top: 32px; }
.e-figure-pair + .e-figure-pair { margin-top: 32px; }
.e-figure-pair .e-figure-media { align-self: start; }
.e-figure-pair .e-figure { align-self: start; }

/* Metric strips, now .e-facts (R-118(a)). .rcpt is a script hook only: no style. */
.pp-count .rcpt { font: inherit; color: inherit; }
.pp-count li { font-variant-numeric: lining-nums tabular-nums; }
.pp-source { margin-top: 14px !important; font-size: var(--t-label); }
.pp-after-facts { margin-top: 56px; }

/* ---------- Banners, and the pill they replace ---------- */
.pp-stack { display: grid; gap: 16px; }
.pp-pill { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 0 0 8px !important; }
.pp-pill-label { font-size: var(--t-label); color: var(--e-soft); }
.pp-pill-chip { font-size: var(--t-label); line-height: 1; color: var(--e-ink); background: var(--e-surface); border: 1px solid var(--e-underline); border-radius: 999px; padding: 7px 14px; }
.pp-banner img { width: 100%; height: auto; }
.pp-sentence.is-armed .pp-banner { opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; }
.pp-sentence.is-armed.is-revealed .pp-banner { opacity: 1; transform: none; }
.pp-sentence.is-armed.is-revealed .pp-banner:nth-of-type(2) { transition-delay: .45s; }
.pp-sentence.is-armed.is-revealed .pp-banner:nth-of-type(3) { transition-delay: .9s; }
.pp-sentence.is-armed.is-revealed .pp-banner:nth-of-type(4) { transition-delay: 1.35s; }

/* ---------- Billing: one card, contents change ----------
   Unarmed: a static pair with a caption under each. Armed: one half-width slot
   that crossfades, its caption crossfading with it. */
.pp-swap { max-width: 1000px; }
.pp-swap-mat { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.pp-swap-mat .e-figure-media img { width: 100%; height: auto; }
.pp-swap-caps { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.pp-swap.is-armed .pp-swap-mat { grid-template-columns: 1fr; max-width: 50%; }
.pp-swap.is-armed .pp-swap-card { grid-area: 1 / 1; opacity: 0; transition: opacity .6s ease; }
.pp-swap.is-armed .pp-swap-card.is-on { opacity: 1; }
.pp-swap.is-armed .pp-swap-caps { grid-template-columns: 1fr; max-width: 50%; }
.pp-swap.is-armed .pp-swap-cap { grid-area: 1 / 1; opacity: 0; transition: opacity .6s ease; }
.pp-swap.is-armed .pp-swap-cap.is-on { opacity: 1; }

/* ---------- Clips ---------- */
.dir-e .pp-clip { background: var(--e-surface); box-shadow: none; }

/* ---------- How it ships ---------- */
.dir-e .e-prose .e-pullquote { margin-top: 64px !important; }
.pp-carry { margin-top: 80px; }
.pp-carry td { width: 50%; }
.pp-carry:focus-visible { outline: 2px solid var(--e-ink); outline-offset: 6px; }
.pp-count + .pp-next { margin-top: 40px; }
.pp-next { font-size: var(--t-body); }
.dir-e .pp-next a { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; text-decoration-color: var(--e-underline); display: inline-block; padding: 10px 0; margin: -10px 0; }

/* ---------- Timeline ---------- */
.pp-timeline time { font-variant-numeric: lining-nums; }
.pp-timeline .is-now time { color: var(--e-ink); }
.pp-after-timeline { margin-top: 48px; }

/* ---------- Lessons and credits ---------- */
.dir-e .pp-lessons h2 + h3 { margin-top: 40px !important; }
.dir-e .pp-lessons h3 { margin-top: 48px !important; }
.dir-e .pp-lessons h3 + p { margin-top: 12px !important; }
.dir-e .pp-lessons .pp-credits { margin-top: 64px !important; margin-bottom: 0 !important; padding-top: 24px; border-top: 1px solid var(--e-rule); font-size: var(--t-label); line-height: 1.55; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .pp-swap.is-armed .pp-swap-mat, .pp-swap.is-armed .pp-swap-caps { max-width: none; }
    .pp-decision { margin-top: 96px; }
}
@media (max-width: 720px) {
    .dir-e .pp-hero { padding-top: 64px; }
    .compare-mat { padding: 20px 4% 0; }
    .pin { width: 22px; height: 22px; font-size: 12px; box-shadow: 0 0 0 2px var(--e-surface); }
    .compare-seg { gap: 20px; }
    .compare-legend li { grid-template-columns: 32px 1fr; font-size: var(--t-small); }
    .pp-swap-mat, .pp-swap-caps { gap: 16px; }
    .e-figure + .e-figure-pair, .e-figure-pair + .e-figure-pair { margin-top: 32px; }
    .dir-e .e-prose .pp-tag { margin-top: 72px !important; }
}
/* Phone: the carry table stacks, each prototype row above its production-spec row. */
@media (max-width: 640px) {
    .pp-carry { overflow: visible; }
    .pp-carry table, .pp-carry tbody, .pp-carry tr, .pp-carry td { display: block; width: auto; }
    .pp-carry thead { display: none; }
    .pp-carry tr { padding: 16px 0; border-bottom: 1px solid var(--e-rule); }
    .pp-carry tr:first-child { border-top: 1px solid var(--e-rule); }
    .pp-carry td { border: 0; padding: 0; }
    .pp-carry td + td { margin-top: 10px; }
    .pp-carry td + td::before { content: "In production \2192\00a0"; display: block; margin-bottom: 2px; font-size: var(--t-label); color: var(--e-soft); }
}