/* The People's Forecast outside the game: the band (home page and /lab), the tile among the Signal deck, and the
   layer the game opens in over Signal. The game's own colours: ink, paper, its warm yellow and its blue. */

.pf-band, .pf-layer, .deck-forecast-tile {
  --pf-ink: #121211;
  --pf-paper: #edeae3;
  --pf-muted: #b3b1a9;
  --pf-line: rgba(237, 234, 227, .14);
  --pf-gold: #f2c46d;
  --pf-blue: #9db9f5;
}

.pf-kicker { margin: 0; color: var(--pf-gold); font-size: .82rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.pf-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.pf-go { display: inline-flex; align-items: center; min-height: 46px; padding: 0 22px; border-radius: 999px; background: var(--pf-paper); color: #0f1115; font-weight: 600; font-size: 1rem; text-decoration: none; transition: background .2s ease, transform .2s ease; }
.pf-go:hover { background: #fff; transform: translateY(-1px); }
.pf-go:focus-visible, .pf-sample:focus-visible, .deck-forecast-tile:focus-visible { outline: 2px solid var(--pf-gold); outline-offset: 3px; }
.pf-meta { color: var(--pf-muted); font-size: .9rem; }

/* The band: the game's map behind; what you do in three steps; one real 2030 call beside it. */
.pf-band { position: relative; overflow: hidden; padding-block: clamp(56px, 8vw, 104px); background: var(--pf-ink); color: var(--pf-paper); isolation: isolate; }
.pf-band::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url("/lab/peoples-forecast/card-1600.webp") 70% 50% / cover no-repeat; opacity: .5; }
.pf-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--pf-ink) 0%, rgba(18, 18, 17, .93) 42%, rgba(18, 18, 17, .5) 100%); }
.pf-band-shell { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.pf-band-copy { display: grid; gap: 18px; max-width: 640px; }
.pf-band h2, .pf-band h3 { margin: 0; font-size: clamp(2.2rem, 4.2vw, 3.8rem); line-height: 1.04; font-weight: 500; letter-spacing: -.01em; text-wrap: balance; }
.pf-lead { margin: 0; color: #d6d3ca; font-size: 1.08rem; line-height: 1.55; max-width: 56ch; }
.pf-steps { list-style: none; margin: 4px 0 6px; padding: 0; display: grid; gap: 12px; counter-reset: pf; }
.pf-steps li { display: grid; grid-template-columns: 30px 88px minmax(0, 1fr); align-items: baseline; gap: 4px 10px; counter-increment: pf; }
.pf-steps li::before { content: counter(pf); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--pf-line); color: var(--pf-gold); font-size: .85rem; font-weight: 600; align-self: start; }
.pf-steps b { font-weight: 600; font-size: 1rem; }
.pf-steps span { color: #c9c6bd; font-size: .97rem; line-height: 1.5; }

/* One real call, as the game asks it. The whole card opens the forecast. */
.pf-sample { display: grid; gap: 12px; padding: clamp(20px, 2.4vw, 28px); border: 1px solid var(--pf-line); border-radius: 22px; background: rgba(18, 18, 17, .78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: var(--pf-paper); text-decoration: none; transition: border-color .2s ease, transform .2s ease; }
.pf-sample:hover { border-color: rgba(242, 196, 109, .55); transform: translateY(-2px); }
.pf-sample-k { color: var(--pf-muted); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
.pf-sample-tag { color: var(--pf-blue); font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.pf-sample-q { font-size: clamp(1.25rem, 1.8vw, 1.5rem); line-height: 1.25; font-weight: 500; text-wrap: balance; }
.pf-sample-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pf-sample-opts span { display: grid; place-items: center; min-height: 52px; border-radius: 14px; border: 1px solid var(--pf-line); background: rgba(237, 234, 227, .06); font-weight: 600; text-align: center; padding: 0 8px; }
.pf-sample-conf { display: grid; gap: 6px; }
.pf-sample-conf small { color: var(--pf-muted); font-size: .82rem; }
.pf-sample-conf > span { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.pf-sample-conf i { font-style: normal; display: grid; place-items: center; min-height: 34px; border-radius: 10px; border: 1px solid var(--pf-line); font-size: .85rem; color: #d6d3ca; font-variant-numeric: tabular-nums; }
.pf-sample-foot { color: var(--pf-muted); font-size: .85rem; }
@media (max-width: 860px) {
  .pf-band-shell { grid-template-columns: 1fr; }
  .pf-band::before { background-position: 60% 0; background-size: 160% auto; opacity: .38; }
  .pf-band::after { background: linear-gradient(180deg, rgba(18, 18, 17, .6) 0%, var(--pf-ink) 46%); }
}
@media (max-width: 420px) {
  .pf-steps li { grid-template-columns: 30px minmax(0, 1fr); }
  .pf-steps span { grid-column: 2; }
}

/* The tile among the Signal deck: the size of a signal, in the forecast's own colours. */
.page-signal .deck .deck-forecast-tile {
  display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: var(--pf-paper);
  background: #151618 radial-gradient(120% 90% at 100% 0%, rgba(157, 185, 245, .16), transparent 60%);
  border: 1px solid #ffffff14; border-top: 3px solid var(--pf-gold);
  box-shadow: 0 1px 0 #2a2b2e, 0 2px 0 #222326, 0 22px 34px -18px rgba(0, 0, 0, .45);
}
.page-signal .deck .deck-forecast-tile:hover { border-color: #ffffff2e; border-top-color: var(--pf-gold); }
.dft-k { color: var(--pf-gold); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.page-signal .deck .deck-forecast-tile .deck-hook { color: var(--pf-paper); }
.dft-foot { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.dft-go { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border-radius: 999px; background: var(--pf-paper); color: #0f1115; font-size: 13.5px; font-weight: 600; }
.dft-meta { color: var(--pf-muted); font-size: 12px; }

/* The layer the game opens in over Signal. */
.pf-layer { position: fixed; inset: 0; z-index: 2000; background: var(--pf-ink); }
.pf-layer iframe { display: block; width: 100%; height: 100%; border: 0; }
html.pf-open, html.pf-open body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .pf-go, .pf-sample { transition: none; } .pf-go:hover, .pf-sample:hover { transform: none; } }