/* ==========================================================================
   LoveToRead — app-page overrides ("Bedtime, bound")         rebrand 2026-09-02
   Loaded after each legacy page's own CSS and before tokens.css on every
   non-rewritten page (dashboard, create, characters, orders, admin…). The reader
   has its own stylesheet (reader.css) and takes nothing from here.
   Structural restyling only; the pages' JavaScript hooks are untouched.
   ========================================================================== */

body { background: var(--paper); }

/* ---- locks are gone: every style, text mode and reference is open ---- */
.lock-overlay, .locked-badge, .tab-lock-icon, .unlock-banner, #unlockBanner, .unlock-platform-banner,
.locked-section .lock-overlay, .art-style-card .lock-overlay, .option-card .lock-overlay { display: none !important; }
.locked-option, .locked-style, .locked-tab, .locked-toggle, .locked-section { opacity: 1 !important; pointer-events: auto !important; filter: none !important; cursor: pointer !important; }
.locked-tab[disabled], .locked-option input[disabled], .locked-style input[disabled] { pointer-events: auto; }

/* ---- surfaces: rounder, softer, on paper ---- */
[class*="-card"], [class$="card"], .card, .panel, .section-card, .stat-card, .content-card, .form-section, .step-section, .tabs-container, .profile-header-card, .book-order-banner, .order-card, .story-card, .character-card, .videobook-card {
    border-radius: var(--radius-lg) !important; border-color: var(--rule) !important;
}
.profile-header-card, .tabs-container, .form-section, .step-section, .stat-card, .content-card { background: var(--card); box-shadow: var(--shadow-soft) !important; }
.stat-number, .credit-value, .stat-value { font-family: var(--display) !important; font-weight: 400 !important; color: var(--ink) !important; letter-spacing: -.01em; }

/* ---- the old purple accents ---- */
.badge-purple, .tag-purple, .btn-purple, .videobook-badge, .premium-badge { background: var(--lagoon) !important; color: #fff !important; }
.stories-section .eyebrow, .section-eyebrow, .section-label { color: var(--lagoon) !important; }

/* ---- buttons that the legacy CSS painted green get the lagoon + pill ---- */
.btn-primary, .primary-btn, .cta-button, .create-btn, .generate-btn, .submit-btn, .purchase-btn, .checkout-btn, .btn-create, .login-btn, .btn-large, .order-button {
    border-radius: var(--pill) !important; font-weight: 700 !important; letter-spacing: 0; text-transform: none !important;
    box-shadow: 0 6px 16px -8px rgba(14,124,134,.55) !important;
}
.btn-secondary, .secondary-btn, .btn-outline, .outline-btn { border-radius: var(--pill) !important; font-weight: 700 !important; }

/* ---- inputs ---- */
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], select, textarea {
    border-radius: 12px; border-color: var(--rule);
}
input:focus, select:focus, textarea:focus { border-color: var(--lagoon) !important; box-shadow: 0 0 0 3px var(--lagoon-tint) !important; outline: none; }

/* ---- generic page headers ---- */
.page-header h1, .page-title, .section-title { font-family: var(--display); font-weight: 400 !important; letter-spacing: -.01em; }
.page-subtitle, .section-subtitle { color: var(--ink-soft); }

