:root {
  /* THE MUTED PROFESSIONAL RESILIENCY PALETTE */
  --rz-high: #87b6a7;           /* Muted Sage Green */
  --rz-mod: #f7d08a;            /* Muted Golden/Peach */
  --rz-low: #f79f79;            /* Muted Coral/Orange */
  --rz-accent: #f07167;         /* General Accent (Muted Salmon/Red) */
  --rz-bar: #c2d8b9;            /* Muted Pale Green for Bar Charts */
  
  /* Core Neutrals */
  --rz-black: #383838;
  --rz-dark-grey: #4c4c4c;
  --rz-light-grey: #ebebeb;
  --rz-white: #ffffff;

  /* Status colors (used by search feedback messages) */
  --rz-red: #d9534f;
  --rz-green: #4a9d6e;

  --sidebar-w: 450px;
  --trans-speed: 0.3s;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Inter', sans-serif;
  height: 100vh;
  overflow: hidden;
  color: var(--rz-dark-grey);
  background: #e5e5e5;
}

/* Accessible visually-hidden helper for screen-reader-only labels */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================
   APP SHELL: full-width header + subheader + main
========================================== */
#app-shell {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

#app-header {
  background: var(--rz-black);
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 20px;
  border-bottom: 2px solid var(--rz-accent);
  flex-shrink: 0;
  z-index: 1100;
}

.app-brand {
  display: flex;
  align-items: center;
  font-family: 'Inter', sans-serif;
  min-width: 0;
}
.app-title {
  color: white;
  font-weight: 400;
  opacity: 0.85;
  font-size: 1.25rem;
  letter-spacing: 0.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-powered { font-size: 0.8rem; font-weight: 400; opacity: 0.6; margin: 0 8px; white-space: nowrap; }
.app-logo-img { height: 22px; width: auto; display: block; }

.app-header-actions { display: flex; gap: 8px; align-items: center; }

#auth-logout-btn,
#auth-change-password-btn {
  background: white;
  color: #333;
  border: none;
  height: 30px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  padding: 0 12px;
  transition: background 0.2s;
}
#auth-logout-btn:hover,
#auth-change-password-btn:hover { background: #f0f0f0; }

/* Subheader: prominent address search bar */
#app-subheader {
  background: var(--rz-white);
  border-bottom: 1px solid #ddd;
  padding: 12px 20px;
  flex-shrink: 0;
  z-index: 1050;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
#addr-search-form {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  max-width: 1000px;
}
.search-input-wrap {
  position: relative;
  flex: 1 1 340px;
  min-width: 180px;
}
.search-input-wrap .fa-magnifying-glass {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--rz-accent);
  pointer-events: none;
}
#addrInput {
  width: 100%;
  height: 46px;
  padding: 0 14px 0 40px;
  border: 2px solid #ddd;
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  background: #fafafa;
  transition: border-color 0.2s, background 0.2s;
}
#addrInput:focus { border-color: var(--rz-accent); background: #fff; }
/* ID-scoped so the generic .rz-btn { width:100% } rule can't stretch these */
#app-subheader .subheader-btn {
  width: auto;
  height: 46px;
  padding: 0 18px;
  white-space: nowrap;
  flex: 0 0 auto;
}
#app-subheader .subheader-btn.icon-btn { width: 46px; padding: 0; }
.subheader-btn.active-tool { background: var(--rz-green); }
.search-msg {
  font-size: 0.85rem;
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Fuzzy-match suggestions (communities & neighborhoods) */
.search-suggest {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.15);
  z-index: 1200;
  max-height: 320px;
  overflow-y: auto;
  padding: 6px;
}
.search-suggest[hidden] { display: none; }
.search-suggest-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: none;
  border: none;
  border-radius: 6px;
  padding: 10px 12px;
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  color: var(--rz-black);
  text-align: left;
  cursor: pointer;
}
.search-suggest-item:hover,
.search-suggest-item.selected { background: #f4f4f4; }
.search-suggest-item .suggest-icon { color: var(--rz-accent); width: 16px; text-align: center; flex-shrink: 0; }
.search-suggest-item .suggest-name { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-suggest-item .suggest-tag {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #999;
  background: #f0f0f0;
  padding: 2px 8px;
  border-radius: 10px;
  flex-shrink: 0;
}

#app-main {
  flex: 1;
  display: flex;
  overflow: hidden;
  position: relative;
}

/* Typography */
h1, h2, h3, h4, h5 { font-family: 'Inter', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
h2 { font-size: 1.5rem; margin-bottom: 10px; color: var(--rz-black); }
h3 { font-size: 1.1rem; color: var(--rz-accent); margin-bottom: 5px; }
p { line-height: 1.5; font-size: 0.95rem; margin-bottom: 15px; }

/* --- Sidebar --- */
#sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: var(--rz-white);
  height: 100%;
  box-shadow: 4px 0 15px rgba(0,0,0,0.05);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  transition: margin-left var(--trans-speed) ease, width var(--trans-speed) ease, flex-basis var(--trans-speed) ease;
  position: relative;
}

#sidebar.sidebar-wide {
  width: 50vw;
  flex-basis: 50vw;
}

#sidebar.collapsed { margin-left: calc(var(--sidebar-w) * -1); }
#sidebar.sidebar-wide.collapsed { margin-left: -50vw; }

/* Slim sidebar strip (logo/account actions now live in the full-width app header) */
.sb-header {
  padding: 10px 20px;
  background: #f4f4f4;
  color: var(--rz-dark-grey);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e0e0e0;
}
.sb-title {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #888;
}
.sb-header-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}
.sb-toggle {
  background: transparent; border: none; color: var(--rz-dark-grey); font-size: 1.1rem; cursor: pointer;
  transition: color 0.2s;
  width: 30px;
  height: 30px;
  border-radius: 6px;
}
.sb-toggle:hover, .sb-toggle:focus { color: var(--rz-accent); background: #fff; }
.sb-resize-toggle {
  border: 1px solid #d9d9d9;
  background: #fff;
  color: #666;
  border-radius: 999px;
  min-height: 30px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2px;
  transition: border-color 0.2s, color 0.2s, background 0.2s, transform 0.2s;
}
.sb-resize-toggle:hover,
.sb-resize-toggle:focus-visible {
  color: var(--rz-accent);
  border-color: var(--rz-accent);
  background: #fffafa;
  outline: none;
}
.sb-resize-toggle:active { transform: scale(0.97); }
#sidebar.sidebar-wide .sb-resize-toggle {
  color: var(--rz-accent);
  border-color: rgba(240,113,103,0.35);
  background: #fff7f6;
}

