/* ============================================================================
   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;
}

/* Shown to a firm member in place of the plan button: they cannot change the
   subscription, so they are told whose it is instead. */
.account-plan-note {
    font-size: 0.75rem;
    color: var(--navy-300);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 16rem;
}

.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;
}
/* Since 8 Oct the signed-out front door is Wayne's landing page at /welcome, and
   this older one is shown only on request (?view=landing). Showing it on the way
   to sign-in flashed a second, different landing page for a second or two. */
body.is-signed-out.show-old-landing #landing { display: block; }
body.is-signed-out .topbar,
body.is-signed-out .container { display: none; }
/* Until auth resolves, and while a signed-out visitor is being sent on to
   sign-in or to /welcome, show neither the app nor a landing page: the landing
   page's own navy, and a word that something is happening. */
body.auth-resolving .topbar,
body.auth-resolving .container,
body.auth-resolving #landing { display: none !important; }
body.auth-resolving {
    background: var(--navy-950);
    min-height: 100vh;
}
body.auth-resolving::after {
    content: "Loading\2026";
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--navy-300);
    font-size: 1rem;
    letter-spacing: 0.02em;
}

/* ─── 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;
}

/* Hidden for a member, who cannot change the firm's plan. Stated explicitly:
   a control that is meant to disappear and merely has no rule is how the r24
   bug happened. */
.cap-modal-upgrade[hidden] {
    display: none;
}

.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);
    /* The Help sheet's FAQ button is an <a>, the Close beside it a <button>.
       Without this the anchor keeps the browser's underline and the pair reads
       as a button and a link rather than two buttons (testing, 22 September). */
    text-decoration: none;
}

.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;
    align-items: center;
}

/* Book a call is filled into a <span> when the window opens. The span, not the
   link, was the row's flex item, so the link sat inline on the text line and
   rode higher than FAQ beside it (Wayne, 7 Oct, item 12). With the span out of
   the box tree the link is a flex item like the others. */
#instructionsBookCall {
    display: contents;
}

.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;
}

/* Wayne's demo videos open the instruction sheet (18 Aug), so this section
   leads the scroll area and drops the heading's usual top margin. */
.instructions-videos h3 {
    margin-top: 0;
}

.instructions-videos a {
    color: var(--gold-600, #b8862e);
    font-weight: 600;
}

.instructions-videos a:hover {
    color: var(--gold-500);
}

/* 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); }

/* Monthly / annual (Wayne, 7 Oct), the same segmented look as his landing page. */
.plan-interval {
    display: flex;
    justify-content: center;
    gap: 0.25rem;
    margin: 0 auto 1.25rem;
    padding: 0.25rem;
    width: fit-content;
    border: 1px solid var(--navy-100);
    border-radius: 999px;
}

.plan-interval-btn {
    border: 0;
    border-radius: 999px;
    padding: 0.375rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    background: transparent;
    color: var(--navy-600);
    cursor: pointer;
}

.plan-interval-btn[aria-pressed="true"] {
    background: var(--navy-950);
    color: #fff;
}

.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);
}

/* A generation that produced [INVALID] markers is not an error and not a
   success — it delivered a document that needs checking. */
.app-toast.warning {
    background: var(--navy-950);
    text-align: left;
}

/* "Show all" inside the toast. Looks like a link, not a second dismiss target. */
.app-toast-more {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

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

/* ─── 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;
}

/* A document whose PDF is not loaded cannot go into a bundle, so it must not
   look like the neutral grey file size it replaces (test report v2 #14). */
.doc-file-missing {
    display: inline-block;
    padding: 0.0625rem 0.375rem;
    border: 1px solid var(--red-500, #dc2626);
    border-radius: 0.25rem;
    color: var(--red-500, #dc2626);
    font-weight: 600;
    font-size: 0.6875rem;
    white-space: nowrap;
}

/* 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;
}

/* What AI Autofill could not fill on this row (Wayne, 8 Sep). Sits beside the
   Verify tick and reads against it: one says the AI filled something here, the
   other that it could not fill everything. Amber rather than red — the row is
   incomplete, not wrong, and the bundle still builds. */
/* Seat limit control in the admin panel's expanded firm row. Sits above the
   people it governs, because the number and the headcount are read together. */
.admin-seats {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.5rem 0 0.75rem;
    border-bottom: 1px solid var(--card-border);
    margin-bottom: 0.5rem;
}

.admin-seats-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--navy-700);
}

.admin-seats-input {
    width: 5rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--card-border);
    border-radius: 0.25rem;
    font-size: 0.8125rem;
    font-family: var(--font-body);
    color: var(--navy-700);
    background: var(--white);
}

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

