/* ── Retirement World Map — Stylesheet ──────────────────────────────────────
   map.css | All styles for the retirement map application
   ──────────────────────────────────────────────────────────────────────────── */

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;height:-webkit-fill-available;font-family:'Inter',sans-serif;background:#0d1b2a;color:#f0e6d3;overflow:hidden}
.shell{display:flex;flex-direction:column;height:100vh;height:-webkit-fill-available}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:9px 18px;background:#0a1520;border-bottom:1px solid rgba(255,255,255,0.07);flex-shrink:0;flex-wrap:wrap;gap:8px;z-index:1000}
.topbar-left h1{font-family:'Playfair Display',serif;font-size:16px;color:#f0e6d3;font-weight:600}
.topbar-left p{font-size:10px;color:rgba(240,230,211,0.4);margin-top:1px}
.topbar-right{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.legend{display:flex;gap:12px;flex-wrap:wrap}
.li{display:flex;align-items:center;gap:5px;font-size:10px;color:rgba(240,230,211,0.6);font-weight:500;letter-spacing:.04em;text-transform:uppercase}
.sw{width:9px;height:9px;border-radius:2px;flex-shrink:0}
.live-badge{font-size:9px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:4px;background:rgba(45,143,78,0.2);color:#72d98f;border:1px solid rgba(45,143,78,0.3);white-space:nowrap}
.live-badge.loading{background:rgba(240,180,50,0.15);color:#f0c060;border-color:rgba(240,180,50,0.3)}
.main{display:flex;flex:1;overflow:hidden;position:relative}
#rm-map{flex:0 0 66.66%;height:100%;transition:flex-basis .28s ease}
.map-smart-tag {
  position: absolute;
  z-index: 760;
  left: 0;
  top: 0;
  width: 230px;
  max-width: calc(100vw - 28px);
  padding: 10px 11px;
  border: 1px solid rgba(212,175,55,0.44);
  border-radius: 6px;
  background: rgba(5,10,18,0.92);
  box-shadow: 0 14px 34px rgba(0,0,0,0.35);
  color: #f0e6d3;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-999px,-999px,0);
  transition: opacity .1s ease;
  backdrop-filter: blur(5px);
}
.map-smart-tag.visible { opacity: 1; }
.smart-tag-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.smart-tag-name {
  min-width: 0;
  color: #f0e6d3;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
}
.smart-tag-kind {
  display: block;
  margin-top: 2px;
  color: rgba(240,230,211,0.45);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.smart-tag-score {
  flex: 0 0 auto;
  min-width: 42px;
  text-align: right;
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
}
.smart-tag-score span {
  display: block;
  margin-top: 2px;
  color: rgba(240,230,211,0.42);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.smart-tag-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.smart-tag-chip {
  min-width: 0;
  padding: 6px 7px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 5px;
  background: rgba(255,255,255,0.055);
}
.smart-tag-chip b {
  display: block;
  margin-bottom: 2px;
  color: rgba(240,230,211,0.38);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.smart-tag-chip span {
  display: block;
  overflow: hidden;
  color: rgba(240,230,211,0.82);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.smart-tag-warn {
  margin-top: 7px;
  color: #f0c060;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.35;
}
@media (hover: none), (pointer: coarse) {
  .map-smart-tag { display: none; }
}
.destination-table-view{display:none;flex:0 0 66.66%;height:100%;overflow:auto;background:#0d1b2a;border-right:1px solid rgba(255,255,255,0.07);transition:flex-basis .28s ease}
.sidebar{flex:0 0 33.34%;height:100%;overflow-y:scroll;background:#0d1b2a;border-left:1px solid rgba(255,255,255,0.07);overscroll-behavior:contain;transition:flex-basis .28s ease,border-color .28s ease}
.desktop-sidebar-tab{display:none}
body.table-view #rm-map{display:none}
body.table-view .map-smart-tag{display:none}
body.table-view .map-legend-float{display:none}
body.table-view .destination-table-view{display:block}
body.table-view.desktop-sidebar-collapsed .destination-table-view{flex-basis:100%}
.idle{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:40px 24px;text-align:center;gap:14px}
.idle .globe{font-size:48px;opacity:.35}
.idle h2{font-family:'Playfair Display',serif;font-size:17px;color:rgba(240,230,211,0.45)}
.idle p{font-size:12px;color:rgba(240,230,211,0.28);line-height:1.7;max-width:230px}
.data-status{margin-top:16px;padding:10px 14px;background:rgba(255,255,255,0.04);border-radius:8px;width:100%;max-width:240px;text-align:left}
.data-status .ds-title{font-size:9px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(240,230,211,0.3);margin-bottom:8px}
.ds-row{display:flex;justify-content:space-between;align-items:center;font-size:11px;margin-bottom:5px}
.ds-row:last-child{margin-bottom:0}
.ds-label{color:rgba(240,230,211,0.45)white-space:nowrap;}
.ds-val{font-weight:600;font-size:10px;padding:2px 6px;border-radius:3px;white-space:nowrap;min-width:72px;text-align:center}
.ds-val.ok{background:rgba(45,143,78,0.2);color:#72d98f}
.ds-val.loading{background:rgba(240,180,50,0.15);color:#f0c060}
.ds-val.fail{background:rgba(192,57,43,0.15);color:#e88a76}
.ds-val.static{background:rgba(255,255,255,0.07);color:rgba(240,230,211,0.45)}
.cinfo{padding:0 0 20px;overflow-y:visible;position:relative}
.hero{padding:16px 16px 13px;border-bottom:1px solid rgba(255,255,255,0.07)}
.cname{font-family:'Playfair Display',serif;font-size:21px;color:#f0e6d3;font-weight:600;line-height:1.2;margin-bottom:9px;display:flex;align-items:center;gap:8px}
.cflag{font-size:22px}
.badges{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:11px}
.tbadge{font-size:9px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:4px;color:#fff}
.pill{font-size:10px;font-weight:600;padding:3px 9px;border-radius:4px;white-space:nowrap}
.pill.cheap{background:rgba(45,143,78,0.2);color:#72d98f;border:1px solid rgba(45,143,78,0.35)}
.pill.expensive{background:rgba(192,57,43,0.2);color:#e88a76;border:1px solid rgba(192,57,43,0.35)}
.pill.same{background:rgba(255,255,255,0.07);color:rgba(240,230,211,0.5);border:1px solid rgba(255,255,255,0.1)}
.overview{font-size:12px;color:rgba(240,230,211,0.58);line-height:1.75}
.overview-src{font-size:9px;color:rgba(240,230,211,0.28);letter-spacing:.05em;text-transform:uppercase;padding:2px 0 6px;font-weight:500}
.live-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,0.06);border-top:1px solid rgba(255,255,255,0.06);border-bottom:1px solid rgba(255,255,255,0.06)}
.live-cell{background:#0d1b2a;padding:10px 12px;text-align:center}
.live-cell .lc-label{font-size:8px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(240,230,211,0.32);margin-bottom:4px}
.live-cell .lc-val{font-size:14px;font-weight:600;color:#f0e6d3}
.live-cell .lc-val.updating{color:rgba(240,230,211,0.3);font-size:11px}
.live-cell .lc-sub{font-size:9px;color:rgba(240,230,211,0.35);margin-top:2px}
.live-cell .lc-val.advisory-1{color:#72d98f}
.live-cell .lc-val.advisory-2{color:#f0c060}
.live-cell .lc-val.advisory-3{color:#e8902a}
.live-cell .lc-val.advisory-4{color:#e88a76}
.sec{padding:16px 16px 18px;border-bottom:1px solid rgba(255,255,255,0.08)}
.sec-title{font-size:9px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#d4af37;margin-bottom:12px;display:flex;align-items:center;gap:6px}
.sec-title .live-dot{width:5px;height:5px;border-radius:50%;background:#72d98f;display:inline-block;animation:pulse 2s infinite}
.sec-title .static-dot{width:5px;height:5px;border-radius:50%;background:rgba(240,230,211,0.2);display:inline-block}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.stat{background:rgba(255,255,255,0.04);border-radius:8px;padding:11px 12px}
.stat .sl{font-size:9px;color:rgba(240,230,211,0.38);text-transform:uppercase;letter-spacing:.07em;margin-bottom:5px}
.stat .sv{font-size:13px;font-weight:600;color:#f0e6d3;line-height:1.4}
.stat .sv.good{color:#72d98f}.stat .sv.warn{color:#f0c060}.stat .sv.bad{color:#e88a76}.stat .sv.small{font-size:11px}
.health-sec .health-stats {
  margin-bottom: 10px;
  align-items: stretch;
}
.health-sec .health-stats .stat {
  min-height: 74px;
}
.health-sec .health-note {
  clear: both;
  display: block;
  font-size: 11px;
  color: rgba(240,230,211,0.55);
  line-height: 1.65;
  background: rgba(255,255,255,0.03);
  border-radius: 6px;
  padding: 9px 10px;
  margin: 0 0 6px;
}
@media screen and (max-width: 768px) {
  .health-sec .health-stats {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .health-sec .health-stats .stat {
    min-height: auto;
  }
}
.sbar-row{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px}
.sbar-track{height:8px;background:rgba(255,255,255,0.08);border-radius:4px;overflow:hidden;margin-bottom:4px}
.sbar-fill{height:100%;border-radius:4px;transition:width .8s ease}
.sbar-ends{display:flex;justify-content:space-between;font-size:9px;color:rgba(240,230,211,0.28)}
.climate-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}
.cm{background:rgba(255,255,255,0.04);border-radius:6px;padding:6px 3px;text-align:center}
.cm .mon{font-size:8px;color:rgba(240,230,211,0.38);text-transform:uppercase;letter-spacing:.04em;margin-bottom:3px}
.cm .tmp{font-size:11px;font-weight:600;color:#f0e6d3}
.cm .ico{font-size:11px;margin-top:2px}
.spots{display:flex;flex-direction:column;gap:6px}
.spot{background:rgba(255,255,255,0.04);border-radius:8px;padding:9px 12px}
.spot .sn{font-size:12px;font-weight:600;color:#f0e6d3;margin-bottom:2px}
.spot .sd{font-size:11px;color:rgba(240,230,211,0.52);line-height:1.55}
.links{padding:12px 16px 16px;display:flex;flex-direction:column;gap:7px}
.lnk{display:flex;align-items:center;gap:7px;font-size:11px;color:#7ab3e0;text-decoration:none;padding:8px 12px;background:rgba(122,179,224,0.07);border:1px solid rgba(122,179,224,0.13);border-radius:7px;transition:background .15s}
.lnk:hover{background:rgba(122,179,224,0.15)}
.lnk svg{flex-shrink:0;opacity:.6}
.lnk .lnk-live{font-size:8px;margin-left:auto;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#72d98f;opacity:.8}
.last-updated{padding:8px 16px 4px;font-size:9px;color:rgba(240,230,211,0.2);text-align:right}
.leaflet-container{background:#1a1a1a!important}
.leaflet-control-attribution{background:rgba(0,0,0,0.55)!important;color:rgba(255,255,255,0.5)!important;font-size:8px!important}
.leaflet-control-attribution a{color:rgba(255,255,255,0.5)!important}
.leaflet-control-zoom a{background:rgba(0,0,0,0.65)!important;color:#e8e8e8!important;border-color:rgba(255,255,255,0.2)!important}
::-webkit-scrollbar{width:4px}::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.1);border-radius:2px}

.tbar{display:flex;gap:4px;align-items:center}



/* ── TOOLBAR BUTTONS (Filter, Data Guide) ──────────────────────────── */
/* toolbar-btn base → white (Filter btn, Data Guide link) */
.toolbar-btn {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 4px;
  background: rgba(122,179,224,0.1);
  color: #7ab3e0;
  border: 1px solid rgba(122,179,224,0.25);
  cursor: pointer;
  white-space: nowrap;
  transition: all .2s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-sizing: border-box;
}
.toolbar-btn:hover {
  background: rgba(122,179,224,0.2);
  color: #aed4f5;
  border-color: rgba(122,179,224,0.5);
}
.toolbar-btn.active {
  background: rgba(122,179,224,0.25);
  color: #aed4f5;
  border-color: rgba(122,179,224,0.5);
}


/* ══════════════════════════════════════════════════════════════════════════════
   TOPBAR RESTRUCTURE
   Row1: logo + tagline (left) | Sources LIVE + Data Guide (right)
   Row2: labels line (Household Data | Search Tools)
         controls line (all fields side-by-side)
   ══════════════════════════════════════════════════════════════════════════════ */

/* Row 1 ── right-side stack (Sources + Data Guide) */
.topbar-row1-tools {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  margin-left: auto;
}

/* Row 2 */
.topbar-row2 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 5px 18px 7px;
}


/* Section labels — gold, flush left above their respective field group */
.tbar-section-label {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: #d4af37;
  width: 100%;              /* full width of the group */
  text-align: left;         /* flush left within the group */
  margin-bottom: 1px;
  white-space: nowrap;
}

/* tbar-group: column container — section label on top, fields row below */
.tbar-group {
  display: flex;
  flex-direction: column;
  align-items: center;       /* center the group horizontally */
  gap: 3px;
}

/* Fields row inside each group */
.tbar-group-fields {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 8px;
}

/* Controls line — groups side by side */
.tbar-controls {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: nowrap;
}

/* Individual field: label on top, control below */
.tbar-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.tbar-field-label {
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(240,230,211,0.38);
  white-space: nowrap;
}

/* Vertical divider between Household and Search sections */
.tbar-divider {
  width: 1px;
  height: 28px;
  background: rgba(255,255,255,0.12);
  align-self: flex-end;
  margin: 0 4px 4px;
}

/* Gold title in topbar-row1 (h1 / logo area) */
.topbar-left h1,
.topbar-tagline {
  /* tagline stays muted; h1 if present gets gold */
}

/* ── FLOATING LEGEND ─────────────────────────────────────────────────────── */
/* Centered over the map area (map = left 66.66% of .main).
   left: 33.33% = center of the map column. */
.map-legend-float {
  position: absolute;
  bottom: 36px;
  left: 33.33%;
  transform: translateX(-50%);
  z-index: 500;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;          /* single line */
  gap: 14px;
  align-items: center;
  padding: 5px 16px;
  background: rgba(5,8,18,0.88);
  border: 1px solid rgba(212,175,55,0.55);
  border-radius: 5px;
  backdrop-filter: blur(4px);
  pointer-events: none;
  white-space: nowrap;
  transition: left .28s ease;
}
.map-legend-float .li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: rgba(240,230,211,0.70);
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.map-legend-float .sw {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
}

/* ── DESTINATION TABLE VIEW ───────────────────────────────────────────────── */
.table-shell {
  min-width: 980px;
  padding: 16px;
}
.table-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
.table-title {
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  color: #f0e6d3;
  line-height: 1.2;
}
.table-subtitle {
  margin-top: 4px;
  font-size: 11px;
  color: rgba(240,230,211,0.48);
}
.table-count {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(240,230,211,0.56);
  white-space: nowrap;
}
.dest-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.08);
}
.dest-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #0a1520;
  color: rgba(240,230,211,0.58);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-align: left;
  padding: 9px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.dest-table td {
  padding: 9px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.055);
  color: rgba(240,230,211,0.76);
  font-size: 11px;
  line-height: 1.35;
  vertical-align: top;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dest-table tbody tr {
  cursor: pointer;
  transition: background .12s;
}
.dest-table tbody tr:hover,
.dest-table tbody tr:focus {
  background: rgba(122,179,224,0.09);
  outline: none;
}
.dest-name-cell {
  color: #f0e6d3;
  font-weight: 700;
}
.dest-name-cell span {
  display: block;
  margin-top: 2px;
  color: rgba(240,230,211,0.42);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.table-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.055);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}
.table-muted { color: rgba(240,230,211,0.38); }
.table-good { color: #72d98f; }
.table-warn { color: #f0c060; }
.table-bad { color: #e88a76; }
.table-note {
  display: block;
  margin-top: 2px;
  color: rgba(240,230,211,0.38);
  font-size: 9px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}




/* ── MOBILE BOTTOM SHEET ───────────────────────────────────────────── */


/* Drag handle hidden on desktop */
@media screen and (min-width: 769px) {
  .drag-handle { display: none; }
  .sheet-backdrop { display: none !important; }
  .desktop-sidebar-tab {
    position: absolute;
    top: 50%;
    right: 33.34%;
    z-index: 650;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 74px;
    transform: translateY(-50%);
    border: 1px solid rgba(255,255,255,0.16);
    border-right: 0;
    border-radius: 8px 0 0 8px;
    background: rgba(10,21,32,0.96);
    color: rgba(240,230,211,0.72);
    box-shadow: -4px 0 16px rgba(0,0,0,0.22);
    cursor: pointer;
    transition: right .28s ease, background .15s ease, color .15s ease, border-color .15s ease;
  }
  .desktop-sidebar-tab:hover,
  .desktop-sidebar-tab:focus-visible {
    background: rgba(18,38,56,0.98);
    color: #f0e6d3;
    border-color: rgba(212,175,55,0.45);
    outline: none;
  }
  .desktop-sidebar-tab span {
    display: block;
    font-size: 22px;
    line-height: 1;
    transform: translateX(1px);
  }
  body.desktop-sidebar-collapsed #rm-map {
    flex-basis: 100%;
  }
  body.desktop-sidebar-collapsed .sidebar {
    flex-basis: 0;
    border-left-color: transparent;
    overflow: hidden;
    pointer-events: none;
  }
  body.desktop-sidebar-collapsed .desktop-sidebar-tab {
    right: 0;
  }
  body.desktop-sidebar-collapsed .map-legend-float {
    left: 50%;
  }
}

/* ── MOBILE BOTTOM SHEET ──────────────────────────────────────────── */


/* These are desktop-only — hidden on mobile */
.sheet-handle { display: none; }
.sheet-peek-tab { display: none; }
#tap-hint { display: none; }








/* ── PRINT REPORT ─────────────────────────────────────────────────── */
/* ── @page: Paper size rules ──────────────────────────────────────────────────
   Page 1 (detail cards) = portrait 8.5×11"
   Page 2 (matrix)       = landscape 11×8.5"
   Named pages let us switch orientation mid-document.
────────────────────────────────────────────────────────────────────────────── */
@page {
  size: letter portrait;
  margin: 0.45in 0.45in 0.35in 0.45in; /* tighter bottom = browser footer fits without overflow */
}

@page matrix-landscape {
  size: letter landscape;
  margin: 0.5in 0.5in;
}

@media print {
  /* ── Print only the report — classic visibility + absolute pattern ──────────
     This is the most cross-browser-reliable technique. display:none on
     top-level siblings can cause Firefox to render a blank page; this
     approach keeps layout intact but hides everything except #print-report,
     then anchors #print-report to the page origin so it paginates naturally. */
  body * { visibility: hidden !important; }
  #print-report, #print-report * { visibility: visible !important; }

  #print-report {
    visibility: visible !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    overflow-y: visible !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    z-index: auto !important;
  }

  html, body {
    background: #fff !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    overflow: visible !important;
  }



  /* Page 1 — portrait detail cards */
  .report-inner {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }

  /* Report header */
  .report-header {
    padding-bottom: 10px !important;
    margin-bottom: 14px !important;
    border-bottom: 2px solid #1a1a2e !important;
  }

  /* Cards: allow natural page flow — break-inside:avoid causes 1 card/page in Chrome */
  .report-card {
    background: #fff !important;
    border-radius: 6px !important;
    border: 1px solid #ddd !important;
    box-shadow: none !important;
    margin-bottom: 8px !important;
    overflow: visible !important;
  }

  /* Card grid — two columns on portrait page */
  .report-grid {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
    gap: 10px !important;
    width: 100% !important;
  }

  /* Matrix section — starts on a NEW page */
  .report-matrix-section {
    page-break-before: always !important;
    break-before: page !important;
    margin-top: 0 !important;
  }

  /* Matrix table fills the page */
  .matrix-table {
    width: 100% !important;
    font-size: 9.5px !important;
    min-width: auto !important;
  }

  .matrix-table th,
  .matrix-table td {
    padding: 5px 6px !important;
  }

  .report-body {
    display: flex !important;
    flex-direction: column !important;
    padding: 8px 14px !important;
  }

  /* Hide UI-only elements */
  .no-print,
  .report-actions,
  .report-print-btn,
  .report-close-btn,
  .disclaimer-bar,
  #disclaimer-bar,
  #disclaimer-modal,
  .report-footer,
  #report-footer {
    display: none !important;
  }

  /* Note / location chip backgrounds — neutral grey in print */
  .report-note {
    background: #f9f9f9 !important;
    border-left-color: #ccc !important;
  }
  .report-location-chip { background: #f3f3f3 !important; }
}
#print-report { display:none; position:fixed; inset:0; background:#f5f5f5; color:#1a1a2e; z-index:10000; overflow-y:auto; font-family:'Inter',Georgia,sans-serif; font-size:13px; }
.report-inner { max-width:900px; margin:0 auto; padding:20px 24px 48px; box-sizing:border-box; width:100%; }
.report-header { display:flex; flex-direction:column; gap:14px; border-bottom:3px solid #1a1a2e; padding-bottom:14px; margin-bottom:24px; }
.report-header-top { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.report-header-logo { height:40px !important; width:auto !important; max-width:200px; object-fit:contain; flex-shrink:0; }
.report-header-bottom { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.report-header-left h1 { font-size:22px; font-weight:800; color:#c9a84c; letter-spacing:-.02em; margin-bottom:4px; }
.report-header-left p { font-size:11px; color:#888; line-height:1.5; }
.report-actions { display:flex; gap:8px; flex-shrink:0; align-items:flex-start; }
.report-print-btn { padding:8px 18px; background:#1a1a2e; color:#fff; border:none; border-radius:6px; font-size:12px; font-weight:600; cursor:pointer; white-space:nowrap; }
.report-close-btn { padding:8px 14px; background:#e8e8e8; color:#444; border:none; border-radius:6px; font-size:12px; cursor:pointer; }
.report-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; width:100%; }
.report-card { background:#fff; border:1px solid #ddd; border-radius:8px; overflow:visible; break-inside:avoid; page-break-inside:avoid; min-width:0; box-shadow:0 1px 4px rgba(0,0,0,0.06); }
.report-card-header { display:flex; align-items:center; justify-content:space-between; padding:10px 14px 9px; border-bottom:1px solid #eee; gap:10px; overflow:hidden; background:#fafafa; }
.report-card-title { display:flex; align-items:center; gap:8px; font-size:15px; font-weight:800; color:#1a1a2e; letter-spacing:-.01em; min-width:0; }
.report-card-flag { font-size:20px; line-height:1; flex-shrink:0; }
.report-card-meta { font-size:11px; color:#888; font-weight:400; margin-top:1px; }
.report-card-score { font-size:18px; font-weight:900; padding:4px 10px; border-radius:6px; color:#fff; letter-spacing:-.02em; white-space:nowrap; flex-shrink:0; }
.report-body { padding:12px 16px 12px; display:flex; flex-direction:column; gap:0; }
.report-section { padding:0; }
.report-section-title { font-size:9px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#aaa; margin-bottom:8px; margin-top:14px; padding-bottom:5px; border-bottom:1px solid #eee; }
.report-section:first-child .report-section-title { margin-top:0; }
.report-row { display:flex; justify-content:space-between; align-items:baseline; font-size:11px; margin-bottom:3px; gap:6px; line-height:1.3; }
.report-row .rl { color:#666; flex-shrink:0; font-size:10.5px; min-width:110px; white-space:nowrap; }
.report-row .rv { font-weight:600; color:#1a1a2e; text-align:right; font-size:10.5px; }
.report-note { grid-column:1/-1; font-size:11.5px; color:#444; line-height:1.65; background:#f8f8f8; border-radius:6px; padding:10px 12px; border-left:3px solid #ddd; margin-top:14px; }
.report-locations { grid-column:1/-1; margin-top:12px; padding-top:12px; border-top:1px solid #eee; }
.report-locations-title { font-size:9px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#aaa; margin-bottom:7px; }
.report-locations-list { display:flex; flex-wrap:wrap; gap:6px; }
.report-location-chip { background:#f0f0f0; border-radius:4px; padding:3px 9px; font-size:11px; color:#444; }
.report-location-chip strong { color:#1a1a2e; }
.report-col-divider { grid-column:1/-1; height:1px; background:#f0f0f0; margin:12px 0 0; }
.report-footer { margin-top:12px; font-size:9px; color:#bbb; text-align:right; letter-spacing:.03em; }


/* ── SOURCE ATTRIBUTION ──────────────────────────────────────────────────── */
.src-line {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(240,230,211,0.3);
  margin-top: 9px;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.src-line a {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(122,179,224,0.88);
  text-decoration: none;
}
.src-line a:visited { color: rgba(122,179,224,0.88); }
.src-line a:hover   { color: rgba(174,212,245,0.95); }

.lc-src {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(240,230,211,0.3);
  margin-top: 4px;
  line-height: 1.6;
}
.lc-src a {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(122,179,224,0.88);
  text-decoration: none;
}
.lc-src a:visited { color: rgba(122,179,224,0.88); }
.lc-src a:hover   { color: rgba(174,212,245,0.95); }


/* ── CRIME SECTION ───────────────────────────────────────────────────────── */
.crime-list  { display:flex; flex-direction:column; gap:5px; margin-bottom:9px; }
.crime-item  { display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.crime-name  { flex:1; font-size:11px; color:rgba(240,230,211,0.7); }
.crime-risk  { display:flex; gap:2px; }
.crime-dot   { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.crime-trend { font-size:11px; font-weight:600; width:24px; text-align:center; flex-shrink:0; }


/* Environmental quality */
.env-sec { border-left: 2px solid rgba(114,217,143,0.22); }
.env-longterm {
  border: 1px solid rgba(114,217,143,0.14);
  background: rgba(114,217,143,0.045);
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 10px;
}
.env-loading {
  color: rgba(240,230,211,0.55);
  font-size: 11px;
  line-height: 1.55;
  background: rgba(255,255,255,0.035);
  border-radius: 6px;
  padding: 9px 10px;
}
.env-loading.warn { color: #f0c060; }
.env-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 10px;
}
.env-aqi {
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
}
.env-aqi-label {
  margin-top: 3px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
}
.env-meta {
  display: grid;
  gap: 2px;
  min-width: 118px;
  text-align: right;
}
.env-meta span,
.env-stat span {
  color: rgba(240,230,211,0.35);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.env-meta b {
  color: rgba(240,230,211,0.78);
  font-size: 10px;
  line-height: 1.25;
  margin-bottom: 4px;
}
.env-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-bottom: 9px;
}
.env-stat {
  background: rgba(255,255,255,0.04);
  border-radius: 6px;
  padding: 8px 10px;
}
.env-stat b {
  display: block;
  color: #f0e6d3;
  font-size: 13px;
  margin-top: 3px;
}
.env-note {
  color: rgba(240,230,211,0.56);
  font-size: 11px;
  line-height: 1.6;
  background: rgba(255,255,255,0.03);
  border-radius: 6px;
  padding: 8px 10px;
}


/* ── PIN TRAY / COMPARE BAR ─────────────────────────────────────────────── */
.pin-tray-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(240,230,211,0.4);
}
.pin-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: rgba(45,143,78,0.15);
  border: 1px solid rgba(45,143,78,0.35);
  border-radius: 4px;
  padding: 3px 8px;
  color: #72d98f;
}
.pin-chip button {
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(114,217,143,0.45);
  font-size: 11px;
  padding: 0;
  line-height: 1;
  transition: color .15s;
}
.pin-chip button:hover { color: #e88a76; }
.report-btn {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  transition: all .2s;
  background: rgba(122,179,224,0.1);
  color: #7ab3e0;
  border: 1px solid rgba(122,179,224,0.25);
}
.report-btn:hover:not(:disabled) {
  background: rgba(122,179,224,0.2);
  color: #aed4f5;
}
.report-btn:disabled { opacity: .3; cursor: default; }

.pin-tray {
  padding: 5px 18px;
  background: #0a1520;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  min-height: 30px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.pin-hint {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(240,230,211,0.22);
}


/* ── DISCLAIMER BAR ──────────────────────────────────────────────────────── */
.disclaimer-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: #08101a;
  border-top: 1px solid rgba(240,180,50,0.25);
  padding: 7px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 900;
  font-size: 10px;
  color: #c9a84c;
  line-height: 1.4;
}
.disclaimer-bar .d-icon { font-size: 13px; flex-shrink: 0; opacity: .7; }
.disclaimer-bar .d-text { flex: 1; }
.disclaimer-bar .d-close {
  flex-shrink: 0;
  cursor: pointer;
  font-size: 14px;
  color: rgba(240,230,211,0.25);
  padding: 2px 6px;
  border-radius: 3px;
  transition: color .15s;
  background: none;
  border: none;
  line-height: 1;
}
.disclaimer-bar .d-close:hover { color: rgba(240,230,211,0.6); }



/* ── TRAVEL COSTS SECTION ────────────────────────────────────────────────── */
.tcost-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}
.tcost-cell {
  background: rgba(255,255,255,0.04);
  border-radius: 6px;
  padding: 7px 8px;
  text-align: center;
}
.tcost-label {
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(240,230,211,0.35);
  margin-bottom: 4px;
}
.tcost-val {
  font-size: 15px;
  font-weight: 700;
  color: #f0e6d3;
  line-height: 1;
}
.tcost-sub {
  font-size: 8px;
  color: rgba(240,230,211,0.35);
  margin-top: 2px;
  letter-spacing: .04em;
}
.tcost-flight {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(122,179,224,0.07);
  border: 1px solid rgba(122,179,224,0.15);
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 10px;
}
.tcost-flight-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(240,230,211,0.4);
  margin-bottom: 3px;
}
.tcost-flight-val {
  font-size: 16px;
  font-weight: 700;
  color: #7ab3e0;
  line-height: 1;
}
.tcost-flight-sub {
  font-size: 8px;
  color: rgba(240,230,211,0.3);
  margin-top: 2px;
}
.tcost-flight-link {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #7ab3e0;
  text-decoration: none;
  padding: 4px 9px;
  border: 1px solid rgba(122,179,224,0.3);
  border-radius: 4px;
  white-space: nowrap;
  transition: background .15s;
}
.tcost-flight-link:hover { background: rgba(122,179,224,0.12); }
.tcost-note {
  font-size: 9px;
  color: rgba(240,230,211,0.3);
  line-height: 1.5;
  font-style: italic;
  margin-bottom: 6px;
}


/* ── TRAVEL COSTS SECTION ────────────────────────────────────────────────── */
.tcost-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}
.tcost-cell {
  background: rgba(255,255,255,0.04);
  border-radius: 7px;
  padding: 8px 10px;
  text-align: center;
}
.tcost-label {
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(240,230,211,0.35);
  margin-bottom: 4px;
}
.tcost-val {
  font-size: 14px;
  font-weight: 700;
  color: #f0e6d3;
  line-height: 1.2;
}
.tcost-sub {
  font-size: 8px;
  color: rgba(240,230,211,0.3);
  margin-top: 2px;
  letter-spacing: .04em;
}
.tcost-flight {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(122,179,224,0.07);
  border: 1px solid rgba(122,179,224,0.18);
  border-radius: 7px;
  padding: 9px 12px;
  margin-bottom: 9px;
  gap: 10px;
}
.tcost-flight-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(122,179,224,0.7);
  margin-bottom: 3px;
}
.tcost-flight-val {
  font-size: 16px;
  font-weight: 700;
  color: #7ab3e0;
  line-height: 1.2;
}
.tcost-flight-sub {
  font-size: 8.5px;
  color: rgba(122,179,224,0.5);
  margin-top: 2px;
}
.tcost-flight-link {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #7ab3e0;
  text-decoration: none;
  padding: 4px 10px;
  border: 1px solid rgba(122,179,224,0.3);
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all .15s;
}
.tcost-flight-link:hover {
  background: rgba(122,179,224,0.12);
  color: #aed4f5;
}
.tcost-note {
  font-size: 9px;
  color: rgba(240,230,211,0.28);
  line-height: 1.6;
  margin-bottom: 4px;
  font-style: italic;

  /* ── Budget selector — compact on mobile ──────────────────────────────────── */
  .budget-selector {
    margin-top: 2px;
  }
  .budget-selector label {
    font-size: 10px;
  }
  .budget-input {
    font-size: 16px;  /* ≥16px prevents Safari auto-zoom */
    width: 90px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   RESTORED + NEW CSS — sections lost during refactor + new styled components
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Topbar left ─────────────────────────────────────────────────────────────── */
.topbar-left { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.topbar-left h1 { font-family:'Playfair Display',serif; font-size:16px; color:#f0e6d3; font-weight:600; white-space:nowrap; }

/* ── Baseline country selector ──────────────────────────────────────────────── */
.home-selector { display:flex; align-items:center; gap:6px; }
.home-selector label { font-size:9px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:rgba(240,230,211,0.35); white-space:nowrap; }
.home-select {
  font-size:9px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  padding:3px 22px 3px 9px;
  border-radius:4px;
  cursor:pointer;
  border:1px solid rgba(122,179,224,0.25);
  background:rgba(122,179,224,0.08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='rgba(122,179,224,0.5)'/%3E%3C/svg%3E") no-repeat right 7px center;
  color:#7ab3e0;
  appearance:none; -webkit-appearance:none;
  max-width:170px;
  transition:all .2s;
}
.home-select:hover { background-color:rgba(122,179,224,0.15); border-color:rgba(122,179,224,0.4); }
.home-select:focus { outline:none; border-color:rgba(122,179,224,0.6); box-shadow:0 0 0 2px rgba(122,179,224,0.12); }
.home-select option { background:#ffffff; color:#1a2744; font-size:11px; font-weight:400; text-transform:none; letter-spacing:0; }

/* ── Search bar ──────────────────────────────────────────────────────────────── */
.search-wrap {
  position:relative; display:flex; align-items:center;
  border:1px solid rgba(122,179,224,0.25);
  border-radius:4px;
  background:rgba(122,179,224,0.06);
  transition:all .2s;
}
.search-wrap:focus-within { border-color:rgba(122,179,224,0.5); background:rgba(122,179,224,0.1); box-shadow:0 0 0 2px rgba(122,179,224,0.1); }
.search-input {
  background:none; border:none; outline:none;
  font-size:9px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:#7ab3e0; width:150px; padding:3px 24px 3px 9px;
}
.search-input:focus-visible {
  outline: 2px solid rgba(122,179,224,0.7);
  outline-offset: -2px;
  border-radius: 3px;
}
.search-input::placeholder { color:rgba(122,179,224,0.4); }
.search-clear {
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  background:none; border:none; cursor:pointer;
  color:rgba(122,179,224,0.4); font-size:12px; padding:0; line-height:1;
  transition:color .15s;
}
.search-clear:hover { color:#7ab3e0; }

/* ── Search results dropdown ────────────────────────────────────────────────── */
#search-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #0d1b2a;
  border: 1px solid rgba(122,179,224,0.22);
  border-radius: 6px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.45);
  z-index: 900;
  overflow: hidden;
  min-width: 180px;
}

.search-result-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgba(240,230,211,0.75);
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: background 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.search-result-item:last-child {
  border-bottom: none;
}
.search-result-item:hover,
.search-result-item.active {
  background: rgba(122,179,224,0.10);
  color: #f0e6d3;
}

.sr-flag {
  font-size: 13px;
  flex-shrink: 0;
  line-height: 1;
}
.sr-name {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}
.sr-parent {
  display: block;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .05em;
  opacity: 0.55;
  text-transform: uppercase;
  white-space: nowrap;
}
.sr-tier {
  margin-left: auto;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  color: #fff;
  letter-spacing: .04em;
  flex-shrink: 0;
}

/* Light mode overrides */
body.light-mode #search-results {
  background: #FAF7EF;
  border-color: var(--hs-soft-border);
  box-shadow: 0 6px 20px rgba(7,26,51,0.10);
}
body.light-mode .search-result-item {
  color: var(--hs-haven-navy);
  border-bottom-color: var(--hs-soft-border);
}
body.light-mode .search-result-item:hover,
body.light-mode .search-result-item.active {
  background: rgba(1,22,61,0.06);
}


/* ── Pin tray ─────────────────────────────────────────────────────────────────── */
.pin-tray {
  padding:5px 18px; background:#0a1520;
  border-bottom:1px solid rgba(255,255,255,0.05);
  min-height:30px; display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.pin-tray-label { font-size:9px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:rgba(240,230,211,0.4); }
.pin-hint { font-size:9px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:rgba(240,230,211,0.22); }
.pin-chip {
  display:flex; align-items:center; gap:5px;
  font-size:9px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  background:rgba(0,200,83,0.12); border:1px solid rgba(0,200,83,0.3);
  border-radius:4px; padding:3px 8px; color:#00c853;
}
.pin-chip button { background:none; border:none; cursor:pointer; color:rgba(0,200,83,0.4); font-size:11px; padding:0; line-height:1; transition:color .15s; }
.pin-chip button:hover { color:#ff1744; }

/* ── Pin & Report buttons ────────────────────────────────────────────────────── */
.report-btn {
  font-size:9px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  padding:3px 10px; border-radius:4px; cursor:pointer; white-space:nowrap; transition:all .2s;
  background:rgba(122,179,224,0.1); color:#7ab3e0; border:1px solid rgba(122,179,224,0.25);
}
.report-btn:hover:not(:disabled) { background:rgba(122,179,224,0.2); color:#aed4f5; }
.report-btn:disabled { opacity:.3; cursor:default; }

/* ── Source attribution lines ────────────────────────────────────────────────── */
.src-line {
  font-size:9px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(240,230,211,0.3); margin-top:9px;
  display:flex; align-items:center; gap:5px; flex-wrap:wrap;
}
.src-line a { font-size:9px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(122,179,224,0.88); text-decoration:none; }
.src-line a:visited { color:rgba(122,179,224,0.88); }
.src-line a:hover   { color:rgba(174,212,245,0.95); }
.lc-src { font-size:9px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:rgba(240,230,211,0.3); margin-top:4px; line-height:1.6; }
.lc-src a { font-size:9px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(122,179,224,0.88); text-decoration:none; }
.lc-src a:visited { color:rgba(122,179,224,0.88); }
.lc-src a:hover   { color:rgba(174,212,245,0.95); }

/* ── Safety bar ──────────────────────────────────────────────────────────────── */
.sbar { height:6px; border-radius:3px; background:rgba(255,255,255,0.08); margin:6px 0 4px; overflow:hidden; }
.sbar-fill { height:100%; border-radius:3px; transition:width .4s ease; }
.sbar-ends { display:flex; justify-content:space-between; font-size:8px; color:rgba(240,230,211,0.3); letter-spacing:.04em; margin-top:2px; }

/* ── Crime section ───────────────────────────────────────────────────────────── */
.crime-list  { display:flex; flex-direction:column; gap:5px; margin-bottom:9px; }
.crime-item  { display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.crime-name  { flex:1; font-size:11px; color:rgba(240,230,211,0.7); }
.crime-risk  { display:flex; gap:2px; }
.crime-dot   { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.crime-trend { font-size:11px; font-weight:600; width:24px; text-align:center; flex-shrink:0; }

/* ── Travel cost section ─────────────────────────────────────────────────────── */
.tcost-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-bottom:10px; }
.tcost-cell { background:rgba(255,255,255,0.04); border-radius:7px; padding:8px 10px; text-align:center; }
.tcost-label { font-size:8.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:rgba(240,230,211,0.35); margin-bottom:4px; }
.tcost-val { font-size:14px; font-weight:700; color:#f0e6d3; line-height:1.2; }
.tcost-sub { font-size:8px; color:rgba(240,230,211,0.3); margin-top:2px; letter-spacing:.04em; }
.tcost-flight { display:flex; align-items:center; justify-content:space-between; background:rgba(122,179,224,0.07); border:1px solid rgba(122,179,224,0.18); border-radius:7px; padding:9px 12px; margin-bottom:9px; gap:10px; }
.tcost-flight-label { font-size:9px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:rgba(122,179,224,0.7); margin-bottom:3px; }
.tcost-flight-val { font-size:16px; font-weight:700; color:#7ab3e0; line-height:1.2; }
.tcost-flight-sub { font-size:8.5px; color:rgba(122,179,224,0.5); margin-top:2px; }
.tcost-flight-link { font-size:9px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:#7ab3e0; text-decoration:none; padding:4px 10px; border:1px solid rgba(122,179,224,0.3); border-radius:4px; white-space:nowrap; flex-shrink:0; transition:all .15s; }
.tcost-flight-link:hover { background:rgba(122,179,224,0.12); color:#aed4f5; }
.tcost-note { font-size:9px; color:rgba(240,230,211,0.28); line-height:1.6; margin-bottom:4px; font-style:italic; }

/* ── Composite score display ─────────────────────────────────────────────────── */
.cscore { text-align:right; }
.cscore-val { font-size:29px; font-weight:800; line-height:1; letter-spacing:-.02em; }
.cscore-stars { font-size:10px; margin-top:2px; }
.cscore-label { font-size:8px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:rgba(240,230,211,0.35); margin-top:1px; }

/* ── Country local time clock ────────────────────────────────────────────────── */
.country-clock { display:flex; flex-direction:column; align-items:flex-end; line-height:1.3; margin-bottom:6px; }
.clock-time { font-size:15px; font-weight:700; color:#f0e6d3; letter-spacing:.02em; font-variant-numeric:tabular-nums; }
.clock-date { font-size:9px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:rgba(240,230,211,0.4); }

/* ── Disclaimer bar ──────────────────────────────────────────────────────────── */
.disclaimer-bar { position:fixed; bottom:0; left:0; right:0; background:rgba(26,39,68,0.95); border-top:1px solid rgba(240,180,50,0.25); padding:7px 16px; display:flex; align-items:center; gap:10px; z-index:900; font-size:10px; color:#c9a84c; line-height:1.4; }
.disclaimer-bar .d-icon { font-size:13px; flex-shrink:0; opacity:.7; }
.disclaimer-bar .d-text { flex:1; }
.disclaimer-bar .d-close { flex-shrink:0; cursor:pointer; font-size:14px; color:rgba(201,168,76,0.45); padding:2px 6px; border-radius:3px; transition:color .15s; background:none; border:none; line-height:1; }
.disclaimer-bar .d-close:hover { color:rgba(240,230,211,0.6); }




/* ── Crime section ───────────────────────────────────────────────────────────── */
.crime-list  { display:flex; flex-direction:column; gap:5px; margin-bottom:9px; }
.crime-item  { display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.crime-name  { flex:1; font-size:11px; color:rgba(240,230,211,0.7); }
.crime-risk  { display:flex; gap:2px; }
.crime-dot   { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.crime-trend { font-size:11px; font-weight:600; width:24px; text-align:center; flex-shrink:0; }

/* ── Crime section ───────────────────────────────────────────────────── */
.crime-list  { display:flex; flex-direction:column; gap:5px; margin-bottom:9px; }
.crime-item  { display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.crime-name  { flex:1; font-size:11px; color:rgba(240,230,211,0.7); }
.crime-risk  { display:flex; gap:2px; }
.crime-dot   { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.crime-trend { font-size:11px; font-weight:600; width:24px; text-align:center; flex-shrink:0; }

/* ── COUNTRY LOCAL TIME CLOCK ────────────────────────────────────────────── */
.country-clock { display:flex; flex-direction:column; align-items:flex-end; line-height:1.3; margin-bottom:6px; }
.clock-time { font-size:15px; font-weight:700; color:#f0e6d3; letter-spacing:.02em; font-variant-numeric:tabular-nums; }
.clock-date { font-size:9px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:rgba(240,230,211,0.4); }

/* ── BUDGET INPUT IN TOPBAR ─────────────────────────────────────────────────── */
.budget-selector {
  display: flex;
  align-items: center;
  gap: 6px;
}
.budget-selector label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(240,230,211,0.35);
  white-space: nowrap;
}
.budget-wrap {
  display: flex;
  align-items: center;
  gap: 3px;
  border: 1px solid rgba(122,179,224,0.25);
  border-radius: 4px;
  background: rgba(122,179,224,0.06);
  padding: 2px 7px;
  transition: all .2s;
}
.budget-wrap:focus-within {
  border-color: rgba(122,179,224,0.5);
  background: rgba(122,179,224,0.1);
  box-shadow: 0 0 0 2px rgba(122,179,224,0.1);
}
.budget-currency, .budget-unit {
  font-size: 10px;
  font-weight: 600;
  color: #7ab3e0;
  letter-spacing: .04em;
}
.budget-input {
  background: none;
  border: none;
  outline: none;
  font-size: 11px;
  font-weight: 600;
  color: #7ab3e0;
  width: 72px;
  text-align: right;
  -moz-appearance: textfield;
}
.budget-input:focus-visible {
  outline: 2px solid rgba(122,179,224,0.7);
  outline-offset: 2px;
  border-radius: 3px;
}
.budget-input::placeholder { color: rgba(122,179,224,0.35); }
.budget-input::-webkit-outer-spin-button,
.budget-input::-webkit-inner-spin-button { -webkit-appearance: none; }

/* ── BUDGET SECTION IN SIDEBAR ───────────────────────────────────────────────── */
.budget-sec { border-left: 2px solid rgba(122,179,224,0.3); }
.budget-pp {
  margin-bottom: 10px;
  padding: 8px 10px;
  background: rgba(122,179,224,0.06);
  border-radius: 6px;
}
.budget-pp-eq {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 3px;
}
.budget-pp-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
}
.budget-pp-usd {
  margin-bottom: 5px;
  color: rgba(122,179,224,0.86);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
}
.budget-pp-usd.warn {
  color: #f0a020;
}
.budget-pp-approx {
  margin-top: 6px;
  color: rgba(255,255,255,0.48);
  font-size: 9px;
  line-height: 1.35;
}
.budget-tier {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.budget-tier-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 4px;
  border: 1px solid;
  white-space: nowrap;
}
.budget-tier-note {
  font-size: 10px;
  color: rgba(240,230,211,0.45);
}
.budget-bars { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.budget-bar-row {
  display: grid;
  grid-template-columns: 70px 90px 1fr;
  align-items: center;
  gap: 6px;
}
.budget-bar-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(240,230,211,0.4);
}
.budget-bar-amt {
  font-size: 11px;
  font-weight: 600;
  text-align: right;
}
.budget-bar-track {
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}
.budget-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width .4s ease;
}

/* ── BUDGET SUMMARY IN REPORT ────────────────────────────────────────────────── */
.report-budget-line {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  background: rgba(122,179,224,0.08);
  border-bottom: 1px solid rgba(122,179,224,0.15);
  font-size: 13px;
  color: #f0e6d3;
}



/* ── BUDGET CARD IN REPORT ───────────────────────────────────────────────────── */
.report-budget-card {
  grid-column: 1 / -1;
  background: #f4f8ff;
  border: 1px solid #d0e4f7;
  border-left: 3px solid #4a90d9;
  border-radius: 6px;
  padding: 8px 12px;
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}
.report-budget-card-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #555;
  margin-bottom: 0;
  white-space: nowrap;
}
.report-budget-card-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.report-budget-card-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 2px 0;
}
.report-budget-card-label {
  font-size: 11px;
  font-weight: 500;
  color: #666;
  white-space: nowrap;
  min-width: 110px;
}
.report-budget-card-val {
  font-size: 12px;
  font-weight: 700;
  color: #1a1a2e;
  line-height: 1.3;
}
.report-budget-card-note {
  flex-basis: 100%;
  color: #667487;
  font-size: 10px;
  line-height: 1.35;
}
@media print {
  .report-budget-card { break-inside: avoid; }
}

/* ── Budget clear button ─────────────────────────────────────────────────────── */
.budget-clear {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(122,179,224,0.45);
  font-size: 11px;
  padding: 0 2px;
  line-height: 1;
  align-items: center;
  justify-content: center;
  transition: color .15s;
  flex-shrink: 0;
}
.budget-clear:hover { color: #ff1744; }




/* ── Report 2x2 grid ─────────────────────────────────────────────────────────── */
@media print {
  
  .report-card { break-inside: avoid; }
}

/* ── Report budget badge in header ───────────────────────────────────────────── */
.report-budget-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  background: #f4f8ff;
  border: 1px solid #d0e4f7;
  border-left: 3px solid #4a90d9;
  border-radius: 6px;
  padding: 6px 14px;
}
.report-budget-badge-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #999;
}
.report-budget-badge-amount {
  font-size: 20px;
  font-weight: 800;
  color: #1a1a2e;
  letter-spacing: -.02em;
}
.report-budget-badge-unit {
  font-size: 11px;
  color: #777;
  font-weight: 400;
}

/* ── Report clear button ─────────────────────────────────────────────────────── */
.report-clear-btn {
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid rgba(255,65,68,0.35);
  background: rgba(255,65,68,0.08);
  color: #ff4144;
  transition: all .2s;
}
.report-clear-btn:hover {
  background: rgba(255,65,68,0.18);
  border-color: #ff4144;
}

/* ── Cross-browser emoji / flag rendering ────────────────────────────────────── */
.cflag,
.report-card-flag,
.pin-chip .flag-emoji {
  font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",
               "Twemoji Mozilla","EmojiOne Color","Android Emoji",sans-serif;
  font-style: normal;
  font-variant-emoji: emoji;
}

/* ── Pin tray clear button ───────────────────────────────────────────────────── */
.pin-clear-btn {
  display: none;
  align-items: center;
  gap: 4px;
  background: none;
  border: 1px solid rgba(255,100,100,0.35);
  border-radius: 4px;
  color: rgba(255,100,100,0.7);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 9px;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.pin-clear-btn:hover {
  background: rgba(255,100,100,0.12);
  color: #ff6464;
  border-color: rgba(255,100,100,0.6);
}

/* ── TWEMOJI IMAGE SIZING ─────────────────────────────────────────────────────
   Twemoji replaces emoji text with <img class="emoji"> tags.
   Size them correctly for each context.                                        */

/* Base emoji sizing */
img.emoji {
  height: 1em;
  width: 1em;
  margin: 0 0.05em 0 0.1em;
  vertical-align: -0.1em;
  display: inline-block;
}

/* Sidebar flag (larger) */
.cflag img.emoji {
  height: 1.4em;
  width: 1.4em;
  vertical-align: -0.2em;
  margin: 0 4px 0 0;
}

/* Report card flag (large) */
.report-card-flag img.emoji {
  height: 1.6em;
  width: 1.6em;
  vertical-align: -0.3em;
}

/* Pin tray chip flag */
.flag-emoji img.emoji,
.pin-chip img.emoji {
  height: 1.1em;
  width: 1.1em;
  vertical-align: -0.15em;
}

/* Climate grid weather icons */
.ico img.emoji {
  height: 1.2em;
  width: 1.2em;
  vertical-align: -0.15em;
}

/* Section title dots and icons */
.sec-title img.emoji,
.sec img.emoji {
  height: 1em;
  width: 1em;
  vertical-align: -0.1em;
}

/* Spots / retirement locations */
.sn img.emoji,
.spot img.emoji {
  height: 1em;
  width: 1em;
  vertical-align: -0.1em;
}

/* Transit section icons */
img.emoji[alt="🚂"],
img.emoji[alt="🚌"],
img.emoji[alt="🚶"] {
  height: 1em;
  width: 1em;
}

/* Budget section icon */
img.emoji[alt="💰"],
img.emoji[alt="$"] {
  height: 1em;
  width: 1em;
}

/* Print: ensure emoji images print correctly */
@media print {
  img.emoji {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* ── Firefox number input spin button hide ────────────────────────────────── */
.budget-input[type=number] {
  -moz-appearance: textfield;
}

/* ── Firefox scrollbar styling ────────────────────────────────────────────── */
.sidebar, .report-inner {
  scrollbar-width: thin;
  scrollbar-color: rgba(122,179,224,0.3) transparent;
}

/* ── Safari mobile 100vh fix ──────────────────────────────────────────────── */
.main {
  flex: 1;
  min-height: 0;
}

/* ── Print color fix for Firefox/Safari ───────────────────────────────────── */
@media print {
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  .report-card { box-shadow: none; border: 1px solid #ddd; }
  .report-card-score { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ── Sheet chrome — permanent mobile handle ─────────────────────────────────── */
/* Lives inside sidebar but above sidebar-content; never wiped by innerHTML */
#sheet-chrome {
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(13,27,42,0.97);
  flex-shrink: 0;
}

/* ── Sidebar content area ────────────────────────────────────────────────────── */
#sidebar-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}





/* ════════════════════════════════════════════════════════════════════════
   FROZEN PANEL HEADER
   #panel-frozen-zone is a direct child of .sidebar (.sidebar is the
   scroll container: overflow-y:scroll, height:100%).
   position:sticky on a direct child of the scroll container works.
   ════════════════════════════════════════════════════════════════════════ */
#panel-frozen-zone {
  position: sticky;
  top: 0;
  z-index: 10;
  display: none;
  flex-shrink: 0;
  background: #0d1b2a;
  border-bottom: 1px solid rgba(212,175,55,0.45);
}
#panel-frozen-zone:not(:empty) { display: block; }

.hero-frozen {
  padding: 10px 16px 10px;
}

/* Light mode */
body.light-mode #panel-frozen-zone {
  background: var(--hs-warm-cream) !important;
  border-bottom-color: rgba(212,175,55,0.55) !important;
  box-shadow: 0 2px 8px rgba(7,26,51,0.07);
}
/* Clock colors in light mode — both sidebar and frozen header */
body.light-mode .clock-time {
  color: var(--hs-haven-navy) !important;
}
body.light-mode .clock-date {
  color: rgba(1,22,61,0.52) !important;
}

/* a11y dark */
body.a11y #panel-frozen-zone {
  background: #05080d !important;
  border-bottom-color: rgba(255,255,255,0.18) !important;
}
/* a11y light */
body.a11y.light-mode #panel-frozen-zone {
  background: var(--hs-warm-cream) !important;
  border-bottom-color: rgba(1,22,61,0.18) !important;
}
/* Mobile: un-sticky — mobile uses sheet scroll model */
@media screen and (max-width: 768px) {
  #panel-frozen-zone {
    position: relative !important;
    top: auto !important;
    z-index: auto !important;
  }
}

/* Fix Canadian province description bleeding outside panel.
   The .hero overview text needs to be contained. */
.cinfo .hero {
  overflow: hidden;
  word-wrap: break-word;
  overflow-wrap: break-word;
}


/* ── FCDO dual-advisory cell ─────────────────────────────────────────────────── */
.adv-cell-wide {
  min-width: 160px;
}
.adv-dual-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 2px 0 3px;
}
.adv-source-block {
  flex: 1;
  min-width: 0;
}
.adv-source-label {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(240,230,211,0.45);
  margin-bottom: 2px;
  white-space: nowrap;
}
.adv-src-link {
  color: rgba(122,179,224,0.6);
  text-decoration: none;
  font-size: 8px;
  margin-left: 2px;
  vertical-align: middle;
}
.adv-src-link:hover { color: rgba(122,179,224,1); }
.adv-label-sm {
  font-size: 8px;
  color: rgba(240,230,211,0.42);
  margin-top: 1px;
  line-height: 1.25;
  white-space: normal;
}
.adv-divider {
  width: 1px;
  background: rgba(255,255,255,0.1);
  align-self: stretch;
  flex-shrink: 0;
  margin: 2px 0;
}
/* Consensus badge */
.adv-consensus {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 2px 6px;
  border-radius: 4px;
  margin-top: 3px;
  display: inline-block;
}
.adv-consensus-agree    { background: rgba(0,200,83,0.15);  color: #4cde8a; }
.adv-consensus-near     { background: rgba(255,145,0,0.13); color: #ff9100; }
.adv-consensus-diverge  { background: rgba(255,82,82,0.13); color: #ff7070;
                           border: 1px solid rgba(255,82,82,0.25); }

/* Light mode */
body.light-mode .adv-source-label { color: rgba(7,26,51,0.45); }
body.light-mode .adv-label-sm     { color: rgba(7,26,51,0.42); }
body.light-mode .adv-src-link     { color: rgba(1,22,61,0.5); }
body.light-mode .adv-src-link:hover { color: var(--hs-haven-navy); }
body.light-mode .adv-divider      { background: rgba(1,22,61,0.12); }
body.light-mode .adv-consensus-agree   { background: rgba(0,160,60,0.10); color: #1a6e38; }
body.light-mode .adv-consensus-near    { background: rgba(180,100,0,0.10); color: #7a4800; }
body.light-mode .adv-consensus-diverge { background: rgba(180,0,0,0.08);  color: #8b0000;
                                          border-color: rgba(180,0,0,0.18); }

/* MOBILE DRAWER SYSTEM */
/* Hidden by default on all viewports */
.mobile-tab-strip { display: none; }
.mobile-drawer    { display: none; }

@media screen and (max-width: 768px) {
  /* Hide desktop topbar-row2 and standalone pin-tray on mobile */
  .topbar-row2 { display: none !important; }
  .pin-tray    { display: none !important; }

  /* Show tab strip */
  .mobile-tab-strip {
    display: flex;
    gap: 6px;
    padding: 4px 10px 6px;
    flex-shrink: 0;
  }
  .mtab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 5px 6px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    color: rgba(240,230,211,0.65);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .02em;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, color .15s, border-color .15s;
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    appearance: none;
  }
  .mtab-icon { font-size: 12px; }
  .mtab-label { font-size: 10px; }
  .mtab.active {
    background: rgba(212,175,55,0.15);
    border-color: rgba(212,175,55,0.5);
    color: var(--hs-bronze-gold);
  }
  .mtab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: var(--hs-bronze-gold);
    color: #0d1b2a;
    border-radius: 8px;
    font-size: 9px;
    font-weight: 800;
    margin-left: 2px;
  }
  /* Drawer: closed = zero height, open = auto */
  .mobile-drawer {
    display: block;
    max-height: 0;
    overflow: hidden;
    transition: max-height .28s cubic-bezier(0.4,0,0.2,1);
    flex-shrink: 0;
    position: relative;
    border-bottom: 1px solid transparent;
  }
  .mobile-drawer.open {
    max-height: 440px;
    border-bottom-color: rgba(255,255,255,0.07);
  }
  .mdrawer-close {
    position: absolute;
    bottom: 8px;
    right: 10px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px;
    color: rgba(240,230,211,0.6);
    font-size: 11px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    z-index: 2;
  }
  .mdrawer-close:active { background: rgba(255,255,255,0.15); color: #f0e6d3; }
  .mdrawer-inner { padding: 10px 40px 14px 12px; }
  /* Household drawer layout */
  #mdrawer-household .tbar-section-label { display: none; }
  #mdrawer-household .tbar-group { display: block !important; }
  #mdrawer-household .tbar-group-fields {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px 10px;
  }
  #mdrawer-household .tbar-field { width: auto !important; }
  #mdrawer-household .home-select,
  #mdrawer-household .budget-currency-select { font-size: 14px !important; width: 100% !important; }
  #mdrawer-household .budget-wrap { width: 100% !important; }
  #mdrawer-household .budget-input { font-size: 16px !important; width: 100% !important; }
  /* Search drawer layout */
  #mdrawer-search .tbar-section-label,
  #mdrawer-search label.tbar-field-label { display: none; }
  #mdrawer-search .tbar-group { display: block !important; }
  #mdrawer-search .tbar-group-fields { display: flex !important; flex-direction: column; gap: 8px; }
  #mdrawer-search .tbar-search-field,
  #mdrawer-search .search-wrap { width: 100% !important; }
  #mdrawer-search .search-input { width: 100% !important; font-size: 16px !important; box-sizing: border-box; }
  #mdrawer-search .tbar-filter-field > div { display: flex; gap: 6px; flex-wrap: wrap; }
  /* Compare drawer — pin-tray inside */
  .mdrawer-compare-inner { padding: 8px 40px 10px 12px; }
  .mdrawer-compare-inner .pin-tray {
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    min-height: unset !important;
    margin: 0 !important;
  }
  /* Light mode */
  body.light-mode .mtab {
    background: rgba(1,22,61,0.05);
    border-color: rgba(1,22,61,0.14);
    color: rgba(7,26,51,0.6);
  }
  body.light-mode .mtab.active {
    background: rgba(212,175,55,0.12);
    border-color: rgba(212,175,55,0.4);
    color: #7a4b00;
  }
  body.light-mode .mdrawer-close {
    background: rgba(1,22,61,0.06);
    border-color: rgba(1,22,61,0.14);
    color: rgba(7,26,51,0.55);
  }
  /* a11y */
  body.a11y .mtab {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.75);
    font-size: 13px;
    min-height: 44px;
  }
  body.a11y .mtab.active {
    background: rgba(212,175,55,0.2);
    border-color: rgba(212,175,55,0.6);
    color: #f0c040;
  }
  body.a11y .mdrawer-close {
    width: 36px;
    height: 36px;
    font-size: 14px;
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.25);
    color: #ffffff;
  }
  body.a11y.light-mode .mtab {
    background: rgba(1,22,61,0.07) !important;
    border-color: rgba(1,22,61,0.20) !important;
    color: var(--hs-haven-navy) !important;
  }
  body.a11y.light-mode .mtab.active {
    background: rgba(212,175,55,0.18) !important;
    border-color: rgba(212,175,55,0.55) !important;
    color: #6b3e00 !important;
  }
  body.a11y.light-mode .mdrawer-close {
    background: rgba(1,22,61,0.07) !important;
    border-color: rgba(1,22,61,0.20) !important;
    color: var(--hs-haven-navy) !important;
  }
}
/* End mobile drawer system */

/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  MOBILE LAYOUT  ≤ 768px  —  single authoritative block                  ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */


/* ── Leaflet mobile touch fixes ───────────────────────────────────────────────── */


/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE  ≤768px  —  single authoritative block
   ═══════════════════════════════════════════════════════════════════════════ */
@media screen and (max-width: 768px) {
  .desktop-sidebar-tab { display: none !important; }

  /* Page shell */
  html, body { height: 100%; overflow: hidden; }

  /* Topbar: stack to two rows */
  .topbar {
    flex-direction: column; align-items: stretch;
    padding: 7px 12px; gap: 6px; overflow: visible; flex-shrink: 0;
  }
  .topbar-left h1 { font-size: 14px; }
  .topbar-left p  { display: none; }
  .home-selector  { margin-top: 2px; }
  .home-select    { font-size: 12px; }
  .topbar-right   { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
  .legend         { display: none; }
  .search-input   { width: 130px; font-size: 16px; }
  
  .live-badge     { font-size: 9px; padding: 2px 5px; }
  .pin-tray       { flex-shrink: 0; }

  /* Map container */
  .main { position: relative; flex: 1; min-height: 0; overflow: hidden; }
  #rm-map {
    position: absolute; inset: 0;
    width: 100% !important; height: 100% !important;
    -webkit-user-select: none; user-select: none;
  }
  .destination-table-view {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    flex: none;
    padding-bottom: 64px;
  }
  .table-shell {
    min-width: 900px;
    padding: 12px;
  }
  .leaflet-interactive { -webkit-tap-highlight-color: transparent; }

  /* ── Bottom sheet ──────────────────────────────────────────────────────────
     position:fixed escapes .main overflow:hidden.
     Three states: peek (56px strip), mid (halfway), open (full).
  ──────────────────────────────────────────────────────────────────────────── */
  .sidebar {
    position: fixed !important;
    bottom: 0; left: 0; right: 0;
    width: 100% !important;
    /* Anchor the top of the sheet below the header.
       --sheet-top is measured by JS after layout paint.
       Fallback 156px = two-row topbar (~90px) + pin-tray (~38px) + 28px buffer. */
    top: var(--sheet-top, 200px);
    height: auto;
    max-height: none;
    display: flex !important;
    flex-direction: column;
    background: #0d1b2a !important;
    border-top: 1px solid rgba(255,255,255,0.12);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 40px rgba(0,0,0,0.5);
    transform: translateY(100%);
    transition: transform 0.32s cubic-bezier(0.32,0.72,0,1);
    z-index: 700;
    overflow: hidden;
    pointer-events: none;
  }
  /* In peek state sidebar is off-screen except 56px — map taps pass through */
  .sidebar.sheet-peek { transform: translateY(calc(100% - 56px)); }
  /* Only the chrome strip is interactive in peek state */
  .sidebar.sheet-peek #sheet-chrome { pointer-events: auto; }

  /* Mid and open: full interaction */
  .sidebar.sheet-mid  { transform: translateY(35%); pointer-events: auto; }
  .sidebar.sheet-open { transform: translateY(0);   pointer-events: auto; }

  /* ── Sheet chrome — always visible 56px strip at top of sheet ─────────── */
  #sheet-chrome {
    flex-shrink: 0;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 8px 0 4px;
    background: #0d1b2a;
    border-radius: 16px 16px 0 0;
    touch-action: none;
    cursor: grab;
  }

  /* Drag pill */
  .drag-handle-bar {
    width: 36px; height: 4px;
    background: rgba(255,255,255,0.3);
    border-radius: 2px;
    margin-bottom: 6px;
  }
  /* Hide duplicate handle */
  .sheet-handle { display: none !important; }

  /* Peek label */
  .sheet-peek-tab {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 2px 16px 6px;
    font-size: 12px; font-weight: 600;
    color: rgba(240,230,211,0.65);
    -webkit-tap-highlight-color: transparent;
  }

  /* ── Scrollable content area ───────────────────────────────────────────── */
  #sidebar-content {
    flex: 1;
    min-height: 0;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    background: #0d1b2a;
    /* Extra bottom padding so last section (budget) is always reachable */
    padding-bottom: 32px;
  }

  /* Hide desktop close button */
  
  /* Idle state */
  .sidebar .idle {
    height: auto !important;
    padding: 16px 20px 32px;
    gap: 8px;
    justify-content: flex-start;
  }

  /* Font scaling inside panels */
  #sidebar-content .sec-title { font-size: 10px; }
  #sidebar-content .sl        { font-size: 10px; }
  #sidebar-content .sv        { font-size: 14px; }
  #sidebar-content .sv.small  { font-size: 12px; }
  #sidebar-content .overview  { font-size: 13px; }
  #sidebar-content .src-line  { font-size: 10px; }

  /* Disclaimer */
  .disclaimer-bar { font-size: 11px; padding: 7px 12px; color: #c9a84c; }


  /* When sheet is open/mid, hide the peek tab (bar replaces it) */
  .sidebar.sheet-open .sheet-peek-tab,
  .sidebar.sheet-mid  .sheet-peek-tab { display: none; }

  /* Panel header bar on mobile — flush, no top radius gap */
  .panel-header-bar {
    border-radius: 0;
    border-top: none;
  }

  /* Budget selector — compact on mobile */
  .budget-selector { display: flex; flex-direction: row; align-items: center; gap: 6px; }
  .budget-selector label { font-size: 10px; white-space: nowrap; }
  .budget-input { font-size: 16px !important; width: 90px !important; }
}

/* ════════════════════════════════════════════════════════════════════════════
   REPORT — mobile layout  ≤ 768px
   ════════════════════════════════════════════════════════════════════════════ */
@media screen and (max-width: 768px) {

  /* Overlay fills the screen */
  #print-report {
    padding: 0 !important;
  }
  .report-inner {
    padding: 12px 14px 40px !important;
    max-width: 98vw !important;
  }

  /* Header: stack vertically */
  .report-header {
    gap: 10px;
    padding-bottom: 10px;
    margin-bottom: 14px;
  }
  .report-header-top, .report-header-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .report-header-logo { height: 30px; }
  .report-header-left h1 { font-size: 17px !important; }
  .report-header-left p  { font-size: 10px !important; }
  .report-actions { flex-wrap: wrap; gap: 6px; }
  .report-print-btn, .report-close-btn, .report-clear-btn {
    font-size: 11px !important;
    padding: 6px 12px !important;
  }

  /* Budget badge: smaller */
  .report-budget-badge { padding: 8px 12px !important; }
  .report-budget-badge-amount { font-size: 16px !important; }

  /* Grid: single column on mobile */
  .report-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Card: compact */
  .report-card {
    border-radius: 8px !important;
  }
  .report-card-header {
    padding: 10px 14px 9px !important;
  }
  .report-card-title {
    font-size: 15px !important;
  }
  .report-card-flag { font-size: 20px !important; }
  .report-card-score {
    font-size: 19px !important;
    padding: 4px 10px !important;
  }
  .report-card-meta { font-size: 10px !important; }

  /* Body: single column instead of 3-col grid */
  .report-body {
    padding: 10px 12px 10px !important;
  }
  .report-col-divider { display: none !important; }

  /* Row labels and values */
  .report-section-title { font-size: 8px !important; margin-top: 10px !important; }
  .report-row { font-size: 11px !important; margin-bottom: 4px !important; }
  .report-row .rl { font-size: 10px !important; min-width: 70px !important; }
  .report-row .rv { font-size: 11px !important; }

  /* Note and locations */
  .report-note {
    font-size: 10.5px !important;
    padding: 8px 10px !important;
  }
  .report-locations { margin-top: 8px !important; padding-top: 8px !important; }
  .report-location-chip {
    font-size: 10px !important;
    padding: 2px 7px !important;
  }

  /* Budget card */
  .report-budget-card { padding: 10px 12px !important; }
  .report-budget-card-row { gap: 16px !important; }
  .report-budget-card-val { font-size: 11px !important; }

  /* Disclaimer and footer */
    .report-footer { font-size: 8px !important; }
}

/* Sheet position anchor — sits at bottom of pin-tray, sets --sheet-top */
#sheet-anchor {
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

/* ════════════════════════════════════════════════════════════════════════════
   COMPARISON MATRIX — Page 2 of report
   ════════════════════════════════════════════════════════════════════════════ */

.report-matrix-section {
  margin-top: 36px;
  page-break-before: always; /* print: new page */
}

.report-matrix-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.report-matrix-divider::before,
.report-matrix-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #ddd;
}
.report-matrix-divider-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #aaa;
  white-space: nowrap;
}

/* Scrollable wrapper for narrow screens */
.matrix-scroll-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
}

.matrix-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  min-width: 700px;
}

.matrix-caption {
  caption-side: bottom;
  font-size: 9px;
  color: #bbb;
  text-align: right;
  padding: 6px 8px 2px;
  letter-spacing: .03em;
}

/* Header */
.matrix-th {
  background: #1a1a2e;
  color: #fff;
  padding: 8px 10px 7px;
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  position: sticky;
  top: 0;
  border-right: 1px solid rgba(255,255,255,0.08);
}
.matrix-th:last-child { border-right: none; }

.matrix-name-col {
  text-align: left !important;
  min-width: 140px;
  position: sticky;
  left: 0;
  z-index: 2;
}
.matrix-th.matrix-name-col {
  z-index: 3;
  background: #1a1a2e;
}

.matrix-col-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .03em;
}
.matrix-col-sub {
  font-size: 8px;
  font-weight: 400;
  opacity: .6;
  margin-top: 1px;
}

/* Cells */
.matrix-td {
  padding: 7px 10px;
  text-align: center;
  border-bottom: 1px solid #f0f0f0;
  border-right: 1px solid #f4f4f4;
  font-size: 11px;
  color: #333;
  vertical-align: middle;
}
.matrix-td:last-child { border-right: none; }
.matrix-td.matrix-name-col {
  text-align: left;
  background: inherit;
  position: sticky;
  left: 0;
  font-weight: 600;
  white-space: nowrap;
  border-right: 2px solid #e8e8e8;
}

.matrix-row-even { background: #fff; }
.matrix-row-odd  { background: #f8f9fc; }
.matrix-row-even:hover,
.matrix-row-odd:hover { background: #eef4ff; }

/* Destination cell */
.matrix-flag {
  margin-right: 6px;
  font-size: 14px;
  vertical-align: middle;
}
.matrix-dest-name {
  vertical-align: middle;
  font-size: 12px;
}

/* Legend */
.matrix-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 10px;
  font-size: 10px;
  color: #888;
}
.matrix-legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Print styles */
@media print {
  .report-matrix-section { page-break-before: always; }
  .matrix-scroll-wrap { overflow: visible; border: none; }
  .matrix-table { min-width: auto; font-size: 10px; }
  .matrix-th { position: static; font-size: 9px; padding: 5px 6px; }
  .matrix-td { font-size: 10px; padding: 5px 6px; }
  .matrix-td.matrix-name-col { position: static; }
  .matrix-legend { font-size: 9px; }
}

/* Mobile: full-width scroll */
@media screen and (max-width: 768px) {
  .report-matrix-section { margin-top: 24px; }
  .matrix-table { font-size: 11px; }
  .matrix-th { padding: 6px 8px; font-size: 9px; }
  .matrix-td { padding: 6px 8px; font-size: 10px; }
  .matrix-dest-name { font-size: 11px; }
}

/* ── Share / Copy Link button ───────────────────────────────────────────────── */
/* ════════════════════════════════════════════════════════════════════════════
   MAP FILTER PANEL
   ════════════════════════════════════════════════════════════════════════════ */

#filter-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 300px;
  max-height: 70vh;
  background: #0d1b2a;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  z-index: 800;
  overflow-y: auto;
  overflow-x: hidden;
}

.filter-panel-inner {
  padding: 14px 16px 16px;
}

.filter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.filter-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(240,230,211,0.6);
}

.filter-clear-btn {
  font-size: 10px;
  color: #7ab3e0;
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: background 0.15s;
}
.filter-clear-btn:hover { background: rgba(122,179,224,0.1); }

.filter-row {
  margin-bottom: 12px;
}

.filter-label {
  display: block;
  font-size: 10px;
  color: rgba(240,230,211,0.5);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 5px;
  font-weight: 600;
}

.filter-hint {
  font-size: 9px;
  color: rgba(240,230,211,0.25);
  margin-top: 3px;
}

/* Range slider */
.filter-slider {
  width: 100%;
  accent-color: #c9a84c;
  height: 3px;
  cursor: pointer;
}

/* Pill buttons */
.filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.filter-pill {
  padding: 3px 9px;
  font-size: 10px;
  font-weight: 600;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: rgba(240,230,211,0.55);
  cursor: pointer;
  transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.filter-pill:hover   { border-color: rgba(240,230,211,0.3); color: #f0e6d3; }
.filter-pill.active  { background: #c9a84c22; border-color: #c9a84c; color: #c9a84c; }

/* Result count */
.filter-result {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-size: 10px;
  color: rgba(240,230,211,0.4);
  text-align: center;
  font-style: italic;
}

/* Make the filter btn container relative so panel positions correctly */
.topbar-right { position: relative; }

/* Mobile: full-width panel */
@media screen and (max-width: 768px) {
  #filter-panel {
    position: fixed;
    /* Position below the topbar, scrollable, above the map and sheet */
    top: var(--sheet-top, 140px);
    bottom: 64px;
    left: 4px;
    right: 4px;
    width: auto;
    max-height: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 900; /* above sheet (700) but below nothing important */
    border-radius: 8px;
  }
}



/* ── Panel header bar ───────────────────────────────────────────────────────
   Thin dark strip at top of every panel. Contains close button on left.
   Hidden on mobile (mobile uses the sheet chrome close button instead).
────────────────────────────────────────────────────────────────────────────── */
.panel-header-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: rgba(0,0,0,0.25);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
  min-height: 34px;
}

.panel-close-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  color: rgba(240,230,211,0.65);
  font-size: 10px;
  font-weight: 600;
  padding: 3px 10px;
  cursor: pointer;
  letter-spacing: .03em;
  transition: background 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-sizing: border-box;
}
.panel-close-btn:hover {
  background: rgba(255,255,255,0.13);
  color: #f0e6d3;
}

/* Mobile: hide panel header bar — sheet chrome handles close */


/* ── Panel action buttons (Compare, Copy Link, Close) ────────────────────────
   All three share the same base style. Compare gets a pinned state.
────────────────────────────────────────────────────────────────────────────── */
.panel-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  color: rgba(240,230,211,0.65);
  font-size: 10px;
  font-weight: 600;
  padding: 3px 10px;
  cursor: pointer;
  letter-spacing: .03em;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
  flex-shrink: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-sizing: border-box;
}
.panel-action-btn:hover {
  background: rgba(255,255,255,0.13);
  color: #f0e6d3;
}
.panel-action-btn.pinned {
  background: rgba(0,200,83,0.15);
  border-color: rgba(0,200,83,0.4);
  color: #00c853;
}
.panel-action-btn.pinned:hover {
  background: rgba(0,200,83,0.25);
}

/* On mobile: hide action buttons in header bar — they're in the hero area instead */
@media screen and (max-width: 768px) {
}

/* ── Panel header bar — mobile sizing ──────────────────────────────────────── */
@media screen and (max-width: 768px) {
  .panel-header-bar {
    padding: 6px 12px;
    min-height: 44px;    /* full touch target height — close btn must be tappable */
    position: sticky;
    top: 0;
    z-index: 2;
    background: #0d1b2a;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  body.light-mode .panel-header-bar {
    background: var(--hs-warm-cream) !important;
    border-bottom-color: var(--hs-soft-border) !important;
  }
  body.a11y.light-mode .panel-header-bar {
    background: var(--hs-warm-cream) !important;
    border-bottom-color: rgba(1,22,61,0.18) !important;
  }
  .panel-action-btn,
  .panel-close-btn {
    font-size: 11px;
    padding: 6px 12px;
    min-height: 36px;
  }
  body.a11y .panel-action-btn,
  body.a11y .panel-close-btn {
    font-size: 14px !important;
    padding: 8px 12px !important;
    min-height: 44px !important;
  }
}

/* ── Panel subtitle (e.g. "United States · Florida") ───────────────────────── */
.panel-subtitle {
  font-size: 10px;
  color: rgba(240,230,211,0.4);
  margin-bottom: 8px;
}


/* ── Budget currency selector ───────────────────────────────────────────────── */
@media screen and (max-width: 768px) {
  }

/* ── Budget currency selector — matches budget-wrap style ───────────────────── */
.budget-currency-select {
  /* Match budget-wrap border + background exactly */
  border: 1px solid rgba(122,179,224,0.25);
  border-radius: 4px;
  background: rgba(122,179,224,0.06);
  /* Text style matches budget-input */
  color: #7ab3e0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  /* Size — no fixed height, let flex row determine */
  padding: 2px 6px 2px 7px;
  height: auto;
  /* Remove browser default select arrow styling */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* Custom arrow using background image */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%237ab3e0' opacity='.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
  padding-right: 20px;
  cursor: pointer;
  outline: none;
  transition: all .2s;
  max-width: 110px;
  flex-shrink: 0;
  /* Remove dotted outline on Firefox */
  -moz-user-focus: ignore;
}
.budget-currency-select:focus-visible {
  outline: 2px solid rgba(122,179,224,0.7);
  outline-offset: 2px;
}
.budget-currency-select:hover,
.budget-currency-select:focus {
  border-color: rgba(122,179,224,0.5);
  background-color: rgba(122,179,224,0.1);
  box-shadow: 0 0 0 2px rgba(122,179,224,0.1);
  color: #aed4f5;
}
.budget-currency-select option {
  background: #0a1520;
  color: #f0e6d3;
  font-size: 12px;
}

/* Mobile: prevent iOS zoom, keep height consistent with input */
@media screen and (max-width: 768px) {
  .budget-currency-select {
    font-size: 16px;
    padding: 2px 20px 2px 7px;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   DISCLAIMER / LEGAL NOTICE MODAL
   ════════════════════════════════════════════════════════════════════════════ */

#disclaimer-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.disc-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.82);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.disc-box {
  position: relative;
  background: #0d1b2a;
  border: 1px solid rgba(201,168,76,0.4);
  border-radius: 12px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(201,168,76,0.1);
  max-width: 580px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  animation: disc-in 0.25s cubic-bezier(0.32,0.72,0,1);
}

@keyframes disc-in {
  from { opacity: 0; transform: scale(0.95) translateY(12px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);    }
}

/* Header */
.disc-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 22px 24px 16px;
  border-bottom: 1px solid rgba(201,168,76,0.15);
}

.disc-icon {
  font-size: 28px;
  flex-shrink: 0;
  margin-top: 2px;
}

.disc-title {
  font-family: 'Playfair Display', serif;
  font-size: 19px;
  color: #f0e6d3;
  margin-bottom: 3px;
  line-height: 1.2;
}

.disc-subtitle {
  font-size: 11px;
  color: rgba(240,230,211,0.4);
  letter-spacing: .04em;
}

/* Body */
.disc-body {
  padding: 18px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.disc-section {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 12px 14px;
}

.disc-section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #c9a84c;
  margin-bottom: 7px;
}

.disc-section p {
  font-size: 12.5px;
  color: rgba(240,230,211,0.65);
  line-height: 1.7;
}

.disc-section strong {
  color: rgba(240,230,211,0.9);
  font-weight: 600;
}

/* Footer */
.disc-footer {
  padding: 16px 24px 20px;
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.disc-remember {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: rgba(240,230,211,0.45);
  cursor: pointer;
  user-select: none;
}

.disc-remember input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: #c9a84c;
  cursor: pointer;
  flex-shrink: 0;
}

.disc-accept-btn {
  width: 100%;
  padding: 13px 20px;
  background: linear-gradient(135deg, #c9a84c 0%, #b8923a 100%);
  border: none;
  border-radius: 8px;
  color: #0d1b2a;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}

.disc-accept-btn:hover { opacity: 0.92; }
.disc-accept-btn:active { transform: scale(0.98); }

/* Mobile */
@media screen and (max-width: 768px) {
  #disclaimer-modal { padding: 12px; align-items: flex-end; }
  .disc-box {
    border-radius: 16px 16px 12px 12px;
    max-height: 92vh;
  }
  .disc-header { padding: 18px 18px 14px; }
  .disc-body   { padding: 14px 18px; gap: 10px; }
  .disc-footer { padding: 14px 18px 18px; }
  .disc-title  { font-size: 17px; }
  .disc-section p { font-size: 12px; }
  .disc-accept-btn { font-size: 14px; padding: 14px; }
}

/* ── Household badge in budget section header ────────────────────────────────── */
.budget-hh-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 9px;
  font-weight: 600;
  color: rgba(122,179,224,0.65);
  background: rgba(122,179,224,0.08);
  border: 1px solid rgba(122,179,224,0.15);
  border-radius: 10px;
  padding: 1px 7px;
  margin-left: 6px;
  letter-spacing: .03em;
  white-space: nowrap;
}

/* Per-person line in purchasing power */
.budget-pp-perperson {
  font-size: 11px;
  color: rgba(240,230,211,0.4);
  margin-top: 1px;
  margin-bottom: 2px;
}

/* Mobile: household dropdown same size as currency */
@media screen and (max-width: 768px) {
  #household-select {
    font-size: 16px;
  }
}

.report-budget-card-title strong {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #444;
}

/* ── Print-only footer — gold disclaimer style, appears on every page ───────────
   position:fixed in @media print repeats on every printed page.
   Styled to match the on-screen gold disclaimer-bar.
────────────────────────────────────────────────────────────────────────────── */
/* Screen-only footer styling */
.report-print-footer {
  display: block;
  margin-top: 20px;
  padding: 10px 16px;
  border-radius: 6px;
  background: #08101a;
  border-top: 2px solid rgba(201,168,76,0.5);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.report-print-footer-disclaimer {
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: #c9a84c;
  line-height: 1.5;
}
.report-print-footer-source {
  display: block;
  font-size: 9px;
  color: rgba(201,168,76,0.6);
  margin-top: 3px;
  line-height: 1.4;
}

@media print {
  .report-print-footer {
    display: block !important;
    position: static !important;
    margin: 6px 0 0 0 !important;
    padding: 4px 8px !important;
    border-radius: 0 !important;
    border-top: 1px solid rgba(201,168,76,0.5) !important;
    background: #08101a !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    line-height: 1.3 !important;
  }
  .report-print-footer-disclaimer {
    display: block !important;
    font-size: 6.5px !important;
    font-weight: 600 !important;
    color: #c9a84c !important;
    line-height: 1.3 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  .report-print-footer-source {
    display: block !important;
    font-size: 6px !important;
    color: rgba(201,168,76,0.6) !important;
    margin-top: 1px !important;
    line-height: 1.3 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}


/* ════════════════════════════════════════════════════════════════════════════
   REDUCED MOTION — permanent WCAG 2.3.3 compliance
   Disables all transitions and animations when user has requested reduced motion
   ════════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}


/* ════════════════════════════════════════════════════════════════════════════
   ACCESSIBILITY MODE BUTTON
   Fixed position: tucked under the browser chrome at top-right,
   offset from the right edge, pops down from the top.
   ════════════════════════════════════════════════════════════════════════════ */

#a11y-btn {
  position: fixed;
  top: -4px;                          /* tucks 4px behind top of viewport */
  right: 52px;                        /* space from right edge */
  z-index: 9500;                      /* above topbar (1000), below print (10000) */

  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 18px 8px;            /* top padding less — tucked under browser chrome */
  padding-top: 14px;                  /* extra top to compensate for -4px position */

  background: linear-gradient(160deg, #d4a017 0%, #b8860b 60%, #8b6510 100%);
  color: #1a1000;
  border: none;
  border-radius: 0 0 10px 10px;      /* flat top (behind chrome), rounded bottom */
  box-shadow:
    0 4px 14px rgba(180,130,0,0.55),
    0 1px 4px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,220,80,0.35);

  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;

  transition: box-shadow 0.18s ease, transform 0.18s ease, background 0.18s ease;
}

#a11y-btn:hover {
  background: linear-gradient(160deg, #e0b020 0%, #c49515 60%, #9a7218 100%);
  box-shadow:
    0 6px 20px rgba(200,150,0,0.65),
    0 2px 6px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,230,100,0.4);
  transform: translateY(2px);        /* slides down a little on hover */
}

#a11y-btn:active {
  transform: translateY(3px);
  box-shadow:
    0 3px 10px rgba(180,130,0,0.45),
    0 1px 3px rgba(0,0,0,0.3);
}

#a11y-btn:focus-visible {
  outline: 3px solid #f0e060;
  outline-offset: 2px;
}

#a11y-btn[aria-pressed="true"] {
  background: linear-gradient(160deg, #f0c030 0%, #d4a017 60%, #a87810 100%);
  box-shadow:
    0 4px 14px rgba(220,160,0,0.7),
    0 1px 4px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,240,100,0.5),
    inset 0 -2px 0 rgba(0,0,0,0.15);
  color: #0d0800;
}

#a11y-btn[aria-pressed="true"]::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 20%;
  right: 20%;
  height: 3px;
  background: rgba(255,220,50,0.6);
  border-radius: 0 0 3px 3px;
  box-shadow: 0 0 8px rgba(255,220,50,0.8);
}

#a11y-btn-icon {
  font-size: 15px;
  line-height: 1;
  opacity: 0.9;
}

#a11y-btn-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .05em;
}

/* Mobile: smaller button, same position */
@media (max-width: 600px) {
  #a11y-btn {
    right: 12px;
    padding: 12px 12px 8px;
    gap: 5px;
  }
  #a11y-btn-label {
    display: none;
  }
  #a11y-btn-icon {
    font-size: 16px;
  }
}


/* ════════════════════════════════════════════════════════════════════════════
   ACCESSIBILITY MODE OVERRIDES — body.a11y scoped
   Applied when user clicks the Accessibility button.
   All rules here override existing declarations without touching them.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Typography: bump all small text to readable sizes ── */

body.a11y .stat .sl            { font-size: 13px !important; opacity: 1; color: rgba(240,230,211,0.75) !important; }
body.a11y .stat .sv            { font-size: 16px !important; }
body.a11y .stat .sv.small      { font-size: 14px !important; }

body.a11y .sec-title           { font-size: 13px !important; letter-spacing: .06em; }
body.a11y .live-cell .lc-label { font-size: 12px !important; }
body.a11y .live-cell .lc-val   { font-size: 17px !important; }
body.a11y .live-cell .lc-sub   { font-size: 12px !important; }

body.a11y .cm .mon             { font-size: 12px !important; }
body.a11y .cm .tmp             { font-size: 14px !important; }

body.a11y .spot .sn            { font-size: 14px !important; }
body.a11y .spot .sd            { font-size: 13px !important; }

body.a11y .lnk                 { font-size: 14px !important; }
body.a11y .lnk .lnk-live       { font-size: 11px !important; }

body.a11y .tbadge              { font-size: 12px !important; letter-spacing: .04em; }
body.a11y .pill                { font-size: 13px !important; }

body.a11y .src-line            { font-size: 12px !important; }
body.a11y .src-line a          { font-size: 12px !important; }
body.a11y .lc-src              { font-size: 12px !important; }

body.a11y .overview            { font-size: 15px !important; line-height: 1.6; }
body.a11y .cname               { font-size: 24px !important; }

body.a11y .crime-item          { font-size: 14px !important; }

body.a11y .tcost-label         { font-size: 12px !important; }
body.a11y .tcost-sub           { font-size: 12px !important; }
body.a11y .tcost-flight-label  { font-size: 12px !important; }
body.a11y .tcost-flight-sub    { font-size: 12px !important; }
body.a11y .tcost-flight-link   { font-size: 12px !important; }
body.a11y .tcost-note          { font-size: 12px !important; }
body.a11y .tcost-val           { font-size: 18px !important; }
body.a11y .tcost-flight-val    { font-size: 18px !important; }

body.a11y .clock-time          { font-size: 18px !important; }
body.a11y .clock-date          { font-size: 13px !important; }

body.a11y .cscore-val          { font-size: 32px !important; }
body.a11y .cscore-stars        { font-size: 14px !important; }

body.a11y .budget-selector label  { font-size: 13px !important; }
body.a11y .budget-input           { font-size: 15px !important; width: 88px !important; }
body.a11y .budget-wrap            { flex-wrap: nowrap !important; min-height: 44px !important; }
body.a11y .budget-currency,
body.a11y .budget-unit            { font-size: 13px !important; flex-shrink: 0; }
body.a11y .budget-currency        { font-size: 14px !important; }
body.a11y .budget-unit            { font-size: 14px !important; }
body.a11y .budget-pp-label        { font-size: 13px !important; }
body.a11y .budget-pp-usd          { font-size: 13px !important; }
body.a11y .budget-pp-approx       { font-size: 12px !important; }
body.a11y .budget-tier-badge      { font-size: 12px !important; }
body.a11y .budget-tier-note       { font-size: 13px !important; }
body.a11y .budget-bar-label       { font-size: 12px !important; }
body.a11y .budget-bar-amt         { font-size: 14px !important; }
body.a11y .budget-hh-badge        { font-size: 12px !important; }
body.a11y .budget-pp-perperson    { font-size: 14px !important; }

body.a11y .pin-tray-label      { font-size: 13px !important; }
body.a11y .pin-chip            { font-size: 13px !important; }

body.a11y .filter-title        { font-size: 14px !important; }
body.a11y .filter-label        { font-size: 14px !important; }
body.a11y .filter-hint         { font-size: 13px !important; }
body.a11y .filter-pill         { font-size: 13px !important; }
body.a11y .filter-result       { font-size: 13px !important; }
body.a11y .filter-clear-btn    { font-size: 13px !important; }

body.a11y .home-select         { font-size: 13px !important; }
body.a11y .home-selector label { font-size: 13px !important; }
body.a11y .search-input        { font-size: 14px !important; }
body.a11y 

body.a11y .panel-close-btn     { font-size: 14px !important; }
body.a11y .panel-subtitle      { font-size: 14px !important; }

body.a11y .legend .li          { font-size: 13px !important; }
body.a11y .topbar-left p       { font-size: 13px !important; color: rgba(240,230,211,0.65) !important; }

body.a11y .disclaimer-bar      { font-size: 14px !important; }

/* ── Contrast: replace low-opacity text with solid readable equivalents ── */

body.a11y .stat .sl            { color: rgba(240,230,211,0.72) !important; }
body.a11y .sec-title           { color: rgba(240,230,211,0.72) !important; }
body.a11y .live-cell .lc-label { color: rgba(240,230,211,0.72) !important; }

/* ── Touch targets: min 44px height on all interactive elements ── */

body.a11y .filter-pill {
  min-height: 44px !important;
  padding: 10px 16px !important;
  display: inline-flex !important;
  align-items: center !important;
}

body.a11y 

body.a11y .panel-close-btn {
  height: 44px !important;
  min-width: 60px !important;
  padding: 0 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.28) !important;
}

body.a11y .pin-chip {
  min-height: 36px !important;
  padding: 6px 12px !important;
  display: inline-flex !important;
  align-items: center !important;
}

body.a11y .filter-clear-btn {
  min-height: 44px !important;
  padding: 10px 16px !important;
}

body.a11y .home-select {
  min-height: 44px !important;
  padding: 0 12px !important;
}

body.a11y .budget-input {
  min-height: 44px !important;
}

body.a11y .search-input {
  min-height: 44px !important;
  padding: 0 14px !important;
}

body.a11y .d-close {
  min-height: 44px !important;
  min-width: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ── Focus rings: visible on all interactive elements ── */

body.a11y *:focus-visible {
  outline: 2px solid #7ab3e0 !important;
  outline-offset: 2px !important;
}

body.a11y button:focus-visible,
body.a11y input:focus-visible,
body.a11y select:focus-visible,
body.a11y a:focus-visible {
  outline: 2px solid #7ab3e0 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(122,179,224,0.2) !important;
}

/* ── Line height: breathing room for dense panels ── */

body.a11y .sec        { line-height: 1.6; }
body.a11y .stat       { padding: 13px 14px !important; }
body.a11y .sbar-row   { margin-bottom: 10px !important; }
body.a11y .hero       { padding: 18px 18px 16px !important; }

/* ── Sidebar panel: slightly wider text in a11y mode ── */
body.a11y #sidebar-content .sl { font-size: 13px !important; color: rgba(240,230,211,0.72) !important; }
body.a11y #sidebar-content .sv { font-size: 16px !important; }
body.a11y #sidebar-content .sv.small { font-size: 14px !important; }
body.a11y #sidebar-content .sec-title { font-size: 13px !important; }
body.a11y #sidebar-content .overview  { font-size: 15px !important; }
body.a11y #sidebar-content .src-line  { font-size: 12px !important; }

/* ── Matrix / comparison report ── */
body.a11y .matrix-table        { font-size: 13px !important; }
body.a11y .matrix-th           { font-size: 12px !important; padding: 8px 10px !important; }
body.a11y .matrix-td           { font-size: 13px !important; padding: 8px 10px !important; }
body.a11y .matrix-dest-name    { font-size: 14px !important; }
body.a11y .matrix-col-label    { font-size: 13px !important; }
body.a11y .matrix-col-sub      { font-size: 11px !important; }
body.a11y .matrix-caption      { font-size: 12px !important; }

body.a11y .report-row          { font-size: 13px !important; margin-bottom: 6px !important; }
body.a11y .report-row .rl      { font-size: 13px !important; }
body.a11y .report-row .rv      { font-size: 14px !important; }
body.a11y .report-section-title { font-size: 12px !important; }
body.a11y .report-budget-card-title  { font-size: 13px !important; }
body.a11y .report-budget-card-label  { font-size: 13px !important; }
body.a11y .report-budget-card-val    { font-size: 15px !important; }
body.a11y .report-budget-card-note   { font-size: 12px !important; }
body.a11y .report-budget-badge-amount { font-size: 22px !important; }
body.a11y .report-budget-badge-unit  { font-size: 14px !important; }
body.a11y .report-location-chip      { font-size: 13px !important; }
body.a11y .report-note               { font-size: 13px !important; }

/* ── Disc / guide panel ── */
body.a11y .disc-subtitle       { font-size: 14px !important; }
body.a11y .disc-section-title  { font-size: 14px !important; }
body.a11y .disc-section p      { font-size: 15px !important; line-height: 1.7 !important; }
body.a11y .disc-remember       { font-size: 14px !important; }


/* ════════════════════════════════════════════════════════════════════════════
   TOPBAR TWO-ROW LAYOUT
   Row 1: logo only
   Row 2: all controls (home-selector, budget, filter, search, etc.)
   ════════════════════════════════════════════════════════════════════════════ */

.topbar {
  flex-direction: column !important;
  align-items: stretch !important;
  padding: 0 !important;
  gap: 0 !important;
}

.topbar-row1 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  padding: 8px 220px 8px 18px;   /* right pad clears the fixed a11y button */
  border-bottom: 1px solid rgba(255,255,255,0.06);
  min-height: 54px;
}

.brand-logo-link {
  display: flex;
  align-items: center;
  width: 156px;
  height: 38px;
  text-decoration: none;
  flex: 0 0 156px;
}
.brand-logo {
  display: block;
  width: 156px;
  height: 38px;
  object-fit: contain;
}
.brand-logo-lightmode {
  display: none;
}
body.light-mode .brand-logo-darkmode {
  display: none;
}
body.light-mode .brand-logo-lightmode {
  display: block;
}

.topbar-tagline {
  font-size: 10px;
  color: rgba(240,230,211,0.4);
  margin: 0;
}

.topbar-row2 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 7px 18px;
}

.topbar-row2 .topbar-left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.topbar-row2 .topbar-right {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
  position: relative;
}

/* Light mode stage 1: page shell + topbar */
body.light-mode {
  background: #FAF7EF;
  color: #071a33;
  --hs-haven-navy: #01163D;
  --hs-data-navy: #042E61;
  --hs-bronze-gold: #D78A15;
  --hs-soft-gold: #E09B34;
  --hs-warm-cream: #FAF7EF;
  --hs-slate-text: #334155;
  --hs-soft-border: #D8D2C3;
  --hs-clean-white: #FFFFFF;
  --hs-light-box-bg: rgba(1,22,61,0.06);
  --hs-light-box-border: rgba(1,22,61,0.16);
}
body.light-mode .shell {
  background: #FAF7EF;
}
body.light-mode .topbar,
body.light-mode .topbar-row1,
body.light-mode .topbar-row2 {
  background: #FAF7EF !important;
  color: #071a33;
}
body.light-mode .topbar {
  border-bottom-color: rgba(7,26,51,0.13);
}
body.light-mode .topbar-row1 {
  border-bottom-color: rgba(7,26,51,0.12);
}
body.light-mode .topbar-tagline {
  color: rgba(7,26,51,0.58);
}
body.light-mode .topbar-row1-tools .toolbar-btn,
body.light-mode .theme-toggle-btn {
  background: rgba(7,26,51,0.06);
  border-color: rgba(7,26,51,0.16);
  color: #071a33;
}
body.light-mode .topbar-row1-tools .toolbar-btn:hover,
body.light-mode .theme-toggle-btn:hover {
  background: rgba(212,175,55,0.14);
  border-color: rgba(212,175,55,0.35);
  color: #071a33;
}
body.light-mode .home-select,
body.light-mode .budget-wrap,
body.light-mode .budget-currency-select,
body.light-mode .search-wrap,
body.light-mode .tbar-filter-field .toolbar-btn {
  background: rgba(7,26,51,0.06);
  border-color: rgba(7,26,51,0.16);
  color: #071a33;
}
body.light-mode .home-select:hover,
body.light-mode .budget-wrap:hover,
body.light-mode .budget-wrap:focus-within,
body.light-mode .budget-currency-select:hover,
body.light-mode .budget-currency-select:focus,
body.light-mode .search-wrap:hover,
body.light-mode .search-wrap:focus-within,
body.light-mode .tbar-filter-field .toolbar-btn:hover,
body.light-mode .tbar-filter-field .toolbar-btn.active {
  background: rgba(212,175,55,0.14);
  border-color: rgba(212,175,55,0.35);
  color: #071a33;
  box-shadow: 0 0 0 2px rgba(212,175,55,0.08);
}
body.light-mode .budget-input,
body.light-mode .search-input,
body.light-mode .budget-currency,
body.light-mode .budget-unit {
  color: #071a33;
}
body.light-mode .budget-input::placeholder,
body.light-mode .search-input::placeholder {
  color: rgba(7,26,51,0.42);
}
body.light-mode .home-select option,
body.light-mode .budget-currency-select option {
  background: #FAF7EF;
  color: #071a33;
}
body.light-mode .live-badge {
  background: rgba(45,143,78,0.13);
  color: #20743e;
  border-color: rgba(45,143,78,0.25);
}
body.light-mode .live-badge.loading {
  background: rgba(212,175,55,0.16);
  color: #8b6410;
  border-color: rgba(212,175,55,0.3);
}
body.light-mode .tbar-section-label {
  color: #9b7418;
}
body.light-mode .tbar-field-label {
  color: rgba(7,26,51,0.55);
}
body.light-mode .tbar-divider {
  background: rgba(7,26,51,0.14);
}

/* Light mode stage 2: sidebar / panel backgrounds */
body.light-mode .sidebar,
body.light-mode #sidebar-content,
body.light-mode .cinfo,
body.light-mode .idle {
  background: #FAF7EF;
  color: var(--hs-slate-text);
}
body.light-mode .sidebar {
  border-left-color: var(--hs-soft-border);
}
body.light-mode .hero {
  background: #FAF7EF;
  border-bottom-color: var(--hs-soft-border);
}
body.light-mode .cname {
  color: var(--hs-haven-navy);
}
body.light-mode .overview {
  color: var(--hs-slate-text);
}
body.light-mode .overview-src,
body.light-mode .last-updated {
  color: rgba(51,65,85,0.64);
}
body.light-mode .sec {
  background: #FAF7EF;
  border-bottom-color: var(--hs-soft-border);
  color: var(--hs-slate-text);
}
body.light-mode .sec-title {
  color: var(--hs-bronze-gold);
}
body.light-mode .sec-title .static-dot {
  background: rgba(1,22,61,0.24);
}
body.light-mode .live-strip {
  background: var(--hs-soft-border);
  border-top-color: var(--hs-soft-border);
  border-bottom-color: var(--hs-soft-border);
}
body.light-mode .live-cell {
  background: #FAF7EF;
}
body.light-mode .live-cell .lc-label,
body.light-mode .live-cell .lc-sub {
  color: rgba(7,26,51,0.46);
}
body.light-mode .live-cell .lc-val,
body.light-mode .live-cell .lc-val.updating {
  color: var(--hs-haven-navy);
}
body.light-mode .idle h2 {
  color: var(--hs-haven-navy);
}
body.light-mode .idle p,
body.light-mode .data-status .ds-title,
body.light-mode .ds-label {
  color: var(--hs-slate-text);
}
body.light-mode .data-status {
  background: var(--hs-light-box-bg);
  border: 1px solid var(--hs-light-box-border);
}
body.light-mode #sheet-chrome,
body.light-mode .sheet-peek-tab {
  background: #FAF7EF;
  border-color: rgba(7,26,51,0.12);
  color: #071a33;
}
body.light-mode .sheet-handle-bar {
  background: rgba(7,26,51,0.24);
}
body.light-mode .panel-header-bar {
  background: var(--hs-light-box-bg);
  border-bottom-color: var(--hs-soft-border);
}
body.light-mode .desktop-sidebar-tab {
  background: #FAF7EF;
  border-color: rgba(7,26,51,0.16);
  color: #071a33;
  box-shadow: 0 10px 26px rgba(7,26,51,0.12);
}
body.light-mode .desktop-sidebar-tab:hover,
body.light-mode .desktop-sidebar-tab:focus-visible {
  background: #f1eadb;
  border-color: rgba(212,175,55,0.4);
}

body.light-mode #sidebar-content p,
body.light-mode #sidebar-content li,
body.light-mode #sidebar-content .spot .sd,
body.light-mode #sidebar-content .crime-name,
body.light-mode #sidebar-content .sbar-ends,
body.light-mode #sidebar-content .env-note,
body.light-mode #sidebar-content .health-note,
body.light-mode #sidebar-content .budget-tier-note,
body.light-mode #sidebar-content .budget-pp-label,
body.light-mode #sidebar-content .budget-unit,
body.light-mode #sidebar-content .tcost-note,
body.light-mode #sidebar-content .src-line,
body.light-mode #sidebar-content .lc-src {
  color: var(--hs-slate-text);
}
body.light-mode #sidebar-content .env-note,
body.light-mode #sidebar-content .health-note,
body.light-mode #sidebar-content .budget-pp,
body.light-mode #sidebar-content .tcost-flight,
body.light-mode #sidebar-content .data-status,
body.light-mode #sidebar-content .sparse-warning,
body.light-mode #sidebar-content .conflict-warning {
  background: var(--hs-light-box-bg);
  border-color: var(--hs-light-box-border);
}
body.light-mode #sidebar-content .src-line a,
body.light-mode #sidebar-content .lc-src a {
  color: var(--hs-data-navy);
}
body.light-mode #sidebar-content [style*="rgba(240,230,211"] {
  color: var(--hs-slate-text) !important;
}


/* ════════════════════════════════════════════════════════════════════════════
   LIGHT MODE — Cards / Stat Boxes  (stage 2)
   Palette:
     Box bg:        var(--hs-light-box-bg)   = rgba(1,22,61,0.06)
     Box border:    var(--hs-light-box-border)= rgba(1,22,61,0.16)
     Primary text:  var(--hs-haven-navy)      = #01163D
     Body text:     var(--hs-slate-text)      = #334155
     Muted label:   rgba(7,26,51,0.46)
     Very muted:    rgba(7,26,51,0.34)
     Accent blue:   var(--hs-data-navy)       = #042E61
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Stat boxes (.stat) ────────────────────────────────────────────────────── */
body.light-mode .stat {
  background: var(--hs-light-box-bg);
  border: 1px solid var(--hs-light-box-border);
}
body.light-mode .sl {
  color: rgba(7,26,51,0.46);
}
body.light-mode .sv {
  color: var(--hs-haven-navy);
}

/* ── Score bars ────────────────────────────────────────────────────────────── */
body.light-mode .sbar,
body.light-mode .sbar-track {
  background: rgba(1,22,61,0.10);
}
body.light-mode .sbar-ends {
  color: rgba(7,26,51,0.38);
}

/* ── Comparison pills (.cheap / .expensive / .same) ────────────────────────── */
body.light-mode .cheap {
  background: rgba(20,110,50,0.10);
  color: #155a2e;
  border-color: rgba(20,110,50,0.28);
}
body.light-mode .expensive {
  background: rgba(160,30,20,0.09);
  color: #8b1a10;
  border-color: rgba(160,30,20,0.25);
}
body.light-mode .same {
  background: rgba(1,22,61,0.06);
  color: rgba(7,26,51,0.52);
  border-color: rgba(1,22,61,0.14);
}

/* ── Tier badge (.tbadge) — keep its own tier colour, just ensure readable text */
body.light-mode .tbadge {
  /* tier colour bg stays; force dark text only for light-bg tiers (1,2) */
}

/* ── Climate month cells (.cm) ─────────────────────────────────────────────── */
body.light-mode .cm {
  background: var(--hs-light-box-bg);
  border: 1px solid var(--hs-light-box-border);
}

/* ── Crime section ─────────────────────────────────────────────────────────── */
body.light-mode .crime-item {
  background: var(--hs-light-box-bg);
  border: 1px solid var(--hs-light-box-border);
}
body.light-mode .crime-name {
  color: var(--hs-slate-text);
}

/* ── Travel cost grid ──────────────────────────────────────────────────────── */
body.light-mode .tcost-cell {
  background: var(--hs-light-box-bg);
  border: 1px solid var(--hs-light-box-border);
}
body.light-mode .tcost-val {
  color: var(--hs-haven-navy);
}
body.light-mode .tcost-label,
body.light-mode .tcost-sub {
  color: rgba(7,26,51,0.46);
}
body.light-mode .tcost-flight {
  background: rgba(4,46,97,0.06);
  border-color: rgba(4,46,97,0.16);
}
body.light-mode .tcost-flight-val {
  color: var(--hs-data-navy);
}
body.light-mode .tcost-flight-label,
body.light-mode .tcost-flight-sub {
  color: rgba(7,26,51,0.46);
}
body.light-mode .tcost-flight-link {
  color: var(--hs-data-navy);
  border-color: rgba(4,46,97,0.22);
}
body.light-mode .tcost-flight-link:hover {
  background: rgba(4,46,97,0.08);
}

/* ── Composite score block (.cscore) ───────────────────────────────────────── */
body.light-mode .cscore {
  background: var(--hs-light-box-bg);
  border: 1px solid var(--hs-light-box-border);
}
body.light-mode .cscore-val {
  color: var(--hs-haven-navy);
}
body.light-mode .cscore-stars {
  color: var(--hs-bronze-gold);
}

/* ── Health stats ──────────────────────────────────────────────────────────── */
body.light-mode .health-stats {
  background: var(--hs-light-box-bg);
  border: 1px solid var(--hs-light-box-border);
}

/* ── Destination spots (.spot) ─────────────────────────────────────────────── */
body.light-mode .spot {
  background: var(--hs-light-box-bg);
  border: 1px solid var(--hs-light-box-border);
}
body.light-mode .sn {
  color: var(--hs-haven-navy);
}
body.light-mode .sd {
  color: var(--hs-slate-text);
}

/* ── Environment section (.env-*) ─────────────────────────────────────────── */
body.light-mode .env-sec {
  border-left-color: rgba(20,110,50,0.35);
}
body.light-mode .env-stat {
  background: var(--hs-light-box-bg);
  border: 1px solid var(--hs-light-box-border);
}

/* ── WhereNext tax section (.wn-tax-*) ─────────────────────────────────────── */
body.light-mode .wn-tax-row {
  background: var(--hs-light-box-bg);
  border: 1px solid var(--hs-light-box-border);
}
body.light-mode .wn-tax-gross,
body.light-mode .wn-tax-gross-label {
  color: rgba(7,26,51,0.52);
}
body.light-mode .wn-tax-breakdown {
  color: rgba(7,26,51,0.46);
  border-top-color: rgba(1,22,61,0.10);
}
body.light-mode .wn-tax-net-amt {
  color: var(--hs-haven-navy);
}
body.light-mode .wn-tax-note,
body.light-mode .wn-tax-explainer {
  color: var(--hs-slate-text);
  background: var(--hs-light-box-bg);
  border-color: var(--hs-light-box-border);
}

/* ── WhereNext food basket (.wn-food-*) ────────────────────────────────────── */
body.light-mode .wn-food-item {
  background: var(--hs-light-box-bg);
  border: 1px solid var(--hs-light-box-border);
}
body.light-mode .wn-food-val {
  color: var(--hs-haven-navy);
}
body.light-mode .wn-food-label {
  color: rgba(7,26,51,0.52);
}
body.light-mode .wn-food-basket {
  background: var(--hs-light-box-bg);
  border: 1px solid var(--hs-light-box-border);
}
body.light-mode .wn-food-basket-amt {
  color: var(--hs-haven-navy);
}
body.light-mode .wn-food-explainer,
body.light-mode .wn-food-basket-label {
  color: var(--hs-slate-text);
}

/* ── WhereNext inheritance (.wn-inh-*) ─────────────────────────────────────── */
body.light-mode .wn-inh-rate-item {
  background: var(--hs-light-box-bg);
  border: 1px solid var(--hs-light-box-border);
}
body.light-mode .wn-inh-headline {
  color: var(--hs-slate-text);
}

/* ── Source lines ──────────────────────────────────────────────────────────── */
body.light-mode .lc-src,
body.light-mode .src-line {
  color: rgba(7,26,51,0.38);
}
body.light-mode .lc-src a,
body.light-mode .src-line a {
  color: var(--hs-data-navy);
}


/* ════════════════════════════════════════════════════════════════════════════
   LIGHT MODE — Form Controls  (stage 3)
   Covers: filter panel, search dropdown, range slider, pill buttons,
           search-result items, clear buttons
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Filter panel dropdown ──────────────────────────────────────────────────── */
body.light-mode #filter-panel {
  background: #FAF7EF;
  border-color: var(--hs-soft-border);
  box-shadow: 0 8px 32px rgba(7,26,51,0.12);
}
body.light-mode .filter-header {
  border-bottom-color: var(--hs-soft-border);
}
body.light-mode .filter-title {
  color: var(--hs-haven-navy);
}
body.light-mode .filter-clear-btn {
  color: var(--hs-data-navy);
}
body.light-mode .filter-clear-btn:hover {
  background: rgba(4,46,97,0.08);
}
body.light-mode .filter-label {
  color: rgba(7,26,51,0.52);
}
body.light-mode .filter-hint {
  color: rgba(7,26,51,0.38);
}
body.light-mode .filter-result {
  border-top-color: var(--hs-soft-border);
  color: rgba(7,26,51,0.46);
}

/* ── Filter pill buttons ────────────────────────────────────────────────────── */
body.light-mode .filter-pill {
  border-color: rgba(1,22,61,0.16);
  background: rgba(1,22,61,0.04);
  color: rgba(7,26,51,0.55);
}
body.light-mode .filter-pill:hover {
  border-color: rgba(1,22,61,0.32);
  color: var(--hs-haven-navy);
}
body.light-mode .filter-pill.active {
  background: rgba(212,175,55,0.14);
  border-color: var(--hs-bronze-gold);
  color: var(--hs-bronze-gold);
}

/* ── Filter selects inside the panel ───────────────────────────────────────── */
body.light-mode #filter-panel select {
  background: #FAF7EF;
  border-color: rgba(1,22,61,0.16);
  color: var(--hs-haven-navy);
}
body.light-mode #filter-panel select option {
  background: #FAF7EF;
  color: var(--hs-haven-navy);
}

/* ── Range slider ───────────────────────────────────────────────────────────── */
body.light-mode .filter-slider {
  accent-color: var(--hs-bronze-gold);
}

/* ── Search results dropdown ────────────────────────────────────────────────── */
body.light-mode .search-wrap [id="search-results"],
body.light-mode #search-results {
  background: #FAF7EF !important;
  border-color: var(--hs-soft-border) !important;
  box-shadow: 0 6px 20px rgba(7,26,51,0.10) !important;
}
body.light-mode .search-result-item {
  color: var(--hs-haven-navy) !important;
  border-bottom-color: var(--hs-soft-border) !important;
}
body.light-mode .search-result-item:hover,
body.light-mode .search-result-item.active {
  background: rgba(1,22,61,0.06) !important;
}

/* ── Clear buttons (.search-clear, .budget-clear) ──────────────────────────── */
body.light-mode .search-clear {
  color: rgba(7,26,51,0.35);
}
body.light-mode .search-clear:hover {
  color: var(--hs-haven-navy);
}
body.light-mode .budget-clear {
  color: rgba(7,26,51,0.35);
}
body.light-mode .budget-clear:hover {
  color: var(--hs-haven-navy);
}

/* ── Topbar section label (gold in dark, slightly warmer in light) ───────────── */
body.light-mode .tbar-section-label {
  color: var(--hs-bronze-gold);
}


/* ════════════════════════════════════════════════════════════════════════════
   LIGHT MODE — Table view  (stage 4)
   ════════════════════════════════════════════════════════════════════════════ */

/* Container */
body.light-mode .destination-table-view {
  background: #FAF7EF;
  border-right-color: var(--hs-soft-border);
}
body.light-mode .table-shell {
  background: #FAF7EF;
}

/* Header text */
body.light-mode .table-title {
  color: var(--hs-haven-navy);
}
body.light-mode .table-subtitle {
  color: rgba(7,26,51,0.68);
}
body.light-mode .table-count {
  color: rgba(7,26,51,0.68);
}

/* Table element */
body.light-mode .dest-table {
  background: rgba(1,22,61,0.03);
  border-color: var(--hs-soft-border);
}
body.light-mode .dest-table th {
  background: #f0ecdf;
  color: rgba(7,26,51,0.75);
  border-bottom-color: var(--hs-soft-border);
}
body.light-mode .dest-table td {
  border-bottom-color: rgba(1,22,61,0.07);
  color: rgba(7,26,51,0.92);
}
body.light-mode .dest-table tbody tr:hover,
body.light-mode .dest-table tbody tr:focus {
  background: rgba(1,22,61,0.05);
}

/* Name cell */
body.light-mode .dest-name-cell {
  color: var(--hs-haven-navy);
}
body.light-mode .dest-name-cell span {
  color: rgba(7,26,51,0.42);
}

/* Pill */
body.light-mode .table-pill {
  border-color: rgba(1,22,61,0.14);
  background: rgba(1,22,61,0.05);
}

/* Semantic colours — adjusted for light bg */
body.light-mode .table-good { color: #155a2e; }
body.light-mode .table-warn { color: #8b6410; }
body.light-mode .table-bad  { color: #8b1a10; }
body.light-mode .table-muted { color: rgba(7,26,51,0.36); }

/* Note text */
body.light-mode .table-note {
  color: rgba(7,26,51,0.38);
}


/* ════════════════════════════════════════════════════════════════════════════
   LIGHT MODE — Compare bar / Pin tray
   ════════════════════════════════════════════════════════════════════════════ */

body.light-mode .pin-tray {
  background: #f0ecdf;
  border-bottom-color: var(--hs-soft-border);
}
body.light-mode .pin-tray-label {
  color: rgba(7,26,51,0.45);
}
body.light-mode .pin-hint {
  color: rgba(7,26,51,0.30);
}

/* Pinned destination chips */
body.light-mode .pin-chip {
  background: rgba(20,110,50,0.10);
  border-color: rgba(20,110,50,0.28);
  color: #155a2e;
}
body.light-mode .pin-chip button {
  color: rgba(20,110,50,0.45);
}
body.light-mode .pin-chip button:hover {
  color: #155a2e;
}

/* Clear all button */
body.light-mode .pin-clear-btn {
  border-color: rgba(160,30,20,0.28);
  color: rgba(160,30,20,0.75);
}
body.light-mode .pin-clear-btn:hover {
  background: rgba(160,30,20,0.07);
  border-color: rgba(160,30,20,0.45);
  color: #8b1a10;
}

/* Print Report button */
body.light-mode .report-btn {
  background: rgba(4,46,97,0.07);
  color: var(--hs-data-navy);
  border-color: rgba(4,46,97,0.20);
}
body.light-mode .report-btn:hover:not(:disabled) {
  background: rgba(4,46,97,0.12);
  border-color: rgba(4,46,97,0.35);
}


/* ════════════════════════════════════════════════════════════════════════════
   LIGHT MODE — Legend and smart tags  (stage 5)
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Floating map legend ───────────────────────────────────────────────────── */
body.light-mode .map-legend-float {
  background: rgba(240,236,223,0.92);
  border-color: rgba(1,22,61,0.18);
}
body.light-mode .map-legend-float .li {
  color: rgba(7,26,51,0.72);
}

/* ── Map smart tag (hover tooltip over countries) ──────────────────────────── */
body.light-mode .map-smart-tag {
  background: rgba(245,242,234,0.96);
  border-color: rgba(1,22,61,0.16);
  box-shadow: 0 10px 28px rgba(7,26,51,0.13);
  color: var(--hs-haven-navy);
}
body.light-mode .smart-tag-name {
  color: var(--hs-haven-navy);
}
body.light-mode .smart-tag-kind {
  color: rgba(7,26,51,0.46);
}
/* 1px stroke on score number only — not on the "Score" label below */
body.light-mode .smart-tag-score {
  text-shadow:
    -1px -1px 0 rgba(7,26,51,0.18),
     1px -1px 0 rgba(7,26,51,0.18),
    -1px  1px 0 rgba(7,26,51,0.18),
     1px  1px 0 rgba(7,26,51,0.18);
}
body.light-mode .smart-tag-score span {
  color: rgba(7,26,51,0.42);
  text-shadow: none;
}
body.light-mode .smart-tag-chip {
  border-color: rgba(1,22,61,0.12);
  background: rgba(1,22,61,0.04);
}
body.light-mode .smart-tag-chip b {
  color: rgba(7,26,51,0.42);
}
body.light-mode .smart-tag-chip span {
  color: rgba(7,26,51,0.82);
}
body.light-mode .smart-tag-warn {
  color: #8b6410;
}


/* ════════════════════════════════════════════════════════════════════════════
   LIGHT MODE — Source links  (stage 6)
   Most link/source rules are covered by the broad :where() selectors in the
   sidebar/cards stages. This block adds the remaining gaps.
   ════════════════════════════════════════════════════════════════════════════ */

/* News article links — hover state and row divider */
body.light-mode #sidebar-content .news-lnk {
  border-bottom-color: var(--hs-soft-border);
}
body.light-mode #sidebar-content .news-lnk:hover {
  background: rgba(1,22,61,0.05) !important;
}

/* "LIVE" badge on link buttons */
body.light-mode .lnk-live {
  color: #155a2e;
}

/* Source attribution arrow (↗) */
body.light-mode .src-arrow {
  color: var(--hs-data-navy);
  opacity: 0.6;
}
body.light-mode .src-arrow:hover {
  opacity: 1;
}


/* ════════════════════════════════════════════════════════════════════════════
   LIGHT MODE — Disclaimer bar, modal, and sparse-warning callouts
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Disclaimer bar (bottom of page) ───────────────────────────────────────── */
/* dark base for new disclaimer-bar classes */
.disclaimer-bar .d-strong {
  color: rgba(240,230,211,0.75);
  font-weight: 600;
}
.disclaimer-bar .d-guide-link {
  flex-shrink: 0;
  font-size: 9px;
  font-weight: 600;
  color: rgba(122,179,224,0.6);
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: .04em;
  transition: color .15s;
}
.disclaimer-bar .d-guide-link:hover {
  color: #7ab3e0;
}

body.light-mode .disclaimer-bar {
  background: #f5f0e0;
  border-top-color: rgba(1,22,61,0.14);
  color: rgba(7,26,51,0.72);
}
body.light-mode .disclaimer-bar .d-icon {
  opacity: 1;
}
body.light-mode .disclaimer-bar .d-strong {
  color: var(--hs-haven-navy);
}
body.light-mode .disclaimer-bar .d-guide-link {
  color: var(--hs-data-navy);
}
body.light-mode .disclaimer-bar .d-guide-link:hover {
  color: var(--hs-haven-navy);
}
body.light-mode .disclaimer-bar .d-close {
  color: rgba(7,26,51,0.40);
}
body.light-mode .disclaimer-bar .d-close:hover {
  color: var(--hs-haven-navy);
}

/* ── Disclaimer modal ───────────────────────────────────────────────────────── */
body.light-mode .disc-box {
  background: #FAF7EF;
  border-color: rgba(212,175,55,0.32);
  box-shadow: 0 24px 80px rgba(7,26,51,0.18), 0 0 0 1px rgba(212,175,55,0.15);
}
body.light-mode .disc-header {
  border-bottom-color: rgba(212,175,55,0.18);
}
body.light-mode .disc-title    { color: var(--hs-haven-navy); }
body.light-mode .disc-subtitle { color: rgba(7,26,51,0.46); }
body.light-mode .disc-section {
  background: rgba(1,22,61,0.04);
  border-color: rgba(1,22,61,0.10);
}
body.light-mode .disc-section-title { color: var(--hs-bronze-gold); }
body.light-mode .disc-section p     { color: rgba(7,26,51,0.68); }
body.light-mode .disc-section strong { color: var(--hs-haven-navy); }
body.light-mode .disc-footer {
  border-top-color: rgba(1,22,61,0.10);
}
body.light-mode .disc-remember {
  color: rgba(7,26,51,0.50);
}

/* ── Sparse-warning callouts ────────────────────────────────────────────────── */
body.light-mode .sparse-warning {
  background: rgba(200,150,0,0.07);
  border-color: rgba(200,150,0,0.22);
}
body.light-mode .sparse-warning-title { color: #8b6410; }
body.light-mode .sparse-warning-text  { color: rgba(7,26,51,0.65); }



/* Mobile: push Leaflet attribution above the disclaimer bar */
@media screen and (max-width: 768px) {
  /* Attribution logos sit at natural bottom of map — no margin needed.
     The disclaimer bar is hidden on mobile so the 46px push is removed.
     Push only enough to stay above the bottom sheet peek strip (56px). */
  .leaflet-bottom {
    margin-bottom: 2px !important;
  }
  /* Google credit / map controls: ensure above sheet z-index */
  .leaflet-bottom.leaflet-right {
    bottom: 0;
    right: 4px;
  }
  .leaflet-bottom.leaflet-left {
    bottom: 0;
    left: 4px;
  }
}

/* Mobile disclaimer bar: give close btn room, separate from Leaflet corner */
@media screen and (max-width: 768px) {
  .disclaimer-bar {
    flex-wrap: wrap !important;
    padding: 6px 12px 8px !important;
    gap: 6px 8px !important;
    align-items: flex-start !important;
  }
  .disclaimer-bar .d-icon {
    padding-top: 2px;
  }
  .disclaimer-bar .d-text {
    flex: 1 1 200px !important;
    font-size: 9px !important;
    line-height: 1.45 !important;
  }
  .disclaimer-bar .d-guide-link,
  .disclaimer-bar .d-close {
    flex-shrink: 0 !important;
  }
  .disclaimer-bar .d-close {
    margin-left: auto !important;
    padding: 2px 6px !important;
    font-size: 13px !important;
    min-height: 28px !important;
    min-width: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}


/* ════════════════════════════════════════════════════════════════════════════
   VISA & RESIDENCY SECTION
   ════════════════════════════════════════════════════════════════════════════ */

.visa-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.visa-card:last-of-type { margin-bottom: 0; }

.visa-card-name {
  font-size: 12px;
  font-weight: 700;
  color: #f0e6d3;
  margin-bottom: 2px;
}
.visa-card-type {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--hs-bronze-gold, #D78A15);
  margin-bottom: 8px;
}
.visa-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}
.visa-row {
  display: flex;
  gap: 6px;
  font-size: 10px;
  line-height: 1.4;
}
.visa-label {
  color: rgba(240,230,211,0.50);
  flex: 0 0 80px;
  font-weight: 600;
}
.visa-val {
  color: rgba(240,230,211,0.88);
}
.visa-flags {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 8px;
}
.visa-check,
.visa-cross {
  font-size: 10px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.visa-check { color: #72d98f; }
.visa-cross  { color: rgba(240,230,211,0.40); }

.visa-note {
  font-size: 10px;
  color: rgba(240,230,211,0.55);
  line-height: 1.5;
  margin-bottom: 6px;
}
.visa-divider {
  height: 1px;
  background: rgba(255,255,255,0.06);
  margin: 10px 0;
}
.visa-ease-row {
  font-size: 10px;
  color: rgba(240,230,211,0.50);
  margin-top: 8px;
}
.visa-ease {
  color: #c9a84c;
  letter-spacing: 2px;
}
.visa-summary {
  font-size: 10px;
  color: rgba(240,230,211,0.55);
  line-height: 1.5;
  margin-top: 6px;
}

/* Table badges */
.visa-badge {
  display: inline-block;
  font-size: 8px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  letter-spacing: .04em;
  margin-right: 3px;
}
.visa-pr    { background: rgba(20,110,50,0.20); color: #72d98f; border: 1px solid rgba(72,210,140,0.25); }
.visa-no-pr { background: rgba(255,255,255,0.05); color: rgba(240,230,211,0.40); border: 1px solid rgba(255,255,255,0.08); }
.visa-cz    { background: rgba(100,160,255,0.12); color: #7ab3e0; border: 1px solid rgba(122,179,224,0.22); }

/* Light mode */
body.light-mode .visa-card {
  background: rgba(1,22,61,0.04);
  border-color: rgba(1,22,61,0.12);
}
body.light-mode .visa-card-name   { color: var(--hs-haven-navy); }
body.light-mode .visa-label       { color: rgba(7,26,51,0.50); }
body.light-mode .visa-val         { color: rgba(7,26,51,0.82); }
body.light-mode .visa-check       { color: #155a2e; }
body.light-mode .visa-cross       { color: rgba(7,26,51,0.32); }
body.light-mode .visa-note        { color: rgba(7,26,51,0.55); }
body.light-mode .visa-ease-row    { color: rgba(7,26,51,0.50); }
body.light-mode .visa-ease        { color: var(--hs-bronze-gold); }
body.light-mode .visa-summary     { color: rgba(7,26,51,0.55); }
body.light-mode .visa-divider     { background: rgba(1,22,61,0.08); }
body.light-mode .visa-pr    { background: rgba(20,110,50,0.10); color: #155a2e; border-color: rgba(20,110,50,0.22); }
body.light-mode .visa-no-pr { background: rgba(1,22,61,0.04); color: rgba(7,26,51,0.38); border-color: rgba(1,22,61,0.10); }
body.light-mode .visa-cz    { background: rgba(4,46,97,0.08); color: #042E61; border-color: rgba(4,46,97,0.18); }

/* a11y + light mode */
body.a11y.light-mode .visa-card-name  { color: #01163D !important; }
body.a11y.light-mode .visa-label      { color: rgba(7,26,51,0.65) !important; }
body.a11y.light-mode .visa-val        { color: #01163D !important; }
body.a11y.light-mode .visa-check      { color: #155a2e !important; }
body.a11y.light-mode .visa-note       { color: rgba(7,26,51,0.70) !important; }


/* ════════════════════════════════════════════════════════════════════════════
   HIGH CONTRAST — body.a11y
   Navy blue → near-black backgrounds
   Light blue text/borders → pure white or near-white
   ════════════════════════════════════════════════════════════════════════════ */

/* Main backgrounds: #0a1520 / #0d1b2a / #1a1a2e → near-black */
body.a11y .topbar,
body.a11y .topbar-row1,
body.a11y .topbar-row2      { background: #05080d !important; }

body.a11y #sidebar          { background: #05080d !important; }
body.a11y #sidebar-content  { background: #05080d !important; }
body.a11y .sec              { border-bottom-color: rgba(255,255,255,0.12) !important; }
body.a11y .hero             { border-bottom-color: rgba(255,255,255,0.12) !important; }

body.a11y .live-cell        { background: #0a0f18 !important; }
body.a11y .stat             { background: rgba(255,255,255,0.06) !important; }
body.a11y .cm               { background: rgba(255,255,255,0.06) !important; }
body.a11y .spot             { background: rgba(255,255,255,0.06) !important; }

body.a11y .filter-panel-inner,
body.a11y #filter-panel     { background: #05080d !important; border-color: rgba(255,255,255,0.2) !important; }

body.a11y .disclaimer-bar   { background: rgba(5,8,13,0.97) !important; }

/* Borders: light blue rgba → white */
body.a11y .topbar-row1      { border-bottom-color: rgba(255,255,255,0.15) !important; }
body.a11y .home-select,
body.a11y .budget-wrap,
body.a11y .search-wrap,
body.a11y .budget-currency-select { border-color: rgba(255,255,255,0.3) !important; }

body.a11y .home-select:focus,
body.a11y .budget-currency-select:focus,
body.a11y .search-input:focus { border-color: #ffffff !important; box-shadow: 0 0 0 2px rgba(255,255,255,0.2) !important; }

/* Text: blue-tinted (#7ab3e0, rgba(240,230,211,...)) → white/near-white */
body.a11y .cname            { color: #ffffff !important; }
body.a11y .stat .sv         { color: #ffffff !important; }
body.a11y .stat .sl         { color: rgba(255,255,255,0.72) !important; }
body.a11y .sec-title        { color: rgba(255,255,255,0.72) !important; }
body.a11y .overview         { color: rgba(255,255,255,0.92) !important; }
body.a11y .lnk              { color: #ffffff !important; }
body.a11y .tbadge           { color: #ffffff !important; }
body.a11y .pill             { color: rgba(255,255,255,0.85) !important; }

body.a11y .live-cell .lc-label { color: rgba(255,255,255,0.72) !important; }
body.a11y .live-cell .lc-val   { color: #ffffff !important; }

body.a11y .cm .mon          { color: rgba(255,255,255,0.72) !important; }
body.a11y .cm .tmp          { color: #ffffff !important; }
body.a11y .spot .sn         { color: #ffffff !important; }

body.a11y .filter-title     { color: rgba(255,255,255,0.72) !important; }
body.a11y .filter-label     { color: #ffffff !important; }
body.a11y .filter-hint      { color: rgba(255,255,255,0.6) !important; }
body.a11y .filter-result    { color: rgba(255,255,255,0.85) !important; }

body.a11y .home-select      { color: #ffffff !important; background: #05080d !important; }
body.a11y .search-input     { color: #ffffff !important; background: #05080d !important; }
body.a11y .search-input::placeholder { color: rgba(255,255,255,0.45) !important; }

body.a11y .topbar-tagline   { color: rgba(255,255,255,0.55) !important; }

body.a11y .clock-time       { color: #ffffff !important; }
body.a11y .clock-date       { color: rgba(255,255,255,0.72) !important; }

body.a11y .cscore-val       { color: #ffffff !important; }
body.a11y .cscore-label     { color: rgba(255,255,255,0.72) !important; }

body.a11y .src-line a       { color: rgba(174,212,245,0.95) !important; font-weight: 700 !important; }
body.a11y .crime-item       { color: rgba(255,255,255,0.9) !important; }
body.a11y .tcost-label      { color: rgba(255,255,255,0.72) !important; }
body.a11y .tcost-val        { color: #ffffff !important; }
body.a11y .tcost-flight-val { color: #ffffff !important; }
body.a11y .tcost-sub        { color: rgba(255,255,255,0.6) !important; }
body.a11y .tcost-flight-sub { color: rgba(255,255,255,0.6) !important; }
body.a11y .tcost-note       { color: rgba(255,255,255,0.55) !important; }

body.a11y .budget-currency  { color: #ffffff !important; }
body.a11y .budget-unit      { color: rgba(255,255,255,0.7) !important; }
body.a11y .budget-pp-label  { color: rgba(255,255,255,0.7) !important; }
body.a11y .budget-tier-note { color: rgba(255,255,255,0.7) !important; }
body.a11y .budget-bar-label { color: rgba(255,255,255,0.7) !important; }
body.a11y .budget-bar-amt   { color: #ffffff !important; }

body.a11y .pin-tray-label   { color: rgba(255,255,255,0.7) !important; }
body.a11y .pin-hint         { color: rgba(255,255,255,0.55) !important; }
body.a11y .pin-tray         { background: #05080d !important; border-top-color: rgba(255,255,255,0.12) !important; }


/* Idle panel (blank state) + data-status source rows */
body.a11y .idle h2          { color: rgba(255,255,255,0.72) !important; font-size: 19px !important; }
body.a11y .idle p           { color: rgba(255,255,255,0.55) !important; font-size: 13px !important; }
body.a11y .data-status      { background: rgba(255,255,255,0.06) !important; border: 1px solid rgba(255,255,255,0.1) !important; }
body.a11y .ds-title         { color: rgba(255,255,255,0.55) !important; font-size: 10px !important; }
body.a11y .ds-label         { color: rgba(255,255,255,0.65) !important; font-size: 12px !important; }
body.a11y .ds-val           { font-size: 11px !important; }

/* ════════════════════════════════════════════════════════════════════════════
   ACCESSIBILITY MODE — missing button/control overrides (Issue #1 fix)
   ════════════════════════════════════════════════════════════════════════════ */

/* Currency / Household selects */
body.a11y .budget-currency-select {
  font-size: 14px !important;
  min-height: 44px !important;
  padding: 0 12px !important;
  color: #ffffff !important;
  background: #05080d !important;
  border-color: rgba(255,255,255,0.3) !important;
}

/* Budget clear ✕ button */
body.a11y .budget-clear {
  font-size: 18px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
}

/* Pin clear button */
body.a11y .pin-clear-btn {
  font-size: 13px !important;
  min-height: 44px !important;
  padding: 0 14px !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* Compare / Print report button in pin tray */
body.a11y .report-btn {
  font-size: 14px !important;
  min-height: 44px !important;
  padding: 0 16px !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* Live data badge */
body.a11y .live-badge {
  font-size: 13px !important;
  padding: 6px 10px !important;
  letter-spacing: .04em !important;
}

/* Print / Save PDF button in report */
body.a11y .report-print-btn {
  font-size: 14px !important;
  min-height: 44px !important;
  padding: 0 20px !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* Close button in report */
body.a11y .report-close-btn {
  font-size: 14px !important;
  min-height: 44px !important;
  padding: 0 16px !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* Clear button in report */
body.a11y .report-clear-btn {
  font-size: 14px !important;
  min-height: 44px !important;
  padding: 0 16px !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* Compare / Copy Link / Close buttons inside the sidebar panel (panel-action-btn) */
body.a11y .panel-action-btn {
  font-size: 14px !important;
  min-height: 44px !important;
  padding: 0 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  letter-spacing: .02em !important;
}

/* panel-header-bar row needs to accommodate taller buttons */
body.a11y .panel-header-bar {
  flex-wrap: nowrap !important;
  gap: 6px !important;
  padding: 10px 12px !important;
  min-height: 56px !important;
}
/* Collapse the flex:1 spacer so buttons sit left — Compare stays beside Copy Link */
body.a11y .panel-header-bar > div[style*="flex:1"] {
  display: none !important;
}

/* Disc accept / I Understand button */
body.a11y .disc-accept-btn {
  font-size: 16px !important;
  min-height: 52px !important;
  padding: 14px 24px !important;
}

/* Data Guide link styled as button */
body.a11y a


/* ════════════════════════════════════════════════════════════════════════════
   ACCESSIBILITY — missing contrast fixes (v3 patch)
   ════════════════════════════════════════════════════════════════════════════ */

/* Responsive size adjustments */
@media (max-width: 640px) {
  .toolbar-btn { font-size: 9px; padding: 3px 7px; }
}
@media (min-height: 700px) and (max-width: 430px) {
  .toolbar-btn { font-size: 13px !important; letter-spacing: .04em; }
}

body.a11y .toolbar-btn {
  background: rgba(255,255,255,0.08) !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.3) !important;
}
body.a11y .toolbar-btn:hover {
  background: rgba(255,255,255,0.14) !important;
  border-color: rgba(255,255,255,0.5) !important;
}
body.a11y .toolbar-btn.active {
  background: rgba(255,255,255,0.18) !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.55) !important;
}

body.a11y .destination-table-view {
  background: #05080d !important;
}

body.a11y .table-title {
  color: #ffffff !important;
  font-size: 23px !important;
}

body.a11y .table-subtitle,
body.a11y .table-count,
body.a11y .table-note {
  color: rgba(255,255,255,0.72) !important;
  font-size: 13px !important;
}

body.a11y .dest-table th {
  background: #05080d !important;
  color: rgba(255,255,255,0.78) !important;
  font-size: 12px !important;
  border-bottom-color: rgba(255,255,255,0.24) !important;
}

body.a11y .dest-table td {
  color: rgba(255,255,255,0.9) !important;
  font-size: 13px !important;
  border-bottom-color: rgba(255,255,255,0.12) !important;
}

body.a11y .dest-name-cell {
  color: #ffffff !important;
}

body.a11y .table-pill {
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.38) !important;
  background: rgba(255,255,255,0.08) !important;
}

body.a11y .desktop-sidebar-tab {
  width: 34px !important;
  height: 88px !important;
  background: #05080d !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.65) !important;
  box-shadow: -4px 0 18px rgba(0,0,0,0.55) !important;
}

body.a11y .desktop-sidebar-tab:hover,
body.a11y .desktop-sidebar-tab:focus-visible {
  background: #ffffff !important;
  color: #000000 !important;
  border-color: #ffffff !important;
  outline: 3px solid #ffffff !important;
  outline-offset: 3px !important;
}

body.a11y .desktop-sidebar-tab span {
  font-size: 30px !important;
  font-weight: 700 !important;
}

/* filter-btn active state badge */
body.a11y #filter-btn,
body.a11y #view-toggle-btn {
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.3) !important;
  background: rgba(255,255,255,0.08) !important;
  font-size: 14px !important;
  min-height: 44px !important;
  padding: 0 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}
body.a11y #filter-btn.active,
body.a11y #view-toggle-btn.active {
  background: rgba(255,255,255,0.16) !important;
  border-color: rgba(255,255,255,0.5) !important;
}

/* celsius btn has inline style — use #celsius-btn id to override it */
body.a11y #celsius-btn {
  background: rgba(255,255,255,0.08) !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.3) !important;
  font-size: 13px !important;
  padding: 4px 10px !important;
}
body.a11y #celsius-btn.active {
  background: rgba(255,255,255,0.18) !important;
  color: #ffffff !important;
}

/* budget-input text: #7ab3e0 → white */
body.a11y .budget-input {
  color: #ffffff !important;
  background: transparent !important;
}
body.a11y .budget-input::placeholder {
  color: rgba(255,255,255,0.4) !important;
}

/* household badge: blue tint → white */
body.a11y .budget-hh-badge {
  color: rgba(255,255,255,0.85) !important;
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.2) !important;
}

/* Round Trip / tcost-flight box: blue tint background → dark white-bordered */
body.a11y .tcost-flight {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.2) !important;
}
body.a11y .tcost-flight-label {
  color: rgba(255,255,255,0.72) !important;
}
body.a11y .tcost-flight-val {
  color: #ffffff !important;
}
body.a11y .tcost-flight-link {
  color: rgba(255,255,255,0.85) !important;
  border-color: rgba(255,255,255,0.2) !important;
}
body.a11y .tcost-flight-link:hover {
  background: rgba(255,255,255,0.1) !important;
  color: #ffffff !important;
}
body.a11y .tcost-cell {
  background: rgba(255,255,255,0.06) !important;
}

/* Print report button (inside report overlay — white bg version) */
body.a11y .report-print-btn {
  background: #1a1a1a !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
}
body.a11y .report-close-btn {
  background: #2a2a2a !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
}

/* live badge colors */
body.a11y .live-badge {
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.25) !important;
  background: rgba(255,255,255,0.07) !important;
}
body.a11y .live-badge.loading {
  color: #f0c060 !important;
}
body.a11y .live-badge.loaded {
  color: #72d98f !important;
}

/* budget-currency-select text */
body.a11y .budget-currency-select {
  color: #ffffff !important;
  background: #05080d !important;
  border-color: rgba(255,255,255,0.3) !important;
}

/* pin chips blue border → white */
body.a11y .pin-chip {
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.3) !important;
  background: rgba(255,255,255,0.06) !important;
}

/* sbar-fill track */
body.a11y .sbar-track {
  background: rgba(255,255,255,0.12) !important;
}


/* ════════════════════════════════════════════════════════════════════════════
   WHERENEXT — Expat Tax + Inheritance sections
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Expat Income Tax ── */
.wn-tax-explainer {
  font-size: 11px;
  color: rgba(240,230,211,0.65);
  line-height: 1.6;
  margin-bottom: 12px;
  padding: 9px 11px;
  background: rgba(255,255,255,0.04);
  border-radius: 6px;
  border-left: 2px solid rgba(122,179,224,0.35);
}
.wn-tax-explainer strong { color: rgba(240,230,211,0.9); }

.wn-tax-row {
  background: rgba(255,255,255,0.04);
  border-radius: 7px;
  padding: 10px 12px;
  margin-bottom: 6px;
}

.wn-tax-row > .wn-tax-gross {
  font-size: 11px;
  font-weight: 600;
  color: rgba(240,230,211,0.5);
  letter-spacing: .04em;
  margin-bottom: 6px;
  text-transform: uppercase;
}
.wn-tax-gross-label { font-weight: 400; }

.wn-tax-row > div:nth-child(2) {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 2px;
}

.wn-tax-rate {
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
}
.wn-tax-pct-sign {
  font-size: 14px;
  font-weight: 600;
}
.wn-tax-rate-label {
  font-size: 10px;
  color: rgba(240,230,211,0.4);
  text-transform: uppercase;
  letter-spacing: .06em;
  align-self: center;
}

.wn-tax-detail {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 4px;
}
.wn-tax-result {
  margin-bottom: 6px;
}
.wn-tax-net-amt {
  font-size: 15px;
  font-weight: 600;
  color: #f0e6d3;
}
.wn-tax-net-label {
  font-size: 10px;
  color: rgba(240,230,211,0.4);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.wn-tax-breakdown {
  font-size: 10px;
  color: rgba(240,230,211,0.42);
  line-height: 1.5;
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.wn-tax-breakdown strong { color: rgba(240,230,211,0.7); }

.wn-tax-note {
  font-size: 10px;
  color: rgba(240,230,211,0.38);
  font-style: italic;
  line-height: 1.55;
  margin-top: 8px;
  margin-bottom: 6px;
}

/* ── Estate & Inheritance ── */
.wn-inh-header {
  margin-bottom: 8px;
}

.wn-inh-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 4px;
}

.wn-inh-badge.none {
  background: rgba(114,217,143,0.15);
  color: #72d98f;
  border: 1px solid rgba(114,217,143,0.25);
}

.wn-inh-badge.taxable {
  background: rgba(240,192,96,0.12);
  color: #f0c060;
  border: 1px solid rgba(240,192,96,0.22);
}

.wn-inh-headline {
  font-size: 12px;
  color: rgba(240,230,211,0.82);
  line-height: 1.55;
  margin-bottom: 10px;
}

.wn-inh-rates {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  margin-bottom: 10px;
}

.wn-inh-rate-item {
  background: rgba(255,255,255,0.04);
  border-radius: 6px;
  padding: 7px 9px;
  text-align: center;
}

.wn-inh-rate-label {
  display: block;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(240,230,211,0.38);
  margin-bottom: 4px;
}

.wn-inh-rate-val {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #f0e6d3;
  line-height: 1.2;
}

.wn-inh-flag {
  font-size: 11px;
  color: #f0c060;
  background: rgba(240,192,96,0.08);
  border: 1px solid rgba(240,192,96,0.18);
  border-radius: 6px;
  padding: 8px 10px;
  line-height: 1.5;
  margin-bottom: 8px;
}

/* ── body.a11y overrides ── */
body.a11y .wn-tax-explainer  { font-size: 13px !important; color: rgba(255,255,255,0.8) !important; background: rgba(255,255,255,0.06) !important; }
body.a11y .wn-tax-row        { background: rgba(255,255,255,0.07) !important; }
body.a11y .wn-tax-gross      { font-size: 13px !important; color: rgba(255,255,255,0.65) !important; }
body.a11y .wn-tax-rate       { font-size: 28px !important; }
body.a11y .wn-tax-rate-label { font-size: 12px !important; color: rgba(255,255,255,0.55) !important; }
body.a11y .wn-tax-net-amt    { font-size: 17px !important; color: #ffffff !important; }
body.a11y .wn-tax-net-label  { font-size: 12px !important; color: rgba(255,255,255,0.55) !important; }
body.a11y .wn-tax-breakdown  { font-size: 12px !important; color: rgba(255,255,255,0.6) !important; }
body.a11y .wn-tax-note       { font-size: 12px !important; color: rgba(255,255,255,0.55) !important; }
body.a11y .wn-inh-headline   { font-size: 14px !important; color: rgba(255,255,255,0.9) !important; }
body.a11y .wn-inh-rate-label { font-size: 12px !important; color: rgba(255,255,255,0.65) !important; }
body.a11y .wn-inh-rate-val   { font-size: 16px !important; color: #ffffff !important; }
body.a11y .wn-inh-rate-item  { background: rgba(255,255,255,0.07) !important; }
body.a11y .wn-inh-flag       { font-size: 13px !important; color: #f0c060 !important; }


/* ════════════════════════════════════════════════════════════════════════════
   WHERENEXT — Grocery Staple Prices section
   ════════════════════════════════════════════════════════════════════════════ */

.wn-food-explainer {
  font-size: 11px;
  color: rgba(240,230,211,0.6);
  line-height: 1.55;
  margin-bottom: 12px;
}

.wn-food-basket {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255,255,255,0.04);
  border-radius: 8px;
  padding: 11px 14px;
  margin-bottom: 10px;
}

.wn-food-basket-amt {
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}

.wn-food-basket-label {
  font-size: 11px;
  color: rgba(240,230,211,0.55);
  line-height: 1.5;
}

.wn-food-basket-sub {
  font-size: 10px;
  color: rgba(240,230,211,0.35);
}

.wn-food-items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  margin-bottom: 8px;
}

.wn-food-item {
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,0.04);
  border-radius: 6px;
  padding: 7px 9px;
}

.wn-food-icon {
  font-size: 14px;
  flex-shrink: 0;
}

.wn-food-label {
  font-size: 10px;
  color: rgba(240,230,211,0.45);
  letter-spacing: .03em;
  flex: 1;
}

.wn-food-val {
  font-size: 12px;
  font-weight: 700;
  color: #f0e6d3;
  white-space: nowrap;
}

/* ── body.a11y overrides ── */
body.a11y .wn-food-explainer     { font-size: 13px !important; color: rgba(255,255,255,0.75) !important; }
body.a11y .wn-food-basket        { background: rgba(255,255,255,0.07) !important; }
body.a11y .wn-food-basket-amt    { font-size: 32px !important; }
body.a11y .wn-food-basket-label  { font-size: 13px !important; color: rgba(255,255,255,0.7) !important; }
body.a11y .wn-food-basket-sub    { font-size: 12px !important; color: rgba(255,255,255,0.5) !important; }
body.a11y .wn-food-item          { background: rgba(255,255,255,0.07) !important; }
body.a11y .wn-food-label         { font-size: 12px !important; color: rgba(255,255,255,0.65) !important; }
body.a11y .wn-food-val           { font-size: 14px !important; color: #ffffff !important; }


/* ════════════════════════════════════════════════════════════════════════════
   REPORT — WhereNext section sub-elements
   ════════════════════════════════════════════════════════════════════════════ */

.report-wn-note {
  font-size: 9px;
  color: #999;
  font-style: italic;
  margin-bottom: 5px;
  line-height: 1.4;
}

.report-wn-flag {
  font-size: 10px;
  color: #8a4800;
  background: #fff8ee;
  border-left: 2px solid #e8a040;
  border-radius: 0 3px 3px 0;
  padding: 4px 8px;
  margin-top: 5px;
  line-height: 1.5;
}


/* ════════════════════════════════════════════════════════════════════════════
   LATEST NEWS section
   ════════════════════════════════════════════════════════════════════════════ */

.news-lnk {
  display: block !important;                 /* override any inherited flex */
  padding: 10px 16px !important;            /* 16px matches .sec side padding */
  border-bottom: 1px solid rgba(255,255,255,0.06);
  text-decoration: none !important;
  transition: background 0.12s;
  margin: 0 -16px !important;              /* bleed to .sec edge (sec padding=16px) */
  background: transparent !important;
}

.news-lnk:last-of-type {
  border-bottom: none;
}

.news-lnk:hover {
  background: rgba(255,255,255,0.05) !important;
}

.news-lnk-title {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #c9a84c !important;               /* light gold — !important beats global a{} */
  line-height: 1.5 !important;
  display: block !important;
  text-align: left !important;             /* flush left, rag right */
  margin-bottom: 3px;
  text-transform: none !important;         /* prevent src-line a text-transform:uppercase */
  letter-spacing: normal !important;
}

.news-lnk-meta {
  font-size: 10px !important;
  font-weight: 400 !important;
  color: rgba(240,230,211,0.42) !important;
  display: block !important;
  text-align: right !important;            /* flush right, rag left */
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: none !important;
  letter-spacing: normal !important;
}

.news-empty {
  font-size: 11px;
  color: rgba(240,230,211,0.38);
  font-style: italic;
  padding: 8px 0 4px;
}

/* ── body.a11y overrides ── */
body.a11y .news-lnk        { padding: 12px 14px !important; }
body.a11y .news-lnk-title  { font-size: 14px !important; color: #e8c96a !important; }
body.a11y .news-lnk-meta   { font-size: 12px !important; color: rgba(255,255,255,0.6) !important; }
body.a11y .news-empty      { font-size: 13px !important; color: rgba(255,255,255,0.5) !important; }


/* ════════════════════════════════════════════════════════════════════════════
   SPARSE DATA WARNING — shown when COLI + Safety both missing
   ════════════════════════════════════════════════════════════════════════════ */

.sparse-warning {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: rgba(240,160,50,0.07);
  border: 1px solid rgba(240,160,50,0.22);
  border-radius: 8px;
  padding: 13px 14px;
  margin: 0;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

.sparse-warning-icon {
  font-size: 18px;
  flex-shrink: 0;
  opacity: 0.85;
  margin-top: 1px;
}

.sparse-warning-body {
  flex: 1;
  min-width: 0;
}

.sparse-warning-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #f0c060;
  margin-bottom: 6px;
}

.sparse-warning-text {
  font-size: 11px;
  color: rgba(240,230,211,0.62);
  line-height: 1.6;
  margin-bottom: 8px;
}

.sparse-warning-text strong {
  color: rgba(240,230,211,0.88);
}

.sparse-warning-link {
  display: inline-block;
  font-size: 10px;
  color: #7ab3e0;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: .03em;
}

.sparse-warning-link:hover {
  color: #aed4f5;
  text-decoration: underline;
}

/* ── body.a11y overrides ── */
body.a11y .sparse-warning-title { font-size: 13px !important; }
body.a11y .sparse-warning-text  { font-size: 13px !important; color: rgba(255,255,255,0.8) !important; }
body.a11y .sparse-warning-link  { font-size: 12px !important; }


/* ════════════════════════════════════════════════════════════════════════════
   ACTIVE CONFLICT WARNING — shown for countries with e.conflict set
   ════════════════════════════════════════════════════════════════════════════ */

.conflict-warning {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: rgba(255,23,68,0.08);
  border: 1px solid rgba(255,23,68,0.30);
  border-radius: 8px;
  padding: 13px 14px;
  margin: 0;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

.conflict-warning-icon {
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}

.conflict-warning-body { flex: 1; min-width: 0; }

.conflict-warning-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #ff5252;
  margin-bottom: 6px;
}

.conflict-warning-text {
  font-size: 11px;
  color: rgba(240,230,211,0.70);
  line-height: 1.6;
  margin-bottom: 8px;
}

.conflict-warning-text.is-collapsed {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.conflict-warning-text.is-expanded {
  display: block;
}

.alert-expand-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: #ff8a80;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .03em;
  margin: -2px 0 8px;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.alert-expand-btn:hover {
  color: #ffcdd2;
}

.conflict-warning-meta {
  font-size: 10px;
  color: rgba(255,205,210,0.72);
  line-height: 1.5;
  margin: -2px 0 8px;
  font-weight: 600;
}

.conflict-warning-link {
  display: inline-block;
  font-size: 10px;
  color: #ff8a80;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: .03em;
}

.conflict-warning-link:hover {
  color: #ffcdd2;
  text-decoration: underline;
}

/* a11y overrides */
body.a11y .conflict-warning-title { font-size: 13px !important; }
body.a11y .conflict-warning-text  { font-size: 13px !important; color: rgba(255,255,255,0.85) !important; }
body.a11y .conflict-warning-meta  { font-size: 12px !important; color: rgba(255,255,255,0.8) !important; }
body.a11y .conflict-warning-link  { font-size: 12px !important; }
body.a11y .alert-expand-btn      { font-size: 12px !important; }

/* ── Mobile topbar control scaling: final override ─────────────────────────── */
@media screen and (max-width: 768px) {
  .topbar-row1 {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    padding: 6px 82px 6px 10px !important;
    min-height: 0 !important;
    gap: 5px 8px !important;
  }

  .topbar-row1 > a {
    order: 1 !important;
    flex: 0 0 150px !important;
    width: 150px !important;
    height: 28px !important;
  }

  .topbar-row1 img {
    height: 28px !important;
    width: 150px !important;
    max-width: 150px !important;
    object-fit: contain !important;
  }

  .topbar-tagline {
    order: 2 !important;
    flex: 1 1 120px !important;
    min-width: 0 !important;
    font-size: 9px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
  }

  .topbar-row1-tools {
    order: 3 !important;
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    margin-left: 0 !important;
    width: 100% !important;
    gap: 3px 6px !important;
  }

  .topbar-row1-tools .live-badge {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;   /* spans both button rows */
    justify-self: stretch !important;
    align-self: center !important;
    text-align: center !important;
    font-size: 8px !important;
    padding: 2px 5px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .topbar-row1-tools .toolbar-btn {
    grid-column: 2 !important;
    justify-self: stretch !important;
    text-align: center !important;
    min-height: 22px !important;
    padding: 2px 8px !important;
    font-size: 8px !important;
    width: 100% !important;
  }

  .topbar-row2 {
    display: block !important;
    padding: 5px 9px 7px !important;
  }

  .tbar-controls {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 5px !important;
    width: 100% !important;
  }

  .tbar-divider {
    display: none !important;
  }

  .tbar-group {
    align-items: stretch !important;
    min-width: 0 !important;
    width: 100% !important;
    gap: 2px !important;
  }

  .tbar-group-fields {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 5px !important;
    width: 100% !important;
    align-items: end !important;
  }

  .tbar-field {
    min-width: 0 !important;
    width: 100% !important;
    gap: 2px !important;
  }

  .tbar-field-label,
  .tbar-section-label {
    font-size: 6.5px !important;
    letter-spacing: .05em !important;
  }

  .home-select,
  .budget-currency-select,
  .budget-wrap,
  .search-wrap {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  .budget-wrap {
    height: 34px !important;  /* tall enough for 16px font + padding */
    padding: 0 7px !important;
    align-items: center !important;
  }

  .budget-input {
    width: 100% !important;
    min-width: 0 !important;
    font-size: 16px !important;  /* ≥16px prevents Safari auto-zoom on focus */
    line-height: 1 !important;
    padding: 0 !important;
    height: auto !important;
  }
  .search-input {
    width: 100% !important;
    min-width: 0 !important;
    font-size: 16px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .budget-currency-select,
  .home-select {
    font-size: 11px !important;
    height: 25px !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
  }

  .tbar-search-field {
    grid-column: 1 / -1 !important;
  }

  .tbar-filter-field {
    grid-column: 1 / -1 !important;
  }

  .tbar-filter-field > div {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 5px !important;
    width: 100% !important;
  }

  .tbar-filter-field .toolbar-btn {
    justify-content: center !important;
    width: 100% !important;
    min-height: 25px !important;
    padding: 3px 5px !important;
    font-size: 9px !important;
  }

  #filter-panel {
    grid-column: 1 / -1 !important;
  }

  .map-legend-float {
    top: 8px !important;
    bottom: auto !important;
    left: 50% !important;
    max-width: calc(100% - 18px) !important;
    overflow-x: auto !important;
    gap: 9px !important;
    padding: 4px 9px !important;
    border-radius: 4px !important;
    pointer-events: auto !important;
    scrollbar-width: none !important;
  }

  .map-legend-float::-webkit-scrollbar {
    display: none !important;
  }

  .map-legend-float .li {
    font-size: 8px !important;
    letter-spacing: .02em !important;
  }

  .map-legend-float .sw {
    width: 7px !important;
    height: 7px !important;
  }
}

/* Light mode readability pass: must live after the older dark panel rules. */
body.light-mode #sidebar,
body.light-mode #sidebar-content,
body.light-mode #sidebar-content .cinfo,
body.light-mode #sidebar-content .sec,
body.light-mode #sidebar-content .hero,
body.light-mode #sidebar-content .idle {
  background: var(--hs-warm-cream) !important;
  color: var(--hs-slate-text) !important;
}

body.light-mode #sidebar-content :where(
  p, li, span, div, strong, em,
  .overview, .overview-src,
  .sl, .sv, .sv.small,
  .spot .sn, .spot .sd,
  .cm .mon, .cm .tmp,
  .crime-name, .crime-trend,
  .sbar-ends, .lc-label, .lc-sub,
  .env-meta span, .env-meta b, .env-stat span, .env-stat b,
  .env-note, .env-aqi-label,
  .health-note,
  .budget-pp-label, .budget-unit, .budget-tier-note, .budget-bar-label, .budget-bar-amt,
  .tcost-label, .tcost-val, .tcost-sub, .tcost-note,
  .wn-tax-explainer, .wn-tax-explainer strong, .wn-tax-gross, .wn-tax-rate-label,
  .wn-tax-net-label, .wn-tax-breakdown, .wn-tax-breakdown strong, .wn-tax-note,
  .wn-inh-headline, .wn-inh-rate-label, .wn-inh-rate-val, .wn-inh-flag,
  .wn-food-explainer, .wn-food-basket-label, .wn-food-basket-sub,
  .wn-food-label, .wn-food-val,
  .news-lnk-meta, .news-empty,
  .sparse-warning-text, .sparse-warning-text strong,
  .conflict-warning-text
) {
  color: var(--hs-slate-text) !important;
}

body.light-mode #sidebar-content :where(
  .cname, .clock-time, .cscore-label,
  .live-cell .lc-val,
  .spot .sn,
  .wn-tax-net-amt,
  .wn-food-val
) {
  color: var(--hs-haven-navy) !important;
}

body.light-mode #sidebar-content :where(
  .sec-title, .filter-title,
  .sparse-warning-title,
  .news-lnk-title
) {
  color: var(--hs-bronze-gold) !important;
}

body.light-mode #sidebar-content :where(
  .stat, .spot, .cm, .tcost-cell,
  .env-stat, .env-note, .env-longterm,
  .health-note, .budget-pp, .tcost-flight,
  .wn-tax-explainer, .wn-tax-row, .wn-inh-rate-item,
  .wn-food-basket, .wn-food-item,
  .news-lnk, .sparse-warning, .conflict-warning,
  .data-status
) {
  background: var(--hs-light-box-bg) !important;
  border-color: var(--hs-light-box-border) !important;
}

body.light-mode #sidebar-content :where(.src-line, .lc-src) {
  color: rgba(51,65,85,0.72) !important;
}

body.light-mode #sidebar-content :where(a, .src-line a, .lc-src a, .lnk, .sparse-warning-link, .conflict-warning-link, .news-lnk-title) {
  color: var(--hs-data-navy) !important;
}

body.light-mode #sidebar-content :where(.sv.good, .table-good, .live-cell .advisory-1) {
  color: #20743e !important;
}

body.light-mode #sidebar-content :where(.sv.warn, .table-warn, .live-cell .advisory-2) {
  color: #8b6410 !important;
}

body.light-mode #sidebar-content :where(.sv.bad, .table-bad, .live-cell .advisory-3, .live-cell .advisory-4) {
  color: #9b2f24 !important;
}
/* ds-val state badges in light mode — stable colours that don't "flip" on theme toggle */
body.light-mode .data-status .ds-val.ok {
  background: rgba(20,110,50,0.12);
  color: #155a2e;
}
body.light-mode .data-status .ds-val.loading {
  background: rgba(212,175,55,0.15);
  color: #8b6410;
}
body.light-mode .data-status .ds-val.fail {
  background: rgba(160,30,20,0.10);
  color: #8b1a10;
}
body.light-mode .data-status .ds-val.static {
  background: rgba(1,22,61,0.07);
  color: rgba(7,26,51,0.52);
}


body.light-mode #sidebar-content :where(
  .cscore-val,
  .cscore-stars,
  .env-aqi,
  .tcost-val,
  .tcost-flight-val,
  .budget-pp-eq,
  .budget-bar-amt,
  .wn-tax-rate,
  .wn-tax-net-amt,
  .wn-inh-rate-val,
  .wn-food-basket-amt,
  [style*="font-size:26px"][style*="color:"],
  [style*="font-size:28px"][style*="color:"],
  [style*="font-size:29px"][style*="color:"]
) {
  -webkit-text-stroke: 0.45px rgba(1,22,61,0.85);
  paint-order: stroke fill;
  text-shadow: none;
}

body.light-mode #sidebar-content :where(
  [style*="color:#00c853"],
  [style*="color: #00c853"],
  [style*="color:#72d98f"],
  [style*="color: #72d98f"],
  .cscore-val[style*="#00c853"],
  .cscore-stars[style*="#00c853"]
) {
  color: #20743e !important;
}

body.light-mode #sidebar-content :where(
  [style*="color:#aeea00"],
  [style*="color: #aeea00"]
) {
  color: #5f7f00 !important;
}

body.light-mode #sidebar-content :where(
  [style*="color:#f0c060"],
  [style*="color: #f0c060"],
  [style*="color:#e8a020"],
  [style*="color: #e8a020"]
) {
  color: #8b6410 !important;
}

body.light-mode #sidebar-content :where(
  [style*="color:#ff9100"],
  [style*="color: #ff9100"],
  [style*="color:#e8902a"],
  [style*="color: #e8902a"]
) {
  color: #b35f00 !important;
}

body.light-mode #sidebar-content :where(
  [style*="color:#ff1744"],
  [style*="color: #ff1744"],
  [style*="color:#e88a76"],
  [style*="color: #e88a76"],
  [style*="color:#e8a87c"],
  [style*="color: #e8a87c"]
) {
  color: #9b2f24 !important;
}

body.light-mode #sidebar-content :where(.panel-close-btn, .panel-action-btn, .lnk),
body.light-mode #panel-frozen-zone .panel-close-btn,
body.light-mode #panel-frozen-zone .panel-action-btn {
  background: rgba(1,22,61,0.06) !important;
  border-color: rgba(1,22,61,0.16) !important;
  color: var(--hs-haven-navy) !important;
}

body.light-mode #sidebar-content .tbadge,
body.light-mode .smart-tag-score-label:where(.challenging, .restricted) {
  color: #ffffff !important;
}

body.light-mode #sidebar-content :where(.panel-close-btn:hover, .panel-action-btn:hover, .lnk:hover),
body.light-mode #panel-frozen-zone .panel-close-btn:hover,
body.light-mode #panel-frozen-zone .panel-action-btn:hover {
  background: rgba(215,138,21,0.14) !important;
  border-color: rgba(215,138,21,0.35) !important;
}

body.light-mode #sidebar-content .conflict-warning {
  background: #FDECEC !important;
  border-color: #F4B8B8 !important;
  border-left: 3px solid #C2413A !important;
}

body.light-mode #sidebar-content .conflict-warning-title,
body.light-mode #sidebar-content .conflict-warning-icon {
  color: #9B2F24 !important;
}

body.light-mode #sidebar-content .conflict-warning-text {
  color: #5F1F1A !important;
}

body.light-mode #sidebar-content .conflict-warning-meta {
  color: #7A2C25 !important;
}

body.light-mode #sidebar-content .conflict-warning-link {
  color: #8B1E18 !important;
}

body.light-mode #sidebar-content .alert-expand-btn {
  color: #8B1E18 !important;
}

body.light-mode #sidebar-content .alert-expand-btn:hover {
  color: #5F1F1A !important;
}

body.light-mode #sidebar-content .conflict-warning-link:hover {
  color: #5F1F1A !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   ACCESSIBILITY + LIGHT MODE — body.a11y.light-mode combined
   High contrast rules for the LIGHT palette:
   • Use haven-navy / data-navy for text (not white)
   • Use warm cream / soft borders for backgrounds (not near-black)
   • Keep all font-size / min-height / touch-target enlargements from body.a11y
   • Override the dark a11y colour rules where they conflict with light mode
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Backgrounds: dark near-black → cream/navy-tinted ─────────────────────── */
body.a11y.light-mode .topbar,
body.a11y.light-mode .topbar-row1,
body.a11y.light-mode .topbar-row2       { background: #FAF7EF !important; }
body.a11y.light-mode .topbar-row1       { border-bottom-color: rgba(1,22,61,0.18) !important; }
body.a11y.light-mode .topbar-row2       { border-top-color: rgba(1,22,61,0.10) !important; }
body.a11y.light-mode #sidebar,
body.a11y.light-mode #sidebar-content   { background: #FAF7EF !important; }
body.a11y.light-mode .sec               { background: #FAF7EF !important; border-bottom-color: rgba(1,22,61,0.16) !important; }
body.a11y.light-mode .hero              { background: #FAF7EF !important; border-bottom-color: rgba(1,22,61,0.16) !important; }
body.a11y.light-mode .live-cell         { background: #FAF7EF !important; }
body.a11y.light-mode .stat              { background: rgba(1,22,61,0.05) !important; border: 1px solid rgba(1,22,61,0.14) !important; }
body.a11y.light-mode .cm               { background: rgba(1,22,61,0.05) !important; }
body.a11y.light-mode .spot             { background: rgba(1,22,61,0.05) !important; border: 1px solid rgba(1,22,61,0.14) !important; }
body.a11y.light-mode .filter-panel-inner,
body.a11y.light-mode #filter-panel      { background: #FAF7EF !important; border-color: rgba(1,22,61,0.22) !important; }
body.a11y.light-mode .disclaimer-bar   { background: #f5f0e0 !important; }
body.a11y.light-mode .destination-table-view { background: #FAF7EF !important; }
body.a11y.light-mode .dest-table th    { background: #f0ecdf !important;
                                          color: rgba(7,26,51,0.82) !important;
                                          border-bottom-color: var(--hs-soft-border) !important; }
body.a11y.light-mode .pin-tray         { background: #f0ecdf !important; border-top-color: rgba(1,22,61,0.14) !important; }
body.a11y.light-mode .disc-box         { background: #FAF7EF !important; }
body.a11y.light-mode #search-results   { background: #FAF7EF !important; }

/* ── Text: white → navy ────────────────────────────────────────────────────── */
body.a11y.light-mode .cname            { color: #01163D !important; }
body.a11y.light-mode .stat .sv         { color: #01163D !important; }
body.a11y.light-mode .stat .sl         { color: rgba(7,26,51,0.65) !important; }
body.a11y.light-mode .sec-title        { color: var(--hs-bronze-gold) !important; }
body.a11y.light-mode .overview         { color: #334155 !important; }
body.a11y.light-mode .lnk              { color: #042E61 !important; }
body.a11y.light-mode .tbadge           { color: #ffffff !important; }
body.a11y.light-mode .pill             { color: rgba(7,26,51,0.85) !important; }
body.a11y.light-mode .live-cell .lc-label { color: rgba(7,26,51,0.65) !important; }
body.a11y.light-mode .live-cell .lc-val   { color: #01163D !important; }
body.a11y.light-mode .cm .mon          { color: rgba(7,26,51,0.65) !important; }
body.a11y.light-mode .cm .tmp          { color: #01163D !important; }
body.a11y.light-mode .spot .sn         { color: #01163D !important; }
body.a11y.light-mode .filter-title     { color: #01163D !important; }
body.a11y.light-mode .filter-label     { color: #01163D !important; }
body.a11y.light-mode .filter-hint      { color: rgba(7,26,51,0.60) !important; }
body.a11y.light-mode .filter-result    { color: rgba(7,26,51,0.70) !important; }
body.a11y.light-mode .home-select      { color: #01163D !important; background: #FAF7EF !important; }
body.a11y.light-mode .search-input     { color: #01163D !important; background: transparent !important; }
body.a11y.light-mode .search-input::placeholder { color: rgba(7,26,51,0.42) !important; }
body.a11y.light-mode .topbar-tagline   { color: rgba(7,26,51,0.55) !important; }
body.a11y.light-mode .cscore-val       { color: #01163D !important; }
body.a11y.light-mode .cscore-label     { color: rgba(7,26,51,0.65) !important; }
body.a11y.light-mode .src-line a       { color: #042E61 !important; font-weight: 700 !important; }
body.a11y.light-mode .crime-item       { color: rgba(7,26,51,0.90) !important; }
body.a11y.light-mode .tcost-label      { color: rgba(7,26,51,0.65) !important; }
body.a11y.light-mode .tcost-val        { color: #01163D !important; }
body.a11y.light-mode .tcost-flight-val { color: #042E61 !important; }
body.a11y.light-mode .tcost-sub        { color: rgba(7,26,51,0.60) !important; }
body.a11y.light-mode .tcost-note       { color: rgba(7,26,51,0.55) !important; }
body.a11y.light-mode .budget-currency  { color: #01163D !important; }
body.a11y.light-mode .budget-unit      { color: rgba(7,26,51,0.70) !important; }
body.a11y.light-mode .pin-tray-label   { color: rgba(7,26,51,0.70) !important; }
body.a11y.light-mode .pin-hint         { color: rgba(7,26,51,0.55) !important; }

/* ── Borders: white → navy ──────────────────────────────────────────────────── */
body.a11y.light-mode .topbar-row1      { border-bottom-color: rgba(1,22,61,0.18) !important; }
body.a11y.light-mode .home-select,
body.a11y.light-mode .budget-wrap,
body.a11y.light-mode .search-wrap,
body.a11y.light-mode .budget-currency-select { border-color: rgba(1,22,61,0.30) !important; }
body.a11y.light-mode .home-select:focus,
body.a11y.light-mode .budget-currency-select:focus,
body.a11y.light-mode .search-input:focus { border-color: #01163D !important; box-shadow: 0 0 0 2px rgba(1,22,61,0.18) !important; }

/* ── Form controls ─────────────────────────────────────────────────────────── */
body.a11y.light-mode .budget-currency-select {
  color: #01163D !important;
  background: #FAF7EF !important;
  border-color: rgba(1,22,61,0.28) !important;
}
body.a11y.light-mode .budget-input     { color: #01163D !important; }
body.a11y.light-mode .budget-input::placeholder { color: rgba(7,26,51,0.40) !important; }
body.a11y.light-mode .budget-clear     { color: #01163D !important; }

/* ── Toolbar buttons ───────────────────────────────────────────────────────── */
body.a11y.light-mode .toolbar-btn {
  background: rgba(1,22,61,0.07) !important;
  color: #01163D !important;
  border-color: rgba(1,22,61,0.28) !important;
}
body.a11y.light-mode .toolbar-btn:hover {
  background: rgba(1,22,61,0.13) !important;
  border-color: rgba(1,22,61,0.45) !important;
}
body.a11y.light-mode .toolbar-btn.active {
  background: rgba(1,22,61,0.16) !important;
  border-color: rgba(1,22,61,0.50) !important;
}

/* ── Celsius button ────────────────────────────────────────────────────────── */
body.a11y.light-mode #celsius-btn {
  background: rgba(1,22,61,0.07) !important;
  color: #01163D !important;
  border-color: rgba(1,22,61,0.28) !important;
}
body.a11y.light-mode #celsius-btn.active {
  background: rgba(1,22,61,0.16) !important;
}

/* ── Panel action buttons ──────────────────────────────────────────────────── */
body.a11y.light-mode .panel-action-btn,
body.a11y.light-mode .panel-close-btn,
body.a11y.light-mode #panel-frozen-zone .panel-action-btn,
body.a11y.light-mode #panel-frozen-zone .panel-close-btn {
  background: rgba(1,22,61,0.07) !important;
  color: #01163D !important;
  border-color: rgba(1,22,61,0.22) !important;
}

/* ── Pin tray ──────────────────────────────────────────────────────────────── */
body.a11y.light-mode .pin-chip {
  color: #155a2e !important;
  border-color: rgba(20,110,50,0.38) !important;
  background: rgba(20,110,50,0.08) !important;
}

/* ── Table ─────────────────────────────────────────────────────────────────── */
body.a11y.light-mode .table-title      { color: #01163D !important; }
body.a11y.light-mode .table-subtitle,
body.a11y.light-mode .table-count,
body.a11y.light-mode .table-note       { color: rgba(7,26,51,0.65) !important; }
body.a11y.light-mode .dest-table td    { color: rgba(7,26,51,0.95) !important; border-bottom-color: rgba(1,22,61,0.10) !important; }
body.a11y.light-mode .dest-name-cell   { color: #01163D !important; }
body.a11y.light-mode .table-pill       { color: #01163D !important; border-color: rgba(1,22,61,0.22) !important; background: rgba(1,22,61,0.05) !important; }

/* ── Desktop panel tab ─────────────────────────────────────────────────────── */
body.a11y.light-mode .desktop-sidebar-tab {
  background: #FAF7EF !important;
  color: #01163D !important;
  border-color: rgba(1,22,61,0.55) !important;
}
body.a11y.light-mode .desktop-sidebar-tab:hover,
body.a11y.light-mode .desktop-sidebar-tab:focus-visible {
  background: #01163D !important;
  color: #FAF7EF !important;
  border-color: #01163D !important;
}

/* ── Live badge ────────────────────────────────────────────────────────────── */
body.a11y.light-mode .live-badge {
  color: #01163D !important;
  border-color: rgba(1,22,61,0.25) !important;
  background: rgba(1,22,61,0.07) !important;
}
body.a11y.light-mode .live-badge.loading { color: #8b6410 !important; }
body.a11y.light-mode .live-badge.loaded  { color: #155a2e !important; }

/* ── Filter pill buttons ───────────────────────────────────────────────────── */
body.a11y.light-mode .filter-pill {
  color: #01163D !important;
  border-color: rgba(1,22,61,0.22) !important;
  background: rgba(1,22,61,0.04) !important;
}
body.a11y.light-mode .filter-pill.active {
  background: rgba(212,175,55,0.18) !important;
  border-color: var(--hs-bronze-gold) !important;
  color: var(--hs-bronze-gold) !important;
}

/* ── Search results ────────────────────────────────────────────────────────── */
body.a11y.light-mode .search-result-item { color: #01163D !important; }
body.a11y.light-mode .search-result-item:hover,
body.a11y.light-mode .search-result-item.active { background: rgba(1,22,61,0.08) !important; }

/* ── Focus rings: white → navy ─────────────────────────────────────────────── */
body.a11y.light-mode *:focus-visible {
  outline-color: #01163D !important;
}

/* ── Map legend ────────────────────────────────────────────────────────────── */
body.a11y.light-mode .map-legend-float {
  background: rgba(240,236,223,0.96) !important;
  border-color: rgba(1,22,61,0.22) !important;
}
body.a11y.light-mode .map-legend-float .li { color: #01163D !important; }

/* ── Smart tag ─────────────────────────────────────────────────────────────── */
body.a11y.light-mode .map-smart-tag {
  background: rgba(245,242,234,0.98) !important;
  border-color: rgba(1,22,61,0.20) !important;
}
body.a11y.light-mode .smart-tag-name  { color: #01163D !important; }
body.a11y.light-mode .smart-tag-kind  { color: rgba(7,26,51,0.52) !important; }
body.a11y.light-mode .smart-tag-chip  { background: rgba(1,22,61,0.05) !important; border-color: rgba(1,22,61,0.14) !important; }
body.a11y.light-mode .smart-tag-chip b { color: rgba(7,26,51,0.50) !important; }
body.a11y.light-mode .smart-tag-chip span { color: rgba(7,26,51,0.85) !important; }

/* Filter and Table buttons — restore navy in light mode */
body.a11y.light-mode #filter-btn,
body.a11y.light-mode #view-toggle-btn {
  color: #01163D !important;
  border-color: rgba(1,22,61,0.28) !important;
  background: rgba(1,22,61,0.07) !important;
}
body.a11y.light-mode #filter-btn.active,
body.a11y.light-mode #view-toggle-btn.active {
  background: rgba(1,22,61,0.14) !important;
  border-color: rgba(1,22,61,0.45) !important;
}

/* Non-a11y light mode: filter-btn white text fix
   (body.a11y #filter-btn !important overrides .tbar-filter-field .toolbar-btn)
   Add a higher-specificity rule for non-a11y light mode */
body.light-mode #filter-btn,
body.light-mode #view-toggle-btn {
  color: #071a33 !important;
  border-color: rgba(7,26,51,0.16) !important;
  background: rgba(7,26,51,0.06) !important;
}
body.light-mode #filter-btn:hover,
body.light-mode #view-toggle-btn:hover,
body.light-mode #filter-btn.active,
body.light-mode #view-toggle-btn.active {
  background: rgba(212,175,55,0.14) !important;
  border-color: rgba(212,175,55,0.35) !important;
  color: #071a33 !important;
}


/* ── Sidebar/panel text — mirrors body.light-mode #sidebar-content :where() ── */
body.a11y.light-mode #sidebar-content :where(
  p, li, span, div, strong, em,
  .overview, .overview-src,
  .sl, .sv, .sv.small,
  .spot .sn, .spot .sd,
  .cm .mon, .cm .tmp,
  .crime-name, .crime-trend,
  .sbar-ends, .lc-label, .lc-sub, .lc-val,
  .env-meta span, .env-meta b, .env-stat span, .env-stat b,
  .env-note, .env-aqi-label,
  .health-note,
  .budget-pp-label, .budget-unit, .budget-tier-note, .budget-bar-label, .budget-bar-amt,
  .tcost-label, .tcost-val, .tcost-sub, .tcost-note,
  .wn-tax-explainer, .wn-tax-explainer strong, .wn-tax-gross, .wn-tax-rate-label,
  .wn-tax-net-label, .wn-tax-breakdown, .wn-tax-breakdown strong, .wn-tax-note,
  .wn-inh-headline, .wn-inh-rate-label, .wn-inh-rate-val, .wn-inh-flag,
  .wn-food-explainer, .wn-food-basket-label, .wn-food-basket-sub,
  .wn-food-label, .wn-food-val,
  .news-lnk-meta, .news-empty,
  .sparse-warning-text, .sparse-warning-text strong,
  .conflict-warning-text
) {
  color: var(--hs-slate-text) !important;
}
body.a11y.light-mode #sidebar-content :where(
  .cname, .clock-time, .cscore-label,
  .live-cell .lc-val,
  .spot .sn,
  .wn-tax-net-amt,
  .wn-food-val
) {
  color: var(--hs-haven-navy) !important;
}
body.a11y.light-mode #sidebar-content :where(
  .sec-title, .filter-title, .sparse-warning-title, .news-lnk-title
) {
  color: var(--hs-bronze-gold) !important;
}
body.a11y.light-mode #sidebar-content :where(a, .src-line a, .lc-src a, .lnk,
  .sparse-warning-link, .conflict-warning-link, .news-lnk-title) {
  color: var(--hs-data-navy) !important;
}
body.a11y.light-mode #sidebar-content :where(.panel-close-btn, .panel-action-btn, .lnk) {
  background: rgba(1,22,61,0.07) !important;
  border-color: rgba(1,22,61,0.20) !important;
  color: var(--hs-haven-navy) !important;
}


/* Cross-browser: ensure a11y button sizing works in Chrome/Safari/Edge */
body.a11y .toolbar-btn,
body.a11y #filter-btn,
body.a11y #view-toggle-btn,
body.a11y .panel-close-btn,
body.a11y .panel-action-btn,
body.a11y .panel-close-btn,
body.a11y .report-btn,
body.a11y .filter-clear-btn {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  box-sizing: border-box !important;
}


/* ── Topbar controls: tbar-field-label, section labels ───────────────────── */
body.a11y.light-mode .tbar-field-label    { color: rgba(7,26,51,0.55) !important; }
body.a11y.light-mode .tbar-section-label  { color: var(--hs-bronze-gold) !important; }
body.a11y.light-mode .tbar-divider        { background: rgba(1,22,61,0.14) !important; }

/* ── Disclaimer bar: text, icon, close, guide link ───────────────────────── */
body.a11y.light-mode .disclaimer-bar,
body.a11y.light-mode .disclaimer-bar .d-text   { color: rgba(7,26,51,0.72) !important; }
body.a11y.light-mode .disclaimer-bar .d-strong  { color: var(--hs-haven-navy) !important; }
body.a11y.light-mode .disclaimer-bar .d-icon    { opacity: 1 !important; }
body.a11y.light-mode .disclaimer-bar .d-close   { color: rgba(7,26,51,0.40) !important; }
body.a11y.light-mode .disclaimer-bar .d-guide-link { color: var(--hs-data-navy) !important; }
body.a11y.light-mode .disclaimer-bar { border-top-color: rgba(1,22,61,0.14) !important; }

/* ── Desktop panel tab ────────────────────────────────────────────────────── */
body.a11y.light-mode .desktop-sidebar-tab {
  border-color: rgba(1,22,61,0.45) !important;
  box-shadow: -4px 0 18px rgba(7,26,51,0.12) !important;
}


/* ── Disclaimer modal (disc-*) in a11y + light mode ────────────────────────── */
body.a11y.light-mode .disc-box {
  background: #FAF7EF !important;
  border-color: rgba(212,175,55,0.32) !important;
  box-shadow: 0 24px 80px rgba(7,26,51,0.18) !important;
}
body.a11y.light-mode .disc-header    { border-bottom-color: rgba(212,175,55,0.18) !important; }
body.a11y.light-mode .disc-title     { color: var(--hs-haven-navy) !important; }
body.a11y.light-mode .disc-subtitle  { color: rgba(7,26,51,0.46) !important; }
body.a11y.light-mode .disc-section {
  background: rgba(1,22,61,0.04) !important;
  border-color: rgba(1,22,61,0.10) !important;
}
body.a11y.light-mode .disc-section-title { color: var(--hs-bronze-gold) !important; }
body.a11y.light-mode .disc-section p     { color: rgba(7,26,51,0.68) !important; }
body.a11y.light-mode .disc-section strong { color: var(--hs-haven-navy) !important; }
body.a11y.light-mode .disc-footer    { border-top-color: rgba(1,22,61,0.10) !important; }
body.a11y.light-mode .disc-remember  { color: rgba(7,26,51,0.50) !important; }
body.a11y.light-mode .disc-overlay   { background: rgba(0,0,0,0.55) !important; }

/* ── Topbar row2 controls not yet covered ───────────────────────────────────── */
body.a11y.light-mode .home-select option,
body.a11y.light-mode .budget-currency-select option {
  background: #FAF7EF !important;
  color: var(--hs-haven-navy) !important;
}
body.a11y.light-mode .topbar-row2 { border-top-color: rgba(1,22,61,0.08) !important; }

/* Filter + Table stack vertically in a11y: Table first, Filter below */
body.a11y .tbar-filter-field > div {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 4px !important;
}
body.a11y .tbar-filter-field .toolbar-btn {
  width: 100% !important;
  justify-content: center !important;
}

/* ── Compare-only filter pill ────────────────────────────────────────────────── */
#f-compare-btn {
  opacity: 0.38;
  cursor: not-allowed;
  pointer-events: none;
}
#f-compare-btn:not([disabled]) {
  opacity: 1;
  cursor: pointer;
  pointer-events: auto;
}
#f-compare-btn.active {
  background: rgba(212,175,55,0.18) !important;
  border-color: var(--hs-bronze-gold) !important;
  color: var(--hs-bronze-gold) !important;
}
body.light-mode #f-compare-btn.active {
  background: rgba(212,175,55,0.15) !important;
  border-color: #b8720a !important;
  color: #7a4b00 !important;
}
.compare-pill-count {
  font-weight: 700;
  margin-left: 1px;
}