/* URTH · Site report workshop (A38, 27 Sep 2026; A39, 28 Sep: the app's own look; A40, 28 Sep: presentation mode).
   The workshop reads as the front door and the registry do: the green page (body.ds-workspace), the cream wordmark
   and the page title in cream on the green, content in cream cards (.ds-card), the current step as a gold pill, dark
   green text inside the cards, and the widths from layout.css (.u-wrap-wide). Loaded after design/tokens.css and
   design/urth-ds.css and before layout.css; every colour here is a design-system token.
   Presentation mode: one focal picture, large, at the top, with its views and its map right beside it; the words sit in
   closed drop-downs at the bottom. */

/* ---------- the green page: wordmark, title, step strip ---------- */
.ws-top{display:flex;align-items:center;justify-content:space-between;gap:var(--urth-s-3);padding-top:var(--urth-s-5);padding-bottom:var(--urth-s-2)}
.ws-top .logo{height:42px;width:auto;display:block}
.ws-top .ws-all{min-height:var(--urth-touch-min)}
.ws-hero{padding-top:var(--urth-s-2);padding-bottom:var(--urth-s-5);display:flex;align-items:flex-end;justify-content:space-between;gap:var(--urth-s-3) var(--urth-s-6);flex-wrap:wrap}
.ws-title{min-width:0}
.ws-hero h1{font-family:var(--urth-font-display);font-weight:600;font-size:clamp(26px,4.2vw,38px);line-height:var(--urth-lh-tight);color:var(--urth-on-green);margin:0;letter-spacing:-.005em}
.ws-hero .tag{color:var(--urth-on-green-muted);font-size:var(--urth-fs-body);margin:var(--urth-s-1) 0 0;max-width:680px}
/* the step strip: this step as a gold pill with its name; the others as small numbered pills */
.ws-strip{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ws-strip li{flex:0 0 auto}
.ws-step{position:relative;display:inline-flex;align-items:center;gap:var(--urth-s-2);height:36px;padding:0 var(--urth-s-4) 0 4px;border-radius:var(--urth-r-pill);background:var(--urth-cream-50);color:var(--urth-forest-900);font:600 var(--urth-fs-small) var(--urth-font-body);text-decoration:none;white-space:nowrap;box-sizing:border-box}
.ws-step b{font-family:var(--urth-font-display);font-weight:700;font-size:12px;min-width:28px;height:28px;padding:0 5px;box-sizing:border-box;border-radius:var(--urth-r-pill);display:inline-flex;align-items:center;justify-content:center;background:var(--urth-cream-100);color:var(--urth-forest-900)}
.ws-step.now{background:var(--urth-gold-500);color:var(--urth-on-gold)}
.ws-step.now b{background:var(--urth-cream-50)}
.ws-step.dot{padding:0 4px;background:transparent;border:1px solid var(--urth-line-on-green)}
.ws-step.dot b{background:transparent;color:var(--urth-on-green)}
.ws-step.soon b{color:var(--urth-on-green-muted);font-weight:600}
a.ws-step.dot:hover{background:var(--urth-cream-50)}
a.ws-step.dot:hover b{color:var(--urth-forest-900)}
a.ws-step:focus-visible,.ws-top a:focus-visible{outline:none;box-shadow:var(--urth-focus)}
.u-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (max-width:600px){
  .ws-hero{padding-bottom:var(--urth-s-4)}
  .ws-hero nav{width:100%}
  .ws-strip{flex-wrap:nowrap;overflow-x:auto;margin-left:calc(var(--u-gut) * -1);margin-right:calc(var(--u-gut) * -1);padding:0 var(--u-gut) 2px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .ws-strip::-webkit-scrollbar{display:none}
  .ws-top{padding-top:var(--urth-s-4)}
  .ws-top .logo{height:36px}
}

/* ---------- cards ---------- */
main.ws-main{padding-bottom:var(--urth-s-8)}
.ws-main .ds-card{padding:var(--urth-s-5);min-width:0}
.ws-main h2,.ws-main h3,.ws-main h4{font-family:var(--urth-font-display);font-weight:600;line-height:var(--urth-lh-tight);color:var(--urth-forest-900);margin:0}
.ws-main h3{font-size:19px;margin-bottom:var(--urth-s-3)}
.ws-main .lede{color:var(--urth-text-muted);font-size:var(--urth-fs-small);margin:var(--urth-s-3) 0 0}
.ws-main a{color:var(--urth-forest-700)}
@media (max-width:600px){.ws-main .ds-card{padding:var(--urth-s-4)}}

/* ---------- the stage: the picture large, the strip under it, the card and the map beside it ----------
   A54, 30 Sep 2026, the template's proportions, for every step (page-specs.js, "workshop/template"): on a laptop the picture or the
   3D takes about two thirds of the width and the side column the last third; the frame is landscape (4:3) and never taller than the
   screen allows, so the picture, its views and the side column end together with no large empty area; the side column carries only
   what matters first for the step (the camera map, the timeline, the buildings or the legend), and everything else sits in the
   drop-downs. On a phone: one column, the picture square, then the side column. */
.ws-stage{--side:minmax(300px,1fr);display:grid;grid-template-columns:minmax(0,2fr) var(--side);gap:var(--urth-s-5);align-items:start}
.ws-pic{min-width:0}
.ws-side{display:flex;flex-direction:column;gap:var(--urth-s-3);min-width:0}
/* A69, 13 Oct 2026: the side column never runs below the picture. What the legend cannot hold beside the picture moves into this
   card under it, at the full width (WS.fitSide in workshop.js); the legend card then stretches so both columns end on one line. */
.ws-under{margin-top:var(--urth-s-3);columns:3 260px;column-gap:var(--urth-s-6)}
.ws-under[hidden]{display:none}
.ws-under > *,.ws-under li{break-inside:avoid}
.ws-under > ul,.ws-under > ol{break-inside:auto;margin-top:0}
.ws-under > :first-child{margin-top:0}
@media (min-width:901px){.ws-stage.ws-split{align-items:stretch}.ws-stage.ws-split .ws-side .ws-mapcard{flex:1 1 auto}}
@media (max-width:900px){
  .ws-stage{grid-template-columns:minmax(0,1fr);gap:var(--urth-s-3)}
  .ws-pic{max-width:640px;width:100%;margin:0 auto}
  .ws-side{max-width:640px;width:100%;margin:0 auto}
  .ws-side .ws-mapcard{order:-1}              /* on a phone: the picture, its views, the map, then the card */
}
/* the step card beside the picture, compact: title, one line of purpose, sources, the neighbouring steps */
@media (min-width:901px){
  .ws-side .ws-card-step{padding:var(--urth-s-4) var(--urth-s-5)}
  .ws-side .ws-card-step .card-title{font-size:24px}
  .ws-side .ws-card-step .purpose{font-size:15.5px;margin:var(--urth-s-2) 0}
  .ws-side .ws-card-step .step-links{margin-top:var(--urth-s-3)}
}

/* the main picture: landscape on a laptop (A54: 4:3, held to the screen's height), square on a phone; a square picture (Google's
   640 x 640) fills it and loses a little sky and road at the top and bottom */
.frame{--ar:1.3333;position:relative;border-radius:var(--urth-r-lg);overflow:hidden;background:var(--urth-forest-900);aspect-ratio:var(--ar);width:min(100%,calc((100vh - 250px) * var(--ar)));min-width:min(100%,280px);margin:0 auto;box-shadow:var(--urth-shadow-3);touch-action:pan-y;user-select:none;-webkit-user-select:none}
.frame img{display:block;width:100%;height:100%;object-fit:cover;transition:opacity .25s}
.frame img.fading{opacity:.35}
.frame .chip-tl{position:absolute;left:var(--urth-s-3);top:var(--urth-s-3)}
.frame .chip-tr{position:absolute;right:var(--urth-s-3);top:var(--urth-s-3);background:var(--urth-cream-50);color:var(--urth-forest-900);border-color:transparent}
.frame .chip-bl{position:absolute;left:var(--urth-s-3);bottom:26px;background:var(--urth-forest-900);color:var(--urth-on-green);font:600 var(--urth-fs-small) var(--urth-font-body);padding:6px 12px;border-radius:var(--urth-r-pill);opacity:.92}
.frame .verdict{background:var(--urth-cream-50)}
.arrow{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:0;background:var(--urth-cream-50);color:var(--urth-forest-900);box-shadow:var(--urth-shadow-2);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:.92;transition:opacity var(--urth-ease),transform var(--urth-ease)}
.arrow svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.arrow.prev{left:var(--urth-s-3)}
.arrow.next{right:var(--urth-s-3)}
.arrow:hover{opacity:1;transform:translateY(-50%) scale(1.06)}
.arrow:focus-visible{outline:none;box-shadow:var(--urth-focus);opacity:1}
@media (max-width:900px){.frame{--ar:1;width:100%}}
@media (max-width:600px){.arrow{width:42px;height:42px}.frame{border-radius:var(--urth-r-md)}}

/* the kept views, a strip right under the picture */
.strip{display:flex;gap:var(--urth-s-2);margin-top:var(--urth-s-3);overflow-x:auto;padding:3px 3px 4px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.thumb{position:relative;flex:0 0 auto;width:76px;height:76px;padding:0;border:0;border-radius:var(--urth-r-sm);overflow:hidden;cursor:pointer;background:var(--urth-forest-900);opacity:.72;transition:opacity var(--urth-ease),box-shadow var(--urth-ease)}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb .tn{position:absolute;left:4px;top:4px;min-width:20px;height:20px;border-radius:var(--urth-r-pill);background:var(--urth-cream-50);color:var(--urth-forest-900);font:700 11px/20px var(--urth-font-body);text-align:center}
.thumb .tv{position:absolute;right:5px;bottom:5px;width:10px;height:10px;border-radius:50%;border:2px solid var(--urth-cream-50)}
.thumb .tv.clear{background:var(--urth-forest-700)}
.thumb .tv.partly{background:var(--urth-gold-500)}
.thumb .tv.blocked{background:var(--urth-danger-600)}
.thumb:hover{opacity:1}
.thumb[aria-pressed="true"]{opacity:1;box-shadow:0 0 0 3px var(--urth-gold-500)}
.thumb:focus-visible{outline:none;opacity:1;box-shadow:var(--urth-focus)}
.thumb.skel{opacity:1}
@media (max-width:600px){.thumb{width:64px;height:64px}}

/* ---------- the step card: title, purpose, source; nothing else ---------- */
.card-top{display:flex;align-items:center;gap:var(--urth-s-3)}
.badge{font-family:var(--urth-font-display);font-weight:700;font-size:15px;min-width:40px;height:32px;padding:0 var(--urth-s-2);box-sizing:border-box;border-radius:var(--urth-r-pill);display:inline-flex;align-items:center;justify-content:center;background:var(--urth-gold-500);color:var(--urth-on-gold);flex:0 0 auto}
.ws-main .card-title{font-size:28px}
.purpose{font-family:var(--urth-font-display);font-style:italic;font-size:17px;line-height:1.45;color:var(--urth-text-primary);margin:var(--urth-s-3) 0 var(--urth-s-3)}
/* one plain line above the purpose: the question the step answers (A69) */
.card-lead{font:600 16px/1.35 var(--urth-font-body);color:var(--urth-forest-900);margin:var(--urth-s-3) 0 0}
.card-lead + .purpose{margin-top:var(--urth-s-1)}
.sources{display:flex;flex-wrap:wrap;gap:6px;margin:0}
@media (max-width:600px){.ws-main .card-title{font-size:24px}.purpose{font-size:16px}}

/* ---------- verdicts: the design system's chips ---------- */
.verdict{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.verdict.clear{color:var(--urth-forest-700);border-color:var(--urth-forest-700)}
.verdict.partly{background:var(--urth-gold-500) !important;color:var(--urth-on-gold);border-color:var(--urth-gold-500)}
.verdict.blocked{color:var(--urth-danger-600);border-color:var(--urth-danger-600)}

/* ---------- where the cameras stood ---------- */
.ws-mapcard h3{margin-bottom:var(--urth-s-3)}
.map{position:relative;border-radius:var(--urth-r-md);overflow:hidden;aspect-ratio:640/400;background:var(--urth-cream-100)}
.map img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.map svg{position:absolute;inset:0;width:100%;height:100%}
.map .cam{cursor:pointer}
.map .cam:focus-visible{outline:none}
.map .cam:focus-visible circle{stroke:var(--urth-gold-500);stroke-width:3}
.map .cone{fill:var(--urth-cream-50);fill-opacity:.16;stroke:var(--urth-cream-50);stroke-opacity:.7;stroke-width:1}
.map .cone.on{fill:var(--urth-gold-500);fill-opacity:.42;stroke:var(--urth-gold-500);stroke-opacity:1;stroke-width:2}
.map .cam circle{fill:var(--urth-cream-50);stroke:var(--urth-forest-900);stroke-width:1.5}
.map .cam.drop{cursor:default}
.map .cam.drop circle{fill:var(--urth-cream-50);fill-opacity:.7;stroke:none}
.map .cam text{font:700 11.5px var(--urth-font-body);fill:var(--urth-forest-900);pointer-events:none}
.map .cam.on circle{fill:var(--urth-gold-500);stroke:var(--urth-cream-50);stroke-width:2}
.map .lot{fill:none;stroke:var(--urth-cream-50);stroke-width:1.6;stroke-dasharray:6 4}
.map .front{stroke:var(--urth-gold-500);stroke-width:5;stroke-linecap:round}
.map .bld{fill:var(--urth-cream-50);fill-opacity:.14;stroke:var(--urth-cream-50);stroke-opacity:.8;stroke-width:1}
.map .bld.ours{fill:var(--urth-cream-50);fill-opacity:.72;stroke:var(--urth-forest-900);stroke-width:1.6}
.map .nlab{font:700 10.5px var(--urth-font-body);fill:var(--urth-forest-900);paint-order:stroke;stroke:var(--urth-cream-50);stroke-width:3px;stroke-linejoin:round}
.legend{display:flex;flex-wrap:wrap;gap:4px var(--urth-s-4);font-size:12.5px;color:var(--urth-text-muted);margin:var(--urth-s-3) 0 0}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend svg{flex:0 0 auto}
.legend .sw-lot{stroke:var(--urth-forest-900);fill:none;stroke-width:1.6;stroke-dasharray:4 3}
.legend .sw-front{stroke:var(--urth-gold-500);stroke-width:5;stroke-linecap:round}
.legend .sw-ours{fill:var(--urth-cream-100);stroke:var(--urth-forest-900);stroke-width:1.6}
.legend .sw-cam{fill:var(--urth-cream-50);stroke:var(--urth-forest-900);stroke-width:1.5}
.legend .sw-drop{fill:var(--urth-text-muted)}

/* ---------- Details: closed drop-downs at the bottom ---------- */
.ws-details{margin-top:var(--urth-s-8)}
.ws-details-h{font-family:var(--urth-font-display);font-weight:600;font-size:22px;color:var(--urth-on-green) !important;margin:0 0 var(--urth-s-3) !important}
.ws-main details.dd{padding:0}
.ws-main details.dd + details.dd{margin-top:var(--urth-s-2)}
details.dd summary{list-style:none;cursor:pointer;min-height:56px;display:flex;align-items:center;gap:var(--urth-s-3);padding:0 var(--urth-s-5);font-weight:600;color:var(--urth-forest-900)}
details.dd summary::-webkit-details-marker{display:none}
details.dd summary::after{content:'';margin-left:auto;flex:0 0 auto;width:9px;height:9px;border-right:1.5px solid var(--urth-forest-900);border-bottom:1.5px solid var(--urth-forest-900);transform:rotate(45deg);margin-bottom:4px;transition:transform var(--urth-ease)}
details.dd[open] summary::after{transform:rotate(-135deg);margin-bottom:-4px}
details.dd summary:focus-visible{outline:none;box-shadow:var(--urth-focus);border-radius:var(--urth-r-lg)}
.dd-t{font-family:var(--urth-font-display);font-size:18px}
.dd-h{font-weight:400;font-size:var(--urth-fs-small);color:var(--urth-text-muted)}
details.dd > .body{padding:0 var(--urth-s-5) var(--urth-s-5)}
@media (max-width:600px){details.dd summary{padding:0 var(--urth-s-4);flex-wrap:wrap;gap:0 var(--urth-s-2);padding-top:10px;padding-bottom:10px}details.dd > .body{padding:0 var(--urth-s-4) var(--urth-s-4)}.dd-h{flex-basis:100%;order:3}}

/* why these views, and the views left out: one line each */
.mainwhy{margin:0 0 var(--urth-s-4);color:var(--urth-text-primary)}
.mainwhy b{color:var(--urth-forest-900)}
.views{list-style:none;margin:0;padding:0}
.views li{max-width:none;display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:var(--urth-s-3);align-items:start;padding:var(--urth-s-3) 0;border-top:1px solid var(--urth-line)}
.views li:first-child{border-top:0;padding-top:0}
.views .no{font-family:var(--urth-font-display);font-weight:700;font-size:13px;width:30px;height:30px;border-radius:var(--urth-r-pill);display:inline-flex;align-items:center;justify-content:center;background:var(--urth-cream-100);color:var(--urth-forest-900);border:0;padding:0}
.views li.kept .no{background:var(--urth-cream-100);cursor:pointer}
.views li.kept.on .no{background:var(--urth-gold-500);color:var(--urth-on-gold)}
.views .no:focus-visible{outline:none;box-shadow:var(--urth-focus)}
.views .geo{color:var(--urth-text-primary);grid-column:2 / span 2}
.views li.dropped .geo{grid-column:2}
.views .geo b{color:var(--urth-forest-900)}
.views .sub{display:block;font-size:var(--urth-fs-small);color:var(--urth-text-muted);margin-top:3px}
.views .sub b{font-weight:600}
.views li.dropped .geo{color:var(--urth-text-muted)}
.peekbtn{appearance:none;min-height:var(--urth-touch-min);padding:0 var(--urth-s-3);border-radius:var(--urth-r-pill);border:1.5px solid var(--urth-forest-700);background:transparent;color:var(--urth-forest-700);font:600 var(--urth-fs-small) var(--urth-font-body);cursor:pointer;white-space:nowrap}
.peekbtn:focus-visible{outline:none;box-shadow:var(--urth-focus)}
.views .peek{grid-column:2 / span 2;margin-top:var(--urth-s-2)}
.views .peek img{display:block;width:100%;max-width:640px;height:auto;aspect-ratio:1/1;border-radius:var(--urth-r-md);background:var(--urth-cream-100)}
@media (max-width:600px){.views li{grid-template-columns:30px minmax(0,1fr)}.views li.dropped .geo{grid-column:2}.views li > .peekbtn{grid-column:2;justify-self:start}.views .peek{grid-column:1 / span 2}}

/* the facts */
table.facts{width:100%;border-collapse:collapse;font-size:var(--urth-fs-small)}
table.facts th,table.facts td{text-align:left;vertical-align:top;padding:var(--urth-s-2) 0;border-bottom:1px solid var(--urth-line)}
table.facts th{font-weight:500;color:var(--urth-text-muted);width:30%;padding-right:var(--urth-s-3)}
table.facts td{color:var(--urth-text-primary);overflow-wrap:anywhere}
table.facts code{font-family:ui-monospace,Menlo,monospace;font-size:12px;word-break:break-all}
.mut{color:var(--urth-text-muted)}
.live{font-size:12.5px;color:var(--urth-text-muted);margin:var(--urth-s-3) 0 0}
.live.ok{color:var(--urth-forest-700)} .live.bad{color:var(--urth-danger-600)}

/* how this is built: the page spec */
.spec-steps{margin:0 0 var(--urth-s-4);padding-left:20px;color:var(--urth-text-primary)}
.spec-steps li{margin:0 0 var(--urth-s-2);max-width:78ch}
.spec-h{font-size:16px !important;margin:var(--urth-s-4) 0 var(--urth-s-2) !important}
.spec-why,.spec-list{list-style:none;margin:0;padding:0}
.spec-why li{padding:var(--urth-s-2) 0;border-top:1px solid var(--urth-line);max-width:78ch}
.spec-why li:first-child{border-top:0}
.spec-why b{display:block;color:var(--urth-forest-900);font-weight:600}
.spec-why span{display:block;color:var(--urth-text-muted);font-size:var(--urth-fs-small);margin-top:2px}
.spec-list li{font-size:var(--urth-fs-small);color:var(--urth-text-primary);padding:2px 0}
.spec-note{font-size:12.5px;color:var(--urth-text-muted);margin:var(--urth-s-4) 0 0}
.limits{color:var(--urth-text-primary);max-width:72ch;margin:0}
footer.ws-foot{padding-top:var(--urth-s-2);padding-bottom:var(--urth-s-10);font-size:var(--urth-fs-small);color:var(--urth-on-green-muted)}

/* ---------- states ---------- */
.skel{background:linear-gradient(90deg,var(--urth-cream-100) 0%,var(--urth-cream-50) 50%,var(--urth-cream-100) 100%) !important;background-size:200% 100% !important;animation:sh 1.3s linear infinite;border-radius:var(--urth-r-sm)}
@keyframes sh{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.skel{animation:none}}
.frame.skel{border-radius:var(--urth-r-lg)}
.frame.empty{background:var(--urth-cream-50);display:flex;align-items:center;justify-content:center;box-shadow:var(--urth-shadow-2)}
.state{padding:var(--urth-s-6);max-width:440px}
.state h3{font-size:24px !important;margin:0 0 var(--urth-s-3) !important}
.state p{margin:0 0 var(--urth-s-3);color:var(--urth-text-primary)}
.state .state-sub{color:var(--urth-text-muted);font-size:var(--urth-fs-small)}
.hidden{display:none !important}

/* ---------- the index: every registry house ---------- */
.idx-intro{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--urth-s-3);margin:0 0 var(--urth-s-4)}
.idx-intro p{margin:0;color:var(--urth-on-green-muted);max-width:62ch}
.idx-counts{display:flex;flex-wrap:wrap;gap:6px}
.idx-counts .ds-chip{background:var(--urth-cream-50);color:var(--urth-forest-900)}
.props{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr));gap:var(--urth-s-3)}
a.prop{display:flex;flex-direction:column;text-decoration:none;color:inherit;padding:0 !important;overflow:hidden;transition:box-shadow var(--urth-ease),transform var(--urth-ease)}
a.prop:hover{box-shadow:var(--urth-shadow-3);transform:translateY(-2px)}
a.prop:focus-visible{outline:none;box-shadow:var(--urth-focus)}
.prop .ph{position:relative;aspect-ratio:1/1;background:var(--urth-forest-900)}
.prop .ph img{width:100%;height:100%;object-fit:cover;display:block}
.prop .ph .ds-chip{position:absolute;left:var(--urth-s-2);top:var(--urth-s-2);background:var(--urth-cream-50)}
.prop .ph.none{background:var(--urth-cream-100);display:flex;align-items:center;justify-content:center;padding:var(--urth-s-5);box-sizing:border-box}
.prop .ph.none p{margin:0;font-size:var(--urth-fs-small);color:var(--urth-text-muted);text-align:center;line-height:1.45}
.prop .ph.none .ds-chip{position:absolute}
.prop .tx{padding:var(--urth-s-3) var(--urth-s-4) var(--urth-s-4)}
.prop b{display:block;font-family:var(--urth-font-display);font-weight:600;font-size:18px;color:var(--urth-forest-900);line-height:var(--urth-lh-tight)}
.prop .tx span{display:block;font-size:var(--urth-fs-small);color:var(--urth-text-muted);margin-top:2px}
.st{font-weight:600}
.st.settled{color:var(--urth-forest-700)}
.st.noclear{color:var(--urth-danger-600)}
.st.unsettled,.st.address{color:var(--urth-danger-600)}
.idx-steps{list-style:none;margin:0;padding:0}
.idx-steps li{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:var(--urth-s-3);align-items:center;padding:var(--urth-s-3) 0;border-top:1px solid var(--urth-line)}
.idx-steps li:first-child{border-top:0;padding-top:0}
.idx-steps .b{font-family:var(--urth-font-display);font-weight:700;font-size:13px;height:30px;border-radius:var(--urth-r-pill);display:inline-flex;align-items:center;justify-content:center;background:var(--urth-cream-100);color:var(--urth-text-muted)}
.idx-steps li.live .b{background:var(--urth-gold-500);color:var(--urth-on-gold)}
.idx-steps .nm{font-weight:600;color:var(--urth-forest-900)}
.idx-steps .ds{font-size:var(--urth-fs-small);color:var(--urth-text-muted)}
@media (max-width:600px){.props{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--urth-s-2)}.prop b{font-size:15.5px}.prop .tx{padding:var(--urth-s-2) var(--urth-s-3) var(--urth-s-3)}}

