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

[hidden] {
    display: none !important;
}


html {
    height: 100%;
    background: #0d3d4a;
    /* Pin text size so mobile engines (iOS Safari / Chrome Android) don't
       inflate long text runs - e.g. multi-file names on the history page.
       100% disables auto-inflation while still allowing pinch-zoom. */
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    height: 100%;
    overflow: auto;
    overscroll-behavior: none;
    background: #0d3d4a;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* ── Color Variables ───────────────────────────────── */
:root {
    --teal-dark: #0d3d4a;
    --teal-mid: #1a5c6b;
    --teal-light: #2a7a8a;
    --white: #ffffff;
    --white-muted: rgba(255, 255, 255, 0.75);
    --white-faint: rgba(255, 255, 255, 0.15);
    --white-fainter: rgba(255, 255, 255, 0.08);
    --amber: #f59e0b;
    --amber-faint: rgba(245, 158, 11, 0.15);
    --red: #ef4444;
    --green: #22c55e;
    --link: rgba(125, 211, 252, 0.9);
}

/* Anchors carrying no class of their own - almost always injected by JS
   into an error or status container - must not fall through to the browser
   default, which is blue and turns PURPLE once visited. This is a floor:
   every classed link keeps its own colour by specificity. */
a:not([class]),
a:not([class]):visited {
    color: var(--link);
}

a:not([class]):hover { text-decoration: underline; }

/* Links inside the shared error/status blocks. */
.error-block a,
.modal-error a,
.login-error a,
.delete-modal__error a {
    color: var(--link);
    text-decoration: none;
}

.error-block a:hover,
.modal-error a:hover,
.login-error a:hover,
.delete-modal__error a:hover { text-decoration: underline; }

/* ── Hero (homepage) ───────────────────────────────── */
.hero {
    position: relative;
    height: 100vh;
    height: 100dvh;
    min-height: 560px;
    overflow: hidden;
}

.hero__bg {
    position: absolute;
    inset: 0;
    background-image: url('/assets/Homepage.jpg?v=1793034243');
    background-image: image-set(url('/assets/Homepage.webp?v=1793034243') type('image/webp'), url('/assets/Homepage.jpg?v=1793034243') type('image/jpeg'));
    background-size: cover;
    background-position: left top;
}

.hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right,
        rgba(10, 50, 60, 0.05) 0%, rgba(10, 50, 60, 0.12) 28%,
        rgba(10, 50, 60, 0.52) 50%, rgba(10, 50, 60, 0.76) 65%,
        rgba(10, 50, 60, 0.88) 100%);
}

.hero__content {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
}

.hnav {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 20;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.hnav__brand {
    padding: 1rem 1.4rem;
}

.nav-logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}

.site-logo {
    height: 56px;
    width: auto;
    display: block;
}

.hnav__right {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0.4rem 1.5rem 0 0;
}

/* auth.js injects .nav__link and .nav__user into .hnav__right - scale to match Sign In */
.hnav__right .nav__link,
.hnav__right .nav__user {
    font-size: 0.95rem;
    line-height: 52px;
    color: rgba(255, 255, 255, 0.88);
    padding: 0 1rem;
}

.signin-btn {
    display: flex;
    align-items: center;
    height: 52px;
    padding: 0 2rem;
    background: rgba(210, 218, 224, 0.90);
    color: #0d1f26;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    font-family: inherit;
    text-decoration: none;
    border: none;
    white-space: nowrap;
    cursor: pointer;
}

.signin-btn--out { display: none; }
html.auth-preload .signin-btn--in { display: none; }
html.auth-preload .signin-btn--out { display: flex; }

.hamburger {
    width: 52px;
    height: 52px;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 12px;
    cursor: pointer;
    border: none;
}

.hamburger:hover,
.hamburger:focus-visible {
    background: rgba(255, 255, 255, 0.9);
}

.hamburger:focus-visible {
    outline: 2px solid #fbbf24;
    outline-offset: 3px;
}

.hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background: #1a2a30;
    border-radius: 1px;
}

.ham-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 220px;
    max-width: calc(100vw - 2rem);
    background: rgba(8, 22, 12, 0.96);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    z-index: 900;
}

.ham-dropdown.is-open {
    display: block;
}

.ham-dropdown__email {
    padding: 14px 16px 12px;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.72);
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ham-dropdown__divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin: 0;
}

.ham-dropdown__item {
    display: block;
    padding: 12px 16px;
    font-size: 0.9rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    letter-spacing: 0.02em;
    transition: background 0.15s ease, color 0.15s ease;
}

.ham-dropdown__item:hover,
.ham-dropdown__item:focus-visible {
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
}

.ham-dropdown__item:focus-visible {
    outline: 2px solid #fbbf24;
    outline-offset: -2px;
}

.ham-dropdown__item--upgrade {
    color: #fbbf24;
}

.ham-dropdown__item--upgrade:hover,
.ham-dropdown__item--upgrade:focus-visible {
    color: #fde68a;
}

.ham-dropdown__item--logout {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.5);
}

.ham-dropdown__item--logout:hover,
.ham-dropdown__item--logout:focus-visible {
    color: rgba(255, 255, 255, 0.78);
}

.ham-dropdown__email--unverified {
    padding-bottom: 4px;
}

.ham-dropdown__verify-status {
    padding: 0 16px 4px;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.68);
    letter-spacing: 0.01em;
}

.ham-dropdown__resend {
    display: block;
    width: 100%;
    padding: 0 16px 12px;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.72);
    letter-spacing: 0.01em;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ham-dropdown__resend:hover:not(:disabled) {
    color: rgba(255, 255, 255, 0.65);
}

.ham-dropdown__resend:disabled {
    cursor: default;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.5);
}

.hero__main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* 28vh on tall screens, less on short laptop viewports so the trust
       strip and footer links still fit inside the clipped hero. */
    padding: clamp(7rem, 60vh - 300px, 28vh) 2.25rem 0 53%;
}

.hero__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.75rem;
    padding: 1.5rem 2.25rem 1.75rem 53%;
}

.hero-legal-link {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.8rem;
    font-weight: 400;
    letter-spacing: 0.03em;
    text-decoration: none;
    transition: color 0.2s ease;
}

.hero-legal-link:hover {
    color: rgba(255, 255, 255, 0.72);
}

.content-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: max-content;
    max-width: 100%;
}

/* The copy column is the right 47% of the viewport and .hero clips overflow,
   so the headline scales with viewport width and height. A fixed 4.5rem
   only fit at 1920x1080 and cut off "Complete" on 1470px laptops. */
.hero .headline {
    margin-top: 0;
    margin-bottom: 1.75rem;
    font-size: clamp(2.25rem, min(3.5vw, 6.5vh), 4.5rem);
    line-height: 1.15;
}

.hero .headline strong {
    font-weight: 900;
}

.hero .cta {
    align-self: flex-start;
    display: inline-block;
    border: 2px solid rgba(255, 255, 255, 0.88);
    background: transparent;
    color: #fff;
    padding: 1rem 4rem;
    font-size: 1.3rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-decoration: none;
}

.hero .cta:hover {
    background: rgba(255, 255, 255, 0.08);
}

.hero .trust-strip {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 2rem;
    gap: 0.85rem;
}

.hero .trust-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: rgba(255, 255, 255, 0.88);
    font-size: 1.35rem;
    font-weight: 400;
    white-space: nowrap;
}

.hero .trust-item::before {
    content: "\2713";
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 50%;
    color: var(--white);
    font-size: 0.95rem;
    flex-shrink: 0;
}

/* ── Auth preload: hide entire nav right until auth.js resolves final state ── */
html.auth-preload .nav__right,
html.auth-preload .hnav__right {
    visibility: hidden;
}

/* ── Nav ───────────────────────────────────────────── */
.nav {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 5rem;
}

.nav__brand {
    color: var(--white);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-decoration: none;
}

.nav__link {
    color: var(--white-muted);
    font-size: 0.875rem;
    text-decoration: none;
    transition: color 0.2s;
}

.nav__link:hover {
    color: var(--white);
}

.nav__right {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

/* nav-state wrappers - transparent flex containers matching nav__right layout */
.nav-state--out,
.nav-state--in {
    display: flex;
    align-items: center;
    gap: inherit;
}

.nav-state--in {
    display: none;
}

.nav__btn {
    color: var(--white);
    font-size: 0.875rem;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: 0.4rem 1.2rem;
    border-radius: 4px;
    transition: all 0.2s;
}

.nav__btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.7);
}

/* ── Headline ──────────────────────────────────────── */
.headline {
    color: var(--white);
    font-size: 3rem;
    font-weight: 300;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    margin-top: 5rem;
}

.headline strong {
    font-weight: 700;
}

/* ── Subtitle ──────────────────────────────────────── */
.subtitle {
    color: var(--white-muted);
    font-size: 1.125rem;
    font-weight: 300;
    line-height: 1.6;
    margin-bottom: 2.5rem;
    max-width: 480px;
}

/* ── CTA Button ────────────────────────────────────── */
.cta-button {
    display: inline-block;
    border: 2px solid var(--white);
    background: transparent;
    color: var(--white);
    padding: 0.875rem 2.5rem;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
}

.cta-button:hover:not(:disabled) {
    background: var(--white);
    color: var(--teal-dark);
}

.cta-button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.cta-button--sm {
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
}

/* ── Trust Strip ───────────────────────────────────── */
.pricing-hero__free-note {
    margin-top: 1rem;
    font-size: 0.92rem;
    color: var(--white-muted);
    max-width: 34rem;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

.app-subtitle--hint {
    font-size: 0.88rem;
    margin-top: 0.35rem;
}

.results-saved-note {
    font-size: 0.85rem;
    color: var(--white-muted, #9aa3b2);
    margin: 0.35rem 0 1rem;
}

.hero-free-note {
    margin-top: 0.9rem;
    font-size: 0.9rem;
    color: var(--white-muted);
}

.trust-strip {
    margin-top: auto;
    margin-left: -5rem;
    margin-right: -5rem;
    display: flex;
    justify-content: flex-start;
    gap: 2.5rem;
    padding: 1.5rem 5rem;
    border-top: 1px solid var(--white-faint);
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--white-muted);
    font-size: 0.85rem;
    font-weight: 400;
}

.trust-item::before {
    content: "\2713";
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 50%;
    color: var(--white);
    font-size: 0.7rem;
    flex-shrink: 0;
}

/* ── Responsive ────────────────────────────────────── */
@media (max-width: 900px) {
    /* Short phones and landscape: the hero grows to fit its content instead
       of clipping it at one screen, so everything in it (the T5008 tour
       button last) stays reachable. */
    .hero {
        height: auto;
        min-height: 100vh;
        min-height: 100dvh;
    }
    .hero__content {
        position: relative;
        min-height: inherit;
    }

    /* The desktop layout (copy in the right 47%) stops fitting at 900px,
       so the homepage hero switches straight to the stacked phone layout
       here rather than at the site-wide 768px breakpoint. */

    /* Flip gradient top→bottom so background image shows through
       on mobile instead of the left-opaque desktop version. */
    .hero__overlay {
        background: linear-gradient(to bottom,
            rgba(10, 50, 60, 0.55) 0%,
            rgba(10, 50, 60, 0.82) 60%,
            rgba(10, 50, 60, 0.96) 100%);
    }

    /* Remove 53% left offset - stack content vertically, centered. */
    .hero__main {
        padding: 7rem 1rem 2rem;
        align-items: center;
    }

    .hero__footer {
        padding: 1rem 1rem 1.25rem;
        justify-content: center;
        flex-wrap: wrap;
        gap: 1rem;
    }

    /* content-group has width:max-content on desktop - causes overflow.
       Must be 100% (not auto) so .hero .cta { width:100% } resolves
       against viewport width, not a shrink-to-content parent. The 32rem
       cap keeps tablet widths at the phone column instead of a CTA
       stretched across the screen. */
    .content-group {
        width: 100%;
        max-width: 32rem;
        align-items: center;
        text-align: center;
    }

    /* Headline: responsive size. white-space:normal overrides desktop nowrap.
       9vw ≈ 2.1rem at 375px - fills the viewport width on iPhone SE. */
    .hero .headline {
        font-size: clamp(1.8rem, 9vw, 2.5rem);
        white-space: normal;
    }

    /* CTA: full-width button, explicit 44px tap target */
    .hero .cta {
        width: 100%;
        text-align: center;
        padding: 0.9rem 1rem;
        min-height: 44px;
    }

    /* Trust strip: remove inherited border-top/padding/margins from generic
       .trust-strip rule; left-align items below the CTA button. */
    .hero .trust-strip {
        border-top: none;
        padding: 0;
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        gap: 1rem;
        align-items: flex-start;
        flex-direction: column;
    }
    .hero .trust-item {
        white-space: normal;
        font-size: 0.9rem;
        text-align: left;
    }

    /* Hero nav (.hnav): switch from position:absolute to relative so
       it's in document flow and doesn't overlap hero__main.
       Uniform 0.85rem padding on all sides: hamburger gets 0.85rem above
       AND to its right; logo gets 0.85rem from the left edge. */
    .hnav {
        position: relative;
        padding: 0.85rem;
        padding-top: calc(0.85rem + env(safe-area-inset-top, 0px));
    }

    /* .hnav__brand is an empty div (logo lives in .hnav__right). */
    .hnav__brand {
        display: none;
    }

    /* flex-start: logo takes flex:1 and self-aligns left; signin and
       hamburger pack to the right; 8px gap between them via signin margin. */
    .hnav__right {
        padding: 0;
        width: 100%;
        justify-content: flex-start;
        gap: 0;
    }

    /* The phone nav rules below are site-wide from 768px; repeat them for
       the homepage nav from 900px. index.html serves logo-mobile from 900px
       to match. */
    .hnav__right .nav-logo-link {
        flex: 1;
        justify-content: flex-start;
    }
    .hnav .nav-logo-link picture {
        display: block;
        width: 100%;
        max-width: 55vw;
    }
    .hnav .site-logo {
        height: auto;
        max-height: 54px;
        max-width: 100%;
        width: auto;
    }
    .hnav .signin-btn {
        padding: 0 1rem;
        height: 52px;
        margin-right: 8px;
    }

    .nav {
        padding: 1rem 2rem;
    }
    .headline {
        font-size: 2.25rem;
    }
}


/* ═══════════════════════════════════════════════════════
   APP PAGE (body.app-page overrides)
   ═══════════════════════════════════════════════════════ */

body.app-page {
    overflow: auto;
    background: none;
    isolation: isolate;
    min-height: 100vh;
    height: auto;
}

body.app-page::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to bottom, var(--teal-mid) 0%, var(--teal-dark) 100%);
}

/* ── App nav: sticky so it stays visible as content scrolls ── */
/* Keeps whatever a link or scrollIntoView() brings to the top of the page
   clear of the sticky nav instead of underneath it. */
html:has(> body.app-page) {
    scroll-padding-top: 7.5rem;
}

body.app-page .nav {
    position: sticky;
    top: 0;
    left: auto;
    right: auto;
    z-index: 100;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid var(--white-faint);
    background: var(--teal-mid);
}

/* ── App main container ──────────────────────────────── */
.app-main {
    max-width: 900px;
    margin: 0 auto;
    padding: 3rem 2rem 4rem;
}

/* ── App typography ──────────────────────────────────── */
.app-headline {
    color: var(--white);
    font-size: 2rem;
    font-weight: 300;
    margin-bottom: 0.5rem;
}

.app-subtitle {
    color: var(--white-muted);
    font-size: 0.975rem;
    margin-bottom: 2rem;
}

/* ── Upload zone ─────────────────────────────────────── */
.upload-zone {
    border: 2px dashed rgba(255, 255, 255, 0.4);
    border-radius: 4px;
    padding: 3rem 2rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    margin-bottom: 1.5rem;
}

.upload-zone:hover,
.upload-zone:focus-visible,
.upload-zone--over {
    border-color: var(--white);
    background: var(--white-faint);
}

.upload-zone:focus-visible {
    outline: 2px solid var(--white);
    outline-offset: 3px;
}

.upload-zone--has-file {
    border-color: var(--white);
    border-style: solid;
}

.upload-zone__icon {
    font-size: 2rem;
    color: var(--white-muted);
    margin-bottom: 0.75rem;
}

