/* Flo Sustainability data graphics (role A4). PLAN §7, §8, §12.8.
   Tokens come from tokens.css (A3); every var() carries the §7.1 value as a fallback so a figure still reads
   if it is rendered before or without tokens.css. Light theme only. */

.viz {
  --vz-ink: var(--ink, #191712);
  --vz-ink-2: var(--ink-2, #373530);
  --vz-soft: var(--ink-soft, #52504A);
  --vz-faint: var(--ink-faint, #6E6C66);
  --vz-edge: var(--control-edge, #888681);
  --vz-rule: var(--rule, #D8D4CD);
  --vz-paper: var(--paper, #FEFDFA);
  --vz-paper-3: var(--paper-3, #EBE7E0);
  --vz-forest: var(--forest, #205034);
  --vz-forest-2: var(--viz-forest-2, #6C9173);
  --vz-tint: var(--forest-tint, #DDEDDF);
  --vz-soil: oklch(48% 0.035 60);
  --vz-soil-deep: oklch(33% 0.03 55);
  --vz-canopy: oklch(45% 0.08 152);
  --vz-ease: var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
  --vz-ease-ui: var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
  --vz-draw-ms: 900ms;
  margin: 0;
  min-width: 0;
}

/* ---- figure shell ------------------------------------------------------------------------- */
.viz__cap { max-width: 72ch; }
.viz__cap > .viz__title { max-width: 60ch; }
.viz__title {
  margin: 0 0 var(--s-2, 0.5rem);
  font: 700 1.0625rem/1.4 Lato, system-ui, sans-serif;
  color: var(--vz-ink);
  text-wrap: balance;
}
.viz__note {
  /* about 70 characters per line at the 14 px note size (ch is the width of "0", wider than the average) */
  max-width: 60ch;
  margin: 0 0 var(--s-3, 0.75rem);
  font: 400 0.875rem/1.55 Lato, system-ui, sans-serif;
  color: var(--vz-soft);
  text-wrap: pretty;
}
.viz__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2, 0.5rem) var(--s-4, 1rem);
  margin: 0;
  font: 500 0.75rem/1.3 Inter, system-ui, sans-serif;
  color: var(--vz-soft);
}
.viz__plot { margin-top: var(--s-5, 1.5rem); min-width: 0; }
.viz:not([data-viz="roadmap-axis"]) .viz__plot { container-type: inline-size; }

.viz__data { margin-top: var(--s-4, 1rem); }
.viz__data > summary {
  display: inline-flex; align-items: center; min-height: 44px;
  font: 500 0.875rem/1.2 Inter, system-ui, sans-serif;
  color: var(--vz-ink);
  text-decoration: underline; text-decoration-color: var(--vz-forest); text-decoration-thickness: 1px; text-underline-offset: 0.18em;
  cursor: pointer;
  list-style: none;
}
.viz__data > summary::-webkit-details-marker { display: none; }
.viz__data > summary::after {
  content: ""; width: 0.45em; height: 0.45em; margin-left: 0.6em;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-0.15em) rotate(45deg);
  transition: transform 160ms var(--vz-ease-ui);
}
.viz__data[open] > summary::after { transform: translateY(0.1em) rotate(-135deg); }
@media (hover: hover) and (pointer: fine) {
  .viz__data > summary:hover { text-decoration-thickness: 2px; color: var(--vz-forest); }
}
.viz__data table {
  width: 100%; margin-top: var(--s-3, 0.75rem);
  border-collapse: collapse;
  font: 400 0.875rem/1.45 Lato, system-ui, sans-serif;
  color: var(--vz-ink);
  font-variant-numeric: tabular-nums;
}
.viz__data :is(th, td) { padding: var(--s-2, 0.5rem) var(--s-3, 0.75rem) var(--s-2, 0.5rem) 0; text-align: left; vertical-align: top; border-top: 1px solid var(--vz-rule); }
.viz__data thead th { font: 500 0.75rem/1.3 Inter, system-ui, sans-serif; color: var(--vz-soft); border-top: 0; }
/* a group heading inside the body (benefit split: one group per pilot) */
.viz__data .viz__data-group { font: 500 0.75rem/1.3 Inter, system-ui, sans-serif; color: var(--vz-soft); padding-top: var(--s-4, 1rem); }
.viz__data tbody:first-child .viz__data-group { border-top: 0; padding-top: var(--s-2, 0.5rem); }
.viz__data td:not(:first-child) { white-space: nowrap; }
/* reflow: an opened table never runs past its column (320 px EN ran 20 px over) */
.viz__data table { table-layout: fixed; }
.viz__data :is(th, td) { overflow-wrap: anywhere; }
@media (max-width: 480px) {
  .viz__data td:not(:first-child) { white-space: normal; }
}

/* error floor: the renderer failed, so the data table is the figure */
.viz[data-state="error"] .viz__plot { display: none; }

/* ---- SVG primitives ----------------------------------------------------------------------- */
.vz-svg { display: block; max-width: none; overflow: visible; font-family: Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.vz-t { font-size: 12px; font-weight: 400; letter-spacing: 0.01em; fill: var(--vz-soft); }
.vz-t--strong { font-weight: 500; fill: var(--vz-ink); }
.vz-t--small { font-size: 11px; }
.vz-t--figure { font-family: Poppins, system-ui, sans-serif; font-weight: 300; font-size: 22px; letter-spacing: -0.01em; fill: var(--vz-ink); font-variant-numeric: normal; }
.vz-t--headline { font-family: Poppins, system-ui, sans-serif; font-weight: 300; font-size: 24px; letter-spacing: -0.012em; fill: var(--vz-ink); }
.vz-t--headline-sm { font-size: 22px; }
.vz-t--on-forest { font-weight: 500; fill: var(--vz-paper); }

.vz-axis, .vz-tick { stroke: var(--vz-edge); stroke-width: 1; shape-rendering: crispEdges; }
.vz-needle { stroke: var(--vz-ink); stroke-width: 1.5; }
.vz-leader { stroke: var(--vz-edge); stroke-width: 1; fill: none; }
.vz-ground { stroke: var(--vz-ink-2); stroke-width: 1.5; }
.vz-zero { stroke: var(--vz-ink); stroke-width: 1; shape-rendering: crispEdges; }
.vz-tick-strong { stroke: var(--vz-ink); stroke-width: 1; shape-rendering: crispEdges; }
.vz-rule { stroke: var(--vz-rule); stroke-width: 1; shape-rendering: crispEdges; }
.vz-bracket { stroke: var(--vz-forest); stroke-width: 1; shape-rendering: crispEdges; }
.vz-dashed { stroke: var(--vz-soft); stroke-width: 1; stroke-dasharray: 3 3; fill: none; }
.vz-dashed--fine { stroke-width: 1.5; stroke-dasharray: 0.01 3; stroke-linecap: round; }
.vz-dots { stroke: var(--vz-forest); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 0 6; }
.vz-now { stroke: var(--vz-forest); stroke-width: 1.5; }
.vz-arrow { stroke: var(--vz-soft); stroke-width: 1.25; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.vz-hatch { stroke: var(--vz-forest-2); stroke-width: 1.25; }
.vz-outline { stroke: var(--vz-edge); stroke-width: 1; }
.vz-profile-line { fill: none; stroke: var(--vz-ink); stroke-width: 1.5; stroke-linejoin: round; }

.vz-f-ink { fill: var(--vz-ink); }
.vz-f-ink-soft { fill: var(--vz-soft); }
.vz-f-edge { fill: var(--vz-edge); }
.vz-f-rule { fill: var(--vz-rule); }
.vz-f-forest { fill: var(--vz-forest); }
.vz-f-forest2 { fill: var(--vz-forest-2); }
.vz-f-paper3 { fill: var(--vz-paper-3); }
.vz-f-tint { fill: var(--vz-tint); }
.vz-halo-tint { paint-order: stroke; stroke: var(--vz-tint); stroke-width: 6px; stroke-linejoin: round; }
.vz-f-soil { fill: var(--vz-soil); }
.vz-f-soil-deep { fill: var(--vz-soil-deep); }
.vz-f-canopy { fill: var(--vz-canopy); }

/* ---- draw-in once (viz.js: data-state pre -> in -> done) ----------------------------------- */
.vz-grow-x { transform-box: fill-box; transform-origin: 0 50%; }
.vz-grow-x-rev { transform-box: fill-box; transform-origin: 100% 50%; }
.vz-grow-up { transform-box: fill-box; transform-origin: 50% 100%; }
.vz-grow-down { transform-box: fill-box; transform-origin: 50% 0; }
.viz[data-state="pre"] :is(.vz-grow-x, .vz-grow-x-rev) { transform: scaleX(0); }
.viz[data-state="pre"] :is(.vz-grow-up, .vz-grow-down) { transform: scaleY(0); }
.viz[data-state="pre"] .vz-fade { opacity: 0; }
.viz[data-state="pre"] .ladder__rung { opacity: 0; transform: translateY(14px); }
.viz[data-state="in"] :is(.vz-grow-x, .vz-grow-x-rev, .vz-grow-up, .vz-grow-down) { transition: transform var(--vz-draw-ms) var(--vz-ease); }
.viz[data-state="in"] .vz-fade { transition: opacity 480ms var(--vz-ease-ui) 320ms; }
.viz[data-state="in"] .vz-fade--late { transition-delay: 560ms; }
.viz[data-state="in"] .ladder__rung { transition: opacity 620ms var(--vz-ease-ui), transform 620ms var(--vz-ease-ui); }
.viz[data-state="in"] .ladder__rung:nth-child(2) { transition-delay: 70ms; }
.viz[data-state="in"] .ladder__rung:nth-child(3) { transition-delay: 140ms; }
.viz[data-state="in"] .ladder__rung:nth-child(4) { transition-delay: 210ms; }
.viz[data-state="in"] .ladder__rung:nth-child(5) { transition-delay: 280ms; }
.viz[data-state="in"] .ladder__rung:nth-child(6) { transition-delay: 350ms; }

/* ---- range readout (readout.js; also the hero split) --------------------------------------- */
.rng { min-width: 0; }
.rng__label { margin: 0 0 var(--s-1, 0.25rem); font: 500 0.75rem/1.3 Inter, system-ui, sans-serif; letter-spacing: 0.01em; color: var(--ink-soft, #52504A); }
.rng__value { margin: 0 0 var(--s-2, 0.5rem); color: var(--ink, #191712); line-height: 1.1; }
.rng__num { font: 300 clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem)/1.1 Poppins, system-ui, sans-serif; letter-spacing: -0.012em; }
.rng__unit { font: 500 0.875rem/1 Inter, system-ui, sans-serif; color: var(--ink-soft, #52504A); }
.rng__svg { display: block; overflow: visible; font-family: Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.rng .vz-t { font-size: 12px; fill: var(--ink-soft, #52504A); }
.rng .vz-t--strong { font-weight: 500; fill: var(--ink, #191712); }
.rng .vz-t--small { font-size: 11px; }
.rng .vz-axis, .rng .vz-tick { stroke: var(--control-edge, #888681); stroke-width: 1; shape-rendering: crispEdges; }
.rng .vz-needle { stroke: var(--ink, #191712); stroke-width: 1.5; }
.rng .vz-leader { stroke: var(--control-edge, #888681); stroke-width: 1; }
.rng .vz-f-tint { fill: var(--forest-tint, #DDEDDF); }
.rng .vz-hatch { stroke: var(--viz-forest-2, #6C9173); stroke-width: 1.25; }
.rng__lb { transition: opacity 240ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)); }

.vz-ranges { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-7, 3rem); }
@container (min-width: 600px) { .vz-ranges { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-6, 2rem) var(--s-7, 3rem); } }
.vz-range__status { margin: var(--s-2, 0.5rem) 0 0; }
.vz-axisnote, .vz-derivation, .vz-total { margin: var(--s-4, 1rem) 0 0; font: 400 0.875rem/1.55 Lato, system-ui, sans-serif; color: var(--vz-soft); max-width: 64ch; }
.vz-axisnote { font: 400 0.75rem/1.3 Inter, system-ui, sans-serif; letter-spacing: 0.01em; }
.vz-derivation { color: var(--vz-ink); font-variant-numeric: tabular-nums; }
.vz-total { font: 500 0.875rem/1.4 Inter, system-ui, sans-serif; color: var(--vz-ink); font-variant-numeric: tabular-nums; }

/* ---- slope-argopuro: drawn once when the plot is in view (slope-argopuro.js data-draw, §5.2) --- */
.vz-slope-line {
  fill: none; stroke: var(--vz-ink); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: butt;
  stroke-dasharray: 1 1; stroke-dashoffset: 0;
}
[data-viz="slope-argopuro"][data-draw="off"] .vz-slope-line { stroke-dashoffset: 1; }
[data-viz="slope-argopuro"][data-draw="off"] :is(.vz-slope-zone, .vz-slope-arrows, .vz-slope-summit) { opacity: 0; }
[data-viz="slope-argopuro"][data-draw="on"] .vz-slope-line { transition: stroke-dashoffset 1200ms var(--vz-ease); }
[data-viz="slope-argopuro"][data-draw="on"] .vz-slope-zone--kebun { transition: opacity 360ms var(--vz-ease-ui) 420ms; }
[data-viz="slope-argopuro"][data-draw="on"] .vz-slope-zone--hutan { transition: opacity 360ms var(--vz-ease-ui) 720ms; }
[data-viz="slope-argopuro"][data-draw="on"] .vz-slope-arrows { transition: opacity 360ms var(--vz-ease-ui) 900ms; }
[data-viz="slope-argopuro"][data-draw="on"] .vz-slope-summit { transition: opacity 360ms var(--vz-ease-ui) 1020ms; }
@media (prefers-reduced-motion: reduce) {
  [data-viz="slope-argopuro"][data-draw] .vz-slope-line { stroke-dashoffset: 0; transition: none; }
  [data-viz="slope-argopuro"][data-draw] :is(.vz-slope-zone, .vz-slope-arrows, .vz-slope-summit) { opacity: 1; transition: none; }
}

/* ---- mrv-ladder (HTML) -------------------------------------------------------------------- */
.ladder { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column-reverse; }
.ladder__rung {
  display: grid; grid-template-columns: 3.5rem 0.875rem minmax(0, 1fr) auto; align-items: center;
  column-gap: var(--s-4, 1rem);
  min-height: 3.25rem;
  font: 400 0.9375rem/1.45 Lato, system-ui, sans-serif; color: var(--vz-ink);
}
.ladder__step { align-self: stretch; position: relative; border-inline: 1.5px solid var(--vz-ink-2); }
.ladder__step::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 2.5px solid var(--vz-ink-2); transform: translateY(-50%); }
.ladder__rung--none .ladder__step { border-inline-style: dotted; border-inline-color: var(--vz-edge); }
.ladder__rung--none .ladder__step::after { border-top: 2.5px dotted var(--vz-edge); }
.ladder__mark { position: static; top: auto; width: 0.875rem; height: 0.875rem; color: var(--vz-soft); } /* base.css positions .status__mark absolutely; the ladder places it in its grid */
.ladder__text { padding-block: var(--s-3, 0.75rem); text-wrap: pretty; }
.ladder__rung--none .ladder__text { color: var(--vz-soft); }
.ladder__count { font: 500 0.75rem/1.3 Inter, system-ui, sans-serif; letter-spacing: 0.01em; color: var(--vz-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ladder__rung--none .ladder__count { font-weight: 400; color: var(--vz-soft); }
@container (max-width: 520px) {
  .ladder__rung { grid-template-columns: 2.75rem 0.875rem minmax(0, 1fr); row-gap: 0; padding-block: var(--s-2, 0.5rem); }
  .ladder__text { padding-block: 0; }
  .ladder__step { grid-row: span 2; }
  .ladder__count { grid-column: 3; }
}

/* ---- transect-probe ----------------------------------------------------------------------- */
.probe { display: grid; gap: var(--s-6, 2rem); }
.probe--wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: calc(var(--s-7, 3rem) + 2.25rem); align-items: start; }
.probe__plate {
  position: relative;
  aspect-ratio: 1360 / 1525;
  background: var(--vz-paper-3);
  touch-action: pan-y;
  user-select: none; -webkit-user-select: none;
}
.probe--narrow .probe__plate { margin-bottom: 3.5rem; }
.probe--wide .probe__plate { margin-bottom: var(--s-6, 2rem); } /* the rail runs 0.875rem past the plate */
.probe__img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: fill; }
.probe__plate[data-state="no-plate"] .probe__img { visibility: hidden; }
.probe__knife { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.probe__knife-halo { stroke: var(--vz-paper); stroke-width: 4; stroke-opacity: 0.85; }
.probe__knife-line { stroke: var(--vz-ink); stroke-width: 1.5; }
.probe__place {
  position: absolute; transform: translate(-50%, -50%);
  padding: 0.125rem 0.375rem; border-radius: var(--r, 2px);
  background: var(--vz-paper); color: var(--vz-ink);
  font: 500 0.75rem/1.25 Inter, system-ui, sans-serif; letter-spacing: 0.01em;
  white-space: nowrap; pointer-events: none;
}
.probe__place--summit { transform: translate(-50%, calc(-100% - 0.625rem)); }
.probe__place--summit::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 0.625rem; background: var(--vz-ink); }
@media (hover: hover) and (pointer: fine) { .probe__plate { cursor: ns-resize; } }

/* the knife rail: a native range input. Wide: vertical along the plate's right edge, thumb aligned with the
   knife line. Narrow: horizontal under the plate. */
.probe__input {
  position: absolute; margin: 0; padding: 0;
  -webkit-appearance: none; appearance: none;
  background: transparent; accent-color: var(--vz-forest); cursor: grab;
}
.probe--wide .probe__input { left: calc(100% + 0.75rem); top: -0.875rem; width: 1.75rem; height: calc(100% + 1.75rem); writing-mode: vertical-lr; }
.probe--narrow .probe__input { left: 0; right: 0; top: calc(100% + 0.5rem); width: 100%; height: 2.75rem; }
.probe__input:focus { outline: none; }
.probe__input:focus-visible { outline: 2px solid var(--vz-forest); outline-offset: 3px; }
.probe__input:disabled { cursor: default; opacity: 0.4; }
.probe__input::-webkit-slider-runnable-track { background: linear-gradient(var(--vz-edge), var(--vz-edge)) center / 100% 1px no-repeat; height: 100%; }
.probe--wide .probe__input::-webkit-slider-runnable-track { background-size: 1px 100%; width: 100%; }
.probe__input::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 1.75rem; height: 1.75rem; border-radius: var(--r, 2px);
  background: var(--vz-forest); border: 2px solid var(--vz-paper);
  box-shadow: 0 1px 2px oklch(20% 0.014 160 / 0.18);
  /* grip: two short strokes in the knife's direction */
  background-image: linear-gradient(var(--vz-paper), var(--vz-paper)), linear-gradient(var(--vz-paper), var(--vz-paper));
  background-size: 0.75rem 1.5px; background-repeat: no-repeat;
  background-position: center calc(50% - 3px), center calc(50% + 3px);
}
.probe--narrow .probe__input::-webkit-slider-thumb { background-size: 1.5px 0.75rem; background-position: calc(50% - 3px) center, calc(50% + 3px) center; }
.probe__input::-moz-range-thumb { width: 1.5rem; height: 1.5rem; border-radius: var(--r, 2px); background: var(--vz-forest); border: 2px solid var(--vz-paper); }
.probe__input::-moz-range-track { background: var(--vz-edge); height: 1px; }
.probe__input:active { cursor: grabbing; }

.probe__side { min-width: 0; }
.probe__profile { width: 100%; }
.probe__readouts { display: grid; gap: var(--s-4, 1rem); margin: var(--s-5, 1.5rem) 0 0; }
.probe__readouts > div { padding-top: var(--s-3, 0.75rem); border-top: 1px solid var(--vz-rule); }
.probe__readouts dt { font: 500 0.75rem/1.3 Inter, system-ui, sans-serif; letter-spacing: 0.01em; color: var(--vz-soft); }
.probe__readouts dd {
  margin: var(--s-1, 0.25rem) 0 0;
  font: 300 1.75rem/1.1 Poppins, system-ui, sans-serif; letter-spacing: -0.012em;
  color: var(--vz-ink); font-variant-numeric: tabular-nums;
}
.probe__chip { display: block; margin-top: var(--s-2, 0.5rem); }

/* ---- roadmap-axis: under the pan rail, travelling with it --------------------------------- */
html.js [data-sc-act="pan"]:not([data-state="static"]) [data-sc-pan]:has(> li > [data-viz="roadmap-axis"]) {
  position: relative;
  padding-bottom: calc(6.5rem + var(--s-5, 1.5rem));
}
html.js [data-sc-act="pan"]:not([data-state="static"]) [data-sc-pan] > li:has(> [data-viz="roadmap-axis"]) {
  position: absolute; left: 0; bottom: 0;
  width: max-content; max-width: none; min-width: 0;
  margin: 0; padding: 0; flex: none; border: 0;
}
html.js [data-sc-act="pan"]:not([data-state="static"]) [data-viz="roadmap-axis"] .viz__plot { margin: 0; }
html.js [data-sc-act="pan"]:not([data-state="static"]) [data-viz="roadmap-axis"] > :not([data-viz-plot]) {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---- instruments (enhanced static table; phone: one block per instrument) ------------------ */
[data-viz="instruments"] table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
[data-viz="instruments"] :is(th, td) { text-align: left; vertical-align: top; }
.vz-cell-label { display: none; }
.vz-row-chip { display: block; margin-top: var(--s-2, 0.5rem); }
@media (max-width: 860px) {
  [data-viz="instruments"] thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  [data-viz="instruments"] :is(table, tbody, tr, th, td) { display: block; width: auto; }
  [data-viz="instruments"] tbody tr { padding: var(--s-5, 1.5rem) 0; border-top: 1px solid var(--vz-rule); }
  [data-viz="instruments"] tbody :is(th, td) { padding: 0; border: 0; }
  [data-viz="instruments"] tbody th { margin-bottom: var(--s-3, 0.75rem); }
  [data-viz="instruments"] tbody td { padding: var(--s-2, 0.5rem) 0; }
  .vz-cell-label { display: block; margin-bottom: 0.125rem; font: 500 0.75rem/1.4 Inter, system-ui, sans-serif; letter-spacing: 0.01em; color: var(--vz-soft); }
}

/* ---- a fallback for screen-reader-only text inside figures (base.css owns the global one) --- */
.viz .sr-only, .rng .sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .viz *, .rng * { transition: none !important; }
}