/* ============================================================
   Icteria — field-science aesthetic
   Warm paper · forest green · solar gold · Lora / Raleway
   ============================================================ */

:root {
  --paper:      #f7f4ec;
  --paper-2:    #fbf9f3;
  --surface:    #ffffff;
  --forest:     #2f5d3a;
  --forest-dk:  #22462c;
  --moss:       #5b9a6b;
  --sage:       #8fb89a;
  --gold:       #e0a43b;
  --gold-dk:    #c78a26;
  --sky:        #3e6b8c;
  --clay:       #b4623f;
  --ink:        #1e2b22;
  --ink-soft:   #40503f;
  --muted:      #5c6b60;
  --line:       #e4dfd0;
  --line-2:     #ece8db;

  --prime: #2f8f4e;
  --good:  #7fb069;
  --fair:  #e0a43b;
  --poor:  #c47b52;

  --shadow-sm: 0 1px 2px rgba(38, 50, 40, .06), 0 1px 3px rgba(38, 50, 40, .05);
  --shadow-md: 0 4px 14px rgba(38, 50, 40, .08), 0 2px 6px rgba(38, 50, 40, .05);
  --shadow-lg: 0 18px 48px rgba(30, 43, 34, .16);
  --radius:    16px;
  --radius-sm: 10px;

  --font-head: "Lora", Georgia, serif;
  --font-body: "Raleway", system-ui, -apple-system, sans-serif;

  --maxw: 1080px;
}

* { box-sizing: border-box; }

/* The [hidden] attribute must win even over components that set their own
   display (.gate, .app, .modal, .loading all do). */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 600; line-height: 1.2; color: var(--ink); }
