/* ==========================================================================
   Plan a region: steps, region cards, the plan stage with its illustrated
   scene, the action list, the tagged ledger, the five-year track and report.
   Tag language: mitigation = solid cobalt, adaptation = outline/hatch, co-benefit = half.
   ========================================================================== */
.planner { scroll-margin-top: calc(var(--nav-h) + 16px); }
.planner__steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: clamp(32px, 5vh, 52px);
  border-top: 1px solid var(--rule-strong);
}
.planner__steps li { position: relative; padding: 16px 12px 0 0; font: 600 14px/1.3 var(--sans); color: var(--ink-2); }
.planner__steps li::before {
  content: "";
  position: absolute;
  top: -5px; left: 0;
  width: 9px; height: 9px;
  background: var(--paper);
  box-shadow: inset 0 0 0 1.5px var(--rule-strong);
  transition: background-color .3s ease, box-shadow .3s ease;
}
.planner__steps li.is-done { color: var(--ink); }
.planner__steps li.is-done::before { background: var(--ink); box-shadow: none; }
.planner__steps li[aria-current="step"] { color: var(--ink); }
.planner__steps li[aria-current="step"]::before { background: var(--cobalt); box-shadow: none; }
.planner__q { font: 400 clamp(1.6rem, 2.4vw, 2.2rem)/1.15 var(--serif); letter-spacing: -.012em; }
.planner__q:focus, .plan__title:focus, .tagv__title:focus, .trk__title:focus, .report__title:focus,
.send__title:focus, .wend__title:focus { outline: none; }


