/* =========================================================================
   NEON Plant Phenology Explorer — styles.css
   "Field Notebook" theme (Desert Data Labs). A naturalist's seasonal journal:
   warm parchment ground, deep forest-canopy green primary, and a phenophase
   color story that runs the arc of the year (green-up -> bloom -> senescence).
   Deliberately distinct from the Small Mammal Tracker's navy/cardinal/gold.

   The brand accents ARE the phenophase ramp, so the chrome previews the
   Phenology Clock's color language. Senescence amber doubles as the warning
   tone, so red is reserved for destructive only.

   Token names kept short; VALUES are Field Notebook:
     --pine = forest green (primary), --terra = terracotta (secondary),
     --gold = senescence amber (accent / warning), --green = leaf,
     --accent = bloom magenta. Phenophase tokens: --greenup/--leaf/--bloom/
     --fruit/--senesce mirror R's pheno_palette so chrome + charts share one
     language.
   ========================================================================= */
:root {
  --pine: #1f6f3e;   --pine2: #14532a;
  --terra: #b5481f;  --gold: #d98014;  --gold-ink: #9a5b0e;
  --sky: #2f8f87;    --green: #1f7a3f; --accent: #c8417a;
  --ink: #24302a;    --muted: #5f6f64;
  --bg: #f6f3ea;     --paper: #fffdf7; --line: #e2ddcd;
  --shadow: rgba(36, 48, 42, 0.10);
  /* phenophase ramp (mirror of R pheno_palette) */
  --greenup: #9ccf6a; --leaf: #1f7a3f; --bloom: #c8417a; --fruit: #6a3fa0; --senesce: #d98014;
}

/* =========================================================================
   DARK THEME — "canopy at dusk". Toggled by the sidebar input_dark_mode.
   Most components read the tokens above, so flipping the structural ones
   carries the bulk; the targeted rules below fix spots where the forest
   --pine token is used as TEXT (low-contrast on dark). Plots adapt server-
   side via is_dark() in plotly_theme().
   ========================================================================= */
