/* Attendee pages inside the site frame (.plans/046 Phase 1).

   The attendee path was built on the old dark shell (style-01 tokens:
   --bg-*, --text-*, --accent, rounded corners). Inside the site frame each
   page's <main> carries `.lp-att`, and its wrap a page class
   (`.lp-dep-wrap` /deposit, `.lp-ev-wrap` /e/{slug}). `.lp-att` maps the old
   tokens onto the landing ones (style-23: --lp-paper, --lp-ink, --lp-field)
   so the shared components (buttons, inputs, badges, stepper) follow the
   site's light and dark themes without being rewritten. Below the map are
   only the rules whose old values were hard-coded.

   Colour roles stay the site's: indigo = brand and what you can click,
   ink = text and borders, orange = people. Status colours get darker values
   on paper so text in them passes AA. Fills that carry paper text use
   #5a54cb (5.18:1), not --lp-field (#6b63f0 is under 4.5:1). */

.lp-att {
    --bg-primary: var(--lp-paper);
    --bg-secondary: var(--lp-paper-2);
    --bg-tertiary: var(--lp-paper-2);
    --bg-card: var(--lp-paper);
    --bg-hover: var(--lp-paper-2);
    --text-primary: var(--lp-ink);
    --text-heading: var(--lp-ink);
    --text-secondary: var(--lp-ink-2);
    --text-muted: var(--lp-ink-3);
    --text-primary-inverse: var(--lp-paper);
    --border: var(--lp-ink);
    --border-hover: var(--lp-ink);
    --accent: var(--lp-t-field);
    --accent-hover: var(--lp-field);
    --accent-bg: var(--lp-kw-bg);
    --accent-border: var(--lp-field);
    --radius: 0;
    --radius-sm: 0;
    --radius-md: 0;
    --shadow: none;
    --success: #1f7a4d;
    --warning: #8a5300;
    --danger: #b42318;
    --info: var(--lp-t-field);
    --font-display: var(--lp-sans);

    background: var(--lp-paper);
    color: var(--lp-ink);
    font-family: var(--lp-sans);
    padding: 48px 0 72px;
}
.lp[data-theme="dark"] .lp-att {
    --success: #4fd68a;
    --warning: #f5b544;
    --danger: #f0666b;
}
.lp-dep-wrap {
    max-width: 560px;
}
.lp-ev-wrap {
    max-width: 720px;
}
/* a short flow page still fills the window: the footer sits at the bottom,
   not above a band of the old body background */
.landing-page.lp:has(> .lp-att) {
    display: flex;
    flex-direction: column;
}
.lp-att {
    flex: 1 0 auto;
}
/* one payment method: one full-width card, not the left half of two */
.lp-att .dep2-method-grid--single {
    grid-template-columns: 1fr;
    max-width: none;
}

/* the page title and the event it is for */
.lp-att .claim-title {
    font: 700 36px/1.1 var(--lp-sans);
    letter-spacing: -0.03em;
    color: var(--lp-ink);
    margin: 0 0 12px;
}
.lp-att .event-context-header {
    border-width: 2px;
}
.lp-att .event-context-name {
    color: var(--lp-ink);
}

/* cards: the site's 2px ink box, square, no glow */
.lp-att .dep2-card,
.lp-att .dep2-method-card {
    border: 2px solid var(--lp-ink);
    box-shadow: none;
}
.lp-att .dep2-method-card:hover {
    border-color: var(--lp-ink);
    box-shadow: none;
}
.lp-att .dep2-method-card--recommended {
    border-color: var(--lp-field);
    background: var(--lp-paper);
}
.lp-att .dep2-method-card--recommended::before {
    background: #5a54cb;
    color: #f4f0e6;
    border-radius: 0;
}
.lp-att .dep2-receipt-row {
    border-bottom-color: var(--lp-line);
}
.lp-att .dep2-amount-hero {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--lp-ink);
    letter-spacing: -0.03em;
}

