/* ==========================================================================
   TransactVault — design system
   Calm, professional, spacious. Calm-green for success. Semantic class names
   only — classes describe the content, not the appearance.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Design tokens
   -------------------------------------------------------------------------- */
:root {
    --color-brand:         #0f766e;
    --color-brand-ink:     #0b5955;
    --color-brand-soft:    #ccfbf1;
    --color-brand-tint:    #f0fdfa;

    --color-success:       #16a34a;
    --color-success-soft:  #dcfce7;
    --color-success-ink:   #166534;

    --color-warn:          #b45309;
    --color-warn-soft:     #fef3c7;

    --color-danger:        #dc2626;
    --color-danger-soft:   #fee2e2;

    --color-ink:           #0f172a;
    --color-body:          #1f2937;
    --color-muted:         #64748b;
    --color-mute-soft:     #94a3b8;
    --color-line:          #e5e7eb;
    --color-line-soft:     #f1f5f9;
    --color-surface:       #ffffff;
    --color-surface-alt:   #f8fafc;
    --color-bg:            #f6f7f9;

    --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-display: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    --fs-xs:   0.8125rem;
    --fs-sm:   0.875rem;
    --fs-base: 1rem;
    --fs-md:   1.0625rem;
    --fs-lg:   clamp(1.125rem, 0.6vw + 0.95rem, 1.25rem);
    --fs-xl:   clamp(1.35rem, 1vw + 1.1rem, 1.6rem);
    --fs-2xl:  clamp(1.75rem, 2vw + 1.2rem, 2.25rem);
    --fs-hero: clamp(2.4rem, 4vw + 1.2rem, 4.25rem);

    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 3rem;
    --sp-8: 4rem;
    --sp-9: 6rem;

    --radius-sm: 0.375rem;
    --radius:    0.625rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;

    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
    --shadow:    0 8px 24px -12px rgba(15, 23, 42, 0.15);
    --shadow-lg: 0 20px 60px -24px rgba(15, 23, 42, 0.22);

    --transition: 180ms cubic-bezier(.3, .7, .3, 1);

    --container: 72rem;
    --container-narrow: 56rem;
}

/* --------------------------------------------------------------------------
   Base + reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: 1.55;
    color: var(--color-body);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    color: var(--color-ink);
    line-height: 1.15;
    margin: 0 0 var(--sp-4);
    letter-spacing: -0.015em;
}

h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }

p  { margin: 0 0 var(--sp-4); }

a {
    color: var(--color-brand);
    text-decoration: none;
    transition: color var(--transition);
}
a:hover, a:focus { color: var(--color-brand-ink); text-decoration: underline; }

ul, ol { padding-inline-start: 1.25rem; }

img { max-width: 100%; height: auto; display: block; }

input, button, select, textarea {
    font: inherit;
    color: inherit;
}

hr {
    border: 0;
    border-top: 1px solid var(--color-line);
    margin: var(--sp-6) 0;
}

:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
    border-radius: 4px;
}

/* --------------------------------------------------------------------------
   Site header / footer
   -------------------------------------------------------------------------- */
.site-header {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--color-line);
    position: sticky;
    top: 0;
    z-index: 20;
}

.site-header > nav {
    max-width: var(--container);
    margin-inline: auto;
    padding: var(--sp-4) var(--sp-5);
    display: flex;
    align-items: center;
    gap: var(--sp-5);
}

.brand-mark {
    font-family: var(--font-display);
    color: var(--color-ink);
    font-size: var(--fs-lg);
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    letter-spacing: -0.01em;
    line-height: 1;
}
.brand-mark img,
.brand-mark svg {
    width: 1.6rem;
    height: 1.6rem;
    display: block;
    flex: none;
}
.brand-mark .brand-light {
    font-weight: 400;
    color: var(--color-ink);
}
.brand-mark .brand-heavy {
    font-weight: 800;
    color: var(--color-ink);
}
.brand-mark:hover { text-decoration: none; }
.brand-mark:hover .brand-light,
.brand-mark:hover .brand-heavy { color: var(--color-brand-ink); }

.primary-nav {
    display: flex;
    gap: var(--sp-5);
    margin-inline-start: auto;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    margin-inline-start: auto;
}
.primary-nav li { list-style: none; }
.primary-nav li::marker { content: ""; }
.primary-nav a {
    color: var(--color-body);
    font-weight: 500;
    font-size: var(--fs-sm);
}
.primary-nav a:hover { color: var(--color-brand); text-decoration: none; }

.site-footer {
    border-top: 1px solid var(--color-line);
    background: var(--color-surface);
    padding: var(--sp-7) var(--sp-5);
    margin-top: var(--sp-9);
    color: var(--color-muted);
    font-size: var(--fs-sm);
}
.site-footer > .footer-grid {
    max-width: var(--container);
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--sp-6);
}
.site-footer h4 { color: var(--color-ink); font-size: var(--fs-sm); margin-bottom: var(--sp-3); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: var(--sp-2); }
.footer-colophon {
    max-width: var(--container);
    margin: var(--sp-6) auto 0;
    border-top: 1px solid var(--color-line);
    padding-top: var(--sp-4);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--sp-3);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn,
button[type="submit"],
a.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.7rem 1.25rem;
    border-radius: var(--radius);
    border: 1px solid transparent;
    background: var(--color-brand);
    color: #fff;
    font-weight: 600;
    font-size: var(--fs-sm);
    cursor: pointer;
    transition: transform var(--transition), background var(--transition), box-shadow var(--transition), border-color var(--transition);
    text-decoration: none;
    line-height: 1;
}
.btn:hover, button[type="submit"]:hover, a.btn:hover {
    background: var(--color-brand-ink);
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}
.btn.secondary {
    background: var(--color-surface);
    color: var(--color-ink);
    border-color: var(--color-line);
}
.btn.secondary:hover {
    background: var(--color-surface-alt);
    color: var(--color-ink);
    border-color: var(--color-mute-soft);
}
.btn.ghost {
    background: transparent;
    color: var(--color-body);
    border-color: transparent;
}
.btn.ghost:hover { background: var(--color-line-soft); color: var(--color-ink); }
.btn.small { padding: 0.4rem 0.75rem; font-size: var(--fs-xs); }
.btn.danger { background: var(--color-danger); }
.btn.danger:hover { background: #b91c1c; }
/* Reversible-but-cautionary action (e.g. Deactivate): amber, clearly
   distinct from the red of a destructive Delete sitting next to it. */
.btn.warn {
    background: var(--color-surface);
    color: var(--color-warn);
    border-color: var(--color-warn-soft);
}
.btn.warn:hover { background: var(--color-warn-soft); color: var(--color-warn); }
/* Destructive ghost: both .ghost and .danger together → red text on
   transparent surface, soft-red on hover. `.btn.danger`'s solid-red
   background otherwise wins on cascade order, painting dark-on-dark. */
.btn.ghost.danger {
    background: transparent;
    color: var(--color-danger);
    border-color: transparent;
}
.btn.ghost.danger:hover {
    background: var(--color-danger-soft);
    color: var(--color-danger);
}

/* --------------------------------------------------------------------------
   Landing page
   -------------------------------------------------------------------------- */
.hero {
    padding: clamp(3rem, 8vw, 6rem) var(--sp-5) var(--sp-9);
    text-align: center;
    background:
        radial-gradient(ellipse at top, var(--color-brand-tint) 0%, transparent 55%),
        linear-gradient(180deg, #fff 0%, var(--color-bg) 100%);
}
.hero > .wrap {
    max-width: var(--container-narrow);
    margin-inline: auto;
}
.hero .eyebrow {
    display: inline-block;
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-brand);
    background: var(--color-brand-soft);
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    margin-bottom: var(--sp-5);
}
.hero h1 {
    font-size: var(--fs-hero);
    letter-spacing: -0.03em;
    line-height: 1.05;
    margin-bottom: var(--sp-5);
    color: var(--color-ink);
}
.hero .lede {
    font-size: var(--fs-lg);
    color: var(--color-muted);
    max-width: 42rem;
    margin: 0 auto var(--sp-6);
}
.hero-actions { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }
.hero-proof {
    margin-top: var(--sp-6);
    display: flex;
    gap: var(--sp-5);
    justify-content: center;
    flex-wrap: wrap;
    color: var(--color-muted);
    font-size: var(--fs-sm);
}
.hero-proof > span { display: inline-flex; align-items: center; gap: 0.35rem; }
.hero-proof > span::before {
    content: "";
    width: 0.75rem; height: 0.75rem;
    border-radius: 50%;
    background: var(--color-success);
}

.section {
    max-width: var(--container);
    margin-inline: auto;
    padding: var(--sp-9) var(--sp-5);
}
.section.narrow { max-width: var(--container-narrow); }

.section-heading { text-align: center; margin-bottom: var(--sp-7); }
.section-heading h2 { font-size: var(--fs-2xl); margin-bottom: var(--sp-3); }
.section-heading p  { color: var(--color-muted); font-size: var(--fs-lg); max-width: 40rem; margin-inline: auto; }

.benefit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--sp-5);
}
.benefit-card {
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    padding: var(--sp-6);
    transition: transform var(--transition), box-shadow var(--transition);
}
.benefit-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.benefit-card h3 { font-size: var(--fs-md); }
.benefit-card p  { color: var(--color-muted); margin: 0; font-size: var(--fs-sm); }
.benefit-card .badge {
    display: inline-flex;
    width: 2.5rem; height: 2.5rem;
    border-radius: var(--radius);
    background: var(--color-brand-soft);
    color: var(--color-brand-ink);
    align-items: center; justify-content: center;
    font-weight: 700;
    margin-bottom: var(--sp-4);
}

