/* Typography System - Zalando Sans */
@import url('https://fonts.googleapis.com/css2?family=Zalando+Sans:ital,wght@0,200..900;1,200..900&display=swap');

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Design System Color Palette */
    --neutral-1000: #17191A;
    --neutral-700: #404040;
    --neutral-400: #535353;
    --neutral-100: #FEFEFE;
    --neutral-0: #FFFFFF;
    --blue: #1052B3;
    --khaki: #A7B297;
    --green: #4DCB6D;
    --red: #EB4644;

    /* Legacy token names kept for compatibility — values repointed to brand blue.
       Purple is not part of the ValueIndiana design system. */
    --primary-purple: #1052B3;
    --primary-dark: #0C447C;
    --primary-light: #3E7CD2;
    --secondary-blue: #1052B3;
    /* Updated to design system blue */
    --cyan: #06b6d4;
    --success-green: #4DCB6D;
    /* Updated to design system green */
    --danger-red: #EB4644;
    /* Updated to design system red */
    --warning-yellow: #FBBF24;
    /* Warm paper — cream, not clinical slate (two-ink ledger direction) */
    --bg-light: #F7F6F1;
    --bg-gray: #f1f5f9;
    --text-dark: #17191A;
    /* Updated to Neutral1000 */
    --text-gray: var(--neutral-400);

    /* Updated to Neutral400 */
    --border-gray: #e2e8f0;
    --white: #FFFFFF;

    /* Appraisal Ledger shared tokens (results page) */
    --ink: #17191A;
    --ink-text: #F8F8F8;
    --hairline: #E6E9ED;

    /* Header Navigation Colors */
    --nav-link-text: #5C5C5C;
    --nav-link-text-hover: #0C1421;

    /* Card/Container Colors */
    --card-bg: #FFFFFF;
    --card-text: var(--text-dark);
}

/* Dark Mode Variables */
[data-theme="dark"] {
    /* Design System Colors - Dark Mode - figma accurate */

    --neutral-1100: #FFFFFF;
    /* sign up text is a diff white wow ! */
    --neutral-1000: #F8F8F8;
    /* main text; changed according to figma */
    --neutral-900: #F3F3F3;
    /* info card heading text */
    --neutral-700: #9A9A9A;
    /* vertical card description text; raised from #8B8B8B — 15px text on
       --neutral-200/#1E293B cards measured 4.29:1, below the WCAG AA 4.5:1
       floor for small text. Now 5.20:1 there, 6.26:1 on the #0F172A section bg. */
    --neutral-400: #9B9AA0;
    /* info card description text; raised from #8C8B90 — 13px/600 measured
       4.33:1 on #1E293B (13px is not "large text", so AA needs 4.5:1).
       Now 5.24:1 there, 6.31:1 on #0F172A. Cool tint preserved. */
    --neutral-200: #272727;
    /* vertical card bg */
    --neutral-100: #1B1B1B;
    /* info card bg */
    --neutral-50: #0F0F0F;
    /* section bg */
    --neutral-0: #040404;
    --blue: #1052B3;
    --khaki: #A7B297;
    --green: #4DCB6D;
    --red: #EB4644;

    /* previously generated below */
    /* Legacy token names kept for compatibility — values repointed to brand blue (dark mode). */
    --primary-purple: #60a5fa;
    --primary-dark: #3b82f6;
    --primary-light: #93c5fd;
    --secondary-blue: #60a5fa;
    --cyan: #22d3ee;
    --success-green: #34d399;
    --danger-red: #f87171;
    --warning-yellow: #FBBF24;
    --bg-light: #0f172a;
    --bg-gray: #1e293b;
    --text-dark: var(--neutral-1000);
    --text-gray: #cbd5e1;
    --border-gray: #334155;
    --white: #1e293b;

    /* Appraisal Ledger shared tokens — night paper */
    --ink: #0B0B0C;
    --ink-text: #F3F3F3;
    --hairline: #2A2A2A;

    /* Header Navigation Colors - Dark Mode */
    --nav-link-text: #8B8B8B;
    --nav-link-text-hover: #F8F8F8;

    /* Card/Container Colors */
    --card-bg: var(--neutral-100);
    --card-text: var(--neutral-900);
}

/* 1. Force specific Hero Background in Dark Mode */
[data-theme="dark"] .hero-background-wrapper {
    background-image: url('../static/img/hero_night.webp') !important;
}

html {
    scroll-behavior: auto;
    /* clip (not hidden): prevents horizontal scrollbars WITHOUT creating a
       scroll container — overflow-x:hidden silently breaks position:sticky
       descendants (results toolbar). */
    overflow-x: clip;
}

body {
    font-family: 'Zalando Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
    line-height: 1.6;
    color: var(--text-dark);
    background-color: var(--bg-light);
    transition: background-color 0.3s ease, color 0.3s ease;
    letter-spacing: -0.02em;
    /* -2% letter spacing */
    overflow-x: clip;
}

/* Card / Box Styling */
.content-card {
    background: var(--card-bg);
    color: var(--card-text);
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 30px;
}

[data-theme="dark"] .content-card {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .content-card h2,
[data-theme="dark"] .content-card h3 {
    color: var(--neutral-900) !important;
}

[data-theme="dark"] .content-card p,
[data-theme="dark"] .content-card label {
    color: var(--neutral-400) !important;
}

[data-theme="dark"] .content-card input {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--neutral-1000);
}

[data-theme="dark"] .content-card input:disabled {
    background: rgba(0, 0, 0, 0.2) !important;
    color: var(--neutral-700) !important;
}

[data-theme="dark"] .search-box input {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--neutral-1000);
}

[data-theme="dark"] .search-box input::placeholder {
    color: var(--neutral-400);
}

/* Typography Classes */
.typography-title {
    font-family: 'Zalando Sans', sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    /* Semi Bold */
    font-style: normal;
    font-variation-settings: "wdth" 100;
    font-size: 25px;
    letter-spacing: -0.02em;
    /* -2% */
    line-height: 1.2;
}

.typography-title2 {
    font-family: 'Zalando Sans', sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    /* Semi Bold */
    font-style: normal;
    font-variation-settings: "wdth" 100;
    font-size: 15px;
    letter-spacing: -0.02em;
    /* -2% */
    line-height: 1.3;
}

.typography-header {
    font-family: 'Zalando Sans', sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    /* Regular */
    font-style: normal;
    font-variation-settings: "wdth" 100;
    font-size: 15px;
    letter-spacing: -0.02em;
    /* -2% */
    line-height: 1.4;
}

.typography-header2 {
    font-family: 'Zalando Sans', sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    /* Semi Bold */
    font-style: normal;
    font-variation-settings: "wdth" 100;
    font-size: 13px;
    letter-spacing: -0.02em;
    /* -2% */
    line-height: 1.4;
}

.typography-header3 {
    font-family: 'Zalando Sans', sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    /* Semi Bold */
    font-style: normal;
    font-variation-settings: "wdth" 100;
    font-size: 11px;
    letter-spacing: -0.02em;
    /* -2% */
    line-height: 1.4;
}

.typography-body {
    font-family: 'Zalando Sans', sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    /* Regular */
    font-style: normal;
    font-variation-settings: "wdth" 100;
    font-size: 8px;
    letter-spacing: -0.02em;
    /* -2% */
    line-height: 1.5;
}

/* Smooth transitions for theme changes */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2.9vw;
    /* Updated to 2.9vw (ratio based on 50px/1728px) */
}

/* Results / analysis view should be allowed to span wider than the default container
   so that Similar Properties, Comp Grid, and Statistical Analysis tables can use
   nearly the full viewport width for better readability. */
.tabs-section .container {
    max-width: 100%;
}

/* Header */
.header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    background: transparent;
    border-bottom: none;
    /* padding: 38px 0; */
    padding: 30px 0;
    /* Use fixed px instead of vw so vertical alignment doesn't change on horizontal resize */
    z-index: 100;
    /* Higher than hero (z-index: 1) to overlay it */
    pointer-events: none;
    /* Allow clicks to pass through header area */
}

/* Ensure contents of header are correctly aligned horizontally and vertically */
.header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Ensure the logo stays a consistent size and align vertically */
.logo {
    display: flex;
    align-items: center;
}

.logo img {
    height: 38px;
    /* Lock height to prevent arbitrary resizing */
    width: auto;
}

/* Header animation only on main page with splash screen */
body.main-page .header {
    transform: translateY(100px);
    /* Start below (positive Y = down), slide up */
    opacity: 0;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.8s ease;
}

/* Animate header when splash opens */
body.main-page.splash-opening .header,
body.main-page.splash-complete .header {
    transform: translateY(0);
    /* Slide up to original position */
    opacity: 1;
}

/* Fallback: Show header after 3 seconds if splash doesn't trigger */
body.main-page:not(.splash-opening):not(.splash-complete) .header {
    animation: headerFallback 0.8s cubic-bezier(0.4, 0, 0.2, 1) 3s forwards;
}

