/* ============================================================
   Asetrix · Renter portal polish layer
   Applies to every page under /renter/* via RenterLayout's
   `.renter-shell` wrapper. Token-driven only — no hex literals.
   Loaded after portal-pages.css so it can override safely.

   The renter portal opts into the brand forest-green palette
   (var(--accent) + variants) rather than the platform teal — both for
   warmth (this is the renter's "home base") and to mirror the
   Asetrix arch mark stroke colour.
   ============================================================ */

/* ─── Brand override scope ────────────────────────────────── */

.renter-shell,
.renter-auth {
    /* Forest-green brand stack, hand-tuned for both light + dark. */
    --renter-brand:          var(--accent);
    --renter-brand-soft:     var(--accent-hover);
    --renter-brand-deep:     var(--accent-active);
    --renter-brand-fg:       var(--white);
    --renter-brand-tint:     var(--accent-subtle);
    --renter-brand-tint-2:   var(--accent-active);
    --renter-brand-border:   var(--accent-border);
    --renter-brand-text:     var(--accent-hover);

    --renter-bg:             var(--surface-2);  /* warm parchment vs cold var(--surface-2) */
    --renter-surface:        var(--white);
    --renter-surface-elev:   var(--white);
    --renter-border:         var(--border);
    --renter-border-strong:  var(--border-strong);
    --renter-text:           var(--text);
    --renter-text-secondary: var(--text-secondary);
    --renter-text-tertiary:  var(--text-tertiary);

    --renter-shadow-card:    0 1px 2px rgba(var(--accent-rgb),  0.04),
                             0 4px 12px -2px rgba(var(--accent-rgb),  0.08),
                             0 12px 32px -8px rgba(var(--accent-rgb),  0.10);
    --renter-shadow-hero:    0 12px 40px -8px rgba(var(--accent-rgb),  0.35),
                             0 4px 16px -4px rgba(var(--accent-rgb),  0.20);
}

[data-theme="dark"] .renter-shell,
[data-theme="dark"] .renter-auth {
    --renter-brand:          var(--accent);
    --renter-brand-soft:     var(--accent-bright);
    --renter-brand-deep:     var(--accent-border);
    --renter-brand-fg:       var(--text-on-accent);
    --renter-brand-tint:     rgba(var(--accent-rgb),  0.10);
    --renter-brand-tint-2:   rgba(var(--accent-rgb),  0.18);
    --renter-brand-border:   rgba(var(--accent-rgb),  0.32);
    --renter-brand-text:     var(--accent-border);

    --renter-bg:             var(--bg);
    --renter-surface:        var(--surface);
    --renter-surface-elev:   var(--surface-hover);
    --renter-border:         var(--border);
    --renter-border-strong:  var(--border-strong);
    --renter-text:           var(--text);
    --renter-text-secondary: var(--text-secondary);
    --renter-text-tertiary:  var(--text-tertiary);

    --renter-shadow-card:    0 1px 2px rgba(var(--shadow-rgb),  0.40),
                             0 8px 24px -8px rgba(var(--shadow-rgb),  0.55);
    --renter-shadow-hero:    0 16px 48px -12px rgba(var(--shadow-rgb),  0.70);
}

/* ─── Layout shell ──────────────────────────────────────── */

.renter-shell {
    min-height: 100vh;
    display: grid;
    grid-template-rows: 72px 1fr;
    background: var(--renter-bg);
    color: var(--renter-text);
    font-family: var(--font-sans);
}

.renter-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--space-6);
    background: var(--renter-surface);
    border-bottom: 1px solid var(--renter-border);
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    box-shadow: 0 1px 0 rgba(var(--shadow-rgb),  0.02);
}

.renter-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--renter-text);
    text-decoration: none;
}

.renter-brand-mark {
    width: 38px;
    height: 38px;
    color: var(--renter-brand);
    display: inline-grid;
    place-items: center;
    background: var(--renter-brand-tint);
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

.renter-brand-mark svg {
    width: 24px;
    height: 24px;
    display: block;
}

.renter-brand-text {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.1;
}

.renter-brand-wordmark {
    font-family: 'Outfit', var(--font-sans);
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
    color: var(--renter-text);
}

.renter-brand-eyebrow {
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--renter-text-tertiary);
}

.renter-topbar-user {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
}

.renter-topbar-name {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.2;
    text-align: right;
}

.renter-topbar-name strong {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--renter-text);
}

.renter-topbar-name span {
    font-size: var(--text-2xs);
    color: var(--renter-text-tertiary);
}

.renter-topbar-avatar {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--renter-brand) 0%, var(--renter-brand-soft) 100%);
    color: var(--renter-brand-fg);
    display: inline-grid;
    place-items: center;
    font-weight: var(--weight-bold);
    font-size: var(--text-sm);
    box-shadow: 0 2px 6px rgba(var(--accent-rgb),  0.25);
}

.renter-topbar .btn[data-variant="ghost"] {
    color: var(--renter-text-secondary);
    border-color: var(--renter-border);
}

.renter-topbar .btn[data-variant="ghost"]:hover {
    background: var(--renter-brand-tint);
    color: var(--renter-brand-text);
    border-color: var(--renter-brand-border);
}

.renter-main {
    padding: var(--space-8) var(--space-5) var(--space-16);
}

.renter-page {
    max-width: 60rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

/* ─── Centred auth pages ──────────────────────────────── */

.renter-auth {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: var(--space-8) var(--space-4);
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%,
                        var(--renter-brand-tint) 0%,
                        transparent 60%),
        var(--renter-bg);
    color: var(--renter-text);
    font-family: var(--font-sans);
}

.renter-auth-card {
    width: 100%;
    max-width: 28rem;
    background: var(--renter-surface);
    border: 1px solid var(--renter-border);
    border-radius: var(--radius-2xl);
    padding: var(--space-10) var(--space-8);
    box-shadow: var(--renter-shadow-hero);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.renter-auth-card h1 {
    margin: 0;
    font-family: 'Outfit', var(--font-sans);
    font-size: var(--text-3xl);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tighter);
    color: var(--renter-text);
    line-height: var(--leading-tight);
}

.renter-auth-card p {
    margin: 0;
    color: var(--renter-text-secondary);
    line-height: var(--leading-normal);
}

.renter-auth-eyebrow {
    align-self: flex-start;
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--renter-brand-text);
    background: var(--renter-brand-tint);
    border: 1px solid var(--renter-brand-border);
    border-radius: var(--radius-full);
    padding: var(--space-1) var(--space-3);
}

.renter-auth-icon {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-xl);
    background: linear-gradient(135deg, var(--renter-brand) 0%, var(--renter-brand-soft) 100%);
    color: var(--renter-brand-fg);
    display: inline-grid;
    place-items: center;
    box-shadow: var(--renter-shadow-hero);
    align-self: flex-start;
}

.renter-auth-icon svg {
    width: 28px;
    height: 28px;
    display: block;
}

.renter-auth-footer {
    border-top: 1px solid var(--renter-border);
    padding-top: var(--space-4);
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    color: var(--renter-text-tertiary);
    text-align: center;
}

.renter-auth-footer a {
    color: var(--renter-brand-text);
    text-decoration: none;
    font-weight: var(--weight-semibold);
}

.renter-auth-footer a:hover { text-decoration: underline; }

.renter-auth-card .form-field label,
.renter-auth-card .form-field > span {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--renter-text);
    margin-bottom: var(--space-1);
}

.renter-auth-card input[type="email"],
.renter-auth-card input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    padding: var(--space-3) var(--space-4);
    background: var(--renter-surface);
    border: 1.5px solid var(--renter-border-strong);
    border-radius: var(--radius-md);
    color: var(--renter-text);
    font: inherit;
    font-size: var(--text-base);
    transition: border-color var(--duration-fast) var(--ease-smooth),
                box-shadow var(--duration-fast) var(--ease-smooth);
}

.renter-auth-card input:focus {
    outline: none;
    border-color: var(--renter-brand);
    box-shadow: 0 0 0 4px var(--renter-brand-tint);
}

.renter-auth-card .btn[data-variant="primary"] {
    background: var(--renter-brand);
    border-color: var(--renter-brand);
    color: var(--renter-brand-fg);
    padding: var(--space-3) var(--space-5);
    font-weight: var(--weight-semibold);
    font-size: var(--text-base);
    box-shadow: 0 4px 12px -2px rgba(var(--accent-rgb),  0.30);
}

.renter-auth-card .btn[data-variant="primary"]:hover {
    background: var(--renter-brand-soft);
    border-color: var(--renter-brand-soft);
}

.renter-error-banner {
    background: var(--danger-subtle);
    border: 1px solid var(--danger);
    color: var(--danger);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
}

/* Password sign-in / registration field stack — the <form> is a block
   child of the card so its fields need their own vertical rhythm. */
.renter-auth-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* "──── or ────" divider between password + magic-link sign-in. */
.renter-auth-or {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--renter-text-tertiary);
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    margin: var(--space-1) 0;
}

.renter-auth-or::before,
.renter-auth-or::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--renter-border);
}

/* ─── Page header ──────────────────────────────────────── */

.renter-page-header {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.renter-page-header .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--renter-brand-text);
}

.renter-page-header .eyebrow a {
    color: inherit;
    text-decoration: none;
}

.renter-page-header h1 {
    margin: 0;
    font-family: 'Outfit', var(--font-sans);
    font-size: var(--text-3xl);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tighter);
    line-height: var(--leading-tight);
    color: var(--renter-text);
}

