:root {
  color-scheme: light;
  /* The two brands this map is published under: Nashville Area Chamber of Commerce (navy, deep and
     bright blue, teal, green, orange, warm white) and the Nashville Early Education Coalition
     (red, gold, orange, teal, pale blue). Their shared ground is an orange and a teal; the Chamber's
     navy carries the structure and NEEC's red and gold carry the emphasis. */
  --navy: #222936; --chamber: #004F87; --chamber-lt: #007ED9; --chamber-teal: #007177;
  --chamber-green: #00905B; --chamber-orange: #F15E21; --peach: #FFE3CD;
  --neec-red: #ED174C; --neec-gold: #F1AF31; --neec-orange: #F36B21; --neec-teal: #72CACE;
  --neec-pale: #ECF8F9; --neec-cream: #FDF6E7;

  --bg: #FEFCF7; --bg2: #FFFFFF; --bg3: #F5F1E8; --line: #E3DDD0; --line2: #C9C1B0;
  --fg: #222936; --fg2: #4C5565; --fg3: #79818F;
  --gold: #A8761A; --gold2: #004F87; --blue: #007ED9; --red: #D2103F; --green: #00905B; --purple: #6B4FA8;
  --mono: ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: "Nunito Sans", "Open Sans", -apple-system, "Segoe UI", system-ui, sans-serif;
  --rail: 300px; --panel: 440px;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background: var(--bg); color: var(--fg); font: 13px/1.45 var(--sans); overflow: hidden; }
