/* ==========================================================================
   Kairospace — Agriculture ROI Calculator
   An instrument console on top of the deep-lab palette: hairline rules,
   mono readouts, phosphor-teal accents, no card-inside-a-card padding.
   Tokens come from /deep-lab.css.
   ========================================================================== */

#agroi {
  --gutter: clamp(1.1rem, 2.4vw, 2rem);
  --rail-w: 340px;
  --hair: rgba(120, 180, 190, .16);
  --hair-2: rgba(120, 180, 190, .28);
  --field-bg: rgba(255, 255, 255, .035);
  --hdr: 77px;
  --stack-top: 130px;
  --rail-h: 0px;
  --warn: #ffb27a;
  --bad: #ff8a7a;
  --good: #3fd6c0;
}

/* ---------- masthead ----------------------------------------------------- */

.agroi-top {
  padding: clamp(4.5rem, 9vw, 7rem) 0 2.2rem;
  border-bottom: 1px solid var(--hair);
  position: relative;
  overflow: hidden;
}

.agroi-top::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(63, 214, 192, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(63, 214, 192, .05) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(70% 100% at 70% 0%, #000, transparent 72%);
  -webkit-mask-image: radial-gradient(70% 100% at 70% 0%, #000, transparent 72%);
  pointer-events: none;
}

.agroi-top .wrap {
  position: relative;
  z-index: 1;
}

.agroi-top h1 {
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  font-weight: 200;
  margin: .5rem 0 .9rem;
  max-width: 20ch;
}

.agroi-lede {
  color: var(--muted);
  max-width: 56ch;
  font-size: 1.08rem;
  line-height: 1.7;
}

.agroi-badges {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1.6rem;
}

.agroi-badges span {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--hair);
  border-radius: 999px;
  padding: .38rem .8rem;
}

.agroi-badges span i {
  color: var(--teal-bright);
  margin-right: .35rem;
}

/* ---------- section nav -------------------------------------------------- */

.secnav {
  position: sticky;
  top: var(--hdr);
  z-index: 40;
  background: rgba(4, 20, 29, .86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hair);
}

.secnav ul {
  display: flex;
  gap: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 auto;
  width: 90%;
  max-width: 1240px;
}

.secnav ul::-webkit-scrollbar {
  display: none;
}

.secnav a {
  display: block;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--muted-2);
  padding: .95rem 1.1rem;
  border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
}

.secnav a:hover {
  color: var(--ink);
}

.secnav a.is-on {
  color: var(--teal-bright);
  border-bottom-color: var(--teal-bright);
}

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

.agroi-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--rail-w);
  gap: clamp(1.5rem, 3.5vw, 3.2rem);
  align-items: start;
  padding: 2.8rem 0 5rem;
}

.agroi-main {
  min-width: 0;
}

/* ---------- panels ------------------------------------------------------- */

.panel {
  border-top: 1px solid var(--hair-2);
  padding: 2.6rem 0 0;
  margin-bottom: 2.6rem;
  scroll-margin-top: calc(var(--stack-top) + var(--rail-h) + 16px);
}

.panel:first-child {
  border-top: 0;
  padding-top: 0;
}

.panel-head {
  display: flex;
  align-items: baseline;
  gap: .9rem;
  margin-bottom: .55rem;
}

.panel-num {
  font-family: var(--font-mono);
  font-size: .74rem;
  color: var(--teal-bright);
  letter-spacing: .14em;
}

.panel h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 300;
  margin: 0;
}

.panel-sub {
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.65;
  max-width: 68ch;
  margin-bottom: 1.7rem;
}

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

.fieldgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: var(--hair);
  border: 1px solid var(--hair);
  border-radius: 12px;
  overflow: hidden;
}

.fieldgrid+.fieldgrid {
  margin-top: 1.1rem;
}

.field {
  background: #061c27;
  padding: .85rem 1rem .9rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  transition: background .18s;
}

.field:focus-within {
  background: #08242f;
}

.field label {
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted-2);
  display: flex;
  align-items: center;
  gap: .35rem;
}

.field .hint {
  color: var(--muted-2);
  font-size: .72rem;
  line-height: 1.45;
}

