/* Lolo Guide — rebuilt for index(7).html and current JS renderers */
:root {
  --bg:#f4f1e8; --surface:#fffdf8; --soft:#f7f4ec;
  --text:#18211b; --muted:#69736c; --border:#d9ddd7;
  --accent:#2f6b4f; --accent-dark:#24543e;
  --gap:16px; --radius:12px;
  --body-font:"SF Pro Text","SF Pro",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --heading-font:"Space Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-family:var(--body-font);
  color:var(--text); background:var(--bg);
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;min-height:100%;width:100%}
body{min-width:320px;background:var(--bg);color:var(--text)}
button,input,select,textarea{font:inherit}
h1,h2,h3,h4,h5,h6,.app-title,button,input,select,textarea{font-family:var(--heading-font)}
button{cursor:pointer}
[hidden]{display:none!important}
.muted{color:var(--muted)}
.eyebrow{margin:0 0 6px;font:500 .73rem "IBM Plex Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
h1,h2,h3,p{overflow-wrap:break-word}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button:disabled{opacity:.55;cursor:not-allowed}

/* Authentication */
.auth-screen{min-height:100dvh;display:grid;place-items:center;padding:24px}
.auth-card{width:min(440px,100%);padding:28px;background:var(--surface);border:1px solid var(--border);border-radius:20px;box-shadow:0 12px 40px #18211b12}
.auth-logo{display:block;width:min(210px,60vw);aspect-ratio:1;object-fit:cover;margin:0 auto 20px;border-radius:12px}
.auth-copy{text-align:center;margin-bottom:20px}
.auth-copy h1,.auth-form-heading h2{margin:0 0 8px}
.auth-copy p,.auth-form-heading p{margin:0}
.auth-tabs,.logbook-tabs{display:flex;gap:5px;padding:4px;margin-bottom:18px;background:var(--soft);border:1px solid var(--border);border-radius:10px}
.auth-tab,.logbook-tab{flex:1;min-width:0;border:0;border-radius:7px;padding:10px;background:transparent;color:var(--muted)}
.auth-tab.is-active,.logbook-tab.is-active{background:var(--text);color:white}
.auth-form,.account-form{display:grid;gap:14px}
.auth-form label,.account-form label{display:grid;gap:6px}
.auth-form input,.account-form input{width:100%;min-width:0;padding:11px 12px;border:1px solid var(--border);border-radius:9px;background:white}
.auth-primary{padding:11px 14px;border:0;border-radius:9px;background:var(--accent);color:white;font-weight:700}
.auth-primary:hover{background:var(--accent-dark)}
.auth-link-button{justify-self:start;border:0;background:transparent;padding:0;color:var(--accent)}
.auth-link-button--center{justify-self:center}
.auth-message{min-height:1.3em;margin:14px 0 0;font-size:.9rem}
.auth-message--error,.route-log-message{color:#a03434}
.auth-message--success{color:var(--accent)}

/* Shell / top-level views. Desktop scrolls inside its panels. */
.app-shell{width:calc(100% - 40px);max-width:2800px;height:100dvh;margin:auto;display:grid;gap:var(--gap);overflow:hidden;min-height:0}
.app-shell--guide{grid-template-columns:clamp(340px,34%,740px) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);grid-template-areas:"header header" "filters detail"}
.app-shell--map{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);grid-template-areas:"header" "map"}
.app-shell--community{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);grid-template-areas:"header" "community"}
.app-header{grid-area:header;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:72px;position:relative;padding:10px 4px;border-bottom:1px solid var(--border)}
.app-title{margin:0;font-weight:700;letter-spacing:-.02em;font-size:1.05rem}
.account-menu-wrap{position:relative;flex:none}
.account-menu-button{width:42px;height:42px;border:1px solid var(--border);border-radius:9px;background:var(--surface);font-size:1.35rem}
.account-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:50;width:220px;padding:6px;display:grid;gap:3px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 14px 40px #0002}
.account-menu button{width:100%;text-align:left;border:0;border-radius:7px;background:transparent;padding:11px 12px;color:var(--text)}
.account-menu button:hover{background:var(--soft)}
.panel{min-width:0;min-height:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}
.filters-panel{grid-area:filters;display:grid;grid-template-rows:auto minmax(0,1fr);gap:var(--gap);min-width:0;min-height:0;background:transparent;border:0}
.controls-panel{padding:16px;min-width:0;max-height:46dvh;overflow-y:auto}
.results-panel{display:flex;flex-direction:column;padding:16px;overflow:hidden;min-height:0}
.detail-panel{grid-area:detail;padding:20px;min-width:0;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.section-head h2{margin:0;font-size:1.4rem;letter-spacing:-.025em}
.results-head{flex:none}
.results-head .muted{font-size:.85rem;white-space:nowrap}
.filter-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.filter-grid .full-span{grid-column:1/-1}
.filter-grid label{display:grid;gap:5px;min-width:0;font-size:.79rem;color:var(--muted);font-weight:600}
.filter-grid input,.filter-grid select,.route-log-form input,.route-log-form select,.route-log-form textarea,.community-comment-form textarea{width:100%;min-width:0;max-width:100%;padding:10px;border:1px solid var(--border);border-radius:8px;background:white;color:var(--text)}
.filter-grid input,.filter-grid select{height:41px}
.ghost,.reset-button{border:1px solid var(--border);border-radius:8px;padding:8px 11px;background:var(--soft);color:var(--text)}
.reset-button{margin-top:12px}
.record-list{min-height:0;flex:1;overflow-y:auto;display:grid;align-content:start;gap:6px;padding-right:4px}
.record-card{width:100%;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;text-align:left;padding:12px;border:1px solid var(--border);border-radius:9px;background:white;color:var(--text)}
.record-card:hover,.record-card.active{border-color:var(--accent);background:#eef6ef}
.record-card strong{min-width:0;overflow-wrap:anywhere;font-weight:600}
.record-card span{color:var(--muted);white-space:nowrap;font-size:.85rem}
.detail-head{align-items:start}
.detail-head-copy{min-width:0;width:100%}
.detail-head h2{font-size:1.55rem;line-height:1.25}
.detail-summary{margin:6px 0 0}
.route-title-row{display:flex;justify-content:space-between;align-items:center;gap:12px}
.route-title-row>span{min-width:0}
.route-todo-toggle{flex:none;width:34px;height:34px;border:1px solid var(--accent);border-radius:8px;background:transparent;color:var(--accent);font-size:1.3rem}
.route-todo-toggle.is-added{background:var(--accent);color:white}
.detail-nav{margin-bottom:16px}
.route-detail-tabs{display:flex;gap:4px;border-bottom:1px solid var(--border)}
.route-detail-tab{padding:10px 16px;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--muted)}
.route-detail-tab.is-active{border-bottom-color:var(--accent);color:var(--text);font-weight:700}
.description-card{min-width:0;line-height:1.6;overflow-wrap:anywhere}
.description-card h3{margin:14px 0 6px}
.empty-state{color:var(--muted)}
.detail-related{margin-top:18px}
.detail-nav-row,.related-list{display:flex;flex-wrap:wrap;gap:8px}
.detail-nav-chip,.related-chip{display:inline-flex;flex-direction:column;gap:2px;max-width:100%;border:1px solid var(--border);border-radius:8px;padding:8px 10px;background:var(--soft);color:var(--text);text-decoration:none}
.related-chip-meta{color:var(--muted);font-size:.8rem}
.facts-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:18px}
.fact-card{min-width:0;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:var(--soft)}
.fact-card small,.fact-card span{color:var(--muted)}
.fact-card strong{display:block;overflow-wrap:anywhere}
.detail-log{margin-top:12px}
.route-log-overview--compact{display:flex;justify-content:flex-start}
.route-log-open{border:1px solid var(--accent);border-radius:8px;background:var(--accent);color:white;padding:9px 13px;font-weight:600}
.mobile-back-to-routes{display:none}

