/* Street Economics Detection palette, as used by the existing Detection
   pages (NMB AsiaTown, South Dade). The variable names below kept their
   original meaning so the rest of this sheet did not have to be rewritten:
   --ink is the text colour, --wash the page behind it, --paper a card. */
:root{
  --ink:#ede7da;--ink2:#c7c1b6;--muted:#9aa0ae;--faint:#6b7080;
  --line:#2a2e3a;--line2:#3a3f4e;--paper:#14161d;--wash:#0b0c10;--wash2:#1b1e27;
  --red:#f2c14e;--pos:#6ee7a8;--neg:#ff8fa3;
  --accent:#4ec9b0;--deep:#0b0c10;
  --s1:#4ec9b0;--s2:#f2c14e;--s3:#8ab4ff;--s4:#ff8fa3;--s5:#c3a6ff;--s6:#6ee7a8;--s7:#9aa0ae;--s8:#ff9e64;
  --display:"Oswald","Arial Narrow",Impact,sans-serif;
  --body:"Public Sans","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono","SFMono-Regular",Consolas,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--wash);line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--red);text-decoration:none}a:hover{text-decoration:underline}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}
.top{background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:60px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;color:var(--ink)}
.brand:hover{text-decoration:none}
.brand img{height:36px;width:auto;display:block}
.bt{font-weight:800;letter-spacing:-.2px;font-size:16px;border-left:1px solid var(--line);padding-left:12px}
nav{display:flex;gap:16px;font-size:14px;font-weight:600}
nav a{color:var(--ink2)}
nav a.dl{color:var(--red)}
main{padding:20px 16px 40px}
.hero{padding:18px 0 8px}
.tag{display:inline-block;font-size:11.5px;letter-spacing:1.8px;text-transform:uppercase;color:var(--red);font-weight:700;margin:0 0 8px}
.reg{color:var(--red);font-size:.6em;vertical-align:super;font-weight:800}
h1{margin:0 0 8px;font-size:clamp(26px,4.4vw,40px);line-height:1.08;letter-spacing:-.8px}
h2{margin:0 0 6px;font-size:18px;letter-spacing:-.2px}
.lede{font-size:clamp(15.5px,2vw,18px);color:var(--ink2);max-width:780px;margin:0}
.card{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:18px;margin:16px 0}
.cardhead{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.note{color:var(--muted);font-size:13.5px;margin:4px 0 12px}
.muted{color:var(--muted)}
.seg{display:inline-flex;border:1px solid var(--line2);border-radius:8px;overflow:hidden}
.seg button{font:inherit;font-size:13px;font-weight:600;border:0;background:var(--paper);color:var(--ink2);padding:6px 12px;cursor:pointer}
.seg button.on{background:var(--ink);color:#fff}
.mapwrap{position:relative;max-width:640px;margin:0 auto}
.flmap{width:100%;height:auto;display:block}
.flmap path{fill:#e8ecef;stroke:#fff;stroke-width:.8;transition:fill .15s}
.flmap path[data-href]{cursor:pointer}
.flmap path:hover{stroke:var(--ink);stroke-width:1.4}
.flmap path[data-cityonly]{fill:url(#hatch)}
.maptip{position:absolute;pointer-events:none;background:var(--ink);color:#fff;font-size:12.5px;padding:7px 9px;border-radius:6px;line-height:1.35;white-space:nowrap;z-index:5}
.legend{display:flex;align-items:center;gap:8px;justify-content:center;font-size:12px;color:var(--muted);margin-top:8px;flex-wrap:wrap}
.legend .lg{display:inline-block;width:160px;height:10px;border-radius:3px;background:linear-gradient(90deg,#bc111d,#e7a4a8,#f2f2f2,#9cc3d2,#1f6f8b)}
.legend .nd::before{content:"";display:inline-block;width:12px;height:10px;background:#e8ecef;border-radius:2px;margin:0 4px -1px 10px}
/* Wide tables: a table wider than the viewport scrolls sideways inside its own container,
   with the first column pinned so a row keeps its name; headers wrap to two lines instead of
   forcing the column wide; the page body itself never scrolls sideways. One rule for every
   section's tables, since each is a table.data inside a .tscroll. */
body{overflow-x:hidden}
.card,main{min-width:0}
.tscroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin:0 -4px;max-width:calc(100% + 8px);scrollbar-width:thin}
table.data{width:100%;border-collapse:separate;border-spacing:0;font-size:14px}
table.data th{font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);text-align:left;font-weight:700;border-bottom:2px solid var(--ink);padding:8px 8px;white-space:normal;line-height:1.25;vertical-align:bottom}
table.data td{border-bottom:1px solid var(--line);padding:8px;vertical-align:top}
table.data th:first-child,table.data td:first-child{position:sticky;left:0;z-index:1;background:var(--paper)}
table.data th:first-child{z-index:2}
table.data tbody tr:hover td:first-child{background:var(--wash2)}
table.data .r{text-align:right;white-space:nowrap}
table.data th.r{white-space:normal}
/* a header never sets a column's width; grouped columns hide until their toggle, compact when shown;
   a single line name with an ellipsis; the filter box; the sticky scrollbar for a table that still scrolls */
table.data [data-group]{display:none}
table.data.groups-on [data-group]{display:table-cell}
table.data.groups-on.compact{font-size:12px}
table.data.groups-on.compact th{font-size:11px;letter-spacing:.3px;padding:6px 5px}
table.data.groups-on.compact td{padding:5px 5px}
table.data td.name{max-width:22em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tcontrols{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:6px 0 8px}
.tcontrols .tfilter{flex:1 1 220px;max-width:420px;font:inherit;font-size:14px;padding:7px 10px;border:1px solid var(--line2);border-radius:8px;background:var(--paper);color:var(--ink)}
.tcontrols .tcount{color:var(--muted);font-size:12.5px}
.tcontrols .tgroups{font:inherit;font-size:12.5px;font-weight:600;background:var(--wash2);color:var(--ink2);border:1px solid var(--line2);border-radius:8px;padding:6px 10px;cursor:pointer}
.tcontrols .tgroups.on{background:var(--red);color:var(--deep);border-color:var(--red)}
.hbar{position:sticky;bottom:0;overflow-x:auto;overflow-y:hidden;height:14px;margin:0 -4px;background:var(--paper);border-top:1px solid var(--line);z-index:3;scrollbar-width:thin}
.hbar>div{height:1px}
p.note.legend{font-size:12.5px;margin-top:0}
table.data td.src{font-size:12.5px;color:var(--muted);min-width:160px}
table.data tr.sub td{font-size:12.5px;color:var(--muted);border-bottom:2px solid var(--line2);padding-top:0}
table.sortable th{cursor:pointer;user-select:none}
table.sortable th.asc::after{content:" \25B2";font-size:9px}
table.sortable th.desc::after{content:" \25BC";font-size:9px}
.num{font-variant-numeric:tabular-nums}
.pos{color:var(--pos);font-weight:600}.neg{color:var(--neg);font-weight:600}
.crumb{font-size:13px;color:var(--muted);margin:0 0 6px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:14px 0}
.stats>div{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:12px 14px;min-width:0;overflow-wrap:anywhere}
.stats .lbl{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);font-weight:700}
.stats b{font-size:20px;letter-spacing:-.3px}
details.series>summary{list-style:none;cursor:pointer;display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline}
details.series>summary::-webkit-details-marker{display:none}
details.series>summary::before{content:"+";font-weight:800;color:var(--red);width:12px}
details.series[open]>summary::before{content:"\2212"}
.sname{font-weight:800;font-size:16.5px}
.stype{font-size:11.5px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);font-weight:700}
.slast{margin-left:auto;font-size:14px;color:var(--ink2)}
.chart{position:relative;margin-top:14px;min-height:240px}
.chart.small{min-height:170px}
.chart svg{width:100%;height:auto;display:block;overflow:visible}
.chart .ttl{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;margin:0 0 4px}
.chart .ax text{font-size:11px;fill:var(--muted)}
.chart .ax line{stroke:var(--line)}
.chart .zero{stroke:var(--faint)}
.chart .mk line{stroke:var(--ink2);stroke-dasharray:4 3}
.chart .mk text{font-size:10.5px;fill:var(--ink2);font-weight:700}
.chart .hl{stroke:var(--faint)}
.chart .lgd{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--ink2);margin-top:4px}
.chart .lgd i{display:inline-block;width:14px;height:3px;border-radius:2px;margin:0 5px 3px 0;vertical-align:middle}
.ctip{position:absolute;pointer-events:none;background:var(--ink);color:#fff;font-size:12px;padding:6px 8px;border-radius:6px;line-height:1.4;white-space:nowrap;z-index:5}
.srcline{font-size:12.5px;color:var(--muted);margin:10px 0 0;border-top:1px solid var(--line);padding-top:8px}
ul.gaps{font-size:12.5px;color:var(--muted);margin:6px 0 0;padding-left:18px}
/* the BusinessFlare estimate on a place page: the free card's flags and the gated loader */
section.estimate-free{border-left:4px solid var(--accent)}
.est-flags li.flag-wide{color:var(--neg)}
section.estimate .seg{margin:10px 8px 4px 0;flex-wrap:wrap}
section.estimate .est-body .chart{margin-top:8px}
/* the city finder on the Economic data index: a search box over the list of every city page */
.cityfind{width:100%;max-width:520px;font:inherit;font-size:15px;padding:9px 12px;border:1px solid var(--line2);border-radius:8px;background:var(--paper);color:var(--ink);margin:6px 0 10px}
ul.citylist{columns:3;column-gap:24px;margin:0;padding-left:18px;font-size:14px}
ul.citylist li{break-inside:avoid;margin:2px 0}
ul.citylist li[hidden]{display:none}
@media (max-width:640px){ul.citylist{columns:2}}
.btn{display:inline-block;background:var(--red);color:#fff;font-weight:700;padding:8px 14px;border-radius:8px;margin:4px 6px 4px 0}
.btn:hover{text-decoration:none;opacity:.9}
.btn.ghost{background:var(--paper);color:var(--ink);border:1px solid var(--line2)}
.prose p{max-width:820px;color:var(--ink2)}
.foot{background:var(--ink);color:#c9d1d8;font-size:13px;padding:20px 0}
.foot a{color:#fff}
.foot .reg{color:#ff5a64}
.foot .sep{color:#5b6b7a}
@media (max-width:640px){
  .bt{font-size:14px;padding-left:10px}
  .brand img{height:30px}
  nav{gap:8px;font-size:13px;width:100%;padding-bottom:8px;flex-wrap:wrap}
  .card{padding:14px}
  .top{position:static}
  .slast{margin-left:16px}
  table.data{font-size:13px}
  table.data .src{display:none}
  .mapwrap{max-width:100%}
}
@media (min-width:900px){.mapwrap{max-width:560px}}


/* ---- Detection chrome, dark ---------------------------------------- */
body{font-family:var(--body)}
h1,h2,.sname,.stats b,.bt{font-family:var(--display);font-weight:600;letter-spacing:.1px}
h1{font-weight:700;letter-spacing:-.3px}
.num,.chart .ax text,.srcline,.stype,.stats .lbl{font-family:var(--mono)}

.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:var(--red);color:var(--deep);padding:8px 12px;z-index:50}

header.top{background:var(--paper);border-bottom:1px solid var(--line)}
.brand{color:var(--ink)}
.bt{border-left:1px solid var(--line2)}
.brandsub{display:block;color:var(--muted);font-size:12px;font-family:var(--body);font-weight:400;letter-spacing:0;margin-top:2px}
nav a{color:var(--muted);font-family:var(--mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.8px;font-weight:400;border:1px solid var(--line);border-radius:3px;padding:5px 10px}
nav a:hover{color:var(--ink);border-color:var(--line2);text-decoration:none}
nav a.dl{color:var(--deep);background:var(--red);border-color:var(--red);font-weight:500}

.hero{border-left:6px solid var(--accent);padding-left:18px}
.tag{color:var(--accent)}
.reg{color:var(--red)}

.seg button{background:var(--wash2);color:var(--ink2)}
.seg button.on{background:var(--red);color:var(--deep)}
.btn{background:var(--red);color:var(--deep)}
.btn.ghost{background:var(--paper);color:var(--ink);border:1px solid var(--line2)}

.maptip,.ctip{background:var(--wash2);color:var(--ink);border:1px solid var(--line2)}
.flmap path{fill:#232733;stroke:#0b0c10;stroke-width:.8}
.flmap path:hover{stroke:var(--red);stroke-width:1.4}
.legend .nd::before{background:#232733}
.legend .lg{background:linear-gradient(90deg,#ff8fa3,#8a5560,#3a3f4e,#3d7d72,#4ec9b0)}

table.data th{border-bottom:2px solid var(--line2);color:var(--muted)}
table.data tbody tr:hover{background:var(--wash2)}
details.series>summary::before{color:var(--accent)}

.foot{background:var(--paper);color:var(--muted);border-top:1px solid var(--line)}
.foot a{color:var(--red)}
.foot .reg{color:var(--red)}
.foot .sep{color:var(--faint)}

/* ---- consumer spending cards ---------------------------------------- */
.group>h2{margin:26px 0 8px;font-size:20px}
.viewbar{margin:12px 0 4px;flex-wrap:wrap}
.viewbar button{font-size:12px;padding:5px 10px}
details.more{margin:10px 0 0;border-top:1px solid var(--line);padding-top:8px}
details.more>summary{cursor:pointer;font-size:13px;color:var(--ink2);font-family:var(--mono)}
details.more>summary:hover{color:var(--ink)}
.muted{color:var(--muted);font-size:12px;font-weight:400}
.partial-note:empty{display:none}
section.tt{margin-top:34px;padding-top:6px;border-top:2px solid var(--line2)}

/* sales first: collections columns and stats appear when the section's toggle says so */
.mroot .coll { display: none; }
.mroot.show-coll .coll { display: revert; }
.mroot.show-coll .sales { display: none; }
.seg.measure { margin-left: .5rem; }
details.tt-series .seg.measure { display: inline-flex; margin: 0 0 .5rem .5rem; }

/* insights panel (site/assets/insights.js) */
.chart .badge{font-size:11px;font-weight:700;fill:var(--ink);font-family:var(--mono)}
.legend .sb::before{content:"";display:inline-block;width:14px;height:10px;margin-right:5px;vertical-align:middle;background:repeating-linear-gradient(45deg,#232733 0 3px,#6b7080 3px 4px)}
.legend .sb{margin-left:10px}
section.historical details.histbox>summary{cursor:pointer;list-style:none;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
section.historical details.histbox>summary h2{margin:0}
section.historical details.histbox>summary::before{content:"+ ";color:var(--accent);font-weight:700}
section.historical details.histbox[open]>summary::before{content:"- "}
section.sources ul{margin:0;padding-left:18px}
section.sources li{margin:6px 0;color:var(--ink2)}

/* Economic data: the labor map's sequential legend, and the measure bar beside the view bar */
.legend .lg.seq{background:linear-gradient(90deg,#2d313d,#8a5560,#ff8fa3)}
.seg.lmeasure{margin-left:8px}
.lmapmode button{white-space:nowrap}

/* Economic data: bank deposits (FDIC Summary of Deposits) */
.coords{font-family:var(--mono);font-size:12px;white-space:nowrap}
.dep-charts{margin-top:4px}
.dep .stats b,.econ .stats b{font-size:17px;overflow-wrap:anywhere}
/* Economic data: BEBR population map modes */
.pmapmode button{white-space:nowrap}

/* Fiscal data: the account table's year selector, category and total rows */
.ftable .yearsel select{font:inherit;font-size:13px;background:var(--paper);color:var(--ink);border:1px solid var(--line2);border-radius:6px;padding:4px 8px;margin-left:6px}
table.lines tr.cat td{background:var(--wash2)}
table.lines tr.tot td{border-top:2px solid var(--ink)}
table.lines td.code{font-family:var(--mono);white-space:nowrap;color:var(--muted)}
ul.cols{columns:3;column-gap:24px;margin:0;padding-left:18px}
@media (max-width:640px){ul.cols{columns:1}}

/* ---- fiscal data: distributions from the state ----------------------- */
.st-match,.st-match_variant{color:var(--pos)}
.st-mismatch{color:var(--neg)}
.st-dor_partial,.st-dor_blank,.st-rco_partial,.st-no_match{color:var(--muted)}
section.fiscal-section{border-left:4px solid var(--s5)}
/* LocalFlare: the place pages. Header, map frame, cards with a headline, a sparkline and a
   More toggle, sticky table headers, the county map with its cities, the state search box. */
.lfhead{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;padding:12px 0 4px}
.lfhead .hbtns{margin:6px 0 0;white-space:nowrap}
.lfhead .hpop{display:block;margin-top:6px}
.lfhead .hupd{display:block;font-size:13px;color:var(--muted);margin-top:4px}
.lfmapcard .gismap{width:100%;height:520px;border:1px solid var(--line2);border-radius:8px;background:var(--wash2)}
@media (max-width:640px){.lfmapcard .gismap{height:360px}}
/* LocalFlare maps are svg.lfsvg, not .flmap: app.js paints every .flmap path for its section maps */
svg.lfsvg{width:100%;height:auto;display:block}
svg.lfsvg path{transition:fill .15s}
svg.lfsvg path.place{fill:var(--s1);fill-opacity:.55;stroke:var(--wash);stroke-width:.8;cursor:pointer}
svg.lfsvg path.place:hover,svg.lfsvg path.place:focus{fill-opacity:.95;stroke:var(--ink);outline:none}
svg.lfsvg path.place.cdp{fill:url(#lfhatch);fill-opacity:.7}
svg.lfsvg path.county{fill:var(--wash2);stroke:var(--line2);stroke-width:1}
svg.lfsvg.outline path.place{fill:var(--s1);fill-opacity:.35;stroke:var(--s1);stroke-width:1.5;cursor:default}
svg.lfsvg.lfstate path{fill:var(--wash2);stroke:var(--line2);stroke-width:.8;cursor:pointer}
svg.lfsvg.lfstate path:hover,svg.lfsvg.lfstate path:focus{fill:var(--s1);outline:none}
.lfcard .headline{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;margin:6px 0 4px}
.lfcard .headline .lbl{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);font-weight:700}
.lfcard .headline>b{font-size:30px;letter-spacing:-.5px;line-height:1.1}
.lfcard .headline .lbl+b{display:block}
.lfcard .sparkbox{display:inline-flex;flex-direction:column;color:var(--accent);margin-left:auto}
.lfcard .spark{display:block;width:160px;height:36px}
.lfcard .sparkcap{display:flex;justify-content:space-between;gap:8px;font-size:10.5px;color:var(--muted)}
.lfcard .cardhead .per,.lfcard .stats .per{font-size:12px;color:var(--muted);display:block}
.lfcard .stats{margin:10px 0 6px}
.lfcard .stats.small b{font-size:16px}
.lfcard .stats .why{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.lfcard .basis{font-size:13px;color:var(--red);font-weight:600;margin:0 0 6px}
.lfcard details.more>summary{cursor:pointer;font-weight:700;color:var(--red);margin-top:10px;list-style:none}
.lfcard details.more>summary::-webkit-details-marker{display:none}
.lfcard details.more>summary::before{content:"+ ";font-weight:800}
.lfcard details.more[open]>summary::before{content:"\2212 "}
.lfcard details.more>summary::after{content:": full tables";font-weight:400;color:var(--muted)}
.lfcard .morebody h4{margin:14px 0 4px;font-size:14px}
.lfcard section.card{margin:12px 0 0}
table.data.lf thead th{position:sticky;top:60px;background:var(--paper);z-index:2}
table.data.lf thead th:first-child{z-index:3}
ul.citylist.lf li{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
ul.citylist.lf .lpop{margin-left:auto;font-variant-numeric:tabular-nums;font-size:13px;color:var(--ink2)}
ul.countylist{columns:4;column-gap:24px;margin:12px 0 0;padding-left:18px;font-size:14px}
@media (max-width:640px){ul.countylist{columns:2}}
.lffind{position:relative;max-width:560px}
.lfsearch{width:100%;font:inherit;font-size:16px;padding:10px 12px;border:1px solid var(--line2);border-radius:8px;background:var(--paper);color:var(--ink)}
.lfresults{position:absolute;left:0;right:0;top:100%;margin:4px 0 0;padding:4px 0;list-style:none;background:var(--paper);border:1px solid var(--line2);border-radius:8px;z-index:30;max-height:320px;overflow-y:auto;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.lfresults li a{display:flex;justify-content:space-between;gap:10px;padding:7px 12px;color:var(--ink)}
.lfresults li a:hover,.lfresults li.on a{background:var(--wash2);text-decoration:none}
.lfresults .where{color:var(--muted);font-size:12.5px}
.landing .sections{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.landing .sections a.sec{display:block;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:16px;color:var(--ink)}
.landing .sections a.sec:hover{border-color:var(--accent);text-decoration:none}
.landing .sections a.sec b{display:block;font-size:17px;margin-bottom:4px}
.landing .sections a.sec span{color:var(--muted);font-size:13.5px}
