/* Page layout extends the public illustration kit and Reporter typography, like /research. */
/* The shared bar deliberately uses a high layer; keyboard access must remain above it. */
.predictions .prp-skip:focus { position: fixed; z-index: 2147483001; }
.predictions .pd-hero { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 32px; padding-top: clamp(48px, 8vw, 100px); }
.pd-hero h1 { font-size: clamp(44px, 5.5vw, 74px); line-height: 1.03; letter-spacing: -.025em; }
.pd-lead { font: 400 clamp(20px, 2vw, 24px)/1.45 var(--prp-serif); }
.pd-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 28px; }
.pd-hero figure { margin: 0; }
.pd-hero .pil-art { margin-top: 0; }
.pd-hero figcaption { font-size: 15px; line-height: 1.5; color: var(--prp-body); text-align: center; margin: 14px auto 0; max-width: 34em; }
.pd-section { padding-block: clamp(64px, 8vw, 112px); }
.pd-heading { max-width: 44em; margin-bottom: 32px; }
.predictions h2 { font-size: clamp(34px, 4.2vw, 56px); line-height: 1.07; letter-spacing: -.02em; text-wrap: balance; }
.pd-heading > p { max-width: 38em; font-size: 18px; color: var(--prp-body); }
.pd-label { display: block; font: 12px/1.5 var(--prp-mono); color: var(--pil-cobalt); }