/* Community feed */
#community-feed-page{grid-area:community;min-width:0;min-height:0;overflow-y:auto;padding:18px 12px 35px}
#community-feed-page>h1{margin:0 0 22px;font-size:1.55rem}
.community-table-header,.community-ascent-row{display:grid;grid-template-columns:minmax(100px,1.1fr) minmax(160px,2fr) minmax(65px,.6fr) minmax(90px,.9fr) minmax(95px,1fr);gap:12px;align-items:center}
.community-table-header{padding:0 10px 10px;border-bottom:1px solid var(--border);font:500 .72rem "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.community-ascent-row{padding:13px 10px;border-bottom:1px solid var(--border)}
.ascent-route,.ascent-name{min-width:0;overflow-wrap:anywhere}
.ascent-grade,.ascent-style,.ascent-date{color:var(--muted)}
.ascent-style{text-transform:capitalize}

/* Community tab in route details */
.community-mode .detail-related,.community-mode .facts-grid{display:none}
.community-full-panel{width:100%}
.community-panel--full{display:grid;gap:18px}
.community-send-section,.community-comments{padding:14px;border:1px solid var(--border);border-radius:10px;background:var(--soft)}
.community-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px}
.community-stats>div{padding:12px;border:1px solid var(--border);border-radius:8px;background:white}
.community-stats strong{display:block;font-size:1.4rem}
.community-comments-head{display:flex;justify-content:space-between;gap:10px;align-items:center}
.community-comment-list{display:grid;gap:9px}
.community-comment{padding:12px;border:1px solid var(--border);border-radius:9px;background:white;overflow-wrap:anywhere}
.community-comment-meta{display:flex;justify-content:space-between;gap:8px;color:var(--muted);font-size:.82rem}
.community-comment-actions{display:flex;gap:8px;margin-top:8px}
.community-comment-actions button{padding:5px 8px;border:1px solid var(--border);border-radius:6px;background:var(--soft)}
.community-comment-form{display:grid;gap:10px;margin-top:14px}
.community-comment-form textarea{min-height:85px;resize:vertical}
.community-comment-form button{justify-self:start;padding:9px 12px;border:0;border-radius:8px;background:var(--accent);color:white}