.inp {
  display: flex;
  align-items: baseline;
  gap: .3rem;
}

.inp .pre,
.inp .post {
  font-family: var(--font-mono);
  font-size: .82rem;
  color: var(--muted);
  flex: none;
}

.field input,
.field select {
  width: 100%;
  min-width: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid transparent;
  color: var(--ink-bright);
  font-family: var(--font-mono);
  font-size: 1.12rem;
  font-weight: 400;
  padding: 0 0 2px;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

.field select {
  cursor: pointer;
}

.field select option {
  background: #06212e;
  color: var(--ink);
}

.field input:focus,
.field select:focus {
  border-bottom-color: var(--teal-bright);
}

.field input::-webkit-outer-spin-button,
.field input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.field input[type=number] {
  -moz-appearance: textfield;
}

.field-wide {
  grid-column: 1 / -1;
}

/* ---------- readouts ----------------------------------------------------- */

.readout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--hair);
  border: 1px solid rgba(63, 214, 192, .22);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 1.2rem;
}

.readout>div {
  background: rgba(63, 214, 192, .05);
  padding: .95rem 1.1rem;
}

.readout dt {
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .3rem;
}

.readout dd {
  font-family: var(--font-mono);
  font-size: 1.02rem;
  color: var(--ink-bright);
  margin: 0;
  line-height: 1.3;
}

.readout dd.hi {
  color: var(--teal-bright);
}

/* ---------- notices ------------------------------------------------------ */

.notice {
  display: flex;
  gap: .65rem;
  align-items: flex-start;
  font-size: .86rem;
  line-height: 1.6;
  color: var(--muted);
  border-left: 2px solid var(--hair-2);
  padding: .1rem 0 .1rem .85rem;
  margin: 1.1rem 0;
}

.notice i {
  color: var(--teal-bright);
  margin-top: .18rem;
}

.notice.warn {
  border-left-color: var(--warn);
}

.notice.warn i {
  color: var(--warn);
}

.notice strong {
  color: var(--ink);
  font-weight: 600;
}

.disclaimer {
  border: 1px dashed var(--hair-2);
  border-radius: 10px;
  padding: .95rem 1.1rem;
  margin-top: 1.2rem;
  font-size: .84rem;
  line-height: 1.65;
  color: var(--muted);
}

.disclaimer strong {
  color: var(--warn);
  font-weight: 600;
  display: block;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: .4rem;
}

/* ---- disclaimer panel -----------------------------------------------------
   Deliberately NOT shrunk into fine print. A disclaimer that a reader has to
   squint at is one they can fairly say they never saw, which defeats the whole
   purpose of publishing it. Same body size as the panel prose, with the clause
   headings picked out so the block can be skimmed. */
.legal-lede {
  font-size: .9rem;
  line-height: 1.7;
  color: var(--muted);
  margin-bottom: 1.1rem;
}

.legal-clause {
  font-size: .86rem;
  line-height: 1.75;
  color: var(--muted);
  margin-bottom: .85rem;
  padding-left: .9rem;
  border-left: 1px solid var(--hair-2);
}

.legal-clause strong {
  color: var(--ink-bright);
  font-weight: 500;
}

.legal-clause a {
  color: var(--teal-bright);
}

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

.ledger {
  margin-top: 1.4rem;
  border: 1px solid var(--hair);
  border-radius: 12px;
  overflow: hidden;
}

.ledger-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .72rem 1.1rem;
  font-size: .92rem;
  border-bottom: 1px solid var(--hair);
  color: var(--muted);
}

.ledger-row:last-child {
  border-bottom: 0;
}

.ledger-row span:last-child {
  font-family: var(--font-mono);
  color: var(--ink);
}

.ledger-row.tot {
  background: rgba(63, 214, 192, .07);
  color: var(--ink-bright);
  font-weight: 500;
}

.ledger-row.tot span:last-child {
  color: var(--teal-bright);
  font-size: 1.05rem;
}

.ledger-cap {
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted-2);
  padding: .7rem 1.1rem .1rem;
}

/* ---------- pay mode ----------------------------------------------------- */

.segbar {
  display: inline-flex;
  border: 1px solid var(--hair-2);
  border-radius: 999px;
  padding: 3px;
  gap: 3px;
  margin-bottom: 1.2rem;
}

