/* ==========================================================================
   HYDROBIO — the plan route (issue 195)

   DIRECTION A: FIELD STATION.

   An agronomic research bulletin, not an app. Numbered sections, hairline
   rules, a masthead, marginal annotations, one oxblood signal colour and one
   bottle green for the affirmative. Serif for headings and every number a
   farmer weighs a decision on; monospace for labels and units; sans for
   reading text.

   The point of the aesthetic is credibility. This tool tells people their
   land will not repay a purchase as often as it tells them it will, and it
   has to look like something that publishes findings rather than something
   that sells.

   RULES OF THE SYSTEM, so later edits do not drift:

     - Light ground always. Never a dark page.
     - ONE type scale. Display sizes come from --step-*, nothing ad hoc.
     - Sienna marks the projection and the current step. Nothing else.
     - Green marks a measured or affirmative quantity.
     - Logical properties only (inline-start, not left) — Arabic is RTL.
     - Numerals are tabular everywhere they can be compared.
   ========================================================================== */

:root{
  /* ---- ground and ink ---- */
  --p-paper:#FAF9F4;
  --p-panel:#FFFFFF;
  --p-well:#F3F1E8;
  --p-ink:#101410;
  --p-ink-2:#3D453B;
  /* Dark enough to clear 4.5:1 on every ground in this palette, not just on
     paper: it also sits on --p-well (unit chips) and on --p-sienna-bg /
     --p-verdigris-bg (selected rows), where #6B7367 measured 4.19-4.34. */
  --p-muted:#61695D;
  --p-rule:#DAD7CB;
  --p-rule-soft:#EDEAE0;

  /* ---- signal ---- */
  --p-sienna:#8C2F0D;          /* the projection, the live step */
  --p-sienna-bg:#F6EBE4;
  --p-verdigris:#1F4D2E;       /* the affirmative, the measured */
  --p-verdigris-bg:#E7EFE8;
  --p-sky:#3E6E8E;
  --p-amber:#B07B1E;

  /* ---- type ---- */
  --p-display:"Iowan Old Style","Palatino Linotype","Hoefler Text",Georgia,ui-serif,serif;
  --p-text:"Avenir Next","Segoe UI",-apple-system,BlinkMacSystemFont,sans-serif;
  --p-data:"SF Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* ONE scale. Every display size below is drawn from this. */
  --step-0:.95rem;
  --step-1:1.08rem;
  --step-2:1.32rem;
  --step-3:1.65rem;
  --step-4:clamp(1.9rem,5vw,2.4rem);
  --step-5:clamp(2.3rem,7vw,3.1rem);
  --step-6:clamp(3.2rem,13vw,4.8rem);

  /* micro-label: the mono, letterspaced, uppercase tag used throughout */
  --p-label-size:.66rem;
  --p-label-track:.16em;

  --p-shadow:0 1px 2px rgba(16,20,16,.04);
}

*{ box-sizing:border-box; }

.plan-body{
  margin:0;
  background:var(--p-paper);
  background-image:radial-gradient(circle at 1px 1px,rgba(16,20,16,.035) 1px,transparent 0);
  background-size:22px 22px;
  color:var(--p-ink);
  font-family:var(--p-text);
  font-size:var(--step-1);
  line-height:1.58;
  -webkit-font-smoothing:antialiased;
}
html:has(.plan-body){ background:var(--p-paper); }

/* ==========================================================================
   READOUTS AND THE BIDIRECTIONAL ALGORITHM
   ==========================================================================

   A measurement is one token: "605 €/ha", "12.5 kg", "1.4 t/ha". Inside an
   Arabic paragraph the currency symbol and the slash are bidirectionally
   NEUTRAL, so the whole run takes the paragraph's direction and "605 €/ha"
   renders as "ha/€ 605". That is not a typographic nicety — it is a price
   with its units inverted, on the page a purchase is decided from.

   `unicode-bidi: plaintext` resolves each element's direction from its own
   first strong character, which is exactly the rule wanted here: a Latin
   unit makes the element LTR, and a cell that really is Arabic — "شجرة
   واحدة من كل 7.2" — stays RTL without an exception list.

   Scoped to elements that hold ONLY a figure. Sentences with a number in
   them are not included: their first strong character is the sentence's, and
   forcing them would flip the prose instead. Those spell their unit out in
   the catalogue instead (see plan.head.worth).
   ========================================================================== */
.plan-money-table tbody td + td,
.verdict-facts dd,
.vbar-value,
.est-n,
.be-rows dd,
/* The headline card's figure, ONLY where it is a bare measurement — the
   irrigation card's "47 mm" (issue 225). The yield and planting cards put a
   localised sentence in the same element and are deliberately not marked:
   plan_app.js:headlineCards sets `measure` on the card, not on the class. */
.plan-option-figure.is-measure,
.input-unit .mono{
  unicode-bidi:plaintext;
}

/* ==========================================================================
   MASTHEAD
   ========================================================================== */

