/* =========================================================================
   cascade.css — NEON Driver Cascade additions on top of the shared styles.css.
   ========================================================================= */
.brand-mark { font-size: 24px; }

/* ---- v2: persistent top bar (replaces the sidebar header) -------------- */
.top-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 8px 14px; margin: 2px 0 8px;
  border-bottom: 1px solid var(--line);
}
.top-bar-brand { display: flex; align-items: baseline; gap: 9px; min-width: 0; flex-wrap: wrap; }
.top-bar-brand .tb-mark { font-size: 22px; line-height: 1; flex: none; }
.top-bar-brand .tb-title { font-weight: 800; font-size: 16px; color: var(--pine);
  letter-spacing: .2px; white-space: nowrap; }
.top-bar-brand .tb-sub { font-size: 10.5px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 1.6px; white-space: nowrap; }
.top-bar-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.top-bar-actions .tb-help, .top-bar-actions .tb-report {
  min-height: 44px; display: inline-flex; align-items: center; font-weight: 700; }
.tb-theme { display: flex; align-items: center; gap: 6px; }
.tb-theme-lab { color: var(--muted); font-size: 15px; display: inline-flex; align-items: center; }
.tb-theme .form-check, .tb-theme bslib-input-dark-mode {
  min-height: 44px; display: inline-flex; align-items: center; }
@media (max-width: 620px) {
  .top-bar { padding: 7px 10px; }
  .top-bar-brand .tb-sub { display: none; }
  .top-bar-actions .tb-help .bi + *, .top-bar-actions .tb-report .bi + * { display: none; }
}

/* ---- v2: relocated site/response select panel (was the sidebar) ------- */
.select-panel {
  max-width: 920px; margin: 6px auto 16px; text-align: left;
  background: var(--bg); border: 1px solid var(--line);
  border-left: 4px solid var(--pine); border-radius: 14px;
  padding: 16px 18px; box-shadow: 0 4px 16px var(--shadow);
}
[data-bs-theme="dark"] .select-panel {
  background: linear-gradient(180deg, #112748 0%, var(--paper) 100%);
}
.select-panel .sp-head { font-weight: 700; color: var(--pine); font-size: 13.5px;
  display: flex; align-items: center; gap: 7px; margin-bottom: 12px; }
.select-panel .sp-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end; }
.select-panel .sp-field { flex: 1 1 240px; min-width: 200px; }
.select-panel .sp-field .form-group,
.select-panel .sp-field .shiny-input-container { margin-bottom: 0; width: 100%; }
.select-panel label, .select-panel .control-label {
  color: var(--ink); font-weight: 600; font-size: 13px; }
.select-panel .sp-field .form-control,
.select-panel .sp-field .form-select,
.select-panel .sp-field .selectize-input { min-height: 44px; }
.select-panel .site-bio { margin: 12px 0 2px; }
@media (max-width: 560px) {
  .select-panel { padding: 14px 13px; }
  .select-panel .sp-row { gap: 10px; }
  .select-panel .sp-field { flex: 1 1 100%; min-width: 0; }
}

/* ---- hero band -------------------------------------------------------- */
.hero-band { 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; flex-wrap: wrap; }
.hero-title .hero-sub { color: var(--muted); font-weight: 500; }
.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-navy  { border-top-color: 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: 26px; font-weight: 800; color: var(--ink); line-height: 1; }
.hs-l { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; margin-top: 3px; }

