/* ============================================================
   SUB-PAGES — built from Ponke's sections: stat tiles (About),
   outlined cards grid (Ecosystem), gray panel (Token), chain cards,
   tiles grid (Partners).
   ============================================================ */

/* results: stat tiles + winner cards grid */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 48px; }
.results-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.win-card { display: grid; gap: 14px; }
.win-art { position: relative; border-radius: 16px; background: var(--green); aspect-ratio: 16 / 10; display: grid; place-items: center; overflow: hidden; }
.win-art .identicon { width: 88px; height: 88px; border-radius: 20px; border: 4px solid var(--black); }
.win-art .pill { position: absolute; top: 12px; right: 12px; }
.win-field { display: grid; gap: 2px; }
.win-field .eyebrow { color: var(--card-ink-50); font-size: 10px; letter-spacing: 0.5px; }
.win-field .v { font-size: 20px; font-weight: 600; letter-spacing: -0.04em; }
.win-field .v.is-red { color: var(--green); font-weight: 800; font-size: 28px; }
.win-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.win-meta { font-size: 13px; color: var(--card-ink-50); }
.win-card .btn-sm { justify-self: start; }
.results-more { display: grid; justify-items: center; margin-top: 40px; }

/* provably: gray panel document */
.doc { display: grid; gap: 0; }
.doc-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
.doc-title { font-size: 28px; font-weight: 700; letter-spacing: -0.05em; }
.doc-row { display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 22px 0; border-top: 1px solid var(--card-ink-10); }
.doc-row .n { font-size: 12px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; color: var(--green); padding-top: 4px; }
.doc-row .h-xs { margin-bottom: 10px; }
.doc-files { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 24px; }
.doc-cta { display: grid; justify-items: center; margin-top: 40px; }

/* FAQ: outlined cards */
.faq-list { display: grid; gap: 16px; max-width: 900px; margin-inline: auto; }
.faq-q { width: 100%; display: flex; align-items: center; gap: 16px; text-align: left; }
.faq-text { flex: 1; font-size: 24px; font-weight: 600; letter-spacing: -0.05em; line-height: 1.25; }
.faq-icon { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--card-ink); display: grid; place-items: center; flex-shrink: 0; transition: transform 300ms var(--ease), background-color 300ms var(--ease), color 300ms var(--ease); }
.faq-icon svg { width: 18px; height: 18px; }
.faq-item.is-open { border-color: var(--green); }
.faq-item.is-open .faq-icon { transform: rotate(180deg); background: var(--green); border-color: var(--green); color: #fff; }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 300ms var(--ease); }
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-a-inner { overflow: hidden; }
.faq-a-body { padding: 18px 0 4px 56px; display: grid; gap: 12px; }
.faq-a-body .skeletons { max-width: 520px; }

/* placeholders */
.placeholder-panel { display: grid; gap: 18px; }
.placeholder-panel .big { font-family: var(--font-display); font-size: clamp(56px, 6.6vw, 96px); font-weight: 400; letter-spacing: 0.01em; line-height: 1; }
.info-card { display: grid; gap: 14px; justify-items: start; }
.info-card .sb { width: 120px; height: auto; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

@media (max-width: 1100px) {
  .results-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .stats, .results-grid, .doc-files, .two { grid-template-columns: 1fr; }
  .faq-text { font-size: 18px; }
  .faq-a-body { padding-left: 0; }
}

/* ---------- tokenomics ---------- */
.stats-3x2 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat-tile .n-sm { font-size: clamp(26px, 2.8vw, 38px); }
.stat-tile .l small { display: block; font-weight: 500; text-transform: none; letter-spacing: 0; opacity: 0.7; margin-top: 2px; }
.tok-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.9fr); gap: 24px; align-items: start; }
.tok-live { display: grid; gap: 12px; justify-items: start; }
.tok-live .sb { width: 110px; height: auto; }
.live-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }
.live-grid b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 26px; line-height: 1.1; }
.doc-p { font-size: 16px; line-height: 1.6; }
.doc-ul { margin: 10px 0 0; padding-left: 18px; font-size: 15px; line-height: 1.6; display: grid; gap: 4px; }

