/* canyons.weleber.net */
:root {
  color-scheme: light dark;
  --bg: #fbfaf7; --fg: #1d1c1a; --muted: #6b675f; --line: #ddd8cc;
  --accent: #a24a1f; --accent-fg: #fff; --ok: #2f7d32; --warn: #b26a00; --err: #b3261e;
  --panel: #fffdf9; --card: #fff;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #171614; --fg: #ece8df; --muted: #a39d92; --line: #35322c; --accent: #e0733e;
          --panel: #1f1d1a; --card: #23211d; }
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
h1 { font-size: 1.15rem; margin: 0; }
h2 { font-size: 0.8rem; margin: 0 0 0.35rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
h3 { font-size: 0.8rem; margin: 1rem 0 0.35rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
p { margin: 0.35rem 0; }
.muted { color: var(--muted); }
.small { font-size: 0.8rem; }
.error { color: var(--err); }
.ok { color: var(--ok); }
.warn { color: var(--warn); }
button, .button { font: inherit; font-size: 0.9rem; padding: 0.45rem 0.9rem; border-radius: 6px;
  border: 1px solid var(--accent); background: var(--accent); color: var(--accent-fg); cursor: pointer;
  text-decoration: none; display: inline-block; line-height: 1.2; }
button.secondary, .button.secondary { background: transparent; color: var(--fg); border-color: var(--line); }
button.link { background: none; border: none; color: var(--muted); padding: 0; text-decoration: underline; font-size: 0.85rem; }
button:disabled, .button[aria-disabled=true] { opacity: 0.45; cursor: default; pointer-events: none; }
button.active { outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.row { display: flex; gap: 0.5rem; align-items: center; }
input[type=range] { width: 100%; }
.logo { flex: none; }
.hero-logo { width: 220px; height: 220px; }
h1 .finder { font-weight: 400; color: var(--muted); }

/* landing */
body.landing { padding: 2rem 1.25rem; }
.landing-wrap { max-width: 64rem; margin: 0 auto; display: grid; gap: 1.25rem; }
.hero { display: flex; gap: 1.5rem; align-items: center; }
.hero h1 { font-size: 1.8rem; }
.tagline { font-size: 1.05rem; color: var(--muted); margin: 0.25rem 0 0; max-width: 40rem; }
.landing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1rem; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 1.1rem 1.25rem; }
.card.caveats { border-left: 4px solid var(--warn); }
.card.signin { border-left: 4px solid var(--accent); }
.steps { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.5rem; }
ul.plain { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.4rem; }
.signin form { display: grid; gap: 0.5rem; margin-top: 0.75rem; }
.signin input { font: inherit; padding: 0.5rem; border-radius: 6px; border: 1px solid var(--line);
  background: var(--bg); color: var(--fg); }

/* app */
body.app { display: grid; grid-template-columns: 23rem 1fr; }
#panel { height: 100vh; overflow-y: auto; padding: 1rem; border-right: 1px solid var(--line);
  background: var(--panel); display: flex; flex-direction: column; gap: 1rem; }
#panel header { display: flex; gap: 0.6rem; align-items: center; }
#panel header form { margin-left: auto; }
#panel section { border-top: 1px solid var(--line); padding-top: 0.75rem; }
#panel footer { margin-top: auto; border-top: 1px solid var(--line); padding-top: 0.5rem; }
#map { height: 100vh; }
.layers { position: absolute; top: 0.6rem; right: 0.6rem; background: var(--panel); border: 1px solid var(--line);
  border-radius: 8px; padding: 0.4rem 0.7rem; display: grid; gap: 0.15rem; font-size: 0.85rem; }
.stages { margin: 0.25rem 0 0; padding-left: 1.2rem; font-size: 0.85rem; color: var(--muted); columns: 2; }
.stages li.current { color: var(--fg); font-weight: 600; }
.stages li.done { color: var(--ok); }
.slider { display: block; margin: 0.5rem 0; font-size: 0.9rem; }
.legend { list-style: none; margin: 0.5rem 0 0; padding: 0; font-size: 0.82rem; display: grid; gap: 0.2rem; }
.swatch { display: inline-block; vertical-align: middle; margin-right: 0.35rem; }
.swatch.dot { width: 11px; height: 11px; border-radius: 50%; border: 1px solid #fff; }
.swatch.dot.red { background: #c8321f; } .swatch.dot.orange { background: #e08a1e; }
.swatch.line { width: 18px; height: 3px; } .swatch.line.blue { background: #1f6fb2; } .swatch.line.grey { background: #8a8a8a; }
.export-grid { display: grid; gap: 0.4rem; }
.export-row { display: grid; grid-template-columns: 6rem 1fr 1fr; gap: 0.4rem; align-items: center; font-size: 0.85rem; }
.export-row .button { text-align: center; padding: 0.35rem 0.5rem; font-size: 0.85rem; }
.caveat { font-size: 0.8rem; color: var(--muted); border-left: 3px solid var(--warn); padding-left: 0.6rem; margin-top: 0.75rem; }
.maplibregl-popup-content { color: #1d1c1a; font: 13px/1.4 system-ui, sans-serif; }
.maplibregl-popup-content table td { padding: 0 0.4rem 0 0; }
@media (max-width: 800px) {
  body.app { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  #panel { height: auto; max-height: 45vh; border-right: none; border-bottom: 1px solid var(--line); }
  #map { height: 55vh; }
  .stages { columns: 1; }
}