:root {
  --ink: #1b1f1a;
  --muted: #5d655c;
  --line: #d9ded6;
  --paper: #f7f6f1;
  --card: #ffffff;
  --green: #2e5e3a;
  --green-ink: #1f4228;
  --gold: #c8912a;
  --pond: #2f7bd8;
  --sand: #e0a132;
  --weak: #9a6fc7;
  --pond-soft: #9dbde8;
  --sand-soft: #ecd39c;
  --danger: #b03a2e;
  --radius: 10px;
  --shadow: 0 6px 24px rgba(20, 30, 20, 0.14);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--paper); color: var(--ink);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
/* The tool fills the screen exactly. dvh, not vh, or a phone browser's address bar crops the map
   and the panel off the bottom. The header is measured by the flex column, never assumed. */
body.tool { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; }
body.tool .top { flex: 0 0 auto; }
body.tool .stage { flex: 1 1 auto; min-height: 0; height: auto; }
a { color: var(--green); }
button { font: inherit; }
.wordmark { font-weight: 800; letter-spacing: 0.02em; color: var(--green-ink); text-decoration: none; font-size: 18px; }
.wordmark small { font-weight: 500; color: var(--muted); margin-left: 8px; font-size: 13px; }

/* tool page */
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px; background: var(--card); border-bottom: 1px solid var(--line); }
.top .head { min-width: 0; }
.top h1 { font-size: 17px; margin: 0; line-height: 1.25; }
.top p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.stage { position: relative; height: calc(100% - 58px); }
#map { position: absolute; inset: 0; }
.panel { position: absolute; left: 16px; top: 16px; width: 380px; max-width: calc(100% - 32px);
  max-height: calc(100% - 32px); overflow: auto; background: var(--card); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 14px 16px; }