/* ---------- step 1b, the aerial (A41, 28 Sep 2026) ----------
   The frame takes the picture's own shape (--ar, width over height), so the picture is never cropped; its height is held to the
   screen so the strip stays in view on a laptop. The county's lot line and building outlines sit on top as thin lines. */
.frame.aerial{aspect-ratio:var(--ar,1)}
.frame.aerial .pic{position:absolute;inset:0}
.frame.aerial .pic img{width:100%;height:100%;object-fit:fill}
.frame.aerial .lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.frame.aerial.nolines .lines{display:none}
.lines polygon{fill:none;vector-effect:non-scaling-stroke}
.lines .lot{stroke:var(--urth-gold-500);stroke-width:1.6}
.lines .bld{stroke:var(--urth-cream-50);stroke-opacity:.85;stroke-width:1}
.lines .bld.ours{stroke:var(--urth-cream-50);stroke-opacity:1;stroke-width:1.4;stroke-dasharray:5 3}
.frame .chip-br{position:absolute;right:var(--urth-s-3);bottom:26px;background:var(--urth-cream-50);color:var(--urth-forest-900);border-color:transparent;cursor:pointer;min-height:32px;font:600 var(--urth-fs-small) var(--urth-font-body)}
.frame .chip-br[aria-pressed="false"]{background:var(--urth-forest-900);color:var(--urth-on-green);border-color:var(--urth-line-on-green)}
.frame .chip-br:focus-visible{outline:none;box-shadow:var(--urth-focus)}
.thumb .tn{min-width:34px;padding:0 4px;box-sizing:border-box}
/* the timeline beside the picture: every county year, and Google's undated picture */
.yrs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:6px}
.yr{appearance:none;width:100%;min-height:var(--urth-touch-min);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:4px 2px;border-radius:var(--urth-r-sm);border:1.5px solid var(--urth-forest-700);background:transparent;color:var(--urth-forest-900);font:600 13px var(--urth-font-body);cursor:pointer;box-sizing:border-box}
.yr b{font-family:var(--urth-font-display);font-size:14px}
.yr span{font-weight:400;font-size:11px;color:var(--urth-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.yr[aria-pressed="true"]{background:var(--urth-gold-500);border-color:var(--urth-gold-500);color:var(--urth-on-gold)}
.yr[aria-pressed="true"] span{color:var(--urth-on-gold)}
.yr:focus-visible{outline:none;box-shadow:var(--urth-focus)}
.yr.off{border:1.5px dashed var(--urth-line);color:var(--urth-text-muted);cursor:default}
.yrs-key{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:12.5px;color:var(--urth-text-muted);margin:var(--urth-s-3) 0 0}
.yrs-key .k{display:inline-block;width:14px;height:10px;border-radius:3px;border:1.5px solid var(--urth-forest-700)}
.yrs-key .k.off{border:1.5px dashed var(--urth-line)}
/* the step card's links between steps */
.step-links{display:flex;flex-wrap:wrap;gap:var(--urth-s-2);margin:var(--urth-s-3) 0 0}
.step-links a{display:inline-flex;align-items:center;min-height:var(--urth-touch-min);padding:0 var(--urth-s-4);border-radius:var(--urth-r-pill);border:1.5px solid var(--urth-forest-700);color:var(--urth-forest-700);font:600 var(--urth-fs-small) var(--urth-font-body);text-decoration:none}
.step-links a:hover{background:var(--urth-cream-100)}
.step-links a:focus-visible{outline:none;box-shadow:var(--urth-focus)}
/* Details for 1b */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.facts.pics th{width:auto;font-weight:600;color:var(--urth-forest-900);white-space:nowrap}
table.facts.pics td{padding-right:var(--urth-s-3);overflow-wrap:normal}
table.facts.pics tr.on td{background:var(--urth-cream-100)}
table.facts.pics .no{font-family:var(--urth-font-display);font-weight:700;font-size:12px;width:28px;height:28px;border-radius:var(--urth-r-pill);border:0;background:var(--urth-cream-100);color:var(--urth-forest-900);cursor:pointer}
table.facts.pics tr.on .no{background:var(--urth-gold-500);color:var(--urth-on-gold)}
@media (max-width:600px){table.facts.pics{font-size:12.5px}}
.views .no{white-space:nowrap}
.views li.dropped .no{width:auto;min-width:30px;padding:0 6px;font-size:11.5px}
.views .peek img{aspect-ratio:auto}
.ai-mark{display:inline-block;margin:0 0 var(--urth-s-3);padding:4px 12px;border-radius:var(--urth-r-pill);background:var(--urth-gold-500);color:var(--urth-on-gold);font:600 var(--urth-fs-small) var(--urth-font-body)}
.chg{list-style:none;margin:0;padding:0}
.chg li{padding:var(--urth-s-2) 0;border-top:1px solid var(--urth-line);max-width:78ch}
.chg li:first-child{border-top:0}
.chg b{display:block;color:var(--urth-forest-900);font-weight:600}
.chg span{display:block;color:var(--urth-text-muted);font-size:var(--urth-fs-small);margin-top:2px}
.limits.warn{margin-bottom:var(--urth-s-3)}
.limits.warn b{color:var(--urth-danger-600)}
/* the index: which step the cards show */
.idx-switch{display:inline-flex;gap:4px;padding:4px;border-radius:var(--urth-r-pill);background:var(--urth-cream-50)}
.idx-switch button{appearance:none;border:0;min-height:36px;padding:0 var(--urth-s-4);border-radius:var(--urth-r-pill);background:transparent;color:var(--urth-forest-900);font:600 var(--urth-fs-small) var(--urth-font-body);cursor:pointer}
.idx-switch button[aria-pressed="true"]{background:var(--urth-gold-500);color:var(--urth-on-gold)}
.idx-switch button:focus-visible{outline:none;box-shadow:var(--urth-focus)}
.prop .ph.aer img{position:absolute;inset:0;object-fit:cover}
.st.lineoff,.st.nolot,.st.noaerial{color:var(--urth-danger-600)}
@media (max-width:600px){.frame .chip-bl,.frame .chip-br{font-size:12px;padding:5px 10px;bottom:16px}.frame .chip-br{min-height:28px}}

/* ---------- step 1c, the county record in 3D (A42, 29 Sep 2026) ----------
   The 3D sits in the same square frame as 1a, on the page's cream, with the county's lot in pale green, the buildings in warm white
   with forest edges, and the neighbours in grey. Labels, the north arrow, the 10 m scale and the zoom buttons sit on top. */
.frame.three{background:var(--urth-cream-100);touch-action:pan-y}
.frame.three canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.frame.three .labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.blab{position:absolute;transform:translate(-50%,-100%);white-space:nowrap;padding:3px 8px;border-radius:var(--urth-r-pill);background:var(--urth-forest-900);color:var(--urth-on-green);font:600 12px var(--urth-font-body)}
.frame.three .chip-tl{background:var(--urth-cream-50);color:var(--urth-forest-900)}
.frame.three .north{position:absolute;right:var(--urth-s-3);top:52px;width:34px;height:34px;border-radius:50%;background:var(--urth-cream-50);box-shadow:var(--urth-shadow-1);display:flex;align-items:center;justify-content:center}
.frame.three .north svg{width:24px;height:24px;overflow:visible;transition:transform .38s}
.frame.three .north path{fill:var(--urth-forest-900)}
.frame.three .north text{font:700 8px var(--urth-font-body);fill:var(--urth-forest-900)}
.frame.three .scale{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--urth-r-pill);font-size:12px}
.frame.three .scale i{display:inline-block;height:6px;border:2px solid var(--urth-on-green);border-top:0;box-sizing:border-box;min-width:4px}
.frame.three .zoom{position:absolute;right:var(--urth-s-3);bottom:22px;display:flex;gap:6px}
.frame.three .zoom button{appearance:none;width:36px;height:36px;border-radius:50%;border:0;background:var(--urth-cream-50);color:var(--urth-forest-900);font:700 20px/1 var(--urth-font-body);cursor:pointer;box-shadow:var(--urth-shadow-1)}
.frame.three .zoom button:focus-visible{outline:none;box-shadow:var(--urth-focus)}
.thumb img{background:var(--urth-cream-100)}
.bl,.fl{list-style:none;margin:0;padding:0}
.bl li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:var(--urth-s-3);align-items:start;padding:var(--urth-s-2) 0;border-top:1px solid var(--urth-line)}
.bl li:first-child{border-top:0;padding-top:0}
.bl .no{font-family:var(--urth-font-display);font-weight:700;font-size:13px;width:28px;height:28px;border-radius:var(--urth-r-pill);display:inline-flex;align-items:center;justify-content:center;background:var(--urth-forest-900);color:var(--urth-on-green)}
.bl b{color:var(--urth-forest-900)}
.bl .sub{display:block;font-size:var(--urth-fs-small);color:var(--urth-text-muted)}
.h-feat{margin-top:var(--urth-s-4) !important;font-size:16px !important}
.fl li{display:flex;justify-content:space-between;gap:var(--urth-s-3);padding:4px 0;border-top:1px solid var(--urth-line);font-size:var(--urth-fs-small)}
.fl li:first-child{border-top:0}
.fl b{font-weight:600;color:var(--urth-forest-900)}
.fl span{color:var(--urth-text-muted);text-align:right}
table.facts.rec th{width:32%}
table.facts .src{display:block;font-size:12px;color:var(--urth-text-muted);margin-top:2px}
/* the checklist: small ticks on the cards, a list on the house pages */
.ticks{display:flex !important;flex-wrap:wrap;gap:2px;margin-top:var(--urth-s-2) !important}
.tk{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:4px;font:700 10px/1 var(--urth-font-body);flex:0 0 auto}
.tk.yes{background:var(--urth-forest-700);color:var(--urth-cream-50)}
.tk.partly{background:var(--urth-gold-500);color:var(--urth-on-gold)}
.tk.no{background:transparent;color:var(--urth-text-muted);box-shadow:inset 0 0 0 1.5px var(--urth-line)}
.tk.unknown{background:var(--urth-cream-100);color:var(--urth-text-muted)}
.have{list-style:none;margin:0;padding:0}
.have li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:var(--urth-s-3);align-items:start;padding:var(--urth-s-2) 0;border-top:1px solid var(--urth-line)}
.have li:first-child{border-top:0;padding-top:0}
.have .tk{width:22px;height:22px;font-size:13px}
.have b{color:var(--urth-forest-900)}
.have .hv{font-size:12.5px;font-weight:600;margin-left:4px}
.have .hv.yes{color:var(--urth-forest-700)} .have .hv.partly{color:var(--urth-on-gold)} .have .hv.no,.have .hv.unknown{color:var(--urth-text-muted)}
.have .sub{display:block;font-size:var(--urth-fs-small);color:var(--urth-text-muted);margin-top:2px}
.idx-key{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:0 0 var(--urth-s-4);font-size:12.5px;color:var(--urth-on-green-muted)}
.idx-key ol{display:flex;flex-wrap:wrap;gap:2px 10px;margin:0;padding:0;list-style:none;counter-reset:k}
.idx-key li{counter-increment:k}
.idx-key li::before{content:counter(k) ". ";font-weight:700}
.idx-key .keychips{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:var(--urth-r-pill);background:var(--urth-cream-50);color:var(--urth-forest-900)}
.idx-key .tk{width:16px;height:16px;font-size:10px}
.prop .ph.c3{background:var(--urth-cream-100);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:var(--urth-s-4);box-sizing:border-box;text-align:center}
.prop .ph.c3 .big{font-family:var(--urth-font-display);font-weight:700;font-size:34px;color:var(--urth-forest-900);line-height:1}
.prop .ph.c3 .lbl{font-size:12.5px;color:var(--urth-text-muted)}
.prop .ph.c3 svg{width:70%;height:auto;max-height:55%}
.st.built{color:var(--urth-forest-700)}
.st.nobld,.st.norec{color:var(--urth-danger-600)}
@media (max-width:600px){.tk{width:13px;height:13px;font-size:8.5px;border-radius:3px}.ticks{gap:2px}.frame.three .north{top:46px;width:30px;height:30px}.frame.three .zoom{bottom:14px}.frame.three .zoom button{width:32px;height:32px}}

