/* Shared visual tokens from eupere.de/bierkoenig. Scoped to trail UI. */
:root{--bk-bg:#f8f5ee;--bk-surface:#fff;--bk-subtle:#f3eee4;--bk-ink:#171717;--bk-text:#26302d;--bk-muted:#68716d;--bk-border:#e4ded3;--bk-border-strong:#cfc6b8;--bk-brand:#123f38;--bk-brand-strong:#0b302c;--bk-brand-soft:#e6efeb;--bk-gold:#f4c430;--bk-gold-strong:#b77a0b;--bk-gold-soft:#fff4c7;--bk-ui:'DM Sans',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;--bk-display:'Fraunces',Georgia,serif;--bk-card-shadow:0 2px 10px rgba(23,23,23,.045);--bk-float-shadow:0 18px 40px rgba(23,23,23,.16)}
body.trails-page{--ink:var(--bk-ink);--muted:var(--bk-muted);--cream:var(--bk-bg);--line:var(--bk-border);--gold:var(--bk-gold);background:var(--bk-bg);color:var(--bk-ink);font-family:var(--bk-ui);font-size:14px}
.trails-page header{height:68px;padding:0 20px;position:relative;background:var(--bk-ink);color:white;border-bottom:1px solid #2a2a2a;z-index:1000;gap:0}
.trails-page .brand{display:inline-flex;align-items:center;margin-right:auto;color:white;font-family:var(--bk-ui);font-size:34px;line-height:1;font-weight:800;letter-spacing:-1.2px;text-decoration:none}
.trails-page .brand strong{font:inherit;color:#ffc329}.trails-page .brand em{margin-left:6px;font-size:25px;font-style:normal;letter-spacing:0}
.trails-page .trails-menu-button{display:grid;place-items:center;background:transparent;color:white;width:42px;height:42px;padding:0;border:0;border-radius:10px;cursor:pointer}.trails-page .trails-menu-button:hover{background:#ffffff17}.trails-menu-button svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.trails-page .trails-menu{display:none;position:absolute;top:calc(100% + 8px);right:20px;width:260px;padding:8px;background:white;color:var(--bk-ink);border:1px solid var(--bk-border);border-radius:14px;box-shadow:var(--bk-float-shadow)}.trails-page .trails-menu.open{display:grid;gap:0}.trails-page .trails-menu a{display:block;padding:12px;min-height:44px;font-weight:700;font-size:14px;border-radius:10px;text-decoration:none}.trails-page .trails-menu a:hover{background:var(--bk-subtle)}.trails-page .trails-menu a[aria-current=page]{background:var(--bk-gold-soft);color:#78520b}
.trails-page main{max-width:1224px;padding-top:32px}.trails-page .back{font-size:13px;color:var(--bk-muted);text-decoration:none;font-weight:600}.trails-page .back:hover{color:var(--bk-brand)}
.trails-page .eyebrow{color:var(--bk-gold-strong);font-weight:800;letter-spacing:.08em;font-size:12px}.trails-page h1{font-family:var(--bk-display);font-weight:700;letter-spacing:-.04em;line-height:1.02}.trails-page h1 em{color:var(--bk-brand)}.trails-page h2{font-family:var(--bk-display);font-weight:700}.trails-page .intro{color:var(--bk-muted);line-height:1.6}
.trails-page button,.trails-page .actions a{font-family:var(--bk-ui);font-weight:700;transition:background .16s,border-color .16s,box-shadow .16s,transform .16s}.trails-page .toolbar button,.trails-page #save{min-height:42px;border-radius:999px;padding:10px 18px;border:1px solid var(--bk-border-strong);background:white;color:var(--bk-ink)}.trails-page .toolbar button:hover,.trails-page #save:hover{background:var(--bk-subtle)}.trails-page #overview,.trails-page #fit{background:var(--bk-gold);border-color:var(--bk-gold);color:var(--bk-ink)}.trails-page #overview:hover,.trails-page #fit:hover{background:#eab927}.trails-page #save[aria-pressed=true],.trails-page #savedOnly[aria-pressed=true]{background:var(--bk-ink);color:white;border-color:var(--bk-ink)}.trails-page .toolbar a{font-weight:700;color:var(--bk-brand)}
.trails-page #map{background:#eeeae0;border-color:var(--bk-border);border-radius:20px;box-shadow:var(--bk-card-shadow)}.trails-page .trail-card{background:white;border-radius:16px;border-color:var(--bk-border);border-left-color:var(--trail-color);box-shadow:var(--bk-card-shadow);padding:20px}.trails-page .trail-card:hover{border-color:var(--bk-border-strong);border-left-color:var(--trail-color);box-shadow:0 10px 26px #17171719;transform:translateY(-1px)}.trails-page .trail-card[aria-pressed=true]{background:#fffdf8;border-color:var(--trail-color);box-shadow:0 0 0 1px var(--trail-color),var(--bk-card-shadow)}.trails-page .trail-card strong{font-family:var(--bk-display);font-weight:700;color:var(--bk-ink)}.trails-page .card-meta{color:var(--bk-text)}
.trails-page .stop{background:var(--bk-surface);border:1px solid var(--bk-border);border-radius:16px;padding:18px;box-shadow:var(--bk-card-shadow);min-width:0}.trails-page .stop-grid{gap:16px}.trails-page .stop h3{color:var(--bk-ink);font-size:15px;line-height:1.4}.trails-page .actions{margin-top:10px;margin-left:0}.trails-page .actions a,.trails-page .actions button{border:1px solid var(--bk-border);border-radius:999px;min-height:36px;padding:8px 12px;color:var(--bk-ink);background:white;text-decoration:none}.trails-page .actions a:hover,.trails-page .actions button:hover{background:var(--bk-subtle)}.trails-page .actions button[aria-pressed=true]{background:var(--bk-brand-soft);border-color:#adc6b9;color:var(--bk-brand)}
.trails-page progress{accent-color:var(--bk-brand)}.trails-page .coverage{background:var(--bk-brand-soft);border:1px solid #ccdcd2;border-radius:12px;color:var(--bk-text)}.trails-page .notice{background:#fff7df;border-color:#ead49b;border-radius:16px;color:#614914}.trails-page .practical{gap:32px}.trails-page .practical a{font-weight:700;color:var(--bk-brand)}.trails-page footer{color:var(--bk-muted)}
.trails-page button:focus-visible,.trails-page a:focus-visible,.trails-page select:focus-visible,.trail-map-control button:focus-visible,.trail-map-control a:focus-visible,.trail-map-control select:focus-visible{outline:3px solid #f4c43088;outline-offset:3px}
/* The floating route card uses the same surface and controls as brewery cards. */
.trail-map-control{background:var(--bk-surface);border:1px solid var(--bk-border);border-radius:16px;padding:14px;box-shadow:0 8px 26px #1717171c;font-family:var(--bk-ui)}.trail-map-control label{color:var(--bk-muted);font-family:var(--bk-ui);font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;margin-bottom:7px}.trail-map-control select{border:1px solid var(--bk-border-strong);border-radius:10px;font-family:var(--bk-ui);font-size:12px;color:var(--bk-ink);padding:8px;min-height:36px;background:white}.trail-callout{font-family:var(--bk-ui);color:var(--bk-text);border-top-color:var(--bk-border);margin-top:12px;padding-top:12px}.trail-callout strong{font-family:var(--bk-display);font-size:17px;line-height:1.25;font-weight:700;color:var(--bk-ink)}.trail-callout-stats b{font-family:var(--bk-ui);font-weight:800;font-size:22px;color:var(--bk-ink)}.trail-callout-stats span,.trail-callout-meta{color:var(--bk-muted)}.trail-callout a{font-weight:700;color:var(--bk-brand)}.trail-callout-actions{gap:8px}.trail-callout-actions button{min-height:34px;padding:7px 12px;border-radius:999px;font:700 11px var(--bk-ui);border:1px solid var(--bk-border-strong);background:white;color:var(--bk-ink)}.trail-callout-actions button[data-fit]{background:var(--bk-gold);border-color:var(--bk-gold)}.trail-callout-actions button:hover{background:var(--bk-subtle)}.trail-callout-actions button[data-fit]:hover{background:#eab927}.trail-endpoint b{color:var(--bk-ink);border-color:var(--bk-border);font-family:var(--bk-ui);border-radius:8px;box-shadow:var(--bk-card-shadow)}.trail-endpoint.start i,.trail-endpoint.circuit i{background:var(--bk-brand)}.trail-stop-pin{font-family:var(--bk-ui)}.trail-open-place{font-family:var(--bk-ui);color:var(--bk-ink);border-color:var(--bk-border);border-radius:999px;font-weight:700}
@media(max-width:720px){.trails-page header{height:62px;padding:0 14px}.trails-page .brand{font-size:27px;letter-spacing:-.8px}.trails-page .brand em{font-size:21px;margin-left:4px}.trails-page .trails-menu{right:10px;width:min(260px,calc(100vw - 20px))}.trails-page main{padding:24px 16px}.trails-page .trail-card{padding:16px}.trails-page #map{border-radius:16px}.trails-page .stop{padding:16px}.trail-map-control{padding:10px;border-radius:14px}.trail-callout strong{font-size:15px}.trail-callout{margin-top:9px;padding-top:9px}.trail-callout-stats b{font-size:20px}}
@media(prefers-reduced-motion:reduce){.trails-page button,.trails-page .trail-card{transition:none;transform:none!important}}