/* Design system: theme.css = tokens; here = semantic + layout. Spacing/motion/typography scale across breakpoints. */
:root{
  color-scheme: light;

  /* Semantic tokens – from theme.css */
  --bg: var(--mo-bg);
  --surface: var(--mo-card);
  --surface2: var(--mo-card);
  --border: var(--mo-border);
  --border-soft: var(--mo-border-soft);
  --text: var(--mo-dark);
  --muted: var(--mo-muted);
  --muted2: var(--mo-muted2);
  --shadow: var(--mo-shadow);
  --primary: var(--mo-primary);
  --primary2: var(--mo-orange);
  --primary-hover: var(--mo-primary-hover);
  --primary-light: var(--mo-primary-light);

  /* Status */
  --danger: #ef4444;
  --warn: #f59e0b;
  --ok: #22c55e;

  /* Layout – tied to spacing scale where possible */
  --topbar-h: 44px;
  --page-pad: clamp(var(--space-3), 1.8vw, var(--space-5));
  --gap-lg: clamp(var(--space-3), 1.4vw, var(--space-4));
  --panel-w: clamp(360px, 30vw, 480px);
  --sidebar-w: 260px;
  --sidebar-w-collapsed: 76px;
  --strip-w: 64px;
  --strip-w-expanded: 220px;
  --radius: 10px;
  --radius2: 14px;
  --pad: var(--space-4);
  --pad2: var(--space-5);
  --gap: var(--space-3);
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --fs-12: var(--mo-font-xs);
  --fs-13: 0.8125rem;
  --fs-14: var(--mo-font-sm);
  --fs-16: var(--mo-font-base);
}

*{ box-sizing: border-box }
/* Responsive typography: theme.css html font-size clamp(); all rem/var(--fs-*) scale. */
html{
  height: 100%;
  height: 100dvh;
  -webkit-text-size-adjust: 100%;
}
html,body{
  overflow-x: hidden;
  overflow-y: hidden;
  width: 100%;
}
body{
  margin: 0;
  min-height: 100%;
  min-height: 100dvh;
  font-family: var(--font);
  font-size: var(--fs-14);
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Consistent focus ring for keyboard users (industry-standard a11y) */
:focus-visible{
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}
img, video, iframe{ max-width: 100%; height: auto }
.skip-link{
  position:absolute;
  left:-999px;
  top:10px;
  padding:10px 12px;
  border-radius: 10px;
  background: var(--surface2);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  z-index: 9999;
}
.skip-link:focus{left:10px}

.muted{color: var(--muted)}
.fs-12{ font-size: var(--fs-12) }
.fs-13{ font-size: var(--fs-13) }
.fs-14{ font-size: var(--fs-14) }
.hide-sm{display:block}
.show-sm{display:none}

.topbar{
  position: sticky;
  top: 0;
  z-index: 1100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--gap-lg);
  min-height: var(--topbar-h);
  height: var(--topbar-h);
  padding: 0 var(--page-pad);
  border-bottom: 1px solid var(--border);
  background: var(--mo-white);
  backdrop-filter: blur(10px);
}
/* Strip + hamburger before project */
.topbar__strip{
  flex-shrink: 0;
  width: 52px;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.25);
  position: relative;
}
.topbar__hamburger{
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  appearance: none;
  border: none;
  background: transparent;
  color: rgba(255,255,255,.9);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.topbar__hamburger:hover{ background: rgba(255,255,255,.1); color: var(--mo-white) }
.topbar__hamburger .icon{ color: inherit }
.topbar__expandMenu{
  position: absolute;
  top: 100%;
  left: 0;
  margin: 0;
  min-width: 240px;
  padding: 6px 0;
  background: var(--mo-dark-teal);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--mo-shadow);
  z-index: 1101;
  display: none;
  flex-direction: column;
  gap: 2px;
}
.topbar__expandMenu[aria-hidden="false"]{ display: flex }
.topbar__expandItem{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  margin: 0;
  appearance: none;
  border: none;
  background: transparent;
  color: var(--mo-white);
  font-size: var(--fs-12);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background .15s ease;
  border-radius: 0;
}
.topbar__expandItem:hover{ background: rgba(255,255,255,.12) }
.topbar__expandItem .icon{ color: rgba(255,255,255,.8); flex-shrink: 0; transform: rotate(-90deg) }

.topbar__left,.topbar__right,.topbar__center{display:flex; align-items:center; gap: var(--gap); min-width: 0}
.topbar__left{flex: 0 0 auto}
.topbar__right{justify-content:flex-end; flex: 1 1 auto}
.topbar__center{position:absolute; left:50%; transform:translateX(-50%)}

/* Topbar reports hamburger (Report Archive / Report Creation) next to project */
.topbarReportsMenu{ position: relative; flex-shrink: 0 }
.topbarReportsMenu .workspaceHamburger__btn{ min-width: 40px; height: 40px; padding: 0; justify-content: center }
.topbarReportsMenu .workspaceHamburger__panel{
  left: 0;
  margin-top: 4px;
  z-index: 1100;
  background: var(--mo-thugeston);
  color: var(--mo-white);
  border-color: rgba(255,255,255,.12);
}
.topbarReportsMenu .workspaceHamburger__panel .workspaceHamburger__item{
  color: var(--mo-white);
}
.topbarReportsMenu .workspaceHamburger__panel .workspaceHamburger__item:hover{
  background: rgba(255,255,255,.1);
  color: var(--mo-white);
}
.topbarReportsMenu .workspaceHamburger__panel .workspaceHamburger__arrow{
  color: rgba(255,255,255,.85);
}
.topbarReportsMenu .workspaceHamburger__panel .workspaceHamburger__divider{
  background: rgba(255,255,255,.2);
}
.topbarReportsMenu .workspaceHamburger__panel .workspaceHamburger__item.is-active{
  color: var(--mo-orange);
}
/* Subpanels (Report Archive list, Report Creation list) – same dark background, white text */
.topbarReportsMenu .workspaceHamburger__subpanel{
  background: var(--mo-thugeston);
  color: var(--mo-white);
  border-color: rgba(255,255,255,.12);
}
.topbarReportsMenu .workspaceHamburger__subpanel .workspaceHamburger__item{
  color: var(--mo-white);
}
.topbarReportsMenu .workspaceHamburger__subpanel .workspaceHamburger__item:hover{
  background: rgba(255,255,255,.1);
  color: var(--mo-white);
}
.topbarReportsMenu .workspaceHamburger__subpanel .workspaceHamburger__arrow{
  color: rgba(255,255,255,.85);
}
.topbarReportsMenu .workspaceHamburger__subpanel .workspaceHamburger__divider{
  background: rgba(255,255,255,.2);
}
.topbarReportsMenu .workspaceHamburger__subpanel .workspaceHamburger__item.is-active{
  color: var(--mo-orange);
}