/* Carries both the ordinary "N in use" and a refusal, so it wraps rather than
   truncating: a rule the reader cannot finish reading is not a rule. */
.admin-seats-note {
    font-size: 0.75rem;
    color: var(--navy-300);
    flex: 1 1 12rem;
    min-width: 0;
}

/* How an invited person actually joins. Sits under the invite box because that
   is where the question forms, and because the screen used to answer it by
   implication — its errors said "not sent", and nothing sends. */
.firm-invite-note {
    margin: 0.375rem 0 0.75rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--navy-400);
}

.autofill-gap-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: 0.375rem;
    padding: 0.0625rem 0.375rem;
    border: 1px solid var(--gold-500);
    border-radius: 0.75rem;
    background: var(--gold-100);
    color: var(--gold-600);
    font-size: 0.6875rem;
    font-weight: 600;
    white-space: nowrap;
    vertical-align: middle;
}

.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;
    font-family: var(--font-body);
    color: var(--navy-700);
    /* Wayne, 6 Sep: "only 2 lines are visible at a time which makes it difficult
       to read and review relevance fields that are longer". Asked how many he
       wanted, he answered on 8 Sep: "for the relevance field, lets do 4 lines."

       Four is the floor, not a cap. The box still grows with its content (the
       renderer calls autoResizeTextarea, same as the description box), so a
       longer relevance is read without scrolling and a short one is not
       surrounded by empty space. 8 lines is where the growth stops: the 150-word
       cap in the BOA prompt fits inside it at this width, and a bundle is a list
       of many rows — one row must not push the next off the screen.

       An explicit line-height, because the min and max are counted in lines and
       'normal' is left to the browser. */
    line-height: 1.45;
    min-height: 5.35rem;   /* 4 lines — Wayne, 8 Sep */
    max-height: 10rem;     /* ~8 lines, then scroll */
}

.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);
}

/* A warning is not an error: the run finished, but something in it needs a
   human. Amber rather than red, and visible — `.status` is display:none by
   default, so a type without a rule here shows the user nothing at all. */
.status.warning {
    display: block;
    background: var(--gold-50, rgba(212, 160, 86, 0.12));
    color: var(--navy-900, #1a202c);
}

/* ============================================================================
   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;
    /* Next carries margin-left:auto, which absorbs ALL the free space here, so
       space-between never separates Start Over from Previous - the two sit
       adjacent at the left and used to touch (test report v2 #6). */
    gap: 0.75rem;
    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;
}

/* Bundle Types renders as a <ul>, which carries its own block padding; the
   other cards render bare .review-item rows straight into a <div>. Without a
   matching block padding their first row sat higher than the Bundle Types one,
   so side-by-side cards looked misaligned. */
.review-section > div {
    padding: 1rem 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 {
    /* The hint above has no bottom margin, so the button needs its own gap. */
    margin-top: 1rem;
    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) --- */
/* The first-run welcome card was removed with its dead JS; the guide it
   linked to is the onboarding now. `.onboarding-hint` below is still in use. */

.onboarding-hint {
    margin: 0.5rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--navy-400);
}

/* ─── Firm screen (people and seats, FP-2) ─── */
.firm-modal-card {
    max-width: 34rem;
}

.firm-title {
    margin: 0 0 0.25rem;
    font-size: 1.25rem;
    color: var(--navy-950);
}