.renter-page-header p {
    margin: 0;
    color: var(--renter-text-secondary);
    max-width: 60ch;
    line-height: var(--leading-normal);
}

/* ─── Lease hero card ──────────────────────────────────── */

.renter-lease-hero {
    position: relative;
    background: var(--renter-surface);
    color: var(--renter-text);
    border: 1px solid var(--renter-border);
    border-left: 4px solid var(--renter-brand);
    border-radius: var(--radius-2xl);
    padding: var(--space-7) var(--space-8);
    overflow: hidden;
    box-shadow: var(--renter-shadow-card);
}

.renter-lease-hero > * { position: relative; z-index: 1; }

.renter-lease-hero-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-6);
}

.renter-lease-hero-eyebrow {
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    opacity: 0.7;
}

.renter-lease-hero h2 {
    margin: var(--space-1) 0 var(--space-2);
    font-family: 'Outfit', var(--font-sans);
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
}

.renter-lease-hero address {
    font-style: normal;
    font-size: var(--text-sm);
    opacity: 0.88;
    line-height: var(--leading-normal);
}

.renter-lease-status-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: color-mix(in srgb, var(--renter-brand) 12%, var(--renter-surface));
    border: 1px solid var(--renter-brand-border);
    border-radius: var(--radius-full);
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--renter-brand-text);
}

.renter-lease-status-pill::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--accent-active);
    box-shadow: 0 0 0 4px rgba(var(--accent-rgb),  0.32);
    animation: renter-pulse 2.4s ease-in-out infinite;
}

@keyframes renter-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.renter-lease-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-5);
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid var(--renter-border);
}

.renter-lease-stat {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.renter-lease-stat-label {
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    opacity: 0.65;
}

.renter-lease-stat-value {
    font-family: 'Outfit', var(--font-sans);
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
    font-variant-numeric: tabular-nums;
}

.renter-lease-stat-sub {
    font-size: var(--text-xs);
    opacity: 0.75;
    line-height: var(--leading-snug);
}

.renter-lease-hero-agent {
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid var(--renter-border);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.renter-lease-hero-agent .renter-agency-name {
    font-family: 'Outfit', var(--font-sans);
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
}

.renter-lease-hero-agent .renter-agent-meta {
    font-size: var(--text-xs);
    opacity: 0.85;
    line-height: var(--leading-normal);
    margin-top: var(--space-1);
}

.renter-lease-hero-agent a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: rgba(var(--glass-rgb),  0.4);
    text-underline-offset: 2px;
}

.renter-lease-hero-agent a:hover {
    text-decoration-color: currentColor;
}

/* ─── Balance card ─────────────────────────────────────── */

.renter-balance-card {
    background: var(--renter-surface);
    border: 1.5px solid var(--renter-border);
    border-radius: var(--radius-xl);
    padding: var(--space-6) var(--space-7);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-5);
    flex-wrap: wrap;
    box-shadow: var(--renter-shadow-card);
}

.renter-balance-card[data-state="due"] {
    border-color: var(--danger);
    background:
        linear-gradient(180deg, var(--danger-subtle) 0%, var(--renter-surface) 60%);
}

.renter-balance-card[data-state="credit"] {
    border-color: var(--success);
    background:
        linear-gradient(180deg, var(--success-subtle) 0%, var(--renter-surface) 60%);
}

.renter-balance-card[data-state="paid"] {
    border-color: var(--renter-brand-border);
    background:
        linear-gradient(180deg, var(--renter-brand-tint) 0%, var(--renter-surface) 60%);
}

.renter-balance-label {
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--renter-text-tertiary);
}

.renter-balance-amount {
    font-family: 'Outfit', var(--font-sans);
    font-size: var(--text-3xl);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tighter);
    line-height: var(--leading-tight);
    color: var(--renter-text);
    font-variant-numeric: tabular-nums;
    margin-top: var(--space-1);
}

.renter-balance-card[data-state="due"] .renter-balance-amount { color: var(--danger); }
.renter-balance-card[data-state="credit"] .renter-balance-amount { color: var(--success); }

.renter-balance-tag {
    display: inline-block;
    margin-left: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--renter-text-tertiary);
    text-transform: lowercase;
}

.renter-balance-sub {
    font-size: var(--text-sm);
    color: var(--renter-text-secondary);
    line-height: var(--leading-snug);
    margin-top: var(--space-2);
    max-width: 48ch;
}

.renter-balance-sub a {
    color: var(--renter-brand-text);
    text-decoration: none;
    font-weight: var(--weight-medium);
}

.renter-balance-actions {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

/* ─── Section header ───────────────────────────────────── */

.renter-section-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--renter-border);
}

.renter-section-header h3 {
    margin: 0;
    font-family: 'Outfit', var(--font-sans);
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-tight);
    color: var(--renter-text);
}

.renter-section-header a {
    font-size: var(--text-sm);
    color: var(--renter-brand-text);
    text-decoration: none;
    font-weight: var(--weight-semibold);
}

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

/* ─── Activity list ────────────────────────────────────── */

.renter-activity-list {
    list-style: none;
    padding: 0;
    margin: 0;
    background: var(--renter-surface);
    border: 1px solid var(--renter-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--renter-shadow-card);
}

.renter-activity-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-4);
    align-items: center;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--renter-border);
    transition: background var(--duration-fast) var(--ease-smooth);
}

.renter-activity-row:last-child { border-bottom: none; }

.renter-activity-row:hover {
    background: var(--renter-brand-tint);
}

.renter-activity-main {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

.renter-activity-title {
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    color: var(--renter-text);
    line-height: var(--leading-snug);
}

.renter-activity-meta {
    font-size: var(--text-xs);
    color: var(--renter-text-tertiary);
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.renter-activity-kind {
    display: inline-block;
    padding: 2px var(--space-2);
    border-radius: var(--radius-xs);
    background: var(--renter-brand-tint);
    color: var(--renter-brand-text);
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
}

.renter-activity-amount {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    white-space: nowrap;
}

.renter-activity-amount[data-direction="charge"] { color: var(--danger); }
.renter-activity-amount[data-direction="credit"] { color: var(--success); }

/* ─── Tickets list ─────────────────────────────────────── */

.renter-ticket-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.renter-ticket-card {
    background: var(--renter-surface);
    border: 1px solid var(--renter-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-4);
    align-items: flex-start;
    box-shadow: var(--renter-shadow-card);
}

.renter-ticket-card[data-priority="Emergency"] { border-left: 4px solid var(--danger); }
.renter-ticket-card[data-priority="High"] { border-left: 4px solid var(--warning); }

.renter-ticket-title {
    font-family: 'Outfit', var(--font-sans);
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    color: var(--renter-text);
    margin: 0 0 var(--space-1);
}

.renter-ticket-pills {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.renter-ticket-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px var(--space-2);
    border-radius: var(--radius-full);
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    background: var(--renter-surface);
    color: var(--renter-text-secondary);
    border: 1px solid var(--renter-border);
}

.renter-ticket-pill[data-tone="danger"] {
    background: var(--danger-subtle);
    color: var(--danger);
    border-color: var(--danger);
}

.renter-ticket-pill[data-tone="warning"] {
    background: var(--warning-subtle);
    color: var(--warning);
    border-color: var(--warning);
}

.renter-ticket-pill[data-tone="info"] {
    background: var(--info-subtle);
    color: var(--info);
    border-color: var(--info);
}

.renter-ticket-meta {
    font-size: var(--text-xs);
    color: var(--renter-text-tertiary);
    margin-top: var(--space-2);
    line-height: var(--leading-snug);
}

/* ─── Empty / glance cards ─────────────────────────────── */

.renter-empty {
    background: var(--renter-surface);
    border: 1.5px dashed var(--renter-border-strong);
    border-radius: var(--radius-lg);
    padding: var(--space-10) var(--space-6);
    text-align: center;
    color: var(--renter-text-secondary);
}

.renter-empty p { margin: var(--space-2) 0 0; }

.renter-empty-icon {
    font-size: var(--text-3xl);
    opacity: 0.45;
    margin-bottom: var(--space-2);
    display: block;
}

/* ─── Notice card (FICA, etc) ──────────────────────────── */

.renter-notice {
    background: var(--warning-subtle);
    border: 1px solid var(--warning);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
}

.renter-notice-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: var(--warning);
    /* Glyph on a solid --warning circle. --renter-brand-fg flips
       var(--white) (light) → var(--accent-active) (dark), so it stays a white glyph on the
       deep-amber light --warning and becomes a dark glyph on the bright
       dark-mode --warning (var(--warning-bright)) — the correct contrast direction. */
    color: var(--renter-brand-fg);
    display: inline-grid;
    place-items: center;
    font-weight: var(--weight-bold);
}

.renter-notice h4 {
    margin: 0 0 var(--space-1);
    color: var(--warning);
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
}

.renter-notice p {
    margin: 0;
    color: var(--renter-text-secondary);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}

/* ─── Statement table ──────────────────────────────────── */

.renter-statement-summary {
    background: var(--renter-surface);
    border: 1.5px solid var(--renter-border);
    border-radius: var(--radius-xl);
    padding: var(--space-6) var(--space-7);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-5);
    flex-wrap: wrap;
    box-shadow: var(--renter-shadow-card);
}

