/* ============================================================
   SAHYADRI DEVRAI — App Stylesheet
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* paper grain texture on page */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  opacity: .35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
}

:lang(mr), .mr { font-family: var(--font-mr); }
.lang-mr body, body.lang-mr { font-family: var(--font-mr); }

h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 500; line-height: 1.08; color: var(--text-primary); font-optical-sizing: auto; letter-spacing: -.01em; }
body.lang-mr h1, body.lang-mr h2, body.lang-mr h3, body.lang-mr h4 { font-family: var(--font-mr); font-weight: 600; letter-spacing: 0; }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--sp-5); position: relative; z-index: 1; }
.stack > * + * { margin-top: var(--sp-4); }
.muted { color: var(--text-secondary); }
.center { text-align: center; }
.eyebrow {
  font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; color: var(--saffron-600);
}
body.lang-mr .eyebrow { letter-spacing: .08em; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: .7rem 1.4rem; border-radius: var(--r-pill);
  font-weight: 600; font-size: var(--fs-sm); cursor: pointer;
  border: 1px solid transparent; transition: all .25s var(--ease);
  text-decoration: none; line-height: 1;
}
.btn-primary { background: var(--forest-700); color: #fff; box-shadow: var(--sh-sm); }
.btn-primary:hover { background: var(--forest-800); transform: translateY(-1px); box-shadow: var(--sh-md); }
.btn-accent { background: var(--saffron-600); color: #fff; }
.btn-accent:hover { background: var(--saffron-700); transform: translateY(-1px); }
.btn-ghost { background: transparent; border-color: var(--border-strong); color: var(--text-primary); }
.btn-ghost:hover { border-color: var(--forest-700); color: var(--forest-700); }
.btn-light { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.25); backdrop-filter: blur(6px); }
.btn-light:hover { background: rgba(255,255,255,.2); }
.btn-sm { padding: .45rem 1rem; font-size: var(--fs-xs); }
.btn-block { width: 100%; justify-content: center; }
.btn:disabled { opacity: .55; cursor: not-allowed; }

/* ---------- Forms ---------- */
.field { display: block; margin-bottom: var(--sp-4); }
.field > label { display: block; font-size: var(--fs-sm); font-weight: 600; margin-bottom: var(--sp-2); color: var(--ink-700); }
.field .hint { font-size: var(--fs-xs); color: var(--text-secondary); margin-top: var(--sp-1); }
.input, .select, .textarea {
  width: 100%; padding: .7rem .9rem; background: var(--bg-surface);
  border: 1px solid var(--border); border-radius: var(--r-md);
  transition: border-color .2s, box-shadow .2s; font-size: var(--fs-base);
}
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--saffron-600); box-shadow: var(--sh-glow); }
.textarea { resize: vertical; min-height: 96px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
@media (max-width: 640px){ .grid-2 { grid-template-columns: 1fr; } }

/* ---------- Cards ---------- */
.card {
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-6); box-shadow: var(--sh-sm);
}
.card-pad-sm { padding: var(--sp-5); }