.upload-zone__label {
    color: var(--white);
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.upload-zone__sublabel {
    color: var(--white-muted);
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
}

.upload-zone__browse {
    color: var(--white);
    font-size: 0.875rem;
    text-decoration: underline;
    cursor: pointer;
}

/* ── Account rows (Sprint 5 multi-file) ─────────────────────── */
.account-list {
    margin-bottom: 0.6rem;
}

.account-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.75rem;
    background: var(--white-faint);
    border-radius: 3px;
    margin-bottom: 0.4rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

/* The one add control before any file is staged. */
.account-row--empty {
    justify-content: center;
    padding: 1rem 0.75rem;
    margin-bottom: 1rem;
    border: 1px dashed rgba(255, 255, 255, 0.3);
    background: var(--white-fainter);
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s;
}

.account-row--empty .account-row__badge {
    display: none;
}

.account-row--empty .account-row__name {
    flex: 0 1 auto;
    text-align: center;
    white-space: normal;
}

.account-row--empty:hover {
    border-color: rgba(255, 255, 255, 0.5);
    background: var(--white-faint);
}

.account-row--empty:focus-visible {
    outline: 2px solid #fbbf24;
    outline-offset: 3px;
    border-color: rgba(255, 255, 255, 0.55);
}

/* One column wide enough for the longest label, so file names line up
   from row to row; a badge never wraps onto two lines. */
.account-row__badge { flex-shrink: 0; min-width: 9.75rem; }
.account-row__badge .badge { white-space: nowrap; }
.reg-accounts-check { display: flex; gap: 0.5rem; align-items: flex-start; font-weight: 400; margin-top: 0.35rem; }
.reg-accounts-check input { margin-top: 0.2rem; flex-shrink: 0; }
.account-row__retain { display: block; font-size: 0.72rem; font-weight: 400; opacity: 0.7; margin-top: 0.15rem; white-space: normal; }

.account-row__name {
    flex: 1;
    min-width: 0;
    font-size: 0.875rem;
    color: var(--white);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-row__name--placeholder {
    font-size: 0.95rem;
}

.account-row__hint {
    display: block;
    margin-top: 0.2rem;
    color: var(--white-muted);
    font-size: 0.78rem;
}

.account-row__remove {
    flex-shrink: 0;
    color: var(--white-muted);
    cursor: pointer;
    padding: 0 0.25rem;
    line-height: 1;
    background: none;
    border: none;
    font-size: 0.9rem;
    font-family: inherit;
}

.account-row__remove:hover { color: var(--white); }

.account-row__mapped {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.8rem;
}

.account-row__mapped-text { color: #86efac; }

.account-row__edit,
.account-row__retry {
    padding: 0;
    background: none;
    border: none;
    color: var(--link);
    font: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.account-row__edit:hover,
.account-row__retry:hover { color: var(--white); }

.account-row__edit:focus-visible,
.account-row__retry:focus-visible {
    outline: 2px solid #fbbf24;
    outline-offset: 2px;
    border-radius: 3px;
}

@media (max-width: 480px) {
    .account-row__mapped-long { display: none; }
    .account-row__badge { min-width: 0; }
}

/* A file the server could not check: the reason in the site's error box
   (as .editor-error) under the file name, with Try again when retrying can
   help, and the row edged in the same red. */
.account-row__inspect-error {
    flex-basis: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.75rem;
    margin-top: 0.15rem;
    padding: 0.6rem 0.8rem;
    border-left: 3px solid var(--red);
    border-radius: 4px;
    background: rgba(239, 68, 68, 0.14);
    color: var(--white);
    font-size: 0.82rem;
    line-height: 1.45;
}

.account-row:has(> .account-row__inspect-error) {
    border-color: rgba(239, 68, 68, 0.45);
}

.account-row__remove:focus-visible {
    outline: 2px solid #fbbf24;
    outline-offset: 2px;
    border-radius: 3px;
    color: var(--white);
}

.add-account-btn {
    width: 100%;
    padding: 0.5rem;
    background: none;
    border: 1px dashed rgba(255, 255, 255, 0.25);
    border-radius: 3px;
    color: var(--white-muted);
    font-size: 0.875rem;
    cursor: pointer;
    text-align: center;
    margin-bottom: 1rem;
    font-family: inherit;
    transition: border-color 0.15s, color 0.15s;
}

.add-account-btn:hover {
    border-color: rgba(255, 255, 255, 0.5);
    color: var(--white);
}

.add-account-btn:focus-visible {
    outline: 2px solid #fbbf24;
    outline-offset: 3px;
}

.add-account-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.acb-conflict-warn {
    font-size: 0.78rem;
    color: var(--amber);
    margin-bottom: 0.75rem;
}

/* ── Upload controls row ─────────────────────────────── */
.upload-controls {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.875rem;
}

.year-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--white-muted);
    font-size: 0.875rem;
}

.year-select,
.fx-opening-ccy {
    appearance: none;
    background-color: var(--white-faint);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='0.75' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.65rem center;
    background-size: 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--white);
    padding: 0.5rem 2.1rem 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-family: inherit;
    border-radius: 2px;
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s;
}

.year-select {
    min-width: 6.5rem;
}

.year-select:hover,
.fx-opening-ccy:hover {
    border-color: rgba(255, 255, 255, 0.5);
}

.year-select option,
.fx-opening-ccy option {
    background: var(--teal-dark);
    color: var(--white);
}

.year-select:focus-visible,
.fx-opening-ccy:focus-visible {
    outline: 2px solid #fbbf24;
    outline-offset: 3px;
}

.reg-accounts-label {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-width: 100%;
    color: var(--white-muted);
    font-size: 0.875rem;
}

.reg-accounts-input {
    background: var(--white-faint);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--white);
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-family: inherit;
    border-radius: 2px;
    width: 22rem;
    max-width: 100%;
}

.reg-accounts-input::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.reg-accounts-input:focus-visible {
    outline: 2px solid #fbbf24;
    outline-offset: 3px;
}

.field-help {
    max-width: 30rem;
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.75rem;
    line-height: 1.45;
}

/* Checkboxes in the upload form: drawn to match the text inputs. */
.upload-controls input[type="checkbox"] {
    appearance: none;
    flex-shrink: 0;
    width: 1.05rem;
    height: 1.05rem;
    min-height: 0;
    margin: 0.1rem 0 0;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 2px;
    background: var(--white-faint) center / 0.8rem no-repeat;
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s;
}

.upload-controls input[type="checkbox"]:hover {
    border-color: rgba(255, 255, 255, 0.65);
}

.upload-controls input[type="checkbox"]:checked {
    border-color: var(--white);
    background-color: var(--white);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d3d4a' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}

.upload-controls input[type="checkbox"]:focus-visible {
    outline: 2px solid #fbbf24;
    outline-offset: 2px;
}

/* ── Opening foreign cash (optional disclosure) ──────── */
.fx-opening {
    display: block;
    width: 100%;
}

.fx-opening > summary {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    list-style: none;
    cursor: pointer;
    user-select: none;
    transition: color 0.15s;
}

.fx-opening > summary::-webkit-details-marker {
    display: none;
}

.fx-opening > summary::before {
    content: '';
    flex-shrink: 0;
    width: 0.4rem;
    height: 0.4rem;
    margin-left: 0.1rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg);
    transition: transform 0.15s ease;
}

.fx-opening[open] > summary::before {
    transform: rotate(45deg);
}

.fx-opening > summary:hover,
.fx-opening[open] > summary {
    color: var(--white);
}

.fx-opening > summary:focus-visible {
    outline: 2px solid #fbbf24;
    outline-offset: 4px;
    border-radius: 2px;
}

.fx-opening__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    max-width: 50rem;
    margin-top: 0.65rem;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.04);
}

.fx-opening-rows {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: 100%;
}

.fx-opening-row {
    display: grid;
    grid-template-columns: 5.75rem minmax(0, 10.5rem) minmax(0, 10.5rem) minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.6rem;
}

.fx-opening-remove {
    padding: 0.35rem 0.4rem;
    background: none;
    border: none;
    color: var(--white-muted);
    font-size: 0.9rem;
    font-family: inherit;
    line-height: 1;
    cursor: pointer;
}

.fx-opening-remove:hover {
    color: var(--white);
}

.fx-opening-remove:focus-visible {
    outline: 2px solid #fbbf24;
    outline-offset: 2px;
    border-radius: 3px;
    color: var(--white);
}

.fx-opening-units,
.fx-opening-cost {
    width: 100%;
    background: var(--white-faint);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--white);
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-family: inherit;
    border-radius: 2px;
    transition: border-color 0.15s, opacity 0.15s;
}

.fx-opening-units::placeholder,
.fx-opening-cost::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.fx-opening-units:focus-visible,
.fx-opening-cost:focus-visible {
    outline: 2px solid #fbbf24;
    outline-offset: 3px;
}

.fx-opening-cost:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.fx-opening-est-label {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding-left: 0.25rem;
    color: var(--white-muted);
    font-size: 0.8125rem;
    line-height: 1.3;
    cursor: pointer;
}

.fx-opening-est-label input[type="checkbox"] {
    margin-top: 0;
}

.fx-opening-add {
    padding: 0.4rem 0.85rem;
    background: none;
    border: 1px dashed rgba(255, 255, 255, 0.25);
    border-radius: 3px;
    color: var(--white-muted);
    font-size: 0.8125rem;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

.fx-opening-add:hover {
    border-color: rgba(255, 255, 255, 0.5);
    color: var(--white);
}

.fx-opening-add:focus-visible {
    outline: 2px solid #fbbf24;
    outline-offset: 3px;
}

@media (max-width: 700px) {
    .fx-opening__body {
        padding: 0.85rem;
    }
    .fx-opening-rows {
        gap: 1rem;
    }
    .fx-opening-row {
        grid-template-columns: 5.75rem minmax(0, 1fr) auto;
    }
    .fx-opening-cost,
    .fx-opening-est-label {
        grid-column: 1 / -1;
    }
    .fx-opening-remove {
        grid-column: 3;
        grid-row: 1;
    }
    .fx-opening-est-label {
        padding-left: 0;
    }
    .fx-opening-row + .fx-opening-row {
        padding-top: 1rem;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
}

.error-block {
    margin-top: 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: var(--white-faint);
    color: var(--white);
    border-radius: 4px;
    font-size: 0.9rem;
    line-height: 1.4;
}

.preflight-size-notice {
    margin-top: 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(20, 184, 166, 0.35);
    border-left: 3px solid #14b8a6;
    background: rgba(20, 184, 166, 0.12);
    color: var(--white);
    border-radius: 4px;
    font-size: 0.9rem;
    line-height: 1.4;
}

/* ── Spinner ─────────────────────────────────────────── */
.spinner-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    gap: 1.5rem;
}

.spinner {
    width: 48px;
    height: 48px;
    border: 3px solid var(--white-faint);
    border-top-color: var(--white);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

.spinner-label {
    color: var(--white-muted);
    font-size: 0.975rem;
}

/* ── Results section ─────────────────────────────────── */
.results-section {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.results-title {
    color: var(--white);
    font-size: 1.5rem;
    font-weight: 300;
}

/* ── Summary cards ───────────────────────────────────── */
.card-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

.card {
    background: var(--white-faint);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 4px;
    padding: 1.25rem 1.5rem;
}

.card-title {
    color: var(--white);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--white-faint);
}

.row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.2rem 0;
    font-size: 0.875rem;
}

.row-label {
    color: var(--white-muted);
}

.row-val {
    color: var(--white);
    font-variant-numeric: tabular-nums;
}

/* A corporation's capital dividend account and investment income figures:
   full width under the summary cards, long labels wrap beside the amount. */
.corp-investment-card {
    margin-bottom: 2rem;
}

.corp-investment-card .row {
    gap: 1rem;
}

.corp-investment-card__note {
    color: var(--white-muted);
    font-size: 0.8rem;
    line-height: 1.5;
    margin-top: 0.75rem;
}

/* ── Section label ───────────────────────────────────── */
.section-label {
    color: var(--white);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}

/* ── Warnings ────────────────────────────────────────── */
.warnings-block {
    background: var(--amber-faint);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 4px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 2rem;
}

.warning-item {
    color: var(--white-muted);
    font-size: 0.875rem;
    padding: 0.4rem 0;
    padding-left: 0.75rem;
    border-left: 3px solid var(--amber);
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.warning-item:last-child {
    margin-bottom: 0;
}

.import-audit-block {
    margin-top: 1rem;
}

.import-audit-file {
    padding: 0.75rem 0;
    border-top: 1px solid var(--white-faint);
}

.import-audit-note {
    margin: 0.35rem 0 0.65rem;
    color: var(--white-muted);
    font-size: 0.85rem;
}

.import-audit-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.45rem;
    font-size: 0.85rem;
}

.import-audit-table th,
.import-audit-table td {
    padding: 0.3rem 0.5rem 0.3rem 0;
    border-bottom: 1px solid var(--white-faint);
}

.import-audit-table th {
    text-align: left;
    color: var(--white-muted);
    font-weight: 600;
}

.import-audit-table td {
    text-align: right;
    color: var(--white);
    font-variant-numeric: tabular-nums;
}

/* ── Dispositions table ──────────────────────────────── */
.table-section {
    margin-bottom: 2rem;
}

.table-wrapper {
    overflow-x: auto;
    border: 1px solid var(--white-faint);
    border-radius: 4px;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.data-table th {
    background: rgba(0, 0, 0, 0.2);
    color: var(--white-muted);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.7rem;
    padding: 0.6rem 0.75rem;
    text-align: left;
    white-space: nowrap;
}

.data-table td {
    color: var(--white);
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--white-faint);
    white-space: nowrap;
}

/* Reference tables whose cells are sentences, not values. nowrap on a
   sentence pushes a narrow table just past its wrapper and it scrolls by a
   few pixels, which reads as broken rather than deliberate. */
.data-table--wrap td {
    white-space: normal;
}

/* Rows draw their line on top, so a table's final row ends open. This
   closes tables that end at the data, with no totals row below. */
.data-table--closed tbody tr:last-child td {
    border-bottom: 1px solid var(--white-faint);
}

.data-table tbody tr:hover td {
    background: var(--white-faint);
}

.data-table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.data-table .neg {
    color: var(--red);
}

.data-table .amber {
    color: var(--amber);
}

.row-superficial td {
    background: rgba(245, 158, 11, 0.07);
}

.tag-sup {
    display: inline-block;
    background: var(--amber);
    color: var(--teal-dark);
    font-size: 0.6rem;
    font-weight: 700;
    padding: 0.1rem 0.35rem;
    border-radius: 2px;
    margin-left: 0.3rem;
    vertical-align: middle;
    letter-spacing: 0.04em;
}

.badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    letter-spacing: 0.03em;
}

.badge-xml {
    background: rgba(74, 144, 217, 0.15);
    color: #4a90d9;
}

.badge-xlsx {
    background: rgba(52, 168, 83, 0.15);
    color: #34a853;
}

.badge-csv {
    background: rgba(244, 114, 42, 0.15);
    color: #f58a4b;
}

/* A file whose broker the server has not named yet. */
.badge-neutral {
    background: var(--white-fainter);
    color: var(--white-muted);
}

.badge-activeacb {
    background: rgba(150, 120, 220, 0.15);
    color: #a08fe0;
}

/* ── Download row ────────────────────────────────────── */
.download-row {
    display: flex;
    gap: 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--white-faint);
}

.dl-btn {
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: transparent;
    color: var(--white-muted);
    padding: 0.6rem 1.25rem;
    font-size: 0.875rem;
    font-family: inherit;
    cursor: pointer;
    border-radius: 2px;
    transition: all 0.2s;
}

.dl-btn:hover {
    border-color: var(--white);
    color: var(--white);
    background: var(--white-faint);
}

.dl-btn:focus-visible {
    outline: 2px solid #fbbf24;
    outline-offset: 3px;
}

/* T5008 season reminder opt-in under the download row */
.reminder-optin {
    color: var(--white-muted);
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    font-size: 0.8rem;
    line-height: 1.45;
    margin-top: 0.9rem;
    cursor: pointer;
}

.reminder-optin input {
    margin-top: 0.15rem;
    flex: 0 0 auto;
}

.reminder-optin__msg {
    margin-top: 0.4rem;
    font-size: 0.78rem;
    color: var(--white-muted);
}

.reminder-optin__msg--error {
    color: #fca5a5;
}

.dl-btn--danger {
    border-color: rgba(220, 53, 69, 0.4);
    color: #fff;
    background: rgba(220, 53, 69, 0.15);
}

.dl-btn--danger:hover:not(:disabled) {
    border-color: rgba(220, 53, 69, 0.6);
    background: rgba(220, 53, 69, 0.3);
}

.delete-modal__body {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    margin-top: 0.5rem;
    line-height: 1.5;
}

.delete-modal__error {
    color: var(--red);
    font-size: 0.85rem;
    margin-top: 0.75rem;
}

.delete-modal__actions {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
    justify-content: flex-end;
}

/* ── Responsive app page ─────────────────────────────── */
@media (max-width: 700px) {
    .card-grid {
        grid-template-columns: 1fr;
    }
    .upload-controls {
        flex-direction: column;
        align-items: flex-start;
    }
    .results-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    .download-row {
        flex-direction: column;
    }
    .dl-btn {
        width: 100%;
    }
    .dl-btn--danger {
        width: 100%;
    }
}

/* ── Footer ──────────────────────────────────────────── */
.footer {
    position: relative;
    text-align: center;
    padding: 1.5rem;
    color: var(--white-muted);
    font-size: 0.75rem;
}

/* Footer links are link-blue in every state. The a:not([class]):visited
   floor above outranks a plain `.footer a` rule, so without the explicit
   :visited selector the links read white until visited and blue after,
   which differs between a desktop with history and a fresh phone. */
.footer a,
.footer a:visited {
    color: var(--link);
    text-decoration: none;
}

.footer a:hover {
    color: var(--white);
}

.footer__sep {
    margin: 0 0.5rem;
}