.renter-statement-summary[data-state="due"] { border-color: var(--danger); }
.renter-statement-summary[data-state="credit"] { border-color: var(--success); }
.renter-statement-summary[data-state="paid"] { border-color: var(--renter-brand-border); }

.renter-table-wrap {
    background: var(--renter-surface);
    border: 1px solid var(--renter-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--renter-shadow-card);
}

.renter-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.renter-table thead {
    background: var(--renter-brand-tint);
}

.renter-table th {
    text-align: left;
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--renter-brand-text);
    border-bottom: 1px solid var(--renter-brand-border);
}

.renter-table th.num { text-align: right; }

.renter-table td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--renter-border);
    color: var(--renter-text);
    vertical-align: top;
}

.renter-table td.num {
    text-align: right;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.renter-table td.charge { color: var(--danger); font-weight: var(--weight-medium); }
.renter-table td.credit { color: var(--success); font-weight: var(--weight-medium); }
.renter-table td.balance { color: var(--renter-text); font-weight: var(--weight-semibold); }
.renter-table td.balance[data-state="due"] { color: var(--danger); }

.renter-table tbody tr:hover { background: var(--renter-brand-tint); }
.renter-table tbody tr:last-child td { border-bottom: none; }

.renter-table .row-date {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.renter-table .row-date small {
    color: var(--renter-text-tertiary);
    font-size: var(--text-2xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
}

/* ─── Report-issue form ────────────────────────────────── */

.renter-form-card {
    background: var(--renter-surface);
    border: 1.5px solid var(--renter-border);
    border-radius: var(--radius-2xl);
    padding: var(--space-8);
    display: grid;
    gap: var(--space-5);
    box-shadow: var(--renter-shadow-card);
}

.renter-form-card-target {
    background: var(--renter-brand-tint);
    border: 1px solid var(--renter-brand-border);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    color: var(--renter-brand-text);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.renter-form-card-target::before {
    content: "📍";
    font-size: var(--text-md);
}

.renter-form-card-target strong {
    color: var(--renter-brand-text);
    font-weight: var(--weight-semibold);
}

.renter-form-card .form-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.renter-form-card .form-field > label,
.renter-form-card .form-field > span {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--renter-text);
    margin-bottom: 0;
}

.renter-form-card .form-field input[type="text"],
.renter-form-card .form-field input[type="tel"],
.renter-form-card .form-field input[type="email"],
.renter-form-card .form-field select,
.renter-form-card .form-field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: var(--space-3) var(--space-4);
    background: var(--renter-surface);
    border: 1.5px solid var(--renter-border-strong);
    border-radius: var(--radius-md);
    color: var(--renter-text);
    font: inherit;
    font-size: var(--text-base);
    transition: border-color var(--duration-fast) var(--ease-smooth),
                box-shadow var(--duration-fast) var(--ease-smooth);
}

.renter-form-card .form-field input:focus,
.renter-form-card .form-field select:focus,
.renter-form-card .form-field textarea:focus {
    outline: none;
    border-color: var(--renter-brand);
    box-shadow: 0 0 0 4px var(--renter-brand-tint);
}

.renter-form-card .form-field textarea {
    min-height: 140px;
    resize: vertical;
    font-family: inherit;
}

.renter-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

.renter-form-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    padding-top: var(--space-4);
    border-top: 1px solid var(--renter-border);
}

.renter-form-disclaimer {
    font-size: var(--text-xs);
    color: var(--renter-text-tertiary);
    line-height: var(--leading-snug);
    max-width: 42ch;
    margin: 0;
}

.renter-form-card .btn[data-variant="primary"] {
    background: var(--renter-brand);
    border-color: var(--renter-brand);
    color: var(--renter-brand-fg);
    font-weight: var(--weight-semibold);
    box-shadow: 0 4px 12px -2px rgba(var(--accent-rgb),  0.30);
}

.renter-form-card .btn[data-variant="primary"]:hover {
    background: var(--renter-brand-soft);
    border-color: var(--renter-brand-soft);
}

.renter-form-card .btn[data-variant="ghost"] {
    color: var(--renter-text-secondary);
}

.renter-form-card .btn[data-variant="ghost"]:hover {
    background: var(--renter-brand-tint);
    color: var(--renter-brand-text);
}

/* ─── Photo upload ─────────────────────────────────────── */

.renter-photo-uploader {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.renter-photo-uploader-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--renter-text);
}

.renter-photo-uploader-hint {
    font-size: var(--text-xs);
    color: var(--renter-text-tertiary);
    line-height: var(--leading-snug);
    margin: -4px 0 0;
}

.renter-photo-dropzone {
    position: relative;
    border: 2px dashed var(--renter-border-strong);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    background: var(--renter-surface);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-smooth),
                background var(--duration-fast) var(--ease-smooth);
}

.renter-photo-dropzone:hover,
.renter-photo-dropzone[data-state="dragover"] {
    border-color: var(--renter-brand);
    background: var(--renter-brand-tint);
}

.renter-photo-dropzone input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.renter-photo-dropzone-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    background: var(--renter-brand-tint);
    color: var(--renter-brand-text);
    display: inline-grid;
    place-items: center;
    font-size: var(--text-xl);
    margin-bottom: var(--space-1);
}

.renter-photo-dropzone-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--renter-text);
}

.renter-photo-dropzone-sub {
    font-size: var(--text-xs);
    color: var(--renter-text-tertiary);
}

.renter-photo-dropzone-cta {
    color: var(--renter-brand-text);
    font-weight: var(--weight-semibold);
    text-decoration: underline;
}

.renter-photo-thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: var(--space-3);
}

.renter-photo-thumb {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--renter-border);
    background: var(--renter-surface-elev);
    box-shadow: var(--renter-shadow-card);
}

.renter-photo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.renter-photo-thumb-name {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 4px 6px;
    background: linear-gradient(to top, rgba(var(--shadow-rgb),  0.75) 0%, transparent 100%);
    color: var(--white);
    font-size: var(--text-2xs);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.renter-photo-remove {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-full);
    background: rgba(var(--shadow-rgb),  0.7);
    color: var(--white);
    border: 0;
    cursor: pointer;
    display: inline-grid;
    place-items: center;
    font-size: var(--text-xs);
    line-height: 1;
}

.renter-photo-remove:hover {
    background: var(--danger);
}

/* ─── Confirmation card ────────────────────────────────── */

.renter-confirmation {
    background:
        radial-gradient(ellipse at top, var(--renter-brand-tint) 0%, transparent 60%),
        var(--renter-surface);
    border: 1.5px solid var(--renter-brand-border);
    border-radius: var(--radius-2xl);
    padding: var(--space-10) var(--space-8);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    box-shadow: var(--renter-shadow-card);
}

.renter-confirmation-icon {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--renter-brand) 0%, var(--renter-brand-soft) 100%);
    color: var(--renter-brand-fg);
    display: inline-grid;
    place-items: center;
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    box-shadow: var(--renter-shadow-hero);
}

.renter-confirmation h2 {
    margin: 0;
    font-family: 'Outfit', var(--font-sans);
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
    color: var(--renter-text);
}

.renter-confirmation p {
    margin: 0;
    color: var(--renter-text-secondary);
    line-height: var(--leading-normal);
    max-width: 48ch;
}

.renter-confirmation code {
    background: var(--renter-brand-tint);
    color: var(--renter-brand-text);
    padding: 2px var(--space-2);
    border-radius: var(--radius-xs);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
}

.renter-confirmation-actions {
    display: inline-flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-top: var(--space-3);
}

.renter-confirmation .btn[data-variant="primary"] {
    background: var(--renter-brand);
    border-color: var(--renter-brand);
    color: var(--renter-brand-fg);
    font-weight: var(--weight-semibold);
}

.renter-confirmation .btn[data-variant="primary"]:hover {
    background: var(--renter-brand-soft);
    border-color: var(--renter-brand-soft);
}

/* ─── Buttons (top-level override) ─────────────────────── */

.renter-page .btn[data-variant="primary"],
.renter-shell .btn[data-variant="primary"] {
    background: var(--renter-brand);
    border-color: var(--renter-brand);
    color: var(--renter-brand-fg);
    font-weight: var(--weight-semibold);
    transition: background var(--duration-fast) var(--ease-smooth);
}

.renter-page .btn[data-variant="primary"]:hover {
    background: var(--renter-brand-soft);
    border-color: var(--renter-brand-soft);
}

.renter-page a {
    color: var(--renter-brand-text);
}

/* ─── Sign workflow ────────────────────────────────────────
   "Awaiting signature" CTA on the renter dashboard + the
   /renter/lease/{id}/sign page itself. Designed to feel
   urgent-but-friendly — the renter needs to do one thing
   and we make that thing the most prominent element on the
   page. */

.renter-sign-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    flex-wrap: wrap;
    margin-bottom: var(--space-6);
    padding: var(--space-5) var(--space-6);
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg,
        var(--renter-brand) 0%,
        var(--renter-brand-soft) 100%);
    color: var(--renter-brand-fg);
    box-shadow: var(--renter-shadow-hero);
}

.renter-sign-cta-soft {
    background: var(--renter-brand-tint);
    color: var(--renter-text);
    box-shadow: var(--renter-shadow-card);
}

.renter-sign-cta-eyebrow {
    display: inline-block;
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    opacity: 0.85;
    margin-bottom: var(--space-1);
}

.renter-sign-cta h2 {
    margin: 0 0 var(--space-1);
    font-size: var(--text-xl);
    line-height: var(--leading-tight);
    color: inherit;
}