.compare-strip {
    background: var(--color-ink);
    color: #fff;
    padding: var(--sp-7) var(--sp-5);
    margin: var(--sp-7) 0;
}
.compare-strip .wrap {
    max-width: var(--container-narrow);
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--sp-5);
}
.compare-strip h3 { color: #fff; margin: 0 0 var(--sp-2); font-size: var(--fs-md); }
.compare-strip p  { color: #cbd5e1; font-size: var(--fs-sm); margin: 0; }
.compare-strip .cross  { color: #fca5a5; font-weight: 700; margin-inline-end: 0.35rem; }
.compare-strip .check { color: #86efac; font-weight: 700; margin-inline-end: 0.35rem; }

.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: var(--sp-5);
}
.testimonial {
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    padding: var(--sp-6);
}
.testimonial blockquote {
    margin: 0 0 var(--sp-4);
    color: var(--color-body);
    font-size: var(--fs-md);
    line-height: 1.6;
}
.testimonial cite {
    font-style: normal;
    color: var(--color-muted);
    font-size: var(--fs-sm);
}
.testimonial cite strong { color: var(--color-ink); display: block; }

.cta-banner {
    text-align: center;
    background: linear-gradient(135deg, var(--color-brand) 0%, #0ea5a5 100%);
    color: #fff;
    border-radius: var(--radius-xl);
    padding: var(--sp-8) var(--sp-5);
    margin-inline: auto;
    max-width: var(--container-narrow);
}
.cta-banner h2 { color: #fff; font-size: var(--fs-2xl); }
.cta-banner p  { color: rgba(255, 255, 255, 0.85); margin-bottom: var(--sp-5); font-size: var(--fs-md); }
.cta-banner .btn { background: #fff; color: var(--color-brand-ink); }
.cta-banner .btn:hover { background: #f0fdfa; color: var(--color-brand-ink); }

/* --------------------------------------------------------------------------
   Pricing page
   -------------------------------------------------------------------------- */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--sp-5);
    align-items: stretch;
}
.plan-card {
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    padding: var(--sp-6);
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    position: relative;
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.plan-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }

/* "Current plan" callout on the pricing grid — green border + pill
   in the heading so the broker can tell at a glance which one is
   theirs. CTA is rendered as a dimmed span (not an anchor) so the
   tier they're already on doesn't pretend to be clickable. */
.plan-card.current {
    border-color: var(--color-success);
    box-shadow: 0 0 0 1px var(--color-success);
}
.plan-card .badge.current {
    margin-inline-start: 0.5rem;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: var(--color-success-soft);
    color: var(--color-success-ink);
    vertical-align: 0.15em;
}
.btn.disabled,
.btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}
.plan-card.popular {
    border-color: var(--color-brand);
    box-shadow: 0 0 0 3px var(--color-brand-soft), var(--shadow-lg);
    /* Reserve space at the top so the "Most popular" pill sits inside
       the card without overlapping the header copy. */
    padding-top: calc(var(--sp-6) + 1.75rem);
}
.plan-card.popular::before {
    content: "Most popular";
    position: absolute;
    top: var(--sp-4);
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-brand);
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    letter-spacing: 0.04em;
    /* Letter-spacing adds trailing space after the last glyph, which
       shifts the visible text left inside symmetric padding. A matching
       text-indent moves it back to true centre. */
    text-indent: 0.04em;
    text-transform: uppercase;
    text-align: center;
    line-height: 1;
}
.plan-card h3 { margin: 0; font-size: var(--fs-lg); }
.plan-card .price {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-ink);
    line-height: 1;
}
.plan-card .price small { font-size: var(--fs-sm); color: var(--color-muted); font-weight: 500; }
.plan-card .plan-limit { color: var(--color-muted); font-size: var(--fs-sm); margin: 0; }
.plan-card .plan-best  { color: var(--color-ink); font-weight: 600; margin: 0; font-size: var(--fs-sm); }
.plan-card ul.plan-features {
    padding: 0;
    list-style: none;
    margin: 0;
    display: grid;
    gap: 0.5rem;
    color: var(--color-body);
    font-size: var(--fs-sm);
}
.plan-card ul.plan-features li {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
}
.plan-card ul.plan-features li::before {
    content: "✓";
    color: var(--color-success);
    font-weight: 700;
    flex: none;
}
.plan-card .btn { margin-top: auto; }

.billing-toggle {
    display: inline-flex;
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: 999px;
    padding: 0.25rem;
    gap: 0.25rem;
    font-size: var(--fs-sm);
    margin-bottom: var(--sp-5);
}
.billing-toggle button {
    border: 0;
    background: transparent;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    cursor: pointer;
    color: var(--color-muted);
    font-weight: 600;
}
.billing-toggle button.active {
    background: var(--color-brand);
    color: #fff;
}

.pricing-assurances {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--sp-4);
    margin-top: var(--sp-7);
    padding: var(--sp-6);
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    text-align: center;
}
.pricing-assurances strong { display: block; color: var(--color-ink); font-size: var(--fs-md); }
.pricing-assurances p { color: var(--color-muted); font-size: var(--fs-sm); margin: 0; }

/* --------------------------------------------------------------------------
   Auth (signup/login/invite)
   -------------------------------------------------------------------------- */
.auth-shell {
    display: grid;
    place-items: center;
    min-height: calc(100vh - 5rem);
    padding: var(--sp-6) var(--sp-5);
}
.auth-card {
    max-width: 26rem;
    width: 100%;
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    padding: var(--sp-7);
    box-shadow: var(--shadow);
}
.auth-card h1 { font-size: var(--fs-xl); margin-bottom: var(--sp-2); }
.auth-card > p { color: var(--color-muted); margin-bottom: var(--sp-5); }
.auth-card .btn.google {
    width: 100%;
    background: var(--color-surface);
    color: var(--color-ink);
    border: 1px solid var(--color-line);
    margin-bottom: var(--sp-4);
}
.auth-divider {
    text-align: center;
    color: var(--color-mute-soft);
    font-size: var(--fs-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: var(--sp-4) 0;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}
.auth-divider::before, .auth-divider::after {
    content: ""; flex: 1;
    border-top: 1px solid var(--color-line);
}
.auth-card footer { text-align: center; margin-top: var(--sp-5); color: var(--color-muted); font-size: var(--fs-sm); }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
form fieldset {
    border: 0;
    padding: 0;
    margin: 0 0 var(--sp-4);
    display: grid;
    gap: var(--sp-4);
}
form legend {
    font-weight: 600;
    color: var(--color-ink);
    margin-bottom: var(--sp-2);
}
form label {
    display: grid;
    gap: 0.35rem;
    font-size: var(--fs-sm);
    color: var(--color-body);
    font-weight: 500;
}
form input[type="text"],
form input[type="email"],
form input[type="password"],
form input[type="number"],
form input[type="date"],
form input[type="datetime-local"],
form input[type="url"],
form select,
form textarea {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border-radius: var(--radius);
    border: 1px solid var(--color-line);
    background: var(--color-surface);
    color: var(--color-ink);
    transition: border-color var(--transition), box-shadow var(--transition);
}
form input:focus,
form select:focus,
form textarea:focus {
    outline: none;
    border-color: var(--color-brand);
    box-shadow: 0 0 0 3px var(--color-brand-soft);
}

/* Lighter, italic placeholder so it's visually subordinate to user-typed text. */
form input::placeholder,
form textarea::placeholder {
    color: var(--color-mute-soft);
    opacity: 0.7;
    font-weight: 400;
    font-style: italic;
}
form input::-webkit-input-placeholder,
form textarea::-webkit-input-placeholder {
    color: var(--color-mute-soft);
    opacity: 0.7;
    font-weight: 400;
    font-style: italic;
}
form .form-row { display: grid; gap: var(--sp-3); grid-template-columns: 1fr 1fr; }
@media (max-width: 40rem) { form .form-row { grid-template-columns: 1fr; } }

.field-error {
    color: var(--color-danger);
    font-size: var(--fs-xs);
    margin-top: 0.2rem;
}
.alert {
    border-radius: var(--radius);
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-4);
    font-size: var(--fs-sm);
}
.alert.error   { background: var(--color-danger-soft); color: var(--color-danger); }

/* In-app subscription banner. Rendered above the app header on every
   authenticated page when the brokerage is in a non-trivial billing
   state (past_due / canceling / wind_down). */
.app-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid transparent;
    font-size: var(--fs-sm);
}
.app-banner p { margin: 0; }
.app-banner a {
    color: inherit;
    text-decoration: underline;
    font-weight: 600;
    white-space: nowrap;
}
.app-banner.info {
    background: var(--color-brand-soft);
    color: var(--color-brand-ink);
    border-bottom-color: var(--color-brand);
}
.app-banner.warn {
    background: var(--color-warn-soft);
    color: var(--color-warn);
    border-bottom-color: var(--color-warn);
}
.app-banner.danger {
    background: var(--color-danger-soft);
    color: var(--color-danger);
    border-bottom-color: var(--color-danger);
}

/* Destructive-action surface: deep red border + soft tint so it can't
   be mistaken for a normal panel. Used by the brokerage-delete page
   and any future "danger zone" surfaces. */
.danger-panel {
    background: var(--color-danger-soft);
    border: 2px solid var(--color-danger);
    color: var(--color-ink);
}
.danger-panel h2 {
    color: var(--color-danger);
    font-weight: 700;
}
.danger-panel .danger-list {
    margin: var(--sp-3) 0;
    padding-left: 1.25rem;
}
.danger-panel .danger-list li {
    margin-bottom: 0.25rem;
}
.danger-panel .danger-form {
    margin-top: var(--sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    max-width: 28rem;
}
.danger-panel .danger-form label {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.danger-panel .danger-form label > span {
    color: var(--color-ink);
    font-weight: 500;
    font-size: var(--fs-sm);
}
.danger-panel .danger-form input {
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--color-danger);
    border-radius: var(--radius);
    background: var(--color-surface);
    font-size: var(--fs-md);
}
.danger-panel .danger-form input:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18);
}
/* Danger-zone block at the bottom of /app/team for brokers. */
.danger-zone {
    margin-top: var(--sp-6);
    padding: var(--sp-4) var(--sp-5);
    border: 1px dashed var(--color-danger);
    border-radius: var(--radius-lg);
    background: rgba(220, 38, 38, 0.03);
}
.danger-zone h3 {
    color: var(--color-danger);
    margin: 0 0 var(--sp-2);
    font-size: var(--fs-md);
    font-weight: 700;
}
.danger-zone p { margin: 0 0 var(--sp-3); color: var(--color-muted); }
.alert.success { background: var(--color-success-soft); color: var(--color-success-ink); }
.alert.info    { background: var(--color-brand-soft); color: var(--color-brand-ink); }

/* --------------------------------------------------------------------------
   App shell
   -------------------------------------------------------------------------- */
.page-app {
    background: var(--color-bg);
    min-height: 100vh;
}
/* --- App-wide top navigation -------------------------------------------- */
.app-header {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-line);
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
    position: sticky;
    top: 0;
    z-index: 30;
}
.app-header > nav {
    max-width: var(--container);
    margin-inline: auto;
    padding: 0.9rem var(--sp-5);
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--sp-5);
}

.app-nav {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    list-style: none;
    margin: 0;
    padding: 0.3rem;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-line);
    border-radius: 999px;
    justify-self: center;
}
.app-nav li { list-style: none; }
.app-nav li::marker { content: ""; }
.app-nav a {
    display: inline-flex;
    align-items: center;
    color: var(--color-muted);
    font-weight: 500;
    font-size: var(--fs-sm);
    padding: 0.45rem 0.95rem;
    border-radius: 999px;
    line-height: 1;
    transition: background var(--transition), color var(--transition);
}
.app-nav a:hover {
    color: var(--color-ink);
    text-decoration: none;
    background: var(--color-line-soft);
}
.app-nav a.active {
    color: var(--color-brand-ink);
    background: var(--color-brand-soft);
    text-decoration: none;
}

/* --- Right-aligned user menu (collapsible <details> dropdown) ---------- */
.user-menu { position: relative; }
.user-menu > summary { list-style: none; }
.user-menu > summary::-webkit-details-marker { display: none; }
.user-menu-trigger {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 0.25rem 0.5rem 0.25rem 0.25rem;
    border-radius: 999px;
    transition: background var(--transition);
}
.user-menu-trigger:hover { background: var(--color-line-soft); }
.user-menu .avatar {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: var(--color-brand-soft);
    color: var(--color-brand-ink);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: var(--fs-sm);
    border: 2px solid var(--color-surface);
    box-shadow: 0 0 0 1px var(--color-brand);
    overflow: hidden;
    object-fit: cover;
}
.user-menu .user-meta {
    text-align: start;
    display: grid;
    gap: 0;
    line-height: 1.2;
}
.user-menu .user-meta .user-name {
    margin: 0;
    color: var(--color-ink);
    font-weight: 600;
    font-size: var(--fs-sm);
}
.user-menu .user-meta .user-role {
    margin: 0;
    color: var(--color-muted);
    font-size: var(--fs-xs);
}
.user-menu-caret {
    color: var(--color-muted);
    font-size: 0.7rem;
    transition: transform var(--transition);
}
.user-menu[open] .user-menu-caret { transform: rotate(180deg); }

.user-menu-panel {
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    min-width: 14rem;
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--sp-2);
    z-index: 100;
    display: grid;
    gap: 0.15rem;
}
.user-menu-header {
    padding: var(--sp-2) var(--sp-3);
    border-bottom: 1px solid var(--color-line);
    margin-bottom: 0.25rem;
}
.user-menu-header .user-name { margin: 0; font-weight: 600; color: var(--color-ink); }
.user-menu-header .user-email { margin: 0; color: var(--color-muted); font-size: var(--fs-xs); }
.user-menu-header .user-brokerage { margin: 0; color: var(--color-mute-soft); font-size: var(--fs-xs); }
.user-menu-item {
    display: block;
    text-align: start;
    width: 100%;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--color-ink);
    text-decoration: none;
    font: inherit;
    padding: 0.5rem var(--sp-3);
    border-radius: var(--radius-sm);
    transition: background var(--transition);
}
.user-menu-item:hover,
.user-menu-item:focus-visible {
    background: var(--color-line-soft);
    text-decoration: none;
}
.user-menu-form { margin: 0; }

@media (max-width: 56rem) {
    .app-header > nav { grid-template-columns: auto auto; row-gap: var(--sp-3); }
    .app-nav { grid-column: 1 / -1; justify-self: stretch; }
    .user-menu { justify-self: end; }
}
@media (max-width: 36rem) {
    .user-menu .user-meta { display: none; }
}

