/* check.php: the screening tool. Stepper, map, result sheet, comparison, printed report. */

.screening-stepper {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 1.6rem 0 1rem;
  padding: 0;
  list-style: none;
}

.screening-stepper li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
  color: var(--color-text-muted);
  font-size: 0.72rem;
  line-height: 1.2;
}

/* The rail runs behind the dots, so each step draws the span reaching back to the one before it. */
.screening-stepper li::before {
  content: "";
  position: absolute;
  top: 10px;
  right: 50%;
  width: 100%;
  height: 2px;
  background: var(--color-border);
}

.screening-stepper li:first-child::before { display: none; }
.screening-stepper li.is-done::before,
.screening-stepper li.is-current::before { background: var(--color-action); }
.screening-stepper li.is-current,
.screening-stepper li.is-done { color: var(--color-text); font-weight: 650; }

.stepper-dot {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 2px solid var(--color-border-strong);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.is-done .stepper-dot,
.is-current .stepper-dot { border-color: var(--color-action); background: var(--color-action); color: var(--color-action-text); }
.is-current .stepper-dot { box-shadow: 0 0 0 4px rgba(25, 70, 24, 0.16); }

#map {
  height: min(64vh, 42rem);
  min-height: 22rem;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 22px;
  background: var(--color-surface-sunken);
  box-shadow: var(--shadow-card);
}

.leaflet-control-zoom,
.leaflet-control-layers {
  overflow: hidden;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-control) !important;
  background: var(--color-surface);
  box-shadow: var(--shadow-control) !important;
}

.leaflet-bar a,
.leaflet-touch .leaflet-bar a {
  width: 2.75rem;
  height: 2.75rem;
  line-height: 2.65rem;
  border-bottom: 1px solid var(--color-border) !important;
  background: var(--color-surface) !important;
  color: var(--color-text) !important;
  font-weight: 700;
}

.leaflet-bar a:last-child { border-bottom: 0 !important; }
.leaflet-bar a:hover { background: var(--color-surface-selected) !important; color: var(--color-text-link) !important; }
.leaflet-control-layers-toggle,
.leaflet-touch .leaflet-control-layers-toggle { width: 2.75rem; height: 2.75rem; background-size: 1.25rem 1.25rem; }
.leaflet-control-layers-expanded { padding: 0.7rem; color: var(--color-text); font-size: 0.78rem; }
.leaflet-control-attribution { padding: 0.15rem 0.4rem; border-radius: 8px 0 0; color: var(--color-text-muted); font-size: 0.65rem; }

.site-marker-wrap { border: 0; background: transparent; }

.site-marker {
  position: relative;
  display: block;
  width: 1.75rem;
  height: 1.75rem;
  border: 4px solid var(--color-surface);
  border-radius: 50%;
  background: var(--color-map-site);
  box-shadow: 0 0 0 6px rgba(138, 117, 102, 0.24), 0 7px 14px rgba(35, 30, 18, 0.22);
}

.site-marker-wrap.is-second .site-marker {
  background: var(--color-map-site-alt);
  box-shadow: 0 0 0 6px rgba(86, 88, 40, 0.2), 0 7px 14px rgba(35, 30, 18, 0.22);
}

/* The letters only earn their place once there are two pins to tell apart. */
.map-panel.two-sites .site-marker::after {
  content: "A";
  position: absolute;
  inset: 0;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.25rem;
  text-align: center;
}

.map-panel.two-sites .site-marker-wrap.is-second .site-marker::after { content: "B"; }

#layer-status { min-height: 1.4rem; }

#score-panel {
  margin: 1.25rem 0 1.5rem;
  padding: clamp(1.1rem, 3vw, 1.7rem);
  border: 1px solid var(--color-border);
  border-radius: 22px;
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.score-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-border-subtle);
}

.score {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0;
}

.score b {
  display: inline-block;
  color: var(--color-text);
  font-family: var(--font-serif);
  font-size: clamp(4rem, 16vw, 6rem);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 0.86;
  transition: color 220ms ease, transform 220ms ease;
}

.score span { color: var(--color-text-muted); font-size: 0.95rem; }
.score small { display: block; max-width: 24ch; margin-top: 0.2rem; color: var(--color-text-muted-on-warm); font-size: 0.74rem; font-weight: 650; line-height: 1.3; }
.score b.is-counting { color: var(--color-text-muted); }
.score b.has-landed { animation: score-land 420ms cubic-bezier(0.22, 1.2, 0.3, 1) both; }

