/* ============================================================
   CRB DST — style.css
   ASU Brand: White sidebar · Maroon + Gold accents · 3D cards
   ============================================================ */

/* ── Fonts ─────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ── Color Variables ────────────────────────────────────────── */
:root {
  --maroon:     #8C1D40;
  --maroon2:    #C62828;
  --gold:       #FFC627;
  --gold2:      #FFB300;
  --navy:       #0D2137;
  --navy2:      #1a3a5c;
  --slate:      #37474f;
  --slate2:     #546e7a;
  --bg:         #F0F4F8;
  --card-bg:    #FFFFFF;
  --border:     #E2E8F0;
  --text-main:  #1e293b;
  --text-muted: #1e293b;   /* no grey — dark text everywhere */
  --header-h:   64px;           /* shared height for sidebar logo + tab header */
}

/* ── Base ───────────────────────────────────────────────────── */
body {
  font-family: 'Inter', sans-serif !important;
  background: var(--bg) !important;
  color: var(--text-main) !important;
  font-size: 15px;
}

/* ════════════════════════════════════════════════════════════
   SIDEBAR  — white, ASU maroon/gold accents
   ════════════════════════════════════════════════════════════ */
.sidebar {
  background: #eef2f6 !important;   /* light tint so the white blocks read as separate cards */
  height: 100vh;
  width: 232px;
  position: fixed;
  top: 0; left: 0;
  z-index: 1000;
  padding: 0 10px 20px;   /* pills now live in the sidebar Quick-links box, not floating */
  overflow-y: auto;
  overflow-x: hidden;
  border-right: none;
  box-shadow: 4px 0 18px rgba(13,33,55,0.12);
}

/* ── Sidebar logo — its own raised 3D card ─────────────────── */
.sidebar-logo {
  background: #ffffff;
  min-height: var(--header-h);
  margin: 10px 0 12px;             /* gap below → separated from the menu */
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: none;
  border-radius: 10px;
  position: relative;
  z-index: 1002;
  box-shadow: 0 5px 14px rgba(13,33,55,0.14);
}

/* ── Sidebar menu — its own raised 3D card, distinct from the header ── */
.sidebar nav {
  background: #ffffff;
  border-radius: 10px;
  padding: 8px 4px !important;
  box-shadow: 0 5px 14px rgba(13,33,55,0.10);
}

.sidebar-logo-text {
  font-size: 26px;
  font-weight: 800;
  color: var(--maroon);
  line-height: 1.05;
  letter-spacing: 1px;
  text-shadow: 0 1px 1px rgba(140,29,64,0.12);
}
.sidebar-logo-img { width: 152px; height: auto; display: block; margin: 3px auto 2px; }

.sidebar-logo-sub {
  font-size: 11px;
  color: #1e293b;
  font-weight: 600;
  letter-spacing: 0.2px;
  text-align: center;
}

/* ── Nav section label ───────────────────────────────────────── */
.nav-section-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--maroon);
  padding: 14px 16px 4px 20px;
  opacity: 0.65;
}

/* ── Nav links ───────────────────────────────────────────────── */
.nav-link {
  color: var(--slate) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  padding: 9px 14px !important;
  border-radius: 6px !important;
  margin: 2px 8px !important;
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  transition: all 0.15s !important;
  text-decoration: none !important;
}

.nav-link:hover {
  background: rgba(140,29,64,0.07) !important;
  color: var(--maroon) !important;
}

.nav-link.active {
  background: var(--maroon) !important;
  color: white !important;
  font-weight: 600 !important;
  box-shadow: 0 3px 10px rgba(140,29,64,0.35) !important;
}

.nav-link .nav-icon {
  width: 16px;
  opacity: 0.75;
}

/* ── Sidebar bottom info ─────────────────────────────────────── */
.sidebar-bottom {
  position: static;
  width: 100%;
  /* clear the floating Why-CRIA / workflow / RIA pills at the bottom-left */
  margin: 12px 0 218px;
  padding: 10px 12px;
  border: none;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(13,33,55,0.10);
}

.sidebar-bottom-text {
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.6;
}

/* ════════════════════════════════════════════════════════════
   MAIN CONTENT
   ════════════════════════════════════════════════════════════ */
.main-content {
  margin-left: 232px;
  padding: 0;
  min-height: 100vh;
}

/* ── Header logo bar ─────────────────────────────────────────── */
.header-logo-bar {
  background: transparent;
  padding: 0 24px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: relative;
  z-index: 1;
  pointer-events: none;
  height: 0;
}

.header-logo-strip {
  position: absolute;
  top: 10px;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 100;
  pointer-events: auto;
}

.header-logo {
  width: 44px;
  height: 44px;
  object-fit: contain;
  border-radius: 50%;
  background: white;
  padding: 4px;
  border: 2px solid white;
  box-shadow: 0 0 0 3px var(--maroon), 0 3px 10px rgba(0,0,0,0.12);
  transition: transform 0.15s, box-shadow 0.15s;
}

.header-logo:hover {
  transform: scale(1.08);
  box-shadow: 0 0 0 3px var(--maroon), 0 0 0 5px var(--gold), 0 6px 16px rgba(0,0,0,0.2);
}

/* ════════════════════════════════════════════════════════════
   TAB HEADER — white, same height as sidebar logo
   ════════════════════════════════════════════════════════════ */
.tab-header {
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(10px) saturate(1.05);
  -webkit-backdrop-filter: blur(10px) saturate(1.05);
  min-height: var(--header-h);
  padding: 14px 22px;
  margin: 0 16px;                  /* matches the title card → aligned, separate cards */
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  color: var(--text-main);
  position: relative;
  overflow: hidden;
  /* Maroon left accent bar */
  border-left: 5px solid var(--maroon);
  /* layered 3D drop shadow — separate raised card */
  box-shadow: 0 8px 20px rgba(13,33,55,0.14),
              0 2px 5px rgba(13,33,55,0.08);
}

/* Maroon + gold bottom gradient line */
.tab-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--maroon) 0%, var(--gold) 55%, transparent 100%);
}

.tab-header h2 {
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 6px 0;
  color: var(--maroon);
  letter-spacing: -0.3px;
  line-height: 1.15;
}

.tab-header p {
  font-size: 14.5px;
  color: #1e293b;
  margin: 0;
  line-height: 1.6;
}

.tab-body {
  padding: 16px 16px;
  zoom: 1.07;               /* base readability lift; A/A/A buttons scale from here */
}

/* ════════════════════════════════════════════════════════════
   INFO TILES — top + left border only, maroon/gold, compact
   ════════════════════════════════════════════════════════════ */
/* ── Start-here guided step cards ── */
.step-card {
  display: block;
  background: #ffffff;
  border-radius: 6px;
  padding: 12px 14px;
  height: 100%;
  border-top: 3px solid var(--maroon);
  border-left: 3px solid var(--maroon);
  box-shadow: -2px -2px 0 0 rgba(0,0,0,0.04), 2px 4px 10px rgba(0,0,0,0.07);
  transform: translateY(0);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.step-card:hover {
  transform: translateY(-2px);
  box-shadow: -3px -3px 0 0 rgba(0,0,0,0.06), 4px 8px 18px rgba(0,0,0,0.12);
}
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-right: 9px;
  border-radius: 50%;
  background: var(--maroon);
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  flex: 0 0 auto;
}

.info-tile {
  border-radius: 4px;
  padding: 9px 28px 9px 12px;
  background: #ffffff;
  color: var(--text-main);
  position: relative;
  overflow: hidden;
  min-height: 78px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  width: 100%;
  /* No border by default — only top + left set by .tile-* */
  border: none;
  border-top: 3px solid var(--maroon);
  border-left: 3px solid var(--maroon);
  box-shadow:
    -2px -2px 0 0 rgba(0,0,0,0.04),
    2px 4px 10px rgba(0,0,0,0.07);
  transform: translateY(0) translateX(0);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.info-tile:hover {
  transform: translateY(-2px) translateX(1px);
  box-shadow:
    -3px -3px 0 0 rgba(0,0,0,0.06),
    4px 8px 18px rgba(0,0,0,0.11);
}

.info-tile-value {
  font-size: 21px;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 4px;
  position: relative;
  z-index: 1;
  color: var(--maroon);
}

/* flagship "open an analysis" tiles — sizing only; all text keeps its own style */
.flag-tile{ min-height:0 !important; padding:10px 12px !important; }
.tab-body a.flag-tile, .crb-card a.flag-tile{ text-decoration:none; }

.info-tile-label {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--text-muted);
  position: relative;
  z-index: 1;
  line-height: 1.3;
}

.info-tile-icon {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  opacity: 0.07;
  z-index: 0;
}

/* Alternate: gold accent tiles */
.tile-gold,
.tile-navy,
.tile-green,
.tile-orange,
.tile-blue,
.tile-purple,
.tile-slate,
.tile-teal {
  border-top-color: var(--gold2);
  border-left-color: var(--gold2);
}
.tile-gold   .info-tile-value,
.tile-navy   .info-tile-value,
.tile-green  .info-tile-value,
.tile-orange .info-tile-value,
.tile-blue   .info-tile-value,
.tile-purple .info-tile-value,
.tile-slate  .info-tile-value,
.tile-teal   .info-tile-value { color: #996000; }

/* Maroon tiles stay default */
.tile-maroon {
  border-top-color: var(--maroon);
  border-left-color: var(--maroon);
}
.tile-maroon .info-tile-value { color: var(--maroon); }

/* ════════════════════════════════════════════════════════════
   CARDS — 3D elevated
   ════════════════════════════════════════════════════════════ */
.crb-card {
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(10px) saturate(1.05);
  -webkit-backdrop-filter: blur(10px) saturate(1.05);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.6);
  border-top: 3px solid var(--maroon);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.85) inset,
    0 2px 6px rgba(13,33,55,0.05),
    0 10px 26px rgba(13,33,55,0.08);
  margin-bottom: 18px;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  overflow: visible !important;
}

.crb-card:hover {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.9) inset,
    0 5px 12px rgba(13,33,55,0.08),
    0 16px 34px rgba(13,33,55,0.12);
  transform: translateY(-2px);
}

.crb-card-header {
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(180deg, #fafbfc 0%, #ffffff 100%);
  border-radius: 10px 10px 0 0;
}

.crb-card-body {
  padding: 16px;
}

/* ════════════════════════════════════════════════════════════
   CONTROLS
   ════════════════════════════════════════════════════════════ */
.control-panel {
  background: white;
  border: 1px solid var(--border);
  border-top: 2px solid var(--gold);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 16px;
  box-shadow:
    0 1px 0 rgba(255,255,255,1) inset,
    0 2px 8px rgba(0,0,0,0.05);
  overflow: visible !important;
  position: relative;
  z-index: 10;
}

.control-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--maroon);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 5px;
}

/* Dropdowns */
.Select-control {
  border-color: var(--border) !important;
  border-radius: 6px !important;
  font-size: 12.5px !important;
}

.Select-control:hover,
.is-focused .Select-control {
  border-color: var(--maroon) !important;
  box-shadow: 0 0 0 2px rgba(140,29,64,0.12) !important;
}

.Select-menu-outer {
  border-color: var(--border) !important;
  border-radius: 0 0 6px 6px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15) !important;
  z-index: 99999 !important;
  position: absolute !important;
}

.VirtualizedSelectFocusedOption {
  background: rgba(140,29,64,0.08) !important;
}

.VirtualizedSelectSelectedOption {
  background: rgba(140,29,64,0.12) !important;
  font-weight: 600 !important;
}

.dash-dropdown .Select-menu-outer,
.dropdown .Select-menu-outer {
  z-index: 99999 !important;
}

/* ── GLOBAL dropdown fix (applies to EVERY dropdown in the app) ──────────────
   dcc.Dropdown uses react-virtualized rows of a FIXED height. If an option
   label is longer than the menu it wraps onto extra lines that overflow the
   fixed row and overlap the option below. Force every option onto ONE line and
   ellipsize the rare over-long label — so options can never overlap anywhere. */
.Select-menu-outer .Select-option,
.Select-menu-outer .VirtualizedSelectOption,
.Select-menu-outer .VirtualizedSelectFocusedOption,
.Select-menu-outer .VirtualizedSelectSelectedOption {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
/* Let each menu be a little wider than a narrow control so common labels
   (e.g. "Surface Runoff (mm/yr)") show in full rather than being clipped. */
.Select-menu-outer { min-width: 100% !important; }

/* ── Buttons ──────────────────────────────────────────────── */
.btn-crb {
  background: var(--maroon) !important;
  color: white !important;
  border: none !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  padding: 7px 16px !important;
  transition: all 0.15s !important;
  box-shadow: 0 3px 0 #5a0d28, 0 4px 8px rgba(140,29,64,0.3) !important;
}

.btn-crb:hover {
  background: #7a1535 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 0 #5a0d28, 0 6px 14px rgba(140,29,64,0.35) !important;
}

.btn-crb:active {
  transform: translateY(1px) !important;
  box-shadow: 0 1px 0 #5a0d28 !important;
}

.btn-download {
  background: #1B5E20 !important;
  color: white !important;
  border: none !important;
  border-radius: 6px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  padding: 6px 14px !important;
  box-shadow: 0 2px 0 #0d3010, 0 3px 8px rgba(27,94,32,0.3) !important;
  transition: all 0.15s !important;
}

.btn-download:hover {
  background: #155016 !important;
  transform: translateY(-1px) !important;
}

/* ── Mode toggle ─────────────────────────────────────────── */
.mode-toggle {
  display: inline-flex;
  background: #eceff1;
  border-radius: 8px;
  padding: 3px;
  margin-bottom: 14px;
}

.mode-btn {
  padding: 5px 14px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  border: none;
  background: transparent;
  transition: all 0.15s;
}

.mode-btn.active {
  background: var(--maroon);
  color: white;
  box-shadow: 0 2px 6px rgba(140,29,64,0.35);
}

/* ── Tables ────────────────────────────────────────────────── */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th {
  background: var(--navy) !important;
  color: white !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  padding: 8px 12px !important;
}

.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td {
  font-size: 12px !important;
  padding: 7px 12px !important;
  color: var(--text-main) !important;
}

/* ════════════════════════════════════════════════════════════
   FOOTER — ASU branded
   ════════════════════════════════════════════════════════════ */
.crb-footer {
  margin-left: 232px;
  background: white;
  /* Top: 4px maroon + 2px gold */
  border-top: 4px solid var(--maroon);
  box-shadow: 0 -2px 0 var(--gold);
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
}

.crb-footer-left {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--maroon);
  letter-spacing: 0.2px;
}

.crb-footer-center {
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  flex: 1;
}

.crb-footer-right {
  font-size: 10.5px;
  color: var(--text-muted);
  text-align: right;
}

/* Simple fallback for the current string-only footer */
.crb-footer > * {
  font-size: 11px;
  color: var(--text-muted);
}