/* ---------- provably fair ---------- */
.pf-wrap > *:not(.section-head) { max-width: 960px; margin-inline: auto; }
.pf-callouts { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 24px; }
.pf-callout { display: grid; gap: 8px; align-content: start; border-width: 3px; }
.pf-callout p { margin: 0; font-size: 15px; line-height: 1.6; }
.pf-callout.is-snapshot { border-color: var(--orange); }
.pf-callout.is-lock { border-color: var(--green); }
.pf-facts { display: grid; gap: 16px; margin-bottom: 24px; }
.pf-facts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.pf-fact { display: grid; gap: 3px; padding: 12px 14px; border-radius: 12px; background: var(--card-soft, rgba(0, 0, 0, 0.04)); border: 1.5px solid transparent; min-width: 0; }
.pf-fact b { font-size: 15px; overflow-wrap: anywhere; }
.pf-fact small { font-size: 12px; color: var(--card-ink-50); }
.pf-fact.is-ok { border-color: var(--green); }
.pf-fact.is-ok b::before { content: '✓ '; color: var(--green); }
.pf-fact.is-bad { border-color: #C62828; }
.pf-fact a { color: inherit; }
.pf-excluded { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; }
.pf-ex { padding: 4px 10px; border-radius: 9999px; border: 1.5px solid var(--card-ink-10); }
.pf-odds { margin-top: 24px; }
.pf-odds .doc-p { margin: 0 0 10px; }
.pf-two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 24px; }
.pf-two ol, .pf-two ul { margin: 0; padding-left: 20px; font-size: 15px; line-height: 1.6; display: grid; gap: 8px; }
.pf-tool { margin-top: 24px; display: grid; gap: 14px; }
.pf-tool-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.pf-tool select { font: inherit; font-weight: 600; padding: 10px 14px; border-radius: 12px; border: 1.5px solid var(--card-ink); background: var(--card); color: var(--card-ink); }
.pf-source { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 24px; }
.pf-source .chain-card { text-decoration: none; color: inherit; }

/* ---------- results ---------- */
.results-mode { display: flex; justify-content: center; gap: 8px; align-items: center; margin: -24px 0 32px; font-size: 14px; }
.win-art.is-empty { background: var(--card-soft, rgba(0, 0, 0, 0.06)); }
.win-empty { font-family: var(--font-display); font-size: 28px; color: var(--card-ink-50); }
.win-card.is-rollover .v { font-size: 15px; font-weight: 500; }

/* ---------- proof modal (results + provably) ---------- */
.fin-row { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; }
.fin-chip { padding: 4px 10px; border-radius: 9999px; border: 1.5px solid var(--card-ink-10); font-weight: 600; white-space: nowrap; }
.fin-chip.is-win { background: var(--green); border-color: var(--green); color: #fff; }
.fin-chip.is-out { text-decoration: line-through; opacity: 0.55; }
.proof-modal { position: fixed; inset: 0; z-index: 400; display: none; }
.proof-modal.is-open { display: block; }
.proof-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); }
.proof-box { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto; display: grid; gap: 16px; }
.proof-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.proof-close { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--card-ink); font-size: 22px; line-height: 1; flex-shrink: 0; }
.proof-rows { display: grid; }
.proof-row { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 2px 12px; padding: 8px 0; border-top: 1px solid var(--card-ink-10); }
.proof-k { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--card-ink-50); padding-top: 3px; }
.proof-v { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; word-break: break-all; }
.proof-h { grid-column: 2; font-size: 12px; color: var(--card-ink-50); }
.proof-checks { display: grid; gap: 8px; }
.proof-check { display: grid; grid-template-columns: 28px 1fr; gap: 8px; align-items: start; padding: 10px 12px; border-radius: 12px; background: var(--card-soft, rgba(0, 0, 0, 0.04)); font-size: 14px; font-weight: 600; }
.proof-check small { display: block; font-weight: 500; color: var(--card-ink-50); word-break: break-all; }
.proof-mark { font-weight: 800; }
.proof-check.is-ok .proof-mark { color: var(--green); }
.proof-check.is-bad .proof-mark { color: #C62828; }
.proof-check.is-na .proof-mark { color: var(--card-ink-50); }
.proof-json { font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: rgba(0, 0, 0, 0.05); color: inherit; padding: 12px; border-radius: 12px; border: 1px solid var(--card-ink-10); overflow: auto; width: 100%; min-height: 220px; max-height: 320px; margin: 0; resize: vertical; }
.proof-json[hidden] { display: none; }
.proof-actions { display: flex; gap: 8px; flex-wrap: wrap; }
body.proof-open { overflow: hidden; }

/* ---------- faq groups ---------- */
.faq-group { margin: 16px 0 -4px; }
.faq-p { font-size: 16px; line-height: 1.6; margin: 0; max-width: 680px; }

@media (max-width: 760px) {
  .tok-grid, .pf-two, .live-grid, .stats-3x2, .pf-source, .pf-callouts { grid-template-columns: 1fr; }
  .proof-row { grid-template-columns: 1fr; }
  .proof-h { grid-column: 1; }
}