.renter-sign-cta p {
    margin: 0;
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    opacity: 0.95;
    max-width: 48ch;
}

.renter-sign-cta .btn[data-variant="primary"] {
    background: var(--renter-surface);
    border-color: var(--renter-surface);
    color: var(--renter-brand);
}

.renter-sign-cta .btn[data-variant="primary"]:hover {
    background: var(--renter-surface-elev);
    border-color: var(--renter-surface-elev);
}

/* Sign page proper — single hero card with sections inside. */

.renter-sign-card .renter-card-head h1 {
    margin: var(--space-2) 0 var(--space-2);
    font-size: var(--text-2xl);
    line-height: var(--leading-tight);
}

.renter-back {
    display: inline-block;
    margin-bottom: var(--space-2);
    font-size: var(--text-sm);
    color: var(--renter-text-secondary);
    text-decoration: none;
}

.renter-back:hover { color: var(--renter-text); text-decoration: underline; }

.renter-ok-banner {
    margin: var(--space-4) 0;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--renter-brand-tint);
    color: var(--renter-text);
    border: 1px solid var(--renter-brand-border);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
}

.renter-ok-banner a {
    color: var(--renter-brand-text);
    text-decoration: underline;
}

.renter-section-title {
    margin: var(--space-5) 0 var(--space-3);
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--renter-text);
}

.renter-sign-summary {
    margin-top: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background: var(--renter-bg);
    border: 1px solid var(--renter-border);
}

.renter-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-3) var(--space-5);
    margin: 0;
}

.renter-summary-grid > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.renter-summary-grid dt {
    margin: 0;
    font-size: var(--text-2xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--renter-text-tertiary);
    font-weight: var(--weight-semibold);
}

.renter-summary-grid dd {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--renter-text);
    line-height: var(--leading-snug);
    word-break: break-word;
}

.renter-sign-action {
    margin-top: var(--space-5);
    padding: var(--space-5);
    border-radius: var(--radius-md);
    background: var(--renter-surface);
    border: 1px solid var(--renter-border);
}

.renter-tabs {
    display: inline-flex;
    gap: 0;
    margin-bottom: var(--space-4);
    background: var(--renter-bg);
    border: 1px solid var(--renter-border);
    border-radius: var(--radius-md);
    padding: 3px;
}

.renter-tab {
    padding: var(--space-2) var(--space-4);
    border: 0;
    background: transparent;
    color: var(--renter-text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    cursor: pointer;
    border-radius: calc(var(--radius-md) - 2px);
    transition: background var(--duration-fast) var(--ease-smooth),
                color var(--duration-fast) var(--ease-smooth);
}

.renter-tab:hover { color: var(--renter-text); }

.renter-tab.is-active {
    background: var(--renter-surface);
    color: var(--renter-brand);
    box-shadow: 0 1px 2px rgba(var(--accent-rgb),  0.08);
}

.renter-upload {
    padding: var(--space-4);
    border: 1px dashed var(--renter-border-strong);
    border-radius: var(--radius-md);
    background: var(--renter-bg);
    margin-bottom: var(--space-3);
}

.renter-sign-audit {
    margin-top: var(--space-5);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background: var(--renter-brand-tint);
    border: 1px solid var(--renter-brand-border);
}

.renter-shell-content {
    max-width: 760px;
    margin: 0 auto;
    padding: var(--space-6) var(--space-4) var(--space-10);
}

.renter-card {
    background: var(--renter-surface);
    border: 1px solid var(--renter-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--renter-shadow-card);
}

.renter-loading {
    text-align: center;
    padding: var(--space-8);
    color: var(--renter-text-secondary);
}

/* ─── Responsive ───────────────────────────────────────── */

@media (max-width: 720px) {
    .renter-main { padding: var(--space-5) var(--space-3); }
    .renter-lease-hero { padding: var(--space-6) var(--space-5); }
    .renter-lease-hero h2 { font-size: var(--text-xl); }
    .renter-balance-amount { font-size: var(--text-2xl); }
    .renter-balance-card { padding: var(--space-5); }
    .renter-form-card { padding: var(--space-5); }
    .renter-form-grid { grid-template-columns: 1fr; }
    .renter-topbar { padding: 0 var(--space-4); }
    .renter-topbar-name { display: none; }
    .renter-page-header h1 { font-size: var(--text-2xl); }

    .renter-sign-cta { padding: var(--space-4); }
    .renter-sign-cta h2 { font-size: var(--text-lg); }
    .renter-card { padding: var(--space-5); }
}

/* ============================================================
   Renter portal · tabbed navigation + per-tab content
   Added for the Lease / Statement / Maintenance / Inspections /
   Documents redesign. Pure links (no JS); active tab highlighted
   by the page via <RenterTabs Active="…" />. Token-driven.
   ============================================================ */

/* ─── Tab bar ──────────────────────────────────────────── */
.renter-tabs {
    border-bottom: 1px solid var(--renter-border);
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.renter-tabs::-webkit-scrollbar { display: none; }

.renter-tabs-inner {
    display: inline-flex;
    gap: var(--space-1);
    min-width: 100%;
}

.renter-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px; /* sit the active underline on the bar's border */
    color: var(--renter-text-tertiary);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    text-decoration: none;
    white-space: nowrap;
    border-top-left-radius: var(--radius-sm);
    border-top-right-radius: var(--radius-sm);
    transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.renter-tab svg { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.85; }

.renter-tab:hover {
    color: var(--renter-text);
    background: var(--renter-brand-tint);
}

.renter-tab.is-active {
    color: var(--renter-brand-text);
    border-bottom-color: var(--renter-brand);
}
.renter-tab.is-active svg { opacity: 1; }

/* ─── Page header row (title + right-aligned action) ───── */
.renter-page-header-row {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}
.renter-page-header-row > div {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* ─── Overview quick-links (cards → other tabs) ────────── */
.renter-quicklinks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-3);
}
.renter-quicklink {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: var(--space-4) var(--space-5);
    background: var(--renter-surface);
    border: 1px solid var(--renter-border);
    border-radius: var(--radius-lg);
    text-decoration: none;
    box-shadow: var(--renter-shadow-card);
    transition: border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}
.renter-quicklink:hover {
    border-color: var(--renter-brand);
    transform: translateY(-2px);
}
.renter-quicklink-title {
    font-family: 'Outfit', var(--font-sans);
    font-weight: var(--weight-bold);
    color: var(--renter-text);
    font-size: var(--text-md);
}
.renter-quicklink-title::after { content: " →"; color: var(--renter-brand-text); }
.renter-quicklink-sub {
    font-size: var(--text-xs);
    color: var(--renter-text-tertiary);
    line-height: var(--leading-snug);
}

/* ─── Section count badge ──────────────────────────────── */
.renter-count-badge {
    display: inline-grid;
    place-items: center;
    min-width: 1.4rem;
    height: 1.4rem;
    padding: 0 var(--space-2);
    border-radius: var(--radius-full);
    background: var(--renter-brand-tint);
    color: var(--renter-brand-text);
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    vertical-align: middle;
    margin-left: var(--space-1);
}

.renter-empty-compact { padding: var(--space-6); }

/* ─── Success pill tone (resolved / completed) ─────────── */
.renter-ticket-pill[data-tone="success"] {
    background: var(--success-subtle);
    color: var(--success);
    border-color: var(--success);
}
.renter-ticket-pill[data-tone="neutral"] {
    background: var(--renter-bg);
    color: var(--renter-text-tertiary);
    border-color: var(--renter-border);
}

/* ─── Inspections list ─────────────────────────────────── */
.renter-inspection-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.renter-inspection-card {
    background: var(--renter-surface);
    border: 1px solid var(--renter-border);
    border-left: 3px solid var(--renter-border-strong);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
    box-shadow: var(--renter-shadow-card);
}
.renter-inspection-card[data-status="Completed"] { border-left-color: var(--success); }
.renter-inspection-card[data-status="Scheduled"] { border-left-color: var(--warning); }
.renter-inspection-card[data-status="InProgress"] { border-left-color: var(--info); }
.renter-inspection-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}
.renter-inspection-title {
    margin: 0;
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
    color: var(--renter-text);
}
.renter-inspection-blurb {
    margin: var(--space-1) 0 0;
    font-size: var(--text-sm);
    color: var(--renter-text-secondary);
}
.renter-inspection-meta {
    margin: var(--space-2) 0 0;
    font-size: var(--text-xs);
    color: var(--renter-text-tertiary);
}
.renter-inspection-notes {
    margin: var(--space-3) 0 0;
    padding: var(--space-2) var(--space-3);
    border-left: 2px solid var(--renter-border);
    background: var(--renter-bg);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    color: var(--renter-text-secondary);
}

