/* The crop walk: this week's walk, check by check, beside the season's walks. It's used standing in a
   paddock, on a phone, often in bright sun: big targets, strong contrast, and nothing that needs a hover. */

/* Opener ------------------------------------------------------------------------------------------ */
.walk-open { position: relative; padding-block: clamp(1.8rem, 5vh, 3.4rem) clamp(0.4rem, 2vw, 1.2rem); overflow: hidden; }
.walk-open__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(1.4rem, 4vw, 4rem); align-items: center; }
.walk-open h1 { margin-top: 0.85rem; max-width: 11ch; font-size: clamp(2.5rem, min(4.8vw, 8vh), 4.5rem); }
.walk-open .lede { margin-top: 1rem; max-width: 32rem; }
.walk-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); }
.walk-open__how li { display: inline-flex; align-items: center; gap: 0.45rem; }
.walk-open__how svg { width: 1.25rem; height: 1.25rem; color: var(--earth); }
.walk-open__signal { margin: 1rem 0 0; max-width: 34rem; font-size: 0.95rem; color: var(--ink-2); }
.walk-open__art { margin: 0; justify-self: end; width: min(100%, 30rem); }
/* the painting's paper is the card's; multiplied, it sits straight on the page */
.walk-open__art img { mix-blend-mode: multiply; }
.walk-open__art .art__over .art__hand { stroke: var(--paper); }
@media (max-width: 860px) {
  .walk-open__grid { grid-template-columns: minmax(0, 1fr); }
  .walk-open__art { justify-self: center; width: min(100%, 26rem); }
}

/* The walk and the season, side by side on a wide screen ------------------------------------------ */
.walk-main { padding-block: clamp(1rem, 3vw, 2rem) var(--section); }
.walk-main__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(1.4rem, 3vw, 2.6rem); align-items: start; }
.walk-main__walk { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; min-width: 0; }
.walk-main__season { min-width: 0; }
/* beside a walk longer than it, the season stays in view, and scrolls on its own when it's taller than
   the screen (walk.js pins it; the padding leaves room for the card's shadow) */
@media (min-width: 1021px) {
  .walk-main__season.is-pinned {
    position: sticky; top: calc(var(--hub-top, 7rem) + 1rem); max-height: calc(100vh - var(--hub-top, 7rem) - 2rem);
    overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--rule) transparent;
    margin: -0.3rem -0.8rem 0; padding: 0.3rem 0.8rem 1.4rem;
  }
}
@media (max-width: 1020px) {
  .walk-main__grid { grid-template-columns: minmax(0, 1fr); }
}
.walk-noscript { padding: 1.2rem 1.4rem; }

/* The links, fields, pads and quick start it shares with the hub's home are in learn.css */
/* What's being walked */
.walk-pick { display: grid; gap: 0.35rem; }
.walk-pick__menu { display: grid; gap: 0.3rem; max-width: 30rem; }
.walk-pick__kick { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--earth-2); }
.walk-pick select {
  width: 100%; min-height: 3rem; padding: 0.55rem 2.4rem 0.55rem 0.9rem; border: 2px solid var(--ink); border-radius: 12px 10px 13px 9px;
  background: #fffdf8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%231e2b22' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 0.9rem center / 0.8rem;
  appearance: none; color: var(--ink); font: 650 1.12rem/1.2 var(--f-display);
}
.walk-pick__meta { margin: 0; font-size: 0.92rem; color: var(--ink-2); }
.walk-pick__meta a { font-weight: 700; }
.walk-pick__note { margin: 0; font-size: 0.88rem; color: var(--ink-3); }

