/* Typefaces served from this server rather than fetched from Google.
   A farm office on a slow line should not wait on a third party, and the
   application then works with no outbound internet at all. */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/barlow-condensed-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/barlow-condensed-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/barlow-condensed-latin-700-normal.woff2") format("woff2");
}

/* Veldplan
   A field tool, read on a phone in the sun and on a laptop at the kitchen
   table. Dark ground so satellite imagery carries the colour; the only bright
   hues are the three that mean something — thornveld green for grazing within
   capacity, ochre for caution, rust for a loss or a bare patch. Figures are
   set in mono so columns line up like a stock register. */

:root {
  --ink:      #12171a;
  --panel:    #1a2126;
  --panel-2:  #212a30;
  --raise:    #27333a;
  --line:     #2c383e;
  --bone:     #e8e5da;
  --dust:     #8fa0a2;
  --dim:      #6b7b7e;

  --veld:     #7fa352;
  --veld-dim: #4a6132;
  --ochre:    #d9a441;
  --rust:     #c4573a;
  --water:    #4fa3c7;

  --sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;
  --cond: "Barlow Condensed", "IBM Plex Sans", sans-serif;

  --r: 3px;
  --topbar-h: 56px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

body { overflow-x: hidden; }

/* ---------------------------------------------------------------- topbar */

.topbar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "brand farm actions";
  align-items: center;
  gap: 12px;
  height: var(--topbar-h);
  padding: 0 12px;
  padding-top: env(safe-area-inset-top);
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 900;
}

.brand { grid-area: brand; display: flex; align-items: center; gap: 8px; }

.brand-mark {
  width: 16px; height: 16px;
  border: 2px solid var(--veld);
  border-radius: 1px;
  position: relative;
  flex: none;
}
.brand-mark::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-left: 1px solid var(--veld-dim);
  border-top: 1px solid var(--veld-dim);
}

.brand-text {
  font-family: var(--cond);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.topbar-farm { grid-area: farm; min-width: 0; }

.farm-name {
  background: none;
  border: none;
  border-bottom: 1px dashed transparent;
  color: var(--bone);
  font-family: var(--cond);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0;
  width: 100%;
  max-width: 260px;
}
.farm-name:hover { border-bottom-color: var(--line); }
.farm-name:focus { outline: none; border-bottom-color: var(--veld); }

.farm-sub {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--dim);
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar-verdict { grid-area: verdict; display: none; text-align: right; }
.verdict-label {
  display: block;
  font-family: var(--cond);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--dim);
}
.verdict-value {
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.verdict-value.is-loss { color: var(--rust); }
.verdict-value.is-profit { color: var(--veld); }

.topbar-actions { grid-area: actions; display: flex; gap: 6px; align-items: center; }

/* ---------------------------------------------------------------- buttons */

.btn {
  font-family: var(--cond);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--bone);
  background: var(--raise);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 7px 12px;
  cursor: pointer;
  min-height: 36px;
}
.btn:hover { border-color: var(--dim); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--veld); outline-offset: 2px; }
.btn-ghost { background: transparent; }
.btn-solid { background: var(--veld-dim); border-color: var(--veld); }

select.btn { max-width: 132px; -webkit-appearance: none; appearance: none; padding-right: 10px; }

.btnrow { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 16px; }

/* ---------------------------------------------------------------- shell */

.shell { display: flex; flex-direction: column; }

.mapwrap {
  position: relative;
  height: 46vh;
  min-height: 260px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
}

#map { position: absolute; inset: 0; background: #0d1214; }
.leaflet-container { font-family: var(--sans); background: #0d1214; }

.map-tools {
  position: absolute;
  top: 8px; left: 8px; right: 8px;
  z-index: 500;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: flex-end;
}
@media (min-width: 900px) {
  .map-tools {
    left: auto;
    top: 10px; right: 10px;
    flex-direction: column;
    align-items: flex-end;
  }
}

.mtool {
  font-family: var(--cond);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  background: rgba(18, 23, 26, 0.88);
  color: var(--bone);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 6px 9px;
  cursor: pointer;
  backdrop-filter: blur(4px);
  min-height: 32px;
}
.mtool:hover { border-color: var(--dust); }
.mtool.is-on { background: var(--veld-dim); border-color: var(--veld); }

.map-hint {
  position: absolute;
  left: 10px; right: 10px; bottom: 34px;
  z-index: 500;
  max-width: 420px;
  background: rgba(18, 23, 26, 0.94);
  border: 1px solid var(--veld);
  border-radius: var(--r);
  padding: 7px 10px;
  font-size: 12.5px;
  line-height: 1.35;
  backdrop-filter: blur(4px);
}

.map-legend {
  display: none;
  position: absolute;
  left: 10px; top: 10px;
  z-index: 500;
  flex-wrap: wrap;
  gap: 4px 10px;
  max-width: 62%;
  background: rgba(18, 23, 26, 0.82);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 6px 9px;
  font-family: var(--cond);
  font-size: 11.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--dust);
  backdrop-filter: blur(4px);
}
@media (min-width: 900px) { .map-legend { display: flex; } }
.map-legend span { display: inline-flex; align-items: center; gap: 5px; }
.sw { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.sw-camp { background: rgba(127,163,82,.35); border: 1px solid var(--veld); }
.sw-special { background: rgba(217,164,65,.35); border: 1px solid var(--ochre); }
.sw-water { background: rgba(79,163,199,.35); border: 1px solid var(--water); border-radius: 50%; }
.sw-infra { background: var(--bone); border: 1px solid var(--ink); }

/* ---------------------------------------------------------------- tabs */

.panels { flex: 1; min-width: 0; }

.tabs {
  display: flex;
  position: sticky;
  top: var(--topbar-h);
  z-index: 800;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }

.tab {
  flex: 1 0 auto;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--dim);
  font-family: var(--cond);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 12px 14px;
  cursor: pointer;
  white-space: nowrap;
}
.tab:hover { color: var(--dust); }
.tab.is-on { color: var(--bone); border-bottom-color: var(--veld); }
.tab:focus-visible { outline: 2px solid var(--veld); outline-offset: -2px; }