.plan-head{
  max-width:840px;
  margin-inline:auto;
  padding:1.6rem clamp(1.1rem,4vw,1.75rem) 0;
  display:grid;
  grid-template-columns:1fr auto;
  gap:.9rem 1.25rem;
  align-items:baseline;
  border-block-end:2.5px solid var(--p-ink);
}
.plan-brand{
  grid-column:1; grid-row:1;
  margin:0;
  font-family:var(--p-display);
  font-size:var(--step-3);
  font-weight:600;
  letter-spacing:.13em;
}
/* Language and money share one cell (issue 222). Both selects used to be
   placed directly on the grid, so a second one would have landed on top of
   the first. Logical properties throughout: in Arabic the pair sits at the
   inline end without a mirrored rule. */
.plan-head-choices{
  grid-column:2; grid-row:1;
  justify-self:end;
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:.5rem;
}
.plan-head select{
  inline-size:auto;
  font-family:var(--p-data);
  font-size:var(--p-label-size);
  letter-spacing:var(--p-label-track);
  text-transform:uppercase;
  color:var(--p-ink-2);
  background:transparent;
  border:1px solid var(--p-rule);
  border-radius:0;
  padding:.5rem .7rem;
  cursor:pointer;
}
.plan-head select:hover{ border-color:var(--p-ink); }

/* ---- the step ledger: a run of ruled cells, like a form header ---- */
.plan-steps{ grid-column:1 / -1; grid-row:2; }
.plan-steps ol{
  display:flex;
  margin:0;
  padding:0;
  list-style:none;
  border-block-start:1px solid var(--p-rule);
}
.plan-steps li{
  flex:1;
  position:relative;
  padding:.7rem .55rem .6rem;
  border-inline-end:1px solid var(--p-rule);
  font-family:var(--p-data);
  font-size:var(--p-label-size);
  letter-spacing:var(--p-label-track);
  text-transform:uppercase;
  color:var(--p-muted);
}
.plan-steps li:last-child{ border-inline-end:0; }
.plan-steps li::before{
  content:"0" counter(step);
  counter-increment:step;
  display:block;
  font-size:.6rem;
  color:var(--p-rule);
  margin-block-end:.18rem;
}
.plan-steps ol{ counter-reset:step; }
.plan-steps li.is-done{ color:var(--p-ink-2); }
.plan-steps li.is-done::before{ color:var(--p-verdigris); }
.plan-steps li[aria-current]{ color:var(--p-ink); font-weight:700; }
.plan-steps li[aria-current]::before{ color:var(--p-sienna); }
.plan-steps li[aria-current]::after{
  content:"";
  position:absolute;
  inset-inline:0;
  inset-block-end:-2.5px;
  block-size:2.5px;
  background:var(--p-sienna);
}

/* At 390 px the wordmark and two selects cannot share a line — "Français"
   alone runs to nearly a third of the viewport. Below 430 px the pair drops
   to its own full-width row, still at the inline end, so nothing overflows
   in either writing direction. Placed after the .plan-steps rule it
   overrides, since a media query adds no specificity. */
@media (max-width:430px){
  .plan-head-choices{ grid-column:1 / -1; grid-row:2; }
  .plan-steps{ grid-row:3; }
}

/* ==========================================================================
   PAGES AND SECTION HEADS
   ========================================================================== */

#plan-main{
  max-width:840px;
  margin-inline:auto;
  padding:0 clamp(1.1rem,4vw,1.75rem) 5rem;
}
.plan-page{ padding-block-start:2.6rem; }

.plan-page h1{
  margin:0;
  font-family:var(--p-display);
  font-size:var(--step-5);
  font-weight:600;
  line-height:1.1;
  letter-spacing:-.022em;
  border-block-start:2px solid var(--p-ink);
  padding-block-start:.7rem;
  max-width:20ch;
}
.plan-lede{
  margin:.6rem 0 0;
  color:var(--p-ink-2);
  font-size:var(--step-1);
  max-width:56ch;
}

/* every h2 in the route is a ruled bulletin heading */
.plan-page h2{
  margin:0 0 .5rem;
  font-family:var(--p-data);
  font-size:var(--p-label-size);
  font-weight:600;
  letter-spacing:var(--p-label-track);
  text-transform:uppercase;
  color:var(--p-muted);
}

/* ==========================================================================
   FIELDS
   ========================================================================== */

.field{ margin-block:1.5rem; }
.plan-page label:not(.choice-card):not(.check-field){
  display:block;
  font-family:var(--p-data);
  font-size:var(--p-label-size);
  letter-spacing:var(--p-label-track);
  text-transform:uppercase;
  color:var(--p-muted);
  margin-block-end:.4rem;
}
/* The text-field look, and it belongs to text fields only. A bare
   `.plan-page input` also stretched the hidden radios to 355px — enough to
   push the page 6px past the 390px viewport — and blew the "I do not know"
   checkbox out to the full column width. */