/* ─── Documents list ───────────────────────────────────── */
.renter-doc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.renter-doc-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--renter-surface);
    border: 1px solid var(--renter-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--renter-shadow-card);
}
.renter-doc-glyph {
    flex-shrink: 0;
    width: 2.4rem;
    height: 2.4rem;
    display: grid;
    place-items: center;
    background: var(--renter-bg);
    border-radius: var(--radius-md);
    font-size: var(--text-xl);
}
.renter-doc-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.renter-doc-name {
    font-weight: var(--weight-semibold);
    color: var(--renter-text);
    font-size: var(--text-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.renter-doc-meta {
    font-size: var(--text-xs);
    color: var(--renter-text-tertiary);
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex-wrap: wrap;
}
.renter-doc-tag {
    display: inline-flex;
    align-items: center;
    padding: 1px var(--space-2);
    border-radius: var(--radius-full);
    background: var(--renter-brand-tint);
    color: var(--renter-brand-text);
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

/* ─── Muted helper line under a list ───────────────────── */
.renter-page-note {
    font-size: var(--text-xs);
    color: var(--renter-text-tertiary);
    margin: 0;
    text-align: center;
    line-height: var(--leading-snug);
}

@media (max-width: 640px) {
    .renter-tab { padding-left: var(--space-2); padding-right: var(--space-2); }
    .renter-page-header-row { flex-direction: column; }
    .renter-page-header-row .btn { align-self: stretch; text-align: center; }
    .renter-doc-row { flex-wrap: wrap; }
    .renter-doc-row .btn { width: 100%; }
}

/* ─── Applicant fill page ───────────────────────────────────
   Stripped-down anonymous shell for /applicant/application/{id}/fill.
   Same forest-green brand as the renter portal but no auth chrome.
   Mobile-first; the form sits in one column on phone and a tighter
   2-col grid on desktop. */

.applicant-shell-wrap {
    --renter-brand: var(--accent);
    --renter-brand-soft: var(--accent-hover);
    --renter-brand-fg: var(--white);
    --renter-brand-tint: var(--accent-subtle);
    --renter-brand-border: var(--accent-border);
    --renter-brand-text: var(--accent);
    --renter-bg: var(--surface-2);
    --renter-surface: var(--white);
    --renter-border: var(--border);
    --renter-border-strong: var(--border-strong);
    --renter-text: var(--text);
    --renter-text-secondary: var(--text-secondary);
    --renter-text-tertiary: var(--text-tertiary);

    min-height: 100dvh;
    background: var(--renter-bg);
    color: var(--renter-text);
    font-family: 'Inter', -apple-system, system-ui, sans-serif;
}

/* The light palette above is LIGHT-ONLY; mirror the .renter-shell dark
   values so the applicant-fill surface flips with the platform theme
   (asetrix-theme cookie → data-theme on <html>) instead of rendering a
   white card on the dark page. */
[data-theme="dark"] .applicant-shell-wrap {
    --renter-brand:          var(--accent);
    --renter-brand-soft:     var(--accent-bright);
    --renter-brand-fg:       var(--accent-active);
    --renter-brand-tint:     rgba(var(--accent-rgb),  0.10);
    --renter-brand-border:   rgba(var(--accent-rgb),  0.32);
    --renter-brand-text:     var(--accent-border);
    --renter-bg:             var(--bg);
    --renter-surface:        var(--surface);
    --renter-border:         var(--border);
    --renter-border-strong:  var(--border-strong);
    --renter-text:           var(--text);
    --renter-text-secondary: var(--text-secondary);
    --renter-text-tertiary:  var(--text-tertiary);
}

.applicant-main-wrap {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--space-6) var(--space-4) var(--space-12);
}

.applicant-shell { display: contents; }
.applicant-main { display: contents; }

.applicant-topbar {
    text-align: center;
    margin-bottom: var(--space-5);
}

.applicant-brand {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-weight: 700;
    font-size: var(--text-base);
    letter-spacing: -0.01em;
    color: var(--renter-brand-text);
}

.applicant-card {
    background: var(--renter-surface);
    border: 1px solid var(--renter-border);
    border-radius: var(--radius-lg);
    padding: var(--space-7) var(--space-6);
    box-shadow: 0 1px 2px rgba(var(--accent-rgb),  0.04),
                0 12px 32px -12px rgba(var(--accent-rgb),  0.10);
}

.applicant-card-head { margin-bottom: var(--space-6); }
.applicant-card-head h1 {
    margin: var(--space-2) 0 var(--space-2);
    font-size: var(--text-2xl);
    line-height: var(--leading-tight);
    color: var(--renter-text);
}

.applicant-eyebrow {
    display: inline-block;
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--renter-brand-text);
}

.applicant-ok-banner,
.applicant-error-banner {
    margin: var(--space-4) 0;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
}

.applicant-ok-banner {
    background: var(--renter-brand-tint);
    color: var(--renter-text);
    border: 1px solid var(--renter-brand-border);
}

.applicant-error-banner {
    background: var(--danger-subtle);
    color: var(--danger);
    border: 1px solid var(--danger);
}

.applicant-section {
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--renter-border);
}

.applicant-section:first-of-type { border-top: 0; padding-top: 0; }

.applicant-section h2 {
    margin: 0 0 var(--space-3);
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--renter-text);
}

.applicant-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3) var(--space-4);
}

.applicant-grid label {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font-size: var(--text-sm);
    color: var(--renter-text-secondary);
}

.applicant-grid label > span {
    font-weight: var(--weight-medium);
    color: var(--renter-text);
    font-size: var(--text-xs);
}

.applicant-grid input,
.applicant-grid select {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--renter-border-strong);
    border-radius: var(--radius-md);
    background: var(--renter-surface);
    color: var(--renter-text);
    font: inherit;
    font-size: var(--text-sm);
}

.applicant-grid input:focus,
.applicant-grid select:focus {
    outline: 0;
    border-color: var(--renter-brand);
    /* Brand-token ring (not a fixed forest-green literal) so the keyboard
       focus indicator stays visible in dark — --renter-brand brightens to
       var(--accent), where dark-green at 15% alpha was near-invisible. */
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--renter-brand) 15%, transparent);
}

.applicant-grid-2 { grid-column: span 2; }

.applicant-checkbox {
    grid-column: span 2;
    flex-direction: row !important;
    align-items: center;
    gap: var(--space-2);
}

.applicant-checkbox input { width: auto; }

.applicant-upload-row {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--space-3);
    margin-top: var(--space-3);
    align-items: end;
}

.applicant-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.applicant-field > span {
    font-weight: var(--weight-medium);
    color: var(--renter-text);
    font-size: var(--text-xs);
}

.applicant-field select {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--renter-border-strong);
    border-radius: var(--radius-md);
    background: var(--renter-surface);
    color: var(--renter-text);
    font: inherit;
    font-size: var(--text-sm);
}

.applicant-upload-drop {
    padding: var(--space-3) var(--space-4);
    border: 1px dashed var(--renter-border-strong);
    border-radius: var(--radius-md);
    background: var(--renter-bg);
}

.applicant-uploaded {
    list-style: none;
    padding: 0;
    margin: var(--space-4) 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.applicant-uploaded li {
    padding: var(--space-2) var(--space-3);
    background: var(--renter-bg);
    border: 1px solid var(--renter-border);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
}

.applicant-actions {
    margin-top: var(--space-7);
    padding-top: var(--space-5);
    border-top: 1px solid var(--renter-border);
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    justify-content: flex-end;
}

.applicant-summary {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3) var(--space-5);
    margin: 0;
}

.applicant-summary > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.applicant-summary dt {
    margin: 0;
    font-size: var(--text-2xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--renter-text-tertiary);
    font-weight: var(--weight-semibold);
}

.applicant-summary dd {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--renter-text);
}

.applicant-loading {
    text-align: center;
    padding: var(--space-10);
    color: var(--renter-text-secondary);
}

/* Two-path banner near the top of the fill page: "fill online OR
   download + scan back". Friendly, not pushy. */
.applicant-path-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-6);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-md);
    background: var(--renter-brand-tint);
    border: 1px solid var(--renter-brand-border);
}

.applicant-path-banner-text { flex: 1; min-width: 240px; }
.applicant-path-banner-text strong {
    display: block;
    color: var(--renter-text);
    margin-bottom: var(--space-1);
}
.applicant-path-banner-text p {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--renter-text-secondary);
    line-height: var(--leading-snug);
    max-width: 48ch;
}

/* When the applicant has uploaded a completed paper form, this CTA
   appears above the structured submit so they can shortcut. */
.applicant-paper-cta {
    margin-top: var(--space-6);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-md);
    background: var(--renter-brand-tint);
    border: 1px solid var(--renter-brand-border);
}
.applicant-paper-cta strong { color: var(--renter-text); }
.applicant-paper-cta p {
    margin: var(--space-1) 0 var(--space-3);
    font-size: var(--text-sm);
    color: var(--renter-text-secondary);
}

.applicant-shell-wrap .btn[data-variant="primary"] {
    background: var(--renter-brand);
    border-color: var(--renter-brand);
    color: var(--renter-brand-fg);
    font-weight: var(--weight-semibold);
}

.applicant-shell-wrap .btn[data-variant="primary"]:hover {
    background: var(--renter-brand-soft);
    border-color: var(--renter-brand-soft);
}