.segbar button {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: transparent;
  border: 0;
  color: var(--muted);
  padding: .5rem 1.05rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s, color .2s;
}

.segbar button:hover {
  color: var(--ink);
}

.segbar button.is-on {
  background: var(--grad);
  color: #04141d;
  font-weight: 700;
}

.fin-out {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1.4rem;
  margin-top: 1.3rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--hair);
}

.fin-out div span {
  display: block;
  font-family: var(--font-mono);
  font-size: 1.3rem;
  color: var(--ink-bright);
}

.fin-out div em {
  font-style: normal;
  font-size: .74rem;
  color: var(--muted-2);
  font-family: var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.fin-spread.good {
  color: var(--good) !important;
}

.fin-spread.bad {
  color: var(--bad) !important;
}

/* ---------- levers ------------------------------------------------------- */

.scenario-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .8rem;
  margin-bottom: 1.6rem;
}

.scenario-bar>span {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.lever {
  border: 1px solid var(--hair);
  border-radius: 12px;
  padding: 1rem 1.15rem 1.15rem;
  margin-bottom: .75rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, .022), rgba(255, 255, 255, 0));
  transition: border-color .2s, opacity .2s;
}

.lever:hover {
  border-color: var(--hair-2);
}

.lever.is-off {
  opacity: .42;
}

.lever.is-off .lever-body {
  filter: saturate(.2);
}

.lever-head {
  display: flex;
  align-items: center;
  gap: .8rem;
}

.lever-id {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  flex: 1;
  min-width: 0;
}

.lever-id>i {
  color: var(--teal-bright);
  width: 1.1rem;
  text-align: center;
  font-size: .95rem;
}

.lever-name {
  color: var(--ink-bright);
  font-size: 1rem;
}

.lever-money {
  font-family: var(--font-mono);
  color: var(--teal-bright);
  font-size: 1.05rem;
  white-space: nowrap;
}

.lever-money em {
  font-style: normal;
  color: var(--muted-2);
  font-size: .7rem;
}

.tier {
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: .18rem .5rem;
  border-radius: 4px;
  border: 1px solid;
  white-space: nowrap;
}

.tier-both {
  color: var(--teal-bright);
  border-color: rgba(63, 214, 192, .35);
  background: rgba(63, 214, 192, .08);
}

.tier-research {
  color: #8fb8c6;
  border-color: rgba(143, 184, 198, .3);
  background: rgba(143, 184, 198, .07);
}

/* The provenance chips are nowrap so they read as one token, which is right
   until the label is long and the viewport is narrow — "mechanism established,
   not trialled" is the longest of them and pushed out of the lever header on a
   small phone. Let every chip wrap below that width rather than shortening a
   label that has to stay precise. */
@media (max-width: 430px) {
  .tier {
    white-space: normal;
    line-height: 1.35;
  }
}

/* Aquaculture only. Sits between "published research" and "no figure at all":
   the physiology is textbook, but no nanobubble trial has quantified it. */
.tier-mechanism {
  color: #b6a7d6;
  border-color: rgba(182, 167, 214, .32);
  background: rgba(182, 167, 214, .07);
}

.tier-none {
  color: var(--warn);
  border-color: rgba(255, 178, 122, .35);
  background: rgba(255, 178, 122, .07);
}

.lever-body {
  margin-top: .85rem;
}

.slider-row {
  display: flex;
  align-items: center;
  gap: .9rem;
}

.slider-row output {
  font-family: var(--font-mono);
  font-size: .95rem;
  color: var(--ink-bright);
  min-width: 3.4rem;
  text-align: right;
}

/* Range: the teal fill is the setting, the paler block behind it is the
   published evidence range — so you can see when you leave the literature. */
.lever input[type=range] {
  --fill: 0%;
  --elo: 0%;
  --ehi: 0%;
  flex: 1;
  min-width: 0;
  -webkit-appearance: none;
  appearance: none;
  height: 22px;
  background: transparent;
  cursor: pointer;
}