@keyframes headerFallback {
    from {
        transform: translateY(100px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Header content should be clickable */
.header>div,
.header a,
.header button,
.header select {
    pointer-events: auto;
}

[data-theme="dark"] .header {
    background: transparent;
}

.header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 44px;
}

/* Full-width header content */
.header-content {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    gap: 20px;
}

/* Responsive header */
@media (max-width: 1024px) {
    .header-content {
        grid-template-columns: auto 1fr auto;
        gap: 15px;
    }

    .header-content>div:nth-child(2) {
        gap: 15px !important;
    }

    .header-content>div:nth-child(2) .nav-link {
        font-size: 13px;
        padding: 6px 12px;
    }
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: opacity 0.2s;
}

.logo:hover {
    opacity: 0.8;
}

/* Dark Mode Logo Switch */
[data-theme="dark"] .logo img {
    content: url('../static/img/VI_logo_white.png');
}

a.logo {
    text-decoration: none;
    color: inherit;
}

.logo img {
    height: 35px;
    width: auto;
    object-fit: contain;
}


.logo-icon {
    background: var(--blue);
    /* Design system blue */
    color: var(--neutral-0);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-weight: 600;
    /* Semi Bold */
    font-size: 20px;
    font-family: 'Zalando Sans', sans-serif;
    letter-spacing: -0.02em;
}

.logo-text {
    font-size: 18px;
    font-weight: 600;
    color: var(--white);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.header .nav-link {
    color: var(--text-dark) !important;
    text-shadow: none !important;
}

.header .nav-link:hover {
    background: transparent !important;
    opacity: 0.5;
    text-shadow: none !important;
    border-color: transparent !important;
}

/* Middle navigation links - Neutral 400, hover to Neutral 700 */
.header .nav-link-middle {
    color: var(--nav-link-text) !important;
    text-shadow: none !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    font-family: 'Zalando Sans', sans-serif !important;
    font-weight: 400 !important;
    /* Dynamic font size: scales with view width, clamped between 14px and 20px */
    font-size: clamp(14px, 1.15vw, 20px) !important;
    white-space: nowrap !important;
    padding: 8px 12px !important;
    letter-spacing: -0.02em !important;
    transition: color 300ms ease-out !important;
}

/* Remove shine animation and button lift effect */
.header .nav-link-middle::before {
    display: none !important;
}

.header .nav-link-middle:hover {
    color: var(--nav-link-text-hover) !important;
    background: transparent !important;
    text-shadow: none !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Login link */
.header .nav-link-login {
    color: var(--blue);
    text-decoration: none;
    background: transparent;
    border: none;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    text-shadow: none;
}

.header .nav-link-login:hover {
    color: var(--blue);
    background: transparent;
    box-shadow: none;
    transform: none;
    text-decoration: none;
    opacity: 0.5;
}

/* Sign Up button - Blue background, white text */
.header .nav-link-signup {
    background: var(--blue);
    color: white;
    width: 106px;
    height: 44px;
    border-radius: 14.4px;
    padding: 14.4px 21.6px;
    gap: 5.76px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    text-decoration: none;
    border: none;
    text-shadow: none;
}

.header .nav-link-signup:hover {
    background: var(--blue);
    color: white;
    opacity: 0.5;
    transform: none;
    box-shadow: none;
}

/* Admin button — outlined white, only shown on hero so always on dark bg */
.header .nav-link-admin {
    background: transparent;
    color: white;
    padding: 8px 16px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
}

.header .nav-link-admin:hover {
    opacity: 0.6;
    background: transparent;
    color: white;
}

/* Hero Nav — text color follows time of day, not theme */

/* Daytime & dawn: dark text on light hero */
.hero-nav .nav-link-middle {
    color: rgba(0, 0, 0, 0.6) !important;
    transition: color 300ms ease-out !important;
}

.hero-nav .nav-link-middle:hover {
    color: rgba(0, 0, 0, 0.9) !important;
}

.hero-nav .nav-link {
    color: rgba(0, 0, 0, 0.6) !important;
}

.hero-nav .nav-link:hover {
    color: rgba(0, 0, 0, 0.9) !important;
    opacity: 1 !important;
}

.hero-nav .nav-link-login {
    color: var(--blue) !important;
}

.hero-nav .logo img {
    content: url('../static/img/VI_logo_black.png');
}

/* Night only: flip everything to white */
body[data-hero-slot="night"] .hero-nav .nav-link-middle {
    color: rgba(255, 255, 255, 0.85) !important;
}

body[data-hero-slot="night"] .hero-nav .nav-link-middle:hover {
    color: rgba(255, 255, 255, 1) !important;
}

body[data-hero-slot="night"] .hero-nav .nav-link {
    color: rgba(255, 255, 255, 0.85) !important;
}

body[data-hero-slot="night"] .hero-nav .nav-link:hover {
    color: rgba(255, 255, 255, 1) !important;
    opacity: 1 !important;
}

body[data-hero-slot="night"] .hero-nav .nav-link-login {
    color: #6ea8fe !important;
}

body[data-hero-slot="night"] .hero-nav .logo img {
    content: url('../static/img/VI_logo_white.png');
}

/* Dawn is a medium-dark image — white works better there too */
body[data-hero-slot="dawn"] .hero-nav .nav-link-middle {
    color: rgba(255, 255, 255, 0.85) !important;
}

body[data-hero-slot="dawn"] .hero-nav .nav-link-middle:hover {
    color: rgba(255, 255, 255, 1) !important;
}

body[data-hero-slot="dawn"] .hero-nav .nav-link {
    color: rgba(255, 255, 255, 0.85) !important;
}

body[data-hero-slot="dawn"] .hero-nav .logo img {
    content: url('../static/img/VI_logo_white.png');
}

/* Dark mode: always white nav regardless of time of day */
[data-theme="dark"] .hero-nav .nav-link-middle {
    color: rgba(255, 255, 255, 0.85) !important;
}

[data-theme="dark"] .hero-nav .nav-link-middle:hover {
    color: rgba(255, 255, 255, 1) !important;
}

[data-theme="dark"] .hero-nav .nav-link {
    color: rgba(255, 255, 255, 0.85) !important;
}

[data-theme="dark"] .hero-nav .nav-link:hover {
    color: rgba(255, 255, 255, 1) !important;
    opacity: 1 !important;
}

[data-theme="dark"] .hero-nav .nav-link-login {
    color: #6ea8fe !important;
}

[data-theme="dark"] .hero-nav .logo img {
    content: url('../static/img/VI_logo_white.png');
}

.nav-link {
    color: var(--text-dark) !important;
    text-decoration: none;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 6px;
    background: transparent;
    border: none;
    box-shadow: none;
    transition: opacity 0.2s;
}

/* Shimmer animation removed — nav link hover is now opacity-only */
.nav-link::before {
    display: none;
}

.nav-link:hover::before {
    display: none;
}

.nav-link:hover {
    color: var(--text-dark);
    opacity: 0.5;
    background: transparent;
    box-shadow: none;
    transform: none;
}

/* Login button specific hover effect removed as handled by generic nav-link */

/* Logout button base styles */
.header .nav-link[href*="logout"] {
    text-shadow: none !important;
}

/* Logout button specific hover effect */
.nav-link[href*="logout"]:hover,
.header .nav-link[href*="logout"]:hover {
    color: var(--danger-red) !important;
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
    transform: none !important;
    border: none !important;
    text-decoration: none !important;
    opacity: 0.5;
}

/* Back to Search Button Section */
.back-button-section {
    padding: 20px 0;
    background: var(--bg-light);
}

.back-to-search-button {
    display: inline-block;
    color: var(--blue);
    text-decoration: none;
    font-weight: 500;
    padding: 10px 20px;
    border-radius: 6px;
    border: none;
    transition: opacity 0.2s;
    background: var(--blue);
    color: white;
}

.back-to-search-button:hover {
    opacity: 0.5;
    background: var(--blue);
    color: white;
}

/* County Selector */
.county-selector {
    display: flex;
    align-items: center;
}

.county-selector form {
    margin: 0;
}

.county-dropdown {
    padding: 8px 32px 8px 12px;
    border: 1px solid var(--border-gray);
    border-radius: 6px;
    background: var(--white);
    color: var(--text-dark);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236366f1' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
    min-width: 150px;
}

/* input[list] uses this pseudo-element for the native datalist affordance (shows on hover in Chrome/Safari). */
.county-dropdown[list]::-webkit-calendar-picker-indicator {
    display: none !important;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    pointer-events: none;
}

.county-dropdown:hover {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(16, 82, 179, 0.1);
}

.county-dropdown:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(16, 82, 179, 0.1);
}

/* Hero Section */
.hero {
    background: var(--white);
    color: var(--white);
    padding: 0;
    text-align: left;
    position: relative;
    z-index: 1;
    height: 100vh;
    min-height: 100vh;
    display: flex;
    overflow: hidden;
    align-items: flex-end;
    justify-content: flex-start;
    background-size: cover;
    background-position: center;
}

.hero .container {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.hero-background-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;
    transition: background-color 1s ease-in-out;
}

[data-theme="light"] .hero-overlay {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
}

[data-theme="dark"] .hero-overlay {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
}

.hero-small {
    background: linear-gradient(135deg, var(--blue), var(--secondary-blue));
    color: var(--white);
    padding: 40px 0;
    text-align: center;
}

.hero-title {
    font-family: 'Zalando Sans', sans-serif;
    font-size: 96px;
    /* Larger font size */
    font-weight: 600;
    /* Semi Bold */
    margin-bottom: 0;
    color: var(--text-dark);
    /* Use theme variable for color */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 2;
    letter-spacing: -0.02em;
    /* -2% */
    line-height: 1.2;
}

/* Exception: hero title must stay light in light mode (sits over hero image) */
[data-theme="light"] .hero-title {
    color: #F8F8F8;
}


/* Hero title animation only on main page with splash screen */
body.main-page .hero-title {
    transform: translateY(-80px);
    /* Start above, slide down */
    opacity: 0;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.8s ease;
}

/* Animate hero title when splash opens */
body.main-page.splash-opening .hero-title,
body.main-page.splash-complete .hero-title {
    transform: translateY(0);
    /* Slide down to original position */
    opacity: 1;
}

/* Fallback: Show hero title after 3 seconds if splash doesn't trigger */
body.main-page:not(.splash-opening):not(.splash-complete) .hero-title {
    animation: heroTitleFallback 0.8s cubic-bezier(0.4, 0, 0.2, 1) 3s forwards;
}

@keyframes heroTitleFallback {
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.hero-subtitle {
    font-family: 'Zalando Sans', sans-serif;
    font-size: 15px;
    /* Header size from design system */
    font-weight: 400;
    /* Regular */
    opacity: 0.95;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 2;
    letter-spacing: -0.02em;
    /* -2% */
    line-height: 1.4;
}

.pagination-dot.active {
    background: rgba(255, 255, 255, 0.8) !important;
    transform: scale(1.2);
}

/* Stats Bar */
.stats-bar {
    background: var(--card-bg);
    padding: 30px 0;
    border-bottom: 1px solid var(--hairline);
}

.stats-content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
}

.stats-icon {
    font-size: 20px;
    color: var(--text-gray);
}

.stat-item {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-gray);
}

.stat-item strong {
    color: var(--blue);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
    margin-left: 2px;
}

[data-theme="dark"] .stat-item strong {
    color: #6FA5E8;
}

.separator {
    color: var(--hairline);
}

/* Results toolbar — sticky document header (lookup-header pattern, full width).
   Replaces the old floating hero header + separate back-to-search bar. */
.results-toolbar {
    position: sticky;
    top: 0;
    z-index: 200;
}

.results-toolbar .lookup-header-inner {
    max-width: none;
    padding: 14px 2.9vw;
}

.results-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 18px;
}

/* .badge carries margin-bottom for card layouts — not wanted in the toolbar */
.results-toolbar-actions .badge {
    margin-bottom: 0;
}

.back-to-search-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-gray);
    text-decoration: none;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transition: color 0.18s;
}

.back-to-search-link:hover {
    color: var(--text-dark);
}

/* Results Page */
.results-section {
    padding: 40px 0 80px 0;
}

.results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    flex-wrap: wrap;
    gap: 15px;
}

.results-header h1 {
    font-size: 28px;
    color: var(--text-dark);
    font-weight: 700;
}

.results-actions {
    display: flex;
    gap: 10px;
}

.action-btn {
    padding: 10px 20px;
    border-radius: 8px;
    border: none;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.action-btn.download-btn {
    background: var(--blue);
    color: var(--white);
    box-shadow: none;
}

.action-btn.download-btn:hover {
    opacity: 0.5;
    transform: none;
    box-shadow: none;
}

/* County stamp — khaki, the brand's jurisdiction color */
.badge-primary {
    background: rgba(167, 178, 151, 0.16);
    color: #6B7A58;
    border: 1px solid rgba(143, 156, 124, 0.5);
}

[data-theme="dark"] .badge-primary {
    color: var(--khaki);
}

/* Info Box */
.info-section {
    padding: 40px 0;
}

.info-box {
    background: linear-gradient(135deg, rgba(16, 82, 179, 0.05), rgba(59, 130, 246, 0.05));
    border-left: 4px solid var(--blue);
    padding: 30px;
    border-radius: 12px;
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.info-box-small {
    background: linear-gradient(135deg, rgba(16, 82, 179, 0.05), rgba(59, 130, 246, 0.05));
    border-left: 4px solid var(--blue);
    padding: 20px;
    border-radius: 8px;
    display: flex;
    gap: 15px;
    align-items: center;
    font-size: 14px;
}

.info-icon {
    font-size: 36px;
    flex-shrink: 0;
}

.info-content h3 {
    color: var(--primary-dark);
    font-size: 20px;
    margin-bottom: 10px;
}

.info-content p {
    color: var(--text-gray);
    line-height: 1.7;
}

.info-box-large {
    background: var(--bg-gray);
    border-radius: 16px;
    padding: 40px;
    display: flex;
    gap: 30px;
    align-items: flex-start;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.info-icon-large {
    font-size: 48px;
    flex-shrink: 0;
    color: var(--blue);
}

.info-content-large h3 {
    color: var(--text-dark);
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 15px;
}

.info-content-large p {
    color: var(--text-gray);
    line-height: 1.8;
    font-size: 16px;
}

/* Features Section */
/* Features section removed - cards are now in regression section */

.features-title {
    text-align: center;
    font-size: 36px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 50px;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.feature-card {
    background: var(--white);
    border-radius: 16px;
    padding: 40px 30px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s, box-shadow 0.3s;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.feature-icon {
    font-size: 48px;
    margin-bottom: 20px;
}

.feature-card h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 15px;
}

.feature-card p {
    color: var(--text-gray);
    line-height: 1.6;
    font-size: 15px;
}

/* Data at a Glance Section */
.data-glance-section {
    height: 100vh;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    background: var(--bg-light);
}

.data-glance-section>div {
    width: 100%;
    padding: 40px;
}

/* Data stats cards (Data at a Glance) */
.data-stat-widget {
    display: flex;
    flex-direction: column;
}

.data-stat-widget .stat-description {
    margin-top: auto;
    /* push description to bottom of card */
    text-align: left;
    /* align text to the left */
    align-self: flex-start;
    /* anchor block to the left edge */
    max-width: 50%;
    /* limit width to half of the card */
}

/* Keep animated counter digits khaki (counter.js sets other inline styles on the span). */
.data-glance-section .stat-number,
.data-glance-section .stat-number .counter-number {
    color: var(--khaki);
}

/* Enhanced Subject-Specific Regression System Section */
.regression-section {
    height: auto;
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr;
    align-items: center;
    justify-content: center;
    padding: 40px;
    position: relative;
    z-index: 2;
}

.regression-section>div {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 40px;
    min-height: 100%;
}

/* Regression Cards */
.regression-cards-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 0;
    row-gap: 24px;
    width: 100%;
    align-self: stretch;
}

/* Merge first two regression cards with a single vertical divider */
.regression-cards-container .regression-card:nth-child(1),
.regression-cards-container .regression-card:nth-child(2) {
    border-radius: 0;
}

.regression-cards-container .regression-card:nth-child(1) {
    border-radius: 12px 0 0 12px;
    position: relative;
}

.regression-cards-container .regression-card:nth-child(1)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 15%;
    /* reduce line height (top offset) */
    bottom: 15%;
    /* reduce line height (bottom offset) */
    width: 1px;
    background: var(--border-gray);
    /* vertical divider */
}

.regression-cards-container .regression-card:nth-child(2) {
    border-radius: 0 12px 12px 0;
}

.regression-card {
    position: relative;
    border-radius: 12px;
    padding: 24px 40px 40px;
    min-height: 400px;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.regression-card-light {
    background: var(--bg-gray);
}

.regression-card-image {
    background: linear-gradient(135deg, var(--blue) 0%, var(--primary-dark) 100%);
    color: white;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.regression-card-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
}

.regression-card-image-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--blue) 0%, var(--primary-dark) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 0;
}

/* Regression card background image (replaces placeholder) */
.regression-card-image picture {
    position: absolute;
    inset: 0;
    z-index: 0;
    margin: 0;
}

.regression-card-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    display: block;
}

.regression-card-icon {
    position: relative;
    z-index: 2;
    color: var(--neutral-400);
    margin-bottom: 16px;
    width: 38px;
    height: 38px;
}

.regression-card-icon-white {
    color: white;
}

.regression-card-title {
    position: relative;
    z-index: 2;
    font-size: 32px;
    font-weight: 600;
    color: var(--neutral-400);
    margin: 0 0 16px 0;
    line-height: 1.2;
}

.regression-card-title-white {
    color: white;
}

.regression-card-description {
    position: relative;
    z-index: 2;
    font-size: 15px;
    color: var(--neutral-700);
    line-height: 1.6;
    margin: 0;
}

