/* Program builder: the season's plan, stage by stage, with QuorumAI, the checks and the wiki
   beside it, and a wall chart for the shed when it prints. */

.hub--program {
  --m-planting: #f7d26a; --m-soil: #e7c49c; --m-fertigation: #bcd9e6; --m-foliar: #c6de7e;
  /* each mineral's tile, the site's one pale colour for it (components.css) */
  --e-N: var(--min-n-pale); --e-P: var(--min-p-pale); --e-K: var(--min-k-pale); --e-Ca: var(--min-ca-pale); --e-Mg: var(--min-mg-pale);
  --e-S: var(--min-s-pale); --e-Si: var(--min-si-pale); --e-B: var(--min-b-pale); --e-Mn: var(--min-mn-pale); --e-Zn: var(--min-zn-pale);
  --e-Cu: var(--min-cu-pale); --e-Fe: var(--min-fe-pale); --e-Mo: var(--min-mo-pale);
}
/* the free builder on the public site has no hub menu under the fixed header to clear it (learn.js measures it) */
.hub-page--open > main { padding-top: var(--head-h, 3.6rem); }
/* and QuorumAI is for members, so there what it does is said only to a member signed in (program.js,
   setVisitor; the 27 Oct review, builder row 4) */
.hub-page--open .hub--program:not(.is-member) [data-for-members] { display: none; }
/* the builder takes more of a wide screen than the reading pages, so the plan and its help sit side by side */
.pb__wrap, .pb-crops > .wrap { width: min(100% - 2 * var(--gutter), 88rem); }

/* Opener: the season's plan on the bench ----------------------------------------------------------- */
.pb-open { position: relative; padding-block: clamp(1.8rem, 5vh, 3.4rem) clamp(0.6rem, 2vw, 1.4rem); overflow: hidden; }
.pb-open__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: clamp(1.4rem, 4vw, 4rem); align-items: center; }
.pb-open h1 { margin-top: 0.85rem; max-width: 12ch; font-size: clamp(2.5rem, min(4.8vw, 8vh), 4.7rem); }
.pb-open .lede { margin-top: 1rem; max-width: 31rem; }
.pb-open__how { list-style: none; margin: 1.3rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.3rem; font-weight: 700; font-size: 0.95rem; color: var(--ink-2); }
.pb-open__how li { display: inline-flex; align-items: center; gap: 0.45rem; }
.pb-open__how svg { width: 1.25rem; height: 1.25rem; color: var(--earth); }
.pb-open__art { margin: 0; justify-self: end; width: min(100%, 36rem); }
/* the painting's paper is the card's; multiplied, it sits straight on the page */
.pb-open__art img { mix-blend-mode: multiply; }
.pb-open__art .art__over .art__hand { stroke: var(--paper); }
@media (max-width: 860px) {
  .pb-open__grid { grid-template-columns: 1fr; }
  .pb-open__art { justify-self: center; width: min(100%, 30rem); }
}
/* on a phone, once the plan is the grower's own, the painting makes way for it (program.js, data-own) */
@media (max-width: 760px) {
  .hub--program[data-own] .pb-open__art { display: none; }
}

/* Start a plan: Steve's crops, and the families for everything else ----------------------------------- */
.pb-crops { padding-block: clamp(0.6rem, 2vw, 1.4rem) clamp(1.4rem, 3vw, 2.2rem); }
.pb-crops__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.2rem 1.5rem; margin-bottom: 0.9rem; }
.pb-crops__head h2 { font-size: var(--step-2); }
/* folded, once the plan is theirs: a line about it, and the crops behind a button */
.pb-crops__open { align-self: center; }
/* nine crops and Build your own: two rows of five on a wide screen */
.pb-crops__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(0.45rem, 1.3vw, 0.9rem); }
.pb-crop {
  width: 100%; height: 100%; display: grid; justify-items: center; align-content: start; gap: 0.1rem; padding: 0.5rem 0.4rem 0.7rem;
  font: inherit; color: inherit; text-align: center; cursor: pointer;
  background: var(--card); border: 2px solid transparent; border-radius: 16px 14px 17px 13px; box-shadow: var(--shadow-paper);
  transition: transform 0.25s var(--ease-grow), border-color 0.2s ease, box-shadow 0.2s ease;
}
.pb-crop:hover { transform: translateY(-3px) rotate(-0.7deg); }
.pb-crop:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.pb-crop[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 3px 0 var(--ink); }
.pb-crop__art { display: block; width: 58%; aspect-ratio: 1; }
.pb-crop__art img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.pb-crop__name { font-family: var(--f-display); font-weight: 650; font-size: 1.08rem; line-height: 1.15; }
.pb-crop__days { font-size: 0.76rem; font-weight: 650; line-height: 1.25; color: var(--ink-3); }
/* whose template it is: Steve's own program, or a draft (v1 review, builder repair 7) */
.pb-crop__who { margin-top: 0.3rem; padding: 0.05rem 0.5rem; border: 1.5px dashed var(--rule); border-radius: 999px; font-size: 0.75rem; font-weight: 750; line-height: 1.4; color: var(--ink-3); }
.pb-crop__who[data-who="steve"] { border: 1.5px solid var(--ink); background: var(--wattle); color: var(--ink); }
.pb-fams__said { margin: 0.2rem 0 0; font-size: 0.9rem; }
@media (max-width: 1100px) { .pb-crops__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* on a phone each crop lies on its side, the painting beside its name, two to a row, so the ten take five short
   rows and a name like Avocados keeps to its card with a reader's own letter spacing; on the narrowest phones (and
   a desktop zoomed to 400%) they go one to a row */
@media (max-width: 560px) {
  .pb-crops__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pb-crop { grid-template-columns: 3.2rem minmax(0, 1fr); justify-items: start; align-items: center; align-content: center; gap: 0 0.55rem; padding: 0.35rem 0.6rem 0.35rem 0.3rem; text-align: left; }
  .pb-crop__art { grid-row: span 3; width: 100%; }
  .pb-crop__name { align-self: end; font-size: 1rem; }
  .pb-crop__days { align-self: start; }
  /* at 12 px "Steve’s program" takes two lines on a phone: a tag, not a pill */
  .pb-crop__who { margin-top: 0.15rem; padding: 0.05rem 0.35rem; border-radius: 0.4rem; line-height: 1.25; }
}
@media (max-width: 359px) { .pb-crops__list { grid-template-columns: minmax(0, 1fr); } }

.pb-fams { margin-top: clamp(1.3rem, 3vw, 2rem); }
.pb-fams__sum { display: flex; align-items: baseline; gap: 0.6rem; width: fit-content; cursor: pointer; list-style: none; }
.pb-fams__sum::-webkit-details-marker { display: none; }
.pb-fams__sum::after { content: "▾"; content: "▾" / ""; color: var(--ink-3); transition: rotate 0.2s ease; }
.pb-fams:not([open]) .pb-fams__sum::after { rotate: -90deg; }
.pb-fams__sum:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.pb-fams__title { font-family: var(--f-display); font-weight: 650; font-size: var(--step-1); line-height: 1.25; }
/* three groups side by side, a list of families down each */
.pb-fams__groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 1.1rem clamp(0.8rem, 2vw, 1.4rem); margin-top: 0.8rem; }
.pb-fams__label { margin-bottom: 0.45rem; font: 800 0.72rem/1.2 var(--f-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--earth); }
.pb-fams__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.pb-fam {
  width: 100%; height: 100%; display: grid; align-content: start; gap: 0.15rem; padding: 0.65rem 0.85rem 0.75rem;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  background: var(--card); border: 1.5px solid var(--rule); border-radius: 12px 10px 13px 11px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.pb-fam:hover { border-color: var(--ink); }
.pb-fam:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.pb-fam[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 2px 0 var(--ink); }
.pb-fam__name { font-weight: 750; line-height: 1.25; }
.pb-fam__eg { font-size: 0.8rem; line-height: 1.35; color: var(--ink-3); }
.pb-fams__ask { margin-top: 0.75rem; max-width: 52rem; font-size: 0.93rem; color: var(--ink-2); }
@media (max-width: 760px) { .pb-fams__groups { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .pb-fams__list { gap: 0.35rem; } .pb-fam { padding: 0.55rem 0.8rem 0.6rem; } }

/* Build your own, in the start dialog: the four steps from its stages to its schedule */
.pb-own { margin: 0.9rem 0 0; padding-left: 1.4rem; display: grid; gap: 0.3rem; font-size: 0.93rem; color: var(--ink-2); }
.pb-own b { color: var(--ink); }
.pb-own__hub { margin-top: 0.8rem; font-size: 0.9rem; color: var(--ink-2); }
.pb-dialog__acts .btn svg { width: 1.05rem; height: 1.05rem; }

/* The free builder's first visit (program.js, renderStart): "Start your plan.", one question, and
   the crops, larger, five to a row (four on a tablet); the plan, and Steve's eyes on it, come once a crop is picked */
.pb-crops__peek { display: none; }
.is-starting :is(.pb, .pb-eyes, .pb-open__art, .pb-open__how, .pb-open .lede, [data-crops-said]) { display: none; }
/* the heading's words for each (builder.html), and the free builder's page arriving as a first visit
   (program-builder.html's <body class="is-starting">), so a weak signal doesn't jump when program.js lands */
[data-starting], .is-starting [data-planning] { display: none; }
.is-starting [data-starting] { display: inline; }
.is-starting .pb-open__grid { grid-template-columns: minmax(0, 1fr); }
.is-starting .pb-open h1 { max-width: none; }
.is-starting .pb-crops { padding-bottom: clamp(3rem, 7vw, 5.5rem); }
.is-starting .pb-crops__head h2 { font-size: var(--step-3); }
.is-starting .pb-crops__list { max-width: 78rem; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(0.6rem, 1.6vw, 1.1rem); }
.is-starting .pb-crop { padding: 0.8rem 0.6rem 1rem; }
.is-starting .pb-crop__art { width: 80%; }
.is-starting .pb-crop__name { font-size: 1.3rem; }
.is-starting .pb-crop__days { font-size: 0.85rem; }
.is-starting .pb-crops__peek { display: block; margin-top: 1rem; font-weight: 700; }
@media (max-width: 1100px) { .is-starting .pb-crops__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .is-starting .pb-crops__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .is-starting .pb-crop { grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: start; gap: 0.1rem; padding: 0.6rem 0.4rem 0.8rem; text-align: center; }
  .is-starting .pb-crop__art { grid-row: auto; width: 74%; }
  .is-starting .pb-crop__name { font-size: 1.15rem; }
}
@media (max-width: 359px) { .is-starting .pb-crops__list { grid-template-columns: minmax(0, 1fr); } }

/* The plan ------------------------------------------------------------------------------------- */
.pb { padding-block: 0 clamp(3rem, 7vw, 5.5rem); }
.pb-noscript { margin-top: 1rem; }
/* The start notice waits fifteen seconds: a builder that opens before then never shows it (on a phone it
   pushed the opener down and jumped away on every visit). On Slow 4G with a phone's CPU the builder
   takes about ten (qag-2hfi), so six showed it to every grower on a weak signal, then took it away.
   One that couldn't start shows it at once. CSS, not the boot script, so it still shows if the script
   never loads; reduced motion keeps the delay. */
[data-program-start] { max-height: 0; overflow: hidden; visibility: hidden; animation: pb-start-late 0.001ms 15s forwards; }
[data-program-start][role="alert"] { max-height: none; visibility: visible; animation: none; }
@keyframes pb-start-late { to { max-height: 60rem; visibility: visible; } }

/* The plan's header: its crop, name and details, and what you can do with it */
.pb-bar {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.3rem clamp(0.8rem, 2vw, 1.4rem); align-items: center;
  padding: clamp(0.9rem, 2vw, 1.3rem) 0 1rem; border-top: 1px solid var(--rule);
}
.pb-bar__crop { display: grid; place-items: center; width: clamp(3.2rem, 6vw, 4.4rem); aspect-ratio: 1; border-radius: 50%; background: var(--card); border: 2px solid var(--ink); overflow: hidden; box-shadow: 0 2px 0 var(--ink); }
.pb-bar__crop img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; mix-blend-mode: multiply; }
.pb-bar__icon { width: 58%; height: 58%; color: var(--canopy-2); }
.pb-bar__main { min-width: 0; }
.pb-bar__name {
  width: 100%; padding: 0.05rem 0.2rem; margin-left: -0.2rem; border: 0; border-bottom: 2px dashed transparent; border-radius: 4px 4px 0 0;
  background: transparent; color: var(--ink); font-family: var(--f-display); font-weight: 600; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); line-height: 1.15;
  font-variation-settings: "SOFT" 60;
}
.pb-bar__name::placeholder { color: var(--ink-3); opacity: 1; }
.pb-bar__name:hover { border-bottom-color: var(--rule); }
.pb-bar__name:focus { outline: none; border-bottom-color: var(--wattle); background: rgba(247, 210, 106, 0.14); }
.pb-bar__what { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.9rem; margin-top: 0.2rem; }
.pb-bar__cropname { font-weight: 750; font-size: 0.9rem; color: var(--earth-2); }
.pb-bar__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; margin-top: 0.45rem; }
.pb-meta { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; font-weight: 650; color: var(--ink-2); }
.pb-meta > span { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.pb-meta .pb-in { padding: 0.3rem 0.5rem; font-size: 0.9rem; }
.pb-meta .pb-in--area { width: 4.6rem; }
.pb-meta .pb-in--unit { width: auto; padding-right: 0.3rem; }
.pb-meta .pb-in--block { width: 9rem; }
.pb-meta .pb-in--district { width: 10rem; }
/* the crop's year: young or bearing, the ratoon, the crop load */
.pb-meta .pb-in--year { width: auto; max-width: 15rem; }
/* a block's year: the crop before this one on the block */
.pb-bar__after { margin: 0 0 0.2rem; font-size: 0.86rem; font-weight: 650; color: var(--ink-2); }
.pb-bar__after .pb-link { margin-left: 0.3rem; }
/* a lane on the chart: last season's crop still on, beside this season's */
.pbc__carry rect { fill: var(--card); fill-opacity: 0.78; stroke: var(--earth-2); stroke-width: 1.5; stroke-dasharray: 5 3; }
.pbc__carry text { font-weight: 750; font-size: 12px; fill: var(--earth-2); }
.pb-check__general { font-style: italic; }
/* what you can do with the plan: a row of its own under its details, at every width, so the name keeps its room */
/* Leave the 3px focus ring and its offset clear of the next button's dark border and shadow. */
.pb-bar__acts { grid-column: 2; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 1rem; margin-top: 0.3rem; }
.pb-bar__acts .btn[disabled] { opacity: 0.45; pointer-events: none; }
/* its menus open from their own left edge, as the row starts at the left */
.pb-bar__acts .pb-menu__panel { left: 0; right: auto; }
.pb-bar__status { grid-column: 2 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 1rem; }
.pb-bar__saved { font-size: 0.8rem; font-weight: 700; color: var(--ink-3); }
.pb-bar__saved.is-bad { color: var(--earth); }
.pb-bar__saved a { color: var(--canopy); font-weight: 800; }
.pb-bar__example { flex-basis: 100%; font-size: 1.25rem; line-height: 1.1; color: var(--earth); }
/* On a phone: the crop beside the name, then the details in one column with their boxes lined up,
   and the buttons filling their rows */
@media (max-width: 760px) {
  .pb-bar__main { display: contents; }
  .pb-bar__crop { grid-row: 1; grid-column: 1; width: 3rem; }
  .pb-bar__name { grid-row: 1; grid-column: 2; }
  .pb-bar__after, .pb-bar__what, .pb-bar__meta { grid-column: 1 / -1; }
  .pb-bar__meta { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.45rem; }
  .pb-meta { display: grid; grid-template-columns: 6.2rem minmax(0, 1fr); }
  .pb-meta .pb-in { width: 100%; max-width: 17rem; }
  .pb-meta--area { grid-template-columns: 6.2rem 5.5rem max-content; }
  .pb-meta--area .pb-in--unit { width: auto; }
  .pb-bar__acts { grid-column: 1 / -1; }
  .pb-bar__acts > * { flex: 1 1 auto; }
  .pb-bar__acts .pb-menu > summary { width: 100%; justify-content: center; }
  .pb-bar__status { grid-column: 1 / -1; }
}

/* how the plan stands against the checks, in a word; it opens them */
.pb-bar__rules {
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.28rem 0.75rem 0.28rem 0.35rem;
  font: inherit; font-weight: 750; font-size: 0.85rem; line-height: 1.2; color: var(--ink); cursor: pointer;
  background: transparent; border: 1.5px solid var(--rule); border-radius: 999px; transition: background-color 0.2s ease;
}
.pb-bar__rules:hover { background: var(--paper-2); }
.pb-bar__rules:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.pb-bar__rules:empty { display: none; }
.pb-bar__rules .pb-tick { width: 1.25rem; height: 1.25rem; }
.pb-bar__mark { display: grid; place-items: center; width: 1.3rem; height: 1.3rem; border-radius: 50%; border: 1.5px solid var(--ink); font-size: 0.75rem; font-weight: 800; line-height: 1; }
.pb-bar__rules.is-steer { border-color: var(--earth); background: rgba(160, 63, 36, 0.08); }
.pb-bar__rules.is-steer .pb-bar__mark { background: var(--earth); color: var(--paper); }
.pb-bar__rules.is-look { border-color: #b88a24; background: rgba(242, 182, 50, 0.14); }
.pb-bar__rules.is-look .pb-bar__mark { background: var(--wattle); }
.pb-bar__rules.is-ok { padding-left: 0.45rem; border-color: rgba(63, 125, 58, 0.5); }
/* an empty plan: nothing counted yet */
.pb-bar__rules.is-quiet { padding-left: 0.45rem; font-weight: 650; color: var(--ink-2); }

/* An empty plan's two ways to start, above its stages (program.js) */
.pb-empty { margin-block: 0.4rem 1.2rem; padding: clamp(1rem, 2.5vw, 1.4rem); border: 2px solid var(--ink); }
.pb-empty__title { margin: 0; font-family: var(--f-display); font-size: 1.3rem; font-weight: 600; }
.pb-empty__ways { list-style: none; margin: 0.8rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem 1.4rem; }
.pb-empty__ways li { display: grid; justify-items: start; gap: 0.45rem; }
.pb-empty__ways span { color: var(--ink-2); font-size: 0.95rem; }

/* a button that reads as a link, for small things beside text */
.pb-link {
  padding: 0; border: 0; background: none; font: inherit; font-weight: 750; font-size: 0.88rem; color: var(--earth-2); cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.2em;
}
.pb-link:hover { color: var(--ink); }
.pb-link:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 3px; }
/* a hub tool on the free builder: locked, and it goes to joining */
.pb-link--hub { display: inline-flex; align-items: center; gap: 0.2rem; }
.pb-link--hub svg { flex: none; width: 0.95em; height: 0.95em; }

/* the versions and files menu, and the grower's products */
.pb-menu { position: relative; }
.pb-menu > summary { list-style: none; }
/* a closed menu's panel takes no room (the browser still lays out a closed details' content) */
.pb-menu:not([open]) > .pb-menu__panel { display: none; }
.pb-menu > summary::-webkit-details-marker { display: none; }
.pb-menu > summary::after { content: "▾"; content: "▾" / ""; font-size: 0.8em; }
.pb-menu__panel {
  position: absolute; right: 0; top: calc(100% + 0.5rem); z-index: 45; width: min(21rem, 86vw); padding: 0.6rem;
  background: var(--card); border: 2px solid var(--ink); border-radius: 14px 12px 15px 11px; box-shadow: 0 22px 44px -24px rgba(40, 30, 10, 0.6);
}
.pb-menu__item { display: flex; width: 100%; align-items: center; gap: 0.5rem; padding: 0.55rem 0.6rem; border: 0; border-radius: 8px; background: none; font: inherit; font-weight: 700; font-size: 0.92rem; text-align: left; color: var(--ink); cursor: pointer; }
.pb-menu__item:hover, .pb-menu__item:focus-visible { background: var(--paper-2); }
.pb-menu__item svg { width: 1.1rem; height: 1.1rem; flex: none; }
.pb-menu__label { margin: 0.5rem 0.6rem 0.2rem; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.pb-menu__versions { list-style: none; margin: 0; padding: 0; max-height: 13rem; overflow-y: auto; }
.pb-menu__versions .pb-menu__item { font-weight: 600; }
.pb-menu__versions small { margin-left: auto; font-size: 0.75rem; color: var(--ink-3); white-space: nowrap; }
.pb-menu__none { margin: 0.2rem 0.6rem 0.4rem; font-size: 0.88rem; color: var(--ink-3); }
/* Your blocks: each block's name over its crop, season and when it was changed (program.js renderMenu) */
.pb-menu__versions--blocks .pb-menu__item { flex-direction: column; align-items: flex-start; gap: 0.1rem; }
.pb-menu__versions--blocks small, .pb-menu__now small { display: block; margin: 0; white-space: normal; font-size: 0.78rem; font-weight: 600; color: var(--ink-3); }
.pb-menu__now { margin: 0 0.6rem 0.3rem; font-weight: 700; font-size: 0.92rem; }
.pb-menu hr { margin: 0.5rem 0.3rem; border: 0; border-top: 1px solid var(--rule); }
/* Email me my plan (program.js mailForm): the fields one under another, and the box with its words */
.pb-mail { display: grid; gap: 0.55rem; padding: 0.7rem 0.8rem 0.8rem; }
.pb-mail .pb-menu__label { margin: 0; }
.pb-mail__what, .pb-mail__small { margin: 0; font-size: 0.86rem; line-height: 1.4; color: var(--ink-2); }
.pb-mail__field { display: grid; gap: 0.25rem; font-size: 0.88rem; font-weight: 650; color: var(--ink-2); }
.pb-mail__field small { font-size: 0.75rem; font-weight: 500; color: var(--ink-3); }
.pb-mail__field .pb-in { width: 100%; min-width: 0; }
.pb-mail__tick { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.55rem; align-items: start; font-size: 0.86rem; line-height: 1.4; cursor: pointer; }
.pb-mail__tick input { width: 1.15rem; height: 1.15rem; margin: 0.1rem 0 0; accent-color: var(--green); }
.pb-mail .btn { justify-self: start; }
.pb-mail .form-note, .pb-mail .form-problem { margin: 0; }
.pb-mail .form-note { font-size: 1.15rem; }
.pb-mail.is-sending [type="submit"] { opacity: 0.6; pointer-events: none; }
/* the season in the grower's calendar: what goes in, and the day they walk */
.pb-cal { display: grid; margin: 0.3rem 0 0.35rem; padding: 0; border: 0; min-width: 0; }
.pb-cal__row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.55rem; min-height: 2.5rem; padding: 0.2rem 0.6rem; border-radius: 8px; font-weight: 650; font-size: 0.92rem; cursor: pointer; }
.pb-cal__row:hover { background: var(--paper-2); }
.pb-cal__row label { display: inline-flex; align-items: center; gap: 0.55rem; cursor: pointer; }
.pb-cal__row > input, .pb-cal__row label > input { flex: none; width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--canopy); }
.pb-cal__row select { padding-block: 0.3rem; }
/* a tick beside words that wrap, not over them */
.pb-cal__row--long { flex-wrap: nowrap; align-items: flex-start; padding-block: 0.45rem; }
.pb-cal__row--long > input { margin-top: 0.15rem; }
/* plantings of the program: each on its date, with its own days; more added every so many days */
.pb-pl { width: min(24rem, 92vw); max-height: min(70vh, 34rem); overflow: auto; }
.pb-pl__list { display: grid; gap: 0.3rem; margin: 0.2rem 0 0.4rem; padding: 0; list-style: none; }
.pb-pl__row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.6rem; padding: 0.35rem 0.6rem; border-radius: 8px; background: var(--paper-2); }
.pb-pl__row.is-first { background: none; }
.pb-pl__n { flex: 1 0 100%; font-weight: 750; font-size: 0.9rem; }
.pb-pl__row.is-first .pb-pl__n { flex: none; }
.pb-pl__when { font-size: 0.88rem; color: var(--ink-2); }
.pb-pl__row .pb-x { margin-left: auto; }
.pb-pl .pb-in--days { width: 4.6rem; }
.pb-pl__add { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.7rem; margin: 0.4rem 0 0; padding: 0.2rem 0.6rem 0.4rem; border: 0; border-top: 1.5px solid var(--rule); min-width: 0; }
.pb-pl__add legend { padding: 0.5rem 0 0.1rem; margin: 0; }
.pb-pl__add .pb-menu__item { width: auto; }
.pb-pl__add .form-problem { flex: 1 0 100%; margin: 0; }
/* on a phone a menu is a sheet at the foot of the screen, over the Ask QuorumAI button and the prototype bar,
   held on its side or upright (program.js SHEET). Under it is a Close, and over the page a scrim that takes
   the tap meant to shut it, so that tap opens nothing under it (qag-ehe6d). */
