/* The public ("outside") pages: the signed-out shell, the landing, the plans block, sign-in, Rules and the legal template.
   Same tokens and the same components as the app; this file only places them and adds the few pieces the public pages need (see v2/inventory.md §11).
   Tokens only: no raw colour, radius or shadow. Breakpoints: 959, 760, 600. */

/* ---------- The signed-out shell: a header (wordmark, Sign in, Play free), the page, a footer. No tab bar, no rail. ---------- */
.pubbar, .pubfoot { display: none; }
body.is-public .shell { padding-left: 0; display: flex; flex-direction: column; }
body.is-public .rail, body.is-public .topbar, body.is-public .tabbar { display: none; }
body.is-public .pubbar, body.is-public .pubfoot { display: block; }
body.is-public #view { padding-bottom: 0; min-height: 0; flex: 1; }
body.is-public { --stick: 0px; }

/* The header is the top of the same stadium wall: the footer's floodlit slab, with its mown-stripe touchline running along the pitch edge underneath. */
.pubbar { position: sticky; top: 0; z-index: var(--z-sticky); padding-top: env(safe-area-inset-top); background: var(--floodlight), var(--surface-rail); }
.pubbar::after { content: ""; display: block; height: var(--space-1); background: repeating-linear-gradient(90deg, var(--surface-brand) 0 var(--space-7), var(--border-hero) var(--space-7) calc(var(--space-7) * 2)); }
.pubbar__in { display: flex; align-items: center; gap: var(--space-2); min-height: 60px; padding-block: var(--space-1); }
.pubbar .wordmark { width: 120px; }
.pubbar__nav { display: flex; gap: var(--space-2); margin-left: var(--space-6); }
.pubbar__nav a { display: inline-flex; align-items: center; min-height: var(--tap-min); padding: 0 var(--space-2); color: var(--text-muted); font-weight: var(--weight-medium); font-size: var(--fs-body); transition: color var(--dur-fast); }
.pubbar__nav a:hover, .pubbar__nav a[aria-current="page"] { color: var(--text-strong); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 6px; }
@media (max-width: 959px) { .pubbar__nav { display: none; } }
/* The page is the sign-in form: the header's two sign-in buttons would only point at it */
body[data-route="signin"] .pubbar .button { display: none; }

/* The footer is the foot of the stadium wall: a mown-stripe touchline, then a slab under the floodlights (the hero's pitch stripes and the app's top light). */
.pubfoot { position: relative; margin-top: var(--space-8); background: var(--floodlight), var(--surface-rail); }
.pubfoot::before { content: ""; display: block; height: var(--space-2); background: repeating-linear-gradient(90deg, var(--surface-brand) 0 var(--space-7), var(--border-hero) var(--space-7) calc(var(--space-7) * 2)); box-shadow: var(--light-top); }
.pubfoot__in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-6) var(--space-8); align-items: start; padding-block: var(--space-7) var(--space-5); }
.pubfoot__brand { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.pubfoot__brand .wordmark { width: 168px; }
.pubfoot__tagline { font: var(--type-h3); letter-spacing: var(--tracking-display); color: var(--text-body); margin-bottom: var(--space-1); }
.pubfoot__links { display: grid; grid-template-columns: repeat(2, auto); gap: var(--space-2) var(--space-8); }
.pubfoot__links ul { display: flex; flex-direction: column; }
.pubfoot__links a { display: inline-flex; align-items: center; min-height: var(--tap-min); color: var(--text-muted); font-size: var(--fs-body); font-weight: var(--weight-medium); transition: color var(--dur-fast); }
.pubfoot__links a:hover { color: var(--text-strong); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.pubfoot__base { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border-faint); }
.pubfoot__legal { font-size: var(--fs-label); line-height: var(--lh-label); color: var(--text-subtle); }
@media (max-width: 760px) {
  .pubfoot__in { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); padding-block: var(--space-6) calc(var(--space-4) + env(safe-area-inset-bottom)); }
  .pubfoot__links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-4); }
}

/* ---------- Pieces the public pages add ---------- */
.public-heading { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); min-width: 0; }
.public-heading--center { align-items: center; text-align: center; }
.public-heading > .page-head { margin: 0; width: 100%; }
.public-heading__label { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text-accent); font: var(--type-body); font-weight: var(--weight-semibold); }
.public-heading__label > .meaning-icon, .public-heading__title > .meaning-icon { flex: none; }
.public-heading__title { display: flex; align-items: center; gap: var(--space-3); font: var(--type-h1); letter-spacing: var(--tracking-display); text-wrap: balance; }
.public-heading__subtitle { max-width: 60ch; font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--text-muted); text-wrap: pretty; }
.public-heading--compact .public-heading__title { font: var(--type-h2); }
@media (max-width: 600px) { .public-heading__title { font: var(--type-h2); } }
.button-row--between { justify-content: space-between; width: 100%; }
.link-inline { color: var(--text-link); text-decoration: underline; text-underline-offset: 3px; }
.link-inline:hover { color: var(--text-link-hover); }
.state-mark { display: inline-flex; align-items: center; justify-content: center; flex: none; width: var(--space-8); height: var(--space-8); border-radius: var(--radius-lg); background: var(--surface-raised); color: var(--text-strong); }