/* buttons: .lp-btn and .lp-btn-primary */
.lp-att .btn,
.lp-att .dep2-method-cta {
    border-radius: 0;
    font-family: var(--lp-sans);
    font-weight: 600;
    box-shadow: none;
}
.lp-att .btn-primary,
.lp-att .btn-success,
.lp-att .dep2-method-cta {
    background: var(--lp-ink);
    color: var(--lp-paper);
    border: 2px solid var(--lp-ink);
}
.lp-att .btn-primary:hover:not(:disabled),
.lp-att .btn-success:hover:not(:disabled),
.lp-att .dep2-method-cta:hover {
    background: var(--lp-ink);
    opacity: 1;
    transform: translateY(-2px);
}
.lp-att .btn-outline {
    border: 2px solid var(--lp-ink);
    color: var(--lp-ink);
}
.lp-att .btn:focus-visible,
.lp-att .dep2-method-cta:focus-visible {
    outline: 3px solid var(--lp-field);
    outline-offset: 3px;
}

/* inputs */
.lp-att .form-input {
    border: 2px solid var(--lp-ink);
    background: var(--lp-paper);
}
.lp-att .form-input:focus {
    border-color: var(--lp-field);
    box-shadow: none;
}

/* the stepper: square steps, ink and indigo, no pulse */
.lp-att .claim-step-circle {
    border-radius: 0;
    box-shadow: none;
    animation: none;
}
.lp-att .claim-step-circle.completed {
    background: var(--lp-ink);
    color: var(--lp-paper);
}
.lp-att .claim-step-circle.current {
    background: #5a54cb;
    color: #f4f0e6;
}
.lp-att .claim-step-circle.upcoming {
    background: transparent;
    border: 2px solid var(--lp-line);
}
.lp-att .claim-step:not(:last-child)::after {
    background: var(--lp-line);
}
.lp-att .claim-step:not(:last-child)::before {
    background: var(--lp-ink);
}

/* waiting dots and the success mark */
.lp-att .dep2-confirming-dot {
    border-radius: 0;
    background: var(--lp-field);
}
.lp-att .dep2-success-icon {
    border-radius: 0;
}

/* the site has one primary button; disabled reads as faded ink, not grey-green */
.lp-att .btn:disabled {
    opacity: 0.45;
}

/* "← Change method" is a <button>: no browser chip behind the link */
.lp-att button.dep2-back {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: 0.85rem;
    color: var(--lp-ink-2);
    cursor: pointer;
}
.lp-att .dep2-back:hover {
    color: var(--lp-ink);
}

.lp-att .badge {
    border-radius: 0;
}

/* ---- /e/{slug}: the rules below beat hard-coded whites and the
   glassy deposit card, several of which are !important in style-19 ---- */