.plan-page input:not([type="checkbox"],[type="radio"]),
.plan-page select,
.plan-page textarea{
  inline-size:100%;
  font-family:var(--p-text);
  font-size:var(--step-1);
  color:var(--p-ink);
  background:var(--p-panel);
  border:1px solid var(--p-rule);
  border-radius:0;
  padding:.8rem .9rem;
  transition:border-color 130ms ease;
}
.plan-page input:not([type="checkbox"],[type="radio"]):hover,
.plan-page select:hover{ border-color:var(--p-ink-2); }
.plan-page input:not([type="checkbox"],[type="radio"]):focus-visible,
.plan-page select:focus-visible{
  outline:none;
  border-color:var(--p-sienna);
  box-shadow:inset 0 0 0 1px var(--p-sienna);
}
.plan-page small,
.field-help{
  display:block;
  margin-block-start:.4rem;
  font-size:.82rem;
  line-height:1.5;
  color:var(--p-muted);
}
.field-error{
  margin:.4rem 0 0;
  font-family:var(--p-data);
  font-size:.76rem;
  color:var(--p-sienna);
}
.input-unit{ display:flex; align-items:stretch; }
.input-unit input{ flex:1 1 auto; min-inline-size:0; }
.input-unit .mono{
  flex:0 0 auto;
  display:flex; align-items:center;
  padding-inline:.7rem;
  border:1px solid var(--p-rule);
  border-inline-start:0;
  background:var(--p-well);
  font-family:var(--p-data);
  font-size:.76rem;
  color:var(--p-muted);
}
/* farmer.css lifts the box out of flow and pins it to the inline start, which
   is right for the journey route's two-element .check-field but would drop it
   under the caption here, where the caption is the label's own text. Put it
   back in flow, beside the words. */
.plan-page .check-field{
  position:static;
  display:flex;
  align-items:center;
  gap:.55rem;
  margin-block-start:.6rem;
  font-size:.9rem;
  color:var(--p-ink-2);
  cursor:pointer;
}
.plan-page .check-field input[type="checkbox"]{
  position:static;
  flex:0 0 auto;
  inline-size:1.05rem;
  block-size:1.05rem;
  min-block-size:0;
  margin:0;
  accent-color:var(--p-sienna);
}
.plan-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
  gap:0 1.25rem;
}

/* ==========================================================================
   LOCATION LOOKUP (issue 204)

   A submit control, a status line, and a register of candidates to confirm.
   Every selector is prefixed .plan-page: farmer.css carries element-scoped
   rules that outrank a bare component class, which has silently undone
   this route's layout four times already.
   ========================================================================== */

.plan-page .plan-lookup-row{ display:flex; align-items:stretch; }
.plan-page .plan-lookup-row input{ flex:1 1 auto; min-inline-size:0; }
.plan-page .plan-lookup-go{
  flex:0 0 auto;
  border:1px solid var(--p-ink);
  border-inline-start:0;
  border-radius:0;
  background:var(--p-ink);
  color:var(--p-paper);
  padding-inline:1rem;
  font-family:var(--p-data);
  font-size:var(--p-label-size);
  letter-spacing:var(--p-label-track);
  text-transform:uppercase;
  cursor:pointer;
  transition:background 130ms ease;
}
.plan-page .plan-lookup-go:hover:not(:disabled){ background:var(--p-sienna); border-color:var(--p-sienna); }
.plan-page .plan-lookup-go:disabled{ background:var(--p-muted); border-color:var(--p-muted); cursor:progress; }

.plan-page .plan-lookup-status{
  margin:.55rem 0 0;
  padding-inline-start:.7rem;
  border-inline-start:2px solid var(--p-rule);
  font-family:var(--p-data);
  font-size:.76rem;
  line-height:1.55;
  color:var(--p-ink-2);
}
.plan-page .plan-lookup-status[data-tone="busy"]{ color:var(--p-muted); }
.plan-page .plan-lookup-status[data-tone="ready"]{ border-inline-start-color:var(--p-verdigris); color:var(--p-verdigris); }
.plan-page .plan-lookup-status[data-tone="error"]{ border-inline-start-color:var(--p-sienna); color:var(--p-sienna); }

.plan-page .plan-lookup-candidates{ margin-block-start:.9rem; }
.plan-page .plan-lookup-ask{
  margin:0;
  font-family:var(--p-data);
  font-size:var(--p-label-size);
  letter-spacing:var(--p-label-track);
  text-transform:uppercase;
  color:var(--p-muted);
}
/* The offset disclosure. Sienna, because it is the live signal on this
   route and this is the one thing a farmer must read before confirming. */
.plan-page .plan-lookup-offset{
  margin:.4rem 0 0;
  padding-inline-start:.7rem;
  border-inline-start:2px solid var(--p-sienna);
  font-size:.8rem;
  line-height:1.5;
  color:var(--p-sienna);
}
.plan-page .plan-candidate{
  display:block;
  inline-size:100%;
  text-align:start;
  border:0;
  border-block-start:1px solid var(--p-rule);
  border-radius:0;
  background:transparent;
  padding:.75rem .8rem;
  cursor:pointer;
  transition:background 130ms ease, padding-inline-start 130ms ease;
}
.plan-page #plan-lookup-list .plan-candidate:last-child{ border-block-end:1px solid var(--p-rule); }
.plan-page .plan-candidate:hover{ background:var(--p-panel); padding-inline-start:1.05rem; }
.plan-page .plan-candidate:focus-visible{ outline:2px solid var(--p-sienna); outline-offset:-2px; }
.plan-page .plan-candidate-label{
  display:block;
  font-size:var(--step-1);
  font-weight:600;
  color:var(--p-ink);
}
.plan-page .plan-candidate-context{
  display:block;
  font-family:var(--p-data);
  font-size:.72rem;
  color:var(--p-muted);
}
.plan-page #plan-lookup-decline{ margin-block-start:.9rem; }