button, input, select { font: inherit; color: inherit; }
a { color: var(--gold2); text-decoration: none; }
#app { display: grid; grid-template-columns: var(--rail) 1fr var(--panel); grid-template-rows: 58px 1fr; height: 100vh; }
#top { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; padding: 0 16px; border-bottom: 1px solid var(--line); background: var(--bg2); }
#top .brand { display: flex; align-items: center; gap: 14px; }
#top .brand .marks { display: flex; align-items: center; gap: 12px; }
#top .brand .marks img { height: 34px; width: auto; display: block; }
#top .brand .marks img[src$=".svg"] { height: 26px; }
#top .brand .marks .rule { width: 1px; height: 28px; background: var(--line2); display: block; }
#top .brand .titles { display: flex; flex-direction: column; gap: 2px; padding-left: 14px; border-left: 1px solid var(--line); }
#top .brand b { font-size: 15px; letter-spacing: .01em; white-space: nowrap; font-weight: 900; line-height: 1.1; }
#top .brand span { font: 600 10px/1 var(--mono); letter-spacing: .18em; color: var(--gold); text-transform: uppercase; }
@media (max-width: 1180px) { #top .brand .marks { display: none; } #top .brand .titles { padding-left: 0; border-left: 0; } }
#top { box-shadow: 0 1px 0 var(--line); }
#top .brand b { color: var(--chamber); }
#top .brand span { color: var(--chamber-teal); }
#top .brand .titles > span { letter-spacing: .09em; white-space: nowrap; }
#top .spacer { flex: 1; }
.hidden { display: none !important; }
.proj { background: var(--bg3); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin: 8px 0; }
.proj .big { display: flex; gap: 12px; align-items: baseline; }
.proj .big b { font: 500 22px var(--mono); }
.proj .big span { font-size: 11px; color: var(--fg3); }
.gbar { display: flex; height: 12px; border-radius: 3px; overflow: hidden; margin: 6px 0 2px; }
.gbar i { display: block; }
.gkey { display: flex; flex-wrap: wrap; gap: 8px; font-size: 10px; color: var(--fg3); }
.gkey i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 3px; }
#top .county { font: 11px var(--mono); color: var(--fg3); }
#top .county b { color: var(--fg2); font-weight: 500; }
#search { width: 260px; padding: 7px 10px; border-radius: 6px; border: 1px solid var(--line2); background: var(--bg3); outline: none; }
#search:focus { border-color: var(--gold); }
.btn { padding: 6px 10px; border-radius: 6px; border: 1px solid var(--line2); background: var(--bg3); cursor: pointer; color: var(--fg2); }
.btn:hover { border-color: var(--gold); color: var(--fg); }
.btn.primary { background: var(--gold); color: #14110a; border-color: var(--gold); font-weight: 600; }
.btn.small { padding: 3px 8px; font-size: 12px; }
.btn.active { background: var(--neec-pale); border-color: var(--chamber); color: var(--chamber); }

#rail { border-right: 1px solid var(--line); background: var(--bg2); overflow-y: auto; padding: 12px 14px 24px; }
#rail h3, #panel h3 { margin: 16px 0 6px; font: 600 10px/1 var(--mono); letter-spacing: .16em; color: var(--fg3); text-transform: uppercase; }
#rail h3:first-child { margin-top: 4px; }
.layers { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.layers .note { grid-column: 1 / -1; margin: 2px 0 0; }
.layers button { text-align: left; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--line); background: transparent; cursor: pointer; color: var(--fg2); font-size: 12px; }
.layers button:hover { border-color: var(--line2); color: var(--fg); }
.layers button.active { background: var(--neec-pale); border-color: var(--chamber); color: var(--chamber); font-weight: 600; }
.layers button small { display: block; color: var(--fg3); font-size: 10px; }
select.metric { width: 100%; padding: 7px 8px; border-radius: 6px; border: 1px solid var(--line2); background: var(--bg3); }
.legend { margin-top: 8px; }
.legend .bar { display: flex; height: 10px; border-radius: 3px; overflow: hidden; }
.legend .bar i { flex: 1; }
.legend .ticks { display: flex; justify-content: space-between; font: 10px var(--mono); color: var(--fg3); margin-top: 3px; }
.legend .desc { font-size: 11px; color: var(--fg3); margin-top: 6px; line-height: 1.4; }
.legend .none { display: inline-block; width: 10px; height: 10px; background: #EDE7DA; border: 1px solid var(--line2); vertical-align: middle; margin-right: 4px; }
.opts label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--fg2); padding: 3px 0; }
.stats-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.stats-mini div { background: var(--bg3); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; }
.stats-mini b { display: block; font: 500 15px var(--mono); color: var(--fg); }
.stats-mini span { font-size: 10px; color: var(--fg3); text-transform: uppercase; letter-spacing: .08em; }
.rank { font-size: 12px; }
.rank .row { display: flex; align-items: center; gap: 8px; padding: 3px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.rank .row:hover { color: var(--gold2); }
.rank .row .n { width: 18px; color: var(--fg3); font: 10px var(--mono); }
.rank .row .v { margin-left: auto; font: 11px var(--mono); color: var(--fg2); }
.rank .row .b { height: 4px; background: var(--gold); border-radius: 2px; opacity: .7; }

#map { position: relative; }
#map .maplibregl-canvas { outline: none; }
.maplibregl-ctrl-attrib { font-size: 10px !important; background: rgba(255,255,255,.82) !important; color: var(--fg3) !important; }
.maplibregl-ctrl-attrib a { color: var(--fg3) !important; }
.maplibregl-ctrl-group { background: var(--bg2) !important; border: 1px solid var(--line2); }
.maplibregl-ctrl-group button { filter: invert(.85); }
#tip { position: absolute; pointer-events: none; z-index: 5; background: rgba(255,255,255,.98); border: 1px solid var(--line2); box-shadow: 0 6px 18px rgba(34,41,54,.14); border-radius: 6px; padding: 8px 10px; font-size: 12px; max-width: 260px; display: none; box-shadow: 0 6px 24px rgba(0,0,0,.4); }
#tip b { display: block; font-size: 13px; margin-bottom: 2px; }
#tip .m { color: var(--gold2); font-family: var(--mono); }
#tip .s { color: var(--fg3); font-size: 11px; }
#mapnote { position: absolute; left: 12px; bottom: 26px; z-index: 4; font: 10px var(--mono); color: var(--fg2); background: rgba(255,255,255,.85); padding: 4px 8px; border: 1px solid var(--line); border-radius: 4px; max-width: 60%; }
#loading { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(254,252,247,.92); z-index: 10; font: 12px var(--mono); color: var(--fg2); letter-spacing: .1em; }
#loading.hide { display: none; }

#panel { border-left: 1px solid var(--line); background: var(--bg2); overflow-y: auto; display: flex; flex-direction: column; }
#panel .head { padding: 14px 16px 10px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--bg2); z-index: 2; }
#panel .head .k { font: 600 10px/1 var(--mono); letter-spacing: .16em; color: var(--gold); text-transform: uppercase; }
#panel .head h2 { margin: 4px 0 2px; font-size: 18px; font-weight: 600; }
#panel .head .sub { color: var(--fg2); font-size: 12px; }
#panel .head .sub a { color: var(--fg2); border-bottom: 1px dotted var(--fg3); }
#panel .head .sub a:hover { color: var(--gold2); }
.tabs { display: flex; gap: 2px; margin-top: 10px; }
.tabs button { flex: 1; padding: 6px 4px; background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--fg3); cursor: pointer; font-size: 12px; }
.tabs button.active { color: var(--gold2); border-bottom-color: var(--gold); }
#panel .body { padding: 8px 16px 40px; }
.empty { color: var(--fg3); font-size: 12px; padding: 30px 8px; text-align: center; line-height: 1.6; }
.kv { display: grid; grid-template-columns: 1fr auto auto; gap: 2px 10px; font-size: 12px; align-items: center; }
.kv .l { color: var(--fg2); }
.kv .v { font: 500 12px var(--mono); text-align: right; }
.kv .c { font: 10px var(--mono); color: var(--fg3); text-align: right; min-width: 64px; }
.kv .c.up { color: var(--green); } .kv .c.dn { color: var(--red); }
.cmp { height: 3px; background: var(--line); border-radius: 2px; grid-column: 1 / -1; position: relative; margin-bottom: 4px; }
.cmp i { position: absolute; top: 0; bottom: 0; background: var(--gold); border-radius: 2px; }
.cmp b { position: absolute; top: -3px; width: 2px; height: 9px; background: var(--fg2); }
.chart { position: relative; height: 150px; margin: 4px 0 6px; }
.chart.tall { height: 190px; }
.pills { display: flex; flex-wrap: wrap; gap: 4px; }
.pill { font: 11px var(--mono); padding: 2px 7px; border-radius: 10px; border: 1px solid var(--line2); color: var(--fg2); }
.pill.gold { border-color: var(--gold); color: var(--gold2); }
.note { font-size: 11px; color: var(--fg3); line-height: 1.5; margin: 6px 0; }
table.res { width: 100%; border-collapse: collapse; font-size: 12px; margin: 4px 0 8px; }
table.res td, table.res th { padding: 3px 4px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
table.res th { font: 600 10px var(--mono); color: var(--fg3); letter-spacing: .1em; text-transform: uppercase; }
table.res td.n { font-family: var(--mono); text-align: right; white-space: nowrap; }
table.res tr.win td { color: var(--gold2); }
table.res .bar { height: 4px; border-radius: 2px; background: var(--gold); opacity: .8; margin-top: 3px; }
.party { font: 600 9px var(--mono); padding: 1px 4px; border-radius: 3px; margin-right: 4px; vertical-align: middle; }
.party.D { background: #E3EFFB; color: #00538F; } .party.R { background: #FDE3E8; color: #B10F35; } .party.I { background: #EFEBE1; color: var(--fg2); }
.elist details { border-bottom: 1px solid var(--line); }
.elist summary { cursor: pointer; padding: 7px 0; display: flex; gap: 8px; align-items: baseline; list-style: none; }
.elist summary::-webkit-details-marker { display: none; }
.elist summary .d { font: 11px var(--mono); color: var(--fg3); width: 78px; flex-shrink: 0; }
.elist summary .t { flex: 1; }
.elist summary .c { font: 10px var(--mono); color: var(--fg3); }
.elist .race { padding: 4px 0 8px 8px; border-left: 2px solid var(--line); margin: 4px 0 8px; }
.elist .race .rt { display: flex; align-items: center; gap: 6px; font-weight: 600; margin-bottom: 2px; }
.elist .race .rt .btn { margin-left: auto; }
.sim h4 { margin: 14px 0 6px; font-size: 12px; color: var(--fg); }
.sim .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; }
.slider { display: grid; grid-template-columns: 90px 1fr 52px; gap: 8px; align-items: center; font-size: 12px; padding: 2px 0; }
.slider input[type=range] { width: 100%; accent-color: var(--gold); }
.slider .val { font: 11px var(--mono); text-align: right; color: var(--gold2); }
.slider .lab { color: var(--fg2); }
.matrix { width: 100%; border-collapse: collapse; font-size: 11px; }
.matrix th, .matrix td { padding: 2px 3px; text-align: right; border-bottom: 1px solid var(--line); }
.matrix th:first-child, .matrix td:first-child { text-align: left; color: var(--fg2); }
.matrix input { width: 48px; padding: 2px 4px; background: var(--bg3); border: 1px solid var(--line2); border-radius: 4px; text-align: right; font: 11px var(--mono); }
.outcome { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0; }
.outcome div { background: var(--bg3); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; }
.outcome b { display: block; font: 500 17px var(--mono); }
.outcome span { font-size: 10px; color: var(--fg3); text-transform: uppercase; letter-spacing: .08em; }
.outcome .delta { font: 11px var(--mono); color: var(--fg2); }
.warn { background: var(--neec-cream); border: 1px solid #E8D5A6; color: #7A5410; border-radius: 6px; padding: 6px 8px; font-size: 11px; margin: 6px 0; }
.src { margin-top: 20px; font-size: 10px; color: var(--fg3); line-height: 1.5; border-top: 1px solid var(--line); padding-top: 8px; }
.src b { color: var(--fg2); font-weight: 500; }
@media (max-width: 1100px) { :root { --rail: 250px; --panel: 380px; } }
@media (max-width: 860px) {
  :root { --rail: 0px; --panel: 0px; }
  #app { grid-template-columns: 1fr; grid-template-rows: 48px 1fr; height: 100dvh; }
  #top { gap: 8px; padding: 0 10px; }
  #top .brand span, #top .brand .owner, #top .county, #aboutBtn, .mobile-only { display: none !important; }
  #top .brand b { font-size: 13px; }
  #search { flex: 1; width: auto; min-width: 0; font-size: 16px; padding: 6px 8px; }
  #map { grid-row: 2; min-height: 0; padding-bottom: 56px; }
  #rail { position: fixed; top: 48px; bottom: 56px; left: 0; width: min(88vw, 400px); z-index: 20; transform: translateX(-102%); transition: transform .22s ease; box-shadow: 8px 0 30px rgba(0,0,0,.5); padding-bottom: 24px; }
  #rail.open { transform: none; }
  #panel { position: fixed; left: 0; right: 0; bottom: 56px; top: auto; width: auto; height: 60dvh; max-height: calc(100dvh - 104px); border-left: 0; border-top: 1px solid var(--line2); border-radius: 14px 14px 0 0; transform: translateY(104%); transition: transform .25s ease, height .2s; z-index: 21; box-shadow: 0 -10px 40px rgba(0,0,0,.55); overflow-y: auto; -webkit-overflow-scrolling: touch; display: block; }
  #panel.open { transform: none; } #panel.tall { height: calc(100dvh - 104px); }
  #panel::before { content: ''; display: block; position: sticky; top: 0; z-index: 3; width: 38px; height: 4px; margin: 8px auto 4px; border-radius: 2px; background: var(--line2); }
  #panel .head { position: static; }
  #mbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; height: 56px; z-index: 30; background: var(--bg2); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
  #mbar button { flex: 1; background: transparent; border: 0; color: var(--fg2); font: 500 11px var(--sans); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
  #mbar button b { font-size: 16px; line-height: 1; } #mbar button.active { color: var(--gold2); }
  table.res { display: block; overflow-x: auto; max-width: 100%; }
  .slider { grid-template-columns: 80px 1fr 48px; }
  #tip { display: none !important; }
  .chart { height: 170px; }
  #about .card { padding: 18px 16px; }
}
.mobile-only { display: none; }
/* childcare map specifics */
#top .brand .owner::before { content: 'by '; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; border: 1px solid rgba(34,41,54,.25); }
.c-center { background: #e2bf76; } .c-home { background: #4fbf8a; } .c-exempt { background: #9b7cf0; } .c-headstart { background: #4f8ef7; } .c-prek { background: #e0565b; }
#tip .pv { font: 11px var(--mono); color: var(--fg2); }
.prov { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin: 6px 0; background: var(--bg3); cursor: pointer; }
.prov:hover { border-color: var(--gold); }
.prov.gone { cursor: default; opacity: .72; border-style: dashed; }
.prov.gone:hover { border-color: var(--line); }
.prov .nm { font-weight: 600; display: flex; gap: 6px; align-items: center; }
.prov .meta { font: 11px var(--mono); color: var(--fg3); margin-top: 2px; }
.stars { color: var(--gold2); letter-spacing: 1px; }
.flag { display: inline-block; font: 600 9px var(--mono); padding: 1px 5px; border-radius: 3px; margin-left: 4px; vertical-align: middle; letter-spacing: .05em; }
.flag.desert { background: #FDE3E8; color: #B10F35; } .flag.ok { background: #DFF3E7; color: #0A6B45; } .flag.sub { background: #E3EFFB; color: #00538F; } .flag.ex { background: #EDE7FA; color: #4C3786; }
.proj { background: var(--bg3); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin: 8px 0; }
.proj .big { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.proj .big b { font: 500 22px var(--mono); }
.proj .big span { font-size: 11px; color: var(--fg3); }
.drop { background: #E8F5EE; border: 1px solid #A9D9C1; color: #0A5B3C; border-radius: 6px; padding: 8px 10px; font-size: 12px; line-height: 1.5; margin: 6px 0; }
.drop b { color: var(--green); }
#about { position: fixed; inset: 0; background: rgba(34,41,54,.55); z-index: 50; overflow-y: auto; padding: 40px 16px; display: none; }
#about.open { display: block; }
#about .card { max-width: 760px; margin: 0 auto; background: var(--bg2); border: 1px solid var(--line2); border-radius: 10px; padding: 24px 28px; font-size: 13px; line-height: 1.6; }
#about h2 { margin-top: 0; }
#about h4 { margin: 16px 0 4px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.body h3 { margin: 16px 0 6px; font: 600 10px/1 var(--mono); letter-spacing: .16em; color: var(--fg3); text-transform: uppercase; }

/* ─── district dashboard ─── */
.dhead { background: var(--bg3); border: 1px solid var(--line); border-left: 4px solid var(--chamber); border-radius: 0 8px 8px 0; padding: 10px 12px; margin: 2px 0 10px; }
.dhead .who { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.dhead .who b { font-size: 15px; color: var(--fg); }
.dhead .where { font: 11px var(--mono); color: var(--fg3); margin-top: 4px; }
.dhead .where b { color: var(--fg2); font-weight: 500; }
.ranks { display: grid; gap: 7px; margin: 8px 0 2px; }
.rank1 { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: baseline; }
.rank1 .l { font-size: 11px; color: var(--fg2); }
.rank1 .v { font: 500 11px var(--mono); color: var(--fg); }
.rank1 .track { grid-column: 1 / -1; height: 7px; border-radius: 4px; background: linear-gradient(90deg, #F6C9D3 0%, #FBE6C8 38%, #DCEEF0 70%, #BFE0CD 100%); position: relative; }
.rank1 .track i { position: absolute; top: -2px; width: 3px; height: 11px; border-radius: 2px; background: var(--fg); }
.rank1 .track b { position: absolute; top: -2px; width: 2px; height: 11px; background: var(--fg3); opacity: .6; }
.dgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; margin: 8px 0; }
.dcard { background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.dcard b { display: block; font: 500 20px/1.15 var(--mono); color: var(--fg); }
.dcard span { font-size: 10px; color: var(--fg3); }
.dcard.bad b { color: var(--red); } .dcard.good b { color: var(--green); }
.cmix { display: flex; height: 10px; border-radius: 3px; overflow: hidden; margin: 6px 0 4px; border: 1px solid var(--line); }
.cmix i { display: block; }
.partners { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 11px; color: var(--fg2); border-top: 1px solid var(--line); margin-top: 14px; padding-top: 10px; }
.partners img { height: 40px; width: auto; }
.partners img[src$=".svg"] { height: 30px; }
.partners b { color: var(--fg); }
.partners .sep { color: var(--line2); }