/* ==========================================================================
   Family pass: the paywall, the daily-minutes card, the pass page, the
   locked rows on Levels. Only what these components need, on the tokens and
   the stamped cards application.css already defines. In its own file (loaded
   after application.css by stylesheet_link_tag :app) so the visual system
   stays one file somebody else owns and this block can be read, moved or
   deleted whole.
   ========================================================================== */

/* The paywall card: the child's half on top, the grown-up's half under a rule. */
.paywall-page { padding-top: 2rem; }
.paywall { padding: 1.6rem 1.6rem 1.4rem; }
.paywall h1 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.1rem); margin: 0 0 .5rem; text-wrap: balance; }
.paywall .paywall-eyebrow { margin-bottom: .6rem; }
.paywall-kid { font-size: 1.08rem; color: var(--ink-2); max-width: 34rem; text-wrap: pretty; }
.paywall-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.1rem 0 .2rem; }
.paywall-grownup { margin-top: 1.5rem; padding-top: 1.4rem; border-top: 2px dashed var(--line-2); }
.pass-on .paywall-actions { margin-bottom: 1rem; }
.pass-since { margin: -.2rem 0 0; }
.pass-app-note { margin: 1.1rem 0 0; }

/* The offer: price, what it opens, the button, the fine print. */
.pass-offer-title { font-size: 1.15rem; margin: 0 0 .7rem; }
.pass-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: .2rem .55rem; margin: 0 0 .8rem; color: var(--ink-2); font-weight: 700; }
.pass-price b { font-family: var(--display); font-size: 2.4rem; line-height: 1; color: var(--ink); letter-spacing: -.02em; }
.pass-list { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; gap: .45rem; }
.pass-list li { display: grid; grid-template-columns: 1.3rem 1fr; gap: .55rem; align-items: start; }
.pass-list .ico { color: var(--ok); margin-top: .18rem; vertical-align: 0; }
.pass-buy { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; margin: 0; }
.pass-buy .btn[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; }
.pass-closed { margin: 0; }
.pass-fine { margin: .9rem 0 0; }
@media (max-width: 520px) {
  .paywall { padding: 1.3rem 1.1rem 1.2rem; }
  .paywall-actions .btn, .pass-buy, .pass-buy .btn { width: 100%; }
}

/* Levels: the free tier said once at the top, and a locked row reads as
   waiting rather than missing. */
.levels-free { display: grid; grid-template-columns: 1.3rem 1fr; gap: .6rem; align-items: start; margin: 0 0 1rem; font-weight: 700; color: var(--ink-2); }
.levels-free .ico { color: var(--accent-deep); margin-top: .2rem; vertical-align: 0; }
.level-row.locked .level-title, .level-row.locked .level-n { color: var(--muted); }
/* Start, Again and Locked share the row's last column, so they share a width
   (the layout-alignment skill: controls in one column are one width). */
.level-row > .btn:last-child { min-width: 6.4rem; }
.level-lock .ico { vertical-align: 0; }

/* One sentence to a line where there is room for it, so a break lands between
   thoughts (the layout-alignment skill's wrapping rules); a phone wraps freely. */
@media (min-width: 521px) { .pass-line { display: block; } }
.pass-list li span { text-wrap: pretty; }

/* The price card on /pricing, stamped like every other card on the paper. */
.mk-body .price-card { align-self: start; border: 2px solid var(--ink); border-radius: 18px; box-shadow: 0 10px 0 -4px var(--ink); padding: 1.3rem 1.4rem 1.3rem; }
.mk-body .price-card .eyebrow { margin-bottom: .5rem; }
.mk-body .price-card .price-free-title { font-size: 1.15rem; margin: 1.3rem 0 .6rem; padding-top: 1.1rem; border-top: 2px dashed var(--line-2); }
.price-free .ico { color: var(--muted); }
@media (max-width: 520px) { .pricing-grid .hero-cta { display: grid; } .pricing-grid .hero-cta .btn { width: 100%; } }