.lever input[type=range]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background:
    linear-gradient(90deg, transparent var(--elo), rgba(143, 184, 198, .22) var(--elo), rgba(143, 184, 198, .22) var(--ehi), transparent var(--ehi)),
    linear-gradient(90deg, var(--teal) var(--fill), rgba(120, 180, 190, .14) var(--fill));
}

.lever input[type=range]::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background:
    linear-gradient(90deg, transparent var(--elo), rgba(143, 184, 198, .22) var(--elo), rgba(143, 184, 198, .22) var(--ehi), transparent var(--ehi)),
    linear-gradient(90deg, var(--teal) var(--fill), rgba(120, 180, 190, .14) var(--fill));
}

.lever input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -5px;
  border-radius: 50%;
  background: #04141d;
  border: 2px solid var(--teal-bright);
  box-shadow: 0 0 0 3px rgba(63, 214, 192, .14);
  transition: box-shadow .15s;
}

.lever input[type=range]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #04141d;
  border: 2px solid var(--teal-bright);
  box-shadow: 0 0 0 3px rgba(63, 214, 192, .14);
}

.lever input[type=range]:active::-webkit-slider-thumb {
  box-shadow: 0 0 0 6px rgba(63, 214, 192, .2);
}

.range-scale {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: .64rem;
  color: var(--muted-2);
  margin: .2rem 0 .75rem;
  padding-right: 4.3rem;
}

.evidence-band {
  color: #8fb8c6;
}

.lever-blurb {
  font-size: .87rem;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 .5rem;
}

.lever-note,
.lever-caution {
  font-size: .8rem;
  line-height: 1.55;
  margin: 0 0 .5rem;
  padding-left: 1.3rem;
  text-indent: -1.3rem;
}

.lever-note {
  color: var(--muted-2);
}

.lever-note i {
  color: var(--muted-2);
  margin-right: .4rem;
}

.lever-caution {
  color: var(--warn);
}

.lever-caution i {
  margin-right: .4rem;
}

.lever-cite {
  font-family: var(--font-mono);
  font-size: .68rem;
  line-height: 1.6;
  color: var(--muted-2);
  margin: .6rem 0 0;
  padding-top: .6rem;
  border-top: 1px solid var(--hair);
}

/* switch */
.switch {
  position: relative;
  flex: none;
  width: 38px;
  height: 21px;
  cursor: pointer;
}

.switch input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
  z-index: 1;
}

.switch span {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(120, 180, 190, .16);
  border: 1px solid var(--hair-2);
  transition: background .2s, border-color .2s;
}

.switch span::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform .2s, background .2s;
}

.switch input:checked+span {
  background: rgba(63, 214, 192, .28);
  border-color: var(--teal);
}

.switch input:checked+span::after {
  transform: translateX(17px);
  background: var(--teal-bright);
}

.switch input:focus-visible+span {
  box-shadow: 0 0 0 3px rgba(63, 214, 192, .25);
}

/* ---------- benefit stack ------------------------------------------------ */

.stack-row {
  display: grid;
  grid-template-columns: minmax(120px, 1.1fr) minmax(60px, 2.2fr) auto;
  align-items: center;
  gap: .9rem;
  padding: .48rem 0;
  font-size: .88rem;
}

.stack-label {
  color: var(--muted);
}

.stack-bar {
  height: 7px;
  border-radius: 4px;
  background: rgba(120, 180, 190, .1);
  overflow: hidden;
}

.stack-bar span {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: var(--grad);
  transition: width .3s cubic-bezier(.2, .7, .3, 1);
}

.stack-val {
  font-family: var(--font-mono);
  color: var(--ink-bright);
  text-align: right;
  white-space: nowrap;
}

.stack-sum {
  margin-top: 1rem;
  padding-top: .9rem;
  border-top: 1px solid var(--hair);
  display: grid;
  gap: .45rem;
}

.stack-sum div {
  display: flex;
  justify-content: space-between;
  font-size: .9rem;
  color: var(--muted);
}

.stack-sum div span:last-child {
  font-family: var(--font-mono);
  color: var(--ink);
}

.stack-sum div.net {
  color: var(--ink-bright);
  font-size: 1.02rem;
  padding-top: .45rem;
  border-top: 1px solid var(--hair);
}

.stack-sum div.net span:last-child {
  color: var(--teal-bright);
  font-size: 1.2rem;
}

