/* Personal account (/{locale}/profile), in the site's design system (docs/questrooms-design-system.md).
   Loaded after new-home.css; values come from tokens.css, and the qr-* components (buttons,
   cards, segmented, wrap) are used as they are. Only what the system has no component for lives here, as pf-*. */

.pf-body {
    font-size: var(--qr-text-body);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.pf-body [hidden] {
    display: none !important;
}

.pf-body a {
    color: inherit;
}

/* ---------- Balance and sign-out, beside the tabs ---------- */

.pf-points {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
}

.pf-points-value {
    color: var(--qr-mint);
}

.pf-points-unit {
    color: var(--qr-faint);
    font-size: var(--qr-text-label);
    letter-spacing: 0.12em;
}

.pf-logout {
    margin: 0;
}

/* ---------- Account tabs: one segmented rail, a swipeable row on phones ---------- */

/* The balance, settings, help and sign-out sit in a quiet line above the rail, right-aligned: with
   nine tabs there is no room beside it, and wrapping them under the rail read as a stray row. */
.pf-tabs {
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 12px;
    /* Clears the site's fixed menu and the announcement bar above it. */
    padding-top: 120px;
}

.pf-tabs-account {
    display: flex;
    align-self: flex-end;
    align-items: center;
    gap: 16px;
}

.pf-tabs .qr-segmented {
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}

.pf-tabs .qr-segmented::-webkit-scrollbar {
    display: none;
}

.pf-tabs .qr-segment {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    text-decoration: none;
    white-space: nowrap;
}

.pf-body .pf-tabs a.qr-segment[aria-current="page"] {
    background: var(--qr-text);
    color: var(--qr-on-mint);
}

/* ---------- Page ---------- */

.pf-main {
    padding-top: 32px;
    padding-bottom: 64px;
}

.pf-page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 24px;
    margin-bottom: 32px;
}

.pf-page-head .qr-section-title {
    margin: 0;
    font-size: clamp(30px, 5vw, 40px);
}

.pf-lead {
    margin: 8px 0 0;
    max-width: 640px;
    color: var(--qr-muted);
}

.pf-section {
    margin-top: 40px;
}

.pf-section-title {
    margin: 0 0 16px;
    font-size: var(--qr-text-subheading);
    font-weight: 700;
    line-height: 1.3;
}

.pf-label {
    font-size: var(--qr-text-label);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--qr-faint);
}

.pf-data {
    font-size: var(--qr-text-data);
    font-weight: 700;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.pf-data-mint {
    color: var(--qr-mint);
}

.pf-muted {
    margin: 0;
    color: var(--qr-muted);
    font-size: var(--qr-text-caption);
}

.pf-empty {
    margin: 0;
    color: var(--qr-muted);
}

/* ---------- Bento: one grid, one tile, one heading style ---------- */

.pf-bento {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 16px;
}

.pf-span-12 { grid-column: span 12; }
.pf-span-8 { grid-column: span 8; }
.pf-span-6 { grid-column: span 6; }
.pf-span-4 { grid-column: span 4; }

.pf-tile,
.qr-home section.pf-tile {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    padding: 24px;
    border: 1px solid var(--qr-hairline);
    border-radius: var(--qr-radius-panel);
    background: var(--qr-surface);
}

.pf-tile-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 24px;
}

.pf-tile .pf-tile-title {
    margin: 0;
    font-family: var(--qr-body);
    font-size: var(--qr-text-label);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--qr-faint);
}

.pf-tile-head .qr-link-button {
    padding: 0;
}

.qr-home section.pf-tile-inline {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

.pf-tile-inline .pf-muted {
    margin-top: 8px;
}

/* The three figures share one tile, split by hairlines: one row on every width. */
.qr-home section.pf-stats-tile {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    padding: 0;
}

.pf-stats-tile .pf-stat {
    padding: 24px;
    border: 0;
    border-radius: 0;
    background: none;
}

.pf-stats-tile .pf-stat + .pf-stat {
    border-left: 1px solid var(--qr-hairline);
}

.qr-home section.pf-stats-tile-stacked {
    grid-template-columns: minmax(0, 1fr);
}

.pf-stats-tile-stacked .pf-stat + .pf-stat {
    border-left: 0;
    border-top: 1px solid var(--qr-hairline);
}

.pf-offers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.pf-offer {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px;
    border-radius: var(--qr-radius-card);
    background: var(--qr-surface-2);
}

.pf-offer-when {
    font-weight: 700;
}

.pf-copy-field {
    display: flex;
    gap: 12px;
}

.pf-copy-field input {
    flex: 1;
    min-width: 0;
    min-height: 48px;
    padding: 12px 16px;
    border: 1px solid var(--qr-hairline-strong);
    border-radius: var(--qr-radius-card);
    background: var(--qr-surface-2);
    color: var(--qr-text);
    font-family: var(--qr-body);
    font-size: var(--qr-text-body);
}

.pf-steps {
    margin: 0;
    padding-left: 20px;
    color: var(--qr-muted);
}

.pf-steps li + li {
    margin-top: 8px;
}

/* ---------- Panels and grids ---------- */

.pf-panel,
.qr-home section.pf-panel {
    /* new-home.css zeroes the inline padding of every section on the homepage. */
    padding: 24px;
    border: 1px solid var(--qr-hairline);
    border-radius: var(--qr-radius-panel);
    background: var(--qr-surface);
}

.pf-panel > .pf-section-title {
    font-size: var(--qr-text-lead);
}

.pf-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

.pf-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-top: 24px;
}