.topbar__project{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.topbar__logo{
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  object-fit: contain;
}
.topbar__logo--portal{
  height: 32px;
  width: auto;
  max-width: 200px;
}
/* Theme-aware logos: light variant (dark text) on light theme, dark variant (white text) on dark theme */
.topbar__logo--missionos-dark,
.topbar__logoSpaceImg--maxwell-dark{ display: none; }
.topbar__logo--missionos-light,
.topbar__logoSpaceImg--maxwell-light{ display: block; }
[data-theme="dark"] .topbar__logo--missionos-light,
[data-theme="dark"] .topbar__logoSpaceImg--maxwell-light{ display: none; }
[data-theme="dark"] .topbar__logo--missionos-dark,
[data-theme="dark"] .topbar__logoSpaceImg--maxwell-dark{ display: block; }
.topbar__projectText{
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}
.topbar__projectTitle{
  font-weight: 700;
  font-size: var(--fs-14);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
}
.topbar__projectDesc{
  font-size: var(--fs-12);
  font-weight: 500;
  color: var(--mo-light-blue);
  opacity: .95;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
}

/* Dark topbar (reference layout); in dark theme use pure black */
.topbar--dark{
  background: var(--mo-jet-black);
  border-bottom: none;
  position: relative;
}
html[data-theme="dark"] .topbar--dark{
  background: #000;
}
.topbar--dark .topbar__projectTitle{ color: var(--mo-white) }
.topbar--dark .topbar__projectDesc{ color: var(--mo-light-blue) }
.topbar--dark .iconbtn--dark{
  background: transparent;
  border: none;
  color: var(--mo-light-blue);
  box-shadow: none;
}
.topbar--dark .iconbtn--dark:hover{background: rgba(255,255,255,.08); color: var(--mo-white)}
/* Topbar menu items (icon + text + dropdown chevron) */
.topbar__menu{
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.topbar__menuitem{
  appearance: none;
  border: none;
  background: transparent;
  color: var(--mo-light-blue);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: var(--radius);
  font-size: var(--fs-12);
  font-weight: 500;
  transition: background .15s ease, color .15s ease;
}
.topbar__logoSpace{
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 20px;
  padding-right: 12px;
  margin-left: 8px;
  height: 40px;
  flex-shrink: 0;
  border-left: 1px solid rgba(255,255,255,.15);
}
.topbar__logoSpaceImg{
  display: block;
  object-fit: contain;
}
.topbar__logoSpaceImg--brand{
  height: 28px;
  width: auto;
  max-width: 180px;
}
/* Company logo: show only one per theme (override base .topbar__logoSpaceImg display) */
.topbar__logoSpace .topbar__logoSpaceImg--maxwell-dark{ display: none; }
.topbar__logoSpace .topbar__logoSpaceImg--maxwell-light{ display: block; }
[data-theme="dark"] .topbar__logoSpace .topbar__logoSpaceImg--maxwell-light{ display: none; }
[data-theme="dark"] .topbar__logoSpace .topbar__logoSpaceImg--maxwell-dark{ display: block; }
/* Right-side brand logos switch by theme; no filter needed with dedicated light/dark assets */

/* Light theme (or default): topbar white with dark text. Theme is on html (see app.js). */
[data-theme="light"] .topbar--dark,
[data-theme="light"] .topbar,
html:not([data-theme="dark"]) .topbar--dark,
html:not([data-theme="dark"]) .topbar{
  background: var(--mo-white);
  border-bottom: 1px solid var(--border);
}
[data-theme="light"] .topbar--dark .topbar__strip,
html:not([data-theme="dark"]) .topbar--dark .topbar__strip{
  background: rgba(0,0,0,.06);
}
[data-theme="light"] .topbar--dark .topbar__hamburger,
html:not([data-theme="dark"]) .topbar--dark .topbar__hamburger{
  color: var(--mo-dark);
}
[data-theme="light"] .topbar--dark .topbar__hamburger:hover,
html:not([data-theme="dark"]) .topbar--dark .topbar__hamburger:hover{
  background: rgba(0,0,0,.08);
  color: var(--mo-dark);
}
[data-theme="light"] .topbar--dark .topbar__projectTitle,
html:not([data-theme="dark"]) .topbar--dark .topbar__projectTitle{
  color: var(--mo-dark);
}
[data-theme="light"] .topbar--dark .topbar__projectDesc,
html:not([data-theme="dark"]) .topbar--dark .topbar__projectDesc{
  color: #000;
}
[data-theme="light"] .topbar--dark .topbar__menuitem,
html:not([data-theme="dark"]) .topbar--dark .topbar__menuitem{
  color: var(--mo-dark);
}
[data-theme="light"] .topbar--dark .topbar__menuitem:hover,
html:not([data-theme="dark"]) .topbar--dark .topbar__menuitem:hover{
  background: rgba(0,0,0,.06);
  color: var(--mo-dark);
}
[data-theme="light"] .topbar--dark .topbar__logoSpace,
html:not([data-theme="dark"]) .topbar--dark .topbar__logoSpace{
  border-left-color: var(--border);
}
[data-theme="light"] .topbar--dark .topbar__logoSpaceImg,
html:not([data-theme="dark"]) .topbar--dark .topbar__logoSpaceImg,
[data-theme="light"] .topbar--dark .topbar__logoSpaceImg--brand,
html:not([data-theme="dark"]) .topbar--dark .topbar__logoSpaceImg--brand{
  filter: none;
}
[data-theme="light"] .topbar--dark .iconbtn--dark,
html:not([data-theme="dark"]) .topbar--dark .iconbtn--dark{
  color: var(--mo-dark);
}
[data-theme="light"] .topbar--dark .iconbtn--dark:hover,
html:not([data-theme="dark"]) .topbar--dark .iconbtn--dark:hover{
  background: rgba(0,0,0,.06);
  color: var(--mo-dark);
}

.topbar__menuitem:hover{
  background: rgba(255,255,255,.08);
  color: var(--mo-white);
}
.topbar__menuitem .icon{ color: inherit }
.topbar__menuitem-icon{ flex-shrink: 0 }
.topbar__menuitem-chev{ opacity: .9 }

/* Topbar dropdown wraps and panels */
.topbar__dropWrap{ position: relative; }
.topbar__dropPanel{
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  min-width: 200px;
  padding: 6px 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--mo-shadow);
  z-index: 1100;
}
.topbar__dropPanel[aria-hidden="true"]{ display: none; }
.topbar__dropPanel[aria-hidden="false"]{ display: block; }
.topbar__dropItem{
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  border: none;
  background: none;
  color: var(--text);
  font-size: var(--fs-13);
  text-align: left;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  transition: background .1s ease;
  box-sizing: border-box;
}
.topbar__dropItem:hover{ background: var(--mo-border-soft); }
.topbar__dropIcon{
  width: 1.1em;
  text-align: center;
  color: var(--muted2);
  flex-shrink: 0;
}
.topbar__dropItem:hover .topbar__dropIcon{ color: var(--mo-primary); }

/* App layout: fill viewport on all screens */
.appLayout{
  display: flex;
  width: 100%;
  min-width: 0;
  height: calc(100dvh - var(--topbar-h));
  min-height: 0;
  overflow: hidden;
}
.mainWrap{
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
}
.mainWrap .muted,
.mainWrap .crumbs__item,
.mainWrap .field__label{
  color: var(--muted2);
}
.mainWrap .mapArea{
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  padding: 0;
  gap: 0;
}

/* Full-screen workspace: hide topbar, subBar, side strips; map fills viewport */
body.workspace-fullscreen .topbar{ display: none }
body.workspace-fullscreen .appLayout{ height: 100dvh }
body.workspace-fullscreen .mainWrap .subBar,
body.workspace-fullscreen .sideStrip{ display: none }
body.workspace-fullscreen .mainWrap .mapArea{ padding: 0 }
body.workspace-fullscreen .workspace{ border: none; box-shadow: none }
body.workspace-fullscreen .workspace__bar{ padding: 6px 10px }
body.workspace-fullscreen .mapToolsStrip{ left: 8px; top: 8px; bottom: 8px }
.toolbtn__icon{ font-size: 1rem; color: inherit; }
.workspaceFullscreenBtn .toolbtn__icon{ font-size: 1.1rem; }
body.workspace-fullscreen .workspaceFullscreenBtn .toolbtn__icon--expand{ display: none }
body.workspace-fullscreen .workspaceFullscreenBtn .toolbtn__icon--compress{ display: inline-block }
.workspaceFullscreenBtn .toolbtn__icon--compress{ display: none }
.mainWrap .workspace--full{
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
/* Panel in flow: 0 width when closed, takes space when open – no overlap on map */
.mainWrap .mapArea .panel--overlay{
  flex-shrink: 0;
  width: 0;
  min-width: 0;
  overflow: hidden;
  max-height: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  transition: width .22s ease, min-width .22s ease;
}
.mainWrap .mapArea .panel--overlay[hidden]{
  width: 0;
  min-width: 0;
  opacity: 0;
  pointer-events: none;
}
.mainWrap .mapArea .panel--overlay:not([hidden]){
  position: relative;
  z-index: 1000;
  width: var(--panel-w);
  min-width: var(--panel-w);
  opacity: 1;
  pointer-events: auto;
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow);
}

/* Right strip: in flow, above map so tooltips are visible */
.mainWrap .mapArea > .rightStrip{
  flex-shrink: 0;
  min-width: var(--strip-w);
  order: 10;
}
.rightStrip{
  position: relative;
  z-index: 1000;
  flex-shrink: 0;
  width: var(--strip-w);
  min-width: var(--strip-w);
  background: var(--mo-jet-black);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 0;
  gap: 4px;
}
.rightStrip__item{
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  appearance: none;
  border: none;
  background: transparent;
  color: var(--mo-white);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
  position: relative;
}
.rightStrip__item:hover{
  color: var(--mo-orange);
  background: rgba(253, 89, 2, .2);
}
.rightStrip__item.is-active{
  color: var(--mo-white);
  background: var(--mo-orange);
}
.rightStrip__item.is-active:hover{
  background: var(--mo-orange-hover);
  color: var(--mo-white);
}
.rightStrip__item .icon{ color: inherit }
.rightStrip__item.is-active .icon,
.rightStrip__item.is-active:hover .icon{
  color: var(--mo-white);
  fill: var(--mo-white);
}
.rightStrip__item[title]:hover::after{
  content: attr(title);
  position: absolute;
  right: 100%;
  margin-right: 8px;
  top: 50%;
  transform: translateY(-50%);
  padding: 6px 10px;
  background: var(--mo-jet-black);
  color: var(--mo-white);
  font-size: var(--fs-12);
  font-weight: 600;
  white-space: nowrap;
  border-radius: var(--radius);
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
  pointer-events: none;
  z-index: 1001;
}
.mainWrap .subBar{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 4px var(--page-pad);
  min-height: 32px;
  background: var(--mo-border-soft);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-12);
}
.mainWrap .subBar .crumbs__item{color: var(--muted)}
.mainWrap .subBar .crumbs__item--current{color: var(--text); font-weight: 600}
.subBar__right{
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-left: auto;
}
.subBar__lastUpdate{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-12);
  color: var(--muted);
  white-space: nowrap;
}
.subBar__lastUpdate .icon{ color: var(--muted) }
.subBar__time{
  font-size: var(--fs-12);
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
.subBar__label{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-12);
  color: var(--muted);
}
.subBar__labelText{
  white-space: nowrap;
}
.subBar__select{
  appearance: none;
  padding: 4px 24px 4px 8px;
  font: inherit;
  font-size: var(--fs-12);
  color: var(--text);
  background: var(--mo-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%236b7280' d='M6.7 9.3a1 1 0 0 1 1.4 0L12 13.2l3.9-3.9a1 1 0 1 1 1.4 1.4l-4.6 4.6a1 1 0 0 1-1.4 0L6.7 10.7a1 1 0 0 1 0-1.4Z'/%3E%3C/svg%3E") no-repeat right 6px center;
  background-size: 14px 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  min-height: 28px;
}
.subBar__select:hover{ border-color: var(--mo-primary) }
.subBar__select:focus{
  outline: none;
  border-color: var(--mo-primary);
  box-shadow: 0 0 0 2px var(--primary-light);
}
/* Left sidebar – nav + tools, theme-based */
.sideStrip{
  position: relative;
  z-index: 1000;
  width: var(--strip-w);
  flex-shrink: 0;
  background: var(--mo-jet-black);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width .2s ease;
}
.sideStrip--expanded{ width: var(--strip-w-expanded) }
.sideStrip__expand{
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  margin: 8px auto 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  appearance: none;
  border: none;
  background: transparent;
  color: rgba(255,255,255,.65);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .2s ease;
}
.sideStrip__expand:hover{ color: var(--mo-white); background: rgba(255,255,255,.06) }
.sideStrip__expand .icon{ transition: transform .2s ease }
.sideStrip--expanded .sideStrip__expand .icon{ transform: rotate(90deg) }
.sideStrip__nav{
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 0;
}
.sideStrip__item{
  width: 44px;
  height: 44px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  appearance: none;
  border: none;
  background: transparent;
  color: rgba(255,255,255,.65);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.sideStrip__item:hover{
  color: var(--mo-white);
  background: rgba(255,255,255,.06);
}
.sideStrip__item.is-active{
  background: rgba(255,255,255,.1);
  color: var(--mo-light-blue);
}
.sideStrip__item .icon{ color: inherit }
.sideStrip__item[title]{ position: relative }
.sideStrip__item[title]:hover::after{
  content: attr(title);
  position: absolute;
  left: 100%;
  margin-left: 8px;
  top: 50%;
  transform: translateY(-50%);
  padding: 6px 10px;
  background: var(--mo-jet-black);
  color: var(--mo-white);
  font-size: var(--fs-12);
  font-weight: 600;
  white-space: nowrap;
  border-radius: var(--radius);
  box-shadow: var(--mo-shadow);
  pointer-events: none;
  z-index: 1001;
}
.sideStrip__menu{
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 0;
  border-top: 1px solid rgba(255,255,255,.08);
}
.sideStrip__menuItem{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 0 10px;
  margin: 0 auto;
  max-width: 44px;
  appearance: none;
  border: none;
  background: transparent;
  color: rgba(255,255,255,.65);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
  text-align: left;
}
.sideStrip--expanded .sideStrip__menuItem{ justify-content: flex-start; max-width: none; margin: 0 }
.sideStrip__menuItem:hover{ color: var(--mo-white); background: rgba(255,255,255,.06) }
.sideStrip__menuIcon{
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  mask-size: 20px 20px;
  -webkit-mask-size: 20px 20px;
  color: inherit;
}
.sideStrip__menuText{
  flex: 1;
  min-width: 0;
  font-size: var(--fs-12);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  width: 0;
  overflow: hidden;
  transition: opacity .2s ease, width .2s ease;
}
.sideStrip__menuChev{
  flex-shrink: 0;
  color: inherit;
  opacity: 0;
  width: 0;
  overflow: hidden;
  transition: opacity .2s ease, width .2s ease;
}
.sideStrip--expanded .sideStrip__menuItem{ padding: 0 12px; }
.sideStrip--expanded .sideStrip__menuText,
.sideStrip--expanded .sideStrip__menuChev{
  opacity: 1;
  width: auto;
}
.sideStrip--expanded .sideStrip__menuText{ flex: 1 }
.sideStrip--expanded .sideStrip__menuItem:not(:hover) .sideStrip__menuChev{ opacity: .7 }
.sideStrip__section{
  margin-top: auto;
  padding: 10px 8px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.sideStrip__label{
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: .04em;
  color: rgba(255,255,255,.4);
  margin-bottom: 6px;
  padding: 0 4px;
}
.sideStrip .toolPalette{
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}
.sideStrip .toolChip{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.85);
  font-size: var(--fs-12);
  padding: 6px 8px;
}
.icon--sm{width: 14px; height: 14px; mask-size: 14px 14px; -webkit-mask-size: 14px 14px}

.brand{display:flex; align-items:center; gap:10px}
.brand__mark{
  width: 36px; height: 36px;
  display:grid; place-items:center;
  border-radius: var(--radius);
  background: var(--mo-primary);
  color: var(--mo-white);
  font-weight: 800;
  box-shadow: var(--mo-shadow);
}
.brand__name{font-weight: 750; letter-spacing: .2px}
.brand__sub{font-size: var(--fs-12); color: var(--muted2); margin-top: -2px}

.crumbs{display:flex; align-items:center; gap:8px}
.crumbs__sep{color: var(--muted2)}

.layout{
  display:grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--panel-w);
  gap: var(--gap-lg);
  padding: var(--page-pad);
  min-height: calc(100dvh - var(--topbar-h));
}

html[data-sidebar="collapsed"] .layout{
  grid-template-columns: var(--sidebar-w-collapsed) minmax(0, 1fr) var(--panel-w);
}

.sidebar{
  border: 1px solid var(--border);
  border-radius: var(--radius2);
  background: var(--mo-white);
  box-shadow: var(--shadow);
  overflow: hidden;
  display:flex;
  flex-direction:column;
  max-height: calc(100dvh - var(--topbar-h) - (var(--page-pad) * 2));
}
.sidebar__section{
  padding: 14px;
  border-bottom: 1px solid var(--border-soft);
}
.sidebar__section:last-child{border-bottom:0}
.sidebar__title{
  font-size: var(--fs-12);
  letter-spacing: .2px;
  color: var(--muted2);
  font-weight: 700;
  margin-bottom: 10px;
}
.sideNav{display:flex; flex-direction:column; gap: 8px}
.sideNav__item{
  appearance:none;
  border: 1px solid var(--border);
  background: var(--mo-white);
  border-radius: var(--radius);
  padding: 10px 10px;
  display:flex;
  align-items:center;
  gap: 10px;
  cursor: pointer;
  font-weight: 750;
  color: var(--text);
  box-shadow: var(--mo-shadow);
}
.sideNav__item:hover{border-color: var(--mo-primary)}
.sideNav__item.is-active{background: var(--primary-light); border-color: var(--mo-primary)}
.sideNav__dot{width: 10px; height: 10px; border-radius: 999px; background: var(--muted)}
.sideNav__item.is-active .sideNav__dot{background: var(--primary)}
.sideNav__label{white-space: nowrap; overflow:hidden; text-overflow: ellipsis}

.sideTabs{
  position: relative;
  display:flex;
  flex-direction:column;
  gap: 6px;
}
.sideTab{
  appearance:none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  border-radius: var(--radius);
  padding: 10px 10px;
  text-align:left;
  font-weight: 700;
  cursor: pointer;
  transition: color .14s ease, background .14s ease, border-color .14s ease;
  z-index: 1;
}
.sideTab:hover{color: var(--text)}
.sideTab.is-active{color: var(--text)}
.sideTabs__indicator{
  position:absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 40px;
  border-radius: var(--radius);
  background: var(--primary-light);
  box-shadow: var(--mo-shadow);
  transform: translateY(0);
  transition: transform .18s ease, height .18s ease;
}

.toolPalette{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}
.toolChip{
  border: 1px solid var(--border);
  background: var(--mo-border-soft);
  color: var(--text);
  border-radius: 999px;
  padding: 8px 10px;
  font-weight: 750;
  font-size: var(--fs-12);
  cursor: grab;
  user-select: none;
}
.toolChip:active{cursor: grabbing}

html[data-sidebar="collapsed"] .sideNav__label,
html[data-sidebar="collapsed"] .sidebar__title,
html[data-sidebar="collapsed"] .toolChip{
  display:none;
}
html[data-sidebar="collapsed"] .sidebar__section{
  padding: 12px 10px;
}
html[data-sidebar="collapsed"] .toolPalette{
  display:none;
}

.workspace{
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  overflow: hidden;
  background: var(--surface2);
  box-shadow: var(--shadow);
}
.workspace__bar{
  flex-shrink: 0;
  display:flex;
  flex-wrap: wrap;
  align-items:center;
  justify-content: space-between;
  gap: var(--gap);
  padding: 10px 12px;
  min-width: 0;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,.92);
}
.workspace__barLeft{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--gap);
  min-width: 0;
}