#penalties {
  margin: 1rem 0;
  padding: 0;
  list-style: none;
}

#penalties li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: start;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--color-border-subtle);
}

#penalties li:first-child { border-top: 1px solid var(--color-border-subtle); }
#penalties li > span:first-child { min-width: 0; }
#penalties li b { display: block; color: var(--color-text); font-size: 1rem; }
#penalties .note { display: block; color: var(--color-text-muted); font-size: 0.82rem; }
#penalties .source {
  display: block;
  margin-top: 0.2rem;
  color: var(--color-text-muted);
  font-size: 0.72rem;
  font-style: italic;
}

#penalties li.is-unassessed {
  margin-inline: -0.6rem;
  padding-inline: 0.6rem;
  border-bottom-color: var(--color-caution);
  background: var(--color-caution-surface);
}

#penalties li.is-unassessed .note,
#penalties li.is-unassessed .cut { color: var(--color-caution-text); }

#penalties .cut { color: var(--color-silt-text); font-family: var(--font-mono); font-size: 0.95rem; font-variant-numeric: tabular-nums; font-weight: 800; white-space: nowrap; }

#score-caveat:not(:empty) {
  margin: 1rem 0;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--color-caution);
  border-radius: var(--radius-control);
  background: var(--color-caution-surface);
  color: var(--color-caution-text);
  font-size: 0.88rem;
  font-weight: 650;
}

#find-better { margin-top: 0.2rem; }

#alternatives { margin-top: 1rem; }

#alternatives h3 {
  margin: 0 0 0.35rem;
  color: var(--color-text-muted);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.alternatives-hint { margin: 0 0 0.7rem; color: var(--color-text-muted); font-size: 0.8rem; line-height: 1.45; }

.alternative {
  display: block;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 0.7rem 0.4rem 0.75rem;
  border: 0;
  border-top: 1px solid var(--color-border-subtle);
  border-radius: 0;
  background: none;
  color: var(--color-text);
  text-align: left;
  box-shadow: none;
  animation: panel-in 300ms ease both;
}

.alternative:hover:not(:disabled) { background: var(--color-surface-selected); color: var(--color-text); }

/* The best of the three carries the keel line rather than a tinted box of its own. */
.alternative:first-of-type { padding-left: 0.75rem; box-shadow: inset 3px 0 0 var(--color-action); }
.alternative b { display: block; color: var(--color-text); font-family: var(--font-serif); font-weight: 600; font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.alternative-delta { display: block; margin-top: 0.15rem; color: var(--color-positive); font-size: 0.84rem; font-weight: 700; }
.alternative p { margin: 0.35rem 0 0; color: var(--color-text-muted-on-warm); font-size: 0.88rem; }
.alternative:nth-of-type(2) { animation-delay: 60ms; }
.alternative:nth-of-type(3) { animation-delay: 120ms; }

.save-check {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border-subtle);
}

.save-check button { width: 100%; }
.save-prompt { margin: 1rem 0 0; color: var(--color-text-muted); font-size: 0.9rem; }
.hint { max-width: 70ch; margin: 0; color: var(--color-text-muted); font-size: 0.88rem; }

.candidate-pin {
  background: var(--mangrove-olive);
  border: 2px solid var(--ivory-surface);
  border-radius: 50%;
  color: var(--ivory-ground);
  font-weight: 700;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  line-height: 34px;
  text-align: center;
  box-shadow: 0 0 0 1px rgba(86, 88, 40, 0.55), var(--shadow-control);
  cursor: pointer;
}

/* Leaflet stacks markers by latitude, which can bury the best score behind a worse one. */
.candidate-best {
  background: var(--deep-mangrove);
  border-width: 3px;
  border-color: var(--silt-gold);
  line-height: 32px;
  color: var(--color-action-text);
  box-shadow: 0 0 0 2px rgba(134, 112, 50, 0.35), var(--shadow-card);
  z-index: 640 !important;
}

.candidate-pin:hover,
.candidate-pin:focus-visible {
  transform: scale(1.12);
  box-shadow: 0 4px 14px rgba(35, 30, 18, 0.3);
}

/* the lift alone left a tabbing user nothing to see, and the shadow above drops the
   ring the resting pin carries, so the keyboard state draws its own */
.candidate-pin:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.advice {
  margin: 0.6rem 0 0;
  color: var(--color-text);
  font-size: 1.02rem;
  font-weight: 650;
  line-height: 1.35;
}

.advice-incomplete { color: var(--color-caution-text); }