/* ---- sidebar signal chips --------------------------------------------- */
.sig-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 2px; }
.sig-chips-empty { font-size: 12.5px; color: var(--muted); font-style: italic; }
.sig-chip { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 20px; color: #fff; }
.sig-chip.sig-climate, .sig-dot.sig-climate     { background: #43b8e8; color: #06121a; }
.sig-chip.sig-phenology, .sig-dot.sig-phenology { background: #9bd24a; color: #14240a; }
.sig-chip.sig-producer, .sig-dot.sig-producer   { background: #5fb56a; color: #06231f; }
.sig-chip.sig-consumer, .sig-dot.sig-consumer   { background: #fb8a7e; color: #3a0e08; }
.sig-dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; }

/* ---- overview cascade schematic --------------------------------------- */
.cascade-strip { margin-top: 8px; }
.casc-flow { display: flex; align-items: stretch; gap: 6px; flex-wrap: wrap; }
.casc-node { flex: 1 1 0; min-width: 150px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.casc-node.casc-empty { opacity: .5; }
.casc-node-h { font-weight: 800; font-size: 13px; letter-spacing: .04em; display: flex; align-items: center; gap: 5px; margin-bottom: 8px; }
.casc-sigs { display: flex; flex-direction: column; gap: 5px; }
.casc-sig { font-size: 12.5px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 7px; padding: 4px 9px; }
.casc-sigs em { font-size: 12px; color: var(--muted); }
.casc-arrow { display: flex; align-items: center; color: var(--muted); font-size: 20px; }
@media (max-width: 800px){ .casc-arrow { transform: rotate(90deg); align-self: center; } }

/* ---- link agreement chips (beside ladder) ----------------------------- */
.link-chips { display: flex; flex-direction: column; gap: 9px; }
.link-chip { border: 1px solid var(--line); border-left-width: 4px; border-radius: 10px; padding: 9px 11px; background: var(--paper); }
.link-chip.lc-consistent  { border-left-color: #2dd4bf; }
.link-chip.lc-apparent    { border-left-color: #e0b43a; }
.link-chip.lc-counter     { border-left-color: #fb8a7e; }
.link-chip.lc-exploratory { border-left-color: #9fb0cf; }
.link-chip.lc-insufficient{ border-left-color: #6b7a89; }
.lc-top { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; font-size: 12.5px; }
.lc-from, .lc-to { font-weight: 700; color: var(--ink); }
.lc-lag { margin-left: auto; font-size: 10.5px; color: var(--muted); background: var(--bg); border-radius: 12px; padding: 1px 7px; }
.lc-mid { display: flex; gap: 9px; align-items: baseline; margin: 5px 0 3px; font-size: 12px; }
.lc-prior { color: var(--muted); }
.lc-r { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.lc-n { color: var(--muted); font-size: 11px; }
.lc-verdict { font-size: 11.5px; line-height: 1.35; }

/* ---- signal + driver tables ------------------------------------------- */
.sig-tbl td, .driver-tbl td { vertical-align: middle; }
.st-unit, .st-yr, .dt-prior { color: var(--muted); font-size: 12px; }
.dt-r, .dt-n { font-variant-numeric: tabular-nums; text-align: center; }
.dt-chip { display: inline-block; color: #fff; font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 20px; white-space: nowrap; }
.pr-note { font-size: 11.5px; color: var(--muted); max-width: 360px; }

/* ---- driver-lab scatter note ------------------------------------------ */
.scatter-note { margin-top: 8px; font-size: 13px; color: var(--ink); }
.scatter-note .sn-lag { color: var(--muted); font-size: 12px; }

[data-bs-theme="dark"] .hero-stat,
[data-bs-theme="dark"] .link-chip,
[data-bs-theme="dark"] .casc-sig { background: var(--paper); }
[data-bs-theme="dark"] .casc-node { background: rgba(255,255,255,0.03); }

/* ---- plain-English glossary in the About panel ---- */
.about-plain { border-left: 4px solid var(--green, #1a7f37); }
.gloss-item { margin: 9px 0; font-size: 13.5px; line-height: 1.5; }
.gloss-item b { color: var(--ink); display: inline; }
.gloss-item > b:first-child { display: block; color: var(--pine, #0C234B); font-size: 13px; margin-bottom: 1px; }
.gloss-item span { color: #3b4f63; }
[data-bs-theme="dark"] .gloss-item span { color: #b9c6d6; }
[data-bs-theme="dark"] .gloss-item > b:first-child { color: #9fc6ff; }
.ladder-note { font-size: 12px; color: var(--muted, #6b7a89); margin: 2px 0 8px; display:flex; gap:6px; align-items:baseline; }

/* ====================================================================== *
 *  Overhaul additions: verdict sentence, biome tag, handoffs, seasonal,   *
 *  cross-site scoreboard.                                                 *
 * ====================================================================== */

/* ---- hero verdict sentence (lead with the answer) --------------------- */
.hero-verdict { font-size: 15px; line-height: 1.5; color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-left: 4px solid var(--pine); border-radius: 12px;
  padding: 12px 16px; margin: 0 0 12px; box-shadow: 0 4px 14px var(--shadow); }
.hero-verdict b { color: var(--ink); }
.biome-tag { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .03em;
  text-transform: uppercase; padding: 2px 9px; border-radius: 20px; margin-right: 8px;
  vertical-align: middle; color: #fff; background: var(--pine); white-space: nowrap; }
.biome-tag.biome-water { background: #43b8e8; color: #06121a; }
.biome-tag.biome-temp  { background: #5fb56a; color: #06231f; }

/* ---- section handoff chips (parallel tabs -> guided sequence) --------- */
.tab-handoff { display: flex; justify-content: flex-end; margin: 6px 2px 2px; }
.handoff-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700;
  color: #fff; background: var(--pine); border-radius: 22px; padding: 8px 16px; text-decoration: none;
  box-shadow: 0 3px 10px var(--shadow); transition: transform .12s ease, background .12s ease; }
.handoff-chip:hover { background: var(--cardinal, #AB0520); color: #fff; transform: translateX(2px); }

/* ---- expected / not-expected cues on chips + table ------------------- */
.lc-dim { opacity: .5; }
.lc-exp { margin-left: auto; font-size: 9.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
  color: #2dd4bf; background: rgba(45,212,191,.14); border-radius: 12px; padding: 1px 7px; }
.lc-top .lc-lag + .lc-exp { margin-left: 6px; }
tr.dt-dim { opacity: .55; }
.dt-exp { color: #1a7f37; font-weight: 800; }

/* ---- seasonal climate reveal ----------------------------------------- */
.seasonal-note { font-size: 13px; color: var(--muted); font-style: italic; display:flex; gap:6px; align-items:baseline; margin: 4px 0 8px; }
.seasonal-cmps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin-top: 10px; }
.seasonal-cmp { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px; }
.sc-title { font-weight: 800; font-size: 13px; color: var(--ink); margin-bottom: 7px; }
.sc-row { display: flex; justify-content: space-between; align-items: baseline; padding: 3px 0; font-size: 13px; }
.sc-k { color: var(--muted); }
.sc-v { font-weight: 800; font-variant-numeric: tabular-nums; }
.sc-weak { color: #9fb0cf; }
.sc-strong { color: #5fb56a; }
/* non-colour cue on the STRONGER (seasonal) value, so the weak/strong contrast never
   rests on the ~1.2:1 green luminance difference alone (colour-vision safe) */
.sc-stronger { display: inline-flex; align-items: center; gap: 1px; margin-left: 6px;
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: #2f7d44; background: rgba(95,181,106,.16); border: 1px solid rgba(95,181,106,.4);
  border-radius: 7px; padding: 1px 5px 1px 3px; vertical-align: middle; }
[data-bs-theme="dark"] .sc-stronger { color: #86c98e; background: rgba(95,181,106,.14); border-color: rgba(95,181,106,.34); }
.sc-p { font-weight: 500; font-size: 11px; color: var(--muted); margin-left: 5px; opacity: 0.85; }
.sc-n { font-weight: 500; font-size: 11px; color: var(--muted); margin-left: 5px; opacity: 0.85; }
.precip-coverage-note { display: flex; gap: 6px; align-items: baseline; margin: 10px 0 0;
  font-size: 12px; line-height: 1.45; color: var(--muted); font-style: italic; }

/* ---- pooled headline -------------------------------------------------- */
.pooled-tension { display: flex; gap: 7px; align-items: baseline; margin: 8px 0 0; padding: 9px 12px;
  font-size: 12.5px; line-height: 1.5; color: var(--ink); background: rgba(201,163,0,.10);
  border: 1px solid rgba(201,163,0,.32); border-radius: 10px; }
[data-bs-theme="dark"] .pooled-tension { background: rgba(255,210,74,.08); border-color: rgba(255,210,74,.28); }
.pooled-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.pooled-row { display: grid; grid-template-columns: minmax(170px, 1.4fr) minmax(80px, 1fr) minmax(180px, 1.2fr);
  gap: 12px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
.pooled-row.pooled-sig { border-color: #2dd4bf; box-shadow: inset 3px 0 0 #2dd4bf; }
.pl-link { font-weight: 700; color: var(--ink); font-size: 13px; }
.pl-lag { color: var(--muted); font-weight: 500; font-size: 11px; }
.pl-bar-wrap { background: var(--bg); border-radius: 20px; height: 12px; overflow: hidden; }
.pl-bar { height: 100%; background: linear-gradient(90deg, #5eead4, #2dd4bf); border-radius: 20px; }
.pooled-row:not(.pooled-sig) .pl-bar { background: linear-gradient(90deg, #44567a, #6b7d96); }
.pl-stat { font-size: 12px; color: var(--ink); display: flex; gap: 9px; align-items: baseline; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.pl-p { color: var(--muted); }
.pooled-sig .pl-p { color: #2dd4bf; font-weight: 800; }
.pl-r { color: var(--muted); }
/* under-floor (<3 sites): demoted out of the headline rank, no p, dimmed */
.pooled-under { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); }
.pu-head { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700;
  color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 7px; }
.pooled-row.pooled-underfloor { grid-template-columns: minmax(170px, 1.4fr) minmax(180px, 1.2fr);
  opacity: .68; border-style: dashed; background: transparent; }
.pl-notpool { color: var(--muted); font-style: italic; }

/* ---- cross-site scoreboard grid -------------------------------------- */
.sb-scroll { overflow-x: auto; }
.sb-table { border-collapse: separate; border-spacing: 2px; font-size: 11px; width: 100%; }
.sb-table th.sb-col { font-size: 10px; font-weight: 700; color: var(--muted); text-align: center; line-height: 1.2;
  padding: 4px 3px; vertical-align: bottom; min-width: 58px; }
.sb-table th.sb-site, .sb-table td.sb-site { text-align: left; position: sticky; left: 0; background: var(--paper); z-index: 2; min-width: 96px; }
.sb-sitelink { font-weight: 800; color: var(--pine); text-decoration: none; }
.sb-sitelink:hover { color: var(--cardinal, #AB0520); text-decoration: underline; }
.sb-biome { font-size: 9.5px; color: var(--muted); line-height: 1.1; }
.sb-cell { text-align: center; color: #fff; font-weight: 700; font-variant-numeric: tabular-nums;
  border-radius: 6px; padding: 6px 4px; min-width: 54px; letter-spacing: .2px; transition: outline-color .1s; }
.sb-cell.sb-consistent  { background: #2dd4bf; color: #06231f; }
.sb-cell.sb-apparent    { background: #e0b43a; color: #2e2406; }
.sb-cell.sb-counter     { background: #fb8a7e; color: #3a0e08; }
.sb-cell.sb-exploratory { background: #4a5d78; color: #dbe6f5; }
.sb-cell.sb-insufficient{ background: #1c2c48; color: #8fa3c2; }
.sb-cell.sb-na          { background: transparent; }
.sb-cell.sb-dim { opacity: .42; }
/* out-of-prior "hit": a consistent/apparent verdict outside its biome. A subtle
   top-right corner wedge marks it so a colour-scan can't miscount it as an in-prior
   win — the cell's hover/tap title explains it's out-of-biome corroboration. */
.sb-cell.sb-outprior { position: relative; opacity: .6; }
.sb-cell.sb-outprior::after { content: ""; position: absolute; top: 0; right: 0;
  border-width: 0 7px 7px 0; border-style: solid; border-color: transparent rgba(255,255,255,.85) transparent transparent; }
/* the inline legend swatch mirroring the corner wedge */
.sb-outprior-key { display: inline-block; width: 14px; height: 14px; border-radius: 3px;
  background: #2dd4bf; position: relative; vertical-align: middle; opacity: .6; }
.sb-outprior-key::after { content: ""; position: absolute; top: 0; right: 0;
  border-width: 0 6px 6px 0; border-style: solid; border-color: transparent rgba(255,255,255,.9) transparent transparent; }
.sb-key { display: inline-block; color: #fff; font-weight: 700; font-size: 10px; padding: 1px 6px; border-radius: 10px; }
.sb-key.sb-consistent { background:#2dd4bf; color:#06231f; } .sb-key.sb-apparent { background:#e0b43a; color:#2e2406; }
.sb-key.sb-counter { background:#fb8a7e; color:#3a0e08; } .sb-key.sb-exploratory { background:#4a5d78; color:#dbe6f5; }
.sb-key.sb-insufficient { background:#1c2c48; color:#8fa3c2; }
[data-bs-theme="dark"] .hero-verdict, [data-bs-theme="dark"] .pooled-row,
[data-bs-theme="dark"] .seasonal-cmp { background: rgba(255,255,255,0.03); }
[data-bs-theme="dark"] .sb-table th.sb-site, [data-bs-theme="dark"] .sb-table td.sb-site { background: #14233b; }

/* ---- codebook + downloads -------------------------------------------- */
.codebook-notes { margin: 12px 0 4px; padding-left: 18px; }
.codebook-notes li { font-size: 12.5px; line-height: 1.5; color: var(--ink); margin: 5px 0; }
.codebook-dl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.codebook-dl-note { font-size: 11.5px; color: var(--muted); font-style: italic; }

/* ---- producer standing-stock backdrop (veg basal area) --------------- */
.standing-stock { margin-top: 10px; font-size: 13px; color: var(--ink); background: var(--bg);
  border: 1px solid var(--line); border-left: 3px solid var(--green, #1a7f37); border-radius: 10px;
  padding: 8px 12px; display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.standing-stock .ss-note { color: var(--muted); font-size: 12px; }
.sb-ba { color: var(--green, #1a7f37); font-weight: 600; }
[data-bs-theme="dark"] .standing-stock { background: rgba(255,255,255,0.03); }

/* ---- scatter year-detail card (tap a dot) ---------------------------- */
.scatter-detail { margin-top: 10px; border: 1px solid var(--line); border-left: 3px solid var(--sky, #2f7fb5);
  border-radius: 10px; padding: 9px 12px; background: var(--bg); }
.sd-head { display: flex; align-items: center; gap: 5px; font-size: 13.5px; color: var(--ink); }
.sd-clear { margin-left: auto; color: var(--muted); text-decoration: none; }
.sd-clear:hover { color: var(--cardinal, #AB0520); }
.sd-pair { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 7px 0; font-size: 13px; font-weight: 600; }
.sd-driver { color: var(--sky, #2f7fb5); }
.sd-resp { color: var(--green, #1a7f37); }
.sd-sigs { display: flex; flex-wrap: wrap; gap: 5px; }
.sd-chip { font-size: 11.5px; color: var(--ink); background: var(--paper); border: 1px solid var(--line);
  border-radius: 7px; padding: 2px 8px; font-variant-numeric: tabular-nums; }
.sd-chip b { color: var(--muted); font-weight: 600; }
[data-bs-theme="dark"] .scatter-detail { background: rgba(255,255,255,0.03); }
[data-bs-theme="dark"] .sd-chip { background: rgba(255,255,255,0.04); }

/* ---- inline concept info dots (cpop) --------------------------------- */
.concept-i { display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  color: var(--sky, #2f7fb5); opacity: .7; font-size: .82em; vertical-align: middle; transition: opacity .12s ease;
  /* keep the small inline glyph but give this disclosure trigger a >=44px hit box;
     negative margins absorb the padding so surrounding text isn't pushed around */
  min-width: 44px; min-height: 44px; padding: 13px; margin: -13px -13px -13px -9px; box-sizing: content-box; }
.concept-i:hover { opacity: 1; }
.casc-node-h .concept-i { margin-left: auto; }   /* push the layer ⓘ to the right of the node header */

/* ---- Pulse Tracer banner --------------------------------------------- */
.pulse-banner { display: flex; gap: 9px; align-items: baseline; flex-wrap: wrap;
  font-size: 13px; line-height: 1.5; border-radius: 10px; padding: 9px 13px; margin: 2px 0 10px; }
.pulse-idle { background: var(--bg); color: var(--ink); border: 1px dashed var(--line); }
.pulse-active { background: rgba(255,210,0,0.12); color: var(--ink); border: 1px solid var(--gold, #FFD200); }
.pulse-key { font-weight: 700; white-space: nowrap; }
.pulse-key.pk-match { color: #2dd4bf; }
.pulse-key.pk-miss { color: #fb8a7e; }
.pulse-clear { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--cardinal, #AB0520); text-decoration: none; white-space: nowrap; }
.pulse-clear:hover { text-decoration: underline; }
[data-bs-theme="dark"] .pulse-idle { background: rgba(255,255,255,0.04); }

/* ---- QC-flag panel (§7 gold standard) — desert-night, click-to-expand --
   Standardized .qc-flag-<level> convention (not .qc-flag.<level>); each chip
   expands to its offending rows on click. Levels: high · warn · info · clean. */
.qc-section-h { font-size: 14px; font-weight: 700; color: var(--ink); margin: 2px 0 8px;
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.qcf-sub { font-weight: 500; font-size: 12px; color: var(--muted); }
.qc-flags { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 10px; }
.qc-flag { display: flex; gap: 10px; align-items: flex-start; padding: 10px 13px;
  border-radius: 10px; font-size: 13px; line-height: 1.45; border-left: 4px solid; border: 1px solid var(--line); border-left-width: 4px; }
.qc-flag-high  { background: rgba(251,138,126,.12); border-left-color: #fb8a7e; color: var(--ink); }
.qc-flag-warn  { background: rgba(224,180,58,.12);  border-left-color: #e0b43a; color: var(--ink); }
.qc-flag-info  { background: rgba(67,184,232,.12);   border-left-color: #43b8e8; color: var(--ink); }
.qc-flag-clean { background: rgba(95,181,106,.12);   border-left-color: #5fb56a; color: var(--ink); }
.qc-flag > .bi { flex: 0 0 auto; margin-top: 2px; font-size: 16px; }
.qc-flag-high  > .bi { color: #fb8a7e; } .qc-flag-warn > .bi { color: #e0b43a; }
.qc-flag-info  > .bi { color: #43b8e8; } .qc-flag-clean > .bi { color: #5fb56a; }
.qc-flag-click { cursor: pointer; transition: transform .1s ease, box-shadow .1s ease; }
.qc-flag-click:hover { transform: translateY(-1px); box-shadow: 0 5px 16px var(--shadow); }
.qc-flag-click:focus-visible { outline: 2px solid #43b8e8; outline-offset: 2px; }
.qcf-body { flex: 1 1 auto; min-width: 0; }
.qcf-title { font-weight: 700; font-size: 13.5px; color: var(--ink); display: flex; align-items: center; gap: 7px; }
.qcf-n { font-size: 11px; font-weight: 800; color: #fff; background: rgba(0,0,0,.45);
  border-radius: 11px; padding: 1px 8px; font-variant-numeric: tabular-nums; }
.qcf-detail { font-size: 12.5px; line-height: 1.45; margin-top: 3px; color: var(--ink); opacity: .92; }
.qcf-go { flex: 0 0 auto; opacity: .5; align-self: center; color: var(--muted); }
.qcf-hint { font-size: 11.5px; color: var(--muted); margin: 2px 2px 0; display: flex; align-items: center; gap: 5px; }
.qc-inspector { margin: 10px 0 4px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--bg); }
.qci-head { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink); margin-bottom: 8px; }
.qc-cap-scroll { max-height: 320px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; }
.qc-toolbar { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; align-items: center; }
[data-bs-theme="dark"] .qc-flag,
[data-bs-theme="dark"] .qc-inspector { background: rgba(255,255,255,0.03); }
[data-bs-theme="dark"] .qc-flag-high  { background: rgba(251,138,126,.14); }
[data-bs-theme="dark"] .qc-flag-warn  { background: rgba(224,180,58,.14); }
[data-bs-theme="dark"] .qc-flag-info  { background: rgba(67,184,232,.14); }
[data-bs-theme="dark"] .qc-flag-clean { background: rgba(95,181,106,.14); }

/* ---- mobile reflow (phones) ------------------------------------------ */
@media (max-width: 800px) {
  .hero-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-verdict { font-size: 14px; padding: 11px 13px; }
  .seasonal-cmps { grid-template-columns: 1fr; }
  .pooled-row { grid-template-columns: 1fr; gap: 4px; }
  .pl-bar-wrap { height: 8px; }
  .sb-table { font-size: 10px; }
  .sb-cell { min-width: 44px; padding: 4px 2px; }
  .tab-handoff { justify-content: stretch; }
  .handoff-chip { width: 100%; justify-content: center; }
}

/* ====================================================================== *
 *  PREMIUM DDL THEME — motion, sheen, holographics, movement.            *
 *  Brand palette: navy #0C234B · cardinal #AB0520 · gold #FFD200 ·       *
 *  sky #2f7fb5 · green #1a7f37, on warm paper. Light-first; dark-aware.  *
 *  Every animation is gated by prefers-reduced-motion at the bottom.     *
 * ====================================================================== */
@property --mx { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
@property --my { syntax: "<percentage>"; inherits: true; initial-value: 50%; }

@keyframes ddlDrift { to { background-position: 28% 16%, 74% 10%, 44% 86%, 0 0; } }
@keyframes ddlFadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes ddlSheen { 0% { left: -65%; opacity: 0; } 12% { opacity: .85; } 100% { left: 135%; opacity: 0; } }
@keyframes ddlHoloShift { from { background-position: var(--mx,50%) var(--my,50%), 0% 50%; } to { background-position: var(--mx,50%) var(--my,50%), 240% 50%; } }
@keyframes ddlFloat { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-5px) rotate(3deg); } }
@keyframes ddlWinGlow { 0%,100% { box-shadow: inset 3px 0 0 #2dd4bf, 0 4px 14px rgba(0,0,0,.25); } 50% { box-shadow: inset 3px 0 0 #2dd4bf, 0 0 22px rgba(45,212,191,.40); } }
@keyframes ddlNodeWave { 0%,100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 6px 22px rgba(47,127,181,.22), inset 0 0 0 1px rgba(47,127,181,.25); } }
@keyframes ddlArrowFlow { 0% { transform: translateX(-3px); opacity:.45; } 50% { transform: translateX(3px); opacity:1; } 100% { transform: translateX(-3px); opacity:.45; } }
@keyframes ddlBadgeShine { to { background-position: 240% 0; } }
@keyframes ddlStars { to { background-position: 0 220px, 0 220px, 0 220px, 0 220px; } }

/* ---- (1) living aurora backdrop — brand-tinted gradients drift behind it all ---- */
html { background: var(--bg, #eef2f8); }
body { background-color: transparent !important; }   /* let the fixed aurora show through */
[data-bs-theme="dark"] html { background: #070d1f; }
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(820px 480px at 4% -8%, rgba(47,127,181,0.13), transparent 60%),
    radial-gradient(760px 460px at 112% 0%, rgba(12,35,75,0.10), transparent 60%),
    radial-gradient(720px 520px at 50% 120%, rgba(255,210,0,0.07), transparent 62%),
    linear-gradient(180deg, var(--bg, #eef2f8), var(--bg, #eef2f8));
  background-size: 170% 170%, 170% 170%, 170% 170%, 100% 100%;
  background-position: 0% 0%, 100% 0%, 50% 100%, 0 0;
  animation: ddlDrift 34s ease-in-out infinite alternate;
}
[data-bs-theme="dark"] body::before {
  background:
    radial-gradient(820px 480px at 4% -8%, rgba(45,212,191,0.16), transparent 60%),
    radial-gradient(760px 460px at 112% 0%, rgba(251,138,126,0.12), transparent 60%),
    radial-gradient(720px 520px at 50% 120%, rgba(255,210,74,0.07), transparent 62%),
    linear-gradient(180deg, #0b1733, #070d1f);
  background-size: 170% 170%, 170% 170%, 170% 170%, 100% 100%;
}

/* ---- (2) THE SHOWPIECE: the hero becomes a navy command band (matches the hub) -- */
/* flex:0 0 auto is load-bearing, not cosmetic: page_fillable makes <body> a
   fixed-height flex COLUMN and pins its direct children with `.bslib-page-fill
   > * { flex:0 0 auto }`. But heroStats' uiOutput wrapper is display:contents,
   so the real flex item is THIS .hero-band (a DOM grandchild) which that
   selector never reaches — leaving it the CSS default flex:0 1 auto. On a short
   viewport the overflowing column then dumps ALL its shrink pressure onto the
   one shrinkable child, crushing the band to a ~34px sliver (overflow:hidden
   clips the title and hides the verdict + stat tiles). Pin it like its siblings. */
.hero-band { flex: 0 0 auto; position: relative; overflow: hidden; border-radius: 18px;
  padding: 18px 20px 16px; margin: 4px 0 16px; color: #fff;
  background: radial-gradient(125% 150% at 16% -12%, #15425f 0%, #0b1733 46%, #070d1f 100%);
  box-shadow: 0 18px 46px rgba(3,8,20,.45), inset 0 0 0 1px rgba(45,212,191,.18); }
.hero-band::after {            /* teal/coral/gold nebula speckle — the desert-night signature */
  content:""; position:absolute; inset:0; opacity:.6; pointer-events:none; z-index:0;
  background:
    radial-gradient(48px 48px at 10% 26%, rgba(45,212,191,.18), transparent 70%),
    radial-gradient(66px 66px at 86% 16%, rgba(251,138,126,.14), transparent 70%),
    radial-gradient(54px 54px at 64% 94%, rgba(255,210,74,.12), transparent 70%); }
.hero-band::before {           /* drifting STARFIELD — bridges to the desert-night cover */
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.55;
  background-repeat: repeat; background-size: 210px 220px, 210px 220px, 210px 220px, 210px 220px;
  background-image:
    radial-gradient(1.4px 1.4px at 30px 40px, rgba(255,255,255,.6), transparent),
    radial-gradient(1.2px 1.2px at 150px 90px, rgba(180,220,255,.5), transparent),
    radial-gradient(1.5px 1.5px at 90px 175px, rgba(255,210,0,.4), transparent),
    radial-gradient(1.1px 1.1px at 175px 28px, rgba(255,255,255,.45), transparent);
  animation: ddlStars 120s linear infinite; }
.hero-band > * { position: relative; z-index: 1; }
.hero-title { color: #fff; }
.hero-title .hero-sub { color: rgba(255,255,255,.6); }
.hero-band .hero-title svg, .hero-band .hero-title .bi { color: var(--gold); }
.hero-band .concept-i { color: rgba(255,255,255,.72); }
.brand-mark { display: inline-block; animation: ddlFloat 6s ease-in-out infinite; }

/* the verdict sentence: a frosted glass card with a pointer-tracked holographic sheen */
.hero-verdict { position: relative; overflow: hidden; isolation: isolate; color: #eaf1fb;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: 14px;
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); box-shadow: 0 8px 26px rgba(0,0,0,.22);
  transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .3s ease; }
.hero-verdict b { color: #fff; position: relative; z-index: 1; }
.hero-verdict i { color: #cfe0f5; }
.hero-verdict::before {            /* animated rainbow top edge */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; z-index: 3;
  background: linear-gradient(90deg, #2f7fb5, #FFD200, #AB0520, #5fae3a, #2f7fb5);
  background-size: 260% 100%; animation: ddlBadgeShine 6s linear infinite; }
.hero-verdict::after {             /* iridescent sheen + cursor glare (color-dodge pops on navy) */
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  background:
    radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.5), transparent 40%),
    repeating-linear-gradient(108deg, rgba(120,200,255,.5) 0%, rgba(255,224,138,.5) 16%, rgba(150,238,170,.45) 32%, rgba(255,150,170,.45) 50%, rgba(120,200,255,.5) 66%);
  background-size: auto, 240% 240%;
  background-position: var(--mx,50%) var(--my,50%), 0% 50%;
  mix-blend-mode: color-dodge; filter: brightness(.9) contrast(1.3); opacity: 0; transition: opacity .45s ease; }
.hero-verdict:hover { transform: translateY(-2px); box-shadow: 0 20px 46px rgba(0,0,0,.34); }
.hero-verdict:hover::after { opacity: .7; animation: ddlHoloShift 3.4s linear infinite; }
@media (hover: none) { .hero-verdict::after { opacity: .4; } }   /* phones: gentle always-on shimmer */

.biome-tag { position: relative; overflow: hidden; }
.biome-tag::after { content:""; position:absolute; inset:0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.55), transparent 70%); background-size: 240% 100%; animation: ddlBadgeShine 4.5s linear infinite; mix-blend-mode: screen; }

/* stat tiles -> translucent glass on the navy band, gold accents */
.hero-stat { background: rgba(255,255,255,.08) !important; border: 1px solid rgba(255,255,255,.16) !important;
  border-top-width: 3px !important; color: #fff; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.hero-stat .hs-v { color: #fff !important; -webkit-text-fill-color: #fff; }
.hero-stat .hs-l { color: rgba(255,255,255,.66); }
.hero-stat.hero-navy { border-top-color: var(--sky) !important; }   .hero-stat.hero-navy .hs-icon  { color: #6db3e0; }
.hero-stat.hero-pine { border-top-color: #5fae3a !important; }      .hero-stat.hero-pine .hs-icon  { color: #7cc46a; }
.hero-stat.hero-gold { border-top-color: var(--gold) !important; }  .hero-stat.hero-gold .hs-icon  { color: var(--gold); }
.hero-stat.hero-terra{ border-top-color: var(--cardinal) !important; } .hero-stat.hero-terra .hs-icon { color: #e0607a; }

/* ---- (3) sheen sweep + hover-lift on the stat tiles, nodes, seasonal cards ------ */
.hero-stat, .casc-node, .seasonal-cmp, .pooled-row {
  position: relative; overflow: hidden; isolation: isolate;
  transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .28s ease, border-color .2s ease; }
.hero-stat::before, .casc-node::before, .seasonal-cmp::before {
  content: ""; position: absolute; top: 0; left: -65%; width: 55%; height: 100%; z-index: 4;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.6), transparent);
  transform: skewX(-18deg); pointer-events: none; opacity: 0; }
.hero-stat:hover::before, .casc-node:hover::before, .seasonal-cmp:hover::before { animation: ddlSheen .85s ease; }
.hero-stat:hover, .seasonal-cmp:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(12,35,75,.16), 0 0 0 1px rgba(47,127,181,.30); }
.hero-stat:hover .hs-icon { transform: scale(1.12) rotate(-4deg); transition: transform .25s ease; }

/* ---- (4) the cascade schematic FLOWS — a wave glides climate -> consumers ------- */
.casc-node:hover { transform: translateY(-4px); border-color: rgba(47,127,181,.5);
  box-shadow: 0 16px 34px rgba(12,35,75,.16); }
.casc-node:not(.casc-empty) { animation: ddlNodeWave 5.2s ease-in-out infinite; }
.casc-flow .casc-node:nth-of-type(1) { animation-delay: 0s; }
.casc-flow .casc-node:nth-of-type(3) { animation-delay: .5s; }
.casc-flow .casc-node:nth-of-type(5) { animation-delay: 1s; }
.casc-flow .casc-node:nth-of-type(7) { animation-delay: 1.5s; }
.casc-arrow { animation: ddlArrowFlow 2.4s ease-in-out infinite; color: var(--sky, #2f7fb5) !important; }
.casc-flow .casc-arrow:nth-of-type(4) { animation-delay: .3s; }
.casc-flow .casc-arrow:nth-of-type(6) { animation-delay: .6s; }
.casc-sig { transition: transform .16s ease, box-shadow .16s ease; }
.casc-node:hover .casc-sig { transform: translateX(2px); }

/* ---- (5) celebrate the wins: significant pooled row + consistent verdicts glow -- */
.pooled-row.pooled-sig { animation: ddlWinGlow 3.4s ease-in-out infinite; }
.pooled-row:hover { transform: translateX(3px); box-shadow: 0 8px 20px rgba(12,35,75,.12); }
.link-chip.lc-consistent { box-shadow: 0 0 0 1px rgba(45,212,191,.30), 0 0 16px rgba(45,212,191,.16); }
.link-chip { transition: transform .16s ease, box-shadow .2s ease; }
.link-chip:hover { transform: translateX(3px); box-shadow: 0 8px 18px rgba(12,35,75,.14); }
.sb-cell.sb-consistent { position: relative; overflow: hidden; }
.sb-cell.sb-consistent::after { content:""; position:absolute; inset:0; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.45), transparent 65%); background-size: 250% 100%; animation: ddlBadgeShine 5s linear infinite; }
.sb-cell { transition: transform .12s ease, filter .12s ease; }
.sb-cell:hover { transform: scale(1.12); filter: brightness(1.06); z-index: 3; box-shadow: 0 4px 14px rgba(12,35,75,.25); }

/* ---- (6) gradient handoff CTAs + buttons with a sweeping sheen ------------------ */
.handoff-chip { position: relative; overflow: hidden;
  background: linear-gradient(120deg, var(--pine, #0C234B), #16386e) !important; }
.handoff-chip::after { content:""; position:absolute; top:0; left:-60%; width:50%; height:100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.4), transparent); transform: skewX(-18deg); }
.handoff-chip:hover { transform: translateY(-2px) scale(1.015); box-shadow: 0 12px 26px rgba(12,35,75,.30); }
.handoff-chip:hover::after { animation: ddlSheen .8s ease; }
.btn { transition: transform .15s ease, box-shadow .2s ease, filter .15s ease; }
.btn:hover { transform: translateY(-2px); filter: brightness(1.03); }
.custom-cta { position: relative; overflow: hidden; }
.custom-cta::after { content:""; position:absolute; top:0; left:-60%; width:45%; height:100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent); transform: skewX(-18deg); }
.custom-cta:hover::after { animation: ddlSheen 1s ease; }

/* ---- (7) tab-pane entrance + scroll-reveal cards ------------------------------- */
.reveal-card { will-change: opacity, transform; }
html .reveal-card[data-reveal] { opacity: 0; transform: translateY(22px);
  transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1); }
html .reveal-card.is-visible { opacity: 1; transform: none; }
.standing-stock, .pulse-banner, .scatter-detail, .chart-insight { animation: ddlFadeUp .5s cubic-bezier(.22,1,.36,1) both; }

/* the active pulse banner gets an energetic glow */
.pulse-banner.pulse-active { box-shadow: 0 0 0 1px rgba(255,210,0,.4), 0 6px 20px rgba(201,137,47,.18); }

/* info dots pulse softly so they're discoverable */
.concept-i, .info-dot { transition: transform .2s ease, opacity .2s ease; }
.concept-i:hover, .info-dot:hover { transform: scale(1.25); }

/* ---- Search the network -------------------------------------------------------- */
.search-modeswitch { margin: 4px 0 14px; }
.search-modeswitch .radio-inline, .search-modeswitch .form-check-inline { margin-right: 18px; }
.search-controls { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: flex-end; margin-bottom: 6px; }
.search-controls > .form-group, .search-controls > .shiny-input-container { flex: 1 1 280px; margin-bottom: 0; }
.search-summary { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center;
  margin: 4px 0 12px; padding: 9px 13px; border-radius: 11px;
  background: rgba(67,184,232,.08); border: 1px solid rgba(67,184,232,.22); }
.search-summary .ss-count { font-weight: 700; font-size: 15px; color: var(--ink, #eaf2ff); }
.search-summary .ss-count .ss-sub { font-weight: 500; font-size: 12.5px; color: var(--muted); margin-left: 4px; }
.search-summary .ss-conf { font-size: 12px; color: var(--muted); padding: 2px 9px;
  border-radius: 9px; background: rgba(255,210,74,.12); border: 1px solid rgba(255,210,74,.3); }
.search-summary .ss-pooled { flex: 1 1 100%; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.search-foot-caveat { margin-top: 14px; font-size: 12.5px; color: var(--muted); line-height: 1.55;
  padding: 10px 13px; border-radius: 10px; border: 1px dashed rgba(159,176,207,.3); }
/* verdict pills (mirror the scoreboard tier palette) */
.srch-pill { display: inline-block; font-weight: 700; font-size: 10.5px; padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
.srch-consistent  { background:#2dd4bf; color:#06231f; }
.srch-apparent    { background:#e0b43a; color:#2e2406; }
.srch-counter     { background:#fb8a7e; color:#3a0e08; }
.srch-exploratory { background:#4a5d78; color:#dbe6f5; }
.srch-insufficient{ background:#1c2c48; color:#8fa3c2; }
.srch-go { font-weight: 700; text-decoration: none; color: var(--sky, #43b8e8); white-space: nowrap; }
.srch-go:hover { text-decoration: underline; }
.srch-oob { font-size: 10px; color: var(--muted); font-weight: 500; }
.srch-sn { font-weight: 500; font-size: 11px; color: var(--muted); }
/* desert-night DataTables theming so the DT inherits the dark card */
.srch-dt { width: 100% !important; font-size: 12.5px; }
.srch-dt thead th { color: var(--ink, #16243a); border-bottom: 2px solid rgba(127,127,127,.25) !important; }
[data-bs-theme="dark"] .srch-dt, [data-bs-theme="dark"] .srch-dt thead th,
[data-bs-theme="dark"] .srch-dt td { color: var(--ink, #eaf2ff); }
[data-bs-theme="dark"] table.dataTable.stripe tbody tr.odd,
[data-bs-theme="dark"] table.dataTable.display tbody tr.odd { background: rgba(255,255,255,.03); }
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--muted) !important; }
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current,
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  color: var(--ink, #eaf2ff) !important; background: rgba(67,184,232,.18) !important; border-color: rgba(67,184,232,.4) !important; }
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_info,
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_filter,
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate { color: var(--muted) !important; }

/* ---- (8) REDUCED MOTION: kill all motion, keep the static styling -------------- */
@media (prefers-reduced-motion: reduce) {
  body::before, .hero-band::before, .hero-verdict::before, .hero-verdict::after, .biome-tag::after, .brand-mark,
  .casc-node:not(.casc-empty), .casc-arrow, .pooled-row.pooled-sig, .sb-cell.sb-consistent::after,
  .standing-stock, .pulse-banner, .scatter-detail, .chart-insight,
  .hero-stat::before, .casc-node::before, .seasonal-cmp::before, .handoff-chip::after, .custom-cta::after {
    animation: none !important; }
  html .reveal-card[data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero-verdict:hover, .hero-stat:hover, .casc-node:hover, .seasonal-cmp:hover, .pooled-row:hover,
  .link-chip:hover, .handoff-chip:hover, .sb-cell:hover { transform: none; }
  .cascade-guide { transform: none !important; transition: opacity .3s ease !important; }
  .cascade-guide.wave .cg-mascots .mascot-mouse { animation: none !important; }
}

/* ---- first-visit suite-huddle guide: a one-time, dismissible onboarding nudge ------ */
.cascade-guide {
  position: fixed; right: 18px; bottom: 18px; z-index: 1080;
  display: flex; align-items: flex-end; gap: 10px; max-width: 340px;
  padding: 13px 30px 13px 14px; border-radius: 16px;
  background: linear-gradient(135deg, rgba(22,52,94,.97), rgba(7,13,31,.97));
  border: 1px solid rgba(94,234,212,.34);
  box-shadow: 0 18px 44px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.04);
  color: #eaf2ff; opacity: 0; transform: translateY(24px) scale(.96);
  pointer-events: none; transition: opacity .5s ease, transform .5s cubic-bezier(.2,.9,.3,1.25);
}
.cascade-guide.show { opacity: 1; transform: none; pointer-events: auto; }
.cg-mascots { display: flex; align-items: flex-end; flex: 0 0 auto; }
.cg-mascots .mascot { width: 44px; height: 44px; filter: drop-shadow(0 3px 6px rgba(0,0,0,.45)); }
.cg-mascots .mascot-mouse { width: 54px; height: 54px; margin: 0 -12px; position: relative; z-index: 2; }
.cg-mascots .mascot-bird, .cg-mascots .mascot-sprout { z-index: 1; }
.cascade-guide.wave .cg-mascots .mascot-mouse { animation: cgHop .9s ease-in-out 2; transform-origin: bottom center; }
.cg-bubble { font-size: .86rem; line-height: 1.34; }
.cg-bubble b { color: #5eead4; }
.cg-close {
  position: absolute; top: 6px; right: 9px; background: none; border: none;
  color: #9fb0cf; font-size: 19px; line-height: 1; cursor: pointer; padding: 2px 5px; border-radius: 8px;
}
.cg-close:hover { color: #fff; background: rgba(255,255,255,.08); }
@keyframes cgHop { 0%,100% { transform: translateY(0); } 40% { transform: translateY(-10px); } }

/* === Browse all 46 sites — collapsible list (matches the suite siblings) ====== */
/* A closed-by-default <details> under the Overview intro; teal pill summary, a       */
/* scrollable site grid. Tokens are THIS app's accent (--pine = teal, --cardinal).  */
.picker-list { margin: 14px 0 2px; max-width: none; text-align: left; }
/* kill the native disclosure triangle so our chevron is the only marker */
.picker-list > summary { list-style: none; }
.picker-list > summary::-webkit-details-marker { display: none; }
.picker-list-summary {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 40px; padding: 8px 18px; cursor: pointer; user-select: none;
  font-weight: 700; font-size: 13.5px; color: var(--pine);
  background: linear-gradient(180deg, var(--bg) 0%, var(--paper) 100%);
  border: 1px solid var(--line); border-radius: 999px;
  box-shadow: 0 4px 14px -10px var(--shadow);
  transition: color .15s ease, border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.picker-list-summary:hover {
  color: var(--pine2); border-color: var(--pine);
  box-shadow: 0 6px 18px -10px var(--shadow); }
.picker-list > summary:focus-visible { outline: none; }
.picker-list > summary:focus-visible .picker-list-summary {
  border-color: var(--pine); box-shadow: 0 0 0 3px var(--shadow); }
.pls-label { display: inline-flex; align-items: center; gap: 7px; }
.pls-chevron { display: inline-flex; transition: transform .2s ease; color: var(--pine); opacity: .85; }
.picker-list[open] .pls-chevron { transform: rotate(180deg); }
/* the expanded body: scrolls rather than pushing the page */
.picker-list-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 18px;
  margin-top: 12px; padding: 10px 12px;
  max-height: 340px; overflow-y: auto;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--paper); }
.picker-list-link { display: block; padding: 6px 9px; border-radius: 8px; color: var(--ink); font-size: 13px; text-decoration: none; }
.picker-list-link:hover { background: var(--bg); color: var(--pine); }
.picker-list-link b { color: var(--pine); }
.pll-meta { color: var(--muted); font-size: 11.5px; }
@media (max-width: 900px) { .picker-list-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .picker-list-grid { grid-template-columns: 1fr; } }

/* === Significant out-of-biome corroboration mark (scoreboard) ============== *
 * The generic .sb-outprior wedge is white; a SIGNIFICANT out-of-biome hit
 * (p<0.05 AND sign matches) gets a teal wedge + a faint teal ring so a reader
 * can tell genuine cross-biome support from a mere dimmed-tier cell. The cell
 * stays out-of-tally; the mark only names the support (no class-widening). */
.sb-cell.sb-outprior-sig::after { border-color: transparent #2dd4bf transparent transparent; }
.sb-cell.sb-outprior-sig { box-shadow: inset 0 0 0 1.5px rgba(45,212,191,.55); opacity: .72; }

/* === Lag & season explorer (the Lag Experimenter) ========================= *
 * A folded disclosure in the Driver Lab. Matches the app's card look; makes
 * p-hacking visible: off-prior readings are greyed "EXPLORED, not a verdict"
 * and the adjusted p is struck through, the prior lag is a locked gold diamond. */
.lab-exp { margin: 14px 0 4px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--paper); box-shadow: 0 4px 14px var(--shadow); overflow: hidden; }
.lab-exp > summary { list-style: none; cursor: pointer; }
.lab-exp > summary::-webkit-details-marker { display: none; }
.lab-exp-summary { display: flex; align-items: center; gap: 10px; padding: 13px 16px;
  font-weight: 700; font-size: 14px; color: var(--pine); user-select: none; }
.le-label { display: inline-flex; align-items: center; gap: 8px; }
.le-chevron { margin-left: auto; display: inline-flex; color: var(--pine); opacity: .85; transition: transform .2s ease; }
.lab-exp[open] .le-chevron { transform: rotate(180deg); }
.lab-exp > summary:focus-visible { outline: none; }
.lab-exp > summary:focus-visible .lab-exp-summary { box-shadow: inset 0 0 0 2px var(--pine); border-radius: 14px; }
.lab-exp-body { padding: 4px 16px 16px; border-top: 1px solid var(--line); }
.le-intro { font-size: 12.5px; line-height: 1.5; color: var(--ink); margin: 12px 0; display: flex; gap: 7px; align-items: baseline; }
.le-controls { display: grid; grid-template-columns: minmax(220px, 1.4fr) minmax(150px, 1fr) auto auto;
  gap: 12px 16px; align-items: end; margin-bottom: 10px; }
.le-controls .form-group, .le-controls .shiny-input-container { margin-bottom: 0; }
.le-empty, .le-readout .le-empty { font-size: 13px; color: var(--muted); font-style: italic; }
.le-explain { font-size: 12px; color: var(--muted); margin: 8px 0 4px; display: flex; align-items: center; gap: 6px; }
.le-explain-lab { font-style: italic; }

/* ---- Sources / citations panel (About tab) ---- */
.src-panel { margin: 16px 0 4px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.src-panel > summary { list-style: none; cursor: pointer; padding: 12px 16px; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.src-panel > summary::-webkit-details-marker { display: none; }
.src-panel > summary::after { content: "+"; margin-left: auto; color: #e0b43a; font-weight: 800; font-size: 1.2rem; }
.src-panel[open] > summary::after { content: "\2212"; }
.src-body { padding: 4px 18px 16px; border-top: 1px solid var(--line); font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.src-body h6 { color: var(--ink); font-size: 12.5px; font-weight: 800; margin: 13px 0 3px; }
.src-body ol { margin: 0 0 4px; padding-left: 22px; }
.src-body li { margin: 3px 0; }
.src-body .src-lead { margin: 4px 0 2px; }
[data-bs-theme="dark"] .src-panel { background: rgba(255,255,255,0.03); }

/* the readout: headline adjusted-p, stats, the Sidak bar, caveats */
.le-readout { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin: 10px 0;
  background: var(--bg); }
.le-readout-explored { border-style: dashed; opacity: .94; }
.le-headline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: 13.5px; }
.le-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800;
  letter-spacing: .03em; text-transform: uppercase; padding: 2px 9px; border-radius: 20px; white-space: nowrap; }
.le-badge.le-onprior { color: #06231f; background: #2dd4bf; }
.le-badge.le-explored { color: #dbe6f5; background: #4a5d78; }
.le-adjp-label { color: var(--muted); font-size: 12.5px; }
.le-adjp { font-weight: 800; font-variant-numeric: tabular-nums; }
.le-adjp-live { color: var(--ink); }
.le-adjp-off { color: var(--muted); }
.le-adjp-off s { text-decoration: line-through; }
.le-adjp.le-ngate { color: var(--muted); font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.le-stats { display: flex; flex-wrap: wrap; gap: 14px; align-items: baseline; margin: 8px 0 4px; }
.le-r { font-size: 15px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.le-r .le-n { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.le-naive, .le-ci { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.le-naive-note { font-style: italic; opacity: .9; }
.le-sidak { font-size: 12px; color: var(--ink); background: rgba(224,180,58,.12);
  border: 1px solid rgba(224,180,58,.4); border-radius: 8px; padding: 5px 9px; margin: 8px 0 0;
  display: flex; align-items: baseline; gap: 5px; }
.le-offnote { font-size: 11px; color: var(--muted); margin-top: 7px; line-height: 1.45; }
.le-offnote sup { color: #e0b43a; font-weight: 800; }
.le-demo-caption { font-size: 12px; line-height: 1.5; color: var(--ink); margin-top: 9px; padding: 8px 10px;
  background: rgba(255,210,74,.1); border: 1px solid rgba(255,210,74,.35); border-radius: 8px;
  display: flex; gap: 6px; align-items: baseline; }
.le-persistent-caveat { font-size: 12px; line-height: 1.5; color: var(--muted); margin: 10px 0 0;
  display: flex; gap: 7px; align-items: baseline; border-top: 1px dashed var(--line); padding-top: 10px; }
.le-persistent-caveat .bi { color: #e0b43a; flex: 0 0 auto; margin-top: 2px; }

[data-bs-theme="dark"] .lab-exp { background: rgba(255,255,255,0.03); }
[data-bs-theme="dark"] .le-readout { background: rgba(255,255,255,0.03); }

@media (max-width: 800px) {
  .le-controls { grid-template-columns: 1fr; }
}

/* reduced motion: the only animated bit here is the chevron — kill its transition */
@media (prefers-reduced-motion: reduce) {
  .le-chevron { transition: none !important; }
}

/* HK review (2026-06): Hill diversity profile panel + meta-companion list + pooled note */
.hill-panel { margin-top: 12px; }
.hill-intro { font-size: 12.5px; opacity: .9; margin-bottom: 8px; }
.hill-tiles { display: flex; gap: 10px; flex-wrap: wrap; }
.hill-tiles > .hill-tile { flex: 1 1 90px; padding: 10px 8px; }
.hill-lab { font-size: 12px; font-weight: 600; opacity: .85; margin-top: 2px; }
.hill-sub { font-size: 11px; opacity: .55; }
.meta-list { margin: 6px 0 8px; padding-left: 18px; }
.meta-list li { margin: 3px 0; }
.pooled-s4t { font-size: 12px; }
/* scoreboard sort bar (left-aligned, above the grid) */
.sb-sortbar { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; flex-wrap: wrap; }
.sb-sort-lab { font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.sb-sortbar .shiny-input-container, .sb-sortbar .form-group { margin-bottom: 0 !important; }
.sb-sortbar select.form-control, .sb-sortbar select.form-select {
  font-size: 12.5px; height: 34px; padding: 4px 28px 4px 10px; border-radius: 8px;
  cursor: pointer; border-color: var(--line); background-color: var(--paper); }
/* sticky site column: a soft right edge so site names separate from the grid while scrolling */
.sb-table td.sb-site, .sb-table th.sb-site { box-shadow: 7px 0 8px -7px rgba(12,35,75,.16); }
.sb-table th.sb-col { padding-bottom: 8px; }
[data-bs-theme="dark"] .sb-sortbar select.form-control,
[data-bs-theme="dark"] .sb-sortbar select.form-select { background-color: #14233b; color: #dbe6f5; }
/* clickable scoreboard cells -> detail modal */
.sb-cell.sb-clk { cursor: pointer; }
.sb-cell.sb-clk:hover { outline: 2px solid rgba(255,255,255,.7); outline-offset: -2px; }
.sb-detail p { margin: 0 0 10px; line-height: 1.45; }
.sb-detail hr { margin: 12px 0; opacity: .25; }