/* ═══════════════════════════════════════════════════════════════════════════
   Blue Belmont - Mobile-First Responsive Layer
   ═══════════════════════════════════════════════════════════════════════════

   Loaded AFTER all page-specific CSS. Provides:
   - Safe-area insets for iPhone notch / home indicator
   - Dynamic viewport (dvh/svh) for iOS browser chrome
   - 44×44 touch targets at pointer:coarse
   - 1rem-minimum inputs (prevents iOS zoom-on-focus)
   - Mobile-first refinements to every section/grid that was desktop-first
   - Table horizontal-scroll wrappers
   - Unified container padding at 22.5em / 30em / 40em / 48em / 64em / 80em

   Breakpoint tiers (em, mobile-first min-width unless noted):
     bp-2xs   22.5em   360  Tiny phones (iPhone SE 1st gen portrait)
     bp-xs    30em     480  Small phones
     bp-sm    40em     640  Large phones
     bp-md    48em     768  Tablets / small laptops
     bp-lg    64em    1024  Desktops
     bp-xl    80em    1280  Wide desktops
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── Safe-area + dynamic viewport primitives ─────────────────────────────
   CSS env() falls back to 0 where unsupported. All device-edge padding
   should pair a min() with env() so iOS notch + Android gesture bars
   don't eat content. */
:root {
    --safe-top: env(safe-area-inset-top, 0rem);
    --safe-right: env(safe-area-inset-right, 0rem);
    --safe-bottom: env(safe-area-inset-bottom, 0rem);
    --safe-left: env(safe-area-inset-left, 0rem);

    /* Gutter system - scales with viewport. Using clamp() means
       one value rather than stepped media queries for the common case. */
    --gutter: clamp(1rem, 3.5vw, 1.5rem);
    --gutter-lg: clamp(1.25rem, 4vw, 2rem);
    --gutter-xl: clamp(1.5rem, 5vw, 2.5rem);

    /* Section vertical rhythm - shorter on mobile, roomy on desktop */
    --section-py: clamp(2.5rem, 8vw, 6rem);
    --section-py-compact: clamp(2rem, 6vw, 4rem);

    /* Fluid type - these are used by .fluid-h1, .fluid-h2, etc. */
    --fluid-h1: clamp(2rem, 6.5vw, 4rem);
    --fluid-h2: clamp(1.625rem, 4.5vw, 2.5rem);
    --fluid-h3: clamp(1.25rem, 3vw, 1.875rem);
    --fluid-lede: clamp(1rem, 2.2vw, 1.25rem);
    --fluid-body: clamp(0.9375rem, 1.6vw, 1rem);
}

@supports (height: 100dvh) {
    :root {
        --vh-full: 100dvh;
        --vh-small: 100svh;
        --vh-large: 100lvh;
    }
}
@supports not (height: 100dvh) {
    :root {
        --vh-full: 100vh;
        --vh-small: 100vh;
        --vh-large: 100vh;
    }
}


/* ── Universal box reset reinforcements ──────────────────────────────── */
html {
    /* Prevent iOS from scaling text up in landscape */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* Smooth momentum scroll on iOS */
    -webkit-overflow-scrolling: touch;
    /* CRITICAL: override style.css's :root { font-size: 0.8125rem }
       that fires at 30em/22.5em. That reduction makes rem-based touch
       targets too small (2.75rem → 36px) and forces inputs under 1rem,
       which triggers iOS auto-zoom on focus. We restore 1rem = 1rem
       across every viewport so the design stays coherent and all
       measurements match intent. */
    font-size: 1rem !important;
}

body {
    /* Prevent horizontal overflow from any rogue element */
    overflow-x: hidden;
    /* Adjust for iOS home indicator on pages that use full-height layouts */
    min-height: 100vh;
    min-height: var(--vh-full, 100vh);
}

*, *::before, *::after {
    /* Wrap long URLs, emails, addresses so they never overflow narrow screens */
    overflow-wrap: anywhere;
    word-break: normal;
    /* But keep form controls untouched */
}
input, select, textarea, button, code, kbd, pre {
    overflow-wrap: normal;
    word-break: normal;
}

img, svg, video, canvas, picture, iframe {
    max-width: 100%;
    height: auto;
}

/* Embedded media containers (maps, video) should not overflow */
iframe, embed, object {
    max-width: 100%;
}


/* ── Prevent iOS zoom on input focus (1rem minimum on touch devices) ── */
@media (pointer: coarse), (max-width: 48em) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
    select,
    textarea {
        font-size: 1rem !important;
    }
    /* But allow smaller-looking text via padding/line-height - don't disturb layout */
}


/* ── Universal 2.75rem touch targets on coarse pointers ──────────────────── */
/* Root font-size is locked to 1rem above, so 2.75rem always resolves
   to 44px regardless of any child scope changes. WCAG AA compliant. */