/* Align descriptions for light cards to bottom-right */
.regression-card-light .regression-card-description {
    margin-top: auto;
    /* push description to bottom of card */
    text-align: right;
    /* align text to the right */
    align-self: flex-end;
    /* ensure block sits on the right edge */
    max-width: 50%;
    /* limit width to half of the card */
}

.regression-card-description-white {
    color: rgba(255, 255, 255, 0.9);
    margin-top: 24px;
    /* extra gap below Regression Models title */
    max-width: 50%;
    /* limit width to half of the card */
    margin-left: auto;
    /* center the text box horizontally */
    margin-right: auto;
}

/* CTA Section */
.cta-section {
    padding: 120px 0 60px 0;
    /* Large top padding for separation */
    margin-top: 0;
    /* No negative margin to ensure no overlap */
    background: var(--bg-light);
    color: var(--text-dark);
    position: relative;
    z-index: 1;
}

.cta-section>div {
    width: 100%;
    padding: 40px;
}

.cta-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
    flex-wrap: wrap;
    gap: 30px;
}

.cta-text h2 {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 10px;
}

.cta-text p {
    font-size: 18px;
    opacity: 0.95;
}

.cta-button {
    background: var(--white);
    color: var(--blue);
    padding: 16px 40px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    font-size: 18px;
    transition: transform 0.2s, box-shadow 0.2s;
    display: inline-block;
}

.cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
    background: var(--primary-dark) !important;
}

/* Additional Info Section */
.additional-info-section {
    padding: 60px 0;
    background: var(--bg-light);
    position: relative;
    z-index: 2;
}

.info-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.info-card {
    background: var(--white);
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.info-card-icon {
    font-size: 40px;
    margin-bottom: 20px;
}

.info-card h3 {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 15px;
}

.info-card p {
    color: var(--text-gray);
    line-height: 1.7;
    font-size: 15px;
}

/* Search Section */
.search-section {
    padding: 30px 0;
}

.search-tabs-container {
    max-width: 700px;
    margin: 0 auto;
    background: var(--white);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    overflow: visible;
    position: relative;
}

.search-tabs {
    display: flex;
    background: var(--bg-gray);
    border-bottom: 2px solid var(--border-gray);
}

.search-tab {
    flex: 1;
    padding: 14px 24px;
    background: transparent;
    border: none;
    color: var(--text-gray);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    border-bottom: 3px solid transparent;
}

.search-tab:hover {
    background: rgba(16, 82, 179, 0.05);
    color: var(--blue);
}

.search-tab.active {
    background: var(--white);
    color: var(--blue);
    border-bottom-color: var(--blue);
}

.search-tab-content {
    display: none;
    padding: 24px 30px;
    position: relative;
    overflow: visible;
}

.search-tab-content.active {
    display: block;
}

.search-container {
    max-width: 1000px;
    margin: 0 auto;
}

.search-box {
    margin-bottom: 16px;
}

.search-box label {
    display: block;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 8px;
    font-size: 15px;
}

.search-hint {
    margin-top: 8px;
    font-size: 13px;
    color: var(--text-gray);
    font-style: italic;
}

.input-wrapper {
    position: relative;
    z-index: 10;
}

.search-box input {
    width: 100%;
    padding: 12px 16px;
    font-size: 15px;
    border: 2px solid var(--border-gray);
    border-radius: 8px;
    transition: all 0.2s;
    background: var(--white);
}

.search-box input:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(16, 82, 179, 0.1);
}

.autocomplete-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    border: 2px solid var(--blue);
    border-top: none;
    border-radius: 0 0 10px 10px;
    max-height: 300px;
    overflow-y: auto;
    display: none;
    z-index: 1001;
    box-shadow: 0 8px 16px rgba(16, 82, 179, 0.2);
    margin-top: -2px;
}

.autocomplete-results.show {
    display: block;
}

.autocomplete-item {
    padding: 12px 20px;
    cursor: pointer;
    transition: background 0.2s;
    border-bottom: 1px solid var(--border-gray);
    font-size: 15px;
}

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

.autocomplete-item:hover {
    background: linear-gradient(90deg, rgba(16, 82, 179, 0.05), rgba(16, 82, 179, 0.1));
    color: var(--blue);
    font-weight: 500;
}

/* Unified search suggestion rows: address · parcel · MAIN badge */
.autocomplete-item[data-parcel] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ac-address {
    font-weight: 600;
}

.ac-parcel {
    color: var(--text-gray);
    font-variant-numeric: tabular-nums;
    font-size: 13px;
}

.ac-badge {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
}

.ac-badge-main {
    background: var(--blue);
    color: #FFFFFF;
}

.ac-meta {
    color: var(--text-gray);
    font-size: 12px;
    font-style: italic;
}

.search-button-container {
    text-align: center;
    margin-top: 12px;
    padding: 0 30px 24px 30px;
}

.search-button {
    background: var(--blue);
    color: var(--white);
    border: none;
    padding: 12px 36px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: opacity 0.2s;
    box-shadow: none;
}

.search-button:hover {
    opacity: 0.5;
    transform: none;
    box-shadow: none;
}

/* Subject Section */
.subject-section {
    padding: 40px 0;
}

/* Subject card — the document masthead, blue-ink top rule */
.subject-card {
    background: var(--card-bg);
    border: 1px solid var(--hairline);
    border-top: 3px solid var(--blue);
    border-radius: 10px;
    padding: 30px 32px;
}

.subject-card h2 {
    font-size: 18px;
    color: var(--text-gray);
    margin-bottom: 10px;
}

.subject-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.subject-address {
    font-size: 30px;
    color: var(--text-dark);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0;
}

/* Sale-price block: clearly labeled so the big number can't be mistaken for a
   predicted/indicated value. Label on top, price, sale date underneath. */
.subject-price-block {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}

.subject-price-label {
    color: var(--text-gray);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.subject-price {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--blue);
    line-height: 1.1;
}

[data-theme="dark"] .subject-price {
    color: #6FA5E8;
}

.subject-price--none {
    font-size: 18px;
    color: var(--text-gray);
}

.subject-price-date {
    color: var(--text-gray);
    font-size: 13px;
    margin-top: 2px;
}

.subject-parcel {
    color: var(--text-gray);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 8px;
    font-variant-numeric: tabular-nums;
}

.subject-sale-info {
    color: var(--text-gray);
    font-size: 13px;
    margin-bottom: 16px;
}

/* Badges — document stamps: outlined, letterspaced caps */
.badge {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    background: transparent;
    margin-bottom: 20px;
}

.badge-success {
    color: #2E9E50;
    border: 1px solid rgba(46, 158, 80, 0.5);
}

.badge-danger {
    color: #D43A38;
    border: 1px solid rgba(212, 58, 56, 0.5);
}

.badge-orange {
    color: #ea580c;
    border: 1px solid rgba(234, 88, 12, 0.5);
}

[data-theme="dark"] .badge-success {
    color: #4DCB6D;
}

[data-theme="dark"] .badge-danger {
    color: #F87171;
}

.subject-details {
    margin-top: 18px;
    border-top: 1px solid var(--hairline);
}

.detail-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    padding: 11px 0;
    border-bottom: 1px solid var(--hairline);
}

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

.detail-label {
    font-weight: 700;
    color: var(--text-gray);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    align-self: center;
}

.detail-value {
    color: var(--text-dark);
    font-weight: 600;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

/* Tabs */
.tabs-section {
    padding: 40px 0 80px 0;
}

.tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--hairline);
    flex-wrap: wrap;
}

.tab-button {
    background: none;
    border: none;
    padding: 15px 22px 17px;
    font-family: 'Zalando Sans', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--text-gray);
    cursor: pointer;
    position: relative;
    transition: color 0.18s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: -1px;
}

.tab-button::after {
    content: '';
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 0;
    height: 2px;
    background: var(--blue);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.tab-button.active {
    color: var(--blue);
}

[data-theme="dark"] .tab-button.active {
    color: #6FA5E8;
}

[data-theme="dark"] .tab-button::after {
    background: #6FA5E8;
}

.tab-button.active::after {
    transform: scaleX(1);
}

/* Sub-tabs — editorial ledger index */
.sub-tabs {
    display: flex;
    gap: 4px;
    margin: 24px 0 22px;
    border-bottom: 1px solid var(--border-gray);
}

/* Animate sub-tabs appearing under Comp Grid tab */
#grid .sub-tabs {
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}

#grid.tab-content.active .sub-tabs {
    opacity: 1;
    transform: translateY(0);
}

.sub-tab-button {
    background: none;
    border: none;
    padding: 11px 18px 13px;
    font-family: 'Zalando Sans', sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--text-gray);
    cursor: pointer;
    position: relative;
    transition: color 0.18s ease;
    margin-bottom: -1px;
}

.sub-tab-button::after {
    content: '';
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 0;
    height: 2px;
    background: var(--blue);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.sub-tab-button:hover {
    color: var(--text-dark);
}

.sub-tab-button.active {
    color: var(--blue);
}

[data-theme="dark"] .sub-tab-button.active {
    color: #6FA5E8;
}

[data-theme="dark"] .sub-tab-button::after {
    background: #6FA5E8;
}

.sub-tab-button.active::after {
    transform: scaleX(1);
}

.sub-tab-content {
    display: none;
}

.sub-tab-content.active {
    display: block;
    animation: page-fade-enter 0.28s ease-out both;
}

.tab-badge {
    background: rgba(16, 82, 179, 0.1);
    color: var(--blue);
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
    animation: page-fade-enter 0.28s ease-out both;
}

.tab-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    flex-wrap: wrap;
    gap: 15px;
}

.tab-header h2 {
    color: var(--text-dark);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.tab-header h3 {
    color: var(--text-dark);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.tab-actions {
    display: flex;
    gap: 15px;
    align-items: center;
}

.info-text {
    color: var(--text-gray);
    font-size: 14px;
    font-weight: 600;
}

.download-button {
    background: var(--success-green);
    color: var(--white);
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: transform 0.2s;
}

.download-button:hover {
    transform: translateY(-2px);
}

.add-comp-btn {
    background: var(--blue);
    color: var(--white);
    padding: 10px 20px;
    border-radius: 8px;
    border: none;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    margin-right: 10px;
}

.tab-header-actions {
    margin-left: auto;
    display: flex;
    gap: 10px;
    align-items: center;
}

.comp-action-icon {
    width: 13px;
    height: 13px;
    display: block;
}

.comp-header-actions {
    display: inline-flex;
    gap: 8px;
    opacity: 0.45;
    transition: opacity 0.15s ease;
}

.comp-grid-table th:hover .comp-header-actions {
    opacity: 1;
}

.comp-header-actions button {
    background: none;
    border: none;
    padding: 2px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(248, 248, 248, 0.8);
    border-radius: 3px;
    transition: color 0.15s ease, transform 0.15s ease;
}

.comp-header-actions .comp-edit-btn:hover {
    color: #8FB8F2;
    transform: translateY(-1px);
}

.comp-header-actions .comp-remove-btn:hover {
    color: #FF9492;
    transform: translateY(-1px);
}

.comp-header-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.comp-header-cell>span {
    letter-spacing: 0.08em;
}

/* Margin note — like an annotation in the document's edge */
.info-message {
    background: var(--card-bg);
    border: 1px solid var(--hairline);
    border-left: 3px solid var(--blue);
    padding: 13px 18px;
    border-radius: 6px;
    margin-bottom: 25px;
    color: var(--text-gray);
    font-size: 13px;
}

/* Properties List */
.properties-list {
    display: grid;
    gap: 20px;
}

.property-card {
    background: var(--card-bg);
    border: 1px solid var(--hairline);
    border-radius: 10px;
    padding: 22px 26px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.property-card:hover {
    border-color: var(--ledger-rule, #C9CED6);
    box-shadow: 0 2px 10px rgba(23, 25, 26, 0.07);
}

.property-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    flex-wrap: wrap;
    gap: 10px;
}

.property-header h3 {
    color: var(--text-dark);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.property-parcel {
    color: var(--text-gray);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
    font-variant-numeric: tabular-nums;
}

.property-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.property-detail {
    display: flex;
    flex-direction: column;
}

.property-label {
    font-size: 13px;
    color: var(--text-gray);
    margin-bottom: 4px;
}

.property-value {
    font-size: 16px;
    color: var(--text-dark);
    font-weight: 600;
}

/* Comp Grid — verdict strip above the ledger */
.comp-summary {
    background: var(--card-bg);
    border: 1px solid var(--border-gray);
    border-radius: 10px;
    padding: 0;
    margin-bottom: 18px;
    overflow: hidden;
}

.comp-summary .property-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0;
}

.comp-summary .property-detail {
    padding: 18px 24px;
    border-right: 1px solid var(--border-gray);
}

.comp-summary .property-detail:last-child {
    border-right: none;
}

.comp-summary .property-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-gray);
    margin-bottom: 6px;
}

.comp-summary .property-value {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums lining-nums;
    color: var(--text-dark);
}

/* The number users came for — indicated value leads in brand blue */
.comp-summary .property-detail:first-child .property-value {
    color: var(--blue);
}

[data-theme="dark"] .comp-summary .property-detail:first-child .property-value {
    color: #6FA5E8;
}

.sales-window-filter {
    display: flex;
    width: fit-content;
    max-width: 100%;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 4px;
    margin: 0 0 16px;
    border: 1px solid var(--border-gray);
    border-radius: 8px;
    background: var(--white);
}

.sales-window-custom-form {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-left: 6px;
    border-left: 1px solid var(--border-gray);
}

.sales-window-date-input {
    min-height: 34px;
    padding: 6px 8px;
    border: 1px solid var(--border-gray);
    border-radius: 6px;
    color: var(--text-dark);
    background: var(--white);
    font: inherit;
    font-size: 13px;
}

.sales-window-date-separator {
    color: var(--text-gray);
    font-size: 12px;
}

.sales-window-custom-button {
    border: 0;
    cursor: pointer;
}

@media (max-width: 760px) {
    .sales-window-custom-form {
        width: 100%;
        padding: 6px 0 0;
        border-top: 1px solid var(--border-gray);
        border-left: 0;
    }

    .sales-window-date-input {
        width: 132px;
    }
}

.sales-window-button {
    min-width: 78px;
    padding: 8px 12px;
    border-radius: 6px;
    color: var(--text-gray);
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s;
}

.sales-window-button:hover {
    background: var(--bg-gray);
    color: var(--blue);
}

.sales-window-button.active {
    background: var(--blue);
    color: var(--white);
}

.summary-item {
    display: flex;
    flex-direction: column;
}

.summary-label {
    font-size: 13px;
    color: var(--text-gray);
    margin-bottom: 5px;
}

.summary-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-dark);
}