/* --- Profile page ------------------------------------------------------- */
.profile-grid {
    display: grid;
    gap: var(--sp-4);
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    align-items: start;
}
.avatar-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-3);
}
.avatar-preview {
    width: 9rem;
    height: 9rem;
    border-radius: 50%;
    object-fit: cover;
    background: var(--color-brand-soft);
    color: var(--color-brand-ink);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 2.5rem;
    border: 3px solid var(--color-surface);
    box-shadow: 0 0 0 1px var(--color-line);
}
.avatar-fallback span { line-height: 1; }
.avatar-form {
    display: flex;
    gap: var(--sp-2);
    margin: 0;
}
.avatar-remove { margin: 0; }
.stacked-form {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}
.stacked-form label { display: flex; flex-direction: column; gap: 0.3rem; }
.stacked-form label > span { color: var(--color-ink); font-size: var(--fs-sm); font-weight: 500; }
.stacked-form input[disabled] { opacity: 0.65; background: var(--color-surface-alt); }
.stacked-form .meta { color: var(--color-muted); font-size: var(--fs-xs); margin: 0.1rem 0 0; }

/* Comment author avatar — small, leading the meta line. */
.comment-head {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: 0.2rem;
}
.avatar.small {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--color-brand-soft);
    color: var(--color-brand-ink);
    display: grid;
    place-items: center;
    font-size: 0.7rem;
    font-weight: 700;
    object-fit: cover;
}

.app-main {
    max-width: var(--container);
    margin-inline: auto;
    padding: var(--sp-6) var(--sp-5) var(--sp-8);
}

.page-title {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: var(--sp-6);
}
.page-title h1 { margin: 0; font-size: var(--fs-2xl); }
.page-title .subtitle { color: var(--color-muted); margin: 0; font-size: var(--fs-md); }

/* --------------------------------------------------------------------------
   Dashboard / transaction list
   -------------------------------------------------------------------------- */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--sp-4);
    margin-bottom: var(--sp-6);
}
.stat-card {
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    padding: var(--sp-5);
    display: block;
    color: inherit;
    text-decoration: none;
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.stat-card:hover,
.stat-card:focus-visible {
    transform: translateY(-2px);
    border-color: var(--color-brand);
    box-shadow: var(--shadow);
    text-decoration: none;
}
.stat-card.is-active {
    border-color: var(--color-brand);
    background: var(--color-brand-tint);
    box-shadow: 0 0 0 2px var(--color-brand-soft);
}
.stat-card.is-active:hover { transform: none; }
.stat-card .label { color: var(--color-muted); font-size: var(--fs-sm); margin: 0 0 0.35rem; }
.stat-card .value { font-family: var(--font-display); font-size: 2.25rem; font-weight: 700; color: var(--color-ink); line-height: 1; }
.stat-card .value.success { color: var(--color-success); }
.stat-card .value.warn    { color: var(--color-warn); }
/* Corrections-set number colors: Total black (default --color-ink),
   Needs Attention red, Active green, Pending orange, Sold blue. */
.stat-card .value.stat-attention { color: var(--color-danger); }
.stat-card .value.stat-active    { color: var(--color-success); }
.stat-card .value.stat-pending   { color: var(--color-warn); }
.stat-card .value.stat-sold      { color: #2563eb; }

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    align-items: center;
    margin-bottom: var(--sp-5);
}
.filter-bar form { display: flex; gap: var(--sp-2); }
.filter-bar input[type="search"] { min-width: 18rem; }

/* --------------------------------------------------------------------------
   Transactions list toolbar — single-row pill that holds icon search,
   status select, and the "Needs attention" toggle. Auto-submits on
   change (see inline script), so there's no separate Apply button
   eating horizontal or vertical space.
   -------------------------------------------------------------------------- */
.tx-toolbar {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 0.3rem 0.4rem 0.3rem 0.5rem;
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: 999px;
    margin-bottom: var(--sp-5);
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.tx-toolbar:focus-within {
    border-color: var(--color-brand);
    box-shadow: 0 0 0 3px var(--color-brand-soft);
}
/* Search input: claims every pixel the select + toggle don't need.
   `flex: 1 1 0` with `min-width: 0` is the canonical "fill remaining
   space, allowed to shrink below intrinsic content width" recipe in
   a flex row — without `min-width: 0` the input would refuse to
   shrink below its placeholder width on narrow viewports. */
.tx-toolbar-input {
    flex: 1 1 0;
    min-width: 0;
    padding: 0.55rem 0.85rem;
    border: 0;
    background: transparent;
    font-size: var(--fs-sm);
    color: var(--color-ink);
    outline: 0;
    box-shadow: none;
    text-decoration: none;
    appearance: none;
    -webkit-appearance: none;
}
.tx-toolbar-input:focus,
.tx-toolbar-input:focus-visible {
    outline: 0;
    box-shadow: none;
}
.tx-toolbar-input::placeholder {
    color: var(--color-mute-soft);
    font-style: italic;
}
/* Suppress every WebKit search pseudo-element so the input renders
   exactly the way the surrounding pill expects — no inset clear-X,
   no results-button stripe. */
.tx-toolbar-input::-webkit-search-decoration,
.tx-toolbar-input::-webkit-search-cancel-button,
.tx-toolbar-input::-webkit-search-results-button,
.tx-toolbar-input::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

/* Status select: sized to its content. `width: auto` + a generous-
   but-not-runaway max-width keeps the longest option ("All statuses")
   readable without letting the select dominate the toolbar the way it
   was before. `flex-shrink: 0` so it can't be squeezed smaller than
   its option text. */
.tx-toolbar-select {
    /* Sized to its content — the longest option is "All statuses" at
       ~11 ch, so capping at 12rem prevents the select from sprawling
       across the toolbar the way it did before. `flex-shrink: 0`
       (via `flex: 0 0 auto`) keeps it from being squeezed smaller. */
    flex: 0 0 auto;
    width: auto;
    max-width: 12rem;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-line);
    border-radius: 999px;
    padding: 0.4rem 1.75rem 0.4rem 0.8rem;
    font-size: var(--fs-sm);
    color: var(--color-ink);
    cursor: pointer;
    /* Inline-data SVG caret — no separate asset shipped. */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    background-size: 0.65rem auto;
    appearance: none;
    -webkit-appearance: none;
}
.tx-toolbar-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-line);
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--color-ink);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.tx-toolbar-toggle:hover { border-color: var(--color-brand); }
.tx-toolbar-toggle input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 0.95rem;
    height: 0.95rem;
    border: 1.5px solid var(--color-mute-soft);
    border-radius: 0.25rem;
    background: var(--color-surface);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition);
}
.tx-toolbar-toggle input[type="checkbox"]:checked {
    background: var(--color-brand);
    border-color: var(--color-brand);
}
.tx-toolbar-toggle input[type="checkbox"]:checked::after {
    content: "";
    width: 0.45rem;
    height: 0.25rem;
    border-left: 1.5px solid #fff;
    border-bottom: 1.5px solid #fff;
    transform: translateY(-1px) rotate(-45deg);
}
.tx-toolbar-toggle:has(input[type="checkbox"]:checked) {
    background: var(--color-brand-soft);
    border-color: var(--color-brand);
    color: var(--color-brand-ink);
}

@media (max-width: 36rem) {
    .tx-toolbar {
        border-radius: var(--radius-lg);
        flex-wrap: wrap;
    }
    .tx-toolbar-input { flex: 1 1 100%; }
}

.transaction-list {
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.transaction-list > ul { list-style: none; margin: 0; padding: 0; }

/* Header strip + row share the same grid template so columns line up
   pixel-perfect across the header → rows → sentinel boundary. Six
   tracks: property | price | type | age | status | open-button. */
.tx-list-head,
.transaction-row {
    display: grid;
    grid-template-columns: 2fr 0.9fr 0.9fr 0.9fr 0.9fr auto;
    gap: var(--sp-4);
    align-items: center;
    padding: var(--sp-3) var(--sp-5);
}
.tx-list-head {
    background: var(--color-surface-alt);
    border-bottom: 1px solid var(--color-line);
    padding-block: 0.5rem;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    color: var(--color-muted);
}
.tx-list-col {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    text-decoration: none;
    color: inherit;
    padding: 0.25rem 0;
    border-radius: var(--radius-sm);
    transition: color var(--transition);
}
.tx-list-col:hover { color: var(--color-ink); text-decoration: none; }
.tx-list-col.is-active { color: var(--color-brand-ink); }
.tx-list-col .tx-list-arrow {
    color: var(--color-mute-soft);
    font-size: 0.7rem;
    line-height: 1;
}
.tx-list-col.is-active .tx-list-arrow { color: var(--color-brand); }
.tx-list-col.is-spacer { padding: 0; cursor: default; }

.transaction-row {
    padding-block: var(--sp-4);
    border-bottom: 1px solid var(--color-line-soft);
    transition: background var(--transition);
}
.transaction-row:last-child { border-bottom: 0; }
.transaction-row:hover { background: var(--color-surface-alt); }
.tx-cell { min-width: 0; }
.tx-cell.tx-cell-property { display: grid; gap: 0.1rem; }
.tx-cell.tx-cell-property .property {
    color: var(--color-ink);
    font-weight: 600;
    text-decoration: none;
}
.tx-cell.tx-cell-property .property:hover {
    color: var(--color-brand-ink);
    text-decoration: none;
}
.tx-cell.tx-cell-property .meta {
    color: var(--color-muted);
    font-size: var(--fs-sm);
    margin: 0;
}
.tx-cell.tx-cell-price,
.tx-cell.tx-cell-type,
.tx-cell.tx-cell-age {
    color: var(--color-ink);
    font-size: var(--fs-sm);
}
.tx-cell.tx-cell-age {
    color: var(--color-muted);
}
.tx-cell.tx-cell-age time { white-space: nowrap; }
/* Action column now holds Open + (broker-only) Delete side by side. */
.tx-cell.tx-cell-action {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    justify-content: flex-end;
}
.tx-cell.tx-cell-action .inline-form { display: inline; margin: 0; }

.transaction-sentinel {
    display: flex;
    justify-content: center;
    padding: var(--sp-4);
    color: var(--color-muted);
    font-size: var(--fs-sm);
    border-bottom: 0;
}
.transaction-sentinel .loader::after {
    content: "";
    display: inline-block;
    width: 0.55rem;
    height: 0.55rem;
    margin-left: 0.4rem;
    border: 2px solid var(--color-line);
    border-top-color: var(--color-brand);
    border-radius: 50%;
    animation: tx-sentinel-spin 0.7s linear infinite;
    vertical-align: -1px;
}
@keyframes tx-sentinel-spin {
    to { transform: rotate(360deg); }
}

@media (max-width: 60rem) {
    /* Hide the header on narrow viewports — the rows collapse to a
       stacked card layout where column labels don't apply. */
    .tx-list-head { display: none; }
    .transaction-row {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "property action"
            "meta     meta"
            "status   status";
        gap: var(--sp-2) var(--sp-3);
    }
    .tx-cell-property { grid-area: property; }
    .tx-cell-action   { grid-area: action; }
    .tx-cell-price,
    .tx-cell-type,
    .tx-cell-age      { grid-area: meta; display: inline; color: var(--color-muted); font-size: var(--fs-xs); }
    .tx-cell-price::after,
    .tx-cell-type::after,
    .tx-cell-age::after { content: "  ·  "; color: var(--color-mute-soft); }
    .tx-cell-age::after { content: ""; }
    .tx-cell-status   { grid-area: status; }
}

.empty-state {
    padding: var(--sp-8) var(--sp-5);
    text-align: center;
    color: var(--color-muted);
}
.empty-state h3 { color: var(--color-ink); margin-bottom: var(--sp-2); }
.empty-state p  { margin-bottom: var(--sp-5); }

/* --------------------------------------------------------------------------
   Status chips
   -------------------------------------------------------------------------- */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    font-size: var(--fs-xs);
    font-weight: 600;
    border: 1px solid transparent;
    background: var(--color-line-soft);
    color: var(--color-muted);
}
.chip::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: currentColor; opacity: .8; }
.chip.status-active    { background: var(--color-brand-soft); color: var(--color-brand-ink); }
.chip.status-pending   { background: var(--color-warn-soft); color: var(--color-warn); }
.chip.status-sold      { background: #dbeafe; color: #1e40af; }
.chip.status-canceled  { background: var(--color-danger-soft); color: var(--color-danger); }
.chip.status-withdrawn { background: var(--color-line-soft); color: var(--color-muted); }
.chip.role-broker      { background: var(--color-brand-soft); color: var(--color-brand-ink); }
.chip.role-agent       { background: #ede9fe; color: #5b21b6; }
.chip.role-coordinator { background: #fef3c7; color: #92400e; }

/* --------------------------------------------------------------------------
   Transaction detail
   -------------------------------------------------------------------------- */
.detail-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--sp-6);
    align-items: start;
}
@media (max-width: 60rem) { .detail-grid { grid-template-columns: 1fr; } }

.panel {
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    padding: var(--sp-6);
    margin-bottom: var(--sp-5);
}
.panel h2 {
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--color-ink);
    letter-spacing: -0.005em;
    margin-bottom: var(--sp-4);
}
.panel.sidebar h2 { font-size: var(--fs-md); }
.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
}
.sidebar-header h2 { margin: 0; }
.locked-hint {
    color: var(--color-muted);
    font-weight: 400;
    font-style: italic;
}
select:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.property-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--sp-4);
    align-items: flex-start;
    margin-bottom: var(--sp-4);
}
.property-header h1 { margin: 0 0 var(--sp-2); font-size: var(--fs-2xl); }
.property-header .meta { color: var(--color-muted); margin: 0; }