.pf-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 20px 24px;
    border: 1px solid var(--qr-hairline);
    border-radius: var(--qr-radius-card);
    background: var(--qr-surface);
}

/* ---------- Badges and progress ---------- */

.pf-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 2px 10px;
    border: 1px solid var(--qr-hairline-strong);
    border-radius: var(--qr-radius-pill);
    color: var(--qr-text);
    font-size: var(--qr-text-label);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* A game still to come is the one live thing in a list of bookings. */
.pf-badge-live {
    border-color: transparent;
    background: var(--qr-mint-soft);
    color: var(--qr-mint);
}

.pf-badge-faint {
    color: var(--qr-faint);
}

.pf-rank {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

.pf-progress {
    height: 6px;
    overflow: hidden;
    border-radius: var(--qr-radius-pill);
    background: var(--qr-surface-2);
}

.pf-progress-fill {
    height: 100%;
    border-radius: inherit;
    background: var(--qr-mint);
}

.pf-level {
    display: flex;
    align-items: center;
    gap: 12px;
    width: min(100%, 280px);
    margin-left: 8px;
}

.pf-level .pf-progress {
    flex: 1;
}

/* Under the level bar: what earns experience, and the way to the full answer. */
.pf-level-hint {
    margin: 8px 0 0;
    color: var(--qr-faint);
    font-size: var(--qr-text-label);
    line-height: 1.5;
}

.pf-level-hint .qr-link-button {
    padding: 0;
    font-size: var(--qr-text-label);
}

/* ---------- Rows: bookings, activity, codes ---------- */

.pf-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pf-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    border: 1px solid var(--qr-hairline);
    border-radius: var(--qr-radius-card);
    background: var(--qr-surface);
}

.pf-panel .pf-row,
.pf-tile .pf-row {
    padding: 12px 16px;
    background: var(--qr-surface-2);
}

.pf-row-muted {
    opacity: 0.6;
}

.pf-row-title {
    font-weight: 700;
}

.pf-row-meta {
    margin-top: 2px;
    color: var(--qr-muted);
    font-size: var(--qr-text-caption);
}

.pf-row-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.pf-code {
    display: inline-block;
    padding: 6px 12px;
    border-radius: var(--qr-radius-card);
    background: var(--qr-surface-2);
    font-size: var(--qr-text-lead);
    font-weight: 700;
    letter-spacing: 0.08em;
    font-variant-numeric: tabular-nums;
}

/* ---------- Objectives ---------- */

.pf-objectives-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 16px;
}

.pf-objective-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
    font-size: var(--qr-text-caption);
}

.pf-objective-reward {
    color: var(--qr-muted);
    font-weight: 700;
    white-space: nowrap;
}

.pf-objective-done .pf-objective-title {
    color: var(--qr-muted);
}

.pf-objective-progress {
    margin-top: 4px;
    color: var(--qr-faint);
    font-size: var(--qr-text-label);
    text-align: right;
}

/* ---------- Rewards ---------- */

.pf-reward-form {
    margin-top: auto;
}

.pf-reward-form .qr-button {
    width: 100%;
}

.pf-reward-form .qr-button:disabled {
    border-color: var(--qr-hairline);
    color: var(--qr-faint);
    cursor: not-allowed;
}

.pf-reward-locked .pf-data {
    color: var(--qr-muted);
}

/* ---------- Achievements ---------- */

.pf-achievement {
    display: flex;
    gap: 16px;
    padding: 20px;
    border: 1px solid var(--qr-hairline);
    border-radius: var(--qr-radius-card);
    background: var(--qr-surface);
}