.pb-menu__close, .pb-menu__scrim { display: none; }
@media (max-width: 760px), (pointer: coarse) and (max-height: 500px) {
  .pb-menu[open] > .pb-menu__panel { position: fixed; left: var(--gutter); right: var(--gutter); top: auto; bottom: calc(1.5rem + 44px + env(safe-area-inset-bottom, 0px)); z-index: 72; width: auto; max-width: 36rem; margin-inline: auto; max-height: calc(100svh - 4.5rem - 44px - env(safe-area-inset-bottom, 0px)); overflow-y: auto; overscroll-behavior: contain; }
  .pb-menu[open] > .pb-menu__close { display: flex; position: fixed; left: var(--gutter); right: var(--gutter); bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); z-index: 72; max-width: 36rem; margin-inline: auto; min-height: 44px; }
  .pb-menu[open] > .pb-menu__scrim { display: block; position: fixed; inset: 0; z-index: 71; background: rgba(30, 43, 34, 0.45); }
}

/* Form bits the builder shares */
.pb-in {
  min-width: 0; padding: 0.45rem 0.6rem; font: inherit; font-size: 0.95rem; color: var(--ink);
  background: #fffdf8; border: 1.5px solid rgba(30, 43, 34, 0.5); border-radius: 9px 8px 10px 7px;
}
.pb-in:focus { outline: 3px solid var(--focus); outline-offset: 1px; }
.pb-in:disabled { opacity: 0.55; }
textarea.pb-in { resize: vertical; line-height: 1.4; }
.pb-field { display: grid; gap: 0.25rem; min-width: 0; }
.pb-field > span, .pb-field > label { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
/* a label's aside, "optional" or "if it’s not the plan’s", in small letters at 12 px, the least a phone reads well (phone.cjs) */
.pb-field > label span, .pb-field > span small { font-size: 0.75rem; font-weight: 650; letter-spacing: 0.02em; text-transform: none; }
.pb-mini {
  display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.38rem 0.75rem; font: inherit; font-weight: 750; font-size: 0.85rem; line-height: 1.2;
  color: var(--ink); text-decoration: none; background: transparent; border: 1.5px solid var(--ink); border-radius: 999px; cursor: pointer;
  transition: background-color 0.2s ease;
}
.pb-mini:hover { background: var(--paper-2); }
.pb-mini:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.pb-mini svg { width: 1rem; height: 1rem; }
.pb-mini--ai { border-color: var(--canopy-2); color: var(--canopy); }
.pb-mini--ai svg { color: var(--canopy-2); }
/* QuorumAI's own button: filled canopy, its mark in a gold disc; gold on canopy where it sits on green */
.pb-qai {
  display: inline-flex; align-items: center; gap: 0.55rem; min-height: 2.5rem; padding: 0.3rem 1rem 0.3rem 0.3rem; font: inherit; font-weight: 750; font-size: 0.9rem; line-height: 1.2;
  color: var(--paper); background: linear-gradient(135deg, var(--canopy-2), var(--canopy)); border: 0; border-radius: 999px; cursor: pointer;
  box-shadow: 0 1px 0 rgb(0 0 0 / 0.12), inset 0 1px 0 rgb(255 255 255 / 0.12); transition: filter 0.2s ease, transform 0.2s ease;
}
.pb-qai:hover { filter: brightness(1.12); }
.pb-qai:active { transform: translateY(1px); }
.pb-qai:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.pb-qai__mark { display: grid; place-items: center; flex: none; width: 1.9rem; height: 1.9rem; color: var(--canopy); background: var(--wattle); border-radius: 50%; }
.pb-qai__mark svg { width: 1.05rem; height: 1.05rem; }
.pb-qai--gold { color: var(--ink); background: var(--wattle); }
.pb-qai--gold .pb-qai__mark { color: var(--wattle); background: var(--canopy); }
@media (prefers-reduced-motion: reduce) { .pb-qai { transition: none; } .pb-qai:active { transform: none; } }
.pb-mini--learn { border-color: var(--rule); color: var(--ink-2); }
.pb-mini--learn svg { color: var(--earth); }
.pb-mini--danger { border-color: var(--earth); color: var(--earth-2); }
.pb-mini--keep { background: var(--wattle); }
.pb-mini--keep:hover { background: var(--wattle-2); }

/* element tiles, small: the nutrients a stage or a pass is about */
.pb-el {
  display: inline-grid; place-items: center; min-width: 1.7rem; height: 1.7rem; padding: 0 0.22rem;
  background: var(--c, var(--paper-2)); border: 1.5px solid var(--ink); border-radius: 5px 4px 6px 4px;
  font: 680 0.82rem/1 var(--f-display); font-variation-settings: "SOFT" 100, "WONK" 1; color: var(--ink);
}
.pb-el--sm { min-width: 1.35rem; height: 1.35rem; font-size: 0.76rem; border-width: 1.2px; }
.pb-fine { margin-top: 0.7rem; max-width: 60rem; }

/* Stage by stage, with QuorumAI, the checks and the wiki beside --------------------------------------- */
.pb-work { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(22rem, 1fr); gap: clamp(1.2rem, 2.6vw, 2.2rem); align-items: start; margin-top: clamp(1.2rem, 2.6vw, 1.8rem); }
@media (max-width: 980px) { .pb-work { grid-template-columns: minmax(0, 1fr); } }
/* In the builder, Tests and walks keeps the other tabs' width: widening it alone made it look bigger
   than the rest (Adam, 15 October 2026). On the desk, where Steve reads a client's charts beside their
   program on a laptop, it takes half the width while it's open (call J). */
@media (min-width: 1200px) { .desk-builder .pb-work.is-records { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.pb-stages { display: grid; gap: 1rem; }

/* over the stages: the critical ones by name, whose they are, one way to tune them all, and on the free
   builder the way into the hub (program.js, stagesHead) */
.pb-stages__head { padding: 0.1rem 0.2rem 0.2rem; }
.pb-tune { padding: 0.95rem 1.1rem 1rem; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-paper); }
.pb-tune__title { display: flex; align-items: center; gap: 0.45rem; font-family: var(--f-display); font-weight: 650; font-size: clamp(1.15rem, 1.05rem + 0.45vw, 1.35rem); line-height: 1.25; }
.pb-tune__why { margin-top: 0.5rem; max-width: 46rem; font-size: 0.9rem; color: var(--ink-2); }
.pb-stages__acts .btn svg { width: 1.05rem; height: 1.05rem; }
.pb-tune__hub { margin-top: 0.85rem; padding-top: 0.75rem; border-top: 1px dashed var(--rule); max-width: 46rem; font-size: 0.9rem; color: var(--ink-2); }
.pb-tune__hub b { color: var(--ink); }
.pb-tune__go { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.1rem; margin-top: 0.55rem; }
.pb-stages__title { font-family: var(--f-display); font-weight: 650; font-size: clamp(1.15rem, 1.05rem + 0.45vw, 1.35rem); line-height: 1.25; }
.pb-stages__title span { font-family: var(--f-body); font-size: 0.9rem; font-weight: 700; color: var(--ink-3); }
.pb-stages__lede { margin-top: 0.3rem; max-width: 46rem; font-size: 0.92rem; color: var(--ink-2); }
.pb-stages__whose { margin-top: 0.35rem; max-width: 46rem; font-size: 0.86rem; color: var(--ink-2); }
.pb-stages__whose b { font-weight: 700; color: var(--earth-2); }
/* the plan as a base and its top-ups (program-rules.js, shapeWords) */
.pb-stages__src { display: flex; flex-wrap: wrap; gap: 0.2rem 1rem; list-style: none; margin: 0.3rem 0 0; padding: 0; font-size: 0.82rem; }
.pb-stages__src a { color: var(--ink-2); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.pb-stages__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.1rem; margin-top: 0.7rem; }

/* the flag for a critical stage of influence: the chart's pennant, and the words */
.pb-stage__no { display: flex; align-items: center; gap: 0.35rem; margin-bottom: 0.2rem; font: 800 0.66rem/1.2 var(--f-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--earth); }
.pb-stage {
  position: relative; padding: 1rem clamp(0.9rem, 2vw, 1.3rem) 1rem clamp(1.3rem, 2.4vw, 1.7rem);
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-paper);
  transition: box-shadow 0.3s ease;
}
/* the stage's colour, washed down its left edge */
.pb-stage::before {
  content: ""; position: absolute; left: 0.45rem; top: 0.8rem; bottom: 0.8rem; width: 0.4rem; border-radius: 6px 3px 7px 4px;
  background: var(--c); opacity: 0.85;
}
.pb-stage.is-on { box-shadow: 0 0 0 3px var(--c), var(--shadow-paper); }
.pb-stage__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 0.4rem 1rem; }
.pb-stage__title { flex: 1 1 14rem; min-width: 0; }
.pb-stage__named { display: flex; align-items: center; gap: 0.2rem; }
.pb-stage h3 { min-width: 0; font-family: var(--f-display); font-weight: 650; font-size: clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem); line-height: 1.2; }
.pb-stage__when { margin-top: 0.2rem; font-size: 0.86rem; font-weight: 700; color: var(--ink-3); }
.pb-stage__side { display: flex; align-items: center; gap: 0.6rem; }
.pb-stage__keys { display: flex; gap: 0.28rem; }

