/* Map tools under Best Places to Grow a Black Business. Loaded after ../black-business-places/styles.css, which
   carries the fonts, colors and layout; this file only adds what the tools need (2026-11-07). */

/* Controls: level, picker, then the Industry and Color buttons */
.dd2{display:flex;gap:16px;align-items:center;min-width:0;flex:1}
.tool .colorby{position:relative;flex:0 1 auto;min-width:0;max-width:none}
.tool .colorbtn{max-width:100%}
.tool .colorbtn strong{min-width:0}
.tool .picker{width:300px}
.industryDrop{width:460px}
/* Count switch: All businesses / Solo only (2026-11-07) */
.countby{display:flex;align-items:center;gap:7px;flex:none;position:relative}
.countlbl{font-size:13px;color:var(--slate)}
.countseg button{padding:8px 11px;font-size:13px}
.countseg .sw2{display:none}
.countby.locked .countseg{opacity:.55}
.countby.locked .countseg button{cursor:not-allowed}
.countcap{position:absolute;left:0;top:calc(100% + 4px);font-size:11.5px;color:var(--slate);white-space:nowrap;background:#fff;padding:1px 4px;border-radius:3px}
.infobar{position:absolute;left:28px;right:28px;max-width:calc(100% - 56px);z-index:5;background:#eef4ff;border:1px solid #c9dafc;border-radius:6px;padding:7px 12px;font-size:12.5px;line-height:1.4;color:var(--ink)}
.linkbtn{color:var(--action);font-weight:700;font-size:inherit;padding:0;white-space:nowrap}
.linkbtn:hover{text-decoration:underline}
.tool-industry .picker{width:240px}
@media (max-width:1500px) and (min-width:768px){
  /* five controls in one row: the Industry and Count labels give way so the button values aren't cut off */
  .tool-industry .seg button{padding:9px 14px}
  .tool-industry #industryBtn .lbl,.tool-industry .countlbl{display:none}
}
.tool-industry .tbl th,.tool-industry .tbl td{padding:6px 6px}
.sw.hollow{width:11px;height:11px;border-radius:50%;background:#fff;border:1.5px solid #b4c0d0}
.tblouter{position:relative}
.tblouter.overflow::after{content:'';position:absolute;top:1px;right:1px;bottom:1px;width:34px;border-radius:0 6px 6px 0;
  background:linear-gradient(to right,rgba(255,255,255,0),#fff 85%);box-shadow:inset -6px 0 6px -6px rgba(13,36,61,.25);pointer-events:none}
.tblouter.overflow.atend::after{display:none}
.tblhint{font-size:11.5px;color:var(--slate);text-align:right;margin:-2px 0 4px}
.tool-industry .tbl td:first-child{min-width:118px}
.dropitem .dd{display:block;font-weight:400;color:var(--slate);font-size:11.5px;line-height:1.35;margin-top:2px}
.dropitem[aria-selected="true"] .dd,.dropitem.active .dd{font-weight:400}
.inddesc{font-size:12.5px;color:var(--slate);line-height:1.45;margin:2px 0 6px}
.inddesc b{color:var(--ink);font-weight:600}
.note.solonote{margin-top:10px}
.readGrid .indlist li{font-size:13px}
.industryDrop ul{max-height:min(430px,62vh);overflow:auto}
.dropitem .ix{color:var(--slate);font-weight:500;font-size:11.5px;flex:none}

/* Map: a taller legend (title row plus five swatches and hatch) */
.tool #map{bottom:132px;height:calc(100% - 202px)}
@media (min-width:768px){
  .tool-owners .legend{bottom:66px}
  .tool-owners #map{bottom:144px;height:calc(100% - 214px)}
}
.tool .legend .note2{flex-basis:100%;font-size:12px;color:var(--slate);margin-top:-2px}
.sw.b0{background:var(--b0)}.sw.b1{background:var(--b1)}.sw.b2{background:var(--b2)}.sw.b3{background:var(--b3)}.sw.b4{background:var(--b4)}
.tip .t3{font-size:12.5px;color:var(--ink)}
.tip .t2{font-size:12.5px;color:var(--slate)}

/* Panel */
.help{font-size:12px;color:var(--slate);line-height:1.45;margin-top:6px}
.yard>div>span{min-width:0}
.yard b small{font-family:var(--body);font-weight:500;font-size:12px;color:var(--slate)}
.yard b.np,.yard .np{font-family:var(--body);font-weight:500;font-size:13px;color:var(--slate)}
.vrow{display:flex;align-items:center;gap:10px;padding:8px 2px;border-bottom:1px solid var(--mist);font-size:13.5px;width:100%;text-align:left}
.vrow .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;color:var(--ink)}
.vrow .vv{flex:none;font-family:var(--display);font-weight:700;color:var(--navy);font-size:14px;white-space:nowrap}
.vrow .vv.np{font-family:var(--body);font-weight:500;color:var(--slate);font-size:12.5px}
.vrow .sw{width:14px;height:14px}
button.vrow:hover{background:var(--cloud)}
button.vrow:hover .nm{text-decoration:underline}
button.vrow:focus-visible{outline-offset:-2px}
.vlist.small .vrow{padding:6px 2px;font-size:13px}
.vlist.small .vrow .nm{font-weight:500;color:var(--action)}
.boxed{border:1px solid var(--mist);border-radius:6px;padding:0 10px}
.boxed .vrow:last-child{border-bottom:0}
.tblwrap{overflow-x:auto;border:1px solid var(--mist);border-radius:6px;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.tbl{border-collapse:collapse;width:100%;font-size:12.5px;min-width:420px}
.tbl th{font-weight:700;color:var(--slate);text-align:right;padding:7px 8px;border-bottom:1px solid var(--mist);font-size:11.5px;line-height:1.25;vertical-align:bottom;background:var(--cloud)}
.tbl th:first-child,.tbl td:first-child{text-align:left}
.tbl td{padding:6px 8px;border-bottom:1px solid var(--mist);text-align:right;white-space:nowrap;color:var(--navy);font-weight:600}
.tbl td:first-child{white-space:normal;color:var(--ink);font-weight:500;min-width:150px}
.tbl tr:last-child td{border-bottom:0}
.tbl td.np{color:var(--slate);font-weight:500;font-size:11.5px}
.tbl tr.on td{background:#eef4ff}
.tbl tr[data-industry]{cursor:pointer}
.tbl tr[data-industry]:hover td{background:var(--cloud)}
.tbl tr[data-industry]:hover td:first-child{color:var(--action);text-decoration:underline}
.links{display:flex;flex-direction:column;gap:6px}
.links a{font-size:13.5px;font-weight:600;color:var(--action);text-decoration:none}
.links a:hover{text-decoration:underline}
.bdline{border-left:4px solid var(--gold);background:#fff8e7;padding:9px 12px;border-radius:3px;font-size:13px;line-height:1.45;margin:0 0 8px;color:var(--ink)}
.emptyCard.slim{margin-top:0;padding:12px 14px}
.emptyCard.slim p{color:var(--ink)}
.togglebtn{margin-top:8px;font-size:13px;font-weight:600;color:var(--action)}
.togglebtn:hover{text-decoration:underline}
details.natsec{margin-top:18px;border:1px solid var(--mist);border-radius:6px;background:#fff}
details.natsec>summary{list-style:none;cursor:pointer;padding:10px 12px;display:flex;flex-direction:column;gap:2px}
details.natsec>summary::-webkit-details-marker{display:none}
details.natsec>summary .st1{font-family:var(--display);font-weight:700;font-size:15px;color:var(--navy);display:flex;justify-content:space-between;gap:10px}
details.natsec>summary .st1::after{content:'\25BC';font-size:10px;color:var(--slate);flex:none;align-self:center}
details.natsec[open]>summary .st1::after{content:'\25B2'}
details.natsec>summary .tag{font-size:11.5px;color:var(--slate);font-weight:600}
details.natsec .inner{padding:0 12px 12px}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ocard{border:1px solid var(--mist);border-radius:6px;padding:12px;display:flex;flex-direction:column;gap:6px;background:#fff}
.ocard h4{font-family:var(--display);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--slate);font-weight:700}
.ocard .bigl{font-family:var(--display);font-weight:800;font-size:20px;color:var(--navy);line-height:1.1}
.ocard .kv{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;border-top:1px solid var(--mist);padding-top:5px;line-height:1.3}
.ocard .kv span{color:var(--slate)}
.ocard .kv b{color:var(--navy);text-align:right;font-weight:700}
.ocard .kv b small{display:block;font-weight:500;color:var(--slate);font-size:11px}
.ocard .cmp{font-size:12.5px;color:var(--ink);line-height:1.4;border-top:1px solid var(--mist);padding-top:6px}
.ocard .msg{font-size:12.5px;color:var(--slate);line-height:1.45}
.cardfoot{font-size:11.5px;color:var(--slate);line-height:1.45;margin-top:8px}

/* How we read this */
.readPage{max-width:1180px}
.readPage h1{font-family:var(--display);font-weight:800;font-size:30px;color:var(--navy);margin:4px 0 16px}
.readGrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.readGrid .card h3{font-size:17px}
.readGrid .card ul{padding-left:18px}
.readGrid .card li+li{margin-top:4px}
.readGrid .card.wide{grid-column:1/-1}
.panel-foot .sep{color:var(--silver);margin:0 4px}

/* Tablet */
@media (max-width:1100px) and (min-width:768px){
  .tool .picker{width:220px}
  .tool .colorby{max-width:none}
  .tool .seg button{padding:9px 11px}
}
@media (max-width:1280px) and (min-width:768px){
  .tool-industry .colorbtn .lbl{display:none}
}

/* Phone */
@media (max-width:767.98px){
  .tool{--ctl-h:142px}
  .tool .controls{grid-template-columns:1fr}
  .tool .picker{width:100%}
  .dd2{display:grid;grid-template-columns:1fr 1fr;gap:7px;position:relative}
  .tool-owners .dd2{grid-template-columns:1fr}
  .tool .colorby{display:block;position:static}
  .tool .colorbtn{width:100%;height:37px;padding:3px 10px;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;column-gap:6px;row-gap:0;text-align:left;align-content:center}
  .tool .colorbtn .lbl{display:block;font-size:10px;line-height:1.1;grid-column:1;grid-row:1}
  .tool .colorbtn strong{font-size:12.5px;line-height:1.25;grid-column:1;grid-row:2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tool .colorbtn .caret{grid-column:2;grid-row:1/3;align-self:center}
  .tool .colorDrop{left:0;right:0;width:auto;top:calc(100% + 4px)}
  .tool #map{top:24px;height:calc(44% - 64px);bottom:auto}
  .tool .legend{grid-template-columns:repeat(6,auto)}
  .tool .legend .note2{display:none}
  .dropitem .dd{display:none}
  .legend .sw.hollow{width:8px;height:8px;border-width:1.2px}
  .tblhint{font-size:10.5px}
  .tool-industry{--ctl-h:180px}
  .tool-industry .countby{grid-column:1/-1;width:100%;gap:8px;order:3}
  .tool-industry .countlbl{display:inline;font-size:12px}
  .tool-industry .countseg{flex:1}
  .tool-industry .countseg button{flex:1;padding:6px 5px;font-size:12px}
  .countseg .lw{display:none}
  .countseg .sw2{display:inline}
  .countcap{position:static;white-space:normal;font-size:10.5px;padding:0;flex:none;max-width:45%}
  .infobar{left:8px;right:8px;max-width:none;font-size:11px;padding:5px 8px}
  .inddesc{font-size:11px}
  .help{font-size:11px}
  .vrow{font-size:12.5px;padding:7px 2px}
  .vrow .vv{font-size:12.5px}
  .tbl{font-size:11.5px}
  .cards{grid-template-columns:1fr}
  .ocard .bigl{font-size:17px}
  .links a{font-size:12.5px}
  .bdline{font-size:11.5px;padding:7px 10px}
  .readPage h1{font-size:23px}
  .readGrid{grid-template-columns:1fr}
  details.natsec>summary .st1{font-size:13px}
}