a { color: var(--forest); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------------- Buttons ---------------- */
.btn {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .95rem;
  border: none;
  border-radius: 999px;
  padding: .72rem 1.4rem;
  cursor: pointer;
  transition: background-color .2s ease, box-shadow .2s ease, transform .05s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--forest); color: #fff; box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--forest-dk); }
.btn--primary:disabled { background: var(--sage); cursor: not-allowed; box-shadow: none; }
.btn--block { width: 100%; padding: .9rem; font-size: 1rem; }
.btn.is-loading { position: relative; color: transparent; }
.btn.is-loading::after {
  content: ""; position: absolute; width: 18px; height: 18px;
  border: 2.5px solid rgba(255,255,255,.5); border-top-color: #fff;
  border-radius: 50%; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.link-btn {
  background: none; border: none; color: var(--forest); cursor: pointer;
  font-family: var(--font-body); font-weight: 600; font-size: .88rem;
  display: inline-flex; align-items: center; gap: .4rem; padding: .3rem 0;
}
.link-btn:hover { color: var(--forest-dk); text-decoration: underline; }
.inline-link { background: none; border: none; color: var(--forest); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; padding: 0; }

/* ---------------- Brand ---------------- */
.brand { display: inline-flex; align-items: center; gap: .55rem; color: var(--forest); }
.brand-mark { display: inline-flex; color: var(--forest); }
.brand-name { font-family: var(--font-head); font-weight: 700; font-size: 1.25rem; letter-spacing: .01em; color: var(--ink); }
.brand-ai { color: var(--moss); }
.brand--lg .brand-name { font-size: 1.7rem; }
.brand--lg .brand-mark { color: var(--moss); }

/* ============================================================
   LOGIN / LOCATION GATE
   ============================================================ */
.gate {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  padding: 2rem 1.25rem;
  overflow: hidden;
}
.gate-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(1200px 600px at 78% -8%, rgba(224,164,59,.16), transparent 60%),
    radial-gradient(900px 700px at 8% 110%, rgba(47,93,58,.18), transparent 55%),
    linear-gradient(160deg, #f2efe4 0%, #eef1e6 45%, #e9efe4 100%);
}
/* faint topographic contour texture */
.gate-bg::after {
  content: ""; position: absolute; inset: 0; opacity: .5;
  background-image:
    repeating-radial-gradient(circle at 80% 20%, transparent 0 38px, rgba(47,93,58,.05) 38px 39px),
    repeating-radial-gradient(circle at 15% 85%, transparent 0 46px, rgba(47,93,58,.045) 46px 47px);
  mask-image: linear-gradient(180deg, #000, transparent 92%);
}
.gate-inner {
  position: relative; z-index: 1;
  width: min(640px, 100%);
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(228,223,208,.9);
  border-radius: 24px;
  padding: 2.6rem 2.4rem 2rem;
  box-shadow: var(--shadow-lg);
  animation: rise .5s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
.gate-title { font-size: clamp(1.9rem, 4vw, 2.6rem); margin: 1.4rem 0 .5rem; letter-spacing: -.01em; }
.gate-lede { color: var(--ink-soft); font-size: 1.05rem; max-width: 46ch; margin: 0 0 1.6rem; }
.field-label { display: block; font-weight: 600; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: .5rem; }
.gate-input-row { display: flex; align-items: center; gap: .5rem; background: #fff; border: 1.5px solid var(--line); border-radius: 999px; padding: .35rem .35rem .35rem .9rem; transition: border-color .2s, box-shadow .2s; }
.gate-input-row:focus-within { border-color: var(--moss); box-shadow: 0 0 0 4px rgba(91,154,107,.15); }
.input-icon { color: var(--moss); display: inline-flex; flex: none; }
.gate-input-row input { flex: 1; border: none; outline: none; background: transparent; font-family: var(--font-body); font-size: 1rem; color: var(--ink); min-width: 0; }
.gate-input-row input::placeholder { color: #9aa595; }
#geolocate { margin-top: .9rem; }
.gate-error { color: var(--clay); font-size: .9rem; margin: .8rem 0 0; font-weight: 500; }
.gate-foot { margin: 1.6rem 0 0; font-size: .82rem; color: var(--muted); }

/* Auth gate */
.gate-inner--auth { width: min(460px, 100%); }
.auth-input { width: 100%; box-sizing: border-box; font-family: var(--font-body); font-size: 1rem; color: var(--ink); background: #fff; border: 1.5px solid var(--line); border-radius: 12px; padding: .72rem .95rem; transition: border-color .2s, box-shadow .2s; }
.auth-input:focus { outline: none; border-color: var(--moss); box-shadow: 0 0 0 4px rgba(91,154,107,.15); }
.auth-input::placeholder { color: #9aa595; }
.auth-switch { margin: 1.3rem 0 0; font-size: .88rem; color: var(--muted); display: flex; gap: .4rem; align-items: center; }
.auth-info { margin: .9rem 0 0; font-size: .88rem; font-weight: 500; color: var(--forest); background: #eef6ef; border: 1px solid #cfe3d2; border-radius: 10px; padding: .7rem .9rem; line-height: 1.45; }

/* OAuth (Google sign-in) */
.auth-divider { display: flex; align-items: center; gap: .7rem; margin: 1.1rem 0 .9rem; color: var(--muted); font-size: .8rem; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.btn--oauth { background: #fff; color: var(--ink); border: 1.5px solid var(--line); gap: .6rem; }
.btn--oauth:hover { background: var(--paper-2); border-color: var(--sage); }
.btn--oauth svg { flex: none; }

/* ============================================================
   LANDING / HOMEPAGE
   ============================================================ */
#landing { min-height: 100vh; background: var(--paper); position: relative; }
/* returning signed-in visitors: hide the landing before first paint (no flash) */
.has-session #landing { display: none !important; }
/* keep every section above the decorative flock */
#landing > header, #landing > section, #landing > footer { position: relative; z-index: 1; }

/* Full-page decorative flock in the side gutters (behind content) */
.lp-decor { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.lp-fly { position: absolute; color: var(--forest); opacity: .13; }
.lp-fly path { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
/* only show the gutter flock where there's real space beside the content */
@media (max-width: 1240px) { .lp-decor { display: none; } }

/* Subtle forestry — leafy branch across the top-center of the hero */
.lp-branch { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: min(720px, 82%); height: auto; color: var(--forest); opacity: .085; z-index: 0; pointer-events: none; }
@media (max-width: 640px) { .lp-branch { width: 116%; opacity: .07; } }
/* leaf sprigs interspersed in the side gutters */
.lp-sprig { color: var(--moss); }
.btn--lg { padding: .95rem 1.8rem; font-size: 1.05rem; }

.lp-nav {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  padding: .9rem clamp(1.1rem, 5vw, 3rem);
  background: rgba(247,244,236,.85); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.lp-nav .brand-name { font-size: 1.3rem; }
.lp-nav-actions { display: inline-flex; align-items: center; gap: 1rem; }

.lp-hero { position: relative; overflow: hidden; padding: clamp(2.8rem, 7vw, 5rem) clamp(1.1rem, 5vw, 3rem) clamp(2rem, 4vw, 3rem); }
.lp-hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(1100px 520px at 82% -10%, rgba(224,164,59,.16), transparent 60%),
    radial-gradient(900px 640px at 4% 118%, rgba(47,93,58,.16), transparent 55%),
    linear-gradient(160deg, #f4f1e7 0%, #eef1e6 50%, #e9efe4 100%);
}
.lp-hero-bg::after {
  content: ""; position: absolute; inset: 0; opacity: .5;
  background-image:
    repeating-radial-gradient(circle at 84% 12%, transparent 0 40px, rgba(47,93,58,.05) 40px 41px),
    repeating-radial-gradient(circle at 10% 88%, transparent 0 48px, rgba(47,93,58,.045) 48px 49px);
  mask-image: linear-gradient(180deg, #000, transparent 90%);
}
.lp-hero-inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; text-align: center; }
.lp-eyebrow {
  display: inline-block; font-family: var(--font-body); font-weight: 600;
  font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--moss);
  background: rgba(91,154,107,.12); border: 1px solid rgba(91,154,107,.25);
  padding: .35rem .8rem; border-radius: 999px; margin-bottom: 1.3rem;
}
.lp-title { font-size: clamp(2.1rem, 5.2vw, 3.5rem); line-height: 1.08; letter-spacing: -.015em; margin: 0 0 1.1rem; }
.lp-lede { font-size: clamp(1.05rem, 2.2vw, 1.25rem); color: var(--ink-soft); max-width: 620px; margin: 0 auto 2rem; line-height: 1.65; }
.lp-cta { display: flex; flex-direction: column; align-items: center; gap: .8rem; }
.lp-cta-row { display: flex; gap: .8rem; flex-wrap: wrap; justify-content: center; }
.lp-cta-note { font-size: .85rem; color: var(--muted); max-width: 44ch; }

.lp-section { max-width: var(--maxw); margin: 0 auto; padding: clamp(3rem, 7vw, 5rem) clamp(1.1rem, 5vw, 2rem); }
.lp-h2 { font-size: clamp(1.7rem, 3.5vw, 2.3rem); text-align: center; margin: 0 0 .5rem; }
.lp-sub { text-align: center; color: var(--muted); max-width: 52ch; margin: 0 auto 2.6rem; }

.lp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.3rem; }
.lp-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.6rem 1.5rem; box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.lp-card { position: relative; overflow: hidden; }
.lp-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--forest), var(--moss) 60%, var(--gold)); transform: scaleX(0); transform-origin: left; transition: transform .22s ease; }
.lp-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--sage); }
.lp-card:hover::before { transform: scaleX(1); }
.lp-card h3 { font-size: 1.18rem; margin: .9rem 0 .5rem; }
.lp-card p { color: var(--ink-soft); font-size: .96rem; line-height: 1.6; margin: 0; }
.lp-card strong { color: var(--forest); font-weight: 600; }
/* uniform brand-tinted icon chip (no rainbow squares) */
.lp-ic { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; color: var(--forest); background: rgba(47,93,58,.08); border: 1px solid rgba(47,93,58,.14); }

/* Species gallery marquee */
.lp-marquee-wrap { position: relative; padding: 1.5rem 0 2.5rem; overflow: hidden; }
.lp-marquee { overflow: hidden; }
.lp-marquee-track { display: flex; gap: 1rem; width: max-content; animation: lp-scroll 60s linear infinite; }
.lp-marquee-wrap:hover .lp-marquee-track { animation-play-state: paused; }
@keyframes lp-scroll { to { transform: translateX(-50%); } }
.lp-bird { position: relative; flex: 0 0 auto; width: 190px; height: 150px; margin: 0; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-sm); }
.lp-bird img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-bird figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: .7rem .8rem .55rem; font-family: var(--font-body); font-weight: 600; font-size: .82rem; color: #fff; background: linear-gradient(transparent, rgba(20,30,22,.78)); }
.lp-marquee-fade { position: absolute; top: 0; bottom: 0; width: 12%; z-index: 2; pointer-events: none; }
.lp-marquee-fade--l { left: 0; background: linear-gradient(90deg, var(--paper), transparent); }
.lp-marquee-fade--r { right: 0; background: linear-gradient(270deg, var(--paper), transparent); }
.lp-marquee-cap { text-align: center; color: var(--muted); font-size: .88rem; margin: 1.4rem auto 0; max-width: 48ch; }
@media (prefers-reduced-motion: reduce) { .lp-marquee-track { animation: none; flex-wrap: wrap; justify-content: center; } }

/* Account dashboard modal */
.acct-card { max-width: 420px; }
.acct-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.4rem; }
.acct-avatar { flex: none; width: 52px; height: 52px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--forest); color: #fff; font-family: var(--font-head); font-weight: 700; font-size: 1.4rem; }
.acct-title { margin: 0; font-size: 1.35rem; }
.acct-email { margin: .1rem 0 0; color: var(--muted); font-size: .9rem; word-break: break-all; }
.acct-facts { margin: 0 0 1.4rem; padding: 1rem 1.1rem; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius-sm); display: grid; gap: .8rem; }
.acct-fact { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.acct-fact dt { color: var(--muted); font-size: .82rem; }
.acct-fact dd { margin: 0; font-weight: 600; text-align: right; }
.acct-actions { display: grid; gap: .7rem; }
.acct-actions .btn--primary { background: var(--clay); }
.acct-actions .btn--primary:hover { background: #9c522f; }

/* small inline spinner (geolocation) */
.mini-spinner { display: inline-block; width: 13px; height: 13px; border: 2px solid rgba(47,93,58,.3); border-top-color: var(--forest); border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -2px; margin-right: 5px; }

/* example reports in the Report tab empty state */
.report-examples { margin: 2.2rem auto 0; max-width: 520px; text-align: left; }
.report-examples-head { text-align: center; color: var(--muted); font-size: .9rem; margin: 0 0 1rem; }
.ex-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: var(--radius-sm); padding: 1rem 1.2rem; margin-bottom: .8rem; cursor: pointer; transition: box-shadow .18s ease, border-color .18s ease, transform .05s ease; }
.ex-card:hover { box-shadow: var(--shadow-sm); border-color: var(--sage); }
.ex-species { margin: 0 0 .2rem; font-weight: 600; font-family: var(--font-head); }
.ex-meta { margin: 0; color: var(--muted); font-size: .85rem; }

/* Legal pages (privacy / terms) */
.legal { max-width: 720px; margin: 0 auto; padding: 3rem clamp(1.1rem, 5vw, 2rem) 4rem; }
.legal-back { display: inline-block; margin-bottom: 1.6rem; font-weight: 600; font-size: .9rem; }
.legal h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); margin: 0 0 .3rem; }
.legal-updated { color: var(--muted); font-size: .85rem; margin: 0 0 2rem; }
.legal h2 { font-size: 1.25rem; margin: 2rem 0 .6rem; }
.legal p, .legal li { color: var(--ink-soft); line-height: 1.7; }
.legal ul { padding-left: 1.2rem; }
.legal li { margin: .4rem 0; }
.legal strong { color: var(--ink); }
.legal-foot { margin-top: 2.5rem; padding-top: 1.4rem; border-top: 1px solid var(--line); font-size: .85rem; color: var(--muted); }
.lp-foot-links { margin-top: 1rem; display: flex; gap: 1.2rem; justify-content: center; flex-wrap: wrap; }
.lp-foot-links a { color: var(--forest); font-size: .85rem; font-weight: 600; }

/* Subtle decorative bird flock (fills the airy background) */
.lp-birds { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--forest); opacity: .12; z-index: 0; pointer-events: none; }
.lp-finalcta { position: relative; overflow: hidden; }
.lp-finalcta > :not(.lp-birds) { position: relative; z-index: 1; }
.lp-birds--cta { color: #fff; opacity: .18; }

/* At-a-glance stats band */
.lp-stats { max-width: var(--maxw); margin: 0 auto; padding: .5rem clamp(1.1rem, 5vw, 2rem) 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.lp-stat { text-align: center; padding: 1.7rem 1rem; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); }
.lp-stat-n { display: block; font-family: var(--font-head); font-weight: 700; font-size: clamp(1.8rem, 4vw, 2.6rem); color: var(--forest); line-height: 1; }
.lp-stat-l { display: block; margin-top: .5rem; color: var(--muted); font-size: .9rem; }
@media (max-width: 560px) { .lp-stats { grid-template-columns: 1fr; } }

.lp-how { text-align: center; }
.lp-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.6rem; margin-top: 2.4rem; text-align: left; }
.lp-step { position: relative; padding-left: 3.2rem; }
.lp-step-n {
  position: absolute; left: 0; top: 0; width: 2.3rem; height: 2.3rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--forest); color: #fff; border-radius: 50%; font-family: var(--font-head); font-weight: 700;
}
.lp-step h3 { margin: .2rem 0 .4rem; font-size: 1.12rem; }
.lp-step p { color: var(--ink-soft); font-size: .95rem; line-height: 1.6; margin: 0; }

.lp-finalcta {
  text-align: center; max-width: var(--maxw); margin: 0 auto clamp(2rem, 5vw, 3.5rem);
  padding: clamp(2.6rem, 6vw, 4rem) clamp(1.4rem, 5vw, 2rem);
  background: linear-gradient(155deg, var(--forest) 0%, var(--forest-dk) 100%);
  border-radius: 24px; color: #fff;
}
.lp-finalcta h2 { color: #fff; font-size: clamp(1.6rem, 3.5vw, 2.2rem); margin: 0 0 .5rem; }
.lp-finalcta p { color: rgba(255,255,255,.85); margin: 0 0 1.6rem; }
.lp-finalcta .btn--primary { background: var(--gold); color: #3a2c10; }
.lp-finalcta .btn--primary:hover { background: var(--gold-dk); }

.lp-foot { text-align: center; padding: 2.5rem 1.4rem 3rem; border-top: 1px solid var(--line); color: var(--muted); }
.lp-foot .brand-name { display: block; margin-bottom: .5rem; color: var(--forest); }
.lp-foot p { max-width: 60ch; margin: 0 auto; font-size: .85rem; line-height: 1.6; }

@media (max-width: 560px) { .lp-nav-actions #lp-login { display: none; } }

/* Species empty state (before any detections) */
.species-empty { text-align: center; max-width: 460px; margin: 2rem auto; padding: 2.5rem 1.5rem; background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius); }
.species-empty-ic { display: inline-flex; color: var(--sage); margin-bottom: .8rem; }
.species-empty h3 { margin: 0 0 .5rem; }
.species-empty p { color: var(--muted); margin: 0 0 1.4rem; line-height: 1.6; }
.topbar-right { display: inline-flex; align-items: center; gap: .5rem; }
.account-chip svg { color: var(--moss); }

/* ============================================================
   APP SHELL
   ============================================================ */
.app { min-height: 100vh; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 1rem;
  padding: .7rem clamp(1rem, 4vw, 2rem);
  background: rgba(247,244,236,.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.tabs { display: flex; gap: .2rem; margin: 0 auto; background: var(--line-2); padding: .25rem; border-radius: 999px; }
.tab {
  border: none; background: transparent; cursor: pointer;
  font-family: var(--font-body); font-weight: 600; font-size: .9rem; color: var(--muted);
  padding: .5rem 1.05rem; border-radius: 999px; transition: color .2s, background-color .2s;
}
.tab:hover { color: var(--forest); }
.tab.is-active { background: var(--surface); color: var(--forest); box-shadow: var(--shadow-sm); }
.tab[data-tab="report"].has-report::after { content: ""; display: inline-block; width: 6px; height: 6px; background: var(--gold); border-radius: 50%; margin-left: .4rem; vertical-align: middle; }

.location-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: .45rem .8rem; cursor: pointer; color: var(--ink-soft);
  font-family: var(--font-body); font-weight: 600; font-size: .82rem;
  max-width: 220px; transition: border-color .2s, color .2s;
}
.location-chip:hover { border-color: var(--moss); color: var(--forest); }
.location-chip svg { color: var(--moss); flex: none; }
.location-chip span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.content { flex: 1; width: 100%; max-width: var(--maxw); margin: 0 auto; padding: clamp(1.4rem, 4vw, 2.6rem) clamp(1rem, 4vw, 2rem); }
.panel { animation: fade .35s ease both; }
.panel[hidden] { display: none; }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } }
.panel-head { margin-bottom: 1.4rem; }
.panel-title { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 .3rem; }
.panel-sub { color: var(--muted); margin: 0; font-size: 1.02rem; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }

/* ============================================================
   CALENDAR
   ============================================================ */
.cal-highlights { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.4rem; }
.hl-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.15rem 1.25rem; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; }
.hl-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--moss); }
.hl-card--gold::before { background: var(--gold); }
.hl-card--sky::before { background: var(--sky); }
.hl-eyebrow { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; margin: 0 0 .35rem; }
.hl-value { font-family: var(--font-head); font-size: 1.28rem; font-weight: 600; color: var(--ink); margin: 0; line-height: 1.25; }
.hl-note { font-size: .85rem; color: var(--ink-soft); margin: .4rem 0 0; }
.chip-row { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .55rem; }
.mini-chip { font-size: .74rem; font-weight: 600; background: var(--line-2); color: var(--forest); border-radius: 999px; padding: .2rem .6rem; }