.comparison h3 {
  margin: 0.75rem 0 0.4rem;
  color: var(--color-text-muted);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.compare-gains li,
.compare-losses li {
  position: relative;
  margin-bottom: 0.35rem;
  padding-left: 0.95rem;
  font-size: 0.89rem;
  line-height: 1.45;
}

.compare-gains li::before,
.compare-losses li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-map-site);
}

.next-step { display: grid; gap: 0.55rem; margin: 0.85rem 0 0; }

/* A disclosure that opens a panel in place, so it is written as a link and not as a third
   button competing with the two that actually do something. */
.linky {
  justify-self: start;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--color-text-link);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.linky:hover:not(:disabled) { background: none; color: var(--color-action-hover); }

.score-project { margin: 0.1rem 0 0; color: var(--color-text-muted); font-size: 0.88rem; }

.result-section {
  margin-top: 1.1rem;
  padding-top: 0.95rem;
  border-top: 1px solid var(--color-border);
}

.section-label {
  margin: 0 0 0.35rem;
  color: var(--color-text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.score-band { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem 0.7rem; margin: 0.5rem 0 0; }
.score-band .score-project { margin: 0; }

#why-panel { margin-top: 0.75rem; }
#why-panel summary { cursor: pointer; font-weight: 600; padding: 0.5rem 0; min-height: 44px; display: flex; align-items: center; }
#why-panel summary:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }
#why-panel .hint { margin-top: 0.6rem; }

.comparison {
  margin-top: 0.9rem;
  padding: 0.9rem;
  background: var(--color-surface-sunken);
  border-radius: var(--radius-card);
}

#reduce-advice { margin: 0.65rem 0 0; padding: 0; list-style: none; }
#reduce-advice > li { padding: 0.6rem 0; border-top: 1px solid var(--color-border-subtle); }
#reduce-advice > li:first-child { border-top: 0; padding-top: 0; }
#reduce-advice > li > b { display: block; color: var(--color-text); }

.adjustment-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; margin-top: 0.8rem; }
.adjustment-pair > div { min-width: 0; padding: 0.65rem; border: 1px solid var(--color-border-strong); background: var(--color-surface); }
.adjustment-pair span { display: block; color: var(--color-text-muted); font-size: 0.78rem; font-weight: 700; }
.adjustment-pair b { display: block; margin-top: 0.1rem; color: var(--color-text); font-family: var(--font-serif); font-size: 1.35rem; font-variant-numeric: tabular-nums; line-height: 1.1; }
#adjustment-explanation { margin-top: 0.75rem; }
#adjustment-changes h3 { margin-top: 0.8rem; }

.compare-gains,
.compare-losses { margin: 0; padding: 0; list-style: none; }
.compare-gains li::before { background: var(--color-positive); }
.compare-losses li::before { background: var(--color-negative); }
.compare-summary { margin: 0.65rem 0 0; color: var(--color-text); font-size: 0.92rem; font-weight: 700; }
.compare-note { margin: 0.6rem 0 0; color: var(--color-text-muted); font-size: 0.86rem; }

#site-compare-body > h3:first-child { margin-top: 0; }

.compare-pair {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.3rem 0.85rem;
  margin: 0.15rem 0 0;
  align-items: baseline;
}

.compare-pair dt { color: var(--color-text-muted); font-size: 0.85rem; font-weight: 700; }
/* Wrapping so a long coordinate pair drops below the score rather than squeezing it. */
.compare-pair dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.6rem; margin: 0; }
.compare-pair dd b { color: var(--color-text); font-family: var(--font-serif); font-size: 1.45rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.1; }
.compare-pair dd span { color: var(--color-text-muted); font-family: var(--font-mono); font-size: 0.75rem; }

#compare-site { width: 100%; }

/* Side by side these wrap onto two lines even at 375. */
.compare-actions { display: grid; gap: 0.5rem; margin: 0.8rem 0 0; }