.panel h2 { font-size: 15px; margin: 0 0 6px; }
.panel p { margin: 6px 0; }
.muted { color: var(--muted); font-size: 13px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* display:flex above beats the hidden attribute, so a hidden row (the call card's booking row) stayed on screen */
.row[hidden] { display: none !important; }
.btn { border: 1px solid var(--green); background: var(--green); color: #fff; padding: 9px 14px;
  border-radius: 8px; cursor: pointer; font-weight: 600; }
.btn:disabled { opacity: 0.55; cursor: default; }
.btn.secondary { background: #fff; color: var(--green-ink); }
.btn.small { padding: 6px 10px; font-size: 13px; font-weight: 500; }
.btn.gold { background: var(--gold); border-color: var(--gold); color: #1b1400; }
input[type=text], input[type=email], input[type=number], select {
  width: 100%; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font: inherit; }
label { display: block; font-size: 13px; color: var(--muted); margin: 8px 0 4px; }
.search { display: flex; gap: 6px; }
.search input { flex: 1; }
.big { font-size: 28px; font-weight: 800; color: var(--green-ink); margin: 4px 0; }
.err { color: var(--danger); font-size: 13px; }
.ok { color: var(--green); }
.legend { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 13px; margin: 8px 0; }
.legend span::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 3px;
  margin-right: 6px; vertical-align: -1px; background: var(--c); }
/* A white swatch (hilltops) vanishes on the white panel; the edge is what makes it a chip. */
.legend span.edged::before { box-shadow: inset 0 0 0 1.5px #8c8a80; }
.progress { height: 8px; background: #e7ebe3; border-radius: 4px; overflow: hidden; margin: 8px 0; }
.progress i { display: block; height: 100%; background: var(--green); width: 0; transition: width 0.4s; }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th, td { text-align: left; padding: 5px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 600; }
td.num, th.num { text-align: right; white-space: nowrap; }
.mapctl { position: absolute; right: 12px; top: 12px; display: flex; flex-direction: column; gap: 6px; }
.mapctl button { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px;
  cursor: pointer; box-shadow: var(--shadow); font-size: 13px; }
.mapctl button.on { background: var(--green); color: #fff; border-color: var(--green); }
.layerctl { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.layerctl .btn { padding: 5px 9px; font-size: 12.5px; }
.btn.secondary.on { background: var(--green); border-color: var(--green); color: #fff; }
.hint { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); background: rgba(27,31,26,0.88);
  color: #fff; padding: 8px 14px; border-radius: 20px; font-size: 13px; pointer-events: none; white-space: nowrap; }
/* beside the map buttons, so the side panel never covers it */
.mapnote { position: absolute; right: 84px; top: 12px; max-width: 46%; background: rgba(27,31,26,0.88);
  color: #fff; padding: 6px 12px; border-radius: 14px; font-size: 12.5px; pointer-events: none; }
.foot { font-size: 12px; color: var(--muted); margin-top: 10px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { font-size: 12px; background: #eef2ea; border-radius: 12px; padding: 3px 9px; }

/* report page */
.report { max-width: 1080px; margin: 0 auto; padding: 16px; }
.report header { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 16px; }
.grid > *, .grid2 > *, .assume > * { min-width: 0; }
.table-scroll { max-width: 100%; overflow-x: auto; }
.report input, .report select { min-width: 0; max-width: 100%; }
.report .lines { overflow-wrap: anywhere; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 16px; }
.card h2 { margin: 0 0 8px; font-size: 16px; }
.card h3 { margin: 12px 0 6px; font-size: 14px; }
#rmap { height: 440px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); position: relative; }
#rmap .maplibregl-canvas { border-radius: 8px; }
.lines { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; color: var(--ink);
  background: #f2f4ef; border-radius: 8px; padding: 8px 10px; white-space: pre-wrap; }
.assume { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kind-pond { color: var(--pond); font-weight: 700; }
.kind-sand { color: var(--sand); font-weight: 700; }
.kind-weak { color: var(--weak); font-weight: 700; }
.cta { background: var(--green-ink); color: #fff; }
.cta a { color: #fff; }
.cta .btn { background: var(--gold); border-color: var(--gold); color: #1b1400; }
.strip img { width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--line); }
.toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
@media (max-width: 820px) {
  .grid { grid-template-columns: minmax(0, 1fr); }
  .panel { left: 8px; right: 8px; top: auto; bottom: 8px; width: auto; max-height: 62%; }
  .top h1 { font-size: 15px; }
  #rmap { height: 340px; }
  .hint { bottom: auto; top: 12px; left: 12px; transform: none; max-width: 62%; white-space: normal; text-align: center; }
}

/* The layer buttons live at panel level, not inside a step, so they stay reachable while the
   scan runs. That minute is when the farmer is actually looking at the map. */
#layer-toggles { position: sticky; top: 0; z-index: 2; background: var(--card);
  margin: -2px 0 8px; padding: 2px 0 8px; border-bottom: 1px solid var(--line); }
#layer-toggles .layerctl { margin-top: 0; }
/* the view buttons (3D, Photo, soil-map ponds) on their own line, the layers under them */
.tg-sep { flex-basis: 100%; height: 0; }
.gate { background: #f6f1df; border-radius: 8px; padding: 9px 12px; margin: 10px 0 0; font-weight: 600; }
#layer-toggles .legend { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); }

/* The report leads with the answer: the number and three plain sentences. The tables are one
   click away for the farmer who wants to check the work, not in the way of the one who doesn't. */
.headline { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 10px 28px; align-items: center; }
.headline .big { margin: 2px 0 4px; }
.eyebrow { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.takeaways { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: 14.5px; line-height: 1.4; }
.takeaways li { display: flex; gap: 9px; align-items: baseline; }
.takeaways li::before { content: ""; flex: none; width: 11px; height: 11px; border-radius: 3px; background: var(--c); transform: translateY(1px); }
.takeaways li.lead { color: var(--muted); font-size: 13.5px; }
.takeaways li.lead::before { display: none; }
.takeaways b { font-variant-numeric: tabular-nums; }
details.fold > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center;
  gap: 8px; font-weight: 600; font-size: 14px; padding: 6px 0; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::after { content: "Show"; font-size: 12.5px; color: var(--green-ink); border: 1px solid var(--line);
  border-radius: 12px; padding: 2px 10px; }
details.fold[open] > summary::after { content: "Hide"; }
details.fold[open] > summary { margin-bottom: 6px; }
details.card.fold > summary { font-size: 16px; padding: 0; }
.card > details.fold { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 4px; }
@media (max-width: 820px) {
  .headline { grid-template-columns: minmax(0, 1fr); }
}

/* Runners up when a town name exists in more than one state. Silently picking one is how a farmer
   in Ames, Nebraska gets flown to Iowa and blames himself. */
#find-alts { align-items: center; margin: 6px 0 0; }
#find-alts .muted { font-size: 13px; }
.chip.alt { cursor: pointer; border: 1px solid var(--line); background: var(--paper); font: inherit;
  font-size: 12.5px; padding: 3px 8px; border-radius: 999px; color: var(--green-ink); }
.chip.alt:hover { border-color: var(--green); }

/* Not an error: the outline is usable, it just needs the farmer's eye before he trusts the acres. */
.warn { background: #fdf6e3; border: 1px solid #e3d5a8; border-radius: 8px; padding: 8px 10px;
  margin: 8px 0; font-size: 13.5px; color: #6b5620; }

/* A proof point, behind config and off by default (config.proof_line): a little more weight than
   muted text, a green rule on the left so it reads as evidence, not another disclaimer. */
.proof { font-size: 13px; font-weight: 600; color: var(--green-ink); border-left: 3px solid var(--green);
  padding: 4px 0 4px 10px; margin: 10px 0; }

/* The CTA card's "what you get" list: white on the dark card, roomy enough that five lines don't
   read as one wall of text. */
.cta-points { margin: 10px 0; padding-left: 20px; }
.cta-points li { margin: 8px 0; line-height: 1.5; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 560px) { .grid2 { grid-template-columns: 1fr; } }
#rx-zones td.num, #rx-zones th.num { text-align: right; }
#rx-blended { margin: 12px 0 2px; }

/* How wet or dry the stretch in front of a satellite look was. */
.tag-wet { color: #2f7bd8; font-weight: 600; }
.tag-dry { color: #b8791f; font-weight: 600; }

/* A download is only offered for the prescription actually on screen. */
.btn.waiting { opacity: .55; cursor: progress; }

/* The prescription card walks down numbered steps. */
.card h3.step { margin: 16px 0 6px; font-size: 14px; color: var(--green-ink); border-top: 1px solid var(--line); padding-top: 12px; }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.grid3 > * { min-width: 0; }
@media (max-width: 640px) { .grid3 { grid-template-columns: 1fr; } }
details.more { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; margin: 8px 0; background: #fbfbf8; }
details.more > summary { cursor: pointer; list-style: none; display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; }
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::before { content: "+"; font-weight: 700; color: var(--green-ink); width: 14px; }
details.more[open] > summary::before { content: "\2013"; }
details.more[open] > summary { margin-bottom: 6px; }
.thread { background: #f2f4ef; border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; font-size: 13.5px; max-height: 220px; overflow: auto; }
.thread .you { color: var(--muted); margin: 2px 0; }
.thread .page { color: var(--ink); margin: 2px 0 8px; }
.thread .err { color: var(--danger); margin: 2px 0 8px; }

/* Say it: docked at the bottom of the screen so it is always in reach (2026-09-16). The report
   gets bottom padding so the call card is never under it. */
.report { padding-bottom: 150px; }
#chat-dock { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); width: 760px; max-width: 100%;
  background: var(--card); border: 1px solid var(--line); border-bottom: 0; border-radius: 12px 12px 0 0;
  box-shadow: 0 -6px 24px rgba(20, 30, 20, 0.14); z-index: 40; padding: 8px 12px 10px; }
#chat-dock .head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
#chat-dock .head .muted { flex: 1 1 auto; min-width: 0; }
#chat-dock .head .linkbtn { white-space: nowrap; }
#chat-dock .thread { max-height: 34vh; margin: 8px 0 6px; }
#chat-dock .note { margin: 4px 0 6px; }
#chat-dock.tucked #chat-hint { display: block; }
#chat-dock:not(.tucked) #chat-hint { display: none; }
#chat-dock.tucked .note { display: none; }
#chat-dock input[type=text] { padding: 8px 10px; }
@media (max-width: 820px) {
  #chat-dock { width: 100%; border-radius: 0; padding: 6px 10px 8px; }
  #chat-dock .head .muted { display: none; }
  #chat-dock .thread { max-height: 40vh; }
}
#seasons td.look { cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }

/* legal wording (2026-09-16): the disclaimer near the map and above the download, and the agreement
   note by the build button. Readable size, never folded, never muted below body text. */
.legal-line { font-size: 13px; color: var(--ink); margin: 8px 0 0; line-height: 1.4; }
.agree { font-size: 14px; color: var(--ink); background: #f6f1df; border-radius: 8px; padding: 8px 12px; margin: 8px 0 0; }
.legal .card h2 { margin-top: 14px; }
.legal .card p, .legal .card li { font-size: 15px; }
#rx-blocks div { margin: 2px 0; }
#rx-blocks .btn { margin-left: 6px; }
input[type=range] { padding: 0; }

/* "How to fix the edges" is help, not an action: a link under the note, not a button in the row */
.editlink { margin: -4px 0 8px; }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; font-size: 13px; font-weight: 600; color: var(--green-ink);
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.helpbox { background: #f2f4ef; border-radius: 8px; padding: 8px 10px; margin: 0 0 10px; font-size: 13px; }
.helpbox p { margin: 0 0 6px; }
.helpbox p:last-child { margin: 0; }
.addhelp { font-size: 12.5px; margin: 8px 0 0; line-height: 1.45; }
#join-offers .offer { margin: 6px 0; }
#join-offers .offer .muted { display: block; margin-top: 4px; }

#find-other { margin-top: 8px; }
.muted.small { font-size: 12px; }

/* "Something not right?" (static/feedback.js): a small card over the bottom of the page */
.fb-sheet { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); width: 380px; max-width: calc(100% - 24px);
  background: var(--card); border-radius: var(--radius); box-shadow: 0 8px 30px rgba(0,0,0,.25); padding: 14px; z-index: 50;
  box-sizing: border-box; }
.fb-sheet h2 { font-size: 15px; margin: 0 0 8px; }
.fb-sheet textarea { width: 100%; min-height: 84px; margin: 4px 0; padding: 9px 10px; border: 1px solid var(--line);
  border-radius: 8px; font: inherit; resize: vertical; box-sizing: border-box; }
.fb-sheet .check { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; margin: 8px 0; }
/* a display rule outranks the hidden attribute; without this the outline box showed with no field to send */
.fb-sheet [hidden], .fb-sheet[hidden] { display: none !important; }

/* On a phone the panel covers most of the map; while he fixes corners he can tuck it to a strip */
.tuck { display: none; float: right; }
@media (max-width: 820px) {
  .tuck { display: inline-block; }
  /* Leave the MapLibre attribution strip below the panel. On a short phone it otherwise sits
     over the tucked title and the only button that can open the panel again. */
  .panel { bottom: 34px; max-height: min(62%, calc(100% - 44px)); z-index: 2; }
  /* A wrapped legend can fill a short phone panel and cover its email form. */
  #layer-toggles { position: static; }
  .panel > #step-confirm > h2 { display: flex; align-items: center; justify-content: space-between;
    gap: 8px; white-space: nowrap; }
  .panel > #step-confirm > h2 .tuck { float: none; flex: 0 0 auto; white-space: nowrap; }
  .panel.tucked { min-height: 60px; max-height: 60px; overflow: hidden; }
}

/* The layer bar sticks flush with the panel's top edge. Stuck at the content edge, the panel's own
   padding above it was a strip where the text scrolling under the bar still showed. */
#layer-toggles { top: -14px; margin-top: -14px; padding-top: 14px; }
/* Hilltops are a white wash over the crop. A plain white square with an edge read as an unticked box. */
.legend span.edged::before { box-shadow: none; background: linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.6)), #6f8f5a; }
.legend span[hidden] { display: none; }

@media (max-width: 820px) {
  /* On a phone the map buttons sit in a row, so a fitted field is not tucked under a column of them */
  .stage .mapctl { flex-direction: row; top: 8px; right: 8px; }
  .hint { top: 52px; left: 8px; max-width: calc(100% - 16px); }
  .mapnote { top: 96px; right: 8px; max-width: calc(100% - 16px); }
  /* the zoom buttons and the credits ride just above the panel (static/app.js sets the height), not over it */
  .stage .maplibregl-ctrl-bottom-right, .stage .maplibregl-ctrl-bottom-left { bottom: var(--panel-clear, 0px); }
}