.workspaceHamburger{ position: relative; }
.workspaceHamburger__btn{
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.workspaceHamburger__label{
  font-size: var(--fs-13);
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
.workspaceHamburger__panel{
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 6px;
  min-width: 220px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--mo-white);
  box-shadow: var(--mo-shadow);
  z-index: 1200;
  display: none;
  padding: 6px 0;
  overflow: visible;
}
.workspaceHamburger__panel[aria-hidden="false"]{ display: block; }
.workspaceHamburger__header{
  padding: 10px 12px;
  background: var(--mo-primary);
  color: var(--mo-white);
  font-size: var(--fs-13);
  font-weight: 700;
}
.workspaceHamburger__item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  font-size: var(--fs-13);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: background .1s ease;
}
.workspaceHamburger__item:hover{ background: var(--mo-border-soft); }
.workspaceHamburger__arrow{ color: var(--muted2); }
.workspaceHamburger__divider{ height: 1px; background: var(--border-soft); margin: 6px 0; }
.workspaceHamburger__item.is-active{
  color: var(--mo-orange);
  line-height: 1.35;
}

.workspaceHamburger__subpanel{
  position: fixed; /* needed for 3rd/4th level flyouts */
  top: 0; /* set in JS */
  left: 0; /* set in JS */
  min-width: 240px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--mo-white);
  box-shadow: var(--mo-shadow);
  display: none;
  padding: 6px 0;
  z-index: 1201;
  max-height: min(70vh, 520px);
  overflow: auto;
}
.workspaceHamburger__subpanel[aria-hidden="false"]{ display: block; }
.mapTypeCtrl{
  display:flex;
  align-items:center;
  gap: 8px;
  white-space: nowrap;
}
.mapTypeCtrl__label{
  font-size: var(--fs-12);
  color: var(--muted2);
  font-weight: 700;
}
.mapTypeCtrl__btns{
  display:inline-flex;
  gap: 6px;
  align-items:center;
}
/* Map type control: dropdown – top right of map, panel opens below trigger on same side */
.mapTypeCtrl--overlay{
  position: absolute;
  top: 14px;
  right: 14px;
  left: auto;
  pointer-events: auto;
  z-index: 1100;
  display: block !important;
  visibility: visible;
  direction: ltr;
}
.mapTypeCtrl--overlay .mapTypeDropdown{
  position: relative;
  display: inline-block;
  width: auto;
  max-width: none;
  visibility: visible;
  direction: ltr;
}
.mapTypeDropdown__trigger{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  min-width: 160px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.15);
  font-size: var(--fs-13);
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  appearance: none;
  direction: ltr;
}
.mapTypeDropdown__trigger:hover{ border-color: var(--mo-primary) }
.mapTypeDropdown__label{ flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.mapTypeDropdown__panel{
  position: absolute;
  top: 100%;
  right: 0;
  left: auto;
  margin-top: 6px;
  min-width: 200px;
  max-height: min(320px, 60vh);
  overflow-y: auto;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--mo-white);
  box-shadow: var(--mo-shadow);
  z-index: 1001;
  display: none;
  direction: ltr;
  text-align: left;
}
.mapTypeDropdown__panel[aria-hidden="false"]{ display: block }
.mapTypeDropdown__header{
  padding: 10px 12px;
  background: var(--mo-primary);
  color: var(--mo-white);
  font-size: var(--fs-13);
  font-weight: 700;
}
.mapTypeDropdown__option{
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  font-size: var(--fs-13);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: background .1s ease;
}
.mapTypeDropdown__option:hover{ background: var(--mo-border-soft) }
.mapTypeDropdown__option.is-active{ background: var(--primary-light); color: var(--mo-primary); font-weight: 600 }
.mtbtn{
  width: 26px;
  height: 22px;
  padding: 0;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--mo-white);
  color: var(--text);
  font-size: var(--fs-12);
  font-weight: 800;
  cursor: pointer;
  box-shadow: var(--mo-shadow);
}
.mtbtn:hover{border-color: var(--mo-primary)}
.mtbtn.is-active{
  border-color: var(--mo-primary);
  background: var(--primary-light);
}

.seg{
  display:inline-flex;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
  background: var(--mo-border-soft);
}
.seg--full{display:flex; width:100%}
.seg__btn{
  appearance:none;
  border:0;
  background: transparent;
  color: var(--muted);
  padding: 8px 10px;
  border-radius: 999px;
  font-weight: 650;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .15s ease;
  white-space: nowrap;
}
.seg__btn:hover{color: var(--text)}
.seg__btn:active{transform: translateY(1px)}
.seg__btn.is-active{
  background: var(--mo-white);
  color: var(--text);
}