.empty {
  color: var(--muted-2);
  font-size: .88rem;
  font-style: italic;
}

/* ---------- charts ------------------------------------------------------- */

.chart-frame {
  border: 1px solid var(--hair);
  border-radius: 12px;
  padding: 1.2rem 1.1rem .6rem;
  margin-bottom: 1.5rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, .02), transparent);
}

.chart-frame h3 {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 400;
  margin-bottom: .3rem;
}

.chart-frame p.cap {
  font-size: .82rem;
  color: var(--muted-2);
  line-height: 1.55;
  margin-bottom: 1rem;
  max-width: 70ch;
}

.chart-frame svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .07em;
  color: var(--muted-2);
  text-transform: uppercase;
  padding: .7rem 0 .5rem;
}

.chart-legend i {
  display: inline-block;
  width: 14px;
  height: 3px;
  border-radius: 2px;
  vertical-align: middle;
  margin-right: .4rem;
}

.sw-line {
  background: var(--teal-bright);
}

.sw-band {
  background: rgba(63, 214, 192, .3);
  height: 9px !important;
  border: 1px solid rgba(63, 214, 192, .4);
}

.sw-zero {
  background: repeating-linear-gradient(90deg, #dce8ec 0 4px, transparent 4px 8px);
}

/* tornado */
.tor-row {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) minmax(120px, 2.4fr) auto;
  align-items: center;
  gap: .9rem;
  padding: .42rem 0;
  font-size: .86rem;
}

.tor-label {
  color: var(--muted);
}

.tor-label em {
  font-style: normal;
  color: var(--muted-2);
  font-family: var(--font-mono);
  font-size: .72rem;
}

.tor-track {
  position: relative;
  display: flex;
  height: 15px;
  align-items: center;
}

.tor-axis {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--hair-2);
}

.tor-neg,
.tor-pos {
  position: absolute;
  height: 11px;
  border-radius: 2px;
}

.tor-neg {
  right: 50%;
  background: linear-gradient(90deg, rgba(255, 138, 122, .35), rgba(255, 138, 122, .75));
}

.tor-pos {
  left: 50%;
  background: linear-gradient(90deg, rgba(63, 214, 192, .75), rgba(63, 214, 192, .35));
}

.tor-swing {
  font-family: var(--font-mono);
  color: var(--ink);
  text-align: right;
  white-space: nowrap;
  font-size: .82rem;
}

/* payback grid */
.grid-scroll {
  overflow-x: auto;
}

table.grid {
  width: 100%;
  border-collapse: separate;
  border-spacing: 2px;
  font-family: var(--font-mono);
  font-size: .82rem;
  min-width: 460px;
}

table.grid th {
  font-weight: 400;
  color: var(--muted);
  font-size: .68rem;
  letter-spacing: .06em;
  padding: .4rem .3rem;
  text-align: center;
}

table.grid thead th em {
  display: block;
  font-style: normal;
  color: var(--muted-2);
  font-size: .6rem;
  margin-top: .15rem;
}

table.grid th.corner {
  text-align: left;
  color: var(--muted-2);
  white-space: nowrap;
}

table.grid tbody th {
  text-align: right;
  color: var(--ink);
  padding-right: .6rem;
}

table.grid td {
  text-align: center;
  padding: .5rem .3rem;
  border-radius: 4px;
  color: #04141d;
  font-weight: 700;
}

.c-1 {
  background: #3fd6c0;
}

.c-2 {
  background: #2ba9a4;
}

.c-3 {
  background: #1d7d8c;
  color: #dff5f2;
}

.c-4 {
  background: #14505f;
  color: #b8d8dd;
}

.c-5 {
  background: rgba(255, 138, 122, .2);
  color: #ff8a7a;
}

/* value-mode grid: the weakest band is still profitable, so it stays in the
   teal ramp — red is reserved for cells that actually lose money. */
.c-v5 {
  background: #0d3a47;
  color: #93bcc5;
}

.c-neg {
  background: rgba(255, 138, 122, .22);
  color: #ff8a7a;
}

.c-none {
  background: rgba(120, 180, 190, .08);
  color: var(--muted-2);
  font-weight: 400;
}