[data-bs-theme="dark"] {
  --ink: #e7f0ea;  --muted: #9fb3a6;
  --bg: #0f1c16;   --paper: #16261d;  --line: #2a3d31;
  --gold-ink: #e8b15a;                 /* brighter amber for icons/text on dark */
  --shadow: rgba(0, 0, 0, 0.45);
}
[data-bs-theme="dark"] body {
  background:
    radial-gradient(1100px 520px at 10% -8%, rgba(60,140,90,0.12), transparent 60%),
    radial-gradient(900px 460px at 100% 0%, rgba(217,128,20,0.08), transparent 55%),
    linear-gradient(180deg, #0f1c16 0%, #0a140f 100%);
  color: var(--ink);
}
[data-bs-theme="dark"] .control-deck { background: #11201a; }
/* the forest --pine token used as TEXT goes low-contrast on dark -> light leaf */
[data-bs-theme="dark"] .brand-title,
[data-bs-theme="dark"] .tab-head-text h4 { color: #8fdca8 !important; }
[data-bs-theme="dark"] .deck-foot code { color: #cfeede; background: #1d3327; }
[data-bs-theme="dark"] .deck-foot a:hover { color: #cfeede; }
/* lift the card-header forest slightly so it separates from the dark card body */
[data-bs-theme="dark"] .card-header { background: #267347 !important; }
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .selectize-input,
[data-bs-theme="dark"] .selectize-dropdown { background: #0f1f17; color: var(--ink); border-color: var(--line); }

/* the sidebar theme toggle row */
.theme-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 0 4px; }
.theme-toggle-lab { font-size: 12px; font-weight: 700; color: var(--muted); display: flex; align-items: center; gap: 5px; }

body {
  background:
    radial-gradient(1100px 520px at 10% -8%, rgba(31,111,62,0.05), transparent 60%),
    radial-gradient(900px 460px at 100% 0%, rgba(217,128,20,0.05), transparent 55%),
    linear-gradient(180deg, #f6f3ea 0%, #efe9da 100%);
  background-attachment: fixed;
  color: var(--ink);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

/* ---- sidebar / control deck ------------------------------------------- */
.control-deck { background: var(--paper); border-right: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.brand-mark { font-size: 28px; line-height: 1; }
.brand-title { font-weight: 700; font-size: 18px; color: var(--pine); letter-spacing: .2px; font-family: "Fraunces", Georgia, serif; }
.brand-sub { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 2px; }

.control-deck label, .control-deck .control-label { color: var(--ink); font-weight: 600; font-size: 13px; }
.load-btn { font-weight: 700; letter-spacing: .3px; box-shadow: 0 6px 18px -8px var(--pine); }
.load-btn:hover { transform: translateY(-1px); transition: .15s; }
.reset-demo { color: var(--muted) !important; text-decoration: none; font-size: 12px; margin-top: 4px; }
.reset-demo:hover { color: var(--pine) !important; }
.btn-outline-dark { border-color: var(--line); color: var(--ink); }
.btn-outline-dark:hover { background: var(--pine); color: #fff; border-color: var(--pine); }

.deck-hr { border-color: var(--line); margin: 16px 0; }
.deck-foot { font-size: 11px; color: var(--muted); line-height: 1.7; }
.deck-foot code { color: var(--pine); background: #ecefe3; padding: 1px 5px; border-radius: 5px; }
.deck-foot a { color: var(--muted); text-decoration: none; }
.deck-foot a:hover { color: var(--pine); }

/* ---- sidebar site bio ------------------------------------------------- */
.site-bio { display: flex; gap: 8px; align-items: flex-start; background: #f1f4ea; border: 1px solid var(--line);
  border-left: 3px solid var(--pine); border-radius: 8px; padding: 8px 10px; margin: -4px 0 12px;
  font-size: 12px; color: #41513f; line-height: 1.45; }
.site-bio .bi { color: var(--pine); margin-top: 2px; flex: none; }
[data-bs-theme="dark"] .site-bio { background: #16261d; color: var(--muted); }

/* ---- hero header / splash banner -------------------------------------- */
.app-hero {
  background: linear-gradient(120deg, var(--pine) 0%, var(--pine2) 55%, var(--gold-ink) 140%);
  color: #fff; padding: 22px 26px; border-radius: 14px; margin-bottom: 16px;
  box-shadow: 0 6px 20px -8px var(--shadow);
}
.app-title { font-weight: 600; font-size: 32px; margin: 0; color: var(--gold); letter-spacing: .2px;
  font-family: "Fraunces", Georgia, serif; }
.app-hero-splash { text-align: left; margin: 0 0 16px; }
.title-tag {
  font-size: 12px; font-weight: 600; letter-spacing: 1.5px; vertical-align: middle;
  margin-left: 8px; text-transform: uppercase; color: #fff;
  border: 1px solid rgba(255,255,255,.5); padding: 2px 8px; border-radius: 20px;
}
.app-subtitle { color: #eaf3e9; font-size: 14.5px; margin: 6px 0 0; max-width: 820px; }

/* ---- cards (Field Notebook recipe) ------------------------------------ */
.card, .bslib-card {
  background: var(--paper) !important; border: 1px solid var(--line) !important;
  border-radius: 10px !important; box-shadow: 0 2px 8px var(--shadow) !important;
  transition: box-shadow .2s, transform .2s;
}
.card:hover { box-shadow: 0 6px 20px -6px var(--shadow) !important; }
.card-header {
  background: var(--pine) !important; color: #fff !important; font-weight: 700;
  border-bottom: none !important; font-size: 14px; letter-spacing: .2px;
}
.card-header .bi { color: #fff; }
.card-header .ch-title { font-family: "Fraunces", Georgia, serif; font-weight: 600; }
.card-header.with-info { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.card-header.with-info > .ch-title { flex: 1 1 auto; min-width: 0; white-space: normal;
  overflow-wrap: anywhere; line-height: 1.25; }

/* ---- nav tabs (the tab strip must stay LIGHT, not forest) ------------- */
.card-header:has(.nav-tabs) {
  background: var(--paper) !important; color: var(--ink) !important;
  padding: 6px 10px 0 !important; border-bottom: 1px solid var(--line) !important;
}
.nav-tabs { border-bottom: none; }
.nav-tabs .nav-link {
  color: var(--ink) !important; border: none !important; font-weight: 600;
  opacity: .68; padding: 10px 14px; transition: .12s;
}
.nav-tabs .nav-link .bi { color: var(--pine); }
.nav-tabs .nav-link:hover { opacity: 1; color: var(--pine) !important; background: #f0f2e8; border-radius: 8px 8px 0 0; }
.nav-tabs .nav-link.active {
  color: var(--pine) !important; opacity: 1; font-weight: 800;
  background: transparent !important; border-bottom: 4px solid var(--gold) !important;
}
.nav-tabs .nav-link.active .bi { color: var(--gold-ink); }

/* ---- tab heads -------------------------------------------------------- */
.main-tabs-wrap { margin-top: 4px; }
.tab-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 14px; padding: 14px 4px 6px; }
.tab-head-text h4 { font-weight: 600; color: var(--pine); margin: 0; font-size: 21px; font-family: "Fraunces", Georgia, serif; }
.tab-head-text p { color: var(--muted); font-size: 13.5px; font-weight: 450; margin: 4px 0 0; max-width: 660px; line-height: 1.5; }
.map-controls { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.sizelab-controls { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.sizelab-controls .form-group, .sizelab-controls .shiny-input-container { margin-bottom: 0; }

/* ---- badges ----------------------------------------------------------- */
.glow-badge {
  display: inline-block; font-weight: 700; font-size: 12px; letter-spacing: .3px;
  border: 1px solid; border-radius: 20px; padding: 3px 12px; color: #fff;
}
.muted, .dim { color: var(--muted); }

/* ---- compact "answer up front" banner (insight_banner) ---------------- */
@keyframes ecReveal { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.chart-insight { display: flex; align-items: center; gap: 9px; margin: 0 0 12px;
  padding: 9px 13px; border: 1px solid var(--line); border-left: 4px solid var(--ci-rail, var(--muted));
  border-radius: 9px; background: linear-gradient(180deg, #f3f1e6 0%, var(--paper) 100%);
  font-size: 13.5px; line-height: 1.4; color: var(--ink); animation: ecReveal .3s ease; }
.chart-insight > .bi { font-size: 17px; color: var(--ci-rail, var(--muted)); flex: none; }
.chart-insight .ci-text { min-width: 0; }
.chart-insight b { font-weight: 800; }
.ci-hero { font-weight: 800; color: var(--ci-rail, var(--ink)); }
.ci-navy { --ci-rail: #2f8f87; } .ci-pine { --ci-rail: #1f7a3f; }
.ci-gold { --ci-rail: #9a5b0e; } .ci-terra { --ci-rail: #b5481f; }
.ci-muted { --ci-rail: var(--muted); }
[data-bs-theme="dark"] .chart-insight { background: linear-gradient(180deg, #1a3026 0%, var(--paper) 100%); }
[data-bs-theme="dark"] .ci-navy { --ci-rail: #5fd0c2; } [data-bs-theme="dark"] .ci-pine { --ci-rail: #6fd093; }
[data-bs-theme="dark"] .ci-gold { --ci-rail: var(--gold-ink); } [data-bs-theme="dark"] .ci-terra { --ci-rail: #e8895f; }
@media (max-width: 560px) { .chart-insight { font-size: 12.5px; padding: 8px 11px; } }

/* ---- Overview home-nav doors ------------------------------------------ */
.home-nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 6px 2px 18px; }
@media (max-width: 900px) { .home-nav { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .home-nav { grid-template-columns: 1fr; } }
.home-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left;
  background: var(--pine); border: 1px solid var(--pine); border-top: 4px solid var(--gold);
  border-radius: 10px; padding: 14px 15px; box-shadow: 0 4px 12px -4px var(--shadow); transition: transform .15s, box-shadow .15s, background .15s; height: 100%; }
.home-btn:hover { transform: translateY(-3px); box-shadow: 0 14px 26px -10px rgba(20,83,42,.5); background: var(--pine2); }
.home-btn, .home-btn > div, .home-btn span { color: #fff !important; }
.home-btn .bi { font-size: 22px; color: var(--gold) !important; margin-bottom: 4px; }
.home-btn > div { font-weight: 800; font-size: 15px; }
.home-btn small { color: #cbe0d2 !important; font-size: 11.5px; font-weight: 400; line-height: 1.3; }
.home-btn-star { border-top-color: var(--gold); box-shadow: 0 8px 18px -8px var(--gold-ink); }

/* ---- splash / landing -------------------------------------------------- */
.splash {
  text-align: center; padding: 30px 24px 26px; max-width: 1040px; margin: 16px auto;
  background: var(--paper); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 4px 16px var(--shadow);
}
.splash h3 { font-weight: 600; color: var(--pine); margin-top: 10px; font-family: "Fraunces", Georgia, serif; }
.splash p { color: var(--muted); font-size: 14px; }
.picker-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 16px 0 6px; }

/* ---- national site-picker map ----------------------------------------- */
.picker-legend {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px 16px; margin: 16px auto 14px; padding: 9px 14px; max-width: 900px;
  background: #f1f4ea; border: 1px solid var(--line); border-radius: 12px;
}
.picker-legend .pl-label { font-weight: 700; color: var(--pine); font-size: 13px; }
.pl-item { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink); }
.pl-dot { width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid #fff;
  box-shadow: 0 0 0 1px var(--line); flex: none; }
.pl-ramp { width: 92px; height: 13px; border-radius: 7px;
  background: linear-gradient(90deg, var(--greenup), var(--gold)); border: 1px solid var(--line); }
.picker-map-wrap { position: relative; margin: 4px auto 6px; }
.picker-map-wrap .leaflet-container {
  border-radius: 16px; border: 1px solid var(--line);
  box-shadow: 0 8px 28px var(--shadow); cursor: pointer; background: #eaf0e6;
}
.shiny-busy .picker-map-wrap .leaflet-container { cursor: progress; }
.picker-map-hint { font-size: 12px; color: var(--muted); margin: 8px 2px 0; text-align: center; }
.picker-map-hint .bi { color: var(--gold-ink); }

/* leaflet site popup card (tap a dot -> Explore | About) */
.pm-pop { min-width: 200px; }
.pm-pop-t { font-weight: 800; color: var(--ink); font-size: 13.5px; }
.pm-pop-s { color: var(--muted); font-size: 11.5px; margin-top: 1px; }
.pm-pop-n { font-size: 12px; color: var(--ink); margin-top: 5px; }
.pm-pop-sub { color: var(--muted); font-size: 11.5px; }
.pm-pop-card .leaflet-popup-content-wrapper { border-radius: 14px; box-shadow: 0 12px 36px rgba(20,40,28,.24); }
.pm-pop-card .leaflet-popup-content { margin: 12px 14px; }
.site-pop { min-width: 210px; }
.site-pop .sp-code { color: var(--muted); font-weight: 700; }
.site-pop .sp-years { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.site-pop .sp-cov-thin { font-size: 11.5px; color: #6e5a2a; background: #fbf3e3; border: 1px solid #efdcae;
  border-radius: 6px; padding: 4px 7px; margin-top: 6px; line-height: 1.4; }
[data-bs-theme="dark"] .site-pop .sp-cov-thin { color: #ecd28a; background: #322a13; border-color: #4a3d18; }
.sp-bio { color: var(--green); font-weight: 600; font-size: 12px; margin-top: 4px; line-height: 1.4; }
.sp-actions { display: flex; flex-direction: column; gap: 7px; margin-top: 11px; }
.sp-btn { display: block; width: 100%; min-height: 44px; border-radius: 10px; font-weight: 700;
  font-size: 13.5px; cursor: pointer; border: 1.5px solid transparent; padding: 8px 12px;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease; }
.sp-btn:hover { transform: translateY(-1px); }
.sp-go { background: var(--pine); color: #fff; box-shadow: 0 6px 16px -8px var(--pine); }
.sp-go:hover { background: var(--pine2); color: #fff; }
.sp-info { background: #fff; color: var(--pine); border-color: var(--line); }
.sp-info:hover { background: #f0f4ec; border-color: var(--pine); }
@media (max-width: 640px) {
  .splash { padding: 22px 14px 18px; }
  .picker-map-wrap .leaflet-container { height: 440px !important; }
}

/* ---- "About this site" modal (instant, from SITE_INDEX) --------------- */
.site-info .si-sec { padding: 10px 0; border-top: 1px solid var(--line); }
.site-info .si-sec:first-child { border-top: 0; padding-top: 2px; }
.si-h { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .8px;
  color: var(--muted); margin-bottom: 5px; }
.si-row { font-size: 14px; color: var(--ink); }
.si-bio { color: var(--green); font-weight: 600; margin-top: 2px; }
.si-coords { font-size: 12px; color: var(--muted); margin-top: 3px; }
.si-coords .bi { color: var(--terra); }
.si-code { color: var(--muted); font-weight: 700; }
.si-stats { display: flex; gap: 10px; margin: 4px 0 8px; }
.si-stat { flex: 1; background: var(--bg); border-radius: 10px; padding: 9px 8px; text-align: center; }
.si-stat-n { font-weight: 800; font-size: 18px; color: var(--pine); }
.si-stat-l { font-size: 11px; color: var(--muted); }

/* ---- info popovers + caveat ------------------------------------------- */
.info-dot { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  margin-left: auto; border-radius: 50%; color: rgba(255,255,255,.88); cursor: pointer; transition: .15s; font-size: 15px; flex: none; }
.card-header .info-dot:hover { color: #fff; background: rgba(255,255,255,.2); }
.tab-head-text .info-dot { color: var(--muted); margin-left: 6px; }
.tab-head-text .info-dot:hover { color: var(--pine); background: #eaf1e6; }
.popover { background: var(--paper) !important; border: 1px solid var(--line) !important; border-radius: 12px !important; box-shadow: 0 14px 40px -12px var(--shadow) !important; max-width: 340px; }
.popover .popover-header { background: var(--pine) !important; color: #fff !important; border-bottom: none !important; font-weight: 700; font-family: "Fraunces", Georgia, serif; }
.popover .popover-body { color: var(--ink) !important; font-size: 13px; line-height: 1.55; }
.popover .popover-body b { color: var(--pine); }
.caveat { display: block; font-size: 12.5px; color: #6e5a2a; background: #fbf3e3; border: 1px solid #efdcae;
  border-radius: 7px; padding: 6px 9px; margin: 8px 0 0; line-height: 1.45; }
.caveat .bi { color: var(--gold-ink); margin-right: 3px; vertical-align: -1px; }
[data-bs-theme="dark"] .caveat { color: #ecd28a; background: #322a13; border-color: #4a3d18; }
.tooltip-inner { background: var(--ink) !important; color: #fff !important; font-size: 12px; }

/* ---- modal ------------------------------------------------------------ */
.modal-content { border-radius: 14px; border: none; box-shadow: 0 24px 60px -20px rgba(0,0,0,.3); }
.modal-header { background: var(--pine); color: #fff; border-radius: 14px 14px 0 0; border-bottom: none; }
.modal-title { font-weight: 700; font-family: "Fraunces", Georgia, serif; }
.modal-header .btn-close { filter: invert(1) grayscale(1) brightness(2); }

/* ---- about ------------------------------------------------------------ */
.about-wrap { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; padding: 8px 2px; }
@media (max-width: 800px) { .about-wrap { grid-template-columns: 1fr; } }
.about-card { background: var(--paper); border: 1px solid var(--line); border-top: 3px solid var(--pine); border-radius: 12px; padding: 18px 20px; box-shadow: 0 2px 8px var(--shadow); }
.about-card h4 { font-weight: 600; color: var(--pine); font-size: 16px; font-family: "Fraunces", Georgia, serif; }
.about-card p, .about-card li { color: #3a463c; font-size: 13.5px; line-height: 1.6; }
[data-bs-theme="dark"] .about-card p, [data-bs-theme="dark"] .about-card li { color: #c7d3c9; }
.about-card code { color: var(--pine); background: #ecefe3; padding: 1px 5px; border-radius: 5px; }
.about-card a { color: var(--pine); font-weight: 600; }

/* ---- Onset Lab toolbar + pin cards ------------------------------------ */
.sizelab-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.smt-snap-btn, .smt-clear-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 8px; padding: 6px 13px; font-weight: 600; font-size: 13px; cursor: pointer;
}
.smt-snap-btn { background: var(--pine); color: #fff; border: none; }
.smt-snap-btn:hover { background: var(--pine2); }
.smt-clear-btn { background: transparent; color: var(--pine); border: 1px solid var(--line); }
.smt-clear-btn:hover { background: var(--bg); }
.sizelab-hint { color: var(--muted); font-size: 12.5px; margin-left: auto; }

.smt-pinnable { position: relative; }
svg.smt-pin-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 5; }
.smt-pin {
  position: absolute; z-index: 6; max-width: 250px;
  background: rgba(20, 44, 28, 0.97); color: #fff;
  border: 2px solid var(--gold); border-radius: 10px;
  padding: 9px 12px 12px; font-size: 12.5px; line-height: 1.42;
  box-shadow: 0 12px 32px rgba(20, 44, 28, 0.42);
  cursor: grab; transform-origin: top left; touch-action: none;
}
.smt-pin:active { cursor: grabbing; }
.smt-pin b { color: #fff; }
.smt-pin em { color: #cfe0d3; font-style: italic; }
.smt-pin-emoji { font-size: 20px; line-height: 1; }
.smt-pin-stats { color: #b6c9ba; font-size: 11.5px; }
.smt-pin .smt-open {
  display: inline-block; margin-top: 7px; padding: 4px 11px; min-height: 30px;
  color: #14302a; background: var(--gold); border-radius: 6px;
  font-weight: 700; font-size: 12px; cursor: pointer;
}
.smt-pin .smt-open:hover { background: #e89a3a; }
.smt-pin-close {
  position: absolute; top: 1px; right: 6px; background: none; border: none;
  color: #cfe0d3; font-size: 17px; line-height: 1; cursor: pointer; padding: 0;
}
.smt-pin-close:hover { color: #fff; }
.smt-pin-resize {
  position: absolute; right: 2px; bottom: 2px; width: 18px; height: 18px;
  cursor: nwse-resize; touch-action: none; opacity: 0.5;
  background: linear-gradient(135deg, transparent 50%, var(--gold) 50%);
  border-radius: 0 0 8px 0;
}
.smt-pin-resize:hover { opacity: 1; }
@keyframes smtPulse {
  0%, 100% { box-shadow: 0 12px 32px rgba(20, 44, 28, 0.42); }
  50% { box-shadow: 0 0 0 4px var(--gold), 0 12px 32px rgba(20, 44, 28, 0.5); }
}
.smt-pin.smt-pulse { animation: smtPulse 0.5s ease 2; }

/* ---- QC / Plant Profile card (downloadable field record) -------------- */
.qc-card {
  background: linear-gradient(162deg, #fffdf7 0%, #f3f1e6 100%);
  border: 1px solid var(--line); border-top: 4px solid var(--pine);
  border-radius: 12px; padding: 18px 20px;
  box-shadow: 0 8px 28px var(--shadow); position: relative; overflow: hidden;
}
.qc-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.qc-emoji { font-size: 36px; line-height: 1; }
.qc-id { font-size: 23px; font-weight: 700; color: var(--ink); font-family: "Fraunces", Georgia, serif; }
.qc-sci { font-style: italic; color: var(--muted); font-size: 14px; }
.qc-head-badges { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.qc-tiles { display: flex; gap: 12px; flex-wrap: wrap; margin: 14px 0 4px; }
.qc-tile { background: var(--bg); border-radius: 9px; padding: 8px 14px; text-align: center; min-width: 84px; }
.qc-tile-v { font-size: 21px; font-weight: 800; color: var(--pine); }
.qc-tile-l { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.qc-flags { display: flex; flex-direction: column; gap: 7px; margin: 14px 0; }
.qc-flag { display: flex; gap: 9px; align-items: flex-start; padding: 9px 12px;
  border-radius: 9px; font-size: 13px; line-height: 1.4; border-left: 4px solid; }
.qc-flag .bi { flex: 0 0 auto; margin-top: 1px; }
.qc-flag-high { background: #fbe9e2; border-color: var(--terra); color: #7a2c12; }
.qc-flag-warn { background: #fbf1dd; border-color: var(--gold); color: #6e5118; }
.qc-flag-info { background: #e7f1ee; border-color: var(--sky); color: #20493f; }
.qc-flag-ok   { background: #e8f3ea; border-color: var(--green); color: #1a5e2e; }
.qc-section-h { font-size: 13px; font-weight: 700; color: var(--ink); margin: 14px 0 6px; }
.qc-cap-note { color: var(--muted); font-size: 12px; margin: 4px 0 8px; }
.qc-toolbar { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; align-items: center; }
.qc-empty { text-align: center; padding: 38px 18px; color: var(--muted); }
.qc-empty-icon { font-size: 42px; margin-bottom: 8px; }
.qc-empty h4 { color: var(--ink); font-family: "Fraunces", Georgia, serif; }
[data-bs-theme="dark"] .qc-card { background: linear-gradient(162deg, #1c3327 0%, #16261d 100%); }
[data-bs-theme="dark"] .qc-flag-high { background: #3a1f17; color: #f3c0ad; }
[data-bs-theme="dark"] .qc-flag-warn { background: #352c12; color: #ecd28a; }
[data-bs-theme="dark"] .qc-flag-info { background: #16302a; color: #a9e0d4; }
[data-bs-theme="dark"] .qc-flag-ok   { background: #163224; color: #9fd9b3; }

/* ---- business footer / CTA -------------------------------------------- */
.ddl-footer { text-align: center; color: var(--muted); font-size: 13px; padding: 26px 12px 14px; margin-top: 14px; border-top: 1px solid var(--line); }
.ddl-footer strong { color: var(--ink); }
.ddl-footer a { color: var(--pine); font-weight: 700; text-decoration: none; }
.ddl-footer a:hover { text-decoration: underline; }
.custom-cta { display: inline-flex; align-items: center; gap: 8px; background: #fbf3e3; border: 1.5px solid var(--gold); color: var(--pine); font-weight: 700; font-size: 14px; padding: 9px 16px; border-radius: 10px; text-decoration: none; margin-top: 6px; transition: .15s; }
.custom-cta:hover { background: var(--gold); color: #fff; }
.custom-cta .hand { font-size: 17px; }

/* ---- loading overlay (opaque, indeterminate) -------------------------- */
.load-overlay { display: none; position: fixed; inset: 0; z-index: 4000;
  background: rgba(246,243,234,0.97); align-items: center; justify-content: center; }
[data-bs-theme="dark"] .load-overlay { background: rgba(15,28,22,0.97); }
.load-card { background: var(--paper); border-radius: 16px; padding: 28px 34px; width: min(440px, 90vw);
  text-align: center; box-shadow: 0 24px 60px -16px rgba(20,40,28,.28); border-top: 5px solid var(--gold); }
.load-spin { font-size: 44px; animation: float 2.2s ease-in-out infinite; }
.load-title { font-weight: 700; color: var(--pine); font-size: 20px; margin-top: 6px; font-family: "Fraunces", Georgia, serif; }
.load-site { color: var(--pine); font-weight: 700; font-size: 14px; margin: 2px 0 18px; }
.load-bar { position: relative; height: 8px; background: #e6e0d2; border-radius: 20px; overflow: hidden; }
[data-bs-theme="dark"] .load-bar { background: #243a2d; }
.load-bar::after { content: ""; position: absolute; top: 0; left: -45%; height: 100%; width: 45%; border-radius: 20px;
  background: linear-gradient(90deg, transparent, var(--pine), var(--gold), transparent);
  animation: loadslide 1.15s ease-in-out infinite; }
@keyframes loadslide { 0% { left: -45%; } 100% { left: 100%; } }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.load-note { color: var(--muted); font-size: 12px; margin-top: 14px; line-height: 1.45; }

/* ---- click feedback + busy + counters --------------------------------- */
.btn { transition: transform .08s ease, box-shadow .12s ease, background-color .12s ease, filter .12s ease; }
.btn:active { transform: translateY(1px) scale(0.985); filter: brightness(0.94); }
.home-btn:active { transform: translateY(0) scale(0.99); }
.reset-demo:active { filter: brightness(0.9); }
.shiny-busy-indicators-enabled .recalculating { opacity: .55; transition: opacity .2s; }
.count-up { display: inline-block; }

/* let plots shrink on narrow screens */
.shiny-plot-output, .plotly, .leaflet-container { max-width: 100%; }

/* ---- mobile friendliness ---------------------------------------------- */
@media (max-width: 640px) {
  .app-hero { padding: 16px 16px; }
  .app-title { font-size: 23px; }
  .app-subtitle { font-size: 13px; }
  .tab-head { flex-direction: column; align-items: stretch; }
  .nav-tabs .nav-link { padding: 8px 9px; font-size: 13px; }
  .card-header { font-size: 13px; }
  .modal-dialog { margin: 8px; }
}

/* ---- reduced motion --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .load-spin { animation: none !important; }
  .smt-pin.smt-pulse { animation: none !important; }
  .chart-insight { animation: none !important; }
}

/* ============ in-app mascot — loader · splash guide · celebration ============ */
.mascot { display:block; width:100%; height:auto; overflow:visible; }
.mascot-ear-l, .mascot-ear-r { transform-box:fill-box; transform-origin:50% 88%; }
.mascot-eyes { transform-box:fill-box; transform-origin:center; }
@keyframes mascotBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes mascotEarL { 0%,100% { transform: rotate(0); } 50% { transform: rotate(-9deg); } }
@keyframes mascotEarR { 0%,100% { transform: rotate(0); } 50% { transform: rotate(9deg); } }
@keyframes mascotBlink { 0%,92%,100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
/* loader: the mouse bobs + wiggles its ears + blinks while data loads */
.load-spin.mascot-spin { font-size:0; width:92px; height:auto; margin:0 auto 6px; animation:none; }
.mascot-spin .mascot { animation: mascotBob 1.5s ease-in-out infinite; }
.mascot-spin .mascot-ear-l { animation: mascotEarL 1.5s ease-in-out infinite; }
.mascot-spin .mascot-ear-r { animation: mascotEarR 1.5s ease-in-out infinite; }
.mascot-spin .mascot-eyes { animation: mascotBlink 3.4s ease-in-out infinite; }
/* splash guide: a friendly nudge in the corner while no site is loaded */
.splash-guide { position:fixed; right:18px; bottom:16px; z-index:30; display:flex; align-items:flex-end; gap:6px; pointer-events:none; }
.splash-guide .sg-mascot { width:74px; flex:none; }
.splash-guide .sg-mascot .mascot { animation: mascotBob 2.6s ease-in-out infinite; }
.splash-guide .sg-mascot .mascot-ear-l { animation: mascotEarL 2.6s ease-in-out infinite; }
.splash-guide .sg-mascot .mascot-ear-r { animation: mascotEarR 2.6s ease-in-out infinite; }
.splash-guide .sg-mascot .mascot-eyes { animation: mascotBlink 4.2s ease-in-out infinite; }
.splash-guide .sg-bubble { margin-bottom:34px; background:var(--paper); border:1px solid var(--line); color:var(--pine);
  font-size:12.5px; font-weight:700; padding:6px 11px; border-radius:12px 12px 2px 12px;
  box-shadow:0 8px 20px -8px var(--shadow); white-space:nowrap; }
.splash-guide.wave .sg-mascot { transform-box:fill-box; transform-origin:50% 90%; animation: mascotWave 1s ease 3; }
@keyframes mascotWave { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-10deg); } 75% { transform: rotate(10deg); } }
/* celebration: a mouse hops up + fades on a legendary/epic find */
.mascot-cheer { position:fixed; left:50%; bottom:7%; width:118px; z-index:5000; pointer-events:none;
  transform:translateX(-50%); animation: mascotCheerPop 1.7s ease forwards; }
@keyframes mascotCheerPop {
  0% { opacity:0; transform:translate(-50%,42px) scale(.6); }
  20% { opacity:1; transform:translate(-50%,-12px) scale(1.06); }
  45% { transform:translate(-50%,-34px) scale(1); }
  72% { transform:translate(-50%,-24px) scale(1); }
  100% { opacity:0; transform:translate(-50%,-66px) scale(.9); }
}
@media (max-width:640px) { .splash-guide { display:none; } }
@media (prefers-reduced-motion: reduce) {
  .mascot-spin .mascot, .mascot-spin .mascot-ear-l, .mascot-spin .mascot-ear-r, .mascot-spin .mascot-eyes,
  .splash-guide .sg-mascot .mascot, .splash-guide .sg-mascot .mascot-ear-l, .splash-guide .sg-mascot .mascot-ear-r,
  .splash-guide .sg-mascot .mascot-eyes, .splash-guide.wave .sg-mascot { animation:none !important; }
  .mascot-cheer { display:none; }
}