/* ============================================================================
   Standardise — Design System Styles
   Navy + Gold color scheme with DM Serif Display / DM Sans / JetBrains Mono
   ============================================================================ */

:root {
    /* Navy — Primary brand color */
    --navy-950: #0B1121;
    --navy-900: #111827;
    --navy-800: #1A2332;
    --navy-700: #243044;
    --navy-600: #334155;
    --navy-500: #475569;
    --navy-400: #64748B;
    --navy-300: #94A3B8;
    --navy-200: #CBD5E1;
    --navy-100: #E2E8F0;
    --navy-50:  #F1F5F9;

    /* Gold — Brand accent */
    --gold-600: #B8863E;
    --gold-500: #D4A056;
    --gold-400: #E4B06A;
    --gold-300: #F0C88A;
    --gold-100: #FDF6EC;

    /* Semantic */
    --emerald-500: #10B981;
    --emerald-600: #059669;
    --emerald-50:  #ECFDF5;

    --red-500: #EF4444;
    --red-100: #FEE2E2;
    --red-50:  #FEF2F2;

    /* Surfaces */
    --white: #FFFFFF;
    --bg: #F8FAFC;
    --card-bg: #FFFFFF;
    --card-border: #E2E8F0;
    --card-hover-border: #D4A056;
    --card-selected-bg: #FFFBF5;
    --card-selected-border: #D4A056;

    /* Typography */
    --font-display: 'DM Serif Display', Georgia, serif;
    --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Consolas', monospace;

    /* Spacing & Radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.625rem;
    --radius-lg: 0.875rem;
    --radius-xl: 1.25rem;

    /* Shadows — kept in px for crispness */
    --shadow-sm: 0 1px 2px rgba(11,17,33,0.05);
    --shadow-md: 0 4px 12px rgba(11,17,33,0.08);
    --shadow-lg: 0 12px 32px rgba(11,17,33,0.12);
    --shadow-gold: 0 0 0 3px rgba(212,160,86,0.15);
}

/* ─── Scaling Root ─── */
html {
    font-size: clamp(15px, 0.625vw + 9px, 18px);
    /* Always reserve the vertical scrollbar gutter so toggling settings that
       change page height (e.g. "No page numbers" hiding rows) doesn't shift the
       centred layout left/right (U5). */
    scrollbar-gutter: stable;
}

/* ─── Reset ─── */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ─── Base ─── */
body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--navy-900);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

/* ─── Topbar ─── */
.topbar {
    background: var(--navy-950);
    padding: 0 2.5rem 0 1.25rem;
    height: 3.5rem;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    position: sticky;
    top: 0;
    z-index: 100;
}

.topbar-logo {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.topbar-logo-img {
    height: 2.75rem;
    width: auto;
}

.topbar-account {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #fff;
}

.account-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.1;
}

.account-email {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.85);
    max-width: 16rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-tier {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gold-500);
}

/* ─── Monthly upload usage bar ─── */
.account-usage {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.1875rem;
}

.account-usage-bar {
    width: 7.5rem;
    height: 0.375rem;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 0.1875rem;
    overflow: hidden;
}

.account-usage-bar-fill {
    height: 100%;
    background: var(--gold-500);
    border-radius: 0.1875rem;
    transition: width 200ms ease;
}

.account-usage-bar-fill.is-over {
    background: var(--red-500);
}

.account-usage-text {
    font-size: 0.6875rem;
    color: rgba(255, 255, 255, 0.75);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.account-btn {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 0.375rem;
    padding: 0.4375rem 0.875rem;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
}

.account-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.55);
}

.account-btn-sm {
    padding: 0.3125rem 0.625rem;
    font-size: 0.75rem;
}

/* ============================================================================
   Landing page (signed-out view at /)
   Shown when body.is-signed-out; hidden while auth is resolving and when the
   user is signed in (the app's .topbar + .container show instead).
   ============================================================================ */

/* Dark theme: deep-navy base with a faint gold glow behind the hero. */
#landing {
    display: none;
    background:
        radial-gradient(55rem 28rem at 82% -8%, rgba(212, 160, 86, 0.10), transparent 60%),
        var(--navy-950);
    color: var(--navy-200);
    min-height: 100vh;
}
body.is-signed-out #landing { display: block; }
body.is-signed-out .topbar,
body.is-signed-out .container { display: none; }
/* Until auth resolves, show neither the app nor the landing (avoids a flash of
   the wrong view). applyLoginGate() removes auth-resolving once state is known. */
body.auth-resolving .topbar,
body.auth-resolving .container,
body.auth-resolving #landing { display: none !important; }

/* ─── Landing buttons ─── */
.landing-btn {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.9375rem;
    border-radius: var(--radius-md);
    padding: 0.625rem 1.25rem;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.15s ease;
}
.landing-btn-primary { background: var(--gold-500); color: var(--navy-950); }
.landing-btn-primary:hover {
    background: var(--gold-400);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
    transform: translateY(-1px);
}
.landing-btn-ghost {
    background: transparent;
    color: var(--navy-100);
    border-color: var(--navy-600);
}
.landing-btn-ghost:hover { background: var(--navy-800); border-color: var(--navy-500); }
.landing-btn-lg { padding: 0.875rem 1.75rem; font-size: 1rem; }

/* ─── Nav ─── */
.landing-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: 80rem;
    margin: 0 auto;
    padding: 1rem 2rem;
}
/* The cropped logo SVG has only ~2.4% empty padding on its left inside the
   viewBox (mark starts at x=115 of the "105 0 410 120" viewBox, i.e. 10 units in).
   Pull it left so the mark aligns with the hero text below. Offset is tied to the
   height: 10/120 * 3rem = 0.25rem. */
.landing-nav-logo { height: 3rem; width: auto; margin-left: -0.25rem; }
.landing-nav-actions { display: flex; gap: 0.75rem; align-items: center; }

/* ─── Hero ─── */
.landing-hero {
    max-width: 80rem;
    margin: 0 auto;
    padding: 3rem 2rem 4rem;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 3rem;
    align-items: center;
    animation: fadeUp 0.4s ease;
}
.landing-hero-text h1 {
    font-family: var(--font-display);
    font-size: 3rem;
    line-height: 1.1;
    color: #fff;
    margin-bottom: 1.25rem;
}
.landing-hero-text > p {
    font-size: 1.125rem;
    color: var(--navy-300);
    line-height: 1.6;
    margin-bottom: 1.75rem;
    max-width: 34rem;
}
.landing-hero-actions { display: flex; gap: 0.875rem; flex-wrap: wrap; }
.landing-hero-note { font-size: 0.8125rem; color: var(--navy-400); margin-top: 1rem; }

/* Hero index mock — kept light (a sheet of "paper" floating on the dark hero) */
.landing-hero-visual { display: flex; justify-content: center; }
.landing-mock {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.5);
    padding: 1.5rem;
    width: 100%;
    max-width: 24rem;
}
.landing-mock-title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--navy-950);
    text-align: center;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--navy-100);
    margin-bottom: 0.875rem;
}
.landing-mock-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0; }
.landing-mock-tab {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--navy-600);
    background: var(--navy-50);
    border-radius: var(--radius-sm);
    padding: 0.125rem 0.5rem;
    min-width: 2.5rem;
    text-align: center;
}
.landing-mock-bar { height: 0.5rem; background: var(--navy-100); border-radius: 1rem; }
.landing-mock-bar.w-55 { width: 40%; }
.landing-mock-bar.w-65 { width: 48%; }
.landing-mock-bar.w-70 { width: 55%; }
.landing-mock-bar.w-80 { width: 62%; }
.landing-mock-bar.w-90 { width: 70%; }
.landing-mock-pg {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--navy-400);
}
.landing-mock-divider {
    font-weight: 700;
    font-size: 0.75rem;
    color: var(--navy-700);
    background: var(--navy-50);
    border-radius: var(--radius-sm);
    padding: 0.375rem 0.5rem;
    text-align: center;
    margin: 0.5rem 0;
}

/* ─── Sections ─── */
.landing-section { padding: 3.5rem 2rem; }
.landing-section > * { max-width: 80rem; margin-left: auto; margin-right: auto; }
.landing-section-alt {
    background: var(--navy-900);
    border-top: 1px solid var(--navy-800);
    border-bottom: 1px solid var(--navy-800);
}
.landing-h2 {
    font-family: var(--font-display);
    font-size: 2rem;
    color: #fff;
    text-align: center;
    margin-bottom: 2rem;
}
.landing-sub {
    text-align: center;
    color: var(--navy-400);
    font-size: 1rem;
    max-width: 42rem;
    margin: -1rem auto 2.5rem;
    line-height: 1.6;
}