/* Map */
.map-column{grid-area:map;min-width:0;min-height:0;overflow:hidden;border:1px solid var(--border);border-radius:var(--radius)}
#map{width:100%;height:100%;min-height:0}

/* Account and logging dialogs */
.account-modal,.route-log-modal{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:16px;background:#142019aa;overflow-y:auto}
.account-modal-card,.route-log-modal-card{width:min(560px,100%);max-height:min(88dvh,900px);overflow-y:auto;padding:22px;border:1px solid var(--border);border-radius:15px;background:var(--surface);box-shadow:0 20px 65px #0003}
.account-modal-head,.route-log-modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:16px}
.account-modal-head h2,.route-log-modal-head h2{margin:0}
#account-modal-close,.route-log-modal-close{flex:none;width:35px;height:35px;border:1px solid var(--border);border-radius:8px;background:white;font-size:1.3rem}
.profile-summary{display:grid;gap:3px;margin-bottom:18px}
.profile-summary span{color:var(--muted)}
.logbook-section{display:grid;gap:10px}
.logbook-entry{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;padding:12px;border:1px solid var(--border);border-radius:9px}
.logbook-entry>div{display:grid;gap:3px;min-width:0}
.logbook-entry span,.logbook-entry small{color:var(--muted)}
.logbook-entry p{grid-column:1/-1;margin:4px 0}
.logbook-status{font-size:.8rem;text-transform:capitalize}
.logbook-hint{font-size:.85rem}
.route-log-form{display:grid;gap:12px}
.route-log-form label{display:grid;gap:5px;min-width:0}
.route-log-form textarea{min-height:95px;resize:vertical}
.route-log-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.route-log-actions button{padding:9px 13px;border:1px solid var(--border);border-radius:8px;background:var(--soft)}
.route-log-actions button[type=submit]{background:var(--accent);border-color:var(--accent);color:white}
.route-log-current{padding:10px;border-radius:8px;background:var(--soft)}
.route-log-send-field,.route-log-date-field,.route-log-beta{min-width:0}


/* Community Feed date range control */
.community-feed-heading {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:end;
  gap:14px 20px;
  margin-bottom:20px;
}
.community-feed-heading h1 { margin:0; font-size:1.55rem; }
.community-date-filter {
  display:grid;
  gap:6px;
  min-width:180px;
  color:var(--muted);
  font-size:.8rem;
  font-weight:600;
}
.community-date-filter select {
  width:100%;
  min-height:42px;
  padding:9px 12px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface);
  color:var(--text);
}
/* The list should fill the available width on ultra-wide screens. */
#community-feed { min-width:0; width:100%; }
@media(min-width:1800px) {
  .app-shell { gap:20px; }
  .app-shell--guide { grid-template-columns:clamp(450px,32%,800px) minmax(0,1fr); }
  .controls-panel,.results-panel { padding:22px; }
  .detail-panel { padding:28px 34px; }
  .filter-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .record-list { gap:8px; }
  .record-card { padding:14px 16px; }
  .community-table-header,.community-ascent-row { column-gap:22px; }
}
@media(min-width:2800px) {
  .app-shell { max-width:none; width:calc(100% - 64px); }
}
@media(min-width:901px) and (max-height:720px) {
  .app-header { min-height:58px; padding:5px 4px; }
  .controls-panel { max-height:54dvh; }
}
@media(min-width:761px) and (max-width:1100px) {
  .app-shell--guide { grid-template-columns:minmax(290px,40%) minmax(0,1fr); }
  .filter-grid { grid-template-columns:minmax(0,1fr); }
  .filter-grid .full-span { grid-column:auto; }
}
@media(max-width:900px) {
  .app-shell { max-width:none; }
  .app-shell--guide .controls-panel { max-height:none; }
  .community-feed-heading { align-items:stretch; }
}
@media(max-width:620px) {
  .community-feed-heading { flex-direction:column; align-items:stretch; gap:10px; }
  .community-feed-heading h1 { font-size:1.35rem; }
  .community-date-filter { width:100%; }
  .community-date-filter select { min-height:44px; }
  .community-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* Tablets and phones: document scroll for Guide + Community, map remains fixed. */
@media(max-width:900px){
  html,body{height:auto;overflow-x:hidden}
  .app-shell{width:calc(100% - 20px);height:auto;min-height:100dvh;overflow:visible;gap:12px}
  .app-shell--guide{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;grid-template-areas:"header" "filters" "detail"}
  .app-shell--guide .filters-panel{grid-template-rows:auto auto}
  .app-shell--guide .controls-panel{max-height:none;overflow:visible}
  .app-shell--guide .results-panel{overflow:visible;min-height:0}
  .app-shell--guide .record-list{overflow:visible;max-height:none}
  .app-shell--guide .detail-panel{overflow:visible}
  .app-shell--community{grid-template-rows:auto auto;grid-template-areas:"header" "community"}
  #community-feed-page{overflow:visible;padding-bottom:45px}
  .app-shell--map{width:100%;height:100dvh;min-height:0;overflow:hidden;grid-template-rows:auto minmax(0,1fr);gap:0}
  .app-shell--map .app-header{margin:0 12px}
  .app-shell--map .map-column{border-radius:0;border:0}
  .app-shell--map #map{height:100%}
}
@media(max-width:760px){
  .app-shell--guide{grid-template-rows:auto auto;grid-template-areas:"header" "filters"}
  .app-shell--guide .detail-panel{display:none}
  .app-shell--guide .filters-panel{display:grid}
  .app-shell--guide.mobile-guide-detail{grid-template-areas:"header" "detail"}
  .app-shell--guide.mobile-guide-detail .filters-panel{display:none}
  .app-shell--guide.mobile-guide-detail .detail-panel{display:block;min-height:0;overflow:visible;padding:16px 14px 28px}
  .mobile-back-to-routes{display:block;margin:0 0 12px;padding:0;border:0;background:transparent;color:var(--accent);font-size:.85rem;font-weight:700}
  .facts-grid{grid-template-columns:1fr}
}
@media(max-width:620px){
  .app-shell{width:calc(100% - 12px);gap:10px}
  .app-header{min-height:64px;padding:8px 3px}
  .app-title{font-size:.86rem;line-height:1.25}
  .account-menu{width:min(220px,calc(100vw - 16px))}
  .controls-panel,.results-panel{padding:12px}
  .filter-grid{grid-template-columns:minmax(0,1fr)}
  .filter-grid .full-span{grid-column:auto}
  .filter-grid input,.filter-grid select{height:44px}
  .record-card{padding:10px}
  .detail-head h2{font-size:1.25rem}
  .description-card{font-size:.95rem}
  .community-table-header{display:none}
  #community-feed-page{padding:8px 5px 30px}
  #community-feed-page>h1{margin:3px 0 12px;font-size:1.35rem}
  .community-ascent-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name date" "route grade" "style style";gap:4px 10px;padding:12px 8px}
  .ascent-name{grid-area:name;font-weight:700}
  .ascent-date{grid-area:date;text-align:right;font-size:.78rem}
  .ascent-route{grid-area:route;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ascent-grade{grid-area:grade;text-align:right;white-space:nowrap}
  .ascent-style{grid-area:style;font-size:.8rem}
  .auth-screen{padding:12px}
  .auth-card{padding:20px}
  .account-modal-card,.route-log-modal-card{padding:16px;max-height:92dvh}
}

.guide-breadcrumbs { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px; margin-top:8px; font-size:.85rem; }
.breadcrumb-link,.feed-route-link { border:0; padding:0; background:transparent; color:var(--accent); font:inherit; text-align:left; cursor:pointer; }
.breadcrumb-link:hover,.feed-route-link:hover { text-decoration:underline; }
.breadcrumb-link:focus-visible,.feed-route-link:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.see-on-map { margin-bottom:10px; }

.map-column { position:relative; }
.map-back-to-guide { position:absolute; top:12px; right:12px; z-index:2; min-height:44px; padding:10px 16px; border:1px solid var(--border); border-radius:10px; background:#fff; color:#173e35; font:inherit; font-weight:700; cursor:pointer; box-shadow:0 2px 8px #0002; }
.map-back-to-guide:hover { background:#edf6f2; }
.map-back-to-guide:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }

.map-display-controls { position:absolute; top:68px; right:12px; z-index:2; width:160px; box-sizing:border-box; padding:12px; border:1px solid var(--border); border-radius:10px; background:#fff; color:#173e35; box-shadow:0 2px 8px #0002; }
.map-display-controls label { display:block; margin-bottom:6px; font-size:.8rem; font-weight:700; }
.map-display-controls select { width:100%; min-height:40px; font:inherit; border:1px solid #b9cbc3; border-radius:6px; background:white; color:#173e35; }
.map-dimension-buttons { display:flex; margin-top:10px; gap:6px; }
.map-dimension-buttons button { flex:1; min-height:40px; border:1px solid #b9cbc3; border-radius:6px; background:white; color:#173e35; font:inherit; cursor:pointer; }
.map-dimension-buttons button[aria-pressed="true"] { background:#173e35; color:white; }
.map-display-controls :is(button,select):focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
#map-display-status { margin:10px 0 0; font-size:.75rem; line-height:1.4; }

.floating-area-pin { display:flex; flex-direction:column; align-items:center; pointer-events:none; }
.floating-area-pin-label { max-width:220px; padding:8px 13px; border:1px solid #ffffffa6; border-radius:999px; background:#173e35; color:#fff; font:700 12px/1.3 "Space Grotesk",sans-serif; text-align:center; box-shadow:0 3px 12px #0005; pointer-events:auto; cursor:pointer; }
.floating-area-pin-label:hover { background:#28634f; }
.floating-area-pin-label:focus-visible { outline:3px solid #ffca28; outline-offset:3px; }
.floating-area-pin-stem { width:2px; height:46px; background:linear-gradient(#fff,#ffffffa6); box-shadow:0 0 2px #0008; }
.floating-area-pin-dot { width:8px; height:8px; border:2px solid white; border-radius:50%; background:#173e35; box-sizing:border-box; box-shadow:0 1px 4px #0006; }
.floating-area-pin.is-selected { z-index:1; }
.floating-area-pin.is-selected .floating-area-pin-label { background:#ffca28; color:#173e35; border-color:#fff; }
.floating-area-pin.is-selected .floating-area-pin-stem { background:#ffca28; }
.floating-area-pin.is-selected .floating-area-pin-dot { background:#ffca28; }

.mobile-subarea-routes { display:none; }
@media(max-width:900px) {
  .app-shell--guide,.app-shell--community { align-content:start; }
}
@media(max-width:760px) {
  .mobile-subarea-routes { display:block; }
  .mobile-subarea-routes h3 { margin:0 0 10px; font-size:1rem; }
  .subarea-route-list { display:grid; gap:6px; }
}

.map-3d-controls { position:absolute; bottom:38px; left:12px; z-index:2; width:min(310px,calc(100% - 24px)); padding:10px; border:1px solid var(--border); border-radius:10px; background:#fff; color:#173e35; box-shadow:0 2px 8px #0002; }
.map-3d-control-heading { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:8px; font-size:.8rem; }
#map-pitch-value { color:#69736c; }
.map-3d-control-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.map-3d-control-grid button { min-height:44px; padding:6px; border:1px solid #b9cbc3; border-radius:7px; background:#f7f4ec; color:#173e35; font:600 .8rem/1.2 "Space Grotesk",sans-serif; touch-action:manipulation; }
.map-3d-control-grid button:hover { background:#edf6f2; }
.map-3d-control-grid button:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
@media(max-height:480px) { .map-3d-controls { width:min(540px,calc(100% - 24px)); } .map-3d-control-grid { grid-template-columns:repeat(6,minmax(0,1fr)); } }

.logbook-route-link { justify-self:start; padding:0; border:0; background:none; color:var(--accent); font:inherit; font-weight:700; line-height:1.4; text-align:left; text-decoration:underline; }
.map-tools { position:absolute; top:12px; right:12px; z-index:3; display:grid; grid-template-columns:44px; gap:6px; max-height:calc(100% - 24px); overflow-y:auto; }
.map-tools button { position:static; width:44px; height:44px; min-height:44px; padding:0; border:1px solid var(--border); border-radius:9px; background:#fff; color:#173e35; font:700 1.3rem/1 sans-serif; box-shadow:0 2px 7px #0002; touch-action:manipulation; }
.map-tools button[aria-expanded="true"] { background:#173e35; color:white; }
.map-tools #map-camera-widget { font-size:.9rem; }
.map-tools button:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
.map-display-controls,.map-3d-controls,.map-search-panel { top:12px; right:68px; bottom:auto; left:auto; width:min(310px,calc(100% - 80px)); max-height:calc(100% - 24px); overflow-y:auto; }
.map-search-panel { position:absolute; z-index:2; padding:12px; border:1px solid var(--border); border-radius:10px; background:white; box-shadow:0 2px 8px #0002; }
.map-search-panel label { display:block; margin-bottom:6px; font-size:.85rem; font-weight:700; }
#map-search-input { width:100%; min-height:44px; padding:10px; border:1px solid var(--border); border-radius:7px; }
#map-search-results { display:grid; gap:6px; margin-top:10px; font-size:.85rem; }
.map-search-result { display:grid; gap:3px; min-height:44px; padding:9px; border:1px solid var(--border); border-radius:7px; background:var(--soft); text-align:left; }
.map-search-result span { color:var(--muted); }
@media(max-height:480px) { .map-3d-control-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
/* Map buttons: translucent cream and forest-green theme. */
.map-column button { background:rgba(255,253,248,.82); color:var(--text); border-color:var(--border); }
.map-column button:hover { background:rgba(247,244,236,.95); color:var(--text); }
.map-column button[aria-expanded="true"],.map-column button[aria-pressed="true"] { background:rgba(226,237,226,.95); color:var(--text); border-color:var(--accent); }
.map-column .floating-area-pin-label,.map-column .floating-area-pin.is-selected .floating-area-pin-label { background:rgba(255,253,248,.82); color:var(--text); }
.map-column .maplibregl-ctrl-group { background:transparent; }
.map-column .maplibregl-ctrl button .maplibregl-ctrl-icon { filter:brightness(0); }
.map-column .map-search-result span { color:var(--text); }

/* Publication controls and community competitions */
.data-permissions { margin: 1.25rem 0; padding: 1rem; border: 1px solid var(--border, #d9d3c8); border-radius: 12px; }
.data-permissions label { display:flex; align-items:flex-start; gap:.65rem; margin:.8rem 0; }
.data-permissions input { width:18px; height:18px; flex-shrink:0; accent-color:#76684f; }
.community-tabs { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1rem; }
.community-tabs button { padding:.65rem .9rem; border:1px solid #d9d3c8; border-radius:10px; background:rgba(241,235,224,.85); color:#24241e; cursor:pointer; }
.community-tabs button.is-active { background:#dfd4be; font-weight:700; }
.leaderboard-controls { display:flex; flex-wrap:wrap; gap:1rem; }
.leaderboard-controls label { display:grid; gap:.4rem; }
.leaderboard-controls select,.leaderboard-controls input { padding:.65rem; max-width:200px; }
.leaderboard-table { width:100%; border-collapse:collapse; }
.leaderboard-table th,.leaderboard-table td { padding:.8rem .5rem; text-align:left; border-bottom:1px solid #ded8cc; }
.hall-season { margin:1rem 0; padding:1rem; background:rgba(241,235,224,.65); border-radius:12px; }
.send-history { margin-top:1rem; display:grid; gap:.5rem; }
.send-history-row { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; }
@media(max-width:600px) { .community-tabs button { flex:1 1 auto; font-size:.85rem; } .leaderboard-table th,.leaderboard-table td { padding:.6rem .3rem; font-size:.85rem; } }

#community-refresh { display:block; margin:0 0 1rem auto; }

/* Mobile and tablet primary navigation; desktop uses the hamburger. */
.bottom-nav { display:none; }
@media(max-width:1199px) {
  :root { --bottom-nav-height:calc(70px + env(safe-area-inset-bottom, 0px)); }
  .account-menu .desktop-primary-nav { display:none; }
  .bottom-nav { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); position:fixed; inset:auto 0 0; z-index:900; min-height:var(--bottom-nav-height); padding:6px max(8px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px)); background:var(--surface); border-top:1px solid var(--border); box-shadow:0 -3px 14px #18211b0b; }
  .bottom-nav button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-height:56px; border:0; border-radius:10px; background:transparent; color:var(--muted); font-size:.76rem; }
  .bottom-nav svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
  .bottom-nav button.is-active { background:var(--soft); color:var(--accent-dark); font-weight:700; }
  .app-shell { height:calc(100dvh - var(--bottom-nav-height)); }
  .app-shell--map { height:calc(100dvh - var(--bottom-nav-height)); min-height:0; padding-bottom:0; }
}
@media(max-width:900px) {
  .app-shell--guide,.app-shell--community { height:auto; min-height:100dvh; padding-bottom:calc(var(--bottom-nav-height) + 12px); }
}

button,input,select,textarea { font-family:var(--heading-font); }

.guide-coordinates { margin-top:1.25rem; padding-top:1rem; border-top:1px solid var(--border); }
.guide-coordinates h3 { margin:0 0 .5rem; font-size:1rem; }
.guide-coordinates p { font-size:.88rem; }
.guide-coordinate-actions { display:flex; flex-wrap:wrap; gap:.5rem; }
.guide-coordinate-actions input { flex:1 1 210px; min-width:0; padding:.7rem; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--text); font-family:var(--body-font); }
.guide-coordinate-actions button { min-height:44px; }
.coordinate-copy-status { min-height:1.2em; margin:.5rem 0 0; }

/* Area popups stay compact while their map pans them into view. */
.area-map-popup .maplibregl-popup-content { overflow:visible; max-height:none; padding:12px 14px; border-radius:12px; background:var(--surface); color:var(--text); font-family:var(--body-font); }
.area-map-popup h3 { margin:0 16px 8px 0; font-size:1rem; }
.area-map-popup .map-popup-description { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; margin:0 0 10px; line-height:1.4; font-size:.85rem; }
.area-map-popup .map-popup-facts { display:flex; flex-wrap:wrap; gap:5px 10px; font-size:.78rem; }
.area-map-popup .map-popup-summary { font-size:.78rem; margin:8px 0; }
.area-map-popup .map-popup-action { margin-top:10px; min-height:40px; padding:8px 12px; border:1px solid var(--border); border-radius:8px; background:var(--soft); color:var(--accent-dark); }

.route-title-row { flex-wrap:wrap; }
.route-name-text { flex:1 1 150px; }
.route-title-coordinates { flex:0 1 auto; margin:0 0 0 auto; padding:0; border:0; font-size:.8rem; font-weight:400; font-family:var(--body-font); }
.route-title-coordinates .guide-coordinate-actions { flex-wrap:nowrap; align-items:center; }
.route-title-coordinates input { flex:0 1 205px; width:205px; max-width:calc(100vw - 130px); padding:.5rem .6rem; font-size:.8rem; }
.route-title-coordinates button { min-height:36px; padding:.5rem .65rem; font-size:.8rem; }
.route-title-coordinates .coordinate-copy-status { display:block; min-height:0; font-size:.75rem; margin:0; }
.route-title-coordinates .coordinate-copy-status:not(:empty) { margin-top:.3rem; }

.route-title-row { justify-content:flex-start; }
.route-name-text { flex:0 1 auto; }
.route-title-coordinates { margin-left:0; text-align:left; }
.coordinate-value { user-select:text; cursor:text; font-family:var(--body-font); font-size:.8rem; font-weight:400; line-height:1.5; }
.guide-coordinate-actions { align-items:center; }

.area-map-popup .guide-coordinates { margin-top:10px; padding-top:8px; }
.area-map-popup .guide-coordinates h3 { margin:0 0 5px; font-size:.78rem; }
.area-map-popup .guide-coordinate-actions { gap:6px; }
.area-map-popup .guide-coordinate-actions button { min-height:32px; padding:4px 8px; font-size:.75rem; }
.area-map-popup .coordinate-value { font-size:.75rem; }
.area-map-popup .coordinate-copy-status { min-height:0; margin:4px 0 0; font-size:.72rem; }

.area-map-popup h3 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.area-map-popup .map-popup-description { -webkit-line-clamp:2; }
.area-map-popup .map-popup-facts span { max-width:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.area-map-popup .map-popup-summary { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.area-map-popup--short .map-popup-description { -webkit-line-clamp:1; }
.area-map-popup--short .map-popup-summary { display:none; }
.area-map-popup--tiny .map-popup-description,.area-map-popup--tiny .map-popup-facts { display:none; }
.area-map-popup--tiny .maplibregl-popup-content { padding:8px 12px; }
.area-map-popup--tiny .guide-coordinates { margin-top:6px; padding-top:6px; }

/* Keep touch keyboards from triggering input focus zoom. */
@media(max-width:1199px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select,textarea { font-size:16px; }
  .filter-grid input,.filter-grid select,#map-search-input { font-size:16px; }
}

.leaderboard-climber-link { padding:0; border:0; background:none; color:var(--accent); text-align:left; text-decoration:underline; font:inherit; cursor:pointer; }
.leaderboard-route-list { display:grid; gap:10px; }
.leaderboard-route-card { display:grid; gap:6px; padding:12px; border:1px solid var(--border); border-radius:10px; background:var(--surface); }
.leaderboard-route-card small { color:var(--muted); }
.connection-badge {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 12px;
  border-radius: 5px;
  background: #c51f28;
  color: #fff;
  opacity: 1;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  white-space: nowrap;
  pointer-events: none;
}
.offline-preferences { padding: 16px 0; border-top: 1px solid var(--border); }
.offline-preferences label { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; }
.offline-preferences input { margin-top: 4px; flex: 0 0 auto; }
.offline-map-unavailable { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; padding: 4rem; text-align: center; background: var(--surface); color: var(--muted); }
.offline-preferences small { display: block; color: var(--muted); line-height: 1.5; margin-top: 3px; }

.app-header {
  background-image: url("./images/header.png");
  background-size: cover;
  background-position: center;
}

.app-logo {
  display: block;
  width: auto;
  height: 54px;
  max-width: 160px;
  object-fit: contain;
}