.lp-att .pe-name,
.lp-att .pe-section-title {
    color: var(--lp-ink);
}
.lp-att .pe-name {
    font: 700 40px/1.08 var(--lp-sans);
    letter-spacing: -0.03em;
}
.lp-att .pe-check {
    color: var(--success);
}
.lp-att .pe-deposit-card {
    background: var(--lp-paper) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border: 2px solid var(--lp-ink) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.lp-att .pe-method-card,
.lp-att .pe-method-card:hover,
.lp-att .pe-method-card--promptpay,
.lp-att .pe-method-card--solana {
    background: var(--lp-paper-2) !important;
    border: 2px solid var(--lp-ink) !important;
    border-radius: 0 !important;
    transform: none !important;
}
.lp-att .pe-method-badge,
.lp-att .pe-method-badge--promptpay,
.lp-att .pe-method-badge--solana {
    background: #5a54cb !important;
    color: #f4f0e6 !important;
    border: 0 !important;
    border-radius: 0 !important;
}
.lp-att .pe-method-amount-val {
    color: var(--lp-ink) !important;
}
.lp-att .pe-method-subtext {
    color: var(--lp-ink-2) !important;
}
.lp-att .btn-google {
    border: 2px solid var(--lp-ink);
}
.lp-att .btn-solana-wallet {
    background: transparent !important;
    border: 2px solid var(--lp-ink) !important;
    color: var(--lp-ink) !important;
    box-shadow: none !important;
}

/* the register form: required marks and errors in the danger colour that
   passes on paper, and the submit is the site's ink primary */
.lp-att .pe-required,
.lp-att .pe-field-error {
    color: var(--danger);
}
.lp-att .pe-submit-btn,
.lp-att .pe-submit-btn:hover:not(:disabled) {
    background: var(--lp-ink);
    color: var(--lp-paper);
    border: 2px solid var(--lp-ink);
    border-radius: 0;
}

/* ---- /ticket/{attendee}: the site's 24px gutter, and the state banner as
   a 2px ink box whose thick top edge carries the state (it was a gradient
   fading into the old dark page) ---- */
.lp-att .ticket-page {
    padding: 0 24px 2rem;
}
.lp-att .ticket-hero {
    max-width: 420px; /* the ticket card's width (style-11) */
    background: var(--lp-paper);
    border: 2px solid var(--lp-ink);
    border-top-width: 8px;
    border-radius: 0;
}
.lp-att .ticket-hero--checked-in {
    border-top-color: var(--success);
}
.lp-att .ticket-hero--pending {
    border-top-color: var(--warning);
}
.lp-att .ticket-hero--ready {
    border-top-color: var(--lp-field);
}
.lp-att .ticket-hero--online {
    border-top-color: #ff5c39;
}
.lp-att .ticket-hero--ended {
    border-top-color: var(--lp-ink-3);
}

/* the action cards under a ticket (pay, refund, claim, hold…): flat, square,
   ink on three sides; the left edge keeps each card's state colour */
.lp-att .ticket-action-card {
    background: var(--lp-paper-2);
    border-radius: 0;
    border-style: solid;
    border-width: 2px 2px 2px 6px;
    border-top-color: var(--lp-ink);
    border-right-color: var(--lp-ink);
    border-bottom-color: var(--lp-ink);
}

/* ---- /claim/{token}: the gradient panels (dark glass on the old page)
   become the site's flat 2px ink boxes; their decorative gradient borders
   and shimmer go; the mint button is the ink primary ---- */
.lp-att .claim-welcome-card,
.lp-att .nft-preview-card,
.lp-att .claim-nft-soon-card,
.lp-att .claim-adventure-gate,
.lp-att .claim-success {
    background: var(--lp-paper-2);
    border: 2px solid var(--lp-ink);
    border-radius: 0;
    box-shadow: none;
}
.lp-att .nft-preview-card::before,
.lp-att .claim-nft-soon-card::after,
.lp-att .claim-success::before {
    display: none;
}
.lp-att .claim-btn-mint,
.lp-att .claim-btn-mint:hover:not(:disabled),
.lp-att .claim-btn-mint:active:not(:disabled) {
    background: var(--lp-ink);
    color: var(--lp-paper);
    border: 2px solid var(--lp-ink);
    border-radius: 0;
    box-shadow: none;
}

/* ---- /sandbox: the site gutter (the frame adds the top space) ---- */
.lp-att .sandbox-page {
    padding: 0 24px 2rem;
}

/* inline code (wallet addresses, tx ids): the AA indigo; the global code
   colour #9e9eff is 2.10:1 on paper */
.lp-att code {
    color: var(--lp-t-field);
}

/* ---- Loading skeletons (Phase 2, src/skeleton.rs): square blocks in the
   site's line colour with a soft sweep. The old shell's blocks were the card
   colour, which is the page colour on paper, so they did not show at all.
   Claim keeps its own detailed shimmer layout, drawn the same way. ---- */
.lp .pe-skel,
.lp-att .shimmer {
    border-radius: 0;
    background: linear-gradient(
        100deg,
        var(--lp-line) 30%,
        transparent 50%,
        var(--lp-line) 70%
    );
    background-size: 200% 100%;
}
.lp-att .shimmer-card {
    background: var(--lp-paper);
    border: 2px solid var(--lp-line);
    border-radius: 0;
}
.lp-att .shimmer-avatar {
    border-radius: 0;
}
.pe-skeleton--inline {
    min-height: 0;
}
@media (prefers-reduced-motion: reduce) {
    .lp-att .shimmer {
        animation: none;
    }
}

/* the check-in stamp in the site: square, ink double rule, the light-ground
   person colour on paper (style-11 holds the motion) */
.lp-att .ticket-stamp {
    border-radius: 0;
    background: var(--lp-paper); /* lines under it do not cross the ink */
    border-color: var(--lp-ink);
    color: var(--lp-ink);
    font-family: var(--lp-sans);
}
.lp:not([data-theme="dark"]) .lp-att .ticket-stamp-person {
    fill: #e04a22;
}