.tools{display:flex; gap: 8px; align-items:center}
.tools{min-height: 44px}
.toolbtn{cursor: grab}
.toolbtn:active{cursor: grabbing}
.toolbtn.is-active{
  background: var(--mo-primary-light);
  border-color: var(--mo-primary);
  color: var(--mo-primary);
}
.toolbtn[data-tool="placepin"].is-active{
  cursor: crosshair;
}
.tools.is-dragover{
  outline: 2px dashed var(--mo-primary);
  outline-offset: 6px;
  border-radius: calc(var(--radius) + 2px);
}
.iconbtn{
  appearance:none;
  border: 1px solid var(--border);
  background: var(--mo-white);
  color: var(--text);
  border-radius: var(--radius);
  padding: 8px;
  cursor: pointer;
  box-shadow: var(--mo-shadow);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.iconbtn:hover{
  transform: translateY(-1px);
  background: var(--mo-white);
  border-color: var(--mo-primary);
}
.iconbtn:active{transform: translateY(0)}
.iconbtn--stack{border-radius: calc(var(--radius) + 2px); width: 38px; height: 38px; padding: 0; font-weight: 900}

.icon{
  width: 18px; height: 18px;
  display:inline-block;
  background: currentColor;
  mask-size: 18px 18px;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: 18px 18px;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}
.icon[data-icon="search"]{mask-image: var(--i-search); -webkit-mask-image: var(--i-search)}
.icon[data-icon="ruler"]{mask-image: var(--i-ruler); -webkit-mask-image: var(--i-ruler)}
.icon[data-icon="pin"]{mask-image: var(--i-pin); -webkit-mask-image: var(--i-pin)}
.icon[data-icon="layers"]{mask-image: var(--i-layers); -webkit-mask-image: var(--i-layers)}
.icon[data-icon="map"]{mask-image: var(--i-map); -webkit-mask-image: var(--i-map)}
.icon[data-icon="theme"]{mask-image: var(--i-theme); -webkit-mask-image: var(--i-theme)}
.icon[data-icon="chev"]{mask-image: var(--i-chev); -webkit-mask-image: var(--i-chev)}
.icon[data-icon="close"]{mask-image: var(--i-close); -webkit-mask-image: var(--i-close)}
.icon[data-icon="refresh"]{mask-image: var(--i-refresh); -webkit-mask-image: var(--i-refresh)}
.icon[data-icon="nav-bulb"]{mask-image: var(--i-nav-bulb); -webkit-mask-image: var(--i-nav-bulb)}
.icon[data-icon="nav-doc"]{mask-image: var(--i-nav-doc); -webkit-mask-image: var(--i-nav-doc)}
.icon[data-icon="nav-folder"]{mask-image: var(--i-nav-folder); -webkit-mask-image: var(--i-nav-folder)}
.icon[data-icon="nav-grid"]{mask-image: var(--i-nav-grid); -webkit-mask-image: var(--i-nav-grid)}
.icon[data-icon="nav-box"]{mask-image: var(--i-nav-box); -webkit-mask-image: var(--i-nav-box)}
.icon[data-icon="nav-globe"]{mask-image: var(--i-nav-globe); -webkit-mask-image: var(--i-nav-globe)}
.icon[data-icon="nav-gear"]{mask-image: var(--i-nav-gear); -webkit-mask-image: var(--i-nav-gear)}
.icon[data-icon="dashboard"]{mask-image: var(--i-dashboard); -webkit-mask-image: var(--i-dashboard)}
.icon[data-icon="user"]{mask-image: var(--i-user); -webkit-mask-image: var(--i-user)}
.icon[data-icon="tools"]{mask-image: var(--i-tools); -webkit-mask-image: var(--i-tools)}
.icon[data-icon="headset"]{mask-image: var(--i-headset); -webkit-mask-image: var(--i-headset)}
.icon[data-icon="expand"]{mask-image: var(--i-expand); -webkit-mask-image: var(--i-expand)}
.icon[data-icon="compress"]{mask-image: var(--i-compress); -webkit-mask-image: var(--i-compress)}
.icon[data-icon="menu"]{mask-image: var(--i-menu); -webkit-mask-image: var(--i-menu)}

/* Inline SVG icons (as CSS masks) */
:root{
  --i-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 4a6 6 0 1 1 0 12a6 6 0 0 1 0-12Zm0 2a4 4 0 1 0 0 8a4 4 0 0 0 0-8Zm9.7 13.3l-3.4-3.4a8 8 0 1 0-1.4 1.4l3.4 3.4a1 1 0 0 0 1.4-1.4Z'/%3E%3C/svg%3E");
  --i-ruler: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M21 7.5L16.5 3a2.1 2.1 0 0 0-3 0L3 13.5a2.1 2.1 0 0 0 0 3L7.5 21a2.1 2.1 0 0 0 3 0L21 10.5a2.1 2.1 0 0 0 0-3ZM9.8 19.3a.1.1 0 0 1-.1 0l-5-5a.1.1 0 0 1 0-.1l1.4-1.4l1 1l1.4-1.4l-1-1l1.4-1.4l1 1l1.4-1.4l-1-1l1.4-1.4l1 1l1.4-1.4l-1-1l1.6-1.6a.1.1 0 0 1 .1 0l5 5a.1.1 0 0 1 0 .1L9.8 19.3Z'/%3E%3C/svg%3E");
  --i-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a7 7 0 0 1 7 7c0 5.2-7 13-7 13S5 14.2 5 9a7 7 0 0 1 7-7Zm0 9.2A2.2 2.2 0 1 0 12 6.8a2.2 2.2 0 0 0 0 4.4Z'/%3E%3C/svg%3E");
  --i-layers: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2l10 6l-10 6L2 8l10-6Zm0 10l10 6l-10 6L2 18l10-6Zm0 3.3L5.8 18L12 21.7L18.2 18L12 15.3Z'/%3E%3C/svg%3E");
  --i-map: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 4l6 2l6-2v16l-6 2l-6-2l-6 2V6l6-2Zm0 2.2L5 7.6v12.2l4-1.3V6.2Zm2 0v12.3l4 1.3V7.5l-4-1.3Zm10 1.4l-4 1.3v12.2l4-1.4V7.6Z'/%3E%3C/svg%3E");
  --i-theme: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a1 1 0 0 1 1 1v1.1a8 8 0 0 1 0 15.8V21a1 1 0 0 1-2 0v-1.1A8 8 0 0 1 11 4.1V3a1 1 0 0 1 1-1Zm1 4.2v11.6a6 6 0 0 0 0-11.6Z'/%3E%3C/svg%3E");
  --i-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M18.3 5.7a1 1 0 0 1 0 1.4L13.4 12l4.9 4.9a1 1 0 1 1-1.4 1.4L12 13.4l-4.9 4.9a1 1 0 1 1-1.4-1.4l4.9-4.9L5.7 7.1a1 1 0 0 1 1.4-1.4L12 10.6l4.9-4.9a1 1 0 0 1 1.4 0Z'/%3E%3C/svg%3E");
  --i-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6.7 9.3a1 1 0 0 1 1.4 0L12 13.2l3.9-3.9a1 1 0 1 1 1.4 1.4l-4.6 4.6a1 1 0 0 1-1.4 0L6.7 10.7a1 1 0 0 1 0-1.4Z'/%3E%3C/svg%3E");
  --i-refresh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M17.65 6.35A8 8 0 0 0 4 12H2a10 10 0 0 1 17.5-5.5l1.5-1.5V2h-5v5l1.5-1.5a6 6 0 0 0-1.85 4.35H18a8 8 0 0 0-.35-3.65ZM20 12h2a10 10 0 0 1-17.5 5.5L3 19V14h5v5l-1.5-1.5A6 6 0 0 0 16 12h4Z'/%3E%3C/svg%3E");
  --i-nav-bulb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1Zm3-19A7 7 0 0 0 5 12c0 2.5 1.5 4.6 3.6 5.6L10 19h4v-1.4l1.4-.9C17.5 16.6 19 14.5 19 12a7 7 0 0 0-7-7Z'/%3E%3C/svg%3E");
  --i-nav-doc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6Zm4 18H6V4h7v5h5v11Z'/%3E%3C/svg%3E");
  --i-nav-folder: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2Z'/%3E%3C/svg%3E");
  --i-nav-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 3v8h8V3H3Zm6 6H5V5h4v4Zm-6 4v8h8v-8H3Zm2 6v-4h4v4H5Zm8-12v8h8V3h-8Zm6 6h-4V5h4v4Zm-6 4v8h8v-8h-8Zm2 6v-4h4v4h-4Z'/%3E%3C/svg%3E");
  --i-nav-box: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20 8H4V6h16v2Zm-2-6H6v2h12V2ZM4 20h16V10H4v10Zm2-8h4v6H6v-6Zm6 0h4v6h-4v-6Z'/%3E%3C/svg%3E");
  --i-nav-globe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 0 1 10 10 10 10 0 0 1-10 10A10 10 0 0 1 2 12 10 10 0 0 1 12 2Zm0 2a8 8 0 0 0-6.5 3.3L6 14h2v2h2l1-2h2l3.5 4H18v-2h-2l-1-2h2l-1.5-2a8 8 0 0 0 0-8.6L14 8h-2V6l-1.5-1.2A8 8 0 0 0 12 4Z'/%3E%3C/svg%3E");
  --i-nav-gear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 15.5a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7Zm0-2a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm0 5.5c-.83 0-1.64.13-2.4.38l-.74-1.85a8 8 0 0 0 6.28 0l-.74 1.85c-.76-.25-1.57-.38-2.4-.38Zm-4.5.5l-1.2 1.8a9 9 0 0 0 2.4 2.4l1.85-.74c-.5-.9-.85-1.9-1.05-2.96H4.5Zm9 0h-2.1a7 7 0 0 1-1.05 2.96l1.85.74a9 9 0 0 0 2.4-2.4L16.5 19.5Zm.5-5.5c0 .36-.03.71-.08 1.05l1.9.75a8 8 0 0 0-.5-3.6l-1.82.72A6 6 0 0 1 17 14Zm-10 0a6 6 0 0 1 .5-2.43l-1.82-.72a8 8 0 0 0-.5 3.6l1.9-.75A6 6 0 0 1 7 14Zm1.2-4.3l1.2 1.8a7 7 0 0 1 1.05-2.96L7.5 8.3a9 9 0 0 0-2.4 2.4l1.85.74Zm9.1 0l.74 1.85a7 7 0 0 1 1.05 2.96l1.85-.74a9 9 0 0 0-2.4-2.4L16.3 10.7Zm-4.5-4.5c.83 0 1.64.13 2.4.38l.74 1.85a8 8 0 0 0-6.28 0l.74-1.85c.76-.25 1.57-.38 2.4-.38Z'/%3E%3C/svg%3E");
  --i-dashboard: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M13 3v6h8V3h-8Zm-2 0H3v4h8V3ZM3 11v10h8V11H3Zm10 0v10h8V11h-8Z'/%3E%3C/svg%3E");
  --i-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 12a4 4 0 1 1 0-8 4 4 0 0 1 0 8Zm0 2c-3.3 0-6 1.8-6 4v2h12v-2c0-2.2-2.7-4-6-4Z'/%3E%3C/svg%3E");
  --i-tools: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5.5 8.5L3 11l2.5 2.5 1.06-1.06L4.62 11l1.94-1.94L5.5 8.5Zm4 0L8 11l1.5 2.5 2.5-1.5L11 11l1-2.5L9.5 8.5Zm8.5 4l-2.5-2.5-1.06 1.06 1.94 1.94-1.94 1.94 1.06 1.06L16 15.5l2.5 2.5 1.5-2.5L17 13l1.5-2.5ZM20.5 3L20 4.5 18 6.5 16.5 5 15 7l1.5 1.5-2.5 2 1.5 1.5 2.5-2 1.5 1.5 2-2.5-1.5-1.5 2-2.5L20.5 3ZM4 19h16v2H4v-2Z'/%3E%3C/svg%3E");
  --i-headset: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 1a7 7 0 0 1 7 7v4h-2V8a5 5 0 0 0-10 0v4H5V8a7 7 0 0 1 7-7Zm0 2a5 5 0 0 0-5 5v6a2 2 0 0 0 2 2h1v4h2v-6H9V10h6v8h-2v4h2v-4h1a2 2 0 0 0 2-2V8a5 5 0 0 0-5-5Z'/%3E%3C/svg%3E");
  --i-expand: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 3v5h2V5h3V3H3Zm13 0v2h3v3h2V3h-5ZM3 16v5h5v-2H5v-3H3Zm16 0v-3h-3v-2h5v5Z'/%3E%3C/svg%3E");
  --i-compress: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 3v3H3v2h4V3H5Zm10 0h-4v5h2V5h3V3ZM3 16v2h2v2h2v-4H3Zm14 0v4h-4v-2h2v-2h2Z'/%3E%3C/svg%3E");
  --i-menu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z'/%3E%3C/svg%3E");
}

.chip{
  appearance:none;
  border: 1px solid var(--border);
  background: var(--mo-white);
  color: var(--text);
  border-radius: 999px;
  padding: 8px 10px;
  cursor: pointer;
  font-weight: 650;
  display:inline-flex;
  align-items:center;
  gap: 8px;
  transition: background .15s ease, transform .15s ease, border-color .15s ease;
}
.chip:hover{background: var(--border-soft); transform: translateY(-1px)}
.chip:active{transform: translateY(0)}
.chip--ghost{background: transparent}
.chip--solid{background: var(--mo-white)}
.chip__chev{color: var(--muted2)}

.field{display:flex; flex-direction:column; gap:6px}
.field--sm{gap:4px}
.field--grow{flex:1}
.field__label{font-size: var(--fs-12); color: var(--muted2); letter-spacing:.2px}
.input, .select{
  width:100%;
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--mo-white);
  color: var(--text);
  outline: none;
  box-shadow: var(--mo-shadow);
  line-height: 1.2;
}
.input:focus, .select:focus{
  border-color: var(--mo-primary);
  box-shadow: 0 0 0 4px var(--primary-light);
}
.select{display:flex; align-items:center; justify-content:space-between; cursor:pointer}
.select__chev{color: var(--muted2)}