/* ---------- step 2, LaunchPad in its own 3D (A48, 30 Sep 2026) ----------
   The same frame as 1c. Beside it, the layer legend: each layer a button with its colour swatch, name and area, that hides or shows
   it. Layer colours come from the data (one per LaunchPad layer), so the only colour here is the swatch's own. */
.lg{list-style:none;margin:0;padding:0}
.lg li{border-top:1px solid var(--urth-line)}
.lg li:first-child{border-top:0}
.lgb{appearance:none;display:grid;grid-template-columns:22px minmax(0,1fr);gap:var(--urth-s-3);align-items:start;width:100%;padding:var(--urth-s-2) 0;border:0;background:none;text-align:left;font:inherit;color:inherit;cursor:pointer;border-radius:var(--urth-r-sm, 6px)}
.lgb:focus-visible{outline:none;box-shadow:var(--urth-focus)}
.lgb[aria-pressed="false"]{opacity:.45}
.lgb[aria-pressed="false"] b{text-decoration:line-through}
.lgb b{color:var(--urth-forest-900)}
.lgb .sub{display:block;font-size:var(--urth-fs-small);color:var(--urth-text-muted)}
.sw{display:inline-block;width:18px;height:18px;border-radius:4px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);vertical-align:-3px;margin-right:6px;flex:0 0 auto}
.lgb .sw{margin:1px 0 0}
.sw.line{background:transparent;box-shadow:inset 0 0 0 3px var(--c)}
.sw.dot{border-radius:50%}
.lg-date{margin-top:var(--urth-s-3) !important}
.st.measured{color:var(--urth-forest-700)}
.st.hardonly,.st.lotonly{color:var(--urth-on-gold)}
.st.nomeasure{color:var(--urth-danger-600)}