.detail-grid dl { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-2) var(--sp-4); margin: 0; }
.detail-grid dt { color: var(--color-muted); font-size: var(--fs-sm); }
.detail-grid dd { margin: 0; color: var(--color-ink); font-weight: 500; }

/* --------------------------------------------------------------------------
   Checklist
   -------------------------------------------------------------------------- */
.compliance-summary {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    margin-bottom: var(--sp-5);
}
.compliance-summary .score {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-ink);
}
.compliance-summary progress.progress {
    flex: 1;
    height: 0.75rem;
    border: 0;
    border-radius: 999px;
    overflow: hidden;
    background: var(--color-line-soft);
    appearance: none;
    -webkit-appearance: none;
}
.compliance-summary progress.progress::-webkit-progress-bar {
    background: var(--color-line-soft);
    border-radius: 999px;
}
.compliance-summary progress.progress::-webkit-progress-value {
    background: linear-gradient(90deg, var(--color-brand) 0%, var(--color-success) 100%);
    border-radius: 999px;
    transition: width 400ms cubic-bezier(.3,.7,.3,1);
}
.compliance-summary progress.progress::-moz-progress-bar {
    background: linear-gradient(90deg, var(--color-brand) 0%, var(--color-success) 100%);
    border-radius: 999px;
}
.compliance-banner {
    background: var(--color-success-soft);
    color: var(--color-success-ink);
    border: 1px solid var(--color-success);
    border-radius: var(--radius-lg);
    padding: var(--sp-5);
    display: flex;
    gap: var(--sp-4);
    align-items: center;
    margin-bottom: var(--sp-5);
    animation: pop-in 400ms ease-out;
}
.compliance-banner strong { display: block; font-size: var(--fs-md); color: var(--color-success-ink); }
.compliance-banner::before {
    content: "✓";
    background: var(--color-success);
    color: #fff;
    font-weight: 700;
    width: 2.5rem; height: 2.5rem;
    border-radius: 50%;
    display: grid; place-items: center;
    font-size: 1.25rem;
    flex: none;
}
.compliance-banner.locked {
    background: var(--color-surface-alt);
    color: var(--color-ink);
    border-color: var(--color-line);
}
.compliance-banner.locked strong { color: var(--color-ink); }
.compliance-banner.locked::before {
    content: "🔒";
    background: var(--color-ink);
    color: #fff;
    font-size: 1rem;
}
.upload-locked {
    font-style: italic;
    margin: 0;
}
.comment-ref {
    margin: var(--sp-1) 0 0 0;
    font-size: var(--fs-xs);
}
.comment-ref a {
    color: var(--color-brand-ink);
    text-decoration: none;
}
.comment-ref a:hover { text-decoration: underline; }

.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2); }
.checklist-item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--radius);
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    transition: background var(--transition), border-color var(--transition);
}
.checklist-item.is-drag-over {
    background: var(--color-brand-soft);
    border-color: var(--color-brand);
    outline: 2px dashed var(--color-brand);
    outline-offset: -4px;
}
.checklist-item.is-drag-over * { pointer-events: none; }
.upload-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.92);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    border-radius: var(--radius);
    pointer-events: none;
    z-index: 2;
}
.upload-overlay .upload-status {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--color-ink);
}
.upload-overlay .upload-progress {
    width: min(60%, 18rem);
    height: 0.5rem;
}
.checklist-item-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2) var(--sp-3);
}
.checklist-item-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}
.checklist-item.is-approved {
    background: var(--color-success-soft);
    border-color: #bbf7d0;
}
.checklist-item.is-denied {
    background: var(--color-danger-soft);
    border-color: #fecaca;
}
/* Role-aware "needs your attention" highlight: a denied form (agent
   view) or a pending upload awaiting review (broker/CO view). Left
   accent bar so it reads at a glance even inside a long list. */
.checklist-item.is-attention {
    border-left: 4px solid var(--color-warn);
    box-shadow: inset 0 0 0 1px var(--color-warn-soft);
}
.checklist-item.is-denied.is-attention {
    border-left-color: var(--color-danger);
}
.checklist-item .title {
    color: var(--color-ink);
    font-weight: 400;
    font-size: var(--fs-md);
    line-height: 1.4;
    margin: 0;
    word-break: break-word;
}
.checklist-item.is-approved .title { color: var(--color-success-ink); }
.checklist-item.is-denied .title { color: var(--color-danger); }
.checklist-item .checklist-text > .meta { font-style: italic; }
.checklist-item .category { font-size: var(--fs-xs); color: var(--color-muted); margin: 0; }
.checklist-item .audit { font-size: var(--fs-xs); color: var(--color-muted); margin: 0; }

/* Review action buttons (Approve / Deny) — visible to brokers and TCs. */
.checklist-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: flex-start;
}
.review-action { margin: 0; }
.btn.small.approve {
    background: var(--color-surface);
    color: var(--color-success-ink);
    border: 1px solid var(--color-success);
}
.btn.small.approve:hover { background: var(--color-success-soft); }
.btn.small.approve.active {
    background: var(--color-success);
    color: #fff;
    border-color: var(--color-success);
}
.btn.small.deny {
    background: var(--color-surface);
    color: var(--color-danger);
    border: 1px solid var(--color-danger);
}
.btn.small.deny:hover { background: var(--color-danger-soft); }
.btn.small.deny.active {
    background: var(--color-danger);
    color: #fff;
    border-color: var(--color-danger);
}

/* Read-only state pill — the Agent's view of an item's review status. */
.status-pill {
    display: inline-block;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: 1px solid transparent;
}
.status-pill.status-pending  { background: var(--color-warn-soft); color: var(--color-warn); }
.status-pill.status-approved { background: var(--color-success-soft); color: var(--color-success-ink); }
.status-pill.status-denied   { background: var(--color-danger-soft);  color: var(--color-danger); }
.status-pill.status-awaiting { background: var(--color-surface-alt); color: var(--color-muted); font-style: italic; }

/* Comment threads — both per-item (compact) and per-transaction (panel). */
.item-comments,
.comment-thread {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
    display: grid;
    gap: 0.5rem;
}
.item-comments li,
.comment-thread li {
    background: var(--color-surface-alt);
    border-left: 3px solid var(--color-line);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.75rem;
}
.comment-body { margin: 0; color: var(--color-ink); white-space: pre-wrap; }
.comment-meta { color: var(--color-muted); font-size: var(--fs-xs); }
.inline-comment,
.comment-compose {
    margin-top: 0.5rem;
    display: grid;
    gap: 0.4rem;
}
.inline-comment textarea,
.comment-compose textarea {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    font: inherit;
    resize: vertical;
}
.inline-comment textarea:focus,
.comment-compose textarea:focus {
    outline: none;
    border-color: var(--color-brand);
}
.item-comment-form { margin-top: 0.5rem; }

/* Role-change form on the team page — broker-only inline select. */
.role-change {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}
.role-change select {
    padding: 0.3rem 0.5rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-line);
    background: var(--color-surface);
}

@keyframes pop-in {
    from { transform: scale(0.95); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition: none !important;
        animation: none !important;
    }
    html { scroll-behavior: auto; }
}

/* --------------------------------------------------------------------------
   Documents
   -------------------------------------------------------------------------- */
.upload-area {
    border: 2px dashed var(--color-line);
    border-radius: var(--radius-lg);
    padding: var(--sp-6);
    text-align: center;
    background: var(--color-surface-alt);
    transition: border-color var(--transition), background var(--transition);
}
.upload-area:hover, .upload-area:focus-within {
    border-color: var(--color-brand);
    background: var(--color-brand-tint);
}
.upload-area p { color: var(--color-muted); margin: 0 0 var(--sp-3); font-size: var(--fs-sm); }
.upload-area label.filepicker {
    display: inline-block;
    margin-top: var(--sp-2);
}

.document-group + .document-group { margin-top: var(--sp-5); }
.document-group h3 { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-muted); margin-bottom: var(--sp-3); }
.document-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2); }
.document-item {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: var(--sp-4);
    align-items: center;
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--radius);
    background: var(--color-surface);
    border: 1px solid var(--color-line);
}
.document-item .file-icon {
    width: 2.25rem; height: 2.25rem;
    border-radius: var(--radius-sm);
    background: var(--color-brand-soft);
    color: var(--color-brand-ink);
    display: grid; place-items: center;
    font-weight: 700;
    font-size: var(--fs-xs);
    text-transform: uppercase;
}
.document-item .meta { color: var(--color-muted); font-size: var(--fs-xs); margin: 0; }
.document-item .meta .signed { color: var(--color-success-ink); font-weight: 600; }
.document-item a.filename { color: var(--color-ink); font-weight: 500; }
.document-item a.filename:hover { color: var(--color-brand-ink); }

/* --------------------------------------------------------------------------
   Team
   -------------------------------------------------------------------------- */
.member-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--sp-3);
}
.member-card {
    display: flex;
    gap: var(--sp-4);
    align-items: center;
    padding: var(--sp-4);
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
}
.member-card .avatar {
    width: 2.75rem; height: 2.75rem;
    border-radius: 50%;
    background: var(--color-brand-soft);
    color: var(--color-brand-ink);
    display: grid; place-items: center;
    font-weight: 700;
    object-fit: cover;
    flex-shrink: 0;
}
.member-card .name { margin: 0; color: var(--color-ink); font-weight: 600; }
.member-card .email { margin: 0; color: var(--color-muted); font-size: var(--fs-sm); }
.member-card .chip { margin-inline-start: auto; }

/* Members roster — true tabular layout so columns align across rows and
   the labels live in the header once, not on every row. */
.table-scroll { overflow-x: auto; }
.member-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
}
.member-table th,
.member-table td {
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--color-line-soft);
    text-align: start;
    vertical-align: middle;
}
.member-table tbody tr:last-child td { border-bottom: 0; }
.member-table thead th {
    color: var(--color-muted);
    font-weight: 600;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--color-line);
}
/* The identity column absorbs the slack so the Role + Actions columns
   hug their content on the right instead of the whole table reading as
   right-justified. */
.member-table td:first-child,
.member-table th:first-child { width: 100%; }
.member-table .role-col { white-space: nowrap; }
.member-table th.actions,
.member-table td.actions {
    text-align: end;
    white-space: nowrap;
}
.member-table .inline-form { display: inline; margin: 0; }
/* The global `form select { width: 100% }` would otherwise collapse the
   role dropdown to the width of its (content-sized) cell. Give it a real
   width so it isn't crunched, and keep the select + Update button on one
   line. */