@media (max-width: 720px) {
    .applicant-card { padding: var(--space-5) var(--space-4); }
    .applicant-grid { grid-template-columns: 1fr; }
    .applicant-grid-2 { grid-column: span 1; }
    .applicant-checkbox { grid-column: span 1; }
    .applicant-upload-row { grid-template-columns: 1fr; }
    .applicant-summary { grid-template-columns: 1fr; }
    .applicant-actions { flex-direction: column-reverse; }
    .applicant-actions .btn { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════
   AFILL — Applicant fill page v2 (pro-grade redesign)
   Replaces the old .applicant-* classes for the rental-application
   completion surface. Same renter-portal forest-green family but
   with the breathing room + section flow of a proper loan-app
   experience. Mobile-first; everything reflows cleanly at narrow.
   ═══════════════════════════════════════════════════════════════ */

.afill-page {
    --afill-brand:        var(--accent);
    --afill-brand-deep:   var(--accent-hover);
    --afill-brand-soft:   var(--accent-hover);
    --afill-brand-tint:   var(--accent-subtle);
    --afill-brand-tint-2: var(--accent-active);
    --afill-brand-border: var(--accent-border);
    --afill-brand-fg:     var(--white);
    --afill-bg:           var(--surface-2);
    --afill-surface:      var(--white);
    --afill-border:       var(--border);
    --afill-border-2:     var(--border-strong);
    --afill-text:         var(--text);
    --afill-text-2:       var(--text-secondary);
    --afill-text-3:       var(--text-tertiary);
    --afill-danger:       var(--danger);
    --afill-danger-bg:    var(--danger-subtle);

    background: var(--afill-bg);
    min-height: 100dvh;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    color: var(--afill-text);
    line-height: 1.5;
}

/* afill v2 declares its --afill-* palette LIGHT-ONLY; redeclare every var
   for dark, reusing the .renter-shell dark forest-green family and routing
   the danger pair through the shared dark semantic values. Keeps the
   applicant-fill surface in sync with the platform theme. */
[data-theme="dark"] .afill-page {
    --afill-brand:        var(--accent);
    --afill-brand-deep:   var(--accent-bright);
    --afill-brand-soft:   var(--accent-bright);
    --afill-brand-tint:   rgba(var(--accent-rgb),  0.10);
    --afill-brand-tint-2: rgba(var(--accent-rgb),  0.18);
    --afill-brand-border: rgba(var(--accent-rgb),  0.32);
    --afill-brand-fg:     var(--accent-active);
    --afill-bg:           var(--bg);
    --afill-surface:      var(--surface);
    --afill-border:       var(--border);
    --afill-border-2:     var(--border-strong);
    --afill-text:         var(--text);
    --afill-text-2:       var(--text-secondary);
    --afill-text-3:       var(--text-tertiary);
    --afill-danger:       var(--danger);
    --afill-danger-bg:    rgba(var(--danger-rgb),  0.12);
}

.afill-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 5rem 2rem;
    color: var(--afill-text-2);
    font-size: 15px;
}

.afill-spin {
    width: 24px;
    height: 24px;
    animation: afill-rot 1s linear infinite;
}
@keyframes afill-rot { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* Sticky progress bar at the very top — visual feedback while
   the applicant fills in fields. Updates live as percent climbs. */
.afill-progress-bar {
    position: sticky;
    top: 0;
    z-index: 20;
    height: 4px;
    width: 100%;
    background: var(--afill-border);
}

.afill-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--afill-brand-soft), var(--afill-brand));
    transition: width 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Centred column — wider than the renter portal because the
   form's section-by-section layout reads better with more room. */
.afill-shell {
    max-width: 880px;
    margin: 0 auto;
    padding: 2.5rem 1.25rem 8rem;  /* bottom padding clears the sticky bar */
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.afill-hero {
    text-align: left;
    padding: 0 0.5rem;
    margin-bottom: 0.5rem;
}

.afill-hero-eyebrow {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--afill-brand);
    background: var(--afill-brand-tint);
    border: 1px solid var(--afill-brand-border);
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    margin-bottom: 0.85rem;
}

.afill-hero-title {
    margin: 0 0 0.4rem;
    font-size: 32px;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--afill-text);
    font-weight: 700;
}

.afill-hero-sub {
    margin: 0;
    font-size: 15px;
    color: var(--afill-text-2);
    line-height: 1.5;
}

.afill-hero-sub strong { color: var(--afill-text); font-weight: 600; }

/* ─── Cards ──────────────────────────────────────────────── */

.afill-card {
    background: var(--afill-surface);
    border: 1px solid var(--afill-border);
    border-radius: 16px;
    padding: 1.75rem;
    box-shadow:
        0 1px 2px rgba(var(--accent-rgb),  0.03),
        0 8px 24px -16px rgba(var(--accent-rgb),  0.10);
}

.afill-card-error {
    border-color: var(--afill-danger);
    background: var(--afill-danger-bg);
}

.afill-card-head {
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--afill-border);
}

.afill-card-eyebrow {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--afill-brand);
    margin-bottom: 0.45rem;
}

.afill-card-head h2 {
    margin: 0 0 0.35rem;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--afill-text);
}

.afill-card-sub {
    margin: 0;
    font-size: 13.5px;
    color: var(--afill-text-2);
    max-width: 62ch;
    line-height: 1.55;
}

.afill-card-sub strong { color: var(--afill-text); font-weight: 600; }

.afill-sub-h {
    margin: 1.5rem 0 0.75rem;
    font-size: 14px;
    font-weight: 600;
    color: var(--afill-text);
}

/* ─── Lease-setup card (what the agency entered) ──────── */

.afill-setup-card {
    background: linear-gradient(180deg, var(--afill-surface) 0%, var(--afill-bg) 100%);
    border-color: var(--afill-brand-border);
}

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

.afill-stat {
    background: var(--afill-bg);
    border: 1px solid var(--afill-border);
    border-radius: 10px;
    padding: 0.85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.afill-stat-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--afill-text-3);
    font-weight: 600;
}

.afill-stat-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--afill-text);
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}

.afill-stat-total {
    grid-column: 1 / -1;
    background: var(--afill-brand);
    color: var(--afill-brand-fg);
    border-color: var(--afill-brand);
}

.afill-stat-total .afill-stat-label { color: color-mix(in srgb, var(--afill-brand-fg) 78%, transparent); }
.afill-stat-total .afill-stat-value { color: var(--afill-brand-fg); font-size: 22px; }

/* ─── Two-path card (download / online) ───────────────── */

.afill-path-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    flex-wrap: wrap;
    background: var(--afill-brand-tint);
    border-color: var(--afill-brand-border);
    padding: 1.5rem 1.75rem;
}

.afill-path-text { flex: 1; min-width: 260px; }
.afill-path-text h2 {
    margin: 0 0 0.35rem;
    font-size: 18px;
    color: var(--afill-text);
}
.afill-path-text p {
    margin: 0;
    font-size: 13.5px;
    color: var(--afill-text-2);
    max-width: 50ch;
    line-height: 1.5;
}

.afill-path-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.1rem;
    background: var(--afill-brand);
    color: var(--afill-brand-fg) !important;
    text-decoration: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid var(--afill-brand);
    transition: background 140ms ease, transform 100ms ease;
    flex-shrink: 0;
}

.afill-path-btn:hover {
    background: var(--afill-brand-deep);
    border-color: var(--afill-brand-deep);
    transform: translateY(-1px);
}

.afill-path-btn svg { width: 16px; height: 16px; }

/* ─── Banners ──────────────────────────────────────────── */

.afill-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 1.1rem;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.5;
}

.afill-banner-ok {
    background: var(--afill-brand-tint);
    color: var(--afill-text);
    border: 1px solid var(--afill-brand-border);
}

.afill-banner-error {
    background: var(--afill-danger-bg);
    color: var(--afill-danger);
    border: 1px solid var(--afill-danger);
}

.afill-banner-icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: var(--afill-brand);
    color: var(--afill-brand-fg);
    font-weight: 700;
    font-size: 13px;
    margin-top: 1px;
}

.afill-banner-error .afill-banner-icon { background: var(--afill-danger); }

/* Amber "agency asked for changes" callout — louder than info,
   softer than error. The renter shouldn't feel scolded, just
   nudged to fix the missing pieces. Left border highlights the
   amber tone without flooding the whole card. */
.afill-banner-revision {
    background: var(--warning-subtle);
    color: var(--warning);
    border: 1px solid var(--warning);
    border-left-width: 4px;
}
.afill-banner-revision .afill-banner-icon {
    background: var(--warning);
    color: var(--afill-brand-fg);
}
.afill-banner-revision .afill-banner-meta {
    color: var(--warning);
    font-size: 12px;
    margin: 0.1rem 0 0.5rem;
    opacity: 0.85;
}
.afill-banner-revision .afill-banner-note {
    background: var(--afill-surface);
    border-radius: 8px;
    padding: 0.7rem 0.85rem;
    margin: 0 0 0.5rem;
    white-space: pre-wrap;
    font-style: italic;
    color: var(--afill-text);
    line-height: 1.5;
    font-size: 14px;
}
.afill-banner-revision .afill-banner-cta {
    color: var(--warning);
    font-size: 13.5px;
    margin: 0;
}

.afill-banner strong { display: block; margin-bottom: 0.15rem; }
.afill-banner p { margin: 0; font-size: 13.5px; color: var(--afill-text-2); }

.afill-inline-error {
    margin: 0.75rem 0 0;
    padding: 0.5rem 0.85rem;
    background: var(--afill-danger-bg);
    color: var(--afill-danger);
    border: 1px solid var(--afill-danger);
    border-radius: 8px;
    font-size: 13px;
}

/* ─── Form fields ──────────────────────────────────────── */

.afill-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1.25rem;
}

.afill-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.afill-field-wide { grid-column: 1 / -1; }
.afill-field-inline { gap: 0.5rem; }

.afill-field > span {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--afill-text);
    letter-spacing: 0.005em;
}

.afill-field > span em {
    color: var(--afill-brand-soft);
    font-style: normal;
    font-weight: 700;
}