/* ---------- step 10, Planting (A53, 30 Sep): today's plan and the v2 plan side by side ---------- */
.pl-draws{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--urth-s-4)}
.pl-draw{margin:0;min-width:0}
.pl-draw .pl-cap{display:flex;align-items:center;gap:var(--urth-s-2);margin:0 0 var(--urth-s-2);font:600 var(--urth-fs-body) var(--urth-font-body);color:var(--urth-forest-900)}
.pl-draw .pl-sub{margin:var(--urth-s-2) 0 0;font-size:var(--urth-fs-small);color:var(--urth-text-muted)}
a.pl-frame{display:block;position:relative;border-radius:var(--urth-r-lg);overflow:hidden;background:var(--urth-cream-50);aspect-ratio:1240/880;box-shadow:var(--urth-shadow-2);border:1px solid var(--urth-line)}
a.pl-frame img{display:block;width:100%;height:100%;object-fit:contain}
a.pl-frame.empty img{display:none}
a.pl-frame.empty::after{content:"Not stored for this look";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--urth-text-muted);font-size:var(--urth-fs-small)}
a.pl-frame:focus-visible{outline:none;box-shadow:var(--urth-focus)}
.pl-grid{display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr);gap:var(--urth-s-5);align-items:start;margin-top:var(--urth-s-5)}
.pl-grid > *{min-width:0}
.pl-side{display:flex;flex-direction:column;gap:var(--urth-s-3)}
.pl-main{display:flex;flex-direction:column;gap:var(--urth-s-3)}
#controls h3{margin:var(--urth-s-3) 0 var(--urth-s-2)}
#controls h3:first-child{margin-top:0}
.pl-looks{display:flex;flex-wrap:wrap;gap:6px}
.pl-looks button{appearance:none;border:1px solid var(--urth-line);min-height:36px;padding:0 var(--urth-s-3);border-radius:var(--urth-r-pill);background:var(--urth-cream-50);color:var(--urth-forest-900);font:600 var(--urth-fs-small) var(--urth-font-body);cursor:pointer}
.pl-looks button[aria-checked="true"]{background:var(--urth-gold-500);color:var(--urth-on-gold);border-color:transparent}
.pl-looks button:focus-visible,.pl-sw:focus-visible{outline:none;box-shadow:var(--urth-focus)}
.pl-sws{display:flex;flex-direction:column;gap:6px}
.pl-sw{appearance:none;display:flex;align-items:center;gap:var(--urth-s-3);text-align:left;border:1px solid var(--urth-line);border-radius:var(--urth-r-md);background:var(--urth-cream-50);padding:var(--urth-s-2) var(--urth-s-3);min-height:var(--urth-touch-min);cursor:pointer;color:var(--urth-text-primary);font:inherit}
.pl-sw b{display:block;font-weight:600;color:var(--urth-forest-900)}
.pl-sw span span{display:block;font-size:var(--urth-fs-small);color:var(--urth-text-muted)}
.pl-sw .knob{flex:0 0 auto;width:36px;height:20px;border-radius:var(--urth-r-pill);background:var(--urth-line);position:relative;transition:background var(--urth-ease)}
.pl-sw .knob::after{content:"";position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:var(--urth-cream-50);transition:transform var(--urth-ease)}
.pl-sw[aria-pressed="true"] .knob{background:var(--urth-forest-700)}
.pl-sw[aria-pressed="true"] .knob::after{transform:translateX(16px)}
.pl-reads{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.pl-read{opacity:.7}
.pl-read.on{opacity:1}
.pl-choice{border:0;margin:0 0 var(--urth-s-4);padding:0;min-width:0}
.pl-choice legend{font:600 var(--urth-fs-body) var(--urth-font-body);color:var(--urth-forest-900);margin-bottom:var(--urth-s-2);padding:0}
.pl-opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:var(--urth-s-3)}
.pl-opt{position:relative;display:flex;flex-direction:column;border:1px solid var(--urth-line);border-radius:var(--urth-r-md);overflow:hidden;background:var(--urth-cream-50);cursor:pointer;min-width:0}
.pl-opt input{position:absolute;opacity:0;width:1px;height:1px}
.pl-opt.on{border-color:var(--urth-gold-500);box-shadow:0 0 0 2px var(--urth-gold-500)}
.pl-opt:focus-within{box-shadow:var(--urth-focus)}
.pl-opt .ph{display:block;position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--urth-cream-100)}
.pl-opt .ph img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.pl-opt .noimg{position:absolute;inset:0}
.pl-opt .noimg{display:flex;height:100%;align-items:center;justify-content:center;color:var(--urth-text-muted);font-size:var(--urth-fs-small)}
.pl-opt .tx{display:flex;flex-direction:column;gap:2px;padding:var(--urth-s-2) var(--urth-s-3) var(--urth-s-3);font-size:var(--urth-fs-small);color:var(--urth-text-muted)}
.pl-opt .tx b{color:var(--urth-forest-900);font-size:var(--urth-fs-body)}
.pl-opt .tx i{color:var(--urth-text-muted)}
.pl-opt .tx .ds-chip{align-self:flex-start;margin-top:4px}
.pl-also{color:var(--urth-forest-700);font-weight:600}
.pl-chg li{display:flex;gap:var(--urth-s-2);align-items:baseline}
.pl-tag{flex:0 0 auto;min-width:50px;text-align:center;font:600 11px var(--urth-font-body);letter-spacing:.04em;text-transform:uppercase;padding:2px 8px;border-radius:var(--urth-r-pill);background:var(--urth-cream-100);color:var(--urth-forest-900)}
.pl-chg li.in .pl-tag{background:var(--urth-forest-700);color:var(--urth-on-green)}
.pl-chg li.out .pl-tag{background:var(--urth-gold-500);color:var(--urth-on-gold)}
table.pl-cmp td.num,table.pl-cmp th.num{text-align:right;font-variant-numeric:tabular-nums}
table.pl-cmp tr.in td:first-child{font-weight:600;color:var(--urth-forest-700)}
table.pl-cmp tr.out td{color:var(--urth-text-muted)}
table.pl-cmp .sw{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px;vertical-align:middle}
.pl-seas{margin-top:var(--urth-s-3)}
body.pl-busy .pl-draws,body.pl-busy .pl-main{opacity:.55;transition:opacity .2s}
.prop .ph.pl img{object-fit:cover;background:var(--urth-cream-50)}
@media (max-width:900px){
  .pl-draws{grid-template-columns:minmax(0,1fr)}
  .pl-grid{grid-template-columns:minmax(0,1fr);gap:var(--urth-s-3)}
}
@media (max-width:600px){
  .pl-opts{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--urth-s-2)}
  .idx-switch{flex-wrap:wrap;border-radius:var(--urth-r-lg)}
}
/* ---------- step 2: the Blender set (A54, 30 Sep 2026) ----------
   The same six views rendered in Blender, over the page's own 3D when the switch says Blender. The picture is 4:3 and covers the frame,
   so the scale matches the page's 3D (50 m across the shorter side). The switch sits at the bottom of the frame, between the scale and
   the zoom (on a phone at the top left, under the view's name); zoom is the page's own 3D only. */