/* This week's walk --------------------------------------------------------------------------------- */
.walk {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem; padding: clamp(1.1rem, 3vw, 1.8rem); background: var(--card); border: 2px solid var(--ink);
  border-radius: 16px 13px 17px 12px; box-shadow: var(--shadow-paper);
}
.walk-head { display: grid; gap: 0.45rem; padding-bottom: 1rem; border-bottom: 2px dashed var(--rule); }
.walk-head__when { margin: 0; font-weight: 750; font-size: 0.86rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--earth-2); }
.walk-head h2 { font-size: var(--step-2); }
.walk-head__stage { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.2rem 0 0; font: 650 var(--step-1)/1.25 var(--f-display); }
.walk-head__goal { margin: 0; color: var(--ink-2); }
.walk-head__stakes { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.6rem 1.4rem; margin: 0.3rem 0 0; }
.walk-head__stakes dt { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.walk-head__stakes dd { margin: 0.15rem 0 0; }
.walk-head__next { display: flex; align-items: center; gap: 0.45rem; margin: 0.3rem 0 0; font-weight: 700; font-size: 0.92rem; color: var(--canopy); }
.walk-head__next svg, .walk-done__drift svg { flex: none; width: 1.1rem; height: 1.1rem; color: var(--earth); }

.walk__checks, .walk__list > ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.walk__list { display: contents; }

/* One check: a question, three answers, and room for a note or a photo */
.wcheck > fieldset { margin: 0; padding: 1rem 1rem 1.05rem; border: 1.5px solid var(--rule); border-left: 5px solid var(--sap); border-radius: 6px 12px 12px 6px; background: #fffdf8; display: grid; gap: 0.6rem; min-width: 0; }
.wcheck--stage > fieldset { border-left-color: var(--range); }
.wcheck--week > fieldset { border-left-color: var(--wattle); }
.wcheck--sap > fieldset { border-left-color: var(--galah); }
.wcheck legend { display: flex; align-items: center; gap: 0.5rem; float: left; width: 100%; padding: 0; font: 680 1.18rem/1.2 var(--f-display); }
.wcheck legend svg { flex: none; width: 1.35rem; height: 1.35rem; color: var(--earth); }
.wcheck legend + * { clear: both; }
.wcheck__look { margin: 0; color: var(--ink-2); max-width: 40rem; }
/* a check's words, a sentence or a question to a line, with a little air between so a line that wraps
   still reads as one */
.wcheck__line { display: block; }
.wcheck__line + .wcheck__line { margin-top: 0.3rem; }

/* three answers in one row, even on a phone, so a check is one glance and one tap. They're in the
   page's own text size, and on a wider screen each is only as wide as its words; the tick goes in
   the room before them, so choosing one moves nothing. */
.wstates { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 0.5rem; }
.wstate { position: relative; display: flex; min-width: 0; }
.wstate input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.wstate span {
  position: relative; flex: 1; display: grid; place-items: center; min-height: 2.75rem; padding: 0.3rem 1.75rem; text-align: center;
  border: 2px solid rgba(30, 43, 34, 0.55); border-radius: 999px; background: var(--card); font-weight: 750; font-size: inherit; line-height: 1.15;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.wstate:hover span { border-color: var(--ink); }
.wstate input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.wstate input:checked + span { border-color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.wstate--ok input:checked + span, .wstate--on input:checked + span { background: var(--sap-2); }
.wstate--watch input:checked + span { background: var(--wattle-2); }
.wstate--bad input:checked + span { background: #f1c9b3; color: #5e2414; }
.wstate--not input:checked + span { background: var(--wattle-2); }
.wstate--off input:checked + span { background: var(--paper-3); }
.wstate input:checked + span::before { content: "✓"; position: absolute; left: 0.6rem; top: 50%; transform: translateY(-50%); }

.wcheck__lead input, .wcheck__count input {
  width: 5.2rem; min-height: 2.7rem; padding: 0.4rem 0.6rem; border: 2px solid rgba(30, 43, 34, 0.7); border-radius: 10px 8px 11px 7px;
  background: var(--card); color: var(--ink); font: inherit; font-weight: 700; font-size: 1.05rem; text-align: center;
}
.wcheck__count { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; color: var(--ink-2); }

/* The stage, asked straight out: the plan's and the ones either side, each with how it shows on the
   plant, one to a row; then what the answer means for the plan, its days a field in the sentence */
.wstages { display: grid; gap: 0.45rem; }
.wstage { position: relative; display: flex; min-width: 0; }
.wstage[hidden] { display: none; }
.wstage input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.wstage > span {
  flex: 1; display: grid; gap: 0.15rem; padding: 0.6rem 0.85rem; border: 2px solid rgba(30, 43, 34, 0.45); border-radius: 12px 10px 13px 9px;
  background: var(--card); transition: background-color 0.15s ease, border-color 0.15s ease;
}
.wstage:hover > span { border-color: var(--ink); }
.wstage input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.wstage input:checked + span { border-color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); background: var(--sap-2); }
.wstage__name { display: flex; align-items: center; gap: 0.5rem; font-weight: 800; }
.wstage input:checked + span .wstage__name::after { content: "✓"; margin-left: auto; }
.wstage__sign { font-size: 0.92rem; color: var(--ink-2); }
.wstages__more { justify-self: start; }
.wcheck__lead:empty { display: none; }
.wcheck__lead p { margin: 0; font-weight: 650; color: var(--canopy); }
.wcheck__lead svg { display: inline-block; width: 1.1rem; height: 1.1rem; margin-right: 0.4rem; vertical-align: -0.18em; color: var(--earth); }
.wcheck__lead input { width: 4.4rem; min-height: 2.5rem; margin: 0 0.15rem; }
.wcheck__lead .wcheck__far { margin-top: 0.35rem; font-weight: 400; font-size: 0.9rem; color: var(--ink-2); }

.wweek { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.wweek__x { position: relative; display: inline-flex; }
.wweek__x input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.wweek__x span {
  display: inline-flex; align-items: center; min-height: 2.6rem; padding: 0.35rem 0.9rem; border: 2px solid rgba(30, 43, 34, 0.45);
  border-radius: 999px; background: var(--card); font-weight: 700; font-size: 0.92rem;
}
.wweek__x input:checked + span { background: var(--wattle-2); border-color: var(--ink); }
.wweek__x input:checked + span::before { content: "✓ "; white-space: pre; }
.wweek__x input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }

.wsap { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 750; min-height: 2.6rem; }
.wsap input { width: 1.4rem; height: 1.4rem; accent-color: var(--canopy); }

/* A flag: what it can mean, where to read, and a question for QuorumAI */
.wcheck__flag { display: grid; gap: 0.55rem; padding: 0.8rem 0.95rem; background: var(--paper-2); border-radius: 10px; border: 1.5px dashed rgba(160, 63, 36, 0.55); }
.wcheck__flag p { margin: 0; font-size: 0.95rem; }
.wcheck__flag em { color: var(--ink-2); }
.wcheck__pages { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; }
.wcheck__pages svg { width: 1.1rem; height: 1.1rem; color: var(--earth); }
.wcheck__pages a {
  display: inline-flex; align-items: center; min-height: 2.2rem; padding: 0.2rem 0.75rem; border-radius: 999px; background: var(--card);
  border: 1.5px solid var(--rule); font-weight: 700; font-size: 0.9rem; color: var(--canopy); text-decoration: none;
}
.wcheck__pages a:hover { border-color: var(--canopy-2); }
.wcheck__ask { justify-self: start; }
.wcheck__read { display: inline-flex; align-items: center; gap: 0.4rem; justify-self: start; font-weight: 700; font-size: 0.9rem; }
.wcheck__read svg { width: 1.05rem; height: 1.05rem; color: var(--earth); }

.wcheck__more { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.wcheck__btn {
  display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.5rem; padding: 0.35rem 0.85rem; border: 1.5px solid var(--rule);
  border-radius: 999px; background: transparent; font: inherit; font-weight: 700; font-size: 0.88rem; color: var(--ink-2); cursor: pointer;
}
.wcheck__btn svg { width: 1.05rem; height: 1.05rem; color: var(--earth); }
.wcheck__btn:hover { border-color: var(--ink); color: var(--ink); }
.wcheck__btn[aria-expanded="true"] { background: var(--paper-2); }
label.wcheck__btn:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.wcheck__note textarea {
  width: 100%; min-height: 3.2rem; padding: 0.6rem 0.8rem; border: 2px solid rgba(30, 43, 34, 0.6); border-radius: 10px 8px 11px 7px;
  background: var(--card); color: var(--ink); font: inherit; line-height: 1.45; resize: vertical;
}
.wcheck__photos, .walks__photos { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.wcheck__photos:empty { display: none; }
.wphoto { position: relative; display: inline-block; }
.wphoto img { display: block; width: 6rem; height: 4.5rem; object-fit: cover; border-radius: 6px; border: 1.5px solid var(--ink); background: var(--paper-2); }
.wphoto.is-gone { display: none; }
.wphoto__x {
  position: absolute; top: -0.55rem; right: -0.55rem; width: 2rem; height: 2rem; border-radius: 50%; border: 2px solid var(--card);
  background: var(--ink); color: var(--paper); font-size: 1.1rem; font-weight: 800; line-height: 1; cursor: pointer;
}
.wcheck__last { margin: 0; font-size: 0.86rem; color: var(--ink-3); }
.wcheck__ago small { font-size: 0.8rem; }

/* Photo points: each spot, its last photo to frame by, and this walk's */
.wcheck--points > fieldset { border-left-color: var(--leaf); }
.wpoints { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.8rem; }
.wpoints__pair { display: grid; justify-items: start; gap: 0.5rem; padding: 0.7rem 0.85rem; background: #fbf2d6; border-left: 4px solid var(--wattle); border-radius: 0 10px 10px 0; }
.wpoints__pair p { margin: 0; }
.wpoint { display: grid; gap: 0.5rem; padding-top: 0.75rem; border-top: 1.5px dashed var(--rule); }
.wpoint:first-child { padding-top: 0; border-top: 0; }
.wpoint__name { margin: 0; font-weight: 800; overflow-wrap: anywhere; }
.wpoint__shots { container-type: inline-size; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.7rem 0.9rem; }
.wpoint__take { align-self: center; }
/* last time's photo and this walk's side by side, even on a small phone: each at most half the row,
   and its caption wrapped to it */
.wpoint__shot { margin: 0; display: grid; gap: 0.3rem; justify-items: start; max-width: 8rem; max-width: min(8rem, calc(50cqi - 0.45rem)); }
.walks__photos .wpoint__shot { max-width: 6rem; }
.wpoint__shot figcaption { font-size: 0.8rem; font-weight: 700; color: var(--ink-3); overflow-wrap: anywhere; }
.wpoint__shots .wphoto img { width: 8rem; width: min(8rem, calc(50cqi - 0.45rem)); height: auto; aspect-ratio: 4 / 3; }
.wpoint__stop, .wpoints__open { justify-self: start; }
.wpoints__add { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.6rem; }
.wpoints__add[hidden] { display: none; }
.wpoints__add .walk-field { flex: 1 1 14rem; }
.wpoints__add .btn { min-height: 2.75rem; }

/* What went on: each of the plan's passes for around now, and how it went */
.wcheck--passes > fieldset { border-left-color: var(--clay); }
.wpasses { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.8rem; }
.wpass { padding-top: 0.75rem; border-top: 1.5px dashed var(--rule); }
.wpass:first-child { padding-top: 0; border-top: 0; }
.wpass > fieldset { display: grid; gap: 0.5rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.wcheck .wpass__what { align-items: flex-start; gap: 0.45rem; font: 800 1rem/1.35 var(--f-body); overflow-wrap: anywhere; }
.wcheck .wpass__what svg { width: 1.1rem; height: 1.1rem; margin-top: 0.12rem; color: var(--ink-2); }
.wpass__when { font-weight: 650; color: var(--ink-3); }
/* what goes on, one product to a line, under the method, with its rate */
.wpass__lines { list-style: none; margin: 0; padding: 0 0 0 1.55rem; display: grid; max-width: 32rem; }
.wpass__lines li { display: flex; justify-content: space-between; align-items: baseline; gap: 0.4rem 1rem; padding: 0.3rem 0; border-bottom: 1px dotted var(--rule); }
.wpass__lines li:last-child { border-bottom: 0; }
.wpass__lines b { flex: none; white-space: nowrap; }
.wpass__ask { margin: 0.15rem 0 0; font-weight: 750; }
.wpass__note[hidden] { display: none; }
.wcheck__last span { font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.74rem; color: var(--ink-2); margin-right: 0.25rem; }

.walk__foot { display: grid; gap: 1rem; padding-top: 0.4rem; }
.walk-field--wide { max-width: none; }
.walk__save { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem 1.2rem; }
.walk__save .btn { min-height: 3.1rem; }
.walk__kept { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; font-size: 0.86rem; color: var(--ink-3); }
.walk__kept svg { width: 1rem; height: 1rem; }
/* on an iPhone in Safari: what a week away does to it (walk.js) */

/* A walk saved: what it found, and where to go with it */
.walk-done { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.9rem; padding: clamp(1.1rem, 3vw, 1.8rem); border: 2px solid var(--ink); }
.walk-done:focus { outline: none; }
.walk-done:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.walk-done__kick { display: inline-flex; align-items: center; gap: 0.45rem; margin: 0; font-weight: 800; font-size: 0.86rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--canopy); }
.walk-done__kick svg { width: 1.2rem; height: 1.2rem; }
.walk-done h2 { font-size: var(--step-2); }
.walk-done__changed p, .walk-done__same { margin: 0; font-weight: 700; }
.walk-done__changed ul { margin: 0.3rem 0 0; padding-left: 1.2rem; }
.walk-done__next { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.walk-done__drift { display: flex; gap: 0.5rem; align-items: flex-start; margin: 0; padding: 0.75rem 0.9rem; border-radius: 10px; background: var(--paper-2); }
.walk-done__dates { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; font-weight: 700; color: var(--ink-2); }
.walk-done__dates li { display: flex; align-items: flex-start; gap: 0.45rem; }
.walk-done__dates svg { flex: none; width: 1.1rem; height: 1.1rem; margin-top: 0.15rem; color: var(--earth); }
.walk-done__again { justify-self: start; }
.walk-note { padding: 1.3rem 1.5rem; display: grid; gap: 0.5rem; }
.walk-note p { margin: 0; }

/* The season so far -------------------------------------------------------------------------------- */
.season { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; padding: clamp(1.1rem, 3vw, 1.6rem); }
.season h2 { font-size: var(--step-2); }
.season h2:focus { outline: none; }
.season__lede { margin: 0; color: var(--ink-2); }
.season__print { display: inline-flex; align-items: center; gap: 0.4rem; justify-self: start; min-height: 2.75rem; margin: -0.6rem 0 -0.4rem; }
.season__print svg { flex: none; width: 1.05rem; height: 1.05rem; color: var(--earth); }
/* the season stage by stage (crop-season.html), beside its print */
.season__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.3rem; margin: -0.6rem 0 -0.4rem; }
.season__acts .season__print { margin: 0; }
.season__acts a { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.75rem; }
.season__acts a svg { flex: none; width: 1.05rem; height: 1.05rem; color: var(--earth); }
/* its own width decides how each stage's name shows (walk.js fitBands), in ems of the names' type */
.band { position: relative; padding-block: 1.5rem 1.1rem; container: band / inline-size; font-size: 0.75rem; }
/* the stage's name along its top, and the walks' dots below it, so neither hides the other */
.band__stages { position: relative; height: 3.2rem; }
/* placed along the season by walk.js (left and width), on the same measure as the walks, tests and today;
   no side padding, so a short stage is no wider than its days, and its name keeps off its edges itself */
.band__stage {
  --bg: color-mix(in srgb, var(--c) 42%, var(--card));
  position: absolute; top: 0; bottom: 0; min-width: 0; overflow: hidden; display: flex; align-items: flex-start; padding-top: 0.25rem; border-radius: 4px 3px 5px 3px;
  background: var(--bg); border-bottom: 3px solid var(--c);
}
/* the name on its stage's own colour, over today's line, so the line passes behind it: on two lines
   where one's too short, or the stage's number in the middle where two won't do */
.band__name, .band__no { z-index: 1; font-weight: 800; line-height: 1.05; color: var(--ink); background: var(--bg); }
.band__name { position: relative; min-width: 0; margin-inline: 0.2em; padding-inline: 0.2em; }
.band__no { display: none; position: absolute; top: 0.25rem; left: 50%; translate: -50% 0; padding-inline: 0.15em; }
.band__marks { position: absolute; inset: 1.5rem 0 1.1rem; pointer-events: none; }
.band__marks > * { pointer-events: auto; }
/* a dot at the foot of its stage, under a name on two lines */
.band__marks .band__walk { top: auto; bottom: 0.25rem; margin-top: 0; }
.band__walk {
  position: absolute; top: 68%; width: 1.05rem; height: 1.05rem; margin: -0.525rem 0 0 -0.525rem; border-radius: 50%;
  border: 2px solid var(--ink); background: var(--card);
}
.band__walk--ok { background: var(--leaf); }
.band__walk--watch { background: var(--wattle); }
.band__walk--bad { background: var(--earth); }
.band__test {
  position: absolute; bottom: -0.95rem; width: 0; height: 0; margin-left: -0.45rem;
  border-left: 0.45rem solid transparent; border-right: 0.45rem solid transparent; border-bottom: 0.7rem solid var(--galah);
}
.band__today { position: absolute; top: -0.35rem; bottom: -0.35rem; width: 0; border-left: 2px dashed var(--ink); }
.band__today span { position: absolute; top: -1.35rem; left: 0; transform: translateX(-50%); font: 700 1rem/1 var(--f-hand); color: var(--earth); white-space: nowrap; }
.band__ends { display: flex; justify-content: space-between; gap: 1rem; margin: -0.5rem 0 0; font-size: 0.8rem; font-weight: 700; color: var(--ink-3); }
.band__key { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; font-size: 0.82rem; font-weight: 700; color: var(--ink-2); }
.band__key li { display: inline-flex; align-items: center; gap: 0.4rem; }
.band__key .band__walk, .band__key .band__test { position: static; margin: 0; }
/* on paper, a stage the band draws blank, by its place and in its colour: walk.js fitBands shows the line
   where its stage is blank */
.band__key .band__blank { display: none; }
.band__swatch { flex: none; width: 1.7em; height: 1.1em; border-radius: 2px; background: color-mix(in srgb, var(--c) 42%, var(--card)); border-bottom: 2px solid var(--c); }
.season__count { display: flex; align-items: center; gap: 0.45rem; margin: 0; font-weight: 700; }
/* before the first walk: what's coming up, and the first walk (walk.js, aheadHtml) */
.season__ahead-title { margin: 0; font: 800 0.72rem/1.2 var(--f-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--earth); }
.season__ahead { list-style: none; margin: -0.4rem 0 0; padding: 0; display: grid; gap: 0.4rem; }
.season__ahead li, .season__first { display: flex; align-items: flex-start; gap: 0.5rem; margin: 0; }
.season__ahead svg, .season__first svg { flex: none; width: 1.1rem; height: 1.1rem; margin-top: 0.2rem; color: var(--earth); }
.season__when { font-weight: 700; color: var(--ink-2); }
.season__first { color: var(--ink-2); }
.season__count svg { width: 1.1rem; height: 1.1rem; color: var(--earth); }
.season__reset { justify-self: start; }
/* each photo point's photos, walk by walk, the first on the left */
.season__points { display: grid; gap: 0.9rem; min-width: 0; }
.season__points h3 { margin: 0; font-size: var(--step-1); }
.ppoint { display: grid; gap: 0.4rem; min-width: 0; }
.ppoint h4 { margin: 0; font-size: 1rem; font-weight: 800; overflow-wrap: anywhere; }
.ppoint__strip { list-style: none; margin: 0; padding: 0.2rem 0.2rem 0.6rem; display: flex; gap: 0.7rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; }
.ppoint__strip:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.ppoint__strip li { flex: none; scroll-snap-align: start; }
.ppoint__strip li:has(.is-gone) { display: none; }
.ppoint__strip figure { margin: 0; display: grid; gap: 0.3rem; }
.ppoint__strip .wphoto img { width: 9rem; height: 6.75rem; }
.ppoint__strip figcaption { font-size: 0.8rem; font-weight: 700; color: var(--ink-3); }

.walks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.walks__one { scroll-margin-top: calc(var(--hub-top, 7rem) + 1rem); }
.walks__one details { border: 1.5px solid var(--rule); border-radius: 10px; background: #fffdf8; }
.walks__one details[open] { border-color: var(--ink); }
.walks__one summary {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "dot head" "dot tally"; align-items: center;
  gap: 0.1rem 0.6rem; padding: 0.65rem 0.8rem; cursor: pointer; list-style: none;
}
.walks__one summary::-webkit-details-marker { display: none; }
.walks__one summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 10px; }
.walks__dot { position: static; grid-area: dot; margin: 0; }
/* the date, then the stage beside it, or under it where the two don't fit on a line */
.walks__head { grid-area: head; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.6rem; min-width: 0; }
.walks__when { font-weight: 800; }
.walks__stage { min-width: 0; font-size: 0.9rem; color: var(--ink-2); }
.walks__tally { grid-area: tally; font-size: 0.86rem; color: var(--ink-3); }
.walks__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.6rem; padding: 0 0.9rem 0.9rem; }
.walks__meta, .walks__note, .walks__changed { margin: 0; font-size: 0.92rem; }
.walks__changed { color: var(--canopy); font-weight: 700; }
.walks__checks { margin: 0; display: grid; gap: 0.45rem; }
.walks__checks > div { display: grid; gap: 0.15rem; }
.walks__checks dt { font-weight: 800; font-size: 0.88rem; }
.walks__checks dd { margin: 0; font-size: 0.92rem; color: var(--ink-2); }
.wpill { display: inline-block; padding: 0.05rem 0.55rem; border-radius: 999px; font-size: 0.8rem; font-weight: 800; color: var(--ink); border: 1.5px solid var(--ink); }
.wpill--ok { background: var(--sap-2); }
.wpill--watch { background: var(--wattle-2); }
.wpill--bad { background: #f1c9b3; color: #5e2414; }
.wpill--off { background: var(--paper-3); }
.walks__photos { margin-top: 0.4rem; }
.walks__passes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.walks__do { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; margin: 0.2rem 0 0; }

/* narrower, less room either side of the words, and the tick sits on the chosen answer's top edge */
@media (max-width: 699px) {
  .wstate span { padding-inline: 0.75rem; }
  .wstate input:checked + span::before {
    left: 50%; top: 0; display: grid; place-items: center; width: 1rem; height: 1rem; border-radius: 50%;
    background: var(--ink); color: var(--card); font-size: 0.68rem; line-height: 1; transform: translate(-50%, -50%);
  }
}
/* on a phone, three equal answers across the card, for a thumb */
@media (max-width: 520px) {
  .wstates { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.35rem; }
  .wstate span { padding: 0.3rem 0.25rem; border-radius: 14px 12px 15px 11px; }
}
/* on the narrowest phones, the middle answer a little wider, so none takes more than two lines */
@media (max-width: 359px) {
  .wstates { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr); gap: 0.25rem; }
  .wstate span { padding-inline: 0.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .wstate span { transition: none; }
}
/* Under the walk's heading: the paddock sheet, and the day it was walked, for a walk put in later */
.walk-head__acts { display: flex; flex-wrap: wrap; gap: 0 1.4rem; margin-top: 0.1rem; }
/* how often they walk it */
.walk-rhythm { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.9rem; font-weight: 700; }
.walk-rhythm select { padding: 0.3rem 0.45rem; border: 1.5px solid var(--ink); border-radius: 8px; background: var(--paper); font: inherit; font-weight: 600; }
@media (pointer: coarse), (max-width: 760px) { .walk-rhythm select { font-size: max(16px, 1em); } }
/* in the paddock, often with a glove on: what's tapped is 44 px high on a touch screen (components.css) */
@media (pointer: coarse) {
  .walk-rhythm select, .wcheck__btn, .wcheck__read, .wcheck__count input, .wcheck__lead input { min-height: 44px; }
  .wstages__more { display: inline-flex; align-items: center; min-height: 44px; }
  .walks__do { row-gap: 0; }
  .walks__do .walk-link { display: inline-flex; align-items: center; min-height: 44px; }
}
/* how many checks this stage asks, and that they change with it (walk.js, stageHead) */
.walk-head__checks { display: flex; align-items: flex-start; gap: 0.45rem; margin: 0; font-size: 0.92rem; color: var(--ink-2); }
.walk-head__checks svg { flex: none; width: 1.05rem; height: 1.05rem; margin-top: 0.2rem; color: var(--earth); }
.walk-head__acts .walk-link { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.75rem; }
.walk-head__acts svg { flex: none; width: 1.05rem; height: 1.05rem; color: var(--earth); }
.walk-head__day { justify-self: start; }

/* On paper: the paddock sheet (walk.js, sheetHtml), in place of the page while the walk's form shows.
   A4 upright: the front to fill in on a clipboard, a box to tick for each answer and room to write;
   the back, what a check that's not right can mean. On the screen it's never shown. */
.walk-sheet { display: none; }
@media print {
  .walk-open__art, .walk__save, .wcheck__more, .walk-done__next { display: none; }
  @page { size: A4; margin: 10mm 11mm; }
  html:has(.walk-print), .walk-print { background: #fff !important; }
  .walk-print > :not(main), .walk-print .hub--walk > :not(.walk-sheet) { display: none !important; }
  .walk-print .hub--walk { padding: 0 !important; margin: 0 !important; background: none !important; }
  .walk-print .walk-sheet { display: block; color: #1e2b22; font-size: 8.8pt; line-height: 1.32; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .ws-page { display: flex; flex-direction: column; min-height: 274mm; }
  .ws-page + .ws-page { break-before: page; }
  .ws-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 8mm; padding-bottom: 2.5mm; border-bottom: 1.4pt solid #1e2b22; }
  .ws-kick { margin: 0; font-size: 7pt; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #a03f24; }
  .ws-head h1 { margin: 1mm 0 0; font-size: 19pt; line-height: 1.05; }
  .ws-head h1.is-long { font-size: 14pt; }
  .ws-meta { margin: 1mm 0 0; font-size: 8.6pt; font-weight: 650; color: #3b4a3f; }
  .ws-side { display: grid; justify-items: end; gap: 2.4mm; }
  .ws-brand { display: flex; align-items: center; gap: 4mm; }
  .ws-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; }
  .ws-mark { font-family: var(--f-mark); font-weight: 600; font-size: 11pt; letter-spacing: 0.3em; }
  .ws-who { display: grid; grid-template-columns: auto 50mm; align-items: end; gap: 1.2mm 2mm; margin: 0; font-size: 8pt; font-weight: 700; }
  .ws-who span { justify-self: end; }
  .ws-who i { height: 5mm; border-bottom: 0.8pt solid #1e2b22; }
  .ws-sec { margin-top: 3.2mm; break-inside: avoid; }
  .ws-sec h2 { margin: 0; font-family: var(--f-body); font-size: 7.4pt; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #a03f24; }
  .ws-sec p { margin: 0.8mm 0 0; }
  .ws-checks tbody th b { font-weight: 800; }
  .ws-signs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1mm 6mm; margin: 1.4mm 0 0; padding: 1.6mm 2.4mm; background: #faf6ec; border-left: 1.2mm solid #d8cfba; }
  .ws-signs dt, .ws-lab { font-size: 6.8pt; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #585c50; }
  .ws-signs dd { margin: 0.3mm 0 0; }
  /* the stage, three to tick, each with how it shows on the plant */
  .ws-stages { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ws-stages dt { font-size: 8.4pt; letter-spacing: 0; text-transform: none; color: #1e2b22; }
  .ws-lab { margin-right: 1mm; }
  .ws-ask { color: #3b4a3f; }
  .ws-sec .ws-boxes { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4mm 5.5mm; margin-top: 1.8mm; font-weight: 650; }
  .ws-box { display: inline-flex; align-items: center; gap: 1.6mm; }
  .ws-box::before { content: ""; flex: none; width: 3.6mm; height: 3.6mm; border: 0.9pt solid #1e2b22; border-radius: 0.6mm; background: #fff; }
  .ws-days { display: inline-flex; align-items: flex-end; gap: 1.5mm; }
  .ws-days i, .ws-count i { display: inline-block; width: 12mm; height: 4mm; border-bottom: 0.8pt solid #1e2b22; }
  .ws-mix { flex: 1 1 auto; }
  .ws-mix i { flex: 1 1 auto; width: auto; min-width: 40mm; }
  .ws-sec .ws-last, .ws-checks .ws-last { margin: 1mm 0 0; font-size: 7.4pt; color: #585c50; }
  .ws-last b { margin-right: 1mm; font-size: 6.4pt; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
  .ws-checks { width: 100%; margin-top: 3.6mm; border-collapse: collapse; table-layout: fixed; }
  .ws-checks thead th { padding: 0 1.2mm 1mm; border-bottom: 1pt solid #1e2b22; font-size: 6.6pt; font-weight: 800; line-height: 1.15; letter-spacing: 0.06em; text-transform: uppercase; text-align: left; vertical-align: bottom; color: #3b4a3f; }
  .ws-checks thead th:first-child { width: 70mm; padding-left: 0; }
  .ws-checks thead th.ws-tick { width: 15mm; text-align: center; }
  .ws-checks tbody tr { break-inside: avoid; }
  .ws-checks tbody th, .ws-checks td { padding: 1.5mm 1.2mm; border-bottom: 0.6pt solid #b9b3a3; vertical-align: top; text-align: left; font-weight: 400; }
  .ws-checks tbody th { padding-left: 0; }
  .ws-checks tbody th > b { display: block; font-size: 9pt; }
  .ws-checks tbody th > span { display: block; margin-top: 0.4mm; font-size: 8pt; color: #3b4a3f; }
  .ws-checks .ws-count { display: flex; align-items: flex-end; gap: 1.5mm; margin-top: 1.2mm; font-weight: 650; color: #1e2b22; }
  .ws-checks td.ws-tick { text-align: center; }
  .ws-checks td .ws-box::before { width: 4.6mm; height: 4.6mm; }
  .ws-then { display: block; margin-top: 0.7mm; font-size: 5.6pt; font-weight: 800; line-height: 1.1; letter-spacing: 0.06em; text-transform: uppercase; color: #6f6b5e; }
  .ws-checks th .ws-last { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .ws-write { background: repeating-linear-gradient(transparent 0 6.2mm, #cfc7b4 6.2mm 6.45mm); background-clip: content-box; }
  .ws-fill { flex: 1; display: flex; flex-direction: column; min-height: 16mm; }
  .ws-lines { flex: 1; min-height: 10mm; margin-top: 1mm; background: repeating-linear-gradient(transparent 0 6.6mm, #cfc7b4 6.6mm 6.9mm); }
  .ws-foot { display: flex; justify-content: space-between; gap: 6mm; margin-top: 2.5mm; padding-top: 1.5mm; border-top: 0.6pt solid #b9b3a3; font-size: 7pt; color: #3b4a3f; }
  .ws-flags { display: grid; gap: 2.4mm; margin: 3.5mm 0 0; }
  .ws-flags > div { display: flow-root; padding-bottom: 2.4mm; border-bottom: 0.6pt solid #d4cdbd; break-inside: avoid; }
  .ws-flags dt { float: left; width: 44mm; font-weight: 800; font-size: 9pt; }
  .ws-flags dd { margin: 0 0 0 49mm; }
  .ws-flags dd + dd { margin-top: 0.8mm; }
  .ws-flags dd b { font-weight: 800; }
  .ws-flags i { color: #585c50; }
  .ws-flags .ws-read { font-size: 7.8pt; font-weight: 700; color: #3d5a80; }
  .ws-points { display: flex; align-items: baseline; gap: 4mm; }
  .ws-points h2 { flex: none; }
  .ws-points .ws-boxes { flex: 1 1 0; min-width: 0; margin-top: 0; gap: 1.2mm 5mm; }
  .ws-page--pts .ws-sec { margin-top: 2.5mm; }
  .ws-page--pts .ws-fill { min-height: 13mm; }
  .ws-page--pts .ws-lines { min-height: 6.9mm; }
  /* the season on paper: as long as it needs, a walk never split across a page */
  .ws-page--season { display: block; min-height: 0; }
  /* its band's type and width, so the key under it asks what the band's stages ask (walk.js fitBands) */
  .wr-band { margin-top: 3mm; container: band / inline-size; font-size: 6.6pt; }
  .wr-band .band { padding-block: 5mm 3.5mm; }
  .wr-band .band { font-size: 6.6pt; }
  .wr-band .band__stages { height: 12mm; }
  .wr-band .band__marks { inset: 5mm 0 3.5mm; }
  .wr-band .band__ends { margin-top: 0.6mm; }
  .wr-band .band__today span { top: -4.6mm; font-size: 9pt; }
  .wr-band .band__ends, .wr-band .band__key { font-size: 7.2pt; }
  .wr-band .band__key { margin-top: 1.6mm; }
  .wr-count { margin: 2mm 0 0; font-weight: 700; }
  .wr-walks { margin-top: 3.5mm; border-bottom: 0.6pt solid #b9b3a3; }
  .wr-walk { padding: 2.6mm 0 2.8mm; border-top: 0.6pt solid #b9b3a3; break-inside: avoid; }
  .wr-walk h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 1mm 2.6mm; margin: 0; font-family: var(--f-body); font-size: 9.4pt; line-height: 1.25; }
  .wr-walk h2 .band__walk { position: static; flex: none; width: 3.6mm; height: 3.6mm; margin: 0; border-width: 0.9pt; }
  .wr-when { font-weight: 800; }
  .wr-stage { font-weight: 600; color: #3b4a3f; }
  .wr-tally { margin-left: auto; font-size: 8pt; font-weight: 600; color: #585c50; }
  .wr-body { display: grid; gap: 1.3mm; margin: 1.4mm 0 0 6.2mm; }
  .wr-body :is(.walks__meta, .walks__note, .walks__changed) { font-size: 8.4pt; }
  .wr-body .walks__changed { color: #1f4d2e; }
  .wr-body .walks__checks { gap: 1mm; }
  .wr-body .walks__checks > div { grid-template-columns: 40mm minmax(0, 1fr); gap: 0 3mm; }
  .wr-body .walks__checks :is(dt, dd) { font-size: 8.4pt; }
  .wr-body .walks__checks dd { color: #1e2b22; }
  .wr-body .wpill { padding: 0 1.6mm; font-size: 7pt; border-width: 0.8pt; }
  .wr-body .walks__photos { gap: 1.6mm; margin-top: 1mm; }
  .wr-body .wphoto img { width: 30mm; height: 22.5mm; border-width: 0.6pt; border-radius: 1mm; }
  .wr-body .wphoto:has(img:not([src])) { display: none; }
  .ws-page--season .ws-foot { margin-top: 4mm; }
  .wr-points { margin-top: 3.5mm; }
  .wr-point { margin-top: 2mm; break-inside: avoid; }
  .wr-point h3 { margin: 0; font-family: var(--f-body); font-size: 8.8pt; font-weight: 800; }
  .wr-strip { list-style: none; margin: 1.2mm 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2mm; }
  .wr-strip li:has(.is-gone), .wr-strip li:has(img:not([src])) { display: none; }
  .wr-strip figure { margin: 0; display: grid; gap: 0.6mm; }
  .wr-strip .wphoto img { width: 35.6mm; height: 26.7mm; border-width: 0.6pt; border-radius: 1mm; }
  .wr-strip figcaption { font-size: 7pt; font-weight: 700; color: #585c50; }
}