.project-picker { display: grid; gap: 0.6rem; align-content: start; border: 0; padding: 0 0.3rem 0 0; margin: 0; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.project-picker legend { padding: 0; font-weight: 600; font-size: 0.85rem; margin-bottom: 0.45rem; }

.project-option {
  position: relative;
  display: grid;
  grid-template-columns: 2.4rem 1fr 1.4rem;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 0.85rem;
  min-height: 62px;
  padding: 0.75rem 0.9rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.project-option:active { background: var(--color-surface-selected); }

.project-option input { position: absolute; opacity: 0; width: 0; height: 0; }

.project-glyph {
  grid-column: 1;
  grid-row: 1 / 3;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0.45rem;
  border-radius: 12px;
  background: var(--color-surface-sunken);
  fill: var(--color-action);
  transition: background 160ms ease, fill 160ms ease;
}

.project-name { grid-column: 2; grid-row: 1; font-weight: 650; color: var(--color-text); line-height: 1.25; }
.project-note { grid-column: 2; grid-row: 2; font-size: 0.78rem; color: var(--color-text-muted); line-height: 1.3; }

.project-tick {
  grid-column: 3;
  grid-row: 1 / 3;
  width: 1.4rem;
  height: 1.4rem;
  border: 2px solid var(--color-border-strong);
  border-radius: 50%;
  transition: border-color 160ms ease, background 160ms ease;
}

.project-option:hover { border-color: var(--color-border-strong); transform: translateY(-1px); }

.project-option:has(input:checked) { border-color: var(--color-action); background: var(--color-surface-selected); }
.project-option:has(input:checked) .project-glyph { background: var(--color-action); fill: var(--color-action-text); }
.project-option:has(input:checked) .project-tick { border-color: var(--color-action); background: var(--color-action); }

.project-option:has(input:checked) .project-tick::after {
  content: "";
  display: block;
  width: 0.32rem;
  height: 0.62rem;
  margin: 0.16rem auto;
  border: solid var(--color-action-text);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.project-option:has(input:focus-visible) { outline: 2px solid var(--color-focus-ring); outline-offset: 1px; }

.site-readout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 0.3rem 0.6rem;
  margin: 0;
  padding: 0.5rem 0.7rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  font-size: 0.9rem;
}

.site-readout .caption { grid-column: 1 / -1; margin: 0; font-weight: 600; font-size: 0.8rem; white-space: nowrap; }

.coord-field { display: flex; align-items: center; gap: 0.4rem; min-height: 44px; min-width: 0; }
.coord-field span { color: var(--color-text-muted); font-size: 0.72rem; font-weight: 600; }
.coord-field input {
  flex: 1;
  min-width: 0;
  padding: 0 0.6rem;
  border: 0;
  background: none;
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: 0.85rem;
}

.coord-field input::placeholder { color: var(--color-text-muted); }
.coord-field input:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 3px; border-radius: 4px; }
.site-readout:focus-within { border-color: var(--color-action); }

body:has(.check-shell) {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

body:has(.check-shell) > .header {
  flex: none;
  grid-template-columns: auto minmax(0, 1fr);
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
}

body:has(.check-shell) .tag { display: none; }
body:has(.check-shell) .nav { justify-self: end; }

/* The tool keeps the whole height; the footer only returns on the other pages. */
body:has(.check-shell) > .footer { display: none; }

.check-shell {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: 74rem;
  margin: 0 auto;
  padding: 0.7rem max(1rem, env(safe-area-inset-right)) 1rem max(1rem, env(safe-area-inset-left));
  gap: 0.7rem;
  overflow: hidden;
}

.check-shell .screening-stepper { flex: none; margin: 0; }
.check-shell h1 { font-size: clamp(1.5rem, 5.5vw, 2rem); line-height: 1.15; }
.check-shell .lede { font-size: 0.92rem; }

.panel {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  opacity: 0;
  animation: panel-in 320ms ease forwards;
}

.panel.is-active { opacity: 1; }
.panel[hidden] { display: none; }
.panel h1 { margin: 0; }
.panel h1:focus { outline: none; }
.panel .lede { margin: 0; }
.panel-actions { display: flex; gap: 0.6rem; margin: auto 0 0; flex: none; }
.panel-actions button { flex: 1; }

@keyframes panel-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

@keyframes score-land {
  0% { transform: scale(1.06); }
  60% { transform: scale(0.99); }
  100% { transform: none; }
}

.map-panel { position: relative; }

.map-stage {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
}

.map-aside {
  display: flex;
  flex-direction: column;
  flex: none;
  gap: 0.55rem;
  min-width: 0;
}

.map-legend {
  position: absolute;
  left: 0.55rem;
  bottom: 1.75rem;
  z-index: 1001;
  max-width: min(19rem, calc(100% - 1.1rem));
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-control);
  background: rgba(255, 254, 247, 0.95);
  box-shadow: var(--shadow-control);
  font-size: 0.78rem;
}

.map-legend summary {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0 0.75rem;
  color: var(--color-text-muted-on-warm);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  list-style: none;
  cursor: pointer;
}

.map-legend summary::-webkit-details-marker { display: none; }

.map-legend summary::after {
  content: "";
  width: 0.42rem;
  height: 0.42rem;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: translateY(-2px) rotate(45deg);
}

.map-legend[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.map-legend summary:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }

.legend-body { padding: 0 0.75rem 0.7rem; }

.legend-head {
  margin: 0.2rem 0 0.35rem;
  color: var(--color-text);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.legend-head + ul { margin-bottom: 0.7rem; }

.map-legend ul { display: grid; gap: 0.3rem; margin: 0; padding: 0; list-style: none; }

.map-legend li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-text-muted-on-warm);
  font-size: 0.76rem;
  line-height: 1.25;
}