/* ─── Feature grid ─── */
.landing-features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.landing-feature {
    background: var(--navy-800);
    border: 1px solid var(--navy-700);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    transition: all 0.2s ease;
}
.landing-feature:hover {
    border-color: var(--gold-500);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
    transform: translateY(-2px);
}
.landing-feature-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-sm);
    background: rgba(212, 160, 86, 0.12);
    color: var(--gold-400);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}
.landing-feature h3 { font-size: 1rem; color: #fff; margin-bottom: 0.375rem; }
.landing-feature p { font-size: 0.875rem; color: var(--navy-300); line-height: 1.55; }
.landing-feature code {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    background: rgba(255, 255, 255, 0.08);
    color: var(--gold-300);
    padding: 0 0.25rem;
    border-radius: 0.25rem;
}

/* ─── How it works ─── */
.landing-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    list-style: none;
}
.landing-steps li {
    background: var(--navy-800);
    border: 1px solid var(--navy-700);
    border-radius: var(--radius-md);
    padding: 1.75rem 1.5rem;
}
.landing-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--gold-500);
    color: var(--navy-950);
    font-weight: 700;
    font-family: var(--font-mono);
    margin-bottom: 1rem;
}
.landing-steps h3 { font-size: 1.0625rem; color: #fff; margin-bottom: 0.375rem; }
.landing-steps p { font-size: 0.875rem; color: var(--navy-300); line-height: 1.55; }

/* ─── Pricing ─── */
.landing-plans {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    align-items: start;
    max-width: 60rem;
}
.landing-plan {
    background: var(--navy-800);
    border: 2px solid var(--navy-700);
    border-radius: var(--radius-lg);
    padding: 2rem 1.5rem;
    text-align: center;
    transition: all 0.2s ease;
}
.landing-plan:hover {
    border-color: var(--navy-500);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
    transform: translateY(-2px);
}
.landing-plan-featured { border-color: var(--gold-500); box-shadow: var(--shadow-gold); }
.landing-plan-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    min-height: 3.5rem;
}
.landing-plan-name { font-family: var(--font-display); font-size: 1.5rem; color: #fff; }
.landing-plan-trial,
.landing-plan-flag {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-radius: 1rem;
    padding: 0.1875rem 0.625rem;
}
.landing-plan-trial { background: rgba(212, 160, 86, 0.15); color: var(--gold-300); }
.landing-plan-flag { background: var(--gold-500); color: var(--navy-950); }
.landing-plan-price {
    font-family: var(--font-display);
    font-size: 2.5rem;
    color: #fff;
    margin: 1rem 0 0.25rem;
}
.landing-plan-price span {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    color: var(--navy-400);
    font-weight: 500;
}
.landing-plan-cap { font-size: 0.875rem; color: var(--navy-300); margin-bottom: 1.5rem; }
.landing-plan-cta { width: 100%; }

/* ─── Security note ─── */
.landing-security { text-align: center; max-width: 44rem; }
.landing-security p { color: var(--navy-300); font-size: 1rem; line-height: 1.7; }
.landing-security a { color: var(--gold-400); font-weight: 600; }

/* ─── Footer ─── */
.landing-footer {
    background: var(--navy-950);
    color: #fff;
    padding: 2rem;
    border-top: 1px solid var(--navy-800);
}
.landing-footer-inner {
    max-width: 80rem;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.landing-footer-logo { height: 2rem; width: auto; }
.landing-footer-links { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.landing-footer-links a { color: var(--navy-300); font-size: 0.875rem; text-decoration: none; }
.landing-footer-links a:hover { color: #fff; }
.landing-footer-copy { margin-left: auto; color: var(--navy-500); font-size: 0.8125rem; }

/* ─── Landing responsive ─── */
@media (max-width: 56.25rem) {
    .landing-hero { grid-template-columns: 1fr; padding-top: 2rem; gap: 2rem; }
    .landing-hero-visual { order: -1; }
    .landing-hero-text h1 { font-size: 2.25rem; }
    .landing-features { grid-template-columns: repeat(2, 1fr); }
    .landing-steps,
    .landing-plans { grid-template-columns: 1fr; }
}
@media (max-width: 40rem) {
    .landing-features { grid-template-columns: 1fr; }
    .landing-footer-copy { margin-left: 0; width: 100%; }
}

/* ============================================================================
   Legal pages (/terms, /privacy, /refund-policy)
   ============================================================================ */
.legal-page { max-width: 48rem; margin: 0 auto; padding: 2rem 1.5rem 4rem; }
.legal-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 0 1.5rem;
    border-bottom: 1px solid var(--navy-100);
    margin-bottom: 2rem;
}
.legal-page-header img { height: 2rem; width: auto; }
.legal-back { color: var(--gold-600); font-weight: 600; font-size: 0.875rem; text-decoration: none; }
.legal-back:hover { text-decoration: underline; }
.legal-page h1 {
    font-family: var(--font-display);
    font-size: 2.25rem;
    color: var(--navy-950);
    margin-bottom: 0.5rem;
}
.legal-updated { color: var(--navy-400); font-size: 0.8125rem; margin-bottom: 2rem; }
.legal-page h2 {
    font-family: var(--font-display);
    font-size: 1.375rem;
    color: var(--navy-950);
    margin: 2rem 0 0.75rem;
}
.legal-page p,
.legal-page li { color: var(--navy-700); font-size: 0.9375rem; line-height: 1.7; }
.legal-page ul { margin: 0.5rem 0 1rem 1.5rem; }
.legal-page li { margin-bottom: 0.375rem; }
.legal-page a { color: var(--gold-600); }
.legal-note {
    background: var(--navy-50);
    border-left: 3px solid var(--gold-500);
    border-radius: var(--radius-sm);
    padding: 1rem 1.25rem;
    margin: 1.5rem 0;
    font-size: 0.875rem;
    color: var(--navy-600);
}
.legal-note strong { color: var(--navy-900); }

/* ─── Cap-reached modal (shown on HTTP 402) ─── */
.cap-modal {
    position: fixed;
    inset: 0;
    background: rgba(11, 17, 33, 0.7);
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
}

.cap-modal[hidden] { display: none; }

.cap-modal-card {
    background: #fff;
    border-radius: 0.75rem;
    padding: 2rem 1.75rem;
    max-width: 26rem;
    width: 100%;
    box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, 0.3);
}

.cap-modal-card h2 {
    margin: 0 0 0.75rem;
    font-size: 1.25rem;
    color: var(--navy-950);
}

.cap-modal-body {
    margin: 0 0 0.5rem;
    color: var(--navy-600, #4a5568);
    font-size: 0.9375rem;
    line-height: 1.45;
}

.cap-modal-reset {
    margin: 0 0 1.5rem;
    color: var(--navy-600, #4a5568);
    font-size: 0.8125rem;
}

.cap-modal-actions {
    display: flex;
    gap: 0.625rem;
    justify-content: flex-end;
}

.cap-modal-upgrade,
.cap-modal-close {
    border-radius: 0.375rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 120ms ease, border-color 120ms ease;
}

.cap-modal-upgrade {
    background: var(--gold-500);
    color: var(--navy-950);
    border-color: var(--gold-500);
    font-weight: 600;
}

.cap-modal-upgrade:hover {
    background: var(--gold-600, #b8862e);
    border-color: var(--gold-600, #b8862e);
}

.cap-modal-close {
    background: var(--navy-950);
    color: #fff;
    border-color: var(--navy-950);
}

.cap-modal-close:hover {
    background: var(--navy-600);
    border-color: var(--navy-600);
}

/* ─── "How to use Standardise" instruction sheet ─── */
.instructions-card {
    max-width: 47.5rem;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* The card clips to its rounded corners; the body scrolls inside it so the
   scrollbar never squares off the right-hand corners. */
.instructions-card .instructions-body {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
}

/* Show the scrollbar thumb only while scrolling, or when hovering the scrollbar
   itself. The track width is constant, so revealing the thumb never shifts the
   content. */
.instructions-card .instructions-body {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

/* Firefox can't react to hovering the scrollbar alone, so it reveals on scroll. */
.instructions-card .instructions-body.is-scrolling {
    scrollbar-color: var(--navy-200, #CBD5E1) transparent;
}

.instructions-card .instructions-body::-webkit-scrollbar {
    width: 0.5rem;
}

.instructions-card .instructions-body::-webkit-scrollbar-track {
    background: transparent;
}

.instructions-card .instructions-body::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 0.25rem;
    transition: background 200ms ease;
}

.instructions-card .instructions-body.is-scrolling::-webkit-scrollbar-thumb,
.instructions-card .instructions-body::-webkit-scrollbar-thumb:hover {
    background: var(--navy-200, #CBD5E1);
}

.instructions-card .cap-modal-actions {
    flex: 0 0 auto;
    padding-top: 0.75rem;
}

.instructions-body h3 {
    margin: 1.5rem 0 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--navy-950);
    border-bottom: 1px solid var(--card-border, #e2e8f0);
    padding-bottom: 0.25rem;
}

.instructions-body h4 {
    margin: 1rem 0 0.375rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gold-600, #b8862e);
}

.instructions-body p {
    margin: 0 0 0.625rem;
}

.instructions-body ol,
.instructions-body ul {
    margin: 0 0 0.625rem;
    padding-left: 1.25rem;
}

.instructions-body ul ul {
    margin: 0.375rem 0 0.5rem;
}

.instructions-body li {
    margin-bottom: 0.4375rem;
}

.instructions-body code {
    background: var(--navy-50, #f1f5f9);
    border-radius: 0.25rem;
    padding: 0.0625rem 0.3125rem;
    font-size: 0.8125rem;
}

/* Highlighted example boxes inside the instruction sheet */
.instructions-example {
    background: var(--gold-100, #FDF6EC);
    border: 1px solid var(--gold-300, #F0C88A);
    border-left: 3px solid var(--gold-500);
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    margin: 0.4375rem 0 0.25rem;
    font-size: 0.8125rem;
    line-height: 1.7;
}

.instructions-example > div {
    white-space: normal;
}

.instructions-example code {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid var(--gold-300, #F0C88A);
}

/* Step 1 entry link */
.how-to-link {
    display: inline-block;
    margin: 0 0 1rem;
    background: transparent;
    border: none;
    padding: 0;
    color: var(--gold-600, #b8862e);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
}

.how-to-link:hover {
    text-decoration: underline;
}

/* ─── Account "Start free trial" accent button ─── */
.account-btn-accent {
    background: var(--gold-500);
    color: var(--navy-950);
    border-color: var(--gold-500);
    font-weight: 600;
}

.account-btn-accent:hover {
    background: var(--gold-600, #b8862e);
    border-color: var(--gold-600, #b8862e);
}

/* ─── Plan picker modal (402 subscription_required + topbar "Start free trial") ─── */
.plan-picker {
    position: fixed;
    inset: 0;
    background: rgba(11, 17, 33, 0.7);
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
}

.plan-picker[hidden] { display: none; }

.plan-picker-card {
    background: #fff;
    border-radius: 0.75rem;
    padding: 2rem 1.75rem;
    max-width: 48rem;
    width: 100%;
    box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, 0.3);
}

.plan-picker-card h2 {
    margin: 0 0 0.5rem;
    font-size: 1.375rem;
    color: var(--navy-950);
}

.plan-intro {
    margin: 0 0 1.5rem;
    color: var(--navy-600, #4a5568);
    font-size: 0.9375rem;
    line-height: 1.45;
}

.plan-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

@media (max-width: 40rem) {
    .plan-grid { grid-template-columns: 1fr; }
}

.plan-card {
    border: 1px solid var(--card-border, rgba(11, 17, 33, 0.12));
    border-radius: var(--radius-md);
    padding: 1.25rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.plan-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.plan-name {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--navy-950);
}

.plan-trial-badge {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--gold-600, #b8862e);
    background: var(--gold-100, #faf3e6);
    border: 1px solid var(--gold-300, #e6cfa0);
    border-radius: 999px;
    padding: 0.125rem 0.5rem;
}

.plan-price {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--navy-950);
}

.plan-price span {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--navy-600, #4a5568);
}

.plan-cap {
    font-size: 0.875rem;
    color: var(--navy-600, #4a5568);
    margin-bottom: 0.5rem;
}

.plan-cta {
    margin-top: auto;
    background: var(--gold-500);
    color: var(--navy-950);
    border: none;
    border-radius: var(--radius-sm);
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 120ms ease;
}

.plan-cta:hover {
    background: var(--gold-600, #b8862e);
}

.plan-legal {
    margin: 1.5rem 0 0;
    font-size: 0.8125rem;
    color: var(--navy-400);
    text-align: center;
    line-height: 1.5;
}
.plan-legal a { color: var(--gold-600); }

.plan-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 1.5rem;
}

.plan-close {
    background: var(--navy-950);
    color: #fff;
    border: 1px solid var(--navy-950);
    border-radius: 0.375rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
}

.plan-close:hover {
    background: var(--navy-600);
    border-color: var(--navy-600);
}

/* ─── Layout ─── */
.container {
    max-width: 80rem;
    margin: 0 auto;
    padding: 0.75rem 1.25rem 2rem;
}

h1 {
    display: none; /* Hidden, replaced by topbar */
}

/* ─── Global toast (post-checkout return + other transient messages) ─── */
.app-toast {
    position: fixed;
    top: 4.5rem;                 /* clears the fixed topbar */
    left: 0;
    right: 0;
    margin: 0 auto;              /* centre without transform (fadeUp uses transform) */
    width: max-content;
    max-width: min(30rem, calc(100vw - 2.5rem));
    z-index: 1200;
    padding: 0.75rem 1.25rem;
    border-radius: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
    color: #fff;
    background: var(--navy-950);
    box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.3);
    cursor: pointer;
    animation: fadeUp 200ms ease;
}

.app-toast[hidden] { display: none; }

.app-toast.success {
    background: var(--gold-500);
    color: var(--navy-950);
    font-weight: 600;
}

.app-toast.error {
    background: var(--red-500);
}

/* ─── Animations ─── */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ============================================================================
   Wizard Progress Bar (Stepper)
   ============================================================================ */
.wizard-progress {
    background: var(--white);
    padding: 0.625rem 2rem;
    border-radius: var(--radius-lg);
    margin-bottom: 0.75rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--card-border);
}

.wizard-steps {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    gap: 0;
}

.wizard-step-indicator {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    cursor: pointer;
    transition: opacity 0.2s;
    z-index: 1;
}

.wizard-step-indicator:hover {
    opacity: 0.85;
}

.wizard-step-number {
    width: 2.125rem;
    height: 2.125rem;
    border-radius: 50%;
    background: var(--white);
    color: var(--navy-400);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8125rem;
    border: 2px solid var(--navy-200);
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.wizard-step-indicator.active .wizard-step-number {
    background: var(--gold-500);
    border-color: var(--gold-500);
    color: var(--white);
    box-shadow: 0 2px 8px rgba(212,160,86,0.35);
}

.wizard-step-indicator.completed .wizard-step-number {
    background: var(--navy-950);
    border-color: var(--navy-950);
    color: var(--white);
}

.wizard-step-indicator.locked .wizard-step-number {
    background: var(--navy-600);
    border-color: var(--navy-600);
    color: var(--white);
}

.wizard-step-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--navy-400);
    white-space: nowrap;
}

.wizard-step-indicator.active .wizard-step-label {
    color: var(--gold-600);
}

.wizard-step-indicator.completed .wizard-step-label {
    color: var(--navy-900);
}

/* Progress line between steps */
.wizard-progress-line {
    flex: 1;
    height: 2px;
    background: var(--navy-200);
    margin: 0 1rem;
    min-width: 2.5rem;
    position: relative;
    overflow: hidden;
}

/* Shimmer on completed connectors */
.wizard-progress-line.completed {
    background: var(--gold-500);
}

.wizard-progress-line.completed::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
    animation: shimmer 2s infinite;
}

/* Wizard Steps (content panels) */
.wizard-step {
    display: none;
    animation: fadeUp 0.35s ease;
}

.wizard-step.active {
    display: block;
}

/* ============================================================================
   Sections
   ============================================================================ */
.section {
    background: var(--white);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    padding: 1rem 1.25rem;
    margin-bottom: 0.75rem;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.section h2 {
    font-family: var(--font-display);
    font-size: 1.375rem;
    color: var(--navy-950);
    margin-bottom: 0.25rem;
    border-bottom: 1px solid var(--card-border);
    padding-bottom: 0.5rem;
}

.section-hint {
    font-size: 0.844rem;
    color: var(--navy-400);
    margin-bottom: 0.625rem;
    line-height: 1.5;
}

/* ============================================================================
   Bundle Selection Cards (Step 1)
   ============================================================================ */
.bundle-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin: 1.5rem 0;
}

.bundle-option-card {
    padding: 1.75rem 1.5rem;
    border: 2px solid var(--card-border);
    border-radius: var(--radius-md);
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--white);
    position: relative;
}

.bundle-option-card:hover {
    border-color: var(--navy-300);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.bundle-option-card.selected {
    border-color: var(--gold-500);
    background: var(--card-selected-bg);
    box-shadow: var(--shadow-gold);
}

.bundle-option-card.selected::after {
    content: '\2713';
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 1.375rem;
    height: 1.375rem;
    background: var(--gold-500);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: bold;
}

.bundle-option-card.disabled {
    opacity: 0.45;
    pointer-events: none;
    cursor: not-allowed;
}

.bundle-option-card.locked {
    pointer-events: none;
    cursor: default;
}

.bundle-option-card .option-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    background: var(--navy-50);
    color: var(--navy-600);
    transition: all 0.2s;
}

.bundle-option-card.selected .option-icon {
    background: var(--gold-100);
    color: var(--gold-600);
}

.bundle-option-card h3 {
    margin: 0 0 0.375rem;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--navy-900);
}

.bundle-option-card p {
    color: var(--navy-400);
    font-size: 0.8125rem;
    margin: 0;
    line-height: 1.45;
}

/* Selection Summary */
.selection-summary {
    background: var(--navy-50);
    padding: 0.875rem 1.25rem;
    border-radius: var(--radius-sm);
    margin-top: 1.25rem;
    display: none;
    font-size: 0.844rem;
    color: var(--navy-700);
}

.selection-summary.active {
    display: block;
}

/* ============================================================================
   Column Toggles / Display Options
   ============================================================================ */
.column-toggles {
    display: flex;
    gap: 1.25rem;
    margin-bottom: 0.625rem;
}

.toggle-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--navy-700);
    cursor: pointer;
    font-weight: 500;
}

.toggle-label input[type="checkbox"] {
    cursor: pointer;
    accent-color: var(--navy-950);
    width: 1rem;
    height: 1rem;
}

/* ============================================================================
   Drop Zones
   ============================================================================ */
.drop-zone {
    border: 2px dashed var(--navy-200);
    border-radius: var(--radius-md);
    padding: 2.5rem 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    background: var(--navy-50);
}

.drop-zone:hover,
.drop-zone.dragover {
    border-color: var(--gold-500);
    background: var(--gold-100);
}

.drop-zone p {
    color: var(--navy-700);
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.drop-zone small {
    color: var(--navy-400);
    font-size: 0.781rem;
}

.file-input {
    display: none;
}

/* ============================================================================
   Cover Preview
   ============================================================================ */
.cover-preview {
    margin-top: 0.9375rem;
    padding: 1rem 1.25rem;
    background: var(--emerald-50);
    border: 1px solid #A7F3D0;
    border-radius: var(--radius-md);
    display: none;
}

.cover-preview.active {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cover-preview .filename {
    font-weight: 600;
    color: var(--emerald-600);
    font-size: 0.844rem;
}

.cover-preview .remove-btn {
    background: transparent;
    color: var(--red-500);
    border: 1px solid var(--red-100);
    padding: 0.375rem 0.875rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.781rem;
    font-weight: 600;
    transition: all 0.15s;
}

.cover-preview .remove-btn:hover {
    background: var(--red-50);
    border-color: var(--red-500);
}

/* ============================================================================
   Document List
   ============================================================================ */
#documentList,
#documentList_boa {
    min-height: 5rem;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin-top: 0.75rem;
}

.doc-item {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.625rem;
    padding: 0.625rem 0.875rem;
    background: var(--white);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    transition: all 0.15s;
    user-select: none;
    font-size: 0.8125rem;
}

.doc-item:first-child {
    border-top: 1px solid var(--card-border);
}

.doc-item:hover {
    border-color: var(--navy-300);
    box-shadow: var(--shadow-sm);
}

.doc-item.selected {
    background: var(--gold-100);
    border-color: var(--gold-500);
}

.doc-item.selected:hover {
    background: var(--card-selected-bg);
}

.doc-item.dragging {
    opacity: 0.5;
    cursor: grabbing;
}

.doc-item.drag-over,
.group-item.drag-over {
    /* Drop indicator above the row — group rows previously had no rule, so
       dropping above a group showed no indicator even though it worked (U4). */
    border-top: 3px solid var(--gold-500);
}

/* Drop indicator BELOW the row — for dropping at the very end of a list or the
   last item/group (Wayne v2 #4: no indicator was shown at the bottom). */
.doc-item.drag-over-bottom,
.group-item.drag-over-bottom {
    border-bottom: 3px solid var(--gold-500);
}

.doc-item .select-checkbox {
    cursor: pointer;
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    accent-color: var(--navy-950);
}

.doc-item .drag-handle {
    color: var(--navy-300);
    font-size: 1.2rem;
    cursor: grab;
    padding: 0.25rem;
}

.doc-item .drag-handle:hover {
    color: var(--navy-500);
}

.doc-item .tab-input-inline {
    font-family: var(--font-body);
    background: var(--navy-50);
    border: 1px solid var(--card-border);
    border-radius: 0.25rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--navy-600);
    width: 3.5rem;
    min-width: 3.5rem;
    text-align: center;
    flex-shrink: 0;
}

.doc-item .tab-input-inline:focus {
    outline: none;
    border-color: var(--gold-500);
    background: var(--white);
    box-shadow: 0 0 0 2px rgba(212,160,86,0.15);
}

.doc-item .description-input-inline {
    flex: 1;
    min-width: 0;
    color: var(--navy-700);
    font-size: 0.8125rem;
    font-weight: 500;
    font-family: var(--font-body);
    padding: 0.25rem 0.375rem;
    border-radius: 0.25rem;
    border: 1px solid var(--card-border);
    background: var(--navy-50);
    resize: none;
    overflow: hidden;
}

.doc-item .description-input-inline:focus {
    outline: none;
    border-color: var(--gold-500);
    background: var(--white);
    box-shadow: 0 0 0 2px rgba(212,160,86,0.15);
}

.doc-item .doc-size {
    color: var(--navy-400);
    font-size: 0.75rem;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 4.375rem;
    text-align: right;
}

/* Inline "verify" badge on rows whose details the AI auto-fill populated.
   Transient — surfaced by aiVerifyBadge() when doc._aiVerify is set; nudges the
   user to sanity-check AI output. Gold accent, consistent with the AI Autofill
   button; cleared once the user edits the row. */
.doc-item .ai-verify-badge {
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1;
    color: var(--gold-600);
    background: var(--gold-100);
    border: 1px solid var(--gold-300);
    border-radius: var(--radius-sm, 0.375rem);
    padding: 0.1875rem 0.375rem;
    cursor: default;
}

.doc-item .action-btn {
    background: none;
    border: none;
    color: var(--navy-300);
    cursor: pointer;
    padding: 0.375rem;
    font-size: 1.1rem;
    border-radius: 0.25rem;
    transition: all 0.15s;
    flex-shrink: 0;
}

.doc-item .action-btn:hover {
    background: var(--navy-50);
    color: var(--navy-600);
}

.doc-item .remove-btn {
    color: var(--navy-300);
}

.doc-item .remove-btn:hover {
    color: var(--red-500);
    background: var(--red-50);
}

.doc-item .view-row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex: 1;
    min-width: 0;
}

.doc-item .tag-input-inline {
    width: 4.375rem;
    min-width: 4.375rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--card-border);
    border-radius: 0.25rem;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    background: var(--navy-50);
    flex-shrink: 0;
    color: var(--navy-600);
}

.doc-item .tag-input-inline:focus {
    outline: none;
    border-color: var(--gold-500);
    background: var(--white);
    box-shadow: 0 0 0 2px rgba(212,160,86,0.15);
}

.doc-item .tag-input-inline::placeholder {
    color: var(--navy-300);
}

.doc-item .date-input-inline {
    width: 9.375rem;
    min-width: 9.375rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--card-border);
    border-radius: 0.25rem;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    background: var(--navy-50);
    flex-shrink: 0;
    color: var(--navy-400);
}

.doc-item .date-input-inline:focus {
    outline: none;
    border-color: var(--gold-500);
    background: var(--white);
    box-shadow: 0 0 0 2px rgba(212,160,86,0.15);
}

.doc-item .date-input-inline::placeholder {
    color: var(--navy-300);
}

/* Wayne v2 #6: stack the label above so the relevance textbox's left edge lines
   up with the description box above it (the 3.875rem left padding matches the
   width of the checkbox + drag handle + tab cell in the row above). */
.doc-item .relevance-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    width: 100%;
    padding: 0.25rem 0.875rem 0.5rem 3.875rem;
    background: transparent;
}

.doc-item .relevance-label {
    font-size: 0.8125rem;
    color: var(--navy-700);
    white-space: nowrap;
    font-weight: 500;
}

.doc-item .relevance-input {
    width: 100%;
    max-width: none;  /* fill the indented row, matching the description box width */
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--card-border);
    border-radius: 0.25rem;
    font-size: 0.8125rem;
    background: var(--white);
    resize: vertical;
    min-height: 1.75rem;
    font-family: var(--font-body);
    color: var(--navy-700);
}

.doc-item .relevance-input:focus {
    outline: none;
    border-color: var(--gold-500);
    box-shadow: 0 0 0 2px rgba(212,160,86,0.15);
}

.doc-item .relevance-input::placeholder {
    color: var(--navy-300);
}

.doc-item .filename-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    width: 100%;
    padding-left: 3.875rem;
    margin-top: 0.125rem;
}

.doc-item .filename-label {
    font-size: 0.75rem;
    color: var(--navy-500);
    white-space: nowrap;
    font-weight: 500;
}

.doc-item .filename-value {
    font-size: 0.75rem;
    color: var(--navy-600);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 40rem;
}

.doc-item .exhibit-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    width: 100%;
    padding: 0.25rem 0.875rem 0.5rem 3.875rem;
    background: transparent;
    flex-wrap: wrap;
}

.doc-item .exhibit-label {
    font-size: 0.8125rem;
    color: var(--navy-700);
    white-space: nowrap;
    font-weight: 500;
}

.doc-item .exhibit-input {
    flex: 1 1 8rem;
    max-width: 15rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--card-border);
    border-radius: 0.25rem;
    font-size: 0.8125rem;
    background: var(--white);
    font-family: var(--font-body);
    color: var(--navy-700);
}

.doc-item .exhibit-input:focus {
    outline: none;
    border-color: var(--gold-500);
    box-shadow: 0 0 0 2px rgba(212,160,86,0.15);
}

.doc-item .exhibit-input::placeholder {
    color: var(--navy-300);
}

/* ============================================================================
   Settings Rows
   ============================================================================ */
.settings-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.625rem;
}

.settings-row:last-child {
    margin-bottom: 0;
}

.settings-row label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--navy-700);
    font-size: 0.8125rem;
    font-weight: 500;
    min-width: 0;
}