/* One prediction, start to finish */
.pd-example { scroll-margin-top: 24px; }
.pd-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.pd-tabs button { min-height: 44px; padding: 9px 16px; border: 2px solid var(--pil-ink); border-radius: 99px; background: var(--pil-paper); color: var(--pil-ink); font: 500 14px var(--prp-sans); cursor: pointer; }
.pd-tabs button[aria-pressed="true"] { background: var(--pil-yellow); box-shadow: 2px 2px 0 var(--pil-ink); }
.pd-tabs button:disabled { cursor: default; }
.pd-announcement { margin: 0 0 18px; font-size: 14px; color: var(--pil-cobalt); }
.pd-cards { display: grid; gap: 28px; }
.pd-card[hidden] { display: none; }
.pd-who { margin: 0; padding: 18px 24px 14px; border-bottom: var(--pil-line) solid var(--pil-ink); font-weight: 500; }
.pd-guess { padding: 22px 24px 6px; }
.pd-quote { margin: 8px 0 0; font: 400 clamp(26px, 3vw, 36px)/1.18 var(--prp-serif); letter-spacing: -.01em; text-wrap: balance; }
.pd-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 18px 24px 22px; }
.pd-facts dt { font: 12px/1.5 var(--prp-mono); color: var(--pil-cobalt); }
.pd-facts dd { margin: 6px 0 0; font-size: 16px; }
.pd-sure { display: block; width: 150px; max-width: 100%; height: 14px; margin-bottom: 8px; border: 2px solid var(--pil-ink); border-radius: 99px; background: linear-gradient(90deg, var(--pil-yellow) 0 calc(var(--pd-filled, 0) * 10%), var(--pil-paper) 0); }
.pd-sure[data-sure="5"] { --pd-filled: 5; }
.pd-sure[data-sure="7"] { --pd-filled: 7; }
.pd-sure[data-sure="8"] { --pd-filled: 8; }
.pd-jump { margin: 0 24px 22px; cursor: pointer; }
.pd-jump:disabled { cursor: default; }
.pd-card.is-before .pd-jump { animation: pd-nudge 2.4s ease-in-out 1.2s 2; }
.pd-day[hidden] { display: none; }
.pd-result { margin: 0; padding: 20px 24px; border-top: var(--pil-line) solid var(--pil-ink); }
.pd-verdict { display: inline-block; margin: 6px 12px 4px 0; padding: 5px 12px 4px; border: 2px solid var(--pil-ink); border-radius: 99px; font: 600 14px/1.2 var(--prp-sans); }
.pd-result--right .pd-verdict { background: var(--pil-green-soft); }
.pd-result--partly .pd-verdict { background: var(--pil-yellow-soft); }
.pd-result--wrong .pd-verdict { background: #f8d9d3; }
.pd-learned { margin: 0; padding: 18px 24px 22px; background: var(--pil-green-soft); border-top: 1px solid var(--prp-strong); }

/* Honest about how sure it is */
.pd-honest { background: var(--pil-cobalt-soft); }
.pd-split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.pd-split--rule { border-top: 1px solid var(--prp-strong); padding-top: 48px; }
.pd-split p:first-child { margin-top: 0; }
.pd-line { font-size: 18px; }
.pd-proof { margin: 0; padding: 24px; }
.pd-proof-count { margin: 10px 0 18px; font-size: 17px; }
.pd-proof-count b { font: 400 34px/1 var(--prp-serif); }
.pd-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.pd-bars li { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; }
.pd-bar-name { font-size: 15px; font-weight: 500; }
.pd-bar-value { font: 12px/1.4 var(--prp-mono); color: var(--prp-body); }
.pd-bar { grid-column: 1 / -1; display: block; width: 100%; height: 18px; border: 2px solid var(--pil-ink); border-radius: 99px; background: var(--pil-paper); overflow: hidden; appearance: none; -webkit-appearance: none; color: var(--pil-green); }
.pd-bar::-webkit-progress-bar { background: var(--pil-paper); }
.pd-bar::-webkit-progress-value { background: var(--pil-green); }
.pd-bar::-moz-progress-bar { background: var(--pil-green); }
.pd-proof figcaption { margin-top: 18px; font-size: 14px; color: var(--prp-body); }

/* What can Par predict? */
.pd-uses { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.pd-uses li { min-width: 0; padding: 20px 22px; background: var(--pil-paper); border: 1px solid var(--prp-strong); border-radius: 20px; }
.pd-uses p { margin: 8px 0 0; font: 400 21px/1.3 var(--prp-serif); }
.pd-uses .pd-use-more { background: var(--pil-yellow-soft); }

/* We used Par to launch Par */
.pd-launch { background: var(--pil-green-soft); }
.pd-timeline { list-style: none; margin: 8px 0 0; padding: 0; max-width: 820px; }
.pd-timeline li { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 0; border-top: 2px solid var(--pil-ink); }
.pd-timeline li:last-child { border-bottom: 2px solid var(--pil-ink); }
.pd-when { font: 12px/1.4 var(--prp-mono); color: var(--pil-cobalt); }
.pd-what { font-size: 17px; }
.pd-state { padding: 5px 12px 4px; border: 2px solid var(--pil-ink); border-radius: 99px; background: var(--pil-paper); font: 500 13px/1.2 var(--prp-sans); white-space: nowrap; }
.pd-timeline li[data-state="hit"] .pd-state { background: var(--pil-green); color: var(--pil-paper); }
.pd-timeline li[data-state="late"] .pd-state { background: var(--pil-yellow); }
.pd-ready .pd-what { font: 400 24px/1.2 var(--prp-serif); }
.pd-asof { margin: 14px 0 0; font: 12px/1.5 var(--prp-mono); color: var(--prp-muted); }
.pd-close { margin-top: 32px; font-size: 20px; max-width: 34em; }

/* With the AI you already use */
.pd-soon { margin-top: 24px; }
.pd-soon .pil-chip { margin: 0 8px 0 0; vertical-align: 2px; }

.pd-end { text-align: center; }
.pd-end p { font-size: 18px; color: var(--prp-body); }
.pd-end .pil-btn { margin-top: 16px; }

@keyframes pd-nudge { 0%, 100% { transform: none; } 50% { transform: translateY(-3px); } }
@media (max-width: 900px) { .pd-uses { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) {
  .predictions .pd-hero, .pd-split { grid-template-columns: 1fr; gap: 32px; }
  .pd-hero figure { max-width: 540px; margin-inline: auto; }
  .pd-facts, .pd-uses { grid-template-columns: 1fr; }
  .pd-who, .pd-guess, .pd-facts, .pd-result, .pd-learned { padding-inline: 18px; }
  .pd-jump { margin-inline: 18px; }
  .pd-timeline li { grid-template-columns: 1fr auto; gap: 6px 12px; }
  .pd-when { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .predictions { scroll-behavior: auto; } .pd-card.is-before .pd-jump { animation: none; } }