.member-table .role-change { flex-wrap: nowrap; }
.member-table .role-change select {
    width: auto;
    min-width: 11rem;
}

.member-identity {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}
.member-identity .avatar {
    width: 2.5rem; height: 2.5rem;
    border-radius: 50%;
    background: var(--color-brand-soft);
    color: var(--color-brand-ink);
    display: grid; place-items: center;
    font-weight: 700;
    object-fit: cover;
    flex-shrink: 0;
}
.member-name-block { display: flex; flex-direction: column; line-height: 1.3; }
.member-name-block .name { color: var(--color-ink); font-weight: 600; }
.member-name-block .email { color: var(--color-muted); font-size: var(--fs-sm); }

/* --------------------------------------------------------------------------
   Pending invitations — show + copy link
   -------------------------------------------------------------------------- */
.pending-invite .invite-meta { flex: 1; min-width: 0; }
.pending-invite .invite-link-row {
    margin-top: var(--sp-2);
    font-size: var(--fs-xs);
}
.pending-invite .invite-link-row > summary {
    cursor: pointer;
    color: var(--color-brand-ink);
    font-weight: 500;
    list-style: none;
    user-select: none;
}
.pending-invite .invite-link-row > summary::-webkit-details-marker { display: none; }
.pending-invite .invite-link-row[open] > summary { color: var(--color-muted); }
.pending-invite .invite-link-copy {
    display: flex;
    gap: var(--sp-2);
    margin-top: var(--sp-2);
    align-items: center;
}
.pending-invite .invite-link-copy input {
    flex: 1;
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 0.78rem;
    background: var(--color-surface-alt);
    color: var(--color-ink);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-sm);
    padding: 0.4rem 0.6rem;
    min-width: 0;
}
.pending-invite .invite-actions {
    display: flex;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
    flex-wrap: wrap;
}
.pending-invite .invite-actions form { margin: 0; }

/* --------------------------------------------------------------------------
   New transaction form (PDF mockup parity)
   -------------------------------------------------------------------------- */
.tx-form {
    display: grid;
    gap: var(--sp-5);
}
.tx-form fieldset {
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--sp-4);
}
.field-hint {
    margin: var(--sp-2) 0 0;
    font-size: var(--fs-xs);
    color: var(--color-muted);
}
.tx-form .field-hint {
    margin: -0.25rem 0 var(--sp-3);
    font-size: var(--fs-xs);
    color: var(--color-muted);
}
.tx-form .field-hint em {
    font-style: normal;
    font-weight: 600;
    color: var(--color-ink);
}
.tx-form legend {
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--color-ink);
    margin-bottom: var(--sp-2);
    padding: 0;
}
.tx-form label > span {
    font-size: var(--fs-sm);
    color: var(--color-muted);
    font-weight: 500;
}
.tx-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4) var(--sp-5);
}
.tx-form button[type="submit"] {
    justify-self: start;
    margin-top: var(--sp-2);
}
@media (max-width: 48rem) {
    .tx-form .form-row { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Property header on the show page
   -------------------------------------------------------------------------- */
.property-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
}

/* The status-control card groups "what status is it now" (the chip) with
   "change it to..." (the form). A subtle border + matching surface make
   them read as a single intentional object, with a left-border on the
   change-form acting as a visual divider rather than the previous
   uncontained sprawl. */
.status-control {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 0.5rem 0.75rem;
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
}
.status-update {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    margin: 0;
    padding-left: var(--sp-3);
    border-left: 1px solid var(--color-line);
}
.status-update label {
    color: var(--color-muted);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}
.status-update select {
    padding: 0.35rem 0.6rem;
    border-radius: var(--radius-sm);
    background: var(--color-surface-alt);
    border: 1px solid var(--color-line);
    font-size: var(--fs-sm);
    color: var(--color-ink);
    min-width: 8rem;
}
@media (max-width: 36rem) {
    .status-control { flex-direction: column; align-items: stretch; }
    .status-update {
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid var(--color-line);
        padding-top: var(--sp-2);
    }
}

/* Sidebar Details panel — give the Edit button real space to breathe
   instead of butting straight into the bottom of the description list. */
.panel.sidebar dl + .btn {
    margin-top: var(--sp-5);
    display: inline-flex;
}

/* --------------------------------------------------------------------------
   Grouped checklist
   -------------------------------------------------------------------------- */
.checklist-group {
    margin-top: var(--sp-5);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--color-line-soft);
}
.checklist-group:first-of-type {
    border-top: 0;
    padding-top: 0;
    margin-top: var(--sp-2);
}
.checklist-group-header {
    margin-bottom: var(--sp-3);
}
.checklist-group-header h3 {
    font-size: var(--fs-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-muted);
    margin: 0 0 var(--sp-1);
}
.checklist-group-header .meta {
    margin: 0 0 var(--sp-2);
    color: var(--color-muted);
    font-size: var(--fs-xs);
}
.checklist-group.complete .checklist-group-header h3 {
    color: var(--color-success-ink);
}

/* Accordion: each category is a <details>; its <summary> is the
   group header. Hide the native marker and draw our own chevron that
   flips when the section is open. */
details.checklist-group > summary {
    cursor: pointer;
    list-style: none;
    display: block;
    position: relative;
    padding-right: 1.75rem;
}
details.checklist-group > summary::-webkit-details-marker { display: none; }
details.checklist-group > summary::after {
    /* Match the visual weight of the transactions-list sort arrow
       (dark teal brand-ink), but a touch larger so the disclosure
       reads as a primary affordance on each group header. */
    content: "▶";
    position: absolute;
    right: 0.25rem;
    top: 0.15rem;
    color: var(--color-brand-ink);
    font-size: 1.05em;
    line-height: 1;
    transition: transform 120ms ease-out;
}
details.checklist-group[open] > summary::after {
    content: "▼";
    color: var(--color-brand-ink);
}
details.checklist-group > summary:hover h3 { color: var(--color-ink); }

/* Bundled-disclosures line under a contract form on the checklist. */
.checklist-text .form-includes {
    margin: 0.15rem 0 0;
    font-size: var(--fs-xs);
    color: var(--color-muted);
    font-style: italic;
}

progress.progress.small {
    height: 0.4rem;
}

.checklist-item .checklist-text { display: flex; flex-direction: column; gap: 0.25rem; }
.checklist-item .form-code {
    background: var(--color-brand-soft);
    color: var(--color-brand-ink);
    padding: 0.1rem 0.45rem;
    border-radius: 0.35rem;
    font-size: var(--fs-xs);
    font-family: ui-monospace, SFMono-Regular, monospace;
    letter-spacing: 0.02em;
}
.checklist-item .badge {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    line-height: 1.4;
}
.checklist-item .badge.required { background: var(--color-warn-soft); color: var(--color-warn); }
.checklist-item .badge.optional { background: var(--color-line-soft); color: var(--color-mute-soft); }
.checklist-item.is-approved .badge.required {
    background: var(--color-success-soft);
    color: var(--color-success-ink);
}
.checklist-item .audit { color: var(--color-muted); font-size: var(--fs-xs); margin: 0; }
.checklist-item .meta { color: var(--color-muted); font-size: var(--fs-xs); margin: 0; }

.item-docs {
    list-style: none;
    margin: 0.4rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.25rem;
}
.item-docs li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--fs-xs);
}
.item-docs .doc-preview { padding: 0.1rem 0.45rem; }
.item-docs .doc-delete { margin: 0 0 0 auto; }
/* The button carries `.btn.ghost.small.danger`. `.btn.danger` declares
   a solid-red background later in the cascade than `.btn.ghost`, which
   would paint red-on-red here. Re-assert the ghost background so the
   pill reads as "destructive-ghost", not "destructive-filled". */
.item-docs .doc-delete .btn.small.danger {
    background: transparent;
    color: var(--color-danger);
    padding: 0.1rem 0.45rem;
    font-size: var(--fs-xs);
}
.item-docs .doc-delete .btn.small.danger:hover {
    background: var(--color-danger-soft);
    color: var(--color-danger);
}
.item-docs a { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--color-brand-ink); }
.item-docs a:hover { color: var(--color-ink); }
.item-docs .ext {
    background: var(--color-line-soft);
    border-radius: 0.25rem;
    padding: 0.05rem 0.35rem;
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 0.6rem;
    text-transform: uppercase;
    color: var(--color-muted);
}
.item-docs small { color: var(--color-mute-soft); }

/* --------------------------------------------------------------------------
   Document preview lightbox (<dialog> element)
   -------------------------------------------------------------------------- */
.lightbox {
    width: min(96vw, 1100px);
    max-width: 96vw;
    height: min(92vh, 900px);
    max-height: 92vh;
    border: none;
    border-radius: var(--radius-lg);
    padding: 0;
    background: var(--color-surface);
    color: var(--color-ink);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
    overflow: hidden;
}
.lightbox::backdrop {
    background: rgba(15, 23, 42, 0.72);
    backdrop-filter: blur(2px);
}
.lightbox-head {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--color-line);
    background: var(--color-surface-alt);
}
.lightbox-title {
    flex: 1;
    margin: 0;
    font-weight: 500;
    color: var(--color-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lightbox-body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(100% - 3.5rem);
    background: var(--color-surface-alt);
    overflow: auto;
}
.lightbox-body > img,
.lightbox-body > video,
.lightbox-body > audio {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    background: #000;
}
.lightbox-body > iframe {
    width: 100%;
    height: 100%;
    border: 0;
    background: #fff;
}
.lightbox-fallback {
    padding: var(--sp-6);
    color: var(--color-muted);
}

.checklist-actions details {
    position: relative;
}
.checklist-actions summary {
    cursor: pointer;
    list-style: none;
}
.checklist-actions summary::-webkit-details-marker { display: none; }
.inline-upload {
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.6rem;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
}
.inline-upload input[type="file"] { font-size: var(--fs-xs); }
/* Modal that pops up after a single-click Deny so the reviewer can
   optionally leave a note. Driven by `static/js/deny-flow.js`. */
.modal-dialog {
    width: min(92vw, 480px);
    max-width: 92vw;
    border: none;
    border-radius: var(--radius-lg);
    padding: 0;
    background: var(--color-surface);
    color: var(--color-ink);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.modal-dialog::backdrop {
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(2px);
}
.modal-dialog-body {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    padding: var(--sp-5);
}
.modal-dialog-body h3 {
    margin: 0;
    font-size: var(--fs-lg);
}
.modal-dialog-body textarea {
    font: inherit;
    font-size: var(--fs-sm);
    resize: vertical;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    min-height: 5rem;
}
.dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-2);
}

.checklist-add {
    margin-top: var(--sp-5);
    padding-top: var(--sp-4);
    border-top: 1px dashed var(--color-line);
}
.checklist-add h3 {
    font-size: var(--fs-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-muted);
    margin-bottom: var(--sp-2);
}
.checklist-add .or-divider {
    color: var(--color-mute-soft);
    text-transform: uppercase;
    font-size: var(--fs-xs);
    letter-spacing: 0.1em;
    align-self: center;
    padding: 0 0.25rem;
}
.checklist-add .checkbox {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--fs-sm);
    color: var(--color-muted);
}
.checklist-add .checkbox input { margin: 0; }

/* --------------------------------------------------------------------------
   Auth: signup honeypot + proof-of-work indicator
   -------------------------------------------------------------------------- */
/* Honeypot — visually and accessibly hidden, but still rendered so bots that
   scrape the DOM and fill every input expose themselves. We deliberately
   avoid `display:none` so headless browsers see a real, focusable input. */
.hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.pow-status {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.75rem;
    margin: var(--sp-3) 0 var(--sp-2);
    border-radius: var(--radius);
    background: var(--color-line-soft);
    color: var(--color-muted);
    font-size: var(--fs-xs);
    transition: background var(--transition), color var(--transition);
}
.pow-status .dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--color-mute-soft);
    animation: pow-pulse 1.2s ease-in-out infinite;
}
@keyframes pow-pulse {
    0%, 100% { opacity: 0.4; transform: scale(0.85); }
    50%      { opacity: 1; transform: scale(1.1); }
}
.pow-status.done {
    background: var(--color-success-soft);
    color: var(--color-success-ink);
}
.pow-status.done .dot {
    background: var(--color-success);
    animation: none;
}
@media (prefers-reduced-motion: reduce) {
    .pow-status .dot { animation: none; }
}