.settings-row input[type="number"] {
    width: 5rem;
    padding: 0.375rem 0.625rem;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    font-family: var(--font-body);
    color: var(--navy-900);
    text-align: center;
    transition: border-color 0.15s;
}

.settings-row input[type="number"]:focus {
    outline: none;
    border-color: var(--gold-500);
    box-shadow: 0 0 0 2px rgba(212,160,86,0.12);
}

.settings-row select {
    padding: 0.375rem 0.625rem;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    font-family: var(--font-body);
    background: var(--white);
    color: var(--navy-900);
    cursor: pointer;
    transition: border-color 0.15s;
    max-width: 100%;
    min-width: 0;
}

.settings-row select:focus {
    outline: none;
    border-color: var(--gold-500);
    box-shadow: 0 0 0 2px rgba(212,160,86,0.12);
}

.settings-row.item-label-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}

.item-label-preview-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.item-label-preview-caption {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--navy-700);
}

.settings-row input[type="text"].item-label-input,
.settings-row select.item-label-separator-select {
    padding: 0.375rem 0.625rem;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    font-family: var(--font-body);
    color: var(--navy-900);
    background: var(--card-bg);
    transition: border-color 0.15s;
}

.settings-row input[type="text"].item-label-input {
    width: 10rem;
}

.settings-row select.item-label-separator-select {
    min-width: 6rem;
}