/* At 390 px the submit label and the field cannot share a line without
   squeezing the input to nothing. Arabic runs longer still, so the button
   drops below rather than overflowing the page. */
@media (max-width:430px){
  .plan-page .plan-lookup-row{ display:block; }
  .plan-page .plan-lookup-go{
    inline-size:100%;
    border-inline-start:1px solid var(--p-ink);
    border-block-start:0;
    padding-block:.75rem;
  }
  .plan-page .plan-lookup-go:hover:not(:disabled){ border-color:var(--p-sienna); }
}

/* ==========================================================================
   CHOICES — register entries, not buttons
   ========================================================================== */

.choice{ border:0; margin:1.9rem 0 0; padding:0; }
.choice legend{
  padding:0;
  font-family:var(--p-display);
  font-size:var(--step-2);
  font-weight:600;
  letter-spacing:-.012em;
  color:var(--p-ink);
  margin-block-end:.7rem;
}
/* Register rows, not a card grid. farmer.css defines .choice-grid as a
   multi-column grid for the journey route; this route stacks them, and the
   declaration has to be explicit to win against it. */
.plan-page .choice-grid,
.plan-page .choice-grid-2,
.plan-page .choice-grid-3{
  display:block;
  grid-template-columns:none;
  gap:0;
  border-block-start:1px solid var(--p-rule);
}

/* .plan-page prefix required: farmer.css carries `.choice label` at 0-1-1,
   which outranks a bare `.choice-card` at 0-1-0 and silently turned these
   register rows back into centred flex boxes. Fourth time a shared
   element-scoped selector in farmer.css has beaten a component class here. */
.plan-page .choice-card{
  display:grid;
  grid-template-columns:[icon] auto [text] 1fr [mark] auto;
  gap:0 .95rem;
  align-items:center;
  padding:.95rem .8rem;
  border-block-end:1px solid var(--p-rule);
  cursor:pointer;
  transition:background 130ms ease, padding-inline-start 130ms ease;
}
.plan-page .choice-card:hover{ background:var(--p-panel); padding-inline-start:1.15rem; }
/* The tracks are named because two of these question groups have no icon.
   With a fixed three-column template the title took the icon track and the
   note stayed pinned to track 2, which at 390px is a ~14-character column —
   eleven lines of two words. Drop the track instead of shifting the text. */
.plan-page .choice-card:not(:has(.choice-icon)){
  grid-template-columns:[text] 1fr [mark] auto;
}
/* Sized as well as hidden: left at 100% by the field rule these contributed
   355px of inline overflow to a 390px page. */
.plan-page .choice-card input:is([type="radio"],[type="checkbox"]){
  position:absolute;
  inline-size:1px;
  block-size:1px;
  min-block-size:0;
  margin:0;
  padding:0;
  border:0;
  opacity:0;
  pointer-events:none;
}
.plan-page .choice-icon{
  grid-column:icon;
  grid-row:1 / span 2;
  inline-size:2rem; block-size:2rem;
  position:relative;
  border:1px solid var(--p-rule);
  background:var(--p-panel);
}
.plan-page .choice-title{
  grid-column:text;
  font-size:var(--step-1);
  font-weight:600;
  color:var(--p-ink);
}
.plan-page .choice-note{
  grid-column:text;
  font-size:.85rem;
  line-height:1.45;
  color:var(--p-muted);
}
/* the selection mark, drawn rather than a native radio */
.plan-page .choice-card::after{
  content:"";
  grid-row:1 / span 2;
  grid-column:mark;
  inline-size:.85rem; block-size:.85rem;
  border:1.5px solid var(--p-rule);
  border-radius:50%;
}
.plan-page .choice-card:has(input:checked){
  background:var(--p-sienna-bg);
  padding-inline-start:1.15rem;
}
.plan-page .choice-card:has(input:checked) .choice-icon{ border-color:var(--p-sienna); }
.plan-page .choice-card:has(input:checked)::after{
  border-color:var(--p-sienna);
  background:var(--p-sienna);
  box-shadow:inset 0 0 0 2.5px var(--p-sienna-bg);
}
.plan-page .choice-card:has(input:focus-visible){ box-shadow:inset 0 0 0 2px var(--p-sienna); }