.grid-key {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  font-family: var(--font-mono);
  font-size: .64rem;
  color: var(--muted-2);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-top: .85rem;
}

/* The aquaculture grid swaps between a payback key and a value key at runtime,
   and an author `display:flex` outranks the UA rule behind the hidden attribute. */
.grid-key[hidden] {
  display: none;
}

.grid-key b {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 3px;
  vertical-align: -1px;
  margin-right: .35rem;
}

/* break-even callout */
.breakeven {
  border: 1px solid rgba(63, 214, 192, .3);
  background: rgba(63, 214, 192, .06);
  border-radius: 12px;
  padding: 1.3rem 1.4rem;
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--ink);
}

.breakeven strong {
  color: var(--teal-bright);
  font-family: var(--font-mono);
  font-weight: 700;
}

.breakeven-title {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .5rem;
}

/* ---------- result rail -------------------------------------------------- */

.rail {
  position: sticky;
  top: var(--stack-top);
  max-height: calc(100vh - var(--stack-top) - 20px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(120, 180, 190, .3) transparent;
  border: 1px solid rgba(63, 214, 192, .24);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(63, 214, 192, .07), rgba(4, 20, 29, .5));
  padding: 1.25rem 1.3rem 1.4rem;
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .8);
}

.rail.is-negative {
  border-color: rgba(255, 178, 122, .3);
  background: linear-gradient(180deg, rgba(255, 178, 122, .06), rgba(4, 20, 29, .5));
}

.rail-title {
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1rem;
}

.rail-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--hair);
}

.pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal-bright);
  box-shadow: 0 0 0 0 rgba(63, 214, 192, .55);
  animation: pulse 2.6s infinite;
  flex: none;
}

@keyframes pulse {
  70% {
    box-shadow: 0 0 0 8px rgba(63, 214, 192, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(63, 214, 192, 0);
  }
}

.kpi {
  padding: .52rem 0;
  border-bottom: 1px solid var(--hair);
}

.kpi:last-of-type {
  border-bottom: 0;
}

.kpi-k {
  font-family: var(--font-mono);
  font-size: .63rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.kpi-v {
  font-family: var(--font-mono);
  font-size: clamp(1.45rem, 2.4vw, 1.8rem);
  color: var(--ink-bright);
  line-height: 1.15;
  margin: .12rem 0 .1rem;
  letter-spacing: -.02em;
}

.kpi-hero .kpi-v {
  color: var(--teal-bright);
  font-size: clamp(1.8rem, 3.1vw, 2.25rem);
}

.rail.is-negative .kpi-hero .kpi-v {
  color: var(--warn);
}

.kpi-s {
  font-size: .74rem;
  color: var(--muted-2);
  line-height: 1.45;
}

.rail-verdict {
  font-size: .84rem;
  line-height: 1.55;
  color: var(--ink);
  background: rgba(255, 255, 255, .035);
  border-radius: 9px;
  padding: .6rem .8rem;
  margin: .75rem 0;
  display: flex;
  gap: .5rem;
}

.rail-verdict i {
  color: var(--teal-bright);
  margin-top: .2rem;
  flex: none;
}

.rail.is-negative .rail-verdict i {
  color: var(--warn);
}

.rail-capex {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: .78rem;
  color: var(--muted-2);
  font-family: var(--font-mono);
  padding-top: .8rem;
  border-top: 1px solid var(--hair);
}

.rail-capex b {
  color: var(--ink);
  font-weight: 400;
  font-size: .95rem;
}

.rail-scen {
  display: flex;
  gap: 4px;
  margin-top: 1rem;
}

.rail-scen button {
  flex: 1;
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--hair-2);
  color: var(--muted);
  padding: .45rem .2rem;
  border-radius: 6px;
  cursor: pointer;
  transition: .18s;
}

.rail-scen button:hover {
  color: var(--ink);
  border-color: var(--teal);
}

.rail-scen button.is-on {
  background: rgba(63, 214, 192, .16);
  border-color: var(--teal);
  color: var(--teal-bright);
}

.rail-cta {
  display: block;
  width: 100%;
  margin-top: 1rem;
  text-align: center;
}

.rail-fine {
  font-size: .68rem;
  color: var(--muted-2);
  line-height: 1.5;
  margin-top: .8rem;
  text-align: center;
}

.rail::-webkit-scrollbar {
  width: 5px;
}

.rail::-webkit-scrollbar-thumb {
  background: rgba(120, 180, 190, .28);
  border-radius: 3px;
}

.rail::-webkit-scrollbar-track {
  background: transparent;
}

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

.gate {
  border: 1px solid var(--hair-2);
  border-radius: 14px;
  padding: 1.6rem 1.6rem 1.7rem;
  background: linear-gradient(180deg, rgba(63, 214, 192, .05), transparent);
}

.gate h3 {
  font-size: 1.25rem;
  font-weight: 300;
  margin-bottom: .4rem;
}

.gate p {
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.65;
  margin-bottom: 1.2rem;
  max-width: 60ch;
}

.gate form {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  align-items: flex-end;
}

.gate .field {
  background: var(--field-bg);
  border: 1px solid var(--hair);
  border-radius: 9px;
  flex: 1 1 200px;
}

.gate .btn {
  flex: none;
}

.gate small {
  display: block;
  color: var(--muted-2);
  font-size: .72rem;
  margin-top: .9rem;
  line-height: 1.5;
}

.report {
  border: 1px solid var(--hair-2);
  border-radius: 14px;
  padding: clamp(1.3rem, 3vw, 2.4rem);
  background: rgba(255, 255, 255, .022);
}

.rep-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  padding-bottom: 1.1rem;
  border-bottom: 2px solid var(--teal);
  margin-bottom: 1.5rem;
}