.preferred-source-cta {
    margin: 2.5rem 0 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.preferred-source-cta__copy {
    color: var(--white-muted);
    font-size: 0.95rem;
    line-height: 1.5;
}

.preferred-source-cta__button {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.5rem;
    padding: 0.7rem 1rem;
    border-radius: 6px;
    background: var(--teal-light);
    color: var(--white);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
}

.preferred-source-cta__button:hover {
    background: var(--teal-mid);
}

@media (max-width: 700px) {
    .preferred-source-cta {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* ── Guide pages ─────────────────────────────────────── */
.guide-container {
    max-width: 960px;
    margin: 0 auto;
    padding: 2rem 2rem 4rem;
}

.guide-container--wide {
    /* Retained on article templates; 960px is now the site-wide content width. */
    max-width: 960px;
}

.guide-back {
    display: inline-block;
    color: var(--white-muted);
    font-size: 0.85rem;
    text-decoration: none;
    margin-bottom: 1.5rem;
}

.guide-back:hover { color: var(--white); }

.guide-step--full {
    border-left: none;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 1.75rem 2rem;
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.guide-step--full .guide-step__title {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}

.guide-step--full .guide-step__desc {
    margin: 0;
    line-height: 1.65;
}

.guide-img {
    width: 100%;
    height: auto;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 0.5rem;
    display: block;
}

/* Click-to-enlarge screenshots (guide-zoom.js). Shown at no more than their
   natural size so a narrow screenshot is not stretched blurry across the
   column; the enlarged view shows the full-resolution file. */
.guide-zoom {
    display: block;
    width: fit-content;
    max-width: 100%;
    cursor: zoom-in;
}

.guide-zoom .guide-img {
    width: auto;
    max-width: 100%;
}

.guide-zoom:focus-visible {
    outline: 2px solid var(--link);
    outline-offset: 3px;
    border-radius: 6px;
}

/* Numbered one-action steps inside a guide part (guide-ibkr.html). */
.guide-howto {
    margin: 0;
    padding-left: 1.5rem;
    color: var(--white-muted);
}

.guide-howto > li {
    margin-bottom: 1.5rem;
    padding-left: 0.25rem;
}

.guide-howto > li:last-child { margin-bottom: 0; }

.guide-howto > li > * + * { margin-top: 0.5rem; }

.guide-howto > li::marker {
    color: var(--white);
    font-weight: 600;
}

.guide-howto .guide-list { margin: 0; }

.guide-tag { color: var(--amber); }

.guide-tag--optional { color: var(--link); }

.guide-zoom__hint {
    margin: 0.35rem 0 0;
    color: var(--white-muted);
    font-size: 0.75rem;
}

.guide-zoom-dialog {
    margin: auto;
    max-width: 96vw;
    max-height: 92vh;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    background: var(--teal-dark);
    overflow: auto;
}

.guide-zoom-dialog::backdrop {
    background: rgba(0, 0, 0, 0.8);
}

.guide-zoom-dialog__img {
    display: block;
    max-width: 100%;
    height: auto;
}

.guide-zoom-dialog__close {
    position: fixed;
    top: 0.75rem;
    right: 0.75rem;
    width: 2.25rem;
    height: 2.25rem;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.7);
    color: var(--white);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    z-index: 1;
}

html:has(.guide-zoom-dialog[open]) {
    overflow: hidden;
}

/* Phones: show the screenshot at full resolution and let the reader pan,
   since fitting a 1400px screenshot to 390px would be no larger than the
   inline image. */
@media (max-width: 768px) {
    .guide-zoom-dialog {
        max-width: 100vw;
        max-height: 100dvh;
        width: 100vw;
        height: 100dvh;
        border: none;
        border-radius: 0;
    }

    .guide-zoom-dialog__img {
        max-width: none;
    }
}

.guide-link {
    color: var(--link);
    text-decoration: none;
}

.guide-link:hover { text-decoration: underline; }

/* The only rule in this region is the one under the heading, on the list
   itself. The section's own top and bottom borders are gone: the top one boxed
   the heading in, and the bottom one drew the line that appeared to sit above
   the preferred-source block underneath. */
.related-guides {
    margin: 2rem 0 0;
    padding: 0;
}

.related-guides__heading {
    margin: 0 0 0.9rem;
    color: var(--white);
    font-size: 1.05rem;
    font-weight: 700;
}

/* One row, three links, never wrapping. Grid rather than space-between:
   space-between only centres the middle item when all three happen to be the
   same width, and they never are. 1fr auto 1fr puts the middle at the true
   centre of the row whatever the labels say. */
/* One row: first link flush left, last flush right, middle with equal
   whitespace on either side.

   Auto margins on the middle item, not a 1fr auto 1fr grid. The grid centres
   the middle in the CONTAINER, which only looks centred when the outer two
   links are the same width. They rarely are, so the visible gaps came out
   uneven: on the compare page 233px to its left against 202px to its right.
   Auto margins absorb the free space equally instead, so the two gaps match
   whatever the labels are. */
.related-guides__list {
    align-items: center;
    border-bottom: 1px solid var(--white-fainter);
    border-top: 1px solid var(--white-fainter);
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0.85rem 0;
}

.related-guides__list li:nth-child(2) {
    margin-left: auto;
    margin-right: auto;
    padding: 0 1.5rem;
}

.related-guides__link,
.related-guides__link:visited {
    color: var(--link);
    display: block;
    font-size: 0.9rem;
    line-height: 1.4;
    text-decoration: none;
    transition: color 0.15s ease;
    white-space: nowrap;
}

/* Keep this class on every related link. The global a:not([class]) visited rule
   has higher specificity than a container selector and would otherwise win. */
.related-guides__link:hover {
    color: var(--white);
    text-decoration: underline;
}

/* Three across cannot fit a phone. Stack, left aligned, and drop the centring
   so the column does not look arbitrarily indented. */
/* Three across cannot fit a phone. Stack, left aligned, and drop the auto
   margins so the middle entry does not float away from the other two. */
@media (max-width: 620px) {
    .related-guides__list {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.7rem;
    }

    .related-guides__list li:nth-child(2) {
        margin-left: 0;
        margin-right: 0;
        padding: 0;
    }
}

.etf-factor-lookup {
    max-width: 1120px;
}

.etf-factor-lookup__warning {
    color: var(--white-muted);
    line-height: 1.65;
    margin: 0 0 1rem;
}

.etf-factor-lookup__tools {
    align-items: flex-end;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    margin: 1.25rem 0 1rem;
}

/* Each label sits with its own control in a field, so the row aligns as two
   groups plus the count. Previously the labels and controls were siblings, so
   every one of them was its own flex item and nothing lined up. */
.etf-factor-lookup__field {
    display: flex;
    flex: 1 1 240px;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.etf-factor-lookup__field--narrow {
    flex: 0 0 auto;
}

.etf-factor-lookup__label {
    color: var(--white-muted);
    display: block;
    font-size: 0.85rem;
}

.etf-factor-lookup__filter {
    background: var(--bg);
    border: 1px solid var(--white-faint);
    border-radius: 4px;
    color: var(--white);
    font: inherit;
    min-height: 2.5rem;
    padding: 0.65rem 0.75rem;
    width: 100%;
}

.etf-factor-lookup__filter:focus {
    border-color: var(--link);
    outline: 2px solid var(--link);
    outline-offset: 2px;
}

/* Scoped to the tools row so it outranks `.method-section p`, which is (0,1,1)
   and was winning the margin. Without this the count floats above the controls
   it belongs beside. */
.etf-factor-lookup__tools .etf-factor-lookup__count {
    color: var(--white-muted);
    font-size: 0.85rem;
    margin: 0 0 0 auto;
    padding-bottom: 0.55rem;
    white-space: nowrap;
}

/* The table is wider than the column on anything under about 900px, so it
   scrolls sideways. The platform default here is an overlay scrollbar that
   stays invisible until you are already scrolling, which leaves a mouse user
   with nothing to grab and no sign the table moves at all. Force a visible
   bar so the affordance exists. */
.etf-factor-table-wrapper {
    border: 1px solid var(--white-faint);
    border-radius: 4px;
    overflow-x: auto;
    scrollbar-color: rgba(255, 255, 255, 0.3) rgba(255, 255, 255, 0.05);
    width: 100%;
}

.etf-factor-table__scroll-hint {
    color: var(--white-muted);
    font-size: 0.8rem;
    margin: 0 0 0.5rem;
}

.etf-factor-table-wrapper::-webkit-scrollbar {
    height: 12px;
}

.etf-factor-table-wrapper::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 0 0 4px 4px;
}

.etf-factor-table-wrapper::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 6px;
}

.etf-factor-table-wrapper::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.45);
}

/* Tell a keyboard or screen reader user the region scrolls, and let arrow keys
   reach it. Without a tabindex the wrapper is not focusable and the table is
   unreachable without a pointer. */
.etf-factor-table-wrapper:focus-visible {
    outline: 2px solid var(--link);
    outline-offset: 2px;
}

.etf-factor-table {
    border-collapse: collapse;
    font-size: 0.82rem;
    min-width: 900px;
    width: 100%;
}

.etf-factor-table th {
    background: var(--white-fainter);
    color: var(--white-muted);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 0.7rem 0.8rem;
    text-align: center;
    text-transform: uppercase;
}

/* The two value headings wrap onto a second line so their columns stay narrow
   enough that the numbers, not the labels, set the column width. */
.etf-factor-table th span {
    display: block;
    font-weight: 600;
}

.etf-factor-table td {
    border-top: 1px solid var(--white-fainter);
    color: var(--white);
    padding: 0.65rem 0.8rem;
    text-align: center;
    vertical-align: middle;
}

/* Fixed six decimals everywhere, so tabular figures line up on the decimal
   point and a zero reads as 0.000000 rather than a bare 0. */
.etf-factor-table__num {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.etf-factor-table__detail {
    min-width: 11rem;
    white-space: nowrap;
}

.etf-factor-table__detail-note {
    color: var(--white-muted);
    display: block;
    font-size: 0.75rem;
}

.etf-factor-pager {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 1rem;
}

.etf-factor-pager__button {
    background: var(--white-fainter);
    border: 1px solid var(--white-faint);
    border-radius: 4px;
    color: var(--white);
    cursor: pointer;
    font-size: 0.8rem;
    padding: 0.45rem 0.9rem;
}

.etf-factor-pager__button:hover:not(:disabled) {
    background: var(--white-faint);
}

.etf-factor-pager__button:disabled {
    cursor: default;
    opacity: 0.4;
}

.etf-factor-pager__status {
    color: var(--white-muted);
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
}

.etf-factor-lookup__per-page {
    background: var(--teal-dark);
    border: 1px solid var(--white-faint);
    border-radius: 4px;
    color: var(--white);
    font-size: 0.85rem;
    padding: 0.4rem 0.6rem;
}

.etf-factor-table__status {
    color: var(--white-muted);
    white-space: nowrap;
}

.etf-factor-table__reason {
    color: var(--white-muted);
    min-width: 18rem;
    text-align: left;
}

.etf-factor-table__source,
.etf-factor-table__source:visited {
    color: var(--link);
    display: inline-block;
    text-decoration: none;
}

.etf-factor-table__source:hover {
    text-decoration: underline;
}

.etf-factor-table__archive,
.etf-factor-table__archive:visited {
    color: var(--link);
    display: inline-block;
    font-size: 0.875rem;
    margin-left: 0.75rem;
    text-decoration: none;
}

.etf-factor-table__archive:hover {
    text-decoration: underline;
}

.etf-factor-table__provider {
    color: var(--white-muted);
    display: block;
    font-size: 0.75rem;
    line-height: 1.4;
    margin-top: 0.25rem;
}

.guide-list {
    color: var(--white-muted);
    font-size: 0.875rem;
    line-height: 1.8;
    padding-left: 1.4rem;
    margin: 0;
}

.guide-list li { margin-bottom: 0.15rem; }

.guide-settings {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    overflow: hidden;
    margin: 0;
}

.guide-settings__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.55rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    gap: 1rem;
}

.guide-settings__row:last-child { border-bottom: none; }

.guide-settings__row dt {
    color: var(--white-muted);
    font-size: 0.82rem;
    font-weight: 400;
}

.guide-settings__row dd {
    color: var(--white);
    font-size: 0.82rem;
    font-weight: 500;
    margin: 0;
    text-align: right;
}

.guide-title {
    color: var(--white);
    font-size: 1.75rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.guide-subtitle {
    color: var(--white-muted);
    font-size: 1rem;
    margin-bottom: 2rem;
}

.guide-coming-soon {
    color: var(--white-muted);
    font-size: 0.875rem;
    margin-top: 1.5rem;
    margin-bottom: 2.5rem;
    text-align: center;
}

/* ── Broker cards ────────────────────────────────────── */
.broker-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.broker-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    transition: all 0.2s;
}

.broker-card:hover {
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.08);
}

/* Logos differ in height, so each sits centered in a fixed box and the
   text and buttons under it start at the same line in every tile. */
.broker-card picture {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 4rem;
    margin-bottom: 1rem;
}

/* Tiles in a row share their row tracks, so a description or button that
   wraps in one tile moves its neighbour's buttons down with it. */
@supports (grid-template-rows: subgrid) {
    .broker-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: subgrid;
        grid-row: span 4;
        row-gap: 0;
        justify-items: center;
        align-items: start;
        align-content: start;
    }
}

/* An odd tile count leaves the last one alone in its row; center it. */
.broker-card:last-child:nth-child(odd) {
    display: flex;
    align-items: center;
    grid-row: auto;
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 0.75rem);
}

.broker-card__logo {
    display: block;
    min-width: 0;
    max-width: 14rem;
    max-height: 4rem;
    width: auto;
    height: auto;
    object-fit: contain;
}

.broker-card__logo--ibkr {
    max-width: 11.5rem;
}

.broker-card__logo--questrade {
    max-width: 13rem;
}

.broker-card__logo--wealthsimple {
    max-width: 14rem;
}

.broker-card__logo--cibc {
    max-width: 11rem;
}

.broker-card__logo--td {
    max-width: 13rem;
}

.broker-card__logo--qtrade {
    max-width: 12rem;
}

.broker-card__logo--nbdb {
    max-width: 12rem;
}

.broker-card__logo--scotia {
    max-width: 13.5rem;
}