.frame.three img.bl{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:var(--urth-cream-100)}
.frame.three img.bl[hidden]{display:none}
/* A69: + and − work on the Blender picture too (it is scaled in the frame to the page's own metres) */
.setsw{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:flex;padding:3px;gap:2px;border-radius:var(--urth-r-pill);background:var(--urth-forest-900);box-shadow:var(--urth-shadow-1)}
.setsw button{appearance:none;border:0;background:none;color:var(--urth-on-green);font:600 var(--urth-fs-small) var(--urth-font-body);padding:6px 12px;min-height:32px;border-radius:var(--urth-r-pill);cursor:pointer;white-space:nowrap}
.setsw button[aria-pressed="true"]{background:var(--urth-cream-50);color:var(--urth-forest-900)}
.setsw button:focus-visible{outline:none;box-shadow:var(--urth-focus)}
.lgb:disabled{cursor:default}
@media (max-width:600px){.setsw{left:var(--urth-s-3);top:50px;bottom:auto;transform:none}.setsw button{font-size:12px;padding:5px 9px;min-height:28px}}
@media (max-width:380px){.setsw button{padding:5px 7px}}

/* ---- step 4, the canopy (A58, 9 Oct 2026): the height bands beside the 3D, the crown heights over it ---- */
.c4-big{margin:0 0 var(--urth-s-2);color:var(--urth-text-primary);font-size:var(--urth-fs-body);line-height:1.35}
.c4-big b{font-family:var(--urth-font-display);font-weight:700;color:var(--urth-forest-900);font-size:1.25em}
.c4-bands{list-style:none;margin:var(--urth-s-3) 0 var(--urth-s-2);padding:0}
.c4-bands li{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:var(--urth-s-3);align-items:center;padding:3px 0;font-size:var(--urth-fs-small);color:var(--urth-text-primary)}
.c4-bands .n{color:var(--urth-text-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.c4-bands .sw{margin:0}
.blab.c4{padding:2px 7px;font-size:11.5px;line-height:1.3;margin-top:-4px}
.blab.c4.off{background:var(--urth-cream-50);color:var(--urth-forest-900);box-shadow:inset 0 0 0 1px var(--urth-line)}
.blab.c4.palm{background:#8A5A1E;color:#fff}
.c4-busy{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-width:80%;padding:8px 14px;border-radius:var(--urth-r-pill);background:var(--urth-forest-900);color:var(--urth-on-green);font:600 var(--urth-fs-small) var(--urth-font-body);text-align:center}
.c4-busy[hidden]{display:none}

/* ---- step 6, the ground and the water (A62, 9 Oct 2026): the height stretch in the frame, the colour switch and ramp beside it ---- */
.exsw{position:absolute;left:var(--urth-s-3);bottom:64px;display:flex;align-items:center;padding:3px;gap:2px;border-radius:var(--urth-r-pill);background:var(--urth-forest-900);box-shadow:var(--urth-shadow-1)}
.exsw .exl{color:var(--urth-on-green);font:600 var(--urth-fs-small) var(--urth-font-body);padding:0 4px 0 10px;white-space:nowrap}
.exsw button{appearance:none;border:0;background:none;color:var(--urth-on-green);font:600 var(--urth-fs-small) var(--urth-font-body);min-width:30px;min-height:28px;padding:4px 7px;border-radius:var(--urth-r-pill);cursor:pointer}
.exsw button[aria-pressed="true"]{background:var(--urth-cream-50);color:var(--urth-forest-900)}
.exsw button:focus-visible{outline:none;box-shadow:var(--urth-focus)}
@media (max-width:600px){.exsw{bottom:50px}.exsw .exl,.exsw button{font-size:12px}.exsw button{min-width:26px;min-height:26px;padding:3px 5px}}
.c6-seg{display:inline-flex;padding:3px;gap:2px;border-radius:var(--urth-r-pill);background:var(--urth-cream-100);box-shadow:inset 0 0 0 1px var(--urth-line);margin:var(--urth-s-2) 0 0}
.c6-seg button{appearance:none;border:0;background:none;color:var(--urth-forest-900);font:600 var(--urth-fs-small) var(--urth-font-body);padding:5px 14px;min-height:30px;border-radius:var(--urth-r-pill);cursor:pointer}
.c6-seg button[aria-pressed="true"]{background:var(--urth-forest-900);color:var(--urth-on-green)}
.c6-seg button:focus-visible{outline:none;box-shadow:var(--urth-focus)}
.c6-ramp{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--urth-s-3);align-items:center;margin:var(--urth-s-3) 0 var(--urth-s-2);font-size:var(--urth-fs-small);color:var(--urth-text-muted);font-variant-numeric:tabular-nums}
.c6-ramp i{display:block;height:14px;border-radius:4px;background:linear-gradient(90deg,var(--a),var(--b),var(--c));box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.blab.c6{padding:2px 7px;font-size:11.5px;line-height:1.3;margin-top:-4px}
.blab.c6.off{background:var(--urth-cream-50);color:var(--urth-forest-900);box-shadow:inset 0 0 0 1px var(--urth-line)}
.blab.c6.pond{background:#1B4F8F;color:#fff}
.blab.c6.out{background:#B3261E;color:#fff}
.blab.c6.in{background:#6B4E9B;color:#fff}
.c6-sheet{margin:var(--urth-s-3) 0 0}
.c6-sheet img{display:block;width:100%;max-width:960px;height:auto;border-radius:var(--urth-r-sm,6px);box-shadow:inset 0 0 0 1px var(--urth-line);background:#fff}

/* ---- step 8, the conditions grid (A64, 9 Oct 2026): the bands with two columns of square feet, the tapped square's readout ---- */
.c8-bands{list-style:none;margin:var(--urth-s-3) 0 var(--urth-s-2);padding:0}
.c8-bands li{display:grid;grid-template-columns:22px minmax(0,1fr) 52px 46px;gap:var(--urth-s-2);align-items:start;padding:3px 0;font-size:var(--urth-fs-small);color:var(--urth-text-primary)}
.c8-bands li.hd{padding-bottom:0;color:var(--urth-text-muted);font-weight:600}
.c8-bands .n{color:var(--urth-text-muted);font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.c8-bands .sw{margin:1px 0 0}
.c8-bands .sub{display:block;color:var(--urth-text-muted);font-size:12px}
.c8-bands .mut{color:var(--urth-text-muted)}
.c8-tip{position:absolute;left:50%;bottom:64px;transform:translateX(-50%);max-width:calc(100% - 24px);padding:5px 12px;border-radius:var(--urth-r-pill);background:var(--urth-cream-50);color:var(--urth-forest-900);font:600 var(--urth-fs-small) var(--urth-font-body);box-shadow:var(--urth-shadow-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.c8-tip[hidden]{display:none}
.c8-read{margin-top:var(--urth-s-2)}
.c8-read:empty{display:none}
table.facts.c8-rec th{width:34%}
.blab.c8{background:#B3261E;color:#fff;padding:2px 7px;font-size:11.5px}
.spec-why b.in{display:inline;font-weight:600}
@media (max-width:600px){.c8-tip{bottom:58px;font-size:12px;white-space:normal;text-align:center;border-radius:14px;width:max-content}}

/* ---------- the 3D frame's tools: Turn, Isolate the lot, Marks (A74, 14 Oct 2026; workshop/frame-tools.js) ----------
   The three buttons sit beside the six views (under them on a phone), in the cream pill of the index's switch. Pins are cream
   discs with a forest number, gold when chosen; an AI suggestion is dashed. The pin's card and the list are the page's cream cards. */
.ws-viewrow{display:flex;align-items:center;gap:var(--urth-s-3);margin-top:var(--urth-s-3)}
.ws-viewrow .strip{margin-top:0;flex:1 1 auto;min-width:0}
.ws-tools{flex:0 0 auto;display:inline-flex;gap:4px;padding:4px;border-radius:var(--urth-r-pill);background:var(--urth-cream-50)}
.ws-tools button{appearance:none;border:0;min-height:36px;padding:0 var(--urth-s-4);border-radius:var(--urth-r-pill);background:transparent;color:var(--urth-forest-900);font:600 var(--urth-fs-small) var(--urth-font-body);cursor:pointer;white-space:nowrap}
.ws-tools button[aria-pressed="true"]{background:var(--urth-gold-500);color:var(--urth-on-gold)}
.ws-tools button:disabled{color:var(--urth-text-muted);opacity:.55;cursor:default}
.ws-tools button:focus-visible{outline:none;box-shadow:var(--urth-focus)}
.ws-toolhint{margin:var(--urth-s-2) 2px 0;color:var(--urth-on-green-muted);font-size:var(--urth-fs-small)}
.ws-toolhint[hidden]{display:none}
@media (max-width:1100px){.ws-viewrow{flex-direction:column;align-items:stretch}.ws-tools{align-self:flex-start}}
@media (max-width:420px){.ws-tools{align-self:stretch;justify-content:space-between}.ws-tools button{padding:0 var(--urth-s-3);flex:1 1 auto}}
.frame.three.ws-turn,.frame.three.ws-turn canvas{touch-action:none}
.frame.three.ws-turn canvas{cursor:grab}
.frame.three.ws-turn canvas:active{cursor:grabbing}
.frame.three.ws-marking canvas{cursor:crosshair}
.frame.three.ws-posed .labels,.frame.three.ws-iso .labels{display:none}
.ws-pins{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.ws-pins[hidden]{display:none}
.ws-aishapes{position:absolute;inset:0;width:100%;height:100%}
.ws-aishapes polygon,.ws-aishapes polyline{fill:none;stroke:var(--urth-forest-900);stroke-width:1.6;stroke-dasharray:5 4;stroke-linejoin:round}
.ws-pin{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;appearance:none;min-width:32px;height:32px;min-height:0;max-height:32px;padding:0 6px;box-sizing:border-box;border-radius:var(--urth-r-pill);border:2px solid var(--urth-forest-900);background:var(--urth-cream-50);color:var(--urth-forest-900);font:700 13px/1 var(--urth-font-display);cursor:pointer;box-shadow:var(--urth-shadow-2)}
.ws-pin.on{background:var(--urth-gold-500);color:var(--urth-on-gold);border-color:var(--urth-cream-50);z-index:2}
.ws-pin.ai{border-style:dashed;background:transparent;font:700 10.5px/1 var(--urth-font-body);box-shadow:none;backdrop-filter:blur(2px)}
.ws-pin.cut{opacity:.45}
.ws-pin:focus-visible{outline:none;box-shadow:var(--urth-focus)}
.ws-pincard{position:absolute;z-index:3;pointer-events:auto;width:280px;box-sizing:border-box;padding:var(--urth-s-3) var(--urth-s-4) var(--urth-s-4) !important;display:flex;flex-direction:column;gap:var(--urth-s-2);background:var(--urth-cream-50);border-radius:var(--urth-r-md);box-shadow:var(--urth-shadow-3);margin:0}
.ws-pincard.drop{box-shadow:0 0 0 3px var(--urth-gold-500)}
.ws-pincard .pc-top{display:flex;align-items:center;gap:var(--urth-s-2)}
.ws-pincard .pc-top b{font:600 19px/1.2 var(--urth-font-display);color:var(--urth-forest-900);margin-right:auto}
.ws-pincard .pc-x{appearance:none;border:0;background:transparent;width:36px;height:36px;margin:-6px -8px -6px 0;border-radius:50%;font:400 24px/1 var(--urth-font-body);color:var(--urth-forest-900);cursor:pointer}
.ws-pincard .pc-x:focus-visible{outline:none;box-shadow:var(--urth-focus)}
.ws-pincard .ds-input,.ws-pincard .ds-select{min-height:40px;padding:8px var(--urth-s-3);font-size:16px}
.ws-pincard .pc-sp{display:flex;flex-direction:column;gap:3px}
.ws-pincard .pc-sp[hidden]{display:none}
.ws-pincard .pc-text{margin:0;color:var(--urth-text-primary);font-size:var(--urth-fs-small);font-weight:600}
.ws-pincard .pc-sub{margin:0;color:var(--urth-text-muted);font-size:12.5px;line-height:1.35}
.ws-pincard .pc-sub:empty{display:none}
.ws-pincard .pc-btns{display:flex;gap:var(--urth-s-2);margin-top:2px}
.ws-pincard .pc-btns .ds-btn{flex:1 1 0;min-height:40px;padding:0 var(--urth-s-3);cursor:pointer}
.ws-marks{margin-top:var(--urth-s-3)}
.ws-marks[hidden]{display:none}
.ws-marks .mk-head{display:flex;align-items:center;justify-content:space-between;gap:var(--urth-s-3);flex-wrap:wrap}
.ws-marks .mk-head h3{margin:0}
.ws-marks .mk-ai{appearance:none;border:1px dashed var(--urth-forest-700);background:transparent;color:var(--urth-forest-700);border-radius:var(--urth-r-pill);min-height:32px;padding:0 var(--urth-s-3);font:600 12.5px var(--urth-font-body);cursor:pointer}
.ws-marks .mk-ai[aria-pressed="true"]{background:var(--urth-cream-100);color:var(--urth-forest-900);border-style:solid}
.ws-marks .mk-ai:focus-visible{outline:none;box-shadow:var(--urth-focus)}
.ws-marks .mk-rows{list-style:none;margin:var(--urth-s-3) 0 0;padding:0}
.ws-marks .mk-rows li{display:flex;align-items:center;gap:var(--urth-s-2);border-top:1px solid var(--urth-line);min-height:var(--urth-touch-min)}
.ws-marks .mk-rows li.on{background:var(--urth-cream-100)}
.ws-marks .mk-go{appearance:none;border:0;background:transparent;flex:1 1 auto;min-width:0;text-align:left;padding:var(--urth-s-2) var(--urth-s-1);font:400 var(--urth-fs-small)/1.35 var(--urth-font-body);color:var(--urth-text-primary);cursor:pointer;overflow-wrap:anywhere}
.ws-marks .mk-go b{font-weight:700;color:var(--urth-forest-900)}
.ws-marks .mk-acts{flex:0 0 auto;display:flex;gap:2px}
.ws-marks .mk-acts button{appearance:none;border:0;background:transparent;color:var(--urth-forest-700);font:600 12.5px var(--urth-font-body);min-height:36px;padding:0 var(--urth-s-2);border-radius:var(--urth-r-sm);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.ws-marks .mk-acts button[data-sure]{color:var(--urth-danger-600)}
.ws-marks .mk-go:focus-visible,.ws-marks .mk-acts button:focus-visible{outline:none;box-shadow:var(--urth-focus)}
.ws-marks .mk-ainote{margin:var(--urth-s-4) 0 0;color:var(--urth-text-muted);font-size:var(--urth-fs-small)}
.ws-marks .mk-rows.ai{margin-top:var(--urth-s-2)}
.ws-marks .mk-rows.ai .mk-go b{font-weight:600;border:1px dashed var(--urth-forest-700);border-radius:var(--urth-r-pill);padding:1px 7px;font-size:11px}
.ws-marks .mk-status{margin:var(--urth-s-3) 0 0;color:var(--urth-text-muted);font-size:12.5px}
.ws-pincard .pc-btns .pc-photo{background:transparent;color:var(--urth-forest-700);border:1.5px solid var(--urth-forest-700)}
.ws-pincard .pc-btns .pc-photo:focus-within{box-shadow:var(--urth-focus)}