/* Public pages: /p/:slug, /r/:code, /me. Uses tokens from /styles.css. */
.page-main { padding-block: clamp(28px, 5vw, 64px) clamp(48px, 8vw, 96px); }
.page-main .container { display: grid; gap: clamp(24px, 4vw, 44px); min-width: 0; align-content: start; }
.page-main .container > * { min-width: 0; }

.pg-head { display: grid; gap: 12px; }
.pg-head > * { margin: 0; }
.pg-title { font-size: clamp(2rem, 1.4rem + 3vw, 3.6rem); line-height: 1.05; overflow-wrap: anywhere; }
.pg-sym { font-family: var(--mono); font-stretch: 85%; color: var(--teal-deep); font-size: .6em; white-space: nowrap; }
.pg-who { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--ink-2); }
.pg-who a, .pg-pays a { display: inline-flex; align-items: center; min-height: 44px; }
.pg-pays { display: inline-flex; flex-wrap: wrap; gap: 0 12px; }
.pg-explain { max-width: 60ch; }
.pg-terms { max-width: 640px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 4px 18px; }
.pg-terms .k { min-width: 0; }
.pg-missing { display: grid; gap: 12px; padding-block: 40px; justify-items: start; }

.pg-section { display: grid; gap: 14px; }
.pg-section h2 { margin: 0; }
.table td a { display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: 3px; }

.pg-totals { display: grid; gap: 18px; padding: clamp(18px, 3vw, 28px); background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); }
.pg-big { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.pg-facts { list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px dashed var(--line-strong); display: flex; flex-wrap: wrap; gap: 8px 28px; color: var(--ink-2); }

.pg-promoter { display: grid; gap: 12px; }
.pg-promoter > * { margin: 0; }
.pg-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: clamp(18px, 3vw, 28px); background: var(--cream); border-radius: var(--r-lg); }
.pg-cta > div { min-width: 0; flex: 1 1 260px; }
.pg-cta p { margin: 4px 0 0; }
.pg-ticket { display: grid; gap: 4px; }
.pg-ticket .ticket-perf { margin: 14px 0; }
.pg-linkrow { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.pg-linkrow .input { flex: 1 1 220px; min-width: 0; font-size: .875rem; }
.pg-claim { margin-top: 14px; }
.claim-box { display: grid; gap: 10px; justify-items: start; }
.claim-box p { margin: 0; }
.claim-panel { display: grid; gap: 10px; width: 100%; max-width: 440px; padding: 14px 16px; background: var(--white); border-radius: var(--r); }
.claim-status { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }

.ref-action { display: grid; gap: 14px; justify-items: start; padding: clamp(20px, 4vw, 36px); background: var(--cream); border-radius: var(--r-lg); max-width: 640px; }
.ref-action > * { margin: 0; max-width: 100%; }
.ref-deep { display: grid; gap: 12px; width: 100%; }
.ref-big { min-height: 60px; font-size: 1.125rem; white-space: normal; text-align: center; line-height: 1.2; padding-block: 10px; }
.ref-action > .ref-big { justify-self: stretch; }
.ref-linked { overflow-wrap: anywhere; }

.me-list { display: grid; gap: 22px; }
.me-card { display: grid; gap: 14px; }
.me-card > * { margin: 0; min-width: 0; }
.me-card .ticket-perf { margin: 4px 0; }
.me-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 10px; }
.me-top .h3 { margin: 0 0 6px; overflow-wrap: anywhere; }
.funnel { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.funnel li { display: grid; gap: 2px; padding: 10px 12px; background: rgba(255, 255, 255, .6); border-radius: var(--r); font-size: .8125rem; color: var(--ink-2); min-width: 0; }
.funnel .fig { font-size: 1.05rem; color: var(--ink); overflow-wrap: anywhere; }
.me-money { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.me-money .n { font-size: 1.25rem; }

@media (max-width: 599px) {
  .pg-linkrow .btn { flex: 1 1 auto; min-height: 44px; }
  .pg-cta .btn { width: 100%; }
}
.pg-more { justify-self: start; min-height: 44px; }
.page-main .btn--sm { min-height: 44px; }