.broker-card__name--hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.broker-card__name {
    color: var(--white);
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.broker-card__desc {
    color: var(--white-muted);
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
}

.broker-card__link {
    color: var(--white);
    font-size: 0.875rem;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: 0.5rem 1.5rem;
    border-radius: 4px;
    display: inline-block;
    transition: all 0.2s;
}

.broker-card__link:hover {
    background: rgba(255, 255, 255, 0.1);
}

@media (max-width: 500px) {
    .broker-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .broker-card:last-child:nth-child(odd) {
        width: 100%;
    }
}

/* ── Guide step blocks ───────────────────────────────── */
.guide-step {
    background: rgba(255, 255, 255, 0.05);
    border-left: 3px solid var(--teal-light);
    padding: 1rem 1.5rem;
    margin-bottom: 1rem;
    border-radius: 0 8px 8px 0;
}

.guide-step__number {
    color: var(--teal-light);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.25rem;
}

.guide-step__title {
    color: var(--white);
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.guide-step__desc {
    color: var(--white-muted);
    font-size: 0.875rem;
    line-height: 1.6;
}

.guide-step__note {
    background: var(--amber-faint);
    border-left: 3px solid var(--amber);
    border-radius: 0 6px 6px 0;
    padding: 0.75rem 1rem;
    margin-top: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--white-muted);
}

.guide-step__note--important {
    border-left-width: 4px;
    background: rgba(245, 158, 11, 0.12);
}

.guide-step__note p {
    margin: 0;
}

.guide-cta {
    /* Preceding .method-section carries 2.5rem margin-bottom (collapses with
       this top margin); matching 2.5rem below centers the CTA between
       sections instead of hugging the one beneath it. */
    margin: 2rem 0 2.5rem;
    text-align: center;
}

/* ── Legal pages ─────────────────────────────────────── */
.legal-container {
    max-width: 960px;
    margin: 0 auto;
    padding: 2rem 2rem 4rem;
}

/* ── Profile page ──────────────────────────────────────────── */
.profile-page {
    max-width: 480px;
    margin: 0 auto;
    padding: 5rem 1.5rem 4rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.history-page {
    max-width: 1000px;
    margin: 0 auto;
    padding: 3rem 2rem 4rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.admin-page {
    max-width: 1180px;
    color: var(--white);
}

.admin-page section {
    color: var(--white);
}

.admin-page .section-title {
    color: var(--white);
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0 0 0.75rem;
}

.admin-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.admin-meta {
    color: var(--white-muted);
    font-size: 0.84rem;
    margin: 0;
}

.admin-card {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 1.75rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.admin-card__title {
    color: var(--white);
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.admin-card__note {
    color: var(--white-muted);
    font-size: 0.8rem;
    line-height: 1.5;
    margin: 0;
}

.admin-card--sub {
    background: rgba(255, 255, 255, 0.035);
    border-color: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 1rem;
}

.admin-page .stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.75rem;
}

.admin-page .stat {
    min-width: 0;
    padding: 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.14);
}

.admin-page .stat__label {
    color: var(--white-muted);
    font-size: 0.75rem;
    line-height: 1.3;
    margin-bottom: 0.35rem;
}

.admin-page .stat__value {
    color: var(--white);
    font-size: 1.4rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.admin-page .stat__bar {
    height: 0.35rem;
    margin-top: 0.65rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
}

.admin-page .stat__bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--teal-light);
}

.admin-page .admin-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem 1rem;
}

.admin-page .admin-form--inline {
    align-items: start;
}

.admin-page .field {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.admin-page .field label {
    color: var(--white);
    font-size: 0.78rem;
    font-weight: 600;
}

.admin-page .field__help {
    color: var(--white-muted);
    font-size: 0.75rem;
    line-height: 1.35;
    margin: 0;
}

.field__control {
    position: relative;
    display: flex;
    align-items: center;
}

.field__control .login-input {
    padding-right: 2.25rem;
}

.field__suffix {
    position: absolute;
    right: 0.9rem;
    color: var(--white-muted);
    font-size: 0.85rem;
    pointer-events: none;
}

/* A button that sits beside a labelled field: the spacer takes the label's
   height so the button lines up with the input, not with the help text. */
.field--button {
    justify-content: flex-start;
}

.admin-page .field__label-spacer {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.2;
}

.admin-page .field--button .dl-btn {
    /* Same height as .login-input (0.75rem padding + 0.9rem text + borders). */
    min-height: 2.625rem;
    padding-top: 0;
    padding-bottom: 0;
    width: auto;
    align-self: flex-start;
}

.admin-page select.login-input {
    min-height: 2.85rem;
    appearance: none;
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    background-size: 1rem;
}

.admin-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
}

.admin-actions .profile-card__msg {
    flex: 1 1 16rem;
}

.admin-page .table-wrapper {
    color: var(--white);
    background: rgba(255, 255, 255, 0.04);
    margin-top: 0.75rem;
    max-width: 100%;
    overflow-x: auto;
}

.admin-page .error-block {
    color: var(--white);
}

.admin-page .data-table td,
.admin-page .data-table th {
    color: var(--white);
}

.admin-page .data-table th {
    color: var(--white-muted);
}

.admin-page .data-table tbody tr:nth-child(even) td {
    background: rgba(255, 255, 255, 0.025);
}

.admin-page .data-table tbody tr:hover td {
    background: rgba(255, 255, 255, 0.07);
}

/* Selection must beat the zebra and hover rules above (same specificity
   tier, later in the file). */
.admin-page .data-table tbody tr.admin-row--selected td,
.admin-page .data-table tbody tr.admin-row--selected:hover td {
    background: rgba(45, 212, 191, 0.16);
}

.admin-page .data-table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.admin-empty-state,
.admin-empty-cell,
.admin-totals {
    color: var(--white-muted);
    font-size: 0.82rem;
    margin: 0;
}

.admin-empty-state {
    padding: 0.85rem;
}

.admin-totals {
    padding-top: 0.25rem;
}

.admin-page .dl-btn:disabled,
.admin-page .cta-button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.admin-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.profile-title {
    color: var(--white);
    font-size: 1.6rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.profile-meta {
    font-size: 0.8rem;
    color: var(--white-muted);
    margin-top: -1rem;
}

.profile-card {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 1.75rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.profile-card__title {
    color: var(--white);
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.profile-card__current {
    color: var(--white-muted);
    font-size: 0.875rem;
    margin: 0;
}

.profile-card__form {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.profile-card__note {
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.78rem;
    margin: 0;
}

.profile-card__msg {
    font-size: 0.82rem;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    margin: 0;
}

.profile-card__msg--ok {
    color: #86efac;
    background: rgba(134, 239, 172, 0.08);
    border: 1px solid rgba(134, 239, 172, 0.2);
}

.profile-card__msg--error {
    color: #fff;
    background: rgba(252, 165, 165, 0.08);
    border: 1px solid rgba(252, 165, 165, 0.2);
}

.referral-card {
    border-color: rgba(45, 212, 191, 0.28);
    background: rgba(20, 184, 166, 0.08);
}

.referral-card--compact {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid rgba(45, 212, 191, 0.28);
    border-radius: 8px;
}

.account-scope-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid rgba(45, 212, 191, 0.28);
    border-radius: 8px;
    background: rgba(20, 184, 166, 0.08);
}

.account-scope-card__title {
    color: var(--white);
    font-weight: 600;
}

.account-scope-card__copy {
    color: var(--white-muted);
    font-size: 0.875rem;
    line-height: 1.45;
    margin: 0;
}

.account-scope-card__btn {
    align-self: flex-start;
    max-width: 100%;
    padding: 0.65rem 1rem;
    border: 1px solid rgba(45, 212, 191, 0.5);
    border-radius: 6px;
    background: rgba(20, 184, 166, 0.12);
    color: #99f6e4;
    font: inherit;
    font-size: 0.875rem;
    cursor: pointer;
}

.account-scope-card__btn:hover {
    background: rgba(20, 184, 166, 0.22);
}

.account-scope-card__btn:focus-visible {
    outline: 2px solid #99f6e4;
    outline-offset: 3px;
}

@media (max-width: 420px) {
    .account-scope-card__btn {
        align-self: stretch;
    }
}

.admin-row--selected td {
    background: rgba(45, 212, 191, 0.14);
}

.accountant-client-code {
    margin: 0.75rem 0 1rem;
}

.referral-card__title {
    color: var(--white);
    margin: 0;
}

.referral-card__copy,
.referral-card__stats {
    color: var(--white-muted);
    font-size: 0.875rem;
    line-height: 1.45;
    margin: 0;
}

.referral-card__link-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
}

/* Message and share buttons sit on their own row under the link so the
   link box and Copy link can span the full width above them. */
.referral-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
}

/* Profile cards: the buttons under the link split the line between them. */
.referral-card__actions--fill .cta-button {
    flex: 1 1 0;
    min-width: 0;
}

.referral-card__link {
    min-width: min(100%, 20rem);
    flex: 1 1 20rem;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.18);
    color: var(--white);
    padding: 0.68rem 0.75rem;
    font-size: 0.875rem;
}

.referral-card__msg {
    color: #99f6e4;
    font-size: 0.82rem;
    margin: 0;
}

.profile-card__check {
    color: var(--white-muted);
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    font-size: 0.78rem;
    line-height: 1.45;
}

.profile-card__check input {
    margin-top: 0.15rem;
    flex: 0 0 auto;
}

.profile-card--danger .profile-card__msg--error {
    background: transparent;
    border-color: transparent;
}

.cta-button--upgrade {
    border-color: #fbbf24;
    color: #fbbf24;
}

.cta-button--upgrade:hover:not(:disabled) {
    background: rgba(251, 191, 36, 0.1);
}

.cta-button--danger {
    background: rgba(220, 53, 69, 0.15);
    border-color: rgba(220, 53, 69, 0.4);
    color: #fff;
}

.cta-button--danger:hover:not(:disabled) {
    background: rgba(220, 53, 69, 0.3);
    border-color: rgba(220, 53, 69, 0.6);
    color: #fff;
}

.cta-button--subscribe {
    background: var(--teal-light);
    border-color: var(--teal-light);
    color: #fff;
}

.cta-button--subscribe:hover:not(:disabled) {
    background: var(--teal-mid);
    border-color: var(--teal-mid);
    color: #fff;
}

.profile-card--danger {
    border-color: rgba(239, 68, 68, 0.3);
}

.legal-container h1 {
    color: var(--white);
    font-size: 1.75rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.legal-container h2 {
    color: var(--white);
    font-size: 1.125rem;
    font-weight: 500;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

.legal-container p,
.legal-container ul {
    color: var(--white-muted);
    font-size: 0.9rem;
    line-height: 1.7;
    margin-bottom: 1rem;
}

.legal-container ul {
    padding-left: 1.5rem;
}

.legal-container a {
    color: var(--white);
}

.legal-container .disclaimer {
    background: rgba(245, 158, 11, 0.08);
    border-left: 3px solid #f59e0b;
    padding: 1.5rem;
    border-radius: 0 8px 8px 0;
    margin: 1.5rem 0;
}

.legal-container .disclaimer p,
.legal-container .disclaimer li {
    color: var(--white);
}

/* ── Login page ──────────────────────────────────────── */
.login-card {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 2.5rem 2rem;
    max-width: 360px;
    margin: 4rem auto 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.login-input {
    width: 100%;
    background: var(--white-faint);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--white);
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    font-family: inherit;
    border-radius: 4px;
}

.login-input::placeholder {
    color: var(--white-muted);
}

.login-note {
    color: var(--white-muted);
    font-size: 0.8rem;
    text-align: center;
    margin: 0;
}

.login-back {
    color: var(--white-muted);
    font-size: 0.8rem;
    text-align: center;
    text-decoration: none;
}

.login-back:hover {
    color: var(--white);
}

/* ── Auth nav state ───────────────────────────────────────── */
.nav__user {
    color: var(--white-muted);
    font-size: 0.9rem;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Login page - Sprint 3 additions ─────────────────────── */
.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

body.login-page .login-card {
    margin: 0;
    max-width: 380px;
}

.login-title {
    color: var(--white);
    font-size: 1.25rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 1.5rem;
}

.login-input:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.4);
}

.login-toggle {
    color: var(--white-muted);
    font-size: 0.8rem;
    text-align: center;
    line-height: 1.8;
    margin-top: 0.75rem;
}

.login-toggle a {
    color: var(--white);
    text-decoration: none;
}

.login-toggle a:hover {
    text-decoration: underline;
}

.login-success {
    color: #4ade80;
    font-size: 0.85rem;
    text-align: center;
    padding: 0.5rem 0;
}

.login-error {
    background: rgba(220, 53, 69, 0.15);
    border: 1px solid rgba(220, 53, 69, 0.4);
    color: #fff;
    padding: 0.65rem 0.85rem;
    border-radius: 6px;
    font-size: 0.8rem;
}

.login-submit {
    width: 100%;
    margin-top: 0.5rem;
    margin-bottom: 0.25rem;
}

.login-forgot {
    display: block;
    text-align: right;
    color: var(--white-muted);
    font-size: 0.8rem;
    text-decoration: none;
    margin-bottom: 0.5rem;
}

.login-forgot:hover {
    color: var(--white);
}

/* ── Post-result signup CTA banner ───────────────────────── */
.signup-banner {
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.signup-banner__check {
    color: #fbbf24;
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
}

.signup-banner__copy {
    color: var(--white-muted);
    font-size: 0.82rem;
    line-height: 1.5;
}

.signup-banner__btn {
    background: #fbbf24; /* hardcoded - --amber not guaranteed in :root */
    color: #000;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 0.6rem 1.25rem;
    border-radius: 7px;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}

.signup-banner__btn:hover {
    opacity: 0.9;
}

/* ── Nav upgrade badge (auth + unpaid) ──────────────────────────────────── */

.nav__upgrade {
    background: #fbbf24;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.03em;
    line-height: 1;
}

.nav__upgrade:hover { background: #f59e0b; }


/* ── Email verify gate (shown on page-load or 403) ──────────────────────── */

.verify-gate {
    background: rgba(245, 158, 11, 0.08);
    border: 2px solid rgba(245, 158, 11, 0.4);
    border-radius: 10px;
    padding: 1.5rem;
    text-align: center;
    margin: 1rem 0;
}

.verify-gate__icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.verify-gate__heading {
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 0.4rem;
    color: var(--white);
}

.verify-gate__copy {
    color: var(--white-muted);
    font-size: 0.9rem;
    margin-bottom: 1.25rem;
}

.verify-gate__btn {
    background: #fbbf24;
    color: #000;
    border: none;
    border-radius: 7px;
    padding: 0.6rem 1.5rem;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
}

.verify-gate__btn:hover { opacity: 0.9; }
.verify-gate__btn:focus-visible {
    outline: 2px solid var(--white);
    outline-offset: 3px;
}
.verify-gate__btn:disabled { opacity: 0.5; cursor: default; }

.gate-status {
    margin-top: 0.75rem;
    font-size: 0.875rem;
}

.gate-status--ok  { color: #6ee7b7; }
.gate-status--err { color: #fca5a5; }

/* ── Subscribe gate (shown on 402) ──────────────────────────────────────── */

.subscribe-gate {
    background: rgba(245, 158, 11, 0.08);
    border: 2px solid rgba(245, 158, 11, 0.4);
    border-radius: 10px;
    padding: 1.5rem;
    text-align: center;
    margin: 1rem 0;
}

.subscribe-gate__icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.subscribe-gate__heading {
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 0.4rem;
    color: var(--white);
}

.subscribe-gate__copy {
    color: var(--white-muted);
    font-size: 0.9rem;
    margin-bottom: 1.25rem;
}

.subscribe-gate__note {
    font-size: 0.8rem;
    opacity: 0.75;
}

.subscribe-gate__btn {
    background: #fbbf24;
    color: #000;
    border: none;
    border-radius: 7px;
    padding: 0.6rem 1.5rem;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
}

.subscribe-gate__btn:hover { opacity: 0.9; }
.subscribe-gate__btn:focus-visible {
    outline: 2px solid var(--white);
    outline-offset: 3px;
}


/* ── FAQ section ─────────────────────────────────────────────────────── */

.faq-section {
    margin: 2rem 0;
}

.faq-section__heading {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 1.25rem;
}

/* Calculator page: the heading belongs to the questions under it, not to
   the form above, so it sits clear of the form and tight to the list. */
.app-page .faq-section {
    margin-top: 3.5rem;
}

.app-page .faq-section__heading {
    margin-bottom: 0.25rem;
}

.faq-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

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

.faq-item summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
    color: var(--white);
    font-weight: 600;
    font-size: 0.95rem;
    user-select: none;
    transition: color 0.2s ease, background 0.2s ease;
}

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

.faq-item summary:hover,
.faq-item summary:focus-visible,
.faq-item[open] summary {
    color: var(--white);
}

.faq-item summary:hover::after,
.faq-item summary:focus-visible::after {
    color: var(--white);
}

.faq-item summary:focus-visible {
    outline: 2px solid #fbbf24;
    outline-offset: 4px;
    border-radius: 4px;
}

.faq-item summary::after {
    content: '+';
    font-size: 1.3rem;
    font-weight: 300;
    flex-shrink: 0;
    color: var(--white-muted);
    line-height: 1;
    width: 1rem;
    text-align: right;
    transition: color 0.2s ease, transform 0.2s ease;
}

.faq-item[open] summary::after {
    content: '-';
    color: var(--white);
    transform: rotate(180deg);
}

.faq-item__answer {
    color: var(--white-muted);
    font-size: 0.9rem;
    line-height: 1.65;
    padding-bottom: 1rem;
    animation: faqAnswerIn 0.18s ease;
}

.faq-item__answer p + p {
    margin-top: 0.75rem;
}

@keyframes faqAnswerIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 700px) {
    .faq-section {
        margin: 1.5rem 0;
    }

    .faq-section__heading {
        font-size: 1.1rem;
    }

    .faq-item summary {
        align-items: flex-start;
        padding: 0.9rem 0;
        font-size: 0.9rem;
        line-height: 1.45;
    }

    .faq-item__answer {
        font-size: 0.86rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .faq-item summary,
    .faq-item summary::after,
    .faq-item__answer {
        animation: none;
        transition: none;
    }
}


/* ── Post-payment toast ──────────────────────────────────────────────────── */

.nav-toast {
    position: fixed;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    background: #fbbf24;
    color: #000;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.6rem 1.25rem;
    border-radius: 7px;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 1000;
    white-space: nowrap;
}

.nav-toast--visible { opacity: 1; }


/* ── T5008 guided tour ───────────────────────────────────────────────────── */

.t5008-tab {
    display: flex;
    align-items: center;
    gap: 7px;
    position: fixed;
    bottom: 0;
    left: min(410px, 30vw);
    transform: translateX(-50%);
    z-index: 650;
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.88);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    padding: 10px 22px;
    color: #fff;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    letter-spacing: 0.05em;
    transition: background 0.2s ease;
}

.t5008-tab:hover { background: rgba(255, 255, 255, 0.08); }

/* Hide immediately once the page leaves the top. Do not transition visibility:
   that keeps the tab clickable and focusable until the transition ends. */
.t5008-tab--hidden { opacity: 0; visibility: hidden; }

.t5008-tab__arrow { font-size: 0.55rem; opacity: 0.6; }

/* Phones: an inline button under the trust list instead of a fixed tab,
   which would sit on the footer links. */
.t5008-inline {
    display: none;
    margin-top: 1.5rem;
    padding: 0.7rem 1.1rem;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 8px;
    color: #fff;
    font: inherit;
    font-size: 0.95rem;
    letter-spacing: 0.03em;
    cursor: pointer;
}

@media (max-width: 900px) {
    .t5008-tab { display: none; }
    .t5008-inline { display: inline-block; }
}

html.t5008-lock { overflow: hidden; }

.t5008-tour {
    margin: auto; /* the global reset zeroes the margin <dialog> centers with */
    width: min(1180px, calc(100vw - 48px));
    height: min(720px, calc(100dvh - 48px));
    max-width: none;
    max-height: none;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    background: #0b1f26;
    color: var(--white);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
    overflow: hidden;
}

.t5008-tour::backdrop {
    background: rgba(3, 12, 16, 0.62);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.t5008-tour[open] { animation: t5008-in 0.28s ease-out; }

@keyframes t5008-in {
    from { opacity: 0; transform: translateY(12px) scale(0.985); }
    to   { opacity: 1; transform: none; }
}

.t5008-tour__inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr);
    height: 100%;
}

.t5008-tour__close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 5;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}

.t5008-tour__close:hover { background: rgba(255, 255, 255, 0.16); }

/* The viewer is a fixed frame; the stage (the slip) moves inside it. */
.t5008-viewer {
    position: relative;
    overflow: hidden;
    background: #d9dcd8;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    cursor: grab;
}

.t5008-viewer.is-grabbing { cursor: grabbing; }

.t5008-viewer__stage {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1);
}

.t5008-viewer__img {
    display: block;
    width: 100%;
    height: 100%;
    background: #fff;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.18);
    -webkit-user-drag: none;
}

.t5008-viewer__hint {
    position: absolute;
    left: 12px;
    top: 12px;
    max-width: calc(100% - 80px);
    margin: 0;
    padding: 6px 10px;
    border-radius: 6px;
    background: rgba(8, 22, 28, 0.82);
    color: #fff;
    font-size: 0.8rem;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.t5008-viewer__hint.is-on { opacity: 1; }

.t5008-zoom {
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: flex;
    gap: 6px;
    cursor: default;
}

.t5008-zoom__btn {
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    background: rgba(8, 22, 28, 0.82);
    color: #fff;
    font: inherit;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
}

.t5008-zoom__btn:hover { background: rgba(13, 48, 60, 0.95); }
.t5008-zoom__reset { font-size: 0.85rem; }

.t5008-viewer__spot {
    position: absolute;
    border-radius: 6px;
    outline: 2px solid #fbbf24;
    box-shadow: 0 0 0 200vmax rgba(8, 22, 28, 0.5);
    pointer-events: none;
    opacity: 0;
    transition: left 0.7s cubic-bezier(0.65, 0, 0.35, 1), top 0.7s cubic-bezier(0.65, 0, 0.35, 1),
                width 0.7s cubic-bezier(0.65, 0, 0.35, 1), height 0.7s cubic-bezier(0.65, 0, 0.35, 1),
                opacity 0.35s ease;
}

.t5008-viewer__spot.is-on { opacity: 1; }

.t5008-viewer.is-instant .t5008-viewer__stage,
.t5008-viewer.is-instant .t5008-viewer__spot { transition: none; }

.t5008-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 0;
    padding: 2.25rem 1.75rem 1.5rem;
    overflow-y: auto;
}

.t5008-panel__count {
    margin: 0;
    color: #fbbf24;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.t5008-step { animation: t5008-step-in 0.35s ease-out; }

@keyframes t5008-step-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

.t5008-step__title {
    margin: 0 0 0.6rem;
    font-size: 1.45rem;
    font-weight: 600;
    line-height: 1.25;
}

.t5008-step__text {
    margin: 0 0 0.6rem;
    color: rgba(255, 255, 255, 0.82);
    font-size: 1rem;
    line-height: 1.6;
}

.t5008-step__quote {
    margin: 0 0 0.8rem;
    padding: 0.2rem 0 0.2rem 0.9rem;
    border-left: 3px solid #fbbf24;
    color: #fff;
    font-size: 1.02rem;
    line-height: 1.55;
    font-style: italic;
}

.t5008-panel__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: auto;
    padding-top: 0.5rem;
}

.t5008-nav-btn {
    min-width: 88px;
    padding: 0.6rem 1.1rem;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 8px;
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: 0.95rem;
    cursor: pointer;
}

.t5008-nav-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.08); }
.t5008-nav-btn:disabled { opacity: 0.35; cursor: default; }

