/* Full-bleed map layout. One layout manager (web/js/map-layout.js) measures the chrome (control row, toolbar, side
   panel, KPI bar, legend) and publishes the free map area as --map-top / --map-right / --map-foot / --map-bottom /
   --map-left. Every overlay positions itself from these variables, so nothing overlaps toolbar, panel or zoom buttons. */
:root { --map-top: 104px; --map-right: 12px; --map-foot: 34px; --map-bottom: 34px; --map-left: 12px; --top-chrome-bottom: 62px; --legend-h: 0px; }

/* ---- shell: the map fills the window, everything else floats above it */
body:not(.orientation-open) .app{display:block;width:100%;height:100dvh;min-height:0;overflow:hidden}
body:not(.orientation-open) .main{width:100%;height:100%;overflow:hidden}
body:not(.orientation-open) .sidebar{display:none;position:fixed;z-index:40;top:var(--top-chrome-bottom);left:12px;bottom:12px;width:250px;border-radius:16px;overflow:auto;box-shadow:0 12px 40px #103b3a30}
body:not(.orientation-open).map-nav-open .sidebar{display:flex;flex-direction:column;flex-wrap:nowrap}
body:not(.orientation-open) .steps{flex-direction:column;overflow:visible;flex:initial;width:auto}
body:not(.orientation-open) .sidebar-foot{margin-top:auto;flex-direction:column;align-items:flex-start}

/* ---- row 2: search and tools, below the control row, full width so it never wraps at 1440 */
body:not(.orientation-open) .topbar{position:absolute;z-index:20;top:var(--top-chrome-bottom);left:12px;right:12px;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:6px 8px;background:#fffffff5;flex-wrap:wrap;gap:6px 10px}
body:not(.orientation-open) .topbar .search{flex:1 1 200px;min-width:170px;max-width:380px;width:auto}
body:not(.orientation-open) .topbar .search input{padding:7px 10px}
body:not(.orientation-open) .top-actions{flex-wrap:wrap;gap:6px}
body:not(.orientation-open) .topbar .ghost,body:not(.orientation-open) .topbar select{padding:6px 10px;font-size:12.5px}
body:not(.orientation-open) .topbar #hazard{max-width:180px}
body:not(.orientation-open) .project-status{max-width:20ch;overflow:hidden;text-overflow:ellipsis}

body:not(.orientation-open) .workspace,body:not(.orientation-open) .workspace.wide{position:relative;display:block;flex:1;width:100%;height:100%;min-height:0}
body:not(.orientation-open) .map-wrap{position:absolute;inset:0;height:100%;width:100%}
body:not(.orientation-open) .panel{display:none;position:absolute;z-index:15;right:12px;top:var(--map-top);bottom:36px;width:min(460px,calc(100% - 24px));border:1px solid var(--line);border-radius:16px;background:#f4f7f3f5;box-shadow:0 10px 40px #123b3926;overflow:auto;padding:16px}
body:not(.orientation-open) .workspace.wide .panel{width:min(560px,calc(100% - 24px))}
body:not(.orientation-open).map-panel-open .panel{display:flex}

/* ---- row 1: skip link, menu, step rail, panel and focus toggles (DOM order = visual order) */
.map-chrome{position:fixed;top:0;left:0;right:0;z-index:30;pointer-events:none}
.map-chrome>*{pointer-events:auto}
.skip-link{position:absolute;left:12px;top:-100px;background:#164c43;color:#fff;padding:10px 14px;border-radius:0 0 12px 12px;font-size:13px;font-weight:650;text-decoration:none}
.skip-link:focus{top:0}
.map-layout-controls{display:flex;gap:8px;align-items:flex-start;padding:12px 12px 0;pointer-events:none}
.map-layout-controls>*{pointer-events:auto}
.map-layout-controls>button{padding:10px 14px;border:1px solid #bccfc6;border-radius:12px;background:#fff;color:#16302f;font-size:13px;font-weight:650;box-shadow:0 3px 15px #16302f18;min-height:40px;white-space:nowrap}
.map-layout-controls>button[aria-expanded=true],.map-layout-controls>button[aria-pressed=true]{background:#164c43;color:#fff;border-color:#164c43}
.map-layout-controls button:focus-visible{outline:3px solid #ce8c25;outline-offset:3px}
#map-panel-toggle{margin-left:auto}
.orientation-open .map-chrome,body.workshop .map-chrome{display:none}

/* always-visible compact stepper (01–09): the "Menü" sidebar is no longer needed to change step at ≥ 1024 px */
.map-steps{display:flex;gap:3px;align-items:center;min-width:0;background:#fffffff2;border:1px solid #bccfc6;border-radius:14px;padding:4px;box-shadow:0 3px 15px #16302f18;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
.map-layout-controls .map-steps button{display:flex;gap:5px;align-items:baseline;border:0;background:transparent;border-radius:10px;padding:7px 9px;font-size:12.5px;font-weight:600;color:#254842;min-height:32px;white-space:nowrap;box-shadow:none}
.map-layout-controls .map-steps button i{font-style:normal;font-size:11px;font-weight:700;color:#6d8a83;font-variant-numeric:tabular-nums}
.map-layout-controls .map-steps button:hover:not(:disabled){background:#e7f0ec}
.map-layout-controls .map-steps button[aria-current=step]{background:#164c43;color:#fff}
.map-layout-controls .map-steps button[aria-current=step] i{color:#d9ec9c}
.map-layout-controls .map-steps button:disabled{opacity:.42;cursor:default}
@media(max-width:1180px){.map-layout-controls .map-steps button{padding:7px 7px;font-size:12px}}
@media(max-width:1023px){.map-steps{display:none}}
body.map-clean .map-steps{display:none}

/* ---- map controls and attribution inside the free area */
body:not(.orientation-open) .maplibregl-ctrl-top-right{top:var(--map-top);right:var(--map-right)}
body:not(.orientation-open) .maplibregl-ctrl-bottom-right{right:var(--map-right)}
/* in the split comparison both map containers already end left of the panel: their controls only need the normal inset */
body:not(.orientation-open) .map-wrap.split .maplibregl-ctrl-top-right,
body:not(.orientation-open) .map-wrap.split .maplibregl-ctrl-bottom-right{right:10px}
body.map-clean:not(.orientation-open) .topbar{display:none}

/* ---- phone: compact toolbar and a bottom sheet with peek / half / full */
.sheet-grip{display:none;position:fixed;z-index:16;left:0;right:0;top:var(--sheet-top,55dvh);height:28px;border:0;background:transparent;padding:0;touch-action:none}
.sheet-grip::before{content:'';display:block;width:46px;height:5px;margin:10px auto 0;border-radius:3px;background:#8aa49c;box-shadow:0 0 0 6px #ffffff00}
.sheet-grip:focus-visible{outline:3px solid #ce8c25;outline-offset:-3px}
@media(max-width:900px){
  body:not(.orientation-open) .topbar{left:8px;right:8px;padding:6px;gap:6px}
  body:not(.orientation-open) .topbar .search{flex:1 1 auto;min-width:0;max-width:none}
  body:not(.orientation-open) .top-actions{display:none;width:100%}
  body:not(.orientation-open).map-tools-open .top-actions{display:flex}
  body:not(.orientation-open) .crumb{display:none}
  body:not(.orientation-open) .sidebar{top:var(--top-chrome-bottom);max-width:calc(100vw - 24px)}
  body:not(.orientation-open) .panel,body:not(.orientation-open) .workspace.wide .panel{left:0;right:0;width:100%;top:var(--sheet-top,55dvh);bottom:0;border-radius:18px 18px 0 0;border-left:0;padding:26px 12px 12px;box-shadow:0 -8px 30px #123b3926;background:#f4f7f3fa}
  body:not(.orientation-open).map-panel-open .sheet-grip{display:block}
  .map-layout-controls{flex-wrap:wrap;padding:8px 8px 0}
  .map-layout-controls>button{padding:9px 11px;font-size:12.5px}
}
@media(min-width:901px){#map-tools-toggle{display:none}}