:root {
  /* Guyana waterways palette. Ivory ground, forest structure, clay and silt accents, and
     water blue kept small on purpose. Four of the spec colours fail WCAG AA as text on
     ivory, so each keeps its surface or graphic role and a darker sibling carries the
     type: caution 3.00 -> caution-text 5.70, river clay 4.05 -> clay-text 6.04,
     silt gold 4.45 -> silt-text 5.57, water slate 3.30 -> info 4.85. High conflict is the
     same story once it sits on its own tinted surface: 4.10 -> negative-text 4.88. */
  --ivory-ground: #f7f7ee;
  --ivory-surface: #fffef7;
  --warm-cloud: #dbccae;
  --forest-ink: #132a2e;
  --wordmark-green: #133812;
  --deep-mangrove: #194618;
  --canopy-green: #384426;
  --mangrove-olive: #565828;
  --river-clay: #8a7566;
  --silt-gold: #867032;
  --mist-blue: #a7bccb;
  --water-slate: #6d8ca0;

  --color-bg: var(--ivory-ground);
  --color-surface: var(--ivory-surface);
  --color-surface-sunken: #f1f0e4;
  --color-surface-selected: #efe9db;

  --color-border: var(--warm-cloud);
  --color-border-subtle: #e8e2d3;
  --color-border-strong: #c2ae8c;

  --color-text: var(--forest-ink);
  --color-text-muted: #5c6761;
  --color-text-muted-on-warm: #565f5a;
  --color-text-inverse: var(--ivory-ground);
  --color-text-brand: var(--wordmark-green);
  --color-text-link: var(--deep-mangrove);
  --color-clay-text: #6e5a4c;
  --color-silt-text: #75612b;

  --color-action: var(--deep-mangrove);
  --color-action-hover: #10360f;
  --color-action-text: var(--ivory-ground);
  --color-focus-ring: #867032;

  --color-positive: #426a43;
  --color-positive-surface: #e6ede3;
  --color-caution: #9a9057;
  --color-caution-surface: #f2ecd8;
  --color-caution-text: #6b6234;
  --color-negative: #b5523b;
  --color-negative-text: #a8452f;
  --color-negative-surface: #f7e6e1;
  --color-info: #4f7183;
  --color-info-surface: #e6edf1;

  --color-map-frame: var(--canopy-green);
  --color-map-site: var(--river-clay);
  --color-map-site-alt: var(--mangrove-olive);
  --color-map-water: var(--water-slate);

  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --radius-card: 18px;
  --radius-control: 12px;
  --radius-pill: 999px;

  /* Warm shadows. A neutral grey reads dirty against ivory. */
  --shadow-card: 0 4px 8px rgba(35, 30, 18, 0.05), 0 20px 44px rgba(35, 30, 18, 0.1);
  --shadow-control: 0 2px 4px rgba(35, 30, 18, 0.05), 0 8px 20px rgba(35, 30, 18, 0.07);
  --shadow-sheet: 0 -8px 32px rgba(35, 30, 18, 0.14);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--color-text);
  background: var(--color-bg);
  font-family: var(--font-sans);
  line-height: 1.6;
}

a {
  color: var(--color-text-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover { color: var(--color-action-hover); }

button,
input,
select { font: inherit; }

button,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.65rem 1.05rem;
  border: 1px solid var(--color-action);
  border-radius: var(--radius-control);
  background: var(--color-action);
  color: var(--color-action-text);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-control);
}

button:hover:not(:disabled),
.button:hover {
  background: var(--color-action-hover);
  border-color: var(--color-action-hover);
  color: var(--color-action-text);
}

button:active:not(:disabled),
.button:active { transform: translateY(1px); }

button:disabled {
  cursor: default;
  opacity: 0.55;
}

button.secondary,
.button.secondary {
  background: var(--color-surface);
  border-color: var(--color-border-strong);
  color: var(--color-text);
  box-shadow: none;
}

