/* ============================================================
   Progress Tab — /facts/* + hub styles. Reuses landing tokens, nav,
   .cta, .foot from styles.css (linked first); this is fact-page chrome.
   ============================================================ */
.facts-body { background: var(--bg); color: var(--ink); }
.f-wrap { max-width: 680px; margin: 0 auto; padding: 28px 24px 90px; }

.f-crumb { color: var(--mute); font-size: .88rem; margin-bottom: 18px; }
.f-crumb a { color: var(--teal-dark); text-decoration: none; }
.f-crumb a:hover { text-decoration: underline; }

.f-q { font-family: var(--serif); font-weight: 600; font-size: clamp(1.9rem, 4.4vw, 2.8rem); line-height: 1.14; letter-spacing: -.012em; color: var(--head); margin: 0; }
.f-lead { color: var(--body); font-size: 1.12rem; line-height: 1.6; margin: 18px 0 0; }

/* guess widget */
.f-guess { margin: 26px 0 0; padding: 20px 22px; background: rgba(46,107,90,.06); border: 1px solid rgba(46,107,90,.14); border-radius: 16px; }
.f-guess-h { margin: 0 0 14px; font-weight: 600; color: var(--teal-dark); font-size: 1.02rem; }
.f-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.f-choice { border: 1px solid var(--card-rule); background: var(--card); color: var(--head2); font: inherit; font-weight: 600; font-size: 1.1rem; padding: 15px 10px; border-radius: 12px; cursor: pointer; transition: transform .12s ease, border-color .12s ease; }
.f-choice:hover { border-color: var(--teal); transform: translateY(-1px); }
.f-card-slot { display: flex; justify-content: center; }
.q-card { width: 100%; max-width: 380px; height: auto; border-radius: 16px; border: 1px solid var(--card-rule); box-shadow: 0 18px 40px -26px rgba(40,36,30,.5); background: #FBFCFD; }
.f-guess-actions { display: flex; justify-content: center; margin-top: 14px; }
.q-ghost { border: 1px solid var(--edge2); background: var(--card); color: var(--teal-dark); font: inherit; font-weight: 600; font-size: .96rem; padding: 11px 20px; border-radius: 11px; cursor: pointer; }
.q-ghost:hover { border-color: var(--teal); }
.f-msg { display: block; text-align: center; color: var(--teal-dark); font-size: .86rem; font-weight: 600; min-height: 1.1em; margin-top: 8px; }

/* the reading (number + delta) */
.f-reading { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin: 30px 0 0; }
.f-value { font-family: var(--serif); font-weight: 600; font-size: clamp(3rem, 9vw, 4.4rem); line-height: 1; letter-spacing: -.02em; color: var(--head); }
.f-delta { color: var(--teal-dark); font-weight: 600; font-size: 1.05rem; }
.f-asof { color: var(--mute2); font-size: .95rem; }

/* sparkline */
.f-chart { position: relative; margin: 18px 0 0; }
.f-chart svg { width: 100%; height: auto; display: block; }

/* masked answer while guessing — fact.js toggles .is-masked on the hero
   number, the chart, and every masked value chip (the lead sentence and any
   FAQ answer that quotes the value). The static HTML ships them UNBLURRED
   (crawlers + AI + no-JS read them); blur ≠ hidden, so the text stays in the
   DOM and a11y tree. user-select:none stops select-through-blur peeking. */
.f-value.is-masked, .f-chart.is-masked { filter: blur(10px); -webkit-filter: blur(10px); user-select: none; -webkit-user-select: none; transition: filter .35s ease; }
@media (prefers-reduced-motion: reduce) { .f-value.is-masked, .f-chart.is-masked { transition: none; } }

/* .f-ans is a deliberate "redacted" chip, not a hole in the sentence: a fixed
   minimum width + soft edge so it reads as a masked plaque at any value's
   length, with the blur clipped to its own box instead of bleeding into the
   surrounding text. */
.f-ans { display: inline-block; min-width: 3.5ch; text-align: center; border-radius: 6px; vertical-align: baseline; }
.f-ans.is-masked { background: rgba(140,133,122,.12); box-shadow: inset 0 0 0 1px var(--card-rule); overflow: hidden; padding: 0 .2em; }
.f-ans-text { display: inline-block; }
.f-ans.is-masked .f-ans-text { filter: blur(8px); -webkit-filter: blur(8px); user-select: none; -webkit-user-select: none; transition: filter .35s ease; }
@media (prefers-reduced-motion: reduce) { .f-ans.is-masked .f-ans-text { transition: none; } }
.f-now { position: absolute; font-family: ui-monospace, "SF Mono", "Segoe UI Mono", Menlo, Consolas, monospace; font-size: 12px; color: var(--dawn-num); white-space: nowrap; font-variant-numeric: tabular-nums; }
.f-start { position: absolute; font-family: ui-monospace, "SF Mono", "Segoe UI Mono", Menlo, Consolas, monospace; font-size: 12px; color: var(--axis); white-space: nowrap; font-variant-numeric: tabular-nums; }
.f-axis { display: flex; justify-content: space-between; margin-top: 8px; font-family: ui-monospace, "Segoe UI Mono", Menlo, Consolas, monospace; font-size: 12px; color: var(--axis); }
.f-axis-now { color: var(--dawn-num); }

.f-sub { font-family: var(--serif); font-weight: 600; font-size: 1.3rem; color: var(--head); margin: 38px 0 10px; }
.f-why { color: var(--body); font-size: 1.06rem; line-height: 1.62; margin: 0; }
.f-source { color: var(--mute); font-size: .92rem; margin: 22px 0 0; display: flex; flex-direction: column; gap: 3px; }
.f-source a { color: var(--teal-dark); text-decoration: none; }
.f-source a:hover { text-decoration: underline; }
.f-lic, .f-rev { color: var(--mute2); font-size: .82rem; }

/* cta band */
.f-cta-band { margin: 42px 0 0; padding: 30px 26px; background: var(--card); border: 1px solid var(--card-rule); border-radius: 18px; text-align: center; box-shadow: 0 16px 40px -30px rgba(40,36,30,.5); }
.f-cta-band h2 { font-family: var(--serif); font-weight: 600; font-size: 1.4rem; color: var(--head); margin: 0 0 8px; }
.f-cta-band p { color: var(--body); font-size: 1rem; line-height: 1.55; margin: 0 auto 18px; max-width: 30rem; }
.f-cta-note { display: block; color: var(--mute); font-size: .88rem; margin-top: 12px; }

/* related — the current value leads (this is a "here's another verified
   number" card, so the number is the headline, not the metric name). */
.f-related { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.f-rel { display: flex; flex-direction: column; gap: 3px; text-decoration: none; padding: 16px 18px; border: 1px solid var(--card-rule); border-radius: 12px; background: var(--card); transition: border-color .12s ease, transform .12s ease; }
.f-rel:hover { border-color: var(--teal); transform: translateY(-1px); }
.f-rel:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.f-rel-value { font-family: var(--serif); font-weight: 600; font-size: clamp(1.4rem, 2.4vw, 1.6rem); line-height: 1.1; letter-spacing: -.01em; color: var(--head); }
.f-rel-metric { color: var(--head2); font-size: .92rem; font-weight: 600; }
.f-rel-delta { color: var(--mute2); font-size: .8rem; margin-top: 1px; }
.f-hub-link { margin: 26px 0 0; }
.f-hub-link a { color: var(--teal-dark); font-weight: 600; text-decoration: none; }
.f-hub-link a:hover { text-decoration: underline; }

/* /facts index grid */
.f-index .f-lead { max-width: 40rem; }
.f-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin: 28px 0 0; }
.f-card { display: flex; flex-direction: column; gap: 5px; text-decoration: none; padding: 18px 18px; border: 1px solid var(--card-rule); border-radius: 14px; background: var(--card); box-shadow: 0 10px 26px -22px rgba(40,36,30,.5); transition: transform .12s ease, border-color .12s ease; }
.f-card:hover { border-color: var(--teal); transform: translateY(-2px); }
.f-card-metric { color: var(--head2); font-weight: 600; font-size: 1rem; }
.f-card-value { font-family: var(--serif); font-weight: 600; font-size: 1.7rem; color: var(--head); line-height: 1; }
.f-card-delta { color: var(--teal-dark); font-size: .88rem; }

/* hub rows */
.f-rows { display: flex; flex-direction: column; margin: 26px 0 0; border-top: 1px solid var(--rule); }
.f-row { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: baseline; text-decoration: none; padding: 15px 6px; border-bottom: 1px solid var(--rule); transition: background .12s ease; }
.f-row:hover { background: rgba(46,107,90,.04); }
.f-row-metric { color: var(--head2); font-weight: 600; }
.f-row-delta { color: var(--teal-dark); font-size: .92rem; }
.f-row-value { font-family: var(--serif); font-weight: 600; color: var(--head); }

@media (max-width: 480px) {
  .f-wrap { padding: 20px 18px 76px; }
  .f-choices { grid-template-columns: 1fr; }
  .f-row { grid-template-columns: 1fr auto; }
  .f-row-value { display: none; }
}

/* ---- comparison / alternative pages ---- */
.cmp-table-wrap { overflow-x: auto; margin: 28px 0 0; }
.cmp-table { width: 100%; border-collapse: collapse; font-size: .98rem; min-width: 460px; }
.cmp-table th, .cmp-table td { text-align: left; padding: 13px 14px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.cmp-table thead th { font-weight: 700; color: var(--head2); border-bottom: 2px solid var(--edge2); }
.cmp-table tbody th { color: var(--slate); font-weight: 600; width: 30%; }
.cmp-table td { color: var(--body); }
.cmp-table .cmp-us { background: rgba(46,107,90,.05); color: var(--teal-dark); font-weight: 600; }
.cmp-when { margin-top: 4px; }
.cmp-picks { display: flex; flex-direction: column; gap: 16px; margin: 28px 0 0; }
.cmp-pick { display: flex; gap: 16px; align-items: flex-start; padding: 20px 22px; border: 1px solid var(--card-rule); border-radius: 14px; background: var(--card); box-shadow: 0 10px 26px -22px rgba(40,36,30,.5); }
.cmp-rank { flex: none; width: 32px; height: 32px; border-radius: 50%; background: rgba(46,107,90,.1); color: var(--teal-dark); font-weight: 700; display: flex; align-items: center; justify-content: center; }
.cmp-pick-h { font-family: var(--serif); font-weight: 600; font-size: 1.22rem; color: var(--head); margin: 2px 0 6px; display: flex; flex-direction: column; gap: 3px; }
.cmp-tag { font-family: var(--sans); font-size: .82rem; font-weight: 600; color: var(--teal-dark); }
.cmp-pick p { color: var(--body); margin: 0; line-height: 1.55; }

/* FAQ (shared with the landing markup) — question in the same serif voice as
   the headings, a thin rule between pairs (not a card), body stays plain. */
.faq { display: flex; flex-direction: column; }
.faq-item { padding: 24px 0; border-top: 1px solid var(--rule); }
.faq-item:first-child { padding-top: 0; border-top: none; }
.faq-item h3 { font-family: var(--serif); font-size: 1.08rem; font-weight: 600; color: var(--head); margin: 0 0 8px; }
.faq-item p { color: var(--body); margin: 0; line-height: 1.6; }