/* ---- CSS-drawn weather and fertility marks ---- */
.choice-icon::before,
.choice-icon::after{ content:""; position:absolute; }
[data-glyph="drought"]::before{ inset:6px 6px auto 6px; block-size:9px; border-radius:50%; background:var(--p-sienna); }
[data-glyph="drought"]::after{ inset:auto 7px 6px 7px; block-size:2px; background:var(--p-sienna); opacity:.4; }
[data-glyph="poor"]::before{ inset:5px auto auto 12px; inline-size:4px; block-size:9px; border-radius:2px; background:var(--p-sky); }
[data-glyph="poor"]::after{ inset:auto 8px 7px 8px; block-size:3px; border-radius:2px; background:var(--p-sky); opacity:.45; }
[data-glyph="early"]::before{ inset:5px 14px auto 6px; block-size:9px; border-radius:5px; background:var(--p-sky); }
[data-glyph="early"]::after{ inset:auto 8px 7px 8px; block-size:3px; border-radius:2px; background:var(--p-rule); }
[data-glyph="normal"]::before{ inset:5px 9px auto 9px; block-size:8px; border-radius:4px; background:var(--p-sky); opacity:.75; }
[data-glyph="normal"]::after{ inset:auto 8px 7px 8px; block-size:3px; border-radius:2px; background:var(--p-sky); opacity:.5; }
[data-glyph="plenty"]::before{ inset:5px 7px auto 7px; block-size:9px; border-radius:5px; background:var(--p-sky); }
[data-glyph="plenty"]::after{ inset:auto 7px 6px 7px; block-size:4px; border-radius:2px; background:var(--p-sky); opacity:.6; }
[data-glyph="excess"]::before{ inset:5px 6px auto 6px; block-size:8px; border-radius:4px; background:var(--p-sky); }
[data-glyph="excess"]::after{ inset:auto 6px 5px 6px; block-size:6px; border-radius:3px; background:var(--p-sky); opacity:.45; }
[data-glyph^="fert-"]::before{ inset:auto auto 9px 8px; inline-size:4px; block-size:9px; border-radius:2px; background:var(--p-verdigris); }
[data-glyph="fert-some"]::before{ box-shadow:6px 0 0 var(--p-verdigris); }
[data-glyph="fert-well"]::before{ box-shadow:6px 0 0 var(--p-verdigris),12px 0 0 var(--p-verdigris); }
[data-glyph="fert-poor"]::before{ opacity:.4; }

/* ==========================================================================
   DISCLOSURES
   ========================================================================== */

.input-details{
  margin-block:1.5rem;
  border-block:1px solid var(--p-rule);
}
.input-details summary{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:.75rem;
  padding:.85rem .2rem;
  cursor:pointer;
  list-style:none;
  font-family:var(--p-data);
  font-size:var(--p-label-size);
  letter-spacing:var(--p-label-track);
  text-transform:uppercase;
  color:var(--p-ink-2);
}
.input-details summary::-webkit-details-marker{ display:none; }
.input-details summary:hover{ color:var(--p-sienna); }
.plan-page .input-details summary span:first-child{ color:inherit; }
.plan-page .input-details[open] summary span:first-child{ color:var(--p-sienna); }
.plan-page .input-details summary span:last-child{ color:var(--p-sienna); }

/* ==========================================================================
   THE FINDING — the answer, framed like a plate in a report
   ========================================================================== */

.verdict{
  margin-block:1.5rem 2.2rem;
  border:2px solid var(--p-ink);
  background:var(--p-panel);
}
.verdict::before{
  content:attr(data-kicker);
  display:block;
  background:var(--p-ink);
  color:var(--p-paper);
  padding:.55rem 1.1rem;
  font-family:var(--p-data);
  font-size:var(--p-label-size);
  letter-spacing:.2em;
  text-transform:uppercase;
}
.verdict-figure{ padding:1.9rem 1.15rem .3rem; }
.verdict-number{
  margin:0;
  font-family:var(--p-display);
  font-size:var(--step-6);
  line-height:.86;
  letter-spacing:-.04em;
  color:var(--p-verdigris);
  font-variant-numeric:tabular-nums;
}
.verdict-caption{
  margin:.7rem 0 0;
  font-size:var(--step-1);
  color:var(--p-ink-2);
  max-width:34ch;
}

/* ---- the plot ---- */
.verdict-chart{
  display:grid;
  gap:.85rem;
  padding:1.35rem 1.15rem;
}
.vbar-row{
  display:grid;
  grid-template-columns:minmax(6.5rem,auto) 1fr minmax(4.4rem,auto);
  align-items:center;
  gap:.8rem;
}
.vbar-label{
  margin:0;
  font-family:var(--p-data);
  font-size:var(--p-label-size);
  letter-spacing:var(--p-label-track);
  text-transform:uppercase;
  color:var(--p-muted);
}
.vbar-track{
  display:flex;
  block-size:1.4rem;
  background:repeating-linear-gradient(90deg,var(--p-rule-soft) 0 1px,transparent 1px 10%);
  border-block-end:1.5px solid var(--p-ink);
}
.vbar-fill{ block-size:100%; transition:inline-size 480ms cubic-bezier(.2,.75,.25,1); }
.vbar-base{ background:var(--p-verdigris); }
.vbar-gain{
  background:var(--p-sienna);
  background-image:repeating-linear-gradient(-45deg,rgba(255,255,255,.28) 0 4px,transparent 4px 8px);
}
.vbar-value{
  margin:0;
  font-family:var(--p-data);
  font-size:.82rem;
  font-weight:600;
  color:var(--p-ink);
  text-align:end;
  font-variant-numeric:tabular-nums;
}

