:root{--bg:#f3f5f2;--panel:#fff;--line:#d6ddd7;--text:#172019;--muted:#667269;--green:#23613c;--green2:#e8f3eb;--amber:#9a6818;--amber2:#fff5df;--red:#a64038;--blue:#285f82;--shadow:0 7px 22px rgba(28,46,34,.09)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.topbar{height:62px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 24px;position:sticky;top:0;z-index:1200}
.logo{font-size:21px;font-weight:900;letter-spacing:.04em;color:#173a26}
.logo span{color:#31754b}
.sub,.eyebrow{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:#6b776e;font-weight:800}
.toplinks{display:flex;gap:7px}
.toplinks a{color:#34493b;border:1px solid #cbd4cd;text-decoration:none;font-size:11px;font-weight:750;padding:8px 11px;background:#fff}
main{max-width:1500px;margin:auto}
.hero{background:#fff;padding:28px;border-bottom:1px solid var(--line)}
.heroGrid{display:grid;grid-template-columns:1fr 310px;gap:30px;align-items:start}
.hero h1{font-size:35px;line-height:1.06;letter-spacing:-.03em;max-width:920px;margin:7px 0 10px}
.hero p{font-size:14px;line-height:1.55;color:#526159;max-width:950px}
.yieldBox{border:1px solid #aebdb2;border-top:5px solid var(--green);padding:17px;background:#f9fcf9}
.yieldBox span,.answerStrip span,.detailGrid span{font-size:9px;letter-spacing:.1em;font-weight:850;color:#6c796f;display:block}
.yieldBox strong{display:block;font-size:26px;line-height:1.1;margin:7px 0 4px;letter-spacing:-.01em}
.yieldBox small{font-size:10px;color:#657169}
.delta{margin-top:10px;font-size:12px;font-weight:800}
.answerStrip{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid var(--line);margin-top:22px}
.answerStrip>div{padding:13px;border-right:1px solid var(--line);min-height:92px;background:#fafcf9}
.answerStrip>div:last-child{border:0}
.answerStrip strong{display:block;font-size:15px;margin:7px 0 4px}
.answerStrip small{font-size:9px;line-height:1.35;color:#6b766f}
.plain{margin-top:12px;background:#edf5ef;border-left:4px solid #4d8a62;padding:11px 13px;font-size:12px;line-height:1.5}
.season,.mapsection,.detail,.method{margin:18px 20px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);padding:20px}
.sectionhead{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}
.sectionhead h2{font-size:21px;margin:4px 0}
.sectionhead p{font-size:11px;color:var(--muted);margin:0}
.asof,.tag{font-size:9px;border:1px solid #c7d1c9;background:#fafcf9;padding:7px 9px;color:#647067}
.calendar{display:grid;grid-template-columns:repeat(8,1fr);margin-top:17px;border:1px solid var(--line)}
.phase{padding:10px 8px;min-height:92px;border-right:1px solid var(--line);position:relative}
.phase:last-child{border:0}
.phase.past{background:#edf4ef}
.phase.current{background:#fff3d9;box-shadow:inset 0 4px #c08a29}
.phase.future{background:#fafafa;color:#747b76}
.phase b{display:block;font-size:10px;line-height:1.2}
.phase span{display:block;font-size:9px;color:#758078;margin-top:5px}
.phase em{display:block;font-style:normal;font-size:9px;font-weight:800;margin-top:9px}
.story{border-top:1px solid var(--line);margin-top:14px;padding-top:12px}
.story h3,.drivers h3{font-size:12px;margin:0 0 5px}
.story p{font-size:12px;line-height:1.55;color:#4e5d54;margin:0}
.mapactions{display:flex;gap:6px}
.mapactions button,.timebar button{border:1px solid #bac7bd;background:#fff;padding:7px 10px;font-size:10px;font-weight:800;cursor:pointer}
.mapactions button.on{background:#e5f1e8;border-color:#88ac94;color:#245f3b}
.timebar{display:grid;grid-template-columns:70px 1fr 85px 160px;gap:10px;align-items:center;margin-top:15px;background:#f5f7f4;border:1px solid var(--line);padding:9px}
.timebar input{width:100%}
.timebar strong{font-size:11px}
.timebar span{font-size:10px;color:#5d6b62}
.mapwrap{height:580px;position:relative;margin-top:9px;border:1px solid var(--line);overflow:hidden}
.mapwrap #map{height:100%;width:100%;background:#e8ede8}
.layerbadge{position:absolute;z-index:600;top:12px;right:12px;background:rgba(23,32,25,.88);color:#fff;border:1px solid rgba(255,255,255,.55);padding:7px 10px;font-size:9px;font-weight:900;letter-spacing:.08em;box-shadow:var(--shadow)}
.legend{position:absolute;z-index:600;left:12px;bottom:12px;background:rgba(255,255,255,.97);border:1px solid #cbd4cd;padding:10px 12px;box-shadow:var(--shadow);font-size:10px;line-height:1.45;width:250px;max-height:360px;overflow:auto}
.legend b{display:block;margin-bottom:3px}
.legend small{display:block;margin-top:6px;color:#4e5e54;line-height:1.35}
.legendDate{font-size:8px;font-weight:850;letter-spacing:.07em;color:#647168;margin:2px 0 5px}
.legendScale{display:block;max-height:205px;max-width:118px;margin:4px 0 5px;background:#fff}
.yieldRamp{height:24px;margin:8px 0 6px;background:linear-gradient(90deg,#cd6c46 0%,#f1cf63 50%,#317451 100%);display:flex;justify-content:space-between;align-items:flex-end;padding:2px 4px;color:#172019;font-size:8px;font-weight:850;text-shadow:0 1px 1px rgba(255,255,255,.75)}
.sw{display:inline-block;width:13px;height:9px;margin-right:5px}
.sw.neutral{background:#526d7b}
.sw.outline{background:#fff;border:1px solid #7c8982}
.sw.unknown{background:#d9ddd9;border:1px solid #9ba59e}
.temporal-raster{image-rendering:auto;filter:saturate(1.08) contrast(1.03)}
.maptools{display:grid;grid-template-columns:280px 1fr;gap:9px;margin-top:9px;align-items:center}
.maptools select{height:34px;border:1px solid #cbd4cd;background:#fff;padding:5px 8px;font-size:11px}
.maptools span{font-size:10px;color:#637169}
.runtime{display:flex;gap:16px;flex-wrap:wrap;margin-top:8px;font-size:9px;color:#748078}
.detailGrid{display:grid;grid-template-columns:repeat(6,1fr);gap:9px;margin-top:15px}
.detailGrid article{border:1px solid var(--line);padding:12px;background:#fafbf9;min-height:112px}
.detailGrid strong{display:block;font-size:16px;margin:7px 0 5px}
.detailGrid p{font-size:9px;line-height:1.4;color:#69756d;margin:0}
.drivers{margin-top:12px;background:#f7f9f6;border:1px solid var(--line);padding:12px}
.drivers #drivers{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.driver{font-size:10px;line-height:1.4;border-left:3px solid #a9b5ac;padding:8px;background:#fff}
.driver.neg{border-color:#bb6a61}
.driver.pos{border-color:#5f9b70}
.methodGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:15px}
.methodGrid>div{border:1px solid var(--line);padding:12px}
.methodGrid b{font-size:10px;color:#285f3d}
.methodGrid p{font-size:10px;line-height:1.45;color:#5f6c64;margin:6px 0 0}
.warning{margin-top:12px;background:#fff7e6;border:1px solid #e5cf9d;padding:10px 12px;font-size:10px;line-height:1.5}
.sourceList{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:14px}
.sourceRow{display:flex;justify-content:space-between;gap:20px;border:1px solid var(--line);background:#fbfcfb;padding:10px 12px}
.sourceRow b{display:block;font-size:10px}
.sourceRow small{display:block;font-size:9px;line-height:1.35;color:#6b766f;margin-top:3px}
.sourceRow>span{font-size:9px;font-weight:850;color:#44564a;white-space:nowrap}
.evidence{display:inline-block;padding:1px 5px;margin-right:5px;border:1px solid #cbd4cd;font-size:8px;font-weight:850;letter-spacing:.04em;background:#f8faf8}
.evidence.observed{border-color:#8db29a;background:#edf7f0;color:#23583a}
.evidence.derived{border-color:#8fa9b4;background:#eef5f6;color:#315b68}
.evidence.modeled{border-color:#9eafc0;background:#f0f5f9;color:#355871}
.evidence.estimated{border-color:#d3b170;background:#fff7e6;color:#76551b}
.evidence.assumed,.evidence.unknown{border-color:#d3c7ad;background:#faf7f0;color:#705f3c}
.workstatus{display:inline-block;padding:1px 5px;margin-right:5px;border:1px solid #d3c7ad;background:#faf7f0;color:#705f3c;font-size:8px;font-weight:850;letter-spacing:.04em}
footer{text-align:center;padding:11px;font-size:9px;color:#718078;border-top:1px solid var(--line)}
footer a{color:#4b6a57;text-decoration:none;font-weight:700}
footer a:hover{text-decoration:underline}
.leaflet-popup-content{font-size:11px}

/* Shared secondary-page shell; intentionally separate from the crop model runtime. */
.top{min-height:66px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:24px;padding:10px 24px;position:sticky;top:0;z-index:1000}
.brand a{color:#173a26;text-decoration:none;font-size:20px;font-weight:900;letter-spacing:.04em}
.brand a span{color:#31754b}
.brand small{display:block;margin-top:2px;font-size:10px;letter-spacing:.12em;color:#6b776e}
.top nav{display:flex;align-items:center;gap:8px}
.top nav a{color:#34493b;text-decoration:none;font-size:13px;font-weight:700;padding:9px 11px}
.top nav a:hover,.top nav a:focus-visible{background:#edf5ef;outline:2px solid transparent}
.menu{display:none;border:1px solid #bac7bd;background:#fff;padding:9px 12px;font-weight:800}
.pagehero{background:#fff;border-bottom:1px solid var(--line);padding:38px max(24px,calc((100% - 920px)/2)) 28px}
.pagehero h1{font-size:38px;line-height:1.08;margin:7px 0 8px}
.lead{font-size:17px;line-height:1.55;color:#526159}
.content{max-width:920px;margin:20px auto;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);padding:28px}
.content h2{margin:30px 0 10px;font-size:22px}
.content h2:first-child{margin-top:0}
.content p,.content li{font-size:15px;line-height:1.65}
.content a{color:#23613c}
.source-list{display:grid;gap:8px}
.source-list a{display:block;border:1px solid var(--line);padding:12px;background:#fafcf9}
.inactive{border:1px solid #e5cf9d;background:#fff7e6;padding:13px;margin:12px 0;font-size:14px;line-height:1.5}
.formgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.formgrid label{display:grid;gap:6px;font-size:13px;font-weight:700}
.formgrid input,.formgrid select,.formgrid textarea,.converter input,.converter select{width:100%;border:1px solid #aebbb1;background:#fff;padding:10px;font:inherit}
.wide{grid-column:1/-1}
.primary,.secondary{display:inline-block;border:1px solid #23613c;padding:10px 14px;text-decoration:none;font-weight:800}
.primary{background:#23613c;color:#fff}
.secondary{background:#fff;color:#23613c}
.actions{display:flex;gap:9px;flex-wrap:wrap}
.converter{display:grid;grid-template-columns:1fr 1.5fr 1fr;gap:12px;align-items:end}
.result{min-height:42px;background:#edf5ef;border:1px solid #b8cbbd;padding:10px;font-weight:800}
.report{display:grid;grid-template-columns:110px 1fr auto;gap:20px;align-items:start;border-bottom:1px solid var(--line);padding:18px 0}
.report h3{margin:0 0 5px}
.report p{margin:0}
.footnote{font-size:13px!important;color:#667269}
@media(max-width:1100px){.answerStrip{grid-template-columns:repeat(3,1fr)}
.calendar{grid-template-columns:repeat(4,1fr)}
.detailGrid{grid-template-columns:repeat(3,1fr)}
.methodGrid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:700px){.toplinks{display:none}
.hero{padding:20px 14px}
.heroGrid{grid-template-columns:1fr}
.hero h1{font-size:27px}
.answerStrip,.detailGrid,.methodGrid,.sourceList{grid-template-columns:1fr}
.calendar{grid-template-columns:repeat(2,1fr)}
.season,.mapsection,.detail,.method{margin:10px;padding:14px}
.mapwrap{height:500px}
.timebar{grid-template-columns:65px 1fr}
.timebar strong,.timebar span{grid-row:2}
.mapactions{flex-wrap:wrap}
.sectionhead{display:block}
.asof,.tag{display:inline-block;margin-top:8px}
.drivers #drivers{grid-template-columns:1fr}
.maptools{grid-template-columns:1fr}
.top{align-items:flex-start}
.menu{display:block}
.top nav{display:none;position:absolute;left:0;right:0;top:65px;background:#fff;border-bottom:1px solid var(--line);padding:12px 18px;flex-direction:column;align-items:stretch}
.top nav.open{display:flex}
.content{margin:10px;padding:20px}
.pagehero{padding:28px 18px 22px}
.pagehero h1{font-size:31px}
.formgrid,.converter{grid-template-columns:1fr}
.report{grid-template-columns:1fr;gap:8px}
}
.spatialControls{display:flex;flex-wrap:wrap;gap:12px 24px;padding:14px 0;font-size:14px}
.spatialControls label{display:flex;align-items:center;gap:8px;font-weight:600}
.spatialControls input{width:18px;height:18px}
.spatialControls [role=status]{flex-basis:100%;color:#46534e}
.cropKey{color:#793fa0}.stationKey{color:#175a8b}

.playbackControls{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;padding:12px;background:#f3f6f3;border:1px solid #d8e0da}
.playbackControls label{display:flex;align-items:center;gap:8px;font-size:13px}
.playbackControls select,.playbackControls button{padding:8px;border:1px solid #becdc1;background:white;color:#193724}
.playbackControls input{width:110px}.playbackControls [role=status]{flex-basis:100%;font-size:12px;color:#4b5c50}
.temporal-raster{transition:none}
@media(prefers-reduced-motion:reduce){.temporal-raster{transition:none}}

/* Answer-first opening block. Conclusion before evidence. */
#nbAnswer{max-width:1180px;margin:0 auto;padding:22px 24px 26px}
.nbA-pick{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.nbA-pick label{font-size:9px;letter-spacing:.1em;font-weight:850;color:#6c796f;text-transform:uppercase}
.nbA-pick select{font:inherit;font-weight:700;padding:7px 10px;border:1px solid #aebdb2;background:#fff;border-radius:3px}
.nbA-head{font-size:31px;line-height:1.12;margin:0 0 8px;letter-spacing:-.02em}
.nbA-head.nbA-ok{color:#1d6b3a}.nbA-head.nbA-warn{color:#8a5a12}.nbA-head.nbA-risk{color:#9c2b20}
.nbA-line{font-size:17px;line-height:1.45;margin:0 0 10px;max-width:70ch}
.nbA-watch{font-size:15px;font-weight:700;color:#9c2b20;margin:0 0 10px;padding-left:12px;border-left:4px solid #9c2b20}
.nbA-q{font-size:13px;color:#4a564d;margin:0 0 12px;max-width:74ch}
.nbA-more summary{font-size:12px;font-weight:800;letter-spacing:.04em;cursor:pointer;color:#35543f}
.nbA-table{border-collapse:collapse;margin-top:10px;font-size:13px;width:100%;max-width:760px}
.nbA-table td{border-bottom:1px solid #e3e9e4;padding:6px 10px 6px 0}
.nbA-table tr.nbA-ok td:nth-child(2){color:#1d6b3a}
.nbA-table tr.nbA-warn td:nth-child(2){color:#8a5a12}
.nbA-table tr.nbA-risk td:nth-child(2){color:#9c2b20}
.nbA-note{font-size:11px;color:#77837a;margin-top:8px;max-width:74ch}
@media(max-width:640px){.nbA-head{font-size:24px}.nbA-line{font-size:15px}}

/* Everything past the answer and the map is opt-in. */
.nbDeeper{max-width:1180px;margin:0 auto;padding:10px 24px 40px}
.nbDeeperSum{font-size:12px;font-weight:850;letter-spacing:.06em;text-transform:uppercase;
  cursor:pointer;color:#35543f;padding:14px 0;border-top:1px solid #d9e2db}
.nbDeeperBody{padding-top:8px}
.nbPanelMore{font-size:11px;font-weight:800;letter-spacing:.05em;cursor:pointer;
  color:#cfe0d3;padding:8px 0 4px;text-transform:uppercase}

/* Sidebar moved to "Dig deeper" — the map takes the whole workspace. */
.nbMapWorkspace{display:block !important}
.nbMapMain{width:100% !important;flex:1 1 100% !important;max-width:none !important}
.mapwrap{width:100% !important}
#map{width:100% !important;min-height:560px}
#mapLegend{max-width:270px}
.nbKey{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;font-size:11px;margin-top:6px}
.nbKey span{width:11px;height:11px;border-radius:50%;display:inline-block;margin-right:3px}
.nbRegionTag{white-space:nowrap;pointer-events:none}
.nbRegionTag b{display:block;font-size:11px;font-weight:850;color:#12251a;
  text-shadow:0 0 3px #fff,0 0 6px #fff,0 0 9px #fff;letter-spacing:-.01em}
.nbRegionTag i{display:block;font-style:normal;font-size:10px;font-weight:800;color:#5a3216;
  text-shadow:0 0 3px #fff,0 0 6px #fff}

/* Legend: a compact key, not a white panel covering the map. */
#mapLegend{max-width:210px !important;padding:8px 10px !important;font-size:11px;
  background:rgba(255,255,255,.93);border:1px solid #cfd8d1;border-radius:4px;line-height:1.3}
#mapLegend b{font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:#4a564d}
#mapLegend small{display:none}
.nbKey{gap:2px 8px;margin-top:5px}
.nbKey span{width:9px;height:9px}
/* Region tags: readable over any basemap, never wider than they need to be. */
.nbRegionTag b{font-size:11.5px;line-height:1.15}
.nbRegionTag i{font-size:9.5px;letter-spacing:.03em}

/* Legend: a caption under the map, not a panel covering three states. */
#mapLegend{position:static !important;max-width:none !important;width:auto !important;
  margin:8px 0 0 !important;padding:0 !important;background:none !important;border:0 !important;
  box-shadow:none !important;font-size:11px;color:#4a564d}
#mapLegend b{font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:#6c796f;margin-right:10px}
#mapLegend .nbKey{display:inline-flex;margin:0;gap:3px 12px}
/* A frame that suits the geography instead of a letterbox. */
#map{min-height:620px !important;height:62vh !important}
/* Labels sit tight to their anchor and stay legible on any basemap. */
.nbRegionTag b{font-size:11px}
.nbRegionTag i{font-size:9px;opacity:.95}

/* The map was 620px tall inside a 580px container and was being clipped.
   The container follows the map, not the other way round. */
.nbMapWorkspace,.nbMapMain,.mapwrap{height:auto !important;min-height:0 !important}
.mapwrap{position:relative;display:block}
#map{height:66vh !important;min-height:600px !important;width:100% !important}
.nbA-moist{font-size:14px;color:#33463a;margin:0 0 10px;max-width:72ch}

/* Legend: readable, not 11px. It is the key to the whole map. */
#mapLegend{font-size:13px !important;line-height:1.5}
#mapLegend b{font-size:12px !important;letter-spacing:.06em;color:#33463a;display:block;margin-bottom:6px}
#mapLegend .nbKey{gap:6px 18px;font-size:13px}
#mapLegend .nbKey span{width:13px;height:13px;margin-right:6px}
/* Map controls belong above the map, always visible — not floating over it. */
.nbDecisionMapPanel{position:static !important;width:100% !important;max-width:none !important;
  margin:0 0 10px !important;border-radius:6px}
.nbPanelMore{color:#cfe0d3;font-size:12px}
/* Playback speed sits with the play button it controls. */
.timebar{display:flex;flex-wrap:wrap;align-items:center;gap:10px}

/* Playback: directly under the map, one control, obvious. */
#nbPlayback{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:10px 12px;margin-top:8px;background:#f3f6f3;border:1px solid #d9e2db;border-radius:6px}
#nbPlayBtn{font:inherit;font-weight:800;padding:7px 16px;border:1px solid #2f5d43;
  background:#2f5d43;color:#fff;border-radius:4px;cursor:pointer;min-width:104px}
#nbPlayBtn:hover{background:#26492f}
#nbSlider{flex:1 1 260px;min-width:200px;accent-color:#2f5d43;cursor:pointer}
#nbDateLabel{font-weight:800;font-variant-numeric:tabular-nums;min-width:96px}
#nbPlayback label{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#6c796f;font-weight:850}
#nbSpeedSel{font:inherit;padding:5px 8px;border:1px solid #aebdb2;border-radius:4px;background:#fff}
@media(max-width:640px){#nbPlayBtn{min-width:88px}#nbDateLabel{min-width:0}}

/* ---------------------------------------------------------- decision map ---
   One map, one question, playback directly under it. */

#nbDecisionMap {
  max-width: 1180px;
  margin: 0 auto 34px;
  padding: 0 18px;
}

.nbMapHead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

.nbMapHead .nbEyebrow {
  font-size: 11px;
  letter-spacing: .14em;
  font-weight: 700;
  color: #6c7d70;
}

.nbMapHead h2 {
  margin: 4px 0 0;
  font-size: 27px;
  line-height: 1.2;
  color: #14212b;
}

.nbMapPickers {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.nbMapPickers label,
.nbPlayback .nbSel {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 700;
  color: #6c7d70;
  text-transform: uppercase;
}

.nbMapPickers select,
.nbPlayback select {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: #14212b;
  padding: 7px 10px;
  border: 1px solid #c8d2c9;
  border-radius: 7px;
  background: #fff;
  min-width: 132px;
}

.nbPlayback select { min-width: 92px; }

.nbReadout {
  margin: 0 0 12px;
  font-size: 17px;
  line-height: 1.5;
  color: #22303a;
  max-width: 82ch;
}

.nbReadout b { color: #14212b; }

.nbStationCount {
  display: inline-block;
  margin-left: 6px;
  font-size: 12px;
  letter-spacing: .06em;
  color: #6c7d70;
  text-transform: uppercase;
}

.nbMapFrame {
  position: relative;
  border: 1px solid #c8d2c9;
  border-radius: 12px 12px 0 0;
  overflow: hidden;
  background: #eef2ec;
}

#nbMap {
  height: 760px;
  width: 100%;
  background: #eef2ec;
}

/* The interpolated surface sits above the tiles and below the outlines and station dots,
   and never intercepts a click. */
canvas.nbSurface {
  position: absolute;
  inset: 0;
  z-index: 350;
  pointer-events: none;
}

.nbLegendCard {
  position: absolute;
  right: 14px;
  top: 14px;
  z-index: 500;
  width: 268px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(17, 30, 38, .93);
  color: #eef3ef;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .28);
}

.nbLegendBar {
  height: 12px;
  border-radius: 6px;
  margin-bottom: 7px;
}

.nbLegendEnds {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12.5px;
  font-weight: 600;
}

.nbLegendUnit {
  margin-top: 7px;
  font-size: 11.5px;
  line-height: 1.45;
  color: #a9bdb2;
}

.nbGeoNote {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 500;
  max-width: 320px;
  padding: 7px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .88);
  font-size: 11.5px;
  line-height: 1.4;
  color: #4d5c53;
}

/* ---- playback, directly under the map ---- */

.nbPlayback {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 14px 16px 30px;
  border: 1px solid #c8d2c9;
  border-top: none;
  border-radius: 0 0 12px 12px;
  background: #f6f8f5;
}

#nbPlay {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 108px;
  padding: 10px 16px;
  border: none;
  border-radius: 999px;
  background: #17794a;
  color: #fff;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
}

#nbPlay:hover { background: #12603a; }
#nbPlay .nbIcon { font-size: 12px; }

.nbDateBlock { display: flex; flex-direction: column; min-width: 148px; }

.nbDateCap {
  font-size: 10.5px;
  letter-spacing: .14em;
  font-weight: 700;
  color: #6c7d70;
}

.nbDateBlock strong {
  font-size: 21px;
  color: #14212b;
  font-variant-numeric: tabular-nums;
}

.nbTrack { position: relative; flex: 1 1 340px; min-width: 260px; }

#nbSlider { width: 100%; accent-color: #17794a; margin: 0; }

/* Planting and harvest windows drawn on the timeline itself, so the date you are looking at
   is read against the two dates that decide the season. */
.nbPhases { position: relative; height: 34px; margin-top: 6px; }

.nbPhase {
  position: absolute;
  top: 0;
  height: 9px;
  border-radius: 5px;
}

.nbPhase span {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 11.5px;
  font-weight: 700;
  color: #4d5c53;
}

.nbPhasePlant { background: #4ea56b; }
.nbPhasePlant span { color: #2c6b45; }
.nbPhaseHarvest { background: #e08a2a; }
.nbPhaseHarvest span { color: #8a5416; }

@media (max-width: 820px) {
  #nbMap { height: 520px; }
  .nbMapHead h2 { font-size: 22px; }
  /* On a phone the legend goes under the map instead of covering a third of it. */
  .nbLegendCard {
    position: static;
    width: auto;
    border-radius: 0;
    box-shadow: none;
  }
  .nbGeoNote { display: none; }
  .nbPlayback { gap: 12px; }
}

.nbLegendEnds span { display: flex; flex-direction: column; gap: 1px; max-width: 46%; }
.nbLegendEnds span:last-child { text-align: right; }
.nbLegendEnds em {
  font-style: normal;
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.nbLegendEnds span > :not(em) { font-weight: 600; }

#nbFitAll {
  display: block;
  margin-top: 5px;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-weight: 700;
  color: #17794a;
  text-decoration: underline;
  cursor: pointer;
}

.nbPhase.nbPhaseEnd span { left: auto; right: 0; transform: none; }
.nbPhase.nbPhaseStart span { left: 0; transform: none; }

.nbFootprint {
  margin: -4px 0 12px;
  font-size: 13.5px;
  line-height: 1.5;
  color: #4d5c53;
  max-width: 82ch;
}

.nbFootprint b { color: #22303a; }

/* Yield and crop health are a current read, not a daily series — the time control says so by
   going quiet rather than by moving something that does not change. */
.nbPlayback.nbPlaybackOff { opacity: .45; }
.nbPlayback.nbPlaybackOff #nbPlay { background: #8a938c; cursor: not-allowed; }

.nbLegendSteps { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.nbLegendSteps span { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; }
.nbLegendSteps i { width: 14px; height: 14px; border-radius: 3px; flex: none; }

/* Where the headline number comes from, next to the headline number. */
.nbA-basis {
  margin: -2px 0 12px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #6c7d70;
  max-width: 78ch;
}

/* The estimate, shown as its evidence. The number is the last thing, not the first. */
.nbEstimate {
  max-width: 82ch;
  margin: 18px 0 0;
  padding: 16px 18px;
  border: 1px solid #c8d2c9;
  border-radius: 12px;
  background: #f6f8f5;
}

.nbEstimate h3 {
  margin: 0 0 10px;
  font-size: 17px;
  color: #14212b;
}

.nbEvidence { list-style: none; margin: 0 0 12px; padding: 0; }

.nbEvidence li {
  padding: 7px 0;
  border-top: 1px solid #dde4dd;
  font-size: 15px;
  line-height: 1.5;
  color: #22303a;
}

.nbEvidence li span {
  display: block;
  font-size: 12px;
  color: #6c7d70;
  margin-top: 2px;
}

.nbEstNum {
  margin: 0 0 10px;
  font-size: 17px;
  line-height: 1.5;
  color: #14212b;
}

.nbEstNum b { font-size: 21px; }

.nbEstLimit, .nbEstNext {
  margin: 0 0 8px;
  font-size: 12.5px;
  line-height: 1.6;
  color: #4d5c53;
}

.nbEstLimit b, .nbEstNext b { color: #22303a; }

.nbEstLead { margin: 0 0 12px; font-size: 13.5px; line-height: 1.55; color: #4d5c53; }

.nbYieldTable { width: 100%; border-collapse: collapse; margin: 0 0 12px; font-size: 14px; }
.nbYieldTable th {
  text-align: left;
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #6c7d70;
  padding: 0 8px 6px 0;
  border-bottom: 1px solid #c8d2c9;
}
.nbYieldTable th.nbNum, .nbYieldTable td.nbNum { text-align: right; }
.nbYieldTable td {
  padding: 6px 8px 6px 0;
  border-bottom: 1px solid #e4eae4;
  color: #22303a;
  font-variant-numeric: tabular-nums;
}
.nbYieldTable tr:first-child td { font-weight: 700; }

/* ---- controls sit on the map, and stay reachable while you read it ---- */

.nbMapControls {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
  padding: 10px 14px;
  border: 1px solid #c8d2c9;
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  background: #f6f8f5;
  /* Stick BELOW the site header, not underneath it. Two elements both pinned to top:0 means
     the lower one is invisible exactly when it is needed. */
  position: sticky;
  top: var(--nb-topbar, 62px);
  z-index: 600;
}

.nbNowShowing {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 15px;
  font-weight: 700;
  color: #14212b;
  letter-spacing: .01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nbMapControls label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 700;
  color: #6c7d70;
  text-transform: uppercase;
  flex: 0 0 auto;
}

.nbMapControls select {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: #14212b;
  padding: 7px 10px;
  border: 1px solid #c8d2c9;
  border-radius: 7px;
  background: #fff;
  min-width: 150px;
}

.nbMapFrame { border-radius: 0; border-top: none; }

/* the estimate now follows the map, so it needs its own breathing room */
.nbEstimate { margin-top: 22px; }

@media (max-width: 820px) {
  /* On a phone the controls must not eat the map. Two equal columns, sticky, compact. */
  .nbMapControls {
    gap: 8px;
    padding: 8px 10px;
    top: var(--nb-topbar, 56px);
  }
  .nbNowShowing {
    flex: 1 0 100%;
    font-size: 13.5px;
    margin-bottom: 2px;
  }
  .nbMapControls label { flex: 1 1 0; }
  .nbMapControls select { min-width: 0; width: 100%; font-size: 15px; padding: 9px 8px; }

  /* A table of seven regions and five columns cannot fit 390px. Let it scroll on its own
     rather than squeezing every column into illegibility or pushing the page sideways. */
  .nbYieldTable { display: block; overflow-x: auto; white-space: nowrap; }
  .nbEstimate { padding: 14px 12px; }
  .nbEstimate h3 { font-size: 15.5px; }
}

@media (max-width: 520px) {
  #nbMap { height: 420px; }
  .nbPlayback { gap: 10px; padding: 12px 10px 26px; }
  .nbDateBlock { min-width: 120px; }
  .nbDateBlock strong { font-size: 18px; }
  .nbPlayback .nbSel { flex: 1 1 40%; }
  .nbPlayback select { width: 100%; }
}

/* The answer reads first; its caveat opens on demand. */
.nbNote { display: inline; }

.nbNoteToggle {
  margin-left: 6px;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: #17794a;
  text-decoration: underline;
  cursor: pointer;
}

.nbNoteBody {
  display: none;
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.55;
  color: #4d5c53;
}

.nbNote.nbNoteOpen .nbNoteBody { display: block; }

/* ---------------------------------------------------- expandable sections ---
   Both of these were small grey text with a hairline triangle — they read as a caption
   rather than as something to press, so the detail behind them went unopened. They now
   look like what they are: a control, with a tap target a thumb can hit. */

.nbA-more > summary,
.nbDeeperSum {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  margin: 10px 0 0;
  padding: 12px 16px;
  border: 1px solid #bcc9bd;
  border-radius: 10px;
  background: #eef2ec;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: none;
  color: #1c3d2a;
  cursor: pointer;
  list-style: none;
  transition: background .12s ease, border-color .12s ease;
}

.nbDeeperSum {
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.nbA-more > summary:hover,
.nbDeeperSum:hover { background: #e2e9e0; border-color: #9fb3a2; }

.nbA-more > summary:focus-visible,
.nbDeeperSum:focus-visible { outline: 3px solid #17794a; outline-offset: 2px; }

/* the default disclosure marker is a hairline; replace it with one you can see */
.nbA-more > summary::-webkit-details-marker,
.nbDeeperSum::-webkit-details-marker { display: none; }
.nbA-more > summary::marker,
.nbDeeperSum::marker { content: ""; }

.nbA-more > summary::before,
.nbDeeperSum::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-right: 2.5px solid #17794a;
  border-bottom: 2.5px solid #17794a;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .15s ease;
}

.nbA-more[open] > summary::before,
.nbDeeper details[open] > .nbDeeperSum::before {
  transform: rotate(-135deg) translate(-3px, -3px);
}

/* a quiet hint that there is something behind it */
.nbA-more > summary::after,
.nbDeeperSum::after {
  content: "open";
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #6c7d70;
}

.nbA-more[open] > summary::after,
.nbDeeper details[open] > .nbDeeperSum::after { content: "close"; }

@media (max-width: 820px) {
  .nbA-more > summary,
  .nbDeeperSum { padding: 14px 14px; font-size: 14.5px; }
  .nbDeeperSum { font-size: 12.5px; }
}

/* On a phone the two season labels are centred under bars that are only a few dozen pixels
   apart, and they overprint each other — it reads "Planting May-Harvest August". Anchor each
   one to the outside edge of its own bar so they open away from one another, and let the
   results table scroll sideways rather than putting its last columns out of reach. */
@media (max-width: 560px) {
  .nbPhases { height: 52px; }
  .nbPhase span { font-size: 10.5px; }
  /* Anchoring alone is not enough — the two labels together are wider than a phone. Put
     them on their own lines so they cannot collide at any width. */
  .nbPhasePlant span { left: 0; right: auto; transform: none; top: 12px; }
  .nbPhaseHarvest span { left: auto; right: 0; transform: none; top: 26px; }
  .nbYieldTable { font-size: 12.5px; }
  .nbYieldTable th, .nbYieldTable td { padding-left: 6px; padding-right: 6px; }
}

.nbTableWrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 12px; }
.nbTableWrap .nbYieldTable { margin-bottom: 0; }

/* ---- harvest report form -------------------------------------------------------------
   The ground-truth intake. Every field here maps to a column in observations.json, so a
   report arrives ready to score against what was predicted before it. */
.nbForm { margin: 0; }
.nbFormGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px 18px; }
.nbForm label { display: block; font-size: 12.5px; font-weight: 700; color: #4d5c53;
  letter-spacing: .01em; }
.nbForm .nbOpt { font-weight: 500; color: #6c7d70; }
.nbForm input, .nbForm select, .nbForm textarea {
  display: block; width: 100%; margin-top: 5px; padding: 9px 10px; box-sizing: border-box;
  font: inherit; font-size: 14.5px; color: #14212b; background: #fff;
  border: 1px solid #c9d4c9; border-radius: 7px; }
.nbForm input:focus, .nbForm select:focus, .nbForm textarea:focus {
  outline: 2px solid #2c6b45; outline-offset: 1px; border-color: #2c6b45; }
.nbForm .nbFull { display: block; margin-top: 16px; }
.nbForm textarea { resize: vertical; }
.nbFormFoot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; }
.nbForm button { padding: 11px 22px; font: inherit; font-size: 15px; font-weight: 700;
  color: #fff; background: #2c6b45; border: 0; border-radius: 7px; cursor: pointer; }
.nbForm button:hover { background: #24583a; }
.nbFormSent { padding: 14px 16px; border-radius: 8px; background: #eef5ee;
  border: 1px solid #b9d3bd; color: #22303a; font-size: 15px; }
@media (max-width: 560px) { .nbFormGrid { grid-template-columns: 1fr; } }

/* The shared-map caveat. It sat at the end of a long readout and was invisible; a reader
   asked twice why four maps looked identical while the answer was already on the page. */
.nbShared { display: block; margin-bottom: 6px; color: #8a5416; font-size: 13.5px;
  line-height: 1.5; }

/* USDA planted acres for the selected class — the crop itself, not the mapped area. */
.nbUsdaAcres { display: block; margin-top: 6px; font-size: 13px; line-height: 1.5;
  color: #4d5c53; }