.rep-logo {
  height: 26px;
  margin-bottom: .7rem;
}

.rep-head h3 {
  font-size: 1.35rem;
  font-weight: 300;
  margin: 0;
}

.rep-meta {
  font-family: var(--font-mono);
  font-size: .74rem;
  color: var(--muted);
  text-align: right;
  line-height: 1.7;
  flex: none;
}

.rep-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(115px, 1fr));
  gap: 1px;
  background: var(--hair);
  border: 1px solid var(--hair);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 1.8rem;
}

.rep-kpis div {
  background: rgba(63, 214, 192, .05);
  padding: .9rem 1rem;
}

.rep-kpis span {
  display: block;
  font-family: var(--font-mono);
  font-size: 1.35rem;
  color: var(--teal-bright);
  line-height: 1.2;
}

.rep-kpis em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

.report h4 {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--teal-bright);
  margin: 1.9rem 0 .7rem;
  font-weight: 400;
}

table.rep-t {
  width: 100%;
  border-collapse: collapse;
  font-size: .87rem;
}

table.rep-t th {
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted-2);
  font-weight: 400;
  text-align: left;
  padding: .45rem .6rem;
  border-bottom: 1px solid var(--hair-2);
}

table.rep-t td {
  padding: .5rem .6rem;
  border-bottom: 1px solid var(--hair);
  color: var(--muted);
}

table.rep-t td.r,
table.rep-t th.r {
  text-align: right;
  font-family: var(--font-mono);
  color: var(--ink);
}

table.rep-t td.c,
table.rep-t th.c {
  text-align: center;
  font-family: var(--font-mono);
}

table.rep-t td.src {
  font-family: var(--font-mono);
  font-size: .66rem;
  color: var(--muted-2);
  text-transform: uppercase;
  letter-spacing: .05em;
}

table.rep-t tr.sub td {
  color: var(--ink);
  border-top: 1px solid var(--hair-2);
}

table.rep-t tr.tot td {
  color: var(--ink-bright);
  font-weight: 600;
  border-top: 1px solid var(--teal);
  border-bottom: 0;
}

table.rep-t tr.tot td.r {
  color: var(--teal-bright);
  font-size: 1.02rem;
}

table.rep-t td.pos {
  color: var(--teal-bright);
}

table.rep-t td.neg {
  color: var(--bad);
}

.rep-disc,
.rep-note {
  font-size: .78rem;
  line-height: 1.65;
  color: var(--muted-2);
  margin-top: .9rem;
}

.rep-disc strong {
  color: var(--warn);
}