.pf-achievement-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: var(--qr-radius-pill);
    background: var(--qr-surface-2);
    color: var(--qr-faint);
}

.pf-achievement-unlocked .pf-achievement-icon {
    background: var(--qr-mint-soft);
    color: var(--qr-mint);
}

.pf-achievement-body {
    flex: 1;
    min-width: 0;
}

.pf-achievement-body .pf-progress {
    margin-top: 12px;
}

/* ---------- Forms and notices ---------- */

.pf-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.pf-field input {
    width: 100%;
    min-height: 48px;
    padding: 12px 16px;
    border: 1px solid var(--qr-hairline-strong);
    border-radius: var(--qr-radius-card);
    background: var(--qr-surface-2);
    color: var(--qr-text);
    font-family: var(--qr-body);
    font-size: var(--qr-text-body);
    outline: none;
}

.pf-field input:focus {
    border-color: var(--qr-mint);
    box-shadow: var(--qr-glow);
}

.pf-alert {
    margin-bottom: 24px;
    padding: 12px 16px;
    border: 1px solid var(--qr-hairline-strong);
    border-radius: var(--qr-radius-card);
    font-size: var(--qr-text-caption);
}

.pf-alert-success {
    border-color: var(--qr-mint);
    background: var(--qr-mint-soft);
}

.pf-alert-error {
    border-color: var(--qr-danger);
    color: var(--qr-danger);
}

/* ---------- Sign-in pages ---------- */

.pf-auth {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
    padding: 120px 16px 64px;
}

.pf-auth .pf-panel {
    width: 100%;
}

.pf-body h1.pf-auth-title {
    /* The site's templates reset h1 margins, so the gap under the title is padding. */
    margin: 0;
    padding-bottom: 24px;
    font-family: var(--qr-display);
    font-size: var(--qr-text-data);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: 0.02em;
    text-align: center;
    text-transform: uppercase;
}

.pf-auth .qr-button {
    width: 100%;
}

.pf-auth-links {
    margin-top: 16px;
    color: var(--qr-muted);
    font-size: var(--qr-text-caption);
    text-align: center;
}

.pf-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 24px 0;
    color: var(--qr-faint);
    font-size: var(--qr-text-label);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.pf-divider::before,
.pf-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--qr-hairline);
}

.pf-auth-lead {
    margin: 0 0 24px;
    color: var(--qr-muted);
    font-size: var(--qr-text-caption);
    line-height: 1.5;
    text-align: center;
}

.pf-field-hint {
    color: var(--qr-faint);
    font-size: var(--qr-text-label);
    line-height: 1.5;
}

/* The password way in, folded under the code button: one address field serves both. */
.pf-password-login {
    margin-top: 24px;
    border-top: 1px solid var(--qr-hairline);
}

.pf-password-login summary {
    display: block;
    padding: 16px 0;
    color: var(--qr-mint);
    font-size: var(--qr-text-caption);
    font-weight: 700;
    text-align: center;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    list-style: none;
}

.pf-password-login summary::-webkit-details-marker {
    display: none;
}

.pf-password-login[open] summary {
    margin-bottom: 8px;
}

/* Six digits read as one block, wide apart, the way the mail shows them. */
.pf-field input.pf-code-input {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: var(--qr-text-data);
    letter-spacing: 0.4em;
    text-align: center;
}

.pf-auth-links .qr-link-button {
    padding: 0;
}

/* Selects in account forms look like its inputs. */
/* Content-box, like the inputs: Chrome sizes a select border-box by default, two pixels short. */
.pf-field select {
    box-sizing: content-box;
    width: calc(100% - 34px);
    min-height: 24px;
    padding: 12px 16px;
    border: 1px solid var(--qr-hairline-strong);
    border-radius: var(--qr-radius-card);
    background: var(--qr-surface-2);
    color: var(--qr-text);
    font-family: var(--qr-body);
    font-size: var(--qr-text-body);
    /* The same line as the inputs', so a select and an input in one row are the same height. */
    line-height: 1.5;
    outline: none;
}

.pf-field select:focus {
    border-color: var(--qr-mint);
    box-shadow: var(--qr-glow);
}

/* The birthday: a fieldset without the browser's frame, three selects in a row. */
.pf-birthday {
    min-width: 0;
    margin-inline: 0;
    padding: 0;
    border: 0;
}

/* Floated so it sits in the flow like the other fields' labels; the column gap spaces it. */
.pf-birthday legend {
    float: left;
    width: 100%;
    margin: 0;
    padding: 0;
}

.pf-birthday-parts {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 8px;
    clear: both;
}