.map-legend i { flex: none; width: 14px; height: 14px; border-radius: 3px; }
.map-legend .verdict { flex: none; margin: 0; font-size: 0.7rem; }

/* The line layers get a line and the area layers get a patch, so the key looks like what
   it stands for. Prefixed because the shared swatch rule above carries a type selector. */
.map-legend .key-mangroves { background: #6f8f3f; box-shadow: inset 0 0 0 1px var(--deep-mangrove); }
.map-legend .key-builtup { background: #cbb8a6; box-shadow: inset 0 0 0 1px var(--river-clay); }
.map-legend .key-waterways { height: 3px; border-radius: 2px; background: var(--water-slate); }
.map-legend .key-coastline { height: 3px; border-radius: 2px; background: var(--forest-ink); }
.map-legend .key-roads { height: 3px; border-radius: 2px; background: #a3927b; }
.map-legend .key-site { border-radius: 50%; background: var(--color-map-site); box-shadow: 0 0 0 2px var(--ivory-surface), 0 0 0 3px rgba(138, 117, 102, 0.45); }
.map-legend .key-candidate { border-radius: 50%; background: var(--mangrove-olive); box-shadow: 0 0 0 2px var(--ivory-surface), 0 0 0 3px var(--deep-mangrove); }
.map-legend .key-route { height: 3px; border-radius: 0; background: repeating-linear-gradient(to right, var(--river-clay) 0 5px, transparent 5px 8px); }

.map-panel #map {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  border-radius: var(--radius-card);
  box-shadow: 0 0 0 1px var(--color-map-frame);
}

.map-hint { margin: 0; font-size: 0.85rem; color: var(--color-text-muted); }
.map-panel .site-readout { flex: none; }
.map-panel .status:empty { display: none; margin: 0; }

.map-panel.sheet-open .map-hint,
.map-panel.sheet-open .site-readout,
.map-panel.sheet-open .panel-actions,
.map-panel.sheet-open .map-legend,
.map-panel.sheet-open .leaflet-control-container { opacity: 0; pointer-events: none; transition: opacity 200ms ease; }

.map-panel.sheet-open:has(.result-sheet.is-comparing) .leaflet-control-container { opacity: 1; pointer-events: auto; }

.map-panel.sheet-open #map { flex: 1 1 auto; }

.result-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 64%;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--color-surface);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  box-shadow: var(--shadow-sheet);
  padding: 0.5rem 1.1rem calc(1.1rem + env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform 380ms cubic-bezier(0.22, 0.9, 0.28, 1);
  z-index: 1200;
}

.result-sheet.is-up { transform: none; }
.result-sheet.is-comparing { max-height: 52%; }
.result-sheet.is-tall { max-height: 94%; }
.result-sheet .score-heading { flex-direction: column; align-items: stretch; gap: 0; margin-bottom: 0.7rem; }
.result-sheet .score { margin: 0; }

.sheet-grip {
  display: block;
  width: 100%;
  padding: 0.45rem 0 0.7rem;
  border: 0;
  border-radius: 10px;
  background: none;
  box-shadow: none;
  cursor: pointer;
}

.sheet-grip::before {
  content: "";
  display: block;
  width: 40px;
  height: 4px;
  margin: 0 auto;
  border-radius: var(--radius-pill);
  background: var(--color-border-strong);
  transition: width 160ms ease, background 160ms ease;
}

/* The shared button hover paints the action colour across the whole sheet. Only the pill moves. */
.sheet-grip:hover:not(:disabled) { background: none; }
.sheet-grip:hover::before { width: 54px; background: var(--color-text-muted); }
.sheet-grip:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }

.metric-gauge {
  overflow: hidden;
  height: 6px;
  margin: 0.55rem 0 0.7rem;
  border-radius: var(--radius-pill);
  background: var(--color-surface-sunken);
}