/* ---- the facts, as ruled cells ---- */
.verdict-facts{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  margin:0;
  border-block-start:2px solid var(--p-ink);
}
.verdict-facts > div{
  padding:.85rem 1.1rem;
  border-inline-end:1px solid var(--p-rule);
}
.verdict-facts > div:last-child{ border-inline-end:0; }
.verdict-facts dt{
  font-family:var(--p-data);
  font-size:var(--p-label-size);
  letter-spacing:var(--p-label-track);
  text-transform:uppercase;
  color:var(--p-muted);
}
.verdict-facts dd{
  margin:.3rem 0 0;
  font-family:var(--p-display);
  font-size:var(--step-3);
  line-height:1.1;
  font-variant-numeric:tabular-nums;
}

/* ==========================================================================
   ANNOTATIONS — everything the route says in prose
   ========================================================================== */

.plan-starting,
.plan-honesty,
.plan-amf,
.plan-pilot,
.plan-contributions,
.plan-money,
.establish,
.rooting{ margin-block:2.1rem; }

.plan-starting p,
.plan-honesty p,
.plan-amf p,
.rooting p{
  margin:0;
  font-size:var(--step-0);
  line-height:1.62;
  color:var(--p-ink-2);
  max-width:68ch;
}
.plan-starting{ border-inline-start:2px solid var(--p-verdigris); padding-inline-start:1rem; }
.rooting{ border-inline-start:2px solid var(--p-sky); padding-inline-start:1rem; }
.plan-honesty{ border-inline-start:2px solid var(--p-rule); padding-inline-start:1rem; }
/* The limitations are a disclosure now, not a wall (issue 221). Collapsed by
   default and one tap from the full text: the same words, out of the way of
   the answer. The summary wears the section-heading style it replaces, so
   nothing about the page's rhythm changes when it is shut. */
.plan-honesty > summary{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:.75rem;
  cursor:pointer;
  list-style:none;
  margin:0 0 .5rem;
  font-family:var(--p-data);
  font-size:var(--p-label-size);
  font-weight:600;
  letter-spacing:var(--p-label-track);
  text-transform:uppercase;
  color:var(--p-muted);
}
.plan-honesty > summary::-webkit-details-marker{ display:none; }
.plan-honesty > summary:hover{ color:var(--p-sienna); }
.plan-honesty > summary span:last-child{ color:var(--p-sienna); }
.plan-honesty[open] > summary span:first-child{ color:var(--p-sienna); }
.plan-amf{ border-inline-start:2px solid var(--p-amber); padding-inline-start:1rem; }

.plan-blocked,
.plan-dose,
.plan-management{
  margin-block:1rem;
  padding:.85rem 1rem;
  border-inline-start:3px solid var(--p-sienna);
  background:var(--p-sienna-bg);
  font-size:.88rem;
  line-height:1.55;
  color:var(--p-ink-2);
}
.plan-management{ border-inline-start-color:var(--p-verdigris); background:var(--p-verdigris-bg); }

/* ==========================================================================
   OPTIONS
   ========================================================================== */

.plan-options{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));
  border:1px solid var(--p-rule);
  background:var(--p-panel);
}
.plan-option{
  padding:1.15rem 1.15rem 1.25rem;
  border-inline-end:1px solid var(--p-rule);
}
.plan-option:last-child{ border-inline-end:0; }
.plan-option h3{
  margin:0;
  font-family:var(--p-data);
  font-size:var(--p-label-size);
  font-weight:600;
  letter-spacing:var(--p-label-track);
  text-transform:uppercase;
  color:var(--p-muted);
}
.plan-option-figure{
  margin:.5rem 0 0;
  font-family:var(--p-display);
  font-size:var(--step-4);
  line-height:1.05;
  letter-spacing:-.025em;
  color:var(--p-verdigris);
  font-variant-numeric:tabular-nums;
}
.plan-option-total{
  margin:.25rem 0 0;
  font-family:var(--p-data);
  font-size:.76rem;
  color:var(--p-muted);
}

/* ==========================================================================
   TABLES
   ========================================================================== */

.table-scroll{ overflow-x:auto; }
.plan-money-table,
.plan-contrib-table{
  inline-size:100%;
  border-collapse:collapse;
  font-size:.88rem;
}
.plan-money-table th,
.plan-contrib-table th{
  font-family:var(--p-data);
  font-size:var(--p-label-size);
  font-weight:600;
  letter-spacing:var(--p-label-track);
  text-transform:uppercase;
  color:var(--p-muted);
  text-align:start;
  padding:0 .75rem .6rem;
  border-block-end:1.5px solid var(--p-ink);
  white-space:nowrap;
}
.plan-money-table td,
.plan-contrib-table td{
  padding:.7rem .75rem;
  border-block-end:1px solid var(--p-rule-soft);
  font-variant-numeric:tabular-nums;
}
.plan-money-table td:first-child,
.plan-contrib-table td:first-child{ font-weight:600; }
.plan-money-table tr.is-loss td{ color:var(--p-sienna); }