.hint-list {
    text-align: start;
    color: var(--color-muted);
    font-size: var(--fs-sm);
    list-style: disc;
    margin: var(--sp-3) 0 var(--sp-4);
    padding-inline-start: 1.25rem;
}
.hint-list li { margin-bottom: var(--sp-1); }

/* --------------------------------------------------------------------------
   Admin tables
   -------------------------------------------------------------------------- */
.admin-table-wrap { padding: 0; overflow-x: auto; }
.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
}
.admin-table th, .admin-table td {
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--color-line-soft);
    text-align: start;
    vertical-align: top;
}
.admin-table thead th {
    position: sticky;
    top: 0;
    background: var(--color-surface);
    color: var(--color-muted);
    font-weight: 600;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--color-line);
}
.admin-table code {
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 0.78rem;
    color: var(--color-ink);
}
.admin-table tr:hover { background: var(--color-surface-alt); }
.admin-table th.num, .admin-table td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.admin-table th.actions, .admin-table td.actions {
    text-align: right;
    white-space: nowrap;
}
.admin-table .inline-form { display: inline; margin: 0; }
.admin-table .badge.comp {
    display: inline-block;
    margin-inline-start: 0.4rem;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: var(--color-success-soft);
    color: var(--color-success-ink);
    vertical-align: 0.1em;
}

/* Sub-nav across the three admin pages — sits where the old single
   cross-link button lived. Pill-style links, brand-colored active. */
.admin-subnav {
    display: inline-flex;
    gap: var(--sp-1);
    padding: 0.25rem;
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: 999px;
}
.admin-subnav a {
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    color: var(--color-muted);
    text-decoration: none;
    font-size: var(--fs-sm);
    font-weight: 500;
    transition: background var(--transition), color var(--transition);
}
.admin-subnav a:hover { color: var(--color-ink); background: var(--color-surface-alt); }
.admin-subnav a.active {
    background: var(--color-brand);
    color: #fff;
}

/* Used by admin pages that need a small right-aligned action button
   block beneath the page-title row (Tiers list "+ New tier"). */
.page-actions {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 var(--sp-4);
}
.admin-table tr.row-warn { background: rgba(180, 83, 9, 0.04); }
.admin-table tr.row-warn:hover { background: rgba(180, 83, 9, 0.08); }
.admin-table .ua-cell {
    max-width: 18rem;
    color: var(--color-muted);
    word-break: break-all;
}
.admin-table .empty-row {
    text-align: center;
    color: var(--color-mute-soft);
    padding: var(--sp-6);
}

.audit-pill {
    display: inline-flex;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: var(--fs-xs);
    font-weight: 600;
    background: var(--color-line-soft);
    color: var(--color-muted);
}
.audit-pill.ok      { background: var(--color-success-soft); color: var(--color-success-ink); }
.audit-pill.fail    { background: var(--color-danger-soft);  color: var(--color-danger); }
.audit-pill.blocked { background: var(--color-warn-soft);    color: var(--color-warn); }
.audit-pill.neutral { background: var(--color-brand-soft);   color: var(--color-brand-ink); }

/* Key/value list used on admin detail pages. Two-column grid so
   labels right-align against their values without a literal table. */
.kv-list {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.4rem var(--sp-3);
    margin: 0 0 var(--sp-3);
    font-size: var(--fs-sm);
}
.kv-list dt {
    color: var(--color-muted);
    font-weight: 600;
}
.kv-list dd {
    margin: 0;
    word-break: break-all;
}
.kv-list code {
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 0.78rem;
}
.kv-list em {
    color: var(--color-muted);
    font-style: italic;
}
a.external {
    margin-inline-start: 0.5rem;
    font-size: var(--fs-xs);
    color: var(--color-brand-ink);
}

/* --------------------------------------------------------------------------
   Misc
   -------------------------------------------------------------------------- */
.error-page {
    max-width: 40rem;
    margin: var(--sp-9) auto;
    text-align: center;
    padding: var(--sp-6);
}
.error-page h1 {
    font-family: var(--font-display);
    font-size: 4rem;
    color: var(--color-brand);
}

/* --------------------------------------------------------------------------
   Brand book (/brand)
   The canonical brand book page. Mirrors the printable PDF kept under
   /static/brand/. Layout: hero band, then a sticky table of contents on
   desktop with the long-form content next to it.
   -------------------------------------------------------------------------- */
.brand-book { color: var(--color-body); }

.brand-hero {
    background:
        radial-gradient(ellipse at top, var(--color-brand-tint) 0%, transparent 55%),
        linear-gradient(180deg, #fff 0%, var(--color-bg) 100%);
    padding: clamp(3rem, 7vw, 5rem) var(--sp-5) var(--sp-9);
    border-bottom: 1px solid var(--color-line);
}
.brand-hero .wrap {
    max-width: var(--container);
    margin-inline: auto;
}
.brand-hero .eyebrow {
    display: inline-block;
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-brand);
    background: var(--color-brand-soft);
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    margin-bottom: var(--sp-5);
}
.brand-hero h1 {
    font-size: var(--fs-hero);
    letter-spacing: -0.03em;
    line-height: 1.05;
    color: var(--color-ink);
    margin-bottom: var(--sp-4);
    max-width: 22ch;
}
.brand-hero .lede {
    color: var(--color-muted);
    font-size: var(--fs-lg);
    max-width: 48rem;
    margin-bottom: var(--sp-6);
}
.brand-hero-actions {
    display: flex;
    gap: var(--sp-3);
    flex-wrap: wrap;
    margin-bottom: var(--sp-7);
}
.brand-hero-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--sp-5);
    margin: 0;
    padding-top: var(--sp-5);
    border-top: 1px solid var(--color-line);
}
.brand-hero-meta div { margin: 0; }
.brand-hero-meta dt {
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-mute-soft);
    margin-bottom: 0.35rem;
}
.brand-hero-meta dd {
    margin: 0;
    color: var(--color-ink);
    font-size: var(--fs-md);
    font-weight: 500;
}

/* --- shell: sticky toc + content -------------------------------------- */
.brand-shell {
    max-width: var(--container);
    margin-inline: auto;
    padding: var(--sp-9) var(--sp-5);
    display: grid;
    grid-template-columns: 16rem 1fr;
    gap: var(--sp-8);
    align-items: start;
}
@media (max-width: 56rem) {
    .brand-shell { grid-template-columns: 1fr; gap: var(--sp-6); padding-top: var(--sp-7); }
}

.brand-toc {
    position: sticky;
    top: calc(4rem + var(--sp-3));
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    padding: var(--sp-5);
    font-size: var(--fs-sm);
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
}
.brand-toc .toc-title {
    margin: 0 0 var(--sp-3);
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-mute-soft);
}
.brand-toc ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.2rem;
    counter-reset: toc;
}
.brand-toc li { margin: 0; }
.brand-toc a {
    display: block;
    padding: 0.4rem 0.6rem;
    border-radius: var(--radius-sm);
    color: var(--color-body);
    font-weight: 500;
}
.brand-toc a:hover {
    background: var(--color-brand-soft);
    color: var(--color-brand-ink);
    text-decoration: none;
}

/* --- content sections ------------------------------------------------- */
.brand-content { min-width: 0; }
.brand-section {
    padding: var(--sp-9) 0;
    border-bottom: 1px solid var(--color-line);
    scroll-margin-top: 5rem;
}
.brand-section:first-child { padding-top: 0; }
.brand-section:last-child { border-bottom: 0; }
.brand-section .section-num {
    margin: 0 0 var(--sp-3);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--color-mute-soft);
}
.brand-section h2 {
    font-size: var(--fs-2xl);
    margin: 0 0 var(--sp-3);
    color: var(--color-ink);
    letter-spacing: -0.02em;
}
.brand-section h3 {
    font-size: var(--fs-lg);
    margin-top: var(--sp-7);
    margin-bottom: var(--sp-4);
    color: var(--color-ink);
}
.brand-section h4 {
    font-size: var(--fs-md);
    margin-top: var(--sp-4);
    margin-bottom: var(--sp-2);
    color: var(--color-ink);
}
.brand-section .section-lede {
    color: var(--color-muted);
    font-size: var(--fs-md);
    margin-bottom: var(--sp-6);
    max-width: 48rem;
}
.brand-section p { color: var(--color-body); }
.brand-section code {
    font-family: ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, monospace;
    font-size: 0.92em;
    background: var(--color-line-soft);
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius-sm);
    color: var(--color-ink);
}
.brand-section ul.bullet-list,
.brand-section ol.bullet-list {
    padding-inline-start: 1.25rem;
    margin: 0 0 var(--sp-4);
    color: var(--color-body);
}
.brand-section .bullet-list li { margin-bottom: 0.45rem; }

/* --- 1. essence ------------------------------------------------------- */
.essence-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--sp-4);
    margin-bottom: var(--sp-6);
}
.essence-grid article {
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    padding: var(--sp-5);
}
.essence-grid h3 {
    margin: 0 0 var(--sp-2);
    font-size: var(--fs-md);
}
.essence-grid p { color: var(--color-body); margin: 0; font-size: var(--fs-sm); line-height: 1.6; }

.belief-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: var(--sp-4);
}
.belief {
    border-radius: var(--radius-lg);
    padding: var(--sp-5);
    border: 1px solid var(--color-line);
}
.belief.good { background: var(--color-brand-tint); border-color: var(--color-brand-soft); }
.belief.bad  { background: var(--color-surface); }
.belief h4 { margin: 0 0 var(--sp-3); font-size: var(--fs-md); color: var(--color-ink); }
.belief ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.4rem;
    color: var(--color-body);
    font-size: var(--fs-sm);
}
.belief.good li::before { content: "✓ "; color: var(--color-brand-ink); font-weight: 700; }
.belief.bad li::before  { content: "✕ "; color: var(--color-muted); font-weight: 700; }

/* --- 2. voice --------------------------------------------------------- */
.voice-list { padding: 0; margin: 0; list-style: none; counter-reset: voice; display: grid; gap: var(--sp-5); }
.voice-list > li {
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    padding: var(--sp-6);
    counter-increment: voice;
    position: relative;
}
.voice-list > li::before {
    content: counter(voice, decimal-leading-zero);
    position: absolute;
    top: var(--sp-4);
    right: var(--sp-5);
    font-family: ui-monospace, SFMono-Regular, monospace;
    color: var(--color-mute-soft);
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: 0.08em;
}
.voice-list h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-lg); }
.voice-list > li > p { color: var(--color-body); margin-bottom: var(--sp-4); }
.voice-pair {
    display: grid;
    gap: var(--sp-2);
    background: var(--color-surface-alt);
    border-radius: var(--radius);
    padding: var(--sp-4);
    border: 1px solid var(--color-line);
}
.voice-pair .pair-yes,
.voice-pair .pair-no { margin: 0; font-size: var(--fs-sm); line-height: 1.5; }
.voice-pair .pair-yes { color: var(--color-success-ink); }
.voice-pair .pair-no  { color: var(--color-danger); }
.voice-pair strong { font-weight: 700; }

/* --- 3. tone table ---------------------------------------------------- */
.tone-table,
.type-table,
.spacing-table,
.changelog-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    font-size: var(--fs-sm);
}
.tone-table th, .tone-table td,
.type-table th, .type-table td,
.spacing-table th, .spacing-table td,
.changelog-table th, .changelog-table td {
    padding: 0.85rem 1rem;
    text-align: start;
    border-bottom: 1px solid var(--color-line-soft);
    vertical-align: top;
}
.tone-table th, .type-table th, .spacing-table th, .changelog-table th {
    background: var(--color-surface-alt);
    color: var(--color-muted);
    font-weight: 600;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.tone-table tr:last-child td,
.type-table tr:last-child td,
.spacing-table tr:last-child td,
.changelog-table tr:last-child td { border-bottom: 0; }

/* --- 4. words --------------------------------------------------------- */
.word-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--sp-4); }
.word-col {
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    padding: var(--sp-5);
}
.word-col h3 { margin-top: 0; }
.word-col.yes h3 { color: var(--color-success-ink); }
.word-col.no h3  { color: var(--color-danger); }
.word-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.3rem;
    color: var(--color-body);
    font-size: var(--fs-sm);
    columns: 2;
    column-gap: var(--sp-4);
}
.word-col.yes li::before { content: "✓  "; color: var(--color-success); font-weight: 700; }
.word-col.no  li::before { content: "✕  "; color: var(--color-danger); font-weight: 700; }

