/* =========================================================================
   plant.css — NEON Plant Diversity Explorer additions on top of the ported
   styles.css (Desert Data Labs house style). Only the plant-specific bits live
   here: the hero band, splash site cards, native/introduced bar, insight list.
   ========================================================================= */

/* greened brand mark */
.brand-mark { font-size: 26px; }

/* ---- hero stat band ---------------------------------------------------- */
/* flex:0 0 auto is defensive: never let the hero band be the page-fill flex
   child that shrinks. It can't crush today (overflow:visible floors its min-size
   at content) but would if the cascade's overflow:hidden command-band style is
   ever ported here. See NEON-Driver-Cascade/www/cascade.css for the full story. */
.hero-band { flex: 0 0 auto; margin: 4px 0 14px; }
.hero-title { font-weight: 700; color: var(--pine); font-size: 17px; display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.hero-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.hero-stat { display: flex; gap: 12px; align-items: center; background: var(--paper); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 16px; box-shadow: 0 4px 14px var(--shadow); border-top: 3px solid var(--pine); }
.hero-stat.hero-pine  { border-top-color: var(--green); }
.hero-stat.hero-terra { border-top-color: var(--terra); }
.hero-stat.hero-gold  { border-top-color: var(--gold); }
.hs-icon { font-size: 24px; color: var(--pine); opacity: .85; }
.hero-pine  .hs-icon { color: var(--green); }
.hero-terra .hs-icon { color: var(--terra); }
.hero-gold  .hs-icon { color: var(--gold-ink); }
.hs-v { font-size: 28px; font-weight: 800; color: var(--ink); line-height: 1; }
.hs-l { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; margin-top: 3px; }

/* ---- splash site cards ------------------------------------------------- */
.site-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin: 18px 0; }
.site-card { display: flex; gap: 14px; align-items: center; background: var(--paper); border: 1px solid var(--line);
  border-radius: 12px; padding: 14px 16px; text-decoration: none; color: inherit; box-shadow: 0 4px 14px var(--shadow);
  border-left: 4px solid var(--green); transition: transform .12s ease, box-shadow .12s ease; }
.site-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px var(--shadow); }
.sc-emoji { font-size: 20px; color: var(--green); display: inline-flex; align-items: center; }
.sc-name { font-weight: 600; color: var(--ink); }
.sc-meta { font-size: 12.5px; color: var(--muted); margin-top: 2px; }

/* ---- overview insight list -------------------------------------------- */
.insight-list { display: flex; flex-direction: column; gap: 6px; }
.il-item { display: flex; gap: 8px; align-items: baseline; color: var(--ink); font-size: 14px; line-height: 1.5; }
.il-item .ci-hero { color: var(--green); font-weight: 800; }

/* ---- native vs introduced cover bar (plot card) ----------------------- */
/* colours read the single nativity source (--native / --introduced tokens) so the
   piv-bar can never drift from the charts, the map, or the species table. */
.piv-bar { display: flex; height: 24px; border-radius: 7px; overflow: hidden; border: 1px solid var(--line); font-size: 11px; font-weight: 600; }
.piv-native { background: var(--native); color: #fff; display: flex; align-items: center; justify-content: center; }
.piv-intro  { background: var(--introduced); color: #fff; display: flex; align-items: center; justify-content: center; }

/* ---- Diversity Lab selected-plot strip -------------------------------- */
.lab-sel { display: flex; gap: 14px; align-items: center; background: var(--bg); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 14px; margin-top: 12px; }
.ls-emoji { font-size: 26px; }
.ls-id { font-weight: 600; color: var(--ink); }
.ls-dom { font-size: 12.5px; color: var(--muted); }
.lab-sel .btn { margin-left: auto; }

/* hero count-up uses the shared .count-up engine from app.js */
/* .hero-stat is forced to the dark navy info-box scheme in styles.css (both modes);
   only the splash .site-card follows the page paper in dark mode. */
[data-bs-theme="dark"] .site-card { background: var(--paper); }

/* =========================================================================
   Expected vs Observed (completeness + QC) — buckets, value boxes, flags.
   All colours read the shared tokens so dark mode flips for free. The hard
   rule: nothing in the completeness lane is ever red.
   ========================================================================= */
.evo-header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: var(--bg);
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; margin: 2px 0 12px; font-size: 14px; color: var(--ink); }
.evo-header > .bi { color: var(--pine); font-size: 17px; }
.evo-header code { background: rgba(31,92,61,.10); color: var(--pine); padding: 1px 6px; border-radius: 5px; font-size: 12.5px; }
.evo-cite { margin-left: auto; font-size: 12.5px; color: var(--sky); text-decoration: none; white-space: nowrap; }
.evo-cite:hover { text-decoration: underline; }

/* headline value boxes */
.evo-boxrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 2px 0 8px; }
.evo-box { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 13px 16px;
  box-shadow: 0 4px 14px var(--shadow); border-top: 3px solid var(--muted); }