.panes { padding: 16px 14px 64px; }
.pane { display: none; }
.pane.is-on { display: block; animation: fade .18s ease; }

@keyframes fade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- type */

.eyebrow {
  font-family: var(--cond);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dust);
  margin: 26px 0 8px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--line);
}
.pane > .eyebrow:first-child, .gauge-block + .kpis + .eyebrow { margin-top: 4px; }

.note {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--dust);
  margin: 0 0 14px;
  max-width: 62ch;
}

/* ---------------------------------------------------------------- fields */

.f { display: block; margin-bottom: 14px; position: relative; }

/* The question mark sits at the end of the label row, out of the way of the
   input itself, and is a full 30px tap target on a phone. */
.f-help {
  position: absolute;
  top: -4px;
  right: 0;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  background: none;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--dust);
  font-family: var(--cond);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.f-help:hover { border-color: var(--veld); color: var(--veld); }
.f-help[aria-expanded="true"] {
  background: var(--veld-dim);
  border-color: var(--veld);
  color: var(--bone);
}
.f-help:focus-visible { outline: 2px solid var(--veld); outline-offset: 2px; }

.f-helpbox {
  margin-top: 7px;
  padding: 10px 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--veld);
  border-radius: var(--r);
  font-size: 13px;
  line-height: 1.55;
  color: var(--dust);
}
.f-helpbox b { color: var(--bone); font-weight: 600; }

.f-label {
  display: block;
  padding-right: 34px;
  font-family: var(--cond);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--dust);
  margin-bottom: 5px;
}
.f-label em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0;
  color: var(--dim);
  text-transform: none;
}
.f-flag {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ochre);
  border: 1px solid rgba(217,164,65,.4);
  border-radius: 2px;
  padding: 0 3px;
  text-transform: uppercase;
  vertical-align: 1px;
}

.f-input {
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--bone);
  font-family: var(--mono);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  padding: 9px 10px;
  min-height: 42px;
}
.f-input:hover { border-color: var(--dim); }
.f-input:focus { outline: none; border-color: var(--veld); box-shadow: 0 0 0 2px rgba(127,163,82,.16); }
select.f-input { font-family: var(--sans); font-size: 14px; }

.f-hint { display: block; font-size: 12px; color: var(--dim); margin-top: 4px; line-height: 1.4; }

.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
@media (max-width: 400px) { .row2 { grid-template-columns: 1fr; } }

textarea {
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--bone);
  font-family: var(--mono);
  font-size: 13px;
  padding: 10px;
  resize: vertical;
}
textarea:focus { outline: none; border-color: var(--veld); }

.paste-box {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 12px;
  margin-bottom: 16px;
}

/* ------------------------------------------------------- signature gauge */
/* The one place this page raises its voice: grazing demand against what the
   veld will carry, read like a water gauge on a reservoir wall. */

.gauge-block {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 14px;
  margin-bottom: 14px;
}

.gauge-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 9px; }
.gauge-head .eyebrow { margin: 0; padding: 0; border: none; }

.gauge-read {
  font-family: var(--mono);
  font-size: 21px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.gauge {
  position: relative;
  height: 26px;
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: 2px;
  overflow: hidden;
}

.gauge-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--veld);
  transition: width .35s cubic-bezier(.4,0,.2,1), background-color .35s;
}
.gauge-fill.is-tight { background: var(--ochre); }
.gauge-fill.is-over  { background: var(--rust); }

/* The capacity line sits at 80% of the track, so anything past it is overstocked. */
.gauge-cap {
  position: absolute;
  top: 0; bottom: 0;
  left: 80%;
  border-left: 2px dashed var(--bone);
  opacity: .8;
}
.gauge-cap span {
  position: absolute;
  left: 5px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--cond);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bone);
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0,0,0,.7);
}

.gauge-foot {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--dim);
  margin-top: 7px;
}

/* ---------------------------------------------------------------- kpis */

.kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 4px; }
@media (min-width: 520px) { .kpis { grid-template-columns: repeat(4, 1fr); } }

.kpi {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 2px solid var(--line);
  border-radius: var(--r);
  padding: 10px;
}
.kpi.is-good { border-left-color: var(--veld); }
.kpi.is-warn { border-left-color: var(--ochre); }
.kpi.is-bad  { border-left-color: var(--rust); }

.kpi-k {
  font-family: var(--cond);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
  display: block;
  margin-bottom: 3px;
}
.kpi-v {
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  display: block;
  line-height: 1.2;
}
.kpi-s { font-size: 11.5px; color: var(--dim); display: block; margin-top: 2px; }

.statgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 12px 0 4px; }
@media (min-width: 520px) { .statgrid { grid-template-columns: repeat(3, 1fr); } }
.statgrid .kpi { border-left-width: 1px; }

/* ---------------------------------------------------------------- findings */

.findings { display: flex; flex-direction: column; gap: 8px; }

.finding {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--dim);
  border-radius: var(--r);
  padding: 11px 13px;
}
.finding.sev-critical { border-left-color: var(--rust); }
.finding.sev-warning  { border-left-color: var(--ochre); }
.finding.sev-good     { border-left-color: var(--veld); }
.finding.sev-info     { border-left-color: var(--water); }

.finding h3 {
  margin: 0 0 4px;
  font-family: var(--cond);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.finding.sev-critical h3 { color: var(--rust); }
.finding.sev-warning h3  { color: var(--ochre); }
.finding.sev-good h3     { color: var(--veld); }
.finding.sev-info h3     { color: var(--water); }

.finding p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--dust); }

/* ---------------------------------------------------------------- ledger */

.ledger {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 4px 12px;
}

.led-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  font-size: 13.5px;
  border-bottom: 1px solid rgba(44,56,62,.5);
}
.led-row:last-child { border-bottom: none; }
.led-row span:first-child { color: var(--dust); min-width: 0; }
.led-row span:last-child {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.led-row .led-qty { font-family: var(--mono); font-size: 11.5px; color: var(--dim); }

.led-head {
  font-family: var(--cond);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  padding: 12px 0 4px;
  border-bottom: 1px solid var(--line);
}
.led-total { font-weight: 600; border-top: 1px solid var(--line); border-bottom: none; padding-top: 8px; }
.led-total span:first-child { color: var(--bone); }
.led-grand { font-size: 15px; }
.led-grand span:last-child { font-size: 17px; }
.is-loss { color: var(--rust); }
.is-profit { color: var(--veld); }

/* ---------------------------------------------------------------- tables */

.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 6px; }

.tbl { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 380px; }

.tbl th {
  font-family: var(--cond);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--dim);
  text-align: right;
  padding: 7px 8px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.tbl th:first-child { text-align: left; }

