:root {
  color-scheme: light;
  --paper: #f8f5ee;
  --ink: #27342d;
  --muted: #535e54;
  --line: #d8d5c9;
  --white: #fffdf8;
  --accent: #9c4f32;
  --serif: Baskerville, Georgia, serif;
  --sans: "Avenir Next", "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 500 16px/1.5 var(--sans); }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; min-height: 44px; }
button:disabled { opacity: .53; cursor: default; }
a { color: inherit; }
:focus-visible { outline: 3px solid #aa5736; outline-offset: 3px; }
.masthead, .layout, .footer { width: min(100% - 40px, 1240px); margin: auto; }
.masthead { min-height: 76px; display: flex; justify-content: space-between; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); }
.wordmark { font: 600 30px/1 var(--serif); letter-spacing: -.055em; text-decoration: none; white-space: nowrap; }
.wordmark span, .eyebrow { color: var(--accent); }
.text-button { padding: 5px 0; border: 0; background: transparent; font-size: .88rem; font-weight: 650; text-align: left; }
.text-button:hover { text-decoration: underline; }
.layout { display: grid; grid-template-columns: minmax(290px, .81fr) minmax(400px, 1.19fr); gap: 0 clamp(26px, 5vw, 86px); padding: clamp(40px, 6.5vw, 91px) 0 56px; }
.workflow { grid-column: 1; }
.details { grid-column: 1; align-self: start; min-width: 0; }
.map-panel { grid-column: 2; grid-row: 1 / span 2; align-self: start; overflow: hidden; border: 1px solid var(--line); border-radius: 17px; background: var(--white); box-shadow: 0 12px 32px #303b2a0d; min-width: 0; }
.eyebrow { margin: 0; font-size: .69rem; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; }
h1 { margin: 10px 0 3px; font: 400 clamp(3.15rem, 5.5vw, 5.5rem)/.98 var(--serif); letter-spacing: -.054em; }
.intro { margin: 13px 0 22px; color: var(--muted); }
h2 { margin: 0 0 12px; font: 600 clamp(1.36rem, 2.4vw, 1.83rem)/1.14 var(--serif); }
.steps { display: flex; flex-wrap: wrap; gap: 8px 16px; border-block: 1px solid var(--line); padding: 11px 0; margin: 0 0 26px; font-size: .78rem; color: var(--muted); }
.steps > span { display: inline-flex; align-items: center; gap: 5px; }
.steps > span[aria-current] { font-weight: 750; color: var(--ink); }
.steps > span[aria-current]::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.choice { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; width: 100%; margin: 9px 0; padding: 13px 14px; background: var(--white); border: 1px solid var(--line); border-radius: 10px; text-align: left; }
.choice:hover { border-color: #9b9e89; }
.choice strong, .choice small { display: block; }
.choice small { margin-top: 2px; color: var(--muted); font-size: .8rem; }
.choice-icon { display: grid; place-items: center; width: 37px; height: 37px; border-radius: 50%; color: var(--accent); background: #efe5d8; font-size: 1.38rem; }
.arrow { color: var(--accent); }
.sample { margin-top: 5px; color: var(--muted); }
.back { margin: -10px 0 5px; }
.map-heading, .map-caption { display: flex; justify-content: space-between; align-items: center; gap: 9px; padding: 12px 16px; }
.map-title { margin: 2px 0 0; font: 600 1.45rem/1.08 var(--serif); }
.map-badge { flex-shrink: 0; background: #efede2; padding: 5px 8px; border-radius: 5px; font-size: .66rem; color: #4d584b; }
.map-caption { min-height: 47px; font-size: .76rem; color: var(--muted); }
.map-caption button { min-height: 44px; }
#map { height: clamp(380px, 48vw, 530px); width: 100%; background: #e9e7da; isolation: isolate; }
.leaflet-container { font-family: var(--sans); }
.leaflet-control-zoom a { color: var(--ink); }
#map .leaflet-control-scale { margin: 0 10px 5px 0; }
#map .leaflet-control-scale-line { background: var(--paper); color: var(--ink); border-color: var(--ink);
  font: 700 11px/1.1 var(--sans); padding: 3px 5px 2px; text-shadow: none; }
.leaflet-touch .leaflet-bar a { width: 42px; height: 42px; line-height: 42px; }
.map-label { width: auto !important; height: auto !important; white-space: nowrap; pointer-events: none; color: #61705c; }
.map-label span { display: inline-block; transform: translate(-50%, -50%); font-size: 12px; font-weight: 650; }
.map-label.town span { color: #455745; font: 600 21px/1 var(--serif); }
.map-label.water span { font-size: 10px; color: #526f75; }
.map-label.area span { font-size: 10px; letter-spacing: .04em; }
.route-marker { border-radius: 50%; background: #fdf9ef; border: 2px solid #3b5144; color: #26382d; text-align: center; font: 750 12px/24px var(--sans); box-shadow: 0 2px 5px #28362e55; }
.route-marker.selected, .route-marker.endpoint { background: #344e3e; border-color: #fffbef; color: #fff; }
.route-marker.selected { box-shadow: 0 0 0 3px #af653f; }
.map-editing { cursor: crosshair; }
label, legend { font-size: .82rem; font-weight: 650; }
.field-row, .code-row { display: flex; gap: 8px; margin: 5px 0 9px; }
input[type="search"], input[type="text"], input[readonly] { min-width: 0; flex: 1; width: 100%; background: var(--white); border: 1px solid #b6bcad; border-radius: 7px; padding: 9px 10px; min-height: 46px; font-size: 16px; }
.primary, .secondary { border-radius: 7px; font-weight: 650; font-size: .83rem; padding: 9px 11px; }
.primary { background: var(--ink); border: 1px solid var(--ink); color: #fffbf2; }
.primary:hover:enabled { background: #3d5747; }
.primary span { margin-left: 6px; }
.secondary { background: var(--white); border: 1px solid #bfc1b4; }
.secondary[aria-pressed="true"], .secondary:hover:enabled { background: #e8eadc; }
.modes { display: flex; gap: 7px; margin: 12px 0 6px; padding: 0; border: 0; }
.modes legend { margin-bottom: 4px; }
.modes label { position: relative; cursor: pointer; }
.modes input { position: absolute; opacity: 0; }
.modes label span { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 13px; border: 1px solid #bfc1b4; border-radius: 20px; background: var(--white); }
.modes input:checked + span { border-color: var(--ink); background: var(--ink); color: var(--white); }
.modes input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.hint { font-size: .85rem; margin: 7px 0; color: var(--muted); }
.fine { font-size: .75rem; }
.notice { padding: 10px 12px; margin: 10px 0; border-radius: 7px; }
.error { color: #6b321f; background: #f4e1d8; }
.status { color: #365141; font-size: .84rem; margin: 7px 0; }
.summary-line { display: flex; justify-content: space-between; align-items: start; gap: 8px; border-top: 1px solid var(--line); padding-top: 15px; margin-top: 13px; }
.summary-line h2 { margin-bottom: 4px; }
.distance { color: var(--accent); font: 600 1.42rem/1.2 var(--serif); white-space: nowrap; }
.actions, .primary-row { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin: 8px 0; }
.primary-row { gap: 13px; margin-top: 14px; }
#points { display: flex; flex-wrap: wrap; gap: 7px; list-style: none; padding: 0; margin: 9px 0; }
.confirm { display: flex; align-items: center; gap: 10px; min-height: 48px; margin: 11px 0; padding: 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--white); }
.confirm input { accent-color: var(--ink); width: 20px; height: 20px; flex-shrink: 0; }
#share h2, #lookup h2 { margin-top: 9px; }
#code { font-family: ui-monospace, monospace; font-weight: 650; }
.footer { border-top: 1px solid var(--line); color: var(--muted); display: flex; justify-content: space-between; padding: 15px 0 max(15px, env(safe-area-inset-bottom)); font-size: .72rem; }
@media (max-width: 740px) {
  .masthead, .layout, .footer { width: calc(100% - 28px); }
  .masthead { min-height: 60px; }
  .layout { display: flex; flex-direction: column; gap: 15px; padding: 28px 0 31px; }
  .details { width: 100%; }
  .map-panel { width: 100%; }
  #map { height: clamp(305px, 50vh, 420px); }
  .steps { margin-bottom: 19px; }
  .intro { margin-bottom: 15px; }
  .map-heading, .map-caption { padding-inline: 10px; }
}
@media (max-width: 740px) {
  body[data-view]:not([data-view="choose"]) h1 { font-size: 2.35rem; margin-bottom: 12px; }
  body[data-view]:not([data-view="choose"]) .intro { display: none; }
  .leaflet-interactive.route-marker::after { content: ""; position: absolute; inset: -8px; }
  .map-caption button { flex-shrink: 0; }
}
.choice.featured { border-color: #54675a; background: #eef0e4; }
#demo-mode { color: var(--muted); }
#osm-credit { margin-left: 4px; }
@media (max-width: 740px) {
  #coverage { font-size: .75rem; }
  .map-label.area span, .map-label.park span { font-size: 10px; }
}
.map-label span { paint-order: stroke; text-shadow: 0 0 2px #f8f5ee, 0 0 3px #f8f5ee; }
.more-options { color: var(--muted); font-size: .84rem; margin-top: 11px; }
.more-options summary { cursor: pointer; padding: 8px 0; }
.more-options button { margin-right: 10px; }
.map-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding: 9px 10px 2px; }
#review-route { margin-left: auto; }
#copy-status { color: var(--ink); font-weight: 650; }
@media (max-width: 740px) {
  .map-actions { display: grid; grid-template-columns: 1fr 1fr; }
  #review-route { grid-column: 1 / -1; width: 100%; }
  body[data-view="edit"] .layout { padding-top: 14px; gap: 8px; }
  body[data-view="edit"] .steps { margin-bottom: 10px; }
  body[data-view="edit"] .workflow > .eyebrow, body[data-view="edit"] .workflow > h1 { display: none; }
  #edit-instruction { min-height: 2.7em; margin-bottom: 2px; }
  #copy { flex-shrink: 0; }
  body[data-view="share"] .map-panel, body[data-view="file"] .map-panel { order: 1; }
}
@media (max-width: 360px) {
  .code-row { flex-direction: column; }
}
.street-names { display: flex; gap: 8px; align-items: center; min-height: 44px; padding: 0 14px; }
.street-names input { accent-color: var(--ink); width: 18px; height: 18px; }
.map-status { padding-inline: 12px; }
.leaflet-gl-layer { position: absolute; pointer-events: none; }
.download-link { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
@media (max-width: 740px) {
  #repair-leg { grid-column: 1 / -1; }
}
@media (max-width: 740px) {
  #restore-route { grid-column: 1 / -1; }
}
#search-form { position: relative; z-index: 3; }
.places { position: absolute; top: calc(100% + 4px); left: 0; right: 0; display: block; z-index: 5;
  border: 1px solid var(--line); border-radius: 12px; padding: 4px 8px; background: var(--paper);
  box-shadow: 0 9px 24px #263c2c29; max-height: min(340px, 44dvh, var(--place-list-space, 340px)); overflow: auto; overscroll-behavior: contain; }
.search-results-head { position: sticky; top: -4px; background: var(--paper); display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-inline: 5px; color: var(--muted); font-size: .82rem; }
#place-results { list-style: none; padding: 0; margin: 0; }
#place-results button { width: 100%; display: block; text-align: left; border: 0; border-top: 1px solid var(--line);
  background: transparent; padding: 6px 8px; color: var(--ink); min-height: 48px; }
#place-results button:hover, #place-results button:focus-visible { background: #e9eadf; }
#place-results strong, #place-results small { display: block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
#place-results small { color: var(--muted); }
#more-places { margin-left: 8px; }
.map-options { display: flex; justify-content: space-between; align-items: center; padding-right: 12px; }
#map { overscroll-behavior: contain; }
.full-waypoints { padding: 4px 12px; position: relative; font-size: .86rem; }
.full-waypoints summary { min-height: 44px; padding-top: 10px; cursor: pointer; }
#full-point-controls { max-height: 30dvh; overflow: auto; }
body.map-expanded { overflow: hidden; }
body.map-expanded #map-panel { position: fixed; z-index: 1001; inset: 0; width: auto; border-radius: 0;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  display: flex; flex-direction: column; height: 100dvh; max-height: 100dvh; overflow: auto; overscroll-behavior: contain; }
body.map-expanded #map { flex: 1 0 65dvh; min-height: 0; height: auto; }
body.map-expanded .map-heading { padding-block: 4px; }
body.map-expanded #map-kicker { display: none; }
body.map-expanded .map-caption { font-size: .68rem; }
body.map-expanded .map-caption { min-height: 0; padding-block: 4px; }
body.map-expanded #fit { display: none; }
@media (max-width: 740px), (max-height: 500px) and (pointer: coarse) {
  body[data-view="edit"] #map { height: 60vh; height: 60dvh; }
  body[data-view="edit"] .map-heading { padding-block: 6px; }
  body[data-view="edit"] .map-badge { display: none; }
  body.map-expanded #map { height: auto; }
  body.map-expanded .map-actions { display: flex; }
  body.map-expanded #review-route { width: auto; }
}
body.map-expanded .map-heading { position: sticky; top: 0; z-index: 2; background: var(--white); }
body.map-expanded .map-actions > button { padding-inline: 8px; }
body.map-expanded .map-options .street-names { min-height: 40px; }
body.map-expanded #full-waypoints { padding-block: 0; }
body.map-expanded #map-panel { scroll-padding-top: 56px; }
@media (max-height: 500px) {
  body.map-expanded .map-actions { padding-block: 4px; }
}