/* Regions */
.regions { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); margin-top: 28px; }
.regions li { display: flex; }
.region {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  border: 1px solid var(--rule-strong);
  background: var(--paper);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: border-color .2s ease, transform .16s var(--ease-out);
}
.region:active { transform: scale(.985); }
.region__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-2); }
.region__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease-out); }
.region__body { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 18px 18px 20px; }
.region__name { font: 400 1.6rem/1.1 var(--serif); letter-spacing: -.012em; }
.region__desc { font-size: 15.5px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.region__go { margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 6px; font: 600 15px/1.2 var(--sans); color: var(--cobalt-deep); }
.region__go i { transition: transform .4s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .region:hover { border-color: var(--ink); }
  .region:hover .region__media img { transform: scale(1.04); }
  .region:hover .region__go i { transform: translateX(3px); }
}


.act {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 12px 20px;
  padding: 20px 16px 20px 0;
  border-bottom: 1px solid var(--rule);
  transition: background-color .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.act__icon {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  box-shadow: inset 0 0 0 1px var(--rule-strong);
  font-size: 22px;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.act__name { font: 600 17px/1.3 var(--sans); }
.act__does { margin-top: 4px; font-size: 15.5px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.act__fx { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 10px; }
.fx { display: inline-flex; align-items: center; gap: 8px; font: 500 13.5px/1.2 var(--sans); color: var(--ink-2); }
.fx__dots { display: inline-flex; gap: 3px; }
.fx__dots span { width: 9px; height: 9px; box-shadow: inset 0 0 0 1px var(--rule-strong); }
.fx__dots span.is-on { background: var(--cobalt); box-shadow: none; }
.act__protect { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font: 600 13.5px/1.3 var(--sans); color: var(--cobalt-deep); }
.act__side { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 12px; }
.act__cost { font: 400 1.45rem/1 var(--serif); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.act__btn {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--rule-strong);
  font: 600 14.5px/1 var(--sans);
  color: var(--ink);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, transform .16s var(--ease-out);
}
.act__btn::after { content: ""; position: absolute; inset: 0; }
.act__btn:focus-visible { outline: none; }
.act:has(.act__btn:focus-visible) { outline: 2px solid var(--cobalt-deep); outline-offset: -2px; }
.act__btn:active { transform: scale(.97); }
.act__btn span { display: inline-flex; align-items: center; gap: 6px; }
.act__on { display: none !important; }
.act.is-on .act__on { display: inline-flex !important; }
.act.is-on .act__off { display: none !important; }
.act.is-on { box-shadow: inset 3px 0 0 var(--cobalt); background: rgba(21, 119, 189, .05); }
.act.is-on .act__btn { background: var(--cobalt); color: var(--on-cobalt); box-shadow: none; }
.act.is-on .act__icon { background: var(--cobalt); color: var(--on-cobalt); box-shadow: none; }
.act.is-blocked { opacity: .5; }
.act.is-blocked .act__btn { cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) {
  .act:not(.is-on):not(.is-blocked):hover { background: rgba(14, 23, 38, .03); }
  .act:not(.is-on):not(.is-blocked):hover .act__btn { box-shadow: inset 0 0 0 1px var(--ink); }
}


/* Tag the budget */
.tagv__title, .trk__title, .report__title { font: 400 clamp(1.9rem, 3vw, 2.8rem)/1.08 var(--serif); letter-spacing: -.016em; }
.tagv__lede { max-width: 58ch; margin-top: 12px; color: var(--ink-2); }
.ledger { list-style: none; max-width: 1000px; margin-top: 28px; border-top: 1.5px solid var(--ink); }
.ledger__row, .ledger__total {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px 190px;
  align-items: center;
  gap: 12px 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
}
.ledger__name { display: flex; align-items: center; gap: 12px; font-weight: 500; }
.ledger__name i { flex: none; font-size: 20px; color: var(--ink-2); }
.ledger__cost { text-align: right; font: 400 1.25rem/1 var(--serif); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.ledger__tag { justify-self: start; padding-left: 8px; }
.ledger__total { border-bottom: 1.5px solid var(--ink); }
.ledger__total .ledger__name { font-weight: 700; }
.mix { max-width: 1000px; margin-top: 36px; }
.mix__title { font: italic 400 1.15rem/1.3 var(--serif); color: var(--ink-2); }
.mix__bar { display: flex; gap: 3px; height: 30px; margin-top: 12px; }
.mix__seg { flex-basis: 0; transform-origin: left center; }
.mix__seg--m, .mix__key--m .mix__sw { background: var(--cobalt); }
.mix__seg--a, .mix__key--a .mix__sw {
  background: repeating-linear-gradient(135deg, var(--cobalt) 0 2px, transparent 2px 7px);
  box-shadow: inset 0 0 0 1.5px var(--cobalt);
}
.mix__seg--c, .mix__key--c .mix__sw {
  background: linear-gradient(var(--cobalt) 0 50%, transparent 50%), repeating-linear-gradient(135deg, var(--cobalt) 0 2px, transparent 2px 7px);
  box-shadow: inset 0 0 0 1.5px var(--cobalt);
}
.mix__legend { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 32px; margin-top: 14px; font-size: 15.5px; }
.mix__key { display: inline-flex; align-items: center; gap: 8px; }
.mix__sw { flex: none; width: 16px; height: 16px; }
.mix__pct { color: var(--ink-2); }
.tagv__connect { max-width: 64ch; margin-top: 28px; color: var(--ink-2); }
.tagv__connect .link-arrow { margin-left: 4px; }


.tlog { list-style: none; max-width: 1000px; margin-top: 28px; border-top: 1px solid var(--rule-strong); }
.tlog__item {
  display: grid;
  grid-template-columns: 76px 22px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 16px;
  line-height: 1.5;
}
html.motion-ok .tlog__item { animation: tlog-in .45s var(--ease-out) both; }
@keyframes tlog-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.tlog__year { font-weight: 600; color: var(--ink-2); }
.tlog__icon { font-size: 19px; margin-top: 2px; color: var(--ink-2); }
.tlog__item.is-safe .tlog__icon { color: var(--cobalt-deep); }
.tlog__item.is-hit { background: rgba(14, 23, 38, .045); }
.tlog__item.is-hit .tlog__icon { color: var(--ink); }
.tlog__item.is-hit .tlog__text, .tlog__item.is-safe .tlog__text { font-weight: 600; }

/* Report */
.report { max-width: 1000px; margin-top: 40px; padding-top: 32px; border-top: 1.5px solid var(--ink); }
.report__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; }
.report__stars { display: flex; gap: 6px; font-size: clamp(36px, 4vw, 50px); line-height: 1; color: var(--cobalt); }
.report__stars i:not(.is-on) { color: var(--ink-3); }
.report__checks { list-style: none; display: grid; gap: 10px; margin-top: 24px; }
.report__checks li { display: flex; align-items: center; gap: 10px; font-size: 17px; }
.report__checks i { flex: none; font-size: 22px; }
.report__checks .is-ok i { color: var(--cobalt); }
.report__checks .is-no i { color: var(--ink-3); }
.report__val { margin-left: auto; padding-left: 16px; font: 400 1.25rem/1 var(--serif); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.report__advice { display: grid; gap: 10px; max-width: 64ch; margin-top: 26px; font-size: 17px; }
.report__advice p { padding-left: 16px; border-left: 2px solid var(--cobalt); text-wrap: pretty; }
.real { margin-top: 40px; padding: clamp(22px, 3vw, 32px); background: var(--paper-2); }
.real__title { font: italic 400 1.3rem/1.3 var(--serif); }
.real__list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 40px; margin-top: 16px; }
.real__list p { font-size: 16px; line-height: 1.55; text-wrap: pretty; }
.real__list .link-arrow { margin-top: 8px; }
.real__note { display: flex; align-items: flex-start; gap: 8px; margin-top: 20px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.real__note i { flex: none; margin-top: 2px; color: var(--cobalt-deep); }


/* ---------- Plan view: sticky stage (scene + summary) next to the action list ---------- */
.plan__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 28px; margin-bottom: 24px; }
.plan__title { font: 400 clamp(1.9rem, 3vw, 2.8rem)/1.08 var(--serif); letter-spacing: -.016em; }
.plan__risk { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; color: var(--ink-2); }
.plan__risk i { color: var(--ink); }
.plan__change { font-size: 15px; }
.plan__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gutter); align-items: start; }
.plan__stage { position: sticky; top: calc(var(--nav-h) + 16px); display: grid; gap: 12px; }
.psum { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 12px 22px; padding: 16px 18px; background: var(--paper-2); }
.psum__budget { display: flex; flex-direction: column; gap: 2px; }
.psum__left { font: 300 clamp(2.8rem, 4vw, 3.8rem)/.9 var(--serif); letter-spacing: -.035em; font-variant-numeric: tabular-nums lining-nums; }
.psum__of { font-size: 13.5px; line-height: 1.2; color: var(--ink-2); max-width: 9em; }
.psum__lock { grid-column: 1 / -1; width: 100%; }
.psum__lock:disabled { cursor: not-allowed; background: var(--rule-strong); color: var(--ink); }
.psum__hint { grid-column: 1 / -1; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.acts { list-style: none; border-top: 1.5px solid var(--ink); }
.act__name .stamp { margin-left: 6px; vertical-align: 2px; }

/* ===========================================================================
   SCENE: illustrated panorama (16:9). Positions are % of the box; sizes scale
   with the scene through container query units (cqw).
   =========================================================================== */
.scene {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  isolation: isolate;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--rule-strong);
}
.scene__ground { position: absolute; inset: 0; width: 100%; height: 100%; }
.g { vector-effect: non-scaling-stroke; transition: fill .8s ease, stroke .8s ease; }
.g-hill { fill: #E9ECE6; }
.g-land { fill: var(--paper-2); }
.g-sky2 { fill: #DFE3DD; }
.g-road { fill: none; stroke: rgba(14, 23, 38, .26); stroke-width: 3px; }
.g-sand { fill: #EDEEE6; }
.g-sea { fill: rgba(21, 119, 189, .34); }
.g-wave { fill: none; stroke: rgba(255, 255, 255, .75); stroke-width: 1.5px; }
.g-peat { fill: rgba(14, 23, 38, .13); }
.g-terrace { fill: rgba(21, 119, 189, .13); stroke: rgba(14, 23, 38, .16); stroke-width: 1px; }
.g-river { fill: rgba(21, 119, 189, .3); }
.scene--city .g-canal { fill: rgba(21, 119, 189, .32); }
.scene--peat .g-canal { fill: none; stroke: rgba(14, 23, 38, .38); stroke-width: 2.5px; }
.scene--peat .g-canal.is-wet { stroke: var(--cobalt); stroke-width: 4.5px; }
.scene.is-drought .g-terrace { fill: rgba(14, 23, 38, .05); }
.scene.is-drought .g-river { fill: rgba(21, 119, 189, .12); }
.scene.is-drought .g-land, .scene.is-drought .g-hill { fill: #E7E5DC; }

.scene__sprites, .scene__event, .scene__hud { position: absolute; inset: 0; pointer-events: none; }
.scene__event { z-index: 3; }
.scene__hud { z-index: 6; }
.sp {
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  font-size: calc(var(--s, 1) * 4.2cqw);
  line-height: 1;
  color: #2C3746;
  transform: translate(-50%, -100%);
}
.sp > i { display: block; transform-origin: 50% 100%; transition: transform .7s var(--ease-out), opacity .45s ease, color .3s ease, filter .3s ease; }
.sp--plan { z-index: 2; color: var(--cobalt); }
.sp--plan.is-off:not(.is-preview), .sc-dike.is-off:not(.is-preview) { display: none; }
.sp--plan.is-preview > i, .sc-dike.is-preview > i { opacity: .35; }
.sp--plan.is-planned > i, .sc-dike.is-planned > i { opacity: .3; }
.sp--grow > i { transform: scale(var(--g, 1)); }
.sp--glow:not(.is-off):not(.is-planned):not(.is-preview) > i { filter: drop-shadow(0 0 .55cqw rgba(21, 119, 189, .9)); }
html.motion-ok .sp--drive { animation: sc-drive 9s ease-in-out infinite alternate; }
html.motion-ok .sp--drive:nth-child(odd) { animation-duration: 11s; animation-direction: alternate-reverse; }
@keyframes sc-drive { to { translate: 7cqw 0; } }
.sp.is-hit > i { transform: rotate(-12deg) translateY(4%); opacity: .42; }
.sp--sun > i { color: var(--ink-2); }
.sp--sun.is-hot > i { transform: scale(1.55); color: var(--ink); filter: drop-shadow(0 0 1.4cqw rgba(14, 23, 38, .28)); }
.sp.is-flash > i { animation: sc-flash .7s ease; }
@keyframes sc-flash { 35% { transform: scale(1.4); } }
.sc-dike { position: absolute; z-index: 2; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: calc(var(--w) * 1%); height: 2.6%; font-size: 4cqw; transform: translateY(-100%); }
.sc-dike > i { display: block; width: 100%; height: 100%; background: var(--cobalt); transform-origin: 50% 100%; box-shadow: 0 -.3cqw 0 var(--cobalt-deep) inset; }
.sc-ring { position: absolute; z-index: 1; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: 6cqw; height: 6cqw; margin: calc(var(--s, 1) * -2.1cqw - 3cqw) 0 0 -3cqw; border-radius: 50%; box-shadow: 0 0 0 2px var(--cobalt); pointer-events: none; }

/* Tag badges on the plan's objects (tag view) */
.scene.show-tags .sp--plan:not(.is-off)::after, .scene.show-tags .sc-dike:not(.is-off)::after {
  content: "";
  position: absolute;
  right: -.16em; top: -.16em;
  width: .36em; height: .36em;
  background: var(--cobalt);
}
.scene.show-tags [data-tag="a"]::after { background: var(--paper); box-shadow: inset 0 0 0 .07em var(--cobalt); }
.scene.show-tags [data-tag="c"]::after { background: linear-gradient(90deg, var(--cobalt) 50%, var(--paper) 50%); box-shadow: inset 0 0 0 .07em var(--cobalt); }

/* Emission smoke: three puffs per source; --k sets how thick it is */
.smoke { position: absolute; z-index: 1; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: 0; height: 0; opacity: var(--k); transition: opacity 1s ease; }
.smoke span { position: absolute; left: -1.9cqw; top: -1.9cqw; width: 3.8cqw; height: 3.8cqw; border-radius: 50%; background: rgba(70, 82, 97, .34); }
html.motion-ok .smoke span { animation: sc-puff 3.6s ease-out infinite; }
html.motion-ok .smoke span:nth-child(2) { animation-delay: -1.2s; }
html.motion-ok .smoke span:nth-child(3) { animation-delay: -2.4s; }
html.is-reduced .smoke span:nth-child(2) { transform: translate(.9cqw, -3.2cqw) scale(1.3); }
html.is-reduced .smoke span:nth-child(3) { transform: translate(1.8cqw, -6.4cqw) scale(1.7); opacity: .6; }
@keyframes sc-puff {
  0% { transform: translate(0, 0) scale(.5); opacity: 0; }
  18% { opacity: 1; }
  100% { transform: translate(2.2cqw, -10cqw) scale(2.1); opacity: 0; }
}

/* Climate events */
.ev-water { position: absolute; left: 0; right: 0; top: 0; height: 100%; background: rgba(21, 119, 189, .52); }
.ev-water::before { content: ""; position: absolute; left: 0; right: 0; top: -1.2cqw; height: 1.2cqw; background: radial-gradient(circle at 50% 100%, rgba(21, 119, 189, .52) .62cqw, transparent .66cqw) 0 0 / 2.4cqw 1.2cqw repeat-x; }
html.motion-ok .ev-water::before { animation: sc-waves 1.2s linear infinite; }
@keyframes sc-waves { to { background-position: 2.4cqw 0; } }
.ev-rain { position: absolute; inset: 0; background: repeating-linear-gradient(105deg, transparent 0 1.6cqw, rgba(21, 119, 189, .38) 1.6cqw 1.76cqw); }
html.motion-ok .ev-rain { animation: sc-rain .45s linear infinite; }
@keyframes sc-rain { to { background-position: -1cqw 4cqw; } }
.ev-haze { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(70, 82, 97, .45), rgba(70, 82, 97, .14) 70%, transparent); transition: opacity 1s ease; }
html.motion-ok .ev-haze { animation: sc-fade .9s ease both; }
.ev-haze.is-clearing { opacity: 0; }
.ev-dry { position: absolute; left: 0; right: 0; top: 46%; bottom: 14%; background: repeating-linear-gradient(35deg, transparent 0 2cqw, rgba(14, 23, 38, .2) 2cqw 2.16cqw), repeating-linear-gradient(-55deg, transparent 0 3cqw, rgba(14, 23, 38, .15) 3cqw 3.12cqw), rgba(241, 243, 239, .5); }
html.motion-ok .ev-dry { animation: sc-fade 1s ease both; }
.ev-dry.is-held { opacity: .35; }
@keyframes sc-fade { from { opacity: 0; } }
.sp--fire { z-index: 4; color: var(--ink); }
html.motion-ok .sp--fire > i { animation: sc-flicker .45s ease-in-out infinite alternate; }
@keyframes sc-flicker { to { transform: scale(1.08, .9); } }
.sp--shield { z-index: 5; color: var(--cobalt); }
.sp__label { position: absolute; left: 50%; top: 100%; margin-top: .4cqw; padding: .25cqw .9cqw; background: var(--cobalt); color: var(--on-cobalt); font: 700 max(10px, 1.15cqw)/1.25 var(--sans); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; transform: translateX(-50%); }

/* HUD: year chip and five dots */
.scene__year { position: absolute; left: 2.2cqw; top: 2.2cqw; padding: .6cqw 1.4cqw; background: var(--paper); box-shadow: inset 0 0 0 1px var(--ink); font: 400 max(17px, 2.5cqw)/1.1 var(--serif); }
.scene__dots { position: absolute; left: 2.2cqw; top: calc(2.2cqw + max(17px, 2.5cqw) * 1.1 + 2.2cqw); display: flex; gap: .7cqw; }
.scene__dots span { width: max(8px, 1.2cqw); height: max(8px, 1.2cqw); background: var(--paper); box-shadow: inset 0 0 0 1px var(--ink); transition: background-color .3s ease; }
.scene__dots span.is-on { background: var(--cobalt); box-shadow: none; }

/* ---------- Tag view: scene left (sticky), ledger right ---------- */
.tagv__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--gutter); align-items: start; margin-top: 24px; }
.tagv__stage { position: sticky; top: calc(var(--nav-h) + 16px); }
.tagv__body .ledger { margin-top: 0; }

/* ---------- Track view: wide scene, then meters and the log ---------- */
.trk__scene { max-width: 1080px; margin-top: 22px; }
.trk__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 20px var(--gutter); max-width: 1080px; margin-top: 26px; align-items: start; }
.trk__meters { display: grid; gap: 22px; }
.trk__logwrap .tlog { margin-top: 0; }
.trk__skip { margin-top: 10px; font-size: 15px; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .regions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
  .tagv__grid { grid-template-columns: minmax(0, 1fr); }
  .tagv__stage { position: static; max-width: 760px; }
}
@media (max-width: 900px) {
  .plan__grid { grid-template-columns: minmax(0, 1fr); }
  .plan__stage {
    position: sticky;
    top: 0;
    z-index: 5;
    margin: 0 calc(var(--margin) * -1);
    padding: 10px var(--margin) 12px;
    background: var(--paper);
    box-shadow: 0 1px 0 var(--rule-strong);
    transition: top .45s var(--ease-out);
  }
  body:has(.masthead:not(.is-hidden)) .plan__stage { top: var(--nav-h); }
  .plan__stage .scene { max-height: 30vh; aspect-ratio: auto; height: min(30vh, calc((100vw - 2 * var(--margin)) * 9 / 16)); }
  .psum { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) auto; align-items: center; gap: 8px 14px; padding: 0; background: none; }
  .psum__left { font-size: 2.2rem; }
  .psum__of { font-size: 11.5px; max-width: 6em; }
  .psum .meter__head { flex-direction: column; align-items: flex-start; gap: 2px; font-size: 12px; }
  .psum .meter__val b { font-size: 1.2rem; }
  .psum .meter__tg { font-size: 11.5px; }
  .psum__lock { grid-column: auto; width: auto; min-height: 44px; padding: 0 14px; font-size: 14px; }
  .psum__hint { display: none; }
  .trk__grid { grid-template-columns: minmax(0, 1fr); }
  .trk__meters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .planner__steps li { padding-right: 6px; font-size: 12.5px; }
  .regions { grid-template-columns: minmax(0, 1fr); }
  .region { flex-direction: row; }
  .region__media { flex: 0 0 36%; aspect-ratio: auto; min-height: 150px; }
  .region__body { padding: 14px 14px 16px; gap: 6px; }
  .region__name { font-size: 1.35rem; }
  .region__desc { font-size: 14.5px; }
  .psum { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); }
  .psum__lock { grid-column: 1 / -1; width: 100%; }
  .act { grid-template-columns: 40px minmax(0, 1fr); padding-right: 0; }
  .act__icon { width: 40px; height: 40px; font-size: 20px; }
  .act__side { grid-column: 2; flex-direction: row; align-items: center; }
  .act.is-on { padding-left: 10px; }
  .ledger__row, .ledger__total { grid-template-columns: minmax(0, 1fr) auto; }
  .ledger__tag { grid-column: 1 / -1; padding-left: 32px; }
  .ledger__total .ledger__tag { display: none; }
  .tlog__item { grid-template-columns: 64px 20px minmax(0, 1fr); gap: 8px; font-size: 15px; }
  .report__checks li { flex-wrap: wrap; }
  .real__list { grid-template-columns: minmax(0, 1fr); }
}