/* Custom dropdown with scrollable list */
.dropdown{
  position: relative;
  width: 100%;
}
.dropdown__trigger{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  text-align: left;
}
.dropdown__label{ flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.dropdown__trigger .icon{ color: var(--muted2); flex-shrink: 0 }
.dropdown__panel{
  position: fixed;
  margin-top: 4px;
  max-height: 240px;
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--mo-white);
  box-shadow: var(--mo-shadow);
  z-index: 10000;
  padding: 4px 0;
  min-width: 160px;
}
.dropdown__panel[aria-hidden="true"]{ display: none }
.dropdown__panel[aria-hidden="false"]{ display: block }
.dropdown__group{
  padding: 4px 0;
}
.dropdown__groupLabel{
  padding: 4px 12px;
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--muted);
  text-transform: uppercase;
}
.dropdown__option{
  display: block;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: var(--fs-14);
  text-align: left;
  cursor: pointer;
  transition: background .1s ease;
}
.dropdown__option:hover{ background: var(--mo-border-soft) }
.dropdown__option.is-selected{ background: var(--primary-light); color: var(--mo-primary); font-weight: 600 }
.hidden{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0 }

.btn{
  appearance:none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  background: var(--mo-white);
  color: var(--text);
  cursor: pointer;
  font-weight: 750;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
  box-shadow: var(--mo-shadow);
}
.btn:hover{transform: translateY(-1px); background: var(--mo-white); border-color: var(--mo-primary)}
.btn:active{transform: translateY(0)}
.btn:disabled{opacity:.5; cursor:not-allowed; transform:none}
.btn--primary{
  background: var(--mo-primary);
  border-color: var(--mo-primary);
  color: var(--mo-white);
}
.btn--primary:hover{background: var(--mo-primary-hover); border-color: var(--mo-primary-hover)}
.btn--soft{background: var(--primary-light); border-color: var(--mo-primary)}
.btn--ghost{background: transparent; box-shadow:none}
.btn--sm{padding: 6px 10px; font-size: var(--fs-12)}

.row{display:flex; align-items:flex-end}
.row--gap{gap: var(--gap)}
.row--end{justify-content:flex-end}
.row--wrap{flex-wrap:wrap}

.panelActions{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Blog Report panel – incident/post cards (reference layout: dotted rules, orange actions) */
.blogReport{
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
  width: 100%;
  text-align: left;
}
.blogReport__bar{
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
  flex-wrap: wrap;
  width: 100%;
}
.blogReport__barIcon{ margin-right: 6px }
.blogReport__center{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.blogReport__label{ font-size: var(--fs-13); color: var(--muted) }
.blogReport__title{ font-weight: 700; color: var(--text) }
.blogReport__right{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-left: auto;
}
.blogReport__addWrap{ display: flex; align-items: center }
.blogReport__chev{ margin-left: 4px; font-size: var(--fs-12) }
.blogReport__selectAll{ display: flex; align-items: center; gap: 6px; font-size: var(--fs-12); cursor: pointer }
.blogReport__tabs{
  margin-top: 4px;
  justify-content: flex-start;
}
.blogReport__list{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
  max-height: 380px;
  overflow-y: auto;
  margin-top: var(--space-3);
  padding: var(--space-3);
  width: 100%;
  text-align: left;
  background: var(--mo-border-soft);
  border-radius: var(--radius2);
  border: 1px solid var(--border);
  contain: layout style;
}
.blogReport__topic{
  padding: 0;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--mo-white);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  transition: border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
}
.blogReport__topic:hover{
  border-color: var(--mo-muted);
}
/* Selected / active row – teal border like reference */
.blogReport__topic--active{
  border-color: var(--mo-primary);
  border-width: 2px;
  box-shadow: 0 0 0 1px rgba(7, 80, 86, .12);
}
.blogReport__topic--card .acc__head{
  border-radius: 0;
  border-bottom: none;
  background: var(--mo-white);
}
.blogReport__topic--card .acc__panel{
  border-top: none;
}
.blogReport__topic .acc__head{
  border-radius: 0;
  background: var(--mo-white);
}
.blogReport__topic--card .acc__head{ background: var(--mo-white) }
/* Override .acc__head space-between so topic row stays left-aligned */
.blogReport__topic .acc__head.blogReport__topicHead,
.blogReport__topicHead{
  justify-content: flex-start;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  padding: 11px 14px;
  text-align: left;
  min-height: 44px;
}
.blogReport__topicCaret{
  flex-shrink: 0;
  font-size: var(--fs-12);
  color: var(--muted2);
  transition: transform .18s ease, color .15s ease;
}
.blogReport__topic:hover .blogReport__topicCaret,
.blogReport__topic--active .blogReport__topicCaret{
  color: var(--mo-primary);
}
.blogReport__topic[data-open="false"] .blogReport__topicCaret{
  transform: rotate(-90deg); /* collapsed: chevron points right */
}
.blogReport__topicWhen{
  font-size: var(--fs-13);
  color: var(--muted2);
}
.blogReport__topicId{
  font-size: var(--fs-13);
  font-weight: 700;
  color: var(--text);
}
/* Legacy chevron in icon font – align with caret rows */
.blogReport__topicChev{
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: var(--muted2);
  transform: rotate(-90deg);
}
.blogReport__topic[data-open="true"] .blogReport__topicChev{
  transform: rotate(0deg);
  color: var(--mo-primary);
}
.blogReport__topicTitle,
.blogReport__topicLine{
  font-size: var(--fs-13);
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
  text-align: left;
}
.blogReport__topic--card .acc__inner{
  padding: 0 14px 14px;
  gap: 0;
}
.blogReport__topicBody{
  background: var(--mo-white);
  text-align: left;
}
.blogReport__post{
  padding-top: 2px;
  text-align: left;
}
.blogReport__rule{
  border: 0;
  border-top: 1px dotted var(--muted);
  opacity: .65;
  margin: 12px 0;
  height: 0;
}
.blogReport__rule--first{
  margin-top: 0;
  margin-bottom: 12px;
}
.blogReport__meta{
  font-size: var(--fs-12);
  color: var(--muted);
  margin: 0 0 10px 0;
}
.blogReport__visibility{
  font-size: var(--fs-12);
  color: var(--muted);
  margin: 0 0 8px 0;
}
.blogReport__subject{
  font-size: var(--fs-14);
  font-weight: 700;
  color: var(--text);
  margin: 0 0 12px 0;
  line-height: 1.35;
}
.blogReport__actions{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}
.blogReport__action{
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  font-size: var(--fs-13);
  font-weight: 600;
  color: var(--mo-orange);
  cursor: pointer;
  text-decoration: none;
}
.blogReport__action:hover{
  color: var(--mo-orange-hover);
  text-decoration: underline;
}
.blogReport__comment{
  padding-top: 4px;
}
.blogReport__commentMeta{
  font-size: var(--fs-12);
  color: var(--muted);
  margin: 0 0 6px 0;
}
.blogReport__commentText{
  font-size: var(--fs-13);
  color: var(--text);
  margin: 0;
  line-height: 1.45;
}
.blogReport__desc{ font-size: var(--fs-13); color: var(--text); margin: 8px 0 0 0 }

.row--tight{gap: 8px}

.divider{
  height: 1px;
  background: var(--border-soft);
  margin: 2px 0;
}

/* Map right-click context menu */
.mapContextMenu{
  position: fixed;
  z-index: 10000;
  min-width: 220px;
  padding: 6px 0;
  background: var(--mo-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  font-size: var(--fs-13);
}
.mapContextMenu[hidden]{ display: none }
.mapContextMenu__section{
  padding: 6px 12px;
}
.mapContextMenu__label{
  font-weight: 600;
  color: var(--text);
}
.mapContextMenu__hint{
  font-size: var(--fs-12);
  color: var(--muted2);
  margin-top: 2px;
}
.mapContextMenu__divider{
  height: 1px;
  background: var(--border-soft);
  margin: 4px 0;
}
.mapContextMenu__action{
  display: block;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: transparent;
  font: inherit;
  font-weight: 600;
  color: var(--mo-primary);
  text-align: left;
  cursor: pointer;
}
.mapContextMenu__action:hover{
  background: var(--primary-light);
}
.mapContextMenu__meta{
  padding: 6px 12px;
  font-size: var(--fs-12);
  color: var(--muted2);
  font-family: ui-monospace, monospace;
}

.mapShell{
  position: relative;
  flex: 1;
  min-height: 0;
  padding: 10px;
  background: var(--mo-white);
}
.mapShell:focus{outline: none}

/* Photoshop-style tool strip: left side, overlaps map. Adobe-style expand: 1 or 2 columns */
.mapToolsStrip{
  position: absolute;
  left: 10px;
  top: 10px;
  bottom: 10px;
  z-index: 1001;
  display: flex;
  flex-direction: column;
  padding: 6px 4px 4px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(12px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, .08), 0 1px 3px rgba(0, 0, 0, .06);
  pointer-events: auto;
}
.mapToolsStrip__expandBtn{
  flex-shrink: 0;
  margin-top: 6px;
  padding: 6px 0;
  border: 0;
  border-top: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .15s ease, background .15s ease;
}
.mapToolsStrip__expandBtn:hover{ color: var(--text); background: var(--mo-border-soft) }
.mapToolsStrip__expandIcon{ font-size: var(--fs-12) }
.mapToolsStrip__expandIcon--expand{ display: none }
.mapToolsStrip.is-collapsed .mapToolsStrip__expandIcon--collapse{ display: none }
.mapToolsStrip.is-collapsed .mapToolsStrip__expandIcon--expand{ display: inline-block }
.tools--vertical{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 4px;
  align-content: flex-start;
  min-height: 0;
  overflow: hidden;
  width: 84px; /* expanded: 2 icons per row */
  transition: width .2s ease;
}
.mapToolsStrip.is-collapsed .tools--vertical{
  width: 44px; /* collapsed: 1 icon per row */
}
.tools--vertical .toolbtn{
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  flex-shrink: 0;
}
.tools--vertical .toolbtn__icon{ font-size: 1rem }
.mapToolsStrip .tools.is-dragover{
  border-radius: 8px;
}
.mapToast{
  position: absolute;
  left: 50%;
  top: 14px;
  transform: translateX(-50%);
  padding: 10px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--mo-border);
  background: var(--mo-white);
  color: var(--mo-dark);
  font-size: var(--fs-13);
  font-weight: 600;
  z-index: 1000;
  box-shadow: var(--mo-shadow);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.mapToast.is-visible{
  opacity: 1;
}

/* ---------------------------------------------------------------------------
   Dark theme: side map tools strip only (left vertical toolbar)
   --------------------------------------------------------------------------- */
html[data-theme="dark"] .mapToolsStrip,
html[data-theme="dark"] body.workspace-fullscreen .mapToolsStrip{
  border-color: rgba(255,255,255,.14);
  background: rgba(15, 19, 24, .94);
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, .4), 0 1px 3px rgba(0, 0, 0, .3);
}
html[data-theme="dark"] .mapToolsStrip__expandBtn{
  border-top-color: rgba(255,255,255,.12);
  color: rgba(255,255,255,.5);
}
html[data-theme="dark"] .mapToolsStrip__expandBtn:hover{
  color: var(--mo-white);
  background: rgba(255,255,255,.08);
}
html[data-theme="dark"] .mapToolsStrip .tools--vertical .iconbtn,
html[data-theme="dark"] .mapToolsStrip .tools--vertical .toolbtn{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.1);
  color: var(--mo-light-blue);
  box-shadow: none;
}
html[data-theme="dark"] .mapToolsStrip .tools--vertical .iconbtn:hover,
html[data-theme="dark"] .mapToolsStrip .tools--vertical .toolbtn:hover{
  background: rgba(255,255,255,.1);
  color: var(--mo-white);
}
html[data-theme="dark"] .mapToolsStrip .tools--vertical .toolbtn.is-active{
  background: rgba(7, 80, 86, .45);
  border-color: var(--mo-light-blue);
  color: var(--mo-light-blue);
}
.mapToast[hidden]{ display: none !important; visibility: hidden; }
.mapToast:not([hidden]){ display: block; }
.mapToast:not([hidden]):not(.is-visible){ opacity: 0; }