.t5008-nav-btn--next {
    border-color: #fbbf24;
    background: #fbbf24;
    color: #1a1204;
    font-weight: 600;
}

.t5008-nav-btn--next:hover:not(:disabled) { background: #fcd34d; }

.t5008-dots { display: flex; flex-shrink: 0; gap: 4px; }

.t5008-dot {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    position: relative;
}

.t5008-dot::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transition: background 0.2s ease, transform 0.2s ease;
}

.t5008-dot.is-active::after { background: #fbbf24; transform: scale(1.25); }

.t5008-panel__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.t5008-panel__cta {
    display: inline-block;
    padding: 0.65rem 1.4rem;
    border: 2px solid rgba(255, 255, 255, 0.88);
    color: #fff;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.t5008-panel__cta:hover { background: rgba(255, 255, 255, 0.08); }

.t5008-tour.is-last .t5008-panel__cta {
    border-color: #fbbf24;
    background: #fbbf24;
    color: #1a1204;
    font-weight: 600;
}

.t5008-panel__full {
    align-self: flex-start;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.85rem;
}

.t5008-panel__full:hover { color: rgba(255, 255, 255, 0.85); }

/* Small laptops and tablets: viewer on top, text below. */
@media (max-width: 1100px) {
    .t5008-tour { height: min(900px, calc(100dvh - 32px)); width: min(760px, calc(100vw - 32px)); }
    .t5008-tour__inner { grid-template-columns: 1fr; grid-template-rows: minmax(260px, 1.2fr) auto; }
    .t5008-panel { padding: 1.25rem 1.5rem 1.25rem; }
}

/* Phones: full screen, controls clear of the home indicator. */
@media (max-width: 700px) {
    .t5008-tour {
        width: 100vw;
        height: 100dvh;
        border: none;
        border-radius: 0;
    }
    .t5008-tour__inner { grid-template-rows: minmax(220px, 44dvh) 1fr; }
    .t5008-panel { gap: 0.75rem; padding: 1rem 1.1rem calc(1rem + env(safe-area-inset-bottom)); }
    .t5008-step__title { font-size: 1.2rem; }
    .t5008-step__text, .t5008-step__quote { font-size: 0.95rem; }
    .t5008-tour__close { background: rgba(8, 22, 28, 0.7); color: #fff; }
    .t5008-panel__cta { flex: 1 1 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
    .t5008-tour[open], .t5008-step { animation: none; }
    .t5008-viewer__stage, .t5008-viewer__spot { transition: opacity 0.2s ease; }
}

/* ── Calculation History ─────────────────────────────────────────────────── */

.history-table .history-row {
    cursor: pointer;
}

.history-table .history-row:hover td {
    background: var(--white-faint);
}

.num.pos {
    color: var(--green);
}

.history-empty__link {
    color: var(--white);
    text-underline-offset: 3px;
}

.history-empty__link:hover {
    color: var(--white-muted);
}

/* Source file(s) shown on the calculation detail view (history-detail.html).
   Chips wrap onto new lines, so long multi-file names never overflow. */
.detail-files {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 0.6rem;
    margin: -0.25rem 0 1.25rem;
}

.detail-files__label {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.detail-files__item {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    padding: 0.2rem 0.55rem;
    font-size: 0.85rem;
    color: var(--white);
    word-break: break-all;
}

/* ===== Auth overlay ===== */
.auth-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 1100;  /* above existing max z-index of 1000 in style.css */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
[aria-hidden="true"].auth-overlay { display: none; }

/* ===== Auth modal card ===== */
.auth-modal {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  padding: 2.5rem 2rem;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 24px 64px rgba(0,0,0,0.6), 0 4px 16px rgba(0,0,0,0.4);
  animation: modalIn 0.2s ease;
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}
.modal-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
}
.modal-logo img { height: 64px; }
.modal-subtitle {
  color: var(--white);
  font-size: 1.1rem;
  font-weight: 700;
  text-align: center;
  margin: 0 0 1.25rem;
}
.modal-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.15);
}
.modal-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: rgba(255,255,255,0.5);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  margin-bottom: -1px;
  padding: 0.5rem 1rem;
  text-transform: uppercase;
  transition: color 0.15s, border-color 0.15s;
}
.modal-tab:hover { color: rgba(255,255,255,0.85); }
.modal-tab--active {
  border-bottom-color: var(--white);
  color: var(--white);
}
.modal-input {
  background: var(--white-faint);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 4px;
  color: var(--white);
  display: block;
  font-size: 1rem;
  margin-bottom: 0.75rem;
  padding: 0.75rem 1rem;
  width: 100%;
  box-sizing: border-box;
}
.modal-input::placeholder { color: rgba(255,255,255,0.45); }
.modal-input:focus {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.5);
  outline: none;
}

/* ── Password show/hide toggle ─────────────────────────────── */
.password-wrapper {
    position: relative;
}
.password-wrapper .modal-input,
.password-wrapper .login-input {
    padding-right: 48px;
}
.password-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.5);
    padding: 8px;
    min-height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.password-toggle:hover {
    color: rgba(255, 255, 255, 0.8);
}

.modal-submit {
  background: transparent;
  border: 2px solid var(--white);
  border-radius: 4px;
  color: var(--white);
  cursor: pointer;
  display: block;
  font-size: 1rem;
  font-weight: 700;
  margin-top: 0.5rem;
  padding: 0.75rem 1.5rem;
  transition: background 0.15s, color 0.15s;
  width: 100%;
}
.modal-submit:hover:not(:disabled) {
  background: var(--white);
  color: var(--teal-dark);
}
.modal-submit:disabled { opacity: 0.6; cursor: not-allowed; }

/* Confirmation dialog (confirm-modal.js): the sign-in modal's overlay and
   card, with the profile page's buttons (a white outline to keep, the
   translucent red .cta-button--danger to go ahead). */
.confirm-modal {
  /* The sign-in card's tint over a solid base: a busy page must not show
     through a question the user has to read. */
  background: linear-gradient(rgba(255,255,255,0.06), rgba(255,255,255,0.06)), var(--teal-dark);
  max-width: 440px;
  padding: 2rem;
}
.confirm-modal .modal-subtitle { margin-bottom: 0.75rem; }
.confirm-modal__message {
  color: var(--white-muted);
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0 0 1.5rem;
  text-align: center;
  overflow-wrap: anywhere;
}
.confirm-modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.confirm-modal__actions .cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 9rem;
  padding: 0.5rem 1rem;
}
.confirm-modal__actions .cta-button:focus-visible {
  outline: 2px solid #fbbf24;
  outline-offset: 2px;
}
.modal-forgot {
  color: rgba(255,255,255,0.55);
  display: block;
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
  text-align: right;
  text-decoration: none;
}
.modal-forgot:hover { color: var(--white); }
.modal-divider {
  color: rgba(255,255,255,0.35);
  font-size: 0.8rem;
  margin: 1rem 0;
  text-align: center;
}
.modal-toggle {
  color: rgba(255,255,255,0.55);
  font-size: 0.875rem;
  text-align: center;
}
.modal-toggle a { color: var(--white); text-decoration: underline; }
#authModeForgot .modal-toggle { margin-top: 2rem; }
.modal-error {
  background: rgba(220,53,69,0.15);
  border: 1px solid rgba(220,53,69,0.4);
  border-radius: 4px;
  color: var(--white);
  font-size: 0.875rem;
  margin-bottom: 1rem;
  padding: 0.6rem 0.875rem;
}
.modal-success {
  color: #4ade80;
  font-size: 0.875rem;
  margin-bottom: 1rem;
  text-align: center;
}
.modal-reset-desc {
  color: rgba(255,255,255,0.7);
  font-size: 0.9rem;
  margin-bottom: 1rem;
}
@media (max-width: 480px) {
  .auth-modal {
    padding: 1.5rem 1rem;
    max-width: calc(100% - 2rem);
    border-radius: 8px;
  }
  .modal-logo img { height: 48px; }
  .modal-subtitle  { font-size: 1rem; }
}

/* ── Changelog page ────────────────────────────────────── */
.changelog-entry {
    border-bottom: 1px solid var(--white-faint);
    padding: 1.5rem 0;
}

.changelog-entry:last-child {
    border-bottom: none;
}

.changelog-entry__date {
    display: block;
    color: var(--white-muted);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.4rem;
}

.changelog-entry__title {
    color: var(--white);
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
}

.changelog-entry__body {
    color: var(--white-muted);
    font-size: 0.9rem;
    line-height: 1.65;
}

.changelog-entry__body p + p {
    margin-top: 0.5rem;
}

.changelog-tag {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.15rem 0.5rem;
    border-radius: 3px;
    margin-right: 0.4rem;
    margin-bottom: 0.6rem;
    vertical-align: middle;
}

.changelog-tag--engine  { background: rgba(42,122,138,0.3);  color: #7dd3fc; }
.changelog-tag--feature { background: rgba(14,165,233,0.2);  color: #7dd3fc; }
.changelog-tag--parser  { background: rgba(52,168,83,0.2);   color: #86efac; }
.changelog-tag--report  { background: rgba(139,92,246,0.2);  color: #c4b5fd; }
.changelog-tag--fix     { background: rgba(245,158,11,0.2);  color: #fcd34d; }
.changelog-tag--security{ background: rgba(239,68,68,0.15);  color: #fca5a5; }

/* ── Comparison table (compare.html) ──────────────────── */
.compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    margin: 1.5rem 0 2rem;
}

.compare-table th {
    color: var(--white);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 2px solid var(--white-faint);
    background: rgba(0,0,0,0.2);
    white-space: nowrap;
}

.compare-table th:first-child {
    width: 32%;
}

/* Five-column Schedule 3 rows: let the headers wrap and drop the first-column
   floor so the table stays inside the text column instead of overflowing it. */
.compare-table--fit th {
    white-space: normal;
}

.compare-table--fit th:first-child {
    width: auto;
}

.compare-table td {
    color: var(--white-muted);
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--white-faint);
    vertical-align: top;
    line-height: 1.45;
}

.compare-table td:first-child {
    color: var(--white);
    font-weight: 500;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
}

.compare-table tbody tr:hover td {
    background: var(--white-fainter);
}

.compare-table .col-us {
    color: var(--white);
}

.compare-yes     { color: #86efac; font-weight: 600; }
.compare-no      { color: rgba(255,255,255,0.35); }
.compare-partial { color: #fcd34d; }

.compare-section-head {
    color: var(--white);
    font-size: 1rem;
    font-weight: 600;
    margin: 2rem 0 0.75rem;
}

.compare-narrative {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1rem;
}

.compare-narrative__name {
    color: var(--white);
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.4rem;
}

.compare-narrative__body {
    color: var(--white-muted);
    font-size: 0.875rem;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .compare-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .compare-table {
        min-width: 600px;
    }
}

/* ── Methodology page ──────────────────────────────────── */
.method-section {
    margin-bottom: 2.5rem;
}

.method-section__heading {
    color: var(--white);
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--white-faint);
}

.method-section p {
    color: var(--white-muted);
    font-size: 0.9rem;
    line-height: 1.7;
    margin-bottom: 0.75rem;
}

.method-section ul,
.method-section ol {
    color: var(--white-muted);
    font-size: 0.875rem;
    line-height: 1.8;
    padding-left: 1.4rem;
    margin-bottom: 0.75rem;
}

.method-rule {
    background: rgba(42,122,138,0.12);
    border-left: 3px solid var(--teal-light);
    border-radius: 0 6px 6px 0;
    padding: 0.85rem 1.1rem;
    margin: 0.75rem 0;
    font-size: 0.875rem;
    color: var(--white-muted);
    line-height: 1.6;
}

.method-rule strong {
    color: var(--white);
}

.method-cra-ref {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.4);
    font-style: italic;
}

/* ── About page ─────────────────────────────────────────── */
.about-lead {
    color: var(--white);
    font-size: 1.1rem;
    line-height: 1.65;
    margin-bottom: 1.5rem;
    font-weight: 300;
}

.about-section {
    margin-bottom: 2rem;
}

.about-section h2 {
    color: var(--white);
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.75rem;
}

.about-section p {
    color: var(--white-muted);
    font-size: 0.9rem;
    line-height: 1.7;
    margin-bottom: 0.6rem;
}

.about-section a {
    color: rgba(125,211,252,0.9);
    text-decoration: none;
}

.about-section a:hover {
    text-decoration: underline;
}

.about-privacy-strip {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin: 1rem 0;
}

/* The guides strip runs three across inside a widened section. It is a
   six-track grid with every card spanning two tracks so that a short last
   row (17 cards = five rows of three plus two) can be centred under the
   rows above by shifting its first card one track right. Other strips
   using these cards stay two-across. Keep these rules ABOVE the 520px
   collapse so one column still wins on phones. */
.about-privacy-strip--guides {
    grid-template-columns: repeat(6, 1fr);
}

.about-privacy-strip--guides > .about-privacy-item {
    grid-column: span 2;
}

.about-privacy-strip--guides > .about-privacy-item:nth-last-child(2):nth-child(3n+1) {
    grid-column: 2 / span 2;
}

.about-privacy-strip--guides > .about-privacy-item:last-child:nth-child(3n+1) {
    grid-column: 3 / span 2;
}

@media (max-width: 900px) {
    .about-privacy-strip--guides {
        grid-template-columns: repeat(4, 1fr);
    }
    .about-privacy-strip--guides > .about-privacy-item:nth-last-child(2):nth-child(3n+1),
    .about-privacy-strip--guides > .about-privacy-item:last-child:nth-child(3n+1) {
        grid-column: span 2;
    }
    .about-privacy-strip--guides > .about-privacy-item:last-child:nth-child(2n+1) {
        grid-column: 2 / span 2;
    }
}

@media (max-width: 520px) {
    .about-privacy-strip--guides {
        grid-template-columns: 1fr;
    }
    .about-privacy-strip--guides > .about-privacy-item,
    .about-privacy-strip--guides > .about-privacy-item:nth-last-child(2):nth-child(3n+1),
    .about-privacy-strip--guides > .about-privacy-item:last-child:nth-child(3n+1),
    .about-privacy-strip--guides > .about-privacy-item:last-child:nth-child(2n+1) {
        grid-column: auto;
    }
}

.about-privacy-item {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--white-faint);
    border-radius: 6px;
    padding: 0.85rem 1rem;
}

.about-privacy-item__head {
    color: var(--white);
    font-size: 0.82rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.about-privacy-item__body {
    color: var(--white-muted);
    font-size: 0.8rem;
    line-height: 1.5;
}

@media (max-width: 520px) {
    .about-privacy-strip {
        grid-template-columns: 1fr;
    }
}

/* ── Footer: wrap on small screens ─────────────────────── */
@media (max-width: 768px) {
    .footer {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.25rem 0;
        padding: 1.5rem 1rem;
        line-height: 1.8;
    }
}

/* ── Pricing page ───────────────────────────────────────── */
.pricing-hero {
    text-align: center;
    padding: 2rem 0 2.5rem;
    border-bottom: 1px solid var(--white-faint);
    margin-bottom: 2rem;
}

.pricing-checkout-error {
    margin: 0 0 1.5rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--red);
    border-radius: 4px;
    color: var(--white);
    text-align: center;
}

.pricing-hero__amount {
    color: var(--white);
    font-size: 3rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.pricing-hero__currency {
    font-size: 1.4rem;
    font-weight: 400;
    vertical-align: super;
    margin-right: 0.15em;
    color: var(--white-muted);
}

.pricing-hero__period {
    color: var(--white-muted);
    font-size: 0.9rem;
    margin-top: 0.4rem;
}

.pricing-hero__cta {
    margin-top: 1.5rem;
}

.pricing-section {
    margin-bottom: 2rem;
}

.pricing-section h2 {
    color: var(--white);
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 1rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--white-faint);
}

.pricing-feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pricing-feature-list li {
    color: var(--white-muted);
    font-size: 0.9rem;
    line-height: 1.6;
    padding: 0.45rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
}

.pricing-feature-list li:last-child {
    border-bottom: none;
}

.pricing-feature-list li::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--teal-light);
    flex-shrink: 0;
    margin-top: 0.35em;
}

.pricing-callout {
    background: rgba(42,122,138,0.12);
    border-left: 3px solid var(--teal-light);
    border-radius: 0 6px 6px 0;
    padding: 0.9rem 1.1rem;
    margin: 1rem 0 1.5rem;
    font-size: 0.875rem;
    color: var(--white-muted);
    line-height: 1.6;
}

.pricing-callout strong {
    color: var(--white);
}

.pricing-callout--sample {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.pricing-faq-item {
    border-bottom: 1px solid var(--white-faint);
}

.pricing-faq-item summary {
    color: var(--white);
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0.85rem 0;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

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

.pricing-faq-item summary::after {
    content: '+';
    color: var(--white-muted);
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-left: 1rem;
}

.pricing-faq-item[open] summary::after {
    content: '-';
}

.pricing-faq-item__answer {
    color: var(--white-muted);
    font-size: 0.875rem;
    line-height: 1.7;
    padding-bottom: 0.85rem;
}

.pricing-faq-item__answer p + p {
    margin-top: 0.5rem;
}

/* ── How It Works section (homepage) ───────────────────── */
.how-it-works {
    background: var(--teal-dark);
    padding: 4rem 1.5rem;
}

.how-it-works__inner {
    max-width: 880px;
    margin: 0 auto;
}

.how-it-works__heading {
    color: var(--white);
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 0.5rem;
}

.how-it-works__sub {
    color: var(--white-muted);
    font-size: 0.9rem;
    text-align: center;
    margin-bottom: 2.5rem;
}

.hiw-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.hiw-step {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--white-faint);
    border-radius: 10px;
    padding: 1.5rem 1.25rem;
}

.hiw-step__num {
    color: var(--teal-light);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}

.hiw-step__title {
    color: var(--white);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.hiw-step__body {
    color: var(--white-muted);
    font-size: 0.85rem;
    line-height: 1.65;
}

.how-it-works__cta {
    text-align: center;
}

.how-it-works__link {
    color: rgba(125,211,252,0.9);
    font-size: 0.9rem;
    text-decoration: none;
}

.how-it-works__link:hover {
    text-decoration: underline;
}

.how-it-works__link--sample {
    margin-top: 0.5rem;
}

@media (max-width: 640px) {
    .hiw-steps {
        grid-template-columns: 1fr;
    }
    .how-it-works {
        padding: 2.5rem 1rem;
    }
}

/* ══════════ BROKER COMING SOON ══════════════════════════════════════════ */
.broker-coming {
    background: rgba(255,255,255,0.04);
    border-top: 1px solid rgba(255,255,255,0.07);
    padding: 3rem 1.5rem;
    text-align: center;
}

.broker-coming__inner {
    max-width: 640px;
    margin: 0 auto;
}

.broker-coming__label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--white-muted);
    margin-bottom: 0.75rem;
}

.broker-coming__label--spaced {
    margin-top: 1.25rem;
}

.broker-coming__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.broker-chip {
    display: inline-block;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 500;
}

.broker-chip--live {
    background: rgba(42,122,138,0.25);
    border: 1px solid rgba(42,122,138,0.5);
    color: var(--white);
}

.broker-chip--soon {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    color: var(--white-muted);
}

.broker-coming__note {
    margin-top: 1.5rem;
    font-size: 0.85rem;
    color: var(--white-muted);
}

.broker-coming__link {
    color: var(--white);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ── Homepage proof blocks ─────────────────────────────── */
.proof-blocks {
    padding: 3.5rem 1.5rem;
    border-top: 1px solid var(--white-faint);
}

.proof-blocks__inner {
    max-width: 1000px;
    margin: 0 auto;
}

.proof-blocks__heading {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--white);
    text-align: center;
    margin-bottom: 2rem;
}

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

.proof-block {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--white-faint);
    border-radius: 8px;
    padding: 1.5rem 1.25rem;
    display: flex;
    flex-direction: column;
}

