@import url('./map-print.css');
/* Shared visual roles: text labels, white fields, filled actions, outlined choices. */
:root{--control-action:#e1ece5;--control-action-hover:#d3e3d9;--control-border:#aebdb5;--control-ink:#243e34}
html body :is(input,select,textarea):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=hidden]){background:#fff;color:var(--control-ink);border:1px solid var(--control-border);border-radius:6px;font:400 15px/1.45 var(--ui-font,system-ui);min-height:44px;padding:10px 12px;box-shadow:inset 0 1px 2px #213b2910}
html body :is(input,textarea)::placeholder{color:#79877f;opacity:1}
html body input[type=file]::file-selector-button{background:#eef4f0;color:#28533c;border:1px solid #aec2b5;border-radius:5px;padding:6px 10px;margin-inline-end:10px;font:600 13px var(--ui-font,system-ui);cursor:pointer}
html body :is(input[type=checkbox],input[type=radio]){accent-color:var(--control-action)}
html body :is(.workspace,.auth-card,.map-tools,dialog) label{color:#596b63;font-size:13px;font-weight:600}
html body :is(button,.button):where(:not(.maplibregl-map *,.workspace-rail *,.password-toggle,.basemap-card,.terrain-toggle,.note-group-expand)){background:var(--control-action);color:#315541;border:1px solid #91ac9c;border-radius:7px;font-weight:600;text-align:center;box-shadow:none}
html body :is(button,.button):where(:not(.maplibregl-map *,.workspace-rail *,.password-toggle,.basemap-card,.terrain-toggle,.note-group-expand)):hover{background:var(--control-action-hover);color:#294936}
html body :is(button,.button):is(.secondary,[aria-pressed],[role=tab]),html body .settings-tabs button,html body .planner-targets button{background:#fff;color:#315b44;border:1px solid #a6bbad;box-shadow:none}
html body :is(button,.button):is(.secondary,[aria-pressed],[role=tab]):hover{background:#edf5ef;color:#244c36}
html body :is(button[aria-pressed=true],[role=tab][aria-selected=true]){background:#e4f1e9;color:#1f5537;border-color:#287653;box-shadow:inset 0 -3px #287653}
html body :is(.search-result,.notification-item){background:#fff;color:#263e33;text-align:start;border:0;border-bottom:1px solid #dce5df;border-radius:0;box-shadow:none}
html body :is(.search-result,.notification-item):hover{background:#eef5f0;color:#263e33}
html body .notification-item.unread{background:#eaf4ed;border-inline-start:3px solid #287653}
html body .site-section-links a,html body .settings-sidebar a{border:1px solid transparent;background:transparent;text-align:start}
html body .site-section-links a:hover,html body .settings-sidebar a:hover{background:#f1f6f3;border-color:#d4e1d8}
html body .settings-sidebar a[aria-current=page]{background:#e8f3eb;border-color:#9db9a7;color:#23583b}
html body .settings-extra>summary{background:transparent;border:1px solid #b6c8bb;border-radius:7px;color:#345742;padding:10px 12px}
html body :is(button,a,input,select,textarea,summary):focus-visible{outline:3px solid #5d9f7d;outline-offset:3px}
html body button:disabled{opacity:.5;cursor:not-allowed}
html body :is(input,select,textarea):disabled{background:#f0f3f1;color:#7a887f;cursor:not-allowed}
/* Route entries are a list, including when they use buttons for keyboard access. */
html body #route-list button{display:flex;align-items:center;gap:14px;text-align:start;background:transparent;color:#263e33;border:0;border-bottom:1px solid #e3e9e5;border-radius:0;padding:16px 10px;margin:0;min-height:74px;font-weight:400;box-shadow:none}
html body #route-list button:hover{background:#f0f6f2;color:#263e33}
html body #route-list button[aria-pressed=true]{background:#e7f2eb;box-shadow:inset 4px 0 #287653}
html[dir=rtl] body #route-list button[aria-pressed=true]{box-shadow:inset -4px 0 #287653}
/* Compact icon controls retain their existing geometry and map semantics. */
html body .password-field .password-toggle{background:transparent;color:#527566;border:0}
html body .password-field .password-toggle:hover{background:#eaf2ec}
html body .site-language{min-height:36px;font-size:12px;padding:6px 8px}
html body .map-workspace :is(.workspace-expand,.workspace-close){background:#f2f6f2;color:#476452;border:0;box-shadow:none}
html body .map-workspace :is(.workspace-expand,.workspace-close):hover{background:#e3ede5;color:#476452}
html body .basemap-card[aria-pressed]{background:#fff;color:#315b44;border:1px solid #a6bbad}
html body .basemap-card[aria-pressed=true]{background:#e4f1e9;border-color:#287653}
html body .route-map-actions{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
html body .route-map-actions>:is(button,a){display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:100%;min-height:48px;margin:0;padding:10px 14px;text-align:center;line-height:1.35;font-size:14px}
html body .map-tools .add-menu>:is(#note-add,#community-add,#obstacle-add,#photo-map-add){display:flex;align-items:center;justify-content:center;width:100%;min-height:42px;margin:10px 0;padding:9px 14px;background:var(--control-action);color:#315541;border:1px solid #91ac9c;text-align:center;line-height:1.35}
html body .map-tools .add-menu>:is(#note-add,#community-add,#obstacle-add,#photo-map-add):hover{background:var(--control-action-hover);color:#294936}
html body .map-tools.map-workspace .workspace-close{display:flex;align-items:center;justify-content:center;width:36px;height:36px;min-height:36px;margin:0;padding:0;line-height:1;flex:none}
html body .workspace-close svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
:root body>header nav #account{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;min-height:40px;padding:4px 10px 4px 5px;line-height:1.2;box-sizing:border-box;overflow:hidden}
.account-avatar{display:grid;place-items:center;position:relative;width:30px;height:30px;flex:0 0 30px;border-radius:50%;overflow:hidden;background:#e5eee8;color:#4c6b5a}
.account-avatar svg{display:block;width:24px;height:24px}
.account-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.account-username{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2}
@media(max-width:750px){:root body>header nav #account{max-width:150px;padding-inline:4px 8px}}
/* Switch rows and navigation are not action buttons. */
html body .map-workspace .overlay-options button,html body .map-workspace button[data-layer]{display:flex;align-items:center;gap:12px;width:100%;padding:12px 4px;background:transparent;color:#426452;border:0;border-bottom:1px solid #e5ece7;border-radius:0;box-shadow:none;text-align:start;font-weight:500}
html body .map-workspace button[data-layer]:hover{background:#f3f7f4}
html body .map-workspace .workspace-expand{background:#f3f6f4;border:1px solid #dbe4de;color:#52695d}
html body .map-workspace .planner-modes button{display:flex;align-items:center;justify-content:center;box-sizing:border-box;flex:0 0 42px;width:42px;height:42px;min-height:42px;padding:0;margin:0}
html body .planner-modes svg{display:block;flex:none;width:24px;height:24px}
html body .map-workspace .panel-content>h2{margin-bottom:24px;padding-inline-end:44px}
html body .workspace-settings-links a{display:flex;align-items:center;justify-content:space-between;padding:11px 8px;border-bottom:1px solid #e5ece7;color:#365443}
html body .workspace-settings-links a::after{content:'›';font-size:22px}
html[dir=rtl] body .workspace-settings-links a::after{content:'‹'}
html body .friend-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 0}
.friend-info{display:grid;gap:5px;min-width:0;flex:1}.friend-info strong{font-size:16px;color:#293f34}.friend-actions{display:flex;flex-wrap:wrap;gap:6px}
html body .friend-actions button{margin:0;min-height:36px}
html body .friend-actions .friend-remove{color:#875044;border-color:#cdb5ae;background:#fffaf8}
html body .friend-directory>summary{padding:11px 12px;margin:16px 0 12px;border:1px solid #acbfb2;border-radius:7px;background:#f4f8f5;color:#355744;font-weight:600;cursor:pointer}
html body #note-list .note-list-item{color:#365443}
html body :is(input[type=checkbox],input[type=radio]){accent-color:#729a83}
html body #search-clear{background:#fff;color:#52665b;border-color:#b6c5bc}
html body #search-clear:hover{background:#f3f7f4}
html body .friend-directory>summary{display:flex;align-items:center;justify-content:space-between;gap:10px}
html body .friend-directory>summary::after{content:'⌄';font-size:18px;line-height:1}
html body .friend-directory[open]>summary::after{content:'⌃'}
html body .map-workspace .add-menu{padding-top:12px}
/* Search actions stay together even when results or a status message appear. */
html body #map-search-form{display:flex;flex-direction:column;gap:0}
html body #map-search-form #map-search-input{margin:0}
html body #map-search-form button[type=submit]{margin:16px 0 0}
html body #map-search-form #search-clear{margin:8px 0 0}
.poi-legend-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 32px;width:32px;height:32px;border:1px solid currentColor;border-radius:5px;background:#fff;font:bold 12px/1 sans-serif}
.poi-legend-icon svg{display:block;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.layer-tile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.layer-tile-grid[hidden]{display:none!important}html body .layer-tile-grid .layer-tile{display:flex;flex-direction:column;align-items:stretch;justify-content:start;width:100%;height:auto;min-height:0;padding:4px;margin:0;gap:5px;border:1px solid #d2ddd6;border-radius:8px;background:white;color:#385646;font:12px/1.3 system-ui;text-align:center;white-space:normal}html body .layer-tile-grid .layer-tile[aria-pressed=true]{border:2px solid #537e64;padding:3px;background:#edf5ef}.layer-tile-preview{display:block;overflow:hidden;aspect-ratio:3/2;border-radius:5px}.layer-tile-preview svg{display:block;width:100%;height:100%}.layer-tile:focus-visible{outline:2px solid #386e53;outline-offset:2px}

/* Compact header controls override the generic 44px form fields. */
html body>header .header-map-search input[type=search]{height:30px;min-height:30px;max-height:30px;margin:0;padding:4px 10px;font:400 13px/20px var(--ui-font);box-sizing:border-box;border-radius:8px}
html body>header .header-map-search{height:30px;min-height:0;padding:0;margin-block:0;align-self:center}
html body>header .route-transfer{display:flex;align-items:center;gap:4px;margin:0;flex:none;height:32px}
html body>header .route-transfer>a,html body>header .route-transfer>button{width:32px;height:32px;min-height:32px;padding:5px;border:1px solid #d4ded7;border-radius:6px;box-shadow:none;display:grid;place-items:center}
html body>header .guest-language{position:relative;flex:none;margin:0;display:flex;align-items:center}
html body>header .guest-language .site-language{display:none!important}
html body>header .language-flag,html body>header .language-flag-options button{width:32px;height:30px;min-height:30px;padding:4px;border:1px solid #d4ded7;background:#f5f8f5;border-radius:6px;display:grid;place-items:center}
html body>header .language-flag svg,html body>header .language-flag-options svg{width:23px;height:16px;display:block;stroke:none;border-radius:2px}
html body>header .language-flag-options{position:absolute;top:34px;inset-inline-end:0;display:flex;flex-direction:column;gap:4px;padding:5px;background:white;border:1px solid #d4ded7;border-radius:8px;z-index:100}
html body>header .language-flag-options[hidden]{display:none}
@media(max-width:750px){html body>header:has(.header-map-search){gap:4px;padding-inline:5px!important}html body>header nav #account{max-width:34px;width:34px;padding:3px}html body>header nav #account .account-username{display:none}html body>header .header-map-search{min-width:50px}.header-map-results{top:44px}}

html body>header .header-map-search input[type=search]{height:30px!important;min-height:30px!important;max-height:30px!important;padding:4px 10px!important;font:400 13px/20px var(--ui-font)!important;margin:0!important}
html body>header .route-transfer>a,html body>header .route-transfer>button,html body>header .language-flag,html body>header .language-flag-options button{min-height:30px!important;height:30px!important;width:32px!important;padding:4px!important;margin:0!important}

/* Flat controls, including selected, hover and keyboard states. */
html body :is(button,.button,[role=button],[role=tab],input[type=button],input[type=submit],input[type=reset],.maplibregl-ctrl-group,.route-transfer>a,.route-link,.map-tools summary,.site-back,.language-flag){box-shadow:none!important;text-shadow:none!important}

html body .maplibregl-ctrl.terrain-layer-stack{gap:10px;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important}
html body .maplibregl-ctrl.terrain-layer-stack>button{display:grid;place-items:center;box-sizing:border-box;width:40px!important;height:40px!important;min-height:40px;margin:0!important;padding:0!important;border:1px solid #d5e0d9!important;border-radius:12px!important;background:#fff!important;box-shadow:none!important}
html body .terrain-layer-stack>.route-opacity-control{margin:0!important;border-radius:12px}