/* ---------- Badges ---------- */
.badge { display: inline-flex; align-items: center; gap: .35em; padding: .25rem .65rem; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .02em; }
.badge-green { background: var(--forest-100); color: var(--forest-800); }
.badge-saffron { background: #FBE9D2; color: var(--saffron-700); }
.badge-gold { background: #F4ECD2; color: var(--gold-600); }
.badge-gray { background: var(--cream-200); color: var(--ink-700); }
.badge-danger { background: #F4DADA; color: var(--danger); }

/* ---------- Alerts ---------- */
.alert { padding: var(--sp-4); border-radius: var(--r-md); font-size: var(--fs-sm); border: 1px solid; margin-bottom: var(--sp-4); }
.alert-error { background: #F9E7E7; border-color: #E6BcBc; color: #8A2C2C; }
.alert-ok { background: var(--forest-100); border-color: var(--forest-300); color: var(--forest-800); }
.alert-info { background: #E3EEF1; border-color: #B6D3DA; color: #245863; }

/* ============================================================
   PUBLIC SITE
   ============================================================ */

/* top nav */
.nav {
  position: sticky; top: 0; z-index: 50; height: var(--header-h);
  display: flex; align-items: center;
  backdrop-filter: blur(10px); background: rgba(251,248,240,.82);
  border-bottom: 1px solid var(--border);
}
.nav.nav-over { background: transparent; border-color: transparent; }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.brand { display: flex; align-items: center; gap: var(--sp-3); }
.brand-mark { width: 38px; height: 38px; flex: none; }
.brand-name { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-md); line-height: 1; }
.brand-sub { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-secondary); }
.nav-links { display: flex; align-items: center; gap: var(--sp-5); }
.nav-links a { font-size: var(--fs-sm); font-weight: 500; color: var(--text-primary); transition: color .2s; }
.nav-links a:hover { color: var(--saffron-600); }
.nav.nav-over .brand-name, .nav.nav-over .nav-links a { color: #fff; }
.nav.nav-over .brand-sub { color: rgba(255,255,255,.7); }
.lang-toggle { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .05em; border: 1px solid var(--border-strong); border-radius: var(--r-pill); padding: .3rem .7rem; cursor: pointer; background: transparent; }
.nav.nav-over .lang-toggle { color: #fff; border-color: rgba(255,255,255,.4); }
@media (max-width:820px){ .nav-links a:not(.btn){ display:none; } }

/* hero */
.hero {
  position: relative; min-height: 100vh; display: flex; align-items: center;
  color: #fff; overflow: hidden; margin-top: calc(-1 * var(--header-h));
  padding-top: var(--header-h);
}
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg::after {
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 80% at 20% 10%, rgba(14,32,24,.25), transparent 60%),
    linear-gradient(180deg, rgba(14,32,24,.55) 0%, rgba(14,32,24,.35) 35%, rgba(14,32,24,.82) 100%);
}
.hero-bg img { width:100%; height:100%; object-fit: cover; }
.hero-grad-fallback { position:absolute; inset:0;
  background:
    radial-gradient(90% 70% at 70% 20%, #2D5A40 0%, #14342B 45%, #0E2018 100%);
}
.hero .wrap { position: relative; z-index: 2; }
.hero-inner { max-width: 760px; }
.hero h1 { font-size: clamp(2.6rem, 7vw, var(--fs-5xl)); font-weight: 400; color:#fff; letter-spacing: -.02em; }
.hero h1 em { font-style: italic; color: var(--gold-300); }
.hero p.lede { font-size: var(--fs-lg); color: rgba(255,255,255,.85); max-width: 56ch; margin-top: var(--sp-5); }
.hero-cta { display:flex; gap: var(--sp-4); margin-top: var(--sp-6); flex-wrap: wrap; }
.hero-stats { display:flex; gap: var(--sp-7); margin-top: var(--sp-8); flex-wrap: wrap; }
.hero-stat .n { font-family: var(--font-display); font-size: var(--fs-2xl); color: var(--gold-300); line-height:1; }
.hero-stat .l { font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.7); margin-top: var(--sp-2); }
.scroll-cue { position:absolute; bottom: var(--sp-5); left:50%; transform:translateX(-50%); z-index:2; color:rgba(255,255,255,.7); font-size:var(--fs-xs); letter-spacing:.2em; text-transform:uppercase; animation: bob 2.4s var(--ease) infinite; }
@keyframes bob { 0%,100%{ transform:translate(-50%,0);} 50%{ transform:translate(-50%,8px);} }

/* reveal */
.reveal { opacity:0; transform: translateY(24px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.reveal.in { opacity:1; transform:none; }

/* sections */
.section { padding-block: var(--sp-9); position: relative; }
.section-head { max-width: 640px; margin-bottom: var(--sp-7); }
.section-head h2 { font-size: clamp(1.9rem, 4vw, var(--fs-3xl)); margin-top: var(--sp-3); }
.section-head p { color: var(--text-secondary); font-size: var(--fs-md); margin-top: var(--sp-4); }
.divider-leaf { display:flex; align-items:center; gap:var(--sp-3); color:var(--gold-500); }
.divider-leaf::before, .divider-leaf::after { content:""; height:1px; flex:1; background:linear-gradient(90deg,transparent,var(--border-strong),transparent); }

/* map block */
.map-section { background: var(--forest-950); color: var(--text-on-dark); }
.map-section .eyebrow { color: var(--saffron-500); }
.map-section h2 { color: #fff; }
.map-section p { color: var(--text-muted-dark); }
#map { width: 100%; height: 600px; border-radius: var(--r-lg); border: 1px solid rgba(255,255,255,.12); box-shadow: var(--sh-lg); overflow: hidden; background:#0E2018; }
.map-legend { display:flex; gap:var(--sp-5); flex-wrap:wrap; margin-top:var(--sp-4); font-size:var(--fs-sm); color: var(--text-muted-dark); }
.map-legend .dot { width:12px; height:12px; border-radius:50%; display:inline-block; margin-right:6px; vertical-align:middle; }

/* feature grid */
.feat-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-5); }
@media (max-width:900px){ .feat-grid{ grid-template-columns:1fr; } }
.feat { padding: var(--sp-6); border:1px solid var(--border); border-radius: var(--r-lg); background: var(--bg-surface); transition: transform .3s var(--ease), box-shadow .3s; }
.feat:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }
.feat .ico { width:46px; height:46px; color: var(--forest-700); margin-bottom: var(--sp-4); }
.feat h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-3); }
.feat p { color: var(--text-secondary); font-size: var(--fs-sm); }

/* footer */
.foot { background: var(--forest-950); color: var(--text-muted-dark); padding-block: var(--sp-8) var(--sp-6); margin-top: var(--sp-9); }
.foot a { color: var(--cream-200); }
.foot a:hover { color: var(--saffron-500); }
.foot-grid { display:grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--sp-6); }
@media (max-width:760px){ .foot-grid{ grid-template-columns:1fr; gap:var(--sp-5);} }
.foot h4 { color:#fff; font-family:var(--font-body); font-size:var(--fs-sm); letter-spacing:.1em; text-transform:uppercase; margin-bottom:var(--sp-4); }
.foot-bottom { border-top:1px solid rgba(255,255,255,.1); margin-top:var(--sp-7); padding-top:var(--sp-5); font-size:var(--fs-xs); display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--sp-3); }

/* ============================================================
   AUTH (login / setup)
   ============================================================ */
.auth-page { min-height:100vh; display:grid; grid-template-columns: 1.1fr .9fr; }
@media (max-width:900px){ .auth-page{ grid-template-columns:1fr; } }
.auth-aside { position:relative; background: var(--forest-900); color:#fff; padding: var(--sp-8); display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; }
.auth-aside::before { content:""; position:absolute; inset:0; opacity:.5;
  background: radial-gradient(80% 60% at 80% 10%, rgba(217,122,30,.22), transparent 60%),
              radial-gradient(70% 50% at 10% 90%, rgba(201,162,75,.18), transparent 55%); }
.auth-aside > * { position:relative; z-index:1; }
.auth-aside h2 { color:#fff; font-size: var(--fs-2xl); font-weight:400; }
.auth-aside h2 em { font-style:italic; color:var(--gold-300); }
.auth-aside .quote { font-family:var(--font-display); font-style:italic; font-size:var(--fs-lg); color: rgba(255,255,255,.85); line-height:1.5; }
.auth-main { display:flex; align-items:center; justify-content:center; padding: var(--sp-7); }
.auth-card { width:100%; max-width: 420px; }
.auth-card h1 { font-size: var(--fs-2xl); font-weight:500; }
.auth-logo { display:flex; align-items:center; gap:var(--sp-3); margin-bottom:var(--sp-6); }

@media (max-width:900px){ .auth-aside{ display:none; } }

/* setup steps */
.steps { display:flex; gap:var(--sp-2); margin-bottom: var(--sp-6); }
.step-dot { flex:1; height:4px; border-radius:var(--r-pill); background: var(--cream-300); }
.step-dot.active { background: var(--saffron-600); }
.step-dot.done { background: var(--forest-700); }

/* ============================================================
   APP SHELL (admin / expert / surveyor dashboards)
   ============================================================ */
.app { display:grid; grid-template-columns: 260px 1fr; min-height:100vh; }
.scrim { display:none; }
.side {
  background: var(--forest-900); color: var(--text-on-dark);
  padding: var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-5);
  position: sticky; top:0; height:100vh; overflow-y:auto;
}
.side-brand { display:flex; align-items:center; gap:var(--sp-3); padding-bottom:var(--sp-5); border-bottom:1px solid rgba(255,255,255,.1); }
.side-brand .brand-name { color:#fff; font-size:var(--fs-base); }
.side-role { font-size:var(--fs-xs); letter-spacing:.14em; text-transform:uppercase; color:var(--gold-300); }
.side-nav { display:flex; flex-direction:column; gap:2px; }
.side-nav a { display:flex; align-items:center; gap:var(--sp-3); padding:.65rem .8rem; border-radius:var(--r-md); color:var(--cream-200); font-size:var(--fs-sm); font-weight:500; transition: background .2s, color .2s; }
.side-nav a:hover { background: rgba(255,255,255,.07); color:#fff; }
.side-nav a.active { background: var(--saffron-600); color:#fff; }
.side-nav a svg { width:18px; height:18px; flex:none; }
.side-foot { margin-top:auto; font-size:var(--fs-xs); color:var(--text-muted-dark); line-height:1.9; }
.side-foot a { color: var(--cream-200); display:inline-flex; align-items:center; gap:.4rem; }
.side-foot svg { width:15px; height:15px; }
.btn svg { width:16px; height:16px; }
.menu-btn svg { width:20px; height:20px; }
.feat .ico svg, .stat-card .ico svg { width:100%; height:100%; }

.main { padding: var(--sp-6) var(--sp-7); background: var(--bg-page); }
.topbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--sp-6); gap:var(--sp-4); flex-wrap:wrap; }
.topbar h1 { font-size: var(--fs-xl); }
.topbar .who { font-size:var(--fs-sm); color: var(--text-secondary); }

.stat-row { display:grid; grid-template-columns: repeat(4,1fr); gap: var(--sp-4); margin-bottom: var(--sp-6); }
@media (max-width:1000px){ .stat-row{ grid-template-columns: repeat(2,1fr);} }
.stat-card { background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:var(--sp-5); }
.stat-card .n { font-family:var(--font-display); font-size:var(--fs-2xl); color:var(--forest-800); line-height:1; }
.stat-card .l { font-size:var(--fs-xs); letter-spacing:.08em; text-transform:uppercase; color:var(--text-secondary); margin-top:var(--sp-3); }
.stat-card .ico { float:right; width:34px; height:34px; color:var(--gold-500); }

/* table */
.table-wrap { background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; }
table.data { width:100%; border-collapse:collapse; font-size:var(--fs-sm); }
table.data th { text-align:left; padding:.8rem 1rem; background:var(--cream-100); font-size:var(--fs-xs); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-700); border-bottom:1px solid var(--border); }
table.data td { padding:.8rem 1rem; border-bottom:1px solid var(--cream-200); }
table.data tr:last-child td { border-bottom:none; }
table.data tr:hover td { background: var(--cream-50); }

/* mobile sidebar */
.menu-btn { display:none; background:none; border:1px solid var(--border-strong); border-radius:var(--r-md); padding:.4rem .6rem; cursor:pointer; }
@media (max-width: 880px){
  .app { grid-template-columns: 1fr; }
  .side { position:fixed; inset:0 auto 0 0; width:260px; transform:translateX(-100%); transition:transform .3s var(--ease); z-index:60; }
  .side.open { transform:none; }
  .menu-btn { display:inline-flex; }
  .scrim { display:none; position:fixed; inset:0; background:rgba(14,32,24,.5); z-index:55; }
  .scrim.show { display:block; }
}

.empty-state { text-align:center; padding: var(--sp-8) var(--sp-5); color:var(--text-secondary); }
.empty-state .ico { width:56px; height:56px; margin:0 auto var(--sp-4); color:var(--cream-300); }
.phase-note { display:inline-flex; align-items:center; gap:var(--sp-2); background:var(--cream-100); border:1px dashed var(--gold-500); color:var(--gold-600); border-radius:var(--r-pill); padding:.4rem 1rem; font-size:var(--fs-xs); font-weight:700; letter-spacing:.04em; }

/* ============================================================
   PHASE 3 — Review workbench + species editor
   ============================================================ */
.form-group { margin-bottom: var(--sp-4); }
.form-group > label { display:block; font-weight:600; font-size:var(--fs-sm); margin-bottom:.4rem; color:var(--ink-800); }
.btn-danger-ghost { background:transparent; border-color:#E3B7B7; color:var(--danger); }
.btn-danger-ghost:hover { background:#F4DADA; border-color:var(--danger); }

/* tabs */
.tabs { display:flex; gap:.25rem; border-bottom:1px solid var(--border); margin-bottom:var(--sp-5); flex-wrap:wrap; }
.tab { padding:.6rem 1rem; font-weight:600; font-size:var(--fs-sm); color:var(--text-secondary); border-bottom:2px solid transparent; margin-bottom:-1px; display:inline-flex; align-items:center; gap:.4rem; }
.tab:hover { color:var(--forest-700); }
.tab.active { color:var(--forest-800); border-bottom-color:var(--saffron-600); }
.tab-count { background:var(--cream-200); color:var(--ink-700); border-radius:var(--r-pill); padding:.05rem .5rem; font-size:var(--fs-xs); }
.tab.active .tab-count { background:var(--saffron-600); color:#fff; }

/* review queue cards */
.review-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:var(--sp-4); }
.review-card { background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; transition:transform .15s, box-shadow .15s; display:flex; flex-direction:column; }
.review-card:hover { transform:translateY(-2px); box-shadow:var(--sh-md); border-color:var(--forest-300); }
.rc-thumb { position:relative; aspect-ratio:4/3; background:var(--forest-100); display:grid; place-items:center; overflow:hidden; }
.rc-thumb img { width:100%; height:100%; object-fit:cover; }
.rc-noimg { color:var(--forest-300); }
.rc-noimg svg { width:46px; height:46px; }
.rc-count { position:absolute; bottom:6px; right:6px; background:rgba(20,52,43,.8); color:#fff; font-size:.7rem; padding:.1rem .5rem; border-radius:var(--r-pill); }
.rc-body { padding:var(--sp-4); display:flex; flex-direction:column; gap:.15rem; }
.rc-species { font-weight:700; font-size:var(--fs-base); }
.rc-grove { font-size:var(--fs-xs); color:var(--text-secondary); display:flex; align-items:center; gap:.3rem; }
.rc-grove svg { width:13px; height:13px; }
.rc-meta { font-size:var(--fs-xs); color:var(--ink-300); }

/* validate layout */
.validate-layout { display:grid; grid-template-columns:1fr 380px; gap:var(--sp-5); align-items:start; }
@media (max-width:980px){ .validate-layout{ grid-template-columns:1fr; } }
.val-evidence { display:flex; flex-direction:column; gap:var(--sp-4); }
.val-head { display:flex; justify-content:space-between; align-items:flex-start; gap:var(--sp-3); }
.val-label { font-size:var(--fs-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--saffron-700); font-weight:700; margin-bottom:.6rem; }
.val-photos { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:.5rem; }
.val-photo { aspect-ratio:1; border-radius:var(--r-md); overflow:hidden; border:1px solid var(--border); display:block; }
.val-photo img { width:100%; height:100%; object-fit:cover; transition:transform .2s; }
.val-photo:hover img { transform:scale(1.05); }
.val-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-3); }
@media (max-width:560px){ .val-stats{ grid-template-columns:repeat(2,1fr); } }
.val-stats > div { background:var(--cream-50); border:1px solid var(--border); border-radius:var(--r-md); padding:.7rem; text-align:center; }
.vs-n { display:block; font-family:var(--font-display); font-size:var(--fs-xl); color:var(--forest-800); line-height:1.1; }
.vs-l { display:block; font-size:.68rem; letter-spacing:.05em; text-transform:uppercase; color:var(--text-secondary); margin-top:.25rem; }
.val-sticky { position:sticky; top:var(--sp-5); }
.val-actions { margin-top:var(--sp-4); }
.check-row { display:flex; align-items:center; gap:.6rem; padding:.7rem 0; cursor:pointer; font-size:var(--fs-sm); font-weight:500; }
.check-row input { width:18px; height:18px; accent-color:var(--forest-700); }

/* species editor */
.sp-editor { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4); }
@media (max-width:640px){ .sp-editor{ grid-template-columns:1fr; } }
.sp-row-actions { display:flex; gap:.4rem; }

/* Phase 4 — progress bar + drone */
.progress { height:6px; background:var(--cream-200); border-radius:var(--r-pill); margin-top:.35rem; overflow:hidden; }
.progress > span { display:block; height:100%; background:var(--forest-600); border-radius:var(--r-pill); }
.drone-grid { display:grid; grid-template-columns:1fr 380px; gap:var(--sp-5); align-items:start; }
@media (max-width:980px){ .drone-grid{ grid-template-columns:1fr; } }
#dronemap { height:420px; border-radius:var(--r-md); overflow:hidden; border:1px solid var(--border); }
.bounds-row { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
.drone-card { display:flex; gap:.85rem; background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:.85rem; margin-bottom:.6rem; }
.drone-card img { width:72px; height:72px; object-fit:cover; border-radius:var(--r-md); flex:none; }
.drone-card .dc-main { flex:1; min-width:0; }
.range { width:100%; accent-color:var(--forest-700); }

/* ============================================================
   PHASE 5 — Public showpiece (grove pages, atlas, flora)
   ============================================================ */
.wrap-narrow { max-width: 760px; margin-inline: auto; padding-inline: var(--sp-5); }

/* generic light page hero (flora) */
.page-hero { padding: calc(var(--header-h) + 3rem) 0 2.5rem; text-align: center; background: linear-gradient(180deg, var(--cream-100), var(--cream-50)); border-bottom: 1px solid var(--border); }
.page-hero .divider-leaf { max-width: 200px; margin-inline: auto; }
.page-hero h1 { font-family: var(--font-display); font-weight: 500; font-size: clamp(2rem, 5vw, var(--fs-4xl)); margin-top: var(--sp-3); }
.page-hero .lede { color: var(--text-secondary); font-size: var(--fs-md); max-width: 56ch; margin: var(--sp-4) auto 0; }

/* grove cinematic hero */
.dv-hero { position: relative; color: #fff; padding: calc(var(--header-h) + 3.5rem) 0 3rem; overflow: hidden; background: var(--forest-950); }
.dv-hero-bg { position: absolute; inset: 0; background:
  radial-gradient(120% 120% at 80% 0%, rgba(217,122,30,.28), transparent 55%),
  radial-gradient(100% 120% at 0% 100%, rgba(60,112,80,.5), transparent 60%),
  var(--forest-950); }
.dv-hero .wrap { position: relative; z-index: 2; }
.dv-back { display: inline-flex; align-items: center; gap: .35rem; color: rgba(255,255,255,.8); font-size: var(--fs-sm); font-weight: 600; margin-bottom: 1.5rem; }
.dv-back:hover { color: #fff; }
.dv-back svg { width: 16px; height: 16px; }
.dv-hero-inner .eyebrow { display:inline-flex; align-items:center; gap:.4rem; }
.dv-hero-inner .eyebrow svg { width: 15px; height: 15px; }
.dv-hero h1 { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.4rem, 6vw, 4.2rem); line-height: 1.04; margin-top: .4rem; color: #fff; }
.dv-loc { display:flex; align-items:center; gap:.4rem; color: rgba(255,255,255,.75); margin-top: var(--sp-4); font-size: var(--fs-md); }
.dv-loc svg { width: 17px; height: 17px; }
.dv-stats { display: flex; flex-wrap: wrap; gap: 2.5rem; margin-top: 2.25rem; }
.dv-stats .n { display:block; font-family: var(--font-display); font-size: var(--fs-3xl); color: var(--gold-300); line-height: 1; }
.dv-stats .l { display:block; font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-top: .4rem; }

.dv-sig { background: var(--cream-50); }
.dv-sig .eyebrow { color: var(--saffron-600); }
.dv-sig-text { font-family: var(--font-display); font-size: clamp(1.3rem, 2.6vw, 1.9rem); line-height: 1.5; color: var(--forest-900); margin-top: var(--sp-4); font-weight: 400; }

#grovemap { width: 100%; height: 480px; border-radius: var(--r-lg); border: 1px solid rgba(255,255,255,.12); box-shadow: var(--sh-lg); overflow: hidden; background:#0E2018; }

/* tree gallery */
.tree-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-5); }
.tree-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; margin: 0; }
.tc-img { aspect-ratio: 4/3; overflow: hidden; background: var(--forest-100); display:grid; place-items:center; }
.tc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.tree-card:hover .tc-img img { transform: scale(1.04); }
.tc-noimg { color: var(--forest-300); }
.tc-noimg svg { width: 52px; height: 52px; }
.tree-card figcaption { padding: var(--sp-4); display:flex; flex-direction:column; gap:.15rem; }
.tree-card figcaption strong { font-size: var(--fs-base); }
.tree-card figcaption em { font-family: var(--font-display); color: var(--text-secondary); font-size: var(--fs-sm); }
.tc-meta { font-size: var(--fs-xs); color: var(--ink-300); margin-top: .3rem; }

/* species chips */
.species-chips { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.sp-chip { display: inline-flex; flex-direction: column; gap: .1rem; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: .7rem 1rem; transition: border-color .2s, transform .15s; }
.sp-chip:hover { border-color: var(--forest-400); transform: translateY(-1px); }
.sp-chip-name { font-weight: 700; font-size: var(--fs-sm); }
.sp-chip em { font-family: var(--font-display); font-size: var(--fs-xs); color: var(--text-secondary); }
.dv-species-sec { background: var(--cream-100); }

/* atlas grid */
.atlas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-5); }
.atlas-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-5); display: flex; flex-direction: column; gap: .4rem; transition: transform .18s, box-shadow .18s, border-color .18s; position: relative; overflow: hidden; }
.atlas-card::after { content:""; position:absolute; inset:0; background: linear-gradient(135deg, transparent 60%, rgba(217,122,30,.06)); opacity:0; transition: opacity .25s; }
.atlas-card:hover { transform: translateY(-3px); box-shadow: var(--sh-lg); border-color: var(--forest-300); }
.atlas-card:hover::after { opacity:1; }
.ac-top { display:flex; align-items:center; justify-content:space-between; }
.ac-leaf { width: 40px; height: 40px; border-radius: 50%; background: var(--forest-100); color: var(--forest-700); display:grid; place-items:center; }
.ac-leaf svg { width: 20px; height: 20px; }
.ac-deity { font-size: var(--fs-xs); color: var(--saffron-700); font-weight: 600; }
.atlas-card h3 { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 500; margin-top: .25rem; }
.ac-loc { font-size: var(--fs-sm); color: var(--text-secondary); }
.ac-foot { display:flex; align-items:center; justify-content:space-between; margin-top: auto; padding-top: var(--sp-4); font-size: var(--fs-sm); }
.ac-foot span:first-child { color: var(--text-secondary); }
.ac-go { color: var(--saffron-600); font-weight: 600; }