.comp-grid-scroll {
    overflow-x: auto;
    background: var(--white);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Ledger sheet frame around each comp grid */
#sales-comp-grid.table-responsive,
#assessed-comp-grid.table-responsive,
#vacant-sales-comp-grid.table-responsive,
#vacant-assessed-comp-grid.table-responsive {
    border: 1px solid var(--border-gray);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(23, 25, 26, 0.07);
}

.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 20px;
}

.warning-border {
    border: 2px solid #f59e0b;
    border-radius: 12px;
    padding: 15px;
    position: relative;
}

/* Reliability flags banner (results page) — presentation only. */
.reliability-section {
    margin-top: 16px;
}

.reliability-banner {
    border-radius: 12px;
    padding: 14px 18px;
    border: 1px solid transparent;
}

.reliability-banner--warning {
    background: rgba(251, 191, 36, 0.12);
    border-color: var(--warning-yellow, #FBBF24);
    color: #92600a;
}

.reliability-banner--high {
    background: rgba(235, 70, 68, 0.10);
    border-color: var(--danger-red, #EB4644);
    color: #9b1c1a;
}

.reliability-banner-title {
    font-weight: 700;
    margin-bottom: 6px;
}

.reliability-banner-list {
    margin: 0;
    padding-left: 20px;
}

.reliability-flag {
    margin: 2px 0;
    line-height: 1.4;
}

.watermark-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-30deg);
    font-size: 60px;
    font-weight: 900;
    color: rgba(245, 158, 11, 0.07);
    pointer-events: none;
    z-index: 1;
    white-space: nowrap;
}

/* Hide watermark overlay on assessed comp grid (remove orange-text background label) */
#assessed-grid .watermark-overlay {
    display: none;
}

.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 20px;
}

.warning-border {
    border: 2px solid #f59e0b;
    border-radius: 12px;
    padding: 15px;
    position: relative;
}

.watermark-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-30deg);
    font-size: 60px;
    font-weight: 900;
    color: rgba(245, 158, 11, 0.07);
    pointer-events: none;
    z-index: 1;
    white-space: nowrap;
}

/* ================================================================
   COMP GRID — "Appraisal Ledger"
   The adjustment grid is the document of record: ink masthead,
   tabular numerals, hairline rules, khaki-enshrined Subject column,
   and the Indicated Value as a printed answer band.
   ================================================================ */
.comp-grid-table {
    /* Scoped ledger tokens (dark-mode variants below) */
    --ledger-ink: #17191A;
    --ledger-ink-text: #F8F8F8;
    --ledger-paper: #FFFFFF;
    --ledger-hairline: #E6E9ED;
    --ledger-rule: #C9CED6;
    --ledger-row-alt: #FAFBFC;
    --ledger-subject-tint: rgba(167, 178, 151, 0.13);
    /* Opaque subject bg — required: the column is sticky, comps scroll beneath it */
    --ledger-subject-solid: #F2F4EE;
    --ledger-subject-line: rgba(143, 156, 124, 0.45);
    --ledger-hover: rgba(16, 82, 179, 0.045);
    /* Fixed label-column width — anchors the Subject column's sticky offset */
    --ledger-label-w: 190px;

    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 1200px;
    background: var(--ledger-paper);
    font-variant-numeric: tabular-nums lining-nums;
    animation: ledgerIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes ledgerIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.comp-grid-table th,
.comp-grid-table td {
    padding: 9px 10px;
    text-align: center;
    border-bottom: 1px solid var(--ledger-hairline);
    font-size: 11.5px;
    line-height: 1.35;
    vertical-align: middle;
    color: var(--text-dark);
}

/* --- Masthead: solid ink band, letterspaced caps, blue-ink under-rule --- */
.comp-grid-table thead th {
    background: var(--ledger-ink);
    color: var(--ledger-ink-text);
    font-weight: 600;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 11px 12px;
    position: sticky;
    top: 0;
    z-index: 10;
    border-bottom: 2px solid var(--blue);
}

[data-theme="dark"] .comp-grid-table thead th {
    border-bottom-color: #6FA5E8;
}

.comp-grid-table thead .sticky-col {
    background: var(--ledger-ink);
    z-index: 15;
    letter-spacing: 0.12em;
}

.comp-grid-table thead .first-col {
    font-size: 10px;
    padding: 11px 12px;
}

/* --- Sticky property-details column: quiet paper edge --- */
.comp-grid-table .sticky-col {
    position: sticky;
    left: 0;
    width: var(--ledger-label-w);
    min-width: var(--ledger-label-w);
    max-width: var(--ledger-label-w);
    background: var(--ledger-paper);
    z-index: 5;
    text-align: left !important;
}

/* --- Subject column pinned beside labels: every comp compares against it,
       so it never scrolls away --- */
.comp-grid-table thead th:nth-child(2),
.comp-grid-table tbody tr td:nth-child(2) {
    position: sticky;
    left: var(--ledger-label-w);
    z-index: 4;
    /* the anchor column never gets crushed below readable width */
    min-width: 118px;
    /* edge shadow signals comps scrolling beneath the pinned pair */
    box-shadow: 6px 0 10px -6px rgba(23, 25, 26, 0.18);
}

.comp-grid-table thead th:nth-child(2) {
    z-index: 14;
    box-shadow: inset 0 -3px 0 var(--khaki), 6px 0 10px -6px rgba(23, 25, 26, 0.35);
}

.row-header {
    background: var(--ledger-paper) !important;
    color: var(--text-gray);
    font-weight: 600;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    /* Long adjustment labels (e.g. FINISHED ABOVE GRADE ADJ ($)) wrap to two
       lines inside the fixed-width label column instead of overflowing it. */
    white-space: normal;
    line-height: 1.35;
    overflow-wrap: break-word;
}

/* --- Subject column (always first data column): khaki enshrined.
       Solid bg (not tint): sticky column, comps scroll beneath it --- */
.comp-grid-table tbody tr td:nth-child(2) {
    background: var(--ledger-subject-solid);
    border-left: 1px solid var(--ledger-subject-line);
    border-right: 1px solid var(--ledger-subject-line);
    font-weight: 600;
}

/* --- Ledger row rhythm --- */
.comp-grid-table tbody tr:nth-child(even) td {
    background-color: var(--ledger-row-alt);
}

.comp-grid-table tbody tr:nth-child(even) td:nth-child(2) {
    background: var(--ledger-subject-solid);
}

.comp-grid-table tbody tr:nth-child(even) .sticky-col {
    background: var(--ledger-row-alt);
}

/* Row hover: comps light up, subject stays khaki (deliberate anchor) */
.comp-grid-table tbody tr:not(.section-header):not(.indicated-row):hover td:not(:nth-child(2)) {
    background-color: var(--ledger-hover);
}

/* --- Section divider: deed-style break, khaki field tint --- */
.section-header td {
    padding: 14px 12px 10px;
    font-size: 9.5px;
    font-weight: 700;
    font-style: normal;
    text-align: center;
    color: #6B7A58;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    background: rgba(167, 178, 151, 0.10) !important;
    border-top: 1px solid var(--ledger-rule);
    border-bottom: 1px solid var(--ledger-hairline);
}

[data-theme="dark"] .section-header td {
    color: var(--khaki);
    background: rgba(167, 178, 151, 0.07) !important;
}

.adjustment-row td {
    font-weight: 500;
}

.positive,
.comp-grid-table td.positive {
    color: #2E9E50;
    font-weight: 600;
}

.negative,
.comp-grid-table td.negative {
    color: #D43A38;
    font-weight: 600;
}

/* --- Anchor row (sale price / assessed value): accounting top rule --- */
.highlight-row td {
    border-top: 2px solid var(--ledger-rule);
    font-weight: 700;
    font-size: 12px;
}

/* --- NET / GROSS totals: hairline emphasis --- */
.total-row td {
    font-weight: 700;
    border-top: 1px solid var(--ledger-rule);
}

/* --- INDICATED VALUE: the printed answer band --- */
.indicated-row td {
    background: var(--ledger-ink) !important;
    color: var(--ledger-ink-text);
    font-weight: 700;
    font-size: 13.5px;
    letter-spacing: 0.01em;
    padding: 13px 12px;
    border-bottom: none;
    border-left: none !important;
    border-right: none !important;
}

.indicated-row .sticky-col {
    background: var(--ledger-ink) !important;
    color: var(--ledger-ink-text);
    font-size: 10px;
    letter-spacing: 0.12em;
    box-shadow: none;
}

.indicated-row td:nth-child(2) {
    color: var(--khaki);
}

/* ---- Dark mode: same document, night paper ---- */
[data-theme="dark"] .comp-grid-table {
    --ledger-ink: #0B0B0C;
    --ledger-ink-text: #F3F3F3;
    --ledger-paper: #1B1B1B;
    --ledger-hairline: #2A2A2A;
    --ledger-rule: #3D3D3D;
    --ledger-row-alt: #202020;
    --ledger-subject-tint: rgba(167, 178, 151, 0.10);
    --ledger-subject-solid: #23261F;
    --ledger-subject-line: rgba(167, 178, 151, 0.30);
    --ledger-hover: rgba(96, 165, 250, 0.06);
}

[data-theme="dark"] .comp-grid-table thead th:nth-child(2) {
    box-shadow: inset 0 -3px 0 rgba(167, 178, 151, 0.75);
}

[data-theme="dark"] .positive,
[data-theme="dark"] .comp-grid-table td.positive {
    color: #4DCB6D;
}

[data-theme="dark"] .negative,
[data-theme="dark"] .comp-grid-table td.negative {
    color: #F87171;
}

/* Statistical Analysis */
/* Analysis header — khaki field strip: warm identity for the analysis domain */
.analysis-header {
    background: rgba(167, 178, 151, 0.12);
    border: 1px solid rgba(143, 156, 124, 0.35);
    border-radius: 10px;
    padding: 18px 24px;
    margin-bottom: 30px;
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
}

[data-theme="dark"] .analysis-header {
    background: rgba(167, 178, 151, 0.08);
    border-color: rgba(167, 178, 151, 0.25);
}

.analysis-info {
    display: flex;
    flex-direction: column;
}

.info-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-gray);
    margin-bottom: 6px;
}

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

.section-title {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-dark);
    margin: 40px 0 8px 0;
}

.section-subtitle {
    color: var(--text-gray);
    font-size: 13px;
    margin-bottom: 22px;
}

.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

/* Metric cards — answer-band family: ink, white tabular figures, blue-ink top edge */
.metric-card {
    background: var(--ink);
    color: var(--ink-text);
    padding: 26px;
    border-radius: 10px;
    border-top: 3px solid var(--blue);
    text-align: center;
}

[data-theme="dark"] .metric-card {
    border-top-color: #6FA5E8;
}

.metric-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    opacity: 0.75;
    margin-bottom: 10px;
}

.metric-value {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.metrics-grid-small {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 40px;
}

.metric-card-small {
    background: var(--card-bg);
    border: 1px solid var(--hairline);
    color: var(--text-dark);
    padding: 18px;
    border-radius: 10px;
    text-align: center;
}

.metric-card-small .metric-label {
    opacity: 1;
    color: var(--text-gray);
}

.metric-value-small {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--blue);
}

[data-theme="dark"] .metric-value-small {
    color: #6FA5E8;
}

.model-info {
    background: var(--bg-gray);
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 30px;
}

.model-info pre {
    font-family: 'Courier New', monospace;
    font-size: 13px;
    color: var(--text-dark);
    line-height: 1.8;
}