button.secondary:hover,
.button.secondary:hover {
  background: var(--color-surface-selected);
  border-color: var(--color-action);
  color: var(--color-text);
}

.ghost {
  min-height: 48px;
  border: 1px solid var(--color-border-strong);
  background: transparent;
  color: var(--color-text-brand);
  font-weight: 600;
  box-shadow: none;
}

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

button.primary { width: 100%; min-height: 48px; font-size: 1rem; font-weight: 600; }

/* Buttons set their own display above, which outranks the browser default for the hidden
   attribute, so the two cancel buttons laid out even while hidden. This sits after them
   deliberately. */
[hidden] { display: none; }

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
.errors:focus-visible,
#map:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 3px;
}

.header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem 1.5rem;
  padding: 0.85rem clamp(1rem, 4vw, 3rem);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: 0.6rem;
  color: var(--color-text-brand);
  text-decoration: none;
}

.brand:hover { color: var(--color-text-brand); }

.brand-mark {
  display: block;
  width: 2.5rem;
  height: 2.5rem;
}

/* The wordmark is inlined so it takes the brand colour through currentColor. Its box is
   6589 by 788, so height alone sizes it and the width follows. */
.brand svg {
  display: block;
  width: auto;
  height: 17px;
  max-width: 60vw;
}

.tag {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nav { justify-self: end; }

.nav-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.25rem 0.8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.15rem;
  color: var(--color-text-muted-on-warm);
  font-size: 0.9rem;
  text-decoration: none;
}

.nav a:hover { color: var(--color-text-link); }

.nav a[aria-current="page"] {
  color: var(--color-text-brand);
  font-weight: 700;
  box-shadow: inset 0 -2px 0 var(--color-action);
}

.nav-menu > summary {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0 0.65rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-control);
  color: var(--color-text-brand);
  font-size: 0.85rem;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}

.nav-menu > summary::-webkit-details-marker { display: none; }

.nav-menu > summary::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: translateY(-2px) rotate(45deg);
}

.nav-menu[open] > summary::after { transform: translateY(1px) rotate(-135deg); }

.nav-menu[open] .nav-list {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  margin-top: 0.5rem;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  box-shadow: var(--shadow-control);
}

.nav-menu[open] .nav-list a { justify-content: flex-start; }

.wrap {
  width: min(100% - 2rem, 74rem);
  margin: 0 auto;
  align-self: center;
  padding: clamp(1.5rem, 4vw, 3.5rem) 0 4rem;
}

h1,
h2 {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.05;
  text-wrap: balance;
}

h1 { max-width: 26ch; font-size: clamp(1.85rem, 3.2vw, 2.5rem); }
h2 { margin-top: 0; font-size: clamp(1.55rem, 3vw, 2.2rem); }

p { margin: 0 0 1rem; }

.lede {
  max-width: 62ch;
  color: var(--color-text-muted-on-warm);
  font-size: clamp(1rem, 1.5vw, 1.18rem);
}

label {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--color-text);
  font-size: 0.82rem;
  font-weight: 700;
}

select,
input[type="text"],
input[type="email"],
input[type="password"] {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-text);
}

.note { display: block; margin-top: 0.3rem; color: var(--color-text-muted); font-size: 0.82rem; }