/* ---- the simpler gift builder (create-story.php) ---- */
.length-pills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.length-pill { display: grid; gap: 3px; padding: 12px 14px; border: 2px solid var(--rule); border-radius: 14px; background: var(--card); text-align: left; cursor: pointer; font-family: inherit; color: var(--ink); }
.length-pill b { font-size: 1rem; }
.length-pill span { font-size: .8rem; color: var(--muted); }
.length-pill.active { border-color: var(--lagoon); background: var(--lagoon-tint); }
.length-pill.active span { color: var(--lagoon-deep); }
@media (max-width: 560px) { .length-pills { grid-template-columns: 1fr; } }
.option-grid--compact .option-card { padding: 12px 14px !important; }
.option-grid--compact .option-icon { width: 36px !important; height: 36px !important; font-size: 1rem !important; }
.option-grid--compact .option-description { display: none; }
.source-tabs { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.source-tab { display: grid !important; justify-items: center; gap: 6px; padding: 12px 8px !important; border: 2px solid var(--rule) !important; border-radius: 14px !important; background: var(--card) !important; color: var(--ink-soft) !important; font: 700 .8rem var(--body) !important; text-align: center; }
.source-tab i { font-size: 1.15rem; color: var(--lagoon); }
.source-tab.active { border-color: var(--lagoon) !important; background: var(--lagoon-tint) !important; color: var(--ink) !important; }
.add-character-btn { border: 2px dashed var(--rule) !important; border-radius: 16px !important; background: var(--card) !important; color: var(--ink-soft) !important; }
.add-character-btn:hover { border-color: var(--lagoon) !important; color: var(--lagoon-deep) !important; }
.add-character-btn small { color: var(--muted) !important; }
.step-number { background: var(--marigold) !important; color: var(--ink) !important; font-family: var(--display) !important; }
.form-step { border-radius: var(--radius-xl) !important; }

/* ---- gradients and greens that survived the alias pass ---- */
.hero-background-animation, .auth-left, .left-panel { background: var(--night) !important; }
.auth-hero { background: var(--night) !important; color: var(--on-night); position: relative; }
.auth-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(circle at 12% 18%, rgba(255,255,255,.10) 1px, transparent 1.6px), radial-gradient(circle at 72% 62%, rgba(255,255,255,.08) 1px, transparent 1.6px), radial-gradient(circle at 38% 84%, rgba(255,255,255,.08) 1px, transparent 1.6px), radial-gradient(circle at 88% 22%, rgba(255,177,0,.35) 1.2px, transparent 2px); background-size: 220px 220px, 260px 260px, 300px 300px, 520px 520px; }
.auth-hero .hero-content { position: relative; }
.auth-hero .hero-title { font-family: var(--display); font-weight: 400 !important; color: #F4F1EA !important; font-size: clamp(2rem, 3.4vw, 2.8rem) !important; }
.auth-hero .hero-subtitle, .auth-hero .feature-item, .auth-hero .hero-footer-text { color: #B7BDD6 !important; }
.auth-hero .feature-item i { color: var(--marigold) !important; }
.auth-hero .hero-bg-decoration { display: none; }
.auth-title { font-family: var(--display); font-weight: 400 !important; }
.auth-button.primary-button { background: var(--lagoon) !important; border-radius: var(--pill) !important; }
.google-button { border-radius: var(--pill) !important; }
.gradient-bg, .header-gradient, .banner-gradient { background: linear-gradient(135deg, var(--lagoon), var(--lagoon-deep)) !important; }

/* ---- spacing rhythm on app pages ---- */
.profile-wrapper, .create-wrapper, .characters-wrapper, .orders-wrapper, .page-wrapper { padding-top: clamp(20px, 4vw, 40px); padding-bottom: clamp(40px, 6vw, 80px); }

/* Prepaid keepsake address block on the order page (2026-09-04). Shown only when nothing
   is owed, because then there is no Stripe step to collect the address. */
.addr-stack { display: grid; gap: 8px; }
.addr-3 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 8px; }
@media (max-width: 560px) { .addr-3 { grid-template-columns: 1fr; } }
#prepaidAddress[hidden] { display: none !important; }
#prepaidAddress .modal-hint {
    margin: 8px 0 0; font-size: .84rem; line-height: 1.45;
    color: var(--danger, #C2413B); background: var(--danger-tint, #FBE7E5);
    border-radius: 8px; padding: 8px 10px;
}
#prepaidAddress .modal-hint[hidden] { display: none !important; }

/* The address Stripe validated at checkout, shown back rather than retyped (2026-09-09,
   _brand/FUNNEL-SPEC.md §9c.C). */
#paForm[hidden], #paConfirmed[hidden] { display: none !important; }
.addr-confirmed {
    display: flex; gap: 10px; align-items: flex-start;
    background: var(--moss-tint, #E1F0E6);
    border: 1px solid var(--rule, #DCD4C4);
    border-radius: var(--radius-xs, 8px);
    padding: 10px 12px;
}
.addr-confirmed__tick {
    flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px;
    display: grid; place-items: center;
    border-radius: 50%; background: var(--moss, #3E7C59); color: #fff;
    font-size: .7rem; line-height: 1;
}
.addr-confirmed__body { flex: 1; min-width: 0; }
.addr-confirmed__who { font-weight: 700; color: var(--ink, #22263A); font-size: .92rem; }
.addr-confirmed__lines { color: var(--ink-soft, #464B60); font-size: .86rem; line-height: 1.45; margin-top: 2px; }
.addr-confirmed__src {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
    margin-top: 6px; font-size: .78rem; color: var(--muted, #6B7086);
}
.addr-confirmed__edit {
    background: none; border: 0; padding: 0; cursor: pointer;
    font: inherit; font-weight: 700; color: var(--lagoon, #0E7C86);
    text-decoration: underline; text-underline-offset: 2px;
}
.addr-confirmed__edit:hover { color: var(--lagoon-deep, #0A5F67); }