.processing-info-box {
    background: var(--card-bg);
    border: 1px solid var(--hairline);
    padding: 18px 20px;
    border-radius: 8px;
    margin-bottom: 30px;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.processing-info-box pre {
    font-family: 'Courier New', monospace;
    font-size: 13px;
    font-weight: 550;
    color: var(--text-dark);
    line-height: 1.8;
    margin: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.coefficients-section {
    background: var(--card-bg);
    border: 1px solid var(--hairline);
    border-radius: 8px;
    padding: 16px 20px;
    margin-top: 16px;
}

.coef-title {
    color: var(--success-green);
    font-size: 14px;
    margin-bottom: 12px;
    margin-top: 0;
    font-weight: 700;
}

.coef-title.filtered-title {
    color: var(--danger-red);
    margin-top: 20px;
    margin-bottom: 12px;
}

.coefficients-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.coefficient-item {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 0;
    font-weight: 400;
    background: transparent;
    border: none;
}

.coefficient-item.positive {
    background: transparent;
    border: none;
}

.coefficient-item.negative {
    background: transparent;
    border: none;
}

.coefficient-item.filtered {
    opacity: 1;
}

.coef-feature {
    font-size: 13px;
    font-family: 'Courier New', Courier, monospace;
    color: var(--text-dark);
    font-weight: 400;
}

.coef-separator {
    color: var(--text-dark);
    font-size: 13px;
}

.coef-value {
    font-size: 13px;
    font-weight: 400;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

.coef-value.positive-text {
    color: var(--success-green);
}

.coef-value.negative-text {
    color: var(--danger-red);
}

.filtered-tag {
    font-style: italic;
    color: var(--danger-red);
}

/* Ghost ink button — exhibits are secondary */
.matrix-analysis-button {
    background: transparent;
    color: var(--text-dark);
    border: 1px solid var(--text-dark);
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    margin-top: 20px;
    transition: background 0.18s, color 0.18s;
}

.matrix-analysis-button:hover {
    background: var(--blue);
    color: #FFFFFF;
    border-color: var(--blue);
}

.matrix-analysis-section {
    margin-top: 30px;
    padding: 20px;
    background: var(--card-bg);
    border: 1px solid var(--hairline);
    border-radius: 8px;
}

.matrix-section-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-dark);
    margin-top: 30px;
    margin-bottom: 12px;
}

.matrix-section-title:first-child {
    margin-top: 0;
}

.matrix-table-wrapper {
    overflow-x: auto;
    margin-bottom: 30px;
}

.matrix-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
    font-family: 'Courier New', monospace;
}

.matrix-table th,
.matrix-table td {
    padding: 8px;
    text-align: right;
    border: 1px solid var(--border-gray);
}

.matrix-table th {
    background: var(--bg-gray);
    font-weight: 600;
    text-align: center;
}

.matrix-table thead th {
    background: var(--ink);
    color: var(--ink-text);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.matrix-table tbody th {
    background: var(--bg-gray);
    text-align: left;
    font-weight: 600;
}

.matrix-table tbody td:first-child {
    text-align: center;
}

.matrix-properties-box {
    background: var(--bg-gray);
    padding: 16px;
    border-radius: 6px;
    margin-top: 20px;
}

.matrix-property {
    margin-bottom: 8px;
    font-size: 13px;
}

.matrix-property:last-child {
    margin-bottom: 0;
}

/* Comparison Table — mini-ledger (market area, coefficients, p-values, tax) */
.comparison-table-wrapper {
    margin-top: 30px;
    background: var(--card-bg);
    border: 1px solid var(--hairline);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(23, 25, 26, 0.07);
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums lining-nums;
}

.comparison-table thead {
    background: var(--ink);
}

.comparison-table th {
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-text);
    border-bottom: 2px solid var(--blue);
}

[data-theme="dark"] .comparison-table th {
    border-bottom-color: #6FA5E8;
}

.comparison-table tbody tr {
    border-bottom: 1px solid var(--hairline);
    transition: background 0.15s;
}

.comparison-table tbody tr:hover {
    background: rgba(16, 82, 179, 0.04);
}

[data-theme="dark"] .comparison-table tbody tr:hover {
    background: rgba(96, 165, 250, 0.06);
}

.comparison-table tbody tr:last-child {
    border-bottom: none;
}

.comparison-table td {
    padding: 12px 16px;
    text-align: left;
    font-size: 13px;
    color: var(--text-dark);
}

.comparison-table .feature-name {
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-gray);
}

.feature-help {
    cursor: help;
    text-decoration: underline dotted;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

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

/* Tie-back: multiple parcels sharing one address */
.address-tieback {
    margin: 14px 16px 0;
    padding: 12px 14px;
    border: 1px solid var(--border-gray, #E2E8F0);
    border-left: 3px solid var(--blue);
    border-radius: 8px;
    background: var(--bg-gray, #F8FAFC);
    font-size: 13px;
    line-height: 1.5;
}

.address-tieback-warn {
    border-left-color: var(--danger-red, #DC2626);
}

.address-tieback-list {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.address-tieback-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.tieback-tag {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
}

.tieback-tag-main {
    background: var(--blue);
    color: #FFFFFF;
}

.tieback-tag-current {
    background: var(--border-gray, #E2E8F0);
    color: var(--text-dark, #1E293B);
}

.tieback-parcel {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.tieback-meta {
    color: var(--text-gray);
    font-size: 12px;
}

/* Explanatory note inside the Coefficient Filtering Rules box */
.filtering-rules-note {
    margin: 10px 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--border-gray, #E2E8F0);
    font-weight: 400;
    line-height: 1.5;
    opacity: 0.9;
}

.var-info-icon {
    display: inline-block;
    margin-left: 5px;
    font-size: 0.78em;
    color: var(--text-muted, #94a3b8);
    cursor: help;
    vertical-align: middle;
}

.compgrid-footnote {
    margin: 10px 4px 0;
    font-size: 0.78em;
    color: var(--text-muted, #94a3b8);
    line-height: 1.5;
}

.var-tooltip-popup {
    display: none;
    position: fixed;
    background: #1e293b;
    color: #f1f5f9;
    font-size: 0.88em;
    font-weight: 400;
    line-height: 1.5;
    padding: 10px 14px;
    border-radius: 8px;
    white-space: normal;
    width: 300px;
    z-index: 9999;
    box-shadow: 0 6px 20px rgba(0,0,0,0.35);
    pointer-events: none;
}

.comparison-table .positive {
    color: #2E9E50;
    font-weight: 600;
}

.comparison-table .negative {
    color: #D43A38;
    font-weight: 600;
}

[data-theme="dark"] .comparison-table .positive {
    color: #4DCB6D;
}

[data-theme="dark"] .comparison-table .negative {
    color: #F87171;
}

.comparison-table .neutral {
    color: var(--text-gray);
    font-style: italic;
}

/* Status badges — document stamps */
.status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: transparent;
}

/* Significance Chips (p-value classification) — stamp family */
.sig-chip {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
    background: transparent;
}

.sig-strong,
.sig-relevant {
    color: #2E9E50;
    border: 1px solid rgba(46, 158, 80, 0.5);
}

.sig-moderate,
.sig-weak,
.sig-somewhat {
    color: #b45309;
    border: 1px solid rgba(180, 83, 9, 0.45);
}

.sig-insignificant,
.sig-least {
    color: #D43A38;
    border: 1px solid rgba(212, 58, 56, 0.5);
}

.sig-unknown {
    color: var(--text-gray);
    border: 1px solid var(--hairline);
}

[data-theme="dark"] .sig-strong,
[data-theme="dark"] .sig-relevant {
    color: #4DCB6D;
}

[data-theme="dark"] .sig-insignificant,
[data-theme="dark"] .sig-least {
    color: #F87171;
}

.badge-both {
    color: #2E9E50;
    border: 1px solid rgba(46, 158, 80, 0.5);
}

.badge-sales {
    color: var(--blue);
    border: 1px solid rgba(16, 82, 179, 0.45);
}

.badge-red {
    color: #D43A38;
    border: 1px solid rgba(212, 58, 56, 0.5);
}

.badge-assessed {
    color: #d97706;
    border: 1px solid rgba(217, 119, 6, 0.5);
}

.badge-neither {
    color: var(--text-gray);
    border: 1px solid var(--hairline);
}

[data-theme="dark"] .badge-both {
    color: #4DCB6D;
}

[data-theme="dark"] .badge-sales {
    color: #6FA5E8;
}

[data-theme="dark"] .badge-red {
    color: #F87171;
}

.filtering-rules-box {
    background: var(--card-bg);
    border: 1px solid var(--hairline);
    border-left: 3px solid var(--blue);
    padding: 12px 14px;
    border-radius: 6px;
    margin: 12px 0;
    color: var(--text-gray);
    line-height: 1.6;
    font-size: 11.5px;
}

.filtering-rules-box strong {
    color: var(--text-dark);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* The model's formula — set like an exhibit in the document */
.regression-equation {
    background: var(--card-bg);
    border: 1px solid var(--hairline);
    border-left: 3px solid var(--blue);
    padding: 20px 24px;
    border-radius: 8px;
    font-family: 'Courier New', monospace;
    font-size: 13.5px;
    color: var(--text-dark);
    line-height: 1.9;
    margin: 24px 0;
    word-wrap: break-word;
    overflow-x: auto;
}

.visualization-container {
    display: flex;
    flex-direction: row;
    gap: 20px;
    margin: 40px 0;
    align-items: flex-start;
}

.chart-container {
    background: var(--white);
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    height: 500px;
    position: relative;
    flex: 1;
    min-width: 0;
}

.chart-container canvas {
    width: 100% !important;
    height: 100% !important;
}

/* Footer */
/* Footer — the document's colophon: ink band with the blue-ink signature rule */
.footer {
    background: var(--ink);
    color: var(--ink-text);
    padding: 0;
    margin: 0;
    position: relative;
    z-index: 2;
    border-top: 3px solid var(--blue);
    border-left: none;
    border-right: none;
    border-bottom: none;
    min-height: 60px;
    display: flex;
    align-items: stretch;
    width: 100%;
    box-sizing: border-box;
}

[data-theme="dark"] .footer {
    border-top-color: #6FA5E8;
}

.footer-content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px 2.9vw;
    box-sizing: border-box;
    background: transparent;
    min-height: 60px;
}

.footer-text-left,
.footer-text-right {
    margin: 0;
    font-family: 'Zalando Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.footer-text-left {
    text-align: left;
    color: rgba(248, 248, 248, 0.75);
}

/* Jurisdiction line — khaki, the brand's county color */
.footer-text-right {
    text-align: right;
    color: var(--khaki);
}

/* Responsive */
@media (max-width: 768px) {
    .hero-title {
        font-size: 32px;
    }

    .detail-row {
        grid-template-columns: 1fr 1fr;
    }

    .tabs {
        flex-direction: column;
    }

    .tab-button {
        width: 100%;
        justify-content: center;
    }

    .metrics-grid,
    .metrics-grid-small {
        grid-template-columns: 1fr;
    }

    .search-button {
        width: 100%;
    }
}

/* Token Confirmation Modal */
.token-confirm-modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    animation: fadeIn 0.2s ease-in;
}

.token-confirm-modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.token-confirm-modal-content {
    background: var(--white);
    border-radius: 16px;
    padding: 32px;
    max-width: 480px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.3s ease-out;
    position: relative;
}

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.token-confirm-modal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.token-confirm-modal-icon {
    width: 48px;
    height: 48px;
    background: var(--blue);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #fff;
}

.token-confirm-modal-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0;
}

.token-confirm-modal-body {
    margin-bottom: 24px;
}

.token-confirm-message {
    font-size: 16px;
    color: var(--text-gray);
    line-height: 1.6;
    margin-bottom: 20px;
}

.token-confirm-details {
    background: var(--bg-light);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}

.token-confirm-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-gray);
}

.token-confirm-detail-row:last-child {
    border-bottom: none;
}

.token-confirm-detail-label {
    font-size: 14px;
    color: var(--text-gray);
}

.token-confirm-detail-value {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-dark);
}

.token-confirm-detail-value.tokens-cost {
    color: var(--blue);
    font-size: 20px;
}

.token-confirm-detail-value.tokens-balance {
    color: var(--success-green);
}

.token-confirm-detail-value.tokens-insufficient {
    color: var(--danger-red);
}

.token-confirm-modal-footer {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.token-confirm-btn {
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
}

.token-confirm-btn-cancel {
    background: transparent;
    color: var(--text-dark);
    border: none;
    box-shadow: none;
}

.token-confirm-btn-cancel:hover {
    background: transparent;
    opacity: 0.5;
}

.token-confirm-btn-proceed {
    background: var(--blue);
    color: var(--white);
    box-shadow: none;
}

.token-confirm-btn-proceed:hover {
    opacity: 0.5;
    transform: none;
    box-shadow: none;
}

.token-confirm-btn-proceed:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Flash Messages */
.flash-messages-section {
    padding: 20px 0;
    background: var(--bg-light);
}

.flash-message {
    background: var(--white);
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    animation: slideDown 0.3s ease-out;
    border-left: 4px solid;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.flash-error {
    border-left-color: var(--danger-red);
    background: rgba(239, 68, 68, 0.05);
}

.flash-success {
    border-left-color: var(--success-green);
    background: rgba(16, 185, 129, 0.05);
}

.flash-info {
    border-left-color: var(--blue);
    background: rgba(16, 82, 179, 0.05);
}

.flash-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.flash-icon {
    font-size: 20px;
}

.flash-text {
    flex: 1;
    color: var(--text-dark);
    font-size: 14px;
    line-height: 1.5;
}

.flash-close {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--text-gray);
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s;
}

.flash-close:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-dark);
}

/* ============================================
   Theme Toggle Button
   ============================================ */
.theme-toggle {
    background: var(--bg-gray);
    border: 1px solid var(--border-gray);
    border-radius: 8px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

.theme-toggle:hover {
    background: var(--blue);
    border-color: var(--blue);
    transform: scale(1.05);
}

.theme-toggle .theme-icon {
    font-size: 20px;
    transition: transform 0.3s ease;
}

.theme-toggle:hover .theme-icon {
    transform: rotate(15deg);
}

/* ============================================
   Login Side Panel
   ============================================ */
.login-side-panel {
    position: fixed;
    top: 0;
    right: -440px;
    width: 419px;
    height: 100vh;
    max-width: 90vw;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.2);
    z-index: 9999;
    transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: scroll;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    will-change: right;
    border-top-left-radius: 14.22px;
    border-bottom-left-radius: 14.22px;
    font-family: 'Zalando Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
}

.login-side-panel.active {
    right: 0 !important;
}

.login-side-panel-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.login-side-panel-overlay.active {
    opacity: 1;
    visibility: visible;
}

.login-side-panel-content {
    position: relative;
    padding: 40px;
}

.login-side-panel-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    font-size: 24px;
    color: var(--neutral-700);
    cursor: pointer;
    padding: 8px;
    border-radius: 4px;
    transition: all 0.2s;
    line-height: 1;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.login-side-panel-close:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-dark);
}

.login-side-panel-title {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-dark);
    margin: 40px 0 8px 0;
    text-align: center;
}

