:root{
  --ink: #111827;
  --ink-2: #0b1220;
  --soft: #f6f7fb;
  --panel: rgba(255,255,255,.92);
  --panelBorder: rgba(17,24,39,.10);
  --shadow: 0 22px 56px rgba(17,24,39,.32);
  --radius: 18px;

  /* Illinois / NWL+ brand */
  --il-orange: #FF5F05;
  --il-orange-2: #d94e00;
  --il-blue: #13294B;
  --il-blue-2: #0d1f38;

  /* Topbar height — shared by map shell and Bootstrap navbar override */
  --topbar-h: 68px;
}

.bg-soft { background: var(--soft); }
.bg-ink { background: linear-gradient(135deg, var(--il-blue), var(--il-blue-2)); }
.text-ink { color: var(--ink); }

.brand-dot{
  display:inline-block;
  width:10px;height:10px;border-radius:999px;
  background: radial-gradient(circle at 30% 30%, #ff8c4a, var(--il-orange));
  box-shadow: 0 0 0 4px rgba(255,95,5,.20);
  vertical-align: middle;
}

/* Illinois orange CTA button */
.btn-illinois{
  background-color: var(--il-orange);
  border-color: var(--il-orange);
  color: #fff;
}
.btn-illinois:hover, .btn-illinois:focus{
  background-color: var(--il-orange-2);
  border-color: var(--il-orange-2);
  color: #fff;
}
.btn-illinois:focus-visible{
  outline: 3px solid rgba(255,95,5,.40);
  outline-offset: 2px;
}

/* Landing page hero — dark photo background, two-column split */
.site-hero{
  position: relative;
  overflow: hidden;
  background-color: #0d1f38;
  background-image:
    linear-gradient(145deg, rgba(10,24,50,.58) 0%, rgba(15,34,64,.55) 55%, rgba(19,41,75,.52) 100%),
    url('../assets/hero-bg.jpg');
  background-size: cover;
  background-position: center top;
}

.site-hero::before{
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../assets/bg-topo.svg');
  background-repeat: repeat;
  background-size: 400px 200px;
  opacity: .08;
  pointer-events: none;
}

/* Large logo mark used in the hero section — stretches to match text column height */
.hero-logo-mark{
  flex-shrink: 0;
  width: auto;
  height: 100%;
  max-height: 200px;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.55));
}

/* Right panel of the hero split — subtle left border on large screens */
@media (min-width: 992px){
  .hero-right-panel{
    border-left: 1px solid rgba(255,255,255,.18);
    padding-left: 2.5rem;
  }
}

/* Full-width dark header band for hub pages (maps, scenarios, about) */
.page-header-band{
  position: relative;
  overflow: hidden;
  background-color: #0d1f38;
  background-image:
    linear-gradient(135deg, rgba(10,24,50,.70) 0%, rgba(15,34,64,.65) 60%, rgba(19,41,75,.62) 100%),
    url('../assets/hero-bg.jpg');
  background-size: cover;
  background-position: center top;
}

.page-header-band::before{
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../assets/bg-topo.svg');
  background-repeat: repeat;
  background-size: 400px 200px;
  opacity: .08;
  pointer-events: none;
}

.nwl-eyebrow{
  color: var(--il-orange);
  font-size: .75rem;
  letter-spacing: .10em;
}

.nwl-icon-color{ color: var(--il-orange); }

/* Navbar logo */
.nav-logo{
  width: 46px;
  height: 46px;
  flex-shrink: 0;
}

/* Match Bootstrap navbar height to --topbar-h */
.navbar{
  min-height: var(--topbar-h);
  --bs-navbar-padding-y: 0;
}

/* Illinois outline button (for secondary CTAs) */
.btn-outline-il{
  color: var(--il-orange);
  border-color: var(--il-orange);
  background: transparent;
}
.btn-outline-il:hover, .btn-outline-il:focus{
  background: var(--il-orange);
  border-color: var(--il-orange);
  color: #fff;
}

/* Welcome page hub cards */
.hub-card{ border: 1px solid rgba(19,41,75,.10); transition: box-shadow .15s ease, transform .15s ease; }
.hub-card:hover{ box-shadow: 0 16px 48px rgba(19,41,75,.14) !important; transform: translateY(-2px); }

.hub-card__icon{
  width: 52px; height: 52px;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,95,5,.10);
  color: var(--il-orange);
}
.hub-card__icon--scenarios{
  background: rgba(19,41,75,.08);
  color: var(--il-blue);
}

