/* Save Our Family Farms — impact map (tile-grid cartogram) styles */

.mapsec{background:var(--color-surface-raised);padding:84px 0;border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border);}
.mapsec .head{max-width:64ch;margin-bottom:36px;}
.mapsec .head .lead{margin:18px 0 0;}

.map-layout{display:grid;grid-template-columns:auto 360px;gap:40px;align-items:start;}

/* board */
.board-wrap{overflow-x:auto;padding-bottom:6px;}
.board{display:grid;grid-template-columns:repeat(11,52px);grid-auto-rows:52px;gap:7px;}
.tile{border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--font-display);line-height:1;user-select:none;border:1.5px solid transparent;}
.tile.other{background:var(--sand-200);color:var(--sand-600);font-weight:700;font-size:.72rem;}
.tile.target{background:var(--color-brand);color:var(--color-text-on-inverse);cursor:pointer;transition:transform var(--duration-base) var(--easing-standard),box-shadow var(--duration-base) var(--easing-standard),background var(--duration-base);}
.tile.target .ab{font-weight:800;font-size:.74rem;letter-spacing:.02em;}
.tile.target .pct{font-weight:700;font-size:.58rem;margin-top:3px;color:#cdd8e2;}
.tile.target:hover{transform:translateY(-3px);box-shadow:0 8px 18px rgba(10,33,56,.28);}
.tile.target:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px;}
.tile.target.sel{background:var(--color-accent);}
.tile.target.sel .pct{color:#f3d3cb;}

.legend{display:flex;gap:22px;flex-wrap:wrap;margin-top:24px;align-items:center;}
.legend .item{display:flex;align-items:center;gap:9px;font-family:var(--font-display);font-weight:600;font-size:.7rem;letter-spacing:.07em;text-transform:uppercase;color:var(--color-text-muted);}
.legend .sw{width:16px;height:16px;border-radius:4px;}
.legend .ph{font-style:normal;color:var(--color-text-muted);font-family:var(--font-body);font-weight:400;font-size:.78rem;letter-spacing:0;text-transform:none;margin-left:auto;}

/* panel */
.panel{background:none;border:0;border-radius:0;padding:0;overflow:visible;position:sticky;top:96px;min-height:430px;display:flex;flex-direction:column;}
.panel .roof-top{line-height:0;overflow:hidden;}
.panel .pad{background:var(--color-surface);border:1px solid var(--color-border);border-top:0;border-radius:0 0 var(--card-radius) var(--card-radius);padding:26px 26px 28px;display:flex;flex-direction:column;flex:1;}
.panel.empty .pad{align-items:flex-start;justify-content:center;}
.panel .prompt-ico{color:var(--sand-400);margin-bottom:8px;}
.panel .prompt{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:1.1rem;color:var(--color-brand);margin:0 0 10px;line-height:1.18;}
.panel .prompt-sub{font-size:.95rem;line-height:1.55;color:var(--color-text-muted);margin:0;}

.panel .st-name{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:1.45rem;color:var(--color-brand);margin:0;letter-spacing:.02em;line-height:1.05;}
.panel .bk{display:flex;align-items:baseline;gap:10px;margin:18px 0 4px;}
.panel .bk b{font-family:var(--font-display);font-weight:800;font-size:3rem;line-height:.9;color:var(--color-accent);}
.panel .bk .arrow{color:var(--color-accent);font-size:1.4rem;font-weight:800;}
.panel .bk-badge{align-self:center;font-family:var(--font-display);font-weight:700;font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sand-600);background:var(--sand-200);border-radius:4px;padding:3px 7px;}
.panel .bk-badge.ok{color:#fff;background:var(--green-600);}
.panel .bk.down b,.panel .bk.down .arrow{color:var(--color-text-muted);}
.panel .bk-cap{font-family:var(--font-display);font-weight:600;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-muted);margin:0;}
.panel .hook{font-size:.98rem;line-height:1.55;color:#3c372f;margin:18px 0 0;padding-top:18px;border-top:1px solid var(--color-border);}

.sen-list{margin-top:18px;display:flex;flex-direction:column;gap:12px;}
.sen{display:flex;gap:12px;align-items:flex-start;}
.sen .av{width:38px;height:38px;border-radius:8px;background:var(--color-brand);color:var(--color-text-on-inverse);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800;font-size:.8rem;flex-shrink:0;}
.sen .nm{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:.86rem;color:var(--color-brand);letter-spacing:.02em;margin:0;}
.sen .nt{font-size:.84rem;line-height:1.45;color:var(--color-text-muted);margin:3px 0 0;}
.panel .pbtn{margin-top:22px;}
.panel .pbtn .btn{width:100%;justify-content:center;}

@media (max-width:980px){
  .map-layout{grid-template-columns:1fr;}
  .panel{position:static;}
}
@media (max-width:620px){
  .board{grid-template-columns:repeat(11,42px);grid-auto-rows:42px;gap:5px;}
  .tile.other{font-size:.6rem;}
  .tile.target .ab{font-size:.62rem;}
  .tile.target .pct{font-size:.5rem;}
}
@media (max-width:480px){
  .board{grid-template-columns:repeat(11,1fr);grid-auto-rows:auto;gap:3px;}
  .board-wrap{overflow-x:visible;padding-bottom:0;}
  .tile{aspect-ratio:1;min-width:0;}
  .tile.other{font-size:.5rem;}
  .tile.target .ab{font-size:.54rem;}
  .tile.target .pct{display:none;}
  .panel .pad{padding:20px 18px 22px;}
}