/* ============================================================================
   BirdDog field app — brand styling.
   Palette and type sampled directly from the birddog.top banner:
     navy  #000C2A   green #5FA541   white
   Display face is a heavy condensed grotesque set in caps (Barlow Condensed),
   paired with Barlow for body — one superfamily, matching the banner's flat
   terminals. Both are self-hosted: a field app must render offline, and a
   Google Fonts request would fail exactly when there's no signal.
   ============================================================================ */

@font-face {
    font-family: 'Barlow Condensed';
    src: url('../fonts/barlow-condensed-latin-700-normal.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Barlow Condensed';
    src: url('../fonts/barlow-condensed-latin-800-normal.woff2') format('woff2');
    font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Barlow';
    src: url('../fonts/barlow-latin-400-normal.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Barlow';
    src: url('../fonts/barlow-latin-600-normal.woff2') format('woff2');
    font-weight: 600; font-style: normal; font-display: swap;
}

:root {
    /* Sampled from the banner */
    --navy-900:#000C2A;   /* page ground */
    --navy-800:#001030;   /* header / bars */
    --navy-700:#0A1838;   /* cards */
    --navy-600:#16294F;   /* hairlines */
    --green:#5FA541;
    --green-hi:#74C255;   /* hover / emphasis */
    --white:#FFFFFF;
    --slate:#9FB3CE;      /* secondary copy */
    --amber:#E8A33D;
    --red:#E2564E;

    --display:'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
    --body:'Barlow', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

    --tabbar-h:66px;
    --radius:10px;
}

* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { margin:0; height:100%; }
body {
    font-family:var(--body); font-size:16px; line-height:1.5;
    background:var(--navy-900); color:var(--white);
    -webkit-text-size-adjust:100%;
}

/* Display type: condensed, caps, tight — the banner's voice. */
h1, h2, h3, .display {
    font-family:var(--display); font-weight:800;
    text-transform:uppercase; letter-spacing:.01em; line-height:1.05;
    margin:0 0 .75rem;
}
h1 { font-size:2rem; }

/* App.razor's <FocusOnNavigate Selector="h1" /> sets tabindex="-1" on the heading and focuses it
   for screen-reader users. Browsers then draw a focus ring around the full-width block, which looks
   like a stray box. Suppress it for programmatic focus only — real keyboard focus (:focus-visible)
   still shows, so keyboard navigation isn't harmed. */
h1:focus, [tabindex="-1"]:focus { outline:none; }
h1:focus-visible { outline:2px solid var(--green); outline-offset:2px; }
h2 { font-size:1.35rem; }
h3 { font-size:1.1rem; font-weight:700; }

/* The banner's signature move: a headline whose last clause turns green. */
.accent { color:var(--green); }

a { color:var(--green-hi); text-decoration:none; }
p { margin:0 0 1rem; }
.muted { color:var(--slate); }
.small { font-size:.875rem; }
.centered { text-align:center; padding:2.5rem 1rem; }

/* ── Shell ─────────────────────────────────────────────────────────────── */
.app-shell { display:flex; flex-direction:column; min-height:100dvh; }

.app-header {
    display:flex; align-items:center; gap:.6rem;
    padding:calc(env(safe-area-inset-top) + .55rem) 1rem .55rem;
    background:var(--navy-800); border-bottom:1px solid var(--navy-600);
    position:sticky; top:0; z-index:10;
}
.app-header__logo { height:30px; width:auto; display:block; }
.app-header__word {
    font-family:var(--display); font-weight:800; font-size:1.3rem;
    letter-spacing:.01em; color:var(--white); text-transform:uppercase; line-height:1;
}
.app-header__word .tld { color:var(--green); }
.app-header__spacer { flex:1; }
.app-header__link { font-family:var(--display); font-weight:700; font-size:.95rem;
                    text-transform:uppercase; color:var(--slate); letter-spacing:.02em; }

/* Brand strapline, straight off the banner. */
.strapline {
    font-family:var(--display); font-weight:700; text-transform:uppercase;
    font-size:.95rem; letter-spacing:.06em; text-align:center;
    padding:.5rem 1rem; background:var(--navy-800);
    border-bottom:1px solid var(--navy-600); color:var(--white);
}

.app-main {
    flex:0 1 auto; padding:1.25rem 1rem;
    padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 1.25rem);
}

.tabbar {
    position:fixed; inset:auto 0 0 0; display:flex;
    background:var(--navy-800); border-top:1px solid var(--navy-600);
    padding-bottom:env(safe-area-inset-bottom); z-index:10;
}
.tab {
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:.2rem; height:var(--tabbar-h); color:var(--slate);
    font-family:var(--display); font-weight:700; text-transform:uppercase;
    font-size:.75rem; letter-spacing:.04em;
    border-top:3px solid transparent;
}
.tab__icon { font-size:1.3rem; line-height:1; }
.tab.active { color:var(--green); border-top-color:var(--green); background:rgba(95,165,65,.07); }

/* ── Forms ─────────────────────────────────────────────────────────────── */
/* 16px inputs: anything smaller makes iOS zoom on focus. */
label { display:block; margin:0 0 1.1rem;
        font-family:var(--display); font-weight:700; text-transform:uppercase;
        font-size:.8rem; letter-spacing:.06em; color:var(--slate); }
label .muted { text-transform:none; letter-spacing:0; font-family:var(--body); font-weight:400; }

input, select, textarea {
    display:block; width:100%; margin-top:.3rem;
    font-family:var(--body); font-size:16px; color:var(--white);
    background:var(--navy-900); border:1px solid var(--navy-600);
    border-radius:var(--radius); padding:.8rem;
}
input:focus, select:focus, textarea:focus {
    outline:2px solid var(--green); outline-offset:1px; border-color:var(--green);
}
input[readonly] { color:var(--slate); background:#00081F; }
textarea { resize:vertical; }
.field-row { display:flex; gap:.6rem; }
.field-row .grow { flex:1; }
.field-row .field-half { flex:1 1 0; min-width:0; }   /* equal halves; min-width:0 stops overflow */
.field-row .field-sm { width:5.5rem; flex:none; }
.validation-message { color:var(--red); font-size:.85rem;
                      font-family:var(--body); text-transform:none; letter-spacing:0; }

/* ── Buttons: green pill with a chevron, as on the banner's SUBMIT PROPERTY ── */
.btn {
    display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
    min-height:50px; padding:.75rem 1.4rem;            /* 50px: glove-friendly target */
    font-family:var(--display); font-weight:800; font-size:1.05rem;
    text-transform:uppercase; letter-spacing:.05em;
    color:var(--white); background:var(--navy-700);
    border:1px solid var(--navy-600); border-radius:var(--radius);
    cursor:pointer; transition:background .15s ease, border-color .15s ease;
}
.btn:hover:not(:disabled) { border-color:var(--green); }
.btn:disabled { opacity:.45; cursor:default; }

.btn--primary { background:var(--green); border-color:var(--green); color:var(--white); }
.btn--primary:hover:not(:disabled) { background:var(--green-hi); border-color:var(--green-hi); }
.btn--primary::after { content:'›'; font-size:1.5rem; line-height:1; margin-left:.1rem; }
.btn--wide { width:100%; }
.btn--small { min-height:38px; padding:.35rem .8rem; font-size:.85rem; }
.btn--small::after { content:none; }

/* ── Step badges — the banner's SPOT / SNAP / CONNECT circles ───────────── */
.steps { display:flex; gap:1rem; justify-content:center; margin:0 0 1.5rem; }
.step { text-align:center; flex:1; max-width:7rem; }
.step__badge {
    width:52px; height:52px; margin:0 auto .45rem; border-radius:50%;
    background:var(--green); display:flex; align-items:center; justify-content:center;
    font-size:1.4rem;
}
.step__label { font-family:var(--display); font-weight:700; text-transform:uppercase;
               font-size:.8rem; letter-spacing:.05em; }
.step__text { font-size:.78rem; color:var(--slate); line-height:1.25; }

/* ── Photo capture ─────────────────────────────────────────────────────── */
.visually-hidden { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.photos { border:1px solid var(--navy-600); border-radius:var(--radius);
          padding:.85rem; margin:0 0 1.25rem; background:var(--navy-700); }
.photos legend { font-family:var(--display); font-weight:700; text-transform:uppercase;
                 font-size:.85rem; letter-spacing:.05em; color:var(--slate); padding:0 .4rem; }
.photo-capture__buttons { display:flex; gap:.6rem; }
.photo-capture__buttons .btn { flex:1; font-size:.95rem; padding:.7rem .6rem; }
.photo-capture__count { font-family:var(--display); font-weight:700; text-transform:uppercase;
                        letter-spacing:.04em; font-size:.85rem; color:var(--slate); margin:.7rem 0 0; }
.photo-capture__spinner { color:var(--green); margin-left:.4rem; }
.photo-capture__warn { color:var(--amber); font-size:.85rem; margin:.4rem 0 0; }
.photo-capture__grid { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.8rem; }
.photo-thumb { position:relative; margin:0; width:calc(50% - .3rem); }
.photo-thumb img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block;
                   border-radius:8px; border:2px solid var(--green); }
.photo-thumb__remove {
    position:absolute; top:.35rem; right:.35rem; width:34px; height:34px;
    border-radius:50%; border:0; background:rgba(0,12,42,.82); color:var(--white);
    font-size:1rem; line-height:1; cursor:pointer;
}
.photo-thumb figcaption { color:var(--slate); font-size:.7rem; margin-top:.25rem; }

/* ── Status strips ─────────────────────────────────────────────────────── */
.offline-strip, .syncing-strip {
    font-family:var(--display); font-weight:700; text-transform:uppercase;
    letter-spacing:.05em; font-size:.85rem; text-align:center; padding:.55rem 1rem;
}
.offline-strip { background:#2E2410; color:var(--amber); }
.syncing-strip { background:#0C2A16; color:var(--green-hi); }

.geo-row { display:flex; align-items:center; gap:.6rem; margin:0 0 1.25rem; font-size:.875rem; }
.geo-ok { color:var(--green-hi); }
.error { color:var(--red); }
.queued-note { margin-top:.8rem; font-size:.875rem; }

/* ── Submission cards ──────────────────────────────────────────────────── */
.lead-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.7rem; }
.lead-card {
    background:var(--navy-700); border:1px solid var(--navy-600);
    border-left:4px solid var(--green); border-radius:var(--radius); padding:.85rem;
}
.lead-card__head { display:flex; justify-content:space-between; gap:.6rem; align-items:flex-start; }
.lead-card__address { font-family:var(--display); font-weight:700; font-size:1.05rem;
                      text-transform:uppercase; letter-spacing:.01em; }

.status-pill {
    font-family:var(--display); font-weight:700; text-transform:uppercase;
    font-size:.72rem; letter-spacing:.05em; white-space:nowrap;
    padding:.22rem .6rem; border-radius:999px; border:1px solid currentColor;
}
.status-pending { color:var(--slate); }
.status-active  { color:var(--green-hi); }
.status-good    { color:var(--green); background:rgba(95,165,65,.14); }
.status-bad     { color:var(--red); }

.pending-card {
    background:var(--navy-700); border:1px solid var(--green); border-radius:var(--radius);
    padding:.75rem .85rem; margin-bottom:1.25rem; display:flex; flex-direction:column; gap:.15rem;
}
.pending-card strong { font-family:var(--display); text-transform:uppercase; letter-spacing:.04em; }

.submit-done { text-align:center; padding:1.5rem 0; display:flex; flex-direction:column; gap:.85rem; }

/* ── Account gating ────────────────────────────────────────────────────── */
.account-locked { max-width:32rem; margin:2rem auto; text-align:center; padding:1.75rem;
                  border:1px solid var(--red); border-radius:12px; background:var(--navy-700); }
.account-locked h1 { color:var(--red); }
.account-paused-banner {
    background:#2E2410; color:var(--amber); border-left:4px solid var(--amber);
    padding:.65rem .85rem; border-radius:var(--radius); margin:0 0 1.25rem;
    font-family:var(--display); font-weight:700; text-transform:uppercase;
    letter-spacing:.03em; font-size:.9rem;
}

/* ── Sign-in ───────────────────────────────────────────────────────────── */
.signin { max-width:24rem; margin:2rem auto 1.5rem; }
.signin__mark { display:block; width:96px; margin:0 auto .9rem; }
.signin h1 { text-align:center; margin-bottom:.35rem; }
.signin__tag { text-align:center; font-family:var(--display); font-weight:700;
               text-transform:uppercase; letter-spacing:.06em; color:var(--slate);
               font-size:.9rem; margin-bottom:1.75rem; }
.signin__tag .accent { color:var(--green); }
.signin__note { text-align:center; margin-top:1.25rem; font-size:.85rem; color:var(--slate); }

/* ── Boot / error ──────────────────────────────────────────────────────── */
.boot { min-height:100dvh; display:flex; flex-direction:column; align-items:center;
        justify-content:center; gap:1rem; background:var(--navy-900); }
.boot img { width:88px; }
.boot__word { font-family:var(--display); font-weight:800; font-size:1.6rem;
              text-transform:uppercase; color:var(--white); }
.boot__word .tld { color:var(--green); }
.boot__note { color:var(--slate); font-size:.9rem; }

#blazor-error-ui { display:none; position:fixed; inset:auto 0 0 0; z-index:20;
                   background:var(--red); color:var(--white); padding:.75rem 1rem;
                   font-family:var(--display); font-weight:700; text-transform:uppercase;
                   letter-spacing:.03em; }
#blazor-error-ui .reload, #blazor-error-ui .dismiss { color:var(--white); margin-left:1rem; cursor:pointer; }

@media (prefers-reduced-motion: reduce) {
    * { animation:none !important; transition:none !important; }
}

/* Legal footer — sits below content, above the tab bar, on every screen incl. login. */
.app-footer { text-align:center; padding:0.25rem 1rem 5rem; display:flex; flex-direction:column; gap:.15rem; }
.app-footer a { color:var(--slate); font-size:.8rem; text-decoration:underline; }
.app-footer__copy { color:var(--slate); font-size:.72rem; }

/* Privacy / terms long-form pages. Readable measure, generous spacing. */
.legal { max-width:44rem; margin:0 auto; padding:1.25rem 1.25rem 3rem; line-height:1.6; }
.legal h1 { margin-bottom:.25rem; }
.legal h2 { margin-top:1.75rem; font-size:1.15rem; }
.legal__date { color:var(--slate); margin-bottom:1.5rem; }
.legal ul { padding-left:1.25rem; }
.legal li { margin:.35rem 0; }
.legal a { color:var(--green); }
.legal__nav { margin-top:2rem; }

/* Address autocomplete ------------------------------------------------------ */
.addr-ac { position:relative; }
.addr-ac__input {
    /* match the app's other inputs — inherit the shared field styling */
    width:100%; box-sizing:border-box;
}
.addr-ac__menu {
    position:absolute; z-index:20; left:0; right:0; top:100%; margin:.25rem 0 0;
    list-style:none; padding:.25rem; max-height:16rem; overflow-y:auto;
    background:var(--navy-800); border:1px solid var(--navy-600); border-radius:.5rem;
    box-shadow:0 8px 24px rgba(0,0,0,.4);
}
.addr-ac__item {
    padding:.6rem .65rem; border-radius:.4rem; cursor:pointer;
    color:var(--paper); font-size:.95rem; line-height:1.3;
}
.addr-ac__item:hover, .addr-ac__item:active { background:var(--navy-600); }