/* --- 5. messaging ----------------------------------------------------- */
.messaging-stack { display: grid; gap: var(--sp-4); }
.msg-tier {
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    padding: var(--sp-6);
}
.msg-tier h3 {
    margin-top: 0;
    color: var(--color-muted);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
}
.msg-headline {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 2.5vw + 1rem, 2.5rem);
    font-weight: 700;
    color: var(--color-ink);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0 0 var(--sp-3);
}
.msg-meta { color: var(--color-muted); font-size: var(--fs-sm); margin: 0; }
.msg-tier.pillars { background: var(--color-brand-tint); border-color: var(--color-brand-soft); }
.pillar-list { padding: 0; list-style: none; margin: 0; display: grid; gap: var(--sp-3); }
.pillar-list li { color: var(--color-body); font-size: var(--fs-md); }
.pillar-list strong { color: var(--color-brand-ink); }
.msg-label {
    margin: var(--sp-4) 0 0.4rem;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-mute-soft);
    font-weight: 700;
}
.msg-body {
    margin: 0 0 var(--sp-3);
    color: var(--color-body);
    font-size: var(--fs-md);
    line-height: 1.65;
    max-width: 60ch;
}
.template-list { padding-inline-start: 1.25rem; margin: 0; color: var(--color-body); }
.template-list li { margin-bottom: var(--sp-2); }
.template-list em { color: var(--color-muted); font-style: italic; }

/* --- 6. logo ---------------------------------------------------------- */
.logo-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: var(--sp-5);
    margin-bottom: var(--sp-6);
}
.logo-card {
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    padding: var(--sp-5);
}
.logo-card .logo-stage {
    border-radius: var(--radius);
    padding: var(--sp-7) var(--sp-4);
    background: var(--color-surface-alt);
    display: grid;
    place-items: center;
    margin-bottom: var(--sp-4);
    min-height: 10rem;
}
.logo-card .logo-stage.dark { background: var(--color-ink); }
.logo-card .logo-caption { font-weight: 600; color: var(--color-ink); margin: 0 0 0.35rem; }
.logo-card .logo-meta { color: var(--color-muted); font-size: var(--fs-sm); margin: 0; }
.logo-wordmark { font-family: var(--font-display); font-size: 1.6rem; line-height: 1; }
.logo-wordmark .brand-light { font-weight: 400; color: var(--color-ink); }
.logo-wordmark .brand-heavy { font-weight: 800; color: var(--color-ink); }
.logo-wordmark.inverted .brand-light,
.logo-wordmark.inverted .brand-heavy { color: #fff; }

.dont-list {
    padding-inline-start: 1.25rem;
    margin: 0;
    counter-reset: dont;
    display: grid;
    gap: var(--sp-2);
    color: var(--color-body);
    font-size: var(--fs-sm);
}
.dont-list li::marker { color: var(--color-danger); font-weight: 700; }

/* --- 7. color swatches ------------------------------------------------ */
.swatch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--sp-4);
    margin-bottom: var(--sp-5);
}
.swatch {
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.swatch-chip {
    height: 5.5rem;
    width: 100%;
    display: block;
}
.swatch-chip.bordered { box-shadow: inset 0 0 0 1px var(--color-line); }
.swatch-name { margin: var(--sp-4) var(--sp-4) 0; font-weight: 700; color: var(--color-ink); font-size: var(--fs-md); }
.swatch-token { margin: 0.1rem var(--sp-4) var(--sp-3); color: var(--color-muted); font-size: var(--fs-xs); }
.swatch-token code { background: transparent; padding: 0; font-size: var(--fs-xs); color: var(--color-muted); }
.swatch dl {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.15rem;
    margin: 0 var(--sp-4);
    padding: 0;
    border-top: 1px solid var(--color-line);
    padding-top: var(--sp-3);
}
.swatch dl > div { display: grid; grid-template-columns: 4rem 1fr; gap: var(--sp-3); align-items: baseline; }
.swatch dt { color: var(--color-mute-soft); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; margin: 0; }
.swatch dd { color: var(--color-ink); font-family: ui-monospace, SFMono-Regular, monospace; font-size: var(--fs-xs); margin: 0; }
.swatch-use {
    margin: var(--sp-3) var(--sp-4) var(--sp-4);
    color: var(--color-muted);
    font-size: var(--fs-xs);
    line-height: 1.5;
}

.usage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--sp-4);
    margin-top: var(--sp-5);
}
.usage {
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    padding: var(--sp-5);
}
.usage h4 { margin: 0 0 var(--sp-2); font-size: var(--fs-sm); color: var(--color-ink); }
.usage p { margin: 0; color: var(--color-body); font-size: var(--fs-sm); line-height: 1.6; }

.footnote {
    margin-top: var(--sp-5);
    color: var(--color-muted);
    font-size: var(--fs-xs);
    font-style: italic;
}

/* --- 8. gradients ----------------------------------------------------- */
.gradient-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--sp-4);
}
.gradient {
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.gradient-stage { height: 8rem; }
.gradient-stage.hero-grad {
    background:
        radial-gradient(ellipse at top, var(--color-brand-tint) 0%, transparent 55%),
        linear-gradient(180deg, #fff 0%, var(--color-bg) 100%);
}
.gradient-stage.cta-grad {
    background: linear-gradient(135deg, var(--color-brand) 0%, #0ea5a5 100%);
}
.gradient-stage.compliance-grad {
    background: linear-gradient(90deg, var(--color-brand) 0%, var(--color-success) 100%);
}
.gradient h3 {
    margin: var(--sp-4) var(--sp-5) var(--sp-2);
    font-size: var(--fs-md);
    color: var(--color-ink);
}
.gradient p { margin: 0 var(--sp-5) var(--sp-4); color: var(--color-body); font-size: var(--fs-sm); }
.gradient .gradient-recipe {
    color: var(--color-muted);
    font-size: var(--fs-xs);
}
.gradient .gradient-recipe code {
    background: var(--color-surface-alt);
    display: block;
    padding: var(--sp-3);
    border-radius: var(--radius-sm);
    line-height: 1.5;
    word-break: break-word;
    color: var(--color-ink);
}

/* --- 9. typography ---------------------------------------------------- */
.type-family {
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    padding: var(--sp-6);
    margin-bottom: var(--sp-6);
}
.type-family h3 {
    font-family: var(--font-display);
    font-size: 3rem;
    margin: 0 0 var(--sp-2);
    letter-spacing: -0.02em;
}
.type-stack { color: var(--color-muted); font-size: var(--fs-sm); margin-bottom: var(--sp-4); }
.type-spec-line {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    font-size: var(--fs-md);
    color: var(--color-body);
}
.type-spec-line .weight-100 { font-weight: 100; }
.type-spec-line .weight-300 { font-weight: 300; }
.type-spec-line .weight-400 { font-weight: 400; }
.type-spec-line .weight-500 { font-weight: 500; }
.type-spec-line .weight-600 { font-weight: 600; }
.type-spec-line .weight-700 { font-weight: 700; }
.type-spec-line .weight-800 { font-weight: 800; }

.type-table .spec { color: var(--color-ink); }
.type-table .spec-hero  { font-size: 2.4rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; }
.type-table .spec-2xl   { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; }
.type-table .spec-xl    { font-size: 1.35rem; font-weight: 600; letter-spacing: -0.015em; }
.type-table .spec-lg    { font-size: 1.125rem; font-weight: 500; }
.type-table .spec-md    { font-size: 1.0625rem; }
.type-table .spec-base  { font-size: 1rem; }
.type-table .spec-sm    { font-size: 0.875rem; color: var(--color-muted); }
.type-table .spec-xs    { font-size: 0.8125rem; color: var(--color-brand); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }

/* --- 10. radius ------------------------------------------------------- */
.radius-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: var(--sp-4);
}
.radius-spec {
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    padding: var(--sp-5);
    margin: 0;
    display: grid;
    gap: var(--sp-3);
    text-align: center;
}
.radius-spec .radius-shape {
    width: 6rem;
    height: 6rem;
    background: var(--color-brand);
    margin-inline: auto;
}
.radius-spec .radius-shape.r-sm      { border-radius: 0.375rem; }
.radius-spec .radius-shape.r-default { border-radius: 0.625rem; }
.radius-spec .radius-shape.r-lg      { border-radius: 1rem; }
.radius-spec .radius-shape.r-xl      { border-radius: 1.5rem; }
.radius-spec .radius-shape.r-full    { border-radius: 999px; }
.radius-spec figcaption { display: grid; gap: 0.2rem; }
.radius-spec strong { color: var(--color-ink); }
.radius-spec code { background: var(--color-line-soft); }
.radius-spec span { color: var(--color-muted); font-size: var(--fs-xs); }
.radius-spec p { color: var(--color-muted); font-size: var(--fs-xs); margin: 0; line-height: 1.4; }

/* --- 11. spacing ------------------------------------------------------ */
.space-bar {
    display: inline-block;
    height: 0.65rem;
    background: var(--color-brand);
    border-radius: 999px;
    vertical-align: middle;
}

/* --- 12. shadows ------------------------------------------------------ */
.shadow-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: var(--sp-4);
}
.shadow-spec {
    margin: 0;
    background: var(--color-bg);
    border-radius: var(--radius-lg);
    padding: var(--sp-6);
    display: grid;
    gap: var(--sp-4);
    text-align: center;
}
.shadow-spec .shadow-card {
    width: 6rem;
    height: 6rem;
    background: var(--color-surface);
    border-radius: var(--radius);
    margin-inline: auto;
}
.shadow-spec .shadow-card.s-sm      { box-shadow: var(--shadow-sm); }
.shadow-spec .shadow-card.s-default { box-shadow: var(--shadow); }
.shadow-spec .shadow-card.s-lg      { box-shadow: var(--shadow-lg); }
.shadow-spec figcaption { display: grid; gap: 0.2rem; font-size: var(--fs-sm); }
.shadow-spec strong { color: var(--color-ink); }
.shadow-spec span { color: var(--color-muted); font-size: var(--fs-xs); font-family: ui-monospace, SFMono-Regular, monospace; }
.shadow-spec p { color: var(--color-muted); font-size: var(--fs-xs); margin: 0; }

/* --- 14. iconography -------------------------------------------------- */
.glyph-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: var(--sp-3);
    margin-top: var(--sp-4);
    margin-bottom: var(--sp-5);
}
.glyph {
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    padding: var(--sp-4);
    text-align: center;
    display: grid;
    gap: 0.4rem;
}
.glyph > span {
    font-size: 2.25rem;
    color: var(--color-brand);
    line-height: 1;
}
.glyph code { font-size: var(--fs-xs); color: var(--color-muted); background: transparent; }
.glyph p { margin: 0; color: var(--color-muted); font-size: var(--fs-xs); }

/* --- 15. components --------------------------------------------------- */
.component-block {
    margin: var(--sp-6) 0;
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    padding: var(--sp-5);
}
.component-block h3 { margin: 0 0 var(--sp-3); font-size: var(--fs-md); }
.component-stage {
    background: var(--color-bg);
    border: 1px dashed var(--color-line);
    border-radius: var(--radius);
    padding: var(--sp-5);
    margin-bottom: var(--sp-3);
}
.component-stage.row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    align-items: center;
}
.component-block > p {
    color: var(--color-muted);
    font-size: var(--fs-sm);
    margin: 0;
}
.brand-eyebrow {
    display: inline-block;
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-brand);
    background: var(--color-brand-soft);
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
}
.brand-eyebrow.inverse {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}
.mock-card { max-width: 22rem; }