.settings-row input[type="text"].item-label-input:focus,
.settings-row select.item-label-separator-select:focus {
    outline: none;
    border-color: var(--gold-500);
    box-shadow: 0 0 0 2px rgba(212,160,86,0.12);
}

.item-label-preview {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    padding: 0.375rem 0.625rem;
    border: 1px dashed var(--card-border);
    border-radius: var(--radius-sm);
    color: var(--navy-700);
    background: var(--bg);
    user-select: none;
    white-space: pre;
}

/* ============================================================================
   Buttons
   ============================================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.625rem 1.25rem;
    font-size: 0.844rem;
    font-weight: 600;
    font-family: var(--font-body);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.15s;
    border: 1px solid transparent;
}

.btn svg {
    width: 0.9375rem;
    height: 0.9375rem;
}

.btn-primary {
    background: var(--navy-950);
    color: var(--white);
    border-color: var(--navy-950);
}

.btn-primary:hover {
    background: var(--navy-800);
    box-shadow: var(--shadow-md);
}

.btn-primary:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-secondary {
    background: var(--white);
    color: var(--navy-700);
    border-color: var(--card-border);
}

.btn-secondary:hover {
    background: var(--navy-50);
    border-color: var(--navy-300);
}

.btn-success {
    background: var(--emerald-600);
    color: var(--white);
    border-color: var(--emerald-600);
}

.btn-success:hover {
    background: var(--emerald-500);
}

/* ============================================================================
   Status Messages
   ============================================================================ */
