/* 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:400px}
.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}
  .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}
}