.sb-content { flex: 1; overflow-y: auto; background: #fafafa; }

/* Tools */
.tool-section { background: white; margin-bottom: 1px; border-bottom: 1px solid #eee; }
.tool-header {
  padding: 15px 20px; cursor: pointer; display: flex; justify-content: space-between; align-items: center;
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: 1rem; color: var(--rz-dark-grey);
}
.tool-header:hover { background: #f9f9f9; color: var(--rz-accent); }
.tool-body { padding: 0 20px 20px 20px; display: none; animation: fadeIn 0.3s; }
.tool-body.active { display: block; }

/* Dashboard Panels & Charts */
.info-panel { padding: 25px; }
.chart-container { background: white; padding: 15px; border-radius: 8px; border: 1px solid #eee; margin-bottom: 20px; }
.chart-title { font-size: 0.85rem; font-weight: 600; margin-bottom: 10px; text-align: center; color: #555; text-transform: uppercase; letter-spacing: 0.5px;}

.risk-summary { background: #fffdfc; padding: 15px; margin-bottom: 20px; border-radius: 0 4px 4px 0;}

/* Lists */
.risk-factors-list, .mitigation-list { list-style: none; padding: 0; margin-bottom: 20px; }
.risk-factors-list li, .mitigation-list li { margin-bottom: 8px; padding-left: 20px; position: relative; font-size: 0.9rem; color: #555; }
.risk-factors-list li::before { content: '!'; color: #888; font-weight: 800; font-size: 1rem; position: absolute; left: 0; top: 0; }
.mitigation-list li::before { content: '•'; color: var(--rz-accent); font-weight: bold; font-size: 1.2rem; position: absolute; left: 0; top: -3px; }

/* Neighborhood Accordion */
.nh-accordion { border: 1px solid #eee; margin-bottom: 5px; border-radius: 6px; background: white; overflow: hidden; }
.nh-acc-header {
    padding: 12px 15px; cursor: pointer; display: flex; justify-content: space-between; align-items: center;
    background: #fff; transition: background 0.2s; font-weight: 500; font-size: 0.95rem;
}
.nh-acc-header:hover { background: #f9f9f9; }
.nh-acc-body { display: none; padding: 15px; background: #fafafa; border-top: 1px solid #eee; font-size: 0.9rem; }
.nh-acc-body.open { display: block; }

/* UI Elements */
.rz-btn {
  background: var(--rz-dark-grey); color: white; border: none; padding: 10px 20px;
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: 0.9rem;
  cursor: pointer; width: 100%; border-radius: 6px; transition: all 0.2s; letter-spacing: 0.3px;
}
.rz-btn:hover { background: var(--rz-black); transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0, 0.1); }
.rz-btn.small-btn { padding: 8px 12px; font-size: 0.8rem; width: auto; display: inline-block;}
.rz-btn.secondary { background: #888; }
.rz-btn.secondary:hover { background: #666; color:white; }
.rz-btn:disabled { background: #ccc; cursor: not-allowed; box-shadow: none; color: #fff; transform: none; }

.rz-input { width: 100%; padding: 12px 10px; border: 1px solid #ddd; border-radius: 6px; margin-bottom: 10px; font-family: 'Inter', sans-serif; font-size: 0.9rem;}
.rz-input:focus { border-color: var(--rz-dark-grey); box-shadow: 0 0 0 2px rgba(76, 76, 76, 0.1); }

.layer-item { display: block; margin-bottom: 10px; font-size: 0.9rem; cursor: pointer; color: #444; }

/* Map & Overlays */
#map-wrapper { flex: 1; position: relative; min-width: 0; }
#map { height: 100%; width: 100%; }

#map-sidebar-toggle {
  position: absolute; top: 20px; left: 20px; z-index: 10;
  background: var(--rz-black); color: white; border: none;
  width: 40px; height: 40px; border-radius: 6px; cursor: pointer;
  display: none; box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}

/* ==========================================
   MAP TOOLS: Layers control + 3D Tilt buttons
========================================== */
#map-tools {
  position: absolute;
  top: 20px;
  right: 10px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.map-tool-btn {
  width: 40px; height: 40px;
  background: white;
  color: var(--rz-dark-grey);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.08);
  transition: background 0.2s, color 0.2s;
}
.map-tool-btn:hover, .map-tool-btn:focus { background: #f0f0f0; color: var(--rz-black); }
.map-tool-btn.active-tool,
.map-tool-btn[aria-pressed="true"],
.map-tool-btn[aria-expanded="true"] {
  background: var(--rz-black);
  color: white;
}
#layersPanel {
  position: absolute;
  top: 0;
  right: 48px;
  width: 240px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
  padding: 15px;
  border: 1px solid #eee;
}
#layersPanel[hidden] { display: none; }
.layers-panel-title {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #888;
  margin-bottom: 10px;
}

/* PEGMAN */
#pegman-ctrl {
    position: absolute; top: 180px; right: 10px; z-index: 50;
    width: 35px; height: 35px; background: white; border-radius: 6px;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.05); cursor: grab;
    display: flex; align-items: center; justify-content: center;
}
#pegman-icon { font-size: 1.2rem; color: #f39c12; }

/* POPUPS */
.mapboxgl-popup { max-width: 400px !important; }
/* Default Border is grey/accent, overridden dynamically for neighborhoods */
.rz-popup .mapboxgl-popup-content { border-left: 6px solid var(--rz-accent); width: 380px; padding: 0; overflow: hidden; border-radius: 8px; box-shadow: 0 10px 25px rgba(0,0,0,0.1);}
.popup-title { 
    font-family: 'Inter', sans-serif; font-size: 1.1rem; font-weight: 700; 
    text-transform: uppercase; text-align: center; padding: 15px 15px 5px 15px;
    color: var(--rz-black); letter-spacing: 0.5px;
}

/* Ring */
.css-ring-container { position: relative; width: 100px; height: 100px; margin: 10px auto; border-radius: 50%; background: #eee; display: flex; align-items: center; justify-content: center; }
.css-ring-inner { width: 80px; height: 80px; background: white; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 2; }

/* ==========================================
   NEIGHBORHOOD LABEL CHIPS & COMMUNITY LABEL
   HTML markers rendered by labels.js. The outer .nh-label-marker is
   positioned by Mapbox (inline transform), so all animation/transition
   lives on the inner elements.
========================================== */
/* Mapbox v3 writes inline opacity on the marker element every frame
   (terrain occlusion), so declutter-hiding must target the inner
   wrapper — never the .nh-label-marker element itself. */
.nh-label-marker > * {
    transition: opacity 0.25s ease, visibility 0s;
}

.nh-label-marker.nh-label-hidden {
    pointer-events: none;
}

.nh-label-marker.nh-label-hidden > * {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0s 0.25s;
}

@keyframes nhLabelIn {
    from { opacity: 0; transform: translateY(8px) scale(0.7); }
    to   { opacity: 1; transform: none; }
}

.nh-label-chip {
    display: flex;
    align-items: center;
    gap: 7px;
    /* Resting at 60% opacity so the map reads through; solidifies on hover
       (or when the polygon is clicked and the chip expands into the card).
       backdrop-filter keeps the text crisp over busy satellite imagery. */
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 999px;
    padding: 4px 13px 4px 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18), inset 0 -2px 0 var(--nh-risk, var(--rz-accent));
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease;
    animation: nhLabelIn 0.35s ease backwards;
}

.nh-label-chip:hover {
    background: #fff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.28), inset 0 -2px 0 var(--nh-risk, var(--rz-accent));
}

.nh-label-score {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: var(--nh-risk, var(--rz-accent));
    color: #fff;
    font-weight: 800;
    font-size: 0.73rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}

.nh-label-name {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--rz-black);
    white-space: nowrap;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Expanded detail card (same content as the legacy polygon popup) */
@keyframes nhCardIn {
    from { opacity: 0; transform: scale(0.65); }
    to   { opacity: 1; transform: none; }
}

.nh-label-card {
    display: none;
    position: relative;
    width: 250px;
    background: #fff;
    border-radius: 8px;
    border-left: 6px solid var(--nh-risk, var(--rz-accent));
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
    padding-bottom: 15px;
    text-align: center;
    font-family: 'Inter', sans-serif;
    transform-origin: center center;
}

.nh-label.expanded .nh-label-chip { display: none; }
.nh-label.expanded .nh-label-card {
    display: block;
    animation: nhCardIn 0.25s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.nh-label-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 50%;
    background: #f0f0f0;
    color: #666;
    cursor: pointer;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    z-index: 2;
}

.nh-label-close:hover {
    background: var(--rz-black);
    color: #fff;
}

.nh-label-card .popup-title { padding-right: 38px; padding-left: 38px; }

.nh-label-card-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 15px 0 15px;
    border-top: 1px solid #eee;
    background: #fafafa;
    margin-top: 5px;
    padding-bottom: 12px;
    margin-bottom: -15px;
    border-radius: 0 0 8px 8px;
}

/* Community title pill above the polygon cluster */
.rz-comm-label {
    display: flex;
    align-items: center;
    gap: 9px;
    /* Same resting 60% opacity + blur as the neighborhood chips */
    background: rgba(56, 56, 56, 0.6);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    color: #fff;
    padding: 8px 16px;
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), inset 0 -2px 0 var(--rz-accent);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease;
    animation: nhLabelIn 0.4s ease backwards;
}

.rz-comm-label:hover {
    background: var(--rz-black);
    transform: translateY(-2px);
    box-shadow: 0 7px 20px rgba(0, 0, 0, 0.4), inset 0 -2px 0 var(--rz-accent);
}

.rz-comm-label i { color: var(--rz-accent); }

.rz-comm-score {
    color: #fff;
    border-radius: 999px;
    padding: 2px 9px;
    font-size: 0.75rem;
    font-weight: 800;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}

/* Risk Class Text - Centered */
.risk-classification {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1.1rem;
    margin-top: 5px;
    text-align: center;
    width: 100%;
    display: block;
    letter-spacing: 0.5px;
}

/* ==========================================
   UPDATED PDF FLUID LAYOUT
========================================== */
.pdf-overlay { position: fixed; inset: 0; background: rgba(30,30,30,0.95); z-index: 3000; display: none; justify-content: center; overflow-y: auto; padding: 40px 0; }

.pdf-page {
    width: 816px !important; 
    min-height: 1056px !important;
    height: auto !important;       
    max-height: none !important;   
    background: white; 
    box-shadow: 0 0 40px rgba(0,0,0,0.3); 
    margin: 0 auto 40px auto;
    box-sizing: border-box;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    text-align: left;
    page-break-after: always;      
}

.pdf-header { background: white; color: black; padding: 30px 40px; display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 6px solid var(--rz-accent); flex-shrink: 0; }
.pdf-body { 
    padding: 40px 50px; 
    flex: 1; 
    overflow: visible;             
}
.pdf-footer { background: #f8f8f8; padding: 15px 50px; text-align: center; font-size: 0.8rem; color: #888; border-top: 1px solid #eaeaea; flex-shrink: 0; }
.pdf-close { position: fixed; top: 20px; right: 20px; background: var(--rz-black); color: white; border: none; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; font-size: 1.2rem; z-index: 3001; transition: transform 0.2s; }
.pdf-close:hover { transform: scale(1.05); }

/* Property Images */
.prop-images { display: flex; gap: 15px; margin-bottom: 25px; }
.prop-img-wrapper { flex: 1; position: relative; border-radius: 6px; overflow: hidden;}
.prop-img-box { width: 100%; height: 250px; background: #ddd; object-fit: cover; border: 2px solid #eee; display: block; }
.prop-img-label { position: absolute; bottom: 0px; left: 0px; right: 0px; background: rgba(255,255,255,0.95); padding: 10px; border-left: 4px solid var(--rz-accent); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.5px; }

/* Gauge */
.gauge-wrapper { width: 100%; text-align: center; margin-bottom: 20px; }
.gauge-bg {
    width: 300px; height: 150px; margin: 0 auto;
    border-top-left-radius: 150px; border-top-right-radius: 150px;
    /* Gauge Gradient: High (Sage) to Low (Coral) */
    background: linear-gradient(90deg, var(--rz-high) 0%, var(--rz-mod) 50%, var(--rz-low) 100%);
    position: relative; overflow: hidden;
}
.gauge-center { 
    width: 200px; height: 100px; background: white; 
    position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); 
    border-top-left-radius: 100px; border-top-right-radius: 100px; 
    display: flex; align-items: flex-end; justify-content: center; 
    padding-bottom: 10px; 
    z-index: 10; 
}
.gauge-needle { 
    width: 4px; height: 140px; background: var(--rz-dark-grey); 
    position: absolute; bottom: 0; left: 50%; 
    transform-origin: bottom center; transform: rotate(0deg); 
    z-index: 5; transition: transform 1s ease-out; 
    border-radius: 2px 2px 0 0;
}
.gauge-score { font-size: 2.8rem; font-weight: 700; font-family: 'Inter', sans-serif; color: var(--rz-black); }

/* Score Bars */
.score-rank-container { margin-top: 20px; display: flex; flex-direction: column; gap: 12px; }
.score-row { display: flex; align-items: center; font-size: 0.85rem; }
.score-label { width: 220px; font-weight: 600; color: var(--rz-dark-grey); text-transform: uppercase; font-family: 'Inter', sans-serif; letter-spacing: 0.3px;}
.score-bar-bg { flex: 1; background: #f0f0f0; height: 10px; border-radius: 5px; overflow: hidden; margin: 0 15px; position: relative; }
.score-bar-zero { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #ffffff; z-index: 2; }
.score-bar-fill { position: absolute; top: 0; bottom: 0; transition: all 0.5s; }
.score-val { width: 66px; text-align: right; font-weight: bold; color: #444; font-variant-numeric: tabular-nums; }
.score-partial { font-weight: 600; color: #999; font-size: 0.75rem; margin-left: 3px; }
.bar-high { background: var(--rz-high); }
.bar-med { background: var(--rz-mod); }
.bar-low { background: var(--rz-low); }

/* Tables */
.qa-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; margin-top: 10px; }
.qa-table th { background: #f8f8f8; text-align: left; padding: 12px; border-bottom: 2px solid #eaeaea; color: var(--rz-dark-grey); font-weight: 600;}
.qa-table td { padding: 12px; border-bottom: 1px solid #f0f0f0; color: #444;}

/* REPORT DETAILED Q&A STYLES */
.qa-section-wrapper { margin-bottom: 20px; page-break-inside: avoid; }
.qa-section-header { 
    background: var(--rz-light-grey); color: var(--rz-black); 
    padding: 8px 12px; font-size: 0.85rem; font-weight: 700; 
    text-transform: uppercase; border-left: 4px solid var(--rz-accent);
    margin-bottom: 10px; letter-spacing: 0.5px;
}
.qa-detailed-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; margin-bottom: 10px; }
.qa-detailed-table tr:nth-child(even) { background: #fafafa; }
.qa-detailed-table td { padding: 8px 10px; vertical-align: top; border-bottom: 1px solid #eee; }
.qa-q { width: 65%; font-weight: 500; color: #555; }
.qa-a { width: 35%; color: #222; font-weight: 600; }
.qa-empty { color: #999; font-weight: 500; font-style: italic; }
.qa-note-row td { padding: 0 10px 8px 10px; background: #fff; }
.qa-note {
    border-left: 3px solid var(--rz-accent);
    background: #fafafa;
    padding: 7px 9px;
    color: #555;
    font-size: 0.74rem;
    line-height: 1.45;
}
.qa-note-label {
    display: block;
    color: #888;
    font-size: 0.64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.35px;
    margin-bottom: 2px;
}

/* Modal */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 2000; display: none; align-items: center; justify-content: center; backdrop-filter: blur(4px); }
.modal { background: white; width: 420px; padding: 35px; border-radius: 8px; border-top: 6px solid var(--rz-accent); box-shadow: 0 10px 30px rgba(0,0,0,0.2);}

.pdf-download-btn { position: fixed; top: 20px; right: 80px; background: var(--rz-black); color: white; border: none; height: 44px; padding: 0 25px; border-radius: 22px; cursor: pointer; font-size: 0.95rem; font-weight: 600; z-index: 3001; display: flex; align-items: center; gap: 10px; font-family: 'Inter', sans-serif; letter-spacing: 0.5px; transition: transform 0.2s;}
.pdf-download-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.2); }

.ai-subhead { font-weight: 700; color: var(--rz-black); text-transform: uppercase; font-size: 0.85rem; margin-bottom: 6px; display: block; border-left: 3px solid #888; padding-left: 10px; letter-spacing: 0.5px; }

/* ==========================================
   NEW: PREVENT ELEMENTS FROM BREAKING ACROSS PAGES
========================================== */
.avoid-break {
    page-break-inside: avoid;
    break-inside: avoid;
}

/* ==========================================
   AUTH SPLASH / LOGIN SCREEN
========================================== */
#auth-splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--rz-black) 0%, #1a1a1a 100%);
}

.auth-card {
  background: var(--rz-white);
  border-radius: 12px;
  padding: 50px 40px;
  width: 400px;
  max-width: 90vw;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  border-top: 6px solid var(--rz-accent);
}

.auth-card img {
  height: 30px;
  margin-bottom: 25px;
}

.auth-card h1 {
  font-family: 'Inter', sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--rz-black);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.auth-card p {
  font-size: 0.95rem;
  color: #888;
  margin-bottom: 30px;
}

.auth-signin-btn {
  background: var(--rz-accent);
  color: white;
  border: none;
  padding: 14px 40px;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  border-radius: 6px;
  cursor: pointer;
  width: 100%;
  letter-spacing: 0.5px;
  transition: all 0.2s;
}

.auth-signin-btn:hover {
  background: #d9564e;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(240, 113, 103, 0.3);
}

/* NOTE: The Change Password / Logout buttons moved into the full-width
   app header (#app-header) — see the .app-header-actions rules above. */
.avoid-break { page-break-inside: avoid; break-inside: avoid; }
/* ==========================================
   ADMIN PANEL STYLES & FULCRUM FIELDS
========================================== */
.admin-field-row {
    margin-bottom: 12px;
}

.admin-field-row label {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--rz-dark-grey);
    margin-bottom: 4px;
}

.admin-note-field {
    margin-top: -4px;
    margin-left: 12px;
    padding: 8px 0 2px 10px;
    border-left: 3px solid rgba(240, 113, 103, 0.45);
}

.admin-note-field label {
    color: #777;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.35px;
}

.admin-note-field textarea {
    min-height: 72px;
    line-height: 1.45;
}

.admin-input-group {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.admin-input-group input,
.admin-input-group textarea,
.admin-input-group select.admin-select {
    flex: 1;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    color: var(--rz-black);
    background: #f9f9f9;
    transition: all 0.2s;
}

.admin-input-group select.admin-select {
    appearance: auto;
    cursor: pointer;
}

.admin-input-group textarea {
    resize: vertical;
}

.admin-input-group input:disabled,
.admin-input-group textarea:disabled,
.admin-input-group select.admin-select:disabled {
    color: #666;
    cursor: not-allowed;
    opacity: 0.8;
}

.admin-edit-btn {
    background: #f0f0f0;
    color: var(--rz-dark-grey);
    border: 1px solid #ddd;
    width: 38px;
    height: 38px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.admin-edit-btn:hover {
    background: var(--rz-black);
    color: #fff;
    border-color: var(--rz-black);
}

/* Segmented Buttons for Yes/No Fields */
.admin-segmented-control {
    display: flex;
    flex: 1;
    gap: 0;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #ddd;
}

.admin-segmented-control[disabled] {
    opacity: 0.7;
}

.seg-btn {
    flex: 1;
    background: #f9f9f9;
    border: none;
    border-right: 1px solid #ddd;
    padding: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    color: #666;
    cursor: pointer;
    transition: all 0.2s;
}

.seg-btn:last-child {
    border-right: none;
}

.seg-btn.active {
    background: var(--rz-accent);
    color: #fff;
    font-weight: 600;
}

.seg-btn:disabled {
    cursor: not-allowed;
}

/* Master "Edit All" toggle at the top of each admin form */
.admin-editall-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 12px 0 15px 0;
    padding: 10px 12px;
    background: var(--rz-light-grey);
    border: 1px solid #e5e5e5;
    border-radius: 4px;
}

.admin-editall-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--rz-dark-grey);
}

.admin-editall-label i {
    margin-right: 6px;
    color: var(--rz-accent);
}

.rz-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    flex-shrink: 0;
    cursor: pointer;
}

.rz-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.rz-switch-slider {
    position: absolute;
    inset: 0;
    background: #ccc;
    border-radius: 22px;
    transition: background 0.2s;
}

.rz-switch-slider::before {
    content: '';
    position: absolute;
    height: 16px;
    width: 16px;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}

.rz-switch input:checked + .rz-switch-slider {
    background: var(--rz-accent);
}

.rz-switch input:checked + .rz-switch-slider::before {
    transform: translateX(18px);
}
/* Custom Tooltip for Admin & Section Performance Help Icons
   (:focus support keeps tooltips keyboard-accessible) */
.rz-tooltip {
    position: relative;
}

.rz-tooltip:hover::after,
.rz-tooltip:focus::after {
    content: attr(data-title);
    position: absolute;
    bottom: 120%;
    /* Left-anchored (extends to the right) so tooltips near the sidebar's
       left edge no longer clip off screen */
    left: -30px;
    transform: none;
    background: #333;
    color: #fff;
    padding: 8px 10px;
    border-radius: 4px;
    font-size: 0.75rem;
    line-height: 1.4;
    white-space: normal;
    width: 240px;
    z-index: 1000;
    pointer-events: none;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    text-align: left;
}

/* ==========================================
   ADMIN SECTION HEADERS (names + data dictionary summaries)
========================================== */
.admin-section-header {
    margin: 22px 0 12px 0;
    padding: 10px 12px;
    background: var(--rz-light-grey);
    border-left: 4px solid var(--rz-accent);
    border-radius: 0 4px 4px 0;
}
.admin-section-header:first-child { margin-top: 5px; }
.admin-section-title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--rz-black);
}
.admin-section-summary {
    font-size: 0.78rem;
    color: #555;
    line-height: 1.5;
    margin: 6px 0 0 0;
}
.admin-section-summary em { color: #777; }

/* ==========================================
   SECTION PERFORMANCE HELPER TEXT & INFO ICONS
========================================== */
.score-help-text {
    font-size: 0.82rem;
    color: #777;
    font-style: italic;
    line-height: 1.5;
    margin: 10px 0 0 0;
}
.score-info-btn {
    background: none;
    border: none;
    padding: 0;
    margin-left: 6px;
    color: #aaa;
    cursor: help;
    font-size: 0.85rem;
    vertical-align: middle;
}
.score-info-btn:hover, .score-info-btn:focus { color: var(--rz-accent); }




/* ==========================================
   EXPANDED NEIGHBORHOOD REPORT PREVIEW
========================================== */
.nh-detail-title {
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e8e8e8;
}
.nh-detail-title h2 {
  margin: 3px 0 4px;
  font-size: 1.65rem;
  line-height: 1.15;
  text-transform: none;
  letter-spacing: -0.25px;
}
.nh-detail-title > div:last-child { color: #888; font-size: 0.88rem; }

.nh-report-preview {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.nh-report-preview-compact { gap: 14px; }

.nh-overview-card {
  background: #fff;
  border: 1px solid #e7e7e7;
  border-top: 4px solid var(--nh-risk-color, var(--rz-accent));
  border-radius: 8px;
  padding: 18px;
  display: grid;
  grid-template-columns: 125px minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
  box-shadow: 0 4px 14px rgba(0,0,0,0.035);
}
.nh-score-block {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid #eee;
  padding-right: 18px;
}
.nh-score-number {
  font-family: 'Inter', sans-serif;
  font-size: 3.2rem;
  font-weight: 800;
  line-height: 0.95;
}
.nh-score-label {
  color: var(--rz-black);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.65px;
  margin-top: 8px;
}
.nh-risk-label { font-size: 0.82rem; font-weight: 700; margin-top: 4px; }

.nh-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-content: center;
}
.nh-meta-card {
  min-width: 0;
  background: #fafafa;
  border: 1px solid #ededed;
  border-radius: 6px;
  padding: 9px 10px;
}
.nh-meta-card span {
  display: block;
  color: #999;
  font-size: 0.63rem;
  text-transform: uppercase;
  letter-spacing: 0.55px;
  font-weight: 700;
  margin-bottom: 2px;
}
.nh-meta-card strong {
  display: block;
  color: #444;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.nh-report-section-group {
  background: #fff;
  border: 1px solid #e7e7e7;
  border-radius: 8px;
  padding: 17px;
}
.nh-section-heading-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 10px;
  margin-bottom: 11px;
  border-bottom: 1px solid #ededed;
}
.nh-section-heading-row h3 {
  color: var(--rz-black);
  font-size: 0.98rem;
  line-height: 1.25;
  margin: 1px 0 0;
  text-transform: uppercase;
}
.nh-section-heading-row p {
  color: #777;
  font-size: 0.78rem;
  line-height: 1.45;
  margin: 5px 0 0;
}
.nh-section-kicker {
  display: block;
  color: var(--rz-accent);
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.9px;
}
.nh-resiliency-summary {
  background: #fafafa;
  border-left: 4px solid var(--rz-accent);
  border-radius: 0 6px 6px 0;
  padding: 13px 14px;
  color: #555;
  font-size: 0.88rem;
  line-height: 1.65;
}

.nh-community-profile-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 11px;
}
.nh-profile-block {
  background: #fafafa;
  border: 1px solid #ececec;
  border-radius: 7px;
  padding: 13px 14px;
  min-width: 0;
}
.nh-profile-block h4 {
  color: var(--rz-black);
  font-size: 0.72rem;
  margin: 0 0 9px;
  padding-bottom: 7px;
  border-bottom: 1px solid #e6e6e6;
  letter-spacing: 0.5px;
}
.nh-profile-block p:last-child,
.nh-profile-block ul:last-child { margin-bottom: 0 !important; }
.nh-profile-list { display: flex; flex-direction: column; gap: 7px; }
.nh-profile-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 0.79rem;
  color: #555;
}
.nh-profile-row > span:first-child { min-width: 0; }
.nh-home-types { display: flex; flex-direction: column; gap: 7px; }
.nh-home-type-item {
  display: grid;
  grid-template-columns: 9px minmax(0,1fr) auto;
  gap: 8px;
  align-items: center;
  color: #555;
  font-size: 0.8rem;
}
.nh-home-type-dot { width: 9px; height: 9px; border-radius: 50%; }
.nh-home-type-item strong { color: #444; }

.assessment-heading-row { align-items: flex-end; }
.nh-assessment-controls {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.nh-assessment-controls button {
  background: #f7f7f7;
  color: #666;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 5px 8px;
  font-family: 'Inter', sans-serif;
  font-size: 0.67rem;
  font-weight: 700;
  cursor: pointer;
}
.nh-assessment-controls button:hover,
.nh-assessment-controls button:focus-visible {
  border-color: var(--rz-accent);
  color: var(--rz-accent);
  background: #fff7f6;
  outline: none;
}
.nh-data-sections { display: flex; flex-direction: column; gap: 8px; }
.nh-data-section {
  border: 1px solid #e3e3e3;
  border-radius: 7px;
  background: #fff;
  overflow: hidden;
}
.nh-data-section summary {
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 18px;
  gap: 8px;
  align-items: center;
  padding: 11px 12px;
  cursor: pointer;
  background: #fafafa;
  color: #444;
}
.nh-data-section summary::-webkit-details-marker { display: none; }
.nh-data-section summary:hover { background: #f5f5f5; }
.nh-data-section-title { font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.35px; }
.nh-data-section-count {
  background: #eee;
  color: #777;
  border-radius: 999px;
  padding: 2px 7px;
  font-size: 0.62rem;
  font-weight: 700;
  white-space: nowrap;
}
.nh-data-section-chevron { color: #999; font-size: 0.72rem; transition: transform 0.2s; }
.nh-data-section[open] .nh-data-section-chevron { transform: rotate(180deg); }
.nh-data-section-body { padding: 12px; border-top: 1px solid #e8e8e8; }
.nh-data-section-summary {
  color: #777;
  font-size: 0.75rem;
  line-height: 1.5;
  margin: 0 0 10px;
}
.nh-data-section-summary em { color: #888; }
.nh-report-rows { display: flex; flex-direction: column; }
.nh-report-row {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(115px, 0.75fr);
  gap: 12px;
  align-items: start;
  padding: 10px 2px;
  border-top: 1px solid #f0f0f0;
}
.nh-report-row:first-child { border-top: none; padding-top: 3px; }
.nh-report-question { color: #555; font-size: 0.78rem; line-height: 1.45; }
.nh-report-answer { color: #333; font-size: 0.78rem; font-weight: 700; text-align: right; line-height: 1.45; overflow-wrap: anywhere; }
.nh-answer-text { color: #444; }
.nh-answer-empty { color: #999; font-style: italic; font-weight: 500; }
.nh-report-note {
  grid-column: 1 / -1;
  margin: 0 0 2px;
  padding: 8px 10px;
  border-left: 3px solid rgba(240, 113, 103, 0.55);
  background: #fafafa;
  color: #555;
  font-size: 0.74rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.nh-report-note-label {
  display: block;
  margin-bottom: 2px;
  color: #888;
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.35px;
}
.nh-answer-chip {
  display: inline-block;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.35px;
}
.answer-yes { background: #e6f4ec; color: #28724d; }
.answer-no { background: #fdece9; color: #ad453b; }
.answer-na { background: #eeeeee; color: #777; }

.nh-report-cta {
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  background: linear-gradient(135deg, #fafafa, #fff7f6);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.nh-report-cta > div { display: flex; flex-direction: column; gap: 2px; }
.nh-report-cta strong { color: var(--rz-black); font-size: 0.82rem; }
.nh-report-cta span { color: #777; font-size: 0.75rem; line-height: 1.4; }
.nh-report-cta .rz-btn { width: auto; align-self: flex-start; padding: 9px 13px; }

/* Use the additional width instead of simply stretching the same narrow layout. */
#sidebar.sidebar-wide .info-panel { padding: 28px 32px; }
#sidebar.sidebar-wide .nh-report-preview { gap: 22px; }
#sidebar.sidebar-wide .nh-overview-card { grid-template-columns: 150px minmax(0,1fr); padding: 22px; }
#sidebar.sidebar-wide .nh-score-number { font-size: 3.8rem; }
#sidebar.sidebar-wide .nh-meta-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
#sidebar.sidebar-wide .nh-community-profile-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
#sidebar.sidebar-wide .nh-report-row { grid-template-columns: minmax(240px, 0.95fr) minmax(180px, 1.05fr); }
#sidebar.sidebar-wide .nh-report-answer { text-align: left; }
#sidebar.sidebar-wide .nh-report-section-group { padding: 20px 22px; }
#sidebar.sidebar-wide .nh-report-cta { flex-direction: row; justify-content: space-between; align-items: center; }
#sidebar.sidebar-wide .nh-report-cta .rz-btn { align-self: auto; flex-shrink: 0; }

/* ==========================================
   WESTERN VIEW COMMUNITY MARKERS
========================================== */
.community-overview-marker {
    pointer-events: auto;
    filter: drop-shadow(0 3px 7px rgba(0, 0, 0, 0.28));
}
.community-overview-btn {
    appearance: none;
    border: 1px solid rgba(56, 56, 56, 0.25);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    color: var(--rz-black);
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    max-width: 220px;
    padding: 4px 12px 4px 5px;
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.community-overview-btn:hover,
.community-overview-btn:focus-visible {
    background: #fff;
    border-color: var(--rz-accent);
    transform: translateY(-2px);
    outline: none;
}
.community-overview-icon {
    width: 27px;
    height: 27px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 27px;
    color: #fff;
    background: var(--rz-accent);
    font-size: 0.78rem;
}
.community-overview-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==========================================
   MOBILE / SMALL SCREEN LAYOUT
========================================== */
@media (max-width: 768px) {
  #app-header { padding: 8px 12px; }
  .app-title { font-size: 1rem; }
  .app-powered { display: none; }

  #app-subheader { padding: 10px 12px; }
  #addr-search-form { flex-wrap: wrap; }
  .search-input-wrap { flex: 1 1 100%; }
  #app-subheader .subheader-btn { font-size: 0.85rem; }

  /* Sidebar overlays the map on small screens */
  #sidebar {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: min(85vw, var(--sidebar-w));
    flex-basis: auto;
    box-shadow: 6px 0 20px rgba(0,0,0,0.2);
  }
  #sidebar.sidebar-wide { width: 100vw; max-width: 100vw; }
  #sidebar.collapsed { margin-left: min(-85vw, calc(var(--sidebar-w) * -1)); }
  #sidebar.sidebar-wide.collapsed { margin-left: -100vw; }
  #sidebar.sidebar-wide .info-panel { padding: 20px; }
  #sidebar.sidebar-wide .nh-meta-grid,
  #sidebar.sidebar-wide .nh-community-profile-grid { grid-template-columns: 1fr; }
  #sidebar.sidebar-wide .nh-overview-card { grid-template-columns: 105px minmax(0,1fr); padding: 15px; }
  #sidebar.sidebar-wide .nh-report-row { grid-template-columns: 1fr; gap: 5px; }
  #sidebar.sidebar-wide .nh-report-answer { text-align: left; }
  #sidebar.sidebar-wide .nh-report-cta { flex-direction: column; align-items: stretch; }
  #sidebar.sidebar-wide .nh-report-cta .rz-btn { width: 100%; }

  #map-tools { top: 12px; right: 8px; }
  #layersPanel { width: min(240px, calc(100vw - 80px)); }
  .community-overview-btn { max-width: 165px; font-size: 0.76rem; }
}
@media (max-width: 520px) {
  .sb-resize-toggle span { display: none; }
  .sb-resize-toggle { width: 30px; padding: 0; justify-content: center; }
  .info-panel { padding: 18px; }
  .nh-overview-card { grid-template-columns: 92px minmax(0,1fr); gap: 12px; padding: 14px; }
  .nh-score-block { padding-right: 12px; }
  .nh-score-number { font-size: 2.7rem; }
  .nh-meta-grid { grid-template-columns: 1fr; }
  .assessment-heading-row { flex-direction: column; align-items: stretch; }
  .nh-assessment-controls { justify-content: flex-start; }
  .nh-report-row { grid-template-columns: 1fr; gap: 5px; }
  .nh-report-answer { text-align: left; }
}

/* ==========================================
   FEMA USA STRUCTURES — LEGEND + OCCUPANCY COUNTS
   Building occupancy data calculated from FEMA USA Structures footprints.
========================================== */

/* Layers panel: checkbox row with an accordion toggle for the categories */
.layer-item-expandable {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  font-size: 0.9rem;
  color: #444;
}

.occ-legend-btn {
  background: none;
  border: none;
  color: #999;
  cursor: pointer;
  padding: 2px 4px;
  font-size: 0.75rem;
  line-height: 1;
  border-radius: 4px;
  flex-shrink: 0;
  transition: transform 0.2s ease, color 0.2s ease;
}
.occ-legend-btn:hover { color: var(--rz-black); }
.occ-legend-btn.open { transform: rotate(180deg); color: var(--rz-black); }

.occ-legend {
  margin: -4px 0 10px 22px;
  padding: 8px 10px;
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: 5px;
}
.occ-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: #555;
  margin-bottom: 5px;
}
.occ-legend-swatch {
  width: 13px;
  height: 13px;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.18);
  flex-shrink: 0;
}
.occ-legend-note {
  font-size: 0.68rem;
  color: #999;
  font-style: italic;
  line-height: 1.4;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid #eee;
}
.occ-zoom-hint {
  font-size: 0.7rem;
  color: #b07d5a;
  font-style: italic;
  margin: -4px 0 10px 22px;
}

/* Stacked occupancy bar + counts table */
.occ-bar {
  height: 16px;
  width: 100%;
  display: flex;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15);
  background: #eee;
}
.occ-bar-seg { height: 100%; }

.occ-rows-head,
.occ-row {
  display: grid;
  grid-template-columns: 11px minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  font-size: 0.78rem;
  color: #555;
}
.occ-rows-head {
  grid-template-columns: minmax(0, 1fr) auto auto;
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #aaa;
  font-weight: 600;
  margin: 10px 0 4px;
  padding-bottom: 3px;
  border-bottom: 1px solid #eee;
}
.occ-rows { display: flex; flex-direction: column; gap: 5px; }
.occ-dot {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.15);
}
.occ-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.occ-count { font-weight: 700; color: var(--rz-black); text-align: right; min-width: 46px; }
.occ-pct { color: #999; text-align: right; min-width: 44px; font-variant-numeric: tabular-nums; }

.occ-total {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid #eee;
  font-weight: 700;
  color: var(--rz-black);
}
.occ-total .occ-pct { color: #999; font-weight: 500; }

.occ-source {
  font-size: 0.66rem;
  color: #aaa;
  font-style: italic;
  line-height: 1.4;
  margin-top: 8px;
}

.occ-status {
  font-size: 0.78rem;
  color: #999;
  padding: 10px 0;
  text-align: center;
}
.occ-status-err { color: #c0564f; }

.occ-detail { margin-top: 14px; text-align: left; }
.chart-title-sub { text-transform: none; letter-spacing: 0; color: #aaa; font-weight: 500; }
.nh-block-sub {
  float: right;
  font-size: 0.62rem;
  font-weight: 600;
  color: #aaa;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* Admin: auto-calculated (read-only) fields */
.admin-field-readonly { opacity: 0.95; }
.admin-readonly-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #7a6a55;
  background: #f4efe6;
  border: 1px solid #e8ddc9;
  border-radius: 4px;
  padding: 2px 6px;
  margin-left: 6px;
  vertical-align: middle;
}
.admin-readonly-note {
  font-size: 0.72rem;
  color: #888;
  line-height: 1.45;
  margin: 6px 0 0;
  font-style: italic;
}

/* ==========================================
   VERIFIED BY REDZONE BADGE
   Set by the neighborhood-only "Verified by RedZone?" question. The wordmark
   matches the section-header type scale (.nh-section-heading-row h3) in the
   accent red used for icons and link hovers; the R mark is sized to match
   the cap height and trails it.
========================================== */
.rz-verified-block { margin: 0 0 18px; }

/* The pill is a disclosure button: clicking it expands the explanation
   inline instead of navigating away. */
.rz-verified-badge {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  margin: 0;
  padding: 12px 15px;
  background: #fdf5f4;
  border: 1px solid #f7e2df;
  border-left: 3px solid var(--rz-accent);
  border-radius: 7px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.rz-verified-badge:hover,
.rz-verified-badge:focus-visible { background: #fbebe9; border-color: #f2cdc8; }
.rz-verified-badge:focus-visible { outline: 2px solid var(--rz-accent); outline-offset: 2px; }
.rz-verified-badge.open { border-radius: 7px 7px 0 0; }

.rz-verified-caret {
  margin-left: auto;
  color: var(--rz-accent);
  font-size: 0.72rem;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.rz-verified-badge.open .rz-verified-caret { transform: rotate(180deg); }

/* Expanded explanation */
.rz-verified-info {
  padding: 13px 15px 14px;
  background: #fffaf9;
  border: 1px solid #f7e2df;
  border-top: none;
  border-left: 3px solid var(--rz-accent);
  border-radius: 0 0 7px 7px;
  animation: rzVerifiedIn 0.2s ease;
}
.rz-verified-info p {
  margin: 0 0 10px;
  font-size: 0.82rem;
  line-height: 1.55;
  color: #555;
}
/* The limit travels with the claim — most readers never open the full page */
.rz-verified-caveat {
  display: flex;
  gap: 7px;
  align-items: flex-start;
  margin: 0 0 11px !important;
  padding: 9px 10px;
  background: #f6f6f6;
  border-left: 2px solid #b9b9b9;
  border-radius: 0 4px 4px 0;
  font-size: 0.76rem !important;
  line-height: 1.5;
  color: #666 !important;
}
.rz-verified-caveat i { color: #a0a0a0; font-size: 0.76rem; margin-top: 2px; flex-shrink: 0; }

.rz-verified-info a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--rz-accent);
  text-decoration: none;
}
.rz-verified-info a:hover { text-decoration: underline; }
.rz-verified-info a i { font-size: 0.68rem; }

@keyframes rzVerifiedIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

.rz-verified-text {
  font-family: 'Inter', sans-serif;
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--rz-accent);
}

.rz-verified-mark {
  height: 19px;
  width: auto;
  display: block;
  flex-shrink: 0;
}

/* Compact variant for the neighborhood accordions in the community list */
.nh-report-preview-compact .rz-verified-block { margin-bottom: 14px; }
.nh-report-preview-compact .rz-verified-badge { padding: 9px 12px; }
.nh-report-preview-compact .rz-verified-text { font-size: 0.86rem; }
.nh-report-preview-compact .rz-verified-mark { height: 16px; }
.nh-report-preview-compact .rz-verified-info { padding: 11px 12px 12px; }
.nh-report-preview-compact .rz-verified-info p { font-size: 0.78rem; }

/* ==========================================
   ADMIN — ASSESSMENT SELECTOR
   A neighborhood holds several dated assessments. Which one is being edited
   has to be unmistakable, so the bar sits above every field and says plainly
   whether the edit updates an existing entry or creates a new one.
========================================== */
.admin-assessment-bar {
  background: #f6f7f8;
  border: 1px solid #e3e6e8;
  border-left: 4px solid var(--rz-red, #f07167);
  border-radius: 5px;
  padding: 12px 14px;
  margin-bottom: 16px;
}
.admin-assessment-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.admin-assessment-row label {
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #666;
}
.admin-assessment-row select {
  flex: 1;
  min-width: 190px;
  padding: 7px 9px;
  border: 1px solid #ccd1d4;
  border-radius: 4px;
  background: #fff;
  font-size: 0.9rem;
  font-family: inherit;
}
.admin-assessment-empty {
  flex: 1;
  min-width: 190px;
  font-size: 0.9rem;
  color: #888;
  font-style: italic;
}
.admin-assessment-note {
  margin: 9px 0 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: #6b7276;
}
.admin-empty {
  padding: 16px;
  font-size: 0.9rem;
  color: #888;
  line-height: 1.5;
}

/* Provenance line under a meta card — when the assessment was collected and
   whether earlier ones exist. */
.nh-meta-note {
  display: block;
  margin-top: 3px;
  font-size: 0.68rem;
  font-style: normal;
  color: #8b9296;
  letter-spacing: 0.2px;
}
.nh-meta-card-span { grid-column: 1 / -1; }

/* ==========================================
   ASSESSMENT HISTORY
   Score movement over time. Tabular figures so the index column reads as a
   column; the table scrolls inside its own container so the sidebar never
   scrolls sideways.
========================================== */
.nh-history-scroll { overflow-x: auto; }
.nh-history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  min-width: 420px;
}
.nh-history-table th {
  text-align: left;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #8b9296;
  font-weight: 700;
  padding: 0 8px 6px;
  border-bottom: 1px solid #e6e9ea;
  white-space: nowrap;
}
.nh-history-table td {
  padding: 9px 8px;
  border-bottom: 1px solid #f0f2f3;
  vertical-align: top;
}
.nh-history-table tr:last-child td { border-bottom: none; }
.nh-history-date { font-weight: 600; color: var(--rz-dark-grey, #383838); white-space: nowrap; }
.nh-history-date em,
.nh-history-changes em {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-size: 0.7rem;
  color: #8b9296;
}
.nh-history-score {
  font-weight: 800;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.nh-history-move { white-space: nowrap; font-weight: 700; font-variant-numeric: tabular-nums; }
.nh-history-up   { color: #4f8f76; }
.nh-history-down { color: #c4674f; }
.nh-history-flat { color: #9aa1a5; font-weight: 600; }
.nh-history-changes { color: #5c6367; line-height: 1.45; }