.status {
    margin-top: 1.25rem;
    padding: 0.75rem 1.125rem;
    border-radius: var(--radius-sm);
    display: none;
    font-size: 0.844rem;
    font-weight: 500;
}

.status.info {
    display: block;
    background: var(--navy-50);
    color: var(--navy-600);
}

.status.success {
    display: block;
    background: var(--emerald-50);
    color: var(--emerald-600);
}

.status.error {
    display: block;
    background: var(--red-50);
    color: var(--red-500);
}

/* ============================================================================
   Generate Progress Bar (Review & Generate step)
   ============================================================================ */
.generate-progress {
    margin-top: 1rem;
    padding: 0.75rem 1.125rem;
    background: var(--navy-50);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
}

.generate-progress[hidden] {
    display: none;
}

.generate-progress-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.844rem;
    font-weight: 500;
    color: var(--navy-700);
    margin-bottom: 0.5rem;
}

.generate-progress-elapsed {
    font-family: inherit;  /* match the rest of the UI, not monospace (U6) */
    font-variant-numeric: tabular-nums;  /* keep the m:ss digits from jittering */
    color: var(--navy-500);
    font-weight: 400;
}

.generate-progress-track {
    position: relative;
    width: 100%;
    height: 0.375rem;
    background: var(--navy-100);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.generate-progress-bar {
    position: absolute;
    inset: 0;
    background: var(--gold-500);
}

.generate-progress-bar::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    animation: shimmer 1.8s linear infinite;
}

/* ============================================================================
   Preview Results
   ============================================================================ */
.preview-result {
    margin-top: 0.9375rem;
    padding: 1rem 1.25rem;
    background: var(--navy-50);
    border-radius: var(--radius-md);
    display: none;
}

.preview-result.active {
    display: block;
}

.preview-result h3 {
    margin-bottom: 0.625rem;
    color: var(--navy-900);
    font-size: 0.875rem;
    font-weight: 700;
}

.volume-preview {
    background: var(--white);
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    margin-bottom: 0.625rem;
    border-left: 4px solid var(--navy-200);
}

.volume-preview h4 {
    color: var(--navy-700);
    font-size: 0.8125rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.volume-preview ul {
    list-style: none;
    padding-left: 0;
}

.volume-preview li {
    padding: 0.1875rem 0;
    color: var(--navy-500);
    font-size: 0.781rem;
}

/* ============================================================================
   Empty State
   ============================================================================ */
.empty-state {
    text-align: center;
    padding: 1.5rem;
    color: var(--navy-400);
    font-size: 0.8125rem;
}

/* ============================================================================
   Loading
   ============================================================================ */
.loading {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--white);
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-right: 0.5rem;
}

/* ============================================================================
   Word Preview
   ============================================================================ */
.word-preview {
    margin-top: 0.9375rem;
    padding: 1rem 1.25rem;
    background: var(--navy-50);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    display: none;
}