.status {
  margin: 0.6rem 0;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.status:empty { margin: 0; }

/* This was a caption under the score and read as decoration, so it is a badge now. */
.verdict {
  display: inline-block;
  align-self: flex-start;
  margin: 0.4rem 0 0;
  padding: 0.22rem 0.62rem;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 0.82rem;
}

.verdict-high { color: var(--color-negative-text); background: var(--color-negative-surface); }
.verdict-moderate,
.verdict-incomplete { color: var(--color-caution-text); background: var(--color-caution-surface); }
.verdict-low { color: var(--color-positive); background: var(--color-positive-surface); }

.errors {
  margin: 1rem 0;
  padding: 0.8rem 1rem 0.8rem 1.6rem;
  border: 1px solid #e6b7ab;
  border-radius: var(--radius-control);
  background: var(--color-negative-surface);
  color: var(--color-negative-text);
  font-size: 0.9rem;
}

.errors li { margin-bottom: 0.25rem; }
.errors li:last-child { margin-bottom: 0; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.footer {
  padding: 1.5rem clamp(1rem, 4vw, 3rem);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted-on-warm);
  font-size: 0.82rem;
}

.footer p { max-width: 70ch; margin: 0 0 0.4rem; }
.footer p:last-child { margin-bottom: 0; }
.footer a { color: var(--color-text-link); }

@media (min-width: 52rem) {
  .wrap { width: min(100% - 4rem, 74rem); }

  /* The nav is a details on a phone. Past this width the summary goes and the list has to
     come back out, and a closed details hides its content through the shadow slot, which
     a display rule on the list cannot reach. ::details-content is what reaches it. */
  .nav-menu > summary { display: none; }
  .nav-menu::details-content { content-visibility: visible; block-size: auto; }
}

@media (max-width: 640px) {
  .header { grid-template-columns: auto 1fr; }
  .tag { display: none; }
}

@media (max-width: 420px) {
  .wrap { width: min(100% - 1.25rem, 74rem); padding-top: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  button:active:not(:disabled),
  .button:active { transform: none; }
  * { animation: none !important; transition: none !important; }
}

@page { size: Letter; margin: 0.35in; }

@media print {
  .header,
  .footer,
  .errors { display: none; }

  body { background: #fff; overflow: visible; }
}

/* Everything below is keyed off a class drawably only adds once its module has run, so a
   blocked or failed script leaves the ordinary bordered cards and solid buttons standing
   rather than invisible ones. It sits at the end of the file on purpose: the card rules it
   has to beat are all plain single class selectors too, so source order is what decides. */

/* drawably names Inter on every element it attaches to, which then inherits down through a
   sketched card and quietly takes over the type inside it. */
.drawably-host { font-family: inherit; }

.drawably-card {
  border: 0;
  box-shadow: none;
  --drawably-ink: var(--color-action);
  --drawably-paper: var(--color-surface);
}

.drawably-button {
  min-height: 2.75rem;
  border: 0;
  background: none;
  box-shadow: none;
  font: inherit;
  font-weight: 700;
  --drawably-ink: var(--color-action);
  --drawably-paper: var(--color-surface);
}

/* The outline variants keep a dark label, so their line matches it rather than the
   mangrove green the filled ones are drawn in. */
.drawably-button:not(.drawably-button--solid) { --drawably-ink: var(--color-text); }

/* button:hover carries a pseudo-class the plain .drawably-button rule above does not, so
   the sketched buttons were painting a hard green rectangle behind the pen line on hover,
   and the label went to the ivory that fill was meant to sit under. The pen darkens
   instead, the label follows it, and drawably's lift and 10% wash stay as the feedback. */
.drawably-button:hover:not(:disabled) { background: none; color: var(--drawably-ink); }
.drawably-button--solid:hover:not(:disabled) { --drawably-ink: var(--color-action-hover); color: var(--drawably-paper); }

/* The verdict and score pills carry meaning in their colour, so the pen takes whatever
   colour the band already set instead of a house one. */
.drawably-badge { --drawably-ink: currentColor; }

.sketch-field { display: block; }
.coord-field .sketch-field { display: inline-block; }

/* The pen line is the field edge now, so the input drops its own border and the box it
   sits in carries the height the border used to hold. The coordinate pair sits on bare
   paper rather than inside a drawn card, so the ink is named here instead of inherited. */
.drawably-inputbox { min-height: 2.75rem; --drawably-ink: var(--color-action); }

.drawably-inputbox input {
  min-height: 2.75rem;
  border: 0;
  background: none;
  box-shadow: none;
}