/* Plan to planted, on the home page. The Brentwood pool job from the example quote, drawn as a planting
   plan that draws its linework and then plants itself, group by group, in the quote's order.
   Loads after /v2/v2.css. Everything is scoped to the plan section, plus one highlight on the
   example quote's rows, which plan.js marks with data-plan. */

.v3p { --burlap: #cca779; }

/* ---------- layout: phone first; the plan runs to the screen edges on phones ---------- */
.v3p-grid { display: grid; gap: 1.5rem; }
.v3p-copy .lede { margin-top: 1.25rem; }
.v3p-copy > p:not(.lede) { max-width: 38ch; margin-top: 1rem; }  /* the range and the catalogue link, folded in from "Every layer" */
.v3p-copy .text-link { margin-top: .75rem; }
.v3p-plan { position: relative; margin: .75rem calc(-1 * var(--gutter)) 0; }
@media (min-width: 700px) { .v3p-plan { margin-inline: 0; } }
@media (min-width: 1000px) {
  .v3p-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); grid-template-rows: auto 1fr; gap: 0 4.5rem; }
  .v3p-copy { grid-area: 1 / 1; }
  .v3p-plan { grid-area: 1 / 2 / 3 / 3; margin: 0; }
  .v3p-block { grid-area: 2 / 1; align-self: end; padding-bottom: .4rem; }
}