.word-preview.active {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.word-preview .filename {
    font-weight: 600;
    color: var(--navy-700);
    font-size: 0.844rem;
}

.word-preview .remove-btn {
    background: transparent;
    color: var(--red-500);
    border: 1px solid var(--red-100);
    padding: 0.375rem 0.875rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.781rem;
    font-weight: 600;
    transition: all 0.15s;
}

.word-preview .remove-btn:hover {
    background: var(--red-50);
    border-color: var(--red-500);
}

/* ============================================================================
   Document Action Buttons
   ============================================================================ */
.auto-tag-btn,
.preview-structure-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0;
    padding: 0.4375rem 0.875rem;
    font-size: 0.781rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.15s;
    border: 1px solid var(--card-border);
    background: var(--white);
    color: var(--navy-700);
    font-family: var(--font-body);
}

.auto-tag-btn:hover,
.preview-structure-btn:hover {
    background: var(--navy-50);
    border-color: var(--navy-300);
}

/* Delete Selected Button */
.delete-selected-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0;
    padding: 0.4375rem 0.875rem;
    font-size: 0.781rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.15s;
    border: 1px solid var(--red-100);
    background: var(--white);
    color: var(--red-500);
    font-family: var(--font-body);
}

.delete-selected-btn:hover {
    background: var(--red-50);
    border-color: var(--red-500);
}

.delete-selected-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* AI Autofill Button — gold accent */
.ai-autofill-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0;
    padding: 0.4375rem 0.875rem;
    font-size: 0.781rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.15s;
    border: 1px solid var(--gold-500);
    background: var(--gold-100);
    color: var(--gold-600);
    font-family: var(--font-body);
}

.ai-autofill-btn:hover {
    background: var(--gold-300);
    border-color: var(--gold-600);
}

.ai-autofill-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

/* Select All Container */
.select-all-container {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0.875rem;
    background: var(--navy-50);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    color: var(--navy-700);
    font-weight: 500;
    margin-top: 0.75rem;
}

.select-all-container input[type="checkbox"] {
    cursor: pointer;
    accent-color: var(--navy-950);
    width: 1rem;
    height: 1rem;
}

.select-all-container label {
    cursor: pointer;
}

.selection-count {
    margin-left: auto;
    color: var(--navy-400);
    font-size: 0.75rem;
}

.tag-label {
    font-size: 0.6875rem;
    color: var(--gold-600);
    font-weight: 600;
}

/* ============================================================================
   Cover Settings
   ============================================================================ */
.cover-settings {
    margin-top: 1.25rem;
    padding: 1rem 1.25rem;
    background: var(--navy-50);
    border-radius: var(--radius-md);
    display: none;
}

.cover-settings.active {
    display: block;
}

.cover-settings h4 {
    margin-bottom: 0.75rem;
    color: var(--navy-900);
    font-size: 0.875rem;
    font-weight: 700;
}

.cover-settings .setting-group {
    margin-bottom: 0.75rem;
}

.cover-settings label {
    display: block;
    margin-bottom: 0.375rem;
    color: var(--navy-700);
    font-size: 0.8125rem;
    font-weight: 500;
}

.cover-settings select,
.cover-settings input[type="text"] {
    width: 100%;
    padding: 0.375rem 0.625rem;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    font-family: var(--font-body);
    color: var(--navy-900);
}

.cover-settings select:focus,
.cover-settings input[type="text"]:focus {
    outline: none;
    border-color: var(--gold-500);
    box-shadow: 0 0 0 2px rgba(212,160,86,0.12);
}

/* Party / Prefix dropdown is content-width, not full-width, so it doesn't
   stretch across the whole settings panel. */
.cover-settings #partyPrefix_wizard {
    width: auto;
    min-width: 10rem;
    max-width: 18rem;
}

.cover-settings #partyPrefixCustom_wizard {
    width: auto;
    min-width: 12rem;
    max-width: 20rem;
}

.cover-settings .custom-text-group {
    display: none;
    margin-top: 0.625rem;
}

.cover-settings .custom-text-group.active {
    display: block;
}

.cover-settings .info-text {
    font-size: 0.75rem;
    color: var(--navy-400);
    margin-top: 0.375rem;
    line-height: 1.5;
}

/* Live preview of the resulting cover title */
.cover-title-preview {
    padding: 0.5rem 0.75rem;
    background: var(--white);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--navy-900);
    min-height: 1.25rem;
    word-break: break-word;
    white-space: pre-line;
    line-height: 1.5;
}

/* Standard / Custom segmented mode toggle */
.cover-title-mode {
    display: inline-flex;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--white);
}

.cover-title-mode .mode-option {
    margin: 0;
    cursor: pointer;
}

.cover-title-mode .mode-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.cover-title-mode .mode-option span {
    display: block;
    padding: 0.375rem 1rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--navy-700);
    transition: background 0.15s ease, color 0.15s ease;
}

.cover-title-mode .mode-option:first-child span {
    border-right: 1px solid var(--card-border);
}

.cover-title-mode .mode-option input[type="radio"]:checked + span {
    background: var(--gold-500);
    color: var(--white);
}

.cover-title-mode .mode-option input[type="radio"]:focus-visible + span {
    outline: 2px solid var(--gold-500);
    outline-offset: -2px;
}

/* ============================================================================
   Divider Styles
   ============================================================================ */
.divider-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0.875rem;
    background: var(--navy-50);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    transition: all 0.15s;
    user-select: none;
}

.divider-item:hover {
    border-color: var(--navy-300);
    box-shadow: var(--shadow-sm);
}

.divider-item.selected {
    background: var(--gold-100);
    border-color: var(--gold-500);
}

.divider-item.dragging {
    opacity: 0.5;
    cursor: grabbing;
}

.divider-item.drag-over {
    border-top: 3px solid var(--gold-500);
}

.divider-item.drag-over-bottom {
    border-bottom: 3px solid var(--gold-500);
}

.divider-item .drag-handle {
    color: var(--navy-300);
    font-size: 1.2rem;
    cursor: grab;
    padding: 0.25rem;
}

.divider-item .divider-text {
    flex: 1;
    font-weight: 600;
    color: var(--navy-600);
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    min-height: 1.5rem;
    font-size: 0.8125rem;
}

.divider-item .divider-text:hover {
    background: rgba(255, 255, 255, 0.6);
}

.divider-item .divider-text.empty {
    color: var(--navy-300);
    font-style: italic;
    font-weight: 400;
}

.divider-item .divider-input {
    flex: 1;
    padding: 0.375rem 0.625rem;
    border: 1px solid var(--gold-500);
    border-radius: 0.25rem;
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: var(--font-body);
    color: var(--navy-900);
}

.divider-item .divider-input:focus {
    outline: none;
    border-color: var(--gold-500);
    box-shadow: 0 0 0 2px rgba(212,160,86,0.15);
}

.divider-item .action-btn {
    background: none;
    border: none;
    color: var(--navy-400);
    cursor: pointer;
    padding: 0.375rem;
    font-size: 1.1rem;
    border-radius: 0.25rem;
    transition: all 0.15s;
}

.divider-item .action-btn:hover {
    background: var(--navy-100);
    color: var(--navy-700);
}

.divider-item .remove-btn:hover {
    color: var(--red-500);
    background: var(--red-50);
}

/* ============================================================================
   Groups of Items
   ============================================================================ */

/* Outer card: gold-left stripe is the primary "this is a group" cue. */
.group-item {
    background: var(--navy-50);
    border: 1px solid var(--navy-100);
    border-left: 0.25rem solid var(--gold-500);
    border-radius: var(--radius-md, 0.5rem);
    margin: 0.5rem 0;
    padding: 0.5rem;
    transition: box-shadow 120ms ease, border-color 120ms ease;
}

.group-item.selected {
    border-color: var(--gold-500);
    box-shadow: 0 0 0 2px var(--gold-100, rgba(212, 160, 86, 0.25));
}

.group-item:hover {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* Heading row reuses .doc-item layout/styling and only needs tweaks for the
   heading text/input and the inline Style/Tabs selects. */
.group-item .group-heading-row {
    margin-bottom: 0.375rem;
}

.group-item .group-heading-text {
    flex: 1 1 auto;
    min-width: 0;
    /* Match .description-input-inline so the read-mode field looks like a description. */
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--navy-700);
    cursor: text;
    padding: 0.25rem 0.375rem;
    border: 1px solid var(--card-border);
    border-radius: 0.25rem;
    background: var(--navy-50);
    line-height: 1.35;
    white-space: pre-wrap;
    word-break: break-word;
}