/* --- 16. URL & email rules ------------------------------------------- */
.rule-pair {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--sp-4);
    margin-bottom: var(--sp-5);
}
.rule {
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    padding: var(--sp-5);
}
.rule.yes { border-left: 4px solid var(--color-success); }
.rule.no  { border-left: 4px solid var(--color-danger); }
.rule .rule-label {
    margin: 0 0 var(--sp-3);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
}
.rule.yes .rule-label { color: var(--color-success-ink); }
.rule.no  .rule-label { color: var(--color-danger); }
.rule ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.45rem; }
.rule li code {
    background: transparent;
    padding: 0;
    font-size: var(--fs-sm);
    color: var(--color-ink);
}

/* --- 17. sample applications ----------------------------------------- */
.mock {
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    margin-bottom: var(--sp-6);
    overflow: hidden;
}
.mock-flyer {
    padding: var(--sp-7);
    display: grid;
    gap: var(--sp-5);
    background:
        radial-gradient(ellipse at top right, var(--color-brand-tint) 0%, transparent 50%),
        var(--color-surface);
}
.mock-flyer header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-3);
    padding-bottom: var(--sp-4);
    border-bottom: 1px solid var(--color-line);
}
.mock-flyer .mock-tag {
    color: var(--color-muted);
    font-size: var(--fs-sm);
}
.mock-flyer .mock-hero h4 {
    font-size: clamp(1.4rem, 2vw + 0.8rem, 2rem);
    color: var(--color-ink);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: var(--sp-3) 0;
    max-width: 22ch;
}
.mock-flyer .mock-hero p {
    color: var(--color-muted);
    font-size: var(--fs-md);
    margin: 0 0 var(--sp-4);
}
.mock-flyer .mock-bullets {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--sp-2);
    color: var(--color-body);
    font-size: var(--fs-sm);
}
.mock-flyer .mock-bullets li::before {
    content: "✓ ";
    color: var(--color-success);
    font-weight: 700;
    margin-inline-end: 0.4rem;
}
.mock-flyer footer {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-3);
    color: var(--color-muted);
    font-size: var(--fs-sm);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--color-line);
}

.mock-social {
    padding: 0;
}
.mock-social-bg {
    aspect-ratio: 1200 / 630;
    background: linear-gradient(135deg, var(--color-brand) 0%, #0ea5a5 100%);
    color: #fff;
    padding: clamp(var(--sp-5), 5vw, var(--sp-7));
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.mock-social-bg h4 {
    color: #fff;
    font-size: clamp(1.5rem, 3vw + 1rem, 2.75rem);
    letter-spacing: -0.025em;
    line-height: 1.05;
    margin: var(--sp-3) 0;
    max-width: 24ch;
}
.mock-social-bg p {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    margin: 0;
}

.mock-sig {
    padding: var(--sp-5);
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    color: var(--color-body);
    line-height: 1.7;
    margin: 0 0 var(--sp-6);
}
.mock-sig .sig-name { color: var(--color-ink); font-weight: 700; display: block; }
.mock-sig .sig-role { color: var(--color-muted); display: block; }
.mock-sig .sig-line { color: var(--color-muted); display: block; }

/* --- 18. dos and donts ------------------------------------------------ */
.dd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: var(--sp-4); }
.dd {
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    padding: var(--sp-5);
    border-top: 4px solid transparent;
}
.dd.yes { border-top-color: var(--color-success); }
.dd.no  { border-top-color: var(--color-danger); }
.dd h3 { margin-top: 0; font-size: var(--fs-md); }
.dd.yes h3 { color: var(--color-success-ink); }
.dd.no  h3 { color: var(--color-danger); }
.dd ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.55rem;
    color: var(--color-body);
    font-size: var(--fs-sm);
    line-height: 1.5;
}
.dd.yes li::before { content: "✓  "; color: var(--color-success); font-weight: 700; }
.dd.no  li::before { content: "✕  "; color: var(--color-danger); font-weight: 700; }

/* --- 19. asset list --------------------------------------------------- */
.asset-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--sp-3);
}
.asset-list li {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "title btn"
        "desc  btn";
    align-items: center;
    gap: 0.25rem var(--sp-4);
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    padding: var(--sp-5);
}
.asset-list li strong { grid-area: title; color: var(--color-ink); font-size: var(--fs-md); }
.asset-list li p      { grid-area: desc; color: var(--color-muted); font-size: var(--fs-sm); margin: 0; }
.asset-list li a      { grid-area: btn; }

/* --- 20. changelog ---------------------------------------------------- */
.end-note {
    margin-top: var(--sp-5);
    color: var(--color-muted);
    font-size: var(--fs-sm);
}

/* --- 22. form applicability picker (admin + broker) ------------------- */
/* Compact fieldset grid used in `components/applies_picker.html` so the
   admin can restrict a library form (or a broker their custom form) to
   specific transaction types/sides/sales conditions. */
.applies-picker {
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md, 0.5rem);
    padding: var(--sp-3) var(--sp-4);
    margin: var(--sp-3) 0;
}
.applies-picker legend {
    font-size: var(--fs-sm);
    color: var(--color-muted);
    padding: 0 var(--sp-2);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.applies-picker .picker-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-4);
}
.applies-picker label.checkbox {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--fs-sm);
}

/* --- 21. drag-and-drop reordering (admin form sets) ------------------- */
/* Grip handle the user grabs to reorder a group panel or a form row.
   `forms-reorder.js` adds `.drag-handle` and toggles `.is-dragging`. */
.drag-handle {
    cursor: grab;
    color: var(--color-muted);
    font-size: var(--fs-md);
    line-height: 1;
    user-select: none;
    padding: 0 0.15rem;
}
.drag-handle:hover { color: var(--color-ink); }
.is-dragging .drag-handle,
.drag-handle:active { cursor: grabbing; }

/* While a node is mid-drag, fade it so the drop target reads clearly. */
.is-dragging {
    opacity: 0.5;
    background: var(--color-surface-alt, var(--color-surface));
}
.reorder-groups .panel.is-dragging {
    outline: 2px dashed var(--color-line);
    outline-offset: 2px;
}

/* Slim leading column that holds the row grip. */
.drag-col { width: 1.5rem; }
.drag-cell { text-align: center; white-space: nowrap; }

/* Form-group header: drag grip + inline rename + order + delete, all on
   one baseline so the group's controls read as a single toolbar. */
.group-head {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
    margin-bottom: var(--sp-3);
}
.group-rename {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin: 0;
}
.group-rename input {
    font-size: var(--fs-md);
    font-weight: 600;
    padding: 0.3rem 0.5rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-ink);
    min-width: 16rem;
}
/* Only reveal the field's chrome on hover/focus so the group title
   still reads like a heading at rest. */
.group-rename input:hover { border-color: var(--color-line); background: var(--color-surface); }
.group-rename input:focus {
    border-color: var(--color-brand);
    background: var(--color-surface);
    outline: none;
}
.group-head .group-delete { margin-inline-start: auto; }

/* --------------------------------------------------------------------------
   Pricing-page scenario block. Each plan card carries a collapsible
   "What would I actually pay?" details element with worked examples at
   half-limit / at-limit / over-limit transaction counts and a one-line
   competitor comparison. Kept deliberately low-key so it doesn't fight
   the feature bullets for attention; opens on click for prospects who
   want the math.
   -------------------------------------------------------------------------- */
.plan-scenarios {
    margin-top: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: var(--color-surface-alt);
    border-radius: 8px;
    border: 1px solid var(--color-line);
}
.plan-scenarios > summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--color-brand-ink);
    font-size: var(--fs-sm);
    list-style: none;
}
.plan-scenarios > summary::marker,
.plan-scenarios > summary::-webkit-details-marker { display: none; }
.plan-scenarios > summary::before {
    content: "▸ ";
    color: var(--color-brand);
    margin-right: 0.15em;
    transition: transform 120ms;
    display: inline-block;
}
.plan-scenarios[open] > summary::before { content: "▾ "; }

.scenario-table {
    width: 100%;
    margin-top: var(--sp-3);
    font-size: var(--fs-sm);
    border-collapse: collapse;
}
.scenario-table th,
.scenario-table td {
    text-align: left;
    padding: 0.3rem 0;
    vertical-align: baseline;
    border-bottom: 1px dashed var(--color-line);
}
.scenario-table tr:last-child th,
.scenario-table tr:last-child td { border-bottom: 0; }
.scenario-table th {
    font-weight: 500;
    color: var(--color-body);
}
.scenario-total {
    font-weight: 700;
    color: var(--color-brand-ink);
    font-variant-numeric: tabular-nums;
    text-align: right;
    padding-right: var(--sp-3) !important;
    white-space: nowrap;
}
.scenario-total small {
    font-weight: 500;
    color: var(--color-muted);
    font-size: 0.75em;
    margin-left: 0.15em;
}
.scenario-qualifier {
    color: var(--color-muted);
    font-style: italic;
    font-size: 0.85em;
    text-align: right;
}
.scenario-note {
    margin: var(--sp-3) 0 0;
    padding-top: var(--sp-2);
    border-top: 1px solid var(--color-line);
    font-size: 0.85em;
    color: var(--color-body);
    line-height: 1.5;
}
.scenario-fineprint {
    margin: var(--sp-2) 0 0;
    font-size: 0.78em;
    color: var(--color-muted);
    line-height: 1.4;
}

/* --------------------------------------------------------------------------
   Admin changelog page. The current-version panel reads the build at a
   glance; the article wraps the markdown→HTML output so headings, lists,
   and emphasis from CHANGELOG.md render cleanly without bespoke classes.
   -------------------------------------------------------------------------- */
.build-version-panel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-1);
    padding: var(--sp-4) var(--sp-5);
}
.build-version-panel .label {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--color-muted);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.build-version-panel .version-large {
    margin: 0;
    font-size: var(--fs-2xl);
    font-weight: 700;
    color: var(--color-brand-ink);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}
.build-version-panel .version-large .version-prefix {
    color: var(--color-mute-soft);
    font-weight: 500;
    margin-right: 0.05em;
}
.build-version-panel .hint {
    margin: 0;
    color: var(--color-muted);
    font-size: var(--fs-sm);
}

.changelog-article {
    padding: var(--sp-5) var(--sp-6);
    line-height: 1.6;
}
.changelog-article h1 { font-size: var(--fs-xl); margin-top: 0; }
.changelog-article h2 {
    font-size: var(--fs-lg);
    margin-top: var(--sp-6);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--color-line);
}
.changelog-article h2:first-of-type { border-top: 0; padding-top: 0; margin-top: var(--sp-4); }
.changelog-article h3 { font-size: var(--fs-md); margin-top: var(--sp-5); color: var(--color-brand-ink); }
.changelog-article h4 { font-size: var(--fs-base); margin-top: var(--sp-4); color: var(--color-body); }
.changelog-article ul,
.changelog-article ol { padding-left: 1.25rem; }
.changelog-article li { margin: 0.25rem 0; }
.changelog-article p { margin: var(--sp-2) 0; }
.changelog-article hr {
    border: 0;
    border-top: 1px solid var(--color-line);
    margin: var(--sp-5) 0;
}
.changelog-article code {
    background: var(--color-surface-alt);
    padding: 0.05rem 0.3rem;
    border-radius: 4px;
    font-size: 0.85em;
}
.changelog-article em { color: var(--color-muted); }

/* --------------------------------------------------------------------------
   Version footer. Tiny, low-contrast strip at the bottom of every page so
   support tickets can include the exact build the user was on. Sticks to
   the bottom-right rather than centering across the full page so it
   doesn't compete with content.
   -------------------------------------------------------------------------- */
.app-version-footer {
    position: fixed;
    bottom: var(--sp-2);
    right: var(--sp-3);
    z-index: 1;
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    color: var(--color-mute-soft);
    pointer-events: none;
    user-select: none;
}

/* --- print: clean handoff if a designer hits Cmd-P -------------------- */
@media print {
    .site-header,
    .site-footer,
    .brand-toc,
    .brand-hero-actions,
    .app-version-footer { display: none !important; }
    .brand-shell { grid-template-columns: 1fr; padding: 0; gap: 0; }
    .brand-section { page-break-inside: avoid; }
    .brand-hero { padding: 1.5rem 0; }
}