.mapShell__hint{
  position:absolute;
  left: 122px;
  top: 14px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--mo-white);
  color: var(--muted);
  font-size: var(--fs-12);
  z-index: 3;
  backdrop-filter: blur(10px);
  max-width: calc(100% - 140px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mapQuickTools{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  /* allow dropdown panels to extend */
  overflow: visible;
}
.mapQuickTools__btn{
  appearance: none;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  padding: 8px 12px;
  border-radius: 8px;
  font: inherit;
  font-size: var(--fs-13);
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(0,0,0,.15);
}
.mapQuickTools__btn:hover{ border-color: var(--mo-primary); }
.mapQuickTools__btn:active{ transform: translateY(1px); }
.mapQuickTools__label{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mapQuickDrop__divider{ height: 1px; background: var(--border-soft); margin: 6px 0; }
.mapQuickDrop__arrow{ color: var(--muted2); }

.mapQuickDropdown{ position: relative; }
.mapQuickDropdown .mapTypeDropdown__trigger{ min-width: 0; }
/* Align dropdown panel under left-side trigger (Base map panel is right-aligned). */
.mapQuickDropdown .mapTypeDropdown__panel{
  left: 0;
  right: auto;
}

.mapQuickDrop__subpanel{
  position: absolute;
  top: 44px; /* below header */
  left: calc(100% - 6px);
  min-width: 220px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--mo-white);
  box-shadow: var(--mo-shadow);
  display: none;
  padding: 6px 0;
}
.mapQuickDrop__subpanel[aria-hidden="false"]{ display: block; }
.mapCanvas{
  position: relative;
  height: 100%;
  min-height: 300px;
  border: 1px solid var(--border);
  overflow: hidden;
  background: var(--mo-white);
}
.mapReal{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.mapReal .leaflet-container{
  width: 100% !important;
  height: 100% !important;
  font: inherit;
  color: var(--text);
}
#map.is-drop-pin-mode{ cursor: crosshair }
#map.is-polygon-draw-mode{ cursor: crosshair }
.leaflet-control-attribution{
  font-size: var(--fs-12) !important;
  color: var(--muted2) !important;
  background: var(--mo-white) !important;
  border: 1px solid var(--border) !important;
  margin: 0 10px 10px 0 !important;
  padding: 3px 8px !important;
  box-shadow: var(--mo-shadow) !important;
}
.leaflet-control-attribution a{ color: var(--mo-primary) !important; text-decoration: none }
.leaflet-control-attribution a:hover{ text-decoration: underline }
.leaflet-popup-content-wrapper{
  background: var(--mo-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--mo-shadow);
}
.leaflet-popup-content{
  margin: 8px 12px;
  font-size: var(--fs-13);
  min-width: 120px;
  max-width: 280px;
}
.leaflet-div-icon{
  background: none !important;
  border: none !important;
}
.mapOverlay{position:absolute; inset: 0; pointer-events: none; z-index: 500}
.mapMiniLegend{
  position:absolute;
  left: 14px;
  bottom: 14px;
  display:flex;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  pointer-events: auto;
  z-index: 501;
  appearance: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.mapMiniLegend:hover{ border-color: var(--mo-primary); background: rgba(255,255,255,.98) }
.mapLegendDropdown{ position: absolute; left: 14px; bottom: 14px; z-index: 501; pointer-events: auto }
.mapLegendDropdown__trigger{ display: flex; align-items: center; gap: 8px }
.mapLegendDropdown__trigger .icon--sm{ margin-left: 4px; opacity: .8 }
.mapLegendDropdown__panel{
  display: none;
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 6px;
  min-width: 220px;
  padding: 6px 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--mo-shadow);
}
.mapLegendDropdown__panel[aria-hidden="false"]{ display: block }
.mapLegendDropdown__option{
  display: block;
  width: 100%;
  padding: 10px 14px;
  border: 0;
  background: transparent;
  text-align: left;
  font-size: var(--fs-13);
  color: var(--text);
  cursor: pointer;
}
.mapLegendDropdown__option:hover{ background: var(--mo-border-soft) }

.legendItem{display:flex; align-items:center; gap:8px; font-size: var(--fs-12); color: var(--muted)}
/* Legend modal – design & colors to match reference */
dialog.dialog--legend{ width: 960px; max-width: calc(100vw - 24px); overflow: hidden; border-radius: 10px; box-shadow: 0 24px 48px rgba(0,0,0,.18); }
.dialog--legend .dialog__body{
  overflow-x: hidden; overflow-y: auto;
  background: #fff;
  padding: 16px;
}
.dialog--legend .dialog__inner{ overflow-x: hidden; }
.dialog--legend .dialog__foot{ background: #fff; border-top: 1px solid #e5e7eb; }
.dialog--legend .legendModal__grid{ min-width: 0; }
.dialog--legend .legendModal__panel{ min-width: 0; overflow: hidden; }
.dialog--legend .legendModal__tableWrap{ overflow-x: auto; overflow-y: auto; }
.legendModal__grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 0 }
@media (max-width: 700px){ .legendModal__grid{ grid-template-columns: 1fr } }
.legendModal__panel{
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
/* Panel header strip – light grey, tab-like */
.legendModal__panelTitle{
  font-size: var(--fs-13);
  font-weight: 600;
  margin: 0;
  padding: 10px 14px;
  color: #374151;
  background: #e5e7eb;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid #d1d5db;
  font-family: inherit;
}
.legendModal__panel > .legendModal__tableWrap,
.legendModal__panel > .legendModal__hint,
.legendModal__panel > .legendModal__aaaList,
.legendModal__panel > .legendModal__constructionList{ padding: 12px 14px 14px; }
.legendModal__panel > .legendModal__hint{ padding-top: 8px; padding-bottom: 14px; }
.legendModal__panelIcon{ color: #6b7280; font-size: var(--fs-12); flex-shrink: 0 }
.legendModal__rightCol{ display: flex; flex-direction: column; gap: 12px; max-height: 360px; overflow-y: auto; min-height: 0 }
.legendModal__section{ margin-top: 12px }
.legendModal__label{ display: block; font-weight: 600; font-size: var(--fs-13); margin-bottom: 4px; color: var(--text) }
.legendModal__hint{ font-size: var(--fs-12); color: #6b7280; margin: 10px 0 0 0; line-height: 1.4 }
.legendModal__tableWrap{ max-height: 260px; overflow-y: auto; border: 1px solid #e5e7eb; border-radius: 6px; background: #fff }
.legendModal__table{ width: 100%; border-collapse: collapse; font-size: var(--fs-12); color: #374151 }
.legendModal__table th{ text-align: left; padding: 8px 10px; background: #f3f4f6; font-weight: 600; color: #374151; border-bottom: 1px solid #e5e7eb; font-size: var(--fs-12) }
.legendModal__table td{ padding: 6px 10px; border-top: 1px solid #e5e7eb; vertical-align: middle; color: #374151 }
.legendModal__table tbody tr:hover{ background: #f9fafb }
.legendModal__shapeSwatch{ width: 18px; height: 18px; border-radius: 2px; flex-shrink: 0; border: 1px solid rgba(0,0,0,.2) }
.legendModal__shapeSwatch.legendModal__shapeSwatch--prism{ clip-path: polygon(50% 0%, 100% 100%, 0% 100%) }
.legendModal__shapeSwatch.legendModal__shapeSwatch--crackmeter{ border-radius: 6px }
.legendModal__colourSwatch{ width: 16px; height: 16px; border-radius: 2px; border: 1px solid rgba(0,0,0,.15); flex-shrink: 0 }
.legendModal__list{ max-height: 280px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius); padding: 4px 0 }
.legendModal__row{ display: flex; align-items: center; gap: 12px; padding: 8px 12px; border: 0; background: transparent; width: 100%; text-align: left; font-size: var(--fs-13); color: var(--text); cursor: default }
.legendModal__row:hover{ background: var(--mo-border-soft) }
.legendModal__row label{ display: flex; align-items: center; gap: 8px; cursor: pointer; flex: 1; min-width: 0 }
.legendModal__row input[type="checkbox"]{ flex-shrink: 0 }
.legendModal__typeName{ font-weight: 500; min-width: 0 }
.legendModal__category{ font-size: var(--fs-12); color: var(--muted); flex-shrink: 0 }
.legendModal__aaaList{ list-style: none; margin: 0; padding: 0; font-size: var(--fs-12); color: #374151 }
.legendModal__aaaList li{ display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid #f3f4f6; }
.legendModal__aaaList li:last-child{ border-bottom: 0 }
.legendModal__constructionList{ font-size: var(--fs-12); color: #374151 }
.legendModal__constructionItem{ padding: 10px 0; border-bottom: 1px solid #e5e7eb }
.legendModal__constructionItem:last-child{ border-bottom: 0 }
.legendModal__constructionRow{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px }
.legendModal__constructionRow label{ display: flex; align-items: center; gap: 8px }
.legendModal__constructionRow input[type="text"].input,
.legendModal__constructionRow input[type="number"].input{
  width: 3.5em; padding: 4px 8px; font-size: var(--fs-12);
  border: 1px solid #1f2937; background: #fff; color: #111827;
  border-radius: 4px; text-align: center;
}
.legendModal__constructionColors{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px }
.legendModal__constructionColorItem{ display: flex; align-items: center; gap: 6px; font-size: var(--fs-12); color: #4b5563 }
.dot{width:10px; height:10px; border-radius:999px; display:inline-block}
.dot--green{background: var(--ok)}
.dot--amber{background: var(--warn)}
.dot--red{background: var(--danger)}

.mapFullscreenBtn{
  position: absolute;
  right: 14px;
  top: 14px;
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
}
.mapFullscreenBtn:hover{ border-color: var(--mo-primary); background: rgba(255,255,255,.98); color: var(--mo-primary) }
.mapFullscreenBtn__icon--compress{ display: none }
body.workspace-fullscreen .mapFullscreenBtn__icon--expand{ display: none }
body.workspace-fullscreen .mapFullscreenBtn__icon--compress{ display: inline-block }

.mapZoom{
  position:absolute;
  right: 14px;
  bottom: 14px;
  display:flex;
  flex-direction:column;
  gap: 8px;
  pointer-events: auto;
}

.mapStatus{
  display:flex;
  gap: 10px;
  align-items:center;
  padding: 10px 2px 0;
  font-size: var(--fs-12);
}
.pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.92);
}

/* Map markers */
.marker{
  position:absolute;
  width: 18px; height: 18px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.7);
  background: rgba(0,0,0,.25);
  box-shadow: 0 10px 20px rgba(0,0,0,.22);
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, outline-color .12s ease;
}
.marker::after{
  content:"";
  position:absolute; inset: 3px;
  border-radius: 6px;
  background: var(--ok);
}
.marker[data-status="warning"]::after{background: var(--warn)}
.marker[data-status="alarm"]::after{background: var(--danger)}
.marker:hover{transform: translate(-50%, -52%) scale(1.03)}
.marker.is-selected{outline: 3px solid var(--mo-primary)}
.marker.is-pulse{animation: pulse 1.1s ease-in-out 0s 2}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 var(--primary-light), var(--mo-shadow)}
  60%{box-shadow:0 0 0 16px transparent, 0 10px 20px rgba(0,0,0,.22)}
  100%{box-shadow:0 0 0 0 transparent, 0 10px 20px rgba(0,0,0,.22)}
}

/* Leaflet marker: per-instrument type + status */
.instMarker{
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--ok);
  box-shadow: var(--mo-shadow);
  background: #ffffff;
  box-sizing: border-box;
}
.instMarker--inclinometer{ background: #ffffff }
.instMarker--piezometer{ background: #f3f4f6 }
.instMarker--crackmeter{ background: #ffffff; border-radius: 6px }
.instMarker--tiltsensor{ background: #f3f4f6 }
.instMarker--prism{
  background: #ffffff;
  border-radius: 2px;
  transform: rotate(45deg);
}
.instMarker--vwp{ background: #f3f4f6 }
.instMarker--warning{ border-color: var(--warn); box-shadow: var(--mo-shadow), 0 0 0 2px rgba(245,158,11,.5) }
.instMarker--alarm{ border-color: var(--danger); box-shadow: var(--mo-shadow), 0 0 0 2px rgba(239,68,68,.5) }
.instMarker.is-selected{ outline: 3px solid var(--mo-primary); outline-offset: 1px }
.instMarker.is-pulse{ animation: pulse 1.1s ease-in-out 0s 2 }

/* Tunnel cycle markers along dummy tunnel */
.tunnelCycleMarker{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #1e40af;
  border: 2px solid rgba(255,255,255,.95);
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  font-size: var(--fs-12);
  font-weight: 700;
  color: #fff;
  line-height: 1;
}
.tunnelCycleMarker__label{
  pointer-events: none;
}

/* Slightly crisper tunnel line on retina */
.panel{
  border: 1px solid var(--border);
  overflow: hidden;
  background: var(--mo-white);
  box-shadow: var(--shadow);
  min-width: 0;
  display:flex;
  flex-direction:column;
  max-height: calc(100dvh - var(--topbar-h) - (var(--page-pad) * 2));
}
.panel__header{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--mo-border);
  background: var(--mo-card);
  color: var(--mo-dark);
}
.panel__title{
  font-weight: 750;
  letter-spacing: .12px;
  color: var(--mo-dark);
}
.panel__body{
  color: var(--text);
  padding: var(--space-4);
  padding-bottom: var(--space-5);
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex: 1;
  min-height: 0;
  min-width: 0;
  flex-direction: column;
  contain: layout style;
  gap: 10px;
}
.panel__body .tabpane,
.panel__body .card.acc{
  min-width: 0;
}
.panel__body .card.acc .acc__inner{
  min-width: 0;
  overflow-x: hidden;
}
.panel__body .list,
.panel__body .row{
  min-width: 0;
}
.panel__body .input,
.panel__body .dropdown__trigger,
.panel__body .select{
  max-width: 100%;
}
.panel__footer{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 12px 14px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.panel__footerActions{
  display: flex;
  align-items: center;
  gap: 8px;
}

.tabs{display:flex; gap: 6px; flex-wrap: wrap}
.tab{
  appearance:none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  padding: 8px 10px;
  border-radius: 999px;
  cursor:pointer;
  font-weight: 780;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.tab:hover{color: var(--text)}
.tab.is-active{
  color: var(--text);
  background: var(--mo-border-soft);
  border-color: var(--border);
}

.tabpane{display:none; min-width: 0}
.tabpane.is-active{
  display:flex;
  flex-direction:column;
  gap: 10px;
  min-height: 0;
  min-width: 0;
}

/* Panel-internal panes (e.g. Construction sub-tabs) */
.subpane{display:none}
.subpane.is-active{display:block}

/* AAA / Instrument data table */
.dataTableWrap{ min-width: 0; -webkit-overflow-scrolling: touch }
.dataTable{
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-13);
}
.dataTable th,
.dataTable td{
  padding: 6px 8px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.dataTable th{
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
.dataTable tbody tr:hover{ background: var(--mo-border-soft) }
.dataTable__iconCol{
  width: 48px;
  white-space: nowrap;
}
.dataTable td:nth-child(7),
.dataTable th:nth-child(7){ white-space: nowrap }
.dataTable__iconCol .icon{ margin-right: 2px }
.dataTable__sort{
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.dataTable__sort:hover{ color: var(--text) }

.card{
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: var(--pad);
  box-shadow: var(--shadow);
}
.card__head{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.card__title{font-weight: 700; letter-spacing:.15px}
/* Panel/section headings that should match body scale (h2 default is too large) */
.card__title--sm{ font-size: var(--fs-14); line-height: 1.35; font-weight: 650; }
.card__sub{margin-top: 2px; font-size: var(--fs-12); color: var(--muted2)}

/* Accordions (panel sections) */
.acc{padding: 0}
.acc__head{
  width: 100%;
  appearance: none;
  border: 0;
  background: transparent;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  font-weight: 750;
  text-align:left;
}
.acc__head:focus-visible{
  outline: 3px solid var(--mo-primary);
  outline-offset: -3px;
  border-radius: 14px;
}
.acc__title{font-size: var(--fs-14); font-weight: 700; letter-spacing:.12px}
.acc__sub{display:block; margin-top: 2px; font-size: var(--fs-12); color: var(--muted2); font-weight: 650}
.acc__chev{
  width: 18px;
  height: 18px;
  color: var(--muted2);
  transition: transform .16s ease, color .16s ease;
  transform: rotate(-90deg);
}
.acc[data-open="true"] .acc__chev{transform: rotate(0deg); color: var(--text)}
.acc__panel{
  display:grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .18s ease;
  border-top: 1px solid var(--border-soft);
}
.acc[data-open="true"] .acc__panel{grid-template-rows: 1fr}
.acc__inner{
  overflow: hidden;
  padding: 12px 14px 14px;
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.acc[data-open="false"] .acc__inner{padding-top: 0; padding-bottom: 0}

.selPane{display:none}
.selPane.is-active{display:block}

.graphBox{
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 300px;
  flex-shrink: 0;
}
.graphTop{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.graphTitle{
  font-weight: 700;
  font-size: 1rem;
  color: var(--text);
}
.graphLegend{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  color: var(--text);
  font-size: var(--fs-12);
  flex-shrink: 0;
}
.graphLegendItem{ display: flex; align-items: center; gap: 8px }
.graphSwatch{ width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0 }
.graphFrame{
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--mo-white);
  overflow: hidden;
  min-height: 200px;
  height: 200px;
  flex-shrink: 0;
}
.graphSvg{ width: 100%; height: 100%; display: block }

.list{
  display:flex;
  flex-direction:column;
  gap: 8px;
  margin: 8px 0 10px;
  max-height: 260px;
  overflow:auto;
  padding-right: 4px;
}
.item{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--mo-white);
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.item:hover{transform: translateY(-1px); background: var(--mo-white); border-color: var(--mo-primary)}
.item.is-selected{border-color: var(--mo-primary); background: var(--primary-light)}
.item__left{display:flex; align-items:center; gap: 10px; min-width: 0}
.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--mo-border-soft);
  font-size: var(--fs-12);
  color: var(--muted);
  white-space: nowrap;
}
.badge--ok{color: var(--ok)}
.badge--warn{color: var(--warn)}
.badge--alarm{color: var(--danger)}

/* Review level pills (filled) */
.pill{
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--fs-12);
  font-weight: 600;
  white-space: nowrap;
}
.pill--alarm{ background: var(--danger); color: #fff }
.pill--action{ background: var(--warn); color: #fff }

.visually-hidden{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0 }

.item__meta{min-width: 0}
.item__name{font-weight: 650; white-space:nowrap; overflow:hidden; text-overflow: ellipsis}
.item__sub{font-size: var(--fs-12); color: var(--muted2); white-space:nowrap; overflow:hidden; text-overflow: ellipsis}

.toggle{display:inline-flex; align-items:center; gap: 8px}
.toggle input{position:absolute; opacity:0; pointer-events:none}
.toggle__ui{
  width: 46px; height: 28px;
  border-radius: 999px;
  background: var(--mo-border-soft);
  border: 1px solid var(--border);
  position: relative;
  cursor:pointer;
  transition: background .15s ease, border-color .15s ease;
}
.toggle__ui::after{
  content:"";
  position:absolute;
  left: 4px; top: 4px;
  width: 20px; height: 20px;
  border-radius: 999px;
  background: var(--muted);
  transition: transform .15s ease, background .15s ease;
}
.toggle input:checked + .toggle__ui{
  background: var(--primary-light);
  border-color: var(--mo-primary);
}
.toggle input:checked + .toggle__ui::after{
  transform: translateX(18px);
  background: white;
}

.infoPane{
  border: 1px dashed var(--mo-primary);
  border-radius: var(--radius);
  padding: 12px;
  background: var(--mo-border-soft);
  min-height: 110px;
}
.infoEmpty{color: var(--muted2); font-size: var(--fs-13)}
.infoGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.kv{
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px;
  background: var(--border-soft);
}
.kv__k{font-size: var(--fs-12); color: var(--muted2)}
.kv__v{font-weight: 900; margin-top: 2px}
.kv__v small{font-weight: 750; color: var(--muted2)}

.empty{
  padding: 22px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--mo-border-soft);
}
.empty__title{font-weight: 950}
.empty__sub{margin-top: 6px; color: var(--muted2)}

.backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(4px);
  z-index: 60;
}
.backdrop--side{z-index: 84}

.dialog{
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0;
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  background: var(--mo-white);
  color: var(--text);
  box-shadow: 0 20px 40px rgba(0,0,0,.12);
  z-index: 100000;
}
dialog:not([open]){ display: none; }
dialog[open]{ display: block; }
.dialog::backdrop{
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(4px);
  z-index: 99999;
}
.dialog--dashboard{
  width: min(1120px, calc(100vw - 32px));
  height: min(88vh, 800px);
  max-height: min(88vh, 800px);
  overflow: hidden;
}
.dialog--dashboard[open]{
  display: flex;
  flex-direction: column;
}
.dialog--dashboard .dialog__head{
  background: var(--mo-white);
  padding: 14px 18px;
  flex-shrink: 0;
}
.dialog--dashboard__inner{
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.dialog--dashboard__body{
  flex: 1;
  min-height: 0;
  display: flex;
  padding: 0;
  overflow: hidden;
}
.dialog__inner{ margin: 0; }
.dialog__head{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--mo-white);
}
.dialog__title{ font-weight: 700; font-size: 1.05rem; }
.dialog__body{ padding: 16px; overflow: auto; max-height: 60vh; }

/* Preferences dialog */
.dialog--prefs{ width: min(560px, calc(100vw - 32px)); }
.dialog--prefs .dialog__head{
  background: var(--mo-border-soft, #f3f6fa);
}
html[data-theme="dark"] .dialog--prefs .dialog__head{
  background: rgba(255,255,255,.08);
}
.prefsGrid{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
.dialog__foot--prefs{
  justify-content: space-between;
  gap: var(--space-3);
}

.dashboardNav{
  width: 220px;
  flex-shrink: 0;
  padding: 14px 0;
  border-right: 1px solid var(--border);
  background: var(--mo-white);
  overflow-y: auto;
}
.dashboardNav__section{ margin-bottom: 16px; }
.dashboardNav__heading{
  font-size: var(--fs-12);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted2);
  padding: 0 14px 6px;
}
.dashboardNav__item{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  font-size: var(--fs-13);
  color: var(--text);
  text-decoration: none;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  border-radius: 0;
  font-family: inherit;
  box-sizing: border-box;
}
.dashboardNav__icon{
  width: 1.1em;
  text-align: center;
  font-size: var(--fs-14);
  opacity: .85;
  flex-shrink: 0;
}
.dashboardNav__item:hover{ background: var(--mo-border-soft); color: var(--text); }
.dashboardNav__item:hover .dashboardNav__icon{ opacity: 1; }
.dashboardNav__item--active{ background: var(--mo-border-soft); color: var(--mo-dark); font-weight: 600; }
.dashboardNav__item--active .dashboardNav__icon{ opacity: 1; }

.dashboardContent{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 16px 20px;
  overflow: auto;
  background: var(--mo-border-soft);
}

/* Small screens: no scroll in dashboard modal (nav + content) */
@media (max-width: 768px) {
  .dialog--dashboard .dashboardNav,
  .dialog--dashboard .dashboardContent {
    overflow: hidden;
  }
}
.dashboardContent__title{ font-size: 1.35rem; font-weight: 800; margin: 0 0 8px; color: var(--text); }
.dashboardContent__desc{ font-size: var(--fs-13); color: var(--muted2); margin: 0 0 16px; line-height: 1.5; }
.dashboardContent__toolbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.dashboardContent__filters{ display: flex; gap: 8px; flex-wrap: wrap; }
.dashboardFilter{
  appearance: none;
  border: 1px solid var(--border);
  background: var(--mo-white);
  color: var(--muted2);
  padding: 8px 12px;
  border-radius: 999px;
  font-size: var(--fs-12);
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.dashboardFilter:hover{ border-color: var(--muted); color: var(--text); }
.dashboardFilter.is-active{ background: var(--mo-white); border-color: var(--border); color: var(--text); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.06); }

.dashboardTabs{ display: flex; gap: 4px; margin-bottom: 16px; }
.dashboardTab{
  appearance: none;
  border: none;
  background: transparent;
  padding: 8px 14px;
  font-size: var(--fs-13);
  font-weight: 600;
  color: var(--muted2);
  cursor: pointer;
  font-family: inherit;
  border-radius: var(--radius);
}
.dashboardTab:hover{ color: var(--text); background: rgba(0,0,0,.05); }
.dashboardTab.is-active{ color: var(--text); background: var(--mo-white); box-shadow: 0 1px 2px rgba(0,0,0,.06); }

.dashboardUpdates{ display: flex; flex-direction: column; gap: 16px; }
.dashboardUpdate{
  background: var(--mo-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.dashboardUpdate__tags{ display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.dashboardTag{
  font-size: var(--fs-12);
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.dashboardTag--added{ background: var(--mo-border-soft); color: var(--muted2); }
.dashboardTag--changed{ background: var(--mo-border-soft); color: var(--muted2); }
.dashboardTag--fixed{ background: var(--mo-border-soft); color: var(--muted2); }
.dashboardUpdate__time{ font-size: var(--fs-12); color: var(--muted2); display: block; margin-bottom: 4px; }
.dashboardUpdate__title{ font-size: var(--fs-14); font-weight: 700; margin: 0 0 6px; color: var(--text); }
.dashboardUpdate__desc{ font-size: var(--fs-13); color: var(--muted2); line-height: 1.45; margin: 0 0 8px; }
.dashboardUpdate__link{ font-size: var(--fs-13); font-weight: 600; color: var(--mo-primary); text-decoration: none; }
.dashboardUpdate__link:hover{ text-decoration: underline; }
.aboutDialog__info{ margin: 0 0 12px; color: var(--text); line-height: 1.5; }
.aboutDialog__version{ margin: 0; font-size: var(--fs-13); color: var(--muted2); }
.aboutDialog__version strong{ color: var(--text); }
.dialog__foot{padding: 12px 16px; border-top: 1px solid var(--border); display:flex; justify-content:flex-end; flex-shrink: 0; background: var(--mo-white);}
.kbdList{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap: 10px}
.kbdList li{display:flex; justify-content: space-between; align-items:center; gap: 10px; color: var(--muted)}
kbd{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: var(--fs-12);
  padding: 4px 8px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--mo-border-soft);
  color: var(--text);
}

/* Breakpoints (consistent across app): 1280, 1100, 1024, 980, 768, 520, 380 */
/* Laptop */
@media (max-width: 1280px){
  :root{ --page-pad: var(--space-4); --gap-lg: var(--space-3); }
  .topbar__right{ flex-wrap: wrap; justify-content: flex-end; min-width: 0 }
  .topbar__menuitem{ padding: 6px 10px; font-size: var(--fs-12) }
  .mainWrap .mapArea{ padding: 0; }
}

@media (max-width: 1100px){
  :root{ --panel-w: 360px; }
}

/* Tablet (iPad landscape) and small laptop */
@media (max-width: 1024px){
  :root{ --panel-w: min(340px, 90vw); --page-pad: var(--space-3); }
  .topbar__projectTitle{ max-width: 180px }
  .topbar__projectDesc{ max-width: 180px }
  .topbar__menuitem{ padding: 4px 6px; font-size: var(--fs-12); }
  .topbar__menuitem-text{ max-width: 4.5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
  .mainWrap .subBar{ padding: var(--space-1) var(--page-pad); min-height: 30px; }
  .mapShell{ padding: var(--space-2); }
  .dropdown__panel{ max-height: min(240px, 50vh); }
  .panel__body{ padding: var(--space-3); }
  .workspace__bar .seg, .workspace__bar .tools{ flex-shrink: 0 }
}

/* Tablet (iPad portrait) – panel overlay, compact topbar */
@media (max-width: 980px){
  .topbar__projectTitle{ max-width: 140px }
  .topbar__projectDesc{ max-width: 140px }
  .layout{grid-template-columns: 1fr}
  .mainWrap .layout{grid-template-columns: 1fr}
  .sidebar{
    position: fixed;
    top: calc(var(--topbar-h) + 10px);
    left: 12px;
    bottom: 12px;
    width: min(360px, calc(100vw - 24px));
    z-index: 85;
    transform: translateX(-16px);
    opacity: 0;
    pointer-events: none;
    transition: transform .18s ease, opacity .18s ease;
  }
  html[data-sidebar-open="true"] .sidebar{
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
  }
  .panel{
    position: fixed;
    top: calc(var(--topbar-h) + 8px);
    right: max(8px, env(safe-area-inset-right));
    left: max(8px, env(safe-area-inset-left));
    bottom: max(8px, env(safe-area-inset-bottom));
    z-index: 80;
    max-height: none;
    transform: translateY(18px);
    opacity: 0;
    pointer-events: none;
    transition: transform .18s ease, opacity .18s ease;
  }
  .panel.is-open{
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .topbar__right{ min-width: 0 }
  .topbar__menuitem{ padding: 6px 6px; font-size: var(--fs-12); }
  .topbar__menuitem-text{ display: none }
  .hide-sm{display:none}
  .show-sm{display:inline-flex}
  .mapShell{ padding: 6px; }
  .mainWrap .mapArea{ padding: 0; }
}

/* Phone / small tablet – layout + touch; font scale from theme.css root */
@media (max-width: 520px){
  .topbar{ padding: 0 var(--page-pad); height: 40px; min-height: 40px; }
  .topbar__projectTitle{ max-width: 100px }
  .topbar__projectDesc{ max-width: 100px }
  .topbar__logo{ width: 28px; height: 28px }
  .topbar__logo--portal{ height: 28px; width: auto; max-width: 160px }
  .crumbs{display:none}
  .mapShell__hint{display:none}
  .infoGrid{grid-template-columns: 1fr}
  .mapTypeCtrl{display:none}
  .mainWrap .mapArea{ padding: 0; }
  .mapShell{ min-height: 200px; padding: 6px; }
  .mainWrap .subBar .btn{ min-height: 44px }
  .sideStrip__item, .rightStrip__item{ min-width: 44px; min-height: 44px }
  body{ line-height: 1.45; }
}

/* Very small screens – readable line length; spacing from scale */
@media (max-width: 380px){
  :root{ --page-pad: var(--space-2); --gap: var(--space-3); }
  body{ font-size: var(--fs-14); }
}

/* ─── Mobile view disabled: show message instead of app ─── */
.mobileBlock{
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: var(--bg);
  color: var(--text);
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  font-family: var(--font);
  text-align: center;
}
.mobileBlock__inner{
  max-width: 320px;
}
.mobileBlock__icon{
  font-size: 3rem;
  color: var(--muted);
  margin-bottom: var(--space-4);
  display: block;
}
.mobileBlock__title{
  font-size: var(--mo-font-lg);
  font-weight: 700;
  margin: 0 0 var(--space-3);
  line-height: 1.3;
}
.mobileBlock__text{
  font-size: var(--fs-14);
  color: var(--muted2);
  margin: 0;
  line-height: 1.5;
}
@media (max-width: 768px){
  .mobileBlock{
    display: flex !important;
  }
  body > *:not(.mobileBlock){
    display: none !important;
  }
}