/* flora directory */
.flora-search { max-width: 460px; margin: var(--sp-5) auto 0; }
.flora-search input { width: 100%; padding: .9rem 1.2rem; border: 1.5px solid var(--border-strong); border-radius: var(--r-pill); font-size: var(--fs-base); background: #fff; font-family: var(--font-body); }
.flora-search input:focus { outline: none; border-color: var(--saffron-600); box-shadow: var(--sh-glow); }
.flora-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-4); }
.flora-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-5); scroll-margin-top: 90px; }
.fc-head { display:flex; align-items:flex-start; justify-content:space-between; gap:.5rem; }
.fc-head h3 { font-size: var(--fs-lg); }
.fc-sci { font-family: var(--font-display); color: var(--text-secondary); font-size: var(--fs-sm); }
.fc-tags { display:flex; flex-wrap:wrap; gap:.4rem; margin-top: var(--sp-3); }
.fc-tag { font-size: var(--fs-xs); padding: .15rem .6rem; border-radius: var(--r-pill); background: var(--cream-100); color: var(--ink-700); }
.fc-native { background: var(--forest-100); color: var(--forest-700); }
.fc-endangered { background: #F4DADA; color: var(--danger); font-weight: 600; }
.fc-notes { font-size: var(--fs-sm); color: var(--text-secondary); margin-top: var(--sp-3); line-height: 1.55; }

@media (max-width: 640px){ .dv-stats { gap: 1.5rem; } }

/* Phase 6 — analytics + reports */
.chart-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-5); margin-top:var(--sp-5); }
.chart-grid .chart-wide { grid-column:1/-1; }
.chart-grid canvas { max-height:300px; margin-top:.5rem; }
@media (max-width:880px){ .chart-grid{ grid-template-columns:1fr; } }
.report-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:var(--sp-5); }
.report-card { background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:var(--sp-5); display:flex; flex-direction:column; gap:.5rem; }
.report-card .rc-ico { width:46px; height:46px; border-radius:var(--r-md); background:var(--forest-100); color:var(--forest-700); display:grid; place-items:center; }
.report-card .rc-ico svg { width:24px; height:24px; }
.report-card h3 { font-size:var(--fs-lg); }
.report-card p { color:var(--text-secondary); font-size:var(--fs-sm); flex:1; }