.pf-birthday-parts select {
    width: calc(100% - 22px);
    min-width: 0;
    padding-inline: 10px;
}

.pf-check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 16px;
    color: var(--qr-muted);
    font-size: var(--qr-text-caption);
    font-weight: 400;
    line-height: 1.5;
    cursor: pointer;
}

.pf-check .qr-checkbox {
    margin-top: 1px;
}

.pf-field-hint.pf-span-all {
    margin: -8px 0 16px;
}

/* The registration form: one column on a phone, two from a laptop up, so that the whole form
   and its button fit one screen without scrolling. */
@media (min-width: 900px) {
    .pf-auth.pf-auth-wide {
        max-width: 760px;
        padding-top: 96px;
        padding-bottom: 32px;
    }

    .pf-auth-wide .pf-form-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 16px;
    }

    .pf-auth-wide .pf-span-all {
        grid-column: 1 / -1;
    }

    .pf-auth-wide .pf-field {
        margin-bottom: 12px;
    }

    .pf-auth-wide .pf-auth-links {
        margin-top: 12px;
    }

    /* Two boxes and a privacy link have to fit under the fields on a 768px-high laptop. */
    .pf-auth-wide .pf-check {
        margin-bottom: 10px;
    }

    .pf-auth-wide .pf-privacy-line {
        margin-top: 8px;
    }
}

/* Links inside a checkbox label and under the form read as links, not as plain label text. */
.pf-check a,
.pf-privacy-line a,
.pf-auth-links a {
    color: var(--qr-text);
    text-decoration: underline;
    text-decoration-color: var(--qr-link-underline);
    text-underline-offset: 3px;
}

.pf-privacy-line {
    margin: 12px 0 0;
    text-align: center;
}

/* ---------- Code Breaker ---------- */

.pf-game-board {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 24px;
    align-items: start;
}

.pf-guesses {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 24px;
}

.guess-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.guess-digit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1px solid var(--qr-hairline);
    border-radius: var(--qr-radius-card);
    background: var(--qr-surface-2);
    font-weight: 700;
    font-size: var(--qr-text-subheading);
    font-variant-numeric: tabular-nums;
}

.guess-dots {
    display: flex;
    gap: 6px;
    margin-left: 12px;
}

.guess-dots .dot {
    width: 12px;
    height: 12px;
    border: 1px solid var(--qr-hairline-strong);
    border-radius: var(--qr-radius-pill);
}

.guess-dots .dot.correct {
    border-color: var(--qr-mint);
    background: var(--qr-mint);
}

.guess-dots .dot.misplaced {
    border-color: var(--qr-text);
    background: var(--qr-text);
}