.metric-gauge span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--color-text-muted);
  transition: width 780ms cubic-bezier(0.22, 0.9, 0.28, 1), background 220ms ease;
}

.metric-gauge .gauge-low { background: var(--color-positive); }
.metric-gauge .gauge-moderate { background: var(--color-caution); }
.metric-gauge .gauge-high { background: var(--color-negative); }

/* Three of these now, and they will not sit on one row on a phone. */
.sheet-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 0.6rem; margin: 0.9rem 0 0; }

/* Tells you the sheet carries more than fits, and gets out of the way once it is opened out.
   Only on the phone layout; past 48rem the sheet is a floating card and a full width fade
   would just smear across the map. */
@media (max-width: 47.99rem) {
  .map-panel:has(.result-sheet.is-up)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 42px;
    background: linear-gradient(rgba(255, 254, 247, 0), var(--color-surface));
    pointer-events: none;
    z-index: 1201;
    transition: opacity 200ms ease;
  }

  .map-panel:has(.result-sheet.is-tall)::after { opacity: 0; }
}

@media (min-width: 48rem) {
  .check-shell { padding: 1rem 2rem 1.5rem; }
  /* Pinning the actions to the bottom is for thumb reach on a phone; on a desktop it just
     leaves a gap the width of the screen between the cards and the button. The panel prefix
     is there to outrank the base rule, which is declared further up the file. */
  .panel .project-picker { flex: 0 1 auto; }
  .panel .panel-actions { max-width: 26rem; margin-top: 0.6rem; margin-left: auto; margin-right: auto; width: 100%; }
  /* The choose panel is short and the shell is tall, so its content used to sit at the top
     with a couple of hundred pixels of nothing under the button. */
  .panel[data-step="1"] { justify-content: center; }
  /* Three short labels stretched across a 1440 screen read as a filled row rather than a
     choice, so the step keeps a column width and the button lines up with its left edge. */
  .panel[data-step="1"] > * { max-width: 62rem; }
  .panel[data-step="1"] .project-picker { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .panel[data-step="1"] .project-option { grid-template-rows: auto auto 1fr; align-content: start; }
  .panel[data-step="1"] .panel-actions { max-width: 14rem; margin-left: 0; margin-right: 0; }
}

/* Past this width the result stops being a sheet that covers the map and becomes a panel
   standing beside it, so both are readable at once and nothing has to be dismissed to
   look at the ground again. */
@media (min-width: 64rem) {
  .check-shell { max-width: 96rem; padding-bottom: 1.25rem; }

  .map-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 25rem;
    grid-template-rows: minmax(0, 1fr);
    column-gap: 1.1rem;
  }

  .map-stage { grid-column: 1; }
  .map-aside { grid-column: 2; min-height: 0; gap: 0.6rem; }

  .map-panel .panel-actions { max-width: none; margin: 0.4rem 0 0; }
  .map-panel .site-readout { grid-template-columns: 1fr 1fr; }

  /* Relative rather than static: the sketch layer positions its drawing against the
     nearest positioned ancestor, and static handed it the whole map panel to draw on. */
  .map-aside #score-panel { margin: 0; }

  .result-sheet {
    position: relative;
    flex: 1 1 auto;
    width: auto;
    min-height: 0;
    max-height: none;
    padding: 1.1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    transform: none;
    transition: none;
  }

  .result-sheet.is-comparing,
  .result-sheet.is-tall { max-height: none; }

  /* The grip drags a sheet. A docked panel has nowhere to drag to. */
  .sheet-grip { display: none; }

  .map-panel.sheet-open .map-hint,
  .map-panel.sheet-open .site-readout,
  .map-panel.sheet-open .panel-actions,
  .map-panel.sheet-open .map-legend,
  .map-panel.sheet-open .leaflet-control-container { opacity: 1; pointer-events: auto; }

  /* Placing instructions have done their job by the time a score is on screen, and the
     panel needs the height more on a 768 tall laptop. */
  .map-panel.sheet-open .map-hint { display: none; }

  .next-step { gap: 0.5rem; }
}