.group-item .group-heading-text:hover {
    border-color: var(--gold-300, var(--gold-500));
}

.group-item .group-heading-text.empty {
    color: var(--navy-400);
    font-style: italic;
}

.group-item .group-heading-input {
    flex: 1 1 auto;
    min-width: 0;
    /* Match .description-input-inline so the field reads like a description. */
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--navy-700);
    padding: 0.25rem 0.375rem;
    border: 1px solid var(--card-border);
    border-radius: 0.25rem;
    background: var(--navy-50);
    /* Textarea-specific: allow vertical growth via autoResizeTextarea */
    resize: none;
    overflow: hidden;
    line-height: 1.35;
    min-height: 1.75rem;
}

.group-item .group-heading-input:focus {
    outline: none;
    border-color: var(--gold-500);
    background: var(--white);
    box-shadow: 0 0 0 2px rgba(212, 160, 86, 0.15);
}

/* Stack the Tab Mode + Style selects vertically when both are visible,
   so the heading textarea has more horizontal room. */
.group-controls {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex-shrink: 0;
}

.group-style-select {
    padding: 0.25rem 0.375rem;
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--navy-600);
    border: 1px solid var(--card-border);
    border-radius: 0.25rem;
    background: var(--white);
    flex-shrink: 0;
}

.group-children {
    padding-left: 1.5rem;
}

.group-child-row {
    display: flex;
    align-items: stretch;
    margin: 0.375rem 0 0;
}

.group-child-row.drag-over {
    /* line above the child — Wayne v2 #5: within-group drop indicators were absent */
    border-top: 2px solid var(--gold-500);
}

.group-child-row.drag-over-bottom {
    border-bottom: 2px solid var(--gold-500);
}

.group-child-row .doc-item {
    flex: 1 1 auto;
}

/* Read-only tab cell for group children: displays the combined "1(a)" label
   in the same width as .tab-input-inline so columns align with top-level rows. */
.tab-input-inline.readonly {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    min-width: 3.5rem;
    padding: 0.25rem 0.5rem;
    background: var(--navy-50);
    border: 1px solid var(--card-border);
    border-radius: 0.25rem;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--navy-700);
    flex-shrink: 0;
    user-select: none;
}

.group-drop-zone {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0.5rem 0 0 1.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px dashed var(--navy-300);
    border-radius: var(--radius-md, 0.5rem);
    color: var(--navy-500);
    font-size: 0.8125rem;
    cursor: pointer;
    background: var(--white);
    transition: background 120ms ease, border-color 120ms ease;
}

.group-drop-zone:hover,
.group-drop-zone.dragover {
    background: var(--gold-50, rgba(212, 160, 86, 0.08));
    border-color: var(--gold-500);
    color: var(--navy-700);
}

.insert-divider-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.4375rem 0.875rem;
    background: var(--white);
    color: var(--navy-600);
    border: 1px dashed var(--navy-300);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.781rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    font-family: var(--font-body);
    transition: all 0.15s;
}

.insert-divider-btn:hover {
    background: var(--navy-50);
    border-color: var(--navy-500);
}

/* ============================================================================
   Volume Container (Record of Appeal)
   ============================================================================ */
.volume-container {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 0.75rem 0;
}

/* Volume Card */
.volume-card {
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--white);
}

.volume-card.active {
    border-color: var(--gold-500);
    box-shadow: var(--shadow-gold);
}

.volume-card.collapsed .volume-body {
    display: none;
}

/* Volume Header */
.volume-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--navy-50);
    border-bottom: 1px solid var(--card-border);
    cursor: pointer;
    user-select: none;
}

.volume-card.active .volume-header {
    background: var(--gold-100);
}

.volume-header .collapse-toggle {
    width: 1.25rem;
    height: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--navy-400);
    transition: transform 0.2s;
    font-size: 0.8rem;
}

.volume-card.collapsed .collapse-toggle {
    transform: rotate(-90deg);
}

.volume-header .volume-name {
    flex: 1;
}

.volume-header .volume-name input {
    border: none;
    background: transparent;
    font-weight: 600;
    font-size: 0.875rem;
    width: 100%;
    padding: 0.25rem;
    border-radius: 0.25rem;
    color: var(--navy-900);
    font-family: var(--font-body);
}

.volume-header .volume-name input:focus {
    outline: none;
    background: var(--white);
    border: 1px solid var(--gold-500);
}

.volume-header .doc-count {
    color: var(--navy-400);
    font-size: 0.75rem;
    font-weight: 600;
}

.volume-header .volume-start-page-label {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--navy-400);
    font-size: 0.75rem;
    cursor: default;
}

.volume-header .volume-start-page {
    width: 3.75rem;
    padding: 0.25rem 0.375rem;
    border: 1px solid var(--card-border);
    border-radius: 0.25rem;
    text-align: center;
    font-size: 0.75rem;
    /* Wayne v2 #16: match the rest of the UI (body font), not mono. */
    font-family: var(--font-body);
    color: var(--navy-900);
}

.volume-header .volume-start-page:focus {
    outline: none;
    border-color: var(--gold-500);
    box-shadow: 0 0 0 2px rgba(212,160,86,0.15);
}

.volume-header .volume-affix-label {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--navy-400);
    font-size: 0.75rem;
    cursor: default;
}

.volume-header .volume-exhibit-toggle {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--navy-500);
    font-size: 0.75rem;
    cursor: pointer;
}

.volume-header .volume-exhibit-toggle input {
    cursor: pointer;
}

.volume-header .volume-prefix,
.volume-header .volume-suffix {
    width: 4.5rem;
    padding: 0.25rem 0.375rem;
    border: 1px solid var(--card-border);
    border-radius: 0.25rem;
    text-align: center;
    font-size: 0.75rem;
    /* Wayne v2 #16: match the rest of the UI (body font), not mono. */
    font-family: var(--font-body);
    color: var(--navy-900);
}

.volume-header .volume-prefix:focus,
.volume-header .volume-suffix:focus {
    outline: none;
    border-color: var(--gold-500);
    box-shadow: 0 0 0 2px rgba(212,160,86,0.15);
}

.volume-header .remove-volume-btn {
    background: none;
    border: none;
    color: var(--navy-300);
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    font-size: 1.1rem;
    border-radius: 0.25rem;
    transition: all 0.15s;
}

.volume-header .remove-volume-btn:hover {
    color: var(--red-500);
    background: var(--red-50);
}

/* Volume Body */
.volume-body {
    min-height: 3.75rem;
    background: var(--white);
}

.volume-body.dragover {
    background: var(--gold-100);
    outline: 2px dashed var(--gold-500);
    outline-offset: -2px;
}

.volume-body .empty-volume {
    padding: 1.25rem;
    text-align: center;
    color: var(--navy-400);
    font-size: 0.8125rem;
}

/* Volume document items inherit from existing styles */
.volume-body .doc-item,
.volume-body .divider-item {
    margin: 0;
    border-radius: 0;
    border-left: none;
    border-right: none;
}

.volume-body .doc-item:first-child,
.volume-body .divider-item:first-child {
    border-top: none;
}

/* Drag indicators for volume documents */
.volume-body .doc-item.drag-above,
.volume-body .divider-item.drag-above {
    border-top: 3px solid var(--gold-500);
}

.volume-body .doc-item.drag-below,
.volume-body .divider-item.drag-below {
    border-bottom: 3px solid var(--gold-500);
}

/* Volume Controls */
.volume-controls {
    display: flex;
    align-items: center;
    gap: 0.9375rem;
    margin-bottom: 0.75rem;
}

.add-volume-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.4375rem 0.875rem;
    background: var(--navy-950);
    color: var(--white);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.781rem;
    font-weight: 600;
    font-family: var(--font-body);
    transition: all 0.15s;
}

.add-volume-btn:hover {
    background: var(--navy-800);
    box-shadow: var(--shadow-md);
}

.volume-hint {
    color: var(--navy-400);
    font-size: 0.75rem;
}

/* Insert Divider within volume */
.volume-body .insert-divider-inline {
    padding: 0.375rem 0.75rem;
    background: transparent;
    color: var(--navy-500);
    border: 1px dashed var(--navy-300);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.75rem;
    margin: 0.5rem 0.875rem;
    display: block;
    text-align: center;
    width: calc(100% - 1.75rem);
    font-family: var(--font-body);
    transition: all 0.15s;
}