.login-side-panel-subtitle {
    font-size: 16px;
    color: var(--text-gray);
    margin: 0 0 40px 0;
    text-align: center;
}

.login-error-message {
    padding: 12px;
    margin-bottom: 20px;
    border-radius: 8px;
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger-red);
    font-size: 14px;
}

.login-side-panel-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.login-form-group {
    display: flex;
    flex-direction: column;
}

.login-form-label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-dark);
    font-weight: 500;
    font-size: 12px;
}

.login-form-input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border-gray);
    border-radius: 8px;
    font-size: 14px;
    background: var(--white);
    color: var(--text-dark);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.login-form-input:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(16, 82, 179, 0.1);
}

.login-remember-container {
    display: flex;
    align-items: center;
    gap: 12px;
}

.login-toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    cursor: pointer;
}

.login-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.login-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.3s;
    border-radius: 24px;
}

.login-toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
}

.login-toggle-switch input:checked+.login-toggle-slider {
    background-color: var(--blue);
}

.login-toggle-switch input:checked+.login-toggle-slider:before {
    transform: translateX(20px);
}

.login-remember-label {
    color: var(--text-dark);
    font-size: 14px;
    cursor: pointer;
    user-select: none;
}

.login-submit-button {
    width: 100%;
    padding: 14px;
    background: var(--blue);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
}

.login-submit-button:hover {
    background: #0d4299;
}

.login-submit-button:active {
    transform: scale(0.98);
}

.login-submit-button:disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
}

.login-signup-link {
    text-align: center;
    margin-top: 32px;
    font-size: 14px;
    color: var(--text-gray);
}

.login-signup-link-text {
    color: var(--blue);
    text-decoration: none;
    font-weight: 500;
    margin-left: 4px;
}

.login-signup-link-text:hover {
    text-decoration: underline;
}

.login-social-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.login-separator {
    height: 1px;
    background: var(--border-gray);
    margin: 8px 0;
}

.login-social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-dark);
    cursor: pointer;
    transition: all 0.2s;
}

.login-social-btn:hover {
    background: var(--bg-gray);
}

.login-social-icon {
    width: 20px;
    height: 20px;
}

/* ============================================
   Dark Mode Overrides for Login Panel
   ============================================ */
[data-theme="dark"] .login-side-panel {
    background: rgba(15, 15, 15, 0.85);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border-left: 1px solid rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .login-side-panel-close {
    color: var(--neutral-700);
}

[data-theme="dark"] .login-side-panel-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--neutral-1000);
}

[data-theme="dark"] .login-side-panel-title {
    color: var(--neutral-1000);
}

[data-theme="dark"] .login-side-panel-subtitle {
    color: var(--neutral-700);
}

[data-theme="dark"] .login-form-label {
    color: var(--neutral-700);
}

[data-theme="dark"] .login-form-input {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--neutral-1000);
}

[data-theme="dark"] .login-form-input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

[data-theme="dark"] .login-form-input:focus {
    border-color: var(--blue);
    background: rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] .login-toggle-slider {
    background-color: rgba(255, 255, 255, 0.3);
}

[data-theme="dark"] .login-toggle-switch input:checked+.login-toggle-slider {
    background-color: var(--blue);
}

[data-theme="dark"] .login-toggle-slider:before {
    background-color: var(--neutral-1000);
}

[data-theme="dark"] .login-remember-label {
    color: var(--neutral-1000);
}

[data-theme="dark"] .login-separator {
    background: rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] .login-social-btn {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--neutral-700);
}

[data-theme="dark"] .login-social-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: var(--neutral-1000);
}

[data-theme="dark"] .login-signup-link {
    color: var(--neutral-700);
}

/* ============================================
   Splash Screen
   ============================================ */
.splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    /* Transparent so hero image shows through */
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* 50/50 panels; slide distances match panel height */
    --splash-top-panel: 50%;
    --splash-bottom-panel: 50%;
    --splash-top-vh: 50vh;
    --splash-bottom-vh: 50vh;
}

.splash-content {
    position: relative;
    z-index: 2;
    text-align: center;
    opacity: 1;
    transition: opacity 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    /* Between dead center and a strong lift — fine-tune with --splash-stack-nudge. */
    --splash-stack-nudge: clamp(8px, calc(5px + 0.8vh), 24px);
    transform: translateY(calc(-1 * var(--splash-stack-nudge)));
}

.splash-screen.hide .splash-content {
    opacity: 0;
}

.splash-logo-container,
.splash-text-container {
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateY(0);
}

/* Logo moves up with top panel */
.splash-screen.slide-active .splash-logo-container {
    transform: translateY(calc(-1 * var(--splash-top-vh, 50vh)));
}

/* Text moves down with bottom panel */
.splash-screen.slide-active .splash-text-container {
    transform: translateY(var(--splash-bottom-vh, 50vh));
}

.splash-logo {
    width: 192px;
    /* Start big - 2x normal size */
    height: auto;
    margin-bottom: 0;
    /* Spacing handled by flexbox gap */
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
    object-fit: contain;
}

/* Splash Logo Dark Mode Switch */
[data-theme="dark"] .splash-logo {
    content: url('../static/img/VI_logo_white.png');
}

/* Shrink logo to normal size */
.splash-screen.logo-shrink .splash-logo {
    width: 96px;
    /* Normal size */
}

/* Slide animation panels - start covering the screen */
.splash-screen::before,
.splash-screen::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    background: var(--white);
    z-index: 1;
    will-change: transform;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.splash-screen::before {
    top: 0;
    height: var(--splash-top-panel, 50%);
    transform: translateY(0);
    transform-origin: bottom;
}

.splash-screen::after {
    bottom: 0;
    height: var(--splash-bottom-panel, 50%);
    transform: translateY(0);
    transform-origin: top;
}

/* Activate slide animation - panels slide away when slide-active class is added */
.splash-screen.slide-active::before {
    transform: translateY(-100%) !important;
    /* Slide top panel up */
}

.splash-screen.slide-active::after {
    transform: translateY(100%) !important;
    /* Slide bottom panel down */
}

.splash-text {
    font-size: 18px;
    color: var(--text-gray);
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Subtitle appears during logo shrink */
.splash-screen.logo-shrink .splash-text {
    opacity: 1;
}

/* ============================================
   Widget-based Layout
   ============================================ */
.widget-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    margin: 40px 0;
}

.widget {
    background: var(--white);
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid var(--border-gray);
}

.widget:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.widget-title {
    font-family: 'Zalando Sans', sans-serif;
    font-size: 15px;
    /* Title2 size */
    font-weight: 600;
    /* Semi Bold */
    color: var(--neutral-1000);
    letter-spacing: -0.02em;
    /* -2% */
}

.widget-icon {
    font-size: 24px;
}

.widget-content {
    font-family: 'Zalando Sans', sans-serif;
    color: var(--neutral-400);
    line-height: 1.6;
    font-size: 15px;
    /* Header size */
    font-weight: 400;
    /* Regular */
    letter-spacing: -0.02em;
    /* -2% */
}

/* ============================================
   Scroll Highlight
   ============================================ */
.scroll-highlight-section {
    position: relative;
}

.scroll-highlight-text {
    opacity: 0.3;
    transition: opacity 0.5s ease, transform 0.5s ease;
    transform: translateY(20px);
}

.scroll-highlight-text.active {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   Hover Blur Interaction
   ============================================ */
.hover-blur-container {
    position: relative;
}

.hover-blur-item {
    transition: filter 0.3s ease, transform 0.3s ease;
}

.hover-blur-container:hover .hover-blur-item:not(:hover) {
    filter: blur(4px);
    opacity: 0.6;
}

.hover-blur-item:hover {
    transform: scale(1.05);
    z-index: 10;
    position: relative;
}

/* ============================================
   Dynamic Counter
   ============================================ */
.counter-number {
    display: inline-block;
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 600;
    /* Semi Bold */
    font-size: inherit;
    /* Inherit from parent */
    letter-spacing: -0.02em;
    /* -2% */
}

/* ============================================
   Responsive Design
   ============================================ */
@media (max-width: 768px) {
    .hero {
        padding: 40px 0;
        height: 100vh;
        min-height: 100vh;
    }

    /* Let content sections grow naturally on mobile to avoid clipping */
    .data-glance-section,
    .regression-section,
    .cta-section {
        height: auto;
        min-height: auto;
        padding: 24px;
    }

    .data-glance-section>div,
    .regression-section>div,
    .cta-section>div {
        padding: 0;
    }

    .regression-cards-container {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .regression-card {
        min-height: 300px;
        padding: 32px 24px;
    }

    .regression-card-title {
        font-size: 24px;
    }

    /* Scale down very large headings/numbers on mobile */
    .regression-section .typography-title {
        font-size: 32px !important;
    }

    .hero-title {
        font-size: 36px;
    }

    .hero-subtitle {
        font-size: 16px;
    }

    /* Splash screen: scale down logo and subtitle on mobile */
    .splash-logo {
        width: 128px;
    }

    .splash-screen.logo-shrink .splash-logo {
        width: 72px;
    }

    .splash-text {
        font-size: 14px;
        padding: 0 24px;
    }

    .splash-content {
        --splash-stack-nudge: clamp(6px, calc(4px + 0.65vh), 20px);
    }

    .login-side-panel {
        width: 100vw;
        right: -100vw;
    }

    .login-side-panel-content {
        padding: 32px 24px;
    }

    .login-side-panel-title {
        font-size: 28px;
    }

    .widget-container {
        grid-template-columns: 1fr;
    }

    .data-stats-grid {
        grid-template-columns: 1fr !important;
    }

    .data-stats-grid .stat-number {
        font-size: 48px !important;
    }

    .additional-info-section>.container>div[style*="grid"] {
        grid-template-columns: 1fr !important;
    }

    .header .container>div:last-child {
        flex-wrap: wrap;
        gap: 8px;
    }

    .header .nav-link {
        font-size: 14px;
        padding: 6px 12px;
    }

    .footer {
        border-left: 0;
        border-right: 0;
    }

    .footer-content {
        flex-direction: column;
        gap: 12px;
        padding: 20px 24px;
        text-align: center;
    }

    .footer-text-left,
    .footer-text-right {
        text-align: center;
        font-size: 12px;
    }
}

/* Payment Status Badges */
.status-badge {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    display: inline-block;
}

.status-completed {
    background: rgba(77, 203, 109, 0.1);
    color: var(--success-green);
}

.status-pending {
    background: rgba(251, 191, 36, 0.1);
    color: #FBBF24;
}

.status-failed {
    background: rgba(235, 70, 68, 0.1);
    color: var(--danger-red);
}

.status-refunded {
    background: rgba(235, 70, 68, 0.1);
    color: var(--danger-red);
}

/* ============================================
   Signup Side Panel
   ============================================ */
.signup-side-panel {
    position: fixed;
    top: 0;
    right: -440px;
    width: 419px;
    height: 100vh;
    max-width: 90vw;
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border-left: 1px solid rgba(255, 255, 255, 0.4);
    z-index: 9999;
    transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1);
    overflow-y: scroll;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    will-change: right;
    border-top-left-radius: 14.22px;
    border-bottom-left-radius: 14.22px;
    font-family: 'Zalando Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
}

.signup-side-panel.active {
    right: 0 !important;
}

.signup-side-panel-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.signup-side-panel-overlay.active {
    opacity: 1;
    visibility: visible;
}

.signup-side-panel-content {
    position: relative;
    padding: 24px 32px;
}

.signup-side-panel-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    font-size: 28px;
    color: var(--text-gray);
    cursor: pointer;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.signup-side-panel-close:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-dark);
}

.signup-side-panel-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-dark);
    margin: 16px 0 4px 0;
    text-align: center;
}

.signup-side-panel-subtitle {
    font-size: 14px;
    color: var(--text-gray);
    margin: 0 0 16px 0;
    text-align: center;
}

.signup-error-message {
    padding: 12px;
    border-radius: 6px;
    margin-bottom: 20px;
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger-red);
    font-size: 14px;
}

.signup-side-panel-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.signup-form-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.signup-form-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-dark);
}

.signup-form-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.8);
    font-size: 15px;
    color: var(--text-dark);
    transition: all 0.2s;
    outline: none;
}

