/* The account landing pages: the account's bento (.pf-bento, .pf-tile in profile.css) with a few
   tile types of their own: a big figure, numbered steps, the rank scale and the questions. Built on
   the site's tokens; nothing here redeclares a --qr-* value. */

.lp {
    padding-block: var(--qr-space-6) var(--qr-space-8);
}

.lp .pf-bento + .pf-bento {
    margin-top: 16px;
}

.qr-home .lp-section-title {
    margin: 0 0 16px;
    padding-top: 48px;
    font-family: var(--qr-display);
    font-size: clamp(24px, 3vw, 32px);
    line-height: 1.15;
    letter-spacing: var(--qr-tracking-display, 0);
    text-wrap: balance;
    color: var(--qr-text);
}

.lp-span-3 {
    grid-column: span 3;
}

/* ── The page hero: the site's own .qr-hero (new-home.css), as on the home and game pages ── */
.lp-page-hero .lp-eyebrow {
    margin: 0 0 12px;
    color: var(--qr-mint);
    font-size: var(--qr-text-label);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.lp-page-hero .qr-hero-title {
    font-size: clamp(32px, 4.6vw, 56px);
}

.lp-page-hero .lp-hero-lead {
    max-width: 58ch;
    margin: 0 0 20px;
    color: var(--qr-text);
    font-size: var(--qr-text-lead, 18px);
    line-height: 1.55;
}

/* The constellation's hero: the example sky is the picture, kept to the right of the text and
   below the menu, which sits over the top of every hero. */
.lp-hero-sky-media {
    top: calc(112px + var(--qr-announce-h, 0px));
}

.lp-hero-sky-media .cs-sky {
    position: absolute;
    inset: 0;
    border: 0;
    border-radius: 0;
}

.lp-hero-sky-media .cs-sky canvas {
    height: 100%;
    pointer-events: none;
}

.lp-hero-sky-media .cs-zoom {
    display: none;
}

@media (min-width: 992px) {
    .lp-hero-sky-media {
        left: 38%;
    }

    .lp-hero-sky-media .cs-sky {
        background: transparent;
    }

    .lp-hero-sky {
        background: radial-gradient(120% 90% at 70% 30%, #162447 0%, #0b1226 70%);
    }
}

/* ── A tile that is one big figure ── */
.lp-figure {
    justify-content: space-between;
}

.lp-figure .lp-figure-value {
    margin: 0;
    font-family: var(--qr-display);
    font-size: clamp(56px, 7vw, 88px);
    line-height: 1;
    color: var(--qr-mint);
    font-variant-numeric: tabular-nums;
}

.lp-figure .lp-figure-label {
    margin: 0;
    color: var(--qr-text);
    font-size: 18px;
    font-weight: 700;
}

.lp-tile-title {
    margin: 0;
    color: var(--qr-text);
    font-size: 20px;
    line-height: 1.25;
}

.lp-tile p {
    margin: 0;
    color: var(--qr-muted);
    line-height: 1.55;
}

.lp-tile .lp-link {
    margin-top: auto;
    color: var(--qr-mint);
    font-weight: 700;
}

/* ── Past games: three bars ── */
.lp-bars {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lp-bars li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 12px;
    font-size: 15px;
}

.lp-bars strong {
    font-variant-numeric: tabular-nums;
}

.lp-bar {
    grid-column: 1 / -1;
    height: 8px;
    border-radius: var(--qr-radius-pill, 999px);
    background: var(--qr-surface-2);
    overflow: hidden;
}

.lp-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--qr-mint);
}