/* printable report */
.rpt { max-width:880px; margin:0 auto; padding:2rem 1.5rem 4rem; color:#1c1a16; }
.rpt-toolbar { position:sticky; top:0; background:var(--forest-900); color:#fff; padding:.75rem 1rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; z-index:10; }
.rpt-toolbar a, .rpt-toolbar button { font-size:var(--fs-sm); }
.rpt-head { border-bottom:3px solid var(--forest-800); padding-bottom:1rem; margin-bottom:1.5rem; display:flex; align-items:center; gap:1rem; }
.rpt-head .brand-mark { width:48px; height:48px; }
.rpt-title { font-family:var(--font-display); font-size:1.9rem; line-height:1.1; }
.rpt-sub { color:#6B6151; font-size:.85rem; margin-top:.2rem; }
.rpt h2 { font-family:var(--font-display); font-size:1.25rem; margin:1.75rem 0 .6rem; color:var(--forest-900); border-bottom:1px solid #E6DEC9; padding-bottom:.3rem; }
.rpt-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:.75rem; margin:1rem 0; }
.rpt-stat { border:1px solid #E6DEC9; border-radius:8px; padding:.75rem; text-align:center; }
.rpt-stat .n { font-family:var(--font-display); font-size:1.5rem; color:var(--forest-800); }
.rpt-stat .l { font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; color:#6B6151; }
.rpt table { width:100%; border-collapse:collapse; font-size:.85rem; margin-top:.5rem; }
.rpt th, .rpt td { text-align:left; padding:.5rem .6rem; border-bottom:1px solid #ECE5D4; }
.rpt th { background:#F3EEE0; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:#6B6151; }
.rpt-foot { margin-top:2.5rem; padding-top:1rem; border-top:1px solid #E6DEC9; font-size:.75rem; color:#8A8270; text-align:center; }
@media print {
  .rpt-toolbar, .no-print { display:none !important; }
  body { background:#fff !important; }
  .rpt { max-width:100%; padding:0; }
  .rpt-stat, .rpt table, .report-card { break-inside:avoid; }
  a { color:#1c1a16; text-decoration:none; }
}

/* ============================================================
   Full-screen GIS map + tree detail + QR labels
   ============================================================ */
.gis-body { height:100vh; overflow:hidden; display:flex; flex-direction:column; background:var(--forest-950); }
.gis-bar { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.6rem 1rem; background:rgba(251,248,240,.95); border-bottom:1px solid var(--border); flex:none; z-index:1200; }
.gis-bar .brand-name { font-size:var(--fs-base); }
.gis-bar-meta { display:flex; align-items:center; gap:.9rem; }
.gis-count { font-size:var(--fs-sm); color:var(--text-secondary); font-weight:600; }
.gis-stage { position:relative; flex:1; min-height:0; }
#gismap { position:absolute; inset:0; background:#0E2018; }
.gis-legend { position:absolute; left:12px; bottom:18px; z-index:1000; background:rgba(255,255,255,.95); border-radius:var(--r-md); padding:.7rem .9rem; box-shadow:var(--sh-md); display:flex; flex-direction:column; gap:.35rem; font-size:var(--fs-xs); max-width:230px; }
.gis-legend strong { font-size:var(--fs-sm); }
.gis-legend span { display:flex; align-items:center; gap:.45rem; }
.lg-dot { width:13px; height:13px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.1); flex:none; }
.lg-grove { background:var(--saffron-600); border-radius:3px; }
.grove-pin span { display:inline-block; transform:translate(-50%,-130%); background:var(--saffron-600); color:#fff; font-size:11px; font-weight:700; padding:.15rem .5rem; border-radius:var(--r-pill); white-space:nowrap; box-shadow:var(--sh-sm); border:1.5px solid #fff; }
.gis-panel { position:absolute; top:0; right:0; height:100%; width:min(380px,90vw); background:var(--bg-surface); box-shadow:-8px 0 30px rgba(0,0,0,.18); transform:translateX(105%); transition:transform .28s var(--ease); z-index:1100; overflow-y:auto; padding:1.25rem; }
.gis-panel.open { transform:none; }
.gis-panel-close { position:absolute; top:.6rem; right:.8rem; background:none; border:none; font-size:1.8rem; line-height:1; color:var(--text-secondary); cursor:pointer; }
.gis-panel-load { padding:2rem; text-align:center; color:var(--text-secondary); }
.gis-tid { display:inline-block; font-family:var(--font-display); font-weight:600; background:var(--forest-800); color:#fff; padding:.2rem .7rem; border-radius:var(--r-pill); font-size:var(--fs-sm); letter-spacing:.04em; }
.gis-panel h3 { font-family:var(--font-display); font-size:var(--fs-xl); margin-top:.5rem; }
.gis-sci { font-family:var(--font-display); font-style:italic; color:var(--text-secondary); font-size:var(--fs-sm); }
.gis-photos { display:grid; grid-template-columns:repeat(3,1fr); gap:.35rem; margin:.75rem 0; }
.gis-photos img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:var(--r-sm); }
.gis-panel-actions { display:flex; flex-direction:column; gap:.5rem; margin-top:1rem; }
.gis-panel-actions .btn { width:100%; }

/* attribute table (shared by tree.php + gis panel) */
.attr-table { width:100%; border-collapse:collapse; font-size:var(--fs-sm); margin-top:.75rem; }
.attr-table th { text-align:left; color:var(--text-secondary); font-weight:600; padding:.5rem .6rem .5rem 0; vertical-align:top; white-space:nowrap; width:38%; border-bottom:1px solid var(--border); }
.attr-table td { padding:.5rem 0; border-bottom:1px solid var(--border); }

/* tree detail page */
.tree-hero { background:var(--forest-950); color:#fff; padding:calc(var(--header-h) + 2rem) 0 2rem; }
.tree-hero .dv-back { color:rgba(255,255,255,.8); }
.tree-hero-grid { display:grid; grid-template-columns:1fr auto; gap:2rem; align-items:start; }
@media (max-width:680px){ .tree-hero-grid{ grid-template-columns:1fr; } }
.tree-id-badge { display:inline-block; font-family:var(--font-display); font-weight:600; background:var(--saffron-600); color:#fff; padding:.3rem 1rem; border-radius:var(--r-pill); letter-spacing:.05em; font-size:var(--fs-md); }
.tree-hero h1 { color:#fff; font-family:var(--font-display); font-weight:500; font-size:clamp(2rem,5vw,3.2rem); margin-top:.6rem; }
.tree-sci { font-family:var(--font-display); font-style:italic; color:var(--gold-300); margin-top:.2rem; }
.tree-grove { margin-top:.6rem; color:rgba(255,255,255,.85); display:flex; align-items:center; gap:.4rem; }
.tree-grove a { color:#fff; text-decoration:underline; }
.tree-grove svg { width:16px; height:16px; }
.tree-qr-box { background:#fff; border-radius:var(--r-lg); padding:1rem; text-align:center; color:var(--ink-900); min-width:190px; }
.tree-qr-box #qr { display:flex; justify-content:center; }
.tree-qr-box #qr img, .tree-qr-box #qr canvas { margin:0 auto; }
.tree-qr-label { font-weight:700; margin-top:.5rem; font-size:var(--fs-sm); }
.tree-detail-grid { display:grid; grid-template-columns:1fr 320px; gap:2rem; align-items:start; }
@media (max-width:820px){ .tree-detail-grid{ grid-template-columns:1fr; } }
.tree-h2 { font-family:var(--font-display); font-size:var(--fs-xl); margin-bottom:.25rem; }
.tree-photos { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:.5rem; margin-bottom:1.5rem; }
.tree-photo img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--r-md); }
.tree-map { height:260px; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--border); }

/* QR label sheet */
.label-sheet { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.qr-label { border:1px dashed #bbb; border-radius:8px; padding:10px; text-align:center; break-inside:avoid; }
.qr-label .ql-code { font-family:var(--font-display); font-weight:600; font-size:.9rem; margin-top:6px; }
.qr-label .ql-sp { font-size:.72rem; color:#555; }
.qr-label .ql-brand { font-size:.6rem; color:#999; margin-top:2px; letter-spacing:.04em; }
@media print { .gis-bar, .nav, .rpt-toolbar, .no-print { display:none !important; } .label-sheet{ grid-template-columns:repeat(3,1fr); } body{ background:#fff; } }

/* landing: open-full-map affordance overlaid on mini map */
.map-section { position: relative; }
.map-fs-hint { position:absolute; top:calc(var(--sp-7) + 2px); right:var(--sp-5); z-index:5; background:rgba(255,255,255,.92); color:var(--forest-800); font-weight:600; font-size:var(--fs-xs); padding:.5rem .85rem; border-radius:var(--r-pill); box-shadow:var(--sh-md); display:inline-flex; align-items:center; gap:.4rem; }
.map-fs-hint:hover { background:#fff; }
.map-fs-hint svg { width:15px; height:15px; }
.tc-code { display:inline-block; font-family:var(--font-display); font-weight:600; font-size:var(--fs-xs); color:var(--saffron-700); letter-spacing:.04em; margin-bottom:.15rem; }

/* map empty-state notice */
.map-empty { margin-top:1rem; text-align:center; color:var(--text-muted-dark); font-size:var(--fs-sm); background:rgba(255,255,255,.06); border:1px dashed rgba(255,255,255,.18); border-radius:var(--r-md); padding:1rem; }
.dv-map-empty { position:absolute; inset:auto 0 0 0; margin:auto; top:50%; transform:translateY(-50%); width:max-content; max-width:90%; background:rgba(255,255,255,.92); color:var(--forest-800); border-radius:var(--r-pill); padding:.6rem 1.1rem; font-size:var(--fs-sm); font-weight:600; box-shadow:var(--sh-md); }

/* validate: admin danger zone */
.val-danger { margin-top:1.1rem; padding-top:1rem; border-top:1px solid var(--border); }