.proof-block__heading {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 1rem;
    letter-spacing: 0.01em;
}

.proof-block__list {
    list-style: disc;
    padding-left: 1.1rem;
    color: var(--white-muted);
    font-size: 0.82rem;
    line-height: 1.7;
    flex: 1;
    margin-bottom: 1.25rem;
}

.proof-block__list li {
    margin-bottom: 0.35rem;
}

.proof-block__link {
    font-size: 0.8rem;
    color: rgba(125,211,252,0.85);
    text-decoration: none;
}

.proof-block__link:hover {
    text-decoration: underline;
}

/* ── Homepage privacy section ──────────────────────────── */
.homepage-privacy {
    padding: 3.5rem 1.5rem;
    background: rgba(0,0,0,0.15);
    border-top: 1px solid var(--white-faint);
}

.homepage-privacy__inner {
    max-width: 740px;
    margin: 0 auto;
}

.homepage-privacy__inner--wide {
    max-width: 960px;
}

.homepage-privacy__heading {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 1.25rem;
    text-align: center;
}

.homepage-privacy__link-line {
    text-align: center;
    margin-top: 1.25rem;
    font-size: 0.85rem;
}

@media (max-width: 640px) {
    .broker-coming {
        padding: 2rem 1rem;
    }
}

@media (max-width: 768px) {
    .proof-blocks__grid {
        grid-template-columns: 1fr;
    }
}

/* ── 404 page ───────────────────────────────────────────── */
.not-found-page {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    overflow-x: hidden;
}

.not-found-page .nav,
.not-found-page .footer {
    flex: 0 0 auto;
}

.not-found-main {
    align-items: center;
    display: flex;
    flex: 1 0 auto;
    justify-content: center;
    padding: clamp(3rem, 12vh, 6rem) 1.5rem;
}

.not-found {
    margin: 0 auto;
    max-width: 640px;
    text-align: center;
}

.not-found__title {
    color: var(--white);
    font-size: 3.25rem;
    font-weight: 700;
    letter-spacing: 0;
    margin: 0 0 1rem;
}

.not-found__intro {
    color: var(--white-muted);
    font-size: 1.05rem;
    line-height: 1.7;
    margin: 0 auto 2rem;
    max-width: 34rem;
}

.not-found__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    justify-content: center;
}

.not-found__action,
.not-found__action:visited {
    align-items: center;
    border: 1px solid var(--white-faint);
    border-radius: 6px;
    color: var(--white);
    display: inline-flex;
    font-size: 0.95rem;
    font-weight: 650;
    justify-content: center;
    min-height: 3rem;
    min-width: 10rem;
    padding: 0.75rem 1.15rem;
    text-decoration: none;
}

.not-found__action:hover {
    border-color: var(--white-muted);
    background: var(--white-fainter);
}

.not-found__action--primary,
.not-found__action--primary:visited {
    background: var(--teal-light);
    border-color: var(--teal-light);
}

.not-found__action--primary:hover {
    background: var(--teal-mid);
    border-color: var(--teal-mid);
}

@media (max-width: 560px) {
    .not-found-main {
        align-items: center;
        padding: 2.5rem 1.25rem;
    }

    .not-found__title {
        font-size: 2.2rem;
    }

    .not-found__actions {
        flex-direction: column;
    }

    .not-found__action {
        width: 100%;
    }
}

/* ── Article step lists (ibkr-canada-tax, similar pages) ─── */
.guide-steps-list {
    list-style: decimal;
    padding-left: 1.5rem;
    color: var(--white-muted);
    line-height: 1.8;
    font-size: 0.9rem;
}

.guide-steps-list li {
    margin-bottom: 0.6rem;
}

.guide-steps-list li strong {
    color: var(--white);
}

/* ══════════════════════════════════════════════════════════
   MOBILE RESPONSIVE - @media (max-width: 768px)
   All rules appended 2026-05-25. One block for the whole site.
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

/* ── Global: overflow prevention ─────────────────────────── */
/* TECH DEBT: remove once per-element fixes are sufficient.
   This masks legitimate overflow in devtools - don't leave it
   as the permanent solution.

   `html` MUST STAY OUT of this selector. Giving the root element a
   non-visible overflow moves viewport scroll propagation from body to
   html, which demotes body to an ordinary scroll container. On every
   content page body's content exactly fills body, so body then has
   nothing to scroll, and the global `overscroll-behavior: none` blocks
   the scroll from chaining up to the viewport. The result is a page that
   cannot be scrolled by touch or wheel at all, while window.scrollBy
   still works - so it is invisible to any test that does not drive real
   input. That shipped on 2026-05-25 and went unnoticed for three months
   across 29 pages. Masking overflow on body alone is sufficient and
   costs nothing. */
body {
    overflow-x: hidden;
}

/* ── Global: tap targets and iOS zoom prevention ──────────── */
/* Bare element selector (0,0,1) loses to class selectors like
   .year-select (0.875rem) and .login-input (0.9rem) which are
   specificity (0,1,0). Enumerate those classes explicitly so the
   media-query cascade wins without needing !important. */
input,
textarea,
select,
.login-input,
.year-select,
.reg-accounts-input,
.fx-opening-ccy,
.fx-opening-units,
.fx-opening-cost {
    font-size: 1rem;
    min-height: 44px;
}

button,
.modal-submit,
.login-submit {
    min-height: 44px;
}
.cta-button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* .signup-banner__btn is an <a> element, not a button -
   not covered by the button rule above. */
.signup-banner__btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

/* ── Global: images ───────────────────────────────────────── */
img {
    max-width: 100%;
    height: auto;
}

/* Homepage hero and its nav (.hnav): see the 900px block near the top of
   this file; the hero switches to this phone layout at 900px. */

/* picture wraps the img on mobile via <source media="(max-width:768px)">.
   Make it a block that fills nav-logo-link so the img's max-width:100%
   resolves correctly against the available flex space. 55vw cap prevents
   the logo from consuming too much width on very wide mobile screens. */
.nav-logo-link picture {
    display: block;
    width: 100%;
    max-width: 55vw;
}

/* Cropped logo-mobile.png has whitespace removed so the visible content
   fills the full max-height - effectively larger at the same pixel size. */
.site-logo {
    height: auto;
    max-height: 54px;
    max-width: 100%;
    width: auto;
}

/* ── Inner page nav (app, guide, faq, history, profile, etc.) ── */
body.app-page .nav,
.nav {
    padding: 0.85rem;
}

.nav .site-logo {
    height: auto;
    max-height: 54px;
    max-width: 100%;
    width: auto;
}

/* Inner page nav structure: logo left-aligned at 0.85rem from edge;
   signin + 8px gap + hamburger flush to right at 0.85rem from edge. */
.nav__brand {
    display: none;
}

.nav__right {
    width: 100%;
    justify-content: flex-start;
    gap: 0;
}

/* Logo link: flex:1 fills all space to the left of signin+hamburger;
   justify-content:flex-start keeps the image against the left edge. */
.hnav__right .nav-logo-link,
.nav__right .nav-logo-link {
    flex: 1;
    justify-content: flex-start;
}

/* Sign-in/out: match hamburger height (52px); 8px right margin creates
   Option-A gap between the button and the hamburger. */
.signin-btn {
    padding: 0 1rem;
    height: 52px;
    margin-right: 8px;
}

/* ── app.html - calculator container ─────────────────────── */
.app-main {
    padding: 1.5rem 1rem 3rem;
}

/* Modal inputs and submit - global input rule sets font-size and
   min-height on <input> but .modal-input and .modal-submit are
   styled independently; reinforce here. */
.modal-input {
    min-height: 44px;
}

.modal-submit {
    min-height: 44px;
}

/* ── Guide pages ──────────────────────────────────────────── */
.guide-container,
.guide-container--wide {
    padding: 1.25rem 1rem 2.5rem;
}

/* guide-step--full blocks: tighten inner padding */
.guide-step--full {
    padding: 1.25rem 1rem;
}

/* Overflow-prone text in guide pages. guide-ibkr.html uses
   .guide-step__desc for prose and .guide-settings__row dt/dd for
   setting labels. No <code>/<pre>/<kbd> elements exist in guide HTML.
   word-break:break-word (not break-all) preserves word readability. */
.guide-step__desc,
.guide-link,
.guide-settings__row dt,
.guide-settings__row dd {
    word-break: break-word;
    overflow-wrap: break-word;
}

/* ── faq.html ─────────────────────────────────────────────── */
/* Accordion tap targets - existing rule has no min-height. */
.faq-item summary {
    min-height: 44px;
    padding: 0.85rem 0;
}
/* ── history.html - table → card layout ──────────────────── */

/* Hide column headers - labels injected via ::before content */
.history-table thead {
    display: none;
}

/* Collapse table structure to block layout */
.history-table,
.history-table tbody,
.history-table tr {
    display: block;
    width: 100%;
}

/* Each row becomes a card - no border, background gives enough definition */
.history-table tr {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 0.85rem 1rem;
    margin-bottom: 0.65rem;
    cursor: pointer;
}

/* Remove outer wrapper border on mobile - cards float on the gradient */
.history-page .table-wrapper {
    border: none;
}

/* Override the existing .history-table .history-row:hover td rule
   (style.css ~line 2032) which is more specific than tr:hover.
   Set a subtle background on cells instead. */
.history-table .history-row:hover td {
    background: rgba(255, 255, 255, 0.04);
}

/* Each cell: label on left, value on right */
.history-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.2rem 0;
    font-size: 0.85rem;
    border: none;
    background: none;
}

/* Column labels injected via ::before - shared style */
.history-table td::before {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    flex-shrink: 0;
    margin-right: 0.75rem;
}

/* nth-child labels match history.js renderTable() column order exactly */
.history-table td:nth-child(1)::before { content: "Date"; }
.history-table td:nth-child(2)::before { content: "Tax Year"; }
.history-table td:nth-child(3)::before { content: "Broker"; }
.history-table td:nth-child(4)::before { content: "Dispositions"; }
.history-table td:nth-child(5)::before { content: "Net Gain / Loss"; }

/* ── profile.html / history.html ─────────────────────────── */
.profile-page,
.history-page {
    padding: 1.5rem 1rem 3rem;
}

.admin-header,
.admin-actions {
    align-items: stretch;
    flex-direction: column;
}

.admin-card {
    padding: 1.25rem 0.875rem;
}

.admin-card--sub {
    padding: 0.85rem;
}

.admin-page .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-page .admin-form {
    grid-template-columns: 1fr;
}

/* ── login.html, reset-password.html ─────────────────────── */
.login-card {
    margin: 2rem 1rem 0;
    max-width: 100%;
}

/* body.login-page centers the card with flexbox - reset margin to 0
   and constrain width with side padding instead. */
body.login-page .login-card {
    margin: 0 1rem;
    max-width: calc(100% - 2rem);
}

/* ── terms.html, privacy.html ─────────────────────────────── */
/* Uses .legal-container, not .guide-container - needs its own rule. */
.legal-container {
    padding: 1.25rem 1rem 2.5rem;
}

} /* end @media (max-width: 768px) - DO NOT ADD RULES BELOW THIS LINE YET */

/* ══════════════════════════════════════════════════════════
   FINE-TUNE - @media (max-width: 480px)
   Small phones: iPhone SE (375px), older iPhones (320px)
   ══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

/* Hero headline: let 9vw clamp handle sizing down to 320px */

/* Profile cards: tighter inner padding */
.profile-card {
    padding: 1.25rem 0.875rem;
}

} /* end @media (max-width: 480px) */

/* ===== Subscription upsell modal ===== */
.sub-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
[hidden].sub-modal-overlay { display: none; }
.sub-modal {
  position: relative;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  padding: 2.5rem 2rem;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 24px 64px rgba(0,0,0,0.6), 0 4px 16px rgba(0,0,0,0.4);
  animation: modalIn 0.2s ease;
}
.sub-modal__close {
  position: absolute;
  top: 0.75rem;
  right: 1rem;
  background: none;
  border: none;
  color: var(--white-muted);
  font-size: 1.5rem;
  cursor: pointer;
  line-height: 1;
  padding: 0;
}
.sub-modal__close:hover { color: var(--white); }
.sub-modal__title {
  color: var(--white);
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 0.75rem;
}
.sub-modal__body {
  color: var(--white-muted);
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0 0 1.5rem;
}
.sub-modal__note {
  color: #99f6e4;
  font-size: 0.875rem;
  line-height: 1.4;
  margin: -0.75rem 0 1.25rem;
}
.sub-modal__error {
  color: var(--red);
  font-size: 0.875rem;
  line-height: 1.4;
  margin: 0.75rem 0 0;
}
.sub-modal__cta {
  display: block;
  width: 100%;
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, var(--teal-light), var(--teal-mid));
  border: none;
  border-radius: 8px;
  color: var(--white);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  margin-bottom: 0.75rem;
}
.sub-modal__cta:hover:not(:disabled) { opacity: 0.9; }
.sub-modal__cta:disabled { opacity: 0.6; cursor: not-allowed; }
.sub-modal__dismiss {
  display: block;
  width: 100%;
  background: none;
  border: none;
  color: var(--white-muted);
  font-size: 0.875rem;
  cursor: pointer;
  padding: 0.5rem 0;
  text-align: center;
}
.sub-modal__dismiss:hover { color: var(--white); }
@media (max-width: 480px) {
  .sub-modal { padding: 2rem 1.25rem; }
}

/* -- Warning panel (results + history detail) ------------------ */
.warn-panel {
    margin: 0 0 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.warn-panel--clean { margin-bottom: 1rem; }
.warn-clean { color: var(--green); font-size: 0.9rem; }

.warn-action {
    border: 1px solid rgba(245, 180, 80, 0.45);
    background: rgba(245, 180, 80, 0.08);
    border-radius: 8px;
    padding: 0.85rem 1rem;
}
.warn-action__head {
    color: var(--amber);
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.warn-handled {
    border: 1px solid var(--white-faint);
    border-radius: 8px;
    padding: 0.6rem 1rem;
}
.warn-handled__head {
    color: var(--green);
    font-size: 0.85rem;
    cursor: pointer;
    list-style: none;
}
.warn-handled__head::-webkit-details-marker { display: none; }
.warn-handled[open] .warn-handled__head { margin-bottom: 0.5rem; }

.warn-item { padding: 0.35rem 0; }
.warn-item__title { color: var(--white); font-size: 0.875rem; }
.warn-item__detail {
    color: var(--white-muted);
    font-size: 0.8rem;
    margin-top: 0.15rem;
    word-break: break-word;
}
.warn-item__list {
    color: var(--white-muted);
    font-size: 0.8rem;
    margin: 0.3rem 0 0.1rem;
    padding-left: 1.1rem;
    list-style: disc;
}
.warn-item__list li {
    margin: 0.2rem 0;
    line-height: 1.45;
    word-break: break-word;
}
.warn-item__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
/* Collapsible action group: summary line + rotating caret, details on expand. */
.warn-item--toggle > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
}
.warn-item--toggle > summary::-webkit-details-marker { display: none; }
.warn-item--toggle > summary::before {
    content: '\25B8';
    color: var(--white-muted);
    font-size: 0.7em;
    transition: transform 0.15s ease;
}
.warn-item--toggle[open] > summary::before { transform: rotate(90deg); }
.warn-item--toggle > summary:hover { color: var(--white); }

/* ETF tax factor review */
.etf-review {
    position: relative;
    margin: 1.5rem 0;
    padding: 1.5rem;
    overflow: hidden;
    border: 1px solid rgba(95, 205, 214, 0.38);
    border-radius: 14px;
    background:
        radial-gradient(circle at 100% 0, rgba(245, 180, 80, 0.12), transparent 35%),
        linear-gradient(145deg, rgba(42, 122, 138, 0.3), rgba(13, 61, 74, 0.9));
}
.etf-review__heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.65rem;
}
.etf-review__eyebrow {
    margin: 0 0 0.2rem;
    color: var(--amber);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}