.afill-field input,
.afill-field select {
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--afill-border-2);
    border-radius: 10px;
    background: var(--afill-surface);
    color: var(--afill-text);
    font: inherit;
    font-size: 14px;
    line-height: 1.4;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}

.afill-field input:focus,
.afill-field select:focus {
    outline: 0;
    border-color: var(--afill-brand);
    /* Brand-token ring so the focus indicator brightens in dark with
       --afill-brand (var(--accent)) instead of vanishing as dark-green-on-near-black. */
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--afill-brand) 14%, transparent);
}

.afill-field input::placeholder { color: var(--afill-text-3); }

.afill-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    margin: 0.25rem 0 1.25rem;
    font-size: 14px;
    color: var(--afill-text);
    cursor: pointer;
}

.afill-toggle input {
    width: 18px;
    height: 18px;
    accent-color: var(--afill-brand);
}

/* ─── Document checklist + dropzone ────────────────────── */

.afill-doc-checklist {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0.5rem;
}

.afill-doc-checklist li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.85rem;
    background: var(--afill-bg);
    border: 1px solid var(--afill-border);
    border-radius: 8px;
    font-size: 13px;
    color: var(--afill-text-2);
}

.afill-doc-checklist li.is-done {
    background: var(--afill-brand-tint);
    border-color: var(--afill-brand-border);
    color: var(--afill-text);
    font-weight: 500;
}

.afill-check {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: var(--afill-surface);
    border: 1px solid var(--afill-border-2);
    color: var(--afill-text-3);
    font-size: 12px;
    font-weight: 700;
}

.afill-doc-checklist li.is-done .afill-check {
    background: var(--afill-brand);
    border-color: var(--afill-brand);
    color: var(--afill-brand-fg);
}

.afill-upload-zone {
    padding: 1.25rem;
    background: var(--afill-bg);
    border-radius: 12px;
    border: 1px solid var(--afill-border);
}

.afill-upload-controls { margin-bottom: 0.85rem; }

.afill-dropzone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    padding: 1.75rem 1rem;
    background: var(--afill-surface);
    border: 2px dashed var(--afill-border-2);
    border-radius: 12px;
    text-align: center;
    color: var(--afill-text-2);
    transition: border-color 140ms ease, background 140ms ease;
}

.afill-dropzone:hover {
    border-color: var(--afill-brand);
    background: var(--afill-brand-tint);
}

.afill-dropzone svg {
    width: 32px;
    height: 32px;
    color: var(--afill-brand);
    margin-bottom: 0.25rem;
}

.afill-dropzone strong {
    font-size: 14px;
    color: var(--afill-text);
}

.afill-dropzone small {
    font-size: 12px;
    color: var(--afill-text-3);
}

.afill-dropzone ::deep input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.afill-doc-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.afill-doc-list li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.85rem;
    background: var(--afill-surface);
    border: 1px solid var(--afill-border);
    border-radius: 8px;
}

.afill-doc-icon {
    font-size: 20px;
    flex: 0 0 auto;
}

.afill-doc-meta {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.afill-doc-meta strong {
    font-size: 13.5px;
    color: var(--afill-text);
}

.afill-doc-meta span {
    font-size: 12px;
    color: var(--afill-text-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.afill-doc-ok {
    color: var(--afill-brand);
    font-weight: 700;
    font-size: 16px;
}

/* Per-uploaded-file delete button — gets the applicant out of a
   "wrong file" mistake without forcing them to ask the agency. */
.afill-doc-delete {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--afill-text-3);
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
    flex-shrink: 0;
}

.afill-doc-delete:hover {
    background: var(--afill-danger-bg);
    border-color: var(--afill-danger);
    color: var(--afill-danger);
}

.afill-doc-delete:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.afill-doc-delete svg { width: 16px; height: 16px; }

/* Date input — make the calendar picker icon visible on light
   browsers. The default WebKit icon is near-invisible on warm
   parchment, so we paint a custom green calendar icon and let the
   click target stay native. */
.afill-field input[type="date"] {
    position: relative;
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314532D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 18px 18px;
    color-scheme: light;
}

/* Dark mode: the forest-green calendar icon above is near-invisible on the
   dark field, and color-scheme:light forces a light native picker on a dark
   page. Repaint the icon in the bright dark-mode green and let the control
   adopt the dark scheme. */
[data-theme="dark"] .afill-page .afill-field input[type="date"] {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234ADE80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>");
    color-scheme: dark;
}

/* Tame the native picker icon so it overlays the custom one
   cleanly and stays clickable. Webkit only — Firefox uses its own
   chrome we can't restyle. */
.afill-field input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    opacity: 0;
    cursor: pointer;
}

/* ─── Declaration & signature ──────────────────────────── */

.afill-sign-card {
    border-color: var(--afill-brand-border);
    background: linear-gradient(180deg, var(--afill-surface) 0%, var(--afill-bg) 100%);
}

.afill-consent {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding: 0.85rem 1rem;
    background: var(--afill-bg);
    border: 1px solid var(--afill-border);
    border-radius: 10px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--afill-text-2);
    cursor: pointer;
    transition: border-color 140ms ease;
}

.afill-consent:hover { border-color: var(--afill-brand-border); }

.afill-consent input {
    width: 18px;
    height: 18px;
    accent-color: var(--afill-brand);
    margin-top: 0.15rem;
    flex-shrink: 0;
}

.afill-consent strong { color: var(--afill-text); font-weight: 600; }

.afill-signature-field {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--afill-border-2);
}

.afill-signature-field input {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 22px;
    font-weight: 600;
    font-style: italic;
    letter-spacing: -0.01em;
    padding: 0.85rem 1rem;
    color: var(--afill-brand);
}

.afill-sign-meta {
    margin: 0.85rem 0 0;
    font-size: 11.5px;
    color: var(--afill-text-3);
    font-style: italic;
}

/* ─── Sticky submit bar ────────────────────────────────── */

.afill-submit-bar {
    position: sticky;
    bottom: 0;
    margin: 1.5rem -1.25rem -8rem;
    padding: 1rem 1.25rem;
    background: color-mix(in srgb, var(--afill-bg) 92%, transparent);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--afill-border);
    z-index: 10;
}

.afill-submit-bar-inner {
    max-width: 880px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.afill-submit-status {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 200px;
    flex: 1;
}

.afill-submit-status strong {
    font-size: 14px;
    color: var(--afill-text);
}

.afill-submit-status span {
    font-size: 12.5px;
    color: var(--afill-text-3);
}

.afill-submit-actions {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.afill-btn {
    padding: 0.7rem 1.25rem;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 140ms ease, transform 100ms ease, box-shadow 140ms ease;
}

.afill-btn-ghost {
    background: var(--afill-surface);
    color: var(--afill-text);
    border-color: var(--afill-border-2);
}

.afill-btn-ghost:hover {
    background: var(--afill-bg);
    border-color: var(--afill-brand);
}

.afill-btn-primary {
    background: var(--afill-brand);
    color: var(--afill-brand-fg);
    border-color: var(--afill-brand);
    box-shadow: 0 1px 2px rgba(var(--shadow-rgb),  0.18), 0 8px 20px -8px rgba(var(--accent-rgb),  0.45);
}

.afill-btn-primary:hover {
    background: var(--afill-brand-deep);
    border-color: var(--afill-brand-deep);
    transform: translateY(-1px);
}

.afill-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ─── Read-only summary (post-submit) ─────────────────── */

.afill-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.85rem 1.5rem;
    margin: 0;
}

.afill-summary > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.afill-summary dt {
    margin: 0;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--afill-text-3);
    font-weight: 600;
}

.afill-summary dd {
    margin: 0;
    font-size: 14px;
    color: var(--afill-text);
}

/* ─── Responsive ───────────────────────────────────────── */

@media (max-width: 720px) {
    .afill-shell { padding: 1.75rem 1rem 9rem; }
    .afill-hero-title { font-size: 24px; }
    .afill-card { padding: 1.25rem; }
    .afill-grid { grid-template-columns: 1fr; }
    .afill-path-card { flex-direction: column; align-items: stretch; }
    .afill-path-btn { justify-content: center; }
    .afill-stat-grid { grid-template-columns: repeat(2, 1fr); }
    .afill-stat-total { grid-column: 1 / -1; }
    .afill-submit-bar-inner { flex-direction: column; align-items: stretch; }
    .afill-submit-actions { flex-direction: column; }
    .afill-btn { width: 100%; }
}

/* ─── Pre-submit validation modal ─────────────────────────
   Popup that surfaces every missing-field error in one place so
   the applicant doesn't have to scroll to the top of the form to
   read an inline alert banner. z-index sits above the sticky
   submit bar (which is position:sticky, not fixed, so plain
   z-index ordering still beats it). */

.afill-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(var(--shadow-rgb),  0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    display: grid;
    place-items: center;
    padding: 1.5rem;
    z-index: 200;
    animation: afill-modal-fade-in 160ms ease-out;
}

.afill-modal {
    background: var(--afill-surface, var(--surface-2));
    border: 1px solid rgba(var(--accent-rgb),  0.18);
    border-radius: 16px;
    box-shadow:
        0 1px 2px rgba(var(--shadow-rgb),  0.20),
        0 28px 64px -18px rgba(var(--shadow-rgb),  0.55);
    width: 100%;
    max-width: 520px;
    max-height: calc(100vh - 3rem);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: afill-modal-pop-in 220ms cubic-bezier(0.18, 1.2, 0.4, 1);
}