.cal-card { padding: 1.25rem clamp(1rem, 3vw, 1.6rem) 1.4rem; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem; font-size: .8rem; color: var(--ink-soft); }
.cal-legend .lg { display: inline-flex; align-items: center; gap: .4rem; }
.cal-legend .lg--muted { color: var(--muted); }
.dot { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.dot--prime { background: var(--prime); }
.dot--good { background: var(--good); }
.dot--fair { background: var(--fair); }
.dot--poor { background: var(--poor); }
.dot--forecast { background: repeating-linear-gradient(45deg, var(--sky), var(--sky) 2px, #fff 2px, #fff 4px); border: 1px solid var(--sky); }

.cal-grid-head { display: grid; grid-template-columns: repeat(7, 1fr); gap: .4rem; margin-bottom: .4rem; }
.cal-grid-head span { text-align: center; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .4rem; }
.cal-day {
  position: relative; aspect-ratio: 1 / 1; min-height: 44px;
  border-radius: var(--radius-sm); border: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  cursor: default; transition: transform .12s ease, box-shadow .12s ease;
  background: #fff;
}
.cal-day[data-rating] { cursor: help; }
.cal-day:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); z-index: 2; }
.cal-day .cd-num { font-weight: 600; font-size: .95rem; color: var(--ink); }
.cal-day .cd-mon { font-size: .62rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.cal-day.empty { border: none; background: transparent; cursor: default; }
.cal-day.empty:hover { transform: none; box-shadow: none; }
.cal-day[data-rating="prime"] { background: #e8f6ea; border-color: #bfe3c6; }
.cal-day[data-rating="prime"] .cd-num { color: var(--prime); }
.cal-day[data-rating="good"]  { background: #eef6e6; border-color: #d3e6bf; }
.cal-day[data-rating="fair"]  { background: #fbf3e2; border-color: #eeddb6; }
.cal-day[data-rating="poor"]  { background: #f7ede6; border-color: #e8d3c3; }
.cal-day.is-today { outline: 2px solid var(--forest); outline-offset: 1px; }
.cal-day .cd-fc { position: absolute; top: 5px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--sky); }
.cal-day .cd-tip {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px);
  background: var(--ink); color: #fff; padding: .5rem .7rem; border-radius: 8px;
  font-size: .76rem; line-height: 1.4; width: max-content; max-width: 200px; text-align: center;
  opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; z-index: 5; box-shadow: var(--shadow-md);
}
.cal-day .cd-tip::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--ink); }
.cal-day:hover .cd-tip { opacity: 1; transform: translateX(-50%) translateY(0); }
.cal-day .cd-tip b { color: var(--gold); }
.cal-day.is-selected { outline: 2px solid var(--gold-dk); outline-offset: 1px; }
.dot--recorded { background: var(--forest); border-radius: 50%; }
.cal-day--past { opacity: .82; }
.cal-day--recorded { box-shadow: inset 0 0 0 2px var(--forest); }
.cal-day .cd-rec { position: absolute; top: 4px; left: 5px; color: var(--forest); display: inline-flex; }
.cd-recordings { background: #eef6ef; border: 1px solid #cfe3d2; border-radius: var(--radius-sm); padding: .8rem 1rem; margin-bottom: 1rem; }
.cd-rec-head { font-size: .82rem; font-weight: 700; color: var(--forest); margin: 0 0 .5rem; }
.cd-rec-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: .5rem .75rem; margin-bottom: .4rem; cursor: pointer; font-family: var(--font-body); transition: border-color .15s, background-color .15s; }
.cd-rec-item:last-child { margin-bottom: 0; }
.cd-rec-item:hover { border-color: var(--moss); background: var(--paper-2); }
.cd-rec-species { font-weight: 600; color: var(--ink); font-size: .9rem; }
.cd-rec-open { font-size: .8rem; font-weight: 600; color: var(--forest); }
.cal-detail { margin-top: 1rem; padding: 1.3rem 1.4rem; animation: fade .25s ease; }
.cd-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.cd-detail-date { font-family: var(--font-head); font-size: 1.2rem; font-weight: 600; color: var(--ink); margin: 0 0 .2rem; }
.cd-detail-verdict { font-size: .92rem; color: var(--ink-soft); margin: 0; max-width: 52ch; }
.cd-rating-pill { flex: none; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; border-radius: 999px; padding: .25rem .7rem; }
.cd-pill-prime { color: #fff; background: var(--prime); }
.cd-pill-good { color: #fff; background: var(--good); }
.cd-pill-fair { color: var(--ink); background: var(--fair); }
.cd-pill-poor { color: #fff; background: var(--poor); }
.cd-factors { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .5rem .9rem; }
.cd-factor { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: .5rem; padding: .45rem 0; border-bottom: 1px solid var(--line-2); font-size: .86rem; }
.cd-f-icon { display: inline-flex; }
.cd-f-good .cd-f-icon { color: var(--prime); }
.cd-f-warn .cd-f-icon { color: var(--gold-dk); }
.cd-f-bad .cd-f-icon { color: var(--clay); }
.cd-f-label { font-weight: 700; color: var(--muted); font-size: .74rem; text-transform: uppercase; letter-spacing: .03em; }
.cd-f-text { color: var(--ink-soft); }
.cd-detail-dawn { font-size: .86rem; color: var(--ink-soft); margin: 1rem 0 0; padding-top: .9rem; border-top: 1px solid var(--line-2); }

.cal-hint { color: var(--muted); font-size: .85rem; margin-top: 1rem; max-width: 70ch; }

/* ============================================================
   RECORD / UPLOAD
   ============================================================ */
.rec-date { max-width: 720px; padding: 1.1rem 1.3rem; margin-bottom: 1.1rem; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.2rem; }
.rec-date-main { display: flex; align-items: center; gap: .8rem; }
.rec-date .field-label { margin: 0; }
.rec-date-input { font-family: var(--font-body); font-size: .95rem; color: var(--ink); border: 1.5px solid var(--line); border-radius: 999px; padding: .45rem .9rem; background: #fff; cursor: pointer; transition: border-color .2s, box-shadow .2s; }
.rec-date-input:focus { outline: none; border-color: var(--moss); box-shadow: 0 0 0 4px rgba(91,154,107,.15); }
.rec-date-hint { flex: 1 1 260px; font-size: .82rem; color: var(--muted); margin: 0; min-width: 220px; }

.upload-card { padding: clamp(1.4rem, 4vw, 2.2rem); max-width: 720px; }
.dropzone {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: .6rem;
  border: 2px dashed var(--sage); border-radius: var(--radius);
  padding: 2.6rem 1.5rem; background: var(--paper-2);
  cursor: pointer; transition: border-color .2s, background-color .2s, transform .1s;
}
.dropzone:hover, .dropzone.is-drag { border-color: var(--moss); background: #f0f6ef; }
.dropzone.is-drag { transform: scale(1.005); }
.dz-icon { color: var(--moss); }
.dz-title { font-family: var(--font-head); font-size: 1.2rem; color: var(--ink); }
.dz-title em { color: var(--forest); font-style: normal; text-decoration: underline; }
.dz-sub { font-size: .85rem; color: var(--muted); }

.file-preview { margin-top: 1.2rem; padding: 1rem 1.1rem; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.fp-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .6rem; }
.fp-name { font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#fp-audio { width: 100%; height: 40px; }
#analyze-btn { margin-top: 1.4rem; }
.upload-note { font-size: .82rem; color: var(--muted); text-align: center; margin: .9rem 0 0; }

/* ---- Sample recordings ---- */
.samples-block { max-width: 720px; margin: 2rem 0 0; }
.samples-divider { display: flex; align-items: center; text-align: center; gap: 1rem; color: var(--muted); font-size: .82rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.samples-divider::before, .samples-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.samples-lede { text-align: center; color: var(--ink-soft); font-size: .92rem; margin: .8rem auto 1.2rem; max-width: 52ch; }
.samples-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .9rem; }
.sample-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1rem 1.1rem; box-shadow: var(--shadow-sm); cursor: pointer; transition: transform .15s, box-shadow .15s, border-color .15s; display: flex; flex-direction: column; gap: .5rem; }
.sample-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--sage); }
.sample-card:focus-visible { outline: 2px solid var(--moss); outline-offset: 2px; }
.sc-top { display: flex; align-items: center; gap: .6rem; }
.sc-play { flex: none; width: 34px; height: 34px; border-radius: 50%; border: none; background: var(--forest); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color .2s; }
.sc-play:hover { background: var(--forest-dk); }
.sc-play.is-playing { background: var(--gold); }
.sc-name { font-family: var(--font-head); font-size: 1.02rem; font-weight: 600; color: var(--ink); line-height: 1.2; }
.sc-sci { font-style: italic; color: var(--muted); font-size: .78rem; }
.sc-photo { position: relative; margin: -0.05rem -0.05rem .2rem; border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 16 / 9; background: var(--line-2); }
.sc-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.sample-card:hover .sc-photo img { transform: scale(1.05); }
.sc-play--over { position: absolute; bottom: .5rem; left: .5rem; box-shadow: var(--shadow-md); }
.sc-photo + .sc-top { align-items: center; }
.sc-habitat { align-self: flex-start; font-size: .7rem; font-weight: 600; color: var(--forest); background: var(--line-2); border-radius: 999px; padding: .15rem .55rem; }
.sc-blurb { font-size: .84rem; color: var(--ink-soft); margin: 0; }
.sc-cta { font-size: .8rem; font-weight: 600; color: var(--forest); display: inline-flex; align-items: center; gap: .3rem; margin-top: .1rem; }

/* ============================================================
   REPORT
   ============================================================ */
.empty-state { text-align: center; color: var(--muted); padding: 4rem 1rem; }
.empty-icon { color: var(--sage); display: inline-flex; margin-bottom: 1rem; }
.report-hero { display: flex; flex-wrap: wrap; gap: 1.4rem; align-items: stretch; margin-bottom: 1.4rem; }
.report-hero .card { flex: 1 1 320px; padding: 1.3rem 1.4rem; }
.rh-photo { margin: -1.3rem -1.4rem 1rem; aspect-ratio: 16 / 9; overflow: hidden; background: var(--line-2); border-radius: var(--radius) var(--radius) 0 0; }
.rh-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rh-headline .rh-eyebrow { font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; margin: 0 0 .5rem; }
.rh-species { font-family: var(--font-head); font-size: 1.9rem; margin: 0; color: var(--ink); }
.rh-sci { font-style: italic; color: var(--muted); font-size: .95rem; margin: .15rem 0 1rem; }
.conf-bar { height: 9px; background: var(--line-2); border-radius: 999px; overflow: hidden; }
.conf-bar > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--moss), var(--forest)); }
.conf-label { display: flex; justify-content: space-between; font-size: .82rem; color: var(--ink-soft); margin-top: .4rem; }
.spec-thumb { border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--line); background: #1c1420; }
.spec-thumb img { display: block; width: 100%; height: auto; }
.spec-cap { font-size: .78rem; color: var(--muted); margin: .5rem 0 0; text-align: center; }

.detect-list { display: flex; flex-direction: column; gap: .55rem; margin: .3rem 0 0; }
.detect-row { display: grid; grid-template-columns: 1fr auto; gap: .3rem .8rem; align-items: center; padding: .6rem .5rem; margin: 0 -.5rem; border-bottom: 1px solid var(--line-2); border-radius: 8px; cursor: pointer; transition: background-color .15s; }
.detect-row:hover { background: var(--paper-2); }
.detect-row:focus-visible { outline: 2px solid var(--moss); outline-offset: -2px; }
.detect-row:last-child { border-bottom: none; }
.detect-name { font-weight: 600; color: var(--ink); }
.detect-name .badge { margin-left: .5rem; }
.detect-pct { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--forest); }
.detect-track { grid-column: 1 / -1; height: 6px; background: var(--line-2); border-radius: 999px; overflow: hidden; }
.detect-track > i { display: block; height: 100%; background: var(--moss); border-radius: 999px; }
.detect-row.is-top .detect-track > i { background: var(--forest); }
.detect-row.dim { opacity: .55; }
.detect-wins { font-size: .68rem; font-weight: 700; color: var(--moss); background: var(--line-2); border-radius: 999px; padding: .05rem .4rem; margin-left: .3rem; vertical-align: middle; }

/* Two-model + acoustic-environment panels */
.report-secondary { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.4rem; margin-bottom: 1.4rem; }
.two-model, .acoustic { padding: 1.2rem 1.35rem; }
.tm-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; }
.tm-title { font-family: var(--font-head); font-size: 1.05rem; font-weight: 600; color: var(--ink); }
.tm-verdict { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--forest); background: #e7f0e9; border-radius: 999px; padding: .2rem .6rem; }
.tm-verdict--x { color: var(--clay); background: #f7e9df; }
.tm-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: .8rem; align-items: center; }
.tm-model { display: flex; flex-direction: column; gap: .2rem; }
.tm-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.tm-species { font-family: var(--font-head); font-size: 1.02rem; font-weight: 600; color: var(--ink); line-height: 1.2; }
.tm-species--x { color: var(--clay); }
.tm-bar { height: 7px; background: var(--line-2); border-radius: 999px; overflow: hidden; margin-top: .2rem; }
.tm-bar > i { display: block; height: 100%; background: var(--moss); border-radius: 999px; }
.tm-disagree .tm-grid .tm-model:last-child .tm-bar > i { background: var(--clay); }
.tm-conf { font-size: .78rem; font-weight: 700; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.tm-vs { font-size: .8rem; font-weight: 700; color: var(--muted); text-align: center; }
.tm-note { font-size: .84rem; color: var(--ink-soft); margin: .9rem 0 0; line-height: 1.5; }
.two-model.tm-disagree { border-left: 4px solid var(--clay); }
.two-model.tm-agree { border-left: 4px solid var(--moss); }

.acoustic { border-left: 4px solid var(--sky); }
.ae-model { font-size: .72rem; font-weight: 600; color: var(--muted); }
.ae-level { display: inline-block; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; border-radius: 999px; padding: .2rem .7rem; margin-bottom: .7rem; }
.ae-low { color: var(--prime); background: #e8f6ea; }
.ae-moderate { color: var(--gold-dk); background: #f7ecd4; }
.ae-high { color: var(--clay); background: #f7e9df; }
.ae-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.ae-chip { font-size: .78rem; font-weight: 600; border-radius: 999px; padding: .25rem .65rem; background: var(--line-2); color: var(--ink-soft); }
.ae-chip b { color: var(--ink); }
.ae-chip.ae-anthro { background: #f7e9df; color: var(--clay); }
.ae-chip.ae-weather { background: #eef4f8; color: var(--sky); }
.ae-chip.ae-natural { background: #eaf3ec; color: var(--forest); }
.ae-empty { font-size: .85rem; color: var(--muted); margin: 0; }

.badge { display: inline-flex; align-items: center; gap: .3rem; font-size: .7rem; font-weight: 700; padding: .12rem .5rem; border-radius: 999px; letter-spacing: .02em; }
.badge--ebird { background: #e7f0e9; color: var(--forest); }
.badge--concern { background: #f7e9df; color: var(--clay); }
.badge--absent { background: #f0eee6; color: var(--muted); }

/* Conservation insights panel */
.ins-panel { margin-bottom: 1.4rem; }
.ins-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .7rem; flex-wrap: wrap; }
.ins-head h3 { font-size: 1.05rem; margin: 0; color: var(--ink); }
.ins-count { font-size: .78rem; color: var(--muted); font-weight: 600; }
.ins-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: .8rem; }
.ins-card { display: flex; gap: .75rem; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--sage); border-radius: var(--radius-sm); padding: .9rem 1rem; box-shadow: var(--shadow-sm); }
.ins-card.ins-alert { border-left-color: var(--clay); background: linear-gradient(135deg, #fbf1ea 0%, #fff 60%); }
.ins-card.ins-lights { border-left-color: var(--gold-dk); background: linear-gradient(135deg, #fbf3e0 0%, #fff 60%); }
.ins-card.ins-notable { border-left-color: var(--moss); }
.ins-card.ins-info { border-left-color: var(--sky); }
.ins-icon { flex: none; color: var(--forest); margin-top: .1rem; }
.ins-alert .ins-icon { color: var(--clay); }
.ins-lights .ins-icon { color: var(--gold-dk); }
.ins-info .ins-icon { color: var(--sky); }
.ins-body { min-width: 0; }
.ins-title { font-family: var(--font-head); font-weight: 600; font-size: .98rem; color: var(--ink); margin: 0 0 .2rem; line-height: 1.25; }
.ins-detail { font-size: .84rem; color: var(--ink-soft); margin: 0 0 .3rem; }
.ins-action { font-size: .82rem; font-weight: 600; color: var(--forest); margin: 0 0 .4rem; }
.ins-lights .ins-action { color: var(--gold-dk); }
.ins-srcs { display: flex; flex-wrap: wrap; gap: .3rem; }
.ins-src { font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); background: var(--line-2); border-radius: 999px; padding: .12rem .5rem; }

.report-body { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 1.6rem clamp(1.2rem, 3vw, 2rem); }
.report-body h2 { font-size: 1.15rem; margin: 1.6rem 0 .5rem; padding-top: 1.2rem; border-top: 1px solid var(--line-2); color: var(--forest); }
.report-body h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.report-body p { margin: .5rem 0; color: var(--ink-soft); }
.report-body ul { margin: .4rem 0; padding-left: 1.2rem; }
.report-body li { margin: .3rem 0; color: var(--ink-soft); }
.report-body strong { color: var(--ink); }
.report-byline { font-size: .82rem; color: var(--muted); margin-top: 1.4rem; display: flex; align-items: center; gap: .5rem; }

.provenance { margin-top: 1.4rem; }
.provenance h3 { font-family: var(--font-body); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0 0 .6rem; }
.prov-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.prov { display: inline-flex; align-items: center; gap: .45rem; font-size: .8rem; font-weight: 600; padding: .35rem .7rem; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink-soft); }
.prov i { width: 8px; height: 8px; border-radius: 50%; }
.prov.live i { background: var(--prime); }
.prov.off i { background: #c9c3b3; }
.prov.sim i { background: var(--gold); }

/* ============================================================
   SPECIES
   ============================================================ */
.species-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.1rem; }
.sp-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem 1.25rem; box-shadow: var(--shadow-sm); cursor: pointer; transition: transform .15s, box-shadow .15s, border-color .15s; display: flex; flex-direction: column; gap: .5rem; }
.sp-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--sage); }
.sp-photo { margin: -1.2rem -1.25rem .3rem; border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; aspect-ratio: 3 / 2; background: var(--line-2); }
.sp-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.sp-card:hover .sp-photo img { transform: scale(1.05); }
.sp-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.sp-name { font-family: var(--font-head); font-size: 1.2rem; font-weight: 600; margin: 0; }
.sp-sci { font-style: italic; color: var(--muted); font-size: .85rem; margin: 0; }
.sp-blurb { font-size: .88rem; color: var(--ink-soft); margin: .2rem 0 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sp-meta { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .4rem; }
.sp-more { color: var(--forest); font-weight: 600; font-size: .84rem; margin-top: .2rem; display: inline-flex; align-items: center; gap: .3rem; }

/* ============================================================
   PAST REPORTS
   ============================================================ */
.history-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.history-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.25rem; box-shadow: var(--shadow-sm); cursor: pointer; transition: transform .15s, box-shadow .15s, border-color .15s; }
.history-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--sage); }
.history-card:focus-visible { outline: 2px solid var(--moss); outline-offset: 2px; }
.hc-body { min-width: 0; }
.hc-species { font-family: var(--font-head); font-size: 1.15rem; font-weight: 600; color: var(--ink); margin: 0 0 .15rem; }
.hc-meta { font-size: .82rem; color: var(--muted); margin: 0 0 .5rem; }
.hc-open { flex: none; display: inline-flex; align-items: center; gap: .3rem; font-size: .82rem; font-weight: 600; color: var(--forest); }
.history-card--example { border-color: #ecdcb2; background: linear-gradient(135deg, #fbf3e0 0%, #fff 65%); }
.hc-example-badge { display: inline-block; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--gold-dk); background: #f7ecd4; border-radius: 999px; padding: .1rem .5rem; margin-left: .4rem; vertical-align: middle; }

/* ============================================================
   MODAL
   ============================================================ */
.modal { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: 1.25rem; }
.modal[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(30,43,34,.42); backdrop-filter: blur(2px); animation: fade .25s ease; }
.modal-card { position: relative; z-index: 1; width: min(600px, 100%); max-height: 88vh; overflow-y: auto; background: var(--surface); border-radius: 20px; box-shadow: var(--shadow-lg); padding: 2rem 2rem 1.8rem; animation: rise .3s cubic-bezier(.2,.7,.3,1) both; }
.modal-close { position: absolute; top: 1rem; right: 1rem; border: none; background: var(--line-2); color: var(--ink-soft); width: 34px; height: 34px; border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background-color .2s; }
.modal-close:hover { background: var(--line); }
.modal-photo { margin: -2rem -2rem 1.1rem; aspect-ratio: 16 / 9; overflow: hidden; background: var(--line-2); border-radius: 20px 20px 0 0; }
.modal-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.modal-name { font-size: 1.7rem; margin: 0; }
.modal-sci { font-style: italic; color: var(--muted); margin: .1rem 0 1rem; }
.modal-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.1rem; }
.tag { font-size: .74rem; font-weight: 600; background: var(--line-2); color: var(--forest); border-radius: 999px; padding: .25rem .7rem; }
.tag--concern { background: #f7e9df; color: var(--clay); }
.modal-fact { display: grid; grid-template-columns: 130px 1fr; gap: .5rem 1rem; padding: .7rem 0; border-top: 1px solid var(--line-2); font-size: .92rem; }
.modal-fact dt { font-weight: 700; color: var(--muted); font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; }
.modal-fact dd { margin: 0; color: var(--ink-soft); }
.modal-cta { margin-top: 1.3rem; }

/* ============================================================
   LOADING + FOOTER
   ============================================================ */
.loading { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; background: rgba(247,244,236,.82); backdrop-filter: blur(3px); }
.loading[hidden] { display: none; }
.loading-card { text-align: center; }
.loading-card p { font-family: var(--font-head); font-size: 1.15rem; color: var(--forest); margin: 1.2rem 0 .3rem; }
.loading-sub { font-family: var(--font-body) !important; font-size: .88rem !important; color: var(--muted) !important; margin: 0 !important; }
.wave { display: inline-flex; align-items: flex-end; gap: 5px; height: 44px; }
.wave span { width: 6px; background: var(--moss); border-radius: 3px; animation: wave 1s ease-in-out infinite; }
.wave span:nth-child(1) { height: 40%; animation-delay: 0s; }
.wave span:nth-child(2) { height: 75%; animation-delay: .12s; background: var(--forest); }
.wave span:nth-child(3) { height: 100%; animation-delay: .24s; background: var(--gold); }
.wave span:nth-child(4) { height: 60%; animation-delay: .36s; background: var(--forest); }
.wave span:nth-child(5) { height: 30%; animation-delay: .48s; }
@keyframes wave { 0%, 100% { transform: scaleY(.5); } 50% { transform: scaleY(1); } }

.appfoot { max-width: var(--maxw); width: 100%; margin: 0 auto; padding: 1.4rem clamp(1rem, 4vw, 2rem); display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; color: var(--muted); font-size: .8rem; border-top: 1px solid var(--line); }
.foot-status { display: inline-flex; align-items: center; gap: .4rem; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 760px) {
  .topbar { flex-wrap: wrap; }
  .tabs { order: 3; width: 100%; margin: .2rem 0 0; justify-content: space-between; }
  .tab { flex: 1; padding: .5rem .4rem; }
  .location-chip { margin-left: auto; }
  .report-hero .card { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}