@media (max-width: 640px) {
  .score-heading { align-items: flex-start; flex-direction: column; }
  #find-better { width: 100%; }}

@media (max-width: 420px) {
  #map { min-height: 20rem; height: 56vh; border-radius: 16px; }
  #score-panel { border-radius: 16px; padding: 1rem; }
  .score b { font-size: clamp(3.8rem, 20vw, 5rem); }}

/* The picker is a height limited flex item, so its implicit auto rows come out equal and
   the two longer notes get squashed behind the card under them. Only bites once the note
   runs to three lines, which is below 340px. */
@media (max-width: 21rem) {
  .project-picker { grid-auto-rows: min-content; }
}

/* On a 568 tall screen the header nav wrapped to two rows and the hint to three lines,
   which left the map 68px and nothing to aim at. Keyed to height, not width, so a 667
   tall phone keeps the layout it already had. Nav links come down from 33px to 29px,
   which is the price of a map you can actually place a site on. */
@media (max-height: 600px) {
  .header { gap: 0.3rem 0.7rem; padding-top: 0.45rem; padding-bottom: 0.45rem; }
  .nav a { min-height: 36px; font-size: 0.82rem; }
  .map-hint { font-size: 0.82rem; }
}

@media (prefers-reduced-motion: reduce) {
  .panel, .alternative, .score b.has-landed { animation: none; opacity: 1; transform: none; }
  .result-sheet, .metric-gauge span, .stepper-dot { transition: none; }
  .project-option, .project-glyph, .project-tick { transition: none; }
  .project-option:hover { transform: none; }}

/* The report is a document, so it is drawn as one: a sheet of paper with an engraved
   double frame, a letterhead and a filing date. The same rules serve the screen and the
   printer, and print drops the sheet furniture because the page margin owns the edges. */

.report-view {
  position: fixed;
  inset: 0;
  z-index: 2000;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 0 1rem 3rem;
  background: #e9e6dc;
}

body.report-open { overflow: hidden; }

.report-bar {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  margin: 0 auto;
  padding: 0.8rem 0;
  max-width: 8.5in;
  background: #e9e6dc;
}

.report-bar button { width: auto; min-height: 44px; }

.page {
  position: relative;
  width: 8.5in;
  max-width: 100%;
  margin: 0 auto;
  padding: 0.8in 0.75in;
  background: #fff;
  box-shadow: 0 2px 14px rgba(35, 30, 18, 0.16);
  color: var(--forest-ink);
  font-family: var(--font-serif);
  font-size: 11.5px;
  line-height: 1.5;
}

.page::before,
.page::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border: 1px solid var(--forest-ink);
}

.page::before { inset: 0.26in; }
.page::after { inset: 0.31in; border-width: 0.5px; }

.print-head { position: relative; padding-top: 52px; text-align: center; }

.print-mark {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 8px;
  margin: 0;
  text-align: left;
}

.print-mark img { grid-row: 1 / 3; width: 32px; height: 32px; }
.print-mark b { align-self: end; font-family: var(--font-serif); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; line-height: 1; }

/* The wordmark is the letterhead now, sized off its own 6589 by 788 box. */
.print-mark b svg { display: block; width: auto; height: 13px; color: var(--forest-ink); }

.print-mark span {
  align-self: start;
  margin-top: 3px;
  color: var(--color-text-muted);
  font-family: var(--font-serif);
  font-size: 8.5px;
  font-style: italic;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
}

.print-filed {
  position: absolute;
  top: 2px;
  right: 0;
  margin: 0;
  color: var(--color-text-muted);
  font-family: var(--font-sans);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

#print-summary h1 {
  margin: 0;
  max-width: none;
  color: var(--forest-ink);
  font-family: var(--font-serif);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.print-stamp {
  margin: 4px 0 0;
  color: var(--forest-ink);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.print-rule {
  height: 1px;
  margin: 14px 0 0;
  background: linear-gradient(to right, transparent, var(--color-border) 14%, var(--color-border) 86%, transparent);
}

.print-heroes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
  margin: 16px 0 0;
}

.print-hero { min-width: 0; padding: 9px 12px 10px; border: 1px solid var(--color-border-strong); }

.print-hero .l { margin: 0; font-family: var(--font-sans); font-size: 7.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--color-text-muted); }
.print-hero .v { display: flex; align-items: baseline; gap: 5px; margin: 3px 0 0; font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.print-hero .v span { font-size: 11px; font-weight: 400; color: var(--color-text-muted); }
.print-hero .print-coord { margin: 6px 0 0; }

.print-facts-line { margin: 9px 0 0; color: var(--color-text-muted); font-size: 9.5px; }

.print-block { margin-top: 18px; }

#print-summary h2 {
  margin: 0 0 7px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--forest-ink);
  color: var(--forest-ink);
  font-family: var(--font-serif);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  break-after: avoid;
}