.afill-modal-head {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 1.4rem 1.5rem 0.75rem;
}

.afill-modal-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--warning-border), var(--warning-bright));
    color: var(--warning-deep);
    display: grid;
    place-items: center;
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 4px 10px -4px rgba(var(--warning-rgb),  0.45);
}

.afill-modal-titles {
    flex: 1;
    min-width: 0;
}

.afill-modal-titles h2 {
    margin: 0 0 0.2rem;
    font-size: 20px;
    font-weight: 700;
    color: var(--afill-brand, var(--accent));
    letter-spacing: -0.01em;
    line-height: 1.25;
}

.afill-modal-titles p {
    margin: 0;
    font-size: 13.5px;
    color: var(--afill-text-3, var(--text-secondary));
    line-height: 1.45;
}

.afill-modal-list {
    list-style: none;
    margin: 0;
    padding: 0.5rem 1.5rem 0.75rem;
    overflow-y: auto;
    flex: 1 1 auto;
}

.afill-modal-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.7rem 0;
    color: var(--afill-text, var(--text));
    font-size: 14.5px;
    line-height: 1.5;
}

.afill-modal-list li + li {
    border-top: 1px dashed rgba(var(--accent-rgb),  0.12);
}

.afill-modal-bullet {
    flex-shrink: 0;
    margin-top: 0.55rem;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--afill-danger);
    box-shadow: 0 0 0 3px var(--afill-danger-bg);
}

.afill-modal-foot {
    padding: 1rem 1.5rem 1.25rem;
    background: rgba(var(--accent-rgb),  0.04);
    border-top: 1px solid rgba(var(--accent-rgb),  0.10);
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.afill-modal-foot .afill-btn {
    min-width: 170px;
}

@keyframes afill-modal-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes afill-modal-pop-in {
    from { opacity: 0; transform: translateY(10px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 540px) {
    .afill-modal { max-width: 100%; border-radius: 14px; }
    .afill-modal-head { padding: 1.2rem 1.2rem 0.6rem; }
    .afill-modal-list { padding: 0.4rem 1.2rem 0.6rem; }
    .afill-modal-foot { padding: 0.9rem 1.2rem 1.1rem; }
    .afill-modal-foot .afill-btn { width: 100%; }
}

/* Respect users who've asked the OS for reduced motion. */
@media (prefers-reduced-motion: reduce) {
    .afill-modal-backdrop,
    .afill-modal { animation: none; }
}

/* ─── Upload progress rows ─────────────────────────────────
   Shown immediately when the renter picks files. Each row has
   a brand-green fill bar that ticks as Blazor reads chunks off
   the browser circuit. Done rows clear when LoadAsync refreshes
   the doc list; failed rows stick so the renter can see what
   went wrong. */

.afill-upload-progress {
    list-style: none;
    margin: 0.8rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.afill-upload-progress-row {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--afill-border);
    border-radius: 10px;
    background: var(--afill-surface);
    transition: border-color 140ms ease, background 140ms ease;
}

.afill-upload-progress-row[data-state="done"]   { border-color: var(--afill-brand); background: var(--afill-brand-tint); }
.afill-upload-progress-row[data-state="failed"] { border-color: var(--afill-danger); background: var(--afill-danger-bg); }

.afill-upload-progress-head {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 13px;
    color: var(--afill-text);
}

.afill-upload-progress-spin svg {
    width: 16px;
    height: 16px;
    color: var(--afill-brand);
}

.afill-upload-progress-row[data-state="uploading"] .afill-upload-progress-spin svg,
.afill-upload-progress-row[data-state="queued"]    .afill-upload-progress-spin svg {
    animation: afill-spin 0.9s linear infinite;
}

.afill-upload-progress-row[data-state="done"]   .afill-upload-progress-spin svg { color: var(--afill-brand); }
.afill-upload-progress-row[data-state="failed"] .afill-upload-progress-spin svg { color: var(--afill-danger); }

.afill-upload-progress-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.afill-upload-progress-pct {
    font-feature-settings: "tnum" 1;
    font-size: 12px;
    font-weight: 700;
    color: var(--afill-brand-deep);
}

.afill-upload-progress-row[data-state="failed"] .afill-upload-progress-pct { color: var(--afill-danger); }

.afill-upload-progress-track {
    height: 4px;
    background: rgba(var(--accent-rgb),  0.10);
    border-radius: 999px;
    overflow: hidden;
}

.afill-upload-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--afill-brand-soft), var(--afill-brand));
    border-radius: 999px;
    transition: width 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.afill-upload-progress-error {
    font-size: 12px;
    color: var(--afill-danger);
    line-height: 1.45;
}

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

@media (prefers-reduced-motion: reduce) {
    .afill-upload-progress-row[data-state="uploading"] .afill-upload-progress-spin svg,
    .afill-upload-progress-row[data-state="queued"]    .afill-upload-progress-spin svg { animation: none; }
}

/* ─── View button on each uploaded file ────────────────────
   Same warm parchment chip as the delete button; brand-green
   tint on hover so it reads as the primary action of the two. */
.afill-doc-view {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.6rem;
    margin-right: 0.4rem;
    background: var(--afill-surface);
    color: var(--afill-text-2);
    border: 1px solid var(--afill-border-2);
    border-radius: 8px;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}

.afill-doc-view svg { width: 14px; height: 14px; flex-shrink: 0; }

.afill-doc-view:hover:not(:disabled) {
    color: var(--afill-brand);
    border-color: var(--afill-brand);
    background: var(--afill-brand-tint);
}

.afill-doc-view:disabled { opacity: 0.5; cursor: not-allowed; }

/* ─── File preview overlay ─────────────────────────────────
   Lightbox-style modal the renter uses to sanity-check an
   uploaded image / PDF / Office doc before they sign + submit.
   Mirrors the portal-side document vault preview so both
   surfaces feel like one system. */

.afill-preview-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(var(--shadow-rgb),  0.82);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: grid;
    place-items: center;
    padding: 1.5rem;
    /* Portal chrome elements (topbar, toast container) live at
       higher z-indices on the agent side. The renter portal is
       chrome-free but we keep parity for consistency. */
    z-index: 10050;
    animation: afill-fade-in 160ms ease-out;
}

.afill-preview {
    position: relative;
    z-index: 10051;
    background: var(--afill-surface);
    border: 1px solid var(--afill-border);
    border-radius: 14px;
    box-shadow:
        0 1px 2px rgba(var(--shadow-rgb),  0.20),
        0 32px 80px -20px rgba(var(--shadow-rgb),  0.65);
    width: 100%;
    max-width: min(1100px, calc(100vw - 3rem));
    height: min(900px, calc(100vh - 3rem));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: afill-pop-in 220ms cubic-bezier(0.18, 1.2, 0.4, 1);
}

@keyframes afill-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes afill-pop-in {
    from { opacity: 0; transform: translateY(10px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}

.afill-preview-bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1rem;
    /* Solid surface — no transparent gradient. The original
       brand-tinted gradient faded to transparent at the bottom,
       letting the dark preview-body canvas show through behind
       the right-side toolbar buttons. */
    background: var(--afill-surface);
    border-bottom: 1px solid var(--afill-border);
    box-shadow: 0 1px 0 rgba(var(--shadow-rgb),  0.04);
}

.afill-preview-titles {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.afill-preview-name {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--afill-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.afill-preview-sub { font-size: 12px; color: var(--afill-text-3); }

.afill-preview-tools { display: flex; gap: 0.35rem; flex-shrink: 0; }

.afill-preview-tool {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.7rem;
    background: var(--afill-surface);
    color: var(--afill-text-2);
    border: 1px solid var(--afill-border);
    border-radius: 8px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}

.afill-preview-tool svg { width: 14px; height: 14px; flex-shrink: 0; }

.afill-preview-tool:hover {
    color: var(--afill-brand);
    border-color: var(--afill-brand);
    background: var(--afill-brand-tint);
}

.afill-preview-tool.is-primary {
    background: var(--afill-brand);
    color: var(--afill-brand-fg);
    border-color: var(--afill-brand);
}

.afill-preview-tool.is-primary:hover {
    background: var(--afill-brand-deep);
    border-color: var(--afill-brand-deep);
}

.afill-preview-tool.is-close { padding: 0.45rem 0.55rem; }

.afill-preview-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    background: var(--text);
}

.afill-preview-frame {
    flex: 1;
    width: 100%;
    height: 100%;
    border: 0;
    background: var(--white);
}

.afill-preview-imgwrap,
.afill-preview-mediawrap {
    flex: 1;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    overflow: auto;
}

.afill-preview-img,
.afill-preview-video {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(var(--shadow-rgb),  0.4);
}

.afill-preview-fallback {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 2.5rem 1.5rem;
    text-align: center;
    color: var(--white);
}

.afill-preview-fallback strong { font-size: 16px; font-weight: 700; }
.afill-preview-fallback p {
    margin: 0;
    max-width: 48ch;
    font-size: 13.5px;
    color: rgba(var(--glass-rgb),  0.78);
    line-height: 1.5;
}

@media (max-width: 720px) {
    .afill-preview { height: 100vh; max-height: 100vh; border-radius: 0; }
    .afill-preview-backdrop { padding: 0; }
    .afill-preview-tool span { display: none; }
    .afill-preview-tool { padding: 0.5rem 0.6rem; }
}

@media (prefers-reduced-motion: reduce) {
    .afill-preview-backdrop,
    .afill-preview { animation: none; }
}