.etf-review__title { margin: 0; color: var(--white); font-size: 1.2rem; }
.etf-review__badge {
    flex: 0 0 auto;
    padding: 0.25rem 0.55rem;
    border: 1px solid rgba(245, 180, 80, 0.45);
    border-radius: 999px;
    background: var(--amber-faint);
    color: var(--amber);
    font-size: 0.7rem;
    font-weight: 700;
}
.etf-review__desc,
.etf-review__note,
.etf-review__status {
    color: var(--white-muted);
    font-size: 0.86rem;
    line-height: 1.55;
}
.etf-review__status {
    margin: 0.9rem 0;
    color: var(--white);
}
.etf-review__note { margin: 0.9rem 0 0; }
.etf-table-wrap { overflow-x: auto; }
.etf-factors-table {
    width: 100%;
    min-width: 780px;
    border-collapse: collapse;
    font-size: 0.8rem;
}
.etf-factors-table th,
.etf-factors-table td {
    padding: 0.65rem;
    border-bottom: 1px solid var(--white-faint);
    text-align: left;
    vertical-align: middle;
}
.etf-factors-table thead th {
    color: var(--white-muted);
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.etf-symbol { color: var(--white); font-family: "IBM Plex Mono", monospace; }
.etf-coverage {
    display: inline-block;
    padding: 0.2rem 0.45rem;
    border-radius: 4px;
    font-size: 0.7rem;
    white-space: nowrap;
}
.etf-coverage--verified { background: rgba(76, 206, 150, 0.13); color: var(--green); }
.etf-coverage--missing { background: var(--amber-faint); color: var(--amber); }
.etf-input {
    width: 100%;
    min-width: 115px;
    padding: 0.45rem 0.5rem;
    border: 1px solid var(--teal-light);
    border-radius: 6px;
    background: rgba(13, 61, 74, 0.85);
    color: var(--white);
    font: inherit;
}
.etf-input:focus { outline: 2px solid var(--amber); outline-offset: 1px; }
.etf-source { max-width: 160px; color: var(--white-muted); }
.etf-source-link { color: var(--amber); }
.etf-review__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1rem;
}
.warn-etf {
    margin: 0 0 1rem;
    padding: 0.85rem 1rem;
    border-radius: 8px;
    color: var(--white-muted);
    font-size: 0.84rem;
}
.warn-etf strong { color: var(--white); }
.warn-etf ul { margin: 0.5rem 0; padding-left: 1.2rem; }
.warn-etf p { margin: 0.45rem 0 0; }
.warn-etf--applied { border-left: 3px solid var(--green); background: rgba(76, 206, 150, 0.08); }
.warn-etf--missing { border-left: 3px solid var(--amber); background: var(--amber-faint); }

@media (max-width: 600px) {
    .etf-review { padding: 1.1rem; }
    .etf-review__heading { align-items: center; }
    .etf-review__actions .cta-button { width: 100%; }
}

/* Manual trade editor */
.trade-editor {
    position: relative;
    margin: 1.5rem 0;
    padding: 1.5rem;
    overflow: hidden;
    border: 1px solid rgba(245, 180, 80, 0.38);
    border-radius: 14px;
    background:
        linear-gradient(120deg, rgba(245, 180, 80, 0.08), transparent 35%),
        linear-gradient(155deg, rgba(25, 88, 101, 0.98), rgba(8, 45, 56, 0.98));
    color: var(--white);
}
.trade-editor__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.6rem;
}
.trade-editor__eyebrow {
    margin: 0 0 0.2rem;
    color: var(--amber);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}
.trade-editor__title { margin: 0; color: var(--white); font-size: 1.2rem; }
.trade-editor__collapse {
    padding: 0.25rem;
    border: 0;
    background: transparent;
    color: var(--white-muted);
    cursor: pointer;
    font-size: 1rem;
}
.trade-editor__collapse:hover { color: var(--white); }
.trade-editor__desc,
.editor-advanced-note,
.trade-editor__count {
    color: var(--white-muted);
    font-size: 0.84rem;
    line-height: 1.5;
}
.trade-editor__toolbar {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
    margin: 1rem 0;
}
.ca-builder {
    margin: 1rem 0;
    padding: 1rem;
    border: 1px solid var(--white-faint);
    border-radius: 8px;
    background: rgba(8, 45, 56, 0.54);
}
.ca-builder__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 0.75rem;
}
.ca-builder__title {
    margin: 0;
    color: var(--white);
    font-size: 1rem;
}
.ca-builder__list {
    display: grid;
    gap: 0.45rem;
}
.ca-builder__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--white-fainter);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.035);
}
.ca-builder__item-main {
    min-width: 0;
}
.ca-builder__item-title {
    margin: 0;
    color: var(--white);
    font-size: 0.86rem;
    font-weight: 700;
}
.ca-builder__item-meta {
    margin: 0.15rem 0 0;
    color: var(--white-muted);
    font-size: 0.75rem;
    line-height: 1.35;
}
.ca-builder__item-actions {
    display: flex;
    gap: 0.3rem;
    flex-shrink: 0;
}
.ca-builder__form {
    margin-top: 0.8rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--white-fainter);
}
.ca-builder__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
    gap: 0.65rem;
    margin-top: 0.75rem;
}
.ca-builder__field {
    display: grid;
    gap: 0.3rem;
    color: var(--white-muted);
    font-size: 0.75rem;
}
.ca-builder__field--check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.ca-builder__field[hidden] {
    display: none;
}
.ca-builder__preview {
    min-height: 1.4rem;
    margin: 0.75rem 0 0;
    color: var(--white);
    font-size: 0.84rem;
    line-height: 1.45;
}
.ca-builder__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.75rem;
}
.editor-filter {
    min-width: 180px;
    padding: 0.48rem 0.65rem;
    border: 1px solid var(--teal-light);
    border-radius: 6px;
    background: var(--teal-dark);
    color: var(--white);
    font: inherit;
}
.editor-filter::placeholder { color: var(--white-muted); }
.trade-editor__table-wrap {
    max-height: 520px;
    overflow: auto;
    margin-bottom: 1rem;
    border: 1px solid var(--white-faint);
    border-radius: 8px;
}
.editor-table {
    width: 100%;
    min-width: 1440px;
    border-collapse: collapse;
    white-space: nowrap;
    font-size: 0.78rem;
}
.editor-table th {
    position: sticky;
    z-index: 1;
    top: 0;
    padding: 0.55rem;
    border-bottom: 2px solid var(--teal-light);
    background: var(--teal-dark);
    color: var(--white-muted);
    text-align: left;
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.editor-table td {
    padding: 0.48rem 0.55rem;
    border-bottom: 1px solid var(--white-fainter);
    color: var(--white);
    vertical-align: middle;
}
.editor-row--new td { background: rgba(76, 206, 150, 0.07); }
.editor-row--edited td { background: rgba(245, 180, 80, 0.07); }
.editor-col-actions { width: 220px; text-align: right; }
.editor-move-btn,
.editor-edit-btn,
.editor-delete-btn,
.editor-save-btn,
.editor-cancel-edit-btn {
    margin-left: 0.25rem;
    padding: 0.25rem 0.4rem;
    border: 1px solid var(--white-faint);
    border-radius: 4px;
    background: transparent;
    color: var(--white-muted);
    cursor: pointer;
    font-size: 0.72rem;
}
.editor-move-btn:hover:not(:disabled),
.editor-edit-btn:hover:not(:disabled),
.editor-save-btn:hover { border-color: var(--green); color: var(--green); }
.editor-move-btn:disabled,
.editor-edit-btn:disabled { opacity: 0.4; cursor: default; }
.editor-delete-btn:hover,
.editor-cancel-edit-btn:hover { border-color: var(--red); color: var(--red); }
.editor-input {
    width: 100%;
    min-width: 82px;
    padding: 0.3rem 0.4rem;
    border: 1px solid var(--teal-light);
    border-radius: 4px;
    background: rgba(8, 45, 56, 0.95);
    color: var(--white);
    font: inherit;
}
.editor-input:focus,
.editor-filter:focus { outline: 2px solid var(--amber); outline-offset: 1px; }
/* Under the price of a CONTRIBUTION row being edited (app.js). */
.editor-price-help {
    min-width: 13rem;
    margin-top: 0.3rem;
    color: var(--white-muted);
    font-size: 0.7rem;
    line-height: 1.4;
    white-space: normal;
}
.editor-price-help p { margin: 0 0 0.2rem; }
.editor-advanced-toggle { margin: 0.8rem 0; color: var(--white-muted); }
.editor-advanced-toggle summary { cursor: pointer; font-size: 0.84rem; }
.editor-advanced-note { margin: 0.45rem 0 0 1rem; }
.trade-editor__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1rem;
}
.editor-error {
    margin-top: 0.8rem;
    padding: 0.65rem 0.85rem;
    border-left: 3px solid var(--red);
    border-radius: 4px;
    background: rgba(239, 68, 68, 0.14);
    color: var(--white);
    font-size: 0.84rem;
}
.dl-btn--edit { border-color: var(--amber); color: var(--amber); }
.dl-btn--edit:hover { background: var(--amber-faint); }
.dl-btn--edit:disabled {
    border-color: var(--white-faint);
    color: var(--white-muted);
    cursor: not-allowed;
    opacity: 0.65;
}
.user-ca-assumptions {
    margin: 1.25rem 0;
}
.user-ca-assumptions__panel {
    padding: 1rem;
    border: 1px solid rgba(245, 180, 80, 0.32);
    border-radius: 8px;
    background: rgba(245, 180, 80, 0.08);
}
.user-ca-assumptions__panel ul {
    display: grid;
    gap: 0.55rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.user-ca-assumptions__panel li {
    display: grid;
    gap: 0.15rem;
    color: var(--white-muted);
    font-size: 0.86rem;
}
.user-ca-assumptions__panel strong {
    color: var(--white);
}

@media (max-width: 600px) {
    .trade-editor { padding: 1rem; }
    .ca-builder__header,
    .ca-builder__item {
        align-items: stretch;
        flex-direction: column;
    }
    .editor-filter { width: 100%; }
    .trade-editor__actions .cta-button { width: 100%; }
}

/* ── Column mapping panel (universal import) ─────────────── */
.badge-custom {
    background: rgba(167, 139, 250, 0.18);
    color: #b7a4f7;
}

.mapping-panel {
    position: relative;
    margin: 1.25rem 0;
    padding: 1.5rem;
    overflow: hidden;
    border: 1px solid rgba(167, 139, 250, 0.38);
    border-radius: 14px;
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(167, 139, 250, 0.10) 0%, transparent 55%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
}

.mapping-panel__eyebrow {
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(183, 164, 247, 0.9);
    margin: 0 0 0.35rem;
}

.mapping-panel__heading {
    font-size: 1.1rem;
    color: var(--white);
    margin: 0 0 0.35rem;
}

.mapping-panel__sub {
    font-size: 0.85rem;
    color: var(--white-muted);
    margin: 0 0 1rem;
}

.mapping-panel__note {
    font-size: 0.85rem;
    color: var(--white);
    border-left: 3px solid var(--amber);
    padding: 0.4rem 0.75rem;
    margin: 0 0 0.75rem;
}

.mapping-panel__note[hidden] {
    display: none;
}

.mapping-fields {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.mapping-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.8rem;
    color: var(--white-muted);
}

.mapping-field__label {
    font-weight: 600;
    color: var(--white);
    font-size: 0.78rem;
}

.mapping-select { width: 100%; }

.mapping-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    margin-bottom: 0.75rem;
}

.mapping-option {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.78rem;
    color: var(--white-muted);
    min-width: 180px;
}

.mapping-option--check {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    align-self: flex-end;
}

.mapping-ambiguous-warn {
    font-size: 0.82rem;
    color: var(--amber, #f5b84b);
    margin: 0 0 0.75rem;
}

.mapping-options-check {
    align-self: flex-start;
    margin-bottom: 0.35rem;
    color: var(--white);
}

.mapping-field-hint {
    font-size: 0.76rem;
    color: var(--white-muted);
    margin: 0 0 0.75rem;
}

.mapping-verbs {
    border: 1px solid var(--white-faint);
    border-radius: 8px;
    padding: 0.75rem;
    margin-bottom: 1rem;
}

.mapping-verbs__heading {
    font-weight: 600;
    color: var(--white);
    font-size: 0.78rem;
    margin: 0 0 0.6rem;
}

.mapping-verbs__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.6rem 1rem;
}

.mapping-verb {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.78rem;
    color: var(--white-muted);
}

.mapping-verb__label {
    font-weight: 600;
    color: var(--white);
    font-size: 0.76rem;
}

.mapping-verb-select { width: 100%; }

.mapping-sheet__label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.mapping-import-summary {
    font-size: 0.82rem;
    color: var(--white);
    background: rgba(167, 139, 250, 0.1);
    border: 1px solid rgba(167, 139, 250, 0.35);
    border-radius: 8px;
    padding: 0.55rem 0.75rem;
    margin: 0 0 1rem;
}

.mapping-audit {
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 8px;
    background: rgba(34, 197, 94, 0.08);
    padding: 0.75rem;
    margin: 0 0 1rem;
}

.mapping-audit__title,
.mapping-audit__subtitle {
    margin: 0 0 0.55rem;
    color: var(--white);
    font-weight: 700;
    font-size: 0.82rem;
}

.mapping-audit__subtitle {
    margin-top: 0.75rem;
    font-size: 0.78rem;
}

.mapping-audit__muted,
.mapping-audit__list {
    color: var(--white-muted);
    font-size: 0.8rem;
}

.mapping-audit__muted {
    margin: 0.45rem 0 0;
}

.mapping-audit__list {
    margin: 0;
    padding-left: 1.1rem;
}

.mapping-audit__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.mapping-audit__table th,
.mapping-audit__table td {
    padding: 0.25rem 0.5rem 0.25rem 0;
    border-bottom: 1px solid var(--white-faint);
}

.mapping-audit__table th {
    text-align: left;
    color: var(--white-muted);
    font-weight: 600;
}

.mapping-audit__table td {
    text-align: right;
    color: var(--white);
    font-variant-numeric: tabular-nums;
}

.mapping-audit__risk {
    margin-top: 0.75rem;
    margin-bottom: 0;
    font-size: 0.8rem;
}

.mapping-audit__warning {
    margin-top: 0.75rem;
    margin-bottom: 0;
    font-size: 0.8rem;
}

.mapping-audit__items {
    margin-top: 0.35rem;
}

.mapping-audit__items li + li {
    margin-top: 0.2rem;
}

.mapping-audit__notes {
    margin-top: 0.75rem;
    color: var(--white-muted);
    font-size: 0.8rem;
}

.mapping-audit__notes summary {
    cursor: pointer;
    font-weight: 600;
}

.mapping-audit__notes p {
    margin: 0.45rem 0 0 1rem;
}

.mapping-preview-wrap {
    max-height: 220px;
    overflow: auto;
    border: 1px solid var(--white-faint);
    border-radius: 8px;
    margin-bottom: 1rem;
}

.mapping-preview {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}

.mapping-preview th,
.mapping-preview td {
    padding: 0.4rem 0.6rem;
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid var(--white-faint);
    color: var(--white-muted);
}

.mapping-preview th {
    color: var(--white);
    position: sticky;
    top: 0;
    /* Solid twin of the .editor-input fill; a sticky header cannot be
       translucent or scrolled rows ghost through it. */
    background: #082d38;
}

.mapping-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.mapping-confirm {
    padding: 0.55rem 1.2rem;
    border-radius: 8px;
    border: 1px solid rgba(167, 139, 250, 0.6);
    background: rgba(167, 139, 250, 0.18);
    color: var(--white);
    font-weight: 600;
    cursor: pointer;
}

.mapping-verify {
    padding: 0.55rem 1.2rem;
    border-radius: 8px;
    border: 1px solid rgba(34, 197, 94, 0.45);
    background: rgba(34, 197, 94, 0.12);
    color: var(--white);
    font-weight: 600;
    cursor: pointer;
}

.mapping-confirm:disabled,
.mapping-verify:disabled { opacity: 0.45; cursor: not-allowed; }

.mapping-cancel {
    padding: 0.55rem 1.2rem;
    border-radius: 8px;
    border: 1px solid var(--white-faint);
    background: transparent;
    color: var(--white-muted);
    cursor: pointer;
}

.mapping-status {
    font-size: 0.8rem;
    color: var(--white-muted);
    margin: 0.6rem 0 0;
    min-height: 1em;
}

.mapping-status--problem {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--amber, #f5b84b);
}

.mapping-select--missing { border-color: var(--amber, #f5b84b); }

.mapping-share {
    margin-top: 1rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--white-faint);
}

.mapping-share__btn:disabled { opacity: 0.45; cursor: not-allowed; }

.support-file {
    margin-top: 0.75rem;
}

.support-file__text { max-width: none; margin-bottom: 0.6rem; }

.share-sample-check {
    align-self: flex-start;
    font-size: 0.875rem;
    min-width: 0;
}

.share-sample-check + .field-help {
    margin-top: -0.5rem;
}

@media (max-width: 600px) {
    .mapping-panel { padding: 1rem; }
    .mapping-fields { grid-template-columns: 1fr; }
}

/* ── Broker reconciliation (L2) ──────────────────────── */
.recon-section {
    margin-bottom: 2rem;
}

.recon-lede {
    color: var(--white-muted);
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 0.75rem;
}

.recon-lede strong {
    color: var(--white);
}

.recon-flags {
    font-size: 0.75rem;
    color: var(--white-muted);
}

.recon-note {
    color: var(--white-muted);
    font-size: 0.8rem;
    line-height: 1.55;
    margin-top: 0.5rem;
}

.recon-t5008 {
    margin-top: 1.5rem;
}

/* The two lede notes read as one thought: tight together, then a clear
   gap before the slip table (p bottom margins are zeroed site-wide). */
.recon-t5008 .recon-note {
    margin: 0.4rem 0 0;
}
.recon-t5008 .recon-note + .recon-note {
    margin-top: 0.15rem;
}
.recon-t5008 .table-wrapper {
    margin-top: 0.8rem;
}

.recon-t5008__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-end;
    margin-top: 0.75rem;
}