.print-outcome p { font-size: 12.5px; }

#print-summary p { margin: 0 0 7px; }

.print-coord { font-family: var(--font-sans); font-size: 10px; font-weight: 400; color: var(--color-text-muted); }

.print-tag {
  margin-left: auto;
  align-self: center;
  padding: 1px 8px;
  border: 1px solid;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.print-tag.tag-low { background: var(--color-positive-surface); border-color: #b4c6b0; color: var(--color-positive); }
.print-tag.tag-moderate { background: var(--color-caution-surface); border-color: var(--color-caution); color: var(--color-caution-text); }
.print-tag.tag-high { background: var(--color-negative-surface); border-color: #e6b7ab; color: var(--color-negative-text); }

.print-table { width: 100%; border-collapse: collapse; margin: 0; font-size: 10.5px; }
.print-table thead { display: table-header-group; }
.print-table tr { break-inside: avoid; }
.print-table th,
.print-table td { padding: 5px 10px 5px 0; text-align: left; vertical-align: middle; border: 0; }
.print-table thead th { border-top: 1px solid var(--forest-ink); border-bottom: 1px solid var(--forest-ink); font-family: var(--font-sans); font-size: 8px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); }
.print-table tbody tr { border-bottom: 1px solid var(--color-border-subtle); }
.print-table td:last-child,
.print-table th:last-child { padding-right: 0; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.print-table tfoot th,
.print-table tfoot td { border-top: 1px solid var(--forest-ink); font-weight: 700; }

.bar-head,
.print-barcell { width: 16%; }
.print-barcell span { display: block; height: 4px; background: var(--color-negative); }

.print-changes { margin: 0; padding: 0; list-style: none; }
.print-changes li { position: relative; margin-bottom: 3px; padding-left: 15px; }
.print-changes li::before { content: ""; position: absolute; left: 0; top: 5px; width: 6px; height: 6px; border-radius: 50%; }
.print-changes .up::before { background: var(--color-positive); }
.print-changes .down::before { background: var(--color-negative); }
.print-changes .same::before { background: var(--color-text-muted); }

.print-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 0; font-size: 10.5px; }
.print-facts dt { font-weight: 700; }
.print-facts dd { margin: 0; color: var(--color-text); }

.print-warning { margin: 14px 0 0; padding: 6px 9px; border: 1px solid var(--color-caution); background: var(--color-caution-surface); color: var(--color-caution-text); font-weight: 700; }

.print-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin-top: 22px; padding-top: 6px; border-top: 1px solid var(--forest-ink); color: var(--color-text-muted); font-size: 9px; }

/* A letter sheet does not fit a phone, so below the tablet break the document stops
   pretending to be one and just uses the width it has. Screen only: a Letter content box
   is 7.4in wide, which is inside this breakpoint, so the printer would take the phone
   layout as well. */
@media screen and (max-width: 47.99rem) {
  .report-view { padding: 0 0.6rem 2rem; }
  .page { padding: 1.5rem 1.15rem; font-size: 12.5px; }
  .page::before { inset: 0.45rem; }
  .page::after { inset: 0.68rem; }
  /* On a phone the finding needs the width more than the bar does. */
  .bar-head,
  .print-barcell { display: none; }
}

@media print {
  .check-shell .panel,
  .screening-stepper,
  .report-bar { display: none; }

  .check-shell { display: block; height: auto; max-width: none; padding: 0; overflow: visible; }

  /* Printed whether or not the reader opened the overlay first. The frame is drawn on
     paper too, so the page margin is pulled in to leave room for it. It draws once, which
     is correct only while the whole report lands on a single sheet. */
  .report-view { display: block; position: static; padding: 0; background: none; overflow: visible; }
  .page { width: auto; max-width: none; margin: 0; padding: 0.3in; box-shadow: none; font-size: 9.5px; }
  .page::before { inset: 0.06in; }
  .page::after { inset: 0.1in; }

  .print-barcell span,
  .print-changes li::before,
  .print-tag { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  #print-summary { orphans: 3; widows: 3; }
  .print-block,
  .print-heroes,
  .print-head,
  .print-table { break-inside: avoid; }
  .print-head { padding-top: 44px; }
  #print-summary h1 { font-size: 18px; }
  .print-block { margin-top: 13px; }
  .print-table { font-size: 8.5px; }
  .print-table th,
  .print-table td { padding: 3px 8px 3px 0; }
  .print-facts { font-size: 8.5px; }
  .print-hero .v { font-size: 25px; }
}