.pf-digits {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.pf-digits .minigame-digit {
    width: 56px;
    height: 56px;
    border: 1px solid var(--qr-hairline-strong);
    border-radius: var(--qr-radius-card);
    background: var(--qr-surface-2);
    color: var(--qr-text);
    font-family: var(--qr-body);
    font-size: var(--qr-text-heading);
    font-weight: 700;
    text-align: center;
    outline: none;
}

.pf-digits .minigame-digit:focus {
    border-color: var(--qr-mint);
    box-shadow: var(--qr-glow);
}

.minigame-status {
    min-height: 24px;
    margin-top: 16px;
    font-weight: 700;
}

.minigame-status.win {
    color: var(--qr-mint);
}

.minigame-status.lose {
    color: var(--qr-danger);
}

.pf-rules {
    margin: 0;
    padding-left: 20px;
    color: var(--qr-muted);
    font-size: var(--qr-text-caption);
}

.pf-rules li + li {
    margin-top: 8px;
}

/* ---------- Phones ---------- */

@media (max-width: 991px) {
    .pf-grid-2,
    .pf-game-board {
        grid-template-columns: 1fr;
    }

    .pf-span-8,
    .pf-span-6,
    .pf-span-4 {
        grid-column: span 12;
    }
}

@media (max-width: 640px) {
    .pf-tabs {
        padding-top: 96px;
    }

    .pf-panel,
    .qr-home section.pf-panel {
        padding: 20px;
    }

    .pf-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .pf-row-actions {
        flex-wrap: wrap;
    }

    .pf-page-head .qr-button-primary {
        width: 100%;
    }

    .qr-home section.pf-tile {
        padding: 20px;
    }

    .qr-home section.pf-stats-tile {
        padding: 0;
    }

    .pf-stats-tile .pf-stat {
        padding: 16px 12px;
    }

    .pf-stats-tile .pf-data {
        font-size: var(--qr-text-subheading);
    }

    .pf-stats-tile .pf-label {
        font-size: var(--qr-text-micro);
        letter-spacing: 0.08em;
    }

    .pf-stats-tile .pf-muted {
        font-size: var(--qr-text-label);
    }

    .pf-level {
        width: 100%;
        margin: 4px 0 0;
    }

    .pf-copy-field {
        flex-direction: column;
    }
}

.pf-objectives-panel[hidden] {
    display: none;
}

.pf-guesses:empty {
    display: none;
}

/* ---------- The booking section inside the account ---------- */

/* It brings its own container and section spacing for the homepage; inside the account's they
   narrowed it by 32px and pushed its centred heading down, so the tab jumped against the others. */
.pf-main .qr-booking {
    padding-block: 0;
}

.pf-main .qr-booking > .qr-wrap {
    padding-inline: 0;
}

.pf-main .qr-booking .qr-section-head {
    display: none;
}

.pf-tile > .qr-segmented {
    align-self: flex-start;
}

.pf-offer-member {
    border: 1px solid var(--qr-mint-border);
}

.pf-offer-code {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.pf-history-qp {
    min-width: 96px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: var(--qr-mint);
}

.pf-history-spent {
    color: var(--qr-muted);
}

.pf-pager {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

/* ---------- FAQ: the site's accordion — hairline rows, mint plus, muted answers ---------- */

.qr-home section.pf-faq {
    gap: 0;
    padding-block: 8px;
}

.pf-faq-item {
    border-bottom: 1px solid var(--qr-hairline);
}

.pf-faq-item:last-child {
    border-bottom: 0;
}

.pf-faq-item summary {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 0;
    font-weight: 700;
    list-style: none;
    cursor: pointer;
}

.pf-faq-item summary::-webkit-details-marker {
    display: none;
}

.pf-faq-item summary::after {
    content: '+';
    color: var(--qr-mint);
    font-size: var(--qr-text-subheading);
    line-height: 1;
    transition: transform var(--qr-duration-fast) var(--qr-ease-standard);
}

.pf-faq-item[open] summary::after {
    transform: rotate(45deg);
}

.pf-faq-item p {
    margin: 0 0 16px;
    color: var(--qr-muted);
}

.pf-tile form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.pf-tile form .pf-field {
    width: 100%;
    margin-bottom: 0;
}

.pf-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: var(--qr-text-caption);
    cursor: pointer;
}

.pf-check input {
    margin-top: 3px;
    accent-color: var(--qr-mint);
}

/* Deleting the account is the destructive action: the danger colour marks it, without filling it. */
.pf-body .pf-danger-button {
    border-color: var(--qr-danger-border);
    color: var(--qr-danger);
}

.pf-body .pf-danger-button:hover {
    border-color: var(--qr-danger);
    color: var(--qr-danger);
}

.pf-field textarea {
    width: 100%;
    min-height: 96px;
    padding: 12px 16px;
    border: 1px solid var(--qr-hairline-strong);
    border-radius: var(--qr-radius-card);
    background: var(--qr-surface-2);
    color: var(--qr-text);
    font-family: var(--qr-body);
    font-size: var(--qr-text-body);
    resize: vertical;
    outline: none;
}

.pf-field textarea:focus {
    border-color: var(--qr-mint);
    box-shadow: var(--qr-glow);
}

.pf-field-pair {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 12px;
    width: 100%;
}

.pf-tabs-link {
    color: var(--qr-muted);
    font-size: var(--qr-text-caption);
    font-weight: 700;
    text-decoration: none;
}

.pf-body a.pf-tabs-link {
    color: var(--qr-muted);
}

.pf-body a.pf-tabs-link:hover,
.pf-body a.pf-tabs-link[aria-current="page"] {
    color: var(--qr-text);
}

/* ---------- Beta notice: the account is new, and says so ---------- */

.pf-beta {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    margin: 0 0 20px;
    padding: 12px 16px;
    border: 1px solid var(--qr-mint-border);
    border-radius: var(--qr-radius-card);
    background: var(--qr-mint-soft);
}

.pf-auth .pf-beta {
    margin: 0;
}

.pf-beta-badge {
    flex-shrink: 0;
    padding: 2px 10px;
    border-radius: var(--qr-radius-pill);
    background: var(--qr-mint);
    color: var(--qr-bg);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pf-body .pf-beta-text {
    margin: 0;
    color: var(--qr-muted);
    font-size: 14px !important;
    line-height: 1.5;
}

.pf-beta-text a {
    color: var(--qr-mint);
    font-weight: 700;
}