/* ── Hamburger ──────────────────────────────────────────────── */
.sidebar-toggle {
  display: none;
  position: fixed;
  top: 12px; left: 12px;
  z-index: 2000;
  background: var(--maroon);
  color: white;
  border: none;
  border-radius: 6px;
  width: 36px; height: 36px;
  font-size: 18px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.sidebar-toggle::before { content: "\2630"; font-size: 20px; line-height: 1; }
.sidebar.open ~ * .sidebar-toggle::before,
.sidebar-toggle.is-open::before { content: "\2715"; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 900px) {
  .sidebar {
    transform: translateX(-220px);
    transition: transform 0.25s ease;
    z-index: 1500;
  }
  .sidebar.open {
    transform: translateX(0);
    box-shadow: 4px 0 20px rgba(140,29,64,0.2);
  }
  .main-content  { margin-left: 0 !important; padding-top: 52px; }
  .crb-footer    { margin-left: 0 !important; }
  .sidebar-toggle { display: flex; }
  .tab-body      { padding: 12px 14px !important; }
  .tab-header    { padding: 0 14px 0 18px !important; height: auto; min-height: 56px; }
  .tab-header h2 { font-size: 15px !important; }
  .info-tile-value { font-size: 17px !important; }
}

@media (max-width: 600px) {
  .control-panel .row { flex-direction: column !important; }
  .control-panel .col, .control-panel [class*="col-"] {
    width: 100% !important; max-width: 100% !important;
  }
  .crb-card-body { padding: 10px !important; }
}

/* ── Plotly ──────────────────────────────────────────────────── */
.js-plotly-plot .plotly .main-svg {
  border-radius: 8px;
}

/* ── Loading ─────────────────────────────────────────────────── */
._dash-loading { background: rgba(255,255,255,0.8) !important; }
._dash-loading-callback {
  background: var(--maroon) !important;
  height: 3px !important;
}

/* ── Findings / banner strips ────────────────────────────────── */
[style*="background:#fce4ec"],
[style*="background: #fce4ec"] {
  border-radius: 8px !important;
  box-shadow: 0 2px 6px rgba(140,29,64,0.08) !important;
}
[style*="background:#e3f2fd"],
[style*="background: #e3f2fd"] {
  border-radius: 8px !important;
  box-shadow: 0 2px 6px rgba(1,87,155,0.08) !important;
}
[style*="background:#fff3e0"],
[style*="background: #fff3e0"] {
  border-radius: 8px !important;
  box-shadow: 0 2px 6px rgba(230,81,0,0.08) !important;
}

/* ════════════════════════════════════════════════════════════
   PUBLICATIONS TAB
   ════════════════════════════════════════════════════════════ */
.pub-card {
  background: white;
  border: 1px solid var(--border);
  border-left: 4px solid var(--navy);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  transition: box-shadow 0.2s, transform 0.15s;
}
.pub-card:hover {
  box-shadow: 0 6px 20px rgba(140,29,64,0.13);
  transform: translateY(-2px);
}
.pub-card-highlight {
  border-left: 4px solid var(--maroon);
  background: linear-gradient(135deg, #fff8f9 0%, #ffffff 100%);
  box-shadow: 0 4px 16px rgba(140,29,64,0.10);
}

/* Publication info tiles row */
.pub-tiles-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 8px;
  margin-bottom: 4px;
}
.pub-tile {
  border-radius: 4px;
  padding: 7px 12px 7px 10px;
  text-align: left;
  position: relative;
  overflow: hidden;
  min-height: 58px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  background: #ffffff;
  border: none;
  border-top: 3px solid var(--maroon);
  border-left: 3px solid var(--maroon);
  box-shadow:
    -2px -2px 0 0 rgba(0,0,0,0.04),
    2px 4px 8px rgba(0,0,0,0.06);
  transition: transform 0.15s, box-shadow 0.15s;
}
.pub-tile:hover {
  transform: translateY(-2px) translateX(1px);
  box-shadow:
    -3px -3px 0 0 rgba(0,0,0,0.06),
    4px 7px 14px rgba(0,0,0,0.10);
}
.pub-tile-icon {
  font-size: 13px;
  margin-bottom: 2px;
  opacity: 0.5;
}
.pub-tile-value {
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--maroon);
}
.pub-tile-label {
  font-size: 10px;
  margin-top: 2px;
  line-height: 1.2;
  color: var(--text-muted);
}
/* Gold alternate for even-numbered tiles */
.pub-tile.tile-navy,
.pub-tile.tile-green,
.pub-tile.tile-gold {
  border-top-color: var(--gold2);
  border-left-color: var(--gold2);
}
.pub-tile.tile-navy   .pub-tile-value,
.pub-tile.tile-green  .pub-tile-value,
.pub-tile.tile-gold   .pub-tile-value { color: #996000; }

.pub-tile.tile-maroon {
  border-top-color: var(--maroon);
  border-left-color: var(--maroon);
}
.pub-tile.tile-maroon .pub-tile-value { color: var(--maroon); }

/* Topic tags */
.pub-tag {
  background: #f1f5f9;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 2px 8px;
  font-size: 10px;
  color: var(--navy);
  font-weight: 500;
}

/* Filter bar */
.pub-filter-bar {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
  background: white;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

/* ── Readable / highlighted links (content + footer; NOT sidebar nav) ── */
.tab-body a, .crb-footer a, .crb-card a, .control-panel a, .tab-header a {
  color: #01579B;
  text-decoration: underline;
  font-weight: 600;
}
.tab-body a:hover, .crb-footer a:hover, .crb-card a:hover { color: #8C1D40; }
/* team links (name, chips, partner cards) are NOT underlined blue text */
.tab-body a.tm-partner, .tab-body a.tm-partner:hover,
.tab-body a.tm-name-link, .tab-body a.tm-chip {
  text-decoration: none; font-weight: inherit;
}
.tab-body a.tm-name-link { color: #0D2137; }
.tab-body a.tm-name-link:hover { color: #8C1D40; text-decoration: none; }
.tab-body a.tm-chip { color: #8C1D40; }
.tab-body a.tm-chip.tm-chip-li { color: #0A66C2; }
/* whole-tile links (vital signs, flagship cards) are surfaces, not text links */
.tab-body a.rc-tile, .crb-card a.rc-tile, .tab-body a.rc-tile:hover,
.tab-body a.qf-card {
  text-decoration: none; font-weight: inherit; color: inherit;
}
/* sidebar nav links keep their own style (no underline) */
.nav-link, .nav-link:hover { text-decoration: none; }
/* bootstrap icon vertical align in nav */
.nav-link .bi { vertical-align: -2px; }

/* ── Thin sidebar scrollbar (many nav items) ── */
.sidebar::-webkit-scrollbar { width: 7px; }
.sidebar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.sidebar::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
.sidebar { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }

/* ════════════════════════════════════════════════════════════
   SUB-TAB BAR — view switcher inside each top-level group
   ════════════════════════════════════════════════════════════ */
.subtab-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 16px 14px;             /* separate card, gap from sidebar + below */
  padding: 12px 18px;
  background: #ffffff;
  border: none;
  border-radius: 10px;
  box-shadow: 0 6px 16px rgba(13,33,55,0.12);
  position: sticky;
  top: 10px;
  z-index: 50;
}
.subtab-intro {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;            /* stop the heading and description running together */
  line-height: 1.5;
}
/* the description always starts on its own line, with breathing room */
.subtab-desc {
  flex: 1 1 100%;
  margin-top: 3px;
}
/* Dropdown view selector (decision-support style) */
.subnav-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.subnav-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--maroon);
  white-space: nowrap;
}
.subnav-dropdown {
  min-width: 320px;
  max-width: 420px;
  font-size: 13px;
}
.subnav-dropdown .Select-control,
.subnav-dropdown .is-focused .Select-control {
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 6px rgba(13,33,55,0.10) !important;
  font-weight: 600;
  color: var(--navy);
}
.subnav-dropdown .Select-menu-outer {
  border-radius: 8px !important;
  box-shadow: 0 8px 20px rgba(13,33,55,0.18) !important;
  font-weight: 500;
  /* The menu is absolutely positioned, so it can be wider than a narrow control.
     Give it a firm minimum so long analysis names are never clipped. */
  min-width: 300px !important;
  max-width: min(92vw, 480px) !important;
}
/* react-virtualized sizes its inner grid & rows to the (sometimes narrow) control
   via inline widths — force them to fill the wider menu so text isn't cut off. */
.subnav-dropdown .Select-menu-outer .VirtualizedSelectMenu,
.subnav-dropdown .Select-menu-outer .ReactVirtualized__Grid,
.subnav-dropdown .Select-menu-outer .ReactVirtualized__Grid__innerScrollContainer,
.subnav-dropdown .Select-menu-outer .Select-menu {
  width: 100% !important;
  min-width: 300px !important;
}
/* Analysis-selector options: fill the wider menu so long names show in full. */
.subnav-dropdown .Select-menu-outer .Select-option,
.subnav-dropdown .Select-menu-outer .VirtualizedSelectOption,
.subnav-dropdown .Select-menu-outer .VirtualizedSelectFocusedOption {
  width: 100% !important;
  min-width: 300px !important;
}
.subtab {
  display: inline-flex;
  align-items: center;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--slate);
  background: #f4f6f9;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 6px 14px;
  text-decoration: none !important;
  transition: all 0.15s;
  white-space: nowrap;
}
.subtab:hover {
  background: rgba(140,29,64,0.08);
  color: var(--maroon);
  border-color: rgba(140,29,64,0.3);
}
.subtab.active {
  background: var(--maroon);
  color: #fff;
  border-color: var(--maroon);
  box-shadow: 0 2px 8px rgba(140,29,64,0.30);
}
.subtab.active .bi { color: var(--gold); }

/* ════════════════════════════════════════════════════════════
   GLOBAL HEADER — logos only, + separate title container
   (same on every page)
   ════════════════════════════════════════════════════════════ */
/* Right-side logo header — separate 3D white panel, ON THE SAME LINE
   as the sidebar header, logos only (no text), no maroon boundary. */
.app-header {
  background: #ffffff;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin: 10px 16px 0;             /* gap from sidebar + screen edge; not attached */
  padding: 0 18px;
  border: none;
  border-radius: 10px;
  position: relative;
  z-index: 6;
  box-shadow: 0 6px 16px rgba(13,33,55,0.13);
}

/* Title container — raised 3D white card, separated from the page header below */
.app-titlebar {
  background: #ffffff;
  margin: 10px 16px 16px;          /* side margins + gap below → distinct card */
  padding: 14px 22px 16px;
  border: none;
  border-radius: 10px;
  position: relative;
  z-index: 5;
  /* layered 3D drop shadow — panel floats above the page */
  box-shadow: 0 8px 20px rgba(13,33,55,0.16),
              0 2px 5px rgba(13,33,55,0.09);
}
.app-title {
  font-size: 21px;
  font-weight: 800;
  color: var(--maroon);
  letter-spacing: -0.3px;
  margin: 0 0 4px 0;
  line-height: 1.15;
}
.app-subtitle {
  font-size: 11.5px;
  color: #1e293b;
  margin: 0;
  line-height: 1.45;
  max-width: 1100px;
}

/* Scenario preset buttons */
.sc-preset-btn {
  font-size: 11px;
  font-weight: 600;
  color: var(--maroon);
  background: #fff;
  border: 1px solid rgba(140,29,64,0.35);
  border-radius: 16px;
  padding: 3px 12px;
  margin-right: 6px;
  cursor: pointer;
  transition: all 0.15s;
}
.sc-preset-btn:hover { background: var(--maroon); color: #fff; }

/* Horizontal sub-tabs (Kristen-style) — used where group nav = "tabs" */
.subtab-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  border-bottom: 2px solid var(--border);
}
.subtab-tab {
  display: inline-flex;
  align-items: center;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--slate);
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  border-radius: 6px 6px 0 0;
  padding: 8px 16px;
  margin-bottom: -2px;
  text-decoration: none !important;
  transition: all 0.15s;
}
.subtab-tab:hover {
  color: var(--maroon);
  background: rgba(140,29,64,0.05);
}
.subtab-tab.active {
  color: var(--maroon);
  border-bottom: 3px solid var(--maroon);
  background: #fff;
}
.subtab-tab.active .bi { color: var(--gold); }

/* "How to use" helper strip on interactive tabs */
.howto-strip {
  background: #eef5fb;
  border: 1px solid #d6e6f3;
  border-left: 3px solid #01579B;
  border-radius: 0 6px 6px 0;
  padding: 8px 14px;
  font-size: 11.5px;
  color: #37474f;
  line-height: 1.5;
  margin-bottom: 10px;
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE  — works on any screen, nothing breaks
   ════════════════════════════════════════════════════════════ */

/* Hamburger toggle (hidden on desktop, shown on small screens) */
.sidebar-toggle {
  display: none;
  position: fixed;
  top: 12px; left: 12px;
  z-index: 1100;
  width: 42px; height: 42px;
  border: none; border-radius: 10px;
  background: var(--maroon); color: #fff; cursor: pointer;
  box-shadow: 0 4px 12px rgba(13,33,55,0.28);
  align-items: center; justify-content: center;
}
.sidebar-toggle::before { content: "\2630"; font-size: 20px; line-height: 1; }

/* Graphs & images never overflow */
.js-plotly-plot, .plotly, .dash-graph { max-width: 100% !important; }
img { max-width: 100%; height: auto; }
.tab-body table { max-width: 100%; }

/* Tablet / small laptop */
@media (max-width: 992px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: 6px 0 28px rgba(13,33,55,0.30);
  }
  .sidebar.open { transform: translateX(0); }
  .main-content { margin-left: 0 !important; }
  .sidebar-toggle { display: flex; }
  .app-header { padding-left: 62px; }       /* clear the hamburger */
  .header-logo { width: 36px; height: 36px; }
  .app-title { font-size: 17px; }
  .app-subtitle { font-size: 10.5px; }
  .tab-header h2 { font-size: 16px; }
  .subnav-row { flex-wrap: wrap; }
  .subnav-dropdown { flex: 1 1 100%; min-width: 220px; width: 100%; max-width: 100%; }
  .subtab-tabs { gap: 0; flex-wrap: wrap; }
  .subtab-tab { padding: 7px 11px; font-size: 12px; }
  /* On tablets & phones, stack ALL grid columns full-width so side-by-side
     charts/tables/text never get cramped enough to overlap. */
  .tab-body .row > [class*="col-"],
  .tab-body .row > .col { flex: 0 0 100% !important; max-width: 100% !important; }
  /* …except compact metric tiles: they are small by design and must not
     stretch into tall full-width blocks of empty space */
  .tab-body .row > [class*="col-"]:has(> .rc-tile),
  .tab-body .row > [class*="col-"]:has(> .info-tile) {
    flex: 0 0 33.333% !important; max-width: 33.333% !important;
  }
}

/* Phones */
@media (max-width: 600px) {
  .app-header, .app-titlebar, .subtab-bar, .tab-header { margin-left: 8px; margin-right: 8px; }
  .tab-body { padding: 10px 8px; }
  .app-title { font-size: 15.5px; }
  .app-subtitle { font-size: 10px; }
  .info-tile-value { font-size: 18px; }
  .info-tile { min-height: 70px; }
  .crb-card { overflow-x: auto; }           /* wide tables scroll instead of breaking */
  .tab-header { min-height: 0; padding: 10px 14px; }
  .header-logo { width: 30px; height: 30px; }
  .header-logo-strip { gap: 6px; right: 12px; }
  .tab-body .row > [class*="col-"]:has(> .rc-tile),
  .tab-body .row > [class*="col-"]:has(> .info-tile) {
    flex: 0 0 50% !important; max-width: 50% !important;
  }
  .rc-tile { padding: 10px 11px; border-radius: 12px; }
}

/* Sidebar sub "Decision ▪ Support ▪ Tool" — square dots, sits under CRIA */
.sidebar-logo-sub { white-space: normal; line-height: 1.3; }
.dst-dot { color: var(--gold); margin: 0 4px; font-size: 11px; vertical-align: middle; }

/* ════════════════════════════════════════════════════════════
   GRAPH / CARD ANIMATION + RESPONSIVE GRAPHS
   ════════════════════════════════════════════════════════════ */
@keyframes cribEnter {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes cribFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* cards slide + fade in when a page renders */
.crb-card { animation: cribEnter 0.5s cubic-bezier(.2,.7,.3,1) both; }
/* tiles fade only (keeps their hover-lift transform intact) */
.info-tile { animation: cribFade 0.5s ease both; }
/* the graph itself eases in */
.dash-graph, .js-plotly-plot { animation: cribFade 0.6s ease both; }

/* graphs always fill their container width (responsive) */
.js-plotly-plot, .js-plotly-plot .plot-container, .js-plotly-plot .svg-container { width: 100% !important; }

/* smooth, professional card hover */
.crb-card { transition: box-shadow 0.2s ease, transform 0.2s ease; }
.crb-card:hover { box-shadow: 0 10px 26px rgba(13,33,55,0.13), 0 3px 8px rgba(13,33,55,0.08); }

/* ── Fix: dropdown menus must never be clipped / hidden ── */
.Select-menu-outer, .Select-menu, .VirtualizedSelectMenu,
.dash-dropdown .Select-menu-outer { z-index: 4000 !important; }
/* containers that hold dropdowns must not clip their pop-up menu */
.crb-card, .control-panel, .subtab-bar { overflow: visible !important; }
/* the card whose dropdown is open rises above neighbouring cards */
.crb-card:focus-within { position: relative; z-index: 60; }
.subtab-bar:focus-within { z-index: 200; }

/* ── Maroon info-dot (ⓘ) popover: hide the default disclosure triangle ── */
.info-dot > summary { list-style: none; }
.info-dot > summary::-webkit-details-marker { display: none; }
.info-dot > summary::marker { content: ""; }

/* ════════════════════════════════════════════════════════════
   FULLY-RESPONSIVE HARDENING  — any screen, any browser
   (this block is intentionally last so it wins)
   ════════════════════════════════════════════════════════════ */

/* 1 · Universal box model + kill horizontal overflow everywhere.
      Horizontal scrollbars are the #1 cause of "not responsive". */
*, *::before, *::after { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }
#react-entry-point, #_dash-app-content { max-width: 100%; overflow-x: hidden; }
.main-content { max-width: 100%; overflow-x: hidden; }

/* 2 · Media & wide elements never push the page wider than the screen. */
img, svg, video, canvas, iframe { max-width: 100%; height: auto; }
.js-plotly-plot, .plotly, .dash-graph,
.js-plotly-plot .plot-container, .js-plotly-plot .svg-container { max-width: 100% !important; }
pre, code { white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; }

/* 3 · Long words / URLs in cards wrap instead of overflowing.
      break-word (not anywhere) so normal short labels never split per-character. */
.crb-card, .tab-body, .info-tile-label, .app-subtitle, .pub-card { overflow-wrap: break-word; }
/* broad safety net: no word/label in the app or sidebar ever overflows its box and overlaps a neighbour */
.main-content h1, .main-content h2, .main-content h3, .main-content h4, .main-content h5,
.main-content p, .main-content li, .main-content span, .main-content a, .main-content td,
.main-content div, .sidebar a, .sidebar span, .sidebar div { overflow-wrap: break-word; min-width: 0; }
/* control labels & option labels must never break mid-word */
.control-label, .dash-label, .form-check-label { white-space: nowrap; overflow-wrap: normal; }

/* 4 · Wide tables scroll inside their own card rather than the whole page. */
.crb-card-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dash-table-container { overflow-x: auto; }

/* 5 · Mobile-correct viewport height for the sidebar drawer
      (dvh/svh avoid the iOS/Android address-bar 100vh bug; vh is the fallback). */
.sidebar { height: 100vh; height: 100svh; height: 100dvh; }

/* 6 · Dropdowns/filters: never force a min-width wider than the viewport. */
.subnav-dropdown, #pub-filter-tag, .Select, .dash-dropdown { max-width: 100%; }

/* ── Large desktop / 4K: keep content readable, not stretched edge-to-edge ── */
@media (min-width: 1800px) {
  .app-header, .app-titlebar, .subtab-bar, .tab-header { max-width: 1680px; }
  .tab-body { max-width: 1680px; margin-left: auto; margin-right: auto; }
}

/* ── Mid laptop (≤1200px): tighten cards a touch ── */
@media (max-width: 1200px) {
  .info-tile-value { font-size: 19px; }
  /* Analysis dropdown fills the row and stays wide enough for full option names. */
  .subnav-dropdown { flex: 1 1 260px; min-width: 240px; }
}

/* ── Small phones (≤420px): final tightening so nothing clips ── */
@media (max-width: 420px) {
  body { font-size: 12.5px; }
  .app-header, .app-titlebar, .subtab-bar, .tab-header { margin-left: 6px; margin-right: 6px; }
  .app-title { font-size: 14px; }
  .app-subtitle { font-size: 9.5px; }
  .tab-header h2 { font-size: 14px !important; }
  .tab-body { padding: 8px 6px; }
  .crb-card-body { padding: 9px !important; }
  .info-tile-value { font-size: 16px !important; }
  .info-tile { min-height: 64px; padding: 8px 10px; }
  .info-tile-label { font-size: 10px; }
  .subnav-dropdown, #pub-filter-tag { width: 100%; min-width: 0; }
  .subnav-row { gap: 6px; }
  .header-logo { width: 28px; height: 28px; }
  .crb-footer { flex-direction: column; text-align: center; }
  .crb-footer-center, .crb-footer-right { text-align: center; }
  /* dbc columns stack fully on the smallest screens */
  .tab-body .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
}

/* ── Very short landscape phones: let the sidebar drawer scroll ── */
@media (max-height: 480px) {
  .sidebar { overflow-y: auto; }
}

/* ── Touch devices: bigger tap targets, no sticky hover-stuck states ── */
@media (hover: none) {
  .nav-link, .subtab, .subtab-tab, .btn-crb, .btn-download { min-height: 38px; }
  .crb-card:hover { transform: none; }   /* avoid stuck lift on tap */
}

/* ── Respect users who prefer reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ════════════════════════════════════════════════════════════
   OVERLAP FIXES  — card headers + sliders on narrow screens
   ════════════════════════════════════════════════════════════ */

/* 7 · Card headers are flex rows (title + subtitle + CSV button + star badge).
      Without wrapping they collide/overlap on phones. Let them wrap,
      let text shrink, and push action buttons to the right edge. */
.crb-card-header {
  flex-wrap: wrap;
  column-gap: 12px;      /* title  ↔  caption — the only gap, no literal spaces */
  row-gap: 4px;
  line-height: 1.3;
}
.crb-card-header > span { min-width: 0; overflow-wrap: anywhere; }
.crb-card-header .btn-download,
.crb-card-header button { margin-left: auto; }   /* float:right replacement, flex-safe */

/* 8 · Slider / RangeSlider year marks (Dash 3.x uses .dash-slider-* ;
      older dcc uses .rc-slider-mark-text). Shrink the labels so the year
      ticks never overlap, and give the track breathing room at both ends. */
.dash-slider-wrapper, .rc-slider { margin-left: 6px !important; margin-right: 6px !important; }
.dash-slider-mark, .rc-slider-mark-text {
  font-size: 10px !important;
  white-space: nowrap;
}
@media (max-width: 768px) {
  .dash-slider-mark, .rc-slider-mark-text { font-size: 9px !important; }
}
@media (max-width: 420px) {
  .dash-slider-mark, .rc-slider-mark-text { font-size: 8px !important; }
}
/* slider value tooltips never wrap to a vertical stack ("2 0 2 4") or clip */
.dash-slider-tooltip, .rc-slider-tooltip-inner, .rc-slider-tooltip {
  white-space: nowrap !important;
  font-size: 10px !important;
}
/* room below sliders so a tooltip/value box can't overlap the next control */
.dash-slider-wrapper, .rc-slider { margin-bottom: 10px; }

/* 9 · Plotly charts: guarantee they never spill past their card on mobile. */
.crb-card .js-plotly-plot { width: 100% !important; }
.crb-card-body > .dash-graph,
.crb-card > .dash-graph { width: 100% !important; }

/* ── Report card "vital signs" tiles — eye-catching 3D glass ─────── */
/* ── "Where the basin's water goes" — 3D Sankey wow card ─────────────── */
.wflow-card{ position:relative; overflow:hidden; margin-bottom:18px; padding:16px 18px 14px;
  border:1px solid #e6ecf2; border-top:4px solid #FFC627; border-radius:16px;
  background:#ffffff;
  box-shadow:0 18px 40px rgba(13,33,55,.13), 0 5px 14px rgba(13,33,55,.08); }
.wflow-card::before{ content:none; }
.wflow-head{ display:flex; align-items:center; flex-wrap:wrap; gap:4px; position:relative; z-index:1;
  border-bottom:2px solid #8C1D40; padding-bottom:8px; margin-bottom:10px; }
.wflow-card .js-plotly-plot, .wflow-card .dash-graph{ position:relative; z-index:1; }
.wflow-punch{ font-size:14.5px; line-height:1.6; color:#0D2137; font-weight:500;
  margin:2px 2px 10px; position:relative; z-index:1; }
.wflow-sub{ font-size:11px; color:#607d8b; font-weight:700; margin:10px 2px 0; position:relative; z-index:1; }
/* Overview page: all parent containers are clean SOLID WHITE — no frosted
   translucency (which was picking up maroon through the blur and reading pink). */
.overview-page .crb-card,
.overview-page .wflow-card,
.overview-page .sig-card,
.overview-page .report-card{
  background:#ffffff !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }

/* Overview wow-lead — the first line that makes an expert go "whoa" */
.ov-wow-lead{ font-size:clamp(17px, 2.4vw, 22px); font-weight:800; color:#0D2137;
  line-height:1.3; letter-spacing:-.3px; margin:2px 0 8px; }
.ov-welcome{ font-size:13px; line-height:1.62; color:#37474f; margin:0 0 14px; }
.ov-welcome b{ color:#0D2137; }
.ov-wow-accent{ color:#8C1D40;
  background:linear-gradient(180deg, transparent 62%, rgba(255,198,39,.45) 62%); padding:0 2px; }

/* ── The basin, in the PI's words — emotional quote band ─────────────── */
.cria-quote{ position:relative; margin:0 0 18px; padding:20px 28px 18px 28px;
  border-radius:0 14px 14px 0; overflow:hidden; background:#ffffff;
  border:0; border-left:5px solid #FFC627;
  box-shadow:0 14px 32px rgba(140,29,64,.12), 0 5px 14px rgba(13,33,55,.07);
  animation:criaQuoteIn .85s cubic-bezier(.2,.7,.3,1) both; }
@keyframes criaQuoteIn{ from{ opacity:0; transform:translateY(18px); }
                         to{ opacity:1; transform:none; } }
.cria-quote::before{ content:"\201C"; position:absolute; left:16px; top:0;
  font-family:Georgia, "Times New Roman", serif; font-size:56px; line-height:1;
  color:rgba(140,29,64,.18); pointer-events:none;
  animation:criaQuoteMark 5s ease-in-out infinite; }
@keyframes criaQuoteMark{ 0%,100%{ transform:translateY(0); opacity:.55; }
                           50%{ transform:translateY(-4px); opacity:1; } }
.cria-quote-text{ position:relative; z-index:1; padding-left:20px;
  font-family:Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-size:clamp(14px, 1.4vw, 16.5px); line-height:1.75; font-weight:400; font-style:italic;
  letter-spacing:.1px; color:#1f2d38; }
.cria-quote-lead{ display:block; margin-bottom:5px; font-size:1.16em; font-weight:700;
  font-style:italic; color:#8C1D40; line-height:1.3; }
.cria-quote-hl{ color:#8C1D40; font-weight:700; font-style:italic; }
.cria-quote-div{ position:relative; z-index:1; height:1px; margin:14px 0 12px 20px;
  background:linear-gradient(90deg, rgba(140,29,64,.28), rgba(140,29,64,.06) 60%, transparent); }
.cria-quote-by{ position:relative; z-index:1; padding-left:22px; margin-top:14px;
  font-family:Inter, sans-serif; display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; }
.cria-quote-name{ font-size:13px; font-weight:800; letter-spacing:.04em;
  text-transform:uppercase; color:#8C1D40; }
.cria-quote-role{ font-size:10.5px; font-weight:600; letter-spacing:.03em;
  text-transform:none; color:#9a7681; }
.cria-quote-role::before{ content:"· "; color:#c8a6b0; }
@media (prefers-reduced-motion:reduce){
  .cria-quote{ animation:none; } .cria-quote::before{ animation:none; opacity:.2; } }

/* ── Why CRIA — impressive novelty showcase ──────────────────────────── */
.why-hero{ position:relative; overflow:hidden; border-radius:16px; padding:22px 24px;
  margin-bottom:16px; color:#fff; border-top:4px solid #FFC627;
  background:linear-gradient(135deg,#0d2137 0%,#3a1226 55%,#8C1D40 100%);
  box-shadow:0 20px 44px rgba(140,29,64,.28), inset 0 1px 0 rgba(255,255,255,.08); }
.why-hero::after{ content:""; position:absolute; right:-40px; top:-40px; width:210px; height:210px;
  border-radius:50%; background:radial-gradient(circle, rgba(255,198,39,.22), transparent 70%);
  pointer-events:none; }
.why-hero-eyebrow{ font-size:11px; font-weight:800; letter-spacing:.18em; color:#FFC627; margin-bottom:8px; position:relative; z-index:1; }
.why-hero-title{ font-size:clamp(20px,2.6vw,27px); font-weight:800; line-height:1.2; letter-spacing:-.4px; position:relative; z-index:1; }
.why-hl{ color:#FFC627; }
.why-hero-tag{ position:relative; z-index:1; margin:9px 0 11px; font-size:clamp(14px,1.7vw,18px);
  font-weight:800; color:#FFC627; letter-spacing:.2px; }
.why-hero-tag-pre{ font-weight:600; font-style:italic; color:#e7d6dc; }
.why-hero-sub{ font-size:13px; line-height:1.6; color:#dbe8f0; margin-top:9px; max-width:640px; position:relative; z-index:1; }

/* ── Overview hero — one band, white → maroon gradient, dark text ── */
.overview-page .why-hero{ display:block; padding:22px 26px; color:#0D2137;
  background:linear-gradient(115deg,#ffffff 0%,#ffffff 52%,#a52350 88%,#8C1D40 100%);
  border:1px solid #e6ecf2; border-top:4px solid #FFC627;
  box-shadow:0 14px 34px rgba(13,33,55,.10); }
.overview-page .why-hero::after{ display:none; }
.overview-page .why-hero-eyebrow{ color:#8C1D40; }
.overview-page .why-hero-title{ color:#0D2137; }
.overview-page .why-hl{ color:#8C1D40; }
.overview-page .why-hero-tag{ color:#8C1D40; }
.overview-page .why-hero-tag-pre{ color:#C8901A; font-weight:800; font-style:italic; }
.overview-page .why-hero-sub{ color:#3b4a57; max-width:640px; }
.overview-page .why-hero-sub b{ color:#0D2137; }
.overview-page .why-hero-eyebrow, .overview-page .why-hero-title,
.overview-page .why-hero-tag, .overview-page .why-hero-sub{ position:relative; z-index:1; }
.overview-page .why-hero-drop{ position:absolute; right:5%; top:50%; transform:translateY(-50%);
  width:92px; height:auto; pointer-events:none; z-index:0; opacity:.92; }
@media(max-width:900px){ .overview-page .why-hero-drop{ display:none; } }

/* ── Overview containers — fading gold gradient top accent (not a full solid line) ── */
.overview-page .crb-card,
.overview-page .wflow-card,
.overview-page .sig-card,
.overview-page .why-hero{ position:relative; }
.overview-page .crb-card,
.overview-page .wflow-card,
.overview-page .sig-card{ border-top:1px solid #e6ecf2 !important; }
.overview-page .why-hero{ border-top:0 !important; }
.overview-page .crb-card::before,
.overview-page .wflow-card::before,
.overview-page .sig-card::before,
.overview-page .why-hero::before{ content:"" !important; position:absolute; top:0; left:0; right:0;
  height:2px; border:0; margin:0; padding:0; display:block; z-index:3; pointer-events:none;
  background:linear-gradient(90deg,#FFC627 0%, #FFC627 26%, rgba(255,198,39,0) 82%);
  border-radius:16px 16px 0 0; animation:none; }

/* ── "Colorado River Basin — Vital Signs" wrapper: no fill, clean & quiet — a plain
      transparent panel (the tab rows inside keep their own cards). No gradient frame. ── */
.overview-page .crb-card.tabshow-card,
.crb-card.tabshow-card{
  background:transparent !important;
  border:none !important;
  border-top:none !important;
  border-radius:0;
  box-shadow:none !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
.overview-page .crb-card.tabshow-card:hover,
.crb-card.tabshow-card:hover{ box-shadow:none !important; transform:none; }
/* no top-accent bar for this card */
.overview-page .crb-card.tabshow-card::before,
.crb-card.tabshow-card::before{ display:none !important; content:none !important; }
/* header underline → simple quiet hairline */
.tabshow-head{ border-bottom:1px solid rgba(140,29,64,.16); }
/* title row — icon chip + title + subtitle */
.vs-titlerow{ display:flex; align-items:flex-start; gap:12px; }
.vs-icon{ flex:0 0 auto; width:40px; height:40px; border-radius:12px; display:flex; align-items:center;
  justify-content:center; font-size:21px; color:#FFC627;
  background:linear-gradient(135deg,#8C1D40,#6d1531);
  box-shadow:0 5px 14px rgba(140,29,64,.30), 0 1px 0 rgba(255,255,255,.18) inset; }
.vs-icon-svg{ width:23px; height:23px; display:block; }
.vs-title{ font-size:22px; font-weight:800; color:#8C1D40; letter-spacing:.2px; line-height:1.12; }
.vs-sub{ font-size:12.5px; color:#5a4048; font-weight:600; margin-top:4px; }
/* stat tiles — the shocking numbers, scannable at a glance */
.vs-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-top:14px; align-items:start; }
/* vs-stats now auto-fit — no fixed breakpoints needed */
@media(max-width:360px){ .vs-stats{ grid-template-columns:1fr; } }
.vs-stat{ position:relative; overflow:hidden; text-align:left;
  background:#ffffff;
  border:1px solid #ecd7de; border-radius:13px;
  padding:12px 13px 11px 16px;
  box-shadow:0 6px 16px rgba(140,29,64,.08), inset 0 1px 0 rgba(255,255,255,.9);
  transition:transform .18s cubic-bezier(.2,.7,.3,1.2), box-shadow .18s, border-color .18s;
  animation:chipIn .5s ease backwards; }
.vs-stat::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(#FFC627,#E0A200); box-shadow:0 0 8px rgba(255,198,39,.50); }
.vs-stat::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(130px 64px at 100% 0, rgba(255,198,39,.10), transparent 70%); }
.vs-stat:hover{ transform:translateY(-4px); border-color:rgba(140,29,64,.35);
  box-shadow:0 16px 30px rgba(140,29,64,.16), inset 0 0 0 1px rgba(255,198,39,.30); }
.vs-stat:nth-child(1){ animation-delay:.03s } .vs-stat:nth-child(2){ animation-delay:.09s }
.vs-stat:nth-child(3){ animation-delay:.15s } .vs-stat:nth-child(4){ animation-delay:.21s }
.vs-stat:nth-child(5){ animation-delay:.27s }
.vs-stat-ic{ font-size:13px; color:#E0A200; }
.vs-stat-num{ font-size:24px; font-weight:800; color:#8C1D40; letter-spacing:-.5px; margin-top:3px; line-height:1.02;
  font-variant-numeric:tabular-nums; font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; }
.vs-stat-lab{ font-size:9px; color:#6b4a54; font-weight:700; letter-spacing:.7px; text-transform:uppercase; line-height:1.3; margin-top:5px; }
@media (prefers-reduced-motion:reduce){ .vs-stat{ animation:none; } }
/* footer — badge legend + attribution/credit line */
.tabshow-foot{ margin-top:16px; padding-top:12px; border-top:1px solid rgba(140,29,64,.14); }
.tabshow-legend{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 18px; margin-bottom:7px;
  font-size:11px; color:#4a3540; }
.tabshow-legend .lg-item b{ color:#3f2029; font-weight:800; }
.lg-pub{ color:#E0A200; font-weight:900; }
.lg-diag{ color:#8C1D40; font-weight:900; }
.tabshow-attrib{ font-size:10.5px; color:#7a6068; line-height:1.5; font-style:italic; }

/* ── Quick View — one button pops the whole Vital Signs board full-screen ── */
.qv-btn{ margin-left:auto; align-self:flex-start; flex:0 0 auto; display:inline-flex; align-items:center;
  gap:7px; padding:8px 15px; border-radius:11px; font-size:12.5px; font-weight:800; letter-spacing:.02em;
  cursor:pointer; color:#fff; background:linear-gradient(135deg,#8C1D40,#6d1531); border:1px solid #6d1531;
  box-shadow:0 5px 14px rgba(140,29,64,.30), 0 1px 0 rgba(255,255,255,.15) inset;
  transition:transform .14s, box-shadow .14s; }
.qv-btn:hover{ transform:translateY(-2px); box-shadow:0 9px 20px rgba(140,29,64,.42); }
/* compact Vital Signs card on the Overview — headline + button only, no trailing rule */
.tabshow-compact{ padding-bottom:2px; }
.tabshow-compact .tabshow-head{ border-bottom:none !important; }
.tabshow-compact .qv-btn{ padding:9px 17px; font-size:13px; }
.qv-btn .bi{ font-size:13px; color:#FFC627; }
@media (max-width:620px){ .qv-btn{ margin-left:0; margin-top:8px; } }

body.qv-lock{ overflow:hidden; }
/* ── Story-film pop-over player ── */
.film-overlay{ position:fixed; inset:0; z-index:5200; display:none; overflow-y:auto;
  background:rgba(6,14,24,.72); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px);
  padding:30px clamp(12px,4vw,48px) 44px; }
.film-overlay.open{ display:flex; align-items:flex-start; justify-content:center; animation:qvFade .22s ease both; }
.filmm-panel{ position:relative; width:100%; max-width:980px; margin:auto;
  background:#0b1622; border:1px solid rgba(255,255,255,.10); border-radius:16px;
  box-shadow:0 30px 80px rgba(0,0,0,.6); padding:16px 16px 18px; }
.filmm-head{ display:flex; flex-direction:column; padding:2px 44px 12px 4px; }
.filmm-title{ font-size:15px; font-weight:800; color:#fff; letter-spacing:.2px; }
.filmm-sub{ font-size:12px; color:#9fb2c6; margin-top:2px; }
.filmm-video{ display:block; width:100%; height:auto; border-radius:10px; background:#000;
  box-shadow:0 12px 34px rgba(0,0,0,.5); }
.filmm-dl{ display:inline-flex; align-items:center; gap:7px; margin-top:14px;
  background:#8C1D40; color:#fff !important; text-decoration:none; font-size:12.5px; font-weight:800;
  padding:9px 16px; border-radius:22px; box-shadow:0 6px 16px rgba(140,29,64,.32); transition:.15s; }
.filmm-dl:hover{ background:#a52350; transform:translateY(-1px); }
.filmm-dl .bi{ font-size:12px; color:#fff; }
.film-close{ position:absolute; top:12px; right:14px; width:34px; height:34px; border:none;
  border-radius:50%; background:rgba(255,255,255,.12); color:#fff; font-size:20px; font-weight:800;
  line-height:1; cursor:pointer; z-index:2; transition:.15s; }
.film-close:hover{ background:#8C1D40; }
.qv-overlay{ position:fixed; inset:0; z-index:5000; display:none; overflow-y:auto;
  background:rgba(20,6,14,.58); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px);
  padding:26px clamp(12px,4vw,48px) 52px; }
.qv-overlay.open{ display:block; animation:qvFade .22s ease both; }
@keyframes qvFade{ from{ opacity:0 } to{ opacity:1 } }
/* white panel inside the overlay — beat the transparent .tabshow-card rule with higher specificity */
.qv-overlay .crb-card.tabshow-card.qv-inpanel{ position:relative; max-width:1220px; margin:0 auto;
  background:#ffffff !important; border:1px solid #eadfe6 !important; border-radius:18px !important;
  box-shadow:0 30px 80px rgba(0,0,0,.45) !important;
  padding:26px clamp(16px,3vw,34px) 22px; animation:qvPop .3s cubic-bezier(.2,.7,.3,1.2) both; }
@keyframes qvPop{ from{ opacity:0; transform:translateY(18px) scale(.985) } to{ opacity:1; transform:none } }
.qv-close{ position:absolute; top:14px; right:16px; z-index:6; width:38px; height:38px; border-radius:50%;
  border:1px solid #eadfe6; background:#fff; color:#8C1D40; font-size:22px; font-weight:700; line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 12px rgba(13,33,55,.14); transition:transform .14s, background .14s, color .14s; }
.qv-close:hover{ transform:scale(1.08); background:#8C1D40; color:#fff; }

/* ── Overview story film — auto-playing, looping, native controls ── */
.film-card{ padding:20px 22px 22px; }
.film-head{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:14px; }
.film-head .bi{ color:#8C1D40; font-size:20px; }
.film-title{ font-size:17px; font-weight:800; color:#8C1D40; letter-spacing:.2px; }
.film-hint{ font-size:11.5px; color:#6b4a54; font-weight:600; margin-left:4px; }
.film-video{ display:block; width:100%; max-width:960px; margin:0 auto; height:auto; aspect-ratio:16/9;
  border-radius:14px; background:#000; box-shadow:0 16px 42px rgba(13,33,55,.24), 0 3px 8px rgba(13,33,55,.10); }

/* ── Overview reading rhythm ──────────────────────────────────────────────
   The page runs ~16 sections. Within a movement they sit at the normal ~18px
   cadence; between the 5 movements a larger, deliberate breath (a "phrase break")
   groups them — the professional vertical rhythm of a long-form report. ── */
.overview-page > .hero-row{ margin-bottom:18px; }
.overview-page > .tk-bar{ margin-bottom:18px; }
.ov-actbreak{ height:36px; }
.ov-actbreak::after{ content:""; display:block; width:46px; height:2px; margin:17px auto 0;
  border-radius:2px; background:linear-gradient(90deg, transparent, rgba(140,29,64,.28), transparent); }
@media (max-width:760px){ .ov-actbreak{ height:24px; } .ov-actbreak::after{ margin-top:11px; } }

.why-stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:18px; }
@media(min-width:760px){ .why-stats{ grid-template-columns:repeat(4,1fr); } }
.why-stat{ background:#ffffff; border:1px solid #e6ecf2;
  border-top:3px solid #FFC627; border-radius:12px; padding:12px 12px 11px; text-align:center;
  box-shadow:0 6px 16px rgba(13,33,55,.08); transition:transform .15s, box-shadow .15s; }
.why-stat:hover{ transform:translateY(-3px); box-shadow:0 12px 24px rgba(140,29,64,.15); }
.why-stat .bi{ font-size:17px; color:#8C1D40; }
.why-stat-num{ font-size:19px; font-weight:800; color:#0D2137; margin-top:3px; letter-spacing:-.3px; }
.why-stat-lbl{ font-size:10.5px; color:#607d8b; font-weight:600; line-height:1.3; margin-top:2px; }
/* Overview — tiles sized to content; compact stat styling */
.overview-page .why-stat{ min-width:0; padding:10px 12px 9px; border-top-width:2px; }
.overview-page .why-stat .bi{ font-size:15px; }
.overview-page .why-stat-num{ font-size:16px; margin-top:2px; }
.overview-page .why-stat-lbl{ font-size:10px; }

/* Overview — tiles + CTA buttons share ONE row on wide screens; on small screens
   tiles go 2-up and the buttons stack full-width */
/* Overview proof row: tiles (left) + a centered column of lead-over-buttons (right) */
.why-proofrow{ display:flex; flex-wrap:wrap; gap:16px 18px; align-items:center;
  justify-content:center; margin:8px 0 4px; }
.why-tiles{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.why-tiles .why-stat{ flex:0 0 150px; }
.why-ctacol{ display:flex; flex-direction:column; align-items:center; gap:9px; }
.why-cta-lead{ font-size:12.5px; color:#546e7a; font-weight:600; line-height:1.5;
  margin:0; text-align:center; }
.why-cta-lead b{ color:#8C1D40; }
.why-ctabtns{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; align-items:center; }
.why-ctabtns .wflow-cta{ flex:0 0 auto; }
@media(max-width:600px){
  .why-tiles .why-stat{ flex:1 1 44%; }
  .why-ctabtns .wflow-cta{ flex:1 1 100%; justify-content:center; }
}
.why-first-grid{ display:grid; grid-template-columns:1fr; gap:11px; margin-bottom:16px; align-items:stretch; }
@media(min-width:560px){ .why-first-grid{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:900px){ .why-first-grid{ grid-template-columns:repeat(3,1fr); } }
@media(min-width:1280px){ .why-first-grid{ grid-template-columns:repeat(6,1fr); } }
.why-first{ background:#fff; border:1.5px solid #ece0e5; border-left:4px solid #8C1D40;
  border-radius:12px; padding:12px 14px; box-shadow:0 6px 16px rgba(140,29,64,.07);
  transition:transform .16s, box-shadow .16s; }
.why-first:hover{ transform:translateY(-3px); box-shadow:0 14px 28px rgba(140,29,64,.16); }
.why-first-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.why-first-top .bi{ font-size:18px; color:#8C1D40; }
.why-first-badge{ font-size:9.5px; font-weight:800; letter-spacing:.05em; color:#8C1D40;
  background:#FFC627; border-radius:20px; padding:2px 9px; }
.why-first-head{ font-size:13px; font-weight:800; color:#0D2137; margin-bottom:3px; }
.why-first-body{ font-size:11.5px; color:#546e7a; line-height:1.5; }

/* two-column layout: story on one side, graph on the other (grid = no gap bugs) */
.wflow-split{ display:grid; grid-template-columns:1fr; gap:20px; align-items:center; }
@media (min-width:900px){ .wflow-split{ grid-template-columns:0.82fr 1.18fr; } }
.wflow-text{ min-width:0; }
.wflow-viz{ min-width:0; }
.wflow-split .wflow-head{ border-bottom:none; padding-bottom:0; margin-bottom:4px; }
/* professional entrance animation for the water-balance graph (subtle rise+fade) */
.wflow-graph{ position:relative; z-index:1; animation:wflowRise .8s cubic-bezier(.2,.7,.3,1) both; }
@keyframes wflowRise{ from{ opacity:0; transform:translateY(16px);} to{ opacity:1; transform:none;} }
@media (prefers-reduced-motion:reduce){ .wflow-graph{ animation:none; } }
.wjourney{ box-shadow:0 12px 28px rgba(13,33,55,.16); position:relative; z-index:1; }
/* animated proportional meters — 90% sky vs 10% river, difference at a glance */
.wmeters{ margin:8px 0 2px; position:relative; z-index:1; }
.wmeter{ margin:12px 0; }
.wmeter-head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:5px; }
.wmeter-lbl{ font-size:13.5px; font-weight:800; color:#0D2137; }
.wmeter-pct{ font-size:25px; font-weight:800; line-height:1; }
.wmeter-pct small{ font-size:13px; font-weight:800; margin-left:1px; }
.wmeter-pct-et{ color:#c85a06; } .wmeter-pct-q{ color:#0277BD; }
.wmeter-track{ height:26px; border-radius:14px; background:#eef2f6; overflow:hidden;
  box-shadow:inset 0 2px 6px rgba(13,33,55,.12), inset 0 -1px 0 rgba(255,255,255,.6); }
.wmeter-fill{ height:100%; border-radius:14px; transform-origin:left center; position:relative;
  overflow:hidden; box-shadow:0 2px 8px rgba(13,33,55,.20);
  animation:wmeterGrow 1.15s cubic-bezier(.2,.7,.3,1) both; }
.wmeter-fill::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, transparent 25%, rgba(255,255,255,.5) 48%, transparent 72%);
  background-size:250% 100%; animation:wmeterShine 2.8s linear infinite; }
.wmeter-fill-et{ background:linear-gradient(90deg,#f6a623 0%,#e8730b 100%); }
.wmeter-fill-q{ background:linear-gradient(90deg,#4bb6ea 0%,#0277BD 100%); }
.wmeter-sub{ font-size:11px; color:#607d8b; font-weight:600; margin-top:4px; }
@keyframes wmeterGrow{ from{ transform:scaleX(0);} to{ transform:scaleX(1);} }
@keyframes wmeterShine{ 0%{ background-position:130% 0;} 100%{ background-position:-130% 0;} }
@media (prefers-reduced-motion:reduce){ .wmeter-fill{ animation:none; } .wmeter-fill::after{ display:none; } }
.wflow-cta{ display:inline-flex; align-items:center; gap:6px; margin-top:8px; position:relative; z-index:1;
  font-size:12px; font-weight:800; color:#fff !important; text-decoration:none;
  background:linear-gradient(150deg,#a52350,#8C1D40 60%,#6d1531); border:2px solid #FFC627;
  border-radius:20px; padding:6px 16px; transition:transform .15s, box-shadow .15s;
  box-shadow:0 6px 16px rgba(140,29,64,.34), inset 0 1px 0 rgba(255,255,255,.32); }
.wflow-cta:hover{ transform:translateY(-2px); color:#fff !important;
  box-shadow:0 11px 24px rgba(140,29,64,.44), inset 0 1px 0 rgba(255,255,255,.4); }
.wflow-cta-navy{ background:linear-gradient(150deg,#1c3a5a 0%,#0d2137 100%);
  box-shadow:0 6px 16px rgba(13,33,55,.34), inset 0 1px 0 rgba(255,255,255,.28); }
.wflow-cta-navy:hover{ box-shadow:0 11px 24px rgba(13,33,55,.44), inset 0 1px 0 rgba(255,255,255,.35); }
/* gentle attention pulse on the primary 'Why CRIA' button */
.wflow-cta-pulse{ animation:ctaPulse 2.6s ease-in-out infinite; }
@keyframes ctaPulse{
  0%,100%{ box-shadow:0 6px 16px rgba(140,29,64,.34), 0 0 0 0 rgba(255,198,39,0), inset 0 1px 0 rgba(255,255,255,.32); }
  50%{ box-shadow:0 8px 18px rgba(140,29,64,.38), 0 0 0 5px rgba(255,198,39,.30), inset 0 1px 0 rgba(255,255,255,.32); } }
.wflow-cta-pulse:hover{ animation:none; }
@media (prefers-reduced-motion:reduce){ .wflow-cta-pulse{ animation:none; } }
@media (prefers-reduced-motion:reduce){ .wflow-cta{ transition:none; } }

/* Vital-signs tiles: one row of compact, content-width tiles (not stretched);
   they wrap only when the screen is too narrow to hold them side by side. */
.rc-tiles{ display:flex; flex-wrap:nowrap; gap:10px; align-items:stretch; }
.rc-tiles > .rc-tile{ flex:1 1 0; min-width:0; max-width:none; height:auto; }
@media(max-width:760px){ .rc-tiles{ flex-wrap:wrap; } .rc-tiles > .rc-tile{ flex:1 1 44%; } }
.rc-tile{ display:block; text-decoration:none; height:100%;
  background:rgba(255,255,255,0.8); backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.7); border-radius:14px; padding:11px 13px;
  box-shadow:0 1px 0 rgba(255,255,255,0.9) inset, 0 6px 16px rgba(13,33,55,0.08);
  transition:transform .18s ease, box-shadow .18s ease; }
.rc-tile:hover{ transform:translateY(-5px);
  box-shadow:0 1px 0 rgba(255,255,255,1) inset, 0 16px 32px rgba(13,33,55,0.15);
  text-decoration:none; }

/* ── Hero "three questions" — interactive segmented control ─────── */
.q3seg .btn-group{ flex-wrap:wrap; gap:0; }
.q3seg .btn{ border:1px solid #d9c2ca !important; color:#8C1D40 !important; font-weight:700 !important;
  font-size:12.5px !important; padding:7px 15px !important; background:#fff !important; }
.q3seg .btn:hover{ background:#faf3f5 !important; }
.q3seg .btn-check:checked + .btn{ background:#8C1D40 !important; border-color:#8C1D40 !important; color:#fff !important; }
/* three questions → a proper 3-up row on desktop (was wrongly stacking full-width) */
.q3-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px; }
.q3-evcol{ min-width:0; }
@media (max-width:900px){ .q3-grid{ grid-template-columns:1fr; } }
/* Overview 3-up cards — map on one side, text beside it (vertically centered); re-flows on resize */
.q3-grid .q3-ev-row{ flex-direction:row; align-items:center; gap:14px; }
.q3-grid .q3-ev-text{ width:auto !important; }
.q3-grid .q3-ev-row > img{ max-width:46% !important; width:auto !important; height:158px !important;
  margin:0 !important; align-self:center !important; }
.q3-evcard{ background:rgba(255,255,255,0.82); backdrop-filter:blur(12px) saturate(1.06);
  -webkit-backdrop-filter:blur(12px) saturate(1.06);
  border:1px solid rgba(255,255,255,0.7); border-radius:16px;
  padding:16px 17px; height:100%;
  box-shadow:0 1px 0 rgba(255,255,255,0.95) inset,
             -4px -4px 10px rgba(255,255,255,0.7),
             0 8px 16px rgba(13,33,55,0.10),
             0 22px 40px rgba(13,33,55,0.12);
  transform:translateY(0);
  transition:transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s ease; }
.q3-evcard:hover{ transform:translateY(-7px) scale(1.018);
  box-shadow:0 1px 0 rgba(255,255,255,1) inset,
             -6px -6px 14px rgba(255,255,255,0.8),
             0 16px 26px rgba(13,33,55,0.14),
             0 34px 60px rgba(13,33,55,0.20); }
.q3-bignum{ font-size: clamp(23px, 4.4vw, 40px); font-weight:800; line-height:0.95; letter-spacing:-1px; }
.q3-spark{ animation:sparkWipe 1.2s cubic-bezier(.4,0,.2,1) both; animation-delay:.15s; }
@keyframes sparkWipe{ from{ clip-path:inset(0 100% 0 0); } to{ clip-path:inset(0 0 0 0); } }
.q3-sciname{ font-size:14px; font-weight:800; color:#0D2137; }
.q3-meta{ font-size:12px; color:#546e7a; line-height:1.55; }
.q3-src{ font-size:11px; color:#8C1D40; font-weight:600; }
/* ── Hero "three questions" — editorial big-number statement ─────── */
.q3-eyebrow{ color:#8C1D40; font-size:11px; font-weight:800; letter-spacing:2px; text-transform:uppercase; }
.q3-title{ color:#0D2137; font-size:27px; font-weight:800; line-height:1.16; letter-spacing:-0.4px;
  margin:8px 0 8px; max-width:820px; }
.q3-title .hl{ color:#8C1D40; }
.q3-sub{ color:#546e7a; font-size:13px; line-height:1.55; max-width:760px; margin-bottom:4px; }
.q3-rule{ height:3px; width:100%; border-radius:3px; margin:18px 0 6px;
  background:linear-gradient(90deg,#8C1D40 0%,#FFC627 42%,rgba(255,198,39,0) 100%); }
.q3-col{ display:block; text-decoration:none; padding:14px 18px 12px; height:100%;
  border-left:1px solid #eef2f6; transition:background .18s ease, transform .18s ease; }
.q3-col:first-child{ border-left:none; }
.q3-col:hover{ background:rgba(140,29,64,0.03); transform:translateY(-2px); text-decoration:none; }
.q3-col-label{ color:#546e7a; font-size:11px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; }
.q3-col-numrow{ display:flex; align-items:baseline; gap:9px; margin:6px 0 2px; }
.q3-col-num{ font-size: clamp(27px, 5.1vw, 46px); font-weight:800; line-height:0.95; letter-spacing:-1px; }
.q3-col-note{ color:#607d8b; font-size:11.5px; line-height:1.4; margin-bottom:11px; }
.q3-col-cta{ color:#01579B; font-size:12px; font-weight:700; display:inline-flex; align-items:center; gap:6px; }
@media(min-width:768px){ .q3-col{ min-height:172px; } }
/* ── Forecast outlook tiles (glassy 3D, side accent) ─────────────── */
.fc-tile{ background:rgba(255,255,255,0.82); backdrop-filter:blur(10px) saturate(1.05);
  -webkit-backdrop-filter:blur(10px) saturate(1.05); border-radius:14px; padding:14px 15px;
  height:100%;
  box-shadow:0 1px 0 rgba(255,255,255,0.95) inset, 0 6px 14px rgba(13,33,55,0.09),
             0 16px 30px rgba(13,33,55,0.10);
  transition:transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s ease; }
.fc-tile:hover{ transform:translateY(-4px);
  box-shadow:0 1px 0 rgba(255,255,255,1) inset, 0 12px 22px rgba(13,33,55,0.13),
             0 26px 46px rgba(13,33,55,0.16); }

/* ── Signature band: the one idea that sets CRIA apart ───────────── */
.sig-card{ border-top:4px solid #FFC627 !important; padding:24px 26px 20px !important;
  margin-bottom:18px; }
/* signature figure — full-width hero, the project's central result */
.sig-hero{ margin-top:18px; padding:16px 16px 12px; border-radius:16px;
  background:rgba(255,255,255,0.66);
  box-shadow:0 1px 0 rgba(255,255,255,.95) inset, 0 10px 26px rgba(13,33,55,.10); }
/* the text that sits beside the figure */
.sig-note{ font-size:13.5px; color:#37474f; line-height:1.7; margin-bottom:16px; }
/* highlighted phrases — gold marker for the surprise, maroon for the consequence */
.hl-gold{ font-weight:800; color:#996000; }
.hl-maroon{ font-weight:800; color:#8C1D40; }
/* ── "Questions this raises" — the app asks the reviewer's questions first ── */
.qa-card{ padding:0 !important; overflow:hidden; margin:16px 0; border-top:4px solid #FFC627; }
.qa-head{ padding:20px 22px 16px;
  background:linear-gradient(145deg,#ffffff 0%,#fdf7f9 60%,#fbeef2 100%); }
.qa-h{ font-size:19px; font-weight:800; color:#0D2137; letter-spacing:-.3px; }
.qa-s{ font-size:12.5px; color:#546e7a; line-height:1.6; margin-top:6px; max-width:700px; }
.qa-list{ border-top:1px solid #eef2f6; }
.qa-item{ border-bottom:1px solid #eef2f6; }
.qa-item:last-child{ border-bottom:none; }
.qa-sum{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:12px;
  padding:14px 22px; transition:background .16s; }
.qa-sum::-webkit-details-marker{ display:none; }
.qa-sum:hover{ background:#faf5f2; }
.qa-num{ flex:0 0 30px; width:30px; height:30px; border-radius:9px; display:flex;
  align-items:center; justify-content:center; font-size:11.5px; font-weight:800;
  color:#8C1D40; background:#fbeef2; border:1.4px solid #f0d4dd; }
.qa-q{ flex:1 1 auto; min-width:0; font-size:13.5px; font-weight:700; color:#0D2137;
  line-height:1.45; }
.qa-badge{ flex:0 0 auto; font-size:10px; font-weight:800; letter-spacing:.6px;
  text-transform:uppercase; padding:4px 10px; border-radius:14px; white-space:nowrap; }
.qa-ok{ background:#e8f5e9; color:#1b5e20; border:1px solid #c6e6c9; }
.qa-part{ background:#eaf3fc; color:#0A66C2; border:1px solid #c9e0f7; }
.qa-open{ background:#fff6dd; color:#8a5a00; border:1px solid #ffe0a3; }
.qa-chev{ flex:0 0 auto; color:#8C1D40; font-size:13px; transition:transform .2s; }
.qa-item[open] .qa-chev{ transform:rotate(180deg); }
.qa-item[open] .qa-sum{ background:#faf5f2; }
.qa-a{ padding:2px 22px 18px 64px; font-size:12.8px; color:#37474f; line-height:1.7; }
.qa-a b{ color:#8C1D40; }
@media(max-width:640px){
  .qa-sum{ flex-wrap:wrap; gap:9px; padding:13px 16px; }
  .qa-q{ flex:1 1 100%; order:3; }
  .qa-a{ padding:2px 16px 16px 16px; }
}

/* ── The research frontier — minimal: number, question, one tag ── */
.oq-wrap{ padding:18px 20px 14px !important; border-top:4px solid #0D2137 !important;
  margin-bottom:18px; }
.qf-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,360px)); gap:14px;
  align-items:start; justify-content:center; }
@media (max-width:1180px){ .qf-grid{ grid-template-columns:repeat(2,minmax(0,360px)); } }
@media (max-width:720px){ .qf-grid{ grid-template-columns:minmax(0,420px); } }

/* frontier cards — everything visible, staggered entrance animation */
.qf-card{ position:relative; display:flex; flex-direction:column; border-radius:4px;
  padding:13px 15px 12px 14px; background:#ffffff; overflow:hidden;
  border-top:3px solid var(--maroon); border-left:3px solid var(--maroon);
  box-shadow:-2px -2px 0 0 rgba(0,0,0,0.04), 2px 4px 10px rgba(0,0,0,0.07);
  opacity:0; animation:qfRise .6s cubic-bezier(.2,.7,.3,1) both;
  transition:transform .18s ease, box-shadow .18s ease; }
.qf-card:hover{ transform:translateY(-3px);
  box-shadow:-3px -3px 0 0 rgba(0,0,0,0.06), 4px 10px 20px rgba(0,0,0,0.11); }
.qf-card-open{ border-top-color:var(--gold2); border-left-color:var(--gold2);
  background:radial-gradient(120% 90% at 100% 0%, rgba(255,198,39,.08) 0%, rgba(255,255,255,0) 55%), #fff; }
@keyframes qfRise{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }

.qf-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.qf-ic{ width:30px; height:30px; border-radius:8px; display:flex; align-items:center;
  justify-content:center; font-size:15px; flex:0 0 auto; }
.qf-ic-ok{ color:#0D2137; background:#e9eef4; }
.qf-ic-part{ color:#8C1D40; background:#f6e7ec; }
.qf-ic-open{ color:#996000; background:#fbf1d3; }
.qf-badge{ font-size:8.5px; font-weight:800; letter-spacing:1px; text-transform:uppercase;
  padding:3px 9px; border-radius:20px; }
.qf-badge-ok{ color:#0D2137; background:#e9eef4; }
.qf-badge-part{ color:#8C1D40; background:#f6e7ec; }
.qf-badge-open{ color:#8a6d0f; background:#f7edcf; }

.qf-hero{ display:flex; align-items:baseline; line-height:1; margin-bottom:6px; }
.qh-v{ font-size:21px; font-weight:800; letter-spacing:-.5px; }
.qh-sup{ font-size:11px; font-weight:800; position:relative; top:-7px; }
.qf-hero-ok .qh-v, .qf-hero-ok .qh-sup{ color:#0D2137; }
.qf-hero-part .qh-v{ color:#8C1D40; }
.qh-q{ font-size:22px; color:#996000; }
.qf-q{ font-size:14px; font-weight:800; line-height:1.32; color:#0D2137; margin-bottom:6px; }
.qf-hl{ white-space:nowrap; }
.qf-card-ok .qf-hl, .qf-card-part .qf-hl{ color:#8C1D40; }
.qf-card-open .qf-hl{ color:#996000; }

.qf-ans{ font-size:11.8px; line-height:1.5; color:#54636e; margin-bottom:11px; }
.qf-link{ margin-top:auto; align-self:flex-start; display:inline-flex; align-items:center; gap:6px;
  font-size:10.5px; font-weight:800; text-decoration:none; padding:5px 11px; border-radius:16px;
  transition:transform .15s ease, filter .15s ease; }
.qf-link i{ font-size:11px; }
.qf-link:hover{ transform:translateX(2px); filter:brightness(1.05); text-decoration:none; }
.qf-link-ok, .qf-link-part{ color:#fff !important; background:#8C1D40; }
.qf-link-open{ color:#0D2137 !important; background:#FFC627; }
@media (prefers-reduced-motion: reduce){ .qf-card{ animation:none; opacity:1; } }

.oq-wrap .sig-cta{ margin-top:14px; }

/* October outlook teaser — dry vs wet start */

/* October teaser — CSS grid (deterministic): stacked on narrow screens (text then
   figure, tight gap), side-by-side on wide. align-items:start so a short figure
   never creates a floating vertical gap. */
.oct-split{ display:grid; grid-template-columns:1fr; gap:16px; align-items:start; }
@media (min-width:900px){ .oct-split{ grid-template-columns:1.1fr 0.9fr; } }
.oct-text{ min-width:0; }
.oct-vizcol{ min-width:0; display:flex; align-items:flex-start; justify-content:center; }

/* October — two contrasting animated scenes (dry vs wet) */
.oct-scene{ margin:0 auto; width:100%; max-width:480px; }
@media (max-width:600px){ .oct-scene{ max-width:100%; } }

/* peer-reviewed backing under the finding */
.sig-cite{ font-size:11.5px; color:#37474f; line-height:1.6; margin-top:10px;
  padding:10px 14px; border-radius:0 8px 8px 0; background:#f1f7f2;
  border-left:3px solid #2E7D32; }
.sig-cite a{ color:#1b5e20; font-weight:600; }
.scl-box{ padding:13px 15px; border-radius:12px; background:#f4f8fb;
  border-left:4px solid #01579B; }
.scl-t{ font-size:12.5px; font-weight:800; color:#0D2137; }
.scl-s{ font-size:11px; color:#78909c; margin-top:3px; line-height:1.45; }
.scl-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:11px; }
.scl-item{ flex:0 0 auto; text-align:center; }
.scl-item-hl{ padding:6px 13px; border-radius:10px; background:#fff8e6;
  box-shadow:0 3px 9px rgba(186,117,23,.18); }
.scl-n{ font-size:20px; font-weight:800; letter-spacing:-.6px; white-space:nowrap; }
.scl-u{ font-size:11px; font-weight:700; color:#78909c; }
.scl-l{ font-size:10.5px; color:#78909c; font-weight:700; margin-top:3px; }

/* the swing: then → now */
.sig-swing-row{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-top:16px;
  padding:16px 20px; border-radius:16px; background:#faf5f2;
  border-left:4px solid #8C1D40; }
.sig-swing{ text-align:center; flex:0 0 auto; }
.sig-swing-n{ font-size: clamp(22px, 4.2vw, 38px); font-weight:800; letter-spacing:-1.4px; line-height:1; }
.sig-swing-l{ font-size:11.5px; color:#546e7a; font-weight:700; margin-top:5px; }
.sig-swing-y{ font-size:10.5px; color:#5f6f7a; margin-top:2px; }
.sig-swing-arrow{ color:#8C1D40; font-size:22px; flex:0 0 auto; }
.sig-swing-txt{ flex:1 1 300px; min-width:0; font-size:13.5px; font-weight:700; color:#0D2137;
  line-height:1.55; }
@media(max-width:640px){ .sig-swing-row{ justify-content:center; }
  .sig-swing-arrow{ transform:rotate(90deg); } }

/* signature: legacy two-column row (kept for other sections) */
.sig-row{ display:flex; gap:18px; align-items:center; flex-wrap:wrap; margin-top:16px; }
.sig-fig{ flex:1 1 400px; min-width:0; }
.sig-ev{ flex:1 1 330px; min-width:0; }
.sig-evh{ font-size:11px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase;
  color:#8C1D40; margin:22px 0 8px; }
.sig-ev .amp-wrap{ flex-direction:column; align-items:stretch; gap:14px; padding:16px 16px; margin:0; }
.sig-ev .amp-badge{ align-self:center; }
.sig-ev .amp-lab{ font-size:12.5px; }
.sig-ev .amp-stage{ display:none; }
@media(max-width:860px){ .sig-row{ flex-direction:column; align-items:stretch; }
  /* in a column, flex-basis becomes HEIGHT — reset so boxes size to content, no empty gap */
  .sig-row > .sig-fig, .sig-row > .sig-ev{ flex:0 0 auto; }
  .sig-ev .amp-stage{ display:inline; } }

/* amplification cascade — rain to river */
.amp-wrap{ display:flex; align-items:center; gap:20px; margin:20px 0 4px;
  border-radius:16px; padding:18px 20px; background:rgba(255,255,255,0.62);
  box-shadow:0 1px 0 rgba(255,255,255,.95) inset, 0 10px 24px rgba(13,33,55,.10); }
.amp-bars{ flex:1 1 auto; min-width:0; position:relative; }
/* the flow line linking the stages, rain → river */
.amp-bars::before{ content:""; position:absolute; left:7px; top:14px; bottom:14px; width:2px;
  border-radius:2px; background:linear-gradient(180deg,#5B9BD5,#01579B,#B5551F,#8C1D40); opacity:.35; }
.amp-row{ display:flex; align-items:flex-start; gap:12px; margin-bottom:16px; }
.amp-row:last-child{ margin-bottom:0; }
.amp-node{ flex:0 0 16px; display:flex; justify-content:center; padding-top:5px; position:relative; z-index:2; }
.amp-dot{ width:12px; height:12px; border-radius:50%; display:block;
  box-shadow:0 0 0 3px #fff, 0 3px 8px rgba(13,33,55,.22); }
.amp-body{ flex:1 1 auto; min-width:0; }
.amp-head{ display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; margin-bottom:6px; }
.amp-lab{ font-size:13.5px; font-weight:800; color:#0D2137; }
.amp-stage{ font-size:11.5px; color:#78909c; font-style:italic; }
.amp-p{ margin-left:auto; font-size:10.5px; color:#78909c; font-weight:700; white-space:nowrap; }
.amp-barrow{ display:flex; align-items:center; gap:11px; }
.amp-pct{ flex:0 0 58px; font-size:21px; font-weight:800; letter-spacing:-.6px; white-space:nowrap; }
.amp-track{ flex:1 1 auto; height:22px; border-radius:7px; background:rgba(13,33,55,.055); overflow:hidden; }
.amp-fill{ position:relative; height:100%; border-radius:7px; overflow:hidden;
  animation:ampGrow .9s cubic-bezier(.2,.7,.3,1) both; }
/* moving water sheen — a light band drifting left→right like current */
.amp-fill::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, transparent 20%, rgba(255,255,255,.45) 42%,
             rgba(255,255,255,.15) 55%, transparent 78%);
  background-size:220% 100%; animation:ampFlow 2.6s linear infinite; }
@keyframes ampGrow{ from{ transform:scaleX(.03); transform-origin:left; } to{ transform:scaleX(1); } }
@keyframes ampFlow{ from{ background-position:120% 0; } to{ background-position:-120% 0; } }
.amp-mult{ flex:0 0 46px; text-align:right; font-size:12.5px; font-weight:800; color:#8C1D40;
  white-space:nowrap; }
.amp-badge{ flex:0 0 auto; text-align:center; padding:18px 22px; border-radius:16px;
  background:radial-gradient(120% 120% at 50% 0%, #fff 0%, #fdf6ea 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95),
              0 10px 26px rgba(140,29,64,.16); border-top:3px solid #FFC627;
  position:relative; overflow:hidden; }
.amp-badge::before{ content:""; position:absolute; left:0; right:0; bottom:0; height:32%;
  background:linear-gradient(180deg, transparent, rgba(255,198,39,.14)); }
.amp-badge-n{ font-size: clamp(19px, 3.7vw, 33px); font-weight:800; line-height:1; letter-spacing:-1px;
  background:linear-gradient(135deg,#8C1D40 0%,#b8452e 55%,#c99a1e 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  position:relative; }
.amp-badge-l{ font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:1.4px;
  color:#8C1D40; margin-top:8px; position:relative; }
.amp-badge-s{ font-size:10px; color:#8a99a4; margin-top:2px; position:relative; }

/* centered chart title + flowing line inside the decline chart */
.sig-charttitle{ text-align:center; font-size:13px; font-weight:800; color:var(--maroon);
  letter-spacing:.3px; margin:2px 0 6px; }
.sig-graphwrap{ position:relative; }

@media(max-width:700px){
  .amp-wrap{ flex-direction:column; align-items:stretch; }
  .amp-lab{ flex:0 0 96px; font-size:12px; }
  .amp-p{ display:none; }
  .amp-badge{ align-self:center; }
}
.sig-punch{ font-size:13.5px; font-weight:700; color:#0D2137; line-height:1.55;
  background:#faf5f2; border-left:3px solid #8C1D40; border-radius:0 8px 8px 0;
  padding:12px 15px; margin-top:14px; }
.tab-body a.sig-cta, a.sig-cta, .sig-cta{ display:inline-block; margin-top:13px;
  font-size:13px; font-weight:800; color:var(--maroon) !important; text-decoration:none; }
.sig-cta i{ color:var(--maroon); }
.sig-cta:hover{ text-decoration:underline; color:var(--maroon) !important; }
@media(max-width:600px){
  .sig-face{ flex-direction:column; }
  .sig-num{ font-size: clamp(22px, 4.2vw, 38px); }
  .sig-vs{ align-self:center; margin:-6px 0; }
}

/* ── Eye-opener cards (striking headline numbers, glassy 3D, pull-you-in) ── */
.eo-card{ background:rgba(255,255,255,0.82); backdrop-filter:blur(11px) saturate(1.05);
  -webkit-backdrop-filter:blur(11px) saturate(1.05); border-radius:15px; padding:16px 17px;
  height:100%; display:flex; flex-direction:column;
  box-shadow:0 1px 0 rgba(255,255,255,0.95) inset, 0 8px 16px rgba(13,33,55,0.10),
             0 20px 36px rgba(13,33,55,0.11);
  transition:transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s ease; }
.eo-card:hover{ transform:translateY(-6px);
  box-shadow:0 1px 0 rgba(255,255,255,1) inset, 0 16px 26px rgba(13,33,55,0.14),
             0 32px 56px rgba(13,33,55,0.18); }
.eo-kicker{ font-size:11px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase;
  color:#8C1D40; margin-bottom:6px; }
.eo-big{ font-size: clamp(27px, 5.1vw, 46px); font-weight:800; line-height:0.95; letter-spacing:-1.5px; margin-bottom:8px; }
.eo-line{ font-size:13.5px; color:#0D2137; font-weight:700; line-height:1.42; margin-bottom:9px; }
.eo-src{ font-size:11.5px; color:#546e7a; line-height:1.4; margin-bottom:10px; }
.eo-cta{ font-size:12.5px; font-weight:700; color:#01579B; text-decoration:none; margin-top:auto; }
.eo-cta:hover{ text-decoration:underline; }
@media(max-width:600px){ .eo-big{ font-size: clamp(22px, 4.2vw, 38px); } }

/* ── Flagship "balance sheet of losses": text left · 3D number tile right ── */
.eo2-ledger{ margin-top:14px; }
.eo2-row{ display:flex; align-items:center; gap:22px; padding:16px 2px; }
.eo2-div{ border-bottom:1px solid rgba(13,33,55,0.08); }
.eo2-txt{ flex:1 1 auto; min-width:0; }
.eo2-kicker{ font-size:11px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase;
  color:#8C1D40; margin-bottom:5px; }
.eo2-line{ font-size:14px; color:#0D2137; font-weight:700; line-height:1.46; margin-bottom:7px; }
.eo2-line b{ color:#8C1D40; }
.eo2-meta{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; }
.eo2-src{ font-size:11.5px; color:#546e7a; }
.eo2-cta{ font-size:12.5px; font-weight:700; color:#01579B; text-decoration:none; white-space:nowrap; }
.eo2-cta:hover{ text-decoration:underline; }
/* the 3D glassy number tile — floats on the right */
.eo2-tile{ flex:0 0 auto; width:172px; text-align:center; border-radius:18px; padding:18px 16px 14px;
  background:linear-gradient(145deg, rgba(255,255,255,0.92), rgba(255,255,255,0.55));
  backdrop-filter:blur(12px) saturate(1.1); -webkit-backdrop-filter:blur(12px) saturate(1.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95),
              inset 3px 3px 9px rgba(13,33,55,0.05),
              inset -3px -3px 9px rgba(255,255,255,0.7),
              0 12px 26px rgba(13,33,55,0.16),
              0 3px 7px rgba(13,33,55,0.10);
  transition:transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s ease; }
.eo2-tile:hover{ transform:translateY(-5px) scale(1.02);
  box-shadow: inset 0 1px 0 rgba(255,255,255,1),
              inset 3px 3px 9px rgba(13,33,55,0.05),
              inset -3px -3px 9px rgba(255,255,255,0.8),
              0 20px 38px rgba(13,33,55,0.2),
              0 5px 10px rgba(13,33,55,0.12); }
.eo2-num{ font-size: clamp(24px, 4.7vw, 42px); font-weight:800; line-height:0.95; letter-spacing:-1.5px; }
.eo2-unit{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.8px;
  color:#546e7a; margin-top:7px; }
@media(max-width:640px){
  .eo2-row{ flex-direction:column-reverse; align-items:stretch; gap:12px; }
  .eo2-tile{ width:100%; }
  .eo2-num{ font-size: clamp(22px, 4.2vw, 38px); }
}

/* ── Flagship v3: three 3D info-tiles in one row · text left, number chip right ── */
.eo3-tile{ height:100%; display:flex; flex-direction:column; border-radius:16px; padding:15px 16px;
  background:rgba(255,255,255,0.82); backdrop-filter:blur(11px) saturate(1.05);
  -webkit-backdrop-filter:blur(11px) saturate(1.05);
  box-shadow:0 1px 0 rgba(255,255,255,0.95) inset, 0 8px 16px rgba(13,33,55,0.10),
             0 20px 36px rgba(13,33,55,0.11);
  transition:transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s ease; }
.eo3-tile:hover{ transform:translateY(-6px);
  box-shadow:0 1px 0 rgba(255,255,255,1) inset, 0 16px 26px rgba(13,33,55,0.14),
             0 32px 56px rgba(13,33,55,0.18); }
.eo3-inner{ display:flex; gap:12px; align-items:flex-start; }
.eo3-txt{ flex:1 1 auto; min-width:0; }
/* new layout: kicker + number on top, full-width text below (no squeezed column) */
.eo3-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:11px; }
.eo3-top .eo3-kicker{ flex:1 1 auto; min-width:0; margin:0; }
.eo3-kicker{ font-size:10.5px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase;
  color:#8C1D40; margin-bottom:6px; }
.eo3-line{ font-size:13px; color:#0D2137; font-weight:700; line-height:1.42; }
.eo3-line b{ color:#8C1D40; }
/* the number chip — its own inset 3D tile on the right (same size in every tile) */
.eo3-numbox{ flex:0 0 100px; width:100px; min-height:78px; text-align:center;
  border-radius:13px; padding:11px 8px 10px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:linear-gradient(145deg, rgba(255,255,255,0.95), rgba(255,255,255,0.6));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95),
              inset 2px 2px 6px rgba(13,33,55,0.05),
              inset -2px -2px 6px rgba(255,255,255,0.8),
              0 6px 14px rgba(13,33,55,0.14); }
.eo3-num{ font-size:24px; font-weight:800; line-height:1.05; letter-spacing:-0.8px;
  white-space:nowrap; }
.eo3-unit{ font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.4px;
  color:#546e7a; margin-top:6px; line-height:1.3; overflow-wrap:normal; word-break:keep-all;
  hyphens:none; }
@media(max-width:420px){ .eo3-numbox{ flex:0 0 92px; width:92px; } .eo3-num{ font-size:22px; } }
.eo3-foot{ margin-top:auto; padding-top:11px; display:flex; flex-direction:column; gap:5px; }
.eo3-src{ font-size:11px; color:#546e7a; line-height:1.4; }
.eo3-cta{ font-size:12px; font-weight:700; color:#01579B; text-decoration:none; }
.eo3-cta:hover{ text-decoration:underline; }
/* ── Overview hero: scale big numbers down on phones so nothing clips ── */
@media(max-width:600px){
  .q3-title{ font-size:21px; }
  .q3-col-num{ font-size: clamp(21px, 4.0vw, 36px); }
  .q3-bignum{ font-size: clamp(19px, 3.6vw, 32px); }
  .q3-col{ border-left:none; padding:12px 14px 10px; }
}
@media(max-width:420px){
  .q3-title{ font-size:18px; }
  .q3-col-num{ font-size: clamp(17px, 3.3vw, 30px); }
  .q3-bignum{ font-size: clamp(16px, 3.1vw, 28px); }
}

/* 12 - RIA assistant: floating chat pill + panel (bottom-LEFT) */
/* Footer repo links — maroon+gold 3D pills (match sidebar pills) */
.footer-pill{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:50%;margin-left:9px;text-decoration:none;
  background:linear-gradient(150deg,#a52350 0%,#8C1D40 55%,#6d1531 100%);border:2px solid #FFC627;
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 4px 10px rgba(140,29,64,.42),0 2px 4px rgba(140,29,64,.28);
  transition:transform .15s,box-shadow .15s;}
.footer-pill .bi{color:#FFC627;font-size:15px;line-height:1;}
.footer-pill:hover{transform:translateY(-2px) scale(1.06);
  box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 8px 16px rgba(140,29,64,.5);}

.ria-fab{position:fixed;left:22px;right:auto;bottom:70px;z-index:1200;height:46px;padding:0 18px;border-radius:24px;
  background:#8C1D40;color:#fff;border:3px solid #FFC627;cursor:pointer;font-size:14px;font-weight:700;
  display:flex;align-items:center;gap:9px;box-shadow:0 6px 20px rgba(140,29,64,.4);
  transition:transform .15s,background .15s;}
.ria-fab .bi{font-size:19px;color:#FFC627;}
.ria-fab-label{white-space:nowrap;}
.ria-fab,.wf-fab,.why-fab{font-family:inherit;}
.ria-fab:hover{background:#6d1531;transform:translateY(-2px);}
.ria-modal{position:fixed;right:22px;left:auto;bottom:80px;z-index:1300;width:390px;
  max-width:calc(100vw - 44px);height:min(600px, calc(100dvh - 120px));display:none;}
.ria-modal.open{display:block;}
.ria-card{position:relative;width:100%;height:100%;border-radius:16px;overflow:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,.32);border:1px solid #ece0cf;background:#fff;}
.ria-frame{width:100%;height:100%;border:none;display:block;}
.ria-close{position:absolute;top:12px;right:12px;z-index:5;width:28px;height:28px;border-radius:50%;
  border:none;background:rgba(255,255,255,.9);color:#8C1D40;cursor:pointer;font-size:11px;
  display:flex;align-items:center;justify-content:center;}
.ria-close:hover{background:#fff;}
/* ── Research Team: animated hero ─────────────────────────────── */
.tmh{ position:relative; overflow:hidden; background:#fff; border:1.6px solid #8C1D40;
  border-radius:18px; padding:26px 28px 22px; margin-bottom:6px;
  display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.tmh-text{ flex:1 1 380px; min-width:0; }
.tmh-eyebrow{ font-size:11px; font-weight:800; letter-spacing:2px; text-transform:uppercase;
  color:#8C1D40; animation:tmFade .6s ease both; }
.tmh-title{ font-size: clamp(19px, 3.6vw, 32px); font-weight:800; color:#0D2137; letter-spacing:-.8px;
  line-height:1.1; margin:8px 0 8px; animation:tmFade .6s ease .1s both; }
.tmh-hl{ color:#8C1D40; position:relative; }
.tmh-sub{ font-size:13.5px; color:#546e7a; line-height:1.6; max-width:640px;
  animation:tmFade .6s ease .18s both; }
.tmh-rule{ height:4px; border-radius:4px; margin:16px 0 14px; width:100%;
  background:linear-gradient(90deg,#8C1D40 0%,#FFC627 45%,rgba(255,198,39,0) 100%);
  transform-origin:left; animation:tmRule 1s cubic-bezier(.2,.7,.3,1) .2s both; }
@keyframes tmRule{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
.tmh-stats{ display:flex; gap:26px; flex-wrap:wrap; animation:tmFade .6s ease .3s both; }
.tmh-n{ font-size:26px; font-weight:800; color:#8C1D40; line-height:1; letter-spacing:-.8px; }
.tmh-l{ font-size:11px; color:#78909c; font-weight:700; margin-top:4px; }
/* small animated figures — people at work */
.tmh-figs{ flex:0 0 auto; display:flex; align-items:flex-end; gap:12px; height:96px; }
.tmh-fig{ display:block; width:22px; border-radius:11px 11px 4px 4px;
  animation:tmBob 3.2s ease-in-out infinite; }
.tmh-fig::before{ content:""; display:block; width:16px; height:16px; border-radius:50%;
  margin:-20px auto 4px; }
.tmh-fig.f1{ height:48px; background:#8C1D40; animation-delay:0s; }
.tmh-fig.f1::before{ background:#8C1D40; }
.tmh-fig.f2{ height:62px; background:#FFC627; animation-delay:.35s; }
.tmh-fig.f2::before{ background:#FFC627; }
.tmh-fig.f3{ height:54px; background:#8C1D40; animation-delay:.7s; }
.tmh-fig.f3::before{ background:#8C1D40; }
.tmh-fig.f4{ height:70px; background:#FFC627; animation-delay:1.05s; }
.tmh-fig.f4::before{ background:#FFC627; }
.tmh-fig.f5{ height:44px; background:#8C1D40; animation-delay:1.4s; }
.tmh-fig.f5::before{ background:#8C1D40; }
@keyframes tmBob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }
@keyframes tmFade{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@media(max-width:720px){ .tmh-figs{ display:none; } .tmh-title{ font-size:26px; } }

/* cards reveal in sequence */
.tm-stagger > *{ animation:tmFade .5s ease both; }
.tm-stagger > *:nth-child(1){ animation-delay:.05s; }
.tm-stagger > *:nth-child(2){ animation-delay:.12s; }
.tm-stagger > *:nth-child(3){ animation-delay:.19s; }
.tm-stagger > *:nth-child(4){ animation-delay:.26s; }
.tm-stagger > *:nth-child(5){ animation-delay:.33s; }
.tm-stagger > *:nth-child(6){ animation-delay:.40s; }
.tm-card-sm{ height:100%; }

/* graduate-student tiles — centred and interactive */
.tm-stu{ height:100%; display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:22px 18px 20px; border-color:#8C1D40;
  transition:transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s ease, border-color .22s ease; }
.tm-stu:hover{ transform:translateY(-6px); border-color:#FFC627;
  box-shadow:0 14px 28px rgba(13,33,55,.14); }
.tm-stu-av{ flex:0 0 54px; width:54px; height:54px; border-radius:16px; font-size:17px;
  margin-bottom:12px; transition:transform .22s cubic-bezier(.2,.7,.3,1); }
.tm-stu:hover .tm-stu-av{ transform:translateY(-3px) scale(1.08) rotate(-3deg); }
.tm-stu-name{ font-size:15px; font-weight:800; color:#0D2137; line-height:1.2; }
.tm-stu:hover .tm-stu-name{ color:#8C1D40; }
.tm-stu-affil{ font-size:11.5px; color:#546e7a; margin-top:4px; font-weight:600; }
.tm-stu-rule{ width:34px; height:3px; border-radius:3px; margin:12px auto 11px;
  background:linear-gradient(90deg,#8C1D40,#FFC627); transition:width .22s ease; }
.tm-stu:hover .tm-stu-rule{ width:62px; }
.tm-stu-focus{ font-size:12.5px; color:#37474f; line-height:1.6; }

/* ── Research Team tab ────────────────────────────────────────── */
.tm-sec{ font-size:12px; font-weight:800; letter-spacing:2px; text-transform:uppercase;
  color:#8C1D40; margin:30px 0 16px; text-align:center; }
/* outlined cards — ASU maroon / gold border, no fill */
.tm-card{ height:100%; background:#ffffff; border:1.6px solid #8C1D40; border-radius:14px;
  padding:15px 16px;
  transition:transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s ease, background .2s ease; }
.tm-card:hover{ transform:translateY(-4px);
  box-shadow:0 10px 22px rgba(13,33,55,.12); }
.tm-head{ display:flex; gap:12px; align-items:flex-start; }
/* initials badge — 3D glossy, light ASU tint (fill/rim set inline per person) */
.tm-avatar{ flex:0 0 44px; width:44px; height:44px; border-radius:13px;
  border:1.6px solid #8C1D40; color:#8C1D40;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px;
  letter-spacing:.3px;
  transition:transform .2s cubic-bezier(.2,.7,.3,1); }
.tm-card:hover .tm-avatar{ transform:translateY(-2px) scale(1.04); }
.tm-avatar-sm{ flex:0 0 36px; width:36px; height:36px; border-radius:11px; font-size:12.5px;
  border-width:1.4px; }
.tm-name{ font-size:14.5px; font-weight:800; color:#0D2137; line-height:1.2; }
.tm-role{ font-size:12px; font-weight:800; margin-top:2px; }
.tm-affil{ font-size:11.5px; color:#546e7a; line-height:1.4; margin-top:2px; }
/* the same maroon→gold rule under the name block, left-aligned on person cards */
.tm-rule{ width:38px; height:3px; border-radius:3px; margin:12px 0 11px;
  background:linear-gradient(90deg,#8C1D40,#FFC627); transition:width .22s ease; }
.tm-card:hover .tm-rule{ width:68px; }
.tm-focus{ font-size:12.5px; color:#37474f; line-height:1.55; }
.tm-links{ display:flex; gap:7px; flex-wrap:wrap; margin-top:11px; }
.tm-chip{ display:inline-flex; align-items:center; font-size:11px; font-weight:700;
  color:#8C1D40; background:#fbeef2; border:1px solid #f0d4dd; border-radius:14px;
  padding:3px 10px; }
/* each chip is its own link */
.tm-chip{ cursor:pointer; transition:background .15s, color .15s, border-color .15s,
  transform .15s; }
.tm-chip:hover{ background:#8C1D40; color:#fff !important; border-color:#8C1D40;
  transform:translateY(-1px); }
.tm-chip-li:hover{ background:#0A66C2; color:#fff !important; border-color:#0A66C2; }
.tm-name-link{ cursor:pointer; }
/* LinkedIn chips carry the LinkedIn blue */
.tm-chip-li{ color:#0A66C2; background:#eaf3fc; border-color:#c9e0f7; }
.tm-partner{ display:block; height:100%; text-decoration:none; background:#fff;
  border:1.5px solid #FFC627; border-radius:12px; padding:13px 15px;
  transition:transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s ease; }
.tm-partner:hover{ transform:translateY(-3px); box-shadow:0 8px 18px rgba(13,33,55,.12); }
.tm-pn{ font-size:13px; font-weight:800; color:#8C1D40; }
.tm-pr{ font-size:11.5px; color:#546e7a; line-height:1.45; margin-top:5px; }

/* sub-basin preset buttons */
.bw-preset{ border:1px solid #e7c9d4; background:#fff; color:#8C1D40; border-radius:16px;
  padding:5px 13px; font-size:12px; font-weight:700; cursor:pointer; transition:.15s; }
.bw-preset:hover{ background:#faf5f2; transform:translateY(-1px); }

/* ── Sidebar "built by" tile — 3D, interactive ─────────────────── */
/* inner text is plain, never link-styled */
.sidebar .dev-tile, .sidebar .dev-tile div, .sidebar .dev-tile span{ text-decoration:none; }


/* sits inside .sidebar-bottom — no second box, no double padding */
.dev-tile{ display:block; text-decoration:none; margin:0; padding:0;
  border:none; background:transparent; box-shadow:none; }
.dev-tile-app{ font-size:10.5px; font-weight:800; color:#8C1D40; line-height:1.3;
  margin-bottom:9px; }
.dev-tile-row{ display:flex; align-items:center; gap:9px; }
.dev-tile-badge{ flex:0 0 36px; width:36px; height:36px; border-radius:50%; display:block;
  border:none; background:transparent; box-shadow:none; }
.dev-tile-name{ font-size:11.5px; font-weight:800; color:#0D2137; line-height:1.25;
  margin-top:3px; }
.dev-tile-role{ font-size:9.5px; color:#64748b; line-height:1.3; margin-top:1px; }
.dev-tile-tag{ display:block; font-size:9px; font-weight:800; letter-spacing:1px;
  text-transform:uppercase; color:#8C1D40; margin:0; }
.dev-tile-arrow{ transition:transform .22s ease; }

/* ── Display size: three scales for the whole app ─────────────── */
.zoom-box{ margin:10px 4px 0; padding:10px 12px; background:#fff; border-radius:10px;
  box-shadow:0 3px 10px rgba(13,33,55,0.08); }
.zoom-title{ font-size:10px; font-weight:800; letter-spacing:1px; text-transform:uppercase;
  color:#8C1D40; margin-bottom:7px; }
.zoom-row{ display:flex; gap:7px; }
.zoom-btn{ flex:1; border:2px solid #FFC627; background:#8C1D40; color:#fff; border-radius:8px;
  padding:5px 0; cursor:pointer; font-weight:800; font-size:12px; line-height:1.1;
  transition:background .15s, border-color .15s, transform .12s; }
.zoom-btn.zoom-2{ font-size:15px; } .zoom-btn.zoom-3{ font-size:18px; }
.zoom-btn:hover{ background:#a52350; border-color:#FFC627; transform:translateY(-1px); }
.zoom-btn.active{ background:#FFC627; border-color:#FFC627; color:#8C1D40; }
body.zoom-lv2 .main-content{ font-size:16.5px; }
body.zoom-lv2 .tab-body{ zoom:1.12; }
body.zoom-lv3 .main-content{ font-size:18px; }
body.zoom-lv3 .tab-body{ zoom:1.26; }
@supports not (zoom:1){
  body.zoom-lv2 .tab-body{ transform:scale(1.12); transform-origin:top left; width:89%; }
  body.zoom-lv3 .tab-body{ transform:scale(1.26); transform-origin:top left; width:79%; }
}
/* Mobile: CSS `zoom` is unreliable (esp. iOS Safari) — use transform, which
   renders everywhere, so the A/A/A control visibly scales the page. */
@media (max-width:768px){
  body.zoom-lv2 .tab-body{ zoom:1; transform:scale(1.1);  transform-origin:top left; width:90.9%; }
  body.zoom-lv3 .tab-body{ zoom:1; transform:scale(1.22); transform-origin:top left; width:82%; }
}

/* RIA window controls: new page · expand · minimise · close */
.ria-ctls{position:absolute;top:10px;right:10px;z-index:7;display:flex;gap:7px;}
.ria-ctl{width:31px;height:31px;border-radius:50%;border:none;background:#fff;
  color:#8C1D40;cursor:pointer;font-size:13px;display:flex;align-items:center;justify-content:center;
  text-decoration:none;box-shadow:0 2px 8px rgba(13,33,55,.28);transition:background .15s,transform .15s;}
.ria-ctl:hover{background:#faf0f3;transform:translateY(-1px);color:#8C1D40;}
/* Close button — most prominent, clearly the way out */
#ria-modal-close{width:34px;height:34px;font-size:15px;background:#fff;color:#8C1D40;
  box-shadow:0 3px 11px rgba(13,33,55,.34);outline:2px solid rgba(255,255,255,.55);}
#ria-modal-close:hover{background:#8C1D40;color:#fff;transform:translateY(-1px) scale(1.05);}
/* expanded: large reading screen */
.ria-modal.big{width:min(920px,calc(100vw - 44px));height:min(760px, calc(100dvh - 100px));bottom:80px;}
/* minimised: just the header bar */
.ria-modal.mini{height:52px;min-height:52px;}
.ria-modal.mini .ria-frame{display:none;}
.ria-modal.mini .ria-card{background:#8C1D40;}
.ria-modal.mini .ria-card::before{content:"RIA — click ⌃ to restore";position:absolute;left:16px;top:16px;
  color:#fff;font-size:12.5px;font-weight:700;}
@media(max-width:640px){.ria-modal.big{width:calc(100vw - 24px);height:min(600px, calc(100dvh - 90px));bottom:70px;}}
@media(max-width:640px){.ria-modal{right:12px;left:auto;bottom:70px;height:min(560px, calc(100dvh - 100px));}.ria-fab{left:12px;right:auto;bottom:64px;}}

/* "How it's built" launcher, stacked above the RIA pill (bottom-LEFT) */
.wf-fab{position:fixed;left:22px;right:auto;bottom:126px;z-index:1200;height:42px;padding:0 16px;
  border-radius:22px;background:#0d2137;color:#fff;border:2px solid #FFC627;cursor:pointer;
  font-size:13px;font-weight:700;text-decoration:none;display:flex;align-items:center;gap:8px;
  box-shadow:0 6px 20px rgba(13,33,55,.35);transition:transform .15s,background .15s;}
.wf-fab:hover{background:#13314f;transform:translateY(-2px);color:#fff;text-decoration:none;}
.wf-fab .bi{font-size:16px;color:#FFC627;}
@media(max-width:640px){.wf-fab{left:12px;right:auto;bottom:118px;height:38px;padding:0 12px;font-size:12px;}}

/* Team pill — stacked above the Why-CRIA pill */
.team-fab{position:fixed;left:22px;right:auto;bottom:230px;z-index:1200;height:38px;padding:0 15px;
  border-radius:20px;background:#0d2137;color:#fff;border:2px solid #FFC627;cursor:pointer;
  font-size:12.5px;font-weight:700;text-decoration:none !important;display:flex;align-items:center;
  gap:8px;box-shadow:0 6px 18px rgba(13,33,55,.34);transition:transform .15s,background .15s;}
.team-fab:hover{background:#13314f;transform:translateY(-2px);color:#fff !important;}
.team-fab .bi{font-size:15px;color:#FFC627;}
@media(max-width:640px){.team-fab{left:12px;right:auto;bottom:218px;height:34px;padding:0 12px;font-size:11.5px;}}

.why-fab{position:fixed;left:22px;right:auto;bottom:178px;z-index:1200;height:42px;padding:0 16px;
  border-radius:22px;background:#8C1D40;color:#fff;border:2px solid #FFC627;cursor:pointer;
  font-size:13px;font-weight:700;text-decoration:none;display:flex;align-items:center;gap:8px;
  box-shadow:0 6px 20px rgba(140,29,64,.35);transition:transform .15s,background .15s;}
.why-fab:hover{background:#6d1531;transform:translateY(-2px);color:#fff;text-decoration:none;}
.why-fab .bi{font-size:16px;color:#FFC627;}
@media(max-width:640px){.why-fab{left:12px;right:auto;bottom:170px;height:38px;padding:0 12px;font-size:12px;}}

/* ════════════════════════════════════════════════════════════
   NORMAL / READABLE TEXT SIZES  (last block → wins the cascade)
   Bumps the whole app up from the old cramped 11–13px to comfortable
   reading sizes. Kept proportional; still scales down on phones.
   ════════════════════════════════════════════════════════════ */
body { font-size: 15px; }

/* primary body / card / tab text */
.tab-body, .crb-card, .crb-card-body, .crb-card p, .tab-body p, .tab-body li,
.pub-card, .governance-body, .methods-body, .insight-body, .references-body {
  font-size: 15px; line-height: 1.6;
}

/* navigation + sub-navigation */
.nav-link { font-size: 14.5px !important; }
.subtab-tab, .subtab { font-size: 14px !important; }
.subnav-dropdown, .Select-value-label, .Select-placeholder,
.dash-dropdown, .Select-option { font-size: 14.5px !important; }

/* headers */
.tab-header h2 { font-size: 20px !important; }
.app-title { font-size: 20px; }
.app-subtitle { font-size: 12.5px; }
.crb-card-header, .crb-card-header > span { font-size: 15.5px; }

/* labels, controls, meta */
.control-label, .dash-label, .form-check-label,
.info-tile-label, .radio-label, .crb-legend, .subnav-label { font-size: 13.5px; }
.info-tile-value { font-size: 22px; }

/* small print / captions / footnotes → readable, not tiny */
.crb-footer > *, .q3-meta, .q3-src, .source-note, .caption, .footnote,
.data-note, small { font-size: 12.5px; }

/* overview hero */
.q3-sub { font-size: 14.5px; }
.q3-sciname { font-size: 15px; }

/* tables */
.tab-body table, .dash-table-container, .dash-spreadsheet,
.dash-cell, .dash-header { font-size: 14px !important; }

/* keep phones comfortable but not oversized */
@media (max-width: 600px) {
  body, .tab-body, .crb-card, .crb-card-body { font-size: 14px; }
  .tab-header h2 { font-size: 17px !important; }
  .info-tile-value { font-size: 19px; }
  .nav-link { font-size: 14px !important; }
}

/* ═══════════════════════════════════════════════════════════
   LIVE-SIGNAL TICKER — real outputs, market-tape style (light)
   ═══════════════════════════════════════════════════════════ */
.tk-bar{ position:relative; display:flex; align-items:stretch; margin-bottom:16px;
  border-radius:11px; overflow:hidden; background:#ffffff;
  border:1px solid #e9eef3; border-top:3px solid #FFC627;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 8px 20px rgba(13,33,55,.12), 0 2px 5px rgba(13,33,55,.06); }
.tk-badge{ flex:0 0 auto; display:flex; align-items:center; gap:8px; z-index:3;
  padding:0 16px; font-size:10.5px; font-weight:800; letter-spacing:1.2px; color:#fff;
  background:linear-gradient(90deg,#8C1D40,#731433); white-space:nowrap;
  box-shadow:6px 0 14px rgba(13,33,55,.14); }
.tk-live-dot{ width:8px; height:8px; border-radius:50%; background:#FFC627;
  animation:tkPulse 1.6s ease-out infinite; }
@keyframes tkPulse{ 0%{ box-shadow:0 0 0 0 rgba(255,198,39,.7); }
  70%{ box-shadow:0 0 0 8px rgba(255,198,39,0); } 100%{ box-shadow:0 0 0 0 rgba(255,198,39,0); } }

.tk-track{ flex:1 1 auto; overflow:hidden; position:relative; }
.tk-track::before, .tk-track::after{ content:""; position:absolute; top:0; bottom:0; width:36px;
  z-index:2; pointer-events:none; }
.tk-track::before{ left:0; background:linear-gradient(90deg,#ffffff,transparent); }
.tk-track::after{ right:0; background:linear-gradient(270deg,#ffffff,transparent); }
.tk-tape{ display:inline-flex; align-items:center; white-space:nowrap;
  animation:tkScroll 42s linear infinite; }
.tk-bar:hover .tk-tape{ animation-play-state:paused; }
@keyframes tkScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
/* accessibility — honor reduced-motion: stop the auto-scrolling ticker and heavy entrance/idle motion */
@media (prefers-reduced-motion:reduce){
  .tk-tape{ animation:none !important; transform:none !important; }
  .q3-spark{ animation:none !important; }
  .q3-evcard, .q3-evcard:hover{ transition:none; }
  .vs-stat, .an-chip, .an-chip.hot{ animation:none !important; }
}

.tk-cell{ display:inline-flex; align-items:center; gap:9px; padding:11px 22px;
  border-right:1px solid #eef2f6; }
.tk-l{ font-size:13px; color:#37474f; font-weight:700; }
/* EVERY value is a 3D traffic-light pill — red = concerning, green = good */
.tk-v{ font-size:14.5px; font-weight:800; letter-spacing:-.2px; color:#fff !important;
  padding:3px 11px; border-radius:9px;
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 3px 8px rgba(13,33,55,.22),
             0 1px 2px rgba(13,33,55,.12); }
.tk-v.tk-down, .tk-v.tk-hot{ background:linear-gradient(180deg,#e05a52 0%,#c62828 100%); }
.tk-v.tk-ok{ background:linear-gradient(180deg,#4caf50 0%,#2E7D32 100%); }
.tk-cell i{ font-size:13px; }
.tk-down, .tk-hot{ color:#c62828; }   /* arrow — concerning */
.tk-ok{ color:#2E7D32; }              /* arrow — good */

/* critical / headline signals — deeper red + ring */
.tk-cell-crit .tk-v.tk-down, .tk-cell-crit .tk-v.tk-hot{
  background:linear-gradient(180deg,#d63b34 0%,#a51818 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 4px 11px rgba(166,20,20,.5),
             0 0 0 2px rgba(255,198,39,.55); }
.tk-critmark{ font-size:11px; color:#c62828; }

@media (max-width:760px){ .tk-badge{ font-size:9px; padding:0 11px; }
  .tk-cell{ padding:10px 15px; } }
@media (prefers-reduced-motion: reduce){ .tk-tape{ animation:none; } .tk-live-dot{ animation:none; } }

/* frontier — sources row under the evidence graph */
.qsrc{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-top:12px;
  padding-top:11px; border-top:1px solid #eef2f6; }
.qsrc-lab{ font-size:11.5px; font-weight:800; color:#0D2137; }
.qsrc-link{ font-size:11px; font-weight:700; color:#b0792b; text-decoration:none;
  background:#fffdf2; border:1px solid #ffe39a; border-radius:12px; padding:3px 10px;
  white-space:nowrap; transition:transform .15s ease; }
.qsrc-link:hover{ transform:translateY(-1px); text-decoration:none; }
.qsrc-open{ font-size:11px; color:#8a6d0f; font-style:italic; }

/* ── Frontier: clean professional evidence table ── */
.fr-table{ width:100%; border-collapse:collapse; margin-bottom:6px; }
.fr-table td{ padding:12px 10px; border-bottom:1px solid #eef2f6; vertical-align:top; }
.fr-table tr:last-child td{ border-bottom:none; }
.fr-dot{ display:inline-block; width:9px; height:9px; border-radius:50%; background:#0D2137;
  margin-top:5px; }
.fr-finding{ font-size:13.5px; font-weight:800; color:#0D2137; line-height:1.35; }
.fr-detail{ font-size:11.5px; color:#78909c; line-height:1.45; margin-top:2px; }
.fr-stat{ display:inline-block; font-size:13px; font-weight:800; color:#8C1D40;
  background:#f8eef1; border:1px solid #ecd6de; border-radius:8px; padding:3px 10px;
  white-space:nowrap; }
.fr-cite{ font-size:11.5px; font-weight:600; color:#01579B; text-decoration:none;
  line-height:1.45; }
.fr-cite:hover{ text-decoration:underline; }
.fr-table td:nth-child(3), .fr-table td:nth-child(4){ white-space:normal; }

.fr-openbox{ margin-top:14px; padding:14px 16px; border-radius:10px;
  background:linear-gradient(160deg,#fffdf5,#fdf6e6); border:1px solid #f2e4bf; }
.fr-openhead-row{ display:flex; align-items:center; margin-bottom:8px; }
.fr-openhead{ font-size:12px; font-weight:800; color:#8a6d0f; letter-spacing:.3px;
  text-transform:uppercase; }
.fr-oplist{ margin:0; padding-left:22px; }
.fr-oplist li{ margin-bottom:8px; }
.fr-oplist li::marker{ color:#c9a227; font-weight:800; }
.fr-oq{ font-size:13px; font-weight:700; color:#0D2137; }
.fr-ow{ display:block; font-size:11.5px; color:#7a6a3a; line-height:1.45; margin-top:1px; }
@media (max-width:640px){ .fr-table td{ padding:10px 6px; }
  .fr-table td:nth-child(3){ display:block; } }

/* ── Frontier: premium 3D interactive tiles ── */
.fr3-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width:900px){ .fr3-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .fr3-grid{ grid-template-columns:1fr; } }

.fr3-tile{ position:relative; display:flex; flex-direction:column; border-radius:13px;
  padding:13px 15px 13px; overflow:hidden;
  background:linear-gradient(158deg,#ffffff 0%,#f5f8fc 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,
             -3px -3px 8px rgba(255,255,255,.7),
             0 10px 22px rgba(13,33,55,.10),
             0 2px 5px rgba(13,33,55,.06);
  opacity:0; transform:translateY(20px);
  animation:fr3In .6s cubic-bezier(.2,.7,.3,1) forwards;
  transition:transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s ease; }
.fr3-tile::before{ content:""; position:absolute; left:0; right:0; top:0; height:4px; }
.fr3-tile-ok::before{ background:linear-gradient(90deg,#8C1D40,#b84a6b); }
.fr3-tile-open::before{ background:linear-gradient(90deg,#FFC627,#c9a227); }
.fr3-tile-open{ background:
  radial-gradient(130% 90% at 100% 0%, rgba(255,198,39,.10) 0%, rgba(255,255,255,0) 55%),
  linear-gradient(158deg,#ffffff 0%,#fdf8ec 100%); }
.fr3-tile:hover{ transform:translateY(-8px) scale(1.015);
  box-shadow:0 1px 0 rgba(255,255,255,1) inset,
             -4px -4px 10px rgba(255,255,255,.8),
             0 22px 40px rgba(13,33,55,.18),
             0 4px 10px rgba(13,33,55,.10); }
@keyframes fr3In{ to{ opacity:1; transform:none; } }

.fr3-badge{ align-self:flex-start; display:inline-flex; align-items:center; gap:5px;
  font-size:8px; font-weight:800; letter-spacing:.9px; text-transform:uppercase;
  padding:2px 8px; border-radius:20px; margin-bottom:9px; }
.fr3-badge i{ font-size:11px; }
.fr3-badge-ok{ color:#8C1D40; background:#f6e7ec; }
.fr3-badge-open{ color:#8a6d0f; background:#f7edcf; }

.fr3-stat{ font-size:20px; font-weight:800; line-height:1; letter-spacing:-.6px;
  margin-bottom:8px; }
.fr3-stat-ok{ background:linear-gradient(135deg,#0D2137,#3a5a7a);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.fr3-stat-open{ font-size:26px; color:#c9a227;
  animation:fr3Pulse 2.6s ease-in-out infinite; }
@keyframes fr3Pulse{ 0%,100%{ opacity:.5; } 50%{ opacity:1; } }

.fr3-finding{ font-size:12.5px; font-weight:800; color:#0D2137; line-height:1.32;
  margin-bottom:4px; }
.fr3-detail{ font-size:10.8px; color:#7a8894; line-height:1.45; margin-bottom:11px; }
.fr3-paper{ margin-top:auto; align-self:flex-start; display:inline-flex; align-items:center; gap:5px;
  font-size:10px; font-weight:700; text-decoration:none; padding:5px 10px; border-radius:14px;
  background:#fffdf2; border:1px solid #ffe39a; color:#9a6a12;
  transition:transform .15s ease, box-shadow .15s ease; }
.fr3-paper i{ font-size:11px; color:#FFC627; }
.fr3-paper:hover{ transform:translateY(-2px); box-shadow:0 5px 12px rgba(201,162,39,.25);
  text-decoration:none; }
.fr3-paper-open{ background:#8C1D40; border-color:#8C1D40; color:#fff; }
.fr3-paper-open i{ color:#fff; }
/* beat the global .tab-body a colour so button text is always visible */
.tab-body a.fr3-paper, .tab-body a.fr3-paper span{ color:#9a6a12 !important; }
.tab-body a.fr3-paper-open, .tab-body a.fr3-paper-open span,
.tab-body a.fr3-paper-open i{ color:#ffffff !important; }
@media (prefers-reduced-motion: reduce){
  .fr3-tile{ animation:none; opacity:1; transform:none; } .fr3-stat-open{ animation:none; } }

/* ── Findings & open questions — question-style interactive cards ── */
.oqx-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:15px; }
@media (max-width:900px){ .oqx-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .oqx-grid{ grid-template-columns:1fr; } }

.oqx-card{ position:relative; display:flex; flex-direction:column; border-radius:15px;
  padding:15px 16px 14px; overflow:hidden; background:#ffffff; border:1px solid #e9eef3;
  box-shadow:0 10px 26px rgba(13,33,55,.09), 0 2px 6px rgba(13,33,55,.05);
  opacity:0; transform:translateY(18px);
  animation:oqxIn .6s cubic-bezier(.2,.7,.3,1) forwards;
  transition:transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s ease, border-color .2s; }
.oqx-card::before{ content:""; position:absolute; left:0; right:0; top:0; height:3px; }
.oqx-card-ok::before{ background:linear-gradient(90deg,#8C1D40,#b84a6b); }
.oqx-card-part::before{ background:linear-gradient(90deg,#8C1D40,#FFC627); }
.oqx-card-open::before{ background:linear-gradient(90deg,#FFC627,#c9a227); }
.oqx-card-open{ background:radial-gradient(120% 80% at 100% 0%, rgba(255,198,39,.09), rgba(255,255,255,0) 55%), #ffffff; }
.oqx-card:hover{ transform:translateY(-7px); border-color:#dfe7ee;
  box-shadow:0 24px 44px rgba(13,33,55,.16), 0 5px 12px rgba(13,33,55,.09); }
@keyframes oqxIn{ to{ opacity:1; transform:none; } }

.oqx-badge{ align-self:flex-start; display:inline-flex; align-items:center; gap:5px;
  font-size:8.5px; font-weight:800; letter-spacing:.9px; text-transform:uppercase;
  padding:3px 9px; border-radius:20px; margin-bottom:10px; }
.oqx-badge i{ font-size:11px; }
.oqx-badge-ok{ color:#ffffff; background:#8C1D40; }
.oqx-badge-part{ color:#8C1D40; background:#FFC627; }
.oqx-badge-open{ color:#8a6d0f; background:#ffffff; border:1px solid #f0d675; }

.oqx-q{ font-size:14.5px; font-weight:800; color:#0D2137; line-height:1.34;
  letter-spacing:-.2px; margin-bottom:11px; }
.oqx-q .qf-hl{ white-space:normal; padding:0 2px; border-radius:2px;
  background:linear-gradient(transparent 58%, rgba(255,198,39,.45) 0); }
.oqx-card-ok .qf-hl{ color:#8C1D40; }
.oqx-card-part .qf-hl{ color:#8C1D40; }
.oqx-card-open .qf-hl{ color:#8a5a00; }

.oqx-rule{ height:1px; margin:0 0 10px;
  background:linear-gradient(90deg, rgba(13,33,55,.15), rgba(13,33,55,.02) 72%, transparent); }

.oqx-evi{ display:flex; align-items:baseline; gap:10px; margin-bottom:9px; }
.oqx-stat{ flex:0 0 auto; line-height:1; }
.oqx-stat-ok .qh-v, .oqx-stat-ok .qh-sup{ color:#0D2137; }
.oqx-stat-part .qh-v, .oqx-stat-part .qh-sup{ color:#8C1D40; }
.oqx-stat-open .qh-q{ animation:fr3Pulse 2.6s ease-in-out infinite; }
.oqx-ans{ font-size:11px; color:#596773; line-height:1.46; }

.oqx-src{ display:flex; align-items:center; gap:5px; font-size:9.5px; color:#8a97a3;
  font-weight:600; margin-bottom:12px; line-height:1.3; }
.oqx-src i{ font-size:10px; flex:0 0 auto; }

.oqx-link{ margin-top:auto; align-self:flex-start; display:inline-flex; align-items:center; gap:5px;
  font-size:10px; font-weight:800; text-decoration:none; padding:6px 12px; border-radius:14px;
  transition:transform .15s ease, box-shadow .15s ease, gap .15s ease; }
.oqx-link i{ font-size:11px; }
.oqx-link:hover{ transform:translateY(-2px); gap:8px; text-decoration:none; }
.oqx-link-ok{ background:#8C1D40; border:1px solid #8C1D40; }
.oqx-link-part{ background:#8C1D40; border:1px solid #8C1D40; }
.oqx-link-open{ background:#FFC627; border:1px solid #e6b010; }
.tab-body a.oqx-link-ok, .tab-body a.oqx-link-ok span, .tab-body a.oqx-link-ok i{ color:#ffffff !important; }
.tab-body a.oqx-link-part, .tab-body a.oqx-link-part span, .tab-body a.oqx-link-part i{ color:#ffffff !important; }
.tab-body a.oqx-link-open, .tab-body a.oqx-link-open span, .tab-body a.oqx-link-open i{ color:#5a3d00 !important; }
@media (prefers-reduced-motion: reduce){
  .oqx-card{ animation:none; opacity:1; transform:none; } .oqx-stat-open .qh-q{ animation:none; } }

/* ── "Where CRIA stands" — interactive positioning accordion ── */
.pos-wrap{ display:flex; flex-direction:column; gap:10px; }
.pos-item{ border:1px solid #e7edf3; border-radius:12px; overflow:hidden; background:#fff;
  box-shadow:0 2px 8px rgba(13,33,55,.05); transition:box-shadow .2s ease, border-color .2s ease; }
.pos-item[open]{ box-shadow:0 8px 22px rgba(13,33,55,.10); border-color:#e3d3c5; }
.pos-sum{ display:flex; align-items:center; gap:12px; cursor:pointer; padding:14px 16px;
  list-style:none; user-select:none; transition:background .18s ease; }
.pos-sum::-webkit-details-marker{ display:none; }
.pos-sum:hover{ background:#faf6f2; }
.pos-ic{ flex:0 0 auto; width:34px; height:34px; border-radius:10px; display:flex;
  align-items:center; justify-content:center; font-size:16px; color:#8C1D40;
  background:linear-gradient(145deg,#f8eaef,#f3dde5); box-shadow:inset 0 1px 0 #fff; }
.pos-q{ flex:1 1 auto; font-size:14px; font-weight:800; color:#0D2137; letter-spacing:-.1px; }
.pos-chev{ flex:0 0 auto; color:#b0879a; font-size:14px; transition:transform .3s ease; }
.pos-item[open] .pos-chev{ transform:rotate(180deg); color:#8C1D40; }
.pos-a{ padding:2px 18px 16px 62px; font-size:12.8px; line-height:1.7; color:#3b4a55;
  animation:posDown .35s ease; }
.pos-a b{ color:#0D2137; } .pos-a i{ color:#8C1D40; font-style:italic; }
@keyframes posDown{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
@media (max-width:600px){ .pos-a{ padding-left:18px; } }

/* ── Floating pills — 3D depth ── */
.ria-fab, .why-fab{ background:linear-gradient(150deg,#a52350 0%,#8C1D40 55%,#6d1531 100%) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 10px 24px rgba(140,29,64,.42),
             0 3px 7px rgba(140,29,64,.28) !important; }
.wf-fab, .team-fab{ background:linear-gradient(150deg,#1c3a5a 0%,#0d2137 100%) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.20) inset, 0 10px 24px rgba(13,33,55,.42),
             0 3px 7px rgba(13,33,55,.28) !important; }
.ria-fab:hover, .why-fab:hover{ transform:translateY(-3px) scale(1.03) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.3) inset, 0 16px 32px rgba(140,29,64,.5) !important; }
.wf-fab:hover, .team-fab:hover{ transform:translateY(-3px) scale(1.03) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 16px 32px rgba(13,33,55,.5) !important; }

/* ── Role-based entry — orient a first-time user ── */
.re-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media (max-width:1000px){ .re-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .re-grid{ grid-template-columns:1fr; } }
.re-card{ position:relative; display:flex; flex-direction:column; background:#ffffff;
  border:1px solid #e6ecf2; border-top:2px solid #FFC627; border-radius:13px; padding:14px 15px 13px;
  box-shadow:0 6px 16px rgba(13,33,55,.07);
  opacity:0; transform:translateY(16px); animation:reIn .55s cubic-bezier(.2,.7,.3,1) forwards;
  transition:transform .18s ease, box-shadow .18s ease; }
.re-card:hover{ transform:translateY(-5px); box-shadow:0 14px 28px rgba(13,33,55,.14); }
@keyframes reIn{ to{ opacity:1; transform:none; } }
.re-ic{ width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  font-size:19px; color:#8C1D40; background:#f5f8fc; border:1px solid #e6ecf2;
  box-shadow:inset 0 1px 0 #fff; margin-bottom:10px; }
.re-role{ font-size:14.5px; font-weight:800; color:#0D2137; margin-bottom:4px; }
.re-desc{ font-size:11.5px; color:#5a6b76; line-height:1.5; margin-bottom:11px; }
.re-chips{ display:flex; flex-direction:column; gap:6px; margin-top:auto; }
.re-chip{ display:inline-flex; align-items:center; justify-content:space-between; font-size:11.5px;
  font-weight:700; color:#8C1D40 !important; text-decoration:none !important; background:#fff;
  border:1px solid #e6ecf2; border-radius:16px; padding:5px 8px 5px 12px; transition:.14s; }
.re-chip:hover{ background:#8C1D40; color:#fff !important; border-color:#8C1D40; transform:translateX(2px); }
.re-chip .bi{ font-size:15px; }
@media (prefers-reduced-motion: reduce){ .re-card{ animation:none; opacity:1; transform:none; } }
.re-note{ margin-top:13px; font-size:11.5px; color:#64748b; font-style:italic;
  display:flex; align-items:center; }

/* ── Take-a-tour button + onboarding overlay ── */
.tour-btn{ background:linear-gradient(150deg,#a52350,#8C1D40); color:#fff; border:none;
  font-size:12.5px; font-weight:800; border-radius:22px; padding:7px 15px; cursor:pointer;
  box-shadow:0 6px 16px rgba(140,29,64,.28); transition:transform .15s ease; white-space:nowrap; }
.tour-btn:hover{ transform:translateY(-2px); }
.tour-btn .bi{ margin-right:4px; }
/* Basin Briefing (film) CTA — maroon with a yellow border */
.filmcta{ background:#8C1D40; border:2px solid #FFC627; box-shadow:0 6px 16px rgba(140,29,64,.30); }
.filmcta:hover{ background:#a52350; }
/* ── flashing attention pulse — Quick View / tour buttons ── */
@keyframes qvFlash{
  0%,100%{ box-shadow:0 6px 16px rgba(140,29,64,.28), 0 0 0 0 rgba(255,198,39,.55); }
  50%{ box-shadow:0 8px 20px rgba(140,29,64,.40), 0 0 0 7px rgba(255,198,39,0); }
}
.qv-flash{ animation:qvFlash 1.6s ease-in-out infinite; }
.qv-flash:hover{ animation-play-state:paused; }
@media (prefers-reduced-motion:reduce){ .qv-flash{ animation:none; } }
.tour-overlay{ position:fixed; inset:0; z-index:99999; background:transparent; }
.tour-spot{ position:fixed; border-radius:12px; border:3px solid #FFC627;
  box-shadow:0 0 0 9999px rgba(13,33,55,.80), 0 0 0 6px rgba(255,198,39,.35), 0 0 26px rgba(255,198,39,.7);
  z-index:100000; pointer-events:none; transition:top .25s, left .25s, width .25s, height .25s; }
.tour-tip{ position:fixed; z-index:100001; width:300px; max-width:calc(100vw - 24px);
  background:#fff; border-radius:14px; border-top:4px solid #FFC627;
  box-shadow:0 20px 44px rgba(13,33,55,.3); padding:15px 17px 13px; }
.tour-step{ font-size:10px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:#8C1D40; }
.tour-t{ font-size:15.5px; font-weight:800; color:#0D2137; margin:4px 0 5px; }
.tour-d{ font-size:12.5px; color:#44555f; line-height:1.55; margin-bottom:12px; }
.tour-btns{ display:flex; align-items:center; gap:8px; }
.tour-btns button{ font-family:inherit; font-size:12px; font-weight:800; border-radius:16px;
  padding:6px 14px; cursor:pointer; border:1px solid #e0c0cd; }
.tour-skip{ background:#fff; color:#8a99a4; }
.tour-prev{ background:#fff; color:#8C1D40; }
.tour-next{ background:#8C1D40; color:#fff; border-color:#8C1D40 !important; }

/* ── Blueprint document launcher (gold pill, above the others) ── */
.bp-fab{position:fixed;left:22px;right:auto;bottom:282px;z-index:1200;height:42px;padding:0 16px;
  border-radius:22px;display:flex;align-items:center;gap:8px;font-size:13px;font-weight:800;
  text-decoration:none;color:#fff;cursor:pointer;transition:transform .15s;
  background:linear-gradient(150deg,#a52350 0%,#8C1D40 55%,#6d1531 100%);border:2px solid #FFC627;
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 10px 24px rgba(140,29,64,.42), 0 3px 7px rgba(140,29,64,.28);}
.bp-fab .bi{font-size:16px;color:#FFC627;}
.bp-fab:hover{transform:translateY(-3px) scale(1.03);color:#fff;text-decoration:none;
  box-shadow:0 1px 0 rgba(255,255,255,.3) inset, 0 16px 32px rgba(140,29,64,.5);}

/* ── Eye-opener cards: keep the CTA link clear of the corner badge, and stack
      the map above the text on narrower screens so text never squeezes to 1 char ── */
.q3-ev-cta{ padding-right:70px; }
@media (max-width: 1200px){
  .q3-ev-row{ flex-direction:column !important; }
  .q3-ev-row > img{ max-width:60% !important; height:auto !important; margin-bottom:10px !important; align-self:flex-start !important; }
  /* overview cards: keep the map beside the text (vertically centered), even single-column */
  .q3-grid .q3-ev-row{ flex-direction:row !important; align-items:center !important; gap:14px !important; }
  .q3-grid .q3-ev-text{ width:auto !important; }
  .q3-grid .q3-ev-row > img{ max-width:46% !important; width:auto !important; height:158px !important;
    margin:0 !important; align-self:center !important; }
}
/* very small phones — keep side-by-side, just a smaller map so text keeps room */
@media (max-width: 560px){
  .q3-grid .q3-ev-row > img{ max-width:44% !important; height:126px !important; }
}

/* ── Floating action pills → collapse to one dot (top-right) on small OR short screens ──
   Triggers when the sidebar is a drawer (≤992px) OR the viewport is too short (≤900px)
   to fit the pill stack without overlapping sidebar/content. Guarantees no overlap on any
   resolution (e.g. 1366×768 laptops), while tall desktops keep the full labelled pills. */
/* Desktop: the floating pills are replaced by the sidebar "Quick links" container,
   so they never overlap the sidebar. */
.bp-fab, .team-fab, .why-fab, .wf-fab, .ria-fab, .reviews-fab, .fab-toggle{ display:none !important; }
/* Reviews floating pill — navy, gold border (only shown in the mobile "+" menu) */
.reviews-fab{ color:#fff; text-decoration:none;
  background:linear-gradient(150deg,#16324d,#0d2137 55%,#081726); border:2px solid #FFC627; }
.reviews-fab .bi{ color:#FFC627; }

/* Mobile / drawer (≤992px): a "+" speed-dial in the BOTTOM-RIGHT corner so nothing is
   hidden; tapping it fans the labelled pills UPWARD. */
@media (max-width: 992px){
  .fab-toggle{
    display:flex !important; align-items:center; justify-content:center;
    position:fixed; bottom:20px; right:18px; top:auto; left:auto;
    width:52px; height:52px; border-radius:50%;
    background:linear-gradient(150deg,#a52350 0%,#8C1D40 60%,#6d1531 100%); color:#FFC627;
    border:2px solid #FFC627; box-shadow:0 8px 22px rgba(140,29,64,.45); z-index:1203;
    font-size:21px; cursor:pointer; transition:transform .22s ease;
  }
  body.fab-open .fab-toggle{ transform:rotate(45deg); }
  /* When the sidebar drawer is open, the Quick-links pills are already visible in it,
     so hide the floating "+" and its stack entirely (they only exist as the sidebar's
     stand-in when the drawer is closed). */
  #sidebar.open ~ .fab-toggle,
  #sidebar.open ~ #fab-stack{ display:none !important; }
  .team-fab, .why-fab, .wf-fab, .ria-fab, .bp-fab, .reviews-fab{
    display:inline-flex !important; position:fixed; right:18px; left:auto; top:auto; bottom:auto;
    height:40px !important; padding:0 15px !important; border-radius:20px !important;
    width:auto !important; min-width:0 !important; max-width:calc(100vw - 36px);
    align-items:center; gap:8px; white-space:nowrap; overflow:hidden; z-index:1202;
    opacity:0; transform:translateY(12px) scale(.96); pointer-events:none;
    transition:opacity .18s ease, transform .18s ease, bottom .24s ease;
  }
  body.fab-open .ria-fab { opacity:1; transform:none; pointer-events:auto; bottom:82px !important; }
  body.fab-open .wf-fab  { opacity:1; transform:none; pointer-events:auto; bottom:132px !important; }
  body.fab-open .why-fab { opacity:1; transform:none; pointer-events:auto; bottom:182px !important; }
  body.fab-open .team-fab{ opacity:1; transform:none; pointer-events:auto; bottom:232px !important; }
  body.fab-open .bp-fab  { opacity:1; transform:none; pointer-events:auto; bottom:282px !important; }
  body.fab-open .reviews-fab{ opacity:1; transform:none; pointer-events:auto; bottom:332px !important; }
}

/* Sidebar "Quick links" — 3D pills, no box; each pill only as wide as its text */
.ql-box{ background:transparent; padding:0; margin:6px 0 8px; box-shadow:none;
  display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.ql-box .zoom-title{ margin-bottom:1px; }
.ql-link{ display:inline-flex; align-items:center; gap:8px; width:auto; max-width:100%;
  border:2px solid #FFC627; cursor:pointer; font-family:inherit; white-space:nowrap;
  padding:7px 15px; border-radius:22px; font-size:12.5px; font-weight:800;
  text-decoration:none; transition:transform .15s, box-shadow .15s;
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset, 0 5px 13px rgba(13,33,55,.22),
             0 2px 5px rgba(13,33,55,.16); }
.ql-link .bi{ font-size:15px; text-align:center; flex:0 0 auto; }
.ql-link span{ flex:0 0 auto; }
.ql-link:hover{ transform:translateY(-2px) scale(1.02);
  box-shadow:0 1px 0 rgba(255,255,255,.34) inset, 0 10px 22px rgba(13,33,55,.3); }
/* Maroon pill — WHITE text, gold icon, gold border (exactly like the live pills) */
.ql-maroon, .ql-maroon span{ color:#ffffff !important; }
.ql-maroon{ background:linear-gradient(150deg,#a52350 0%,#8C1D40 55%,#6d1531 100%) !important;
  border-color:#FFC627 !important; }
.ql-maroon .bi{ color:#FFC627 !important; }
/* Navy pill — WHITE text, gold icon, gold border (rhythm: maroon · navy · maroon · navy · maroon) */
.ql-navy, .ql-navy span{ color:#ffffff !important; }
.ql-navy{ background:linear-gradient(150deg,#16324d 0%,#0d2137 55%,#081726 100%) !important;
  border-color:#FFC627 !important; }
.ql-navy .bi{ color:#FFC627 !important; }

/* ── Sidebar: Rate this tool (compact, clean) ──────────────────────────── */
.fb-card{ background:#fff; border-radius:12px; padding:12px 12px 13px; margin:8px 0 10px;
  box-shadow:0 4px 14px rgba(13,33,55,.07); text-align:center; }
.fb-title{ font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:#8C1D40; margin-bottom:6px; }
.fb-stars{ display:inline-flex; gap:3px; justify-content:center; }
.fb-star{ background:none; border:none; cursor:pointer; font-size:21px; line-height:1;
  color:#d9dee3; padding:0 1px; transition:color .12s, transform .12s; }
.fb-star:hover{ transform:scale(1.16); color:#FFD873; }
.fb-stars.sel-1 .fb-star:nth-child(1),
.fb-stars.sel-2 .fb-star:nth-child(-n+2),
.fb-stars.sel-3 .fb-star:nth-child(-n+3),
.fb-stars.sel-4 .fb-star:nth-child(-n+4),
.fb-stars.sel-5 .fb-star:nth-child(-n+5){ color:#FFC627; }
.fb-track{ height:5px; background:#eef2f6; border-radius:4px; margin:8px auto 0; max-width:150px; overflow:hidden; }
.fb-fill{ height:100%; width:0; border-radius:4px;
  background:linear-gradient(90deg,#FFE38A,#FFC627 70%,#E3A62E); transition:width .3s cubic-bezier(.2,.7,.3,1); }
.fb-send{ margin-top:9px; background:#8C1D40; color:#fff; border:1.5px solid #FFC627;
  border-radius:8px; padding:5px 14px; font-weight:800; font-size:11.5px; cursor:pointer; transition:background .15s; }
.fb-send:hover{ background:#6d1531; }
.fb-thanks{ font-size:11px; color:#2E7D32; font-weight:700; margin-top:7px; }
.fb-summary{ font-size:11.5px; color:#8C1D40; font-weight:700; margin-top:6px; }
.fb-visits{ display:block; font-size:10.5px; color:#78909c; font-weight:700; margin-top:3px; }

/* ── Testimonials carousel + leave-a-review (Overview) ─────────────────── */
.testi-wrap{ }
.testi-track{ display:flex; gap:12px; flex-wrap:nowrap; align-items:stretch; justify-content:center; min-height:120px; }
.testi-card{ flex:1 1 0; max-width:none; min-width:0; text-align:center; background:#fff;
  border:1.4px solid #ece0e5; border-top:3px solid #8C1D40; border-radius:12px;
  padding:14px 15px 13px; box-shadow:0 5px 16px rgba(140,29,64,.06);
  display:flex; flex-direction:column; }
.testi-head{ display:flex; flex-direction:column; align-items:center; gap:7px; margin-bottom:9px; }
.testi-av{ flex:0 0 40px; width:40px; height:40px; border-radius:50%;
  background:linear-gradient(150deg,#a52350,#8C1D40 60%,#6d1531); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px;
  border:2px solid #FFC627; }
.testi-av-emoji{ background:#faf0f3; font-size:20px; border-color:#f0d4dd; }
.testi-id{ min-width:0; }
.testi-name{ font-size:13.5px; font-weight:800; color:#0D2137; line-height:1.2;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.testi-role{ font-size:11px; color:#37474f; font-weight:600; line-height:1.2;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.testi-stars{ color:#FFC627; font-size:15px; letter-spacing:1px; margin-bottom:7px; text-align:center; }
.testi-text{ font-size:12.5px; color:#14202b; line-height:1.55; overflow-wrap:break-word; text-align:center; }
.testi-empty{ flex:1; text-align:center; padding:22px 10px; color:#78909c; }
.testi-empty-emoji{ font-size:30px; margin-bottom:6px; }
.testi-empty-text{ font-size:13px; font-weight:600; }
/* Slide each new group of reviews in from the right (right → left) */
@keyframes testiSlideIn{ from{ opacity:0; transform:translateX(46px); }
                          to{ opacity:1; transform:none; } }
.testi-card.testi-in{ animation:testiSlideIn .5s cubic-bezier(.22,.7,.3,1) both; }
@media (prefers-reduced-motion:reduce){ .testi-card.testi-in{ animation:none; } }
.testi-dots{ display:flex; justify-content:center; gap:6px; margin:12px 0 4px; }
.testi-dot{ width:7px; height:7px; border-radius:50%; background:#dfe4ea; transition:background .2s; }
.testi-dot.on{ background:#8C1D40; }

/* leave-a-review form */
.testi-form{ margin-top:14px; background:#faf7f8; border:1px solid #efe6ea; border-radius:12px;
  padding:14px 16px 16px; }
.testi-form-title{ font-size:13px; font-weight:800; color:#8C1D40; margin-bottom:10px;
  display:flex; align-items:center; }
.testi-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.testi-lbl{ font-size:12px; font-weight:700; color:#1f2a35; flex:0 0 auto; }
.testi-star{ font-size:24px; }
.testi-inputs{ }
.testi-input{ flex:1 1 200px; min-width:0; border:1px solid #e2e8f0; border-radius:8px;
  padding:8px 11px; font-size:12.5px; font-family:inherit; color:#0D2137; }
.testi-input:focus{ outline:none; border-color:#8C1D40; }
.testi-avrow{ display:inline-flex; gap:6px; flex-wrap:wrap; }
.testi-avpick{ width:34px; height:34px; border-radius:50%; border:2px solid #eadfe4;
  background:#fff; font-size:17px; cursor:pointer; display:flex; align-items:center;
  justify-content:center; transition:transform .12s, border-color .12s; }
.testi-avpick:hover{ transform:scale(1.12); border-color:#FFC627; }
.testi-avrow.sel-0 .testi-avpick:nth-child(1),
.testi-avrow.sel-1 .testi-avpick:nth-child(2),
.testi-avrow.sel-2 .testi-avpick:nth-child(3),
.testi-avrow.sel-3 .testi-avpick:nth-child(4),
.testi-avrow.sel-4 .testi-avpick:nth-child(5),
.testi-avrow.sel-5 .testi-avpick:nth-child(6),
.testi-avrow.sel-6 .testi-avpick:nth-child(7),
.testi-avrow.sel-7 .testi-avpick:nth-child(8){ border-color:#8C1D40; background:#faf0f3;
  transform:scale(1.12); box-shadow:0 3px 8px rgba(140,29,64,.25); }
.testi-textarea{ width:100%; min-height:64px; border:1px solid #e2e8f0; border-radius:8px;
  padding:9px 12px; font-size:12.5px; font-family:inherit; color:#0D2137; resize:vertical;
  margin-bottom:10px; }
.testi-textarea:focus{ outline:none; border-color:#8C1D40; }
.testi-submit{ background:linear-gradient(150deg,#a52350,#8C1D40 60%,#6d1531); color:#fff;
  border:2px solid #FFC627; border-radius:9px; padding:8px 20px; font-weight:800;
  font-size:13px; cursor:pointer; display:inline-flex; align-items:center;
  transition:transform .15s, box-shadow .15s; box-shadow:0 6px 16px rgba(140,29,64,.28); }
.testi-submit:hover{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(140,29,64,.4); }
.testi-thanks{ font-size:12.5px; color:#2E7D32; font-weight:700; margin-top:9px; }
/* Keep the 3 cards side-by-side (horizontal) on small screens too — just tighter,
   never stacked vertically. */
@media (max-width:760px){
  .testi-track{ gap:8px; }
  .testi-card{ flex:1 1 0; padding:11px 9px 10px; }
  .testi-card .testi-text{ font-size:11.5px; }
  .testi-card .testi-name{ font-size:12px; }
}

/* ── Testimonials: Overview CTA, photo upload, role dropdown, image avatar ── */
.testi-cta{ display:inline-flex; align-items:center; margin-top:12px;
  background:linear-gradient(150deg,#a52350,#8C1D40 60%,#6d1531); color:#fff !important;
  border:2px solid #FFC627; border-radius:22px; padding:8px 18px; font-weight:800; font-size:13px;
  text-decoration:none; box-shadow:0 6px 16px rgba(140,29,64,.28); transition:transform .15s; }
.testi-cta:hover{ transform:translateY(-2px); color:#fff; }
.testi-av-img{ object-fit:cover; }
/* Role dropdown — full-width block so option text is never clipped on any screen */
.testi-role-row{ display:block; }
.testi-dd{ width:100%; font-size:12.5px; }
.testi-dd .Select-control{ height:auto; min-height:38px; border-color:#e2e8f0; border-radius:8px; }
.testi-dd .Select-value, .testi-dd .Select-placeholder{ line-height:36px; padding-left:11px !important; }
.testi-dd .Select-value-label, .testi-dd .Select-option{ color:#0D2137 !important; white-space:normal; }
.testi-dd .Select-menu-outer{ z-index:30; }
.testi-photo-row{ align-items:center; }
.testi-upload{ display:inline-flex; align-items:center; cursor:pointer; border:1.5px dashed #c9a0af;
  border-radius:9px; padding:7px 13px; font-size:12px; font-weight:700; color:#8C1D40;
  background:#fff; transition:background .13s, border-color .13s; }
.testi-upload:hover{ background:#faf0f3; border-color:#8C1D40; }
.testi-photo-preview{ display:inline-flex; align-items:center; }
.testi-photo-thumb{ width:40px; height:40px; border-radius:50%; object-fit:cover; border:2px solid #FFC627; }
.testi-or{ font-size:11.5px; color:#37474f; font-weight:600; }

/* Sidebar live visitor count (replaces the old rating widget) */
.visits-box{ display:flex; align-items:center; gap:7px; justify-content:center;
  margin:8px 0 10px; font-size:12px; font-weight:800; color:#8C1D40; }
.visits-box .bi{ color:#8C1D40; font-size:14px; }
.testi-form-intro{ font-size:12px; color:#14202b; line-height:1.5; margin-bottom:12px; }

/* ── Reviews page: animated 3D welcome hero — TRANSPARENT background (no pink fill) ── */
.rev-hero{ position:relative; display:flex; align-items:center; gap:24px; flex-wrap:wrap;
  background:transparent;
  border:0; border-radius:18px; padding:22px 4px 20px; margin-bottom:14px;
  box-shadow:none;
  perspective:1000px; overflow:visible; animation:revFade .7s ease both; }
@keyframes revFade{ from{ opacity:0; transform:translateY(16px);} to{ opacity:1; transform:none;} }
.rev-hero-anim{ position:relative; flex:0 0 128px; width:128px; height:128px; }
.rev-orb{ position:absolute; inset:24px; border-radius:50%;
  background:linear-gradient(150deg,#a52350,#8C1D40 55%,#6d1531); border:3px solid #FFC627;
  display:flex; align-items:center; justify-content:center; color:#FFC627; font-size:34px;
  box-shadow:0 14px 32px rgba(140,29,64,.5), inset 0 3px 8px rgba(255,255,255,.28);
  animation:revBob 3.4s ease-in-out infinite; transform-style:preserve-3d; }
@keyframes revBob{ 0%,100%{ transform:translateY(0) rotateY(0deg);} 50%{ transform:translateY(-9px) rotateY(16deg);} }
.rev-orb-ring{ position:absolute; inset:10px; border-radius:50%; border:2px solid rgba(255,198,39,.55);
  animation:revPulse 2.4s ease-out infinite; }
@keyframes revPulse{ 0%{ transform:scale(.78); opacity:.85;} 100%{ transform:scale(1.28); opacity:0;} }
.rev-spark{ position:absolute; font-size:15px; animation:revFloat 3.6s ease-in-out infinite; }
.rev-spark.s1{ top:2px; left:10px; color:#FFC627; animation-delay:0s; }
.rev-spark.s2{ top:16px; right:2px; color:#8C1D40; animation-delay:.7s; }
.rev-spark.s3{ bottom:8px; left:0; animation-delay:1.3s; }
.rev-spark.s4{ bottom:2px; right:16px; color:#FFC627; animation-delay:1.9s; }
@keyframes revFloat{ 0%,100%{ transform:translateY(0) scale(1); opacity:.8;} 50%{ transform:translateY(-11px) scale(1.18); opacity:1;} }
.rev-hero-text{ flex:1 1 320px; min-width:0; }
.rev-hero-eyebrow{ font-size:11px; font-weight:800; letter-spacing:.14em; color:#8C1D40; }
.rev-hero-title{ font-size:clamp(22px, 3vw, 30px); font-weight:800; color:#0D2137;
  margin:6px 0 8px; letter-spacing:-.5px; }
.rev-hero-note{ font-size:13.5px; line-height:1.65; color:#111a22; font-weight:500; }
/* Overview version — a touch bigger & warmer so it invites people to share */
.rev-hero-compact .rev-hero-title{ font-size:clamp(23px, 3.2vw, 32px); }
.rev-hero-compact .rev-hero-note{ font-size:14.5px; line-height:1.7; color:#0e1a24; }
/* 3D lift on the review cards */
.testi-card{ transition:transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s ease; }
.testi-card:hover{ transform:translateY(-6px) rotateX(3deg); box-shadow:0 18px 36px rgba(140,29,64,.16); }
@media (prefers-reduced-motion:reduce){
  .rev-hero, .rev-orb, .rev-orb-ring, .rev-spark, .testi-card{ animation:none; transition:none; } }

/* ── Manage-your-reviews panel (edit / delete own or admin) ──────────────── */
.manage-panel{ margin:0 0 14px; }
.manage-panel:empty{ margin:0; }
.mrev-title{ font-size:13px; font-weight:800; color:#8C1D40; margin-bottom:10px; display:flex; align-items:center; }
.mrev-empty{ font-size:12.5px; color:#546e7a; margin-top:10px; }
.mrev-row{ display:flex; flex-direction:column; gap:6px; background:#fff; border:1px solid #ece0e5;
  border-left:3px solid #8C1D40; border-radius:10px; padding:11px 14px; margin-bottom:9px; }
.mrev-head{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.mrev-stars{ color:#FFC627; font-size:13px; }
.mrev-name{ font-weight:800; color:#0D2137; font-size:12.5px; }
.mrev-role{ color:#546e7a; font-size:11.5px; }
.mrev-text{ font-size:12.5px; color:#14202b; line-height:1.5; }
.mrev-actions{ display:flex; gap:8px; margin-top:2px; }
.mrev-btn{ display:inline-flex; align-items:center; gap:5px; border-radius:7px; padding:5px 12px;
  font-size:11.5px; font-weight:800; cursor:pointer; border:1.5px solid; }
.mrev-edit{ background:#fff; color:#0D2137; border-color:#cfd8dc; }
.mrev-edit:hover{ background:#f5f7f9; }
.mrev-del{ background:#fff; color:#C62828; border-color:#f0c4c4; }
.mrev-del:hover{ background:#fdeded; }

/* ── Reviews page: 3D vibes — maroon + gold borders, raised sections & text box ── */
.testi-wrap{ border:2px solid #8C1D40 !important; border-top:5px solid #FFC627 !important;
  border-radius:16px !important;
  box-shadow:0 20px 48px rgba(140,29,64,.15), 0 7px 18px rgba(13,33,55,.09) !important; }
.testi-form{ border:2px solid #FFC627 !important; border-radius:16px;
  background:transparent !important;
  box-shadow:0 12px 28px rgba(13,33,55,.12), inset 0 1px 0 rgba(255,255,255,.7) !important;
  padding:18px 20px 20px !important; }
.testi-textarea, .testi-input{ border:1.6px solid #c9d6e2 !important;
  box-shadow:inset 0 2px 6px rgba(13,33,55,.07) !important; }
.testi-textarea:focus, .testi-input:focus{ border-color:#0d5158 !important;
  box-shadow:0 0 0 3px rgba(46,196,182,.18), inset 0 2px 6px rgba(13,33,55,.05) !important; }
.testi-dd .Select-control{ border:1.6px solid #c9d6e2 !important;
  box-shadow:inset 0 2px 6px rgba(13,33,55,.06); }
.testi-submit{ box-shadow:0 10px 24px rgba(140,29,64,.38), inset 0 1px 0 rgba(255,255,255,.32) !important; }
.mrev-row{ border:1.5px solid #f0d4dd; border-left:4px solid #8C1D40 !important;
  box-shadow:0 8px 20px rgba(140,29,64,.09); }

/* Visitor count is admin-only: hide the box entirely when nothing is rendered (non-admin) */
.visits-box:not(:has(.bi)){ display:none; }

/* ═══ Global responsive safety net (whole app) ═══════════════════════════
   Additive only — no layout changes. Stops media/tables from overflowing,
   breaks over-long words so text never spills out of its box, and keeps the
   floating RIA chat inside the viewport on the smallest phones. */
img, video, canvas, iframe { max-width: 100%; }
table { max-width: 100%; }
p, li, dd, dt, td, th, blockquote, figcaption,
.crb-card, .tab-header, .info-tile, .testi-text, .mrev-text, .bp-tm,
.eo3-line, .q3-sub, .sig-cite, .rev-hero-note { overflow-wrap: break-word; }
.ria-modal { max-width: calc(100vw - 20px); }
@media (max-width: 460px){ .ria-modal{ right:10px; left:10px; width:auto; } }

/* ── Compare by Year — the two maps stay FACE-TO-FACE at any width ──
   (beats the global ≤992px rule that stacks all .tab-body columns) */
.tab-body .spc-row{ display:flex; flex-wrap:nowrap !important; }
.tab-body .spc-row > .spc-col{ flex:0 0 50% !important; max-width:50% !important; }
@media (max-width:480px){
  .tab-body .spc-row > .spc-col .crb-card{ padding:8px 6px; }
  .tab-body .spc-row .crb-card-header{ font-size:11px; }
}

/* ── Map/graph duos that must stay FACE-TO-FACE at any width ──
   (Maps Over Time, Seasonal Cycles — beat the global ≤992px column-stacking rule) */
.tab-body .mapduo-row{ display:flex; flex-wrap:nowrap !important; }
.tab-body .mapduo-row > .mapduo-col{ flex:0 0 50% !important; max-width:50% !important; min-width:0; }
.tab-body .mapduo-row > .mapduo-map{ flex:0 0 58% !important; max-width:58% !important; }
.tab-body .mapduo-row > .mapduo-graph{ flex:0 0 42% !important; max-width:42% !important; }
@media (max-width:520px){
  .tab-body .mapduo-row .crb-card{ padding:8px 6px; }
  .tab-body .mapduo-row .crb-card-header{ font-size:11px; }
}

/* ============================================================
   MOBILE CHART FIX — dense charts (annotations, Sankey nodes)
   were compressing until labels/annotations clipped off-screen.
   On small screens give charts a readable min-width and let the
   card scroll horizontally, so the FULL chart is reachable by a
   swipe instead of being cut off. (Added for full mobile support.)
   ============================================================ */
@media (max-width: 600px) {
  .crb-card, .crb-card-body {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .crb-card .js-plotly-plot,
  .crb-card .dash-graph,
  .crb-card .plot-container,
  .crb-card .svg-container {
    min-width: 520px !important;
  }
  /* Sankey "water balance" cards clip by design on desktop; let them scroll on mobile */
  .wflow-card { overflow-x: auto !important; overflow-y: hidden; }
  .wflow-card .js-plotly-plot,
  .wflow-card .dash-graph,
  .wflow-card .plot-container,
  .wflow-card .svg-container {
    min-width: 560px !important;
  }
  /* subtle hint that these panels scroll sideways */
  .crb-card-body::-webkit-scrollbar,
  .wflow-card::-webkit-scrollbar { height: 6px; }
  .crb-card-body::-webkit-scrollbar-thumb,
  .wflow-card::-webkit-scrollbar-thumb { background: rgba(140,29,64,.35); border-radius: 6px; }
}

/* ============================================================
   COLD OPEN — the 5-second hero (GRACE storage-loss headline)
   ============================================================ */
.cold-open{ position:relative; margin:-2px 0 14px; padding:32px 30px 24px;
  border-radius:16px; overflow:hidden;
  background:linear-gradient(135deg,#0D2137 0%,#5c1230 55%,#8C1D40 100%);
  color:#fff; box-shadow:0 18px 44px rgba(13,33,55,.28); }
.co-eyebrow{ font-size:11px; letter-spacing:1.5px; text-transform:uppercase;
  color:#FFC627; margin-bottom:12px; font-weight:700; }
.co-lead{ font-size:17px; color:#e9eef4; font-weight:500; }
.co-big{ display:flex; align-items:baseline; gap:8px; margin:2px 0 4px; flex-wrap:wrap; }
.co-approx{ font-size:30px; font-weight:800; color:#FFC627; opacity:.9; }
.cu-num{ font-size:72px; font-weight:800; line-height:1; color:#FFC627;
  font-variant-numeric:tabular-nums; letter-spacing:-1px; }
.co-unit{ font-size:20px; font-weight:700; color:#fff; align-self:flex-end; padding-bottom:9px; }
.co-sub{ font-size:15px; color:#dbe4ee; max-width:640px; line-height:1.5; margin-bottom:14px; }
.co-spark{ display:block; width:min(560px,100%); height:58px; margin:2px 0 16px; opacity:.95; }
.co-ctas{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.co-cta{ display:inline-flex; align-items:center; padding:11px 18px; border-radius:11px;
  font-size:14px; font-weight:800; text-decoration:none !important; transition:transform .12s, background .15s; }
.co-cta .bi{ margin-left:6px; }
.co-cta-primary{ background:#FFC627; color:#5c1230 !important; }
.co-cta-primary:hover{ transform:translateY(-2px); background:#ffd451; color:#5c1230 !important; }
.co-cta-ghost{ background:rgba(255,255,255,.12); color:#fff !important; border:1px solid rgba(255,255,255,.35); }
.co-cta-ghost:hover{ background:rgba(255,255,255,.22); color:#fff !important; }
.co-foot{ font-size:10.5px; color:rgba(255,255,255,.62); max-width:700px; line-height:1.5; }
@media (max-width:600px){
  .cold-open{ padding:24px 18px 20px; }
  .cu-num{ font-size:50px; } .co-approx{ font-size:24px; }
  .co-unit{ font-size:16px; padding-bottom:5px; }
  .co-lead{ font-size:15px; } .co-sub{ font-size:13.5px; }
}

/* ===== Credibility strip — 'this is real science', every claim sourced ===== */
.cred-strip{ display:flex; flex-wrap:wrap; align-items:center; gap:2px 4px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11.5px; color:#475569; background:#f6f8fa; border:1px solid #e6ecf2;
  border-radius:10px; padding:8px 13px; margin:0 0 16px; }
.cred-item{ white-space:nowrap; }
.cred-strong{ color:#0D2137; font-weight:700; }
.cred-link{ text-decoration:none; color:#475569; border-bottom:1px dotted #cbd5e1; }
.cred-link:hover{ color:#8C1D40; border-bottom-color:#8C1D40; }
.cred-sep{ color:#cbd5e1; margin:0 3px; }
@media (max-width:600px){ .cred-strip{ font-size:10.5px; } }

/* ===== Landing scenario mini — the warming dial ===== */
.scen-mini .sm-grid{ display:grid; grid-template-columns:1.25fr 1fr; gap:24px; align-items:center; }
.scen-mini .sm-slider{ padding:10px 8px 0; }
.scen-mini .sm-out{ background:#f8fafc; border:1px solid #e6ecf2; border-radius:12px; padding:16px 18px; }
.sm-out-inner{ display:flex; flex-direction:column; gap:9px; }
.sm-metric{ display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; }
.sm-big{ font-size:40px; font-weight:800; line-height:1; font-variant-numeric:tabular-nums; letter-spacing:-1px; }
.sm-maf{ font-size:28px; font-weight:800; line-height:1; }
.sm-cap{ font-size:12px; color:#475569; font-weight:600; }
.sm-badge{ display:inline-block; align-self:flex-start; color:#fff; font-size:11px; font-weight:800;
  letter-spacing:.5px; text-transform:uppercase; padding:3px 12px; border-radius:20px; }
.sm-ci{ font-size:10.5px; color:#5f6b7a; }
@media (max-width:760px){ .scen-mini .sm-grid{ grid-template-columns:1fr; gap:16px; } }


/* ===== Hero film — live info-tiles pinned top-right ===== */
.hero-wrap{ position:relative; }
.hero-tiles{ position:absolute; top:14px; right:14px; display:flex; flex-direction:column;
  gap:10px; z-index:5; width:236px; max-width:42%; }
.hero-tile{ background:rgba(9,22,38,.60); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
  border:1px solid rgba(255,255,255,.16); border-radius:12px; padding:9px 13px; color:#fff;
  box-shadow:0 8px 22px rgba(0,0,0,.30); }
.hero-tile.g{ border-top:3px solid #FFC627; }
.hero-tile.m{ border-top:3px solid #ff7a5c; }
.ht-eye{ font-size:9px; font-weight:800; letter-spacing:.7px; text-transform:uppercase;
  color:#9fb2c6; margin-bottom:3px; }
.ht-row{ display:flex; align-items:baseline; gap:5px; }
.ht-v{ font-size:28px; font-weight:800; line-height:1; font-variant-numeric:tabular-nums; }
.ht-v.gold{ color:#FFC627; }
.ht-v.amber{ color:#ffb04d; }
.ht-u{ font-size:12px; font-weight:800; color:#e9eef4; }
.ht-l{ font-size:10px; color:#cdd9e6; margin-top:4px; line-height:1.3; }
.ht-sub{ font-size:10px; color:#5f7387; margin-top:4px; }
.ht-badge{ display:inline-block; margin-top:5px; font-size:9px; font-weight:800; color:#0b1e33;
  background:#ffb04d; padding:2px 8px; border-radius:7px; }
@media (max-width:640px){ .hero-tiles{ display:none; } }


/* ===== Proof & actions band (replaces the duplicated big-number cold-open) ===== */
.proof-band{ max-width:760px; margin:0 auto 18px; padding:16px 20px 15px;
  background:linear-gradient(135deg,#0d2137 0%,#3a1224 100%);
  border:1px solid rgba(140,29,64,.40); border-radius:14px;
  box-shadow:0 10px 28px rgba(13,33,55,.20); }
.pb-head{ display:flex; align-items:center; margin-bottom:12px; }
.pb-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:4px; }
.pb-chip{ display:inline-block; padding:5px 11px; border-radius:999px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  color:#e9eef4 !important; font-size:11.5px; font-weight:700; text-decoration:none;
  font-variant-numeric:tabular-nums; transition:background .15s, border-color .15s, color .15s; }
.pb-chip:hover{ background:rgba(255,198,39,.18); border-color:rgba(255,198,39,.55); color:#fff !important; }
.proof-band .co-ctas{ margin-top:14px; }
@media (max-width:640px){ .proof-band{ padding:14px 15px; } }


/* ===== Proof band — single-row layout with live stat-tiles ===== */
.proof-band{ max-width:1040px; }          /* widen for the one-row layout */
.pb-row{ display:flex; align-items:stretch; gap:14px; flex-wrap:wrap; }
.pb-stats{ display:flex; gap:10px; flex:0 0 auto; }
.pb-tile{ min-width:148px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.13);
  border-top:3px solid #FFC627; border-radius:12px; padding:8px 13px;
  display:flex; flex-direction:column; justify-content:center; }
.pb-tile.g{ border-top-color:#FFC627; }
.pb-tile.m{ border-top-color:#ff7a5c; }
.pbt-eye{ font-size:8.5px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:#5f7387; }
.pbt-row{ display:flex; align-items:baseline; gap:4px; margin-top:3px; }
.pbt-v{ font-size:30px; font-weight:800; line-height:1; font-variant-numeric:tabular-nums; }
.pbt-v.gold{ color:#FFC627; }
.pbt-v.amber{ color:#ffb04d; }
.pbt-u{ font-size:11px; font-weight:800; color:#e9eef4; }
.pbt-l{ font-size:10px; color:#cdd9e6; margin-top:4px; line-height:1.35; }
.pbt-badge{ display:inline-block; font-size:8.5px; font-weight:800; color:#0b1e33; background:#ffb04d;
  padding:1px 7px; border-radius:6px; }
.pb-mid{ flex:1 1 240px; min-width:210px; display:flex; flex-direction:column; justify-content:center; gap:8px; }
.pb-mid .pb-head{ margin-bottom:0; }
.pb-act{ flex:0 0 auto; display:flex; flex-direction:column; gap:8px; justify-content:center; min-width:186px; }
.pb-act .co-cta{ justify-content:center; width:100%; }
@media (max-width:860px){ .pb-row{ flex-direction:column; } .pb-act{ min-width:0; } }


/* ===== Hero row — film + proof band side by side (both containers in one row) ===== */
.hero-row{ display:flex; gap:16px; align-items:stretch; max-width:1140px; margin:0 auto 20px; flex-wrap:wrap; }
.hero-film-box{ flex:1.4 1 360px; align-self:center; }
.hero-row .proof-band{ flex:1 1 320px; max-width:none; margin:0; padding:15px 17px;
  display:flex; flex-direction:column; justify-content:center; }
.hero-row .proof-band .pb-head{ margin-bottom:10px; }
.hero-row .proof-band .pb-stats{ display:flex; gap:10px; margin-bottom:10px; }
.hero-row .proof-band .pb-stats .pb-tile{ flex:1 1 0; }
.hero-row .proof-band .pb-chips{ margin-bottom:12px; }
.hero-row .proof-band .co-ctas{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.hero-row .proof-band .co-cta{ flex:1 1 auto; justify-content:center; }
@media (max-width:820px){ .hero-row{ flex-direction:column; } .hero-film-box{ align-self:stretch; } }


/* ===== Fix: video stays 16:9 (no black letterbox), balanced with the band ===== */
.hero-row{ align-items:stretch; }
.hero-film-box{ flex:0 1 auto; width:min(56%, 620px); aspect-ratio:16 / 9; height:auto;
  align-self:center; }
.hero-film-box iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
/* the film relocated onto the Why / CRIA-story page — centered, full-width of its column */
.why-film{ margin:4px auto 18px; max-width:900px; }
.why-film .hero-film-box{ width:100%; max-width:100%; aspect-ratio:16 / 9; }
.hero-row .proof-band{ flex:1 1 300px; align-self:stretch; }
@media (max-width:820px){ .hero-film-box{ width:100%; align-self:stretch; } }


/* ===== Balance heights: compact the band to match the 16:9 film ===== */
.hero-film-box{ width:min(58%, 660px); }
.hero-row .proof-band{ padding:13px 16px; }
.hero-row .proof-band .pb-head{ margin-bottom:8px; }
.hero-row .proof-band .pb-stats{ gap:8px; margin-bottom:8px; }
.hero-row .proof-band .pb-tile{ padding:7px 11px; }
.hero-row .proof-band .pbt-v{ font-size:26px; }
.hero-row .proof-band .pb-chips{ gap:6px; margin-bottom:9px; }
.hero-row .proof-band .pb-chip{ padding:4px 9px; font-size:11px; }
.hero-row .proof-band .co-ctas{ gap:7px; margin-bottom:8px; }
.hero-row .proof-band .co-cta{ padding:9px 13px; font-size:12.5px; }
.hero-row .proof-band .co-foot{ font-size:10px; line-height:1.45; }


/* ===== Interactive animated warming dial (assets/scenario_dial.js) ===== */
.scen-dial{ min-height:210px; }
.sd-wrap{ display:flex; align-items:center; justify-content:center; gap:20px 30px; flex-wrap:wrap; }
.sd-gaugecol{ flex:0 1 300px; text-align:center; }
.sd-svg{ width:100%; max-width:300px; height:auto; display:block; margin:0 auto; touch-action:none; cursor:grab; }
.sd-svg:active{ cursor:grabbing; }
/* value the user has dialled + a clear, inviting drag instruction */
.sd-setrow{ margin-top:2px; }
.sd-setval{ font-size:26px; font-weight:800; color:#0D2137; line-height:1; letter-spacing:-.5px;
  font-variant-numeric:tabular-nums; }
.sd-setcap{ font-size:11px; color:#64748b; font-weight:600; margin-top:2px; }
.sd-sethint{ display:inline-block; margin-top:9px; font-size:11px; font-weight:800; color:#8C1D40;
  background:rgba(140,29,64,.08); border:1px solid rgba(140,29,64,.18); border-radius:999px;
  padding:3px 12px; letter-spacing:.2px; animation:sdNudge 1.9s ease-in-out infinite; }
.sd-sethint span{ color:#8C1D40; font-weight:900; }
@keyframes sdNudge{ 0%,100%{ transform:translateX(0); box-shadow:0 0 0 0 rgba(140,29,64,0); }
  50%{ transform:translateX(0); box-shadow:0 0 0 4px rgba(140,29,64,.10); } }
.sd-tick{ fill:#64748b; font-size:12px; font-weight:700; font-family:inherit; }
.sd-readcol{ flex:0 1 200px; min-width:180px; }
.sd-pct{ font-size:56px; font-weight:800; line-height:1; font-variant-numeric:tabular-nums; letter-spacing:-1px; }
.sd-cap{ font-size:13px; color:#475569; font-weight:600; margin-top:2px; }
.sd-mafrow{ margin-top:10px; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.sd-maf{ font-size:30px; font-weight:800; font-variant-numeric:tabular-nums; }
.sd-cap2{ font-size:12px; color:#475569; font-weight:600; }
.sd-badge{ display:inline-block; margin-top:11px; color:#fff; font-size:12px; font-weight:800;
  padding:3px 13px; border-radius:9px; }
.sd-ci{ font-size:11px; color:#64748b; margin-top:10px; }
/* response-curve column — fills the space + shows the whole 0→+5°C response with its CI band */
.sd-curvecol{ flex:1 1 330px; min-width:270px; max-width:400px; border-left:1px solid #eef1f5; padding-left:24px; }
.sd-curvetitle{ font-size:12.5px; font-weight:800; color:#8C1D40; letter-spacing:.2px; margin-bottom:4px; }
.sd-curve{ width:100%; max-width:100%; height:auto; display:block; }
.sd-caxis{ fill:#94a3b8; font-size:11px; font-weight:700; font-family:inherit; }
.sd-cmarklab{ font-size:12px; font-weight:800; font-family:inherit; }
.sd-curvenote{ font-size:10px; color:#5f6b7a; font-weight:600; margin-top:3px; }
@media (max-width:820px){ .sd-curvecol{ border-left:none; padding-left:0; flex-basis:100%; } }


/* ===== Responsive: hero row + new components stack cleanly on every screen ===== */
@media (max-width: 900px){
  .hero-row{ flex-direction:column; align-items:stretch; gap:14px; }
  .hero-film-box{ width:100% !important; max-width:100%; align-self:stretch; }
  .hero-row .proof-band{ width:100%; flex-basis:auto; }
}
@media (max-width: 540px){
  .hero-row .proof-band .pb-stats{ flex-wrap:wrap; }
  .hero-row .proof-band .pb-tile{ flex:1 1 130px; }
  .hero-row .proof-band .co-cta{ flex:1 1 100%; }
  .sd-wrap{ gap:12px; }
  .sd-pct{ font-size:46px; }
  .sd-readcol{ min-width:0; }
}
/* generic safety — nothing overflows its card on small screens */
.crb-card{ overflow-wrap:break-word; }   /* break long tokens, but never per-character */
.hero-film-box, .proof-band, .scen-dial, .sd-svg{ max-width:100%; }


/* ===== Tab showcase — 3D value-tile + animated chart cards (yellow/maroon/white) ===== */
.tabshow-grid{ display:grid; grid-template-columns:1fr; gap:14px; }
.tabcard{ display:block; text-decoration:none; background:transparent; border:1px solid var(--border);
  border-radius:14px; overflow:hidden; box-shadow:0 2px 6px rgba(13,33,55,.05), 0 10px 26px rgba(13,33,55,.07);
  transition:transform .2s, box-shadow .2s; cursor:pointer; }
.tabcard:hover{ transform:translateY(-5px); box-shadow:0 5px 12px rgba(13,33,55,.08), 0 16px 34px rgba(13,33,55,.12); }
.tabcard:hover .tvt-tile{ transform:translateY(-2px); border-color:rgba(13,33,55,.20); }

/* stage: no background fill at all */
.tabcard-stage{ display:flex; align-items:stretch; gap:12px; padding:14px; min-height:132px;
  background:transparent; overflow:hidden; }

/* value tile — no fill, just the accent edge + thin border */
.tvt-tile{ flex:1.05 1 0; border-radius:13px; padding:12px 14px;
  background:transparent;
  border:1px solid var(--border); border-top:3px solid var(--acc,#FFC627);
  display:flex; flex-direction:column; justify-content:center;
  transition:transform .2s, border-color .2s; }
.tvt-val{ display:flex; align-items:baseline; gap:1px; line-height:1;
  font-family:"Helvetica Neue",Arial,sans-serif; letter-spacing:-1.5px; }
.tvt-num{ font-size:40px; font-weight:800; color:#8C1D40; font-variant-numeric:tabular-nums; }
.tvt-pre{ font-size:28px; font-weight:800; color:#8C1D40; }
.tvt-suf{ font-size:22px; font-weight:800; color:#b07a1e; letter-spacing:-.5px; }
.tvt-unit{ font-size:13px; font-weight:800; color:#4a2233; margin-top:7px; line-height:1.2; }
.tvt-cap{ font-size:10px; color:#8a6b5f; margin-top:4px; line-height:1.35; }

/* chart panel — no fill, just a light boundary */
.tvt-chart{ flex:.95 1 0; border-radius:11px; border:1px solid var(--border);
  background:transparent; position:relative;
  overflow:hidden; display:flex; line-height:0; }
.tvt-chart .tabcard-img{ width:100%; height:100%; object-fit:cover; display:block; }
/* cycling: two analyses crossfade in the same panel */
.tvt-chart.multi{ display:block; }
.tvt-chart.multi .tabcard-img{ position:absolute; inset:0; width:100%; height:100%; }
.tvt-chart.multi .cyc.c1{ animation:tvtcyc_a 10s ease-in-out infinite; }
.tvt-chart.multi .cyc.c2{ animation:tvtcyc_b 10s ease-in-out infinite; }
@keyframes tvtcyc_a{ 0%,44%{opacity:1} 50%,94%{opacity:0} 100%{opacity:1} }
@keyframes tvtcyc_b{ 0%,44%{opacity:0} 50%,94%{opacity:1} 100%{opacity:0} }
/* cycling: 3+ analyses, one at a time (JS-driven crossfade) */
.tvt-chart.multiN .tabcard-img{ opacity:0; transition:opacity .55s ease; }
.tvt-chart.multiN .tabcard-img.on{ opacity:1; }

.tabcard-body{ padding:12px 15px 15px; }
.tabcard-q{ font-size:10px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:#8C1D40; }
.tabcard-title{ font-size:16px; font-weight:800; color:#5a1226; margin-top:3px; }
.tabcard-inside{ font-size:11.5px; color:#6b4a54; margin-top:6px; line-height:1.5; }
.tabcard-open{ font-size:12px; font-weight:800; color:#8C1D40; margin-top:10px; display:inline-flex; align-items:center; gap:5px; }

/* tab cards: kill link underline, keep colours */
.tabcard, .tabcard:hover, .tabcard *{ text-decoration:none !important; }
.tabcard .tabcard-title{ color:#5a1226 !important; }
.tabcard .tabcard-inside{ color:#6b4a54 !important; }
.tabcard .tabcard-q{ color:#8C1D40 !important; }
.tabcard .tabcard-open{ color:#8C1D40 !important; }

/* narrow screens: stack tile over chart so nothing squashes */
@media (max-width:560px){
  .tabcard-stage{ flex-direction:column; }
  .tvt-chart{ min-height:90px; }
}

/* ===== Click-through directory: one tab per full-width row (header left, analyses right) ===== */
.tabcard.tabnav{ display:flex; flex-direction:row; align-items:stretch; padding:0;
  border-top:3px solid var(--gold,#FFC627); }
.tabnav-head{ flex:0 0 232px; display:flex; flex-direction:column; justify-content:center;
  padding:14px 16px; border-right:1px solid var(--border); transition:background .15s; }
.tabnav-head:hover{ background:rgba(255,198,39,.08); }
.tabnav-q{ font-size:10px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:#8C1D40 !important; }
.tabnav-titlerow{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:3px; }
.tabnav-title{ font-size:16px; font-weight:800; color:#5a1226 !important; line-height:1.2; }
.tabnav-arrow{ font-size:13px; color:#8C1D40; }
.tabnav-desc{ font-size:10.5px; color:#6b4a54 !important; margin-top:8px; line-height:1.45; }
.an-grid{ flex:1 1 auto; display:grid; grid-template-columns:repeat(auto-fill, minmax(148px,1fr));
  gap:9px; padding:12px; align-content:center; }
@media (max-width:760px){
  .tabcard.tabnav{ flex-direction:column; }
  .tabnav-head{ flex:auto; border-right:none; border-bottom:1px solid var(--border); }
  .an-grid{ grid-template-columns:repeat(2,1fr); }
}
.an-chip{ display:block; position:relative; z-index:1; border:1px solid #eadfe6; border-radius:12px; padding:9px 9px 10px;
  background:linear-gradient(165deg,#ffffff 0%,#fcfaf6 60%,#f6f2ea 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 6px 14px rgba(13,33,55,.09), 0 2px 4px rgba(13,33,55,.06);
  transition:transform .2s cubic-bezier(.2,.7,.3,1.35), box-shadow .2s ease, border-color .16s;
  transform-origin:center; will-change:transform;
  animation:chipIn .5s ease backwards; overflow:hidden; }
/* hover → the tile POPS OUT bigger with a 3D lift and floats above its neighbours */
.an-chip:hover{ transform:perspective(900px) translateY(-8px) scale(1.18) rotateX(2.5deg); z-index:40;
  border-color:#e6c6d4;
  box-shadow:0 2px 0 rgba(255,255,255,.95) inset,
             0 30px 60px rgba(140,29,64,.30), 0 12px 24px rgba(13,33,55,.20); }
.an-chip:hover .chip-chart{ filter:drop-shadow(0 5px 11px rgba(13,33,55,.22)); }
.an-chip:hover .chip-name{ color:#5a1226 !important; }
/* let a popped tile spill OUT of its row/container instead of being clipped, and float the
   whole row above its neighbours while one of its tiles is hovered */
.tabcard.tabnav{ overflow:visible; }
.tabcard.tabnav:hover{ transform:none; }
.tabcard.tabnav:has(.an-chip:hover){ position:relative; z-index:50; }
.an-grid{ overflow:visible; }
.chip-chart{ display:block; width:100%; height:auto; border-radius:9px; filter:drop-shadow(0 2px 4px rgba(13,33,55,.10)); }
.chip-name{ font-size:11px; font-weight:800; color:#3f2029 !important; margin-top:6px; text-align:center; line-height:1.2; }
.an-chip{ text-align:center; }
.chip-main{ display:block; text-decoration:none !important; color:inherit; }
/* PUBLISHED badge — this analysis is backed by a peer-reviewed paper; sits below the name so it
   never covers the headline value; click → Publications list */
.pub-badge{ display:inline-flex; align-items:center; gap:3px; margin:8px auto 1px;
  padding:2px 8px 2px 6px; border-radius:999px; font-size:8px; font-weight:800; letter-spacing:.03em;
  text-transform:uppercase; background:linear-gradient(135deg,#FFD84D,#FFC627); color:#5a1226 !important;
  text-decoration:none !important; border:1px solid #efb300;
  box-shadow:0 2px 5px rgba(224,162,0,.42), 0 1px 0 rgba(255,255,255,.6) inset;
  transition:transform .14s, box-shadow .14s; }
.pub-badge:hover{ transform:translateY(-1px) scale(1.06); box-shadow:0 5px 12px rgba(224,162,0,.62); }
.pub-star{ color:#5a1226; font-size:9px; line-height:1; animation:starTwinkle 2.2s ease-in-out infinite; transform-origin:center; }
/* CRIA DIAGNOSTIC badge — novel metric first quantified in CRIA (maroon; distinct from yellow Published) */
.diag-badge{ display:inline-flex; align-items:center; gap:3px; margin:8px auto 1px;
  padding:2px 8px 2px 6px; border-radius:999px; font-size:8px; font-weight:800; letter-spacing:.03em;
  text-transform:uppercase; background:linear-gradient(135deg,#8C1D40,#6d1531); color:#ffffff !important;
  text-decoration:none !important; border:1px solid #6d1531;
  box-shadow:0 2px 5px rgba(140,29,64,.35), 0 1px 0 rgba(255,255,255,.15) inset;
  transition:transform .14s, box-shadow .14s; }
.diag-badge:hover{ transform:translateY(-1px) scale(1.06); box-shadow:0 5px 12px rgba(140,29,64,.5); }
.diag-mark{ color:#FFC627; font-size:8px; line-height:1; animation:starTwinkle 2.4s ease-in-out infinite; transform-origin:center; }
/* keep every link inside the directory underline-free */
.tabcard.tabnav, .tabcard.tabnav *, .tabcard.tabnav a:hover{ text-decoration:none !important; }

/* staggered entrance so the chips animate in, not just appear */
@keyframes chipIn{ from{ opacity:0; transform:translateY(9px) scale(.97); } to{ opacity:1; transform:translateY(0) scale(1); } }
.an-grid .an-chip:nth-child(1){ animation-delay:.02s } .an-grid .an-chip:nth-child(2){ animation-delay:.08s }
.an-grid .an-chip:nth-child(3){ animation-delay:.14s } .an-grid .an-chip:nth-child(4){ animation-delay:.20s }
.an-grid .an-chip:nth-child(5){ animation-delay:.26s } .an-grid .an-chip:nth-child(6){ animation-delay:.32s }
.an-grid .an-chip:nth-child(7){ animation-delay:.38s } .an-grid .an-chip:nth-child(8){ animation-delay:.44s }
.an-grid .an-chip:nth-child(9){ animation-delay:.50s }

/* HOT chips — the shocking / eye-opening ones: maroon border, tint, pulsing glow + a twinkling star */
.an-chip.hot{ border:1.6px solid #8C1D40; background:linear-gradient(160deg,#ffffff,#fdeef2);
  animation:chipIn .5s ease both, hotGlow 2.6s ease-in-out .5s infinite; }
.an-chip.hot:hover{ border-color:#8C1D40; animation:none; }
.an-chip.hot .an-val{ font-size:18.5px; }
@keyframes hotGlow{
  0%,100%{ box-shadow:0 0 0 0 rgba(140,29,64,0); }
  50%{ box-shadow:0 0 0 3px rgba(140,29,64,.13), 0 8px 20px rgba(140,29,64,.20); } }
.an-star{ position:absolute; top:7px; right:8px; color:#8C1D40; font-size:10.5px;
  animation:starTwinkle 1.9s ease-in-out infinite; transform-origin:center; }
@keyframes starTwinkle{
  0%,100%{ transform:scale(1) rotate(0); opacity:.75; }
  50%{ transform:scale(1.35) rotate(18deg); opacity:1; } }
@media (prefers-reduced-motion:reduce){
  .an-chip,.an-chip.hot{ animation:none; } .an-star,.pub-star,.diag-mark{ animation:none; }
  .an-chip:hover{ transform:translateY(-3px); } }

/* RIA row — mascot left, prompt right */
.tabcard.tabnav.ria{ flex-direction:row; align-items:center; justify-content:flex-start; gap:18px;
  padding:12px 20px; text-align:left; cursor:pointer; }
.tabcard.tabnav.ria:hover{ background:rgba(255,198,39,.06); }
.ria-mini{ width:120px; height:78px; object-fit:contain; display:block; margin:0; flex:0 0 120px; }
.ria-mini-cap{ font-size:11.5px; color:#6b4a54 !important; margin-top:5px; line-height:1.45; max-width:520px; }

@media (max-width:560px){ .an-grid{ grid-template-columns:repeat(2,1fr); } }

/* ════ What most people miss — hidden-findings band (animated, ASU maroon/gold) ════ */
.hf-band{ position:relative; overflow:hidden; padding:26px 26px 22px; margin-bottom:18px;
  border-top:4px solid #FFC627 !important;
  background:linear-gradient(180deg,#ffffff 0%,#fdf7f2 100%) !important; }
.hf-band::before{ content:""; position:absolute; right:-80px; top:-80px; width:300px; height:300px;
  background:radial-gradient(circle,rgba(255,198,39,.16),transparent 62%); pointer-events:none; }
.hf-headwrap{ position:relative; margin-bottom:16px; }
.hf-eyebrow{ font-size:11px; font-weight:800; letter-spacing:2.4px; text-transform:uppercase; color:#E0A200; }
.hf-title{ font-size:26px; font-weight:800; color:#8C1D40; letter-spacing:-.4px; margin:4px 0 4px; }
.hf-hl{ position:relative; color:#8C1D40; white-space:nowrap; }
.hf-hl::after{ content:""; position:absolute; left:0; right:0; bottom:1px; height:8px;
  background:rgba(255,198,39,.45); z-index:-1; border-radius:3px; }
.hf-sub{ font-size:13px; color:#6b4a54; font-weight:600; }
.hf-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; }
.hf-card{ position:relative; display:block; text-decoration:none !important; background:#fff;
  border:1px solid #ecd7de; border-radius:15px; padding:15px 16px 14px; overflow:hidden;
  box-shadow:0 6px 16px rgba(140,29,64,.07);
  opacity:0; transform:translateY(16px); animation:hfUp .6s cubic-bezier(.2,.7,.3,1) forwards;
  transition:transform .2s cubic-bezier(.2,.7,.3,1.15), box-shadow .2s, border-color .2s; }
.hf-card::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:0;
  background:linear-gradient(#FFC627,#E0A200); transition:width .2s ease; }
.hf-card:hover{ transform:translateY(-6px); border-color:rgba(140,29,64,.30);
  box-shadow:0 18px 36px rgba(140,29,64,.16); }
.hf-card:hover::before{ width:4px; }
.hf-tag{ display:inline-block; font-size:9px; font-weight:800; letter-spacing:.5px; text-transform:uppercase;
  padding:3px 8px; border-radius:20px; margin-bottom:9px; }
.hf-tag.hf-pub{ background:#fff7e0; color:#9a6a00; border:1px solid #f0d489; }
.hf-tag.hf-cria{ background:#f5e6ec; color:#8C1D40; border:1px solid #e0b8c6; }
.hf-tag.hf-src{ background:#e9f2fb; color:#1c5a86; border:1px solid #bcd8ef; }
.hf-numrow{ display:flex; align-items:baseline; gap:4px; }
.hf-num{ font-size:40px; font-weight:800; color:#8C1D40; letter-spacing:-1.5px; line-height:.95;
  font-variant-numeric:tabular-nums; font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  display:inline-block; transform:scale(.8); opacity:0; animation:hfPop .5s cubic-bezier(.2,.8,.2,1.3) .25s forwards; }
.hf-unit{ font-size:14px; font-weight:800; color:#a8536f; }
.hf-rule .hf-rule, .hf-rule{ }
.hf-rule{ display:block; height:3px; width:0; border-radius:3px; margin:9px 0 10px;
  background:linear-gradient(90deg,#FFC627,#E0A200);
  animation:hfRule .6s ease .45s forwards; }
.hf-head{ font-size:14px; font-weight:800; color:#0D2137; line-height:1.28; }
.hf-so{ font-size:12px; color:#5a6b7d; line-height:1.5; margin-top:6px; }
.hf-cta{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:800;
  color:#8C1D40; margin-top:11px; }
.hf-cta .bi{ transition:transform .18s ease; }
.hf-card:hover .hf-cta .bi{ transform:translateX(3px); }
.hf-lead{ position:relative; display:flex; align-items:center; gap:22px; margin-top:14px;
  text-decoration:none !important; overflow:hidden;
  background:linear-gradient(100deg,#ffffff 0%,#fdf4ee 100%);
  border:1px solid #ecd7de; border-left:5px solid #FFC627; border-radius:15px;
  padding:18px 24px; box-shadow:0 8px 20px rgba(140,29,64,.08);
  opacity:0; transform:translateY(16px); animation:hfUp .6s cubic-bezier(.2,.7,.3,1) .34s forwards;
  transition:transform .2s cubic-bezier(.2,.7,.3,1.15), box-shadow .2s, border-color .2s; }
.hf-lead:hover{ transform:translateY(-4px); border-color:rgba(140,29,64,.28);
  box-shadow:0 18px 38px rgba(140,29,64,.16); }
.hf-lead-figure{ flex:0 0 auto; min-width:148px; padding-right:22px;
  border-right:1px solid #efd9c3; }
.hf-lead-numrow{ display:flex; align-items:baseline; gap:3px; }
.hf-lead-num{ font-size:52px; font-weight:800; color:#8C1D40; letter-spacing:-2px; line-height:.9;
  font-variant-numeric:tabular-nums; font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  display:inline-block; transform:scale(.8); opacity:0;
  animation:hfPop .5s cubic-bezier(.2,.8,.2,1.3) .5s forwards; }
.hf-lead-unit{ font-size:26px; font-weight:800; color:#a8536f; }
.hf-lead-cap{ font-size:10.5px; font-weight:800; letter-spacing:.6px; text-transform:uppercase;
  color:#9a6a00; margin-top:6px; }
.hf-lead-body{ flex:1; }
.hf-lead-head{ font-size:16px; font-weight:800; color:#0D2137; line-height:1.3; margin-top:3px; }
.hf-lead-so{ font-size:12.5px; color:#5a6b7d; line-height:1.55; margin-top:7px; }
.hf-lead-so b{ color:#8C1D40; }
@media (max-width:640px){
  .hf-lead{ flex-direction:column; align-items:flex-start; gap:14px; }
  .hf-lead-figure{ border-right:none; border-bottom:1px solid #efd9c3; padding-right:0;
    padding-bottom:12px; width:100%; } }
@media (prefers-reduced-motion:reduce){
  .hf-lead,.hf-lead-num{ animation:none !important; opacity:1 !important; transform:none !important; } }
.hf-myth{ position:relative; font-size:13px; color:#44555f; line-height:1.55; margin-top:16px;
  padding:12px 16px; background:#fff; border:1px solid #ecd7de; border-left:4px solid #8C1D40;
  border-radius:10px; }
.hf-myth b{ color:#8C1D40; }
.hf-mythlink{ font-weight:800; color:#8C1D40; text-decoration:none; white-space:nowrap; }
.hf-mythlink:hover{ text-decoration:underline; }
@keyframes hfUp{ to{ opacity:1; transform:none; } }
@keyframes hfPop{ to{ opacity:1; transform:none; } }
@keyframes hfRule{ to{ width:46px; } }
@media (prefers-reduced-motion:reduce){
  .hf-card,.hf-num,.hf-rule{ animation:none !important; opacity:1 !important; transform:none !important; }
  .hf-rule{ width:46px; } }

/* ============================================================================
   "About this analysis" panel (top of every analysis page) + "Next →" workflow cue
   Injected once at the routing layer (app.render_page). First-visit expanded,
   collapses on later visits (assets/about.js). ASU maroon/gold, self-contained.
   ========================================================================== */
.abt-panel{ position:relative; background:linear-gradient(180deg,#ffffff 0%,#fffdf7 100%);
  border:1px solid #eadfe4; border-left:4px solid #FFC627; border-radius:14px;
  box-shadow:0 6px 18px rgba(140,29,64,.06); margin:0 0 18px; overflow:hidden;
  animation:abtIn .5s cubic-bezier(.2,.7,.3,1) both; }
@keyframes abtIn{ from{ opacity:0; transform:translateY(-6px);} to{ opacity:1; transform:none;} }
.abt-head{ display:flex; align-items:center; justify-content:space-between; width:100%;
  gap:12px; background:transparent; border:none; cursor:pointer; text-align:left;
  padding:13px 18px; font-family:inherit; }
.abt-head-l{ display:inline-flex; align-items:center; gap:9px; }
.abt-head-l .bi-info-circle-fill{ color:#8C1D40; font-size:15px; }
.abt-title{ font-size:13.5px; font-weight:800; color:#8C1D40; letter-spacing:.2px; }
.abt-head-r{ display:inline-flex; align-items:center; gap:10px; }
.abt-hint{ font-size:10.5px; font-weight:800; letter-spacing:.4px; text-transform:uppercase;
  color:#8C1D40; background:#fbeef2; border:1px solid #e6c4d1; border-radius:20px; padding:2px 9px; }
.abt-chev{ color:#8C1D40; font-size:13px; transition:transform .3s cubic-bezier(.2,.7,.3,1); }
.abt-panel.collapsed .abt-chev{ transform:rotate(-90deg); }
.abt-panel.collapsed .abt-hint{ opacity:.85; }
.abt-body{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px;
  padding:2px 18px 16px; max-height:320px; opacity:1;
  transition:max-height .38s cubic-bezier(.2,.7,.3,1), opacity .28s ease, padding .38s ease; }
.abt-panel.collapsed .abt-body{ max-height:0; opacity:0; padding-top:0; padding-bottom:0; }
.abt-row{ display:flex; gap:9px; align-items:flex-start; }
.abt-ic{ color:#8C1D40; font-size:14px; margin-top:2px; flex:0 0 auto;
  background:#f7ecf0; width:26px; height:26px; border-radius:8px;
  display:inline-flex; align-items:center; justify-content:center; }
.abt-txt{ display:flex; flex-direction:column; }
.abt-k{ font-size:10.5px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; color:#9a6a00; }
.abt-v{ font-size:12.5px; color:#37474f; line-height:1.45; margin-top:2px; }
@media (max-width:820px){ .abt-body{ grid-template-columns:1fr; gap:11px; } }
@media (prefers-reduced-motion:reduce){
  .abt-panel{ animation:none; } .abt-chev,.abt-body{ transition:none; } }

/* Next → workflow cue (bottom of each analysis page) */
.nxt-cue{ display:flex; align-items:center; justify-content:space-between; gap:16px;
  text-decoration:none !important; margin:22px 0 6px; padding:15px 20px; border-radius:14px;
  background:linear-gradient(100deg,#8C1D40 0%,#6d1531 100%);
  box-shadow:0 8px 22px rgba(140,29,64,.16);
  transition:transform .2s cubic-bezier(.2,.7,.3,1.15), box-shadow .2s; }
.nxt-cue:hover{ transform:translateY(-3px); box-shadow:0 16px 34px rgba(140,29,64,.26); }
.nxt-txt{ display:flex; flex-direction:column; }
.nxt-kick{ font-size:10px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase;
  color:#FFC627; }
.nxt-label{ font-size:16px; font-weight:800; color:#fff; letter-spacing:-.2px; margin-top:2px; }
.nxt-go{ display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  font-size:12.5px; font-weight:800; color:#FFC627; }
.nxt-go .bi{ font-size:20px; transition:transform .2s ease; }
.nxt-cue:hover .nxt-go .bi{ transform:translateX(4px); }
@media (prefers-reduced-motion:reduce){ .nxt-cue{ transition:none; } }

/* Accessibility — skip-to-content link (hidden until keyboard-focused) */
.skip-link{ position:absolute; left:-9999px; top:0; z-index:100000; background:#8C1D40;
  color:#fff; padding:10px 16px; border-radius:0 0 8px 0; font-weight:800;
  text-decoration:none; box-shadow:0 4px 12px rgba(13,33,55,.25); }
.skip-link:focus{ left:0; outline:3px solid #FFC627; }
/* Visible keyboard-focus ring for interactive controls (helps keyboard/AT users) */
.nav-link:focus-visible, .zoom-btn:focus-visible, .ria-ctl:focus-visible,
.ql-link:focus-visible, .qv-btn:focus-visible{ outline:3px solid #FFC627; outline-offset:2px; }

/* Hide the workflow numbers beside the nav (removed by request). */
.nav-num{ display:none !important; }

/* Quick Links — the original professional colours (each link keeps its own maroon/navy).
   Only tweak: pull "Build a report" to the top, styled as the standard navy pill so the
   maroon/navy rhythm down the list stays clean. */
.ql-box .zoom-title{ order:-2; }
.ql-box a[href="/report"]{ order:-1;
  background:linear-gradient(150deg,#16324d 0%,#0d2137 55%,#081726 100%) !important;
  border-color:#FFC627 !important; }
.ql-box a[href="/report"], .ql-box a[href="/report"] span{ color:#ffffff !important; }
.ql-box a[href="/report"] .bi{ color:#FFC627 !important; }

/* Display-size box left exactly as it was. Keep the Quick-Links pills a touch compact so
   the whole list stays in view without scrolling. */
.ql-box{ gap:6px !important; }
.ql-box .ql-link{ padding:6px 14px !important; }

/* ── Guided-path progress rail (first-time users only; retires after the path is explored) ──
   A slim rail runs beside the six main sections with a step-dot on each. Completed steps show a
   gold dot, the current step is a solid maroon marker with a soft ring, upcoming steps are hollow,
   and the rail fills gold up to the current step. A compact "Suggested path · Step X of N" label
   sits above the nav with an × to dismiss. All positions are driven by CSS vars the script sets. */
.gp-label{ display:flex; align-items:center; gap:8px; margin:4px 6px 10px; padding:7px 11px;
  background:linear-gradient(180deg,#fbf6ea,#f7efdc); border:1px solid #f0e2c2; border-radius:9px;
  box-shadow:0 1px 2px rgba(80,60,20,.05); animation:gpLabelIn .4s ease both; }
@keyframes gpLabelIn{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }
.gp-lb-t{ font-size:9.5px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:#8C1D40; }
.gp-lb-s{ font-size:11px; font-weight:600; color:#5a4a2f; white-space:nowrap; }
.gp-lb-x{ margin-left:auto; border:none; background:transparent; color:#9a8560; font-size:15px;
  line-height:1; cursor:pointer; padding:0 1px; opacity:.6; transition:opacity .15s, color .15s; }
.gp-lb-x:hover{ opacity:1; color:#8C1D40; }

/* the rail lives on the nav container; dots live on each nav-link */
.gp-rail{ position:relative; }
.gp-rail::before{ content:""; position:absolute; left:9px; top:var(--gp-top,0); height:var(--gp-span,0);
  width:2px; transform:translateX(-50%); background:#e6dcc9; border-radius:2px; }
.gp-rail::after{ content:""; position:absolute; left:9px; top:var(--gp-top,0); height:var(--gp-fill,0);
  width:2px; transform:translateX(-50%); border-radius:2px;
  background:linear-gradient(180deg,#FFD65A,#FFC627); transition:height .45s cubic-bezier(.4,0,.2,1); }
.nav-link.gp{ position:relative; padding-left:28px !important; }
.nav-link.gp::before{ content:""; position:absolute; left:9px; top:50%; width:11px; height:11px;
  margin-top:-5.5px; transform:translateX(-50%); border-radius:50%; box-sizing:border-box;
  background:#fff; border:2px solid #d8cbb6; z-index:2; transition:background .3s, border-color .3s; }
.nav-link.gp-done::before{ background:#FFC627; border-color:#FFC627; }
.nav-link.gp-ahead::before{ background:#fff; border-color:#d8cbb6; }
/* current step = a gold bullseye (gold ring, white centre); stays visible even on the
   maroon "active" highlight bar, and reads as distinct from the solid-gold "done" dots */
.nav-link.gp-current::before{ background:#fff; border:3px solid #FFC627; width:13px; height:13px;
  margin-top:-6.5px; box-shadow:0 0 0 0 rgba(255,198,39,.7); animation:gpPulse 1.9s ease-in-out infinite; }
@keyframes gpPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(255,198,39,.6); } 50%{ box-shadow:0 0 0 6px rgba(255,198,39,0); } }

/* ─────────────────────────────────────────────────────────────────────────────
   Exploration-progress bar (sits under the title container; filled by
   assets/explore_progress.js). Shows overall progress + a per-section breakdown of
   how many analyses in each tab the user has opened vs how many remain.
   ───────────────────────────────────────────────────────────────────────────── */
.ep-wrap{ margin:0 16px 16px; background:#ffffff; border:1px solid #eee3cf; border-top:3px solid #FFC627;
  border-radius:10px; padding:11px 18px 13px; box-shadow:0 3px 9px rgba(13,33,55,.08);
  animation:epIn .45s ease both; }
@keyframes epIn{ from{ opacity:0; transform:translateY(-5px); } to{ opacity:1; transform:none; } }

.ep-head{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.ep-title{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:800;
  letter-spacing:.5px; text-transform:uppercase; color:#8C1D40; white-space:nowrap; }
.ep-title .bi{ color:#e0a400; font-size:14px; }

.ep-overall{ display:flex; align-items:center; gap:12px; flex:1 1 260px; min-width:200px; }
.ep-oa-track{ flex:1; height:8px; background:#ece1cd; border-radius:6px; overflow:hidden; min-width:80px; }
.ep-oa-fill{ height:100%; border-radius:6px; background:linear-gradient(90deg,#FFD65A,#FFC627);
  transition:width .55s cubic-bezier(.4,0,.2,1); }
.ep-oa-num{ font-size:12px; color:#5a4a2f; white-space:nowrap; }
.ep-oa-num b{ color:#8C1D40; font-weight:800; font-size:13px; }
.ep-oa-pct{ opacity:.6; }

.ep-toggle{ margin-left:auto; width:24px; height:24px; flex:none; border:1px solid #e6dcc9;
  background:#faf6ec; color:#8C1D40; font-size:16px; line-height:1; border-radius:6px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:background .15s, border-color .15s; }
.ep-toggle:hover{ background:#f3ead4; border-color:#FFC627; }

.ep-secs{ display:flex; gap:10px; margin-top:11px; flex-wrap:wrap; }
.ep-collapsed .ep-secs{ display:none; }

.ep-sec{ flex:1 1 150px; min-width:140px; background:#fbf8f1; border:1px solid #ece3d2;
  border-radius:8px; padding:8px 11px 9px; text-decoration:none; cursor:pointer; color:inherit;
  transition:border-color .25s, background .25s, box-shadow .2s, transform .2s; }
.ep-sec:hover{ border-color:#8C1D40; box-shadow:0 3px 10px rgba(140,29,64,.13); transform:translateY(-1px); }
/* sections the user has already opened → maroon label (untouched stay dark, so it's clear what's left) */
.ep-sec-part .ep-sec-label, .ep-sec-done .ep-sec-label{ color:#8C1D40; }
.ep-sec-top{ display:flex; align-items:center; gap:6px; margin-bottom:7px; }
.ep-sec-top i.bi{ color:#8C1D40; font-size:13px; flex:none; }
.ep-sec-label{ font-size:11.5px; font-weight:700; color:#3a2f22; flex:1; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
.ep-sec-count{ margin-left:auto; font-size:11.5px; font-weight:800; color:#8C1D40; white-space:nowrap; }
.ep-sec-slash{ opacity:.45; margin:0 1px; font-weight:600; }
.ep-sec-check{ color:#2f9e5b; margin-left:3px; font-size:12px; }
.ep-sec-track{ height:6px; background:#ece1cd; border-radius:5px; overflow:hidden; }
.ep-sec-fill{ height:100%; border-radius:5px; background:linear-gradient(90deg,#FFD65A,#FFC627);
  transition:width .55s cubic-bezier(.4,0,.2,1); }
.ep-sec-done{ border-color:#FFC627; background:linear-gradient(180deg,#fff9e8,#fdf2d2); }
.ep-sec-none .ep-sec-count{ color:#9c8a72; }

@media (max-width:760px){
  .ep-wrap{ margin:0 8px 12px; padding:10px 12px 12px; }
  .ep-overall{ flex-basis:100%; order:3; }
  .ep-toggle{ order:2; }
  .ep-sec{ flex-basis:100%; }
}