/* the pencil beside a stage's name, and the stage's menu */
.pb-pen {
  display: inline-grid; place-items: center; flex: none; width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: 999px;
  background: none; color: var(--ink-3); cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease;
}
.pb-pen:hover, .pb-pen[aria-expanded="true"] { background: var(--paper-2); color: var(--ink); }
.pb-pen:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.pb-pencil { width: 1.1rem; height: 1.1rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pb-stage__menu > summary::after { content: none; }
.pb-stage__more {
  display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border: 1.5px solid var(--rule); border-radius: 999px;
  color: var(--ink-2); cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease;
}
.pb-stage__more:hover, .pb-stage__menu[open] > .pb-stage__more { background: var(--paper-2); border-color: var(--ink); color: var(--ink); }
.pb-stage__more:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.pb-dots { width: 1.15rem; height: 1.15rem; fill: currentColor; }
/* on a touch screen the builder's fields and small buttons are 44 px, the size for a thumb (components.css) */
@media (pointer: coarse) {
  .pb-in, .pb-mini, .pb-bar__rules, .pb-bar__name, .pb-qai, .pb-menu__item, .pb-cal__row, .pb-cal__row label, .pb-fams__sum { min-height: 44px; }
  .pb-pen, .pb-stage__more { width: 44px; height: 44px; }
  /* a link-like button 44 px high, its words in the middle: an edge bigger than it shows would take taps
     from what's beside it, as the plan's name is above Adjust the stages */
  .pb-link { min-height: 44px; display: inline-flex; align-items: center; }
}
.pb-stage__menu .pb-menu__panel { width: min(19rem, 86vw); }

/* a stage changed on its card */
.pb-sed { display: grid; gap: 0.75rem; margin-top: 0.85rem; padding: 0.9rem 1rem 1rem; border: 1.5px solid var(--ink); border-radius: 12px 10px 13px 11px; background: #fffdf8; }
.pb-sed__name .pb-in { width: 100%; max-width: 24rem; }
.pb-sed__days { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; }
.pb-sed__days .pb-in { width: 6.5rem; }
.pb-sed__date { min-height: 1.2em; font-size: 0.8rem; font-weight: 650; color: var(--ink-3); }
.pb-sed__hint { font-size: 0.84rem; color: var(--ink-3); }
/* a pass that repeats: in its editor, on its summary, and its later times on the chart */
.pb-ed__rep { display: flex; flex-wrap: wrap; align-items: end; gap: 0.5rem 0.9rem; margin-top: 0.7rem; }
.pb-ed__rep-on { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0 0.5rem; font-weight: 750; font-size: 0.92rem; cursor: pointer; }
.pb-ed__rep-on input { width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--canopy); }
.pb-ed__rep-on span { grid-column: 2; font-weight: 500; font-size: 0.8rem; color: var(--ink-3); }
.pb-ed__rep .pb-field .pb-in { width: 5.5rem; }
.pb-ed__times { flex-basis: 100%; font-size: 0.84rem; color: var(--ink-3); }
.pb-pass__rep { grid-column: 2 / -1; display: inline-flex; align-items: center; gap: 0.3rem; margin-top: 0.15rem; font-size: 0.82rem; font-weight: 700; color: var(--canopy); }
.pb-pass__rep svg { width: 0.95rem; height: 0.95rem; }
.pbc__pass--again { opacity: 0.72; }
/* adding and repeating stages (the dialogs' extra lines) */
[data-addst-dialog] .pb-sed__hint, [data-repeat-dialog] .pb-sed__hint { margin-top: 0.6rem; }
.pb-rep__from { margin-top: 0.4rem; font-size: 0.95rem; }
[data-repeat-dialog] .pb-sed__csi { margin-top: 0.8rem; }
.pb-sed__csi { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.1rem 0.55rem; font-weight: 750; font-size: 0.93rem; cursor: pointer; }
.pb-sed__csi input { width: 1.2rem; height: 1.2rem; margin: 0; accent-color: var(--canopy); }
.pb-sed__csi span { grid-column: 2; font-weight: 500; font-size: 0.82rem; color: var(--ink-3); }
/* the draft's dialog: the block's tests it goes with, and the tick (qag-p6d8) */
.pb-draft-from { display: grid; gap: 0.45rem; margin-top: 0.6rem; }
.pb-sed .form-problem { margin: 0; }
.pb-sed__acts { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.pb-stage__add { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.85rem; }
.pb-stage__add .pb-mini--learn { margin-left: auto; }
/* last season's line for next time, at its stage, as the hub's week shows it (qag-1jd) */
.pb-was { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem 0.8rem; margin-top: 0.85rem; padding: 0.55rem 0.7rem; border-radius: 10px; background: var(--paper-2); }
.pb-was p { display: flex; align-items: flex-start; gap: 0.45rem; flex: 1 1 16rem; min-width: 0; margin: 0; font-weight: 600; color: var(--ink-2); overflow-wrap: anywhere; }
.pb-was svg { flex: none; width: 1.05rem; height: 1.05rem; margin-top: 0.15rem; color: var(--earth); }
.pb-was .pb-was__in { flex: 0 1 auto; font-size: 0.86rem; font-weight: 700; color: var(--ink-3); }
.pb-was + .pb-was { margin-top: 0.45rem; }

.pb-list { list-style: none; margin: 0.85rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.pb-list:empty { display: none; }
.pb-pass { border: 1.5px solid var(--rule); border-radius: 12px 10px 13px 11px; background: #fffdf8; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.pb-pass.is-on { border-color: var(--ink); box-shadow: 0 2px 0 var(--ink); }
.pb-pass__sum {
  width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.15rem 0.75rem; align-items: center;
  padding: 0.6rem 0.75rem; font: inherit; color: inherit; text-align: left; background: none; border: 0; border-radius: 12px; cursor: pointer;
}
.pb-pass__sum:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.pb-pass__no {
  grid-row: span 2; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--m); border: 2px solid var(--ink); font-weight: 800; font-size: 0.85rem;
}
.pb-pass__top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.7rem; min-width: 0; }
.pb-pass__when { font-weight: 800; white-space: nowrap; }
.pb-pass__when span { font-weight: 650; color: var(--ink-3); }
.pb-pass__how { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.85rem; font-weight: 700; color: var(--ink-2); }
.pb-pass__how svg { width: 1rem; height: 1rem; }
.pb-pass__what { grid-column: 2; min-width: 0; font-size: 0.93rem; color: var(--ink-2); }
/* its products, a list: side by side with room between on a wide screen, one to a line on a phone;
   a rate stays with its number and the product's last word (program.js linesHTML) */
.pb-sum-prods { display: flex; flex-wrap: wrap; gap: 0.15rem 1.1rem; }
.pb-sum-prod { position: relative; min-width: 0; padding-left: 0.75rem; }
.pb-sum-prod::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 0.32rem; height: 0.32rem; border-radius: 50%; background: var(--ink-3); }
.pb-sum-prod__end { white-space: nowrap; }
.pb-sum-prod b { font-weight: 750; color: var(--ink); }
@media (max-width: 560px) { .pb-sum-prods { display: grid; gap: 0.2rem; } }
.pb-pass__why { grid-column: 2 / -1; margin-top: 0.15rem; font-size: 0.86rem; font-style: italic; color: var(--ink-3); }
.pb-pass__els { grid-row: span 2; grid-column: 3; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.2rem; max-width: 7.6rem; }
.pb-pass--ghost { border: 1.5px dashed #b88a24; background: rgba(247, 210, 106, 0.13); }
.pb-pass--ghost .pb-pass__no { background: rgba(247, 210, 106, 0.55); border-style: dashed; }
.pb-ghost__say { grid-column: 2 / -1; font-family: var(--f-hand); font-weight: 600; font-size: 1.12rem; line-height: 1.1; color: #7a5418; }
.pb-ghost__acts { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0 0.75rem 0.7rem; }
.pb-test { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.6rem; padding: 0.45rem 0.6rem 0.45rem 0.75rem; border: 1.5px dashed rgba(91, 127, 160, 0.6); border-radius: 12px; font-weight: 700; font-size: 0.92rem; color: #3d5a80; }
.pb-test svg { width: 1.2rem; height: 1.2rem; }
.pb-test .pb-mini { margin-left: auto; padding: 0.22rem 0.6rem; font-size: 0.8rem; border-color: rgba(61, 90, 128, 0.6); color: #3d5a80; text-wrap: balance; }
.pb-test .pb-mini--result { border-color: #3d5a80; background: rgba(91, 127, 160, 0.12); }
.pb-test .pb-mini--result + .pb-mini { margin-left: 0; }
.pb-test--ghost { border-color: #b88a24; background: rgba(247, 210, 106, 0.13); color: #7a5418; }
.pb-test__day { width: 4.4rem; padding: 0.2rem 0.4rem; font-size: 0.88rem; }

/* a pass, open for editing */
.pb-ed { display: grid; gap: 0.8rem; padding: 0.3rem 0.8rem 0.9rem; border-top: 1px dashed var(--rule); }
.pb-ed__row { display: flex; flex-wrap: wrap; align-items: end; gap: 0.6rem 0.9rem; padding-top: 0.6rem; }
.pb-in--day { width: 5.4rem; }
/* the page that helps choose how a pass goes on, level with the choice */
.pb-ed__read { display: inline-flex; align-items: center; gap: 0.3rem; min-height: 2.4rem; }
.pb-ed__read svg { flex: none; width: 1.1rem; height: 1.1rem; }
.pb-lines { display: grid; gap: 0.5rem; }
.pb-line { display: grid; grid-template-columns: minmax(0, 1fr) 5.4rem 5.4rem 2rem; gap: 0.4rem; align-items: center; padding: 0.45rem; border-radius: 10px 9px 11px 8px; background: rgba(233, 223, 199, 0.42); }
.pb-line__x { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.7rem; padding-inline: 0.15rem; font-size: 0.8rem; font-weight: 650; color: var(--ink-3); }
.pb-line__x .pb-link { font-size: 0.8rem; }
.pb-line__extra { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.4rem 0.6rem; }
.pb-line__extra .pb-field { flex: 1 1 11rem; }
.pb-line__extra .pb-in { font-size: 0.88rem; }
.pb-line__why { grid-column: 1 / -1; font-size: 0.8rem; font-weight: 700; color: var(--earth); }
/* What goes in a tank: the sprayer, once for the plan, and a spray pass by the tankful */
.pb-tank { display: grid; gap: 0.55rem; padding: 0.7rem 0.8rem 0.8rem; border-radius: 10px 9px 11px 8px; background: rgba(214, 230, 236, 0.42); }
.pb-tank__head { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.pb-tank__rig { display: flex; flex-wrap: wrap; gap: 0.6rem 0.9rem; }
.pb-field > .pb-tank__in { display: flex; align-items: center; gap: 0.35rem; font-size: 0.86rem; font-weight: 650; letter-spacing: normal; text-transform: none; color: var(--ink-3); }
.pb-tank__in .pb-in { width: 6rem; }
.pb-tank__sheet { display: grid; gap: 0.5rem; min-width: 0; }
.pb-tank__sheet > * { margin: 0; }
.pb-tank__sum, .pb-tank__jar { font-size: 0.9rem; }
.pb-tank__how { font-size: 0.84rem; color: var(--ink-3); }
.pb-tank__flag { font-size: 0.86rem; font-weight: 700; color: var(--ink-2); }
.pb-tank__flag--look { color: var(--earth); }
.pb-tank__scroll { overflow-x: auto; }
.pb-tank__table { width: 100%; border-collapse: collapse; font-size: 0.88rem; font-variant-numeric: tabular-nums; }
.pb-tank__table :is(th, td) { padding: 0.32rem 0.45rem; border-bottom: 1px solid var(--rule); text-align: right; white-space: nowrap; }
.pb-tank__table thead th { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.pb-tank__table :is(thead, tbody) th:first-child { text-align: left; }
.pb-tank__table tbody th { font-weight: 650; white-space: normal; }
.pb-tank__table thead th { white-space: normal; vertical-align: bottom; }
@media (max-width: 480px) {
  .pb-tank { padding-inline: 0.6rem; }
  .pb-tank__table { font-size: 0.84rem; }
  .pb-tank__table :is(th, td) { padding: 0.3rem 0.2rem; }
  .pb-tank__table thead th { font-size: 0.6rem; letter-spacing: 0.04em; }
}
.pb-x { width: 2rem; height: 2rem; display: grid; place-items: center; padding: 0; border: 1.5px solid var(--rule); border-radius: 50%; background: none; font-size: 1.1rem; line-height: 1; color: var(--ink-2); cursor: pointer; }
.pb-x:hover { border-color: var(--earth); color: var(--earth-2); }
.pb-ed__foot { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.pb-ed__foot .pb-mini:last-child { margin-left: auto; }
@media (max-width: 520px) {
  .pb-line { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 2rem; }
  .pb-line > select[data-f="p"] { grid-column: 1 / -1; }
  .pb-pass__els { display: none; }
}

/* Beside the plan: QuorumAI, the checks and the wiki, a tab each -------------------------------------- */
/* On a wide screen the panel stays in view as the plan scrolls past, the height of the window; on a
   phone it's a sheet that rises over the plan from the button at the foot of the screen. */
.pb-help {
  display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  background: var(--card); border-radius: 20px; box-shadow: var(--shadow-paper), 0 0 0 1px var(--rule);
}
@media (min-width: 981px) {
  .pb-help { position: sticky; top: calc(var(--hub-top, 7.4rem) + 0.8rem); height: calc(100vh - var(--hub-top, 7.4rem) - 1.6rem); min-height: 28rem; max-height: 60rem; }
  .pb-help__close, .pb-fab, .pb-scrim { display: none !important; }
}
/* a window too short for a panel that high: it sits in the page and scrolls with it */
@media (min-width: 981px) and (max-height: 620px) {
  .pb-help { position: relative; top: auto; height: 36rem; }
}

.pb-help__bar { flex: none; display: flex; align-items: center; gap: 0.5rem; padding: 0.7rem 0.7rem 0.2rem; }
.pb-help__tabs { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 0.2rem; padding: 0.22rem; background: var(--paper-2); border-radius: 16px; }
.pb-tab {
  flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.5rem 0.75rem;
  font: inherit; font-weight: 750; font-size: 0.9rem; line-height: 1.2; color: var(--ink-2); white-space: nowrap; cursor: pointer;
  background: transparent; border: 0; border-radius: 13px; transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.pb-tab:hover { color: var(--ink); background: rgba(251, 247, 238, 0.6); }
.pb-tab:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.pb-tab svg { width: 1.05rem; height: 1.05rem; flex: none; color: var(--earth); }
.pb-tab[data-tab="ai"] svg { color: var(--canopy-2); }
.pb-tab[aria-selected="true"] { color: var(--ink); background: var(--card); box-shadow: 0 1px 2px rgba(30, 43, 34, 0.14), 0 0 0 1px var(--rule); }
.pb-tab__n { display: inline-grid; place-items: center; min-width: 1.35rem; height: 1.35rem; margin-left: 0.1rem; padding: 0 0.3rem; border-radius: 999px; background: var(--wattle); color: var(--ink); font-size: 0.75rem; font-weight: 800; }
.pb-tab__n:empty { display: none; }
.pb-tab__n.is-steer { background: var(--earth); color: var(--paper); }
.pb-help__close {
  flex: none; align-self: center; width: 2.4rem; height: 2.4rem; display: grid; place-items: center; padding: 0;
  border: 1.5px solid var(--ink); border-radius: 50%; background: var(--card); color: var(--ink); font: 400 1.5rem/1 var(--f-body); cursor: pointer;
}
.pb-help__close:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* on a touch screen the sheet's tabs and Close, a pass's read link and the remove buttons are 44 px too */
@media (pointer: coarse) {
  .pb-tab, .pb-oks > summary, .pb-ed__read { min-height: 44px; }
  .pb-x, .pb-help__close { width: 44px; height: 44px; }
  .pb-line { grid-template-columns: minmax(0, 1fr) 5.4rem 5.4rem 44px; }
}
@media (pointer: coarse) and (max-width: 520px) { .pb-line { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px; } }


/* every panel fills what's left under the tabs, and scrolls in itself */
.pb-help > [role="tabpanel"] { flex: 1 1 auto; min-height: 0; }
.pb-checks, .pb-learn, .bp { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
/* beside the plan, the wheel goes on to the page once a panel's at its end, or has nothing to scroll
   (Adam, 15 October: hovering over the column stopped the page scrolling); the phone's sheet keeps it */
@media (min-width: 981px) { .pb-checks, .pb-learn, .bp { overscroll-behavior: auto; } }

/* The checks */
.pb-checks { padding: 1rem 1.1rem 1.1rem; }
.pb-checks__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.2rem 1rem; }
.pb-checks h3, .pb-ai h3, .pb-learn h3, .pb-totals h3, .pb-way h3 { font-family: var(--f-display); font-weight: 650; font-size: 1.35rem; line-height: 1.2; }
.pb-checks__tally { font-size: 0.84rem; font-weight: 750; color: var(--ink-3); }
.pb-checks__list { list-style: none; margin: 0.8rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.pb-check { display: grid; grid-template-columns: 1.55rem minmax(0, 1fr); gap: 0.6rem; padding: 0.6rem 0.7rem; border-radius: 10px; }
.pb-check__mark { display: grid; place-items: center; width: 1.55rem; height: 1.55rem; border-radius: 50%; border: 2px solid var(--ink); font-weight: 800; font-size: 0.85rem; line-height: 1; }
.pb-check--steer { background: rgba(160, 63, 36, 0.1); }
.pb-check--steer .pb-check__mark { background: var(--earth); color: var(--paper); }
.pb-check--look { background: rgba(242, 182, 50, 0.16); }
.pb-check--look .pb-check__mark { background: var(--wattle); }
.pb-check--note { background: rgba(91, 127, 160, 0.11); }
.pb-check--note .pb-check__mark { background: #d9e6ef; font-family: var(--f-display); font-style: italic; font-variation-settings: "SOFT" 100, "WONK" 1; }
.pb-check__title { font-weight: 750; line-height: 1.3; }
.pb-check__detail { margin-top: 0.25rem; font-size: 0.9rem; color: var(--ink-2); }
.pb-check__src { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.9rem; margin-top: 0.3rem; font-size: 0.8rem; font-weight: 750; }
/* the wiki page that explains a rule, beside the episode it comes from */
.pb-check__src .pb-link { display: inline-flex; align-items: center; gap: 0.25rem; font-size: inherit; }
.pb-check__src .pb-link svg { flex: none; width: 1.05rem; height: 1.05rem; }
.pb-check__acts { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.pb-oks { margin-top: 0.3rem; }
.pb-oks > summary { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.7rem; border-radius: 10px; font-weight: 750; cursor: pointer; list-style: none; }
.pb-oks > summary::-webkit-details-marker { display: none; }
.pb-oks > summary::after { content: "▾"; content: "▾" / ""; margin-left: auto; color: var(--ink-3); transition: rotate 0.2s ease; }
.pb-oks[open] > summary::after { rotate: 180deg; }
.pb-oks > summary:hover { background: var(--paper-2); }
.pb-oks ul { list-style: none; margin: 0.2rem 0 0; padding: 0 0.7rem; display: grid; gap: 0.35rem; }
.pb-oks li { display: grid; grid-template-columns: 1.1rem minmax(0, 1fr); gap: 0.5rem; font-size: 0.9rem; color: var(--ink-2); }
.pb-tick { width: 1.1rem; height: 1.1rem; color: var(--leaf); }
.pb-oks > summary .pb-tick { width: 1.3rem; height: 1.3rem; }

/* QuorumAI: the conversation fills the panel, with the quick asks and the question box at its foot. It's
   on the plan's own paper, and talks the way the Ask QuorumAI page does: its words on the left, the
   grower's on the right. */
.pb-ai { display: flex; flex-direction: column; padding: 0.6rem 1.1rem 1rem; color: var(--ink); }
/* it wraps: on a phone with a reader's own spacing the status drops below the name */
.pb-ai__head { flex: none; display: flex; align-items: center; gap: 0.65rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--rule); }
.pb-ai__avatar { flex: none; width: 2.3rem; height: 2.3rem; display: grid; place-items: center; border-radius: 50%; background: var(--canopy); color: var(--wattle); }
.pb-ai__avatar svg { width: 1.35rem; height: 1.35rem; }
.pb-ai__who { min-width: 0; }
.pb-ai h3 { font-size: 1.2rem; line-height: 1.15; }
.pb-ai__mode { display: flex; align-items: center; gap: 0.35rem; margin-top: 0.1rem; font-size: 0.78rem; font-weight: 700; color: var(--ink-3); }
.pb-ai__mode::before { content: ""; flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--gum); }
.pb-ai__mode.is-live::before { background: var(--leaf); box-shadow: 0 0 0 3px rgba(155, 197, 61, 0.35); }
.pb-ai__log { flex: 1 1 auto; min-height: 7rem; list-style: none; margin: 0 -0.5rem 0 0; padding: 0.9rem 0.5rem 0.4rem 0; display: flex; flex-direction: column; gap: 0.7rem; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(30, 43, 34, 0.25) transparent; }
@media (min-width: 981px) { .pb-ai__log { overscroll-behavior: auto; } }
.pb-ai__log > * { flex: none; }
.pb-msg { align-self: flex-start; max-width: 96%; padding: 0.7rem 0.9rem; border-radius: 16px 16px 16px 5px; background: #f0e9d6; font-size: 0.93rem; line-height: 1.45; }
.pb-msg p + p { margin-top: 0.45rem; }
/* QuorumAI's short lists (ai-text.js) */
.pb-msg .ai-list { margin: 0.45rem 0 0; padding-left: 1.15rem; list-style: disc; }
.pb-msg .ai-list:first-child { margin-top: 0; }
.pb-msg .ai-list li + li { margin-top: 0.2rem; }
.pb-msg .ai-list + p { margin-top: 0.45rem; }
.pb-msg--you { align-self: flex-end; max-width: 86%; border-radius: 16px 16px 5px 16px; background: var(--wattle-2); font-weight: 650; }
/* while it works: the Ask page's dots, and what it's doing */
.pb-msg--busy { display: flex; align-items: center; gap: 0.6rem; color: var(--ink-3); font-size: 0.86rem; font-weight: 650; }
.pb-typing { display: inline-flex; gap: 0.28rem; }
.pb-typing i { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--leaf); animation: blink 0.9s ease-in-out infinite alternate; }
.pb-typing i:nth-child(2) { animation-delay: 0.2s; }
.pb-typing i:nth-child(3) { animation-delay: 0.4s; }
.no-motion .pb-typing i { animation: none; opacity: 0.7; }
/* a long job's trace: what went with it, the time going, the step it's on; then folded under the answer */
.pb-msg--trace { color: var(--ink-2); font-size: 0.86rem; }
.pb-trace__head { display: flex; align-items: center; gap: 0.6rem; font-weight: 700; color: var(--ink); }
.pb-trace__clock { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 650; color: var(--ink-3); }
.pb-trace { display: grid; gap: 0.3rem; margin: 0.5rem 0 0; padding: 0; list-style: none; }
.pb-trace li { display: grid; grid-template-columns: 1.05rem minmax(0, 1fr); gap: 0.45rem; align-items: start; line-height: 1.4; }
.pb-trace .pb-tick { width: 1rem; height: 1rem; margin-top: 0.1rem; }
.pb-trace .is-now { font-weight: 700; color: var(--ink); }
.pb-trace__dot { width: 0.6rem; height: 0.6rem; margin: 0.35rem 0 0 0.2rem; border-radius: 50%; background: var(--leaf); animation: blink 0.9s ease-in-out infinite alternate; }
.no-motion .pb-trace__dot { animation: none; }
.pb-trace__more { display: block !important; padding-left: 1.5rem; color: var(--ink-3); font-style: italic; }
.pb-trace-done { margin-top: 0.55rem; font-size: 0.84rem; }
.pb-trace-done summary { cursor: pointer; font-weight: 700; color: var(--ink-2); }
.pb-trace-done .pb-trace { margin-top: 0.4rem; color: var(--ink-2); }
/* what it changed, ticked, and what it couldn't, with why */
.pb-did { display: grid; gap: 0.3rem; list-style: none; margin: 0.55rem 0 0; padding: 0; }
.pb-did li { display: grid; grid-template-columns: 1.05rem minmax(0, 1fr); gap: 0.45rem; align-items: start; padding: 0.42rem 0.6rem; border-radius: 10px; background: var(--card); font-size: 0.88rem; line-height: 1.4; }
.pb-did .pb-tick, .pb-did .pb-bang { width: 1.05rem; height: 1.05rem; margin-top: 0.1rem; }
.pb-did--not li { background: #f8e6da; }
.pb-bang { fill: none; stroke: var(--earth); stroke-width: 1.6; stroke-linecap: round; }
.pb-msg__note { margin-top: 0.55rem; }
/* things to try, in the grower's own words */
.pb-msg__tries { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-top: 0.65rem; }
.pb-msg__tries > span { margin-right: 0.15rem; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.pb-try {
  padding: 0.34rem 0.72rem; font: inherit; font-size: 0.84rem; font-weight: 650; line-height: 1.25; text-align: left; color: var(--ink); cursor: pointer;
  background: var(--card); border: 1.5px solid rgba(30, 43, 34, 0.3); border-radius: 999px; transition: background-color 0.2s ease, border-color 0.2s ease;
}
.pb-try:hover { background: #fffdf8; border-color: var(--ink); }
.pb-try:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.pb-msg__cites { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.55rem; }
.pb-msg__cites .chip { background: var(--card); font-size: 0.76rem; }
.pb-msg__acts { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; }
.pb-msg__acts .pb-mini { background: var(--card); }
.pb-msg__acts .pb-mini:hover { background: #fffdf8; }
.pb-msg__acts .pb-mini--keep { background: var(--wattle); border-color: var(--ink); }
.pb-msg__acts .pb-mini--keep:hover { background: var(--wattle-2); }
.pb-msg__cost { margin-top: 0.5rem; font-size: 0.76rem; color: var(--ink-3); }
.pb-msg__basis { margin-top: 0.55rem; font-size: 0.86rem; font-style: italic; color: var(--ink-2); }
.pb-msg__src { display: grid; gap: 0.3rem; list-style: none; margin: 0.45rem 0 0; padding: 0; font-size: 0.84rem; }
.pb-msg__src a { color: inherit; font-weight: 700; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.pb-msg__src small { display: block; font-size: 0.74rem; color: var(--ink-3); }
.pb-msg__done { margin-top: 0.55rem; font-size: 0.84rem; font-weight: 700; color: var(--ink-2); }

/* the stages QuorumAI proposes, beside what the plan has */
.pb-fit { margin-top: 0.6rem; }
.pb-fit__len { font-size: 0.86rem; font-weight: 700; }
.pb-fit ol { display: grid; gap: 0.35rem; list-style: none; margin: 0.35rem 0 0; padding: 0; }
.pb-fit li { display: grid; gap: 0.1rem; padding: 0.4rem 0.6rem 0.45rem 0.85rem; border-radius: 10px; box-shadow: inset 0.3rem 0 0 var(--c); background: var(--card); font-size: 0.86rem; }
/* what would change is dashed, like everything else QuorumAI pencils in */
.pb-fit li.is-new { outline: 1.5px dashed rgba(30, 43, 34, 0.5); outline-offset: -1.5px; }
.pb-fit__name { font-weight: 750; }
.pb-fit__name small { margin-left: 0.2rem; font-weight: 500; font-size: 0.78rem; color: var(--ink-3); }
.pb-fit__days { font-variant-numeric: tabular-nums; }
.pb-fit__days s, .pb-fit__len s { margin-right: 0.35rem; color: var(--ink-3); }
.pb-fit__csi { display: flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--earth-2); }
.pb-fit__csi.is-off { color: var(--ink-3); }
.pb-fit__why { font-size: 0.8rem; color: var(--ink-2); }
/* the whole program it drafted: its passes under each stage, the sap tests, and the checks on it */
.pb-draft__passes { display: grid; gap: 0.2rem; margin: 0.15rem 0 0; padding: 0; list-style: none; }
.pb-fit .pb-draft__passes li { display: block; padding: 0; box-shadow: none; background: none; border-radius: 0; font-size: 0.82rem; line-height: 1.4; }
/* what each pass is for, as the draft gave it: read before it's used (qag-p6d8) */
.pb-draft__why { display: block; color: var(--ink-3); }
.pb-draft__passes b { font-variant-numeric: tabular-nums; }
.pb-draft__rep { color: var(--earth-2); font-weight: 650; }
.pb-draft__tests, .pb-draft__rules { margin-top: 0.45rem; font-size: 0.84rem; }
.pb-draft__rules { font-weight: 650; }

/* the quick asks: outlined, Fill the gaps first in wattle; on a phone, one row that scrolls */
.pb-ai__acts { flex: none; display: flex; flex-wrap: wrap; gap: 0.4rem; padding-top: 0.75rem; border-top: 1px solid var(--rule); }
.pb-ai__act {
  flex: none; padding: 0.4rem 0.8rem; font: inherit; font-weight: 750; font-size: 0.84rem; line-height: 1.2; color: var(--ink); cursor: pointer;
  background: var(--card); border: 1.5px solid rgba(30, 43, 34, 0.3); border-radius: 999px; transition: background-color 0.2s ease, border-color 0.2s ease;
}
.pb-ai__act:hover { background: #fffdf8; border-color: var(--ink); }
.pb-ai__act:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.pb-ai__act[aria-disabled="true"], .pb-ai__send:disabled { opacity: 0.5; cursor: default; }
.pb-ai__act:first-child { background: var(--wattle); border-color: var(--ink); }
.pb-ai__act:first-child:hover { background: var(--wattle-2); }
@media (max-width: 980px) {
  .pb-ai__acts {
    flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding: 0.75rem var(--gutter) 0.2rem; scrollbar-width: none;
    mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - 2.2rem), transparent);
  }
  .pb-ai__acts::-webkit-scrollbar { display: none; }
  .pb-ai__acts::after { content: ""; flex: none; width: 1.4rem; }
}
/* the question box: one rounded field with its button inside */
.pb-ai__ask {
  flex: none; display: flex; align-items: center; gap: 0.4rem; margin-top: 0.7rem; padding: 0.3rem 0.3rem 0.3rem 1rem;
  background: #fffdf8; border: 2px solid rgba(30, 43, 34, 0.75); border-radius: 999px; box-shadow: inset 0 2px 0 rgba(30, 43, 34, 0.06);
}
.pb-ai__ask:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.pb-ai__q { flex: 1; min-width: 0; padding: 0.45rem 0; font: inherit; font-size: 0.95rem; color: var(--ink); background: transparent; border: 0; }
.pb-ai__q:focus { outline: none; }
.pb-ai__q::placeholder { color: var(--ink-3); opacity: 1; }
.pb-ai__send {
  flex: none; padding: 0.5rem 1.05rem; font: inherit; font-weight: 800; font-size: 0.9rem; line-height: 1.2; color: var(--paper); cursor: pointer;
  background: var(--canopy); border: 0; border-radius: 999px; transition: background-color 0.2s ease;
}
.pb-ai__send:hover { background: var(--canopy-2); }
.pb-ai__send:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.pb-ai__foot { flex: none; margin-top: 0.55rem; font-size: 0.78rem; line-height: 1.4; color: var(--ink-3); }
/* On the free builder, QuorumAI's tab is the way into the hub (program.js, setVisitor): what it does
   there and how to join, in place of its conversation; and its other ways in aren't shown */
.is-visitor .pb-ai > :not(.pb-ai__head, .pb-ai__in) { display: none; }
.pb-ai__in { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-top: 1rem; display: grid; align-content: start; gap: 0.85rem; }
.pb-ai__in-lede { font-family: var(--f-display); font-weight: 600; font-size: 1.2rem; line-height: 1.25; text-wrap: balance; }
.pb-ai__in-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; font-weight: 650; }
.pb-ai__in-list li { display: flex; align-items: flex-start; gap: 0.5rem; }
.pb-ai__in-list .pb-tick { flex: none; width: 1.05rem; height: 1.05rem; margin-top: 0.2rem; color: var(--canopy-2); }
.pb-ai__in-keep { font-size: 0.9rem; color: var(--ink-2); }
.pb-ai__in-go { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.1rem; }

/* where QuorumAI changed the plan, or what the grower asked to see: lit up for a moment */
.is-touched { outline: 3px solid transparent; outline-offset: 3px; animation: pb-touched 2.6s ease-in; }
@keyframes pb-touched { 0%, 45% { outline-color: var(--wattle); background-color: #fdf1c9; } }
.no-motion .is-touched { animation: none; outline-color: var(--wattle); }

/* Learn: the stage in view, and the wiki pages that go into it */
.pb-learn { padding: 1rem 1.1rem 1.3rem; }
.pb-learn [data-learn-title]:focus { outline: none; }
.pb-learn__top { padding-left: 0.8rem; border-left: 0.4rem solid var(--c, var(--rule)); }
.pb-learn__pick { display: flex; align-items: center; gap: 0.6rem; }
.pb-learn__pick > span { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.pb-learn__pick .pb-in { flex: 1; max-width: 16rem; padding-block: 0.35rem; font-size: 0.9rem; }
.pb-learn h3 { margin-top: 0.6rem; }
.pb-learn .pb-stage__no { margin: 0.7rem 0 -0.4rem; }
.pb-learn__when { margin-top: 0.15rem; font-size: 0.86rem; font-weight: 700; color: var(--ink-3); }
.pb-learn__what { display: grid; gap: 0.8rem; margin: 1rem 0 0; }
.pb-fit__gone { margin-top: 0.5rem; font-size: 0.84rem; color: var(--ink-3); }
/* a composed stage: whose words they are */
.pb-learn__whose { margin-top: 0.7rem; padding: 0.5rem 0.65rem; border-left: 3px solid var(--c, var(--wattle)); background: rgba(30, 43, 34, 0.05); font-size: 0.84rem; color: var(--ink-2); }
.pb-learn__what dt { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.pb-learn__what dd { margin: 0.15rem 0 0; color: var(--ink-2); }
.pb-learn__keys { display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; }
.pb-learn__keys > span { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 650; font-size: 0.92rem; }
.pb-learn > .pb-mini--ai { margin-top: 1.1rem; }
.pb-learn__h { margin-top: 1.4rem; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.pb-learn__topics { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.35rem; }
.pb-topic {
  width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.1rem 0.8rem; padding: 0.55rem 0.75rem;
  font: inherit; font-weight: 700; text-align: left; color: var(--ink); text-decoration: none; cursor: pointer;
  background: #fffdf8; border: 1.5px solid var(--rule); border-radius: 10px 9px 11px 8px; transition: border-color 0.2s ease;
}
.pb-topic:hover { border-color: var(--ink); }
.pb-topic:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.pb-topic small { font-size: 0.75rem; font-weight: 650; color: var(--ink-3); }
.pb-learn__kick { margin-top: 0.8rem; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--earth); }
.pb-learn__kick + h3 { margin-top: 0.15rem; }
.pb-learn__soon { margin-top: 0.6rem; color: var(--ink-2); }
.pb-learn__short { margin-top: 0.8rem; padding: 0.8rem 0.9rem; background: #fdf3d3; border: 1.5px solid rgba(30, 43, 34, 0.2); border-radius: 12px 10px 14px 9px; font-size: 0.93rem; }
.pb-learn__article { max-width: none; margin-top: 0.9rem; font-size: 0.95rem; }
.pb-learn__article > :first-child { margin-top: 0; }
.pb-learn__article h4 { margin: 1.5rem 0 0.4rem; font-family: var(--f-display); font-weight: 650; font-size: 1.2rem; line-height: 1.25; }
.pb-learn__article h5 { margin: 1.1rem 0 0.3rem; font-weight: 800; font-size: 1rem; }
.pb-learn__article p + p { margin-top: 0.6rem; }
.pb-learn__article .pull p { font-size: var(--step-1); }
.pb-learn__article .diagram { margin: 1.1rem 0; }
.pb-learn__article svg.art { max-width: 100%; height: auto; }
.pb-learn__article .article__note { margin-bottom: 1rem; font-size: 0.88rem; }
.pb-learn__acts { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1.2rem; }

/* the button that opens the panel on a phone, and the sheet itself */
.pb-fab {
  position: fixed; right: var(--gutter); bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); z-index: 60;
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.1rem;
  font: inherit; font-weight: 800; font-size: 0.95rem; line-height: 1.2; color: var(--paper); cursor: pointer;
  background: var(--canopy); border: 2px solid var(--ink); border-radius: 999px; box-shadow: 0 3px 0 var(--ink), 0 14px 30px -14px rgba(20, 15, 5, 0.6);
  --focus: var(--wattle);
}
.pb-fab svg { width: 1.2rem; height: 1.2rem; color: var(--wattle); }
.pb-fab:focus-visible { outline: 3px solid var(--wattle-3); outline-offset: 3px; }
/* on a phone it's the icon and "Ask", as the hub's own button is (dock.css), so it hides less of the plan
   as it scrolls under it; its name stays "Ask QuorumAI" (its aria-label) */
@media (max-width: 430px) { .pb-fab { padding-inline: 0.95rem; } .pb-fab__name { display: none; } }
/* clear of the prototype flag, while the prototype has one, one line or two (site.js measures it) */
:root:has(.proto) .pb-fab { bottom: calc(var(--proto-h, 2rem) + 1.4rem + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 980px) {
  .pb-help {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 75; height: min(88svh, 48rem);
    border-radius: 18px 18px 0 0; box-shadow: 0 -20px 50px -20px rgba(20, 15, 5, 0.55);
    transform: translateY(102%); visibility: hidden; transition: transform 0.32s var(--ease-grow), visibility 0s linear 0.32s;
  }
  .pb-help.is-open { transform: none; visibility: visible; transition: transform 0.32s var(--ease-grow), visibility 0s; }
  .pb-help__bar { padding: 0.55rem calc(var(--gutter) - 0.45rem) 0; }
  .pb-help > [role="tabpanel"] { padding-inline: var(--gutter); padding-bottom: calc(1.1rem + env(safe-area-inset-bottom, 0px)); }
  .pb-scrim { position: fixed; inset: 0; z-index: 74; background: rgba(30, 43, 34, 0.45); }
  .pb-sheet-open, .pb-sheet-open body { overflow: hidden; }
  /* what the keyboard moves to stops short of the button at the foot of the screen, not under it */
  :root:has(.pb-fab) { scroll-padding-bottom: 5rem; }
  :root:has(.pb-fab):has(.proto) { scroll-padding-bottom: calc(var(--proto-h, 2rem) + 5.5rem); }
}
.no-motion .pb-help { transition: none; }

/* Further down: the season at a glance, the totals and what to order ------------------------------- */
.pb-glance { margin-top: clamp(1.4rem, 3vw, 2.2rem); padding: 0; }
.pb-glance__sum {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.15rem 1rem; align-items: center;
  padding: 1rem clamp(0.9rem, 2vw, 1.3rem); border-radius: var(--radius); cursor: pointer; list-style: none;
}
.pb-glance__sum::-webkit-details-marker { display: none; }
.pb-glance__sum::after { content: "▾"; content: "▾" / ""; grid-column: 2; grid-row: 1 / span 2; font-size: 1.1rem; color: var(--ink-2); transition: rotate 0.2s ease; }
.pb-glance[open] > .pb-glance__sum::after { rotate: 180deg; }
.pb-glance__sum:hover { background: rgba(233, 223, 199, 0.35); }
.pb-glance__sum:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.pb-glance__title { font-family: var(--f-display); font-weight: 650; font-size: 1.35rem; line-height: 1.2; }
.pb-glance__sub { font-size: 0.9rem; color: var(--ink-3); }
.pb-glance[open] > .pb-glance__sum { border-bottom: 1px solid var(--rule); border-radius: var(--radius) var(--radius) 0 0; }
.pb-glance .pb-chart { border-radius: 0 0 var(--radius) var(--radius); }

/* the chart */
.pb-chart { margin: 0; padding: clamp(0.7rem, 1.8vw, 1.3rem) clamp(0.7rem, 1.8vw, 1.3rem) 0.9rem; background-color: #fcf9f1; }
.pb-chart__scroll { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
.pb-chart__art { min-width: 760px; }
/* a phone swipes along the season anyway: there it's drawn at its own size, so its months, passes and
   elements are 11 to 13 px, not 8 to 10, and a pass is a big enough dot for a thumb (phone.cjs) */
@media (max-width: 760px) { .pb-chart__art { min-width: 1000px; } }
.pb-chart__art svg { display: block; width: 100%; height: auto; overflow: visible; }
.pb-chart__swipe { display: none; margin-top: 0.2rem; font-size: 1.2rem; color: var(--earth); }
.pb-chart__legend { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 1.1rem; margin-top: 0.7rem; padding-top: 0.7rem; border-top: 1px solid var(--rule); font-size: 0.82rem; font-weight: 650; color: var(--ink-2); }
.pb-chart__legend > span { display: inline-flex; align-items: center; gap: 0.4rem; }
.pb-chart__tip { margin-left: auto; font-family: var(--f-hand); font-weight: 600; font-size: 1.15rem !important; color: var(--earth); }
.pb-key { width: 0.95rem; height: 0.95rem; flex: none; border-radius: 50%; border: 2px solid var(--ink); background: var(--m, var(--card)); }
.pb-key--planting { --m: var(--m-planting); }
.pb-key--soil { --m: var(--m-soil); }
.pb-key--fertigation { --m: var(--m-fertigation); }
.pb-key--foliar { --m: var(--m-foliar); }
.pb-key--test { width: 1.15rem; height: 1.15rem; padding: 0.12rem; border-width: 1.5px; border-color: var(--range); color: var(--range); --m: #eef4f7; }
.pb-key--ghost { border-style: dashed; border-color: #a77a17; --m: rgba(247, 210, 106, 0.45); }
@media (max-width: 820px) {
  .pb-chart__swipe { display: block; }
  .pb-chart__tip { display: none !important; }
}

/* the chart's own drawing (pages/program.js) */
.pbc { font-family: var(--f-body); user-select: none; -webkit-user-select: none; }
.pbc__band { transition: opacity 0.3s ease; }
.pbc.has-sel .pbc__band:not(.is-on), .pbc.has-sel .pbc__under:not(.is-on) { opacity: 0.38; }
.pbc__col { fill: transparent; cursor: pointer; }
.pbc__name { font-weight: 750; font-size: 13px; fill: var(--ink); text-anchor: middle; }
.pbc__curve { fill: none; stroke: var(--canopy); stroke-width: 2.6; stroke-linecap: round; }
.pbc__curve-label { font-family: var(--f-hand); font-weight: 600; font-size: 18px; fill: var(--canopy-2); paint-order: stroke; stroke: rgba(252, 249, 241, 0.85); stroke-width: 4px; }
.pbc__stem { stroke: var(--ink); stroke-width: 1.1; stroke-dasharray: 1.5 3; opacity: 0.55; }
.pbc__reach { fill: var(--ink); }
.pbc__rail { stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; }
.pbc__tick { stroke: var(--ink); stroke-width: 1.2; }
.pbc__axis { font-size: 11px; font-weight: 650; fill: var(--ink-3); text-anchor: middle; }
.pbc__axis-unit { font-size: 11px; font-weight: 750; fill: var(--ink-3); text-anchor: end; }
.pbc__pass { cursor: grab; touch-action: none; outline: none; }
.pbc__pass:active { cursor: grabbing; }
.pbc__pass circle { stroke: var(--ink); stroke-width: 2; }
.pbc__pass text { font-size: 11px; font-weight: 800; fill: var(--ink); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.pbc__pass .pbc__halo { fill: none; stroke: var(--wattle); stroke-width: 4; opacity: 0; }
.pbc__pass.is-on .pbc__halo, .pbc__pass:focus-visible .pbc__halo { opacity: 1; }
.pbc__pass--planting .pbc__coin { fill: var(--m-planting); }
.pbc__pass--soil .pbc__coin { fill: var(--m-soil); }
.pbc__pass--fertigation .pbc__coin { fill: var(--m-fertigation); }
.pbc__pass--foliar .pbc__coin { fill: var(--m-foliar); }
.pbc__pass--ghost { cursor: pointer; }
.pbc__pass--ghost .pbc__coin { fill: rgba(247, 210, 106, 0.5); stroke: #8a6212; stroke-dasharray: 3 2.5; }
.pbc__pass--ghost text { fill: #6b4a0c; }
.pbc__test { color: var(--range); cursor: pointer; }
.pbc__test circle { fill: #eef4f7; stroke: var(--range); stroke-width: 1.4; }
.pbc__test--ghost circle { fill: rgba(247, 210, 106, 0.4); stroke: #8a6212; stroke-dasharray: 2.5 2; }
.pbc__test--ghost { color: #8a6212; }
.pbc__today line { stroke: var(--earth); stroke-width: 1.5; stroke-dasharray: 5 4; }
.pbc__today text { font-family: var(--f-hand); font-weight: 600; font-size: 17px; fill: var(--earth); }
.pbc__lane-line { stroke: rgba(30, 43, 34, 0.13); stroke-width: 1; }
.pbc__lane-tile { stroke: var(--ink); stroke-width: 1.2; }
.pbc__lane-sym { font-family: var(--f-display); font-weight: 680; font-size: 11.5px; fill: var(--ink); text-anchor: middle; dominant-baseline: central; font-variation-settings: "SOFT" 100, "WONK" 1; }
.pbc__dot { stroke: var(--ink); stroke-width: 1.1; cursor: pointer; }
.pbc__dot--ghost { stroke: #8a6212; stroke-dasharray: 2 1.5; fill-opacity: 0.55; cursor: default; }
.pbc__drag { font-weight: 800; font-size: 12px; fill: var(--ink); text-anchor: middle; paint-order: stroke; stroke: #fcf9f1; stroke-width: 4px; pointer-events: none; }

/* Season totals: where the nutrients land, stage by stage */
.pb-totals, .pb-order { margin-top: clamp(1.2rem, 2.6vw, 1.8rem); padding: 1rem clamp(0.9rem, 2vw, 1.3rem) 1.1rem; }
.pb-totals__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.2rem 1rem; }
.pb-order h3 { font-family: var(--f-display); font-weight: 650; font-size: 1.35rem; line-height: 1.2; }
.pb-totals__note { max-width: 40rem; }
.pb-totals__scroll { margin-top: 0.7rem; overflow-x: auto; scrollbar-width: thin; }
.pb-totals__scroll:focus-visible, .pb-ord__scroll:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.pb-tot { width: 100%; min-width: 680px; border-collapse: collapse; font-size: 0.88rem; font-variant-numeric: tabular-nums; }
.pb-tot th, .pb-tot td { padding: 0.42rem 0.55rem; border-bottom: 1px solid var(--rule); text-align: right; white-space: nowrap; }
.pb-tot thead th { vertical-align: bottom; border-bottom: 2px solid var(--ink); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.04em; color: var(--ink-2); }
.pb-tot thead th i { display: block; width: 100%; height: 0.4rem; margin-bottom: 0.35rem; border-radius: 3px; background: var(--c); }
.pb-tot tbody th { text-align: left; font-weight: 700; }
.pb-tot tbody th .pb-el { margin-right: 0.45rem; }
.pb-tot td { background: linear-gradient(90deg, color-mix(in srgb, var(--c) 42%, transparent) calc(var(--f, 0) * 100%), transparent 0) no-repeat; background-size: 100% 60%; background-position: 0 50%; }
.pb-tot td.is-nil { color: var(--ink-3); }
.pb-tot .pb-tot__sum { font-weight: 800; background: none; border-left: 2px solid var(--ink); }
.pb-tot__none { padding: 0.6rem 0; color: var(--ink-3); }
/* organic carbon: a row of its own, under a rule, never a nutrient; "estimated" under its name */
.pb-tot__c th, .pb-tot__c td { border-top: 2px solid var(--ink); }
.pb-tot__est { display: block; margin-left: 2.15rem; }

/* What to order: each product's season, for the block */
.pb-order__body { margin-top: 0.3rem; }
.pb-ord__scroll { margin-top: 0.5rem; overflow-x: auto; scrollbar-width: thin; }
.pb-ord { width: 100%; min-width: 30rem; border-collapse: collapse; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.pb-ord th, .pb-ord td { padding: 0.45rem 0.55rem; border-bottom: 1px solid var(--rule); text-align: right; vertical-align: top; }
.pb-ord thead th { vertical-align: bottom; border-bottom: 2px solid var(--ink); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.04em; color: var(--ink-2); white-space: nowrap; }
.pb-ord thead th:first-child, .pb-ord tbody th { text-align: left; }
.pb-ord tbody th { font-weight: 700; }
.pb-ord small { display: block; font-size: 0.75rem; font-weight: 650; color: var(--ink-3); }
.pb-ord tfoot th, .pb-ord tfoot td { border-bottom: 0; border-top: 2px solid var(--ink); font-weight: 800; }
.pb-ord tfoot th { text-align: right; }
/* the display face at a small size and its heaviest closed up its spaces ("Everythingelse") */
.pb-ord__h { margin-top: 1.1rem; font-size: 1.12rem; font-weight: 650; letter-spacing: 0; }
.pb-ord__partner { margin-top: 0.7rem; padding: 0.2rem 0.9rem 0.9rem; border: 1.5px solid var(--rule); border-radius: 12px 10px 13px 11px; background: #fffdf8; }
.pb-ord__partner .pb-ord__h { margin-top: 0.7rem; }
.pb-ord__sample {
  display: inline-block; margin-left: 0.4rem; padding: 0.18rem 0.45rem; vertical-align: 0.1em;
  font-size: 0.66rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--earth);
  border: 1.5px solid currentColor; border-radius: 4px;
}
.pb-ord__acts { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.8rem; }
.pb-ord__acts .btn:disabled { opacity: 0.55; cursor: default; }
.pb-ord__how { margin-top: 0.6rem; max-width: 46rem; font-size: 0.86rem; color: var(--ink-2); }
.pb-ord__disclose { margin-top: 0.55rem; max-width: 46rem; font-size: 0.82rem; color: var(--ink-3); }
/* the order's cost, under its table so a phone sees it without scrolling sideways */
.pb-ord__part { margin: 0.5rem 0 0; text-align: right; font-size: 0.84rem; color: var(--ink-2); }
.pb-ord__sum { display: grid; justify-content: end; margin: 0.5rem 0 0; font-variant-numeric: tabular-nums; }
.pb-ord__sum div { display: grid; grid-template-columns: 7rem 7.5rem; padding: 0.15rem 0.55rem; }
.pb-ord__sum dt { font-size: 0.86rem; font-weight: 650; color: var(--ink-2); text-align: right; }
.pb-ord__sum dd { margin: 0; text-align: right; font-weight: 650; }
.pb-ord__sum .pb-ord__all { margin-top: 0.2rem; padding-top: 0.35rem; border-top: 2px solid var(--ink); }
.pb-ord__sum .pb-ord__all :is(dt, dd) { font-weight: 800; color: var(--ink); }
.pb-ord__partner { container-type: inline-size; }
.pb-ord__pack { white-space: nowrap; }
@container (max-width: 34rem) {
  .pb-ord--packs, .pb-ord--packs tbody { display: block; min-width: 0; }
  .pb-ord--packs thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .pb-ord--packs tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.2rem 0.8rem; padding: 0.6rem 0.1rem; border-bottom: 1px solid var(--rule); }
  .pb-ord--packs :is(th, td) { padding: 0; border: 0; }
  .pb-ord--packs td:is(:nth-child(2), :nth-child(3), :nth-child(4)) { display: none; }
  .pb-ord--packs td:nth-child(5) { grid-row: 2; grid-column: 1 / -1; text-align: left; }
  .pb-ord--packs td:nth-child(6) { grid-row: 1; grid-column: 2; font-weight: 700; }
}
/* The rest of the order on a phone: each product over two lines, its name and the block's amount (or
   the rate a hectare, with no area), then its passes and rate, and its cost */
.pb-order__body { container-type: inline-size; }
@container (max-width: 34rem) {
  .pb-ord--plain, .pb-ord--plain :is(tbody, tfoot) { display: block; min-width: 0; }
  .pb-ord--plain thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .pb-ord--plain tr { display: grid; grid-template-columns: max-content max-content minmax(0, 1fr) max-content; gap: 0.15rem 0.7rem; padding: 0.55rem 0.1rem; border-bottom: 1px solid var(--rule); }
  .pb-ord--plain :is(th, td) { padding: 0; border: 0; }
  .pb-ord--plain :is(tbody, tfoot) th { grid-row: 1; grid-column: 1 / 4; }
  .pb-ord--plain .pb-ord__n, .pb-ord--plain .pb-ord__per { grid-row: 2; font-size: 0.8rem; font-weight: 650; color: var(--ink-2); text-align: left; }
  .pb-ord--plain .pb-ord__n { grid-column: 1; }
  .pb-ord--plain .pb-ord__n::after { content: attr(data-word); }
  .pb-ord--plain .pb-ord__per { grid-column: 2; }
  .pb-ord--plain .pb-ord__per::after { content: "/ha"; }
  .pb-ord--plain .pb-ord__tot { grid-row: 1; grid-column: 4; font-weight: 700; }
  .pb-ord--plain .pb-ord__cost { grid-row: 2; grid-column: 4; }
  /* with no area, the rate a hectare is the amount */
  .pb-ord--plain:not(.pb-ord--area) .pb-ord__per { grid-row: 1; grid-column: 4; font-size: inherit; font-weight: 700; color: inherit; text-align: right; }
  .pb-ord--plain:not(.pb-ord--area) .pb-ord__per::after { content: " a ha"; }
  .pb-ord--plain tfoot tr { border-top: 2px solid var(--ink); border-bottom: 0; }
  .pb-ord--plain tfoot .pb-ord__cost { grid-row: 1; }
}
/* the order as words, when the browser won't copy it: selected, for copying by hand */
.pb-ord__copy { display: block; width: 100%; min-height: 10rem; margin-top: 0.7rem; padding: 0.6rem 0.75rem; font-size: 0.85rem; line-height: 1.45; background: var(--card); border: 1.5px solid var(--rule); border-radius: 8px; resize: vertical; }

/* A partner's products that do the same job: folded until opened, and ticked one by one */
.pb-match { margin-top: 0.7rem; padding: 0 0.9rem; border: 1.5px dashed var(--rule); border-radius: 11px 13px 10px 12px; }
.pb-match[open] { padding-bottom: 0.9rem; }
.pb-match > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.6rem; padding: 0.7rem 0; cursor: pointer; list-style: none; }
.pb-match > summary::-webkit-details-marker { display: none; }
.pb-match > summary::after { content: "▾"; content: "▾" / ""; margin-left: auto; font-size: 0.8em; transition: rotate 0.2s ease; }
.pb-match[open] > summary::after { rotate: 180deg; }
.no-motion .pb-match > summary::after { transition: none; }
.pb-match > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.pb-match__title { font-size: 0.95rem; font-weight: 800; }
.pb-match > summary small { font-size: 0.82rem; font-weight: 650; color: var(--ink-3); }
.pb-match__lede { max-width: 46rem; font-size: 0.88rem; color: var(--ink-2); }
/* One row for each product and way it goes on: columns where there's room, stacked on a phone. The
   pass and the plan's product are the tick's label, so the row takes a tap. */
.pb-match { container-type: inline-size; }
.pb-match__head, .pb-match__row { display: grid; grid-template-columns: 1.7rem minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 0.8fr); column-gap: 0.8rem; }
.pb-match__head { margin-top: 0.8rem; padding: 0 0.5rem 0.4rem; border-bottom: 2px solid var(--ink); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; color: var(--ink-2); }
.pb-match__head span:last-child, .pb-match__rate { text-align: right; }
.pb-match__rows { margin: 0; padding: 0; list-style: none; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.pb-match__row { align-items: start; padding: 0.55rem 0.5rem; border-bottom: 1px solid var(--rule); }
.pb-match__row:has(input:checked) { background: color-mix(in srgb, var(--sap-2) 26%, transparent); }
.pb-match__row input { width: 1.2rem; height: 1.2rem; margin: 0.1rem 0 0; accent-color: var(--canopy); cursor: pointer; }
.pb-match__what, .pb-match__to { display: grid; grid-template-columns: subgrid; }
.pb-match__what { grid-column: 2 / 4; cursor: pointer; }
.pb-match__to { grid-column: 4 / 6; }
.pb-match__row small { display: block; font-size: 0.75rem; font-weight: 650; color: var(--ink-3); }
.pb-match__passes b { font-weight: 700; }
.pb-match__pick { max-width: 100%; padding: 0.2rem 0.3rem; font: inherit; font-size: 0.86rem; }
@container (max-width: 40rem) {
  .pb-match__head { display: none; }
  .pb-match__row { grid-template-columns: 1.7rem minmax(0, 1fr); row-gap: 0.35rem; padding-inline: 0.3rem; }
  .pb-match__what, .pb-match__to { grid-column: 2; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.8rem; }
  .pb-match__passes, .pb-match__from { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.4rem; }
  .pb-match__row small { display: inline; }
  .pb-match__to { padding-left: 0.2rem; border-left: 3px solid var(--sap); }
  .pb-match__prod { flex: 1 1 100%; }
  .pb-match__prod small, .pb-match__rate small { display: block; }
  .pb-match__rate { text-align: left; font-weight: 700; }
}
.pb-match__row small.pb-match__warn { color: var(--earth); }

/* Steve's eyes on it: from the live Q&A to a season together -------------------------------------- */
.pb-eyes { padding-block: clamp(2.4rem, 6vw, 4.5rem); border-top: 1px solid var(--rule); background: rgba(233, 223, 199, 0.35); }
.pb-eyes__head { max-width: 46rem; }
.pb-eyes__head h2 { font-size: var(--step-3); }
.pb-eyes__lede { margin-top: 0.6rem; font-size: var(--step-1); line-height: 1.45; color: var(--ink-2); }
.pb-ways { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.7rem, 1.6vw, 1.1rem); margin-top: clamp(1.2rem, 3vw, 1.8rem); }
.pb-way { display: flex; flex-direction: column; align-items: flex-start; padding: 1rem 1.1rem 1.15rem; }
.pb-way__kick { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--earth); }
.pb-way h3 { margin-top: 0.2rem; }
.pb-way p:not([class]) { margin: 0.35rem 0 0.9rem; font-size: 0.93rem; color: var(--ink-2); }
.pb-way > .btn { margin-top: auto; }
.pb-way .pb-review { width: 100%; margin-top: auto; }
@media (max-width: 1180px) { .pb-ways { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .pb-ways { grid-template-columns: minmax(0, 1fr); } }

/* Sending it to Steve: the offer opens under the button, a plan's worth of pencil notes */
.pb-review > summary { list-style: none; }
.pb-review > summary::-webkit-details-marker { display: none; }
.pb-review > summary::after { content: "▾"; content: "▾" / ""; margin-left: 0.4em; font-size: 0.8em; transition: rotate 0.2s ease; }
.pb-review[open] > summary::after { rotate: 180deg; }
.no-motion .pb-review > summary::after { transition: none; }
.pb-review__panel { display: grid; gap: 0.55rem; margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px dashed var(--rule); }
.pb-steve .pb-review__price { margin: 0; color: var(--ink-2); }
.pb-review__price strong { margin-right: 0.15em; font-family: var(--f-display); font-size: 2rem; font-weight: 560; line-height: 1; color: var(--canopy); font-variant-numeric: lining-nums; }
.pb-steve .pb-review__what { margin: 0; font-size: 0.88rem; color: var(--ink-2); }
.pb-review__label { margin-top: 0.2rem; font-weight: 700; font-size: 0.88rem; }
.pb-review__label span { font-weight: 500; color: var(--ink-3); }
.pb-review__note { width: 100%; min-height: 5.2rem; padding: 0.55rem 0.7rem; font-size: 0.93rem; resize: vertical; }
/* on a touch screen, the builder's fields at 16 px, so an iPhone doesn't zoom in on one (base.css) */
@media (pointer: coarse), (max-width: 760px) {
  .pb-in, .pb-meta .pb-in, .pb-line__extra .pb-in, .pb-learn__pick .pb-in, .pb-review__note { font-size: 1rem; }
}
.pb-review__panel .btn { justify-self: start; }
.pb-review__panel .btn:disabled { opacity: 0.55; cursor: default; }
.pb-steve .pb-review__small { margin: 0; font-size: 0.78rem; color: var(--ink-3); }
.pb-steve [data-review-said] { margin: 0.8rem 0 0; }
.pb-steve [data-review-said]:focus { outline: none; }
.pb-review__sent { display: grid; gap: 0.35rem; width: 100%; list-style: none; margin: 0.8rem 0 0; padding: 0.7rem 0 0; border-top: 1px dashed var(--rule); font-size: 0.86rem; }
.pb-review__sent li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.1rem 0.8rem; }
.pb-review__sent time, .pb-review__sent em { color: var(--ink-3); font-style: normal; }

/* Dialogs: a new plan, the crop's stages, a product of your own -------------------------------------- */
.pb-dialog { width: min(30rem, calc(100vw - 2 * var(--gutter))); max-height: calc(100svh - 2rem); padding: 1.3rem 1.4rem; overflow-y: auto; border: 2px solid var(--ink); border-radius: 16px 14px 17px 13px; background: var(--card); color: var(--ink); box-shadow: 0 30px 70px -30px rgba(20, 15, 5, 0.7); }
.pb-dialog--wide { width: min(42rem, calc(100vw - 2 * var(--gutter))); }
.pb-dialog::backdrop { background: rgba(30, 43, 34, 0.45); }
.pb-dialog h2 { font-size: var(--step-2); }
/* A locked way to QuorumAI on the free builder: the hub's pitch for that one thing (qag-3l5c). A painted
   band, a sheet of paper torn over it, what QuorumAI would do there, shown on their own plan as it looks
   in the hub, what else the hub holds, then the way in. */
.pb-dialog.pb-lock { width: min(32rem, calc(100vw - 2 * var(--gutter))); padding: 0; overflow: hidden auto; background: var(--paper); }
.pb-lock__art { position: relative; height: clamp(6.5rem, 27vw, 9.5rem); background: #fbf7ee; overflow: hidden; }
.pb-lock__art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 45% 40%; }
.pb-lock .pb-lock__badge { position: absolute; left: 1.1rem; top: 0.85rem; display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; padding: 0.3rem 0.75rem; border-radius: 999px; background: var(--canopy); color: #fff; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.02em; box-shadow: 0 6px 14px -8px rgba(20, 15, 5, 0.6); }
.pb-lock__badge svg { width: 0.85rem; height: 0.85rem; flex: none; }
.pb-lock__sheet { position: relative; padding: 0.35rem 1.4rem 1.35rem; }
.pb-lock .pb-lock__title { font-size: var(--step-2); line-height: 1.12; text-wrap: balance; }
.pb-lock .pb-lock__what { margin-top: 0.45rem; }
/* the hub's own builder, small: tilted a touch, like a card laid on the table */
.pb-lock__show { margin: 1.05rem 0 0; }
.pb-lock__screen { display: grid; gap: 0.5rem; padding: 0.7rem 0.8rem 0.8rem; border: 1.5px solid rgba(30, 43, 34, 0.22); border-radius: 12px 11px 13px 10px; background: var(--card); box-shadow: 0 14px 26px -20px rgba(20, 15, 5, 0.65); transform: rotate(-0.5deg); }
.pb-lock .pb-lock__bar { margin: 0; font-size: 0.74rem; font-weight: 750; letter-spacing: 0.07em; text-transform: uppercase; color: var(--canopy-2); }
.pb-lock__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; font-size: 0.88rem; }
.pb-lock__rows li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 0.6rem; padding: 0.35rem 0.55rem; border-radius: 8px; background: rgba(44, 97, 56, 0.07); }
.pb-lock__rows span { color: var(--ink-3); font-size: 0.82rem; }
.pb-lock__rows--passes li.pb-lock__pass { display: grid; gap: 0.1rem; justify-content: stretch; border: 1.5px dashed #b88a24; background: rgba(247, 210, 106, 0.13); }
.pb-lock__pass span { color: var(--ink-2); font-size: 0.86rem; }
.pb-lock__pass i { color: var(--ink-3); font-size: 0.8rem; }
.pb-lock .pb-lock__based { margin: 0; font-size: 0.78rem; color: var(--ink-3); }
.pb-lock .pb-lock__acts { display: flex; gap: 0.4rem; margin: 0.1rem 0 0; }
.pb-lock__pill { display: inline-block; padding: 0.15rem 0.7rem; border: 1.5px solid var(--ink); border-radius: 999px; font-size: 0.78rem; font-weight: 700; color: var(--ink); }
.pb-lock__pill.is-keep { background: var(--wattle); }
.pb-lock .pb-lock__you { justify-self: end; max-width: 88%; margin: 0; padding: 0.45rem 0.75rem; border-radius: 14px 14px 4px 14px; background: var(--canopy); color: #fff; font-size: 0.88rem; line-height: 1.35; }
.pb-lock__ai { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.4rem; padding: 0.45rem 0.6rem; border-radius: 14px 14px 14px 4px; background: rgba(44, 97, 56, 0.08); justify-self: start; max-width: 92%; }
.pb-lock__src { display: inline-block; padding: 0.05rem 0.5rem; border: 1px solid rgba(30, 43, 34, 0.25); border-radius: 999px; background: var(--card); font-size: 0.72rem; font-weight: 650; color: var(--ink-2); }
.pb-lock__show figcaption { margin-top: 0.4rem; font-size: 0.8rem; color: var(--ink-3); }
.pb-lock__more { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.4rem; font-weight: 650; }
.pb-lock__more li { display: flex; align-items: flex-start; gap: 0.5rem; }
.pb-lock__more .pb-tick { flex: none; width: 1.05rem; height: 1.05rem; margin-top: 0.2rem; color: var(--canopy-2); }
/* the way in stays in view while a phone scrolls the rest */
.pb-lock .pb-lock__go { position: sticky; bottom: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem 1.1rem; margin: 1.15rem -1.4rem -1.35rem; padding: 0.75rem 1.4rem 1.1rem; background: var(--grain) var(--paper); background-size: 260px 260px; box-shadow: 0 -12px 16px -16px rgba(20, 15, 5, 0.55); }
.pb-lock__not { margin-left: auto; }
@media (max-width: 420px) { .pb-lock__sheet { padding-inline: 1.1rem; } .pb-lock .pb-lock__go { margin-inline: -1.1rem; padding-inline: 1.1rem; } }
/* QuorumAI's way to tune them, first, then the grower's own */
.pb-sted__ai {
  display: grid; gap: 0.45rem; justify-items: start; margin-top: 0.75rem; padding: 1rem 1.1rem 1.05rem; color: var(--paper);
  background: radial-gradient(120% 140% at 100% 0%, var(--canopy-2), var(--canopy) 60%); border-radius: var(--radius);
}
.pb-dialog .pb-sted__ai p { margin: 0; max-width: 40rem; font-size: 0.92rem; line-height: 1.5; color: color-mix(in srgb, var(--paper) 88%, transparent); }
.pb-dialog .pb-sted__ai .pb-sted__ai-title { font-family: var(--f-display); font-weight: 650; font-size: 1.15rem; line-height: 1.3; color: var(--paper); }
.pb-sted__ai .pb-qai { margin-top: 0.3rem; }
.pb-dialog .pb-sted__self { margin-top: 1.2rem; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.pb-dialog .pb-sted__self + p { margin-top: 0.25rem; }
.pb-dialog p { margin-top: 0.5rem; color: var(--ink-2); }
.pb-dialog__field { margin-top: 0.9rem; }
.pb-dialog__acts { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.1rem; }
/* held, as Ask is till its price is said (qag-31hse) */
.pb-dialog__acts .btn:disabled { opacity: 0.55; cursor: default; }
.pb-dialog__del { margin-left: auto; color: var(--earth-2); }
.pb-dialog .form-problem { margin-top: 0.8rem; }
@media (max-width: 520px) { .pb-dialog { padding: 1.1rem 1rem; } }

/* the crop's stages */
.pb-sted__top { display: flex; flex-wrap: wrap; gap: 0.7rem 1rem; margin-top: 1rem; }
.pb-sted__top .pb-field { flex: 1 1 9rem; }
.pb-sted__table { width: 100%; margin-top: 1.1rem; border-collapse: collapse; }
.pb-sted__table th { padding: 0 0.4rem 0.35rem; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; text-align: left; color: var(--ink-3); border-bottom: 2px solid var(--ink); }
.pb-sted__table th:last-child, .pb-sted__table td:last-child { width: 1%; text-align: center; }
.pb-sted__table th:last-child { min-width: 6.5rem; line-height: 1.25; }
.pb-sted__table td { padding: 0.35rem 0.4rem; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.pb-sted__table td:first-child { padding-left: 0.75rem; box-shadow: inset 0.35rem 0 0 var(--c); }
.pb-sted__table td:first-child .pb-in { width: 100%; }
.pb-sted__from { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.45rem; }
.pb-sted__from label { font-size: 0.8rem; font-weight: 700; color: var(--ink-3); }
.pb-sted__from .pb-in { width: 5rem; }
.pb-sted__date { min-width: 3.6rem; font-size: 0.82rem; font-weight: 650; color: var(--ink-3); }
.pb-sted__table input[type="checkbox"], .pb-prod input[type="checkbox"], .pb-prod input[type="radio"] { width: 1.2rem; height: 1.2rem; margin: 0; accent-color: var(--canopy); }
/* on a phone the stage's name gets the room: the day's box narrows and its word goes to the screen reader */
@media (max-width: 520px) {
  .pb-sted__table th, .pb-sted__table td { padding-inline: 0.25rem; }
  .pb-sted__table td:first-child { padding-left: 0.65rem; }
  .pb-sted__table td:first-child .pb-in { padding-inline: 0.45rem; }
  .pb-sted__from label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .pb-sted__from .pb-in { width: 4rem; }
}

/* a product of your own */
.pb-prod__row { display: flex; flex-wrap: wrap; gap: 0.7rem 1rem; margin-top: 1rem; }
.pb-prod__row .pb-field { flex: 1 1 12rem; }
.pb-prod__ai { margin: 0.5rem 0 0; padding: 0.45rem 0.7rem; border-left: 3px solid var(--wattle); background: rgba(247, 210, 106, 0.16); font-size: 0.88rem; font-weight: 650; color: var(--ink-2); }
.pb-prod__set { margin: 1rem 0 0; padding: 0.7rem 0.9rem 0.9rem; border: 1.5px solid var(--rule); border-radius: 12px 10px 13px 11px; }
.pb-prod__set legend { padding: 0 0.35rem; font-weight: 800; font-size: 0.92rem; }
.pb-prod__opts { display: flex; flex-wrap: wrap; gap: 0.4rem 1.3rem; }
.pb-prod__opts label, .pb-prod__none { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 650; font-size: 0.93rem; cursor: pointer; }
.pb-prod__opts[data-basis] { margin-bottom: 0.3rem; }
.pb-dialog .pb-prod__hint { margin-top: 0.2rem; font-size: 0.86rem; color: var(--ink-3); }
.pb-prod__paste { margin-top: 0.6rem; }
.pb-prod__els { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.2rem, 1fr)); gap: 0.45rem 0.9rem; margin-top: 0.75rem; }
.pb-prod__el { display: flex; align-items: center; gap: 0.35rem; }
.pb-prod__el .pb-el { flex: none; }
.pb-prod__el .pb-in, .pb-prod__c .pb-in { width: 100%; min-width: 0; padding: 0.3rem 0.4rem; font-size: 0.9rem; }
@media (pointer: coarse), (max-width: 760px) { .pb-prod__el .pb-in, .pb-prod__c .pb-in { font-size: 1rem; } }
.pb-prod__unit { min-width: 1.6rem; font-size: 0.78rem; font-weight: 700; color: var(--ink-3); }
.pb-prod__none { margin-top: 0.85rem; }
.pb-prod__chel { margin-top: 1rem; }
/* its carbon: organic carbon, or the acids its label prints in its place (qag-3mg8) */
.pb-prod__cs { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 0.45rem 0.9rem; margin-top: 0.3rem; }
.pb-prod__c { display: flex; align-items: center; gap: 0.35rem; font-weight: 650; font-size: 0.9rem; }
.pb-prod__c > span:first-child { flex: none; width: 7.4rem; }
.pb-dialog .pb-prod__cs + .pb-prod__hint { margin-top: 0.7rem; }
/* a label read from a photo (qag-3szs): the button, what it said, and what to check */
.pb-prod__photo { margin-top: 0.8rem; }
.pb-prod__shoot { display: inline-flex; align-items: center; gap: 0.45rem; }
.pb-prod__shoot svg { width: 1.1rem; height: 1.1rem; }
.pb-prod__said:empty { display: none; }
.pb-prod__said { margin: 0.35rem 0 0; font-size: 0.9rem; font-weight: 650; }
.pb-prod__said.is-problem { color: var(--earth-2); }
.pb-prod__read { margin-top: 0.6rem; padding: 0.55rem 0.8rem; border-left: 3px solid var(--wattle); background: rgba(247, 210, 106, 0.16); font-size: 0.88rem; }
.pb-prod__read:focus { outline: 2px solid var(--wattle); outline-offset: 2px; }
/* where reading a label is off: the way onto its waitlist, where the photo step would be (qag-34mn) */
.pb-prod__soon { margin: 0.8rem 0 0; font-size: 0.9rem; color: var(--ink-2); }
.pb-prod__read h3 { margin: 0; font-size: 0.92rem; }
.pb-prod__read ul { margin: 0.25rem 0 0; padding-left: 1.1rem; }
.pb-prod__read li { margin: 0.15rem 0; overflow-wrap: anywhere; }
.pb-prod__read p { margin: 0.35rem 0 0; }
.pb-prod__el .pb-in[data-marked], .pb-dialog [data-marked] { outline: 2px solid var(--wattle); outline-offset: 1px; }
.pb-field > .pb-prod__price { display: flex; align-items: center; gap: 0.35rem; font-size: 0.95rem; font-weight: 700; letter-spacing: normal; text-transform: none; color: var(--ink); }
.pb-prod__price .pb-in { width: 6.5rem; }
.pb-prod__price [data-per] { font-size: 0.86rem; font-weight: 650; color: var(--ink-3); }

/* What prints: the wall chart, and the season on the back ----------------------------------------- */
.pb-print { display: none; }
@media print {
  @page { size: A4 landscape; margin: 8mm 10mm; }
  html, body { background: #fff !important; }
  .hub-page--program > :not(main), .hub--program > :not(.pb-print) { display: none !important; }
  .hub--program { padding: 0 !important; margin: 0 !important; }
  .pb-print { display: block; color: #1e2b22; font-size: 8.6pt; line-height: 1.3; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .pp-page { display: flex; flex-direction: column; height: 191mm; overflow: hidden; }
  .pp-page + .pp-page { break-before: page; }
  /* the wall chart: a page, unless a stage has more passes than its column holds; then the columns run
     on to the next sheet rather than lose a pass off the bottom (qag-zrym: Steve's onion lost three) */
  .pp-page--front { height: auto; min-height: 191mm; overflow: visible; }
  .pp-page--front .pp-col { overflow: visible; }
  .pp-page--front .pp-col li { break-inside: avoid; }
  .pp-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 8mm; padding-bottom: 2.5mm; border-bottom: 1.4pt solid #1e2b22; }
  .pp-kick { font-size: 7pt; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #a03f24; }
  .pp-head h1 { margin-top: 1mm; font-size: 19pt; line-height: 1.05; }
  .pp-meta { margin-top: 1mm; font-size: 8.4pt; font-weight: 650; color: #3b4a3f; }
  .pp-brand { display: flex; align-items: center; gap: 4mm; }
  .pp-stamp { padding: 1mm 2.2mm; border: 1.6pt solid #a03f24; border-radius: 1.2mm; color: #a03f24; font-weight: 800; font-size: 9pt; letter-spacing: 0.2em; text-transform: uppercase; rotate: -4deg; }
  .pp-mark { font-family: var(--f-mark); font-weight: 600; font-size: 11pt; letter-spacing: 0.3em; }
  .pp-chart { margin-top: 2.5mm; }
  .pp-chart svg { display: block; width: 100%; height: auto; max-height: 100mm; }
  .pp-cols { flex: 1; display: grid; gap: 2.2mm; margin-top: 2.5mm; min-height: 0; }
  .pp-col { min-width: 0; padding: 1.6mm 1.8mm; border-top: 1.6mm solid var(--c); background: #faf6ec; border-radius: 0 0 1.2mm 1.2mm; overflow: hidden; }
  .pp-col h2 { font-family: var(--f-body); font-size: 8pt; font-weight: 800; line-height: 1.15; }
  .pp-col h2 span { display: block; margin-top: 0.3mm; font-size: 6.4pt; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #a03f24; }
  .pp-when { font-size: 6.8pt; font-weight: 650; color: #585c50; }
  .pp-col ul { list-style: none; margin: 1.2mm 0 0; padding: 0; display: grid; gap: 1.1mm; }
  .pp-col li { font-size: 7pt; line-height: 1.25; }
  .pp-col li b { font-weight: 800; }
  .pp-col li i { color: #585c50; }
  .pp-col li.pp-test { color: #3d5a80; font-weight: 700; }
  .pp-foot { display: flex; justify-content: space-between; gap: 6mm; margin-top: 2mm; padding-top: 1.5mm; border-top: 0.6pt solid #b9b3a3; font-size: 6.8pt; color: #3b4a3f; }
  .pp-foot b { color: #a03f24; }
  .pp-back { flex: 1; display: grid; grid-template-columns: 1.05fr 1fr; gap: 8mm; margin-top: 3mm; min-height: 0; }
  .pp-back h2 { font-family: var(--f-display); font-size: 12pt; font-weight: 650; margin: 0 0 1.5mm; }
  .pp-back h2 + * { margin-top: 0; }
  .pp-back section + section { margin-top: 4mm; }
  .pp-back p + p { margin-top: 1.4mm; }
  .pp-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2mm; }
  .pp-checks li { display: grid; grid-template-columns: 4mm 1fr; gap: 1.5mm; font-size: 8pt; }
  .pp-checks li b { font-weight: 800; }
  .pp-tot { width: 100%; border-collapse: collapse; font-size: 7.4pt; font-variant-numeric: tabular-nums; }
  .pp-tot th, .pp-tot td { padding: 0.8mm 1.2mm; border-bottom: 0.5pt solid #d4cdbd; text-align: right; white-space: nowrap; }
  .pp-tot thead th { border-bottom: 1pt solid #1e2b22; font-size: 6.4pt; }
  .pp-tot tbody th { text-align: left; }
  .pp-tot tbody th span { font-weight: 600; color: #585c50; }
  .pp-tot .pp-sum { font-weight: 800; }
  .pp-tot .pp-c th, .pp-tot .pp-c td { border-top: 1pt solid #1e2b22; }
  .pp-back > div { display: flex; flex-direction: column; min-height: 0; }
  .pp-back .pp-fill { flex: 1; display: flex; flex-direction: column; min-height: 30mm; }
  .pp-lines { flex: 1; min-height: 24mm; background: repeating-linear-gradient(transparent 0 6.6mm, #cfc7b4 6.6mm 6.9mm); }
  /* the third page, what to order: as long as it needs, breaking between rows */
  .pp-page--order { display: block; height: auto; overflow: visible; }
  .pp-order { margin-top: 3mm; }
  .pp-order section + section { margin-top: 5mm; }
  .pp-order h2 { font-family: var(--f-display); font-size: 12pt; font-weight: 650; margin: 0 0 1.5mm; }
  /* the tank page's fertigation, after its sprays */
  .pp-page--tank .pp-order > section { margin-top: 6mm; }
  .pp-sample { margin-left: 2mm; padding: 0.4mm 1.4mm; border: 1pt solid #a03f24; border-radius: 1mm; font-family: var(--f-body); font-size: 6.4pt; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #a03f24; vertical-align: 0.15em; }
  .pp-ord { width: 100%; border-collapse: collapse; font-size: 8pt; font-variant-numeric: tabular-nums; }
  .pp-ord th, .pp-ord td { padding: 1mm 1.6mm; border-bottom: 0.5pt solid #d4cdbd; text-align: right; }
  .pp-ord thead th { border-bottom: 1pt solid #1e2b22; font-size: 6.8pt; }
  .pp-ord :is(thead, tbody) th:first-child { text-align: left; }
  .pp-ord tbody th span { font-weight: 600; color: #585c50; }
  .pp-ord tr { break-inside: avoid; }
  .pp-ord tfoot :is(th, td) { border-bottom: 0; border-top: 1pt solid #1e2b22; font-weight: 800; }
  .pp-ref { margin-top: 1.8mm; font-size: 8pt; }
  .pp-ref b { font-weight: 800; letter-spacing: 0.04em; }
  .pp-page--order .pp-foot { margin-top: 5mm; }
  .pp-ticks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4mm 5mm; }
  .pp-ticks li { display: flex; align-items: center; gap: 2mm; font-size: 8pt; }
  .pp-ticks li::before { content: ""; flex: none; width: 3.2mm; height: 3.2mm; border: 0.8pt solid #1e2b22; border-radius: 0.6mm; }
  .pp-ticks b { font-weight: 800; }
  .pp-notes { white-space: pre-wrap; }
  /* the last page, once the sprayer's in: each spray pass by the tankful */
  .pp-page--tank .pp-meta { max-width: 190mm; }
  .pp-tank tbody { break-inside: avoid; }
  .pp-tank tbody + tbody tr:first-child :is(th, td) { border-top: 1pt solid #b9b3a3; }
  .pp-tank .pp-tank__pass { vertical-align: top; text-align: left; white-space: nowrap; }
  .pp-tank tbody th:not(.pp-tank__pass), .pp-tank thead th:nth-child(-n + 2) { text-align: left; }
  .pp-tank tbody th:not(.pp-tank__pass) { font-weight: 650; }
}

/* About the block, in Draft the whole program: a minute of taps (R.ABOUT), kept on the plan */
.pb-about { margin: 0.8rem 0 0.2rem; padding: 0.5rem clamp(0.6rem, 2vw, 0.9rem) 0.7rem; border: 1.5px solid var(--rule); border-radius: 12px 10px 13px 11px; min-width: 0; }
.pb-about legend { padding: 0 0.3rem; font-weight: 800; }
.pb-about legend span { font-weight: 600; font-size: 0.85em; color: var(--ink-3); }
.pb-about__qs { display: grid; gap: 0.75rem; margin: 0.5rem 0 0.4rem; }
.pb-about__label { margin: 0 0 0.3rem; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.pb-about__label span { font-size: 0.75rem; font-weight: 650; letter-spacing: 0; text-transform: none; }
.pb-about__opts { display: flex; flex-wrap: wrap; gap: 0.35rem; }
/* their own words beside the taps (R.ABOUT said) */
.pb-about__say { width: 100%; margin-top: 0.4rem; min-height: 2.3rem; padding: 0.35rem 0.7rem; font-size: 0.9rem; }
textarea.pb-about__say { min-height: 3.6rem; resize: vertical; }
.pb-about__say::placeholder { color: var(--ink-3); }
.pb-tap { position: relative; display: inline-flex; }
.pb-tap input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pb-tap span { display: inline-flex; align-items: center; min-height: 2.3rem; padding: 0.3rem 0.8rem; border: 1.5px solid var(--rule); border-radius: 999px; background: var(--card); font-size: 0.88rem; font-weight: 650; }
.pb-tap:hover span { border-color: var(--ink-2); }
.pb-tap input:checked + span { background: var(--canopy); border-color: var(--canopy); color: var(--paper); }
.pb-tap input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 2px; }

/* The block's tests and walks, beside the plan (block-panel.js; qag-3u5g) ------------------------------- */
.bp { padding: 1rem 1.1rem 1.3rem; display: grid; align-content: start; gap: 0.85rem; }
.bp > * { margin: 0; }
.bp p { margin: 0; }
.bp-head h3 { font-family: var(--f-display); font-weight: 650; font-size: 1.25rem; line-height: 1.25; }
.bp-head p { margin-top: 0.15rem; font-size: 0.88rem; color: var(--ink-3); }
.bp-pl { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.55rem; font-size: 0.85rem; font-weight: 700; color: var(--ink-2); }
.bp-pl select { width: auto; max-width: 100%; min-width: 0; padding: 0.3rem 0.5rem; font-size: 0.88rem; }
@media (pointer: coarse), (max-width: 760px) { .bp-pl select { font-size: 1rem; } }
.bp-warn { padding: 0.5rem 0.7rem; border-left: 3px solid var(--earth); background: var(--paper-2); font-size: 0.9rem; }
.bp-none { display: grid; gap: 0.6rem; color: var(--ink-2); font-size: 0.92rem; }
.bp-none b { color: var(--ink); }
.bp-kinds { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.bp-kind { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2rem; padding: 0.25rem 0.75rem; font: inherit; font-weight: 750; font-size: 0.85rem; color: var(--ink-2); background: transparent; border: 1.5px solid var(--rule); border-radius: 999px; cursor: pointer; }
.bp-kind span { font-size: 0.75rem; color: var(--ink-3); }
.bp-kind:hover { background: var(--paper-2); }
.bp-kind[aria-pressed="true"] { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.bp-kind[aria-pressed="true"] span { color: var(--paper-3); }
.bp-kind:focus-visible, .bp-dot:focus-visible, .bp-list__item:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* the season strip: the stages as a band, today, and a lane of dots for each kind */
.bp-strip { margin: 0; display: grid; gap: 0.15rem; padding: 0.6rem 0.7rem 0.45rem; background: var(--paper); border-radius: 12px; box-shadow: inset 0 0 0 1px var(--rule); }
.bp-strip__stages { position: relative; height: 0.85rem; margin-bottom: 0.3rem; }
.bp-strip__stage { position: absolute; top: 0; bottom: 0; background: var(--c); opacity: 0.55; border-right: 1px solid var(--card); }
.bp-strip { position: relative; }
.bp-strip__today { position: absolute; top: 0.35rem; bottom: 1.5rem; left: calc(0.7rem + (100% - 1.4rem) * var(--at)); width: 0; border-left: 2px dashed var(--ink-2); z-index: 1; pointer-events: none; }
.bp-strip__lane { position: relative; height: 1.6rem; border-top: 1px dotted var(--rule); }
.bp-dot { position: absolute; top: 50%; width: 1.5rem; height: 1.5rem; margin: -0.75rem 0 0 -0.75rem; padding: 0; background: transparent; border: 0; border-radius: 50%; cursor: pointer; z-index: 2; }
.bp-dot::after { content: ""; position: absolute; inset: 0.32rem; border-radius: 50%; background: var(--k, var(--canopy)); box-shadow: 0 0 0 2px var(--card); transition: transform 0.15s ease; }
.bp-swatch { position: relative; width: 0.7rem; height: 0.7rem; }
.bp-swatch::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--k); }
.bp-swatch.bp-dot--walk::after { inset: 0.08rem; border-radius: 1px; transform: rotate(45deg); }
.bp-kind[aria-pressed="true"] .bp-swatch::after { box-shadow: 0 0 0 1.5px var(--paper); }
.bp-dot--sap { --k: var(--canopy-2); }
.bp-dot--soil { --k: var(--earth); }
.bp-dot--leaf { --k: #6b8e23; }
.bp-dot--walk { --k: var(--wattle-3); }
.bp-dot--walk::after { border-radius: 2px; transform: rotate(45deg); }
.bp-dot:hover::after { transform: scale(1.25); }
.bp-dot--walk:hover::after { transform: rotate(45deg) scale(1.25); }
.bp-dot.is-on::after { inset: 0.18rem; box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--ink); }
.bp-strip__ends { display: flex; justify-content: space-between; gap: 1rem; margin-top: 0.15rem; font-size: 0.75rem; color: var(--ink-3); }
.bp-off { font-size: 0.85rem; color: var(--ink-2); }
.bp-off .pb-link[aria-current] { font-weight: 800; }
.bp-view { font-size: 0.88rem; }
.bp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.bp-list__item { width: 100%; display: grid; grid-template-columns: auto 1fr; column-gap: 0.55rem; align-items: center; padding: 0.4rem 0.6rem; font: inherit; text-align: left; color: var(--ink); background: transparent; border: 1px solid var(--rule); border-radius: 10px; cursor: pointer; }
.bp-list__item svg { grid-row: span 2; width: 1.1rem; height: 1.1rem; color: var(--earth); }
.bp-list__item span { font-weight: 700; font-size: 0.9rem; }
.bp-list__item small { font-size: 0.8rem; color: var(--ink-3); }
.bp-list__item[aria-pressed="true"] { background: var(--paper-2); border-color: var(--ink); }

/* the open record */
.bp-rec { display: grid; gap: 0.7rem; padding-top: 0.85rem; border-top: 1px solid var(--rule); }
.bp-rec > * { margin: 0; }
.bp-rec__nav { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: 0.82rem; font-weight: 700; color: var(--ink-3); }
.bp-rec__nav .pb-mini:disabled { opacity: 0.35; cursor: default; }
.bp-rec h4 { display: flex; align-items: center; gap: 0.45rem; font-family: var(--f-display); font-weight: 650; font-size: 1.12rem; line-height: 1.25; }
.bp-rec h4:focus { outline: none; }
.bp-rec h4 svg { flex: none; width: 1.2rem; height: 1.2rem; color: var(--earth); }
.bp-rec__when { margin-top: -0.45rem; font-size: 0.86rem; color: var(--ink-3); }
.bp-rec__note { padding: 0.4rem 0.65rem; border-left: 3px solid var(--wattle); background: rgba(242, 182, 50, 0.12); font-size: 0.92rem; }
.bp-rec__go { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; font-size: 0.9rem; }
.bp-rec__go .walk-link { display: inline-flex; align-items: center; gap: 0.35rem; }
.bp-rec__go svg { width: 1.05rem; height: 1.05rem; }
.bp-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr)); gap: 0.7rem; }
.bp-grid .sap-chart { padding: 0.7rem 0.7rem 0.6rem; }
.bp .sap-key { font-size: 0.8rem; }
.bp-more { margin-top: -0.2rem; }
.bp-nums { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.bp-nums th, .bp-nums td { padding: 0.4rem 0.4rem 0.4rem 0; text-align: left; vertical-align: top; border-top: 1px solid var(--rule); }
.bp-nums thead th { padding-top: 0; border-top: 0; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.bp-nums tbody th { font-weight: 700; }
.bp-nums :is(th, td) span { display: block; font-weight: 500; font-size: 0.78rem; color: var(--ink-3); }
.bp-nums td { font-variant-numeric: tabular-nums; }
.bp-nums tr.is-below td:nth-child(2) b, .bp-nums tr.is-above td:nth-child(2) b { color: var(--earth-2); }
.bp-nums tr.is-below td:last-child span, .bp-nums tr.is-above td:last-child span { color: var(--earth-2); font-weight: 750; }
.bp-walk__sum { font-size: 0.88rem; color: var(--ink-2); }
.bp-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.bp-check { padding: 0.45rem 0.65rem; border-left: 4px solid var(--s, var(--rule)); background: var(--paper); border-radius: 0 10px 10px 0; display: grid; gap: 0.3rem; }
.bp-check.is-ok { --s: var(--canopy-2); }
.bp-check.is-watch { --s: var(--wattle); }
.bp-check.is-bad { --s: var(--earth); }
.bp-check p { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.2rem 0.8rem; font-size: 0.9rem; }
.bp-check__s { font-size: 0.8rem; font-weight: 750; color: var(--ink-3); }
.bp-check.is-bad .bp-check__s { color: var(--earth-2); }
p.bp-check__note { display: block; color: var(--ink-2); }
.bp-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: 0.4rem; }
.bp-photo { margin: 0; display: grid; gap: 0.2rem; }
.bp-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }
.bp-photo figcaption { font-size: 0.72rem; line-height: 1.3; color: var(--ink-3); }
.bp-photo-gone { font-size: 0.82rem; color: var(--ink-3); }
.bp-passes { margin: 0; padding-left: 1.1rem; font-size: 0.88rem; color: var(--ink-2); }

/* a visitor's: the panel as the hub draws it, and what would be there */
.bp-hub { display: grid; gap: 0.7rem; padding: 1rem 1.05rem; color: var(--paper); background: radial-gradient(120% 140% at 100% 0%, var(--canopy-2), var(--canopy) 60%); border-radius: var(--radius); }
.bp-hub p { color: color-mix(in srgb, var(--paper) 88%, transparent); font-size: 0.92rem; }
.bp-hub .bp-hub__title { font-family: var(--f-display); font-weight: 650; font-size: 1.12rem; line-height: 1.3; color: var(--paper); }
.bp-hub__what { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; font-size: 0.9rem; }
.bp-hub__what li { display: grid; grid-template-columns: 1.9rem 1fr; gap: 0.55rem; align-items: start; }
.bp-hub__what svg { width: 1.9rem; height: 1.9rem; padding: 0.42rem; color: var(--canopy); background: var(--wattle); border-radius: 50%; }
.bp-hub__what b { color: var(--paper); }
.bp-hub .pb-link { color: var(--wattle-2); }
/* the four tabs share the bar evenly (Adam, 15 October: Tests and walks looked bigger than the rest); the
   words that don't fit the bar's own width go, then the icons */
.pb-help__bar { container-type: inline-size; }
@container (max-width: 660px) { .pb-tab__more { display: none; } }
@container (max-width: 470px) { .pb-help__tabs { flex-wrap: nowrap; } .pb-tab { flex: 1 1 auto; padding-inline: 0.45rem; gap: 0.3rem; } .pb-tab svg { display: none; } }
@container (max-width: 360px) { .pb-tab { padding-inline: 0.3rem; font-size: 0.84rem; } .pb-tab__n { min-width: 1.15rem; height: 1.15rem; } }
@media (prefers-reduced-motion: reduce) { .bp-dot::after { transition: none; } }

/* the block's latest sap test, and what the fit reads in it (qag-1jnc) */
.pb-test--fit { border-style: solid; border-color: rgba(61, 90, 128, 0.35); background: rgba(91, 127, 160, 0.07); }
.pb-test__fitted { margin-left: auto; font-size: 0.8rem; font-weight: 700; color: var(--ink-2); }
.pb-test__lines { flex-basis: 100%; display: grid; gap: 0.2rem; margin: 0; padding: 0 0 0 1.8rem; list-style: none; font-weight: 500; font-size: 0.84rem; line-height: 1.4; color: var(--ink-2); }
.pb-sapfit__lines { display: grid; gap: 0.3rem; margin: 0.5rem 0 0; padding: 0 0 0 1.1rem; font-size: 0.92rem; line-height: 1.45; }