/*
  TrekForge visual system
  -----------------------
  Colour  Spruce #0f3d2e  Pine #1d5c45  Moss #6c9079  Mist #edf1ea  Chalk #fbfcfa  Blaze #ff5a00
          Blaze is reserved for the route and the one forward action on each page.
  Type    Barlow Condensed (headings) + Barlow (everything else): a signage family, like waymarkers.
  Shape   Flat surfaces, hairline rules, 6px corners, no shadows. One canvas, one side panel.
*/
/* Barlow, served locally (SIL Open Font License, see vendor/fonts/LICENSE). */
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("../vendor/fonts/barlow-latin-ext-400.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("../vendor/fonts/barlow-latin-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("../vendor/fonts/barlow-latin-ext-500.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("../vendor/fonts/barlow-latin-500.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("../vendor/fonts/barlow-latin-ext-600.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("../vendor/fonts/barlow-latin-600.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("../vendor/fonts/barlow-condensed-latin-ext-600.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("../vendor/fonts/barlow-condensed-latin-600.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("../vendor/fonts/barlow-condensed-latin-ext-700.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("../vendor/fonts/barlow-condensed-latin-700.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --spruce: #0f3d2e;
  --pine: #1d5c45;
  --moss: #6c9079;
  --mist: #edf1ea;
  --chalk: #fbfcfa;
  --blaze: #ff5a00;

  --ink: #12261e;
  --muted: #56695f;
  --rule: #d3dbd2;
  --tint: #e1e9e0;           /* pale moss */
  --blaze-tint: #ffe6d6;
  --blaze-ink: #8a2f00;

  --head: "Barlow Condensed", "Arial Narrow", sans-serif;
  --body: "Barlow", "Segoe UI", system-ui, sans-serif;
  --radius: 6px;
  --bar: 58px;               /* top bar height */
  --panel: 420px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--mist);
  color: var(--ink);
  font: 400 16px/1.5 var(--body);
  font-variant-numeric: tabular-nums;
}

h1, h2 { font-family: var(--head); font-weight: 700; line-height: 1.05; margin: 0; }
h1 { font-size: clamp(2.6rem, 5.4vw, 4.4rem); letter-spacing: -.005em; }
h2 { font-size: 1.5rem; font-weight: 600; letter-spacing: .005em; }
p { margin: 0 0 .7rem; }
a { color: var(--pine); text-underline-offset: 2px; }
a:hover { color: var(--spruce); }
ul, ol { margin: 0; padding-left: 1.2rem; }
li + li { margin-top: .3rem; }

:focus-visible { outline: 3px solid var(--blaze); outline-offset: 2px; }

/* ── top bar ─────────────────────────────────────────────── */
.topbar {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: var(--bar); padding: .5rem 1.5rem;
  background: var(--spruce); color: var(--chalk);
  position: sticky; top: 0; z-index: 1100;
}
.brand { display: flex; align-items: center; gap: .65rem; font: 700 1.55rem/1 var(--head); letter-spacing: .01em; }
button.brand { background: none; border: 0; padding: .15rem .4rem .15rem 0; border-radius: var(--radius); color: inherit; cursor: pointer; }
button.brand:hover span { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }

dialog { border: 0; border-radius: var(--radius); padding: 1.4rem 1.5rem; max-width: min(26rem, 90vw); background: var(--chalk); color: var(--ink); }
dialog::backdrop { background: rgba(15, 61, 46, .55); }
dialog h2 { margin-bottom: .5rem; }
dialog p { margin: 0; }

/* Progress drawn as waymarks along a trail. */
.waymarks { display: flex; list-style: none; margin: 0 auto; padding: 0; }
.waymarks li {
  display: flex; align-items: center; gap: .5rem; margin: 0;
  font-weight: 500; font-size: .95rem; color: rgba(251, 252, 250, .6); white-space: nowrap;
}
.waymarks li + li::before { content: ""; width: clamp(1rem, 4vw, 3.5rem); height: 2px; margin: 0 .6rem; background: var(--pine); }
.waymarks i {
  display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  border: 2px solid var(--moss); font: 600 .85rem/1 var(--body); font-style: normal;
}
.waymarks li.done { color: var(--chalk); }
.waymarks li.done i { background: var(--moss); color: var(--spruce); }
.waymarks li.done + li::before { background: var(--moss); }
.waymarks li.active { color: var(--chalk); font-weight: 600; }
.waymarks li.active i { background: var(--blaze); border-color: var(--blaze); color: var(--spruce); }

main { flex: 1; display: flex; flex-direction: column; }
.stage { flex: 1; display: flex; flex-direction: column; }
footer { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; padding: .9rem 1.5rem; font-size: .9rem; color: var(--muted); border-top: 1px solid var(--rule); }
a.brand { color: inherit; text-decoration: none; }

/* Text pages (disclaimers, copyright and privacy). */
.prose { display: block; width: 100%; max-width: 46rem; margin: 0 auto; padding: 2.5rem 1.5rem 3rem; }
.prose h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: .8rem; }
.prose section { border-top: 2px solid var(--spruce); margin-top: 2rem; padding-top: .9rem; }
.prose h2 { margin-bottom: .7rem; }
.prose h3 { font: 600 1.2rem/1.2 var(--head); color: var(--pine); margin: 1.3rem 0 .5rem; }
.prose ul ul { margin-top: .3rem; font-size: .95rem; color: var(--muted); }

/* ── controls ────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  /* Barlow's capitals sit .05em below the middle of the line, so the padding lifts them back. */
  padding: calc(.55rem - .05em) 1rem calc(.55rem + .05em); border-radius: var(--radius); border: 1px solid var(--rule);
  background: var(--chalk); color: var(--ink); font: 600 .95rem/1.2 var(--body);
  cursor: pointer; text-decoration: none;
}
.btn:hover { border-color: var(--moss); color: var(--ink); }
.btn.go { background: var(--blaze); border-color: var(--blaze); color: var(--spruce); }
.btn.go:hover { background: #ff6f1f; border-color: #ff6f1f; }
.btn.solid { background: var(--spruce); border-color: var(--spruce); color: var(--chalk); }
.btn.solid:hover { background: var(--pine); border-color: var(--pine); color: var(--chalk); }
.btn.quiet { background: transparent; border-color: transparent; color: var(--pine); }
.btn.quiet:hover { border-color: var(--rule); }
.btn.on-dark { background: transparent; border-color: var(--moss); color: var(--chalk); }
.btn.on-dark:hover { background: var(--pine); color: var(--chalk); }
.btn.small { padding: calc(.32rem - .05em) .7rem calc(.32rem + .05em); font-size: .85rem; }
.btn.wide { display: flex; width: 100%; }
.btn:disabled, .btn.disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }

.row { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.row.between { justify-content: space-between; }
.row.end { justify-content: flex-end; margin-top: 1.2rem; }
.hint { font-size: .86rem; color: var(--muted); margin: .4rem 0 0; }

.spinner {
  width: 1rem; height: 1rem; border-radius: 50%; display: inline-block; flex: none;
  border: 2px solid rgba(108, 144, 121, .35); border-top-color: var(--blaze);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.msg { border-radius: var(--radius); padding: .6rem .8rem; font-size: .9rem; margin-top: .7rem; }
.msg.warn, .msg.error { background: var(--blaze-tint); color: var(--blaze-ink); border-left: 4px solid var(--blaze); }
.msg.info { background: var(--tint); color: var(--spruce); }
.msg strong { display: block; }
.msg ul { margin-top: .2rem; }

.facts { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1rem; margin: 0; font-size: .92rem; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; text-align: right; }

.toast-region { position: fixed; right: 1rem; bottom: 1rem; display: grid; gap: .5rem; z-index: 2000; max-width: min(420px, 90vw); }
.toast { background: var(--spruce); color: var(--chalk); padding: .7rem .9rem; border-radius: var(--radius); border-left: 4px solid var(--moss); font-size: .92rem; }
.toast.error { border-left-color: var(--blaze); }

/* ── stage 1: upload ─────────────────────────────────────── */
.hero { position: relative; overflow: hidden; background: var(--spruce); color: var(--chalk); }
.hero-art { position: absolute; inset: 0; }
.hero-art { --art-opacity: 1; }
.hero-art svg { position: absolute; right: -6%; top: 50%; height: 150%; width: auto; transform: translateY(-50%); opacity: var(--art-opacity); }
.hero-art .contour { fill: none; stroke: var(--moss); stroke-width: 1; opacity: .38; }
.hero-art .contour.index { stroke-width: 2; opacity: .55; }
/* Summit close-ups of the author examples, cross-fading in turn. Each map fills the
   panel's height; its west end fades out under the heading. */
.hero-art svg.summit-map {
  right: 0; top: 0; height: 100%; transform: none; opacity: 0; transition: opacity 3.5s ease-in-out;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 42%);
  mask-image: linear-gradient(to right, transparent 0, #000 42%);
}
.hero-art svg.summit-map.active { opacity: var(--art-opacity); }
.summit-map .contour { vector-effect: non-scaling-stroke; }
.summit-map .trail { stroke-width: 4; vector-effect: non-scaling-stroke; }
.summit-map .marker { fill: var(--blaze); stroke: var(--spruce); stroke-width: 3; }
.summit-map .leader { stroke: var(--chalk); stroke-width: 1.5; opacity: .8; }
.summit-map .peak-name { font: 700 34px var(--head); fill: var(--chalk); opacity: 1; }
.summit-map .peak-height { font: 500 20px var(--body); fill: var(--chalk); opacity: .85; }
.hero-art .trail { fill: none; stroke: var(--blaze); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.hero-art .summit { fill: var(--blaze); }
.hero-art text { fill: var(--chalk); font: 500 15px var(--body); opacity: .85; }
.hero-art .trail.draw { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: climb 2.6s .3s cubic-bezier(.5, 0, .2, 1) forwards; }
.hero-art .reveal { opacity: 0; animation: arrive .4s 2.7s forwards; }
@keyframes climb { to { stroke-dashoffset: 0; } }
@keyframes arrive { to { opacity: 1; } }

.hero-inner { position: relative; max-width: 1240px; margin: 0 auto; padding: clamp(2.5rem, 7vh, 5rem) 1.5rem clamp(2.5rem, 7vh, 4.5rem); }
.hero-inner > * { max-width: 34rem; }
.lead { font-size: 1.15rem; line-height: 1.5; color: rgba(251, 252, 250, .85); margin: 1rem 0 1.8rem; }

.dropzone {
  display: grid; gap: .25rem; padding: 1.6rem 1.4rem;
  border: 2px dashed var(--moss); border-radius: var(--radius);
  background: rgba(15, 61, 46, .72); cursor: pointer;
}
.dropzone strong { font: 600 1.6rem/1.1 var(--head); }
.dropzone span { color: rgba(251, 252, 250, .75); font-size: .95rem; }
.dropzone:hover, .dropzone.drag { border-color: var(--blaze); border-style: solid; }
.dropzone.compact { padding: .9rem 1.4rem; }
.dropzone.compact strong { font-size: 1.25rem; }
.dropzone.disabled { opacity: .6; pointer-events: none; }

.staged { margin-top: 1rem; padding: 1rem 1.1rem; border-radius: var(--radius); background: var(--chalk); color: var(--ink); }
.staged h2 { font-size: 1.25rem; }
.staged .hint { margin: 0; }
.staged-list { list-style: none; margin: .5rem 0 .9rem; padding: 0; }
.staged-list li { display: flex; align-items: center; gap: .7rem; padding: .4rem 0; margin: 0; border-top: 1px solid var(--rule); }
.staged-list .name { flex: 1; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.staged-list .size { color: var(--muted); font-size: .88rem; }
.upload-status { display: flex; align-items: center; gap: .55rem; color: var(--muted); margin-top: .7rem; }
#upload-errors .msg { max-width: 34rem; }

.about { max-width: 1240px; width: 100%; margin: 0 auto; padding: 2.5rem 1.5rem 3rem; display: grid; gap: 2.2rem 3rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.about section { border-top: 2px solid var(--spruce); padding-top: .9rem; max-width: 36rem; }
.about h2 { margin-bottom: .7rem; }
.about p:last-child { margin-bottom: 0; }

/* Author examples: a row of tiles that scrolls sideways. */
.examples { max-width: 1240px; width: 100%; margin: 0 auto; padding: 0 1.5rem 3.5rem; }
.examples-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; border-top: 2px solid var(--spruce); padding-top: .9rem; margin-bottom: 1rem; }
.examples-head p { margin: .5rem 0 0; }
.carousel { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .8rem; scrollbar-color: var(--moss) transparent; }
.tile {
  flex: none; width: min(19rem, 82vw); scroll-snap-align: start;
  display: grid; grid-template-rows: 1fr auto; overflow: hidden;
  border-radius: var(--radius); background: var(--spruce); color: var(--chalk);
}
/* The map and facts are one button that opens the example; the links below it are separate. */
.tile-open {
  display: grid; grid-template-rows: auto 1fr; padding: 0; border: 0; background: none;
  color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.tile-open:hover .tile-map { background: var(--pine); }
.tile-open:disabled { opacity: .6; cursor: progress; }
.tile-open:focus-visible { outline-offset: -3px; }
.tile-more { padding: .8rem 1.1rem 1rem; border-top: 1px solid var(--pine); font-size: .9rem; }
.tile-more-label { display: block; color: rgba(251, 252, 250, .65); margin-bottom: .45rem; }
/* One link per line, so the section is the same height whether or not a link exists yet. */
.tile-more-links { display: grid; gap: .45rem; justify-items: start; align-items: center; }
.social { display: inline-block; padding: .28rem .7rem; border-radius: 999px; color: #fff; font-weight: 600; font-size: .86rem; text-decoration: none; }
.social:hover { color: #fff; filter: brightness(1.12); }
/* Each network's own colours, so the links are recognisable at a glance. */
.social.instagram { background: linear-gradient(45deg, #f58529, #dd2a7b 45%, #8134af 80%, #515bd4); }
.social.youtube { background: #ff0000; }
.social-soon { color: rgba(251, 252, 250, .6); font-size: .86rem; padding: .28rem 0; }
.tile-map { display: block; width: 100%; aspect-ratio: 1; background: #134a38; }
.tile-map path { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.tile-map .contour { stroke: var(--moss); stroke-width: .7; opacity: .45; }
.tile-map .contour.index { stroke-width: 1.5; opacity: .8; }
.tile-map .track { stroke: var(--blaze); stroke-width: 2.4; }
.tile-body { padding: .9rem 1.1rem 1.1rem; display: grid; gap: .55rem; align-content: start; }
.tile-title { font: 700 2rem/1 var(--head); }
.tile-place { color: rgba(251, 252, 250, .75); font-size: .95rem; margin-top: .15rem; }
.tile dl { display: grid; grid-template-columns: auto 1fr; gap: .15rem .9rem; margin: 0; font-size: .92rem; }
.tile dt { color: rgba(251, 252, 250, .65); }
.tile dd { margin: 0; text-align: right; }
.tile-note { font-size: .86rem; color: var(--blaze); font-weight: 500; }

/* ── stages 2 and 4: canvas + side panel ─────────────────── */
.workspace { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) var(--panel); }
.canvas-col { padding: 1.25rem 1.5rem 2rem; display: grid; gap: 1.5rem; align-content: start; min-width: 0; }
.panel { background: var(--chalk); border-left: 1px solid var(--rule); padding: 1.25rem 1.4rem 2rem; min-width: 0; }
.panel > * + * { border-top: 1px solid var(--rule); margin-top: 1.25rem; padding-top: 1.25rem; }
.panel h2 { margin-bottom: .5rem; }
.panel details > summary { cursor: pointer; font: 600 1.25rem/1.2 var(--head); }
.panel details[open] > summary { margin-bottom: .8rem; }
.block h2 { margin-bottom: .6rem; }
.block { border-top: 2px solid var(--spruce); padding-top: .9rem; }

.map { height: min(64vh, 680px); min-height: 380px; border-radius: var(--radius); border: 1px solid var(--rule); background: var(--tint); }
.leaflet-container { font-family: var(--body); }
.legend { background: var(--chalk); border: 1px solid var(--rule); border-radius: var(--radius); padding: .55rem .7rem; color: var(--ink); font-size: .85rem; max-width: 250px; line-height: 1.5; }
.legend h3 { margin: 0 0 .2rem; font: 600 1rem/1.2 var(--head); }
.legend-row { display: flex; align-items: center; gap: .45rem; overflow: hidden; }
.legend-row span.name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.legend-line { flex: none; width: 22px; height: 0; border-top: 4px solid; border-radius: 2px; }
.legend-line.aoi { border-top: 2px solid var(--spruce); }
.legend-line.dl { border-top: 2px dashed var(--moss); }
.legend-line.join { border-top: 3px dotted var(--spruce); }
.legend hr { border: 0; border-top: 1px solid var(--rule); margin: .3rem 0; }

.tags { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .9rem; }
.tag { padding: .15rem .55rem; border-radius: 4px; font-size: .86rem; font-weight: 500; background: var(--tint); color: var(--spruce); }
.tag.no { background: var(--blaze-tint); color: var(--blaze-ink); }
.tag.na { background: transparent; border: 1px solid var(--rule); color: var(--muted); }

.file-item { border-top: 1px solid var(--rule); padding: .7rem 0; }
.file-item:first-child { border-top: 0; padding-top: 0; }
.file-head { display: flex; align-items: center; gap: .6rem; }
.file-swatch { width: 22px; height: 5px; border-radius: 3px; flex: none; }
.file-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.file-meta, .file-routes { font-size: .9rem; color: var(--muted); margin: .15rem 0 0 2rem; }
.file-routes { padding: 0; list-style: none; }
.file-routes b { color: var(--ink); font-weight: 500; }
.icon-btn { border: 0; background: none; cursor: pointer; color: var(--muted); font-size: 1.2rem; line-height: 1; padding: .15rem .45rem; border-radius: 4px; }
.icon-btn:hover { background: var(--blaze-tint); color: var(--blaze-ink); }
details.notes { margin: .3rem 0 0 2rem; font-size: .86rem; color: var(--muted); }
details.notes summary { cursor: pointer; }

/* The gap between two legs, drawn as a dotted stretch of trail. */
.junction { display: flex; gap: .55rem; font-size: .9rem; margin-left: .55rem; padding: .45rem 0 .45rem 1rem; border-left: 3px dotted var(--moss); color: var(--pine); }
.junction.inner { margin: .35rem 0 .1rem 2rem; }
.junction.no { border-left-color: var(--blaze); color: var(--blaze-ink); }
.junction .mark { font-weight: 600; flex: none; }
.junction small { display: block; color: var(--muted); font-size: .84rem; }

/* forms */
.group-title { font: 600 1.15rem/1.2 var(--head); color: var(--pine); margin: 1.1rem 0 .5rem; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem .8rem; align-items: start; }
.field { display: grid; gap: .2rem; min-width: 0; align-content: start; }
.field.wide { grid-column: 1 / -1; }
.field label { font-size: .9rem; font-weight: 500; }
.field .unit { color: var(--muted); font-weight: 400; }
.field .unit.below { display: block; }
#route-fields { margin-top: 1.1rem; }
.field input:not([type=checkbox]), .field select {
  width: 100%; padding: .45rem .6rem; border: 1px solid var(--rule); border-radius: var(--radius);
  background: #fff; font: inherit; font-size: .95rem; color: var(--ink);
}
.field input:disabled { background: var(--mist); color: var(--muted); }
.field input.invalid, .field select.invalid { border-color: var(--blaze); background: #fff4ec; }
.field small { font-size: .82rem; color: var(--muted); line-height: 1.35; }
.field.check { grid-template-columns: auto 1fr; gap: .05rem .6rem; }
.field.check input { width: 1.1rem; height: 1.1rem; margin: .2rem 0 0; accent-color: var(--pine); }
.field.check small { grid-column: 2; }
.field.check.disabled { opacity: .55; }
#api-key-field { margin-top: .8rem; }
#dem-warning { margin-top: .8rem; }
.key-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .7rem; }
.form-errors:not(:empty) { margin-top: .8rem; padding: .6rem .8rem; border-radius: var(--radius); background: var(--blaze-tint); color: var(--blaze-ink); border-left: 4px solid var(--blaze); font-size: .9rem; }
.form-errors ul { padding-left: 1.1rem; }

.checklist { font-size: .92rem; color: var(--muted); margin-bottom: .9rem; }
.confirm { display: flex; gap: .65rem; align-items: flex-start; padding: .75rem .8rem; border-radius: var(--radius); background: var(--tint); margin-bottom: .9rem; cursor: pointer; font-weight: 500; }
.confirm input { width: 1.15rem; height: 1.15rem; margin-top: .2rem; accent-color: var(--pine); flex: none; }

.update-row { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-top: 1.1rem; }
.switch { display: flex; align-items: center; gap: .5rem; font-size: .92rem; font-weight: 500; cursor: pointer; }
.switch input { width: 1.1rem; height: 1.1rem; accent-color: var(--pine); }

/* ── stage 3: generate ───────────────────────────────────── */
.progress-card { width: min(620px, calc(100% - 3rem)); margin: 3rem auto; padding: 1.5rem 1.6rem; background: var(--chalk); border: 1px solid var(--rule); border-radius: var(--radius); }
.progress { height: 6px; border-radius: 3px; background: var(--tint); overflow: hidden; margin: .9rem 0 1.1rem; }
.progress-bar { height: 100%; width: 0; background: var(--blaze); transition: width .35s ease; }
.steps { list-style: none; margin: 0; padding: 0; }
.steps li { display: grid; grid-template-columns: 1.5rem 1fr; gap: .55rem; align-items: start; padding: .3rem 0; margin: 0; color: var(--muted); }
/* The marker keeps one fixed box in every state so nothing shifts between updates. */
.steps .mark { width: 1.15rem; height: 1.15rem; margin-top: .2rem; border-radius: 50%; position: relative; border: 2px solid var(--rule); }
.steps .mark::after { position: absolute; inset: 0; display: grid; place-items: center; font-size: .7rem; font-weight: 600; line-height: 1; }
.steps li.done { color: var(--ink); }
.steps li.done .mark { background: var(--moss); border-color: var(--moss); }
.steps li.done .mark::after { content: "✓"; color: var(--chalk); }
.steps li.active { color: var(--ink); font-weight: 600; }
.steps li.active .mark { border-color: rgba(108, 144, 121, .35); border-top-color: var(--blaze); animation: spin .8s linear infinite; }
.steps li.failed { color: var(--blaze-ink); font-weight: 600; }
.steps li.failed .mark { background: var(--blaze); border-color: var(--blaze); }
.steps li.failed .mark::after { content: "!"; color: var(--spruce); }
.steps small { display: block; font-weight: 400; color: var(--muted); }
.steps small:empty { display: none; }

/* ── stage 4: download ───────────────────────────────────── */
.pinned { position: sticky; top: calc(var(--bar) + 1.25rem); display: grid; gap: .9rem; }
.pinned > .hint { margin: 0; }
.viewer-wrap { position: relative; border-radius: var(--radius); overflow: hidden; background: #123a2d; }
.viewer { height: clamp(360px, calc(100vh - var(--bar) - 15.5rem), 900px); touch-action: none; }
.viewer canvas { display: block; }
.viewer-toolbar { position: absolute; left: .7rem; right: .7rem; top: .7rem; display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; pointer-events: none; }
.viewer-toolbar > * { pointer-events: auto; }
.segmented { display: inline-flex; background: var(--chalk); border-radius: var(--radius); overflow: hidden; }
.segmented button { border: 0; background: none; padding: .4rem .85rem; font: 600 .9rem/1.2 var(--body); cursor: pointer; color: var(--muted); }
.segmented button + button { border-left: 1px solid var(--rule); }
.segmented button.active { background: var(--blaze); color: var(--spruce); }
.tool { display: inline-flex; align-items: center; gap: .4rem; font-size: .86rem; font-weight: 500; background: var(--chalk); padding: .28rem .6rem; border-radius: var(--radius); }
.tool input[type=range] { width: 90px; accent-color: var(--blaze); }
.tool.key i { width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--rule); }
.tool.key i + i, .tool.key i:not(:first-child) { margin-left: .5rem; }
.key-terrain { background: #f1f3ee; }
.key-route { background: var(--blaze); }
.build-status { margin-left: auto; display: inline-flex; align-items: center; gap: .45rem; font-size: .86rem; font-weight: 500; padding: .28rem .65rem; border-radius: var(--radius); background: var(--chalk); color: var(--pine); }
.build-status:empty { display: none; }
.build-status.stale, .build-status.invalid { background: var(--blaze-tint); color: var(--blaze-ink); }
.viewer-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .6rem; background: rgba(18, 58, 45, .85); color: var(--chalk); font-weight: 500; }

.downloads { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.report { font-size: .86rem; color: var(--muted); margin-top: .45rem; }
.report .ok { color: var(--pine); font-weight: 500; }
.report .bad { color: var(--blaze-ink); font-weight: 500; }
.report .note { color: var(--muted); }
.assembly { font-size: .93rem; }
.assembly ol { margin: 0 0 .7rem; }
.assembly p:last-child { margin-bottom: 0; }

@media (max-width: 1040px) {
  .workspace { grid-template-columns: 1fr; }
  .panel { border-left: 0; border-top: 1px solid var(--rule); }
  .pinned { position: static; }
  .viewer { height: 60vh; }
  .about { grid-template-columns: 1fr; }
  .waymarks { margin: 0; }
  .waymarks li:not(.active) { font-size: 0; gap: 0; }   /* keep the dots, drop the labels */
  .waymarks li:not(.active) i { font-size: .85rem; }
  .topbar { flex-wrap: wrap; }
  .hero-art { --art-opacity: .3; }        /* the art sits behind the text here, so quieten it */
  .hero-art text { display: none; }
}
@media (max-width: 560px) {
  .downloads, .fields { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-art .trail.draw { animation: none; stroke-dashoffset: 0; }
  .hero-art .reveal { animation: none; opacity: 1; }
  .spinner, .steps li.active .mark { animation-duration: 2.4s; }
  .progress-bar { transition: none; }
}