:root {
  color-scheme: light;
  --green: #254e3b;
  --green-dark: #183b2c;
  --ink: #253a2e;
  --muted: #647468;
  --border: #dce3d8;
  --paper: #fbfaf6;
  --red: #a3342a;
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); }
a { color: var(--green); }
header { min-height: 82px; padding: 16px max(24px, calc((100vw - 1200px)/2)); display: flex; align-items: center; gap: 28px; border-bottom: 1px solid var(--border); background: var(--paper); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--green); font-size: 1.65rem; font-weight: 800; letter-spacing: -.06em; text-decoration: none; white-space: nowrap; }
.brand-dot { margin-left: -10px; color: #ad7843; }
.header-caption { color: var(--muted); font-size: .82rem; }
header button { margin-left: auto; }
main { max-width: 1200px; min-height: calc(100vh - 170px); margin: 0 auto; padding: 36px 24px 48px; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(1.8rem, 3vw, 2.5rem); line-height: 1.2; letter-spacing: -.045em; margin-bottom: 10px; }
h2 { font-size: 1.35rem; line-height: 1.3; letter-spacing: -.025em; margin-bottom: 12px; }
h3 { font-size: 1rem; margin-bottom: 14px; }
.eyebrow { color: #59725b; text-transform: uppercase; letter-spacing: .14em; font-size: .68rem; font-weight: 750; margin-bottom: 12px; }
.card { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 24px; margin-bottom: 20px; box-shadow: 0 4px 22px #263b2c04; }
.login-layout { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: 80px; padding: 38px 12px 20px; }
.login-story h1 { font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.6rem, 4.6vw, 4rem); font-weight: 500; line-height: 1.12; letter-spacing: -.05em; margin: 20px 0 24px; }
.story-copy { max-width: 440px; color: var(--muted); font-size: 1.03rem; }
.trail-art { position: relative; margin-top: 24px; overflow: hidden; background: #edf0e6; border-radius: 140px 140px 16px 16px; }
.trail-art svg { width: 100%; display: block; }
.trail-art span { position: absolute; bottom: 15px; left: 22px; font-size: .72rem; font-weight: 650; color: #294a35; }
.story-tags { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 18px; color: var(--muted); font-size: .7rem; }
.story-tags span::before { content: "✓"; color: var(--green); margin-right: 6px; }
.login { padding: 34px; margin: 0; box-shadow: 0 12px 42px #243a2b08; }
.login h2 { font-size: 1.65rem; }
.login > p:not(.eyebrow) { color: var(--muted); font-size: .9rem; }
.login form { margin-top: 24px; }
.login form > .muted { padding: 12px 14px; background: #f4f6f0; border-radius: 8px; font-size: .75rem; }
.login form > button { width: 100%; margin-top: 14px; justify-content: space-between; }
.login .login-footnote { text-align: center; font-size: .72rem !important; margin: 20px 0 0; }
label { display: grid; gap: 7px; font-size: .84rem; font-weight: 650; margin: 14px 0; }
input, select, textarea { width: 100%; min-width: 0; color: var(--ink); font: inherit; font-size: .94rem; padding: 12px 13px; border: 1px solid #bdcbbf; border-radius: 8px; background: white; }
input::placeholder, textarea::placeholder { color: #7d897f; }
textarea { min-height: 106px; resize: vertical; }
button, .button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; border: 1px solid transparent; border-radius: 8px; padding: 11px 17px; background: var(--green); color: white; font: inherit; font-size: .86rem; font-weight: 650; text-decoration: none; cursor: pointer; transition: background .15s; }
button:hover, .button:hover { background: var(--green-dark); }
.secondary { background: #edf2e9; color: var(--green); border-color: #dbe5d7; }
.secondary:hover { background: #dce7d7; }
.quiet { color: var(--green); background: transparent; border-color: #bdcbbf; }
.quiet:hover { background: #edf2e9; }
button:disabled { opacity: .5; cursor: wait; }
:focus-visible { outline: 3px solid #b58342; outline-offset: 3px; }
.hidden { display: none !important; }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 4px 0 24px; }
.page-heading .eyebrow { margin-bottom: 8px; }
.session-badge { max-width: 260px; color: var(--muted); font-size: .75rem; border-left: 2px solid #a9bca2; padding-left: 14px; margin: 0; }
.toolbar { display: flex; align-items: end; gap: 20px; flex-wrap: wrap; }
.toolbar label { min-width: 160px; flex: 1; margin: 0; }
.toolbar .check-label { display: flex; align-items: center; min-width: 0; flex: 0 1 auto; padding-bottom: 12px; white-space: nowrap; font-weight: 500; font-size: .78rem; }
.check-label input { width: 20px; height: 20px; accent-color: var(--green); }
.distance { font-weight: 750; padding: 11px 0; color: var(--green); white-space: nowrap; }
.route-info { border: 0; padding: 8px 2px 20px; background: transparent; box-shadow: none; }
.route-info h1 { font-size: 1.55rem; }
#route-title, #route-description, #checked-date { overflow-wrap: anywhere; }
#route-description { white-space: pre-wrap; margin-bottom: 12px; }
#checked-date { font-size: .73rem; }
#map { height: min(60vh, 600px); min-height: 360px; border: 1px solid #c5d1c0; border-radius: 16px; margin-bottom: 24px; z-index: 1; background: #e9eee3; }
.section-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.section-heading h2 { margin-bottom: 10px; }
.section-heading .eyebrow { font-size: .6rem; }
#map-help { font-size: .82rem; }
#obstacles { list-style: none; padding: 0; margin: 0; }
#obstacles li { padding: 18px 0; border-top: 1px solid var(--border); overflow-wrap: anywhere; }
#obstacles li small { display: block; margin: 6px 0; font-size: .73rem; }
#obstacles li button { margin: 8px 8px 0 0; min-height: 44px; }
.status-open, .status-done { padding: 3px 8px; border-radius: 6px; font-size: .75rem; }
.status-open { color: var(--red); background: #faeee9; }
.status-done { color: var(--green); background: #edf2e9; }
.edit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.edit-grid form { min-width: 0; border: 1px solid var(--border); padding: 20px; border-radius: 12px; background: #fcfcf9; }
.edit-grid form button { width: 100%; }
.edit-grid form p { font-size: .75rem; margin-top: 12px; margin-bottom: 0; }
.obstacle-tools { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.muted, small { color: var(--muted); }
.error { color: var(--red); }
#login-error { font-size: .82rem; margin: 12px 0 0; }
#edit-message { margin: 14px 0 0; font-size: .85rem; }
.notice { color: var(--green); }
.notice.error { color: var(--red); }
.empty-state { padding: 24px; background: #eef2e8; border: 1px dashed #abbda5; border-radius: 12px; margin-bottom: 20px; }
.empty-state p { margin: 6px 0 0; color: var(--muted); font-size: .88rem; }
footer { max-width: 1200px; padding: 20px 24px; margin: auto; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; color: var(--muted); font-size: .7rem; }
.skip-link { position: absolute; left: 20px; top: -100px; background: white; padding: 10px; z-index: 2000; }
.skip-link:focus { top: 12px; }
.leaflet-control-zoom a { min-width: 40px; min-height: 40px; line-height: 40px !important; }
@media (max-width: 900px) {
  .login-layout { gap: 30px; padding: 20px 0; }
  .login { padding: 26px; }
  .story-tags { gap: 8px 14px; }
  .toolbar .check-label { flex-basis: 100%; padding: 0; }
}
@media (max-width: 640px) {
  header { min-height: 70px; padding: 12px 18px; }
  .header-caption { display: none; }
  main { padding: 24px 16px 36px; }
  .login-layout { display: block; padding: 0; }
  .login-story h1 { font-size: 2.6rem; margin: 10px 0 14px; }
  .story-copy { font-size: .9rem; }
  .trail-art, .story-tags { display: none; }
  .login-story { margin-bottom: 26px; }
  .login { padding: 24px; }
  .card { padding: 20px; }
  .page-heading { display: block; }
  .session-badge { margin-top: 14px; max-width: none; }
  .toolbar { gap: 16px; }
  .toolbar label { flex-basis: 100%; min-width: 0; }
  .toolbar .check-label { padding: 0; }
  .toolbar .button { flex: 1; }
  .distance { padding: 0; }
  .edit-grid { grid-template-columns: 1fr; }
  .edit-grid form { padding: 16px; }
  .obstacle-tools button { width: 100%; }
  #map { min-height: 300px; height: 52vh; border-radius: 12px; }
  footer { padding: 20px 16px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }
.workspace-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.explorer { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 0 22px; align-items: start; }
.explorer .toolbar { grid-column: 1; grid-row: 1; display: grid; padding: 20px; gap: 14px; }
.explorer .toolbar label { min-width: 0; }
.explorer .route-info { grid-column: 1; grid-row: 2; }
.explorer #obstacle-section { grid-column: 1; grid-row: 3; padding: 20px; }
.explorer #map { grid-column: 2; grid-row: 1 / 4; height: 72vh; position: sticky; top: 16px; width: 100%; }
.record-list { display: grid; gap: 12px; margin-bottom: 24px; }
.record-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; padding: 18px; background: white; border: 1px solid var(--border); border-radius: 12px; overflow-wrap: anywhere; min-width: 0; }
.record-row > span { color: var(--muted); flex: 1 1 200px; font-size: .85rem; }
.record-row strong { flex: 1 1 150px; }
.password-reset { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; flex: 1 1 100%; }
.password-reset label { flex: 1 1 200px; margin-bottom: 0; }
fieldset { min-width: 0; border: 1px solid var(--border); border-radius: 10px; margin: 18px 0; }
fieldset p { font-size: .8rem; }
.metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 20px 0; }
.metric { display: grid; gap: 8px; background: #f1f5ee; border-radius: 10px; padding: 16px; overflow-wrap: anywhere; }
.metric strong { font-size: 1.15rem; }
table { width: 100%; border-collapse: collapse; margin-bottom: 24px; font-size: .85rem; }
caption { text-align: left; font-weight: bold; margin: 8px 0; }
th, td { text-align: left; padding: 10px; border-bottom: 1px solid var(--border); }
#ride-map { height: 50vh; min-height: 280px; margin: 20px 0; border-radius: 12px; z-index: 1; }
#ride-pagination { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
#statistics-list .button, #statistics-list button { margin: 6px; }
@media (max-width: 800px) {
  .explorer { display: flex; flex-direction: column; gap: 0; }
  .explorer > * { width: 100%; }
  .explorer #map { position: relative; height: 52vh; order: 1; }
  .explorer #obstacle-section { order: 2; }
  .metrics { grid-template-columns: 1fr; }
  .record-row, .password-reset { align-items: stretch; }
  .record-row button { flex: 1 1 auto; }
}
/* Contain transformed Leaflet layers during responsive layout changes. */
#map, #ride-map { overflow: hidden; }

/* A forest path and its hoofprints are the visual starting point of Hufspur. */
.login-layout { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 48px; align-items: center; padding: 20px 0 36px; }
.forest-story { position: relative; overflow: hidden; border-radius: 24px; min-height: 600px; align-self: stretch; background: #264234; }
.forest-photo { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 47% center; }
.forest-story::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,34,23,.65), transparent 65%, rgba(13,34,23,.25)); pointer-events: none; }
.forest-copy { position: relative; z-index: 1; padding: 40px 32px; color: #fffdf6; }
.forest-copy .eyebrow { color: #ede9d4; }
.forest-copy h1 { font-size: clamp(2.3rem, 3.8vw, 3.7rem); line-height: 1.1; margin: 18px 0; letter-spacing: -.035em; }
.forest-copy p { max-width: 28ch; line-height: 1.65; }
.forest-caption { position: absolute; z-index: 1; bottom: 22px; right: 22px; left: 22px; color: #fff; font-size: .75rem; text-align: right; text-shadow: 0 1px 4px #172a1c; }
.login-layout .login { padding: 34px; box-shadow: 0 12px 45px #253a2e08; }
.app-download { max-width: 1200px; margin: 0 auto 32px; padding: 28px 32px; border: 1px solid #dce3d7; border-radius: 20px; background: #edf1e8; display: flex; gap: 24px; justify-content: space-between; align-items: center; }
.app-download strong { font-family: Georgia, serif; font-size: 1.6rem; color: #254e3b; }
.app-download p { margin: 8px 0; }
.download-actions { display: grid; gap: 12px; flex-shrink: 0; }
.download-actions small { line-height: 1.6; color: #53624e; }
@media (max-width: 850px) {
  .login-layout { gap: 24px; grid-template-columns: minmax(0, 1fr); }
  .forest-story { min-height: 410px; }
  .forest-copy { padding: 26px; }
  .forest-photo { object-position: center 62%; }
  .app-download { margin: 0 16px 24px; padding: 24px; align-items: stretch; flex-direction: column; }
  .download-actions { min-width: 0; }
  .download-actions .button { white-space: normal; text-align: center; }
}
@media (max-width: 400px) {
  .forest-story { min-height: 380px; }
  .forest-copy h1 { font-size: 2.25rem; }
  .login-layout .login { padding: 22px; }
}

.variant-summary { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 20px; margin-top: 12px; padding: 18px; border: 1px solid #dce4d8; border-radius: 12px; }
.variant-summary h3 { margin: 0; }
.variant-summary > strong { grid-column: 1; }
.variant-summary > ul { grid-column: 2; grid-row: 1 / 3; margin: 0; }
.variant-summary > p { grid-column: 1 / -1; margin: 4px 0 0; }
#variant-legend { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 640px) {
  .variant-summary { grid-template-columns: minmax(0, 1fr); }
  .variant-summary > ul { grid-column: 1; grid-row: auto; padding-left: 20px; }
}

#gait-map { height: 420px; margin: 16px 0; border-radius: 16px; }
#gait-editor { margin-top: 24px; border-top: 1px solid #cdd8cf; padding-top: 20px; }
#gait-selection { min-height: 4.5em; }