/* ==========================================================================
   ESTABLISHMENT
   ========================================================================== */

.establish{ border:1px solid var(--p-rule); background:var(--p-panel); padding:1.3rem 1.15rem; }
/* The yield answer, restated before the planting case is offered (218).
   Logical properties throughout, so the rule sits on the correct edge when
   the document is right-to-left. */
.est-fallback{
  margin-block:0 1.15rem;
  padding:.85rem 1rem;
  border-inline-start:3px solid var(--p-sienna);
  background:var(--p-sienna-bg);
  font-size:.88rem;
  line-height:1.6;
  color:var(--p-ink-2);
  max-inline-size:68ch;
}
.est-figures{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr));
  margin-block:1.15rem 0;
  border-block-start:1.5px solid var(--p-ink);
}
.est-fig{
  padding:.85rem 1rem;
  border-inline-end:1px solid var(--p-rule);
}
.est-fig:last-child{ border-inline-end:0; }
.est-fig-key{ background:var(--p-verdigris-bg); }
.est-n{
  margin:0;
  font-family:var(--p-display);
  font-size:var(--step-3);
  line-height:1;
  color:var(--p-ink);
  font-variant-numeric:tabular-nums;
}
.est-fig-key .est-n{ color:var(--p-verdigris); }
.est-l{
  margin:.35rem 0 0;
  font-family:var(--p-data);
  font-size:.68rem;
  line-height:1.4;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--p-muted);
}
.est-note{
  margin-block:1.15rem 0;
  padding-block-start:.85rem;
  border-block-start:1px solid var(--p-rule-soft);
  font-size:.85rem;
  line-height:1.6;
  color:var(--p-muted);
}

/* ==========================================================================
   SUMMARY, ESTIMATE, PILOT
   ========================================================================== */

.plan-summary,
.plan-estimate{
  margin-block:1.5rem;
  border:1px solid var(--p-rule);
  background:var(--p-panel);
  padding:1.15rem;
}
.plan-summary dl,
.plan-estimate dl{ margin:0; display:grid; gap:.45rem; }
.plan-summary dt,
.plan-estimate dt{
  font-family:var(--p-data);
  font-size:var(--p-label-size);
  letter-spacing:var(--p-label-track);
  text-transform:uppercase;
  color:var(--p-muted);
}
.plan-summary dd,
.plan-estimate dd{
  margin:0;
  font-family:var(--p-data);
  font-size:.9rem;
  font-variant-numeric:tabular-nums;
}
.plan-variable{ color:var(--p-sienna); }

.plan-pilot{ border-block-start:2px solid var(--p-ink); padding-block-start:1.15rem; }
.plan-pilot p{ font-size:var(--step-0); color:var(--p-ink-2); max-width:64ch; }
.plan-pilot-links{ display:flex; gap:1.4rem; flex-wrap:wrap; margin-block-start:.75rem; }
.plan-pilot-links a{
  font-family:var(--p-data);
  font-size:.76rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--p-sienna);
  text-underline-offset:.28em;
}
.plan-pilot-links a:hover{ color:var(--p-ink); }

/* ==========================================================================
   ACTIONS
   ========================================================================== */