.volume-body .insert-divider-inline:hover {
    background: var(--navy-50);
    border-color: var(--navy-500);
}

/* Volume File Drop Zone */
.volume-file-drop-zone {
    border: 2px dashed var(--navy-200);
    border-radius: var(--radius-sm);
    padding: 0.9375rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    background: var(--navy-50);
    margin: 0.5rem 0.875rem;
}

.volume-file-drop-zone:hover,
.volume-file-drop-zone.dragover {
    border-color: var(--gold-500);
    background: var(--gold-100);
}

.volume-file-drop-zone span {
    color: var(--navy-500);
    font-size: 0.781rem;
}

.volume-file-drop-zone .file-input {
    display: none;
}

/* ============================================================================
   Wizard Navigation (Footer)
   ============================================================================ */
.wizard-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.75rem;
    background: var(--white);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-top: 1.5rem;
}

.wizard-navigation .btn-outline {
    background: transparent;
    border: 1px solid transparent;
    color: var(--red-500);
}

.wizard-navigation .btn-outline:hover {
    background: var(--red-50);
}

.wizard-navigation #wizardNextBtn {
    margin-left: auto;
}

/* ============================================================================
   Inline Settings
   ============================================================================ */
.inline-settings {
    background: var(--navy-50);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}

.inline-settings .settings-group {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--card-border);
}

.inline-settings .settings-group:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.inline-settings .settings-group h4 {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--navy-400);
    margin-bottom: 0.75rem;
}

/* ============================================================================
   Review Summary
   ============================================================================ */
.review-summary {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

/* Wayne v2 #7: when multiple bundle types are selected, the per-module settings
   sit side by side (2 columns) so the Settings card stays balanced with the
   Cover card instead of towering over it. */
.review-settings-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.25rem 1.5rem;
}

.review-section {
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.review-section h3 {
    padding: 0.75rem 1.125rem;
    background: var(--navy-50);
    border-bottom: 1px solid var(--card-border);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--navy-500);
    margin-bottom: 0;
}

.review-section ul {
    list-style: none;
    padding: 1rem 1.125rem;
    margin: 0;
}

.review-section ul li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0;
    color: var(--navy-700);
    font-size: 0.844rem;
}

.review-section ul li::before {
    content: '\2713';
    color: var(--emerald-500);
    font-weight: bold;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.review-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* Indent content to line up with the section header (h3 uses 1.125rem);
       previously 0 left padding left it flush to the border edge (U8). */
    padding: 0.375rem 1.125rem;
    color: var(--navy-700);
    font-size: 0.844rem;
}

.review-item-header {
    font-weight: 700;
    color: var(--navy-500);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-size: 0.75rem;
    padding-top: 0.75rem;
}

/* ============================================================================
   Generate Section
   ============================================================================ */
.generate-actions {
    display: flex;
    gap: 0.9375rem;
    justify-content: center;
    margin-top: 1.25rem;
}

.generate-section {
    margin-top: 1.75rem;
    text-align: center;
}

.generate-section .btn-large {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.875rem 2.5rem;
    font-size: 0.9375rem;
    font-weight: 700;
    border-radius: var(--radius-md);
    box-shadow: 0 4px 14px rgba(11,17,33,0.3);
    transition: all 0.2s;
}

.generate-section .btn-large:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(11,17,33,0.35);
}

.generate-section .btn-large:active {
    transform: translateY(0);
}

/* ============================================================================
   Document Actions Container
   ============================================================================ */
.document-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.875rem;
    flex-wrap: wrap;
}

/* ============================================================================
   Bundle Settings Section (Side Panel)
   ============================================================================ */
.bundle-settings-section {
    margin-top: 1.5rem;
}

.bundle-settings-section h3 {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--navy-900);
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--card-border);
}

/* ============================================================================
   Preview Section
   ============================================================================ */
.preview-section {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--card-border);
}

.preview-section .status {
    margin-top: 0.9375rem;
}

.preview-section .preview-result {
    margin-top: 0.9375rem;
}

/* ============================================================================
   Display Options (compact inline settings)
   ============================================================================ */
.inline-settings.display-options-only {
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
}

.inline-settings.display-options-only .settings-group {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

/* ============================================================================
   Side-by-Side Layout (Documents + Settings)
   ============================================================================ */
.documents-settings-container {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 1rem;
    align-items: flex-start;
}

.documents-column {
    width: calc(75% - 0.625rem);
    flex-shrink: 0;
    min-width: 0;
}

.documents-settings-container .bundle-settings-section {
    width: calc(25% - 0.625rem);
    flex-shrink: 0;
    margin-top: 0;
    position: sticky;
    top: 4.75rem;
    align-self: flex-start;
    background: var(--white);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 0;
    overflow: hidden;
}

.documents-settings-container .bundle-settings-section h3 {
    padding: 1rem 1.25rem;
    margin-bottom: 0;
    border-bottom: 1px solid var(--card-border);
}

.documents-settings-container .bundle-settings-section .inline-settings {
    background: transparent;
    border-radius: 0;
    padding: 0;
    margin-bottom: 0;
}

.documents-settings-container .bundle-settings-section .inline-settings .settings-group {
    padding: 0.75rem 1.125rem;
    margin-bottom: 0;
    border-bottom: 1px solid var(--card-border);
    padding-bottom: 0.75rem;
}

.documents-settings-container .bundle-settings-section .inline-settings .settings-group:last-child {
    border-bottom: none;
}

/* ============================================================================
   Affix Inputs (Page Number Prefix/Suffix)
   ============================================================================ */
.settings-row.affix-inputs {
    padding: 0.5rem 0 0 0;
}

.settings-row.affix-inputs input[type="text"] {
    width: 5rem;
    padding: 0.375rem 0.625rem;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    font-family: var(--font-body);
    color: var(--navy-900);
}

.settings-row.affix-inputs input[type="text"]:focus {
    outline: none;
    border-color: var(--gold-500);
    box-shadow: 0 0 0 2px rgba(212,160,86,0.12);
}

.settings-row.affix-inputs span {
    color: var(--navy-400) !important;
    font-size: 0.75rem;
}

/* ============================================================================
   API URL Section (hidden)
   ============================================================================ */
.api-url-section {
    display: none;
}

/* ============================================================================
   Utility classes for affix/start-page inputs
   ============================================================================ */
.input-narrow {
    width: 5rem;
    /* Match the other settings inputs — form controls don't inherit the
       page font, so without this the value + placeholder render in the
       browser system font, inconsistent with the rest of the UI (R1). */
    padding: 0.375rem 0.625rem;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    font-family: var(--font-body);
    color: var(--navy-900);
    background: var(--card-bg);
}

.affix-gap {
    margin: 0 0.5rem;
    color: #666;
}

.position-select {
    margin-left: 0.5rem;
    padding: 0.25rem 0.5rem;
}

/* ============================================================================
   Responsive
   ============================================================================ */
@media (max-width: 56.25rem) {
    .topbar {
        padding: 0 1rem;
    }

    .container {
        padding: 1.25rem 1rem 3.75rem;
    }

    .bundle-options {
        grid-template-columns: 1fr;
    }

    .review-summary {
        grid-template-columns: 1fr;
    }

    .wizard-steps {
        flex-wrap: wrap;
        gap: 0.75rem;
        justify-content: center;
    }

    .wizard-step-label {
        display: none;
    }

    .wizard-progress-line {
        min-width: 1.5rem;
    }

    .wizard-navigation {
        flex-direction: column;
        gap: 0.625rem;
    }

    .wizard-navigation .btn {
        width: 100%;
        justify-content: center;
    }

    /* Stack documents and settings on mobile */
    .documents-settings-container {
        flex-direction: column !important;
        flex-wrap: wrap !important;
    }

    .documents-column {
        width: 100% !important;
    }

    .documents-settings-container .bundle-settings-section {
        width: 100% !important;
        position: static;
    }
}

/* --- First-run onboarding (welcome card + step hints) --- */
.onboarding-card {
    max-width: 34rem;
}
.onboarding-steps {
    margin: 0.5rem 0 0.75rem;
    padding-left: 1.25rem;
    display: grid;
    gap: 0.5rem;
}
.onboarding-steps li {
    line-height: 1.5;
    color: var(--navy-700);
}
.onboarding-guide-link {
    color: var(--gold-600);
    font-weight: 600;
    text-decoration: none;
}
.onboarding-guide-link:hover {
    text-decoration: underline;
}
.onboarding-hint {
    margin: 0.5rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--navy-400);
}