/* ── Ranks: a scale of four ── */
.lp-ranks {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lp-ranks li {
    display: grid;
    gap: 2px;
    padding: 12px;
    border-radius: var(--qr-radius-card);
    background: var(--qr-surface-2);
}

.lp-ranks li:last-child {
    background: var(--qr-mint-soft);
}

.lp-ranks strong {
    color: var(--qr-text);
}

.lp-ranks span {
    color: var(--qr-muted);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.lp-ranks .lp-rank-back {
    color: var(--qr-text);
    font-size: 15px;
    font-weight: 700;
}

/* ── The member code ── */
.lp-code {
    align-self: flex-start;
    padding: 6px 14px;
    border: 1px dashed var(--qr-mint);
    border-radius: var(--qr-radius-card);
    color: var(--qr-mint);
    font: 700 20px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.06em;
}

/* ── Extras: a row of chips ── */
.lp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lp-chips li {
    padding: 8px 14px;
    border: 1px solid var(--qr-hairline);
    border-radius: var(--qr-radius-pill, 999px);
    color: var(--qr-text);
    font-size: 15px;
}

/* ── Numbered steps ── */
.lp-step {
    gap: 12px;
}

.lp-step-number {
    margin: 0;
    font-family: var(--qr-display);
    font-size: 48px;
    line-height: 1;
    color: var(--qr-mint);
}

.lp-step p {
    color: var(--qr-text);
    font-size: 17px;
}

/* ── Questions ── */
.lp-faq details + details {
    border-top: 1px solid var(--qr-hairline);
}

.lp-faq summary {
    padding: 14px 0;
    color: var(--qr-text);
    font-weight: 700;
    cursor: pointer;
}

.lp-faq details p {
    margin: 0 0 14px;
}

/* ── Closing ── */
.lp .lp-closing,
.lp.qr-home section.lp-closing {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--qr-space-5);
    text-align: center;
    padding: 32px 40px;
    background: var(--qr-mint-wash, var(--qr-surface));
}

.lp-closing .lp-closing-text {
    margin: 0;
    color: var(--qr-text);
    font-family: var(--qr-display);
    font-size: clamp(22px, 2.6vw, 30px);
    line-height: 1.2;
    text-wrap: balance;
}

/* ── The constellation page ── */
.lp-ranks.is-stars li:last-child {
    background: var(--qr-mint-soft);
}

.lp-story {
    flex-direction: row;
    align-items: center;
    gap: 24px;
}

.lp-story-frame {
    flex: 0 0 auto;
    width: 108px;
    aspect-ratio: 9 / 16;
    border: 1px solid var(--qr-hairline);
    border-radius: 12px;
    background: radial-gradient(120% 80% at 50% 30%, #162447 0%, #0b1226 75%);
    position: relative;
    overflow: hidden;
}

.lp-story-frame::before,
.lp-story-frame::after {
    content: "";
    position: absolute;
    border-radius: 50%;
}

.lp-story-frame::before {
    top: 42%;
    left: 44%;
    width: 10px;
    height: 10px;
    background: var(--qr-mint);
    box-shadow: 0 0 18px var(--qr-mint);
}

.lp-story-frame::after {
    top: 30%;
    left: 30%;
    width: 4px;
    height: 4px;
    background: #f0f5ff;
    box-shadow: 34px 30px 0 #f0f5ff, 14px 52px 0 #f0f5ff, 40px -8px 0 #f0f5ff, -6px 40px 0 rgba(240, 245, 255, 0.5);
}

.lp-story > div {
    display: grid;
    gap: 8px;
}

@media (max-width: 991px) {
    .lp-span-3 {
        grid-column: span 6;
    }

    .lp-hero {
        padding: 28px;
    }
}

@media (max-width: 640px) {
    .lp-span-3 {
        grid-column: span 12;
    }

    .lp-ranks {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lp-closing {
        padding: 24px;
    }
}

.lp-steps {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ── Spacing rhythm (Material 3's 8 px system, owner 23.10), on our own --qr-space-* scale:
   page margins 16 → 24, gaps between tiles 12 → 16 → 24, tile padding 16 → 24, sections 32 → 48,
   a heading 16 above its tiles, a tile's title 8 above its text. ── */
.lp .qr-wrap {
    padding-inline: var(--qr-space-4);
}

.lp .pf-bento {
    gap: var(--qr-space-3);
}

.lp .pf-tile,
.lp.qr-home section.pf-tile {
    gap: var(--qr-space-2);
    padding: var(--qr-space-4);
}

.lp .lp-tile > * + * {
    margin-top: 0;
}

.lp .pf-bento + .pf-bento {
    margin-top: var(--qr-space-3);
}

.qr-home .lp-section-title {
    margin: 0 0 var(--qr-space-5);
    padding-top: var(--qr-space-7);
}

@media (min-width: 600px) {
    .lp .qr-wrap {
        padding-inline: var(--qr-space-5);
    }

    .lp .pf-bento {
        gap: var(--qr-space-4);
    }

    .lp .pf-tile,
    .lp.qr-home section.pf-tile {
        padding: var(--qr-space-5);
    }

    .lp .pf-bento + .pf-bento {
        margin-top: var(--qr-space-4);
    }

    .qr-home .lp-section-title {
        padding-top: var(--qr-space-8);
    }
}

@media (min-width: 1200px) {
    .lp .pf-bento {
        gap: var(--qr-space-5);
    }

    .lp .pf-bento + .pf-bento {
        margin-top: var(--qr-space-5);
    }
}

/* The closing tile keeps a little more air than the rhythm's default. */
@media (min-width: 600px) {
    .lp .lp-closing,
    .lp.qr-home section.lp-closing {
        padding: var(--qr-space-6);
    }
}

/* ── Figure sizes from Material 3's type scale (owner 23.10: the first ones were far too big):
   the hero figure Display Medium 45, a reward figure Display Small 36, a step number Headline
   Medium 28. ── */
.lp .lp-figure .lp-figure-value {
    font-size: 36px;
    line-height: 44px;
}

.lp .lp-step-number {
    font-size: 28px;
    line-height: 36px;
}

.lp .lp-figure {
    justify-content: flex-start;
    gap: var(--qr-space-2);
}