.signup-form-input:focus {
    border-color: var(--blue);
    background: white;
    box-shadow: 0 0 0 3px rgba(16, 82, 179, 0.1);
}

.signup-form-input::placeholder {
    color: var(--text-gray);
    opacity: 0.6;
}

.signup-submit-button {
    width: 100%;
    padding: 10px;
    background: var(--blue);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 10px;
}

.signup-submit-button:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.signup-submit-button:active {
    transform: translateY(0);
}

.signup-login-link {
    margin-top: auto;
    padding-top: 16px;
    text-align: center;
    font-size: 13px;
    color: var(--text-gray);
}

.signup-login-link-text {
    color: var(--blue);
    font-weight: 600;
    text-decoration: none;
    margin-left: 4px;
    transition: color 0.2s;
}

.signup-login-link-text:hover {
    color: var(--blue-dark, #0b3d87);
    text-decoration: underline;
}

/* Password requirements in sidebar */
.signup-password-requirements {
    font-size: 11px;
    margin-top: 4px;
}

.signup-password-requirements p {
    margin: 2px 0;
    font-weight: 600;
    color: var(--text-dark);
    font-size: 11px;
}

.signup-password-requirements ul {
    margin: 4px 0;
    padding-left: 18px;
    line-height: 1.6;
    list-style: none;
}

.pvalue-cell {
    position: relative;
    cursor: default;
    display: inline-block;
}

.pvalue-tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--neutral-1000);
    color: var(--bg-light);
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 100;
    pointer-events: none;
}

.pvalue-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--neutral-1000);
}

.pvalue-cell:hover .pvalue-tooltip {
    display: block;
}

.pvalue-sort-header {
    cursor: pointer;
    user-select: none;
}

.pvalue-sort-header:hover {
    color: var(--blue);
}

.sort-indicator {
    font-size: 11px;
    display: inline-block;
    width: 12px;
    text-align: center;
}

/* ============================================
   Dark Mode Overrides for Signup Panel
   ============================================ */
[data-theme="dark"] .signup-side-panel {
    background: rgba(15, 15, 15, 0.85);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border-left: 1px solid rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .signup-side-panel-close {
    color: var(--neutral-700);
}

[data-theme="dark"] .signup-side-panel-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--neutral-1000);
}

[data-theme="dark"] .signup-side-panel-title {
    color: var(--neutral-1000);
}

[data-theme="dark"] .signup-side-panel-subtitle {
    color: var(--neutral-700);
}

[data-theme="dark"] .signup-form-label {
    color: var(--neutral-700);
}

[data-theme="dark"] .signup-form-input {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--neutral-1000);
}

[data-theme="dark"] .signup-form-input:focus {
    border-color: var(--blue);
    background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .signup-form-input::placeholder {
    color: var(--neutral-700);
}

[data-theme="dark"] .signup-login-link {
    color: var(--neutral-700);
}

[data-theme="dark"] .signup-login-link-text:hover {
    color: var(--blue-light, #3b82f6);
}

[data-theme="dark"] .signup-password-requirements p {
    color: var(--neutral-1000);
}

/* ============================================
   Body Scroll Lock Utility (for sidebars/modals)
   ============================================ */
html.scroll-lock,
body.scroll-lock {
    overflow: hidden !important;
}

/* Collapsible Section Styles */
.collapsible-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, opacity 0.3s ease;
    opacity: 0;
}

.collapsible-content.active {
    max-height: 5000px;
    /* Large enough for tax tables */
    opacity: 1;
    transition: max-height 0.5s ease-in, opacity 0.5s ease;
}

.section-toggle-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    padding: 12px 8px;
    user-select: none;
}

.section-toggle-header .toggle-icon {
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
    color: var(--blue);
}

.section-toggle-header.collapsed .toggle-icon {
    transform: rotate(-90deg);
}

.section-toggle-header:hover {
    background-color: var(--bg-gray);
    border-radius: 8px;
}

/* Full-screen loading state for /analyze POST (search page) */
.analyze-loading-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10001;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0;
    padding: 24px;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.analyze-loading-overlay.is-visible {
    display: flex;
}

.analyze-loading-panel {
    max-width: 26rem;
    text-align: center;
    padding: 2rem 1.75rem;
    background: var(--card-bg, var(--white));
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.house-build {
    width: 240px;
    height: 96px;
    margin: 0 auto 1.25rem;
}

.house-build svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Progressive build-out: each element draws once at its own --d delay and
   stays. Short waits show just the house; long waits grow it into a city.
   Restarts automatically each time the overlay goes display:none -> flex. */
.house-build .hb {
    fill: none;
    stroke: var(--secondary-blue, #1052B3);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: house-draw 0.9s ease-out forwards;
    animation-delay: var(--d, 0s);
}

@keyframes house-draw {
    to { stroke-dashoffset: 0; }
}

/* Skyline sits behind the street — thinner, fainter, slower reveal */
.house-build .hb-city .hb {
    stroke-width: 1.6;
    stroke-opacity: 0.45;
    animation-duration: 1.4s;
}

/* Chimney smoke: the only looping motion, so a long wait still feels alive */
.house-build .hb-smoke circle {
    fill: none;
    stroke: var(--secondary-blue, #1052B3);
    stroke-width: 2;
    opacity: 0;
    animation: hb-smoke 3.2s ease-out 2s infinite;
}

.house-build .hb-smoke circle:nth-child(2) {
    animation-delay: 3.6s;
}

@keyframes hb-smoke {
    0%, 50% { opacity: 0; transform: translateY(4px); }
    65%     { opacity: 0.65; }
    100%    { opacity: 0; transform: translateY(-6px); }
}

.analyze-loading-text {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-dark, #17191A);
    margin: 0 0 0.5rem;
    line-height: 1.4;
}

.analyze-loading-sub {
    font-size: 0.875rem;
    color: var(--text-gray, var(--neutral-400));
    margin: 0;
    line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
    .house-build .hb {
        animation: none;
        stroke-dashoffset: 0;
        opacity: 1;
    }

    .house-build .hb-smoke circle {
        animation: none;
        opacity: 0;
    }
}

[data-theme="dark"] .analyze-loading-panel {
    background: var(--neutral-100, #1b1b1b);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .analyze-loading-text {
    color: var(--neutral-1000, #f8f8f8);
}

[data-theme="dark"] .analyze-loading-sub {
    color: var(--neutral-700, #8b8b8b);
}

/* --- Comp radius filter (Improved Sales distance slider) --- */
.comp-radius-filter {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 4px 10px;
    margin: 0 0 16px 8px;
    border: 1px solid var(--border-gray);
    border-radius: 8px;
    background: var(--white);
}

.comp-attr-filter {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 4px 12px;
    margin: 0 0 16px 8px;
    border: 1px solid var(--border-gray);
    border-radius: 8px;
    background: var(--white);
}

.comp-attr-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-gray);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.comp-attr-select {
    font-size: 13px;
    padding: 3px 6px;
    border: 1px solid var(--border-gray);
    border-radius: 6px;
    background: var(--white);
    color: var(--text-gray);
    cursor: pointer;
}

.comp-attr-summary {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted, #64748b);
}

.comp-attr-reset {
    font-size: 12px;
    font-weight: 700;
    color: #1052B3;
    text-decoration: none;
}

.comp-attr-reset:hover { text-decoration: underline; }

.comp-filter-warning {
    margin: 0 0 14px 8px;
    padding: 8px 12px;
    font-size: 13px;
    color: #8a5a00;
    background: #fff6e5;
    border: 1px solid #f0d9a8;
    border-radius: 8px;
}

.comp-radius-title {
    color: var(--text-gray);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.comp-radius-filter input[type="range"] {
    width: 140px;
    accent-color: var(--blue);
    cursor: pointer;
}

.comp-radius-value {
    min-width: 84px;
    color: var(--blue);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.comp-radius-count {
    color: var(--text-gray);
    font-size: 13px;
    white-space: nowrap;
}

/* Fallback: radius held 0 scored comps, grid shows nearest instead. Amber to
   match the 'warning' toast accent so the two read as one signal. */
.comp-radius-count--fallback {
    color: #b45309;
    font-weight: 600;
    white-space: normal;
}

[data-theme="dark"] .comp-radius-count--fallback {
    color: #fbbf24;
}

/* --- Improved Sales comp map (Leaflet) --- */
.sales-comp-map {
    height: 380px;
    margin: 0 0 16px;
    border: 1px solid var(--border-gray);
    border-radius: 8px;
    z-index: 0;
}

/* =====================================================
   Lookup page (post-login /search) — landing-page design language
   Eyebrow kicker, large title, hairline-rule stat ledger,
   underline tabs, line-art icons. No emoji, no card shadows.
   ===================================================== */

.fig {
    font-variant-numeric: tabular-nums;
}

.lookup-shell {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 40px;
    flex: 1;
    width: 100%;
    /* Light, fast entrance when arriving at search from another page. */
    animation: page-fade-enter 0.28s ease-out both;
}

/* Reusable light entrance (search + analyze results, after the loading overlay). */
.page-fade-enter {
    animation: page-fade-enter 0.28s ease-out both;
}

@keyframes page-fade-enter {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .lookup-shell,
    .page-fade-enter,
    .tab-content.active,
    .sub-tab-content.active { animation: none; }
}

.lookup-grid {
    display: grid;
    grid-template-columns: 1.9fr 1fr;
    gap: 0;
    border: 1px solid var(--border-gray);
    border-radius: 14px;
    background: var(--card-bg);
    margin: 36px 0 64px;
    overflow: visible;
}

.lookup-main {
    padding: 56px 48px 64px;
    border-right: 1px solid var(--border-gray);
    min-width: 0;
}

.lookup-eyebrow {
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--blue);
    font-weight: 600;
    margin-bottom: 18px;
}

.lookup-title {
    font-size: 56px;
    font-weight: 600;
    line-height: 1.04;
    letter-spacing: -0.04em;
    color: var(--neutral-1000);
    margin: 0 0 14px;
}

.lookup-sub {
    font-size: 15px;
    color: var(--neutral-400);
    line-height: 1.7;
    max-width: 420px;
    margin: 0 0 40px;
}

/* Underline tabs — override boxed tab styling inside lookup page only */
.lookup-shell .search-tabs {
    background: transparent;
    border-bottom: 1px solid var(--border-gray);
    gap: 30px;
    margin-bottom: 26px;
}

.lookup-shell .search-tab {
    flex: 0 0 auto;
    padding: 0 0 12px;
    font-size: 14px;
    color: var(--text-gray);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    background: transparent;
}

.lookup-shell .search-tab:hover {
    background: transparent;
    color: var(--neutral-1000);
}

.lookup-shell .search-tab.active {
    background: transparent;
    color: var(--neutral-1000);
    border-bottom-color: var(--neutral-1000);
}

.lookup-shell .search-tab-content {
    padding: 0;
}

.lookup-input {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--border-gray);
    border-radius: 10px;
    background: var(--white);
    padding: 0 16px;
    height: 56px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.lookup-input:focus-within {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(16, 82, 179, 0.1);
}

.lookup-input svg {
    flex-shrink: 0;
    color: var(--text-gray);
}

.lookup-shell .search-box input,
.lookup-input input {
    border: none;
    outline: none;
    flex: 1;
    min-width: 0;
    font-family: inherit;
    font-size: 16px;
    letter-spacing: -0.02em;
    background: transparent;
    color: var(--neutral-1000);
    padding: 0;
}

.lookup-input input::placeholder {
    color: var(--text-gray);
}

.lookup-count {
    font-size: 11px;
    letter-spacing: 1px;
    color: var(--khaki);
    font-weight: 600;
    white-space: nowrap;
}

.lookup-hint {
    font-size: 12.5px;
    color: var(--text-gray);
    margin: 12px 2px 0;
}

.lookup-actions {
    margin-top: 36px;
}

.lookup-submit {
    background: var(--blue);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 0 30px;
    height: 54px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: opacity 0.2s;
}

.lookup-submit:hover {
    opacity: 0.85;
}

.lookup-submit:disabled {
    opacity: 0.55;
    cursor: default;
}

.lookup-token-note {
    font-size: 12px;
    color: var(--text-gray);
    margin-top: 14px;
}

/* Right column — "Data on file" ledger (Data at a Glance pattern) */
.lookup-ledger {
    padding: 56px 40px;
}

.lookup-ledger-heading {
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--neutral-400);
    font-weight: 600;
    margin-bottom: 36px;
}

.ledger-stat {
    margin-bottom: 32px;
}

.ledger-stat:last-child {
    margin-bottom: 0;
}

.ledger-stat .ledger-number {
    font-size: 44px;
    font-weight: 600;
    color: var(--khaki);
    letter-spacing: -0.03em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.ledger-stat.ledger-accent .ledger-number {
    color: var(--blue);
}

.ledger-stat .ledger-rule {
    height: 1px;
    background: var(--border-gray);
    margin: 12px 0;
}

.ledger-stat .ledger-label {
    font-size: 15px;
    font-weight: 600;
    color: var(--neutral-1000);
}

/* Vacant-land indicator restyled as quiet ledger chip */
.lookup-vacant {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 6px 12px;
    border: 1px solid var(--border-gray);
    border-radius: 6px;
    font-size: 13px;
    color: var(--neutral-400);
}

.lookup-vacant svg {
    color: var(--khaki);
}

@media (max-width: 900px) {
    .lookup-shell {
        padding: 0 20px;
    }

    .lookup-grid {
        grid-template-columns: 1fr;
    }

    .lookup-main {
        border-right: none;
        border-bottom: 1px solid var(--border-gray);
        padding: 40px 28px 48px;
    }

    .lookup-ledger {
        padding: 40px 28px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px 32px;
    }

    .lookup-ledger-heading {
        grid-column: 1 / -1;
        margin-bottom: 0;
    }

    .ledger-stat {
        margin-bottom: 0;
    }

    .lookup-title {
        font-size: 40px;
    }
}

/* Lookup header — in-flow (base .header is absolute, built for hero overlay) */
.lookup-header {
    background: var(--bg-light);
    border-bottom: 1px solid var(--border-gray);
}

.lookup-header-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 16px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.lookup-header .logo {
    display: flex;
    align-items: center;
}

.lookup-header .logo img {
    height: 28px;
    width: auto;
    display: block;
}

/* img-qualified so these outrank `.lookup-header .logo img { display:block }` */
.lookup-header .logo img.logo-dark {
    display: none;
}

[data-theme="dark"] .lookup-header .logo img.logo-light {
    display: none;
}

[data-theme="dark"] .lookup-header .logo img.logo-dark {
    display: block;
}

/* Center the lookup card vertically between header and footer */
.lookup-shell {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.lookup-shell .lookup-grid {
    margin: 40px 0;
}

@media (max-width: 900px) {
    .lookup-header-inner {
        padding: 14px 20px;
    }

    .lookup-shell .lookup-grid {
        margin: 24px 0;
    }
}

/* ============================================
   ADMIN — Appraisal Ledger console
   Reuses the results-page ledger language: sticky lookup-header,
   ink/blue two-ink mastheads (.comparison-table), .metric-card answer
   bands, outlined .badge stamps. Admin-only additions live here.
   ============================================ */

/* --- Header nav rail --- */
.admin-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-wrap: wrap;
}

.admin-nav a {
    position: relative;
    color: var(--text-gray);
    text-decoration: none;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    padding: 8px 11px;
    border-radius: 5px;
    transition: color 0.18s, background 0.18s;
}

.admin-nav a:hover {
    color: var(--text-dark);
    background: rgba(16, 82, 179, 0.05);
}

.admin-nav a.is-active {
    color: var(--blue);
}

.admin-nav a.is-active::after {
    content: "";
    position: absolute;
    left: 11px;
    right: 11px;
    bottom: 1px;
    height: 2px;
    background: var(--blue);
}

[data-theme="dark"] .admin-nav a.is-active {
    color: #6FA5E8;
}

[data-theme="dark"] .admin-nav a.is-active::after {
    background: #6FA5E8;
}

.admin-nav a[href*="logout"]:hover {
    color: var(--danger-red);
    background: rgba(235, 70, 68, 0.07);
}

/* --- Page shell --- */
.admin-main {
    background: var(--bg-light);
    min-height: calc(100vh - 60px);
    padding: 36px 0 64px;
}

.admin-container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 2.9vw;
}

.admin-container.narrow {
    max-width: 820px;
}

.admin-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-gray);
    text-decoration: none;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 18px;
    transition: color 0.18s;
}

.admin-back:hover {
    color: var(--blue);
}

[data-theme="dark"] .admin-back:hover {
    color: #6FA5E8;
}

.admin-page-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 28px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--ink);
}

[data-theme="dark"] .admin-page-head {
    border-bottom-color: var(--hairline);
}

.admin-eyebrow {
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--text-gray);
    margin-bottom: 7px;
}