.evo-box-v { font-size: 26px; font-weight: 800; color: var(--ink); line-height: 1.05; }
.evo-box-l { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; margin-top: 4px; }
.evo-box-sub { font-size: 12px; color: var(--muted); margin-top: 5px; font-style: italic; }
.evo-box-green { border-top-color: var(--green); } .evo-box-green .evo-box-v { color: var(--green); }
.evo-box-navy  { border-top-color: var(--pine); }
.evo-box-clay  { border-top-color: var(--terra); } .evo-box-clay .evo-box-v { color: var(--terra); }
.evo-box-amber { border-top-color: var(--gold); } .evo-box-amber .evo-box-v { color: var(--gold-ink); }
.evo-matchnote { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin: 2px 2px 14px; display: flex; gap: 7px; }
.evo-matchnote > .bi { color: var(--sky); flex: none; margin-top: 2px; }

/* bucket cards carry a coloured left rail that names the lane (!important beats
   the bslib .card border shorthand that loads after this sheet) */
.evo-card.evo-a { border-left: 4px solid var(--green) !important; }
.evo-card.evo-c { border-left: 4px solid var(--terra) !important; }
.evo-card.evo-b { border-left: 4px solid var(--muted) !important; }
.evo-dl-row { display: flex; justify-content: flex-end; margin: -2px 0 8px; }
/* anchor DT width so the fill-container flex column can't collapse it to 0
   (the shinycssloaders spinner-wrapper bug — see map_picker). */
.evo-tbl-wrap { width: 100%; min-width: 0; }
.evo-tbl-wrap .dataTables_wrapper { width: 100%; }
/* Overview tools-strip (compare / export buttons) + compare modal table */
.tools-strip { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; }
.compare-tbl { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 6px; }
.compare-tbl th { text-align: left; color: var(--pine); font-weight: 700; border-bottom: 2px solid var(--line); padding: 7px 10px; }
.compare-tbl td { padding: 7px 10px; border-bottom: 1px solid var(--line); color: var(--ink); }
.compare-tbl .cmp-l { color: var(--muted); }

/* splash picker "colour by" toggle + reactive legend */
.splash-colorby { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 2px 0 8px; }
.splash-colorby .shiny-options-group { display: inline-flex; gap: 14px; }
.splash-colorby .radio-inline { font-size: 13.5px; color: var(--ink); }
.splash-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.sl-ramp { display: inline-block; width: 60px; height: 11px; border-radius: 3px; border: 1px solid var(--line); vertical-align: middle; }
.sl-inv  { background: linear-gradient(90deg, #FFF7E6, #FE9929, #993404); }
.sl-comp { background: linear-gradient(90deg, #E7E0CC, #7FB07A, #1F5C3D); }
.sl-na   { display: inline-block; width: 11px; height: 11px; border-radius: 3px; background: #c9d3bb; border: 1px solid var(--line); vertical-align: middle; margin-left: 8px; }

/* hide the bucket cards (no reference list) without touching inline display, so the
   card keeps display:flex and the DT inside doesn't collapse to 0 width when shown */
.evo-hidden { display: none !important; }
/* the one always-visible completeness reassurance (replaces saying it 3x) */
.evo-subhead { display: flex; gap: 7px; align-items: baseline; font-size: 13px; color: var(--muted);
  margin: 0 0 10px; font-style: italic; }
.evo-subhead > .bi { color: var(--sky); flex: none; }
/* bigger tap target for the info-dot 'i' (the only path to every explanation) —
   keep the 20px glyph, expand the hittable area to ~44px for thumbs */
.info-dot { padding: 12px; margin: -12px; }
@media (max-width: 560px) {
  .evo-dl-row { justify-content: stretch; }
  .evo-dl-row .btn { width: 100%; }
}

/* the true-QC flag blocks */
.evo-flag { border-radius: 10px; padding: 11px 14px; margin: 8px 0; font-size: 13.5px; line-height: 1.5;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink); }
.evo-flag > .bi { margin-right: 6px; }
.evo-flag-clean { border-left: 4px solid var(--green); }
.evo-flag-clean > .bi { color: var(--green); }
.evo-flag-muted { border-left: 4px solid var(--muted); color: var(--muted); }
.evo-flag-warn  { border-left: 4px solid var(--terra); }
/* neutral, informational (not a problem) — the "set aside as regional associate" note */
.evo-flag-info  { border-left: 4px solid var(--pine); }
.evo-flag-info > .bi { color: var(--pine); }
.evo-flag-info .evo-flag-h { color: var(--pine); }
.evo-flag-h { font-weight: 700; color: var(--terra); display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.evo-flag-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.evo-flag-tbl th { text-align: left; color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--line); padding: 4px 8px; }
.evo-flag-tbl td { padding: 4px 8px; border-bottom: 1px solid var(--line); color: var(--ink); }
.evo-flag-more { font-size: 12px; color: var(--muted); margin-top: 6px; font-style: italic; }
.evo-flag-note { font-size: 12px; color: var(--muted); margin-top: 8px; }
@media (max-width: 560px) { .evo-box-v { font-size: 22px; } .evo-header { font-size: 13px; } }