.recon-slip-table input {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    color: var(--white);
    padding: 0.45rem 0.6rem;
    font-size: 0.875rem;
    width: 100%;
    min-width: 7rem;
}

.recon-slip-table input[aria-invalid="true"] {
    border-color: #fca5a5;
}

.mini-btn {
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: transparent;
    color: var(--white-muted);
    border-radius: 4px;
    padding: 0.35rem 0.55rem;
    font-size: 0.75rem;
    cursor: pointer;
}

.mini-btn:hover {
    color: var(--white);
    border-color: rgba(255, 255, 255, 0.36);
}

/* ── Pricing tiers ──────────────────────────────────────── */
.tier-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

@media (max-width: 600px) {
    .tier-grid {
        grid-template-columns: 1fr;
    }
}

.tier-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--white-faint);
    border-radius: 10px;
    padding: 1.25rem;
    background: rgba(255, 255, 255, 0.02);
}

.tier-card--featured {
    border-color: var(--accent, rgba(255, 255, 255, 0.35));
}

.tier-card__name {
    color: var(--white);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.tier-card__tagline {
    color: var(--white-muted);
    font-size: 0.85rem;
    margin-top: 0.2rem;
    min-height: 2.2em;
}

.tier-card__price {
    color: var(--white);
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-top: 0.6rem;
}

.tier-card__currency {
    font-size: 1rem;
    font-weight: 400;
    vertical-align: super;
    margin-right: 0.1em;
    color: var(--white-muted);
}

.tier-card__period {
    color: var(--white-muted);
    font-size: 0.8rem;
    margin-bottom: 1rem;
}

.tier-card__founding {
    color: var(--amber);
    font-size: 0.8rem;
    margin-top: 0.3rem;
    margin-bottom: 0.9rem;
}

.tier-card__more {
    /* Centred between the feature list and the button. The gap above is
       1.7rem: .tier-card__features contributes 1.25rem and the last li adds
       its own 0.45rem. Match it below rather than trimming the list, which
       would shift the button spacing on the other three cards too. */
    margin: 0 0 1.7rem;
    font-size: 0.85rem;
    text-align: center;
}

.tier-card__features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem;
    flex-grow: 1;
}

.tier-card__features li {
    color: var(--white-muted);
    font-size: 0.85rem;
    line-height: 1.5;
    padding-left: 1.1rem;
    margin-bottom: 0.45rem;
    position: relative;
}

.tier-card__features li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: var(--white);
    opacity: 0.55;
}

.accountant-page {
    /* Wide enough that both tables (incl. six single-row actions) fit
       without a horizontal scrollbar on desktop; 97vw keeps sane margins
       on smaller screens. */
    max-width: min(1620px, 97vw);
    color: var(--white);
    color-scheme: dark;
}

.accountant-header,
.accountant-panel__header,
.accountant-form-actions,
.accountant-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.accountant-panel__actions,
.accountant-batch__controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.accountant-batch__controls {
    margin: 0.75rem 0;
}

.accountant-settings {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.accountant-logo-row {
    flex-basis: 100%;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-top: 0.35rem;
}

.accountant-logo-hint {
    color: var(--white-muted);
    font-size: 0.78rem;
}

/* Firm logo in the nav: top-left slot, level with the site branding. */
.firm-logo-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-right: auto;
}

.firm-logo {
    /* Match the 52px sign-in/out button height so even a square logo
       reads at full nav scale; wide logos grow rightward up to the cap. */
    height: 52px;
    width: auto;
    max-width: 16rem;
    object-fit: contain;
    cursor: pointer;
    border-radius: 4px;
}

.firm-logo-x {
    position: absolute;
    top: -0.35rem;
    right: -0.55rem;
    width: 1.1rem;
    height: 1.1rem;
    line-height: 1;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.8rem;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}

.firm-logo-wrap:hover .firm-logo-x,
.firm-logo-wrap:focus-within .firm-logo-x,
.firm-logo-x:focus-visible {
    opacity: 1;
    pointer-events: auto;
}

/* A touch screen has no hover: the remove button is always shown there
   (it asks before anything is deleted). */
@media (hover: none) {
    .firm-logo-x {
        opacity: 1;
        pointer-events: auto;
    }
}

.firm-logo-x:hover {
    background: rgba(0, 0, 0, 0.7);
    color: #ffffff;
}

/* Compressed accountant dashboard: the ActiveACB mark is gone outright on
   narrow screens (phones are always narrow) - only the firm logo shows,
   or nothing while none is uploaded. margin-left:auto keeps sign-out and
   the hamburger packed right whether or not the firm logo is present. */
@media (max-width: 900px) {
    body.accountant-body .nav__right .nav-logo-link {
        display: none;
    }

    body.accountant-body .nav__right {
        width: auto;
        margin-left: auto;
        justify-content: flex-end;
    }

    body.accountant-body .firm-logo {
        max-width: 40vw;
    }
}

.accountant-settings label,
#prepared-status,
#batch-progress {
    color: var(--white-muted);
}

.accountant-settings input,
.accountant-search,
.accountant-client-form input,
.accountant-client-form textarea,
.accountant-batch-registered,
.accountant-batch-affiliated,
.accountant-select {
    border: 1px solid var(--white-faint);
    border-radius: 6px;
    padding: 0.55rem 0.7rem;
    font: inherit;
    background: var(--white-fainter);
    color: var(--white);
}

.accountant-search::placeholder,
.accountant-client-form input::placeholder,
.accountant-client-form textarea::placeholder,
.accountant-batch-registered::placeholder,
.accountant-batch-affiliated::placeholder {
    color: var(--white-muted);
    opacity: 0.75;
}

.accountant-settings input:focus-visible,
.accountant-search:focus-visible,
.accountant-client-form input:focus-visible,
.accountant-client-form textarea:focus-visible,
.accountant-batch-registered:focus-visible,
.accountant-batch-affiliated:focus-visible,
.accountant-select:focus-visible,
.accountant-client-item:focus-visible,
.accountant-page input[type="file"]:focus-visible,
.accountant-batch summary:focus-visible {
    outline: 2px solid #fbbf24;
    outline-offset: 2px;
}

.accountant-settings input {
    min-width: 16rem;
}

.accountant-page input[type="file"] {
    color: var(--white-muted);
}

.accountant-page input[type="file"]::file-selector-button {
    border: 1px solid var(--white-faint);
    border-radius: 6px;
    background: var(--white-fainter);
    color: var(--white);
    cursor: pointer;
    font: inherit;
    margin-right: 0.65rem;
    padding: 0.35rem 0.55rem;
}

.accountant-select {
    min-width: 9rem;
    max-width: 100%;
}

.accountant-select option {
    background: var(--teal-dark);
    color: var(--white);
}

.accountant-dashboard {
    display: grid;
    grid-template-columns: minmax(260px, 330px) minmax(0, 1fr);
    gap: 1rem;
}

.accountant-panel {
    min-width: 0;
}

.accountant-clients {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.accountant-client-form {
    display: grid;
    gap: 0.6rem;
}

.accountant-client-form textarea {
    min-height: 5.5rem;
    resize: vertical;
}

.accountant-client-list {
    display: grid;
    gap: 0.5rem;
}

.accountant-client-card {
    display: grid;
    /* Two-line card at every width: the name owns the full top line so
       long names never squeeze the numbers, then count/date/Edit/Delete
       share a single line below. Fixed count/date columns keep every
       row's numbers vertically aligned. */
    grid-template-columns: 1.8rem 3.6rem minmax(0, 1fr);
    align-items: center;
    gap: 0.35rem 0.6rem;
    border: 1px solid var(--white-faint);
    border-radius: 8px;
    background: var(--white-fainter);
    padding: 0.45rem 0.5rem;
}

.accountant-client-card .accountant-client-item {
    grid-column: 1 / -1;
}

.accountant-client-card .accountant-client-actions {
    justify-content: flex-end;
    flex-wrap: nowrap;
}

.accountant-client-item {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.25rem 0.5rem;
    align-items: center;
    text-align: left;
    border: 1px solid var(--white-faint);
    border-radius: 8px;
    background: var(--white-fainter);
    color: var(--white);
    padding: 0.65rem 0.75rem;
    cursor: pointer;
}

.accountant-client-item.is-active,
.accountant-client-card.is-active {
    border-color: var(--teal-light);
    background: rgba(42, 122, 138, 0.18);
}

.accountant-client-card .accountant-client-item {
    border: 0;
    background: transparent;
    padding: 0.15rem 0.25rem;
}

.accountant-client-item__name,
.accountant-client-item__ref {
    overflow-wrap: anywhere;
}

.accountant-client-item__ref {
    color: var(--white-muted);
    font-size: 0.85rem;
    margin-left: 0.45rem;
}

.accountant-client-item__count,
.accountant-client-item__last {
    color: var(--white-muted);
    font-variant-numeric: tabular-nums;
    font-size: 0.9rem;
    text-align: center;
}

.accountant-client-item__name {
    font-size: 0.9rem;
}

.accountant-client-item__last {
    text-align: center;
    padding: 0 0.35rem;
}

/* 5 tiles in two rows: halves on top (Clients / Calculations), the status
   pipeline as thirds below, divided by the same faint border. */
.accountant-progress-strip {
    border: 1px solid var(--white-faint);
    border-radius: 6px;
    margin: 0;
    background: rgba(255, 255, 255, 0.045);
    display: grid;
    grid-template-columns: repeat(30, 1fr);
    overflow: hidden;
}

.accountant-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    padding: 0.5rem 0.35rem;
    border-right: 1px solid var(--white-faint);
}

.accountant-stat:nth-child(-n+2) {
    grid-column: span 15;
}

/* Bottom row 9/12/9: the long middle label gets extra room while its tile
   stays dead-center, and the two long labels end up with similar margins. */
.accountant-stat:nth-child(n+3) {
    grid-column: span 9;
    border-top: 1px solid var(--white-faint);
}

.accountant-stat:nth-child(4) {
    grid-column: span 12;
}

.accountant-stat:nth-child(2),
.accountant-stat:nth-child(5) {
    border-right: 0;
}


.accountant-stat__value {
    color: var(--white);
    font-size: 1.15rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.accountant-stat__label {
    color: var(--white-muted);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

@media (max-width: 560px) {
    .accountant-stat__label {
        white-space: normal;
        text-align: center;
    }
}

.accountant-empty-hint {
    color: var(--white-muted);
    margin: 0.25rem 0 0;
}

.accountant-client-actions,
.accountant-row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

/* Calculation-table actions never wrap: on narrow windows the table keeps
   its row height and the wrapper's horizontal scrollbar appears instead
   (same compression behavior as the batch table). */
.accountant-table td.accountant-row-actions,
.accountant-table .accountant-row-actions {
    flex-wrap: nowrap;
    white-space: nowrap;
}

.accountant-range,
.accountant-empty {
    color: var(--white-muted);
    margin: 0.2rem 0 0;
}

.accountant-table th {
    vertical-align: top;
}

/* Data cells center up-down against the taller action chips. */
.accountant-table td {
    vertical-align: middle;
}

.accountant-table .accountant-date-cell {
    white-space: nowrap;
}

.accountant-table td.accountant-row-actions {
    /* Was a 17rem floor for the old 1000px layout; the wide dashboard fits
       without a scrollbar when the action buttons are allowed to wrap.
       align-items keeps the chips centered if another cell grows taller. */
    min-width: 0;
    align-items: center;
}

/* Batch rows: center inputs and status text vertically against the taller
   buttons, and keep the file input from forcing horizontal overflow. */
.accountant-batch .data-table td {
    vertical-align: middle;
}

/* The global .accountant-row-actions rule makes the td a flex container,
   which drops it out of table-cell vertical alignment - restore it here so
   Remove/Retry center with the rest of the row. */
.accountant-batch td.accountant-row-actions {
    display: table-cell;
    vertical-align: middle;
}

.accountant-batch td.accountant-row-actions .dl-btn {
    margin-right: 0.4rem;
}

.accountant-batch {
    border-top: 1px solid var(--white-faint);
    border-bottom: 1px solid var(--white-faint);
    margin: 0.75rem 0;
    padding: 0.75rem 0;
}

.accountant-batch summary {
    color: var(--white);
    cursor: pointer;
    font-weight: 700;
}

.accountant-batch-status {
    display: grid;
    gap: 0.35rem;
}

.accountant-batch-state {
    color: var(--white);
}

.accountant-batch-state--waiting-for-capacity,
.accountant-batch-state--waiting-for-previous-calculation-to-finish,
.accountant-batch-state--waiting-for-the-calculation-limit,
.accountant-batch-state--waiting-to-retry {
    color: var(--amber);
}

.accountant-batch-state--failed {
    color: var(--red);
}

.accountant-batch-state--done {
    color: var(--green);
}

.accountant-batch-reason {
    color: var(--white-muted);
    overflow-wrap: anywhere;
}

.accountant-batch-registered,
.accountant-batch-affiliated {
    width: 8rem;
}

/* A corporation's row: registered accounts are not applicable. A running
   row locks both ID boxes. */
.accountant-batch-registered:disabled,
.accountant-batch-affiliated:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

/* The account holder, with a corporation's year-end month under it. */
.accountant-batch-holder {
    display: grid;
    gap: 0.35rem;
}

.accountant-row-actions .dl-btn,
.accountant-client-actions .dl-btn {
    padding: 0.35rem 0.55rem;
    font-size: 0.82rem;
}

/* "Open" is an <a> while the download chips are <button>s; one shared
   flex box model keeps every label centered up-down in the row. */
.accountant-row-actions .dl-btn,
.accountant-client-actions .dl-btn,
.accountant-batch-status .dl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.client-picker {
    position: relative;
    min-width: 12rem;
}

.client-picker__input {
    width: 100%;
}

.client-picker__input:focus-visible {
    outline: 2px solid #fbbf24;
    outline-offset: 2px;
}

.client-picker__list {
    position: absolute;
    z-index: 20;
    top: calc(100% + 0.25rem);
    left: 0;
    right: 0;
    max-height: 18rem;
    overflow-y: auto;
    border: 1px solid var(--white-faint);
    border-radius: 6px;
    background: var(--teal-dark);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
    padding: 0.25rem;
}

.client-picker__option,
.client-picker__empty {
    display: grid;
    gap: 0.12rem;
    border-radius: 4px;
    color: var(--white);
    padding: 0.45rem 0.55rem;
}

.client-picker__option {
    cursor: pointer;
}

.client-picker__option.is-active {
    background: var(--white-faint);
}

.client-picker__ref {
    color: var(--white-muted);
    font-size: 0.82rem;
}

.client-picker__empty {
    color: var(--white-muted);
}

.accountant-linked-client {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.65rem 0.45rem 0.85rem;
    border: 1px solid var(--white-faint);
    border-radius: 999px;
    color: var(--white);
    background: var(--white-fainter);
    font-size: 0.88rem;
}

.accountant-linked-client .client-picker {
    min-width: 13rem;
}

/* No client chosen yet: a plain label and picker in line with the form
   fields above. The pill is kept for a chosen client, which is a
   dismissible tag. */
.accountant-linked-client--unlinked {
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--white-muted);
    font-size: 0.875rem;
}

.accountant-linked-client--unlinked .client-picker__input {
    padding: 0.5rem 0.75rem;
    border-color: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    background: var(--white-faint);
}

.accountant-linked-client--unlinked .client-picker__input::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.accountant-linked-client a {
    color: var(--white);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.accountant-linked-client button {
    border: 0;
    background: transparent;
    color: var(--white-muted);
    cursor: pointer;
    font: inherit;
    line-height: 1;
}

@media (max-width: 900px) {
    .accountant-header,
    .accountant-panel__header {
        align-items: flex-start;
        flex-direction: column;
    }

    .accountant-dashboard {
        grid-template-columns: 1fr;
    }

    .accountant-settings input {
        min-width: 0;
        width: 100%;
    }
}

/* Footer social icons: circular brand-teal buttons pinned to the right
   edge, vertically centered on the link row; the row itself stays
   centered because the icons sit outside the text flow. */
.footer__social {
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.footer a.footer__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    background: var(--teal-light);
    color: var(--white);
}
.footer a.footer__icon:hover {
    background: var(--teal-mid);
    color: var(--white);
}
.footer__icon svg {
    width: 0.95rem;
    height: 0.95rem;
}
/* Below 900px the pinned icons would collide with the 644px link row,
   so they fold onto their own full-width row centered under the links.
   flex-basis 100% forces the new line inside the wrapping mobile footer;
   width 100% does the same while the footer is still a block. */
@media (max-width: 900px) {
    .footer__social {
        position: static;
        transform: none;
        display: flex;
        justify-content: center;
        flex: 0 0 100%;
        width: 100%;
        margin-top: 0.75rem;
    }
}

/* ---- Author / E-E-A-T blocks (SEO pass, 2026-08-30) ---- */
/* Deliberately not flex: a flex container turns the leading "By " into an
   anonymous item and trims its trailing space, closing the gap before the
   author link. Normal inline flow wraps just as well here. */
.guide-byline {
    color: var(--white-muted);
    font-size: 0.875rem;
    line-height: 1.5;
    margin: -1.25rem 0 2rem;
}

.guide-byline__author,
.guide-byline__author:visited {
    color: var(--link);
    text-decoration: none;
}

.guide-byline__author:hover { text-decoration: underline; }

.guide-byline__sep { opacity: 0.5; }

.author-box {
    margin: 2.5rem 0 0;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--white-fainter);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
}

.author-box__heading {
    font-size: 1rem;
    margin: 0 0 0.75rem;
    color: var(--white);
}

.author-box__body {
    color: var(--white-muted);
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0 0 0.75rem;
}

.author-box__note {
    color: var(--white-muted);
    font-size: 0.8rem;
    line-height: 1.5;
    margin: 0;
    opacity: 0.8;
}

.author-box__link,
.author-box__link:visited { color: var(--link); }

.author-box__link:hover { text-decoration: underline; }

@media (max-width: 600px) {
    .author-box { padding: 1rem; }
}