@media (pointer: coarse) {
    button, [role="button"], a.btn, .bb-btn, .btn, .auth-submit,
    input[type="submit"], input[type="button"], input[type="reset"] {
        min-height: 2.75rem;
    }

    .bb-btn-sm, .btn-sm, .btn-xs {
        min-height: 2.5rem;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    /* Touch-target sizing for nav LINKS only - explicitly skip brand
       wrappers (.ln-b on marketing nav, .top-nav-brand in the app) so
       the `display: flex; min-height: 2.5rem` doesn't collapse the
       logo image. The brand anchor sizes to its child <img>; forcing
       it into a flex container with no defined main-axis width left
       the img with 0×0 dimensions on mobile. */
    nav a:not(.ln-b):not(.top-nav-brand),
    .ln-l a, .bb-foot-col a, .bb-nav-links a {
        min-height: 2.5rem;
        display: flex;
        align-items: center;
    }

    label:has(input[type="radio"]),
    label:has(input[type="checkbox"]) {
        min-height: 2.75rem;
        align-items: center;
    }
}


/* ── Mobile tap highlight + focus ─────────────────────────────────────── */
a, button, [role="button"], input, select, textarea {
    -webkit-tap-highlight-color: rgba(181, 148, 42, 0.15);
}

/* Remove double-tap-to-zoom delay */
button, a, [role="button"] { touch-action: manipulation; }


/* ═══════════════════════════════════════════════════════════════════════════
   GLOBAL CHROME - Navigation + Footer (site-header / site-footer partials)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Landing nav (.ln) - tightens gutter at 22.5em, enables full-screen drawer
   that scrolls on tall mobile menus, respects safe-area insets. */
.ln {
    /* Respect iOS notch on fixed/sticky nav - applies at all breakpoints */
    padding-top: var(--safe-top);
    padding-left: var(--safe-left);
    padding-right: var(--safe-right);
}

@media (max-width: 64em) {
    .ln-i {
        gap: 0.75rem;
        padding: 0.625rem 1rem;
    }
    .ln-b-logo {
        /* Explicit height (matching desktop's 2.5rem scaled down a touch
           for mobile) - `height: auto` alone leaves the img with no
           intrinsic dimension to resolve against in the flex parent and
           the logo collapses to 0×0. width: auto then preserves the
           300:73 aspect ratio. */
        height: 1.75rem;
        width: auto;
        max-width: min(9rem, 40vw);
    }
    .ln-l {
        /* Full-screen drawer that scrolls if content exceeds viewport.
           Starts below the nav + iOS notch, fills remaining viewport so
           no hero bleed-through beneath final link. */
        top: calc(4rem + var(--safe-top)) !important;
        height: calc(var(--vh-small, 100vh) - 4rem - var(--safe-top)) !important;
        max-height: calc(var(--vh-small, 100vh) - 4rem - var(--safe-top)) !important;
        min-height: calc(var(--vh-small, 100vh) - 4rem - var(--safe-top));
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 1rem 1.5rem calc(2rem + var(--safe-bottom)) !important;
        -webkit-overflow-scrolling: touch;
        background: rgba(20, 26, 38, 1) !important;
        align-items: stretch !important;
    }
    .ln-l a, .ln-mega-trigger {
        /* Full-width touch zones with breathing room */
        min-height: 3rem;
        padding: 0.75rem 0 !important;
        text-align: left;
        justify-content: flex-start !important;
    }
    .ln-l a.ln-signin,
    .ln-l a.ln-c {
        margin-top: 0.5rem;
        min-height: 2.75rem;
        padding: 0.875rem 1.25rem !important;
        justify-content: center !important;
        text-align: center;
    }
    .ln-l a.ln-c {
        margin-top: 1.25rem;
    }
    /* Lock background scroll when nav open */
    body.nav-open {
        overflow: hidden;
        position: fixed;
        width: 100%;
    }
}

@media (max-width: 22.5em) {
    .ln-i { padding: 0.5rem 0.75rem; gap: 0.5rem; }
    .ln-b-logo { max-width: 8rem; }
}


/* Landing footer (.bb-foot) - collapses elegantly. Add accordion on <30em. */
@media (max-width: 48em) {
    .bb-foot { padding-left: var(--safe-left); padding-right: var(--safe-right); }
    .bb-foot-i { padding: 2.5rem 1.25rem 1.5rem; }
    .bb-foot-top {
        grid-template-columns: 1fr 1fr;
        gap: 1.75rem 1.25rem;
    }
    .bb-foot-brand { grid-column: 1 / -1; }
    .bb-foot-contact {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        /* Bumped top padding so the form has clear breathing room from
           the nav columns above (matches the desktop spacing decision). */
        padding: 2.75rem 1.25rem 2rem;
        margin-top: 1.25rem;
    }
    .bb-foot-contact-form {
        grid-template-columns: 1fr;
        gap: 0.875rem;
    }
    .bb-foot-field-half { grid-column: 1 / -1; }
    .bb-foot-bottom {
        grid-template-columns: 1fr;
        gap: 0.5rem;
        text-align: center;
        padding-bottom: max(1.5rem, var(--safe-bottom));
    }
}

@media (max-width: 30em) {
    .bb-foot-i { padding: 2rem 1rem 1.25rem; }
    .bb-foot-top { grid-template-columns: 1fr; gap: 1.5rem; }
    .bb-foot-contact { padding: 2.25rem 1rem 1.75rem; }
    .bb-foot-logo img { height: 3.5rem !important; }
    .bb-foot-col-h { font-size: 0.75rem; }
    .bb-foot-col a { padding: 0.625rem 0; min-height: 2.75rem; display: flex; align-items: center; }
}

/* Footer links on all mobile widths - 2.75rem WCAG touch target */
@media (max-width: 48em) {
    .bb-foot-col a {
        padding: 0.625rem 0 !important;
        min-height: 2.75rem;
        display: flex;
        align-items: center;
    }
    .bb-foot-trust { gap: 0.75rem !important; }
}

/* Breadcrumb navigation - improve tap size for the clickable crumbs.
   Padding goes on EVERY child (links AND separator spans + current-page
   span) so each row stays on the same baseline when the trail wraps.
   Previously links got vertical padding while spans didn't → a wrapped
   "Legal" sat lower than the "Home" link two columns to its left.
   Setting `display: inline-flex; align-items: center` on every child
   guarantees the icon/text is vertically centered inside each item's
   box regardless of width. */
@media (max-width: 48em) {
    .crumbs, .platform-crumbs, nav.crumbs {
        font-size: 0.8125rem !important;
    }
    .crumbs > *, .platform-crumbs > * {
        padding: 0.375rem 0;
        display: inline-flex;
        align-items: center;
        line-height: 1.4;
    }
    .crumbs a, .platform-crumbs a {
        padding-inline: 0.125rem;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   LANDING PAGE (landing.css overrides)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Tight mobile container padding - the base rule in landing.css uses
   1.5rem, mobile rule 1.125rem. Below 22.5em we need even less. */
@media (max-width: 22.5em) {
    .bb-section-i, .bb-nav-i, .bb-hero-i, .bb-foot-i,
    .lh-i, .platform-i, .sol-body, .legal-page, .data-body,
    .resources-body, .company-body {
        padding-left: 0.875rem !important;
        padding-right: 0.875rem !important;
    }
}

/* Hero section - always account for notch + dynamic viewport */
.lh {
    padding-top: calc(4rem + var(--safe-top));
    min-height: min(var(--vh-full, 100vh), 56rem);
}

/* Marketing pages without a .lh hero. Space for the fixed nav is
   reserved by `#site-header { min-height: calc(4rem + safe-top) }`
   in landing.css - the stub div around the injected `.ln` is what
   keeps content from sliding under the nav. We previously had
   `body:has(> .ln)` rules here, but `.ln` lives INSIDE `#site-header`
   (site-chrome.js injects into the stub, not next to it), so the
   `> .ln` direct-child selectors never matched and the rules were
   dead code. The stub's min-height covers every layout. */
html { scroll-padding-top: calc(4rem + var(--safe-top)); }

@media (max-width: 48em) {
    .lh {
        min-height: auto;
        padding-bottom: 3rem;
    }
    .lh-text h1 {
        font-size: clamp(2rem, 8vw, 3rem);
        line-height: 1.15;
    }
    .lh-s {
        font-size: clamp(1rem, 3vw, 1.125rem);
        line-height: 1.5;
    }
    .lh-a {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }
    .lh-a .bb-btn {
        width: 100%;
        justify-content: center;
    }
    .lh-cta-secondary {
        width: 100%;
        text-align: center;
        padding-top: 0.5rem;
    }
    .lh-ticker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lh-card { display: none; }
}

@media (max-width: 30em) {
    .lh-text h1 { font-size: clamp(1.75rem, 8.5vw, 2.5rem); }
    .lh-ticker { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
    .lh-ticker-num { font-size: clamp(1.5rem, 7vw, 2rem); }
}

/* Hero strip - desktop has 4 cols, tablet rule 2 cols. Make it 1 col at 30em. */
@media (max-width: 30em) {
    .bb-hero-strip,
    .bb-strip,
    .bb-strip-items {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 0.75rem !important;
    }
    .bb-strip-item {
        padding: 0.75rem 0 !important;
        border-right: 0 !important;
        border-bottom: 0.0625rem solid var(--border-light);
    }
    .bb-strip-item:last-child { border-bottom: 0; }
}

/* Buttons - meet 2.75rem minimum on narrow screens or touch pointers */
@media (pointer: coarse), (max-width: 48em) {
    .bb-btn, .btn, a.btn, a.bb-btn,
    button.btn, button.bb-btn {
        padding: 0.75rem 1.25rem;
        min-height: 2.75rem;
    }
    .bb-btn-lg, .btn-lg {
        padding: 0.875rem 1.625rem;
        min-height: 3rem;
    }
    .bb-btn-sm, .btn-sm {
        padding: 0.625rem 1rem;
        min-height: 2.5rem;
    }
}

/* Mega-menu panel - when nav is open on mobile, give items clear
   contrast against the dark drawer background. */
@media (max-width: 64em) {
    .ln-mega-panel {
        background: rgba(255, 255, 255, 0.04) !important;
        border: 0.0625rem solid rgba(212, 175, 55, 0.15) !important;
        border-radius: 0.5rem !important;
        padding: 0.5rem !important;
        margin: 0.375rem 0 0.875rem !important;
    }
    .ln-mega-panel-eyebrow {
        color: rgba(212, 175, 55, 0.9) !important;
        padding: 0.5rem 0.75rem 0.375rem !important;
        font-size: 0.75rem;
    }
    .ln-mega-panel a {
        padding: 0.75rem 0.875rem !important;
        min-height: 3rem;
        border-radius: 0.375rem;
        display: flex !important;
        align-items: flex-start !important;
        gap: 0.375rem;
    }
    .ln-mega-panel a:hover,
    .ln-mega-panel a:focus-visible {
        background: rgba(212, 175, 55, 0.08) !important;
    }
    .ln-mega-panel a strong {
        color: #fff !important;
        font-size: 0.9375rem;
        display: block;
    }
    .ln-mega-panel a span > span {
        color: rgba(255, 255, 255, 0.7) !important;
        font-size: 0.8125rem;
        line-height: 1.4;
    }
    /* Chevron on the trigger should rotate when open */
    .ln-mega.is-open .ln-mega-trigger::after {
        transform: rotate(180deg);
    }
}

/* .lh-card hero widget - contrast fixes + non-overlap guarantee.
   The card is position:absolute at right with width 22rem. Without a
   reserved right gutter on .lh-text, the hero h1 text at wide screens
   will collide with the card. We compute a reserve based on card width
   plus breathing room and apply it only at widths where the card is
   actually shown (≥64em / 1024px). Below that, landing.css hides the
   card with display:none so the text can use full width. */
.lh-card {
    background: #ffffff !important;
    color: #1c2331 !important;
}
.lh-card .popup-title { color: #1c2331 !important; }
.lh-card .popup-label { color: #5d5651 !important; }
.lh-card .popup-value { color: #1c2331 !important; }
.lh-card .popup-factors { color: #5d5651 !important; }
.lh-card .popup-action-btn {
    /* Slate-on-gold: 7.3:1 vs white-on-gold's 2.9:1. Matches the
       base .lh-card rule in landing.css. */
    background: #d4af37 !important;
    color: #1c2331 !important;
    font-weight: 700;
}
.lh-card .popup-action-btn:hover { opacity: 0.92 !important; }

/* Reserve the card gutter at widths where the card is visible.
   Card width 22rem + right offset 2.5rem + breathing room 2rem = 26.5rem. */
@media (min-width: 64em) {
    .lh-text {
        max-width: min(52rem, calc(100% - 26.5rem));
        padding-right: 1rem;
    }
    .lh h1 { max-width: 100%; }
    .lh-s { max-width: 100%; }
}

/* Medium desktop: card shrinks, text reserves smaller gutter */
@media (min-width: 64em) and (max-width: 75em) {
    .lh-card {
        width: 20rem !important;
        right: 1.5rem !important;
    }
    .lh-text {
        max-width: min(42rem, calc(100% - 23rem));
    }
}

/* Tablet (48-64em): card is already hidden via landing.css - text full */
@media (min-width: 48em) and (max-width: 64em) {
    .lh-text { max-width: 100%; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   PLATFORM PAGES (platform-page.css overrides)
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 48em) {
    .platform-hero {
        padding: 3.5rem 1rem 2.5rem;
    }
    .platform-hero h1 {
        font-size: clamp(1.875rem, 7vw, 2.75rem);
        line-height: 1.15;
    }
    .platform-hero-sub { font-size: 1rem; }
    .platform-steps { grid-template-columns: minmax(0, 1fr) !important; gap: 1rem; }
    .platform-grid-3 { grid-template-columns: minmax(0, 1fr) !important; gap: 1rem; }
    .platform-demo {
        padding: 1.5rem !important;
        margin: 0 1rem;
    }
    .platform-cta-band {
        padding: 2.5rem 1.25rem !important;
    }
    .platform-cta-band::after {
        height: 14rem !important;
    }
}

@media (max-width: 30em) {
    .platform-hero {
        padding: 3rem 0.875rem 2rem;
    }
    .platform-demo { padding: 1.25rem !important; }
    .platform-cta-band::after { height: 10rem !important; display: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   SOLUTION PAGES (solution.css overrides)
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 48em) {
    .sol-hero { padding: 3rem 1rem 2rem; }
    .sol-hero h1 { font-size: clamp(1.875rem, 7vw, 2.75rem); line-height: 1.2; }
    .sol-body { padding: 2rem 1rem; }
    .sol-stats {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem 0.75rem !important;
    }
    .sol-stat-num { font-size: clamp(1.5rem, 6vw, 2rem) !important; }
    .solutions-quote { padding: 1.25rem; font-size: 1rem; }
    .solutions-compare { grid-template-columns: minmax(0, 1fr) !important; gap: 1rem !important; }

    /* Timeline - tighten left rail */
    .solutions-day {
        padding-left: 1.5rem !important;
    }
    .solutions-day::before { left: 0.375rem !important; }
    .solutions-day-step::before { left: -1.375rem !important; }
    .solutions-day-step h4 { font-size: 1rem !important; }

    /* Screens / screenshot mockups */
    .screen { padding: 1rem; overflow-x: auto; }
    .screen-mock { min-width: auto; }
    .screen-table { font-size: 0.5625rem; }
    .screen-table th, .screen-table td {
        padding: 0.375rem 0.25rem !important;
        white-space: nowrap;
    }
}

@media (max-width: 30em) {
    .sol-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .sol-stat-num { font-size: 1.5rem !important; }
    .sol-stat-label { font-size: 0.6875rem !important; }
}

/* ── Inline-style grid safety net ────────────────────────────────────────
   Several pages (comps.html, pipeline.html, property-reports.html,
   parcel-map.html, county-analytics.html, market-intelligence.html,
   integrations.html) use inline style="grid-template-columns:repeat(N,1fr)".
   We can't edit each inline style but we can override with attribute
   selectors that fire at narrow viewports. Each rule bumps down the
   column count gracefully. */

/* At 64em (tablet), 5/6-col grids collapse to 4 */
@media (max-width: 64em) {
    [style*="grid-template-columns:repeat(5,"],
    [style*="grid-template-columns:repeat(6,"] {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

/* At 48em (large phone), 3/4/5/6-col grids collapse to 3 */
@media (max-width: 48em) {
    [style*="grid-template-columns:repeat(4,"],
    [style*="grid-template-columns:repeat(5,"],
    [style*="grid-template-columns:repeat(6,"] {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 0.5rem !important;
    }
    [style*="grid-template-columns:1fr 2fr"],
    [style*="grid-template-columns:2fr 1fr"],
    [style*="grid-template-columns:1fr 1fr 1fr"] {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* At 40em (small phone), 3/4/5/6-col grids → 2 */
@media (max-width: 40em) {
    [style*="grid-template-columns:repeat(3,"],
    [style*="grid-template-columns:repeat(4,"],
    [style*="grid-template-columns:repeat(5,"],
    [style*="grid-template-columns:repeat(6,"] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.5rem !important;
    }
}

/* At 30em (tiny phone), everything goes to single column */
@media (max-width: 30em) {
    [style*="grid-template-columns:repeat(3,"],
    [style*="grid-template-columns:repeat(4,"],
    [style*="grid-template-columns:repeat(5,"],
    [style*="grid-template-columns:repeat(6,"],
    [style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 0.5rem !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   RESOURCES PAGES (resources-page.css overrides)
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 48em) {
    .resources-featured {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 1.25rem !important;
        padding: 1.5rem !important;
    }
    .resources-featured-metrics {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 0.75rem !important;
    }
    .resources-cases {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 1rem !important;
    }
    .resources-case-results {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 0.5rem !important;
    }
    .resources-help-quick {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 0.75rem !important;
    }
    .resources-sec-pillars {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 1rem !important;
    }
    .resources-faq-nav { gap: 0.375rem; }
    .resources-faq-nav a {
        padding: 0.625rem 1rem;
        min-height: 2.5rem;
        font-size: 0.875rem;
    }
}

@media (min-width: 48em) and (max-width: 64em) {
    /* Tablet - help-quick/cases/security pillars should be 2-col */
    .resources-help-quick { grid-template-columns: repeat(2, 1fr) !important; }
    .resources-cases { grid-template-columns: repeat(2, 1fr) !important; }
    .resources-sec-pillars { grid-template-columns: repeat(2, 1fr) !important; }
    .resources-case-results { grid-template-columns: repeat(2, 1fr) !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   DATA PAGES (data-page.css overrides)
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 48em) {
    .data-counties {
        grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
        gap: 0.5rem !important;
    }
    .data-county {
        padding: 0.625rem 0.75rem;
        min-height: 2.75rem;
    }
    .data-signal {
        grid-template-columns: 3rem 1fr !important;
        gap: 0.75rem !important;
        padding: 1rem !important;
    }
    .data-signal-cat { display: none; }
    .data-articles { grid-template-columns: minmax(0, 1fr) !important; }
    .data-editors,
    .data-archive { grid-template-columns: minmax(0, 1fr) !important; }
    .data-featured {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    .data-featured-image { min-height: 10rem !important; }
    .data-featured-body { padding: 1.25rem !important; }
    .data-brief-thumb { height: 6rem !important; }
    .resources-case-timeline {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 1rem !important;
    }

    /* Tables in data pages must scroll horizontally */
    .data-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -1rem;
        padding: 0 1rem;
    }
    .data-table {
        min-width: 32rem;
        font-size: 0.75rem !important;
    }
    .data-table th, .data-table td {
        padding: 0.5rem 0.625rem !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   COMPANY PAGES (company-page.css overrides)
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 48em) {
    .company-numbers {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.25rem 1rem !important;
    }
    .company-numbers > * { padding: 0.5rem !important; }
    .company-founder {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 1rem !important;
    }
    .company-founder-initial {
        width: 3.75rem !important;
        height: 3.75rem !important;
        font-size: 1.25rem !important;
    }
    .company-principles,
    .company-tracks,
    .company-steps,
    .company-roles,
    .company-contacts {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 1rem !important;
    }
    .company-form {
        padding: 1.5rem 1.25rem !important;
    }
    .company-form-row {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 0.75rem !important;
    }
    .company-form-field label {
        font-size: 0.8125rem !important;
    }
}

@media (max-width: 30em) {
    .company-numbers {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 0.75rem !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   LEGAL PAGES (legal.css overrides)
   ═══════════════════════════════════════════════════════════════════════════ */

.legal-page {
    max-width: min(48rem, 100%);
}

@media (max-width: 48em) {
    .legal-page {
        padding: 1.75rem 1rem !important;
    }
    .legal-page h1 {
        font-size: clamp(1.5rem, 5.5vw, 2rem) !important;
        line-height: 1.2;
    }
    .legal-page h2 {
        font-size: clamp(1.25rem, 4vw, 1.5rem) !important;
        line-height: 1.25;
    }
    .legal-page h3 {
        font-size: 1.0625rem !important;
    }
    .legal-page p, .legal-page li {
        font-size: 0.9375rem;
        line-height: 1.6;
    }

    /* Auto-wrap any bare <table> in a horizontal scroll region.
       The ::before pseudo-element on a parent .table-wrap would be ideal
       but here we style tables directly with CSS only. */
    .legal-page table,
    .legal-table,
    table.data-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        max-width: 100%;
        font-size: 0.8125rem;
    }
    .legal-page table tbody,
    .legal-page table thead { display: table-header-group; }
    .legal-page table tr { display: table-row; }
    .legal-page table th,
    .legal-page table td {
        display: table-cell;
        padding: 0.5rem 0.625rem !important;
    }
    .legal-related { flex-direction: column; gap: 0.75rem; }
}

@media (max-width: 30em) {
    .legal-page { padding: 1.5rem 0.875rem !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   AUTH PAGES (auth.css overrides - login/signup/password)
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 64em) {
    .auth-shell {
        grid-template-columns: minmax(0, 1fr) !important;
        min-height: var(--vh-small, 100vh);
    }
    .auth-pitch-col { display: none !important; }
    .auth-form-col {
        padding: 2rem 1.25rem !important;
        padding-top: max(2rem, calc(1.5rem + var(--safe-top))) !important;
        padding-bottom: max(2rem, calc(1.5rem + var(--safe-bottom))) !important;
    }
}

@media (max-width: 48em) {
    .auth-form-col { padding: 1.5rem 1rem !important; }
    .auth-brand-link { padding: 1rem 0 0 !important; }
    .auth-form {
        max-width: 100% !important;
        padding: 0 !important;
    }
    .auth-field input,
    .auth-field select,
    .auth-field textarea {
        font-size: 1rem !important;  /* 1rem - iOS no-zoom */
        padding: 0.75rem 0.875rem !important;
    }
    .auth-submit {
        width: 100%;
        min-height: 3rem;
        font-size: 1rem !important;
    }
    .auth-divider {
        margin: 1.5rem 0;
    }
    .auth-foot {
        font-size: 0.875rem;
        padding-bottom: max(1rem, var(--safe-bottom));
    }

    /* Plan selection (signup) - bigger tap target without breaking layout */
    .plan-option {
        padding: 1rem 1rem 1rem 2.5rem !important;
        min-height: 3rem;
    }
    .plan-option input[type="radio"] {
        width: 1.25rem !important;
        height: 1.25rem !important;
        top: 1rem !important;
        left: 0.75rem !important;
    }

    /* County picker inside signup */
    .county-search {
        font-size: 1rem !important;  /* 1rem iOS no-zoom */
        padding: 0.75rem 0.875rem !important;
    }
    .county-chip {
        padding: 0.5rem 0.75rem !important;
        min-height: 2.5rem;
        font-size: 0.8125rem !important;
    }

    /* Password visibility toggle inside input */
    .auth-pw-toggle {
        width: 2.75rem !important;
        height: 2.75rem !important;
    }
    .auth-pw-wrap input { padding-right: 3.25rem !important; }

    /* Link-styled buttons (e.g. Forgot password?) get breathing padding */
    .auth-link-btn {
        padding: 0.5rem 0 !important;
        min-height: 2.75rem;
        display: inline-flex;
        align-items: center;
    }
}

@media (max-width: 30em) {
    .auth-form-col { padding: 1rem 0.875rem !important; }
    .auth-pitch-h { font-size: 1.5rem !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   APP DASHBOARD (app.css / dashboard.css / property.css overrides)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Use dynamic viewport units for fullscreen app so iOS address bar
   collapse/expand doesn't clip content. */
body.fullscreen-app {
    height: var(--vh-full, 100vh) !important;
    overflow: hidden;
}

#app {
    height: var(--vh-small, 100vh);
    height: 100%;
}

/* Top nav - respect safe-area notch */
.top-nav {
    padding-top: var(--safe-top);
    padding-left: max(1rem, var(--safe-left));
    padding-right: max(1rem, var(--safe-right));
}

@media (max-width: 48em) {
    .top-nav {
        padding-left: max(0.75rem, var(--safe-left));
        padding-right: max(0.75rem, var(--safe-right));
        height: calc(var(--top-nav-h, 4rem) + var(--safe-top));
    }
    .top-nav-brand-logo {
        max-width: min(9rem, 34vw) !important;
        height: clamp(1.5rem, 1rem + 1.2vw, 2rem) !important;
    }

    /* Search input - 1rem minimum + hide/show based on state */
    .nav-search {
        display: none;
    }
    .nav-search.mobile-expanded {
        display: flex;
        position: fixed;
        top: calc(var(--top-nav-h, 4rem) + var(--safe-top));
        left: 0;
        right: 0;
        padding: 0.75rem 1rem;
        background: var(--warm-white);
        border-bottom: 0.0625rem solid var(--border);
        z-index: 1050;
    }
    .nav-search-input { font-size: 1rem !important; }
    .nav-search-kbd { display: none; }

    .nav-actions {
        gap: 0.375rem !important;
    }
    .nav-action-btn {
        width: 2.5rem;
        height: 2.5rem;
    }
}

/* Sidebar drawer with focus trap + safe area */
@media (max-width: 48em) {
    #sidebar, .sidebar-nav {
        position: fixed !important;
        top: calc(var(--top-nav-h, 4rem) + var(--safe-top)) !important;
        bottom: 0 !important;
        left: 0 !important;
        width: min(18rem, 85vw) !important;
        height: auto !important;
        max-height: calc(var(--vh-small, 100vh) - var(--top-nav-h, 4rem) - var(--safe-top)) !important;
        transform: translateX(-100%);
        transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
        /* Sidebar must overlap EVERYTHING when the hamburger is pressed
           - filter drawer, notification dropdown, modals, toasts, cookie
           banner, anything. Matches the desktop sidebar's nav-priority
           z-index (9500). Only the accessibility skip link (10000) is
           allowed above. */
        z-index: 9500;
        box-shadow: 0 0 2rem rgba(0, 0, 0, 0.15);
        padding-bottom: var(--safe-bottom);
        overflow-y: auto;
    }
    #sidebar.mobile-open, .sidebar-nav.mobile-open {
        transform: translateX(0);
    }
}

/* Property detail pages - tighten paddings, make tables scroll */
@media (max-width: 48em) {
    .prop-hero {
        padding: 1.5rem 1rem !important;
    }
    .prop-hero h1 {
        font-size: clamp(1.5rem, 5.5vw, 2rem) !important;
        line-height: 1.2;
    }
    .prop-section {
        padding: 1rem 1rem !important;
    }
    .prop-characteristics {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 0.75rem !important;
    }
    .prop-comps-wrap,
    .prop-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -1rem;
        padding: 0 1rem;
    }
    .prop-comps, .prop-table {
        min-width: 34rem;
        font-size: 0.75rem;
    }
    .prop-action-bar {
        padding: 0.75rem 1rem calc(0.75rem + var(--safe-bottom)) !important;
        gap: 0.5rem !important;
    }
    .prop-action-bar .btn {
        flex: 1;
        min-height: 2.75rem;
        padding: 0.625rem 0.75rem !important;
        font-size: 0.8125rem !important;
    }
    .prop-nav {
        scrollbar-width: none;
    }
    .prop-nav::-webkit-scrollbar { display: none; }
    .prop-location-map {
        min-height: 12rem;
        aspect-ratio: 16 / 10;
    }
}

/* Modals - full-screen on mobile with safe-area, use dvh.
   The overlay's default 1.5rem padding (app.css) is also zeroed at this
   breakpoint so the modal truly fills the viewport instead of leaving
   visible gutters on narrow tablet/phone widths. */
@media (max-width: 48em) {
    .modal-overlay {
        padding: 0 !important;
    }
    .modal, .modal-dialog,
    .modal-xs, .modal-sm, .modal-md, .modal-lg, .modal-xl, .modal-full {
        width: 100% !important;
        max-width: 100% !important;
        max-height: var(--vh-full, 100vh) !important;
        height: var(--vh-full, 100vh) !important;
        border-radius: 0 !important;
        margin: 0 !important;
        padding-top: var(--safe-top) !important;
        padding-bottom: var(--safe-bottom) !important;
    }
    .modal-close {
        min-width: 2.75rem !important;
        min-height: 2.75rem !important;
        width: 2.75rem !important;
        height: 2.75rem !important;
    }
    .modal-header, .modal-body, .modal-footer {
        padding-left: max(1rem, var(--safe-left)) !important;
        padding-right: max(1rem, var(--safe-right)) !important;
    }
}

/* Toast notifications - lift above safe area + action bar */
.toast-container {
    bottom: max(1.5rem, var(--safe-bottom)) !important;
    right: max(1.5rem, var(--safe-right)) !important;
    left: auto;
}
.toast-container.above-action-bar {
    bottom: calc(5.5rem + var(--safe-bottom)) !important;
}
@media (max-width: 48em) {
    .toast-container {
        left: 1rem !important;
        right: 1rem !important;
        bottom: max(1rem, var(--safe-bottom)) !important;
    }
    .toast {
        width: 100%;
        max-width: 100%;
    }
}

/* Dashboard metric cards - stack on mobile */
@media (max-width: 48em) {
    .stats-grid, .metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.75rem !important;
    }
    .quick-actions-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 0.5rem !important;
    }
    .dash-section {
        padding: 1rem !important;
        gap: 0.75rem !important;
    }
    .dash-section-h {
        font-size: 1rem !important;
    }
    .metric-card {
        padding: 1rem !important;
    }
    .metric-value {
        font-size: clamp(1.25rem, 5vw, 1.75rem) !important;
    }
}

@media (max-width: 30em) {
    .stats-grid, .metric-grid { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Cookie consent - respect safe-area + stack on mobile */
@media (max-width: 48em) {
    .cookie-consent, .cookie-banner {
        left: 0.75rem !important;
        right: 0.75rem !important;
        bottom: max(0.75rem, var(--safe-bottom)) !important;
        max-width: none !important;
    }
    .cookie-consent-inner {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
        padding: 1rem !important;
        text-align: left;
    }
    .cookie-consent-icon { display: none !important; }
    .cookie-consent-actions {
        flex-direction: column-reverse !important;
        gap: 0.5rem !important;
        width: 100%;
    }
    .cookie-consent-actions .cc-btn,
    .cookie-actions .btn {
        width: 100%;
        min-height: 2.75rem !important;
    }
    .cookie-consent-title { font-size: 0.9375rem !important; }
    .cookie-consent-text { font-size: 0.8125rem !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   MAP EXPLORER / APP SIDEBAR (style.css overrides)
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 48em) {
    /* Sidebar drawer on the explorer is full-height minus safe-area */
    #sidebar {
        padding-bottom: var(--safe-bottom);
    }
    /* Hamburger FAB - make it thumb-reachable (top-left OK but give size) */
    .hamburger-btn {
        width: 2.75rem !important;
        height: 2.75rem !important;
        top: max(0.75rem, var(--safe-top)) !important;
        left: max(0.75rem, var(--safe-left)) !important;
    }
    /* Layer toggles need larger hit zones */
    .layer-toggle {
        padding: 0.5rem 0.625rem !important;
        min-height: 2.25rem !important;
        display: flex !important;
        align-items: center !important;
    }

    /* Map controls - larger on touch */
    .map-btn {
        min-width: 2.5rem;
        min-height: 2.5rem;
        padding: 0.5rem !important;
        font-size: 0.75rem !important;
    }
}

/* Property popup on the map - fit on phones */
@media (max-width: 40em) {
    .maplibregl-popup,
    .popup {
        max-width: calc(100vw - 2rem) !important;
    }
    .popup-action-btn {
        min-height: 2.75rem !important;
        padding: 0.625rem 0.875rem !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   STANDALONE PAGE OVERRIDES - pages with inline <style> blocks that have
   hardcoded desktop-first rules we can't edit in the page but can override
   here. These use higher specificity to win the cascade.
   ═══════════════════════════════════════════════════════════════════════════ */

/* resources.html inline filter bar - .rh-filter-group needs flex-wrap */
.rh-filter-group {
    flex-wrap: wrap;
    max-width: 100%;
}

/* rh-pill is used as filter chip - give tappable size at all mobile widths */
.rh-pill {
    min-height: 2.5rem !important;
    padding: 0.5rem 0.875rem !important;
}

@media (max-width: 48em) {
    .rh-filters {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem !important;
    }
    .rh-filter-group {
        flex-wrap: wrap;
        gap: 0.375rem;
    }
    .rh-pill {
        min-height: 2.75rem !important;
    }
    .rh-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* Careers submit button */
.cr-submit {
    min-height: 2.75rem !important;
    padding: 0.75rem 1.5rem !important;
}

/* Generic filter/chip bars - prevent row overflow */
@media (max-width: 48em) {
    .filter-bar, .filter-row, .chip-row,
    .resources-faq-nav {
        flex-wrap: wrap !important;
    }
}

/* Inline hamburger (pipeline/comps/property-reports etc. use .site-nav-toggle
   as a minimal hamburger). Expand hit zone to 44×44. */
.site-nav-toggle {
    min-width: 2.75rem !important;
    min-height: 2.75rem !important;
    padding: 0.75rem !important;
    justify-content: center;
    align-items: center;
}
/* Visual close affordance - the inline onclick on .site-nav-toggle only
   toggles aria-expanded and the sibling links' `.open` class, so without
   this rule the three bars stay as three bars and users can't tell the
   menu is open / where to click to dismiss. Match the .ln-h X transform
   so the standalone-nav pages get the same close UX as the main site
   header. Targets aria-expanded so it works with either the inline
   onclick or mobile-enhance.js's wireStandaloneNav. */
.site-nav-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(0.375rem) rotate(45deg);
}
.site-nav-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}
.site-nav-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-0.375rem) rotate(-45deg);
}

/* Cookie consent / preference link-buttons - ensure tappable size */
button[class*="cookie"],
button[data-cookie-prefs],
button[data-cookie-action],
.cookie-settings,
.cookie-preferences,
.cc-btn, .cc-btn-sm {
    min-height: 2.5rem !important;
    padding: 0.5rem 0.875rem !important;
}
@media (max-width: 48em) {
    button[class*="cookie"],
    button[data-cookie-prefs],
    button[data-cookie-action],
    .cookie-settings, .cookie-preferences,
    .cc-btn {
        min-height: 2.75rem !important;
    }
}

/* Any grid with repeat(N, 1fr) in inline style at mobile → minmax(0, 1fr) */
@media (max-width: 48em) {
    [class*="grid"] > * {
        min-width: 0;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   UNIVERSAL UTILITIES - table wrapper, hide/show, sticky rescue
   ═══════════════════════════════════════════════════════════════════════════ */

/* Any table class should scroll horizontally on narrow screens */
.table-responsive,
.table-wrap,
.scroll-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

/* ── Universal table overflow safety ────────────────────────────────────
   Below 48em, any <table> inside common page containers becomes a
   block-level scroll container. The auto-wrap in mobile-enhance.js
   handles most cases but this handles bare tables too. */
@media (max-width: 48em) {
    .data-table,
    .screen-table,
    .prop-comps {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
        white-space: nowrap;
    }
    .data-table thead, .screen-table thead, .prop-comps thead,
    .data-table tbody, .screen-table tbody, .prop-comps tbody {
        display: table-header-group;
    }
    .data-table tbody, .screen-table tbody, .prop-comps tbody {
        display: table-row-group;
    }
    .data-table tr, .screen-table tr, .prop-comps tr {
        display: table-row;
    }
    .data-table th, .data-table td,
    .screen-table th, .screen-table td,
    .prop-comps th, .prop-comps td {
        display: table-cell;
    }

    /* Any bare table inside main content scrolls horizontally */
    .page-wrap table,
    .sol-body table,
    .platform-section table,
    main table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
}

/* Narrow hero mock panels in solution pages - make decorative screens
   scroll rather than overflow the page */
@media (max-width: 48em) {
    .screen {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    .screen-mock {
        min-width: max-content;
    }
}

/* Fade-edge scroll hint - gives a visual cue that a table can scroll */
.table-responsive {
    background:
        linear-gradient(to right, var(--warm-white, #fff) 30%, rgba(255,255,255,0)) 0 0,
        linear-gradient(to right, rgba(255,255,255,0), var(--warm-white, #fff) 70%) 100% 0;
    background-repeat: no-repeat;
    background-size: 2rem 100%;
    background-attachment: local, local;
}

/* Sticky rescue: any position:sticky that got broken by overflow-x needs
   position:relative on mobile to avoid jumping */
@media (max-width: 48em) {
    .sticky-mobile-off {
        position: relative !important;
        top: auto !important;
    }
}

/* Mobile-only / desktop-only utilities */
.mobile-only { display: none; }
.desktop-only { display: block; }
@media (max-width: 48em) {
    .mobile-only { display: block; }
    .desktop-only { display: none !important; }
    .mobile-only-flex { display: flex; }
    .mobile-only-grid { display: grid; }
}

/* Hero images that shouldn't crop on mobile */
@media (max-width: 48em) {
    .hero-image-mobile-fit {
        object-fit: cover;
        object-position: center center;
        max-height: 15rem;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   LANDSCAPE / ORIENTATION TWEAKS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Phones in landscape are short - reduce hero vertical padding */
@media (max-height: 30em) and (orientation: landscape) {
    .lh { min-height: auto; padding-top: 3rem; padding-bottom: 2rem; }
    .lh-text h1 { font-size: clamp(1.625rem, 5vw, 2.25rem); }
    .auth-shell { min-height: auto; }
    .auth-form-col { padding: 1rem !important; }
    .bb-foot-i { padding: 1.5rem 1rem; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   PRINT - ensure good mobile print (save as PDF from phone)
   ═══════════════════════════════════════════════════════════════════════════ */

@media print {
    .mobile-only,
    .hamburger-btn,
    .mobile-menu-btn,
    .ln-h,
    nav,
    .bb-foot-contact,
    .cookie-consent,
    .toast-container {
        display: none !important;
    }
    body { overflow: visible !important; height: auto !important; }
    .legal-page { max-width: none; padding: 0; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   REDUCED MOTION - disable transforms/animations for users who opt out
   ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   HIGH-DPI / RETINA LINE HAIRLINES
   ═══════════════════════════════════════════════════════════════════════════ */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .hairline { border-width: 0.03125rem; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   DARK MODE HINT (respect OS, pages opt-in via .dark)
   ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-color-scheme: dark) {
    :root.auto-dark {
        color-scheme: dark;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   DASHBOARD SKELETON - mobile width fix
   ═══════════════════════════════════════════════════════════════════════════
   SkeletonStats() sets inline `flex: 1 1 12rem` and `min-width: 12rem`
   on each card. On phones (<=48em) the 12rem min-width (~192px) pins
   the cards at roughly half-viewport instead of stretching to the
   single-column grid cell, leaving the right half of the screen blank
   while the dashboard hydrates. Force the strip to one column and
   strip the per-card width constraints so each skeleton card fills
   the row edge-to-edge. */
@media (max-width: 48em) {
    .dash-metrics {
        grid-template-columns: 1fr !important;
        display: grid !important;
    }
    .dash-metrics > .skeleton-card-block,
    .dash-metrics > * {
        flex: none !important;
        min-width: 0 !important;
        width: auto !important;
    }
    /* The two .grid.grid-2 rows below the metrics carry their own
       SkeletonCards - mirror the override so they also stack
       full-width on phones. */
    .dash-page .grid.grid-2 {
        grid-template-columns: 1fr !important;
    }
    .dash-page .grid.grid-2 > .skeleton-card-block {
        min-width: 0 !important;
        width: auto !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   FORM VALIDATION - red border + red focus ring for invalid fields
   ═══════════════════════════════════════════════════════════════════════════
   Three validation patterns exist in the codebase and previously they
   didn't agree:
     :user-invalid     browser-native HTML5 validation, fires only AFTER
                       the user has interacted with the field (better UX
                       than :invalid which paints empty required fields
                       red on page load).
     .error            SPA forms set this via UI.showFieldError().
     .fs-invalid       Landing-page forms set this via formsubmit-ajax.js.
   The default focus rules in app.css / company-page.css / landing.css
   all paint the border + ring gold on :focus. When the field is also
   invalid, the gold ring won the cascade in places where the invalid
   rule was a more general selector (no wrapping .company-form-field /
   .bb-foot-field prefix). This block overrides every focus state with
   red, scoped to invalid inputs only, !important so it beats the gold
   focus rules regardless of source order. */
input:user-invalid, select:user-invalid, textarea:user-invalid,
input.error, select.error, textarea.error,
.form-input.error, .form-select.error, .form-textarea.error,
input.fs-invalid, select.fs-invalid, textarea.fs-invalid,
input.is-invalid, select.is-invalid, textarea.is-invalid {
    border-color: var(--error, #c62828) !important;
}
input:user-invalid:focus, select:user-invalid:focus, textarea:user-invalid:focus,
input.error:focus, select.error:focus, textarea.error:focus,
.form-input.error:focus, .form-select.error:focus, .form-textarea.error:focus,
input.fs-invalid:focus, select.fs-invalid:focus, textarea.fs-invalid:focus,
input.is-invalid:focus, select.is-invalid:focus, textarea.is-invalid:focus {
    border-color: var(--error, #c62828) !important;
    box-shadow: 0 0 0 0.1875rem rgba(198, 40, 40, 0.18) !important;
    outline: none !important;
    background: #fffafa !important;
}
/* The footer's floating-label inputs use border-bottom only - paint
   that side too so the bottom rule turns red instead of staying gold. */
.bb-foot-field input:user-invalid,
.bb-foot-field textarea:user-invalid,
.bb-foot-field input.fs-invalid,
.bb-foot-field textarea.fs-invalid {
    border-bottom-color: var(--error, #c62828) !important;
}
.bb-foot-field input:user-invalid:focus,
.bb-foot-field textarea:user-invalid:focus,
.bb-foot-field input.fs-invalid:focus,
.bb-foot-field textarea.fs-invalid:focus {
    border-bottom-color: var(--error, #c62828) !important;
}
/* Email is the one field where live validation feedback is genuinely
   useful - users routinely type "abc@" and need to know it's wrong
   before tabbing out. :user-invalid only fires post-blur, so during
   the actual mistyping the gold focus ring would stay. Adding
   :not(:placeholder-shown):invalid on type=email catches the live
   typing state without polluting empty-required-field UX (the
   :not(:placeholder-shown) gate means an empty field stays neutral
   until the user starts typing). */
input[type="email"]:not(:placeholder-shown):invalid {
    border-color: var(--error, #c62828) !important;
}
input[type="email"]:not(:placeholder-shown):invalid:focus {
    border-color: var(--error, #c62828) !important;
    box-shadow: 0 0 0 0.1875rem rgba(198, 40, 40, 0.18) !important;
    outline: none !important;
    background: #fffafa !important;
}
.bb-foot-field input[type="email"]:not(:placeholder-shown):invalid {
    border-bottom-color: var(--error, #c62828) !important;
}
.bb-foot-field input[type="email"]:not(:placeholder-shown):invalid:focus {
    border-bottom-color: var(--error, #c62828) !important;
}
.bb-foot-field input[type="email"]:not(:placeholder-shown):invalid + label {
    color: var(--error, #c62828) !important;
}

/* Floating-label color for invalid footer fields - matches border. */
.bb-foot-field input:user-invalid + label,
.bb-foot-field input.fs-invalid + label,
.bb-foot-field textarea:user-invalid + label,
.bb-foot-field textarea.fs-invalid + label {
    color: var(--error, #c62828) !important;
}