/* Clause headings inside the report's disclaimer block. They have to stay
   picked out from the body text on paper as well as on screen — the printed
   PDF is the copy that ends up attached to a loan file. */
.report .rep-note strong {
  color: var(--ink-bright);
  font-weight: 500;
}

.report-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: 1.6rem;
}

/* ---------- responsive --------------------------------------------------- */

@media (max-width: 1080px) {
  .agroi-shell {
    grid-template-columns: 1fr;
  }

  /* Collapse the rail into a compact readout strip pinned under the section
     nav. It has to be fully opaque — it sits over scrolling content. */
  .rail {
    position: sticky;
    top: var(--stack-top);
    max-height: none;
    overflow: visible;
    order: -1;
    z-index: 30;
    margin-bottom: 1.4rem;
    padding: .7rem .9rem .8rem;
    border-radius: 12px;
    background: #061c27;
    box-shadow: 0 12px 28px -18px rgba(0, 0, 0, .9);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: .8rem;
  }

  .rail.is-negative {
    background: #221a12;
  }

  .rail-title,
  .rail-verdict,
  .rail-capex,
  .rail-cta,
  .rail-fine,
  .rail .kpi-s {
    display: none;
  }

  .rail .kpi {
    border-bottom: 0;
    padding: .15rem 0;
    min-width: 0;
  }

  .rail .kpi-v,
  .rail .kpi-hero .kpi-v {
    font-size: 1.16rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .rail .kpi-k {
    font-size: .55rem;
    letter-spacing: .08em;
  }

  .rail-scen {
    grid-column: 1 / -1;
    margin-top: .6rem;
  }
}

@media (max-width: 640px) {
  .rail {
    grid-template-columns: repeat(2, 1fr);
    padding: .65rem .8rem .75rem;
  }

  .rail .kpi-v,
  .rail .kpi-hero .kpi-v {
    font-size: 1.05rem;
  }

  .rep-head {
    flex-direction: column;
  }

  .rep-meta {
    text-align: left;
  }

  .range-scale {
    padding-right: 0;
  }

  .lever-money {
    font-size: .95rem;
  }

  .agroi-top {
    padding-top: 3.2rem;
  }
}

@media (prefers-reduced-motion: reduce) {

  .pulse,
  .stack-bar span {
    animation: none;
    transition: none;
  }
}

/* ---------- print -------------------------------------------------------- */

@media print {

  #header-container,
  #footer-container,
  .secnav,
  .agroi-top,
  .agroi-main>.panel:not(#p-report),
  .rail,
  .gate,
  .report-actions {
    display: none !important;
  }

  html,
  body {
    background: #fff !important;
    color: #111 !important;
  }

  .agroi-shell {
    display: block;
    padding: 0;
  }

  #p-report {
    border: 0;
    padding: 0;
  }

  #p-report>.panel-head,
  #p-report>.panel-sub {
    display: none;
  }

  .report {
    border: 0;
    background: #fff;
    padding: 0;
    color: #111;
  }

  .report h4 {
    color: #14727A;
  }

  .rep-head {
    border-bottom-color: #14727A;
  }

  .rep-head h3,
  .rep-meta {
    color: #111;
  }

  .rep-kpis {
    background: #ccc;
    border-color: #ccc;
  }

  .rep-kpis div {
    background: #f2f9f8;
  }

  .rep-kpis span {
    color: #14727A;
  }

  .rep-kpis em {
    color: #555;
  }

  table.rep-t td,
  table.rep-t th {
    color: #333;
    border-color: #ddd;
  }

  table.rep-t td.r {
    color: #111;
  }

  table.rep-t tr.tot td {
    color: #111;
    border-top-color: #14727A;
  }

  table.rep-t tr.tot td.r {
    color: #14727A;
  }

  .rep-disc,
  .rep-note {
    color: #444;
  }

  .report .rep-note strong {
    color: #111;
  }

  /* The disclaimer must never be orphaned from its heading across a page break. */
  .report h4,
  .rep-disc {
    break-after: avoid;
    page-break-after: avoid;
  }

  .rep-note {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .rep-disc strong {
    color: #8a4b00;
  }

  table.rep-t {
    page-break-inside: auto;
  }

  table.rep-t tr {
    page-break-inside: avoid;
  }
}