/* shared/_join_cta: the hero folded down to a title, one line, one primary and a way back in */
.join-cta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding: var(--space-6); }
.join-cta__text { min-width: 0; }
@media (max-width: 760px) { .join-cta { flex-direction: column; align-items: stretch; padding: var(--card-pad-lg); } .join-cta .button-row { flex-direction: column; align-items: stretch; } .join-cta .button--ghost { align-self: center; } }



/* ---------- Plans (shared/_plans): Free beside Premium, one switch. Premium is the hero card. ---------- */
.plans { display: flex; flex-direction: column; gap: var(--space-4); }
.plans__switch { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); }
.plans__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); align-items: stretch; }
.plan { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--card-pad-lg); }
.plan__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.plan__name { display: flex; align-items: center; gap: var(--space-2); font: var(--type-h2); letter-spacing: var(--tracking-display); }
.plan__price { display: flex; align-items: baseline; gap: var(--space-2); }
.plan__per { color: var(--text-muted); font-size: var(--fs-label); font-weight: var(--weight-semibold); }
.plan__opponents.cluster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.plan__opponents .avatar { max-width: 100%; height: auto; }
.plan--premium { background: var(--surface-accent-soft); box-shadow: var(--shadow-card); }
.plan__list { display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.plan__list li { display: flex; align-items: flex-start; gap: var(--space-2); }
.plan__list svg { color: var(--text-accent); margin-top: 3px; }
.plan__t { display: block; font-weight: var(--weight-semibold); }
.plan__d { display: block; margin-top: 2px; font-size: var(--fs-label); line-height: var(--lh-label); color: var(--text-muted); }
.plan__cta { display: flex; flex-direction: column; gap: var(--space-2); margin-top: auto; padding-top: var(--space-2); }
.plan__note { text-align: center; }
@media (max-width: 760px) { .plans__grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Sign-in, Premium return and gift: one calm card on a narrow page ---------- */
/* Center the whole account flow between the header and footer; tall cards grow the page. */
body.is-public #view:has(> .signin) { display: flex; flex-direction: column; min-height: auto; }
body.is-public .page.signin { margin-block: auto; padding-block: var(--space-5); }
body.is-public .shell:has(.page.signin) > .pubfoot { margin-top: 0; }
.signin-card { padding: var(--card-pad-lg); }
.signin-card .page-head { margin-bottom: 0; }
.signin-terms { text-align: left; }
.input--code { height: 56px; text-align: center; font-size: var(--fs-num-m); font-weight: var(--weight-display); font-variant-numeric: tabular-nums; letter-spacing: var(--space-2); font-family: var(--font-display); }

/* ---------- Rules and the long-form legal template: contents beside a readable column; a sheet on a phone ---------- */
.rules { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--space-7); align-items: start; }
.rules__toc { position: sticky; top: var(--space-8); max-height: calc(100dvh - var(--space-9)); overflow: auto; }
.rules__bar { display: none; }
.rules__body { min-width: 0; max-width: 68ch; }
.toc { display: flex; flex-direction: column; gap: 2px; list-style: none; padding: 0; }
.toc__link { display: flex; align-items: center; gap: var(--space-3); min-height: var(--tap-min); padding: 0 var(--space-3); border-radius: var(--radius-md); color: var(--text-muted); font-size: var(--fs-label); font-weight: var(--weight-semibold); }
.toc__link:hover { color: var(--text-strong); background: var(--surface-card); }
.toc__link[aria-current="location"] { color: var(--text-strong); background: var(--surface-card); box-shadow: inset 3px 0 0 var(--accent); }
.toc__n { flex: none; width: var(--space-5); font-weight: var(--weight-display); font-variant-numeric: tabular-nums; color: var(--text-subtle); font-family: var(--font-display); }
.rules-sec { padding-bottom: var(--space-6); }
.rules-sec + .rules-sec { border-top: 1px solid var(--border-faint); padding-top: var(--space-6); }
.rules-sec > h2 { margin-bottom: var(--space-3); }
.rules-sec > .public-heading { margin-bottom: var(--space-3); }
.rules-sub { margin-top: var(--space-4); }
.rules-sub h3 { font: var(--type-h3); margin-bottom: var(--space-1); }
.rules-sec p, .rules-sub p { color: var(--text-body); line-height: var(--lh-copy); text-wrap: pretty; }
.legal-n { color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.legal__body .rules-sec > p + p { margin-top: var(--space-3); }
@media (max-width: 959px) {
  .rules { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .rules__toc { display: none; }
  .rules__bar { display: flex; align-items: center; gap: var(--space-3); position: sticky; top: calc(var(--space-7) + var(--space-2)); z-index: 5; padding: var(--space-2) 0; background: var(--surface-page); border-bottom: 1px solid var(--border-faint); }
}

/* A page head's back link sits above the title that follows it, so its whole 44px is the target */
.page-head .back, .bar-row .back { position: relative; z-index: 1; }

/* Ideas: the vote button sits left of the suggestion; lime when it is yours */
.vote { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; flex: none; width: 52px; min-height: 56px; border: 0; border-radius: var(--radius-md); color: var(--text-muted); transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast); box-shadow: var(--shadow-key-quiet); }
.vote:hover { color: var(--text-strong); background: var(--surface-raised); }
.vote:active { transform: translateY(1px); }
.vote[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--accent); background: var(--surface-accent-soft); color: var(--text-accent); }
.idea { align-items: flex-start; padding-block: var(--space-3); }

.signin-card .muted { overflow-wrap: anywhere; }