/* ---------- the title block: the document, and the running tally ---------- */
.v3p-doc span { display: block; font-size: var(--t-sm); color: var(--ink-2); }
.v3p-doc b { display: block; margin-top: .3rem; font-size: 1.5rem; font-weight: 650; line-height: 1.1; letter-spacing: -.02em; }
.v3p-count { min-height: calc(1.55em + .75rem + 2px); margin-top: .9rem; padding-top: .75rem; border-top: 2px solid var(--pine); font-size: var(--t-sm); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.v3p-count b { font-weight: 600; color: var(--pine); }
.v3p-read { display: none; }
.v3p.has-on .v3p-tally { display: none; }
.v3p.has-on .v3p-read { display: inline; }
.v3p-hint { display: none; }
@media (max-width: 699px) { .v3p-hint:not([hidden]) { display: block; margin-top: .15rem; } }  /* phones show keys only; the names appear from 700px */
@media (min-width: 1000px) { .v3p-count { margin-top: 1.1rem; padding-top: .9rem; font-size: var(--t-body); } }
@media (prefers-reduced-motion: no-preference) { .v3p-one { animation: rise .6s var(--ease) both; } }

/* ---------- the drawing: --k is viewBox units per CSS pixel (plan.js keeps it exact) ---------- */
.v3p-svg { --k: .352; display: block; width: 100%; height: auto; overflow: visible; color: var(--pine); }
@media (min-width: 700px) { .v3p-svg { --k: .2; } }
@media (min-width: 1000px) { .v3p-svg { --k: .176; } }

.v3p-svg .ln, .v3p-svg .pl, .v3p-svg .hatch, .v3p-svg .lh, .v3p-svg .ld, .v3p-svg .rp, .v3p-svg .rule {
  fill: none; stroke: var(--pine); stroke-linejoin: round; stroke-linecap: round;
}
.v3p-svg .ln { stroke-width: calc(var(--k) * 1.25px); }
.v3p-svg .hs { stroke-width: calc(var(--k) * 1.75px); }
.v3p-svg .pl { stroke-width: calc(var(--k) * 1.5px); stroke-linecap: butt; stroke-dasharray: calc(var(--k) * 15px) calc(var(--k) * 4px) calc(var(--k) * 2.5px) calc(var(--k) * 4px); }
.v3p-svg .jt { stroke-width: calc(var(--k) * .75px); stroke-opacity: .3; }
.v3p-svg .wl, .v3p-svg .st, .v3p-svg .dr, .v3p-svg .bo { stroke-width: calc(var(--k) * .75px); }
.v3p-svg .hatch { stroke-width: calc(var(--k) * .7px); stroke-opacity: .42; }
.v3p-svg .rp { stroke-width: calc(var(--k) * .9px); stroke-opacity: .55; }
.v3p-svg .pave { fill: var(--paper-2); }
.v3p-svg .water { fill: var(--sage-2); }
.v3p-svg .posts, .v3p-svg .dot { fill: var(--pine); }
.v3p-svg .mk { fill: none; stroke: #fff; stroke-width: 6; }
.v3p-svg .tx text {
  font: 600 calc(var(--k) * 10px) var(--font); letter-spacing: .16em; text-transform: uppercase;
  fill: var(--ink-2); text-anchor: middle;
  stroke: var(--paper); stroke-width: calc(var(--k) * 4px); stroke-linejoin: round; paint-order: stroke;  /* knocks the linework out behind the word */
}
.v3p-svg .tx .on-water { stroke: var(--sage-2); }
.v3p-svg .tx .on-pave { stroke: var(--paper-2); }

/* plan symbols: outlines first; planting fills the canopy (--f) and grows it into place.
   Rules start at .v3p-sym because each <use> clone is styled inside its own tree. */
.v3p-sym .cn { fill: var(--fill); fill-opacity: calc(var(--f, 1) * var(--fo, 1)); stroke: var(--pine); stroke-width: 1px; stroke-linejoin: round; }
.v3p-sym .sp { fill: none; stroke: var(--paper); stroke-width: .8px; stroke-opacity: calc(var(--f, 1) * .55); }
.v3p-sym .ct { fill: var(--pine); }
.v3p-sym .br { fill: none; stroke: var(--pine); stroke-width: .8px; stroke-opacity: .55; stroke-linecap: round; }
.v3p-sym .rg { fill: none; stroke: var(--pine); stroke-width: .8px; stroke-opacity: .5; stroke-dasharray: 2.5 2.5; }
.v3p-sym .cr { fill: none; stroke: var(--pine); stroke-width: .9px; }
.v3p-svg .g-gg { --fill: var(--pine); --fo: .95; }
.v3p-svg .g-ns { --fill: var(--sage-deep); }
.v3p-svg .g-eh { --fill: var(--sage); --fo: .85; }
.v3p-svg .g-lp { --fill: var(--burlap); }
.v3p-svg .g-gv { --fill: var(--sage-deep); --fo: .92; }
.v3p-svg .band { fill: var(--sage-2); fill-opacity: var(--f, 1); }
.v3p-svg .lh { stroke-width: calc(var(--k) * .9px); }

/* leaders, and the strip with the graphic scale and north arrow */
.v3p-svg .ld { stroke-width: calc(var(--k) * .85px); }
.v3p-svg .rule { stroke-width: calc(var(--k) * 1px); stroke-opacity: .25; }
.v3p-svg .scale text { font: 600 calc(var(--k) * 10px) var(--font); fill: var(--ink-2); text-anchor: middle; font-variant-numeric: tabular-nums; }
.v3p-svg .scale .end { text-anchor: start; }
.v3p-svg .scale .on { fill: var(--pine); }
.v3p-svg .scale .off { fill: none; stroke: var(--pine); stroke-width: calc(var(--k) * 1px); }
.v3p-svg .na circle { fill: none; stroke: var(--pine); stroke-width: calc(var(--k) * 1px); }
.v3p-svg .na path { fill: var(--pine); }

/* ---------- callouts: quantity and key on a leader's shoulder ---------- */
.v3p-tag {
  position: absolute; transform: translate(0, -100%);
  display: block; margin: 0; padding: 0 .3em .12em; border: 0; border-bottom: 1.5px solid var(--pine); border-radius: 0;
  background: var(--paper); color: var(--pine);
  font: 600 .8125rem/1.25 var(--font); letter-spacing: .06em; white-space: nowrap; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: background-color .2s var(--ease), color .2s var(--ease), opacity .25s var(--ease);
}
.v3p-tag.l { transform: translate(-100%, -100%); }
.v3p-tag b { font-weight: 700; letter-spacing: 0; }
.v3p-tag::before { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 48px); height: 48px; transform: translate(-50%, -50%); }
.v3p-tag .nm { display: none; position: absolute; left: 0; top: calc(100% + 1px); padding: .05em .3em .1em; background: var(--paper); font-size: .75rem; font-weight: 400; letter-spacing: 0; color: var(--ink-2); pointer-events: none; }
.v3p-tag.l .nm { left: auto; right: 0; }
@media (min-width: 700px) { .v3p-tag .nm { display: block; } }
.v3p-tag.on, .v3p-tag.now { background: var(--pine); color: var(--on-pine); }

/* ---------- one group at a time: the rest of the plan steps back ---------- */
.v3p-svg .grp { cursor: pointer; }
.v3p-plan .hard, .v3p-plan .grp, .v3p-plan .ldr { transition: opacity .25s var(--ease); }
.v3p-plan.has-on .hard { opacity: .45; }
.v3p-plan.has-on .grp:not(.on), .v3p-plan.has-on .ldr:not(.on) { opacity: .16; }
.v3p-plan.has-on .v3p-tag:not(.on) { opacity: .55; }

/* the example quote's matching row. On the cells, and important, because the swap row's own
   flash animates its cells' background, and a running animation outranks a normal rule. */
.qc tr.v3p-on td { background-color: var(--sage-2) !important; }