.firm-seats {
    margin: 0 0 1rem;
    color: var(--navy-600, #4a5568);
    font-size: 0.875rem;
}

.firm-invite-form {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.firm-invite-form[hidden] { display: none; }

.firm-invite-email {
    flex: 1;
    border: 1px solid var(--navy-200, #cbd5e0);
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
}

.firm-invite-btn {
    background: var(--gold-500);
    color: var(--navy-950);
    border: 1px solid var(--gold-500);
    border-radius: 0.375rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
}

.firm-invite-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.firm-error {
    margin: 0 0 0.75rem;
    color: #b42318;
    font-size: 0.875rem;
    line-height: 1.4;
}

.firm-error[hidden] { display: none; }

.firm-members,
.firm-invites {
    list-style: none;
    margin: 0 0 0.75rem;
    padding: 0;
}

.firm-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--navy-100, #edf2f7);
    font-size: 0.875rem;
}

.firm-row-email {
    flex: 1;
    overflow-wrap: anywhere;
    color: var(--navy-900, #1a202c);
}

.firm-row-role {
    color: var(--navy-600, #4a5568);
    font-size: 0.8125rem;
    white-space: nowrap;
}

.firm-row-action {
    background: transparent;
    border: 1px solid var(--navy-200, #cbd5e0);
    border-radius: 0.375rem;
    padding: 0.25rem 0.625rem;
    font-size: 0.8125rem;
    cursor: pointer;
}

.firm-row-action:hover {
    border-color: #b42318;
    color: #b42318;
}

/* ─── Account page (FP-3) ─── */
/* Hidden until you navigate to #account. Both directions are stated here on
   purpose: a view that has no rule does not look unstyled, it looks broken. */
.account-page {
    display: none;
}

body.is-account .account-page {
    display: block;
    padding: 2rem 1.25rem 4rem;
}

/* The wizard steps aside while the page is up. It is hidden, not torn down, so
   a half-built bundle survives a trip to the settings. */
body.is-account .container {
    display: none;
}

/* #account must never show the page to a signed-out visitor. */
body.is-signed-out .account-page {
    display: none;
}

.account-page-inner {
    max-width: 44rem;
    margin: 0 auto;
}

.account-page-inner h1 {
    /* The global `h1 { display: none }` hides the wizard's heading, which the
       topbar replaces. An addressable page is its own screen and needs its
       name back. */
    display: block;
    margin: 0 0 1.5rem;
    font-size: 1.5rem;
    color: var(--navy-950);
}

.account-page-back {
    background: transparent;
    border: none;
    color: var(--navy-600, #4a5568);
    font-size: 0.875rem;
    cursor: pointer;
    padding: 0 0 1rem;
}

.account-page-back:hover {
    color: var(--navy-950);
}

.account-card {
    background: #fff;
    border: 1px solid var(--navy-100, #edf2f7);
    border-radius: 0.75rem;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1rem;
}

.account-card[hidden] { display: none; }

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

.account-card-line {
    margin: 0 0 0.5rem;
    font-size: 0.9375rem;
    color: var(--navy-900, #1a202c);
    overflow-wrap: anywhere;
}

.account-card-note {
    margin: 0 0 0.75rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--navy-600, #4a5568);
}

.account-card-danger {
    border-color: rgba(180, 35, 24, 0.25);
}

.account-card-danger h2 { color: #b42318; }

/* Buttons on a light page.
   `.account-btn` is dressed for the dark topbar: white text on a transparent
   background with a translucent white border. On the white cards of an
   addressable page that is white on white, so every control here was present,
   clickable and invisible. Both light screens re-dress it. */
.account-page .account-btn,
.admin-page .account-btn {
    background: #fff;
    color: var(--navy-900, #1a202c);
    border-color: var(--navy-100, #edf2f7);
}

.account-page .account-btn:hover,
.admin-page .account-btn:hover {
    background: var(--navy-50, #f7fafc);
    border-color: var(--navy-300, #cbd5e0);
}

/* Deleting your account is the one irreversible control on either screen, so
   it reads as dangerous before it is pressed rather than only in the confirm. */
.account-card-danger .account-btn {
    color: #b42318;
    border-color: rgba(180, 35, 24, 0.35);
}

.account-card-danger .account-btn:hover {
    background: rgba(180, 35, 24, 0.06);
    border-color: rgba(180, 35, 24, 0.55);
}

/* ─── Internal panel (FP-5) ─── */
/* Same shape as the account page: hidden until #admin, and the wizard steps
   aside rather than being torn down. Both directions stated, because a view
   with no rule does not look unstyled, it looks broken. */
.admin-page {
    display: none;
}

body.is-admin .admin-page {
    display: block;
    padding: 2rem 1.25rem 4rem;
}

body.is-admin .container {
    display: none;
}

/* A signed-out visitor typing #admin gets nothing, exactly as with #account. */
body.is-signed-out .admin-page {
    display: none;
}

.admin-page-inner {
    max-width: 56rem;
    margin: 0 auto;
}

.admin-page-inner h1 {
    display: block;              /* see the note on .account-page-inner h1 */
    margin: 0 0 0.5rem;
    font-size: 1.5rem;
    color: var(--navy-950);
}

.admin-search {
    width: 100%;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
    border: 1px solid var(--navy-100, #edf2f7);
    border-radius: 0.5rem;
    font-size: 0.9375rem;
}

.admin-row {
    border-top: 1px solid var(--navy-100, #edf2f7);
}

.admin-row-head {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: baseline;
    background: transparent;
    border: none;
    padding: 0.625rem 0;
    text-align: left;
    cursor: pointer;
}

.admin-row-head:hover {
    background: var(--navy-50, #f7fafc);
}

.admin-row-name {
    font-size: 0.9375rem;
    color: var(--navy-950);
    overflow-wrap: anywhere;
}

.admin-row-meta {
    font-size: 0.8125rem;
    color: var(--navy-600, #4a5568);
    white-space: nowrap;
    text-align: right;
}

/* A firm's own failed bundles, on a line of their own under its plan and usage
   (scope 4.4, "its recent failures"). Red only when there are some. */
.admin-row-failures {
    display: block;
    margin-top: 0.125rem;
    color: var(--navy-400, #718096);
}

.admin-row-failures.has-failures {
    color: var(--red-500, #e53e3e);
}

.admin-people[hidden] { display: none; }

.admin-person {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.375rem 0 0.375rem 1rem;
    font-size: 0.875rem;
}

.admin-person-email {
    flex: 1 1 auto;
    overflow-wrap: anywhere;
}

.admin-person-role,
.admin-person-state {
    color: var(--navy-600, #4a5568);
    font-size: 0.8125rem;
    white-space: nowrap;
}

.admin-views {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem;
}

.admin-view h3 {
    margin: 0 0 0.375rem;
    font-size: 0.875rem;
    color: var(--navy-600, #4a5568);
    font-weight: 600;
}

.admin-view-list {
    margin: 0;
    padding-left: 1.125rem;
    font-size: 0.875rem;
    color: var(--navy-900, #1a202c);
}

/* FP-5b: why the wizard is closed, on the first step.
   Amber rather than red: the account is not broken and nothing has gone wrong
   in the product — a suspended seat or a spent allowance is someone's decision
   to reverse, and red would read as an error the user caused. */
.access-notice {
    margin: 0.75rem 0 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--gold-500);
    border-left-width: 0.25rem;
    border-radius: var(--radius-sm);
    background: var(--gold-100);
    color: var(--navy-900);
    font-size: 0.9375rem;
    line-height: 1.5;
}

.access-notice[hidden] {
    display: none;
}

/* --- Report a problem (FP-11) ------------------------------------------- */
/* Same overlay language as .cap-modal, one size wider because the whole
   point is a box big enough to describe what went wrong. */

.report-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;
}

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

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

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

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

.report-modal-text {
    width: 100%;
    box-sizing: border-box;
    padding: 0.75rem;
    border: 1px solid var(--navy-200, #cbd5e0);
    border-radius: 0.5rem;
    font: inherit;
    font-size: 0.9375rem;
    line-height: 1.45;
    resize: vertical;
}

.report-modal-text:focus {
    outline: none;
    border-color: var(--gold-500, #c8a44d);
}

.report-modal-attached {
    margin: 0.625rem 0 0;
    color: var(--navy-600, #4a5568);
    font-size: 0.8125rem;
}

.report-modal-status {
    margin: 0.75rem 0 0;
    font-size: 0.875rem;
}

.report-modal-status.is-error { color: var(--red-500, #c53030); }
.report-modal-status.is-ok { color: var(--navy-950); }

.report-modal-actions {
    display: flex;
    gap: 0.625rem;
    justify-content: flex-end;
    margin-top: 1.5rem;
}

.report-modal-actions button {
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid var(--navy-200, #cbd5e0);
    background: #fff;
    font: inherit;
    font-size: 0.875rem;
    cursor: pointer;
}

.report-modal-actions button:disabled {
    opacity: 0.6;
    cursor: default;
}

/* --- Book a call (FP-12) ------------------------------------------------- */
/* Offered only beside a blocked state, so it reads as the way out rather than
   another call to action competing with the work. */

.book-call-link {
    color: var(--gold-600, #a8842f);
    text-decoration: underline;
    white-space: nowrap;
}

.access-notice-text + .book-call-link {
    margin-left: 0.5rem;
}

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

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

/* --- A label two documents share (BUG-33) --------------------------- */
/* Marked where it is typed. The generator refuses those citations outright,
   which is right but late: by then the bundle is built. */

.tag-input-inline.is-duplicate {
    border-color: var(--red-500, #c53030);
    background: #fff5f5;
}