/* Scenario shell — badge variants */
.scenario-badge{
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .74rem; font-weight: 600;
  padding: 3px 11px; border-radius: 999px;
}
.scenario-badge--baseline  { background: rgba(19,41,75,.10);   color: var(--il-blue); }
.scenario-badge--moderate  { background: rgba(255,95,5,.12);   color: var(--il-orange-2); }
.scenario-badge--ambitious { background: rgba(34,197,94,.12);  color: #15803d; }

/* Scenario metric cards -- reused on scenarios.html's preset cards (grid
   wrapper below) and available for any future left-panel use */
.scenario-card-metrics{
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin-bottom: 14px;
}
.scenario-metric-card{
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(17,24,39,.08);
  border-radius: 12px; padding: 9px 12px;
}
.scenario-metric-icon{
  width: 32px; height: 32px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(19,41,75,.08); color: var(--il-blue);
  flex: 0 0 auto;
}
.scenario-metric-value{
  font-size: 1.10rem; font-weight: 700;
  color: var(--il-blue); line-height: 1.1;
}
.scenario-metric-unit{
  font-size: .68rem; color: rgba(17,24,39,.55);
  font-weight: 400;
}
.scenario-metric-label{
  font-size: .74rem; color: rgba(17,24,39,.60);
}

.glass{
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(255,255,255,.40);
  backdrop-filter: blur(10px);
}

/* Map shell layout */
.map-shell{
  height: 100vh;
  overflow: hidden;
  background: var(--soft);
}

.map-topbar{
  height: var(--topbar-h);
  position: relative;
  z-index: 1100;
}

.btn-ghost-light{
  color: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
}
.btn-ghost-light:hover{
  color: #fff;
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.30);
}

.app-version-badge{
  font-size: .72rem;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  color: rgba(255,255,255,.45);
  white-space: nowrap;
  cursor: default;
}

/* Saved scenarios dropdown (top bar) */
.saved-scenarios-menu{
  width: 440px;
  /* Capped, not replaced -- keeps the 440px sizing on anything wide enough
     for it (unchanged desktop behavior), but a fixed width alone overflows
     most phone viewports since dropdown-menu-end anchors it to the
     trigger button's right edge and grows leftward regardless of how much
     room is actually there. */
  max-width: calc(100vw - 24px);
}
/* Auto-suggested name: a real, editable, pre-selected value -- not a
   placeholder -- but visually distinguished so it reads as "here's a
   suggestion" rather than something the user already typed. Reverts to
   normal styling the instant they type (see savedScenariosMenu.js). */