.plan-actions{
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
  margin-block-start:2.4rem;
  padding-block-start:1.35rem;
  border-block-start:1px solid var(--p-rule);
}
.primary-action,
.quiet-action{
  font-family:var(--p-data);
  font-size:.74rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  padding:1rem 2.1rem;
  border:1.5px solid var(--p-ink);
  border-radius:0;
  cursor:pointer;
  transition:background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.primary-action{ background:var(--p-ink); color:var(--p-paper); }
.primary-action:hover{ background:var(--p-sienna); border-color:var(--p-sienna); }
.quiet-action{ background:transparent; color:var(--p-ink); }
.quiet-action:hover{ background:var(--p-ink); color:var(--p-paper); }

/* ==========================================================================
   UTILITY
   ========================================================================== */

.mono{ font-family:var(--p-data); font-variant-numeric:tabular-nums; }
.visually-hidden{
  position:absolute; inline-size:1px; block-size:1px; margin:-1px; padding:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}
/* The planting figures, revealed for any crop that is planted once rather
   than hidden behind a question the route now answers itself (issue 221). */
#plan-trees-field{ margin-block-start:1rem; }

@media (max-width:520px){
  .verdict-facts{ grid-template-columns:1fr; }
  .verdict-facts > div{
    border-inline-end:0;
    border-block-end:1px solid var(--p-rule);
  }
  .verdict-facts > div:last-child{ border-block-end:0; }
  .plan-option{ border-inline-end:0; border-block-end:1px solid var(--p-rule); }
  .plan-option:last-child{ border-block-end:0; }
  .est-fig{ border-inline-end:0; border-block-end:1px solid var(--p-rule); }
  .est-fig:last-child{ border-block-end:0; }
}
@media (max-width:430px){
  .vbar-row{ grid-template-columns:1fr auto; }
  .vbar-label{ grid-column:1; }
  .vbar-value{ grid-column:2; }
  .vbar-track{ grid-column:1 / -1; block-size:1.2rem; }
}
@media (prefers-reduced-motion:reduce){
  .vbar-fill{ transition:none; }
}

/* ---- break-even (issue 197) ---- */
.breakeven{
  margin-block-start:1.3rem;
  padding-block-start:1.1rem;
  border-block-start:1.5px solid var(--p-ink);
}
.breakeven h3{
  margin:0 0 .7rem;
  font-family:var(--p-data);
  font-size:var(--p-label-size);
  font-weight:600;
  letter-spacing:var(--p-label-track);
  text-transform:uppercase;
  color:var(--p-muted);
}
.be-rows{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));
  margin:0;
  border:1px solid var(--p-rule);
}
.be-rows > div{ padding:.8rem 1rem; border-inline-end:1px solid var(--p-rule); }
.be-rows > div:last-child{ border-inline-end:0; }
.be-key{ background:var(--p-sienna-bg); }
.be-rows dt{
  font-family:var(--p-data);
  font-size:.66rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--p-muted);
  line-height:1.4;
}
.be-rows dd{
  margin:.3rem 0 0;
  font-family:var(--p-display);
  font-size:var(--step-2);
  line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.be-key dd{ color:var(--p-sienna); }
.be-note{
  margin-block-start:.9rem;
  font-size:.83rem;
  line-height:1.6;
  color:var(--p-muted);
}
@media (max-width:520px){
  .be-rows > div{ border-inline-end:0; border-block-end:1px solid var(--p-rule); }
  .be-rows > div:last-child{ border-block-end:0; }
}

/* ==========================================================================
   THE NATIONAL PROGRAMME SECTION (issue 225)

   Hidden unless `?programme` is on the URL, and never linked from the
   farmer route — see assets/programme_view.js for why the boundary is not
   stylistic. Styled from the same tokens as everything else so an
   institutional reader is not handed a second-class page.
   ========================================================================== */
.plan-programme{
  margin-block-start:var(--p-block-gap, 2rem);
  padding:1.1rem clamp(1rem,3vw,1.5rem);
  border:1px solid var(--p-rule);
  border-radius:var(--p-radius, 4px);
}
.plan-programme h2{ margin-block:0 .35rem; }
.programme-rows{
  display:grid;
  grid-template-columns:1fr auto;
  gap:.35rem 1rem;
  margin-block:.9rem;
}
.programme-rows dt{ color:var(--p-muted); font-size:.86rem; }
.programme-rows dd{
  margin:0;
  font-family:var(--p-data);
  font-variant-numeric:tabular-nums;
  text-align:end;
  /* Figure-only readouts, exactly as the block near the top of this file
     describes. English today; the rule costs nothing and means whoever
     translates this section does not have to remember it. */
  unicode-bidi:plaintext;
}

/* The establishment ladder (issue 234). The value column reuses
   .programme-value for its bidirectional treatment: "150 $" has no strong
   character, so under RTL it would otherwise render "$ 150". */
.be-ladder { width: 100%; border-collapse: collapse; margin-block: 0.75rem; }
.be-ladder th,
.be-ladder td { padding-block: 0.4rem; text-align: start; }
.be-ladder th { font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.65; font-weight: 500; }
.be-ladder td:last-child,
.be-ladder th:last-child { text-align: end; font-variant-numeric: tabular-nums; }
.be-ladder tbody tr + tr { border-block-start: 1px solid color-mix(in srgb, currentColor 12%, transparent); }
.be-ladder .is-break-even { font-weight: 600; }
.be-ladder-title { font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.65; font-weight: 500; margin-block: 1rem 0; }

/* WHERE THE SOIL FIGURES CAME FROM (issue 215).
   ---------------------------------------------------------------------
   The archetype must never render in the same voice as a reading. Each
   line carries its own provenance class, set in the markup rather than in
   the sentence, so the distinction survives translation into all three
   catalogues and cannot be lost by a rewording. */
.soil-provenance{
  display:flex;
  flex-direction:column;
  gap:.3rem;
  margin-block-start:.4rem;
  font-size:.8rem;
  line-height:1.5;
}
.soil-provenance-line{
  border-inline-start:2px solid currentColor;
  padding-inline-start:.55rem;
  color:var(--p-muted);
}
/* A figure that is NOT a reading of this field. Muted and marked, so it
   cannot be mistaken for one. */
.soil-provenance-line.is-archetype{ font-style:italic; }
/* A reading, but of ground somewhere else — the farmer decides whether the
   distance is acceptable, so it is the one that carries weight. */
.soil-provenance-line.is-displaced{ color:var(--p-ink); font-weight:500; }
/* Read, but from a layer known to be wrong here. */
.soil-provenance-line.is-estimate{ font-style:italic; }
@media (prefers-reduced-motion:reduce){ .soil-provenance-line{ transition:none; } }