.tbl td {
  padding: 7px 8px;
  border-bottom: 1px solid rgba(44,56,62,.45);
  text-align: right;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tbl td:first-child { text-align: left; font-family: var(--sans); white-space: normal; }
.tbl tr.is-best td { background: rgba(127,163,82,.09); }
.tbl tr.is-special td:first-child { color: var(--ochre); }
.tbl .t-loss { color: var(--rust); }
.tbl .t-profit { color: var(--veld); }
.tbl .t-mute { color: var(--dim); }

/* ---------------------------------------------------------------- infra */

.infralist { display: flex; flex-direction: column; gap: 8px; }

.infra {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 11px 12px;
}
.infra-pin {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--cond);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  background: var(--bone);
}
.infra h4 {
  margin: 0 0 2px;
  font-family: var(--cond);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.infra p { margin: 0 0 3px; font-size: 13px; color: var(--dust); line-height: 1.5; }
.infra .coord { font-family: var(--mono); font-size: 11px; color: var(--dim); }

/* ---------------------------------------------------------------- map pins */

.pin {
  background: var(--bone);
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 50%;
  width: 22px; height: 22px;
  display: grid;
  place-items: center;
  font-family: var(--cond);
  font-size: 11px;
  font-weight: 700;
  box-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.pin-water { background: var(--water); color: #06222e; }
.leaflet-tooltip.camp-tag {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 0;
}
.leaflet-tooltip.camp-tag::before { display: none; }
.camp-tag {
  font-family: var(--cond);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--bone);
  text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 0 6px rgba(0,0,0,.7);
  white-space: nowrap;
  text-transform: uppercase;
}
.leaflet-popup-content-wrapper {
  background: var(--panel);
  color: var(--bone);
  border-radius: var(--r);
  border: 1px solid var(--line);
}
.leaflet-popup-tip { background: var(--panel); }
.leaflet-popup-content { margin: 10px 12px; font-size: 13px; }
.leaflet-popup-content b { font-family: var(--cond); font-size: 14px; letter-spacing: .03em; }
.leaflet-popup-content .pop-fig { font-family: var(--mono); font-size: 12px; color: var(--dust); display: block; margin-top: 3px; }
.leaflet-container a.leaflet-popup-close-button { color: var(--dim); }
.leaflet-control-attribution {
  background: rgba(18,23,26,.75) !important;
  color: var(--dim) !important;
  font-size: 10px !important;
}
.leaflet-control-attribution a { color: var(--dust) !important; }

/* ---------------------------------------------------------------- toast */

.toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 1200;
  background: var(--raise);
  border: 1px solid var(--line);
  border-left: 3px solid var(--veld);
  border-radius: var(--r);
  padding: 10px 16px;
  font-size: 13.5px;
  max-width: 88vw;
  box-shadow: 0 6px 24px rgba(0,0,0,.5);
}
.toast.is-bad { border-left-color: var(--rust); }

.busy { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 1100; background: transparent; }
.busy.is-on { background: linear-gradient(90deg, transparent, var(--veld), transparent); animation: sweep 1s linear infinite; }
@keyframes sweep { from { background-position: -100% 0; } to { background-position: 200% 0; } }

/* ---------------------------------------------------------------- desktop */

@media (max-width: 620px) {
  /* Hidden only in the app's own header, where the farm name needs the room.
     On the sign-in card it is the only thing identifying the site. */
  .topbar .brand-text { display: none; }
  .mtool { font-size: 11px; padding: 5px 7px; letter-spacing: 0.04em; }
  .map-tools { gap: 4px; }
  .tab { padding: 11px 8px; font-size: 13px; letter-spacing: 0.06em; }
  select.btn { max-width: 92px; }
  .btn { padding: 7px 9px; font-size: 13px; }
  .farm-name { font-size: 17px; }
}

@media (min-width: 900px) {
  :root { --topbar-h: 60px; }

  .topbar {
    grid-template-columns: auto minmax(0,1fr) auto auto;
    grid-template-areas: "brand farm verdict actions";
    padding: 0 18px;
  }
  .topbar-verdict { display: block; }

  .shell { flex-direction: row-reverse; height: calc(100vh - var(--topbar-h)); }

  .mapwrap {
    flex: 1 1 56%;
    height: auto;
    border-bottom: none;
    border-left: 1px solid var(--line);
  }

  .panels { flex: 0 0 44%; max-width: 620px; overflow-y: auto; }
  .tabs { top: 0; }
  .panes { padding: 20px 22px 80px; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1280px) {
  .panels { flex-basis: 40%; }
  .kpis { grid-template-columns: repeat(4, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ------------------------------------------------------- getting started */

.starter {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--water);
  border-radius: var(--r);
  padding: 0 13px;
  margin-bottom: 14px;
}
.starter summary {
  cursor: pointer;
  padding: 11px 0;
  font-family: var(--cond);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--water);
  list-style: none;
}
.starter summary::-webkit-details-marker { display: none; }
.starter summary::after {
  content: "+";
  float: right;
  font-family: var(--mono);
  color: var(--dim);
}
.starter[open] summary::after { content: "\2212"; }
.starter ol { margin: 2px 0 8px; padding-left: 20px; }
.starter li { font-size: 13.5px; line-height: 1.55; color: var(--dust); margin-bottom: 7px; }
.starter li b { color: var(--bone); font-weight: 600; }
.starter p { font-size: 13.5px; line-height: 1.55; color: var(--dust); margin: 0 0 12px; }
.starter .qm {
  display: inline-grid;
  place-items: center;
  width: 18px; height: 18px;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-family: var(--cond);
  font-size: 12px;
  font-weight: 700;
  color: var(--dust);
  vertical-align: -3px;
}

/* The basemap picker is a native select so phones give their own wheel. */
select.mtool {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 9px;
  max-width: 132px;
}

.targetbox { margin-bottom: 6px; }
.targetbox .statgrid { margin-top: 0; }

/* ---------------------------------------------------------------- stepper */

.tab i {
  font-style: normal;
  display: inline-grid;
  place-items: center;
  width: 17px; height: 17px;
  margin-right: 6px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-family: var(--mono);
  font-size: 10px;
  vertical-align: -2px;
  opacity: .75;
}
.tab.is-on i { background: var(--veld); border-color: var(--veld); color: var(--ink); opacity: 1; }
.tab.is-done { color: var(--dust); }
.tab.is-done i { background: var(--veld-dim); border-color: var(--veld-dim); color: var(--bone); opacity: 1; }

.stepintro {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--dust);
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--veld);
  border-radius: var(--r);
  padding: 11px 13px;
  margin: 0 0 18px;
}
.stepintro b.f-flag { vertical-align: 1px; }

.stepnav {
  position: sticky;
  bottom: 0;
  z-index: 850;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  background: var(--panel);
  border-top: 1px solid var(--line);
}
.stepnav .btn { min-width: 84px; }
.stepnav .btn:disabled { opacity: .35; cursor: default; }
.stepwhere {
  font-family: var(--cond);
  font-size: 12.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
  white-space: nowrap;
}
@media (min-width: 900px) { .stepnav { padding: 12px 22px; } }

/* ---------------------------------------------------------------- report */

.report { display: none; }

@media print {
  /* Everything on screen is chrome. The report is the document. */
  .topbar, .shell, .toast, .busy { display: none !important; }

  html, body { background: #fff; color: #111; font-size: 10.5pt; }
  .report { display: block; padding: 0; max-width: 100%; }

  .rep-head { border-bottom: 2px solid #4a6132; padding-bottom: 8px; margin-bottom: 14px; }
  .rep-head h1 { font-size: 20pt; margin: 0 0 2px; color: #4a6132; letter-spacing: .02em; }
  .rep-head p { margin: 0; font-size: 9pt; color: #555; }

  .report h2 {
    font-size: 11pt;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #4a6132;
    margin: 16px 0 6px;
    padding-bottom: 3px;
    border-bottom: 1px solid #ccc;
    page-break-after: avoid;
  }

  table.rt { width: 100%; border-collapse: collapse; margin-bottom: 4px; page-break-inside: auto; }
  table.rt tr { page-break-inside: avoid; }
  table.rt th {
    text-align: left;
    font-weight: 400;
    padding: 3px 6px 3px 0;
    border-bottom: 1px solid #eee;
    vertical-align: top;
  }
  table.rt td {
    text-align: right;
    padding: 3px 0 3px 6px;
    border-bottom: 1px solid #eee;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  table.rt tr.sub th, table.rt tr.sub td { font-weight: 600; border-bottom: 1px solid #999; }
  table.rt tr.tot th, table.rt tr.tot td { font-weight: 700; font-size: 12pt; border-bottom: 2px solid #333; }
  .neg { color: #a8452c; }
  .pos { color: #35602a; }

  .rep-find {
    border-left: 3px solid #999;
    padding: 5px 0 5px 9px;
    margin-bottom: 7px;
    page-break-inside: avoid;
  }
  .rep-find.sev-critical { border-left-color: #a8452c; }
  .rep-find.sev-warning  { border-left-color: #b8860b; }
  .rep-find.sev-good     { border-left-color: #35602a; }
  .rep-find.sev-info     { border-left-color: #2b6f8c; }
  .rep-find b { display: block; font-size: 10.5pt; margin-bottom: 1px; }
  .rep-find p { margin: 0; font-size: 9pt; line-height: 1.4; color: #333; }

  .rep-foot {
    margin-top: 18px;
    padding-top: 8px;
    border-top: 1px solid #ccc;
    font-size: 8.5pt;
    line-height: 1.45;
    color: #555;
    page-break-inside: avoid;
  }

  @page { margin: 14mm; }
}

/* ------------------------------------------------- mobile: fit and reach */
/* Measured on a 360px phone: the tab strip needed 448px so step one scrolled
   off, the farm name was clipped, and every control was a 32-36px target.
   Thumbs want 44px. */

@media (max-width: 620px) {
  /* All five steps have to be visible at once, or the flow stops reading as
     a flow. Tighter type and no wasted padding gets 448px down to about 320. */
  .tab {
    padding: 12px 2px;
    font-size: 11px;
    letter-spacing: 0;
    flex: 1 1 0;
    min-width: 0;
  }
  .tab i { width: 15px; height: 15px; margin-right: 3px; font-size: 9px; }

  /* The header carried four buttons and the farm name in 360px, so nothing
     fitted. Opening a plan now lives at the start of step one and saving at
     the end of step five, where they belong in the run-through anyway.
     Log stays: a change can occur to somebody on any step, and making them
     walk to step five to record it is how notes get lost. */
  .topbar-actions #savePlan,
  .topbar-actions #printPlan,
  .topbar-actions #loadPlan { display: none; }
  /* Log and Setup both stay: one to record a change from wherever you are,
     the other because the settings are otherwise unreachable on a phone. */
  .topbar-actions .btn { padding: 10px 9px; font-size: 12px; }
  .topbar-actions { gap: 0; }
  .topbar-actions .btn { padding: 10px 11px; }

  /* The actions column has to stay in the grid. Dropping it from the template
     while Log was still visible pushed Log onto an implicit second row, where
     it floated over the map. */
  .topbar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "brand farm actions";
  }

  /* The basemap names are long; the picker has to stay inside the tool row. */
  select.mtool { max-width: 104px; }
  .farm-name { font-size: 18px; max-width: none; }

}

/* Anything without a hover pointer is being touched, whatever its width — a
   768px tablet was getting mouse-sized controls. */
@media (hover: none), (max-width: 620px) {
  .btn, select.btn { min-height: 44px; padding: 10px 14px; }
  .f-input { min-height: 46px; }
  .mtool { min-height: 40px; padding: 8px 10px; }
  .f-help { width: 40px; height: 40px; top: -9px; }
  .f-label { padding-right: 44px; }
  .farm-name { padding: 11px 0; }
  .openrow select { min-height: 46px; }
  .stepnav .btn { min-height: 46px; }
  .leaflet-control-zoom a {
    width: 40px !important;
    height: 40px !important;
    line-height: 40px !important;
    font-size: 20px !important;
  }
}

/* Opening a saved plan, at the start of the run-through. */
.openrow { margin-bottom: 16px; }
.openrow select {
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--bone);
  font-family: var(--sans);
  font-size: 14px;
  padding: 11px 10px;
  min-height: 46px;
}
.openrow select:focus { outline: none; border-color: var(--veld); }
.openrow .f-label { margin-bottom: 5px; }

/* Leaflet's own controls, in the same dark palette as everything else. */
.leaflet-control-zoom { border: none !important; box-shadow: none !important; }
.leaflet-control-zoom a {
  background: rgba(18, 23, 26, 0.88) !important;
  color: var(--bone) !important;
  border: 1px solid var(--line) !important;
  backdrop-filter: blur(4px);
}
.leaflet-control-zoom a:hover {
  background: var(--raise) !important;
  border-color: var(--dust) !important;
}
.leaflet-control-zoom a:first-child { border-radius: var(--r) var(--r) 0 0 !important; }
.leaflet-control-zoom a:last-child { border-radius: 0 0 var(--r) var(--r) !important; border-top: none !important; }

/* In a two-up row a wrapping label used to push its own input down and leave
   the pair out of line. Reserving two lines keeps them level. */
.row2 .f-label {
  min-height: 2.6em;
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 0 5px;   /* flex drops the whitespace between label and unit */
}
@media (max-width: 400px) { .row2 .f-label { min-height: 0; display: block; } }

/* ---------------------------------------------------------------- sign in */

.authbody { display: grid; place-items: center; min-height: 100vh; padding: 20px; }
.authwrap { width: 100%; max-width: 380px; }
.authcard {
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 3px solid var(--veld);
  border-radius: var(--r);
  padding: 26px 22px;
}
.authlead { font-size: 13.5px; line-height: 1.55; color: var(--dust); margin: 0 0 18px; text-align: center; }
.autherr {
  background: rgba(196,87,58,.12);
  border: 1px solid var(--rust);
  border-radius: var(--r);
  color: var(--bone);
  font-size: 13.5px;
  padding: 10px 12px;
  margin: 0 0 16px;
}
.authgo { width: 100%; margin-top: 20px; justify-content: center; }
.authfoot { font-size: 12px; line-height: 1.5; color: var(--dim); margin: 18px 0 0; }
.authfoot code { font-family: var(--mono); font-size: 11.5px; color: var(--dust); }

.signedin { font-size: 12.5px; color: var(--dim); margin: 14px 0 0; }
.signedin b { color: var(--dust); font-weight: 600; }
.signedin a { color: var(--veld); }

/* ------------------------------------------------------------- change log */

/* display:flex beats the hidden attribute's own display:none, so without this
   the closed overlay stays in the layout and swallows every click on the page. */
.sheet[hidden] { display: none; }

.sheet {
  position: fixed;
  inset: 0;
  z-index: 1500;
  background: rgba(8, 11, 13, .72);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
body.sheet-open { overflow: hidden; }

.sheet-box {
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: 10px 10px 0 0;
  width: 100%;
  max-width: 720px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
}
@media (min-width: 700px) {
  .sheet { align-items: center; }
  .sheet-box { border-radius: var(--r); max-height: 86vh; }
}

.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.sheet-head h2 {
  margin: 0;
  font-family: var(--cond);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.sheet-tabs { display: flex; border-bottom: 1px solid var(--line); }
.ltab {
  flex: 1;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--dim);
  font-family: var(--cond);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 12px 8px;
  cursor: pointer;
  min-height: 46px;
}
.ltab.is-on { color: var(--bone); border-bottom-color: var(--veld); }

.lcount {
  display: inline-block;
  min-width: 19px;
  padding: 1px 5px;
  margin-left: 5px;
  border-radius: 9px;
  background: var(--ochre);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 11px;
  vertical-align: 1px;
}
.lcount.is-zero { background: var(--line); color: var(--dim); }

.sheet-body { overflow-y: auto; padding: 16px; -webkit-overflow-scrolling: touch; }
.lpane { display: none; }
.lpane.is-on { display: block; }

.filepick { padding: 9px 10px; font-family: var(--sans); font-size: 13px; }

.lmsg {
  margin-top: 12px;
  padding: 11px 13px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  border-left: 3px solid var(--veld);
  background: var(--panel);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--dust);
}
.lmsg.is-bad { border-left-color: var(--rust); }
.lmsg.is-good { border-left-color: var(--veld); }

.loglist { display: flex; flex-direction: column; gap: 9px; }

.logitem {
  display: grid;
  grid-template-columns: 30px 1fr 28px;
  gap: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--ochre);
  border-radius: var(--r);
  padding: 11px 12px;
}
.logitem.is-done { border-left-color: var(--veld); opacity: .62; }
.logitem.is-done .ltext, .logitem.is-done .lfield { text-decoration: line-through; }

.ltick { position: relative; width: 26px; height: 26px; cursor: pointer; }
.ltick input { position: absolute; opacity: 0; width: 26px; height: 26px; margin: 0; cursor: pointer; }
.ltick span {
  position: absolute;
  inset: 0;
  border: 2px solid var(--dim);
  border-radius: 4px;
  pointer-events: none;
}
.ltick input:checked + span { background: var(--veld); border-color: var(--veld); }
.ltick input:checked + span::after {
  content: "";
  position: absolute;
  left: 7px; top: 2px;
  width: 6px; height: 12px;
  border: solid var(--ink);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
.ltick input:focus-visible + span { outline: 2px solid var(--veld); outline-offset: 2px; }

.lmeta { font-family: var(--mono); font-size: 11px; color: var(--dim); margin-bottom: 4px; }
.lwarn { color: var(--ochre); font-weight: 500; }
.lfield { font-size: 13px; color: var(--dust); margin-bottom: 2px; }
.lfield b { color: var(--bone); font-weight: 600; }
.ltext { font-size: 13.5px; line-height: 1.5; color: var(--dust); margin: 5px 0 0; white-space: pre-wrap; }
.latts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.latt {
  font-size: 12px;
  color: var(--water);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 4px 8px;
  text-decoration: none;
}
.latt:hover { border-color: var(--water); }

.lbin {
  background: none;
  border: none;
  color: var(--dim);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  align-self: start;
}
.lbin:hover { color: var(--rust); }

/* Unfinished requests carry a count on the button that opens the log. */
.logdot {
  display: inline-block;
  min-width: 16px;
  margin-left: 5px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--ochre);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 10px;
  vertical-align: 1px;
}

/* ---------------------------------------------------------------- voice */

.voicebox {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--water);
  border-radius: var(--r);
  padding: 12px 13px;
  margin-bottom: 16px;
}
.voicehead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.voicelang {
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--bone);
  font-family: var(--sans);
  font-size: 13px;
  padding: 7px 8px;
  min-height: 38px;
  max-width: 190px;
}
.voicerow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.vrec { display: inline-flex; align-items: center; gap: 8px; }
.vdot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--rust);
  flex: none;
}
/* Recording has to be unmistakable — it is a live microphone. */
.vrec.is-live { background: var(--rust); border-color: var(--rust); }
.vrec.is-live .vdot { background: var(--bone); animation: vpulse 1s ease-in-out infinite; }
@keyframes vpulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

.vtime {
  font-family: var(--mono);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  color: var(--dust);
  min-width: 46px;
}
.vplay { width: 100%; margin-top: 10px; height: 38px; }
.vmsg { margin-top: 9px; font-size: 12.5px; line-height: 1.5; color: var(--dim); }
.vmsg.is-bad { color: var(--ochre); }

/* A voice note in the log list plays where it sits. */
.lvoice { width: 100%; margin-top: 8px; height: 36px; }

/* ------------------------------------------------------------ voice notes */

.voicebox {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--water);
  border-radius: var(--r);
  padding: 12px 13px;
}

.voicerow { display: flex; gap: 8px; align-items: stretch; }
.voicerow .vrec { flex: 1; justify-content: center; }
.voicerow .vlang { width: 132px; flex: none; font-size: 13px; }

.vrec { display: inline-flex; align-items: center; gap: 8px; }

/* A dot that pulses only while the microphone is actually open, so there is
   never any doubt about whether it is listening. */
.vdot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--dust);
  flex: none;
}
.vrec.is-live { background: var(--rust); border-color: var(--rust); }
.vrec.is-live .vdot { background: #fff; animation: vpulse 1.1s ease-in-out infinite; }
@keyframes vpulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.75); } }

.vstatus {
  margin-top: 10px;
  padding: 9px 11px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  border-left: 3px solid var(--dim);
  background: var(--ink);
  font-size: 13px;
  line-height: 1.5;
  color: var(--dust);
}
.vstatus.is-live { border-left-color: var(--rust); }
.vstatus.is-good { border-left-color: var(--veld); }
.vstatus.is-warn { border-left-color: var(--ochre); }
.vstatus.is-bad  { border-left-color: var(--rust); color: var(--bone); }
.vstatus i { color: var(--bone); font-style: normal; }

.vplayback { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.vplayback audio { width: 100%; height: 38px; }

@media (max-width: 620px) {
  .voicerow { flex-direction: column; }
  .voicerow .vlang { width: 100%; }
}

/* ------------------------------------------------------------ bloodlines */

.blmaster {
  border: 1px solid var(--line);
  border-left: 3px solid var(--dim);
  border-radius: var(--r);
  background: var(--panel);
  padding: 11px 13px;
  margin-bottom: 16px;
  font-size: 13.5px;
  color: var(--dust);
  line-height: 1.5;
}
.blmaster.is-on { border-left-color: var(--veld); }
.blmaster.is-none { border-left-color: var(--ochre); }
.blmaster b { display: block; color: var(--bone); font-family: var(--cond);
              font-size: 15px; letter-spacing: .03em; margin-bottom: 2px; }
.blmaster span { font-family: var(--mono); font-size: 11.5px; color: var(--dim); }

.authok {
  background: rgba(127,163,82,.12);
  border: 1px solid var(--veld);
  border-radius: var(--r);
  color: var(--bone);
  font-size: 13.5px;
  line-height: 1.55;
  padding: 11px 13px;
  margin: 0 0 4px;
}

/* ------------------------------------------------------- hiding the map */
/* The map is the point on the Land and Layout steps and mostly in the way on
   the others, so it can be put aside. The panel then takes the full width,
   which is what makes the wider tables readable. */

.showmap {
  display: block;
  width: 100%;
  background: var(--panel);
  border: none;
  border-bottom: 1px solid var(--line);
  color: var(--dust);
  font-family: var(--cond);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 10px;
  cursor: pointer;
  min-height: 42px;
}
.showmap:hover { color: var(--bone); background: var(--raise); }

body.map-off .mapwrap { display: none; }
body.map-off .showmap { display: block; }

@media (min-width: 900px) {
  body.map-off .panels {
    flex: 1 1 100%;
    max-width: none;
  }
  /* Full width for the column, but the reading measure stays sane. A line of
     text running the whole width of a 27 inch screen is unreadable, and a
     text box a metre wide looks broken. The tables get the room instead. */
  body.map-off .panes {
    max-width: 1060px;
    margin: 0 auto;
    padding-left: 28px;
    padding-right: 28px;
  }
  body.map-off .kpis { grid-template-columns: repeat(4, 1fr); }
  body.map-off .note,
  body.map-off .stepintro,
  body.map-off .finding p { max-width: 78ch; }
  body.map-off .tablewrap { margin-left: 0; margin-right: 0; }
}

/* ------------------------------------------------------------ money modules */

.modpick {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-bottom: 18px;
}
@media (min-width: 620px) { .modpick { grid-template-columns: repeat(2, 1fr); } }

.mod {
  text-align: left;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: var(--r);
  padding: 11px 13px;
  cursor: pointer;
  color: var(--dust);
  min-height: 62px;
}
.mod:hover { border-color: var(--dim); }
.mod b {
  display: block;
  font-family: var(--cond);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--bone);
  margin-bottom: 2px;
}
.mod span { display: block; font-size: 12.5px; line-height: 1.45; color: var(--dim); }
.mod.is-on {
  border-color: var(--veld);
  border-left-color: var(--veld);
  background: var(--raise);
}
.mod.is-on b { color: var(--veld-lt, #a9c97a); }

.modbox[hidden] { display: none; }

/* --------------------------------------------------- modules you build */

.modedit {
  font-style: normal;
  color: var(--water);
  border-bottom: 1px dotted var(--water);
  margin-left: 6px;
  cursor: pointer;
}
.modedit:hover { color: var(--bone); border-bottom-color: var(--bone); }

.mdrule {
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: var(--r);
  padding: 11px 13px;
  margin-bottom: 10px;
  background: var(--panel);
}
.mdrule-h {
  font-family: var(--cond);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--bone);
  margin-bottom: 9px;
}
.mdrule .f { margin-bottom: 0; }
.mdrule .f[hidden] { display: none; }
.mdrule .f-label { font-size: 11px; }
.mdrule .f-input { min-height: 40px; font-size: 14px; }

/* -------------------------------------------------- which steps to show */

.steppick {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
@media (min-width: 620px) { .steppick { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.stepbox {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 11px 12px;
  cursor: pointer;
  min-height: 46px;
}
.stepbox:hover { border-color: var(--dim); }
.stepbox input { width: 18px; height: 18px; accent-color: var(--veld); flex: none; margin: 0; }
.stepbox span {
  font-family: var(--cond);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--bone);
}
.stepbox:has(input:checked) { border-color: var(--veld); background: var(--raise); }

.tbl tr.is-total th, .tbl tr.is-total td {
  border-top: 1px solid var(--dim);
  font-weight: 600;
  color: var(--bone);
}

/* ----------------------------------------------------------- grazing ratio */

.ratioadd { margin-bottom: 16px; }
.ratioadd-row { display: flex; align-items: center; gap: 8px; }
.ratioadd-pre { font-family: var(--mono); font-size: 15px; color: var(--dust); flex: none; }
.ratioadd-row .f-input { width: 96px; flex: none; }
.ratdel {
  background: none;
  border: none;
  color: var(--dim);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  vertical-align: 1px;
  /* A cross in a table row is the smallest thing on the page, so it gets a
     reachable target without pushing the row taller. */
  min-width: 40px;
  min-height: 40px;
  margin: -12px -8px;
  padding: 12px 8px;
}
.ratdel:hover { color: var(--rust); }

.ratiopick { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; margin-bottom: 14px; }
.ratbtn {
  text-align: left;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: var(--r);
  padding: 11px 13px;
  cursor: pointer;
  color: var(--dust);
  min-height: 58px;
}
.ratbtn:hover { border-color: var(--dim); }
.ratbtn b {
  display: block;
  font-family: var(--mono);
  font-size: 17px;
  color: var(--bone);
  margin-bottom: 2px;
}
.ratbtn span { display: block; font-size: 12.5px; color: var(--dim); }
.ratbtn.is-on { border-color: var(--veld); border-left-color: var(--veld); background: var(--raise); }