.admin-page-head h1 {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-dark);
    margin: 0;
}

/* --- Panels --- */
.admin-panel {
    background: var(--card-bg);
    border: 1px solid var(--hairline);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(23, 25, 26, 0.06);
    padding: 26px;
    margin-bottom: 22px;
}

.admin-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.admin-panel-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-dark);
    margin: 0 0 16px;
}

.admin-panel-head .admin-panel-title {
    margin-bottom: 0;
}

.admin-panel-foot {
    margin-top: 20px;
    text-align: right;
}

/* --- Banners (data status, approvals, notices) --- */
.admin-banner {
    background: var(--card-bg);
    border: 1px solid var(--hairline);
    border-left: 4px solid var(--blue);
    border-radius: 8px;
    padding: 20px 24px;
    margin-bottom: 22px;
}

.admin-banner-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-dark);
    margin: 0 0 8px;
}

.admin-banner p {
    color: var(--text-gray);
    font-size: 14px;
    line-height: 1.55;
    margin: 0;
}

.admin-banner p + p {
    margin-top: 8px;
}

.admin-banner--warning { border-left-color: var(--warning-yellow); }
.admin-banner--danger  { border-left-color: var(--danger-red); }
.admin-banner--success { border-left-color: #2E9E50; }
.admin-banner--info    { border-left-color: var(--blue); }

[data-theme="dark"] .admin-banner--success { border-left-color: #4DCB6D; }

/* --- Key / value field grids --- */
.admin-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 22px;
}

.admin-field-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-gray);
    margin: 0 0 5px;
}

.admin-field-value {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-dark);
    font-variant-numeric: tabular-nums;
    margin: 0;
}

.admin-field-value--lg {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.admin-field-value--accent { color: var(--blue); }
[data-theme="dark"] .admin-field-value--accent { color: #6FA5E8; }

/* --- Forms --- */
.admin-form {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: flex-end;
}

.admin-form.stack {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
}

.admin-form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.admin-form-field.grow {
    flex: 1;
    min-width: 180px;
}

.admin-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-gray);
}

.admin-input,
.admin-select {
    padding: 10px 12px;
    border: 1px solid var(--hairline);
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    background: var(--card-bg);
    color: var(--text-dark);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.admin-input:focus,
.admin-select:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(16, 82, 179, 0.12);
}

.admin-btn {
    padding: 10px 20px;
    background: var(--blue);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    font-family: inherit;
    transition: opacity 0.18s;
}

.admin-btn:hover { opacity: 0.55; }

.admin-btn-ghost {
    padding: 8px 15px;
    background: transparent;
    color: var(--text-dark);
    border: 1px solid var(--hairline);
    border-radius: 6px;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.18s, color 0.18s;
}

.admin-btn-ghost:hover {
    border-color: var(--blue);
    color: var(--blue);
}

/* --- County access checkbox grid --- */
.admin-county-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 10px;
    margin: 4px 0 20px;
}

.admin-county-grid label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-dark);
}

.admin-county-grid input {
    accent-color: var(--blue);
    width: 15px;
    height: 15px;
}

/* --- Table helpers (atop .comparison-table) --- */
.comparison-table td.num,
.comparison-table th.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.comparison-table td.center,
.comparison-table th.center {
    text-align: center;
}

.admin-link {
    color: var(--blue);
    text-decoration: none;
    font-weight: 600;
}

.admin-link:hover { text-decoration: underline; }
[data-theme="dark"] .admin-link { color: #6FA5E8; }

.admin-amt-pos { color: #2E9E50; font-weight: 700; }
.admin-amt-neg { color: #D43A38; font-weight: 700; }
[data-theme="dark"] .admin-amt-pos { color: #4DCB6D; }
[data-theme="dark"] .admin-amt-neg { color: #F87171; }

.admin-empty {
    color: var(--text-gray);
    font-size: 14px;
    padding: 6px 0;
    margin: 0;
}

/* --- KPI ink-card modifiers + caption --- */
.metric-value.is-alert { color: #F87171; }
.metric-value.is-good  { color: #4DCB6D; }

/* white-card variants read against light bg, so darker shades */
.metric-value-small.is-alert { color: #D43A38; }
.metric-value-small.is-good  { color: #2E9E50; }
[data-theme="dark"] .metric-value-small.is-alert { color: #F87171; }
[data-theme="dark"] .metric-value-small.is-good  { color: #4DCB6D; }

.metric-card .metric-sub {
    font-size: 11px;
    opacity: 0.72;
    margin-top: 9px;
    font-variant-numeric: tabular-nums;
}

.metric-card .metric-sub a {
    color: var(--ink-text);
    text-decoration: underline;
    opacity: 0.95;
}

/* white-card caption: gray text, blue link */
.metric-card-small .metric-sub {
    font-size: 11px;
    color: var(--text-gray);
    margin-top: 8px;
    font-variant-numeric: tabular-nums;
}

.metric-card-small .metric-sub a {
    color: var(--blue);
    text-decoration: none;
    font-weight: 600;
}

.metric-card-small .metric-sub a:hover {
    text-decoration: underline;
}

[data-theme="dark"] .metric-card-small .metric-sub a {
    color: #6FA5E8;
}

/* --- Pagination --- */
.admin-pagination {
    margin-top: 26px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
}

.admin-pagination a {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--blue);
    text-decoration: none;
}

.admin-pagination a:hover { text-decoration: underline; }
[data-theme="dark"] .admin-pagination a { color: #6FA5E8; }

.admin-pagination .page-info {
    font-size: 12px;
    color: var(--text-gray);
    font-variant-numeric: tabular-nums;
}

/* --- Code chips in copy --- */
.admin-panel code,
.admin-banner code {
    background: rgba(16, 82, 179, 0.07);
    color: var(--blue);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.88em;
}

[data-theme="dark"] .admin-panel code,
[data-theme="dark"] .admin-banner code {
    color: #6FA5E8;
}

/* --- Responsive header --- */
@media (max-width: 760px) {
    .lookup-header.results-toolbar .lookup-header-inner {
        flex-wrap: wrap;
        gap: 12px;
    }
    .admin-nav {
        order: 3;
        width: 100%;
    }
}

/* ==========================================================================
   Report options dialog (PDF download)
   ========================================================================== */
.report-options-modal {
    position: fixed;
    inset: 0;
    z-index: 10001;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: fadeIn 0.2s ease-in;
}

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

/* The rows below set `display: flex`, which outranks the UA stylesheet's
   `[hidden] { display: none }`. Without this the "Comps per page" row and the
   whole custom panel stay visible after JS sets `hidden` on them. Scoped to the
   dialog so it cannot affect anything else. */
.report-options-modal [hidden] {
    display: none !important;
}

.report-options-content {
    background: var(--white);
    border-radius: 16px;
    padding: 30px 34px;
    width: 100%;
    max-width: 720px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.25s ease-out;
}

.report-options-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}

.report-options-header h3 {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0;
}

.report-options-close {
    background: none;
    border: none;
    font-size: 26px;
    line-height: 1;
    color: var(--text-gray);
    cursor: pointer;
    padding: 0 4px;
}

.report-options-close:hover {
    color: var(--text-dark);
}

.report-options-note {
    font-size: 15px;
    color: var(--text-gray);
    margin: 0 0 18px;
}

.report-options-group {
    border: 1px solid var(--border-light, #e6e9ed);
    border-radius: 10px;
    padding: 14px 16px 16px;
    margin: 0 0 16px;
}

.report-options-group legend {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-gray);
    padding: 0 6px;
}

.report-option-row {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: 16px;
    color: var(--text-dark);
    padding: 6px 0;
    cursor: pointer;
}

.report-option-row input {
    margin-top: 3px;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

.report-options-hint {
    font-size: 14px;
    color: var(--text-muted, #6b7280);
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* The comp-grid sections are drag-reorderable. Make that obvious: each is a
   bordered "chip" row with a clear grip handle, sized for a 40+ audience. */
.report-sections-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.report-section-row {
    align-items: center;
    gap: 12px;
    border: 1px solid var(--border-light, #e6e9ed);
    border-radius: 8px;
    padding: 10px 12px;
    background: var(--white);
    transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}

.report-section-row:hover {
    border-color: var(--primary, #2563eb);
    background: var(--bg-light, #f7f8f9);
}

.report-section-row.dragging {
    opacity: 0.6;
    border-color: var(--primary, #2563eb);
    background: var(--bg-light, #f6f8fa);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

.report-section-grip {
    cursor: grab;
    color: var(--text-gray, #6b7280);
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
    user-select: none;
    padding: 0 2px;
}

.report-section-grip:hover {
    color: var(--primary, #2563eb);
}

.report-section-row.dragging .report-section-grip {
    cursor: grabbing;
}

.report-option-inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    font-size: 16px;
    color: var(--text-dark);
    padding: 8px 0;
}

.report-option-inline select {
    flex: 0 1 280px;
    padding: 9px 10px;
    font-size: 15px;
    border: 1px solid var(--border-light, #e6e9ed);
    border-radius: 8px;
    background: var(--white);
    color: var(--text-dark);
}

.report-options-summary {
    font-size: 14px;
    color: var(--text-gray);
    background: var(--bg-light, #f7f8f9);
    border-radius: 8px;
    padding: 12px 14px;
    margin: 0 0 18px;
}

.report-options-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.report-options-footer .download-button {
    font-size: 16px;
    padding: 11px 22px;
}

.report-options-cancel {
    background: none;
    border: 1px solid var(--border-light, #e6e9ed);
    border-radius: 8px;
    padding: 11px 18px;
    font-size: 16px;
    color: var(--text-dark);
    cursor: pointer;
}

.report-options-cancel:hover {
    background: var(--bg-light, #f7f8f9);
}

@media (max-width: 640px) {
    .report-options-content {
        padding: 18px;
    }

    .report-option-inline {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
    }

    .report-option-inline select {
        flex: 1 1 auto;
    }
}