/* The admin's purchase rows: the store's reference wraps rather than scrolls. */
.admin-purchases code { overflow-wrap: anywhere; }
/* Admin tables on a phone scroll inside their card instead of the page. */
.card:has(> .table) { overflow-x: auto; }

/* ---- Round 3 (design review, 2026-10-11) ---------------------------------- */

/* The grown-up's half, folded behind "Show a Grown-Up" on a child's paywall.
   The summary is a button, not a disclosure arrow, so no marker. */
.paywall-grownup > summary { list-style: none; cursor: pointer; width: max-content; }
.paywall-grownup > summary::-webkit-details-marker { display: none; }
.paywall-grownup[open] > summary { margin-bottom: 1.2rem; }
/* The parent's own page shows the offer open, under the same rule. */
.paywall-grownup-open { margin-top: 1.5rem; padding-top: 1.4rem; border-top: 2px dashed var(--line-2); }
.pass-offer-lede { color: var(--ink-2); font-weight: 700; margin: 0 0 .6rem; }
.pass-name-first { margin-top: 1rem; }
.pass-name-first + .muted { margin-top: .7rem; }
.paywall .paywall-kid { max-width: 40rem; }

/* "Grown-ups only": the question in words, the answer in numbers. */
.grownup-gate { display: grid; gap: .35rem; margin: 0 0 .9rem; padding: .9rem 1rem; border-radius: 14px; background: var(--paper-2); width: min(100%, 26rem); }
.gate-label { display: flex; align-items: center; gap: .4rem; margin: 0; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.grownup-gate label.gate-question { font-family: var(--display); font-size: 1.25rem; font-weight: 800; color: var(--ink); line-height: 1.2; margin: 0; }
.grownup-gate .gate-input { width: 8rem; text-align: center; font-size: 1.15rem; font-weight: 800; letter-spacing: .04em; }
.grownup-gate .field-hint { margin: 0; }

/* Both games' pictures on the locked games card and after buying. */
.paywall-games { list-style: none; margin: 1.1rem 0 .3rem; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.paywall-game { display: grid; gap: .45rem; }
.paywall-game .game-art { height: 7.5rem; border: 2px solid var(--ink); border-radius: 14px; }
.paywall-game strong { font-family: var(--display); font-size: 1.05rem; text-align: center; }
@media (max-width: 420px) { .paywall-games { grid-template-columns: 1fr; } }

/* The daily-limit card's stopwatch medal. */
.paywall-medal { margin: 0 0 .6rem; }
.paywall-medal .medal { display: block; }

/* /pricing for a family that already has the pass. */
.pricing-on { display: flex; align-items: center; gap: .45rem; margin: 0 0 1rem; font-weight: 800; color: var(--ok); }

/* Levels: a locked row is a quiet padlock, not a button, and the whole row is
   one link to the card that says what opens it. */
.unit-locked { display: flex; align-items: center; gap: .4rem; margin: -.2rem 0 .6rem; font-weight: 700; color: var(--muted); }
.level-row.locked { position: relative; }
.level-row.locked .level-title::after { content: ""; position: absolute; inset: 0; }
.level-lock { display: inline-grid; place-items: center; min-width: 6.4rem; color: var(--muted); }

/* Home: a locked tile says so before it is tapped. */
.play-tile .tile-lock { display: inline-flex; align-items: center; gap: .3rem; font-weight: 800; color: var(--ink-2); }
.play-tile.locked .tile-ico { background: var(--paper-2); color: var(--muted); }

/* Account: deleting sits behind a disclosure, the question and the password. */
.delete-details > summary { list-style: none; cursor: pointer; width: max-content; margin-top: .4rem; }
.delete-details > summary::-webkit-details-marker { display: none; }
.delete-details[open] > summary { margin-bottom: 1rem; }

/* The end of a free child's level: the next one's padlock line, above Again. */
.end-lock { display: block; margin: .2rem 0 .9rem; text-align: center; font-weight: 700; color: var(--ink-2); text-wrap: balance; }
.end-lock .ico { vertical-align: -.15em; margin-right: .2rem; color: var(--accent-deep); }
.end-lock[hidden] { display: none; }