/* ══════════════════════════════════════════════════════════════
   Explainers: the four ways of showing an idea instead of only
   describing it, chosen by James from the review page (B, C, F, H).

     .hh-scale     figures drawn to scale on one ruler      The Science
     .hh-journey   a step list with a line that fills        How It Works
     .hh-vr        a field that changes step by step         Variable Rate Maps
     [data-hh-count]  numbers that count up                  Sustainability

   Every piece is complete and readable with no script at all: the
   script only adds the movement. Behaviour is in explainers.js.
   Colours come from each page's own tokens (--green, --orange,
   --cream, --amber), with the brand values as a fallback.
   ══════════════════════════════════════════════════════════════ */

/* ── Figures drawn to scale ───────────────────────────────────── */
.hh-scale { margin: 4px 0 16px; }
.hh-scale-row { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 12px; align-items: center; }
.hh-scale-row + .hh-scale-row { margin-top: 14px; }
.hh-scale-label { font-size: 13.5px; font-weight: 700; color: var(--green, #115b27); line-height: 1.25; }
.hh-scale-label span { display: block; white-space: nowrap; font-size: 12px; font-weight: 600; color: #6b6b6b; font-variant-numeric: tabular-nums; }
.hh-track { position: relative; height: 24px; border-radius: 6px; background: var(--cream, #f5f1e8); }
.hh-range {
  position: absolute; top: 0; bottom: 0; border-radius: 6px;
  /* Both bars share one 0 to 300 L/ha ruler, so their lengths are honest. */
  left: calc(var(--from) / 300 * 100%);
  width: calc((var(--to) - var(--from)) / 300 * 100%);
  transform-origin: left center;
  transition: transform 1.1s cubic-bezier(.2, .8, .2, 1);
}
.hh-range.hh-rig { background: #8f8a7c; }
.hh-range.hh-drone { background: var(--orange, #f18a27); min-width: 6px; }
.hh-armed .hh-range { transform: scaleX(0); }
.hh-axis { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 12px; margin-top: 8px; }
.hh-ticks { position: relative; height: 16px; border-top: 1px solid #e4ddcd; font-size: 11px; color: #8a857a; font-variant-numeric: tabular-nums; }
.hh-ticks span { position: absolute; top: 3px; transform: translateX(-50%); white-space: nowrap; }
.hh-ticks span:first-child { transform: none; }
.hh-ticks span:last-child { transform: translateX(-100%); }

/* ── The journey ──────────────────────────────────────────────── */
.hh-journey-layout { display: grid; gap: 26px; }
.hh-journey-head h2 { margin: 0; }
@media (min-width: 1000px) {
  /* Title in a rail on the left, the steps on the right: the same
     shape as the other long pages, and the line has room to run. */
  .hh-journey-layout { grid-template-columns: 290px minmax(0, 1fr); column-gap: 80px; align-items: start; }
  .hh-journey-head { position: sticky; top: 104px; }
  .hh-journey-head h2 { text-align: left !important; }
  .hh-journey-head h2::after {
    content: ""; display: block; width: 44px; height: 3px;
    background: var(--orange, #f18a27); border-radius: 2px; margin-top: 18px;
  }
}
.hh-journey { position: relative; max-width: 780px; }
.hh-journey-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; position: relative; }
.hh-journey-list::before {
  content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 3px;
  border-radius: 3px; background: #e4ddcd;
}
.hh-journey-fill {
  position: absolute; left: 21px; top: 22px; width: 3px; height: 0; border-radius: 3px;
  background: var(--orange, #f18a27); z-index: 1; transition: height .15s linear;
}
.hh-journey-list li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 18px; align-items: start; }
.hh-dot {
  position: relative; z-index: 2; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 900; font-size: 18px;
  /* Without the script every step shows as reached, so nothing looks unfinished. */
  background: var(--green, #115b27); border: 2px solid var(--green, #115b27); color: #fff;
  transition: background .3s, border-color .3s, color .3s, transform .3s, box-shadow .3s;
}
.hh-journey.hh-live li:not(.is-on) .hh-dot { background: #fff; border-color: #e4ddcd; color: #9a958a; }
.hh-journey.hh-live li.is-now .hh-dot { transform: scale(1.08); box-shadow: 0 0 0 6px rgba(241, 138, 39, 0.22); }
.hh-step {
  background: #fff; border: 1px solid #e4ddcd; border-radius: 16px; padding: 18px 22px;
  transition: border-color .3s;
}
.hh-journey.hh-live li.is-now .hh-step { border-color: var(--orange, #f18a27); }
.hh-step h3 { margin: 0 0 6px; font-size: 18px; font-weight: 800; color: var(--green, #115b27); letter-spacing: -0.01em; }
.hh-step p { margin: 0; font-size: 15px; line-height: 1.65; color: #4a4a4a; }

/* ── Variable rate step-through ───────────────────────────────── */
.hh-vr { background: #fff; border: 1px solid rgba(17, 91, 39, .14); border-radius: 16px; overflow: hidden; margin-top: 24px; }
.hh-vr-tabs { display: none; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid #ece6d6; }
.hh-vr.hh-live .hh-vr-tabs { display: grid; }
.hh-vr-tabs button {
  padding: 13px 12px; border: 0; background: transparent; cursor: pointer; text-align: left;
  font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1.3; color: #6b6b6b; border-bottom: 3px solid transparent;
}
.hh-vr-tabs button b { display: block; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: #9a958a; margin-bottom: 2px; }
.hh-vr-tabs button[aria-selected="true"] { color: var(--green, #115b27); background: var(--cream, #f5f1e8); border-bottom-color: var(--orange, #f18a27); }
.hh-vr-tabs button:focus-visible, .hh-vr-nav button:focus-visible { outline: 2px solid var(--orange, #f18a27); outline-offset: -2px; }
.hh-vr-body { display: grid; gap: 20px; padding: 20px; align-items: center; }
.hh-vr-svg { display: none; width: 100%; height: auto; border-radius: 10px; }
.hh-vr.hh-live .hh-vr-svg { display: block; }
@media (min-width: 700px) { .hh-vr.hh-live .hh-vr-body { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
.hh-vr-panels { display: grid; gap: 18px; }
.hh-vr.hh-live .hh-vr-panels { gap: 0; }
.hh-vr.hh-live .hh-vr-panel:not(.is-active) { display: none; }
.hh-vr-panel h3 { margin: 0 0 6px; font-size: 19px; font-weight: 800; color: var(--green, #115b27); }
.hh-vr-panel p { margin: 0; font-size: 15px; line-height: 1.65; color: #4a4a4a; }
.hh-vr-panel .hh-num { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--orange, #f18a27); color: #fff; font-size: 12.5px; font-weight: 800; margin-right: 8px; vertical-align: 2px; }
.hh-legend { display: none; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; font-size: 12.5px; color: #6b6b6b; }
.hh-vr.hh-live .hh-legend { display: flex; }
.hh-legend span { display: inline-flex; align-items: center; gap: 6px; }
.hh-legend i { width: 12px; height: 12px; border-radius: 3px; display: block; }
.hh-vr-readout { display: none; margin-top: 12px; font-size: 13.5px; font-weight: 700; color: var(--green, #115b27); min-height: 1.5em; }
.hh-vr.hh-live .hh-vr-readout { display: block; }
.hh-vr-nav { display: none; gap: 8px; margin-top: 16px; }
.hh-vr.hh-live .hh-vr-nav { display: flex; }
.hh-vr-nav button {
  padding: 9px 16px; border-radius: 999px; border: 1.5px solid #e4ddcd; background: #fff;
  font-family: inherit; font-size: 13.5px; font-weight: 600; line-height: 1; color: var(--near-black, #1c1c1c); cursor: pointer;
}
.hh-vr-nav button.hh-primary { background: var(--green, #115b27); border-color: var(--green, #115b27); color: #fff; }
.hh-vr-nav button:disabled { opacity: .4; cursor: default; }
@keyframes hh-flight { to { stroke-dashoffset: -40; } }
.hh-flightline { stroke-dasharray: 6 6; animation: hh-flight 1.2s linear infinite; }
@media (max-width: 560px) {
  .hh-vr-tabs button { font-size: 11.5px; padding: 11px 7px; }
  .hh-vr-body { padding: 16px; }
}

/* ── Anyone who has asked their device for less motion ────────── */
@media (prefers-reduced-motion: reduce) {
  .hh-range, .hh-journey-fill, .hh-dot, .hh-step { transition: none !important; }
  .hh-flightline { animation: none !important; }
}