#savedScenarioNameInput.is-suggested{
  font-style: italic;
  color: #6c757d;
}
.saved-scenarios-list{
  max-height: 260px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.saved-scenarios-row{
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  border-radius: 6px;
}
.saved-scenarios-row:hover{
  background: rgba(255,255,255,.08);
}
.saved-scenarios-row__name{
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: .82rem;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.saved-scenarios-row__name i{
  flex: 0 0 auto;
}
.saved-scenarios-row__meta{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.saved-scenarios-row__date{
  font-size: .68rem;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  color: rgba(255,255,255,.45);
}
.saved-scenarios-row__actions{
  display: flex;
  gap: 4px;
  flex: 0 0 auto;
}
.saved-scenarios-row__actions .btn{
  padding: 2px 7px;
}

/* Left nav */
.left-nav{
  position: absolute;
  top: var(--topbar-h);
  left: 0;
  bottom: 0;
  width: 360px;              /* wide, app-like */
  background: rgba(246,247,251,.70);
  border-right: 1px solid rgba(17,24,39,.08);
  backdrop-filter: blur(12px);
  z-index: 1050;
  overflow: hidden;
}

.left-nav__inner{
  height: 100%;
  overflow-y: auto;
  padding-bottom: 16px;
}

.left-nav__section{
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .72rem;
}

/* Control cards */
.control-card{
  border: 1px solid rgba(17,24,39,.10);
}

/* Layer tree */
.tree-axis-switch{
  margin-bottom: 10px;
}

.layer-tree{
  font-size: .88rem;
}

.tree-branch{
  margin-bottom: 2px;
}

.tree-branch > summary{
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  border-radius: 8px;
}

.tree-branch > summary:hover{
  background: rgba(17,24,39,.05);
}

.tree-branch > summary::-webkit-details-marker{
  display: none;
}

.tree-branch > summary::before{
  content: "\25B8";
  display: inline-block;
  transition: transform .12s ease;
  color: rgba(17,24,39,.45);
  width: 12px;
  flex: 0 0 auto;
}

.tree-branch[open] > summary::before{
  transform: rotate(90deg);
}

.tree-children{
  padding-left: 22px;
}

.tree-leaf{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 4px;
}

/* Branch rows carry a 12px arrow (via summary::before) before their
   checkbox; leaves don't, so without this they sit ~20px further left than
   a branch at the same depth -- a branch then visually lines up with its
   own children one level down, and a branch nested a level deep reads as
   though it's two levels deep. This invisible placeholder reserves the same
   arrow-width-plus-gap slot so every row's checkbox/label starts at the same
   x-offset for a given depth, and only .tree-children's per-level padding
   changes that offset. */
.tree-leaf::before{
  content: "";
  display: inline-block;
  width: 12px;
  flex: 0 0 auto;
}

.tree-leaf label,
.tree-branch > summary label,
.tree-branch > summary span{
  cursor: pointer;
}

/* Tri-state -- indeterminate is set via the JS .indeterminate property */
input[type="checkbox"]:indeterminate{
  accent-color: rgba(59,130,246,.55);
}

.tree-toolbar{
  margin-top: 10px;
}

.legend-item--continuous .legend-swatch{
  border-radius: 50%;   /* round swatch distinguishes continuous (color=topic) from classified (square) legend rows */
}

/* Content nav buttons */
.nav-card-btn{
  display:flex;
  align-items:center;
  gap: 12px;
  width: 100%;
  text-align: left;
  border: 1px solid rgba(17,24,39,.10);
  background: rgba(255,255,255,.75);
  border-radius: 16px;
  padding: 12px 12px;
  box-shadow: 0 10px 26px rgba(17,24,39,.08);
  transition: transform .08s ease, box-shadow .08s ease, border-color .08s ease;
}

.nav-card-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(17,24,39,.12);
  border-color: rgba(17,24,39,.18);
}

.nav-card-btn:focus-visible{
  outline: 3px solid rgba(59,130,246,.35);
  outline-offset: 2px;
}

.nav-card-btn.active{
  border-color: rgba(59,130,246,.45);
  box-shadow: 0 14px 34px rgba(59,130,246,.15);
  background: rgba(239,246,255,.85);
}

.nav-card-btn .nav-ic{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(17,24,39,.06);
  color: rgba(17,24,39,.75);
  flex: 0 0 auto;
}

.nav-card-btn .nav-label{
  font-weight: 600;
  color: var(--ink);
}
.nav-card-btn .nav-sub{
  font-size: .82rem;
  color: rgba(17,24,39,.62);
}

/* Map */
.map-root{
  position: absolute;
  top: var(--topbar-h);
  left: 360px;
  right: 0;
  bottom: 0;
}

.map-canvas{
  width: 100%;
  height: 100%;
}

/* Overlay */
.overlay-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(17,24,39,.35);
  z-index: 1200;
}

.overlay-panel{
  position: absolute;
  top: 18px;
  left: 18px;
  max-height: calc(100% - 36px);
  width: min(920px, calc(100% - 36px));
  background: var(--panel);
  border: 1px solid var(--panelBorder);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  z-index: 1250;
  display: flex;
  flex-direction: column;
}

.overlay-panel__header{
  padding: 14px 14px;
  border-bottom: 1px solid rgba(17,24,39,.08);
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
}

.overlay-icon{
  width: 34px; height: 34px;
  border-radius: 12px;
  background: rgba(59,130,246,.12);
  color: rgba(37,99,235,.95);
  display:flex; align-items:center; justify-content:center;
}

.overlay-panel__body{
  flex: 1;
  min-height: 0;
  padding: 16px;
  overflow: auto;
}

/* Help panel (rendered into the overlay panel body via ui/helpPanel.js) */
.help-panel{
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.help-panel__nav{
  flex: 0 0 200px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: sticky;
  top: 0;
}
.help-panel__nav-item{
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  border: none;
  background: transparent;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: .85rem;
  color: var(--muted, #6b7280);
}
.help-panel__nav-item:hover{
  background: rgba(17,24,39,.05);
}
.help-panel__nav-item.active{
  background: rgba(59,130,246,.12);
  color: rgba(37,99,235,.95);
  font-weight: 600;
}
.help-panel__nav-item i{
  flex: 0 0 auto;
  font-size: 1rem;
}
.help-panel__content{
  flex: 1;
  min-width: 0;
}
.help-deflist dt{
  font-weight: 600;
  color: var(--ink, #111827);
  margin-top: 12px;
}
.help-deflist dt:first-child{
  margin-top: 0;
}
.help-deflist dd{
  color: var(--muted, #6b7280);
  margin-bottom: 0;
}
.help-swatch{
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  margin: 0 2px -1px 0;
}
.help-swatch--green{ background: rgb(37,177,89); }
.help-swatch--red{ background: rgb(208,37,37); }
.help-swatch--purple{ background: rgb(115,46,184); }
.help-swatch--gold{ background: rgb(214,168,31); }

.help-figure{
  margin: 14px 0 18px;
}
.help-screenshot{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  border: 1px solid var(--panelBorder);
  box-shadow: 0 6px 20px rgba(17,24,39,.12);
}
.help-figure__caption{
  font-size: .78rem;
  color: var(--muted, #6b7280);
  margin-top: 6px;
  text-align: center;
}

@media (max-width: 640px){
  .help-panel{
    flex-direction: column;
  }
  .help-panel__nav{
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
  }
}

/* Utility */
.hidden{ display:none !important; }

/* Legend */
.legend-item{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.60);
  border: 1px solid rgba(17,24,39,.08);
  margin-bottom: 8px;
}
.legend-swatch{
  width: 14px; height: 14px;
  border-radius: 4px;
  border: 1px solid rgba(17,24,39,.18);
  margin-top: 3px;
  flex: 0 0 auto;
}
.legend-label{
  font-weight: 600;
  color: var(--ink);
}
.legend-desc{
  font-size: .82rem;
  color: rgba(17,24,39,.65);
}
.legend-group-title{
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgba(17,24,39,.45);

  margin: 10px 10px 4px;
}

/* Floating legend control — lower-right corner of the map canvas */
.map-legend-control{
  position: absolute;
  bottom: 28px;
  right: 12px;
  z-index: 900;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(6px);
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: 0 2px 16px rgba(0,0,0,.20);
  max-width: 220px;
  min-width: 110px;
  pointer-events: auto;
  max-height: calc(100vh - var(--topbar-h) - 60px);
  display: flex;
  flex-direction: column;
}
.map-legend-heading{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(17,24,39,.45);
  margin-bottom: 6px;
  flex: 0 0 auto;
}
/* Hidden on desktop -- the legend is always expanded there, no toggle
   needed. Shown and made functional only under the mobile breakpoint
   below, where the legend defaults to collapsed instead of eating a large
   share of a narrow map viewport. */
.map-legend-toggle{
  display: none;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  flex: 0 0 auto;
}
#legend{
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}
/* Compact overrides for legend items inside the floating control */
.map-legend-control .legend-item{
  padding: 2px 0;
  border: none;
  background: transparent;
  margin-bottom: 3px;
  gap: 7px;
  align-items: center;
}
.map-legend-control .legend-swatch{
  width: 11px;
  height: 11px;
  margin-top: 0;
}
.map-legend-control .legend-label{
  font-size: .80rem;
  font-weight: 500;
}
.map-legend-control .legend-desc{
  display: none;
}
.map-legend-control .legend-group-title{
  margin: 6px 0 3px;
  font-size: .68rem;
}

/* Floating research/content button — lower-left corner of the map canvas */
.map-research-control{
  position: absolute;
  bottom: 28px;
  left: 12px;
  z-index: 900;
  pointer-events: none; /* only the fab/panel themselves should catch clicks */
}
.map-research-control > *{
  pointer-events: auto;
}
.research-fab{
  display: flex;
  align-items: center;
  gap: 8px;
  border: none;
  border-radius: 999px;
  padding: 10px 16px 10px 14px;
  background: var(--il-orange);
  color: #fff;
  font-weight: 600;
  font-size: .88rem;
  box-shadow: 0 6px 20px rgba(255,95,5,.35);
  transition: transform .08s ease, box-shadow .08s ease, background .08s ease;
}
.research-fab:hover{
  background: var(--il-orange-2);
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(255,95,5,.42);
}
.research-fab:focus-visible{
  outline: 3px solid rgba(255,95,5,.35);
  outline-offset: 2px;
}
.research-fab i{
  font-size: 1.05rem;
}
.research-panel{
  position: absolute;
  bottom: calc(100% + 10px);
  left: 0;
  width: min(320px, calc(100vw - 40px));
  max-height: calc(100vh - var(--topbar-h) - 90px);
  overflow-y: auto;
  background: var(--panel);
  backdrop-filter: blur(6px);
  border: 1px solid var(--panelBorder);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.research-panel.hidden{
  display: none;
}
.research-item-btn{
  padding: 10px;
}
.research-empty{
  padding: 4px 2px;
}
.research-group{
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.research-group + .research-group{
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid rgba(17,24,39,.08);
}
.research-group-title{
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(17,24,39,.45);
}

/* Scenario trigger buttons (left nav) */
.scenario-trigger-btn{
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  border: 1px solid rgba(17,24,39,.10);
  background: rgba(255,255,255,.75);
  border-radius: 12px;
  padding: 8px 10px;
  font-size: .88rem;
  color: var(--ink);
  transition: border-color .08s ease, background .08s ease;
}
.scenario-trigger-btn:hover{
  border-color: rgba(255,95,5,.35);
  background: rgba(255,95,5,.06);
}
.scenario-trigger-badge{
  background: var(--il-orange) !important;
}

/* Scenario panel -- custom floating panel (not a Bootstrap modal), map
   stays visible/interactive behind it. Wider than the nav column,
   overlapping into the map edge, per design. */
.scenario-modal{
  position: fixed;
  top: calc(var(--topbar-h) + 16px);
  left: 16px;
  width: min(440px, calc(100vw - 32px));
  max-height: calc(100vh - var(--topbar-h) - 32px);
  background: var(--panel);
  backdrop-filter: blur(8px);
  border: 1px solid var(--panelBorder);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  z-index: 1300;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.scenario-modal.hidden{
  display: none;
}
.scenario-modal__header{
  padding: 14px 14px;
  border-bottom: 1px solid rgba(17,24,39,.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
}
.scenario-modal__body{
  padding: 14px;
  overflow-y: auto;
}

/* Region/county selector (js/ui/regionSelector.js) -- content inside the
   same .scenario-modal panel chrome above, not a new panel shape. */
.region-selector__list{
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid rgba(17,24,39,.08);
  border-radius: 10px;
  padding: 4px;
}
.region-county-row{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 8px;
  font-size: .86rem;
  color: var(--ink);
  cursor: pointer;
}
.region-county-row:hover{
  background: rgba(255,95,5,.06);
}
.region-county-row input[type="checkbox"]{
  flex: 0 0 auto;
}

.scenario-placeholder-note{
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .78rem;
  color: #92620a;
  background: rgba(255,193,7,.15);
  border: 1px solid rgba(255,193,7,.35);
  border-radius: 10px;
  padding: 6px 10px;
  margin-bottom: 12px;
}
.scenario-placeholder-note--banner{
  margin-bottom: 10px;
}

/* Feedback modal (js/ui/feedbackMenu.js) -- embeds a Google Form in an
   iframe rather than opening it in a new tab. Deliberately its own
   self-contained `position: fixed` pair rather than reusing .overlay-panel/
   .overlay-backdrop above: those are positioned `absolute` against a
   map.html-specific ancestor, and this module is shared by the outer site
   pages too (index/about/scenarios), which have no such ancestor. */
.feedback-modal-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(17,24,39,.45);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.feedback-modal-backdrop.hidden{
  display: none;
}
.feedback-modal{
  width: min(760px, 100%);
  height: min(720px, 90vh);
  background: var(--panel);
  border: 1px solid var(--panelBorder);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.feedback-modal__header{
  padding: 14px 16px;
  border-bottom: 1px solid rgba(17,24,39,.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
}
.feedback-modal__header h2{
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
}
.feedback-modal__body{
  flex: 1;
  min-height: 0;
}
.feedback-modal__body iframe{
  width: 100%;
  height: 100%;
  border: 0;
}

.scenario-levers{
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 16px;
}
.scenario-lever__label-row{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 4px;
}
.scenario-lever__label-row label{
  font-weight: 600;
  font-size: .88rem;
  color: var(--ink);
}
.scenario-lever__value{
  font-weight: 700;
  color: var(--il-orange);
  font-size: .88rem;
}
.scenario-lever__unit{
  margin-top: 2px;
}
.scenario-lever__rate{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(17,24,39,.12);
}
.scenario-lever__rate .scenario-lever__label-row label{
  font-weight: 500;
  font-size: .8rem;
  color: rgba(17,24,39,.6);
}
.scenario-lever__rate .scenario-lever__value{
  font-size: .8rem;
  color: rgba(17,24,39,.6);
  font-weight: 600;
}

.scenario-lever-group-total{
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 6px;
  font-size: .78rem;
  color: rgba(17,24,39,.65);
  background: rgba(17,24,39,.04);
  border: 1px solid rgba(17,24,39,.08);
  border-radius: 8px;
  padding: 6px 10px;
  margin-top: -4px;
}
.scenario-lever-group-total strong{
  color: var(--il-orange);
  font-size: .88rem;
}
.scenario-lever-group-total--full{
  color: #92620a;
  background: rgba(255,193,7,.15);
  border-color: rgba(255,193,7,.35);
}
.scenario-lever-group-total--full strong{
  color: #92620a;
}

.scenario-rate-track-wrap{
  position: relative;
}
.scenario-rate-source-band{
  position: absolute;
  top: 50%;
  height: 6px;
  margin-top: -3px;
  border-radius: 3px;
  background: rgba(255,95,5,.30);
  border: 1px solid rgba(255,95,5,.65);
  pointer-events: none;
}
.scenario-rate-source-picker{
  margin-top: 8px;
}
.scenario-rate-source-picker select{
  margin-top: 2px;
  font-size: .8rem;
}
.scenario-rate-source-info{
  margin-top: 6px;
}
.scenario-rate-source-info:empty{
  display: none;
}
.scenario-rate-source-range{
  font-size: .8rem;
  color: rgba(17,24,39,.75);
}

.scenario-totals{
  border-top: 1px solid rgba(17,24,39,.08);
  padding-top: 12px;
}
.scenario-totals-title{
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(17,24,39,.45);
  margin-bottom: 8px;
}
.scenario-total-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 0;
}
.scenario-total-label{
  font-size: .82rem;
  color: rgba(17,24,39,.75);
  flex: 1 1 auto;
}
.scenario-total-value{
  font-weight: 600;
  font-size: .85rem;
  color: var(--ink);
  white-space: nowrap;
}
.scenario-delta{
  font-size: .74rem;
  color: rgba(17,24,39,.45);
  white-space: nowrap;
  min-width: 64px;
  text-align: right;
}
.scenario-delta--up{
  color: #1a8a4a;
  font-weight: 600;
}
.scenario-delta--none{
  color: rgba(17,24,39,.35);
}

/* Statewide scenario banner -- top-center of the map, collapses to a pill */
.scenario-banner-root{
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  /* Above .inspector-tool-root's z-index (950) on purpose -- when expanded
     and wide, this panel is allowed to overlap the Inspect button rather
     than being squeezed/wrapped to avoid it (the two are unlikely to be
     needed at the same moment, and the collapsed pill state doesn't reach
     that corner anyway), so it should sit on top when they do overlap. See
     scenarioBanner.js's INSPECT_BUTTON_CLEARANCE for how much of the
     button is kept deliberately uncovered. */
  z-index: 960;
  pointer-events: none;
}
.scenario-banner-root > *{
  pointer-events: auto;
}
.scenario-banner-toggle{
  display: flex;
  align-items: center;
  gap: 8px;
  border: none;
  border-radius: 999px;
  padding: 9px 16px;
  background: var(--il-blue);
  color: #fff;
  font-weight: 600;
  font-size: .85rem;
  box-shadow: 0 6px 20px rgba(19,41,75,.35);
  transition: transform .08s ease, box-shadow .08s ease;
}
.scenario-banner-toggle:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(19,41,75,.42);
}
.scenario-banner-toggle.hidden{
  display: none;
}
.scenario-banner-panel{
  /* Set from JS via scenarioBanner.js's ResizeObserver on #mapRoot (the
     panel's actual containing block) -- see that file for why a plain
     viewport-width value doesn't work here. Fallback covers the brief
     window before the observer's first callback fires. */
  width: min(var(--scenario-banner-max-width, 1000px), calc(100vw - 32px));
  background: var(--panel);
  backdrop-filter: blur(8px);
  border: 1px solid var(--panelBorder);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 16px;
}
.scenario-banner-panel.hidden{
  display: none;
}
.scenario-banner-panel__header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.scenario-banner-panel__footer{
  margin-top: 8px;
}
.scenario-banner-row{
  display: flex;
  align-items: stretch;
  gap: 18px;
}
.scenario-banner-main{
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.scenario-gauges{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 20px;
  row-gap: 14px;
}
.scenario-banner-divider{
  width: 1px;
  background: rgba(17,24,39,.10);
  flex: 0 0 auto;
}

/* Narrower map areas (tablet down to phone): 4 gauges -> 2x2 -> single
   column, and at the narrowest tier the whole row (gauges+footer vs. the
   net-zero dial) stacks vertically instead of squeezing a now-tall gauge
   stack next to the dial. Driven by JS-measured tier classes on the root
   (see scenarioBanner.js), not @media -- the panel's containing block is
   #mapRoot, not the viewport, so a viewport-width media query mistimes
   these exactly when the left nav is visible (see that file's comment). */
.scenario-banner-root--medium .scenario-gauges{
  grid-template-columns: repeat(2, 1fr);
}
.scenario-banner-root--narrow .scenario-gauges{
  grid-template-columns: 1fr;
}
.scenario-banner-root--narrow .scenario-banner-row{
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}
.scenario-banner-root--narrow .scenario-banner-divider{
  width: auto;
  height: 1px;
}
.scenario-banner-root--narrow .scenario-netzero{
  flex-direction: row;
  gap: 10px;
  align-self: center;
}
.scenario-banner-root--narrow .scenario-netzero__label{
  margin-bottom: 0;
}
/* Net-zero progress dial -- lives outside the linear-gauges grid entirely
   (see .scenario-banner-main), stretched to the FULL combined height of the
   gauge row + footer line beside it, not just the gauge row alone -- that's
   what gives it real room to be legible instead of being squeezed into the
   ~60px a single gauge row allows. */
.scenario-netzero{
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.scenario-netzero__label{
  font-size: .68rem;
  font-weight: 600;
  color: rgba(17,24,39,.6);
  margin-bottom: 4px;
  white-space: nowrap;
}
.scenario-netzero__dial{
  position: relative;
  width: 78px;
  height: 78px;
}
.scenario-netzero__dial svg{
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.scenario-netzero__track{
  fill: none;
  stroke: rgba(17,24,39,.08);
  stroke-width: 4;
}
.scenario-netzero__fill{
  fill: none;
  stroke: var(--il-orange);
  stroke-width: 4;
  stroke-linecap: round;
  transition: stroke-dashoffset .15s ease;
}
.scenario-netzero__readout{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.15;
}
.scenario-netzero__pct{
  font-weight: 700;
  font-size: .95rem;
  color: var(--ink);
}
.scenario-netzero__net{
  font-size: .68rem;
  font-weight: 600;
  color: rgba(17,24,39,.5);
  white-space: nowrap;
}
.scenario-gauge{
  min-width: 0;
}
.scenario-gauge__label{
  font-size: .74rem;
  font-weight: 600;
  color: rgba(17,24,39,.6);
  margin-bottom: 6px;
}
.scenario-gauge__track{
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: rgba(17,24,39,.08);
  overflow: hidden;
  margin-bottom: 6px;
}
.scenario-gauge__fill{
  position: absolute;
  inset: 0;
  width: 0;
  background: linear-gradient(90deg, var(--il-orange), #ffb066);
  border-radius: 999px;
  transition: width .15s ease;
}
.scenario-gauge__baseline-marker{
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 2px;
  background: rgba(17,24,39,.55);
}
.scenario-gauge__value-row{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
}
.scenario-gauge__value{
  font-weight: 700;
  font-size: .85rem;
  color: var(--ink);
}
.scenario-gauge__delta{
  font-size: .76rem;
  color: rgba(17,24,39,.45);
}

/* Category contribution breakdown -- same visual language as the gauges
   above (one accent gradient) rather than a new per-category palette,
   since this codebase has no existing categorical color set (only
   per-topic colors, e.g. TOPIC_COLORS in data/layers.js). */
.scenario-category-bars{
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.scenario-category-bars__heading{
  font-size: .74rem;
  font-weight: 600;
  color: rgba(17,24,39,.6);
}
.scenario-category-bar{
  display: grid;
  grid-template-columns: 110px 1fr auto;
  align-items: center;
  gap: 8px;
}
.scenario-category-bar__label{
  font-size: .78rem;
  font-weight: 600;
  color: var(--ink);
}
.scenario-category-bar__track{
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: rgba(17,24,39,.08);
  overflow: hidden;
}
.scenario-category-bar__fill{
  position: absolute;
  inset: 0;
  width: 0;
  background: linear-gradient(90deg, var(--il-orange), #ffb066);
  border-radius: 999px;
  transition: width .15s ease;
}
.scenario-category-bar__value{
  font-size: .76rem;
  color: rgba(17,24,39,.65);
  white-space: nowrap;
}

/* Point inspector — top-right corner of the map */
.inspector-tool-root{
  position: absolute;
  top: 16px;
  right: 12px;
  z-index: 950;
}
.inspector-fab{
  display: flex;
  align-items: center;
  gap: 8px;
  border: none;
  border-radius: 999px;
  padding: 9px 16px;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(6px);
  color: var(--ink);
  font-weight: 600;
  font-size: .85rem;
  box-shadow: 0 2px 16px rgba(0,0,0,.20);
  border: 1px solid var(--panelBorder);
  transition: transform .08s ease, box-shadow .08s ease, background .08s ease, color .08s ease;
}
.inspector-fab:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
.inspector-fab.active{
  background: var(--il-orange);
  border-color: var(--il-orange);
  color: #fff;
}
.inspector-popup .leaflet-popup-content,
.inspector-loading, .inspector-empty{
  min-width: 200px;
}
/* Cursor-following live readout while inspect mode is on. Not an
   L.popup() -- avoids its open/close animation firing on every mousemove.
   pointer-events:none so it can never itself grab the cursor it's
   following, regardless of how the map underneath is being interacted with. */
.inspector-hover-tooltip{
  display: none;
  position: fixed;
  z-index: 1000;
  pointer-events: none;
  max-width: 280px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(17,24,39,.18);
  padding: 10px 12px;
}
.inspector-loading, .inspector-empty{
  padding: 4px 2px;
  color: rgba(17,24,39,.6);
  font-size: .85rem;
}
.inspector-row{
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(17,24,39,.08);
}
.inspector-row:last-child{
  border-bottom: none;
}
.inspector-row__swatch{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-top: 4px;
  flex: 0 0 auto;
}
/* Rounded square instead of round -- matches the main legend's classified
   (square) vs. continuous (round) swatch convention, so an NLCD row here
   reads as the same "kind" of layer it does in the legend panel. */
.inspector-row__swatch--classified{
  border-radius: 3px;
}
.inspector-row__label{
  font-size: .78rem;
  font-weight: 600;
  color: rgba(17,24,39,.65);
}
.inspector-row__value{
  font-size: .88rem;
  color: var(--ink);
}

/* Onboarding tour */
.onboarding-modal-content{
  padding: 8px 4px 4px;
  box-shadow: var(--shadow);
}
.onboarding-icon{
  width: 64px;
  height: 64px;
  margin: 4px auto 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,95,5,.10);
  color: var(--il-orange);
  font-size: 1.8rem;
}
.onboarding-dots{
  display: flex;
  gap: 6px;
  align-items: center;
}
.onboarding-dot{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(17,24,39,.18);
  transition: background .12s ease, transform .12s ease;
}
.onboarding-dot.active{
  background: var(--il-orange);
  transform: scale(1.2);
}

/* Mobile: nav becomes a drawer */
@media (max-width: 991.98px){
  .left-nav{
    transform: translateX(-105%);
    transition: transform .18s ease;
    width: min(92vw, 380px);
  }
  .left-nav.open{
    transform: translateX(0);
  }
  .map-root{
    left: 0;
  }
  .overlay-panel{
    top: 12px; left: 12px;
    max-height: calc(100% - 24px);
    width: calc(100% - 24px);
  }
}

/* Legend: collapsible below this width -- at 220px max-width, the legend
   otherwise eats more than half of a phone-width map viewport. Desktop
   keeps the always-expanded behavior above (no toggle shown at all).
   Matches scenarioBanner.js's own MEDIUM_BREAKPOINT (768) for "the map
   area is getting tight" -- this is a narrower control than that panel, so
   it isn't a problem down at tablet widths (mobile nav is already a
   drawer by then, giving the map full width), only phone widths. */
@media (max-width: 768px){
  .map-legend-toggle{
    display: inline-flex;
  }
  .map-legend-control{
    max-width: 170px;
    /* The base max-height (further up this file) only accounts for the
       topbar and its own bottom offset -- nothing reserves room for
       .inspector-tool-root, which sits at top:16px/~40px tall in the same
       corner. Since the legend is bottom-anchored and grows upward, a tall
       legend on a short phone viewport was rolling up underneath the
       Inspect button and hiding its own top entries even with scrolling
       (the button sits above/on top of it, z-index 950 vs. the legend's
       900). The extra 68px reserved here (button height + top offset +
       a small gap) keeps the legend's top edge below the button's bottom
       edge at any content length -- it scrolls internally instead. */
    max-height: calc(100vh - var(--topbar-h) - 60px - 68px);
  }
  .map-legend-control--collapsed #legend{
    display: none;
  }
  .map-legend-control--collapsed .map-legend-heading{
    margin-bottom: 0;
  }
}