:root {
  color-scheme: light;
  --bg: #f5f2ea;
  --ink: #1f2933;
  --muted: #64707d;
  --panel: #fffdf8;
  --surface: #f7f3eb;
  --line: #d8d0c2;
  --route: #d9442e;
  --route-dark: #9f2d1e;
  --land: #ebe3d4;
  --control: #25313d;
  --control-text: #ffffff;
  --label-halo: #ffffff;
  --ui-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ui-font-style: normal;
  --ui-letter-spacing: 0;
  --ui-texture: none;
  --ui-texture-opacity: 0;
  --ui-texture-blend: multiply;
  --stadia-card-text: #111827;
  --stadia-card-text-bg-rgb: 255 255 255;
  --stadia-card-text-bg-opacity: 0.76;
  --stadia-topo-contours: 0.24;
  --stadia-topo-blend: 0.2;
  --route-theme-land-a: 240 214 165;
  --route-theme-land-b: 168 124 82;
  --route-theme-water-a: 91 197 215;
  --route-theme-water-b: 17 127 154;
  --route-theme-texture-opacity: 0.72;
  --leather-color: #6b3f2a;
  --leather-texture-opacity: 0.55;
  --leather-texture-size: 512px 512px;
  --leather-blend-mode: multiply;
  --user-map-viewport-top: 96px;
  --user-map-viewport-right: 96px;
  --user-map-viewport-bottom: 128px;
  --user-map-viewport-left: 96px;
  --user-map-viewport-radius: 22px;
  --ui-font-color: var(--ink);
  --ui-font-weight: 700;
  --ui-font-stretch: 100%;
  --ui-font-scale-y: 1;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ui-font-color, var(--ink));
  background: var(--bg);
  font-family: var(--ui-font);
  font-style: var(--ui-font-style);
  letter-spacing: var(--ui-letter-spacing);
  font-weight: var(--ui-font-weight);
  font-stretch: var(--ui-font-stretch);
}

.leather-bg {
  position: relative;
  background-color: var(--leather-color);
  overflow: hidden;
}

.leather-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("assets/textures/pebbled-leather-gray.png"), url("assets/backgrounds/leather.png");
  background-repeat: repeat;
  background-size: var(--leather-texture-size);
  opacity: var(--leather-texture-opacity);
  mix-blend-mode: var(--leather-blend-mode);
}

.leather-bg > * {
  position: relative;
  z-index: 1;
}

.leather-bg.leather-brown {
  --leather-color: #6b3f2a;
  --leather-texture-opacity: 0.55;
  --leather-blend-mode: multiply;
}

.leather-bg.leather-red {
  --leather-color: #6f1f24;
  --leather-texture-opacity: 0.5;
  --leather-blend-mode: multiply;
}

.leather-bg.leather-blue {
  --leather-color: #1f3f5f;
  --leather-texture-opacity: 0.45;
  --leather-blend-mode: multiply;
}

.leather-bg.leather-green {
  --leather-color: #2f4a35;
  --leather-texture-opacity: 0.5;
  --leather-blend-mode: multiply;
}

.leather-bg.leather-black {
  --leather-color: #1b1715;
  --leather-texture-opacity: 0.35;
  --leather-blend-mode: screen;
}

.leather-bg.leather-light {
  --leather-color: #b9aa93;
  --leather-texture-opacity: 0.35;
  --leather-blend-mode: multiply;
}

.embedded-panel {
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, 0.45),
    inset 0 -1px 2px rgba(255, 255, 255, 0.08),
    0 1px 2px rgba(255, 255, 255, 0.08);
  border-radius: 14px;
}

button,
input {
  font: inherit;
}

.map-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 33vw);
  min-height: 100vh;
}

.map-stage {
  --playback-dock-height: 64px;
  --user-device-margin: clamp(16px, 1.9vw, 28px);
  --user-device-radius: 30px;
  --user-screen-radius: 22px;
  --user-frame-edge-top: 96px;
  --user-frame-edge-right: 96px;
  --user-frame-edge-bottom: 128px;
  --user-frame-edge-left: 96px;
  --user-frame-top-height: var(--user-frame-edge-top);
  --user-frame-bottom-height: var(--user-frame-edge-bottom);
  --user-frame-left-width: var(--user-frame-edge-left);
  --user-frame-right-width: var(--user-frame-edge-right);
  --user-frame-side-width: var(--user-frame-left-width);
  --user-frame-slot-padding: 10px;
  --user-frame-slot-radius: 16px;
  --user-frame-shadow: inset 0 2px 8px rgb(255 255 255 / 0.05), inset 0 -14px 24px rgb(0 0 0 / 0.24), 0 1px 0 rgb(255 255 255 / 0.06);
  --user-screen-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.05), inset 0 0 24px rgb(0 0 0 / 0.08);
  --user-section-shadow: inset 0 2px 8px rgb(0 0 0 / 0.24), inset 0 -1px 1px rgb(255 255 255 / 0.03);
  --user-frame-stroke-color: rgb(255 255 255 / 0.12);
  --user-frame-stroke-width: 1px;
  --user-frame-stroke-opacity: 1;
  --user-frame-stroke-style: solid;
  --user-slot-stroke-color: rgb(255 255 255 / 0.14);
  --user-slot-stroke-width: 1px;
  --user-slot-stroke-opacity: 1;
  --user-slot-stroke-style: solid;
  --user-section-stroke-color: rgb(255 255 255 / 0.12);
  --user-section-stroke-width: 1px;
  --user-section-stroke-opacity: 1;
  --user-section-stroke-style: solid;
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: var(--land);
  border-bottom: 1px solid var(--line);
}

.user-device-frame {
  position: absolute;
  inset: var(--user-device-margin);
  z-index: 780;
  pointer-events: none;
  overflow: hidden;
  border: var(--user-frame-stroke-width) var(--user-frame-stroke-style) var(--user-frame-stroke-color);
  opacity: var(--user-frame-stroke-opacity);
  border-radius: var(--user-device-radius);
  background: transparent;
  box-shadow:
    var(--user-frame-shadow);
}

body:not(.user-site-mode):not(.users-builder-mode) .user-device-frame {
  display: none;
}

.user-device-screen-aperture {
  position: absolute;
  border: 1px solid rgb(255 255 255 / 0.08);
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.06), rgb(0 0 0 / 0.2)),
    color-mix(in srgb, var(--users-shell-leather-color, var(--leather-color)), #101820 24%);
  box-shadow:
    var(--user-screen-shadow);
}

.user-frame-builder-tools {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.user-frame-builder-tools[hidden] {
  display: none;
}

.user-frame-add,
.user-frame-resize-handle,
.user-frame-corner-swap {
  position: absolute;
  pointer-events: auto;
}

.user-frame-add {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 0.34);
  border-radius: 50%;
  background: color-mix(in srgb, var(--control), #ffffff 18%);
  color: var(--control-text);
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 8px 18px rgb(0 0 0 / 0.24), inset 0 1px 0 rgb(255 255 255 / 0.32);
  cursor: pointer;
}

.user-frame-add.is-user-builder-drop-target {
  box-shadow: inset 0 0 0 3px rgb(255 111 196 / 0.84), 0 0 0 5px rgb(255 111 196 / 0.22);
}

.user-frame-add-top {
  top: calc(var(--user-frame-edge-top) / 2 - 26px);
  left: 50%;
  transform: translateX(-50%);
}

.user-frame-add-right {
  top: 50%;
  right: calc(var(--user-frame-edge-right) / 2 - 26px);
  transform: translateY(-50%);
}

.user-frame-add-bottom {
  bottom: calc(var(--user-frame-edge-bottom) / 2 - 26px);
  left: 50%;
  transform: translateX(-50%);
}

.user-frame-add-left {
  top: 50%;
  left: calc(var(--user-frame-edge-left) / 2 - 26px);
  transform: translateY(-50%);
}

.user-frame-resize-handle {
  border: 0;
  background: transparent;
  opacity: 0;
}

body.users-builder-mode .user-frame-resize-handle {
  opacity: 1;
}

.user-frame-resize-top,
.user-frame-resize-bottom {
  left: var(--user-frame-edge-left);
  right: var(--user-frame-edge-right);
  height: 12px;
  cursor: ns-resize;
}

.user-frame-resize-top { top: calc(var(--user-frame-edge-top) - 6px); }
.user-frame-resize-bottom { bottom: calc(var(--user-frame-edge-bottom) - 6px); }

.user-frame-resize-left,
.user-frame-resize-right {
  top: var(--user-frame-edge-top);
  bottom: var(--user-frame-edge-bottom);
  width: 12px;
  cursor: ew-resize;
}

.user-frame-resize-left { left: calc(var(--user-frame-edge-left) - 6px); }
.user-frame-resize-right { right: calc(var(--user-frame-edge-right) - 6px); }

.user-frame-corner-swap {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 0.32);
  border-radius: 50%;
  background: color-mix(in srgb, var(--control), #ffffff 12%);
  color: var(--control-text);
  font-size: 0.9rem;
  font-weight: 900;
  cursor: pointer;
}

.user-frame-corner-top-left { top: calc(var(--user-frame-edge-top) - 12px); left: calc(var(--user-frame-edge-left) - 12px); }
.user-frame-corner-top-right { top: calc(var(--user-frame-edge-top) - 12px); right: calc(var(--user-frame-edge-right) - 12px); }
.user-frame-corner-bottom-right { bottom: calc(var(--user-frame-edge-bottom) - 12px); right: calc(var(--user-frame-edge-right) - 12px); }
.user-frame-corner-bottom-left { bottom: calc(var(--user-frame-edge-bottom) - 12px); left: calc(var(--user-frame-edge-left) - 12px); }

.user-site-panel-top[class*="corner-owner-top-"] ,
.user-site-panel-right[class*="corner-owner-top-right"],
.user-site-panel-bottom[class*="corner-owner-bottom-"],
.user-site-panel-left[class*="corner-owner-top-left"],
.user-site-panel-left[class*="corner-owner-bottom-left"] {
  z-index: 2;
}

.user-device-rail {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.06), rgb(0 0 0 / 0.22)),
    color-mix(in srgb, var(--users-shell-leather-color, var(--leather-color)), #101820 18%);
  border: var(--user-frame-stroke-width) var(--user-frame-stroke-style) var(--user-frame-stroke-color);
  opacity: var(--user-frame-stroke-opacity);
}

.user-device-rail-top,
.user-device-rail-bottom {
  left: 0;
  right: 0;
}

.user-device-rail-left,
.user-device-rail-right {
  top: var(--user-frame-top-height);
  bottom: var(--user-frame-bottom-height);
}

.user-device-rail-left { width: var(--user-frame-left-width); }
.user-device-rail-right { width: var(--user-frame-right-width); }

.user-device-rail-top {
  top: 0;
  height: var(--user-frame-top-height);
  border-radius: calc(var(--user-device-radius) + 2px) calc(var(--user-device-radius) + 2px) 18px 18px;
}

.user-device-rail-bottom {
  bottom: 0;
  height: var(--user-frame-bottom-height);
  border-radius: 18px 18px calc(var(--user-device-radius) + 2px) calc(var(--user-device-radius) + 2px);
}

.user-device-rail-left {
  left: 0;
  border-radius: calc(var(--user-device-radius) * 0.72) 18px 18px calc(var(--user-device-radius) * 0.72);
}

.user-device-rail-right {
  right: 0;
  border-radius: 18px calc(var(--user-device-radius) * 0.72) calc(var(--user-device-radius) * 0.72) 18px;
}

.user-device-screen-aperture {
  z-index: 2;
  inset:
    calc(var(--user-frame-top-height) + 3px)
    calc(var(--user-frame-right-width) + 3px)
    calc(var(--user-frame-bottom-height) + 3px)
    calc(var(--user-frame-left-width) + 3px);
  border-color: rgb(255 255 255 / 0.12);
  border-radius: var(--user-screen-radius);
  background: transparent;
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.05),
    inset 0 0 24px rgb(0 0 0 / 0.08);
}

body.user-site-mode .map-shell {
  grid-template-columns: minmax(0, 1fr);
  padding: 32px;
  background-color: var(--leather-color);
  background-image: url("assets/textures/pebbled-leather-gray.png"), url("assets/backgrounds/leather.png");
  background-repeat: repeat;
  background-size: var(--leather-texture-size), 420px 420px;
  background-blend-mode: var(--leather-blend-mode), multiply;
}

body.user-site-mode .panel,
body.user-site-mode .map-feature-toolbar,
body.user-site-mode .elements-style-drawer,
body.user-site-mode .image-preview-drawer,
body.user-site-mode .usage-overlay,
body.user-site-mode .map-control-cluster,
body.user-site-mode .keyboard-only-toggle,
body.user-site-mode .us-view-button {
  display: none !important;
}

body.user-site-mode .playback-panel {
  left: 18px;
  right: 18px;
  bottom: 18px;
  border-radius: 18px;
  background-color: color-mix(in srgb, var(--users-shell-leather-color, var(--leather-color)), #111827 28%);
  background-image: url("assets/textures/pebbled-leather-gray.png"), url("assets/backgrounds/leather.png");
  background-size: var(--leather-texture-size), 360px 360px;
  background-blend-mode: var(--leather-blend-mode), multiply;
  border-top-color: color-mix(in srgb, var(--control), #ffffff 28%);
}

body.user-site-mode .map-stage {
  min-height: calc(100vh - 64px);
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: 26px;
  box-shadow:
    inset 0 3px 12px rgb(0 0 0 / 0.58),
    inset 0 -2px 5px rgb(255 255 255 / 0.08),
    0 24px 48px rgb(0 0 0 / 0.42);
}

.site-mode-toggle {
  position: absolute;
  top: 16px;
  left: clamp(456px, 42vw, 56vw);
  transform: none;
  z-index: 900;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--control), #fff 42%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--control), #fff 10%);
  color: var(--control-text);
  font-weight: 950;
  box-shadow: 0 8px 20px rgb(31 41 51 / 0.2);
  cursor: pointer;
}

body.user-site-mode .site-mode-toggle {
  left: 50%;
  transform: translateX(-50%);
}

.user-material-controls {
  position: absolute;
  top: 16px;
  right: 78px;
  z-index: 902;
  display: none;
  gap: 8px;
}

body.user-site-mode .user-material-controls {
  display: flex;
}

.user-site-controls {
  --user-frame-gap: var(--user-device-margin);
  --user-frame-surface:
    linear-gradient(180deg, rgb(255 255 255 / 0.08), rgb(0 0 0 / 0.12)),
    color-mix(in srgb, var(--user-panel-surface-color, var(--users-shell-leather-color, var(--leather-color))), #ffffff 2%);
  position: absolute;
  z-index: 790;
  display: none;
  gap: var(--user-layout-section-gap, 12px);
  pointer-events: none;
  overflow: hidden;
  padding: var(--user-frame-slot-padding);
  border: var(--user-slot-stroke-width) var(--user-slot-stroke-style) var(--user-slot-stroke-color);
  border-radius: var(--user-frame-slot-radius, 16px);
  opacity: var(--user-slot-stroke-opacity);
  background: transparent;
  box-shadow: none;
  backdrop-filter: blur(8px) saturate(112%);
}

body.user-site-mode .user-site-controls {
  display: flex;
}

.user-site-controls[hidden] {
  display: none !important;
}

.user-site-controls > * {
  position: relative;
  z-index: 1;
  pointer-events: auto;
}

.user-site-controls::before {
  content: "";
  position: absolute;
  inset: 1px;
  border: 1px solid rgb(255 255 255 / 0.06);
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.05), rgb(0 0 0 / 0.12)),
    var(--user-frame-surface);
  box-shadow:
    inset 0 2px 8px rgb(0 0 0 / 0.24),
    inset 0 -1px 1px rgb(255 255 255 / 0.03);
  pointer-events: none;
}

.user-site-controls[data-user-builder-panel] {
  transition:
    opacity 260ms ease,
    transform 320ms cubic-bezier(0.18, 0.88, 0.24, 1.12),
    box-shadow 260ms ease;
}

.user-site-controls[data-user-builder-panel="top"] {
  transform: translateY(-18px);
}

.user-site-controls[data-user-builder-panel="bottom"] {
  transform: translateY(18px);
}

.user-site-controls[data-user-builder-panel="left"] {
  transform: translateX(-18px);
}

.user-site-controls[data-user-builder-panel="right"] {
  transform: translateX(18px);
}

.user-site-controls.is-builder-visible {
  opacity: 1;
  transform: translate(0, 0);
}

.user-site-panel-top {
  top: calc(var(--user-frame-gap) + var(--user-frame-slot-padding));
  left: calc(var(--user-frame-gap) + var(--user-frame-left-width) + var(--user-frame-slot-padding));
  right: calc(var(--user-frame-gap) + var(--user-frame-right-width) + var(--user-frame-slot-padding));
  min-height: calc(var(--user-frame-top-height) - (var(--user-frame-slot-padding) * 2));
  max-height: calc(100% - (var(--user-frame-bottom-height) + 138px));
  border-radius: 18px 18px 12px 12px;
  border-bottom-color: rgb(255 255 255 / 0.06);
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  align-content: flex-start;
}

.user-site-panel-bottom {
  left: calc(var(--user-frame-gap) + var(--user-frame-left-width) + var(--user-frame-slot-padding));
  right: calc(var(--user-frame-gap) + var(--user-frame-right-width) + var(--user-frame-slot-padding));
  bottom: calc(var(--user-frame-gap) + var(--user-frame-slot-padding));
  min-height: calc(var(--user-frame-bottom-height) - (var(--user-frame-slot-padding) * 2));
  max-height: calc(var(--user-frame-bottom-height) - (var(--user-frame-slot-padding) * 2));
  padding-top: 10px;
  padding-bottom: calc(var(--playback-dock-height) + 12px);
  border-radius: 12px 12px 18px 18px;
  border-top-color: rgb(255 255 255 / 0.06);
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: wrap;
  align-content: flex-start;
}

.user-site-panel-left,
.user-site-panel-right {
  top: calc(var(--user-frame-gap) + var(--user-frame-top-height) + var(--user-frame-slot-padding));
  bottom: calc(var(--user-frame-gap) + var(--user-frame-bottom-height) + var(--user-frame-slot-padding));
  width: calc(var(--user-frame-left-width) - (var(--user-frame-slot-padding) * 2));
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  align-content: flex-start;
}

.user-site-panel-left {
  left: var(--user-frame-gap);
  border-radius: 18px 12px 12px 18px;
  justify-content: flex-start;
  align-items: flex-start;
}

.user-site-panel-right {
  right: var(--user-frame-gap);
  width: calc(var(--user-frame-right-width) - (var(--user-frame-slot-padding) * 2));
  border-radius: 12px 18px 18px 12px;
  justify-content: flex-start;
  align-items: flex-end;
}

.user-builder-empty {
  margin: 0;
  width: 100%;
  min-height: 82px;
  padding: 18px 16px;
  border: 1px dashed rgb(255 255 255 / 0.22);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.05), rgb(255 255 255 / 0.02)),
    rgb(255 255 255 / 0.03);
  color: rgb(255 255 255 / 0.76);
  font-size: 0.84rem;
  font-weight: 700;
  text-align: center;
  box-shadow:
    inset 0 2px 8px rgb(0 0 0 / 0.24),
    inset 0 -1px 1px rgb(255 255 255 / 0.04);
  backdrop-filter: blur(4px);
}

.user-site-section {
  display: grid;
  gap: var(--user-layout-subsection-gap, 10px);
  width: min(100%, 296px);
  max-width: 100%;
  max-height: min(28vh, 260px);
  padding: 8px 10px;
  overflow: auto;
  border: var(--user-section-stroke-width) var(--user-section-stroke-style) var(--user-section-stroke-color);
  opacity: var(--user-section-stroke-opacity);
  border-radius: 12px;
  background:
    linear-gradient(rgb(0 0 0 / 0.14), rgb(255 255 255 / 0.02)),
    rgb(255 255 255 / 0.06);
  box-shadow: var(--user-section-shadow);
  backdrop-filter: blur(5px) saturate(110%);
  color: #fff;
  scrollbar-width: thin;
}

.user-site-section[data-edge-align="right"],
.user-site-section[data-edge-align="bottom"] {
  margin-inline-start: auto;
}

.user-site-panel-top .user-site-section,
.user-site-panel-bottom .user-site-section {
  width: min(100%, 100%);
  max-height: min(18vh, 220px);
  flex: 1 1 240px;
}

.user-site-panel-left .user-builder-empty,
.user-site-panel-right .user-builder-empty {
  min-height: 120px;
}

.user-site-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  padding-bottom: 3px;
  border-bottom: 1px solid rgb(255 255 255 / 0.08);
}

.user-site-section-head strong {
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.user-site-section-head span {
  color: rgb(255 255 255 / 0.62);
  font-size: 0.68rem;
  font-weight: 800;
}

.user-edge-blank-section {
  display: grid;
  align-content: center;
  justify-items: center;
  width: 100%;
  min-height: 64px;
  padding: 12px;
  border: var(--user-section-stroke-width) var(--user-section-stroke-style) var(--user-section-stroke-color);
  border-radius: var(--user-frame-slot-radius);
  background: rgb(255 255 255 / 0.045);
  box-shadow: var(--user-section-shadow);
  color: rgb(255 255 255 / 0.76);
  cursor: context-menu;
  text-align: center;
}

.user-edge-blank-section strong {
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.user-edge-blank-section span {
  color: rgb(255 255 255 / 0.58);
  font-size: 0.7rem;
}

.user-site-section-items {
  display: grid;
  gap: var(--user-layout-setting-gap, 8px);
}

.user-builder-setting-card {
  position: relative;
  display: grid;
  gap: 6px;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: 12px;
  background:
    linear-gradient(rgb(255 255 255 / 0.08), rgb(0 0 0 / 0.08)),
    rgb(255 255 255 / 0.06);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.08),
    0 8px 18px rgb(0 0 0 / 0.14);
  color: rgb(255 250 240 / 0.94);
  user-select: none;
}

body.users-builder-mode .user-builder-setting-card,
body.users-builder-mode .users-registry-item[data-user-builder-card="true"] {
  cursor: grab;
}

body.users-builder-mode .user-builder-setting-card:active,
body.users-builder-mode .users-registry-item[data-user-builder-card="true"]:active {
  cursor: grabbing;
}

.user-builder-setting-card.is-user-builder-dragging,
.users-registry-item.is-user-builder-dragging {
  opacity: 0.56;
  transform: scale(0.985);
}

.user-builder-setting-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.user-builder-setting-card-title {
  font-size: 0.86rem;
  font-weight: 900;
  line-height: 1.15;
}

.user-builder-setting-card-type {
  color: rgb(255 255 255 / 0.66);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.user-builder-setting-card-value {
  color: rgb(255 255 255 / 0.86);
  font-size: 0.8rem;
  font-weight: 700;
}

.user-builder-setting-card-meta {
  color: rgb(255 255 255 / 0.58);
  font-size: 0.69rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.user-builder-setting-remove {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 0.24);
  border-radius: 999px;
  background: rgb(31 41 55 / 0.92);
  color: #fff3fb;
  font-size: 0.95rem;
  font-weight: 900;
  box-shadow: 0 8px 18px rgb(0 0 0 / 0.26);
  opacity: 0;
  transform: scale(0.9);
  transition:
    opacity 160ms ease,
    transform 180ms ease,
    background-color 160ms ease;
}

.user-builder-setting-card:hover .user-builder-setting-remove,
.user-builder-setting-card:focus-within .user-builder-setting-remove {
  opacity: 1;
  transform: scale(1);
}

.user-builder-setting-remove:hover {
  background: #ff2f8a;
}

.user-site-panel-right .user-builder-setting-remove {
  left: -14px;
  top: 50%;
  transform: translateY(-50%) scale(0.9);
}

.user-site-panel-right .user-builder-setting-card:hover .user-builder-setting-remove,
.user-site-panel-right .user-builder-setting-card:focus-within .user-builder-setting-remove {
  transform: translateY(-50%) scale(1);
}

.user-site-panel-left .user-builder-setting-remove {
  right: -14px;
  top: 50%;
  transform: translateY(-50%) scale(0.9);
}

.user-site-panel-left .user-builder-setting-card:hover .user-builder-setting-remove,
.user-site-panel-left .user-builder-setting-card:focus-within .user-builder-setting-remove {
  transform: translateY(-50%) scale(1);
}

.user-site-panel-top .user-builder-setting-remove {
  left: 50%;
  bottom: -14px;
  transform: translateX(-50%) scale(0.9);
}

.user-site-panel-top .user-builder-setting-card:hover .user-builder-setting-remove,
.user-site-panel-top .user-builder-setting-card:focus-within .user-builder-setting-remove {
  transform: translateX(-50%) scale(1);
}

.user-site-panel-bottom .user-builder-setting-remove {
  left: 50%;
  top: -14px;
  transform: translateX(-50%) scale(0.9);
}

.user-site-panel-bottom .user-builder-setting-card:hover .user-builder-setting-remove,
.user-site-panel-bottom .user-builder-setting-card:focus-within .user-builder-setting-remove {
  transform: translateX(-50%) scale(1);
}

.user-site-setting-row {
  display: grid;
  gap: 3px;
}

.user-site-setting-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.user-site-setting-label {
  color: #fff;
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1.15;
}

.user-site-setting-value {
  min-width: 38px;
  padding: 3px 7px;
  border: 1px solid rgb(255 255 255 / 0.12);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.08);
  color: rgb(255 255 255 / 0.82);
  font-size: 0.7rem;
  font-weight: 850;
  text-align: center;
}

.user-site-setting-row input[type="range"],
.user-site-setting-row input[type="color"],
.user-site-setting-row select,
.user-site-setting-row input[type="text"],
.user-site-setting-row textarea {
  width: 100%;
  box-sizing: border-box;
}

.user-site-setting-row input[type="range"] {
  accent-color: color-mix(in srgb, var(--control), #4aa3ff 42%);
  margin: 0;
}

.user-site-setting-row input[type="color"] {
  inline-size: 100%;
  block-size: 28px;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: 10px;
  background: rgb(255 255 255 / 0.06);
}

.user-site-setting-row select,
.user-site-setting-row input[type="text"],
.user-site-setting-row textarea {
  min-height: 30px;
  padding: 6px 9px;
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: 10px;
  background: rgb(255 255 255 / 0.9);
  color: #172033;
  font: inherit;
}

.user-site-setting-row textarea {
  min-height: 66px;
  resize: vertical;
}

.user-site-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 6px 8px;
  border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: 10px;
  background: rgb(255 255 255 / 0.06);
}

.user-site-checkbox input {
  width: 16px;
  height: 16px;
  accent-color: color-mix(in srgb, var(--control), #4aa3ff 42%);
  margin: 0;
}

.user-site-checkbox span {
  color: #fff;
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1.15;
}

.user-site-setting-unsupported {
  padding: 8px 10px;
  border: 1px dashed rgb(255 255 255 / 0.14);
  border-radius: 10px;
  background: rgb(255 255 255 / 0.04);
  color: rgb(255 255 255 / 0.64);
  font-size: 0.72rem;
  font-weight: 700;
}

@media (max-width: 1180px) {
  .user-site-panel-left,
  .user-site-panel-right {
    width: min(232px, calc(22vw + 18px));
  }

  .user-site-section {
    width: min(100%, 248px);
  }
}

@media (max-width: 900px) {
  .user-site-panel-top {
    top: calc(var(--user-device-margin) + var(--user-frame-slot-padding));
    left: calc(var(--user-device-margin) + var(--user-frame-slot-padding));
    right: calc(var(--user-device-margin) + var(--user-frame-slot-padding));
  }

  .user-site-panel-bottom {
    left: calc(var(--user-device-margin) + var(--user-frame-slot-padding));
    right: calc(var(--user-device-margin) + var(--user-frame-slot-padding));
    bottom: calc(var(--user-device-margin) + var(--user-frame-slot-padding));
  }

  .user-site-panel-left,
  .user-site-panel-right {
    top: calc(var(--user-device-margin) + var(--user-frame-top-height) + var(--user-frame-slot-padding));
    bottom: calc(var(--user-device-margin) + var(--user-frame-bottom-height) + var(--user-frame-slot-padding));
    width: min(198px, calc(22vw + 14px));
  }

  .user-site-section {
    width: min(100%, 210px);
    padding: 8px 9px;
  }
}

.user-preview-button {
  position: relative;
  display: grid;
  align-content: center;
  min-width: 146px;
  min-height: 58px;
  padding: 8px 12px;
  border: 1px solid rgb(255 255 255 / 0.2);
  border-radius: 13px;
  color: #fff;
  overflow: hidden;
  text-align: left;
  box-shadow: 0 9px 22px rgb(0 0 0 / 0.24);
  cursor: pointer;
}

.user-theme-button {
  background:
    radial-gradient(circle at 45% 38%, rgb(255 255 255 / 0.32), transparent 34%),
    repeating-linear-gradient(90deg, rgb(0 0 0 / 0.045) 0 1px, transparent 1px 16px),
    linear-gradient(135deg, var(--stadia-a, #e8ddc2), var(--stadia-b, #7fb1ba));
}

.user-material-button {
  --user-material-color: #6b3f2a;
  background-color: var(--user-material-color);
  background-image: url("assets/textures/pebbled-leather-gray.png"), url("assets/backgrounds/leather.png");
  background-size: 180px 180px, 220px 220px;
  background-blend-mode: multiply;
}

.user-material-button strong {
  order: 1;
}

.user-material-button span {
  order: 2;
  display: block;
  font-size: 0.62rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  -webkit-line-clamp: 1;
}

.user-preview-button span {
  position: relative;
  z-index: 1;
  display: -webkit-box;
  max-width: 166px;
  overflow: hidden;
  color: rgb(255 255 255 / 0.88);
  font-size: 0.68rem;
  font-weight: 850;
  line-height: 1.05;
  text-shadow: 0 1px 5px rgb(0 0 0 / 0.42);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.user-preview-button strong {
  position: relative;
  z-index: 1;
  max-width: 166px;
  color: currentColor;
  font-size: 1rem;
  font-weight: 950;
  line-height: 1.05;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 1px 5px rgb(0 0 0 / 0.42);
}

.user-theme-panel {
  position: absolute;
  top: 72px;
  right: 28px;
  bottom: calc(var(--playback-dock-height) + 18px);
  z-index: 901;
  width: min(920px, calc(100% - 56px));
  padding: 12px;
  border: 1px solid rgb(255 255 255 / 0.18);
  border-radius: 18px;
  background-color: var(--leather-color);
  background:
    linear-gradient(rgb(17 24 39 / 0.72), rgb(17 24 39 / 0.66)),
    url("assets/textures/pebbled-leather-gray.png"),
    url("assets/backgrounds/leather.png"),
    var(--leather-color);
  background-size: auto, var(--leather-texture-size), 420px 420px, auto;
  background-blend-mode: normal, var(--leather-blend-mode), multiply, normal;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.12),
    0 18px 42px rgb(0 0 0 / 0.36);
  overflow: auto;
}

.user-theme-panel[hidden] {
  display: none;
}

.user-picker-head {
  position: sticky;
  top: -12px;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin: -12px -12px 12px;
  padding: 12px;
  background: rgb(17 24 39 / 0.9);
  color: #fff;
}

.user-picker-head strong {
  display: block;
  font-size: 1.1rem;
  font-weight: 950;
}

.user-picker-head span {
  display: block;
  color: rgb(255 255 255 / 0.72);
  font-size: 0.8rem;
  font-weight: 750;
}

.user-picker-head button {
  min-height: 34px;
  padding: 0 18px;
  border: 1px solid rgb(255 255 255 / 0.2);
  border-radius: 9px;
  background: rgb(255 255 255 / 0.9);
  color: #172033;
  font-weight: 950;
  cursor: pointer;
}

.user-theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(172px, 1fr));
  gap: 12px;
}

.user-theme-grid .map-style-card {
  min-height: 124px;
}

@media (min-width: 1200px) {
  .user-theme-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .user-theme-panel {
    left: 14px;
    right: 14px;
    width: auto;
  }

  .user-theme-grid {
    grid-template-columns: repeat(auto-fit, minmax(142px, 1fr));
  }
}

/* Story controls sit directly on the Users frame instead of inside a second bar. */
body.user-site-mode .user-map-viewport {
  inset: 35px 35px 78px !important;
  border-radius: 18px;
}

/* The dock's Previous / Next controls are the active navigation. The legacy
   eight-button story cluster otherwise becomes hidden extra grid rows below
   this fixed-height dock. */
.playback-panel .story-navigation { display: none; }
.playback-panel .trip-animation-launch {
  grid-column: 4;
  min-width: 0;
  white-space: nowrap;
}
@media (max-width: 980px) {
  .playback-panel {
    grid-template-columns: minmax(88px, 1fr) minmax(110px, 1.2fr) minmax(88px, 1fr) minmax(132px, 1.25fr);
    gap: 6px;
    padding: 6px;
  }
  .playback-panel .trip-animation-launch { padding-inline: 8px; font-size: .74rem; }
}

.user-story-dock {
  position: static;
  display: contents;
}

.story-dock-left,
.story-dock-right,
.story-previous,
.story-next {
  position: absolute;
  z-index: 1107;
}

.story-dock-left { left: 8px; bottom: 7px; gap: 6px; }
.story-dock-right { right: 8px; bottom: 20px; gap: 6px; }
.story-dock-left #storyThemeSelect,
.story-dock-right button {
  width: 82px;
  min-height: 40px;
  padding: 4px;
  font-size: .7rem;
  line-height: 1.05;
  white-space: pre-line;
}
.story-dock-left #storyThemeSelect { width: 82px; }
.story-previous {
  left: calc(50% - 104px);
  bottom: 9px;
  width: 52px;
  min-height: 52px !important;
  padding: 0 !important;
  border-radius: 50% !important;
}
.story-next {
  left: 50%;
  bottom: 3px;
  width: 70px;
  min-height: 70px !important;
  padding: 0 !important;
  transform: translateX(-50%);
  border-radius: 50% !important;
  font-size: .68rem !important;
  line-height: 1.06;
  white-space: normal;
}
.random-theme-button {
  width: 68px;
  min-width: 68px;
  min-height: 68px !important;
}
.random-theme-button img {
  display: none;
}
.random-theme-button::after {
  content: "";
  position: absolute;
  inset: 11px 7px;
  background: var(--story-theme-glow);
  -webkit-mask: url("assets/SVG/Truck and RV Outline.svg") center / contain no-repeat;
  mask: url("assets/SVG/Truck and RV Outline.svg") center / contain no-repeat;
  filter: drop-shadow(0 0 6px var(--story-theme-glow));
}

/* Preserve a usable touch layout while retaining the framed story treatment. */
@media (max-width: 760px) {
  body.user-site-mode .user-map-viewport { inset: 28px 8px 76px !important; }
  .story-dock-left #storyThemeSelect, .story-dock-right #storyJourneyView { display: none; }
  .story-dock-right { bottom: 19px; }
}

body.user-site-mode #projectExportStatus { display: none !important; }

.usage-overlay {
  right: 16px;
  bottom: 14px;
  cursor: pointer;
  pointer-events: auto;
  transition: width 220ms ease, min-width 220ms ease, border-radius 220ms ease, transform 220ms ease;
}
.usage-overlay.is-collapsed {
  right: min(360px, calc(100% - 120px));
  bottom: 14px;
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 0;
  overflow: hidden;
  border-radius: 50%;
  color: transparent;
}
.usage-overlay.is-collapsed::after {
  content: attr(data-fps);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #111827;
  font-size: .64rem;
}

body.user-site-mode #siteModeToggle {
  top: 35px;
  right: 42px;
  left: auto;
  width: 48px;
  min-height: 58px;
  padding: 4px 6px 9px;
  transform: translateY(-62%);
  border-radius: 0 0 16px 16px;
  font-size: .58rem;
  line-height: 1;
  transition: transform 240ms ease, opacity 240ms ease;
  opacity: .38;
}
body.user-site-mode #siteModeToggle::after {
  content: "◉ ◉";
  display: block;
  margin-top: 5px;
  font-size: .55rem;
  letter-spacing: -2px;
}
body.user-site-mode #siteModeToggle:hover,
body.user-site-mode #siteModeToggle:focus-visible {
  transform: translateY(-14%);
  opacity: .96;
}

/* Keep the actual USER theme affordance available while authoring Users. */
body.users-builder-mode .map-stage #userMaterialControls {
  display: flex !important;
}
body.users-builder-mode .map-stage #userThemePanel {
  display: block !important;
}
body.users-builder-mode .map-stage #userThemePanel[hidden] {
  display: none !important;
}

/* Bounds may legitimately extend beyond the editor's map-zone column. */
/* Bounds are an editor overlay, not document content. Keep the application
   locked to the viewport even when a guide extends beyond the map zone. */
html:has(body.show-map-bounds),
body.show-map-bounds {
  height: 100%;
  overflow: visible;
}
body.show-map-bounds .map-shell {
  height: 100vh;
  min-height: 0;
  overflow: hidden;
}
body.show-map-bounds .map-stage { overflow: hidden; }

/* Keep the side-tab rail inside the panel's clipped horizontal viewport. */
.panel-tab-panels > .pinned-journey-section {
  margin-left: 0;
  overflow: visible;
}

.panel-tab-panels > .pinned-journey-section .pinned-section-side-tabs {
  display: contents;
}

.panel-tab-panels > .pinned-journey-section .pinned-side-tab {
  width: var(--pinned-tab-width);
  min-height: 42px;
  padding: 5px 4px;
  border-radius: 2px 0 0 2px;
  font-size: .78rem;
  letter-spacing: .035em;
  line-height: 1;
}

/* The public shell has one material background.  The grid only defines usable
   placement regions; its center track is reserved for the map viewport. */
.user-device-layout-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: var(--user-map-viewport-left) minmax(0, 1fr) var(--user-map-viewport-right);
  grid-template-rows: var(--user-map-viewport-top) minmax(0, 1fr) var(--user-map-viewport-bottom);
  pointer-events: auto;
}
.user-device-layout-cell {
  min-width: 0;
  min-height: 0;
  border: 1px solid transparent;
}
.user-device-layout-cell-top-left { grid-area: 1 / 1; }
.user-device-layout-cell-top { grid-area: 1 / 2; }
.user-device-layout-cell-top-right { grid-area: 1 / 3; }
.user-device-layout-cell-left { grid-area: 2 / 1; }
.user-device-layout-cell-map { grid-area: 2 / 2; }
.user-device-layout-cell-right { grid-area: 2 / 3; }
.user-device-layout-cell-bottom-left { grid-area: 3 / 1; }
.user-device-layout-cell-bottom { grid-area: 3 / 2; }
.user-device-layout-cell-bottom-right { grid-area: 3 / 3; }
body.users-builder-mode .user-device-layout-cell:not(.user-device-layout-cell-map) {
  border-color: rgb(117 221 255 / .23);
  background: rgb(117 221 255 / .025);
}
body.users-builder-mode .user-device-layout-cell-map {
  border-color: rgb(255 255 255 / .15);
}

/* Do not replace the saved map geometry with fixed user-site margins. */
body.user-site-mode .user-map-viewport {
  inset:
    calc(var(--user-device-preview-top, 0px) + var(--user-map-viewport-top))
    calc(var(--user-device-preview-right, 0px) + var(--user-map-viewport-right))
    calc(var(--user-device-preview-bottom, 0px) + var(--user-map-viewport-bottom))
    calc(var(--user-device-preview-left, 0px) + var(--user-map-viewport-left)) !important;
}

/* Compact devices retain usable touch targets while allowing the surrounding
   material tracks—not raw display pixels—to determine their available space. */
body[data-user-device-preview^="phone"] .user-layout-section-object {
  --user-layout-subsection-gap: clamp(3px, .7vw, 7px);
  min-width: 48px;
  min-height: 40px;
}
body[data-user-device-preview^="phone"] .user-layout-section-label {
  font-size: clamp(.52rem, 1.5vw, .68rem);
}

.keyframe-marquee { position:absolute; z-index:3; top:0; bottom:0; border:1px solid #f6cb4c; background:#f6cb4c44; pointer-events:none; }
.keyframe-type-menu { position:fixed; z-index:10000; display:grid; min-width:110px; padding:4px; border:1px solid #70889b; border-radius:6px; background:#1f2d38; box-shadow:0 7px 18px #0006; }
.keyframe-type-menu button { min-height:28px; border:0; border-radius:3px; color:#f7f1dc; background:transparent; text-align:left; }
.keyframe-type-menu button:hover, .keyframe-type-menu button.is-active { background:#49677c; }

/* Keep the two visual anchors truly round after shared button rules apply. */
#storyNext {
  width: 70px !important;
  height: 70px !important;
  min-height: 70px !important;
  border-radius: 50% !important;
}
#randomThemeButton {
  width: 68px !important;
  height: 68px !important;
  min-width: 68px !important;
  min-height: 68px !important;
  border-radius: 50% !important;
}

/* Story controls exist only for the actual USER experience or the Users editor. */
body:not(.user-site-mode):not(.users-builder-mode) #userStoryDock {
  display: none !important;
}

body.user-site-mode #userThemePanel:not([hidden]) {
  display: block !important;
  top: 35px;
  right: auto;
  bottom: 78px;
  left: 35px;
  width: calc((100% - 70px) / 5);
  max-width: none;
  overflow: auto;
  border-radius: 0 16px 16px 0;
}

/* A dark, theme-tinted well keeps the bright route glyph legible in every theme. */
#randomThemeButton {
  background: color-mix(in srgb, var(--story-theme-glow), #06111d 78%) !important;
}
#randomThemeButton::after {
  background: color-mix(in srgb, var(--story-theme-glow), white 58%);
  filter: drop-shadow(0 0 7px var(--story-theme-glow));
}

@media (max-width: 760px) {
  body.user-site-mode #userThemePanel:not([hidden]) {
    top: 28px;
    bottom: 76px;
    left: 8px;
    width: min(76vw, 300px);
  }
}

.user-material-panel {
  position: absolute;
  top: 64px;
  right: 78px;
  z-index: 904;
  display: grid;
  width: 220px;
  gap: 7px;
  padding: 9px;
  border: 1px solid rgb(255 255 255 / 0.18);
  border-radius: 14px;
  background: rgb(17 24 39 / 0.88);
  box-shadow: 0 14px 32px rgb(0 0 0 / 0.34);
}

.user-material-panel[hidden] {
  display: none;
}

.user-material-choice {
  --user-material-color: #6b3f2a;
  display: grid;
  min-height: 48px;
  padding: 7px 10px;
  border: 1px solid rgb(255 255 255 / 0.18);
  border-radius: 10px;
  background-color: var(--user-material-color);
  background-image: url("assets/textures/pebbled-leather-gray.png"), url("assets/backgrounds/leather.png");
  background-size: 180px 180px, 220px 220px;
  background-blend-mode: multiply;
  color: #fff;
  text-align: left;
  cursor: pointer;
}

.user-material-choice[aria-pressed="true"] {
  box-shadow: inset 0 0 0 2px #fff;
}

.user-material-choice strong {
  font-size: 0.98rem;
  font-weight: 950;
  line-height: 1;
}

.user-material-choice span {
  font-size: 0.68rem;
  font-weight: 800;
  opacity: 0.78;
  text-transform: uppercase;
}

.map-canvas {
  position: absolute;
  inset: 0 0 var(--playback-dock-height);
  width: 100%;
  height: auto;
}

.welcome-gate {
  position: absolute;
  inset: 0 0 var(--playback-dock-height);
  z-index: 1200;
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 18px;
  padding: clamp(26px, 5vh, 52px) 24px 24px;
  background-color: var(--leather-color);
  background-image:
    radial-gradient(circle at center, rgb(255 253 248 / 0.04), transparent 58%),
    url("assets/textures/pebbled-leather-gray.png"),
    url("assets/backgrounds/leather.png");
  background-repeat: no-repeat, repeat, repeat;
  background-position: center, 0 0, 0 0;
  background-size: 100% 100%, var(--leather-texture-size), 420px 420px;
  background-blend-mode: screen, var(--leather-blend-mode), multiply;
  transition: opacity 600ms ease;
}

/* The base grid declaration otherwise overrides the browser's [hidden]
   default.  This is essential when EDIT and USER are swapped in place. */
.welcome-gate[hidden] { display: none !important; }

.welcome-gate.is-dismissed {
  opacity: 0;
  pointer-events: none;
  animation: welcome-circle-wipe 950ms cubic-bezier(0.22, 0.84, 0.3, 1) both;
}

.welcome-card {
  display: grid;
  gap: 12px;
  width: min(580px, calc(100vw - 44px));
  padding: 26px;
  color: #fff;
  text-align: center;
}

.welcome-card > img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 12px;
  transition: opacity 220ms ease;
}

.welcome-card > img.is-changing { opacity: 0; }

.welcome-gate-actions { display: grid; gap: 10px; font-weight: 800; }
.welcome-gate-actions > div { display: flex; gap: 10px; }
.welcome-gate-actions button { flex: 1; transition: transform 160ms ease, opacity 160ms ease; }
.welcome-gate-actions button:hover:not(:disabled) { transform: translateY(-2px); }

.welcome-card strong {
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 950;
}

.welcome-card > span {
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 800;
}

.welcome-card small {
  color: rgb(255 255 255 / 0.84);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.35;
}

.welcome-progress {
  height: 14px;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 0.28);
  border-radius: 999px;
  background: rgb(0 0 0 / 0.24);
}

.welcome-progress span {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #88d7ff, #e9d36d, #9bdc8a);
  transition: width 260ms ease;
}

.welcome-gate.is-ready .welcome-progress span {
  width: 100%;
}

.welcome-card button {
  min-height: 42px;
  border: 1px solid rgb(255 255 255 / 0.28);
  border-radius: 10px;
  background: #25313d;
  color: #fff;
  font-weight: 950;
  cursor: pointer;
}

.welcome-card button:disabled {
  background: #8e969d;
  color: rgb(255 255 255 / 0.72);
  cursor: wait;
}

.story-navigation {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}

.story-navigation > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
}

.story-navigation button {
  min-width: 0;
  padding: 6px 4px;
  font-size: 0.72rem;
}

.user-story-dock {
  --story-theme-glow: #65d9ff;
  display: contents;
}

.user-story-dock button {
  min-height: 38px;
  border: 1px solid rgb(255 255 255 / .35);
  border-radius: 11px;
  background: rgb(255 253 248 / .94);
  color: #18222e;
  font-weight: 900;
}

.user-story-dock button:disabled { opacity: .38; cursor: not-allowed; }
.story-dock-left, .story-dock-right { display: flex; align-items: center; gap: 7px; }
.story-previous { font-size: 2rem; line-height: 1; }
.story-next { min-height: 52px !important; background: color-mix(in srgb, var(--story-theme-glow), white 22%) !important; color: #10202e !important; font-size: 1.05rem; box-shadow: 0 0 18px color-mix(in srgb, var(--story-theme-glow), transparent 50%); }
.random-theme-button { position: relative; width: 68px; min-width: 68px; min-height: 68px !important; padding: 4px !important; overflow: visible; border-radius: 50% !important; background: #1b2028 !important; box-shadow: inset 2px 2px 0 #7d7c7e, inset -2px -2px 0 #1c1c1c, 0 0 16px var(--story-theme-glow) !important; }
.random-theme-button::before { content: ""; position: absolute; inset: -5px; z-index: -1; border-radius: inherit; background: radial-gradient(circle, color-mix(in srgb, var(--story-theme-glow), transparent 28%), transparent 70%); opacity: .9; transition: opacity 360ms ease; }
.random-theme-button img { width: 29px; height: 29px; object-fit: contain; filter: brightness(2.6) saturate(1.35) drop-shadow(0 0 6px var(--story-theme-glow)); }
.random-theme-button.theme-glow-refresh::before { animation: story-theme-glow 680ms ease both; }
@keyframes story-theme-glow { 0% { opacity: .9; transform: scale(1); } 42% { opacity: 0; transform: scale(.76); } 100% { opacity: .9; transform: scale(1); } }

body.user-site-mode .welcome-gate {
  inset: 0 0 86px;
  z-index: 1100;
  overflow: auto;
}

body.user-site-mode #userThemePanel:not([hidden]) {
  display: block !important;
  z-index: 1120;
  bottom: 94px;
}

@media (max-width: 760px) {
  .user-story-dock { grid-template-columns: 42px 35px minmax(100px, 1fr) auto; gap: 5px; left: 6px; right: 6px; bottom: 6px; padding: 6px; }
  .story-dock-left #storyThemeSelect, .story-dock-right #storyJourneyView { display: none; }
  .story-dock-right button { min-width: 54px; font-size: .68rem; }
}

.welcome-copy-panel {
  width: min(860px, calc(100vw - 72px));
  padding: 26px 30px;
  color: #fffdf8;
}

.welcome-copy-panel h2 {
  margin: 0 0 12px;
  font-size: 1.2rem;
  font-weight: 900;
}

.welcome-copy-panel p {
  margin: 0 0 14px;
  color: rgb(255 255 255 / 0.9);
  font-size: 0.98rem;
  font-weight: 620;
  line-height: 1.62;
}

.welcome-copy-panel p:last-child {
  margin-bottom: 0;
}

@keyframes welcome-circle-wipe {
  0% {
    -webkit-mask-image: radial-gradient(circle at center, transparent 0%, #000 2%);
    mask-image: radial-gradient(circle at center, transparent 0%, #000 2%);
  }
  55% {
    -webkit-mask-image: radial-gradient(circle at center, transparent 44%, #000 58%);
    mask-image: radial-gradient(circle at center, transparent 44%, #000 58%);
  }
  100% {
    -webkit-mask-image: radial-gradient(circle at center, transparent 130%, #000 150%);
    mask-image: radial-gradient(circle at center, transparent 130%, #000 150%);
  }
}

.maplibre-basemap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: var(--land);
}

.maplibre-basemap[hidden] {
  display: none;
}

.maplibre-basemap .maplibregl-canvas,
.maplibre-basemap .maplibregl-canvas-container {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.maplibre-basemap .maplibregl-control-container {
  display: none;
}

.street-vector-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 302;
  pointer-events: none;
  background: transparent;
  overflow: hidden;
  opacity: 0;
  transition: opacity 160ms ease;
  --vector-overlay-opacity: 1;
}

.street-vector-overlay.is-ready {
  opacity: var(--vector-overlay-opacity);
}

.street-vector-overlay .maplibregl-canvas,
.street-vector-overlay .maplibregl-canvas-container {
  background: transparent !important;
}

.street-vector-overlay .maplibregl-canvas {
  display: block;
  outline: 0;
}

.map-canvas {
  z-index: 1;
  background: transparent;
}

.leaflet-container {
  background: transparent;
}

.map-canvas.using-maplibre-basemap .leaflet-pane.leaflet-tile-pane,
.map-canvas.using-maplibre-basemap .leaflet-pane.leaflet-topography-pane,
.map-canvas.using-maplibre-basemap .leaflet-pane.leaflet-ocean-pane,
.map-canvas.using-maplibre-basemap .leaflet-pane.leaflet-land-pane,
.map-canvas.using-maplibre-basemap .leaflet-pane.leaflet-water-pane,
.map-canvas.using-maplibre-basemap .leaflet-pane.leaflet-street-pane,
.map-canvas.using-maplibre-basemap .leaflet-pane.leaflet-street-vector-pane,
.map-canvas.using-maplibre-basemap .leaflet-pane.leaflet-road-basemap-pane,
.map-canvas.using-maplibre-basemap .leaflet-pane.leaflet-roadBasemapPane-pane {
  opacity: 0 !important;
  pointer-events: none !important;
}

.leaflet-roadBasemapPane-pane,
.leaflet-road-basemap-pane {
  z-index: 205 !important;
  opacity: 1 !important;
  pointer-events: none;
}

.map-canvas.using-maplibre-basemap .map-theme-overlay,
.map-canvas.using-maplibre-basemap .topography-tint-overlay,
.map-canvas.using-maplibre-basemap::after {
  opacity: 0 !important;
  display: none !important;
}

.map-canvas.is-camera-moving .map-theme-overlay,
.map-canvas.is-camera-moving .map-layer-texture-overlay,
.map-canvas.is-camera-moving .topography-tint-overlay,
.map-canvas.is-camera-moving::after {
  opacity: 0 !important;
}

.map-canvas.is-camera-transitioning .maplibre-basemap,
.map-canvas.is-camera-transitioning .leaflet-overlay-pane,
.map-canvas.is-camera-transitioning .leaflet-marker-pane,
.map-canvas.is-camera-transitioning .leaflet-shadow-pane,
.map-canvas.is-camera-transitioning .leaflet-tooltip-pane,
.map-canvas.is-camera-transitioning .map-layer-texture-overlay {
  transition: opacity 260ms ease, filter 260ms ease;
}

.map-canvas.is-camera-fading-out .maplibre-basemap,
.map-canvas.is-camera-fading-out .leaflet-overlay-pane,
.map-canvas.is-camera-fading-out .leaflet-marker-pane,
.map-canvas.is-camera-fading-out .leaflet-shadow-pane,
.map-canvas.is-camera-fading-out .leaflet-tooltip-pane,
.map-canvas.is-camera-fading-out .map-layer-texture-overlay {
  opacity: 0.42;
  filter: blur(1px);
}

.map-canvas.is-camera-fading-in .maplibre-basemap,
.map-canvas.is-camera-fading-in .leaflet-overlay-pane,
.map-canvas.is-camera-fading-in .leaflet-marker-pane,
.map-canvas.is-camera-fading-in .leaflet-shadow-pane,
.map-canvas.is-camera-fading-in .leaflet-tooltip-pane,
.map-canvas.is-camera-fading-in .map-layer-texture-overlay {
  opacity: 1;
  filter: blur(0);
}

.map-canvas.is-zooming-in .maplibre-basemap,
.map-canvas.is-zooming-in .leaflet-overlay-pane,
.map-canvas.is-zooming-in .leaflet-marker-pane,
.map-canvas.is-zooming-in .leaflet-shadow-pane,
.map-canvas.is-zooming-in .leaflet-tooltip-pane {
  filter: blur(0.7px);
}

.leaflet-route-stroke {
  transition: stroke-width 180ms ease, stroke-opacity 180ms ease, stroke 180ms ease;
}

.map-theme-overlay {
  position: absolute;
  inset: 0;
  z-index: 350;
  pointer-events: none;
  opacity: 0;
  transition: opacity 160ms ease;
}

.map-layer-texture-overlay {
  position: absolute;
  inset: 0;
  z-index: var(--layer-texture-z, 352);
  pointer-events: none;
  opacity: 0;
  background: none;
  mix-blend-mode: normal;
  transition: opacity 160ms ease;
}

.topography-tint-overlay {
  position: absolute;
  inset: 0;
  z-index: 241;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: multiply;
  transition: opacity 160ms ease;
}

.map-theme-overlay.route-theme-watercolor {
  opacity: var(--route-theme-texture-opacity);
  mix-blend-mode: multiply;
  background:
    radial-gradient(circle at 20% 16%, rgb(var(--route-theme-land-a) / 0.22), transparent 18%),
    radial-gradient(circle at 78% 72%, rgb(var(--route-theme-land-b) / 0.14), transparent 22%),
    repeating-radial-gradient(ellipse at 50% 50%, transparent 0 13px, rgb(var(--route-theme-land-b) / 0.10) 14px 15px, transparent 16px 28px),
    repeating-linear-gradient(18deg, rgb(70 43 25 / 0.035) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(101deg, rgb(255 255 255 / 0.05) 0 1px, transparent 1px 9px);
  background-size: 233px 211px, 311px 277px, 260px 180px, 96px 96px, 128px 128px;
}

.street-line-tiles {
  mix-blend-mode: normal;
  opacity: var(--road-zoom-opacity, 1);
  transition: opacity 140ms linear;
}

.map-canvas::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 351;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: color-burn;
  transition: opacity 160ms ease;
}

.map-canvas:has(.map-theme-overlay.route-theme-watercolor)::after {
  opacity: 0.2;
  background:
    repeating-linear-gradient(0deg, rgb(var(--route-theme-water-a) / 0.12) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, rgb(var(--route-theme-water-b) / 0.10) 0 1px, transparent 1px 7px);
  background-size: 104px 104px, 142px 142px;
}

.map-theme-overlay.stadia-style-tinted {
  opacity: calc(0.12 + var(--stadia-topo-blend) * 0.5);
  background:
    linear-gradient(135deg, rgb(var(--stadia-map-a-rgb) / 0.74), rgb(var(--stadia-map-b-rgb) / 0.7)),
    radial-gradient(circle at 24% 18%, rgb(var(--stadia-map-a-rgb) / 0.72), transparent 38%),
    radial-gradient(circle at 72% 76%, rgb(var(--stadia-map-b-rgb) / 0.68), transparent 42%),
    repeating-radial-gradient(ellipse at 50% 50%, transparent 0 14px, rgba(0, 0, 0, calc(var(--stadia-topo-contours) * 0.16)) 15px 16px, transparent 17px 28px);
  mix-blend-mode: color;
}

.map-theme-overlay.stadia-style-plastic {
  opacity: 0.42;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.08) 22%, transparent 42%),
    radial-gradient(circle at 23% 18%, rgba(255, 255, 255, 0.48), transparent 18%),
    radial-gradient(circle at 72% 78%, rgba(39, 194, 255, 0.18), transparent 26%),
    repeating-radial-gradient(ellipse at 50% 50%, transparent 0 12px, rgba(0, 0, 0, calc(var(--stadia-topo-contours) * 0.22)) 13px 14px, transparent 15px 24px);
  filter: blur(calc(var(--stadia-topo-blend) * 2px));
  mix-blend-mode: soft-light;
}

.us-view-button {
  position: absolute;
  bottom: calc(var(--playback-dock-height) + 18px);
  left: 16px;
  z-index: 820;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  place-items: center;
  min-width: 148px;
  height: 44px;
  padding: 0 16px;
  border: 1px solid color-mix(in srgb, var(--control), #ffffff 28%);
  border-radius: 999px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--control), #ffffff 24%), var(--control));
  color: var(--control-text);
  box-shadow: 0 12px 28px rgba(31, 41, 51, 0.28), inset 0 1px 0 rgb(255 255 255 / 0.36);
  font-weight: 900;
  cursor: pointer;
}

.map-control-cluster {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 825;
  display: grid;
  grid-template-columns: 44px 76px 76px;
  grid-template-rows: 42px 38px;
  gap: 0;
  filter: drop-shadow(0 8px 18px rgba(31, 41, 51, 0.16));
}

.map-control-cluster button {
  min-height: 38px;
  border: 1px solid color-mix(in srgb, var(--line), var(--ink) 10%);
  background: rgba(255, 253, 248, 0.94);
  color: var(--control);
  font-weight: 900;
  cursor: pointer;
}

.map-control-cluster button:hover {
  background: #ffffff;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--control), transparent 68%);
}

.map-control-cluster button.is-lock-enabled {
  background: color-mix(in srgb, var(--control), #ffffff 86%);
  color: color-mix(in srgb, var(--control), #000 8%);
}

.map-feature-toolbar {
  position: absolute;
  top: 106px;
  left: 16px;
  z-index: 826;
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  align-items: center;
  padding: 5px;
  border: 1px solid color-mix(in srgb, var(--line), var(--ink) 8%);
  border-radius: 12px;
  background: rgb(255 253 248 / 0.9);
  box-shadow: 0 10px 24px rgb(31 41 51 / 0.14);
  backdrop-filter: blur(7px);
}

.map-feature-toolbar button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  min-height: 0;
  padding: 3px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--line), var(--ink) 12%);
  border-radius: 10px;
  background: #e9f7ee;
  color: var(--ink);
  cursor: pointer;
}

.map-feature-toolbar button:hover {
  border-color: var(--control);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--control), transparent 74%);
}

.map-feature-toolbar button.is-hidden-state { border-color: #e79aac; background: #ffe1e8; color: #80354a; box-shadow: inset 0 0 0 1px #fff8; }

.map-feature-toolbar .music-track-button {
  --music-note-color: var(--control);
  position: relative;
  overflow: visible;
  border-radius: 50%;
  background: color-mix(in srgb, var(--panel), var(--control) 13%);
  box-shadow: 0 0 15px color-mix(in srgb, var(--music-note-color), transparent 72%), inset 0 0 0 1px color-mix(in srgb, var(--control), #fff 26%);
}

.music-track-button .material-symbols-rounded {
  position: relative;
  z-index: 1;
  font-size: 28px;
  color: var(--music-note-color);
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--music-note-color), #fff 24%)) drop-shadow(0 0 10px color-mix(in srgb, var(--music-note-color), transparent 28%));
}

.music-track-button::before {
  content: "";
  position: absolute;
  inset: -7px;
  z-index: 0;
  border-radius: inherit;
  background: radial-gradient(circle, color-mix(in srgb, var(--music-note-color), transparent 48%), transparent 69%);
  filter: blur(5px);
  opacity: .72;
  pointer-events: none;
}

.music-track-button.is-unassigned { opacity: .48; }
.music-track-button.is-unassigned .material-symbols-rounded { color: color-mix(in srgb, var(--ink), transparent 42%); filter: none; }
.music-track-button.is-unassigned::before { opacity: .14; }

.music-scope-selectors {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 8px;
}

.music-scope-selectors label { display: grid; gap: 2px; min-width: 0; color: var(--muted); font-size: .73rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.music-scope-selectors select { min-width: 0; color: var(--ink); font: inherit; font-size: .82rem; text-transform: none; letter-spacing: normal; }
.music-scope-selectors label:first-child { grid-column: 1 / -1; }
.music-assignment-editor .sfx-assignment-row { margin-top: 2px; }

.map-feature-toolbar .route-endpoint-marker-frame,
.map-feature-toolbar .route-playback-icon-frame {
  transform: scale(1.06);
}

.map-feature-toolbar svg {
  width: 100%;
  height: 100%;
}

.feature-stop-name-icon {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 24px;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 1px 5px rgb(31 41 51 / 0.2);
  font-size: 0.82rem;
  font-weight: 950;
}

.map-control-cluster #zoomIn {
  grid-column: 1;
  grid-row: 1;
  border-radius: 10px 0 0 0;
}

.map-control-cluster #zoomOut {
  grid-column: 1;
  grid-row: 2;
  border-top: 0;
  border-radius: 0 0 0 10px;
}

.map-control-cluster #resetView {
  grid-column: 2;
  grid-row: 1;
  border-left: 0;
  border-radius: 0;
}

.map-control-cluster #setMapView {
  grid-column: 3;
  grid-row: 1;
  border-left: 0;
  border-radius: 0 10px 0 0;
}

.map-control-cluster :is(#resetView, #setMapView) {
  padding: 3px 7px;
  font-size: 0.72rem;
  font-weight: 760;
  line-height: 1.05;
  text-wrap: balance;
}

/* Temporarily remove the quick show/hide rail while its replacement is being
   redesigned. The detailed map-element controls remain available in Themes. */
.map-feature-toolbar { display: none !important; }

.map-control-cluster #setMapView.is-saved-view {
  background: var(--control);
  color: var(--control-ink, #fff);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--control), #111 28%);
}

.map-pan-row {
  display: grid;
  grid-column: 2 / 4;
  grid-row: 2;
  grid-template-columns: repeat(2, 76px);
  gap: 0;
}

.terminology-control-grid,
.compact-check-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 8px;
}

.terminology-control-grid label {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  font-size: 0.73rem;
  font-weight: 850;
}

.terminology-control-grid input {
  min-width: 0;
  height: 30px;
  padding: 3px 6px;
}

.compact-section-note {
  margin: 0 0 7px;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.2;
}

.journey-style-identity-row,
.sticker-global-row,
.compact-shape-size-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(112px, 0.44fr);
  gap: 8px;
  align-items: end;
}

.compact-color-control {
  display: grid;
  grid-template-columns: 1fr 42px;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 850;
}

.compact-color-control input[type="color"] {
  width: 42px;
  height: 30px;
}

.compact-check-grid {
  margin: 7px 0 0;
  padding: 6px 8px 7px;
  border: 1px solid color-mix(in srgb, var(--line), transparent 18%);
  border-radius: 7px;
}

.compact-check-grid legend {
  padding: 0 4px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.compact-check-grid label {
  display: flex;
  gap: 5px;
  align-items: center;
  min-width: 0;
  font-size: 0.72rem;
  font-weight: 760;
}

.compact-shape-size-row {
  grid-template-columns: minmax(108px, 0.36fr) minmax(0, 1fr);
}

.journey-outline-controls {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 6px 8px;
  align-items: end;
  margin-top: 7px;
}

.journey-outline-controls > :first-child {
  grid-row: 1 / 3;
  align-self: center;
}

.compact-shape-slider.range-control {
  grid-template-columns: 66px minmax(0, 1fr) 34px;
}

.sticker-library {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: 6px;
}
.sticker-library.is-pin-picker { grid-template-columns: 1fr; gap: 8px; }
.pin-library-shape-row { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 7px; align-items: center; }
.pin-library-shape-row > strong { color: var(--muted); font-size: .68rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.pin-library-positions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.pin-library-positions .sticker-library-item { grid-template-rows: 42px auto; min-height: 62px; }
.pin-library-positions .sticker-library-item span { font-size: .6rem; }
.pin-library-positions .sticker-library-pin { width: 36px; height: 36px; }
.pin-library-controls { display: flex; flex-wrap: wrap; align-items: end; gap: 9px; margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--line); }
.pin-library-controls[hidden] { display: none; }
.pin-library-recent-label { display: block; margin-bottom: 3px; color: var(--muted); font-size: .63rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.pin-library-recent-colors { display: flex; flex-wrap: wrap; gap: 4px; }
.pin-library-recent-colors button { width: 22px; min-width: 22px; min-height: 22px; padding: 0; border: 2px solid color-mix(in srgb, var(--pin-swatch), #fff 48%); border-radius: 5px; background: var(--pin-swatch); }
.sticker-global-row { grid-template-columns: minmax(0, 1fr) minmax(0, .38fr); gap: 6px; }
.sticker-default-size-control.range-control { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 3px; }
.sticker-default-size-control.range-control > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.sticker-library-tabs { display: flex; flex-wrap: nowrap; gap: 4px; margin: 9px 0; }
.sticker-library-tabs button { flex: 1 1 0; min-width: 0; min-height: 32px; padding: 4px 5px; overflow: hidden; font-size: clamp(.66rem, 1.05vw, .86rem); line-height: 1.12; text-overflow: ellipsis; white-space: nowrap; }
.sticker-library-tabs button[aria-selected="true"] { background: var(--control); color: var(--control-text); }

.sticker-create-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(98px, 0.38fr) auto;
  gap: 7px;
  align-items: end;
  margin-top: 7px;
}

.sticker-create-row button {
  min-height: 30px;
}

/* Long icon editors are split into the same compact twirls used elsewhere in
   the control panel.  Leaving each one independently open avoids a long
   unneeded scroll just to reach the shape or stroke controls. */
details.control-subsection {
  display: grid;
  gap: 7px;
  margin: 7px 0;
  padding: 7px 8px 8px;
  border: 1px solid color-mix(in srgb, var(--line), transparent 8%);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel), #fff 10%);
}

details.control-subsection > summary {
  display: flex;
  align-items: center;
  min-height: 25px;
  cursor: pointer;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .065em;
  text-transform: uppercase;
}

details.control-subsection > summary::marker { color: var(--control); }
details.control-subsection:not([open]) { padding-bottom: 5px; }

.sticker-library-item {
  display: grid;
  grid-template-rows: 54px auto;
  place-items: center;
  min-height: 78px;
  padding: 5px;
  border: 1px solid color-mix(in srgb, var(--line), transparent 12%);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel), #fff 18%);
  cursor: grab;
}

.sticker-library-item img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  pointer-events: none;
}

.sticker-library-item span {
  max-width: 100%;
  overflow: hidden;
  font-size: 0.66rem;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sticker-selection-controls {
  display: grid;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.sticker-selection-controls[hidden] { display: none; }

/* Compact CapCut-inspired timing lanes for route-attached media and stickers. */
.timeline-section { display: grid; gap: 8px; }
.timeline-transport { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; padding: 6px; border: 1px solid color-mix(in srgb, var(--line), var(--control) 28%); border-radius: 9px; background: color-mix(in srgb, var(--panel), var(--control) 7%); }
.timeline-transport button { min-width: 32px; min-height: 30px; padding: 4px 7px; border: 1px solid var(--control); border-radius: 7px; background: var(--control); color: var(--control-text); font: inherit; font-size: .72rem; font-weight: 850; cursor: pointer; }
.timeline-transport #timelineStepBackward .material-symbols-rounded, .timeline-transport #timelineStepForward .material-symbols-rounded { font-size: 1.18rem; font-variation-settings: "wght" 360; }
.timeline-transport button[aria-pressed="true"], .timeline-transport button.is-active { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--control-text), transparent 45%); transform: translateY(1px); }
.timeline-transport button:disabled, .timeline-transport select:disabled { opacity: .45; cursor: not-allowed; }
.timeline-transport label { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; color: var(--muted); font-size: .68rem; font-weight: 800; }
.timeline-transport select { min-height: 30px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); color: var(--ink); font: inherit; font-weight: 750; }
.selection-section { display: grid; gap: 7px; }
.map-selection-dock { position: absolute; z-index: 835; display: flex; align-items: center; gap: 6px; width: max-content; max-width: calc(100% - 20px); padding: 6px 8px; border: 1px solid var(--line); border-radius: 9px; background: color-mix(in srgb, var(--panel), #fff 20%); box-shadow: 0 5px 15px rgb(0 0 0 / .16); white-space: nowrap; }
.map-selection-dock .selection-dock-heading { display: flex; align-items: center; min-width: 104px; gap: 6px; }
.map-selection-dock .selection-dock-heading output { margin-left: auto; text-align: right; }
.map-selection-dock .section-label { margin: 0; }
.map-selection-dock .selection-inline-types, .map-selection-dock .selection-controls { flex-wrap: nowrap; gap: 4px; }
.map-selection-dock .selection-inline-types { font-size: .62rem; }
.map-selection-dock .selection-controls button { min-height: 25px; padding: 3px 6px; }
.map-selection-dock .selection-controls output { margin: 0; font-size: .64rem; }
body.user-site-mode .map-selection-dock, body.users-builder-mode .map-selection-dock { display: none !important; }
.selection-inline-types { display: flex; flex-wrap: wrap; gap: 7px; font-size: .64rem; font-weight: 750; text-transform: none; letter-spacing: 0; }
.selection-section.is-collapsed > .selection-inline-types { display: flex; padding: 0 9px 7px; }
.selection-inline-types input { accent-color: var(--control); }
.selection-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.selection-controls button { min-height: 27px; padding: 3px 7px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); color: var(--ink); font: inherit; font-size: .67rem; font-weight: 800; cursor: pointer; }
.selection-controls button:disabled { opacity: .45; cursor: not-allowed; }
.selection-controls output { margin-left: auto; color: var(--muted); font-size: .67rem; font-weight: 800; }
.map-selection-marquee { position: fixed; z-index: 5000; pointer-events: none; border: 2px solid #48c8ff; border-radius: 4px; background: color-mix(in srgb, #48c8ff, transparent 84%); box-shadow: 0 0 0 1px #fff8, 0 0 16px #48c8ff88; }
.selection-type-popup { position: fixed; z-index: 6000; display: grid; gap: 6px; min-width: 150px; padding: 9px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); box-shadow: 0 12px 28px #0004; color: var(--ink); font-size: .72rem; font-weight: 750; }
.selection-type-popup[hidden] { display: none; }.selection-type-popup button { min-height: 28px; border: 1px solid var(--control); border-radius: 6px; background: var(--control); color: var(--control-text); font: inherit; font-weight: 800; cursor: pointer; }
.selection-shortcut-menu { position: fixed; z-index: 1108; left: 0; bottom: 132px; width: 208px; display: grid; grid-template-columns: 1fr; gap: 0; padding: 7px 4px 7px 12px; border: 1px solid #57bde9; border-left: 0; border-radius: 0 10px 10px 0; background: #bceeff; box-shadow: 5px 5px 14px #164a6a44; color: #183245; font-size: .69rem; font-weight: 540; transform: translateX(0); transition: transform 260ms ease; }
.selection-shortcut-menu.is-collapsed { transform: translateX(-100%); }
.selection-shortcut-menu > strong { align-self: center; font-size: .68rem; letter-spacing: .055em; line-height: 1.1; text-transform: uppercase; }
.selection-shortcut-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 5px; padding: 5px 7px; border: 1px solid rgb(49 86 107 / .2); border-bottom-width: 0; border-radius: 6px 6px 0 0; background: rgb(255 255 255 / .18); line-height: 1.18; }
.selection-shortcut-body { display: grid; gap: 3px; min-width: 0; }
.selection-shortcut-mouse { align-self: stretch; width: 28px; min-height: 38px; max-height: 56px; object-fit: contain; object-position: center; }
.selection-shortcut-row:last-child { border-bottom-width: 1px; border-radius: 6px; }
.selection-shortcut-toggle { --secondary-wheel-size: 52px; position: fixed; width: 52px; height: 52px; min-height: 52px; padding: 0; border: 0; background: transparent; box-shadow: none; z-index: 1109; }
/* The left shortcut drawer uses the horizontally flipped SVG. Its guide is
   aligned to the left map edge, while yellow points right when it is open. */
.selection-shortcut-toggle.secondary-wheel-toggle,
.selection-shortcut-toggle.secondary-wheel-toggle.is-collapsed-toggle {
  transform: translateX(-14.438%);
}
.selection-shortcut-toggle .drawer-wheel-arrow { width: 52px; height: 52px; transform: rotate(180deg); }
.selection-shortcut-toggle.is-collapsed-toggle { --drawer-arrow-turn: 0deg; }
.selection-shortcut-toggle:not(.is-collapsed-toggle) { --drawer-arrow-turn: 180deg; }
.selection-shortcut-keys { display: flex; flex-wrap: wrap; gap: 3px; color: #31566b; }
.selection-shortcut-body > span:last-child { display: -webkit-box; max-width: 20ch; overflow: hidden; font-size: .69rem; font-weight: 540; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.selection-shortcut-menu kbd { display: inline-grid; min-height: 22px; padding: 2px 6px; place-items: center; border: 1px solid #5d8aa1; border-radius: 4px; background: #254253; color: #fff; font: 800 .72rem/1 system-ui, sans-serif; box-shadow: inset 0 -1px #0002; }
.selection-marquee-hint { position: fixed; z-index: 6001; left: 50%; bottom: 26px; max-width: min(420px, calc(100vw - 28px)); transform: translateX(-50%); padding: 8px 11px; border: 1px solid #48c8ff; border-radius: 8px; background: #152534ed; color: #f3fbff; box-shadow: 0 8px 22px #0006; font-size: .73rem; font-weight: 750; pointer-events: none; }
.selection-marquee-hint[hidden] { display: none; }
@media (max-width: 700px) { .selection-shortcut-menu { left: 0; right: auto; width: min(208px, calc(100vw - 8px)); } }
.map-selection-legend { position: absolute; right: 0; bottom: 0; display: none !important; grid-template-columns: 1fr; gap: 7px; width: 158px; margin: 0 !important; padding: 9px 10px 11px; border: 2px solid #2498d1; border-right: 0; border-bottom: 0; border-radius: 12px 0 0 0; background: #a9ebff; box-shadow: -4px -4px 16px #1a668944; color: #183245; font: 750 .64rem/1.18 Inter, ui-sans-serif, system-ui, sans-serif; }
#map .leaflet-control-attribution { margin: 0 0 8px 0; }
.map-selection-legend > strong { margin-bottom: 1px; font-size: .67rem; letter-spacing: .05em; text-transform: uppercase; }
.map-selection-legend > div { display: grid; grid-template-columns: 25px minmax(0, 1fr); align-items: center; gap: 7px; text-align: left; }
.map-legend-sample { display: block; width: 23px; height: 20px; border-radius: 4px; background: transparent; }
.map-legend-selected { border: 2px solid #48c8ff; box-shadow: 0 0 5px #48c8ffaa; }
.map-legend-group { border: 2px solid #d379ff; box-shadow: 0 0 5px #d379ffaa; }
.map-legend-timeline { border: 3px solid #ffcf46; box-shadow: 0 0 0 3px rgb(255 207 70 / .26); }
.map-legend-null { border: 3px solid #a8ff00; box-shadow: inset 0 0 0 2px #18232b, 0 0 5px rgb(168 255 0 / .65); }
body.user-site-mode .map-selection-legend { display: none; }
body.user-site-mode #map .leaflet-control-attribution { margin-right: 0; }
.route-endpoint-marker.is-map-feature-selected, .route-playback-icon.is-map-feature-selected { outline: 2px solid #48c8ff; outline-offset: 2px; border-radius: 8px; }
.route-endpoint-marker.is-map-feature-active, .route-playback-icon.is-map-feature-active { outline: 3px solid #ffcf46; outline-offset: 2px; filter: drop-shadow(0 0 5px #ffcf46) drop-shadow(0 0 10px rgb(255 207 70 / .55)); }
.map-sticker-frame.is-selected { outline: 2px solid #48c8ff; outline-offset: 3px; border-radius: 8px; }
.map-sticker-frame.is-selected.is-grouped { outline-color: #d379ff; }
.map-sticker-frame.is-selection-active:not(.is-timeline-focused) { outline: 3px solid #ffcf46; outline-offset: 2px; box-shadow: 0 0 0 5px rgb(255 207 70 / .26); filter: drop-shadow(0 0 5px #ffcf46) drop-shadow(0 0 10px rgb(255 207 70 / .55)); }
.map-sticker-frame.is-selection-active.is-grouped:not(.is-timeline-focused) { outline-color: #ffcf46; filter: drop-shadow(0 0 5px #ffcf46) drop-shadow(0 0 10px rgb(255 207 70 / .55)); }
.map-sticker-frame.is-object-null { display: grid; place-items: center; border: 3px solid #a8ff00; border-radius: 8px; background: rgb(18 28 35 / .38); box-shadow: inset 0 0 0 1px #152026, 0 0 8px rgb(168 255 0 / .75); }
.map-sticker-frame.is-object-null.is-selected { outline-color: #48c8ff; outline-offset: 5px; }
.map-sticker-frame.is-object-null.is-selected.is-grouped { outline-color: #d379ff; }
.map-null-object { color: #a8ff00; font: 900 clamp(.5rem, 1.5vw, .8rem)/1 system-ui, sans-serif; letter-spacing: .08em; text-shadow: 0 1px 2px #000; }
.map-sticker-frame.is-object-pin { display: grid; place-items: center; }
.map-pin-object { display: grid; width: 72%; height: 72%; place-items: center; border: var(--pin-stroke-width, 3px) solid var(--pin-stroke-color, #fff); border-radius: 50%; background: var(--object-pin-color); color: #fff; font-weight: 900; box-shadow: var(--pin-body-shadow, 0 2px 5px #0007); }
.map-pin-object.is-shape-round { border-radius: 50%; }
.map-pin-object.is-shape-shield { clip-path: polygon(50% 100%, 6% 55%, 6% 31%, 23% 8%, 77% 8%, 94% 31%, 94% 55%); border-radius: 50%; }
.map-pin-object.is-shape-square { border-radius: 12px; }
.map-pin-object.is-shape-teardrop { width: 68%; height: 78%; border-radius: 50% 50% 50% 5%; transform: rotate(-45deg); }
.map-pin-object.is-shape-teardrop > :not(.map-pin-note) { transform: rotate(45deg); }
.map-pin-object.is-shape-arrow { width: 78%; height: 68%; clip-path: polygon(0 35%, 58% 35%, 58% 0, 100% 50%, 58% 100%, 58% 65%, 0 65%); border-radius: 0; }
.map-pin-object.is-shape-heart { width: 78%; height: 74%; clip-path: path("M50 88 C 15 64 4 47 4 29 C4 12 17 2 31 2 C40 2 47 7 50 14 C53 7 60 2 69 2 C83 2 96 12 96 29 C96 47 85 64 50 88 Z"); border-radius: 0; }
.map-pin-object.is-shape-plus { width: 72%; height: 72%; clip-path: polygon(34% 0,66% 0,66% 34%,100% 34%,100% 66%,66% 66%,66% 100%,34% 100%,34% 66%,0 66%,0 34%,34% 34%); border-radius: 0; }
.map-pin-object.is-shape-speech { width: 82%; height: 65%; border-radius: 22px; }
.map-pin-object.is-shape-speech::after { content: ""; position: absolute; bottom: -15%; left: var(--speech-tail, 42%); width: 24%; height: 28%; background: inherit; clip-path: polygon(0 0, 100% 0, 18% 100%); }
.map-pin-object.is-shape-speech.is-down-left { --speech-tail: 15%; }
.map-pin-object.is-shape-speech.is-down-right { --speech-tail: 62%; }
.map-pin-object.is-shape-note { width: 82%; height: 76%; align-content: center; padding: 7%; border-radius: 5px; color: #18232b; }
.map-pin-object.is-sticker-graphic { width: 88%; height: 88%; }
.map-pin-object.is-null-shape { opacity: .82; }
.map-pin-note { display: -webkit-box; overflow: hidden; max-width: 100%; max-height: 100%; -webkit-box-orient: vertical; -webkit-line-clamp: 5; font: 800 clamp(.38rem, .75vw, .62rem)/1.15 Inter, ui-sans-serif, sans-serif; overflow-wrap: anywhere; text-align: left; }
.map-pin-graphic { width: 62%; height: 62%; max-width: 100%; max-height: 100%; object-fit: contain; transform: scale(var(--pin-graphic-scale, .62)); transform-origin: center; filter: var(--pin-graphic-filter, drop-shadow(0 0 var(--pin-graphic-stroke-width, 0px) var(--pin-graphic-stroke, #fff))); }
.map-pin-object.is-preview { overflow: hidden; background: #fff; }
.map-pin-object.is-preview img { width: 100%; height: 100%; object-fit: cover; }
.media-preview-placeholder { display: grid; width: 100%; height: 100%; place-items: center; border: 2px dashed color-mix(in srgb, var(--line), var(--control) 32%); border-radius: 7px; color: var(--muted); font-size: .66rem; font-weight: 900; letter-spacing: .08em; }
.route-animation-icon-preview.is-drop-target, .marker-preview.is-drop-target { outline: 3px dashed #b985e8; outline-offset: 3px; background: color-mix(in srgb, #ead8fb, transparent 55%); }
.map-media-object { display: grid; width: 82%; height: 58%; place-items: center; border: 2px solid #fff; border-radius: 7px; background: #22313b; color: #fff; font-size: .58rem; font-weight: 900; letter-spacing: .06em; }
.route-timeline { position: relative; display: grid; gap: 5px; padding: 8px; border: 1px solid color-mix(in srgb, var(--line), #172330 22%); border-radius: 9px; background: #202a34; color: #edf4f7; }
.timeline-track { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 6px; min-height: var(--timeline-track-height, 44px); }
.timeline-time-ruler { display: flex; justify-content: space-between; padding-left: 54px; color: #a9c1ce; font-size: .62rem; font-weight: 850; letter-spacing: .04em; white-space: pre; }
.timeline-track > span { font-size: .63rem; font-weight: 850; text-transform: uppercase; color: #a9c1ce; }
.timeline-lane { position: relative; height: calc(var(--timeline-track-height, 44px) - 6px); border-radius: 5px; background: repeating-linear-gradient(90deg, #344551 0 1px, transparent 1px 20%); box-shadow: inset 0 0 0 1px #ffffff1c; }
.timeline-camera-range { position: absolute; z-index: 1; top: 48%; height: 7px; min-width: 8px; border-top: 3px solid #b985e8; border-bottom: 3px dotted rgb(185 133 232 / .62); background: rgb(185 133 232 / .15); pointer-events: none; }
.timeline-camera-handle { position: absolute; top: 50%; width: 10px; height: 22px; border: 2px solid #f6eaff; border-radius: 5px; background: #9b59d0; box-shadow: 0 1px 4px #0008; cursor: ew-resize; pointer-events: auto; transform: translateY(-50%); }
.timeline-camera-handle.is-start { left: -6px; }.timeline-camera-handle.is-end { right: -6px; }
.timeline-sticker-block { position: absolute; top: 3px; display: inline-flex; align-items: center; gap: 5px; width: 11%; min-width: 52px; height: calc(100% - 6px); overflow: hidden; padding: 2px 5px; border: 1px solid #9ce9d3; border-radius: 4px; background: #287660; color: white; cursor: ew-resize; font-size: .64rem; font-weight: 850; text-align: left; }
.timeline-playhead { position: absolute; z-index: 8; top: 8px; left: calc(62px + var(--timeline-progress, 0) * (100% - 70px)); width: 18px; min-width: 18px; height: 18px; min-height: 18px; margin-left: -9px; padding: 0; border: 0; border-radius: 50%; background: #ff5bcb; box-shadow: 0 1px 7px #000a; cursor: ew-resize; }
.timeline-playhead::before { content: ""; position: absolute; z-index: 1; inset: 4px; border: 2px solid #fff; border-radius: 50%; }
.timeline-playhead::after { content: ""; position: absolute; z-index: 0; top: 14px; bottom: auto; left: 7px; width: 3px; height: var(--timeline-playhead-height, 0px); background: #ff5bcb; box-shadow: 0 0 8px #ff5bcb; pointer-events: none; }
.timeline-sticker-block img { width: auto; height: calc(100% - 4px); aspect-ratio: 1; object-fit: contain; }.timeline-sticker-block span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.timeline-empty { color: #b4c2c8; font-size: .7rem; }
.timeline-group-track > span { color: #e0a9ff; }.timeline-group-child { margin-left: 12px; }.timeline-group-child > span { color: #e0a9ff; }.timeline-group-block { position: absolute; top: 3px; min-width: 72px; height: calc(100% - 6px); overflow: hidden; padding: 2px 7px; border: 1px solid #e0a9ff; border-radius: 4px; background: #563475; color: #fff; cursor: pointer; font: inherit; font-size: .64rem; font-weight: 850; text-align: left; white-space: nowrap; text-overflow: ellipsis; }
.timeline-sticker-block.is-selected, .timeline-sticker-block.is-hovered, .map-sticker-frame.is-timeline-focused { outline: 3px solid #ffcf46; outline-offset: 2px; box-shadow: 0 0 0 5px rgb(255 207 70 / .26); }
.timeline-sticker-block.is-shortcut-target, .sticker-sfx-tile.is-shortcut-target { outline: 3px solid #ffcf46; outline-offset: 3px; box-shadow: 0 0 0 5px rgb(255 207 70 / .26), 0 0 18px rgb(255 207 70 / .8); }
@keyframes sticker-fade { from { opacity: .05; } to { opacity: var(--preview-opacity); } } @keyframes sticker-bounce { from { transform: translateY(28px) rotate(var(--preview-rotation)) scale(var(--preview-scale)); } to { transform: translateY(0) rotate(var(--preview-rotation)) scale(var(--preview-scale)); } } @keyframes sticker-drop { from { opacity: .1; transform: translateY(-34px) rotate(var(--preview-rotation)) scale(var(--preview-scale)); } to { opacity: var(--preview-opacity); transform: translateY(0) rotate(var(--preview-rotation)) scale(var(--preview-scale)); } } @keyframes sticker-pop { from { transform: rotate(var(--preview-rotation)) scale(.12); } to { transform: rotate(var(--preview-rotation)) scale(var(--preview-scale)); } }

.project-export-status {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 1600;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: min(520px, calc(100vw - 24px));
  padding: 6px 7px 6px 10px;
  border: 1px solid color-mix(in srgb, var(--line), var(--ink) 14%);
  border-radius: 10px;
  background: rgb(255 253 248 / 0.94);
  box-shadow: 0 8px 22px rgb(31 41 51 / 0.22);
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 800;
  backdrop-filter: blur(7px);
}

.project-export-status.has-unsaved-changes {
  border-color: #e85d24;
  background: #fff0df;
  color: #8b2608;
}

.project-export-status button {
  min-height: 30px;
  padding: 3px 10px;
  white-space: nowrap;
}

.save-all-options label.has-unexported-change {
  border-left: 5px solid #e85d24;
  background: #fff0df;
  color: #8b2608;
  font-weight: 900;
}

.map-sticker-icon {
  background: transparent;
  border: 0;
}

.map-sticker-frame {
  width: 100%;
  height: 100%;
  cursor: grab;
  filter: drop-shadow(0 3px 3px rgb(31 41 51 / 0.28));
}

.sticker-library-pin { display: grid; width: 45px; height: 45px; place-items: center; border: 3px solid #fff; border-radius: 50%; background: var(--object-pin-color, #1f7a5c); color: #fff; font-size: 1.25rem; font-weight: 900; box-shadow: 0 2px 5px #0005; }
.sticker-library-pin.is-shape-round { border-radius: 50%; }
.sticker-library-pin.is-shape-shield { clip-path: polygon(50% 100%, 6% 55%, 6% 31%, 23% 8%, 77% 8%, 94% 31%, 94% 55%); }
.sticker-library-pin.is-shape-square { border-radius: 12px; }
.sticker-library-pin.is-shape-teardrop { width: 38px; height: 43px; border-radius: 50% 50% 50% 5%; transform: rotate(-45deg); }
.sticker-library-pin.is-shape-arrow { width: 47px; height: 38px; clip-path: polygon(0 35%, 58% 35%, 58% 0, 100% 50%, 58% 100%, 58% 65%, 0 65%); border-radius: 0; }
.sticker-library-pin.is-shape-heart { width: 47px; height: 42px; clip-path: path("M50 88 C 15 64 4 47 4 29 C4 12 17 2 31 2 C40 2 47 7 50 14 C53 7 60 2 69 2 C83 2 96 12 96 29 C96 47 85 64 50 88 Z"); border-radius: 0; }
.sticker-library-pin.is-shape-plus { width: 42px; height: 42px; clip-path: polygon(34% 0,66% 0,66% 34%,100% 34%,100% 66%,66% 66%,66% 100%,34% 100%,34% 66%,0 66%,0 34%,34% 34%); border-radius: 0; }
.sticker-library-pin.is-shape-speech { width: 48px; height: 35px; border-radius: 14px; }
.sticker-library-pin.is-shape-speech::after { content: ""; position: absolute; bottom: -7px; left: 17px; width: 14px; height: 12px; background: inherit; clip-path: polygon(0 0, 100% 0, 18% 100%); }
.sticker-library-pin.is-shape-note { width: 44px; height: 42px; border-radius: 4px; }
.sticker-library-pin img { width: 60%; height: 60%; object-fit: contain; }
.sticker-library-pin i { font-style: normal; }

.welcome-message {
  max-width: 46ch;
  margin: -2px auto 2px;
  color: rgb(255 255 255 / 0.9);
  font-size: clamp(0.98rem, 1.8vw, 1.12rem);
  font-weight: 650;
  line-height: 1.42;
}
.sticker-library.is-expanded { max-height: none; overflow: visible; }
.map-sticker-frame.is-fade { animation: sticker-fade var(--sticker-animation-duration, .5s) ease-out both; }
.map-sticker-frame.is-bounce { animation: sticker-bounce var(--sticker-animation-duration, .5s) cubic-bezier(.18,.9,.34,1.4) both; }
.map-sticker-frame.is-drop { animation: sticker-drop var(--sticker-animation-duration, .5s) ease-out both; }
.map-sticker-frame.is-pop { animation: sticker-pop var(--sticker-animation-duration, .5s) cubic-bezier(.2,.9,.3,1.2) both; }
.map-sticker-frame.is-timeline-pending { visibility: hidden; opacity: 0; animation: none; }
.map-sticker-frame.is-timeline-reversing { animation-direction: reverse; animation-duration: var(--timeline-reverse-duration, var(--sticker-animation-duration, .5s)); }
.map-sticker-frame { --preview-opacity: var(--sticker-animation-opacity, 1); --preview-scale: var(--sticker-animation-scale, 1); --preview-rotation: var(--sticker-animation-rotation, 0deg); }

.map-sticker-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.map-sticker-frame.is-selected {
  outline: 3px solid #48c8ff;
  outline-offset: 3px;
  border-radius: 8px;
}

.map-sticker-frame.is-hover-only:not(:hover) { opacity: 0.08; }

/* Shared sound-effect editors */
.sfx-section-toolbar,
.sticker-sfx-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 10px;
  margin-bottom: 7px;
}
.sfx-section-toolbar p { margin: 0; color: var(--panel-muted, #667); font-size: .76rem; }
.sfx-section-toolbar label,
.sticker-sfx-toolbar label { display: flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 800; }
.sfx-event-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 5px; }
.sfx-event-list h3 { grid-column: 1 / -1; margin: 5px 0 0; padding-top: 5px; border-top: 1px solid color-mix(in srgb, currentColor 25%, transparent); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.sfx-assignment-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 5px; padding: 5px 6px; border: 1px solid color-mix(in srgb, currentColor 24%, transparent); border-radius: 8px; background: color-mix(in srgb, var(--panel-bg, #fff) 78%, transparent); }
.sfx-assignment-row[draggable="true"] { cursor: grab; }
.sfx-assignment-heading { min-width: 0; display: grid; line-height: 1.1; }
.sfx-assignment-heading strong { font-size: .73rem; }
.sfx-assignment-heading span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--panel-muted, #667); font-size: .66rem; }
.sfx-assignment-actions { display: flex; gap: 3px; }
.sfx-assignment-actions button { min-height: 26px; padding: 3px 6px; font-size: .68rem; }
.sfx-assignment-actions button:last-of-type { width: 28px; padding-inline: 2px; }
.sticker-sfx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 5px; max-height: 230px; overflow: auto; }
.sticker-sfx-grid.is-expanded { max-height: none; overflow: visible; }
.sticker-sfx-tile { position: relative; display: grid; place-items: center; gap: 2px; min-width: 0; padding: 5px; }
.sticker-sfx-tile img { width: 46px; height: 46px; object-fit: contain; }
.sticker-sfx-tile span { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .68rem; }
.sticker-sfx-tile i { position: absolute; right: 4px; top: 2px; color: #28733b; font-style: normal; }
.sticker-sfx-tile.is-selected { outline: 2px solid #cf3d86; outline-offset: -2px; }
.sticker-fx-class-tabs { display: flex; gap: 4px; align-items: center; }
.sticker-fx-class-tabs button:last-child { margin-left: auto; }
.sticker-fx-class-tabs [aria-selected="true"] { background: var(--control); color: var(--control-text); }
.sticker-fx-null-tile, .sticker-fx-pin-tile { display: grid; width: 46px; height: 46px; place-items: center; border: 2px solid #a8ff00; border-radius: 7px; color: #a8ff00; background: #18232b; font-size: .68rem; }
.sticker-fx-pin-tile { border-color: #fff; border-radius: 50% 50% 50% 0; background: var(--object-pin-color, #1f7a5c); color: #fff; font-size: 1.25rem; }
.sticker-fx-pin-tile.is-down-middle { border-radius: 50%; clip-path: polygon(50% 100%, 6% 55%, 6% 31%, 23% 8%, 77% 8%, 94% 31%, 94% 55%); }
.sticker-fx-pin-tile.is-down-right { border-radius: 50% 50% 0 50%; }
.sticker-fx-pin-tile img { width: 62%; height: 62%; object-fit: contain; }
.sticker-fx-object-inspector { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px; border: 1px solid color-mix(in srgb, currentColor 24%, transparent); border-radius: 6px; }
.sticker-fx-object-inspector label { display: inline-flex; align-items: center; gap: 4px; font-size: .7rem; font-weight: 800; }
.sticker-fx-object-inspector select, .sticker-fx-object-inspector input { min-width: 0; max-width: 132px; }
.sticker-fx-object-inspector .sticker-note-control { display: grid; flex: 1 1 100%; grid-template-columns: 1fr; gap: 4px; }
.sticker-fx-object-inspector .sticker-note-control textarea { width: 100%; min-height: 86px; resize: vertical; }
.sticker-fx-transforms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); flex: 1 1 100%; gap: 5px 8px; margin: 2px 0 0; padding: 7px; border: 1px solid color-mix(in srgb, var(--line), transparent 8%); border-radius: 7px; }
.sticker-fx-transforms legend { padding-inline: 4px; color: var(--muted); font-size: .66rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.sticker-fx-transform { display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto; gap: 5px; align-items: center; min-width: 0; }
.sticker-fx-transform > span { font-size: .66rem; white-space: nowrap; }
.sticker-fx-transform > input { width: 100%; max-width: none !important; }
.sticker-fx-transform > output { min-width: 42px; color: var(--muted); font-size: .64rem; font-weight: 850; text-align: right; }
.sticker-fx-transform.is-keyframed { opacity: .52; cursor: help; }
.sticker-fx-custom-view { display: grid; grid-template-columns: auto minmax(150px, 1fr); flex: 1 1 100%; gap: 6px 10px; margin: 2px 0 0; padding: 7px; border: 1px solid color-mix(in srgb, #bd86ed, transparent 28%); border-radius: 7px; background: color-mix(in srgb, #e9d7fa, var(--panel) 72%); }
.sticker-fx-custom-view legend { padding-inline: 4px; color: #6c358d; font-size: .66rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.sticker-fx-custom-view label { min-width: 0; }
.sticker-fx-custom-view small { grid-column: 1 / -1; color: var(--muted); font-size: .64rem; }
.map-view-controls #setMapView.is-custom-sticker-view { border-color: #b96aec; background: #ead8fb; color: #3d175a; box-shadow: 0 0 0 2px rgb(185 106 236 / .25); }
.pin-stroke-control { display: grid; flex: 1 1 220px; gap: 3px; }
.pin-stroke-control > strong { color: var(--muted); font-size: .66rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.pin-stroke-control .marker-stroke-row { grid-template-columns: 18px 34px 56px 1px minmax(70px, 1fr) auto; gap: 6px; min-height: 34px; padding: 4px; }
.sticker-fx-subsection { flex: 1 1 100%; order: -1; padding: 6px 0; border-top: 1px solid color-mix(in srgb, var(--line), transparent 20%); border-bottom: 1px solid color-mix(in srgb, var(--line), transparent 20%); }
.sticker-fx-subsection > summary { cursor: pointer; color: var(--muted); font-size: .72rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.sticker-fx-subsection-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; margin-top: 7px; }
.sticker-fx-subsection .pin-stroke-control { min-width: 0; }
.sticker-sfx-editor { display: grid; gap: 5px; margin-top: 7px; }
.sticker-media-event-row { margin: 0; }
.sticker-media-event-row strong { font-size: .74rem; }
.sticker-media-event-row .sticker-media-instance-controls { grid-column: 1 / -1; }
.sticker-media-event-slot { display: flex; align-items: center; min-width: 0; min-height: 30px; padding: 0 8px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--line), var(--ink) 18%); border-radius: 6px; background: color-mix(in srgb, var(--surface), var(--panel) 30%); color: var(--muted); cursor: pointer; }
.sticker-media-event-slot span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .68rem; font-weight: 750; }
.sticker-media-event-row.has-sfx .sticker-media-event-slot { border-color: var(--control); background: var(--control); color: var(--control-text); cursor: grab; }
.sticker-media-event-row.has-sfx .sticker-media-event-slot span { color: var(--control-text); text-shadow: 0 1px 1px rgb(0 0 0 / .2); }
.sticker-media-event-slot.is-dragging { opacity: .5; }
.sticker-media-event-clear { width: 27px; min-height: 27px; padding: 0; font-size: 1.1rem; }
.sticker-media-event-dialog { width: min(520px, calc(100vw - 28px)); border: 2px solid #263d4d; border-radius: 12px; padding: 0; color: #1e2a33; box-shadow: 0 20px 70px #0009; }
.sticker-media-event-dialog::backdrop { background: rgb(8 15 20 / .58); backdrop-filter: blur(3px); }
.sticker-media-event-card { position: relative; display: grid; gap: 12px; padding: 18px; background: #f8f7f1; }
.sticker-media-event-card > strong { font-size: 1.05rem; }
.sticker-media-event-card > p { margin: -6px 0 0; color: #53616b; }
.sticker-media-dialog-close { position: absolute; top: 7px; right: 8px; width: 30px; min-height: 30px; padding: 0; font-size: 1.25rem; }
.sticker-media-kind-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.sticker-media-kind-grid button { min-height: 54px; font-size: .72rem; }
.sticker-media-preset-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; max-height: 240px; overflow: auto; padding: 4px; border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--panel), #8c65bd 6%); }
.sticker-media-preset-card { min-height: 46px; padding: 6px; text-align: left; font-size: .72rem; }
.sticker-media-preset-card.is-selected { outline: 3px solid #b985e8; outline-offset: -3px; }
.sticker-media-event-text-fields { display: grid; gap: 8px; }
.sticker-media-event-text-fields label { display: grid; gap: 3px; font-size: .73rem; font-weight: 800; }
.sticker-media-event-text-fields textarea { resize: vertical; }
.sticker-media-instance-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 9px; margin: 0; padding: 5px 7px 7px; border: 1px solid color-mix(in srgb, var(--line), #8c65bd 24%); border-radius: 7px; }
.sticker-media-instance-controls legend { padding: 0 4px; color: var(--muted); font-size: .65rem; font-weight: 850; text-transform: uppercase; }
.sticker-media-instance-controls label { display: grid; grid-template-columns: auto minmax(0, 1fr) 31px; align-items: center; gap: 4px; font-size: .66rem; font-weight: 800; }
.sticker-media-instance-controls input { min-width: 0; }
.sticker-media-instance-controls output { text-align: right; color: var(--muted); font-size: .63rem; }
.users-gizmo-sfx-section { display: grid; gap: 5px; }
.users-gizmo-sfx-section.is-compact { grid-column: 1 / -1; padding-top: 5px; border-top: 1px solid color-mix(in srgb, currentColor 24%, transparent); }
.users-gizmo-sfx-section.is-compact .sfx-assignment-row { padding: 3px 4px; }
.sfx-consent-dialog { position: fixed; inset: 0; z-index: 200000; display: grid; place-items: center; padding: 20px; background: rgb(10 15 20 / .62); backdrop-filter: blur(5px); }
.sfx-consent-dialog[hidden] { display: none; }
.sfx-consent-card { width: min(430px, calc(100vw - 32px)); padding: 18px; border: 2px solid #fff7df; border-radius: 16px; background: #263440; color: #fff; box-shadow: 0 18px 60px #0008; }
.sfx-consent-card strong { font-size: 1.15rem; }
.sfx-consent-card p { line-height: 1.45; }
.sfx-consent-card > div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* Denser Route controls: values travel with their sliders instead of consuming a line. */
.panel-section .range-control {
  grid-template-columns: minmax(72px, auto) auto minmax(72px, 1fr);
  gap: 6px;
}
.panel-section .range-control output {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  align-self: center;
  margin: 0;
  color: var(--ink);
  font-weight: 850;
}
.panel-section .range-control output::before { content: ": "; }
.panel-section .range-control input { grid-column: 3; grid-row: 1; min-width: 0; }

.trip-animation-icon-settings { display: grid; gap: 7px; }
.trip-animation-icon-settings summary { cursor: pointer; color: var(--ink); font-weight: 850; }
.trip-animation-icon-settings p { margin: 0; color: var(--muted); font-size: .7rem; }
.trip-animation-icon-preview-wrap { display: grid; place-items: center; min-height: 84px; border: 1px dashed var(--line); border-radius: 8px; background: color-mix(in srgb, var(--surface), transparent 30%); }
.trip-animation-icon-preview-wrap .route-animation-icon-preview { min-height: 76px; }

.playback-panel { grid-template-columns: minmax(110px, 160px) minmax(110px, 220px) minmax(110px, 160px) auto auto; }
.trip-animation-launch { grid-column: 2 / 4; transform-origin: right center; transition: grid-column 220ms ease, transform 220ms cubic-bezier(.2,.9,.25,1.2), box-shadow 220ms ease; }
.trip-animation-launch.is-running { grid-column: auto; min-width: 86px; background: #b9384b; border-color: #b9384b; box-shadow: 0 0 0 4px color-mix(in srgb, #ff9b8a, transparent 64%); transform: translateX(2px) scale(.97); }
.route-playback-speed-select { display: grid; justify-items: stretch; gap: 3px; min-width: 158px; }
.route-playback-speed-buttons { display: grid; grid-template-columns: repeat(5, minmax(26px, 1fr)); gap: 3px; padding: 0 10px; position: relative; }
.route-playback-speed-buttons::before,
.route-playback-speed-buttons::after { content: ""; position: absolute; top: 3px; bottom: 3px; width: 7px; border-block: 2px solid var(--control); }
.route-playback-speed-buttons::before { left: 0; border-left: 2px solid var(--control); }
.route-playback-speed-buttons::after { right: 0; border-right: 2px solid var(--control); }
.route-playback-speed-buttons button { min-width: 0; min-height: 29px; padding: 2px 5px; font-variant-numeric: tabular-nums; }
.route-playback-speed-buttons button.is-active { color: var(--control-text); background: var(--control); border-color: var(--control); transform: translateY(-1px); box-shadow: 0 3px 8px color-mix(in srgb, var(--control), transparent 68%); }
.route-playback-speed-caption { color: var(--muted); font-size: .68rem; font-weight: 850; letter-spacing: .08em; text-align: center; text-transform: uppercase; }

.texture-choice[aria-pressed="true"] { outline: 3px solid color-mix(in srgb, var(--control), #ffcf46 44%); outline-offset: -3px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--control), transparent 72%), 0 0 20px color-mix(in srgb, var(--control), #ffd34d 35%); transform: translateY(-1px); }
.texture-choice { transition: box-shadow 140ms ease, transform 140ms ease; }

.sfx-event-list { grid-template-columns: 1fr; }
.sfx-assignment-row { grid-template-columns: minmax(92px, .72fr) minmax(0, 1.28fr) auto; min-height: 46px; gap: 7px; padding: 5px 7px; }
.sfx-assignment-heading { display: contents; }
.sfx-assignment-heading strong { display: grid; align-items: center; color: var(--ink); font-size: .73rem; line-height: 1.05; }
.sfx-sound-slot { display: flex; align-items: center; min-width: 0; min-height: 30px; padding: 0 8px; border: 1px solid color-mix(in srgb, var(--line), var(--ink) 18%); border-radius: 6px; background: color-mix(in srgb, var(--surface), var(--panel) 30%); box-shadow: inset 0 1px 2px rgb(20 30 40 / .16); color: var(--muted); transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease; }
.sfx-sound-slot span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .68rem; font-weight: 750; }
.has-sfx .sfx-sound-slot { border-color: var(--control); background: var(--control); color: var(--control-text); box-shadow: inset 0 1px 0 rgb(255 255 255 / .26), 0 1px 2px rgb(20 30 40 / .16); cursor: grab; }
.has-sfx .sfx-assignment-heading strong,
.has-sfx .sfx-sound-slot span { color: var(--control-text); text-shadow: 0 1px 1px rgb(0 0 0 / .2); }
.has-sfx .sfx-sound-slot:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgb(255 255 255 / .32), 0 4px 10px color-mix(in srgb, var(--control), transparent 72%); }
.sfx-sound-slot.is-dragging { cursor: grabbing; opacity: .62; transform: scale(.97) rotate(-1deg); box-shadow: 0 8px 20px rgb(20 30 40 / .32); }
.sfx-assignment-row.has-sfx { border-color: color-mix(in srgb, var(--control), var(--line) 42%); background: color-mix(in srgb, var(--control), var(--panel-bg, #fff) 5%); }
.sfx-assignment-actions { align-items: center; gap: 4px; white-space: nowrap; }
.sfx-volume-control { display: flex; align-items: center; gap: 4px; }
.sfx-volume-button { display: grid !important; place-items: center; width: 30px; padding-inline: 2px !important; border-color: var(--control) !important; background: color-mix(in srgb, var(--control), var(--surface) 14%) !important; color: var(--control-text) !important; }
.sfx-volume-button .material-symbols-rounded { font-size: 1.05rem; }
.sfx-volume-button:disabled { border-color: var(--line) !important; background: color-mix(in srgb, var(--surface), var(--muted) 14%) !important; color: var(--muted) !important; opacity: .7; }
.sfx-row-volume { width: 74px; min-width: 74px; height: 28px; margin: 0; padding: 0; opacity: 1; }
.sfx-volume-control::after { display: none; }
.sfx-loop-button { display: grid !important; place-items: center; width: 29px; padding-inline: 2px !important; }
.sfx-loop-button .material-symbols-rounded { font-size: 1.05rem; }
.sfx-loop-button.is-looping { border-color: var(--control) !important; background: var(--control) !important; color: var(--control-text) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--control), transparent 72%); }

/* Keep native ranges direct-manipulation controls, even inside draggable editors. */
input[type="range"] { cursor: ew-resize; touch-action: none; }

/* Final compact overrides: these follow the generic range-control rules so
   the Stickers header never reserves more width than the scrollbar-safe panel
   column on a laptop. */
.panel-section .sticker-global-row { grid-template-columns: minmax(0, 1fr) minmax(0, .38fr); gap: 6px; }
.panel-section .sticker-default-size-control.range-control { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 3px; }
.panel-section .sticker-default-size-control.range-control > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.panel-section .sticker-library-tabs button { min-width: 0; min-height: 32px; padding: 4px 5px; overflow: hidden; font-size: clamp(.66rem, 1.05vw, .86rem); text-overflow: ellipsis; white-space: nowrap; }
.marker-stroke-row input[type="range"][data-snap-points] {
  background-image: radial-gradient(circle, color-mix(in srgb, var(--muted), var(--surface) 30%) 1px, transparent 1.5px);
  background-position: center;
  background-size: 12.5% 100%;
  background-repeat: repeat-x;
}
.marker-stroke-row datalist { display: none; }
@media (max-width: 620px) {
  .sfx-assignment-row { grid-template-columns: 105px 164px auto; }
  .sfx-assignment-actions button { min-width: 0; padding-inline: 4px; }
}
@media (max-width: 620px) {
  .sfx-event-list { grid-template-columns: 1fr; }
  .sfx-assignment-row { grid-template-columns: 1fr; }
  .sfx-assignment-actions > button { flex: 1 1 0; }
}

.map-pan-row button {
  border-left: 0;
  border-top: 0;
  border-radius: 0;
}

.map-pan-row button:last-child {
  border-left: 0;
  border-radius: 0 0 10px 0;
}

.map-overview-locks[hidden],
.map-lock-input {
  display: none;
}

.keyboard-only-toggle {
  position: absolute;
  top: 16px;
  right: 16px;
  left: auto;
  z-index: 830;
  width: auto;
  max-width: max-content;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 34px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 253, 248, 0.94);
  color: var(--control);
  box-shadow: 0 8px 22px rgba(31, 41, 51, 0.16);
  font-weight: 900;
  cursor: pointer;
}

.usage-overlay { display: none !important; }

.map-top-utility-bar {
  position: absolute;
  z-index: 1108;
  top: 10px;
  right: 12px;
  display: flex;
  align-items: stretch;
  gap: 10px;
}
.map-top-utility-bar > button,
.map-theme-utility-group { min-height: 40px; padding: 4px; border: 1px solid rgb(255 255 255 / .45); border-radius: 10px; background: rgb(25 38 49 / .88); box-shadow: 0 4px 14px rgb(0 0 0 / .28); }
.map-top-utility-bar button { min-height: 32px; padding: 4px 9px; border-radius: 7px; }
.map-theme-utility-group { display: flex; align-items: stretch; gap: 4px; }
.map-top-utility-bar .site-mode-toggle { position: static; inset: auto; transform: none; }
body.user-site-mode .map-top-utility-bar .site-mode-toggle { left: auto; transform: none; }
.map-top-utility-bar .keyboard-only-toggle { position: static; transform: none; }

.empty-state {
  position: absolute;
  inset: 0 0 var(--playback-dock-height);
  z-index: 3;
  display: grid;
  place-items: center;
  padding: 24px;
  color: var(--muted);
  text-align: center;
  background: rgba(245, 242, 234, 0.84);
  opacity: 1;
  transition: opacity 520ms ease;
}

.empty-state.is-fading {
  opacity: 0;
  pointer-events: none;
}

.empty-state.startup-loading-state {
  z-index: 1200;
}

.empty-state[hidden] {
  display: none;
}

.startup-loading-card {
  display: grid;
  justify-items: center;
  gap: 18px;
  max-width: min(720px, 86vw);
  font-weight: 900;
  color: var(--control);
}

.startup-loading-card img {
  display: block;
  width: min(560px, 82vw);
  max-height: 62vh;
  object-fit: contain;
  border-radius: 30% / 24%;
  filter: drop-shadow(0 18px 26px rgba(31, 41, 51, 0.18));
  -webkit-mask-image: radial-gradient(118% 118% at 50% 50%, #000 0 58%, rgba(0, 0, 0, 0.88) 70%, rgba(0, 0, 0, 0.36) 84%, transparent 100%);
  mask-image: radial-gradient(118% 118% at 50% 50%, #000 0 58%, rgba(0, 0, 0, 0.88) 70%, rgba(0, 0, 0, 0.36) 84%, transparent 100%);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.startup-loading-bar {
  width: min(320px, 72vw);
  height: 12px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--control), transparent 48%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel), var(--surface) 38%);
  box-shadow: inset 0 1px 2px rgba(31, 41, 51, 0.16);
}

.startup-loading-bar-fill {
  width: 12%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7fbf7f, #5bc5d7, #d9442e);
  animation: startup-loading-progress 3000ms cubic-bezier(0.22, 0.74, 0.28, 1) forwards;
  transition: width 1800ms cubic-bezier(0.22, 0.74, 0.28, 1);
}

.empty-state.is-complete .startup-loading-bar-fill {
  width: 100%;
  animation: none;
}

@keyframes startup-loading-progress {
  0% { width: 8%; }
  18% { width: 24%; }
  36% { width: 42%; }
  58% { width: 63%; }
  78% { width: 82%; }
  100% { width: 92%; }
}

.playback-panel {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 800;
  display: grid;
  /* Keep the speed buttons in the same dock row, immediately beside Next,
     instead of allowing an implicit second row to run below the viewport. */
  grid-template-columns: minmax(110px, 160px) minmax(110px, 220px) minmax(110px, 160px) minmax(158px, 190px) auto;
  justify-content: center;
  gap: 8px;
  align-items: center;
  width: 100%;
  height: var(--playback-dock-height);
  padding: 8px;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: color-mix(in srgb, var(--panel), #fff 8%);
  box-shadow: 0 -8px 24px rgba(31, 41, 51, 0.1);
  overflow: hidden;
}

.playback-panel button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--control);
  border-radius: 8px;
  background: var(--control);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}

.material-symbols-rounded {
  font-size: 1.45rem;
  line-height: 1;
}

.journey-progress {
  overflow: hidden;
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 850;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.day-edge-control {
  position: absolute;
  bottom: calc(var(--playback-dock-height) * 0.5 - 29px);
  z-index: 810;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--control), #ffffff 58%);
  border-radius: 999px;
  background:
    radial-gradient(circle at 34% 28%, rgb(255 255 255 / 0.86), transparent 28%),
    linear-gradient(145deg, color-mix(in srgb, var(--panel), #ffffff 18%), color-mix(in srgb, var(--control), var(--panel) 72%));
  color: var(--control);
  box-shadow: 0 16px 32px rgb(17 24 39 / 0.24), inset 0 2px 2px rgb(255 255 255 / 0.7), inset 0 -5px 10px rgb(17 24 39 / 0.1);
  cursor: pointer;
  transform: none;
}

.day-edge-control-previous {
  left: 24px;
}

.day-edge-control-next {
  /* The fixed pinned-tab rail sits at the panel edge. Keep this map-zone
     affordance to its left instead of allowing it to hide beneath the rail. */
  right: calc(24px + var(--pinned-tab-width, 28px) + 12px);
}

.day-edge-control .material-symbols-rounded {
  font-size: 2.25rem;
  filter: drop-shadow(0 1px 0 rgb(255 255 255 / 0.72));
}

.day-edge-control:hover {
  transform: translateY(-1px);
  box-shadow: 0 19px 38px rgb(17 24 39 / 0.28), inset 0 2px 2px rgb(255 255 255 / 0.8), inset 0 -5px 10px rgb(17 24 39 / 0.12);
}

.day-edge-control:disabled {
  cursor: not-allowed;
  opacity: 0.28;
}

.route-debug-panel {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 1210;
  width: min(430px, calc(100% - 88px));
  padding: 8px 10px;
  color: #f8fafc;
  background: rgb(15 23 42 / 0.91);
  border: 1px solid rgb(148 163 184 / 0.7);
  border-radius: 8px;
  box-shadow: 0 8px 22px rgb(15 23 42 / 0.36);
  font: 600 11px/1.35 ui-monospace, SFMono-Regular, Consolas, monospace;
  pointer-events: none;
}

.route-debug-panel strong {
  display: block;
  margin-bottom: 4px;
  color: #fde68a;
  font: 800 10px/1.2 system-ui, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.route-debug-panel pre {
  max-height: 155px;
  margin: 0;
  overflow: hidden;
  white-space: pre-wrap;
}

.media-viewer {
  position: absolute;
  inset: 14px 14px calc(var(--playback-dock-height) + 14px);
  z-index: 1800;
  display: grid;
  place-items: stretch;
  pointer-events: auto;
}

.media-viewer[hidden] {
  display: none;
}

.media-viewer.is-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 4000;
}

.media-viewer-frame {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #111827;
  box-shadow: 0 18px 54px rgb(0 0 0 / 0.48);
  color: #fff;
}

.media-viewer.is-fullscreen .media-viewer-frame {
  border: 0;
  border-radius: 0;
}

.media-viewer-head,
.media-viewer-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: rgb(17 24 39 / 0.94);
}

.media-viewer-head {
  justify-content: space-between;
}

.media-viewer-head > div {
  display: flex;
  gap: 5px;
}

.media-viewer button {
  display: grid;
  place-items: center;
  min-width: 36px;
  min-height: 34px;
  padding: 4px 8px;
  border: 1px solid rgb(255 255 255 / 0.22);
  border-radius: 7px;
  background: rgb(255 255 255 / 0.1);
  color: #fff;
  cursor: pointer;
}

.media-viewer-content {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 12px;
  background: #090d14;
}

.media-viewer-content img,
.media-viewer-content video {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.media-viewer-content audio {
  width: min(680px, 92%);
}

.media-viewer-content article {
  width: min(760px, 92%);
  max-height: 100%;
  overflow: auto;
  padding: 22px;
  border-radius: 10px;
  background: #fffdf8;
  color: #1f2933;
  white-space: pre-wrap;
}

.media-viewer-controls {
  display: grid;
  grid-template-columns: auto minmax(100px, 1fr) auto auto minmax(80px, 150px);
}

.media-viewer-controls[hidden] {
  display: none;
}

.media-viewer-controls input {
  width: 100%;
}

.media-viewer-controls span {
  font-size: 0.75rem;
  font-weight: 750;
  white-space: nowrap;
}

.playback-panel button:disabled {
  border-color: color-mix(in srgb, var(--control), transparent 58%);
  background: color-mix(in srgb, var(--control), var(--surface) 68%);
  color: color-mix(in srgb, #ffffff, var(--muted) 48%);
  cursor: not-allowed;
  opacity: 0.68;
}

.playback-panel label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.playback-panel input {
  width: 100%;
}

.panel {
  position: relative;
  /* The fixed pinned-tab rail must clear map drawers and previews. */
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 100vh;
  max-height: 100vh;
  padding: 10px;
  border-left: 1px solid var(--line);
  background: var(--panel);
  box-shadow: -16px 0 40px rgba(31, 41, 51, 0.08);
}

.panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--ui-texture);
  opacity: var(--ui-texture-opacity);
  mix-blend-mode: var(--ui-texture-blend);
  pointer-events: none;
}

.panel > * {
  position: relative;
  z-index: 1;
}

.panel-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)) 40px;
  gap: 5px;
}

.panel-tabs button {
  min-height: 40px;
  border: 1px solid color-mix(in srgb, var(--line), var(--ink) 18%);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface), #000 5%);
  color: var(--ink);
  font-weight: 900;
  font-size: 0.92rem;
  cursor: pointer;
}

.panel-tabs .panel-record-button {
  min-width: 40px;
  width: 40px;
  height: 40px;
  padding: 0;
  font-size: 1rem;
  line-height: 1;
  border-radius: 999px;
  display: grid;
  place-items: center;
  transition:
    transform 180ms ease,
    width 180ms ease,
    height 180ms ease,
    font-size 180ms ease,
    box-shadow 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease;
}

.panel-tabs .panel-record-button[aria-pressed="true"] {
  width: 48px;
  min-width: 48px;
  height: 48px;
  font-size: 1.22rem;
  border-color: #ff2f8a;
  background: color-mix(in srgb, #ff2f8a, var(--surface) 12%);
  color: #fff7fb;
  box-shadow:
    0 0 0 3px rgb(255 47 138 / 0.28),
    0 10px 20px rgb(255 47 138 / 0.18);
  transform: scale(1.04);
}

.panel-tabs .panel-record-button.is-paused {
  border-color: color-mix(in srgb, #ff6f91, var(--line) 42%);
  background: color-mix(in srgb, #ff6f91, var(--surface) 70%);
  color: var(--ink);
}

.panel-tabs button[aria-selected="true"] {
  border-color: var(--control);
  background: var(--control);
  color: var(--control-text);
}
.panel-tabs [data-panel-tab].is-tab-dragging { opacity: .45; }
.panel-tabs [data-panel-tab].is-tab-drop-before { box-shadow: -4px 0 0 #48c8ff; }
.panel-tabs [data-panel-tab].is-tab-drop-after { box-shadow: 4px 0 0 #48c8ff; }

.users-device-preview-toolbar {
  display: none;
}

body.users-builder-mode .users-device-preview-toolbar:not([hidden]) {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid color-mix(in srgb, var(--line), var(--ink) 12%);
  border-radius: 9px;
  background: color-mix(in srgb, var(--surface), var(--panel) 38%);
}

.users-device-preview-toolbar label {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.users-device-preview-toolbar select {
  width: 100%;
  min-width: 0;
  min-height: 31px;
  padding: 4px 7px;
  font-weight: 850;
}

.users-device-preview-status {
  min-width: 66px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 850;
  text-align: right;
  white-space: nowrap;
}

.panel-tab-panels {
  position: relative;
  min-height: 0;
  flex: 1 1 auto;
  padding-right: 10px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

/* The editor intentionally uses a broad scrollbar. Never let fixed-width
   controls extend behind it on laptop-sized panels. */
.panel-tab-panel,
.panel-tab-panels > .panel-section,
.panel-tab-panel > .panel-section {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}
.panel-tab-panel :is(input, select, textarea, button) { max-width: 100%; }

.panel-tab-panels,
.style-panel,
.elements-style-drawer .style-panel.inline-style-panel,
.texture-library-panel,
.theme-panel {
  scrollbar-color: color-mix(in srgb, var(--control), var(--muted) 28%) color-mix(in srgb, var(--panel), var(--surface) 52%);
  scrollbar-width: auto;
}

.panel-tab-panels::-webkit-scrollbar,
.style-panel::-webkit-scrollbar,
.elements-style-drawer .style-panel.inline-style-panel::-webkit-scrollbar,
.texture-library-panel::-webkit-scrollbar,
.theme-panel::-webkit-scrollbar {
  width: 30px;
  height: 30px;
}

.panel-tab-panels::-webkit-scrollbar-track,
.style-panel::-webkit-scrollbar-track,
.elements-style-drawer .style-panel.inline-style-panel::-webkit-scrollbar-track,
.texture-library-panel::-webkit-scrollbar-track,
.theme-panel::-webkit-scrollbar-track {
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel), var(--surface) 52%);
}

.panel-tab-panels::-webkit-scrollbar-thumb,
.style-panel::-webkit-scrollbar-thumb,
.elements-style-drawer .style-panel.inline-style-panel::-webkit-scrollbar-thumb,
.texture-library-panel::-webkit-scrollbar-thumb,
.theme-panel::-webkit-scrollbar-thumb {
  min-height: 44px;
  border: 6px solid color-mix(in srgb, var(--panel), var(--surface) 52%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--control), var(--muted) 28%);
}

.panel-tab-panels::-webkit-scrollbar-thumb:hover,
.style-panel::-webkit-scrollbar-thumb:hover,
.elements-style-drawer .style-panel.inline-style-panel::-webkit-scrollbar-thumb:hover,
.texture-library-panel::-webkit-scrollbar-thumb:hover,
.theme-panel::-webkit-scrollbar-thumb:hover {
  background: var(--control);
}

.panel-tab-panel {
  display: grid;
  gap: 6px;
}

/* The tab-panel rail owns scrolling so wheel input over any settings tab
   cannot escape to the Leaflet map underneath. */
.panel-tab-panels {
  overscroll-behavior: contain;
}

/* Media follows the same top-aligned section stack as every other tab. */
#panelMedia {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: max-content;
  align-content: start;
  align-items: start;
  justify-content: stretch;
  padding-bottom: 16px;
}

#panelMedia > .panel-section {
  width: 100%;
}

/* Every tab begins directly after the shared pinned journey strip. */
.panel-tab-panels > .pinned-journey-section + .panel-tab-panel {
  margin-top: 0;
}

.users-panel {
  align-content: start;
}

.users-shell-section {
  gap: 10px;
}

.welcome-editor-section { overflow: hidden; }
.welcome-editor-toolbar, .welcome-editor-add { display: flex; flex-wrap: wrap; gap: 7px; align-items: end; }
.welcome-editor-toolbar label { display: grid; gap: 3px; min-width: 106px; flex: 1 1 106px; }
.welcome-editor-toolbar label span { font-size: .72rem; color: var(--muted); font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.welcome-editor-toolbar button, .welcome-editor-add button { min-height: 33px; }
.welcome-editor-add button { flex: 1 1 100px; }
.welcome-editor-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; min-height: 210px; overflow: hidden; border: 2px solid color-mix(in srgb, var(--control), var(--line) 48%); border-radius: 13px; background-color: var(--welcome-background, #16333c); color: #fffaf0; box-shadow: inset 0 0 0 1px #fff2; }
.welcome-editor-stage.is-drawing { cursor: crosshair; }
.welcome-editor-stage.is-drawing .welcome-editor-item { pointer-events: none; }
.welcome-draw-draft { position: absolute; z-index: 5; border: 2px dashed #ffd778; background: rgb(255 215 120 / .12); pointer-events: none; }
.welcome-editor-stage[data-pattern="dots"], .welcome-full-canvas[data-pattern="dots"] { background-image: radial-gradient(#fff3 1px, transparent 1px); background-size: 17px 17px; }
.welcome-editor-stage[data-pattern="grid"], .welcome-full-canvas[data-pattern="grid"] { background-image: linear-gradient(#fff2 1px, transparent 1px), linear-gradient(90deg, #fff2 1px, transparent 1px); background-size: 28px 28px; }
.welcome-editor-stage[data-material="leather"], .welcome-full-canvas[data-material="leather"] { background-image: url("assets/textures/pebbled-leather-gray.png"); background-blend-mode: multiply; background-size: var(--leather-texture-size); }
.welcome-editor-stage[data-material="paper"], .welcome-full-canvas[data-material="paper"] { background-image: url("assets/textures/transparent/natural-paper.png"); background-blend-mode: multiply; background-size: 440px 440px; }
.welcome-editor-stage::after { content: attr(data-device); position: absolute; right: 8px; bottom: 7px; color: #fff9; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; pointer-events: none; }
.welcome-editor-item { position: absolute; display: grid; align-content: center; min-width: 15px; min-height: 15px; padding: 4px; overflow: hidden; cursor: grab; user-select: none; border: 1px dashed transparent; text-wrap: balance; }
.welcome-editor-item:active { cursor: grabbing; }
.welcome-editor-item.is-selected { border-color: #ffd778; box-shadow: 0 0 0 2px #ffd77855; }
.welcome-editor-heading { font-size: clamp(1rem, 5vw, 2.7rem); font-weight: 900; line-height: .95; letter-spacing: -.045em; }
.welcome-editor-eyebrow { color: #ffd778; font-size: clamp(.55rem, 1.3vw, .85rem); font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.welcome-editor-text { font-size: clamp(.6rem, 1.8vw, 1rem); line-height: 1.4; }
.welcome-editor-item img, .welcome-editor-item video { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; pointer-events: none; }
.welcome-preview-button { display: inline-flex; width: fit-content; min-height: 30px; align-items: center; padding: 6px 12px; border-radius: 99px; background: #ffd778; color: #192a32; font-size: .78rem; font-weight: 850; }
.welcome-preview-section { position: relative; display: grid; place-items: center; width: 100%; height: 100%; padding: 10px; overflow: hidden; border: 1px solid #fff4; background: #fff2; box-shadow: inset 0 1px 7px #0004, 0 4px 12px #0004; color: #fff; }
.welcome-preview-section img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .66; }
.welcome-preview-section strong { position: relative; z-index: 1; }
.welcome-editor-content-frame { display: grid; place-items: center; color: #fffaf0; font-size: clamp(.75rem, 1.5vw, 1.15rem); text-align: center; overflow: visible; }
.welcome-editor-content-frame img, .welcome-editor-content-frame video { width: 100%; height: 100%; object-fit: cover; }
.welcome-content-type-actions { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.welcome-content-type-actions button { min-height: 28px; padding: 4px; font-size: .7rem; }
.welcome-content-type-actions button.is-active { background: var(--control); color: var(--control-text); }
.welcome-youtube-placeholder { display: grid; width: 100%; height: 100%; min-height: 42px; place-items: center; border-radius: 7px; background: #111b2c; color: #fff; font-weight: 850; }
.welcome-resize-handle { position: absolute; right: 1px; bottom: 1px; width: 12px; height: 12px; border-right: 3px solid #ffd778; border-bottom: 3px solid #ffd778; cursor: nwse-resize; }
.welcome-element-inspector { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; padding: 9px; border: 1px solid color-mix(in srgb, var(--line), var(--surface) 25%); border-radius: 10px; background: color-mix(in srgb, var(--surface), transparent 4%); color: var(--muted); font-size: .8rem; }
.welcome-element-inspector label { display: grid; gap: 3px; }
.welcome-element-inspector label span { font-weight: 800; color: var(--ink); font-size: .71rem; text-transform: uppercase; letter-spacing: .04em; }
.welcome-element-inspector textarea { min-height: 58px; resize: vertical; }
.welcome-element-inspector button { min-height: 31px; }
.welcome-element-inspector .welcome-remove { grid-column: 1 / -1; background: #9e3340; }

.welcome-full-canvas { position: absolute; z-index: 779; inset: var(--user-device-preview-top, 0px) var(--user-device-preview-right, 0px) var(--user-device-preview-bottom, 0px) var(--user-device-preview-left, 0px); overflow: hidden; border: 3px solid color-mix(in srgb, var(--users-shell-leather-color, var(--leather-color)), #fff 48%); border-radius: var(--user-device-radius); background-color: var(--welcome-background, var(--users-shell-leather-color, var(--leather-color))); box-shadow: var(--user-frame-shadow); color: #fffaf0; }
.welcome-full-canvas::before { content: attr(data-device) " device boundary"; position: absolute; z-index: 5; left: 10px; top: 9px; padding: 4px 7px; border-radius: 7px; background: #15232dcc; color: #fff; font-size: .65rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.welcome-full-canvas .welcome-canvas-close { position: absolute; z-index: 6; right: 9px; top: 8px; min-height: 30px; padding: 4px 9px; font-size: .72rem; }
.welcome-full-canvas .welcome-editor-item { font-size: inherit; }
.welcome-full-canvas .welcome-editor-heading { font-size: clamp(1.2rem, 5.2vw, 4rem); }
.welcome-full-canvas .welcome-editor-text { font-size: clamp(.72rem, 2vw, 1.15rem); }
.welcome-canvas-actions { position: absolute; z-index: 7; right: 10px; bottom: 10px; display: flex; flex-wrap: wrap; justify-content: end; gap: 6px; max-width: min(470px, 80%); }
.welcome-canvas-actions button { min-height: 32px; padding: 5px 10px; font-size: .72rem; }
.welcome-canvas-actions button:nth-last-child(2) { background: #ffd778; color: #1a2930; }
.welcome-loading-canvas-card { position: absolute; inset: 18% 9%; display: grid; place-items: center; align-content: center; gap: 14px; padding: 24px; text-align: center; border-radius: 19px; background: color-mix(in srgb, var(--users-shell-leather-color, #25313d), #101820 24%); box-shadow: var(--user-section-shadow); }
.welcome-loading-canvas-card strong { font-size: clamp(1.3rem, 4vw, 2.4rem); }
.welcome-loading-canvas-card p { margin: 0; max-width: 32ch; }
.welcome-loading-canvas-card span { font-size: .82rem; font-weight: 800; color: #ffd778; }

.users-panel-manager {
  display: grid;
  gap: 10px;
}

.users-panel-manager-row {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--line), var(--surface) 18%);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface), transparent 8%);
}

.users-panel-manager-row strong {
  color: var(--ink);
  font-size: 0.88rem;
}

.users-panel-manager-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.users-panel-manager-actions button {
  min-height: 34px;
}

.users-panel-manager-actions button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.users-shell-copy {
  margin: 0;
  color: var(--surface-text);
  line-height: 1.45;
}

.users-builder-workspace {
  position: absolute;
  inset:
    calc(var(--user-device-margin) + var(--user-frame-top-height) + 16px)
    calc(var(--user-device-margin) + var(--user-frame-side-width) + 16px)
    calc(var(--user-device-margin) + var(--user-frame-bottom-height) + 16px)
    calc(var(--user-device-margin) + var(--user-frame-side-width) + 16px);
  z-index: 740;
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms ease;
  border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: var(--user-screen-radius);
  background:
    radial-gradient(circle at center, rgb(255 255 255 / 0.025), transparent 64%),
    linear-gradient(180deg, rgb(255 255 255 / 0.02), rgb(255 255 255 / 0.01));
  box-shadow:
    inset 0 2px 14px rgb(0 0 0 / 0.18),
    inset 0 -1px 1px rgb(255 255 255 / 0.04);
}

.users-builder-workspace::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgb(255 255 255 / 0.05);
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.03),
    inset 0 0 24px rgb(0 0 0 / 0.06);
}

.users-appearance-admin-panel {
  position: absolute;
  top: 96px;
  right: calc(24px + clamp(320px, 24vw, 380px) * 2 + 28px);
  bottom: calc(var(--playback-dock-height) + 18px);
  width: clamp(280px, 24vw, 360px);
  z-index: 1800;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 8px;
  overflow: hidden;
  border-radius: 18px;
  background: color-mix(in srgb, var(--panel), #fff 12%);
  box-shadow: 0 18px 34px rgb(18 24 32 / 0.24);
  opacity: 0;
  transform: translateX(-24px) scale(0.985);
  transform-origin: top right;
  transition: opacity 260ms ease, transform 340ms cubic-bezier(0.18, 0.88, 0.24, 1.08);
}

.users-appearance-admin-panel[hidden] {
  display: none;
}

.users-appearance-admin-panel > .panel-section {
  min-height: 0;
}

body.user-site-mode .users-appearance-admin-panel {
  display: none !important;
}

.users-staging-admin-panel {
  position: absolute;
  top: 96px;
  right: 12px;
  bottom: 96px;
  width: clamp(320px, 24vw, 380px);
  z-index: 1800;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 8px;
  overflow: hidden;
  border-radius: 16px;
  background: color-mix(in srgb, var(--panel), #fff 16%);
  box-shadow: 0 18px 34px rgb(18 24 32 / 0.28);
  opacity: 0;
  transform: translateX(18px);
  transition: opacity 260ms ease, transform 320ms cubic-bezier(0.18, 0.88, 0.24, 1.08);
}

.users-staging-admin-panel[hidden] {
  display: none;
}

.users-staging-admin-panel > .panel-section {
  min-height: 0;
}

body.user-site-mode .users-staging-admin-panel {
  display: none !important;
}

body.users-builder-mode .map-shell {
  position: relative;
  grid-template-columns: minmax(0, 1fr);
}

body.users-builder-mode .users-builder-workspace {
  opacity: 1;
  pointer-events: none;
}

body.users-builder-mode .panel {
  position: absolute;
  top: calc(var(--user-device-margin) + var(--user-frame-top-height) + 16px);
  bottom: calc(var(--user-device-margin) + var(--user-frame-bottom-height) + 16px);
  left: 50%;
  z-index: 1810;
  width: var(--users-builder-admin-width, clamp(300px, 22vw, 360px));
  max-width: calc((100vw - var(--user-frame-left-width) - var(--user-frame-right-width) - (var(--user-device-margin) * 2) - 36px) / 3);
  min-height: 0;
  max-height: none;
  border: 1px solid color-mix(in srgb, var(--line), var(--surface) 18%);
  border-radius: 18px;
  box-shadow: 0 24px 42px rgb(18 24 32 / 0.26);
  transform: translateX(-50%);
  transition:
    left 300ms ease,
    width 300ms ease,
    transform 320ms cubic-bezier(0.18, 0.88, 0.24, 1.08),
    opacity 240ms ease;
}

body.users-builder-mode .users-staging-admin-panel,
body.users-builder-mode .users-appearance-admin-panel {
  opacity: 1;
  width: var(--users-builder-admin-width, clamp(300px, 22vw, 360px));
  max-width: calc((100vw - var(--user-frame-left-width) - var(--user-frame-right-width) - (var(--user-device-margin) * 2) - 36px) / 3);
  min-height: 0;
  max-height: none;
  top: calc(var(--user-device-margin) + var(--user-frame-top-height) + 16px);
  bottom: calc(var(--user-device-margin) + var(--user-frame-bottom-height) + 16px);
  padding: 10px;
  border-radius: 18px;
  box-shadow: 0 24px 42px rgb(18 24 32 / 0.26);
}

body.users-builder-mode .users-staging-admin-panel {
  left: 50%;
  right: auto;
  transform: translateX(calc(var(--users-builder-admin-width, clamp(300px, 22vw, 360px)) / 2 + var(--users-builder-admin-gap, 18px)));
}

body.users-builder-mode .users-appearance-admin-panel {
  left: 50%;
  right: auto;
  transform: translateX(calc((var(--users-builder-admin-width, clamp(300px, 22vw, 360px)) / -2) - var(--users-builder-admin-gap, 18px) - var(--users-builder-admin-width, clamp(300px, 22vw, 360px)))) scale(1);
}

body.users-builder-mode .users-layout-preview {
  display: none;
}

body.users-builder-mode .user-site-controls {
  display: flex;
  opacity: 1;
  z-index: 880;
  pointer-events: auto;
}

body.users-builder-mode .playback-panel,
body.user-site-mode .playback-panel {
  left: calc(var(--user-device-margin) + var(--user-frame-left-width) + var(--user-frame-slot-padding));
  right: calc(var(--user-device-margin) + var(--user-frame-right-width) + var(--user-frame-slot-padding));
  bottom: calc(var(--user-device-margin) + var(--user-frame-slot-padding));
  width: auto;
  border-radius: var(--user-frame-slot-radius, 16px);
  border: 0;
  border-top-color: transparent;
  background: transparent;
  box-shadow: none;
}

body.users-builder-mode .playback-panel {
  z-index: 900;
}

body.users-builder-mode .user-material-controls,
body.users-builder-mode .user-material-panel {
  display: none !important;
}

body.users-builder-mode .user-theme-panel {
  z-index: 1200;
  top: calc(var(--user-device-preview-top, 0px) + var(--user-map-viewport-top, 0px) + 14px);
  right: calc(var(--user-device-preview-right, 0px) + var(--user-map-viewport-right, 0px) + 14px);
  bottom: calc(var(--user-device-preview-bottom, 0px) + var(--user-map-viewport-bottom, 0px) + 14px);
  left: calc(var(--user-device-preview-left, 0px) + var(--user-map-viewport-left, 0px) + 14px);
  width: auto;
}

/* Users is a clean public-view authoring surface, not a map-feature editor. */
body.users-builder-mode #selectionShortcutDock,
body.users-builder-mode .pinned-footer-tab {
  display: none !important;
}

/* While the device preview is being positioned, clicks belong to its guides
   and map panning—not to selecting or dragging the content underneath. */
body.is-device-preview-unlocked .user-map-viewport :is(.leaflet-marker-icon, .leaflet-marker-shadow, .leaflet-interactive, .map-sticker-icon, .route-endpoint-marker, .media-marker) {
  pointer-events: none !important;
}
body.is-device-preview-unlocked #map .leaflet-marker-pane,
body.is-device-preview-unlocked #map .leaflet-overlay-pane {
  pointer-events: none !important;
}

body.users-builder-mode #topThemeButton {
  display: none !important;
}

body.users-builder-mode #userMaterialControls {
  display: flex !important;
  position: absolute;
  z-index: 1201;
  top: calc(var(--user-device-preview-top, 0px) + var(--user-map-viewport-top, 0px) + 16px);
  right: calc(var(--user-device-preview-right, 0px) + var(--user-map-viewport-right, 0px) + 16px);
}

body.users-builder-mode #userMaterialButton {
  display: none !important;
}

body.users-builder-mode .user-site-panel-right {
  right: var(--user-frame-gap);
}

body.users-builder-mode .pinned-journey-section:not(.pinned-tools-section) {
  display: none !important;
}

body.users-builder-mode .panel-tab-panels {
  padding-top: 0;
}

body.users-builder-mode .user-site-controls,
body.users-builder-mode .user-site-controls * {
  user-select: none;
  -webkit-user-select: none;
}

body.users-builder-mode .users-layout-preview {
  opacity: 0.42;
}

.users-staging-actions {
  display: grid;
  gap: 8px;
}

.users-staging-actions button {
  min-height: 38px;
}

.users-shell-color-control {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.users-shell-color-control span {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 800;
}

.users-shell-color-control input[type="color"] {
  width: 100%;
  min-height: 44px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--line), var(--surface) 18%);
  border-radius: 12px;
  background: none;
  cursor: pointer;
}

.users-history-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.users-history-actions button {
  min-height: 38px;
}

.users-history-actions button:disabled {
  opacity: 0.46;
  cursor: not-allowed;
}

.users-shell-status {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.users-staging-list {
  display: grid;
  gap: 8px;
}

.users-registry-preview {
  display: grid;
  gap: 10px;
}

.users-registry-summary {
  display: inline;
  margin-left: 0.28em;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
}

.users-registry-empty {
  margin: 0;
  color: var(--muted);
}

.users-registry-list {
  display: grid;
  gap: 8px;
}

.users-registry-item[data-user-placement-source] {
  cursor: context-menu;
}

body.users-builder-mode .users-registry-item[data-user-builder-card="true"][draggable="true"] {
  cursor: grab;
}

.users-registry-item {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--line), var(--surface) 18%);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface), #fff 8%);
}

.users-registry-control-preview {
  display: grid;
  align-items: center;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--line), transparent 22%);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel), var(--surface) 42%);
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

.users-registry-control-preview > :where(label, input, select, textarea, button) {
  max-width: 100%;
  margin: 0;
}

.users-registry-control-preview :where(input, select, textarea, button) {
  opacity: 1;
}

.users-registry-control-preview[data-control-type="range"] input[type="range"],
.users-registry-control-preview[data-control-type="select"] select,
.users-registry-control-preview[data-control-type="text"] input,
.users-registry-control-preview[data-control-type="textarea"] textarea {
  width: 100%;
}

.users-registry-control-preview[data-control-type="color"] input[type="color"] {
  width: 100%;
  min-height: 38px;
}

.users-staging-item {
  display: grid;
  gap: 8px;
}

.users-registry-help {
  margin: -2px 0 2px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.42;
}

.users-registry-item-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.users-registry-item-title {
  font-weight: 800;
  color: var(--ink);
}

.users-registry-item-id {
  color: var(--muted);
  font-size: 0.82rem;
  font-family: "IBM Plex Mono", "Cascadia Mono", "Consolas", monospace;
}

.users-staging-remove {
  justify-self: end;
  min-height: 34px;
  padding-inline: 10px;
}

.users-registry-item-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px 10px;
  font-size: 0.84rem;
  color: var(--surface-text);
}

.users-registry-item-meta span {
  display: grid;
  gap: 2px;
}

.users-registry-item-meta strong {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.users-registry-stage-button {
  justify-self: end;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--control), #fff 38%);
  border-radius: 8px;
  background: color-mix(in srgb, var(--control), var(--surface) 12%);
  color: var(--control-text);
  font-size: 0.8rem;
  font-weight: 900;
  cursor: pointer;
}

.users-registry-stage-button[data-stage-state="staged"],
.users-registry-stage-button[data-stage-state="placed"] {
  border-color: color-mix(in srgb, var(--line), var(--surface) 18%);
  background: color-mix(in srgb, var(--surface), #fff 8%);
  color: var(--muted);
  cursor: not-allowed;
}

.users-registry-stage-button:disabled {
  opacity: 1;
}

.users-registry-item-compact {
  gap: 6px;
  padding: 9px 10px;
}

.panel.is-user-recording {
  background:
    linear-gradient(90deg, rgb(255 35 112 / 0.22), rgb(255 91 137 / 0.11) 42%, transparent 78%),
    linear-gradient(180deg, rgb(255 115 146 / 0.2), transparent 180px),
    color-mix(in srgb, var(--panel), #ffb4ca 9%);
  box-shadow:
    inset 0 0 0 3px rgb(255 26 112 / 0.72),
    inset 8px 0 0 rgb(255 26 112 / 0.28),
    0 0 0 3px rgb(255 26 112 / 0.18),
    0 22px 40px rgb(18 24 32 / 0.16);
}

.panel.is-user-recording .panel-record-button {
  border-color: #ff1670;
  background: #ff1670;
  color: #fff;
  box-shadow: 0 0 0 4px rgb(255 22 112 / 0.22);
}

.panel.is-user-recording-paused {
  box-shadow:
    inset 0 0 0 2px rgb(255 111 145 / 0.18),
    0 22px 40px rgb(18 24 32 / 0.14);
}

.recordable-setting {
  cursor: pointer;
  transition: box-shadow 140ms ease, background-color 140ms ease;
}

.panel.is-user-recording .recordable-setting:hover {
  box-shadow: 0 0 0 2px rgb(255 182 203 / 0.75);
}

.recordable-setting.is-record-selected {
  box-shadow:
    0 0 0 3px rgb(255 0 140 / 0.98),
    0 0 0 7px rgb(255 0 140 / 0.24),
    0 0 18px rgb(255 0 140 / 0.28);
  border-radius: 10px;
}

#panelUsers [data-users-recorded-session] .users-registry-item.recordable-setting {
  cursor: pointer;
}

.users-registry-subhead {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.users-layout-placeholder {
  min-height: 140px;
  display: grid;
  place-items: center;
  padding: 18px;
  border: 1px dashed color-mix(in srgb, var(--line), var(--surface) 20%);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface), #fff 5%);
  color: var(--muted);
  text-align: center;
}

.users-layout-preview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.users-layout-panel {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 170px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--line), var(--surface) 18%);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface), #fff 8%);
}

.user-site-controls.is-user-builder-drop-target,
.users-layout-panel.is-user-builder-drop-target {
  box-shadow:
    inset 0 0 0 2px rgb(255 111 196 / 0.8),
    0 0 0 4px rgb(255 111 196 / 0.18);
}

.users-layout-panel-head,
.users-layout-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.users-layout-panel-head strong,
.users-layout-section-head strong {
  color: var(--ink);
  font-size: 0.9rem;
}

.users-layout-panel-head span,
.users-layout-section-head span {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.users-layout-panel-empty {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.users-layout-section {
  display: grid;
  gap: 8px;
  padding: 9px;
  border: var(--user-section-stroke-width) var(--user-section-stroke-style) var(--user-section-stroke-color);
  opacity: var(--user-section-stroke-opacity);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface), #fff 5%);
}

.users-layout-section-items {
  display: grid;
  gap: 8px;
}

.users-placement-menu {
  position: fixed;
  z-index: 4500;
  display: grid;
  gap: 10px;
  min-width: 220px;
  max-width: min(320px, calc(100vw - 20px));
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--line), var(--control) 22%);
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel), #fff 10%);
  box-shadow: 0 18px 36px rgb(18 24 32 / 0.3);
}

.users-placement-menu[hidden] {
  display: none;
}

.users-placement-title {
  color: var(--ink);
  font-size: 0.92rem;
}

.users-placement-group {
  display: grid;
  gap: 6px;
}

.users-placement-action[disabled] {
  opacity: 0.56;
  cursor: not-allowed;
}

.users-placement-group-title {
  color: var(--muted);
  font-size: 0.73rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.users-placement-group-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.users-placement-action {
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid color-mix(in srgb, var(--control), #fff 38%);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface), #fff 12%);
  color: var(--ink);
  font-weight: 800;
  cursor: pointer;
}

/* Phase 2E.12 baseline: one frame and one clipped screen. */
body.user-site-mode .user-device-frame,
body.users-builder-mode .user-device-frame {
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.06), rgb(0 0 0 / 0.22)),
    color-mix(in srgb, var(--users-shell-leather-color, var(--leather-color)), #101820 18%);
  box-shadow: var(--user-frame-shadow);
}

body.user-site-mode .user-device-rail,
body.users-builder-mode .user-device-rail,
body.user-site-mode #userFrameBuilderTools,
body.users-builder-mode #userFrameBuilderTools,
body.user-site-mode .user-site-controls,
body.users-builder-mode .user-site-controls,
body.user-site-mode .user-site-section,
body.users-builder-mode .user-site-section,
body.user-site-mode .user-edge-blank-section,
body.users-builder-mode .user-edge-blank-section,
body.user-site-mode .user-builder-empty,
body.users-builder-mode .user-builder-empty {
  display: none !important;
}

body.user-site-mode .map-canvas,
body.users-builder-mode .map-canvas {
  z-index: 781;
  clip-path: inset(
    var(--user-frame-edge-top)
    var(--user-frame-edge-right)
    var(--user-frame-edge-bottom)
    var(--user-frame-edge-left)
    round var(--user-screen-radius)
  );
}

body.user-site-mode .user-device-screen-aperture,
body.users-builder-mode .user-device-screen-aperture {
  z-index: 2;
  border-color: rgb(255 255 255 / 0.2);
  box-shadow: var(--user-screen-shadow);
}

body.user-site-mode #siteModeToggle,
body.user-site-mode #userMaterialControls,
body.user-site-mode #userThemePanel,
body.user-site-mode #userMaterialPanel,
body.user-site-mode #keyboardOnlyToggle,
body.user-site-mode #usView,
body.user-site-mode .map-control-cluster,
body.user-site-mode .map-feature-toolbar,
body.user-site-mode .day-edge-control,
body.user-site-mode .playback-panel,
body.users-builder-mode #userFrameBuilderTools,
body.users-builder-mode .map-control-cluster,
body.users-builder-mode .map-feature-toolbar,
body.users-builder-mode .day-edge-control,
body.users-builder-mode .playback-panel,
body.users-builder-mode .users-panel-manager,
body.users-builder-mode #usersLayoutPreview {
  display: none !important;
}

body.users-builder-mode .users-appearance-admin-panel,
body.users-builder-mode .users-staging-admin-panel,
body.users-builder-mode > .panel,
body.users-builder-mode .panel {
  max-height: calc(100vh - var(--user-frame-edge-top) - var(--user-frame-edge-bottom) - (var(--user-device-margin) * 2) - 24px);
  overflow: auto;
}

@media (max-width: 1200px) {
  .users-staging-admin-panel {
    width: min(340px, calc(100vw - 420px));
  }

  .users-layout-preview {
    grid-template-columns: 1fr;
  }

  body.users-builder-mode .panel {
    width: min(360px, calc((100vw - 84px) / 3));
  }

  body.users-builder-mode .users-staging-admin-panel {
    width: min(360px, calc((100vw - 84px) / 3));
  }

  body.users-builder-mode .users-appearance-admin-panel {
    width: min(360px, calc((100vw - 84px) / 3));
  }
}

.pinned-journey-section {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin: -1px 0 5px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.pinned-subsection {
  display: grid;
  gap: 0;
  padding: 0;
  border: 0;
}

.pinned-subsection:first-child {
  border-radius: 7px 7px 0 0;
}

.pinned-subsection:last-child {
  border-radius: 0 0 7px 7px;
}

.pinned-subsection summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 6px;
  row-gap: 2px;
  cursor: pointer;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  list-style: none;
}

.pinned-journey-details > summary,
.pinned-day-details > summary,
.pinned-route-details > summary {
  margin-inline: -3px;
  padding: 3px 5px;
  border-radius: 3px;
}

.pinned-journey-details > summary {
  background: color-mix(in srgb, var(--pinned-journey-accent, var(--panel)), #101719 64%) !important;
  color: #f7fbfc !important;
  opacity: 1 !important;
  filter: none !important;
  box-shadow: inset 3px 0 0 var(--pinned-journey-accent, color-mix(in srgb, var(--line), var(--muted) 30%)) !important;
}

.pinned-day-details > summary {
  background: color-mix(in srgb, var(--pinned-stop-day-accent, var(--muted)), #101719 64%) !important;
  color: #f7fbfc !important;
  box-shadow: inset 3px 0 0 var(--pinned-stop-day-accent, color-mix(in srgb, var(--muted), var(--line) 52%)) !important;
}

.pinned-route-details > summary {
  background: color-mix(in srgb, var(--pinned-route-accent, var(--control)), #101719 64%) !important;
  color: #f7fbfc !important;
  box-shadow: inset 3px 0 0 var(--pinned-route-accent, color-mix(in srgb, var(--control), var(--line) 46%)) !important;
}

.pinned-subsection summary select { color: #15212a; background: #fffdf9; }
.dark-ui-theme .pinned-journey-details > summary { background: color-mix(in srgb, var(--pinned-journey-accent, var(--control)), #fff 34%) !important; color: #15212a !important; }
.dark-ui-theme .pinned-day-details > summary { background: color-mix(in srgb, var(--pinned-stop-day-accent, var(--control)), #fff 34%) !important; color: #15212a !important; }
.dark-ui-theme .pinned-route-details > summary { background: color-mix(in srgb, var(--pinned-route-accent, var(--control)), #fff 34%) !important; color: #15212a !important; }

.pinned-subsection summary::before {
  content: ">";
  flex: 0 0 auto;
  color: currentColor;
  font-size: 0.72rem;
  line-height: 1;
  transition: transform 150ms ease;
}

.pinned-subsection[open] summary {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.pinned-subsection[open] summary > span {
  grid-column: 2 / -1;
}

.pinned-subsection[open] .pinned-summary-picker {
  grid-column: 2 / 3;
}

.pinned-subsection:not([open]) summary {
  grid-template-columns: auto minmax(0, 0.35fr) minmax(0, 1fr);
}

.pinned-subsection[open] summary::before {
  transform: rotate(90deg);
}

.pinned-subsection summary::-webkit-details-marker {
  display: none;
}

.pinned-subsection summary select {
  min-height: 30px;
  letter-spacing: 0;
  text-transform: none;
}

.pinned-journey-section {
  margin-left: 0;
  overflow: visible;
}

.pinned-section-side-tabs {
  display: contents;
}

.pinned-side-tab {
  --pinned-tab-width: 28px;
  position: fixed;
  z-index: 2500;
  width: var(--pinned-tab-width);
  min-height: 0;
  padding: 5px 4px;
  border: 1px solid color-mix(in srgb, var(--control), #062d42 50%);
  border-radius: 3px 0 0 3px;
  background: #101719;
  color: #d7edf4;
  box-shadow: inset 0 0 0 1px rgb(77 212 255 / .14);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .035em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  writing-mode: horizontal-tb;
  transform: none;
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease, opacity 160ms ease;
}

.pinned-side-tab:hover,
.pinned-side-tab:focus-visible { border-color: #6ad8ff; color: #fff; outline: none; }
.pinned-side-tab:not(.is-active) { border-color: #4f5960; background: #5d5a5a; color: #8a9499; box-shadow: none; opacity: .82; }
.pinned-side-tab:not(.is-active):hover,
.pinned-side-tab:not(.is-active):focus-visible { border-color: #899ba3; color: #c1cbcf; }

/* Author display rules override the user-agent [hidden] rule on details. */
.pinned-journey-section .pinned-subsection[hidden] { display: none !important; }

.panel-footer-theme {
  position: relative;
  margin-left: 0;
  overflow: visible;
}

.panel-footer-tools {
  display: grid;
  grid-template-columns: auto minmax(120px, 1fr) auto;
  gap: 0;
  align-items: center;
}

.pinned-footer-title { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; margin-inline: -1px; padding: 3px 5px; border: 0; border-radius: 3px; background: color-mix(in srgb, var(--pinned-tools-accent, var(--control)), #101719 64%); box-shadow: inset 3px 0 0 var(--pinned-tools-accent, var(--control)); color: #f7fbfc; font: 950 .72rem/1 var(--font, inherit); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.pinned-footer-arrow { display: inline-block; transition: transform 220ms ease; }
.panel-footer-theme .pinned-footer-arrow { transform: rotate(-90deg); }
.panel-footer-theme.is-tools-open .pinned-footer-arrow { transform: rotate(0deg); }
.panel-footer-theme.is-tools-collapsing .pinned-footer-arrow { transform: rotate(-90deg); }
.panel-footer-theme .users-device-preview-toolbar { display: grid; grid-template-columns: auto minmax(92px, 1fr); align-items: center; gap: 5px; padding: 0 8px; border-inline: 1px solid color-mix(in srgb, currentColor, transparent 68%); }
.panel-footer-theme .users-device-preview-toolbar select { grid-column: auto; min-height: 30px; }
.panel-footer-theme .users-device-preview-toolbar > span { display: block; font-size: .64rem; font-weight: 900; text-transform: uppercase; }
.panel-footer-theme .show-map-bounds-toggle { display: flex; align-items: center; gap: 5px; min-height: 30px; padding: 0 9px; color: inherit; font-size: .62rem; font-weight: 900; line-height: 1; text-transform: uppercase; }
.panel-footer-theme .show-map-bounds-toggle input { margin: 0; }
.panel-footer-details { display: none; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 5px; margin-top: 5px; padding-top: 5px; border-top: 1px solid color-mix(in srgb, currentColor, transparent 72%); }
.panel-footer-theme.is-tools-open .panel-footer-details { display: grid; order: -1; }
.panel-footer-details > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .68rem; font-weight: 850; }
.panel-footer-details button { min-height: 30px; padding: 4px 7px; font-size: .68rem; font-weight: 900; }
.panel-footer-theme[hidden] { display: none !important; }
.pinned-footer-tab { position: fixed; right: auto; left: 0; bottom: auto; z-index: 2500; width: 28px; min-height: 28px; padding: 4px 2px; border: 1px solid color-mix(in srgb, var(--control), #062d42 50%); border-radius: 3px 0 0 3px; background: #101719; color: #d7edf4; font-size: .78rem; font-weight: 900; letter-spacing: .025em; line-height: 1; text-align: center; text-transform: uppercase; writing-mode: horizontal-tb; transform: none; cursor: pointer; transition: color 160ms ease, border-color 160ms ease, background 160ms ease, opacity 160ms ease; }
.pinned-footer-tab:hover, .pinned-footer-tab:focus-visible { border-color: #6ad8ff; color: #fff; outline: none; }
.pinned-footer-tab:not(.is-active) { border-color: #4f5960; background: #5d5a5a; color: #8a9499; box-shadow: none; opacity: .82; }

.pinned-motion-lab {
  position: absolute;
  z-index: 500;
  top: 50%;
  left: 50%;
  display: grid;
  gap: 5px;
  width: min(270px, calc(100vw - 48px));
  padding: 12px;
  border: 2px solid color-mix(in srgb, var(--control), #fff 30%);
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel), #0f222b 18%);
  box-shadow: 0 12px 26px rgb(16 31 41 / .28);
  color: var(--ink);
  transform: translate(-50%, -50%);
}

.pinned-motion-lab label { display: grid; gap: 4px; font-size: .7rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.pinned-motion-lab select { min-height: 30px; font: inherit; text-transform: none; }
.pinned-motion-lab small { color: var(--muted); font-size: .68rem; line-height: 1.3; }

/* Maintenance is a deliberately small, fixed public map shell. Its controls
   live in the surrounding material tracks, never inside the map viewport. */
body.maintenance-site-mode .map-stage {
  --user-map-viewport-right: max(var(--user-frame-edge-right), 76px);
  --user-map-viewport-bottom: max(var(--user-frame-edge-bottom), 142px);
}
body.maintenance-site-mode #userStoryDock,
body.maintenance-site-mode .user-site-controls,
body.maintenance-site-mode #siteModeToggle,
body.maintenance-site-mode .map-top-utility-bar,
body.maintenance-site-mode .playback-panel,
body.maintenance-site-mode .day-edge-control,
body.maintenance-site-mode .map-control-cluster,
body.maintenance-site-mode .map-feature-toolbar,
body.maintenance-site-mode #usView {
  display: none !important;
}
body.user-site-mode #selectionShortcutDock,
body.user-site-mode .selection-type-popup,
body.user-site-mode .selection-marquee-hint,
body.user-site-mode .map-selection-marquee,
body.user-site-mode #elementsStyleDrawer,
body.user-site-mode .elements-drawer-toggle-button,
body.user-site-mode #imagePreviewDrawer,
body.user-site-mode #toggleImagePreviewDrawer,
body.user-site-mode #stylePanel,
body.user-site-mode #uiThemePanel,
body.user-site-mode .pinned-motion-lab,
body.user-site-mode #sfxConsentDialog {
  display: none !important;
}
body.user-site-mode .pinned-tools-section,
body.user-site-mode .pinned-footer-tab {
  display: none !important;
}
body.user-site-mode .map-top-utility-bar { display: contents !important; }
body.user-site-mode .map-top-utility-bar > :not(#siteModeToggle) { display: none !important; }
body.user-site-mode #userJumpToStart { display: inline-flex; }
.user-jump-to-start { position: absolute; z-index: 920; top: calc(var(--user-map-viewport-top, 0px) + 18px); left: calc(var(--user-map-viewport-left, 0px) + 18px); min-height: 32px; padding: 0 12px; border: 1px solid rgb(255 255 255 / .34); border-radius: 999px; background: rgb(31 41 51 / .82); color: #fff; box-shadow: 0 3px 10px rgb(0 0 0 / .24); font: 850 .72rem/1 Inter, ui-sans-serif, system-ui, sans-serif; cursor: pointer; }
body:not(.user-site-mode) #userJumpToStart { display: none !important; }
body.maintenance-site-mode .maintenance-map-controls {
  position: absolute;
  z-index: 920;
  left: calc(var(--user-device-preview-left, 0px) + var(--user-map-viewport-left));
  right: calc(var(--user-device-preview-right, 0px) + var(--user-map-viewport-right));
  bottom: calc(var(--user-device-preview-bottom, 0px) + 10px);
  display: grid;
  justify-items: center;
  gap: 7px;
  pointer-events: auto;
}

/* An event can place one private instance of a shared media template. */
.media-viewer.has-layout-instance { inset: auto; }
body.is-media-preview-open .panel-tabs { position: relative; pointer-events: none; opacity: .5; }
body.is-media-preview-open .panel-tabs::after { content: "Esc to exit media"; position: absolute; z-index: 4; inset: 2px 8px auto; padding: 8px; border-radius: 8px; background: #243747f2; color: #fff; font-size: .78rem; font-weight: 900; letter-spacing: .04em; text-align: center; text-transform: uppercase; pointer-events: none; }
.media-preset-viewer { width: 100%; height: 100%; min-width: 0; min-height: 0; padding: var(--media-style-padding, 12px); overflow: hidden; }
.media-preset-viewer.has-frame-inspector { display: grid; grid-template-columns: minmax(0, 1fr) minmax(164px, 22%); gap: 10px; }
.media-preset-instance { display: grid; grid-auto-rows: minmax(0, 1fr); min-width: 0; min-height: 100%; height: 100%; gap: var(--media-combo-gap, 10px); padding: 8px; overflow: hidden; border: 1px solid var(--media-style-border, var(--line)); border-radius: var(--media-style-radius, 12px); background: var(--media-style-background, #090d14); }
.media-preset-frame { position: relative; display: grid; min-width: 0; min-height: 0; place-items: stretch; overflow: hidden; border: 2px dashed color-mix(in srgb, var(--media-style-border, #fff), transparent 35%); border-radius: calc(var(--media-style-radius, 12px) * .7); background: color-mix(in srgb, var(--media-style-background, #090d14), #fff 8%); cursor: pointer; }
.media-preset-frame:hover { border-color: #ffcf46; box-shadow: inset 0 0 0 2px rgb(255 207 70 / .26); }
.media-preset-frame > :is(img, video) { width: 100%; height: 100%; object-fit: contain; background: #000; cursor: move; transform-origin: center; }
.media-preset-frame.is-selected { border-color: #ffcf46; box-shadow: inset 0 0 0 2px rgb(255 207 70 / .36), 0 0 0 2px rgb(255 207 70 / .24); }
.media-preset-frame.has-nested-preset { padding: 4px; cursor: default; }
.media-preset-frame.has-nested-preset > .media-preset-instance { min-height: 100%; }
.media-preset-text { min-width: 0; min-height: 0; height: 100%; resize: none; }
.media-viewer-content article { max-height: 100%; overflow: hidden; font-size: clamp(.68rem, 1.35vw, 1rem); }
.media-sticky-note { display: grid; width: 100%; height: 100%; min-width: 0; min-height: 0; max-height: 100%; padding: 0 !important; overflow: hidden; border: 0; border-radius: inherit; background: transparent !important; color: var(--media-style-text, #fff); box-shadow: none; }
.media-sticky-note-text { width: 100%; height: 100%; min-width: 0; min-height: 0; padding: 0; resize: none; border: 0; outline: 0; background: transparent; color: inherit; caret-color: currentColor; font: inherit; font-size: clamp(.85rem, 1.35vw, 1.1rem); font-weight: 700; line-height: 1.45; text-shadow: none; }
.media-sticky-note-text:focus { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--media-style-border, #fff), transparent 25%); }
.media-preset-add { width: 100%; min-height: 100%; border: 0; border-radius: inherit; background: transparent; color: var(--media-style-text, #fff); font: 850 .77rem/1.2 inherit; cursor: pointer; }
.media-preset-text { width: 100%; min-height: 100%; resize: both; border: 0; border-radius: inherit; background: color-mix(in srgb, var(--media-style-background, #090d14), #000 62%); color: #f8fafc; padding: 10px; font: inherit; line-height: 1.35; text-shadow: 0 1px 2px #000; }
.media-preset-media-label { display: grid; place-items: center; padding: 10px; color: var(--media-style-text, #fff); font-size: .82rem; text-align: center; }
.media-preset-resize { position: absolute; right: 3px; bottom: 3px; z-index: 3; width: 18px; min-height: 18px; padding: 0; border: 0; border-radius: 4px; background: linear-gradient(135deg, transparent 45%, #ffcf46 47% 56%, transparent 58%), linear-gradient(135deg, transparent 67%, #ffcf46 69% 78%, transparent 80%); cursor: nwse-resize; }
.media-preset-frame-inspector { display: grid; align-content: start; gap: 7px; min-width: 0; padding: 9px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--media-style-border, #fff), transparent 35%); border-radius: 9px; background: color-mix(in srgb, var(--media-style-background, #0e1722), #000 24%); color: #f8fafc; }
.media-preset-frame-inspector strong { color: #fff; font-size: .78rem; }
.media-preset-frame-inspector label { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 5px; color: #f8fafc; font-size: .68rem; font-weight: 800; }
.media-preset-frame-inspector label:has(input[type="range"]) { grid-template-columns: minmax(0, 1fr) minmax(64px, 1fr) 34px; }
.media-preset-frame-inspector :is(select, input[type="color"], button) { min-width: 0; min-height: 27px; color: #f8fafc; background: #172630; border-color: #aebdc4; }
.media-preset-frame-inspector output { color: #fff; font-weight: 900; text-align: right; }
body.maintenance-site-mode .maintenance-route-icon-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: clamp(3px, .45vw, 7px);
  width: min(100%, 680px);
}
body.maintenance-site-mode .maintenance-route-icon-grid button {
  display: grid;
  place-items: center;
  min-width: 0;
  aspect-ratio: 1;
  padding: 2px;
  border: 1px solid rgb(255 255 255 / .44);
  border-radius: 9px;
  color: #1e2835;
  background: linear-gradient(145deg, #fffdf7, #d9d3c7);
  box-shadow: 0 2px 4px rgb(0 0 0 / .28), inset 0 1px 0 #fff;
  font-size: clamp(15px, 2.1vw, 26px);
  line-height: 1;
}
body.maintenance-site-mode .maintenance-route-icon-grid button:hover,
body.maintenance-site-mode .maintenance-route-icon-grid button:focus-visible,
body.maintenance-site-mode .maintenance-route-icon-grid button.is-selected {
  border-color: #f4c75d;
  background: linear-gradient(145deg, #fff5cc, #cda85a);
  box-shadow: 0 0 0 2px rgb(244 199 93 / .38), inset 0 1px 0 #fff;
}
body.maintenance-site-mode .maintenance-route-icon-size {
  display: grid;
  grid-template-columns: auto minmax(120px, 230px) auto;
  align-items: center;
  gap: 8px;
  color: #fff8e9;
  font-weight: 800;
  text-shadow: 0 1px 2px #000;
}
body.maintenance-site-mode .maintenance-route-icon-size input { width: min(40vw, 230px); accent-color: #f4c75d; }
body.maintenance-site-mode .maintenance-map-zoom {
  position: absolute;
  z-index: 920;
  top: calc(var(--user-device-preview-top, 0px) + var(--user-map-viewport-top) + 10px);
  right: calc(var(--user-device-preview-right, 0px) + 12px);
  bottom: calc(var(--user-device-preview-bottom, 0px) + var(--user-map-viewport-bottom) + 10px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  justify-items: center;
  gap: 6px;
  padding: 6px 4px;
  color: #fff8e9;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .05em;
  text-shadow: 0 1px 2px #000;
}
body.maintenance-site-mode .maintenance-map-zoom input {
  min-height: 120px;
  height: 100%;
  margin: 0;
  accent-color: #f4c75d;
  writing-mode: vertical-lr;
  direction: rtl;
}
body.maintenance-site-mode .route-playback-icon-maintenance { font-family: "Segoe UI Emoji", "Apple Color Emoji", sans-serif; font-size: .82em; }
@media (max-width: 640px) {
  body.maintenance-site-mode .map-stage { --user-map-viewport-bottom: max(var(--user-frame-edge-bottom), 122px); }
  body.maintenance-site-mode .maintenance-route-icon-grid { gap: 2px; }
  body.maintenance-site-mode .maintenance-route-icon-grid button { border-radius: 6px; font-size: clamp(12px, 4vw, 20px); }
  body.maintenance-site-mode .maintenance-route-icon-size { gap: 5px; }
}
.pinned-subsection select.is-viewing, .pinned-summary-picker select.is-viewing { outline: 3px solid #f2a33a; outline-offset: 1px; background: #fff6d4; box-shadow: 0 0 0 4px rgb(242 163 58 / .2); }

.pinned-summary-picker {
  display: grid;
  min-width: 0;
}

.pinned-summary-picker select,
.pinned-picker-control select,
.pinned-picker-control input[type="text"] {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pinned-journey-details:not([open]),
.pinned-day-details:not([open]) {
  gap: 0;
}

.pinned-subsection:not([open]) .pinned-picker-row,
.pinned-subsection:not([open]) .stop-date-editor,
.pinned-subsection:not([open]) .pinned-day-stats,
.pinned-subsection:not([open]) .day-rename-fields,
.pinned-subsection:not([open]) .rename-inline-button,
.pinned-subsection:not([open]) .pinned-route-status {
  display: none;
}

.pinned-subsection:not([open]) summary > span {
  display: inline;
}

.pinned-journey-details:not([open]) .route-stats {
  display: none;
}

.pinned-picker-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 80px;
  gap: 5px;
  align-items: end;
}

.pinned-picker-control {
  display: grid;
  gap: 3px;
  min-width: 0;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pinned-picker-control select,
.pinned-picker-control input[type="text"] {
  min-height: 30px;
  letter-spacing: 0;
  text-transform: none;
}

.pinned-divider {
  height: 1px;
  border-top: 1px solid var(--line);
}

.pinned-journey-section h1 {
  margin: 0;
  font-size: clamp(1.15rem, 2vw, 1.65rem);
  line-height: 1.05;
}

.pinned-journey-section button {
  min-height: 30px;
  padding: 3px 7px;
  border: 1px solid var(--control);
  border-radius: 8px;
  background: var(--control);
  color: var(--control-text);
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1.05;
  cursor: pointer;
}

.stop-date-editor {
  position: relative;
  display: grid;
  gap: 3px;
  padding: 6px 0;
  border-top: 1px solid var(--line);
}

.pinned-stop-day-picker {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
}

.pinned-stop-day-picker > span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pinned-stop-day-picker select {
  min-width: 0;
  height: 28px;
}

.stop-day-divider {
  height: 1px;
  margin: 2px 0 1px;
  background: var(--line);
}

.trip-stop-day-list {
  max-height: 260px;
}

.trip-stop-day-button[aria-pressed="true"] {
  border-color: var(--control);
  background: color-mix(in srgb, var(--control) 14%, var(--surface));
}

.stop-date-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) 32px;
  gap: 5px;
  align-items: end;
}

.stop-date-fields label {
  display: grid;
  gap: 2px;
  min-width: 0;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.stop-date-fields input {
  width: 100%;
  min-width: 0;
  height: 30px;
  padding: 3px 6px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 0.78rem;
  letter-spacing: 0;
}

.stop-date-fields input[aria-invalid="true"] {
  border-color: #c93f3f;
  outline: 1px solid #c93f3f;
}

.stop-date-separator {
  align-self: end;
  padding-bottom: 7px;
  color: var(--muted);
  font-weight: 900;
}

.pinned-journey-section .stop-calendar-button {
  display: grid;
  place-items: center;
  width: 32px;
  min-height: 30px;
  padding: 0;
}

.stop-calendar-button .material-symbols-rounded {
  font-size: 19px;
}

.stop-date-message {
  min-height: 1em;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 750;
}

.stop-date-message.is-error {
  color: #b82f2f;
}

.stop-calendar-popover {
  position: absolute;
  z-index: 80;
  top: calc(100% - 2px);
  right: 0;
  width: min(286px, 100%);
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 10px 28px rgb(16 24 32 / 0.25);
  color: var(--ink);
}

.stop-calendar-header,
.stop-calendar-weekdays,
.stop-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
}

.stop-calendar-header {
  grid-template-columns: 30px minmax(0, 1fr) 30px;
  align-items: center;
  margin-bottom: 5px;
  text-align: center;
}

.stop-calendar-weekdays span {
  padding: 2px;
  color: var(--muted);
  font-size: 0.65rem;
  font-weight: 900;
  text-align: center;
}

.pinned-journey-section .stop-calendar-grid button {
  min-height: 30px;
  padding: 2px;
  border-color: transparent;
  background: transparent;
  color: var(--ink);
  font-size: 0.74rem;
}

.pinned-journey-section .stop-calendar-grid button:hover,
.pinned-journey-section .stop-calendar-grid button:focus-visible {
  background: color-mix(in srgb, var(--control) 16%, transparent);
}

.pinned-journey-section .stop-calendar-grid button.is-in-range {
  border-radius: 4px;
  background: color-mix(in srgb, var(--control) 20%, transparent);
}

.pinned-journey-section .stop-calendar-grid button.is-range-edge {
  border-radius: 50%;
  background: var(--control);
  color: var(--control-text);
}

.stop-calendar-grid .is-outside-month {
  opacity: 0.38;
}

.stop-calendar-popover > small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.67rem;
  text-align: center;
}

.stop-range-editor,
.day-name-pattern-control {
  position: relative;
  min-width: 0;
}

.stop-range-editor {
  display: grid;
  gap: 3px;
}

.stop-range-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px;
  gap: 6px;
  align-items: end;
}

.stop-range-fields input[aria-invalid="true"] {
  border-color: #c93f3f;
  outline: 1px solid #c93f3f;
}

.edit-stop-calendar-button {
  display: grid;
  place-items: center;
  min-height: 34px;
  padding: 0;
}

.edit-stop-calendar-button .material-symbols-rounded {
  font-size: 20px;
}

.edit-stop-calendar-popover {
  top: calc(100% + 3px);
  right: 0;
}

.stop-calendar-grid {
  user-select: none;
  touch-action: none;
}

.day-name-pattern-tooltip {
  position: fixed;
  z-index: 100000;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  width: min(980px, calc(100vw - 24px));
  max-width: none;
  overflow: visible;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 10px 28px rgb(16 24 32 / 0.25);
  color: var(--ink);
  font-family: "Segoe UI", Arial, sans-serif;
  font-kerning: normal;
  font-variant-ligatures: none;
  font-weight: 500;
  letter-spacing: normal;
  line-height: 1.35;
  text-transform: none;
}

.day-name-pattern-tooltip > strong {
  display: block;
  margin-bottom: 6px;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.day-name-token-columns {
  display: grid;
  grid-template-columns: 0.7fr 1.35fr 1.35fr 0.8fr;
  gap: 14px;
  align-items: start;
}

.day-name-token-columns > section {
  min-width: 0;
}

.day-name-token-grid {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 5px 10px;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: normal;
  line-height: 1.3;
}

.day-name-token-grid code {
  color: var(--accent, #a22f6f);
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0;
  cursor: pointer;
}

.day-name-token-grid code + span {
  cursor: pointer;
}

.day-name-token-grid code:hover,
.day-name-token-grid code:has(+ span:hover) {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

.day-name-token-grid b {
  font-family: "Segoe UI", Arial, sans-serif;
  font-weight: 700;
  letter-spacing: normal;
}

.day-name-token-heading {
  display: block;
  margin-top: 3px;
  padding-top: 4px;
  border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  color: var(--muted);
  font-size: 0.65rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.day-name-token-heading:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.day-name-pattern-tooltip small {
  display: block;
  margin-top: 7px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: normal;
  line-height: 1.35;
}

@media (max-width: 780px) {
  .day-name-token-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.pinned-day-stats {
  display: grid;
  gap: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
}

.pinned-day-stats-top,
.pinned-day-stats-names,
.pinned-day-stats-gps {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  column-gap: 14px;
}

.pinned-day-stats-top {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
}

.pinned-day-stats-top > span,
.pinned-day-stats-names span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 650;
}

.pinned-day-stats-top strong,
.pinned-day-stats-names strong {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 950;
  text-overflow: ellipsis;
}

.pinned-day-stats-names > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 5px;
  min-width: 0;
}

.pinned-day-stats-gps[hidden] {
  display: none;
}

.pinned-day-stats-gps span {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 750;
  text-overflow: ellipsis;
}

.pinned-gps-toggle {
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 5px;
  min-width: 0;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 850;
}

.pinned-gps-toggle input {
  width: 14px;
  height: 14px;
}

.pinned-gps-toggle small {
  justify-self: end;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  color: var(--muted);
  font: inherit;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pinned-route-status {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 650;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* One connected, compact pinned route instrument. */
.pinned-journey-section {
  --pinned-rail: color-mix(in srgb, var(--control), var(--line) 38%);
  gap: 0;
  margin: -1px 0 4px;
  padding: 0;
  overflow: visible;
  border: 0;
  border-inline: 3px solid var(--pinned-rail);
  border-bottom: 2px solid var(--pinned-rail);
  border-radius: 0 0 7px 7px;
  background: color-mix(in srgb, var(--panel), #fff 5%);
}

.pinned-journey-section .pinned-subsection {
  gap: 0;
  margin: 0;
  padding: 0 4px;
  border-radius: 0;
}

.pinned-journey-details {
  background: color-mix(in srgb, var(--surface), #c9bda9 24%);
}

.pinned-day-details {
  border-top: 4px solid color-mix(in srgb, var(--pinned-rail), var(--ink) 22%);
  background: color-mix(in srgb, var(--surface), #aebfd0 24%);
}

.pinned-subsection > summary,
.pinned-subsection[open] > summary,
.pinned-subsection:not([open]) > summary {
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  gap: 4px;
  margin: 0;
  padding: 3px 2px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.pinned-subsection > summary > span,
.pinned-subsection[open] > summary > span,
.pinned-subsection:not([open]) > summary > span {
  display: inline;
  grid-column: 2;
  white-space: nowrap;
}

.pinned-subsection > summary .pinned-summary-picker,
.pinned-subsection[open] > summary .pinned-summary-picker {
  grid-column: 3;
}

.pinned-subsection > summary .rename-inline-button {
  grid-column: 4;
}

.pinned-subsection summary select {
  min-height: 26px;
  height: 26px;
  padding-block: 2px;
}

.pinned-journey-section button {
  min-height: 26px;
  border-radius: 6px;
}

.pinned-stop-subsection-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 0;
  margin-inline: -4px;
  border-top: 1px solid color-mix(in srgb, var(--line), transparent 25%);
  background: color-mix(in srgb, var(--surface), #c7ced5 18%);
}

.pinned-day-details:not([open]) .pinned-stop-subsection-bar {
  display: none;
}

.pinned-journey-section .pinned-stop-twirl {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  min-height: 24px;
  padding: 2px 7px;
  border: 0;
  border-right: 1px solid color-mix(in srgb, var(--line), transparent 28%);
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 0.69rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pinned-stop-twirl[aria-expanded="true"] {
  background: color-mix(in srgb, var(--control), transparent 88%);
  color: var(--ink);
}

.pinned-stop-twirl-arrow {
  display: inline-block;
  transition: transform 150ms ease;
}

.pinned-stop-twirl-arrow.is-expanded {
  transform: rotate(90deg);
}

.pinned-stop-subsection-bar .pinned-gps-toggle {
  align-self: stretch;
  padding: 2px 7px;
  border-left: 1px solid color-mix(in srgb, var(--line), transparent 28%);
  cursor: pointer;
}

.pinned-stop-subsection-content {
  margin-inline: -4px;
  padding: 5px 7px;
  border-top: 1px solid color-mix(in srgb, var(--line), var(--ink) 15%);
}

.pinned-stop-subsection-content[hidden] {
  display: none !important;
}

.pinned-stop-dates {
  background: color-mix(in srgb, var(--surface), #e5d39b 23%);
}

.pinned-stop-stats {
  background: color-mix(in srgb, var(--surface), #aecdb8 21%);
}

.pinned-day-stats.pinned-stop-subsection-content,
.stop-date-editor.pinned-stop-subsection-content {
  gap: 3px;
  padding-top: 5px;
}

.pinned-route-status {
  padding: 2px 4px 3px;
  border-top: 1px solid color-mix(in srgb, var(--line), transparent 35%);
  font-size: 0.65rem;
  line-height: 1.1;
}

.route-follow-camera-controls {
  display: grid;
  gap: 8px;
}

.route-follow-camera-controls[hidden] {
  display: none;
}

.route-follow-camera-note {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 650;
  line-height: 1.3;
}

.rename-inline-button {
  white-space: normal;
}

.day-rename-fields {
  display: grid;
  gap: 6px;
}

.day-rename-fields[hidden] {
  display: none;
}

.day-rename-linked-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
}

.day-rename-fields input[type="text"]:disabled {
  background: color-mix(in srgb, var(--surface), var(--muted) 16%);
  color: color-mix(in srgb, var(--ink), var(--muted) 42%);
  cursor: not-allowed;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

#panelElements {
  position: relative;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
}

#panelElements > .panel-section {
  grid-column: 1 / -1;
}

.panel-tab-panel[hidden] {
  display: none !important;
}

/* The Labs copy is a browser-local sandbox. Deployment is one-way from
   GitHub Actions to Bluehost; its browser cannot publish back to GitHub. */
body.labs-local-only #publishSite,
body.labs-local-only #publishDialog {
  display: none !important;
}

.panel-section {
  --section-tint: color-mix(in srgb, var(--panel), var(--surface) 52%);
  --section-accent: var(--line);
  padding: 9px;
  border: 1px solid color-mix(in srgb, var(--section-accent), var(--ink) 14%);
  border-left-width: 5px;
  border-radius: 8px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--section-accent), transparent 82%), transparent 44%), var(--section-tint);
  transition: background 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

:is(.panel-section, .users-material-preset-panel, .users-appearance-group, .style-panel)[data-section-color="0"] {
  --section-tint: #fff2f0;
  --section-accent: #e96d62;
}

:is(.panel-section, .users-material-preset-panel, .users-appearance-group, .style-panel)[data-section-color="1"] {
  --section-tint: #fff3e4;
  --section-accent: #df8a38;
}

:is(.panel-section, .users-material-preset-panel, .users-appearance-group, .style-panel)[data-section-color="2"] {
  --section-tint: #fff9df;
  --section-accent: #d6ae2f;
}

:is(.panel-section, .users-material-preset-panel, .users-appearance-group, .style-panel)[data-section-color="3"] {
  --section-tint: #eff9ed;
  --section-accent: #62a965;
}

:is(.panel-section, .users-material-preset-panel, .users-appearance-group, .style-panel)[data-section-color="4"] {
  --section-tint: #eff7ff;
  --section-accent: #5c9dd8;
}

:is(.panel-section, .users-material-preset-panel, .users-appearance-group, .style-panel)[data-section-color="5"] {
  --section-tint: #f6f0ff;
  --section-accent: #9a7ad7;
}

:is(.panel-section, .users-material-preset-panel, .users-appearance-group, .style-panel)[data-section-color="6"] {
  --section-tint: #f5ece4;
  --section-accent: #9a6c48;
}

:is(.panel-section, .users-material-preset-panel, .users-appearance-group, .style-panel)[data-section-color="7"] {
  --section-tint: #edf0f2;
  --section-accent: #29333b;
}

:is(.panel-section, .users-material-preset-panel, .users-appearance-group, .style-panel)[data-section-color="8"] {
  --section-tint: #ffffff;
  --section-accent: #f4f7f8;
}

.section-color-loop-editor { display: grid; gap: 6px; }
.color-loop-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.color-loop-instruction { color: var(--muted); font-size: .63rem; font-weight: 750; line-height: 1; text-align: right; }
.section-color-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 5px; min-height: 30px; }
.section-color-loop-row:empty { display: none; }
.section-color-tile, .section-color-fly { --loop-color: #e96d62; display: grid; place-items: center; min-width: 0; min-height: 30px; padding: 2px; border: 1px solid color-mix(in srgb, var(--loop-color), var(--ink) 20%); border-radius: 6px; background: color-mix(in srgb, var(--loop-color), var(--surface) 76%); color: color-mix(in srgb, var(--ink), var(--loop-color) 28%); font: 900 .68rem/1 var(--font, inherit); cursor: pointer; transition: opacity 180ms ease, transform 180ms ease, box-shadow 180ms ease; }
.section-color-tile:hover, .section-color-tile:focus-visible { transform: translateY(-1px); box-shadow: 0 4px 10px color-mix(in srgb, var(--loop-color), transparent 70%); outline: none; }
.section-color-tile.is-assigned { opacity: .38; filter: saturate(.7); }
.section-color-tile.is-loop-tile { color: color-mix(in srgb, var(--ink), var(--loop-color) 54%); background: color-mix(in srgb, var(--loop-color), var(--surface) 58%); }
.section-color-tile.is-color-drop-before { box-shadow: inset 4px 0 0 var(--control), 0 4px 10px color-mix(in srgb, var(--loop-color), transparent 70%); }
.section-color-tile.is-color-drop-after { box-shadow: inset -4px 0 0 var(--control), 0 4px 10px color-mix(in srgb, var(--loop-color), transparent 70%); }
.section-color-tile.is-color-drop-before ~ .section-color-tile { transform: translateX(8px); }
.pinned-section-color-slots { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.pinned-section-color-slots button { min-height: 32px; border: 1px dashed var(--line); border-radius: 6px; background: color-mix(in srgb, var(--surface), var(--panel) 36%); color: var(--muted); font: 850 .66rem/1 var(--font, inherit); cursor: default; }
.pinned-section-color-slots button[data-section-color-id]:not([data-section-color-id=""]) { border-style: solid; background: color-mix(in srgb, var(--loop-color), var(--surface) 62%); color: var(--ink); }
.pinned-section-color-slots button[data-section-color-id="red"] { --loop-color: #c44f45; }.pinned-section-color-slots button[data-section-color-id="orange"] { --loop-color: #b96820; }.pinned-section-color-slots button[data-section-color-id="yellow"] { --loop-color: #a98213; }.pinned-section-color-slots button[data-section-color-id="green"] { --loop-color: #47884d; }.pinned-section-color-slots button[data-section-color-id="teal"] { --loop-color: #168b83; }.pinned-section-color-slots button[data-section-color-id="blue"] { --loop-color: #397cb4; }.pinned-section-color-slots button[data-section-color-id="violet"] { --loop-color: #7656b5; }.pinned-section-color-slots button[data-section-color-id="pink"] { --loop-color: #c45080; }.pinned-section-color-slots button[data-section-color-id="brown"] { --loop-color: #7e5134; }.pinned-section-color-slots button[data-section-color-id="black"] { --loop-color: #1c2b33; }.pinned-section-color-slots button[data-section-color-id="grey"] { --loop-color: #6d767b; }.pinned-section-color-slots button[data-section-color-id="white"] { --loop-color: #bfcbd1; }
.dark-ui-theme .pinned-section-color-slots button[data-section-color-id]:not([data-section-color-id=""]) { background: color-mix(in srgb, var(--loop-color), var(--panel) 58%); color: var(--ink); }
.section-color-tile[data-section-color-id="red"], .section-color-fly[data-section-color-id="red"] { --loop-color: #e96d62; }
.section-color-tile[data-section-color-id="orange"], .section-color-fly[data-section-color-id="orange"] { --loop-color: #df8a38; }
.section-color-tile[data-section-color-id="yellow"], .section-color-fly[data-section-color-id="yellow"] { --loop-color: #d6ae2f; }
.section-color-tile[data-section-color-id="green"], .section-color-fly[data-section-color-id="green"] { --loop-color: #62a965; }
.section-color-tile[data-section-color-id="teal"], .section-color-fly[data-section-color-id="teal"] { --loop-color: #3eb8ad; }
.section-color-tile[data-section-color-id="blue"], .section-color-fly[data-section-color-id="blue"] { --loop-color: #5c9dd8; }
.section-color-tile[data-section-color-id="violet"], .section-color-fly[data-section-color-id="violet"] { --loop-color: #9a7ad7; }
.section-color-tile[data-section-color-id="pink"], .section-color-fly[data-section-color-id="pink"] { --loop-color: #e97ca4; }
.section-color-tile[data-section-color-id="brown"], .section-color-fly[data-section-color-id="brown"] { --loop-color: #9a6c48; }
.section-color-tile[data-section-color-id="black"], .section-color-fly[data-section-color-id="black"] { --loop-color: #29333b; }
.section-color-tile[data-section-color-id="grey"], .section-color-fly[data-section-color-id="grey"] { --loop-color: #9ca6aa; }
.section-color-tile[data-section-color-id="white"], .section-color-fly[data-section-color-id="white"] { --loop-color: #f4f7f8; }
.section-color-fly { position: fixed; z-index: 7000; width: 30px; pointer-events: none; }

.dark-ui-theme :is(.panel-section, .users-material-preset-panel, .users-appearance-group, .style-panel)[data-section-color] {
  --section-tint: color-mix(in srgb, #0b1116 88%, var(--section-accent) 12%) !important;
  border-color: color-mix(in srgb, var(--section-accent), #fff 34%);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--section-accent), transparent 72%), transparent 50%),
    var(--section-tint);
  color: #f7fbfc;
}

.dark-ui-theme .panel-section .section-collapse-button,
.dark-ui-theme .panel-section .section-collapse-title,
.dark-ui-theme .panel-section .style-helper,
.dark-ui-theme .panel-section .compact-section-note,
.dark-ui-theme .panel-section small,
.dark-ui-theme .panel-section p { color: #f7fbfc !important; text-shadow: 0 1px 1px rgb(0 0 0 / .45); }

.panel-footer-theme { background: color-mix(in srgb, var(--pinned-tools-accent, var(--control)), #101719 64%); color: #f7fbfc; }
.panel-footer-theme :is(span, label, small) { color: #f7fbfc; }
.dark-ui-theme .panel-footer-theme { background: color-mix(in srgb, var(--pinned-tools-accent, var(--control)), #fff 66%); border-color: color-mix(in srgb, var(--pinned-tools-accent, var(--control)), #fff 35%); color: #15212a; }
.dark-ui-theme .panel-footer-theme :is(span, label, small, button) { color: #15212a; }

.dark-ui-theme .panel-section .section-label,
.dark-ui-theme .panel-section .section-collapse-button,
.dark-ui-theme .panel-section .section-collapse-arrow,
.dark-ui-theme .panel-section .range-control,
.dark-ui-theme .panel-section .range-control output,
.dark-ui-theme .panel-section .text-control,
.dark-ui-theme .panel-section .compact-control {
  color: color-mix(in srgb, var(--ink), var(--section-accent) 18%);
}

.dark-ui-theme .panel-section input:not([type="range"]):not([type="color"]),
.dark-ui-theme .panel-section select,
.dark-ui-theme .panel-section textarea,
.dark-ui-theme .panel-section .toggle-button,
.dark-ui-theme .panel-section .text-control input,
.dark-ui-theme .panel-section .text-control select,
.dark-ui-theme .panel-section .compact-control select,
.dark-ui-theme .panel-section .marker-fill-row,
.dark-ui-theme .panel-section .route-animation-icon-colors label,
.dark-ui-theme .panel-section .landmarks-section,
.dark-ui-theme .panel-section .media-order-toggle {
  border-color: color-mix(in srgb, var(--line), var(--ink) 16%);
  background: color-mix(in srgb, var(--panel), var(--surface) 18%);
  color: var(--ink);
}

.dark-ui-theme .panel-section button:not(.section-collapse-button):not(.section-move-button):not(.landmark-tile):not(.map-style-card):not(.stroke-visibility-toggle):not(.color-swatch) {
  border-color: color-mix(in srgb, var(--control), var(--ink) 18%);
  background: color-mix(in srgb, var(--control), #000 12%);
  color: var(--control-text);
}

.dark-ui-theme .panel-section input::placeholder,
.dark-ui-theme .panel-section textarea::placeholder {
  color: color-mix(in srgb, var(--ink), transparent 44%);
}

.font-theme-section {
  display: grid;
  gap: 8px;
}

.font-preview-row {
  display: grid;
  min-height: 46px;
  place-items: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--line), var(--ink) 12%);
  border-radius: 8px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--surface), transparent 18%), transparent),
    color-mix(in srgb, var(--panel), var(--surface) 44%);
}

#fontStylePreview {
  display: inline-block;
  padding: 3px 7px;
  border-radius: 5px;
  background: rgb(var(--label-bg-rgb, 255 255 255) / var(--label-bg-opacity, 0.86));
  line-height: 1;
  text-align: center;
  transform-origin: center;
  text-shadow:
    0 var(--label-halo-width, 1px) 0 var(--label-halo),
    var(--label-halo-width, 1px) 0 0 var(--label-halo),
    0 calc(var(--label-halo-width, 1px) * -1) 0 var(--label-halo),
    calc(var(--label-halo-width, 1px) * -1) 0 0 var(--label-halo),
    0 2px 4px rgb(31 41 51 / 0.26);
  white-space: nowrap;
}

.font-control-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.font-control-grid .range-control {
  grid-template-columns: 76px minmax(0, 1fr) 42px;
}

.font-control-grid .compact-toggle {
  align-self: end;
  min-height: 32px;
}

.font-slider-grid {
  display: grid;
  gap: 4px;
}

.font-slider-grid .range-control {
  grid-template-columns: 78px minmax(0, 1fr) 48px;
}

.font-slider-grid .range-control output {
  grid-column: 3;
  justify-self: end;
  align-self: center;
  margin-top: 0;
}

.current-theme-section {
  display: grid;
  gap: 7px;
  grid-column: 1 / -1 !important;
  position: relative;
  z-index: 90;
  pointer-events: auto;
}

.panel-footer-theme {
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  margin-top: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.current-theme-button {
  display: grid;
  width: 100%;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid var(--current-theme-border, var(--control));
  border-radius: 8px;
  background: var(--current-theme-bg, var(--control));
  color: var(--current-theme-fg, var(--control-text));
  text-align: left;
  cursor: pointer;
  align-items: center;
  position: relative;
  z-index: 2;
  pointer-events: auto;
}

.panel-footer-theme .current-theme-button,
.panel-footer-theme > button {
  min-width: 0;
  min-height: 43px;
  padding: 3px 8px;
  border-radius: 7px;
  font-size: 0.78rem;
  line-height: 1.12;
}

.panel-footer-theme .current-theme-button { min-height: 50px; padding-inline: 7px; }
.footer-theme-details { grid-column: 1 / -1; }
.footer-theme-details > summary { list-style: none; cursor: pointer; }
.footer-theme-details > summary::-webkit-details-marker { display: none; }
.footer-theme-expanded { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 6px; align-items: center; padding-top: 6px; }
.footer-project-status-host { min-width: 0; }
.footer-theme-expanded .project-export-status { position: static; inset: auto; display: flex; min-width: 0; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
.footer-theme-expanded .project-export-status > span { min-width: 0; color: var(--muted); font-size: .72rem; font-weight: 800; }
.footer-theme-expanded .project-export-status button { min-height: 36px; padding: 4px 7px; font-size: .72rem; }
.footer-theme-expanded button { min-height: 36px; }

.current-theme-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.save-current-theme-button,
.update-current-theme-button {
  min-height: 34px;
  padding: 8px;
  border: 1px solid var(--control);
  border-radius: 8px;
  color: var(--control);
  font-weight: 900;
  cursor: pointer;
}

.save-current-theme-button {
  background: color-mix(in srgb, var(--control), var(--surface) 72%);
}

.update-current-theme-button {
  background: var(--surface);
}

.update-current-theme-button:hover {
  background: color-mix(in srgb, var(--control), var(--surface) 82%);
}

.save-current-theme-button:hover {
  background: var(--control);
  color: var(--control-text);
}

.current-theme-section > .section-label {
  grid-column: 1;
  align-self: center;
  margin: 0;
  white-space: nowrap;
}

.current-theme-button span {
  display: none;
}

.current-theme-button strong {
  margin-top: 0;
  font-size: 0.88rem;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.current-theme-button em {
  display: none;
}

.route-theme-panel-head button {
  min-height: 34px;
  border: 1px solid var(--control);
  border-radius: 8px;
  background: var(--control);
  color: var(--control-text);
  font-weight: 900;
  cursor: pointer;
  transform-origin: top right;
  animation: done-button-birth 220ms ease-out both;
}

.eyebrow {
  margin: 0 0 3px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-size: clamp(1.25rem, 1.8vw, 1.72rem);
  line-height: 1.05;
}

.day-buttons {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  margin-top: 6px;
}

.day-buttons button {
  min-height: 28px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7f3eb;
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 800;
  cursor: pointer;
}

.day-buttons button[aria-pressed="true"] {
  border-color: var(--control);
  background: var(--control);
  color: var(--control-text);
}

.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 12px;
  gap: 0;
  margin: 0;
}

.route-stats {
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid color-mix(in srgb, var(--line), var(--ink) 14%);
}

.stats div {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 6px;
  align-items: baseline;
  padding: 5px 0;
  border-bottom: 1px solid var(--line);
}

.stats div:nth-child(-n + 2) {
  padding-top: 0;
}

.stats div:nth-last-child(-n + 2) {
  padding-bottom: 0;
  border-bottom: 0;
}

.stats dt {
  color: var(--muted);
  font-size: 0.74rem;
}

.stats dd {
  margin: 0;
  font-size: 0.84rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.endpoint-name,
.endpoint-coordinates {
  display: block;
}

.endpoint-coordinates {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 650;
}

.controls {
  display: grid;
  grid-template-columns: 34px 34px minmax(0, 1fr);
  gap: 6px;
}

.controls button,
.file-control {
  min-height: 32px;
  border: 1px solid var(--control);
  border-radius: 8px;
  background: var(--control);
  color: var(--control-text);
  font-weight: 700;
  cursor: pointer;
}

.controls button {
  display: grid;
  place-items: center;
}

.file-control {
  display: grid;
  place-items: center;
  position: relative;
  padding: 6px;
  text-align: center;
}

.file-control input {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  cursor: pointer;
}

.image-upload-control {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  opacity: 0;
  pointer-events: none;
}

.route-import-divider {
  height: 5px;
  margin: 9px 0 7px;
  border-top: 1px solid color-mix(in srgb, var(--line), transparent 22%);
  border-bottom: 1px solid color-mix(in srgb, var(--line), transparent 48%);
}

.route-header-file-control {
  width: 100%;
}

.toggle-section,
.preset-section,
.overview-section,
.route-controls-section,
.visited-states-section {
  display: grid;
  gap: 5px;
}

.full-width-style-button {
  width: 100%;
  min-height: 34px;
}

.overview-section {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.overview-section .section-label,
.overview-section .range-control {
  grid-column: 1 / -1;
}

.route-controls-section .range-control {
  grid-template-columns: 96px minmax(0, 1fr) 38px;
}

.route-controls-section output {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

#routePlaybackSpeedValue {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.section-label {
  margin: 0;
  color: color-mix(in srgb, var(--section-accent, var(--muted)), #1f2933 58%);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.section-collapse-button {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  justify-self: stretch;
  gap: 6px;
  width: 100%;
  min-height: 22px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: color-mix(in srgb, var(--section-accent, var(--muted)), #1f2933 58%);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
}

.section-collapse-button span:not(.section-move-controls):not(.section-move-button):not(.section-drag-handle) {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.section-collapse-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.section-collapse-arrow {
  display: inline-block;
  width: 0.72em;
  color: currentColor;
  font-size: 0.72rem;
  line-height: 1;
  transition: transform 150ms ease;
}
.panel-section:not(.is-collapsed) > .section-collapse-button .section-collapse-arrow { transform: rotate(90deg); }

.section-move-controls {
  display: inline-flex;
  gap: 3px;
  margin-left: auto;
  margin-right: 14px;
}

.section-move-button {
  display: grid;
  place-items: center;
  width: 20px;
  height: 18px;
  border: 1px solid color-mix(in srgb, var(--section-accent), var(--ink) 20%);
  border-radius: 5px;
  background: color-mix(in srgb, #ffffff, var(--section-accent) 18%);
  color: color-mix(in srgb, var(--control), var(--section-accent) 18%);
  font-size: 0.58rem;
  letter-spacing: 0;
  line-height: 1;
  text-align: center;
  cursor: pointer;
}

.section-move-button:hover,
.section-move-button:focus-visible {
  border-color: var(--control);
  background: var(--control);
  color: var(--control-text);
  outline: 0;
}

.section-move-button[aria-disabled="true"] {
  border-color: color-mix(in srgb, var(--line), var(--ink) 8%);
  background: color-mix(in srgb, var(--surface), #ffffff 60%);
  color: color-mix(in srgb, var(--muted), transparent 46%);
  cursor: not-allowed;
}

.section-drag-handle {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 18px;
  margin-left: auto;
  border: 1px solid color-mix(in srgb, currentColor, transparent 52%);
  border-radius: 5px;
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.section-drag-handle:active {
  cursor: grabbing;
}

.panel-section.is-section-dragging {
  opacity: 0.48;
  transition: opacity 120ms ease;
}

.panel-section.is-section-group-member {
  margin-top: -8px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.panel-section.is-section-group-member > .section-collapse-button .section-move-controls {
  display: none;
}
.panel-section:has(+ .panel-section.is-section-group-member) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.panel-tab-panel { position: relative; }
.panel-tab-panel > .panel-section + .panel-section { cursor: default; }
.panel-tab-panel.is-section-gap-target,
.panel-tab-panel.is-section-gap-target * { cursor: copy !important; }
.panel-section.is-section-pinned-top,
.panel-section.is-section-pinned-bottom {
  z-index: 3;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--ink), transparent 84%);
}
.panel-section.is-section-pinned-top { position: sticky; top: 0; }
.panel-section.is-section-pinned-bottom { position: sticky; bottom: 0; }
.panel-section[data-divider-after]::after {
  content: "";
  display: block;
  height: 0;
  margin: 10px -2px -7px;
  border-top: 1px solid color-mix(in srgb, var(--divider-color, var(--section-accent)), transparent 12%);
}
.panel-section[data-divider-after][data-divider-color="0"] { --divider-color: #e96d62; }
.panel-section[data-divider-after][data-divider-color="1"] { --divider-color: #5c9dd8; }
.panel-section[data-divider-after][data-divider-color="2"] { --divider-color: #d6ae2f; }
.panel-section[data-divider-after][data-divider-color="3"] { --divider-color: #9a7ad7; }
.panel-section[data-divider-after][data-divider-color="4"] { --divider-color: #df8a38; }
.panel-section[data-divider-after][data-divider-color="5"] { --divider-color: #62a965; }
.panel-section[data-divider-after][data-divider-after="thick"]::after { border-top-width: 4px; }
.panel-section[data-divider-after][data-divider-after="double"]::after { border-top-width: 4px; border-bottom: 1px solid currentColor; padding-top: 2px; }
.panel-section[data-divider-after][data-divider-after="dashed"]::after { border-top-style: dashed; }
.panel-section[data-divider-after][data-divider-after="dotted"]::after { border-top-style: dotted; }
.panel-section-gap-menu {
  position: fixed;
  z-index: 1100;
  display: grid;
  gap: 5px;
  width: 178px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 8px 24px rgb(0 0 0 / .2);
}
.panel-section-gap-menu[hidden] { display: none; }
.panel-section-gap-hint {
  position: fixed;
  z-index: 1000;
  max-width: 220px;
  padding: 3px 6px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--panel);
  box-shadow: 0 3px 12px rgb(0 0 0 / .16);
  color: var(--muted);
  font-size: .66rem;
  font-weight: 750;
  pointer-events: none;
}
.panel-section-gap-hint[hidden] { display: none; }

.panel-section {
  transition: transform 150ms ease, opacity 120ms ease;
}

.panel-section.is-section-drop-before {
  box-shadow: inset 0 4px 0 var(--control), var(--section-shadow, none);
}

.panel-section.is-section-drop-after {
  box-shadow: inset 0 -4px 0 var(--control), var(--section-shadow, none);
}

.panel-section.is-collapsed > :not(.section-collapse-button) {
  display: none !important;
}

.toggle-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}

.element-group-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-content: stretch;
  align-items: start;
  column-gap: 8px;
  row-gap: 7px;
  min-width: 0;
}

.route-color-controls {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.route-color-controls label {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.route-color-controls input[type="color"] {
  width: 100%;
  height: 30px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: transparent;
}

.element-group {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 84px;
  grid-template-columns: none;
  justify-content: center;
  justify-self: center;
  align-content: start;
  gap: 5px;
  margin: 0;
  padding: 6px;
  border: 1px solid color-mix(in srgb, var(--line), var(--ink) 18%);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface), #fff 28%);
}

.element-group[data-element-group="land-sea"],
.element-group[data-element-group="cities"],
.element-group[data-element-group="streets"] {
  grid-column: 1 / -1;
  max-width: 100%;
}

.element-group[data-element-group="borders"] {
  grid-column: 1 / -1;
  justify-self: center;
  width: fit-content;
  max-width: 100%;
}

.element-group legend {
  padding: 0 6px;
  color: var(--muted);
  font-size: 0.63rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.toggle-actions,
.preset-controls,
.road-package-actions {
  display: grid;
  gap: 5px;
}

.toggle-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.preset-controls {
  grid-template-columns: minmax(0, 1fr) 34px;
}

.preset-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

.road-package-section {
  display: grid;
  gap: 7px;
}

.rest-day-toggle {
  justify-content: start;
}

.day-sequence-edit-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
  gap: 6px;
}

.road-package-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.road-folder-status {
  margin: 0;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 750;
}

.panel-global-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.toggle-actions button,
.road-package-actions button,
.preset-controls button,
.preset-controls select,
.preset-actions button,
.panel-global-actions button,
.import-button {
  min-height: 29px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 700;
  cursor: pointer;
}

.import-button {
  display: grid;
  place-items: center;
  position: relative;
  text-align: center;
}

.panel-section > .section-collapse-button {
  min-height: 22px;
  padding: 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: color-mix(in srgb, var(--section-accent, var(--muted)), #1f2933 58%);
  box-shadow: none !important;
}

.import-button input {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  cursor: pointer;
}

.preset-controls select {
  width: 100%;
  padding: 0 8px;
}

.range-control {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 2px 6px;
  align-items: center;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
}

.range-control output {
  grid-column: 2;
  justify-self: center;
  align-self: start;
  margin-top: -2px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-align: center;
}

.text-control {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
}

.compact-control {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 6px;
  align-items: center;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
}

.compact-control select {
  min-height: 28px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fffdf8;
  color: var(--ink);
  font-weight: 800;
}

.text-control input,
.text-control select {
  min-height: 32px;
  width: 100%;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffdf8;
  color: var(--ink);
  font-weight: 700;
}

#fontStyleTypeface,
#styleTypeface {
  font-size: 1.05rem;
  font-weight: 700;
}

#fontStyleTypeface option,
#styleTypeface option {
  font-size: 1.02rem;
  line-height: 1.4;
}

.route-theme-section {
  display: grid;
  gap: 7px;
}

.trips-panel {
  gap: 8px;
}

.trip-manager-section,
.trip-tier-section,
.route-builder-section,
.day-manager-section,
.media-manager-section {
  display: grid;
  gap: 8px;
}

.trip-create-row,
.day-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
}

.day-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.day-route-editor {
  display: grid;
  gap: 8px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface), var(--panel) 42%);
}

.day-route-editor[hidden] {
  display: none;
}

.day-route-edit-actions {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr);
  gap: 7px;
}

.trip-data-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.trip-data-actions .import-button {
  min-width: 0;
}

.zone-default-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.zone-default-actions-bottom {
  margin-top: 6px;
  padding-top: 9px;
  border-top: 1px solid var(--line);
}

.zone-default-actions p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.zone-default-actions button,
.zone-modify-toggle {
  min-height: 32px;
  padding: 6px 9px;
  border: 1px solid var(--control);
  border-radius: 8px;
  background: var(--control);
  color: var(--control-text);
  font-weight: 800;
  cursor: pointer;
}

.day-zone-modify-panel {
  display: grid;
  gap: 8px;
  padding: 9px;
  border: 1px solid color-mix(in srgb, var(--control), var(--line) 54%);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel), var(--surface) 38%);
}

.day-zone-modify-panel[hidden] {
  display: none;
}

.day-zone-modify-panel p {
  margin: 0;
  color: var(--control);
  font-size: 0.76rem;
  font-weight: 950;
  letter-spacing: 0.08em;
}

.day-zone-modify-panel hr {
  width: 100%;
  margin: 2px 0;
  border: 0;
  border-top: 1px solid var(--line);
}

.route-zone-mode-controls {
  display: grid;
  gap: 8px;
  grid-column: 1 / -1;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface), var(--panel) 48%);
}

.route-zone-mode-controls[hidden] {
  display: none;
}

.marker-controls-section {
  display: grid;
  gap: 12px;
}

.icon-control-group {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--line), var(--section-accent, var(--control)) 16%);
  border-radius: 9px;
  background: color-mix(in srgb, var(--surface), var(--panel) 48%);
}

.icon-image-controls {
  background:
    linear-gradient(90deg, color-mix(in srgb, #ffffff, #86c5ff 12%), transparent),
    color-mix(in srgb, var(--surface), var(--panel) 44%);
}

.icon-shape-controls {
  background:
    linear-gradient(90deg, color-mix(in srgb, #ffffff, #ffd86b 14%), transparent),
    color-mix(in srgb, var(--surface), var(--panel) 44%);
}

.icon-control-heading {
  margin: 0 0 1px;
  color: color-mix(in srgb, var(--section-accent, var(--control)), var(--ink) 34%);
  font-size: 0.7rem;
  font-weight: 950;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.marker-stroke-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid color-mix(in srgb, var(--line), transparent 28%);
}

.marker-fill-row {
  display: inline-grid;
  grid-template-columns: auto auto auto;
  justify-content: start;
  justify-self: start;
  gap: 8px;
  align-items: center;
}

.marker-fill-row label {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  min-height: 32px;
  font-weight: 800;
}

.marker-fill-row input[type="color"],
.marker-stroke-row input[type="color"] {
  width: 34px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
}

.marker-stroke-head span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.marker-stroke-head button,
.marker-stroke-row button {
  min-height: 30px;
  padding: 5px 8px;
  border: 1px solid var(--control);
  border-radius: 8px;
  background: var(--control);
  color: var(--control-text);
  font-weight: 800;
  cursor: pointer;
}

.marker-stroke-list {
  display: grid;
  gap: 8px;
  margin-bottom: 2px;
}

.marker-stroke-row {
  display: grid;
  grid-template-columns: 18px 34px 56px 1px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 38px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface), var(--panel) 46%);
}

.marker-stroke-row.is-stroke-hidden {
  opacity: 0.7;
}

.marker-stroke-grip {
  display: block;
  width: 15px;
  height: 18px;
  background:
    repeating-linear-gradient(180deg, var(--muted) 0 2px, transparent 2px 4px);
  background-size: 100% 20px;
  opacity: 0.7;
  cursor: grab;
}

.marker-stroke-row output,
.stroke-visibility-toggle {
  position: relative;
  text-align: center;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 900;
}

.marker-stroke-row .stroke-visibility-toggle {
  display: grid;
  place-items: center;
  width: 56px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  color: transparent;
  font-size: 0;
  line-height: 1;
  text-shadow: none;
  box-shadow: none;
  cursor: pointer;
}

.marker-stroke-row .stroke-visibility-toggle[aria-pressed="false"] {
  opacity: 0.78;
}

.marker-stroke-divider {
  width: 1px;
  height: 24px;
  background: var(--line);
}

.marker-stroke-row input[type="range"] {
  width: 100%;
}

.route-endpoint-marker {
  border: 0;
  background: transparent;
}

.route-endpoint-marker.has-hover-landmark > :where(.endpoint-marker-resting, .endpoint-marker-landmark-hover) {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.route-endpoint-marker.has-hover-landmark .endpoint-marker-landmark-hover {
  visibility: hidden;
  opacity: 0;
}

.route-endpoint-marker.has-hover-landmark:hover .endpoint-marker-resting {
  visibility: hidden;
  opacity: 0;
}

.route-endpoint-marker.has-hover-landmark:hover .endpoint-marker-landmark-hover {
  visibility: visible;
  opacity: 1;
}

.route-endpoint-marker-frame {
  position: relative;
  isolation: isolate;
  display: block;
  overflow: visible;
  filter: drop-shadow(0 2px 5px rgba(31, 41, 51, 0.28));
}

.route-endpoint-marker-svg {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  overflow: visible;
}

.route-endpoint-marker-image-layer {
  position: absolute;
  z-index: 20;
  display: block;
  overflow: visible;
  pointer-events: none;
}

.route-endpoint-marker-frame.is-flashing {
  animation: endpoint-marker-invert 220ms ease-out;
}

.route-endpoint-marker-frame.is-selected {
  filter:
    drop-shadow(0 0 0 rgba(255, 255, 255, 0))
    drop-shadow(0 0 4px rgba(255, 255, 255, 0.98))
    drop-shadow(0 0 8px rgba(20, 67, 163, 0.86));
}

.route-endpoint-marker-glow {
  opacity: 0.82;
  filter: blur(0.35px);
}

.route-playback-icon {
  border: 0;
  background: transparent;
}

.route-playback-icon.is-hidden {
  display: none;
}

.panel-footer-theme .users-device-preview-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 5px; align-items: center; min-width: 0; }
.panel-footer-theme .users-device-preview-toolbar > span { display: flex; justify-content: space-between; gap: 5px; color: var(--muted); font-size: .65rem; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.panel-footer-theme .users-device-preview-toolbar select { grid-column: 1 / -1; min-width: 0; min-height: 30px; }
.panel-footer-theme .users-device-preview-status { font-size: .62rem; color: var(--muted); white-space: nowrap; letter-spacing: 0; text-transform: none; }
.show-map-bounds-toggle { display: flex; gap: 4px; align-items: center; font-size: .66rem; font-weight: 850; line-height: 1.05; white-space: nowrap; }
.show-map-bounds-toggle input { margin: 0; }

.journey-overview-label-icon {
  background: transparent;
  border: 0;
}

.journey-overview-label {
  width: max-content;
  max-width: 190px;
  min-height: 30px;
  padding: 6px 11px;
  border: 2px solid color-mix(in srgb, var(--ink) 72%, #fff);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 94%, #fff);
  color: var(--ink);
  box-shadow: 0 2px 9px rgb(20 29 39 / 0.24);
  font: 850 0.78rem/1 var(--ui-font, system-ui, sans-serif);
  letter-spacing: .02em;
  cursor: pointer;
  pointer-events: auto;
}

.journey-overview-label:hover,
.journey-overview-label:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 64%, transparent);
  outline-offset: 2px;
}

.route-playback-icon-frame {
  position: relative;
  display: grid;
  place-items: center;
  isolation: isolate;
  overflow: visible;
  filter: drop-shadow(0 2px 6px rgb(17 24 39 / 0.32));
  color: #fffdf8;
}

.route-playback-icon-shape {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  overflow: visible;
  filter: drop-shadow(0 2px 4px rgb(17 24 39 / 0.28));
}

.route-playback-icon-image-strokes {
  position: absolute;
  inset: 0;
  z-index: 18;
  display: block;
  overflow: visible;
  pointer-events: none;
}

.route-playback-icon-image-fill {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  overflow: visible;
  pointer-events: none;
}

.route-playback-icon-image-composite {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: block;
  overflow: visible;
  pointer-events: none;
}

.route-playback-icon-image {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  transform: translateZ(0);
}

.route-playback-icon-content {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.route-playback-icon .material-symbols-rounded {
  font-size: clamp(13px, 62%, 34px);
  line-height: 1;
  transform: rotate(90deg);
}

.route-animation-icon-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
  align-items: stretch;
  margin-top: 0;
}

.route-animation-icon-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  align-content: start;
}

.route-animation-icon-picker {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 8px;
  margin-top: 0;
}

.marker-controls-section .route-animation-icon-picker {
  grid-template-columns: minmax(0, 1fr);
}

.marker-controls-section .marker-preview {
  justify-self: center;
}

.route-animation-icon-actions .file-control,
.route-animation-icon-actions .text-control,
.route-animation-icon-actions .route-animation-export-button {
  margin: 0;
  width: 100%;
  justify-self: start;
}

.route-animation-icon-actions .file-control {
  grid-column: 1 / -1;
  max-width: 240px;
}

.route-animation-icon-actions .text-control {
  gap: 3px;
  min-width: 0;
}

.route-animation-icon-actions .route-animation-export-button {
  align-self: end;
  width: auto;
  min-width: 132px;
  white-space: nowrap;
}

.route-animation-export-button {
  width: auto;
  margin: 0;
  min-height: 34px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-weight: 850;
  cursor: pointer;
}

.route-animation-export-button:hover:not(:disabled) {
  border-color: var(--accent);
  box-shadow: 0 2px 6px rgb(17 24 39 / 0.14);
}

.route-animation-export-button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.route-animation-icon-preview-wrap {
  display: grid;
  place-items: center;
  min-height: 116px;
  padding: 13px;
  border: 1px solid color-mix(in srgb, var(--line), transparent 18%);
  border-radius: 9px;
  background:
    linear-gradient(45deg, color-mix(in srgb, var(--surface), #fff 18%) 25%, transparent 25% 75%, color-mix(in srgb, var(--surface), #fff 18%) 75%),
    linear-gradient(45deg, color-mix(in srgb, var(--surface), #fff 18%) 25%, transparent 25% 75%, color-mix(in srgb, var(--surface), #fff 18%) 75%);
  background-color: color-mix(in srgb, var(--panel), var(--surface) 42%);
  background-position: 0 0, 8px 8px;
  background-size: 16px 16px;
  overflow: visible;
  cursor: context-menu;
}

.secondary-preview-source,
.route-animation-icon-preview-wrap.secondary-preview-source {
  display: none;
}

.route-animation-icon-preview {
  position: relative;
  display: grid;
  place-items: center;
  width: 132px;
  height: 104px;
  overflow: visible;
}

.position-nudge-pad {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  opacity: 0;
  transition: opacity 140ms ease;
}

.route-animation-icon-preview-wrap:hover .position-nudge-pad,
.route-animation-icon-preview:hover .position-nudge-pad,
.marker-preview:hover .position-nudge-pad,
.landmark-preview:hover .position-nudge-pad,
.landmark-tile:hover .position-nudge-pad,
.default-landmark-tile:hover .position-nudge-pad,
.position-nudge-pad:focus-within {
  opacity: 1;
}

.position-nudge-arrow {
  position: absolute;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  min-height: 0;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--control), #fff 30%);
  border-radius: 999px;
  background: rgb(255 253 248 / 0.86);
  color: var(--control);
  font-size: 0.62rem;
  font-weight: 950;
  line-height: 1;
  box-shadow: 0 2px 6px rgb(31 41 51 / 0.2);
  cursor: pointer;
  pointer-events: auto;
}

.position-nudge-top {
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
}

.position-nudge-right {
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
}

.position-nudge-bottom {
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
}

.position-nudge-left {
  top: 50%;
  left: 4px;
  transform: translateY(-50%);
}

.marker-preview,
.landmark-tile {
  cursor: context-menu;
}

.route-animation-icon-section .toggle-button:has(#routeAnimationIconEnabled) {
  border-color: transparent;
  background: transparent;
  color: var(--ink);
  padding-inline: 0;
}

.route-animation-icon-section .toggle-button:has(#routeAnimationIconEnabled:checked) {
  border-color: transparent;
  background: transparent;
  color: var(--ink);
}

.route-animation-icon-colors {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.shape-layer-toggle {
  justify-content: start;
  min-height: 32px;
}

.route-animation-icon-colors label {
  display: grid;
  grid-template-columns: auto 34px;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
}

.route-animation-icon-colors label:has(select) {
  grid-template-columns: auto minmax(0, 1fr);
}

.route-animation-icon-colors .route-animation-fill-toggle {
  grid-template-columns: auto minmax(0, 1fr);
  justify-content: start;
}

.route-animation-icon-colors .route-animation-fill-toggle input {
  width: 16px;
  height: 16px;
  accent-color: var(--route);
}

.route-animation-icon-section .marker-stroke-list.is-disabled {
  opacity: 0.48;
  filter: grayscale(0.35);
}

.route-animation-icon-colors input[type="color"] {
  width: 34px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
}

@keyframes endpoint-marker-invert {
  0% {
    filter: invert(1) contrast(1.35) brightness(1.08);
  }
  100% {
    filter: invert(0) contrast(1) brightness(1);
  }
}

.zone-modify-map-prompt {
  position: absolute;
  top: 12px;
  left: 50%;
  z-index: 825;
  transform: translateX(-50%);
  padding: 7px 12px;
  border: 1px solid color-mix(in srgb, var(--control), #fff 32%);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel), #fff 8%);
  box-shadow: 0 10px 24px rgba(31, 41, 51, 0.22);
  color: var(--control);
  font-size: 0.82rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  pointer-events: none;
}

.usage-overlay {
  position: absolute;
  right: 10px;
  bottom: 34px;
  z-index: 1200;
  max-width: min(520px, calc(100% - 24px));
  padding: 6px 9px;
  border: 1px solid rgb(17 24 39 / 0.42);
  border-radius: 7px;
  background: rgb(255 253 248 / 0.92);
  box-shadow:
    0 0 0 1px rgb(255 253 248 / 0.7),
    0 4px 12px rgb(17 24 39 / 0.28);
  color: #111827;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1.15;
  pointer-events: none;
  backdrop-filter: blur(3px);
}

.zone-modify-map-prompt[hidden] {
  display: none;
}

.trip-export-dialog {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(31, 41, 51, 0.36);
}

.trip-export-dialog[hidden] {
  display: none;
}

.trip-export-card {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  width: min(440px, 100%);
  max-height: min(620px, calc(100vh - 36px));
  border: 1px solid color-mix(in srgb, var(--line), var(--ink) 18%);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel), #fff 8%);
  box-shadow: 0 22px 56px rgba(31, 41, 51, 0.28);
}

.trip-export-head {
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--line);
}

.trip-export-format {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0;
  padding: 10px 16px;
  border: 0;
  border-bottom: 1px solid var(--line);
}

.trip-export-format legend {
  padding: 0;
  margin-right: 4px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.trip-export-format label {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface), var(--panel) 38%);
  font-weight: 800;
  cursor: pointer;
}

.trip-export-list {
  display: grid;
  gap: 7px;
  min-height: 120px;
  padding: 12px 16px;
  overflow: auto;
}

.trip-export-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 36px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface), var(--panel) 42%);
  cursor: pointer;
}

.trip-export-option input {
  width: 16px;
  height: 16px;
}

.trip-export-option span {
  overflow-wrap: anywhere;
  font-size: 0.88rem;
  font-weight: 700;
}

.route-import-card {
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.route-import-options {
  display: grid;
  gap: 10px;
  padding: 12px 16px;
}

.trip-export-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 12px 16px 14px;
  border-top: 1px solid var(--line);
}

.trip-export-actions button {
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid var(--control);
  border-radius: 8px;
  background: var(--control);
  color: var(--control-text);
  font-weight: 800;
  cursor: pointer;
}

.trip-export-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.landmark-default-card {
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  width: min(620px, calc(100vw - 32px));
  max-width: 620px;
  max-height: min(760px, calc(100vh - 32px));
}

.save-all-card {
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  max-width: 480px;
}

.save-all-note {
  margin: 10px 16px 2px;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.35;
}

.save-all-options {
  margin-top: 2px;
}

.save-all-card .trip-export-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.landmark-default-bulk-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 10px 16px 0;
}

.landmark-default-bulk-actions button {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface), #fff 24%);
  color: var(--ink);
  font-weight: 850;
}

.landmark-default-options {
  display: grid;
  gap: 8px;
  margin: 10px 16px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
}

.landmark-default-options legend {
  padding: 0 5px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.landmark-default-options label {
  display: flex;
  gap: 8px;
  align-items: center;
  font-weight: 750;
}

.landmark-default-target-options {
  min-height: 0;
  overflow: auto;
}

.landmark-default-target-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 8px;
}

.landmark-default-target-actions button {
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: color-mix(in srgb, var(--surface), #fff 20%);
  color: var(--ink);
  font-weight: 800;
}

.landmark-default-targets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 12px;
}

.landmark-default-targets label {
  min-width: 0;
}

.landmark-default-targets span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.landmark-global-size-control {
  grid-column: 1 / -1;
}

.trip-create-row input,
.trips-panel select,
.trips-panel textarea {
  width: 100%;
  min-height: 34px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffdf8;
  color: var(--ink);
  font: inherit;
  font-weight: 700;
}

.trips-panel input.required-missing {
  border-color: #b42318;
  background: #fff4f2;
  box-shadow: 0 0 0 1px #b42318;
}

.trips-panel input.required-missing::placeholder {
  color: #b42318;
  font-weight: 900;
  opacity: 1;
}

.trips-panel textarea {
  resize: vertical;
}

.trips-panel button {
  min-height: 34px;
  padding: 6px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 800;
  cursor: pointer;
}

.trips-panel button:disabled,
.trips-panel input:disabled,
.trips-panel textarea:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.trips-panel .primary-action {
  border-color: var(--control);
  background: var(--control);
  color: var(--control-text);
}

.trips-panel .danger-action {
  border-color: color-mix(in srgb, #9f2d1e, var(--line) 35%);
  color: #8f281c;
}

.address-route-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.field-label-inline {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  min-height: 18px;
}

.field-label-inline > label:first-child {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.inline-start-toggle {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  color: var(--ink);
  font-size: 0.68rem;
  font-weight: 700;
  cursor: pointer;
}

.inline-start-toggle[hidden] {
  display: none;
}

.inline-start-toggle input {
  width: 13px;
  height: 13px;
  margin: 0;
  accent-color: var(--control);
}

.route-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.route-divider::before,
.route-divider::after {
  content: "";
  height: 1px;
  background: var(--line);
}

.route-file-control {
  min-height: 38px;
}

.route-service-note,
.trip-status {
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.4;
}

.trip-status {
  min-height: 20px;
  padding: 0 4px;
  font-weight: 800;
}

.trip-status.is-error {
  color: #9f2d1e;
}

.trip-day-list,
.trip-media-list {
  display: grid;
  gap: 0;
}

.trip-day-button {
  border-radius: 0;
}

.trip-day-list > .trip-day-button:first-child {
  border-radius: 7px 7px 0 0;
}

.trip-day-list > .trip-day-button:last-child {
  border-radius: 0 0 7px 7px;
}

.journey-break-row {
  display: grid;
  grid-template-columns: minmax(12px, 1fr) auto minmax(12px, 1fr);
  align-items: center;
  gap: 6px;
  min-height: 18px;
  color: var(--muted);
  font-size: 0.58rem;
  line-height: 1;
  cursor: grab;
}

.journey-break-row > span {
  height: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--control), var(--line) 32%);
}

.journey-break-row > strong {
  max-width: 58%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.journey-break-row:active {
  cursor: grabbing;
}

.journey-break-row.is-fixed {
  cursor: default;
}

.leaflet-journey-overview-route {
  cursor: pointer;
  transition: stroke-width 140ms ease, stroke-opacity 140ms ease;
}

.journey-overview-tooltip {
  border: 1px solid color-mix(in srgb, var(--line), #fff 35%);
  border-radius: 7px;
  background: color-mix(in srgb, var(--panel), #fff 8%);
  box-shadow: 0 3px 12px rgb(0 0 0 / 0.22);
  color: var(--ink);
  font-weight: 800;
}

.trip-stop-button.is-break-drop-target {
  box-shadow: inset 0 -4px 0 var(--accent);
}

.trip-day-list-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: stretch;
}

.trip-day-list-toolbar .toggle-button {
  min-width: 0;
}

.trip-day-list-mode {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 5px;
  padding-left: 8px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.trip-day-list-mode select {
  min-width: 0;
  width: auto;
}

.trip-day-list.is-scrollable {
  max-height: min(42vh, 330px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 3px;
  scrollbar-gutter: stable;
  resize: vertical;
  min-height: 118px;
}

.trip-day-list.is-scrollable::after {
  content: "=\\A=";
  position: sticky;
  display: block;
  bottom: 0;
  width: 100%;
  height: 14px;
  margin-top: -14px;
  color: var(--muted);
  font-weight: 950;
  font-size: .66rem;
  line-height: .32rem;
  text-align: center;
  white-space: pre;
  pointer-events: none;
  background: linear-gradient(transparent, color-mix(in srgb, var(--panel), transparent 10%));
}

.trip-compact-selector {
  width: 100%;
  min-height: 34px;
}

.media-target-control,
.media-numbering-control {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.media-order-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface), var(--panel) 42%);
  color: var(--ink);
  font-size: 0.76rem;
  font-weight: 750;
  cursor: pointer;
}

.media-order-toggle input {
  margin: 0;
  accent-color: var(--control);
}

.landmarks-section {
  display: grid;
  gap: 8px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--line), var(--ink) 14%);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface), #ffffff 26%);
}

.landmark-global-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 7px;
  align-items: end;
}

.journey-landmark-panel {
  gap: 6px;
}

.journey-landmark-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.journey-landmark-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 5px 7px;
  text-align: left;
}

.journey-landmark-card > span:last-child {
  display: grid;
  min-width: 0;
}

.journey-landmark-card small {
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.journey-landmark-card-preview {
  position: relative;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  overflow: visible;
}

.journey-landmark-card-preview > * {
  position: absolute;
  inset: 0;
}

.landmark-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
  gap: 10px 7px;
}

.landmark-image-dialog {
  z-index: 1800;
}

.landmark-image-card {
  width: min(1040px, calc(100vw - 32px));
  max-height: min(820px, calc(100vh - 32px));
  overflow: hidden;
}

.landmark-image-source-actions,
.landmark-catalog-search,
.landmark-catalog-foot {
  display: flex;
  gap: 10px;
  align-items: center;
}

.landmark-image-source-actions span,
.landmark-catalog-foot {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 650;
}

.landmark-catalog-search .text-control {
  flex: 1 1 auto;
  margin: 0;
}

.landmark-catalog-search > button {
  align-self: end;
}

.landmark-catalog-results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px;
  min-height: 130px;
  max-height: min(54vh, 560px);
  padding: 2px;
  overflow: auto;
}

.landmark-catalog-card {
  display: grid;
  grid-template-rows: 150px minmax(0, 1fr);
  gap: 7px;
  min-width: 0;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
}

.landmark-catalog-card > img {
  width: 100%;
  height: 150px;
  border-radius: 6px;
  object-fit: contain;
  background: color-mix(in srgb, var(--surface), #000 5%);
}

.landmark-catalog-card > div {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.landmark-catalog-card strong,
.landmark-catalog-card span {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
}

.landmark-catalog-card strong {
  -webkit-line-clamp: 2;
  color: var(--ink);
  font-size: 0.78rem;
  line-height: 1.15;
}

.landmark-catalog-card span {
  -webkit-line-clamp: 2;
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.2;
}

.landmark-catalog-card > div > div {
  display: flex;
  gap: 7px;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
}

.landmark-catalog-foot {
  justify-content: space-between;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

@media (max-width: 680px) {
  .landmark-image-source-actions,
  .landmark-catalog-search,
  .landmark-catalog-foot {
    align-items: stretch;
    flex-direction: column;
  }

  .landmark-catalog-results {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }
}

.default-landmark-tile {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 86px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--line), var(--control) 22%);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface), #fff 32%);
  cursor: pointer;
}

.default-landmark-tile.is-selected {
  border-color: var(--control);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--control), transparent 55%);
}

.default-landmark-tile-preview {
  display: grid;
  place-items: center;
  min-width: 0;
  height: 70px;
}

.default-landmark-tile-preview .route-endpoint-marker-frame {
  transform: scale(0.82);
}

.default-landmark-tile-text {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.default-landmark-tile-text strong {
  color: var(--ink);
  font-size: 0.92rem;
  line-height: 1.05;
}

.default-landmark-tile-text span {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 650;
  line-height: 1.25;
}

.landmark-tile {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 1px;
  aspect-ratio: 0.78;
  min-width: 0;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 9px;
  overflow: visible;
  background:
    linear-gradient(45deg, rgba(31, 41, 51, 0.05) 25%, transparent 25% 75%, rgba(31, 41, 51, 0.05) 75%),
    linear-gradient(45deg, rgba(31, 41, 51, 0.05) 25%, transparent 25% 75%, rgba(31, 41, 51, 0.05) 75%),
    var(--surface);
  background-position: 0 0, 8px 8px;
  background-size: 16px 16px;
  cursor: pointer;
}

.landmark-tile.is-selected {
  border-color: var(--control);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--control), transparent 45%);
}

.landmark-tile:hover,
.landmark-tile:focus-visible {
  border-color: var(--control);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--control), transparent 70%);
  outline: 0;
}

.landmark-tile-name {
  display: grid;
  justify-items: center;
  min-width: 0;
  max-width: 100%;
  padding: 1px 4px 2px;
  border-radius: 5px;
  background: rgb(255 255 255 / 0.74);
  color: #172033;
  line-height: 1;
  text-align: center;
}

.landmark-town-name {
  max-width: 100%;
  font-size: 0.62rem;
  font-weight: 550;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.landmark-state-abbr {
  max-width: 100%;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.landmark-tile img {
  align-self: end;
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: 8px;
  object-fit: contain;
}

.landmark-save-icon {
  position: absolute;
  top: -10%;
  right: -10%;
  z-index: 4;
  width: 25%;
  aspect-ratio: 1;
  min-width: 16px;
  border: 1px solid color-mix(in srgb, var(--control), #000 18%);
  border-radius: 4px;
  background:
    linear-gradient(var(--surface) 0 28%, transparent 28%),
    linear-gradient(90deg, transparent 0 58%, color-mix(in srgb, var(--ink), transparent 22%) 58% 78%, transparent 78%),
    var(--control);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.22);
}

.landmark-save-icon::after {
  content: "";
  position: absolute;
  left: 24%;
  right: 24%;
  bottom: 13%;
  height: 28%;
  border-radius: 2px;
  background: var(--surface);
}

.landmark-selected-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
}

.landmark-preview {
  min-height: 118px;
}

.marker-preview {
  min-height: 96px;
}

.landmark-preview-icon {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

.shape-heading-inline {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.shape-heading-inline input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--route);
}

.landmark-style-controls {
  display: grid;
  gap: 12px;
}

.landmark-scope-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--line), transparent 18%);
}

.landmark-scope-controls .toggle-button,
.landmark-scope-controls .text-control,
.landmark-scope-controls button {
  min-width: 0;
}

.landmark-scope-controls .toggle-button {
  grid-column: 1 / -1;
}

.trip-day-button {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
}

.trip-day-button strong,
.trip-day-button span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trip-day-button span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  text-align: right;
}

.trip-day-button[aria-pressed="true"] {
  border-color: var(--control);
  background: color-mix(in srgb, var(--control), var(--surface) 82%);
}

.trip-media-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  transition: opacity 120ms ease, transform 120ms ease;
}

.trip-media-row.is-manual-order {
  grid-template-columns: 28px minmax(0, 1fr) auto;
}

.trip-media-row.is-dragging {
  z-index: 2;
  opacity: 0.58;
  transform: scale(0.99);
}

.trip-media-row-actions {
  display: grid;
  gap: 5px;
  align-content: center;
}

.trip-media-reload {
  display: grid;
  place-items: center;
  min-height: 34px;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 800;
  text-align: center;
  cursor: pointer;
}

.trip-media-reload:hover {
  border-color: var(--control);
}

.trip-media-reload input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.trip-media-drag-handle {
  display: grid;
  place-items: center;
  min-width: 0;
  padding: 0;
  cursor: grab;
  touch-action: none;
}

.trip-media-drag-handle[hidden] {
  display: none;
}

.trip-media-drag-handle.is-dragging {
  cursor: grabbing;
}

.trip-media-drag-handle span,
.trip-media-drag-handle span::before,
.trip-media-drag-handle span::after {
  display: block;
  width: 14px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}

.trip-media-drag-handle span {
  position: relative;
}

.trip-media-drag-handle span::before,
.trip-media-drag-handle span::after {
  position: absolute;
  left: 0;
  content: "";
}

.trip-media-drag-handle span::before {
  top: -5px;
}

.trip-media-drag-handle span::after {
  top: 5px;
}

.trip-media-open {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  overflow: hidden;
  text-align: left;
}

.trip-media-open[aria-pressed="true"] {
  border-color: var(--control);
  background: color-mix(in srgb, var(--control), var(--surface) 84%);
}

.trip-media-list-thumb {
  display: grid;
  place-items: center;
  width: 38px;
  height: 34px;
  overflow: hidden;
  border-radius: 7px;
  background: var(--media-pin-color, var(--control));
  color: #fff;
  font-size: 1rem;
}

.trip-media-list-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.trip-media-open-copy {
  min-width: 0;
}

.trip-media-open-copy strong,
.trip-media-open-copy span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trip-media-open-copy span {
  color: var(--muted);
  font-size: 0.68rem;
}

.media-blog-form,
.media-location-editor {
  display: grid;
  gap: 7px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface), var(--panel) 42%);
}

.media-blog-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.media-blog-form input.is-modified,
.media-blog-form textarea.is-modified {
  border-color: #7aa7c7;
  background: #eaf5fc;
  box-shadow: inset 0 0 0 1px rgb(122 167 199 / 0.28);
}

.media-pin-options {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr);
  gap: 6px;
  align-items: end;
}

.media-thumbnail-options {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 7px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: color-mix(in srgb, var(--surface), var(--panel) 24%);
}

.media-thumbnail-preview {
  display: grid;
  place-items: center;
  width: 48px;
  height: 38px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: #fff;
  background: #313b48;
  font-weight: 900;
}

.media-thumbnail-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-thumbnail-copy {
  display: grid;
  min-width: 0;
  line-height: 1.2;
}

.media-thumbnail-copy span {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.media-thumbnail-upload {
  position: relative;
  display: inline-grid;
  place-items: center;
  min-height: 32px;
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--control);
  font-weight: 800;
  cursor: pointer;
}

.media-thumbnail-upload input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

@media (max-width: 720px) {
  .media-thumbnail-options {
    grid-template-columns: 48px minmax(0, 1fr);
  }
}

.media-pin-options input[type="color"] {
  width: 100%;
  height: 34px;
  min-height: 34px;
  padding: 3px;
  cursor: pointer;
}

.media-location-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.trip-media-preview img {
  display: block;
  width: 100%;
  max-height: 260px;
  object-fit: contain;
  border-radius: 8px;
  background: #111;
}

.trip-media-preview audio,
.trip-media-preview video {
  display: block;
  width: 100%;
  max-height: 260px;
  border-radius: 8px;
  background: #111;
}

.trip-media-preview article {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  white-space: pre-wrap;
}

.media-pin-marker {
  --media-pin-color: #2f6fbb;
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 3px solid #fffdf8;
  border-radius: 12px 12px 12px 3px;
  background: var(--media-pin-color);
  box-shadow: 0 3px 10px rgb(17 24 39 / 0.38);
  color: #fff;
  font-size: 1.15rem;
  transform: rotate(-45deg);
  overflow: hidden;
}

.media-pin-marker > * {
  transform: rotate(45deg);
}

.media-pin-marker img {
  position: absolute;
  inset: -22%;
  width: 144%;
  height: 144%;
  max-width: none;
  border-radius: 0;
  object-fit: cover;
  pointer-events: none;
}

.media-pin-marker.media-pin-style-slot-1 {
  border-radius: 50% 50% 50% 3px;
}

.media-pin-marker.media-pin-style-slot-2 {
  border-width: 5px;
  box-shadow: 0 0 0 2px var(--media-pin-color), 0 3px 10px rgb(17 24 39 / 0.38);
}

.media-pin-icon.leaflet-marker-draggable {
  cursor: grab;
}

.media-pin-icon.leaflet-marker-draggable.leaflet-drag-target {
  cursor: grabbing;
}

.map-canvas.is-placing-media-pin {
  cursor: crosshair;
}

.route-theme-section {
  position: fixed;
  top: var(--theme-picker-top, 0);
  left: var(--theme-picker-left, 0);
  right: auto;
  bottom: var(--theme-picker-bottom, 0);
  z-index: 120;
  display: none;
  align-content: start;
  width: var(--theme-picker-width, 360px);
  max-height: none;
  overflow: auto;
  background: color-mix(in srgb, var(--panel), var(--surface) 28%);
  border-top: 8px solid color-mix(in srgb, var(--panel), var(--surface) 18%);
  box-shadow: 0 18px 46px rgba(31, 41, 51, 0.28);
  transform-origin: top left;
  animation: theme-picker-birth 260ms cubic-bezier(0.2, 0.85, 0.22, 1.12);
}

#panelElements > .route-theme-section {
  grid-column: 1 / -1;
}

#panelElements.theme-picker-open .route-theme-section {
  display: grid;
}

.route-theme-panel-head {
  position: sticky;
  top: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin: -17px -9px 0;
  padding: 17px 9px 8px;
  border-radius: 8px 8px 0 0;
  background: color-mix(in srgb, var(--panel), var(--surface) 18%);
  box-shadow: 0 1px 0 var(--line), 0 10px 18px color-mix(in srgb, var(--panel), transparent 28%);
}

#panelElements.theme-picker-closing .route-theme-section {
  display: grid;
  animation: theme-picker-unbirth 210ms cubic-bezier(0.42, 0, 0.7, 1) forwards;
}

#panelElements.theme-picker-closing .route-theme-panel-head button {
  animation: done-button-unbirth 150ms ease-in forwards;
}

@keyframes theme-picker-birth {
  0% {
    opacity: 0;
    transform: translateX(-18px) scaleX(0.08) rotateY(-18deg);
  }
  72% {
    opacity: 1;
    transform: translateX(7px) scaleX(1.02) rotateY(0);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scaleX(1) rotateY(0);
  }
}

@keyframes theme-picker-unbirth {
  0% {
    opacity: 1;
    transform: translateX(0) scaleX(1) rotateY(0);
  }
  28% {
    opacity: 1;
    transform: translateX(-6px) scaleX(1.01) rotateY(0);
  }
  100% {
    opacity: 0;
    transform: translateX(24px) scaleX(0.08) rotateY(18deg);
  }
}

@keyframes done-button-birth {
  from {
    opacity: 0;
    transform: translate(-10px, -38px) scale(0.2, 0.55);
  }
  to {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
}

@keyframes done-button-unbirth {
  from {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  to {
    opacity: 0;
    transform: translate(-10px, -38px) scale(0.2, 0.55);
  }
}

.theme-actions {
  display: grid;
}

.theme-actions button {
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 800;
  cursor: pointer;
}

.provider-status {
  min-height: 1.2em;
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.map-style-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

#panelElements .route-theme-grid {
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  align-items: stretch;
  grid-auto-rows: auto;
}

.route-theme-group-heading {
  grid-column: 1 / -1;
  margin: 8px 0 -2px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.map-style-card {
  position: relative;
  min-height: 132px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 28% 28%, rgba(255, 255, 255, 0.62), transparent 24%),
    repeating-radial-gradient(ellipse at 58% 54%, transparent 0 9px, rgba(31, 41, 51, var(--stadia-contours, 0.18)) 10px 11px, transparent 12px 18px),
    linear-gradient(135deg, var(--stadia-a), var(--stadia-b)),
    #f7f3eb;
  color: var(--ink);
  text-align: center;
  cursor: pointer;
}

.map-style-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(31, 41, 51, 0.12) 1px, transparent 1px),
    linear-gradient(rgba(31, 41, 51, 0.09) 1px, transparent 1px);
  background-size: 18px 18px;
  opacity: 0.18;
}

.map-style-card[aria-pressed="true"] {
  border-color: var(--control);
  box-shadow: inset 0 0 0 2px var(--control);
}

.map-style-card strong,
.map-style-card span {
  position: relative;
  z-index: 1;
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  padding: 3px 7px;
  border-radius: 6px;
  background: rgb(var(--stadia-card-text-bg-rgb) / var(--stadia-card-text-bg-opacity));
  color: color-mix(in srgb, var(--stadia-card-text), #111827 64%);
}

.map-style-card strong {
  margin-top: 28px;
  font-size: 1.06rem;
  line-height: 1.1;
  font-weight: 950;
}

.map-style-card span {
  margin-top: 4px;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.15;
}

.route-theme-grid .map-style-card {
  min-height: 108px;
}

#panelElements .route-theme-grid .map-style-card {
  min-height: 122px;
}

.route-theme-picker-actions {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.route-theme-picker-actions button {
  min-height: 28px;
  padding-inline: 8px;
  white-space: nowrap;
}

.theme-presets-section {
  display: grid;
  gap: 9px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.theme-presets-head { display: flex; gap: 10px; align-items: start; justify-content: space-between; }
.theme-presets-head p { margin: 3px 0 0; color: var(--muted); font-size: .78rem; font-weight: 700; }
.theme-presets-head button { flex: 0 0 auto; min-height: 32px; }
.theme-preset-display-controls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 8px; }
.theme-preset-display-controls > label { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 7px; min-width: 0; font-size: .78rem; font-weight: 800; }
.theme-preset-display-controls select { min-width: 0; }
.theme-preset-default-select { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 7px; align-items: center; font-size: .78rem; font-weight: 800; }
.theme-preset-default-select select { min-width: 0; }
.theme-preset-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.theme-preset-grid.is-scrollable { max-height: 210px; overflow: auto; padding-right: 3px; }
.theme-preset-grid.is-expanded { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.theme-preset-item { display: grid; gap: 7px; min-height: 94px; padding: 9px; border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--surface), var(--panel) 30%); cursor: grab; }
.theme-preset-item:active { cursor: grabbing; }
.theme-preset-item strong { font-size: .88rem; overflow-wrap: anywhere; }
.theme-preset-item span { color: var(--muted); font-size: .74rem; font-weight: 700; }
.theme-preset-item div { display: flex; gap: 6px; margin-top: auto; }
.theme-preset-item button { flex: 1; min-height: 27px; font-size: .74rem; }
.route-theme-card.preset-drop-target { outline: 3px dashed var(--control); outline-offset: 2px; }
.theme-preset-card { width: min(560px, calc(100vw - 32px)); }
.theme-preset-intro { margin: 8px 0; color: var(--muted); font-size: .86rem; }
.theme-preset-categories { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin: 12px 0; }
.theme-preset-categories label { display: flex; gap: 7px; align-items: center; min-height: 32px; padding: 5px 7px; border: 1px solid var(--line); border-radius: 7px; font-size: .84rem; font-weight: 800; }
.theme-preset-categories small { margin-left: auto; color: var(--muted); font-weight: 700; }
.theme-preset-actions #themePresetDelete[hidden], .theme-preset-actions #themePresetApply[hidden], .theme-preset-actions #themePresetSave[hidden] { display: none; }

.route-theme-card-add {
  --stadia-a: #f4ead6;
  --stadia-b: #d8d0c2;
  --stadia-contours: 0.12;
}

.range-control input {
  width: 100%;
}

.toggle-button {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 30px;
  padding: 5px 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7f3eb;
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.1;
  cursor: pointer;
}

.toggle-button:has(input:checked) {
  border-color: var(--control);
  background: var(--control);
  color: var(--control-text);
}

.toggle-button input {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  margin: 0;
  accent-color: var(--route);
}

.element-control {
  --element-radius: 19px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 25px 59px;
  width: 84px;
  height: 84px;
  max-width: 84px;
  min-height: 84px;
  min-width: 0;
  justify-self: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--element-radius);
  background: #f7f3eb;
  transition:
    border-radius 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.element-control::after {
  content: "";
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  left: 0;
  height: 15px;
  border-radius: 0 0 calc(var(--element-radius) - 1px) calc(var(--element-radius) - 1px);
  background: var(--swatch, transparent);
  pointer-events: none;
}

.element-control:has(.route-stack-control) {
  grid-template-rows: 25px 59px;
  min-height: 84px;
}

.element-control:has(.route-stack-control)::after {
  display: none;
}

.element-control:has(.route-stack-control) .element-select-button {
  padding-bottom: 28px;
}

.route-stack-control {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  height: 27px;
  padding: 2px 3px;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--swatch), var(--ink) 24%);
  border-radius: 0 0 calc(var(--element-radius) - 1px) calc(var(--element-radius) - 1px);
  background: var(--swatch, var(--control));
  color: var(--stack-label-color, #fff);
  font-size: 0.53rem;
  font-weight: 800;
  line-height: 1.05;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
}

.route-stack-control:hover,
.route-stack-control:focus-visible {
  filter: brightness(1.12);
}

.element-control:hover {
  border-radius: 22px;
  transform: translateY(-1px);
  border-color: var(--swatch, var(--control));
  box-shadow:
    0 0 0 2px var(--swatch, var(--control)),
    0 0 8px 3px color-mix(in srgb, var(--swatch, var(--control)), transparent 28%);
}

.element-control.is-selected {
  border-color: var(--control);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--control), transparent 62%);
}

.element-control.is-selected:hover {
  border-color: var(--swatch, var(--control));
  box-shadow:
    0 0 0 2px var(--swatch, var(--control)),
    0 0 8px 3px color-mix(in srgb, var(--swatch, var(--control)), transparent 28%);
}

.element-select-button {
  position: relative;
  z-index: 1;
  display: grid;
  grid-column: 1;
  grid-row: 2;
  place-items: center;
  min-width: 0;
  padding: 5px 5px 17px;
  border: 0;
  border-radius: 0 0 var(--element-radius) var(--element-radius);
  background: transparent;
  color: var(--ink);
  font-size: 0.69rem;
  font-weight: 600;
  line-height: 1.18;
  cursor: pointer;
}

.element-select-button:disabled {
  cursor: default;
}

.element-control:has(.element-select-button:disabled):hover {
  transform: none;
  border-color: var(--line);
  box-shadow: none;
}

.element-select-button span {
  display: block;
  overflow: visible;
  text-align: center;
  white-space: normal;
}

.element-control.is-selected .element-select-button {
  background: color-mix(in srgb, var(--control), #fff 84%);
  color: var(--control);
}

.element-toggle-zone {
  position: relative;
  z-index: 2;
  display: grid;
  grid-column: 1;
  grid-row: 1;
  place-items: center;
  align-self: stretch;
  margin: 0 4px;
  border-radius: var(--element-radius) var(--element-radius) 0 0;
  background: color-mix(in srgb, var(--surface), var(--control) 8%);
  cursor: pointer;
}

.element-toggle-zone::before {
  content: "";
  position: absolute;
  right: 3px;
  bottom: 0;
  left: 3px;
  height: 1px;
  background: color-mix(in srgb, var(--line), var(--ink) 20%);
}

.element-toggle-zone input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.element-toggle-zone span {
  position: relative;
  width: 12px;
  height: 12px;
  border: 1.25px solid color-mix(in srgb, var(--line), var(--ink) 42%);
  border-radius: 3px;
  background: #fffdf8;
}

.element-toggle-zone input:checked + span {
  border-color: var(--route);
  background: var(--route);
}

.element-toggle-zone input:checked + span::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 3px;
  width: 4px;
  height: 7px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.element-toggle-zone:has(input:checked) {
  background: color-mix(in srgb, var(--control), #fff 78%);
}

.element-toggle-zone:has(input:focus-visible) {
  outline: 2px solid var(--control);
  outline-offset: -3px;
}

.overview-dead-zone-preview {
  mix-blend-mode: difference;
  filter: drop-shadow(0 0 2px #000) drop-shadow(0 0 2px #fff);
  pointer-events: none;
}

.help-tooltip {
  position: fixed;
  z-index: 2600;
  width: max-content;
  max-width: min(320px, calc(100vw - 24px));
  padding: 10px 12px;
  border: var(--help-tooltip-stroke-width, 2px) solid var(--help-tooltip-stroke-color, #087eae);
  border-radius: var(--help-tooltip-radius, 9px);
  background: color-mix(in srgb, var(--help-tooltip-color, #48c8ff), var(--panel) 74%);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--help-tooltip-color, #48c8ff), transparent 72%), var(--help-tooltip-glow, 0 0 transparent);
  color: var(--help-tooltip-text, #071923);
  font-size: 0.82rem;
  font-weight: 650;
  line-height: 1.4;
  white-space: normal;
  pointer-events: none;
}

.help-tooltip[hidden] {
  display: none;
}

.city-label {
  display: inline-block;
  padding: 2px 4px;
  border-radius: 4px;
  background: rgb(var(--label-bg-rgb, 255 255 255) / var(--label-bg-opacity, 0.86));
  box-shadow: 0 1px 4px rgba(31, 41, 51, 0.18);
  color: #25313d;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  transform-origin: center;
  text-shadow:
    0 var(--label-halo-width, 1px) 0 var(--label-halo),
    var(--label-halo-width, 1px) 0 0 var(--label-halo),
    0 calc(var(--label-halo-width, 1px) * -1) 0 var(--label-halo),
    calc(var(--label-halo-width, 1px) * -1) 0 0 var(--label-halo),
    var(--label-halo-width, 1px) var(--label-halo-width, 1px) 0 var(--label-halo),
    calc(var(--label-halo-width, 1px) * -1) var(--label-halo-width, 1px) 0 var(--label-halo),
    var(--label-halo-width, 1px) calc(var(--label-halo-width, 1px) * -1) 0 var(--label-halo),
    calc(var(--label-halo-width, 1px) * -1) calc(var(--label-halo-width, 1px) * -1) 0 var(--label-halo),
    0 2px 4px rgba(31, 41, 51, 0.22);
  white-space: nowrap;
}

.city-label.small-town {
  color: #5d6874;
  font-size: 0.7rem;
  font-weight: 600;
}

.city-label.capital {
  color: #7f2c1e;
}

.route-zone-label {
  display: block;
  width: 124px;
  padding: 6px 7px;
  border: 2px solid color-mix(in srgb, var(--zone-color, #25313d), #fff 55%);
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.98);
  box-shadow:
    0 0 0 2px rgba(255, 253, 248, 0.76),
    0 10px 26px rgba(31, 41, 51, 0.22);
  pointer-events: none;
}

.route-zone-label-icon {
  border: 0;
  background: transparent;
}

.route-zone-label strong,
.route-zone-label span {
  display: block;
}

.route-zone-label strong {
  color: var(--zone-color, #13202c);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.route-zone-label span {
  margin-top: 3px;
  color: color-mix(in srgb, var(--zone-color, #24435f), #13202c 32%);
  font-size: 0.62rem;
  line-height: 1.18;
  font-weight: 800;
}

.route-waypoint-edit-icon {
  border: 0;
  background: transparent;
}

.route-waypoint-edit-icon span {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 2px solid rgb(255 253 248 / 0.88);
  border-radius: 50% 50% 50% 4px;
  background: rgb(37 49 61 / 0.68);
  color: rgb(255 253 248 / 0.92);
  box-shadow: 0 3px 10px rgb(31 41 51 / 0.22);
  font-size: 0.62rem;
  font-weight: 900;
}

.route-waypoint-popup {
  display: grid;
  gap: 8px;
  min-width: 170px;
}

.route-waypoint-popup p {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.route-waypoint-popup button {
  min-height: 32px;
  border: 1px solid color-mix(in srgb, #9f2d1e, var(--line) 35%);
  border-radius: 8px;
  background: #fff6f2;
  color: #7f2c1e;
  font-weight: 900;
  cursor: pointer;
}

.route-waypoint-manager {
  display: grid;
  gap: 5px;
  margin-top: 7px;
  padding-top: 7px;
  border-top: 2px solid color-mix(in srgb, var(--line), transparent 15%);
}

.route-waypoint-manager[hidden] { display: none; }

.route-waypoint-manager-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 0.7rem;
}

.route-waypoint-list { display: grid; gap: 3px; }

.route-waypoint-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 28px 28px 28px;
  align-items: center;
  gap: 3px;
}

.route-waypoint-row input,
.route-waypoint-row button { min-width: 0; min-height: 28px; }
.route-waypoint-row button { padding: 2px; }
.route-waypoint-handle { cursor: grab; text-align: center; font-size: 1rem; }

.topography-tiles {
  filter: grayscale(1) contrast(1.12);
}

.stadia-tiles {
  filter: var(--stadia-filter, none);
}

.style-panel {
  position: fixed;
  z-index: 10000;
  display: grid;
  gap: 8px;
  right: 10px;
  width: min(520px, calc(100vw - 20px));
  max-height: calc(100vh - 20px);
  overflow: auto;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffdf8;
  box-shadow: 0 18px 48px rgba(31, 41, 51, 0.24);
}

.style-panel[data-section-color] {
  border-color: color-mix(in srgb, var(--section-accent), var(--ink) 14%);
  border-left-width: 5px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--section-accent), transparent 84%), transparent 42%),
    var(--section-tint);
}

.style-twirl {
  display: grid;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel), var(--surface) 44%);
}

.style-twirl[open] {
  gap: 8px;
}

.style-twirl[hidden] {
  display: none;
}

.style-twirl summary {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}

.style-twirl summary.color-summary {
  display: flex;
  align-items: center;
  gap: 7px;
  list-style: none;
}

.style-twirl summary.color-summary::before {
  content: ">";
  flex: 0 0 auto;
  font-size: 0.7rem;
  transition: transform 150ms ease;
}

.style-twirl[open] summary.color-summary::before {
  transform: rotate(90deg);
}

.style-twirl summary.color-summary::-webkit-details-marker {
  display: none;
}

.color-summary .style-preview {
  flex: 1 1 auto;
  margin-left: 4px;
}

.style-twirl > *:not(summary) {
  margin-top: 8px;
}

.style-twirl > [hidden] {
  display: none !important;
}

.style-twirl summary.texture-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.texture-summary-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: none;
  letter-spacing: 0;
}

.texture-summary-toggle input {
  width: 15px;
  height: 15px;
}

.texture-compatibility-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
}

.texture-compatibility-row strong {
  color: var(--texture-compatibility-color, #111827);
  font-variant-numeric: tabular-nums;
}

.texture-compatibility-row button {
  min-height: 26px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 850;
  cursor: pointer;
}

.style-panel[hidden] {
  display: none;
}

.style-panel.inline-style-panel {
  position: static;
  z-index: auto;
  width: 100%;
  max-height: none;
  overflow: visible;
  box-shadow: none;
  background: transparent;
  padding: 0;
  border: 0;
}

.style-panel.inline-style-panel .style-panel-head {
  cursor: default;
}

.style-panel.inline-style-panel .style-panel-head button {
  display: none;
}

.style-panel.inline-style-panel > label {
  max-width: 360px;
}

.style-panel.inline-style-panel .style-twirl {
  align-content: start;
}

.style-panel.inline-style-panel .texture-choice-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.style-panel-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  cursor: grab;
}

.elements-style-drawer {
  position: absolute;
  top: 10px;
  right: 0;
  bottom: calc(var(--playback-dock-height) + 10px);
  z-index: 760;
  width: calc(clamp(300px, 29vw, 420px) + 58px);
  box-sizing: border-box;
  padding-right: 58px;
  background: color-mix(in srgb, var(--panel), #fff 14%);
  pointer-events: none;
  transform: translateX(calc(100% + 18px));
  transform-origin: right center;
}

.elements-style-drawer.is-open {
  pointer-events: auto;
  animation: elements-drawer-bounce-out 520ms cubic-bezier(0.18, 0.88, 0.24, 1.16) both;
}

.elements-style-drawer:not(.is-open):not([hidden]) {
  animation: elements-drawer-bounce-in 460ms cubic-bezier(0.42, 0, 0.72, 1) both;
}

.elements-style-drawer[hidden] {
  display: none;
}

.image-preview-drawer {
  position: absolute;
  top: 62px;
  right: 0;
  z-index: 755;
  width: clamp(190px, 18vw, 280px);
  min-height: 170px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px 0 0 10px;
  background: color-mix(in srgb, var(--panel), #fff 14%);
  box-shadow: -14px 10px 34px rgb(31 41 51 / 0.2);
  pointer-events: none;
  opacity: 0.45;
  transform: translateX(calc(100% + 18px)) scaleX(0.96);
  transform-origin: right center;
}

.image-preview-drawer.is-open:not(.is-collapsed) {
  pointer-events: auto;
  animation: elements-drawer-bounce-out 520ms cubic-bezier(0.18, 0.88, 0.24, 1.16) both;
}

.image-preview-drawer.is-collapsed:not([hidden]) {
  pointer-events: none;
  animation: elements-drawer-bounce-in 460ms cubic-bezier(0.42, 0, 0.72, 1) both;
}


.image-preview-drawer-body {
  display: grid;
  gap: 8px;
}

.image-preview-content {
  display: grid;
  gap: 10px;
  overflow: visible;
}

.secondary-image-preview-block {
  display: grid;
  gap: 5px;
}

.secondary-image-preview-title {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.secondary-image-preview-frame {
  min-height: 122px;
  padding: 10px;
}

.drawer-toggle-button {
  position: fixed;
  top: var(--secondary-drawer-toggle-top, 156px);
  left: var(--secondary-drawer-toggle-left, calc(100vw - 33vw));
  right: auto;
  /* Above secondary drawers, but still beneath the primary editor panel. */
  z-index: 1800;
  display: grid;
  place-items: center;
  width: 30px;
  height: 44px;
  min-height: 0;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--line), var(--control) 18%);
  border-right: 0;
  border-radius: 10px 0 0 10px;
  background: color-mix(in srgb, var(--panel), var(--surface) 38%);
  color: var(--ink);
  box-shadow:
    -7px 8px 16px rgb(31 41 51 / 0.16),
    inset 0 1px 0 rgb(255 255 255 / 0.72);
  cursor: pointer;
  transform: translateX(-100%);
}

.drawer-toggle-button[hidden] {
  display: none !important;
}

#toggleImagePreviewDrawer,
.image-preview-drawer .drawer-toggle-button {
  top: var(--secondary-drawer-toggle-top, 156px);
}

.elements-drawer-toggle-button,
.elements-style-drawer .drawer-toggle-button {
  top: var(--secondary-drawer-toggle-top, 156px);
}

/* The wheel is centered on the primary panel edge, allowing that panel to mask
   its right half. Only the yellow arrow rotates; the grey wheel stays still. */
.secondary-wheel-toggle {
  --drawer-arrow-turn: 0deg;
  --drawer-arrow-from: 0deg;
  --drawer-arrow-animation-to: var(--drawer-arrow-turn);
  --drawer-arrow-duration: 300ms;
  --secondary-wheel-size: 42px;
  width: var(--secondary-wheel-size);
  height: var(--secondary-wheel-size);
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  /* The SVG's right_align_to_main_UI_panel guide is x=427.81 in a 500px
     viewBox, so its guide—not the SVG box—sits on the primary panel edge. */
  transform: translateX(-85.562%);
}
.secondary-wheel-toggle.is-collapsed-toggle {
  transform: translateX(-85.562%);
}
.secondary-wheel-toggle:not(.is-collapsed-toggle) {
  --drawer-arrow-turn: 180deg;
}
.secondary-wheel-toggle.is-secondary-wheel-disabled {
  cursor: default;
  filter: grayscale(1);
  opacity: .38;
}

.map-media-workspace { display: grid; gap: 8px; }
.map-media-add-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; }
.map-media-add-grid button { min-height: 34px; padding: 4px; font-size: .68rem; }
.map-media-object-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.map-media-object-status { margin: 0; }
.media-manager-section .section-label { margin-bottom: 3px; }
@media (max-width: 880px) {
  .map-media-add-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .map-media-object-controls { grid-template-columns: 1fr; }
}
.drawer-wheel-arrow {
  display: block;
  width: var(--secondary-wheel-size);
  height: var(--secondary-wheel-size);
  overflow: visible;
}
.drawer-wheel-twirl-arrow {
  transform-box: view-box;
  /* rotate_point is x=190.76, y=250 in the 500 × 500 viewBox. */
  transform-origin: 38.152% 50%;
  transform: rotate(var(--drawer-arrow-turn));
}
.secondary-wheel-toggle.is-wheel-state-changing .drawer-wheel-twirl-arrow {
  animation: drawer-wheel-arrow-state-change var(--drawer-arrow-duration) cubic-bezier(.2, .8, .3, 1.28) both;
}
@keyframes drawer-wheel-arrow-state-change {
  from { transform: rotate(var(--drawer-arrow-from)); }
  to { transform: rotate(var(--drawer-arrow-animation-to)); }
}

.drawer-toggle-button span {
  display: block;
  font-size: 1.45rem;
  font-weight: 950;
  line-height: 1;
  transition: transform 260ms cubic-bezier(0.2, 0.8, 0.3, 1.28);
}

.drawer-toggle-button.is-collapsed-toggle span,
.image-preview-drawer.is-collapsed .drawer-toggle-button span {
  transform: rotate(180deg);
}

.elements-drawer-toggle-button span,
.elements-style-drawer .drawer-toggle-button span {
  transform: rotate(180deg);
}

.elements-drawer-toggle-button.is-collapsed-toggle span {
  transform: rotate(0deg);
}

body.user-site-mode .drawer-toggle-button {
  display: none !important;
}

.section-export-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid color-mix(in srgb, var(--line), transparent 28%);
}

.section-export-actions button,
.section-import-button {
  display: grid;
  place-items: center;
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid color-mix(in srgb, var(--control), #fff 48%);
  border-radius: 8px;
  background: color-mix(in srgb, var(--control), #fff 10%);
  color: var(--control-text);
  font-weight: 900;
  text-align: center;
  cursor: pointer;
}

/* Phase 2E.13: one leather surface and one rounded map viewport. */
body.user-site-mode .map-shell,
body.users-builder-mode .map-shell {
  grid-template-columns: minmax(0, 1fr);
  min-height: 100vh;
  padding: 0;
  background-color: var(--users-shell-leather-color, var(--leather-color));
  background-image: url("assets/textures/pebbled-leather-gray.png");
  background-repeat: repeat;
  background-size: var(--leather-texture-size);
  background-blend-mode: var(--leather-blend-mode);
}

body.user-site-mode .map-stage,
body.users-builder-mode .map-stage {
  min-height: 100vh;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background-color: var(--users-shell-leather-color, var(--leather-color));
  background-image: url("assets/textures/pebbled-leather-gray.png");
  background-repeat: repeat;
  background-size: var(--leather-texture-size);
  background-blend-mode: var(--leather-blend-mode);
}

body.user-site-mode .user-device-frame,
body.users-builder-mode .user-device-frame {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  opacity: 1;
}

body.user-site-mode .user-device-rail,
body.users-builder-mode .user-device-rail,
body.user-site-mode .user-device-screen-aperture,
body.users-builder-mode .user-device-screen-aperture,
body.user-site-mode #userFrameBuilderTools,
body.users-builder-mode #userFrameBuilderTools {
  display: none !important;
}

body.user-site-mode .map-canvas,
body.users-builder-mode .map-canvas {
  z-index: 781;
  border-radius: var(--user-screen-radius);
  clip-path: inset(
    var(--user-frame-edge-top)
    var(--user-frame-edge-right)
    var(--user-frame-edge-bottom)
    var(--user-frame-edge-left)
    round var(--user-screen-radius)
  );
  box-shadow: 0 2px 10px rgb(0 0 0 / 0.18);
}

body.user-site-mode #userSitePanelTop,
body.user-site-mode #userSitePanelLeft,
body.user-site-mode #userSitePanelRight,
body.user-site-mode #userSitePanelBottom,
body.users-builder-mode #userSitePanelTop,
body.users-builder-mode #userSitePanelLeft,
body.users-builder-mode #userSitePanelRight,
body.users-builder-mode #userSitePanelBottom,
body.user-site-mode .user-site-controls,
body.users-builder-mode .user-site-controls,
body.user-site-mode .user-site-section,
body.users-builder-mode .user-site-section,
body.user-site-mode .user-edge-blank-section,
body.users-builder-mode .user-edge-blank-section,
body.user-site-mode .user-builder-empty,
body.users-builder-mode .user-builder-empty,
body.user-site-mode .playback-panel,
body.users-builder-mode .playback-panel,
body.user-site-mode .day-edge-control,
body.users-builder-mode .day-edge-control,
body.user-site-mode .map-control-cluster,
body.users-builder-mode .map-control-cluster,
body.user-site-mode .map-feature-toolbar,
body.users-builder-mode .map-feature-toolbar,
body.user-site-mode #usView,
body.users-builder-mode #usView,
body.user-site-mode #keyboardOnlyToggle,
body.users-builder-mode #keyboardOnlyToggle,
body.user-site-mode #userMaterialControls,
body.users-builder-mode #userMaterialControls,
body.user-site-mode #userThemePanel,
body.users-builder-mode #userThemePanel,
body.user-site-mode #userMaterialPanel,
body.users-builder-mode #userMaterialPanel {
  display: none !important;
}

body.user-site-mode #siteModeToggle {
  display: inline-flex !important;
  position: absolute;
  z-index: 920;
  top: auto;
  left: auto;
  right: calc(var(--user-frame-edge-right) + 18px);
  bottom: calc(var(--user-frame-edge-bottom) + 18px);
  transform: none;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid rgb(255 255 255 / 0.34);
  border-radius: 999px;
  background: rgb(31 41 51 / 0.82);
  color: #fff;
  box-shadow: 0 3px 10px rgb(0 0 0 / 0.24);
}

body.public-site-build #siteModeToggle {
  display: none !important;
}

body.users-builder-mode #siteModeToggle {
  display: none !important;
}

body.users-builder-mode .map-shell {
  --users-builder-screen-left: calc(var(--user-device-margin) + var(--user-frame-edge-left));
  --users-builder-screen-top: calc(var(--user-device-margin) + var(--user-frame-edge-top));
  --users-builder-screen-bottom: calc(var(--user-device-margin) + var(--user-frame-edge-bottom));
  --users-builder-column-gap: 12px;
  --users-builder-column-width: calc((100vw - (var(--user-device-margin) * 2) - var(--user-frame-edge-left) - var(--user-frame-edge-right) - (var(--users-builder-column-gap) * 2)) / 3);
}

body.users-builder-mode .users-appearance-admin-panel,
body.users-builder-mode .users-staging-admin-panel,
body.users-builder-mode .map-shell > .panel {
  top: var(--users-builder-screen-top);
  bottom: var(--users-builder-screen-bottom);
  width: var(--users-builder-column-width);
  max-width: none;
  min-width: 0;
  max-height: none;
  overflow: auto;
  border-radius: 12px;
  box-shadow: 0 8px 18px rgb(0 0 0 / 0.2);
  transform: none;
}

body.users-builder-mode .map-shell > .panel {
  left: var(--users-builder-screen-left);
}

body.users-builder-mode .users-appearance-admin-panel {
  left: calc(var(--users-builder-screen-left) + var(--users-builder-column-width) + var(--users-builder-column-gap));
  right: auto;
  padding: 8px;
  opacity: 1;
}

body.users-builder-mode .users-staging-admin-panel {
  left: calc(var(--users-builder-screen-left) + (var(--users-builder-column-width) + var(--users-builder-column-gap)) * 2);
  right: auto;
  padding: 8px;
  opacity: 1;
}

body.users-builder-mode .map-shell > .panel {
  z-index: 1810;
}

body.users-builder-mode .users-appearance-admin-panel,
body.users-builder-mode .users-staging-admin-panel {
  z-index: 1811;
}

/* Phase 2E.14: the map element itself is the shared viewport. */
.map-stage {
  --user-map-viewport-top: var(--user-frame-edge-top);
  --user-map-viewport-right: var(--user-frame-edge-right);
  --user-map-viewport-bottom: var(--user-frame-edge-bottom);
  --user-map-viewport-left: var(--user-frame-edge-left);
  --user-map-viewport-radius: var(--user-screen-radius);
}

body.user-site-mode .map-stage,
body.users-builder-mode .map-stage {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.user-site-mode .map-canvas,
body.users-builder-mode .map-canvas {
  position: absolute;
  inset:
    var(--user-map-viewport-top)
    var(--user-map-viewport-right)
    var(--user-map-viewport-bottom)
    var(--user-map-viewport-left);
  width: auto !important;
  height: auto !important;
  border-radius: var(--user-map-viewport-radius);
  overflow: hidden;
  clip-path: none !important;
  box-shadow: 0 2px 10px rgb(0 0 0 / 0.18);
}

body.user-site-mode #siteModeToggle {
  right: calc(var(--user-map-viewport-right) + 18px);
  bottom: calc(var(--user-map-viewport-bottom) + 18px);
}

body.users-builder-mode {
  --users-admin-gap: 18px;
  --users-admin-top: calc(var(--user-frame-edge-top) + var(--users-admin-gap));
  --users-admin-right: calc(var(--user-frame-edge-right) + var(--users-admin-gap));
  --users-admin-bottom: calc(var(--user-frame-edge-bottom) + var(--users-admin-gap));
  --users-admin-left: calc(var(--user-frame-edge-left) + var(--users-admin-gap));
  --users-admin-column-width: calc(
    (100vw - var(--user-frame-edge-left) - var(--user-frame-edge-right) - (var(--users-admin-gap) * 4)) / 3
  );
}

body.users-builder-mode .users-appearance-admin-panel,
body.users-builder-mode .users-staging-admin-panel,
body.users-builder-mode .map-shell > .panel {
  top: var(--users-admin-top);
  bottom: var(--users-admin-bottom);
  width: var(--users-admin-column-width);
  max-width: none;
  min-width: 0;
  max-height: none;
  overflow: auto;
  box-sizing: border-box;
  transform: none;
}

body.users-builder-mode .users-appearance-admin-panel {
  left: var(--users-admin-left);
  right: auto;
  opacity: 1;
}

body.users-builder-mode .map-shell > .panel {
  left: calc(var(--users-admin-left) + var(--users-admin-column-width) + var(--users-admin-gap));
}

body.users-builder-mode .users-staging-admin-panel {
  left: calc(var(--users-admin-left) + (var(--users-admin-column-width) + var(--users-admin-gap)) * 2);
  right: auto;
  opacity: 1;
}

body.users-builder-mode #userDeviceFrame,
body.users-builder-mode .user-device-rail,
body.users-builder-mode .user-device-screen-aperture,
body.user-site-mode #userDeviceFrame,
body.user-site-mode .user-device-rail,
body.user-site-mode .user-device-screen-aperture {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.section-import-button input {
  display: none;
}

.elements-style-drawer .style-panel.inline-style-panel {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  max-height: 100%;
  overflow: auto;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px 0 0 10px;
  background: color-mix(in srgb, var(--panel), #fff 14%);
  box-shadow: -18px 12px 42px rgba(31, 41, 51, 0.26);
}

.elements-style-drawer .style-panel.inline-style-panel > label {
  max-width: none;
}
.elements-style-drawer .style-panel.inline-style-panel #styleLayerSelect { display: none; }
.style-layer-visual-picker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin-top: 5px; }
.style-layer-visual-picker button { display: grid; grid-template-columns: 10px minmax(0, 1fr); align-items: center; gap: 4px; min-height: 29px; padding: 3px 4px; border: 1px solid var(--line); border-radius: 6px; background: color-mix(in srgb, var(--surface), #fff 18%); color: var(--ink); font: 800 .58rem/1 var(--font, inherit); text-align: left; cursor: pointer; }
.style-layer-visual-picker button i { width: 10px; height: 18px; border-radius: 3px; background: var(--layer-swatch); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .18); }
.style-layer-visual-picker button.is-active { border-color: var(--control); box-shadow: inset 0 0 0 1px var(--control); }

@keyframes elements-drawer-bounce-out {
  0% {
    opacity: 0.5;
    transform: translateX(calc(100% + 18px)) scaleX(0.96);
  }
  68% {
    opacity: 1;
    transform: translateX(-14px) scaleX(1.015);
  }
  84% {
    transform: translateX(5px) scaleX(0.995);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scaleX(1);
  }
}

@keyframes elements-drawer-bounce-in {
  0% {
    opacity: 1;
    transform: translateX(0) scaleX(1);
  }
  24% {
    transform: translateX(-10px) scaleX(1.012);
  }
  100% {
    opacity: 0.45;
    transform: translateX(calc(100% + 18px)) scaleX(0.96);
  }
}

.style-panel.is-dragging .style-panel-head {
  cursor: grabbing;
}

.style-panel-head button {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--control);
  border-radius: 8px;
  background: var(--control);
  color: #fff;
  font-weight: 700;
}

.style-panel label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.style-helper {
  margin: -2px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.checkbox-line {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
}

.texture-choice-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  max-height: 360px;
  overflow: auto;
  padding-right: 2px;
}

.texture-group-heading {
  grid-column: 1 / -1;
  margin: 4px 0 -2px;
  padding: 5px 7px;
  border-block: 1px solid color-mix(in srgb, var(--line), transparent 18%);
  color: color-mix(in srgb, var(--muted), var(--ink) 18%);
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.texture-choice {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  align-content: end;
  gap: 5px;
  min-height: 126px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background-color: var(--texture-preview-color);
  background-image:
    linear-gradient(rgb(255 255 255 / 0.08), rgb(31 41 51 / 0.10)),
    var(--texture-url);
  background-repeat: repeat;
  background-size: auto, 72px 72px;
  color: var(--ink);
  text-align: center;
  cursor: pointer;
}

.texture-choice::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--texture-url);
  background-repeat: repeat;
  background-size: 28px 28px;
  opacity: 0.55;
  mix-blend-mode: multiply;
}

.texture-choice-compact {
  min-height: 112px;
}

.texture-choice[aria-pressed="true"] {
  border-color: var(--control);
  box-shadow: inset 0 0 0 1px var(--control);
}

.texture-thumb {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--texture-preview-color);
  background-image: var(--texture-url);
  background-repeat: repeat;
  background-size: 42px 42px;
  mix-blend-mode: multiply;
  opacity: 0.42;
}

.texture-choice strong {
  position: relative;
  z-index: 1;
  justify-self: center;
  max-width: 100%;
  overflow: hidden;
  padding: 3px 7px;
  border-radius: 6px;
  background: rgb(255 253 248 / 0.84);
  font-size: 0.78rem;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.texture-badge {
  position: relative;
  z-index: 1;
  justify-self: center;
  padding: 2px 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--control), #fff 78%);
  color: var(--control);
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
}

.texture-badge-muted {
  background: rgb(255 253 248 / 0.82);
  color: var(--muted);
}

.texture-library-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.texture-library-actions button {
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 800;
  cursor: pointer;
}

.texture-library-panel {
  position: fixed;
  inset: 0;
  z-index: 11000;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  padding: 14px;
  background: color-mix(in srgb, var(--panel), #ffffff 12%);
}

.texture-library-panel[hidden] {
  display: none;
}

.texture-library-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 360px) auto;
  gap: 10px;
  align-items: end;
}

.texture-library-head strong {
  display: block;
  color: var(--ink);
  font-size: 1.1rem;
  font-weight: 950;
}

.texture-library-head span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.texture-library-head label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.texture-library-head input {
  min-height: 36px;
  width: 100%;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffdf8;
  color: var(--ink);
  font-weight: 800;
}

.texture-library-head button {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--control);
  border-radius: 8px;
  background: var(--control);
  color: var(--control-text);
  font-weight: 900;
  cursor: pointer;
}

.texture-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
  overflow: auto;
  padding-right: 4px;
}

.texture-library-grid .texture-choice {
  min-height: 160px;
}

.style-panel select,
.style-panel input[type="text"],
.style-panel input[type="color"] {
  min-height: 32px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffdf8;
  color: var(--ink);
  font-weight: 700;
}

.style-panel input[type="text"] {
  padding: 0 8px;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
}

.theme-panel {
  width: 280px;
  max-height: calc(100vh - 20px);
  overflow: auto;
}

.theme-color-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.theme-debug {
  max-height: 180px;
  margin: 0;
  padding: 8px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #111827;
  color: #e5f0ff;
  font: 0.68rem/1.35 ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  white-space: pre-wrap;
}

.embedded-color-picker {
  display: grid;
  gap: 6px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7f3eb;
}

.robust-color-picker {
  position: fixed;
  z-index: 4000;
  display: grid;
  width: min(330px, calc(100vw - 20px));
  max-height: calc(100vh - 16px);
  gap: 8px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--control), var(--line) 40%);
  border-radius: 9px;
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 10px 28px rgb(0 0 0 / 0.28);
  overflow: auto;
}

.robust-color-picker[hidden] {
  display: none;
}

.robust-color-picker-preview {
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background:
    linear-gradient(45deg, rgb(0 0 0 / 0.08) 25%, transparent 25% 75%, rgb(0 0 0 / 0.08) 75%),
    linear-gradient(45deg, rgb(0 0 0 / 0.08) 25%, transparent 25% 75%, rgb(0 0 0 / 0.08) 75%),
    var(--picker-color, #d9442e);
  background-position: 0 0, 8px 8px, 0 0;
  background-size: 16px 16px, 16px 16px, auto;
}

.robust-color-picker-label {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.robust-color-picker-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(23px, 1fr));
  gap: 4px;
}

.robust-color-picker-field {
  width: 100%;
  height: 140px;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: crosshair;
}

.robust-rgb-grid {
  display: grid;
  gap: 4px;
}

.robust-rgb-grid label {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
}

.robust-rgb-grid output {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.robust-color-picker-native-row,
.robust-color-picker-hex-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
}

.robust-color-picker-native,
.robust-color-picker-hex {
  width: 100%;
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}

.robust-color-picker-hex {
  padding: 0 8px;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
}

.robust-color-picker-actions {
  position: sticky;
  bottom: -10px;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 6px;
  margin-inline: -4px;
  padding: 6px 4px 10px;
  background: var(--panel);
}

.robust-color-picker-actions button {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 850;
  cursor: pointer;
}

.robust-color-picker-actions .robust-color-picker-ok {
  background: var(--control);
  color: var(--control-text);
}

.robust-color-picker-eyedropper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.robust-color-picker-eyedropper .material-symbols-rounded {
  font-size: 1.05rem;
  line-height: 1;
}

.robust-color-picker-actions button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.is-page-color-sampling,
.is-page-color-sampling * {
  cursor: crosshair !important;
}

.robust-color-picker-status {
  display: block;
  min-height: 1.2em;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 750;
}

.style-preview {
  display: inline-block;
  width: auto;
  min-width: 90px;
  height: 18px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--picked-color, #d9442e);
}

.style-twirl summary.color-summary::before {
  content: "";
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid currentColor;
  font-size: 0;
}

.style-color-field {
  display: block;
  width: 100%;
  height: 148px;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: crosshair;
  touch-action: none;
}

.color-legal-warning {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  color: #b42318;
  font-size: 0.72rem;
  font-weight: 750;
  line-height: 1.3;
}

.color-legal-warning[hidden] {
  display: none;
}

.color-warning-icon {
  display: grid;
  place-items: end center;
  width: 20px;
  height: 18px;
  padding-bottom: 1px;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 950;
  line-height: 1;
  background: #d92d20;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.rgb-control-grid {
  display: grid;
  gap: 4px;
}

.rgb-control-grid label {
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
}

.color-row-label {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.style-swatches {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 4px;
  min-height: 24px;
}

.style-swatch {
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid rgba(31, 41, 51, 0.28);
  border-radius: 4px;
  background: var(--swatch-color);
  cursor: pointer;
}

.style-swatch.is-saved {
  box-shadow: inset 0 0 0 2px #fff, 0 0 0 1px var(--control);
}

.color-save-hint {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin: 2px 0 0;
  color: color-mix(in srgb, var(--muted), var(--control) 30%);
  font-family: inherit;
  font-size: 0.68rem;
  font-style: italic;
  font-weight: 650;
  line-height: 1.2;
}

.color-save-hint output {
  color: var(--control);
  font-style: normal;
  font-weight: 850;
}

.saved-color-swatches:empty {
  min-height: 0;
}

.style-size-section {
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel), var(--surface) 44%);
}

.style-size-section label {
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: center;
}

.status {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.leaflet-bar,
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(31, 41, 51, 0.18);
}

.leaflet-bar a {
  border-color: var(--line);
}

.leaflet-popup-content {
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 700;
}

.route-edit-popup {
  display: grid;
  gap: 8px;
  min-width: 190px;
}

.route-edit-popup p {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.route-edit-popup-actions {
  display: grid;
  gap: 6px;
}

.route-edit-popup-actions button {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--control);
  color: var(--surface);
  font-weight: 900;
  cursor: pointer;
}

.route-edit-popup-actions button:hover {
  filter: brightness(1.08);
}

@media (max-width: 840px) {
  .map-shell {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(420px, 62vh) auto;
  }

  .map-stage {
    --playback-dock-height: 104px;
    min-height: 420px;
  }

  .playback-panel {
    grid-template-columns: 1fr auto 1fr;
  }

  .day-edge-control {
    width: 40px;
    height: 68px;
  }

  .media-viewer {
    inset: 8px 8px calc(var(--playback-dock-height) + 8px);
  }

  .media-viewer-controls {
    grid-template-columns: auto minmax(80px, 1fr) auto auto;
  }

  .media-viewer-controls #mediaVolume {
    display: none;
  }

  .panel {
    min-height: auto;
    max-height: none;
    border-top: 1px solid var(--line);
    border-left: 0;
    box-shadow: 0 -14px 32px rgba(31, 41, 51, 0.08);
  }

  .panel-tab-panels {
    overflow: visible;
  }

  .address-route-grid {
    grid-template-columns: 1fr;
  }

  .element-group-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .element-group[data-element-group] {
    grid-column: auto;
  }

  .element-group[data-element-group="land-sea"],
  .element-group[data-element-group="cities"],
  .element-group[data-element-group="streets"],
  .element-group[data-element-group="borders"] {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .element-group-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .element-group {
    grid-auto-columns: minmax(82px, 1fr);
  }
}

/* Phase 2E.15: direct viewport resize affordances for the Users builder. */
.user-map-viewport {
  display: contents;
}

.map-stage {
  --user-map-resize-zone: 14px;
  --user-map-corner-zone: 38px;
  --user-map-corner-gap: 8px;
  --user-map-bezel-size: 8px;
  --user-map-bezel-highlight: rgb(255 255 255 / 0.35);
  --user-map-bezel-shadow: rgb(0 0 0 / 0.34);
  --user-map-inner-shadow: inset 0 2px 8px rgb(0 0 0 / 0.22);
  --user-map-viewport-radius: clamp(20px, 1.8vw, 28px);
}

body.user-site-mode .user-map-viewport,
body.users-builder-mode .user-map-viewport,
body.media-builder-mode .user-map-viewport {
  --user-map-active-radius: var(--user-map-viewport-radius);
  position: absolute;
  z-index: 781;
  inset:
    var(--user-map-viewport-top)
    var(--user-map-viewport-right)
    var(--user-map-viewport-bottom)
    var(--user-map-viewport-left);
  display: block;
  isolation: isolate;
  contain: paint;
  overflow: hidden;
  border-radius: var(--user-map-active-radius);
  clip-path: inset(0 round var(--user-map-active-radius));
  -webkit-mask-image: linear-gradient(#fff 0 0);
  mask-image: linear-gradient(#fff 0 0);
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.05), rgb(0 0 0 / 0.08)),
    color-mix(in srgb, var(--users-shell-leather-color, #6b3f2a), #8b8b8b 48%);
  box-shadow: 0 2px 10px rgb(0 0 0 / 0.24);
}

body.user-site-mode .user-map-viewport {
  inset: 0 0 86px !important;
  border-radius: 0;
}

body.media-builder-mode .user-map-viewport {
  top: max(16px, var(--user-map-viewport-top));
  right: auto;
  bottom: auto;
  left: 16px;
  width: calc(100% - var(--user-map-viewport-left) - var(--user-map-viewport-right));
  height: calc(100% - var(--user-map-viewport-top) - var(--user-map-viewport-bottom));
}

body.user-site-mode .user-map-viewport > .map-canvas,
body.users-builder-mode .user-map-viewport > .map-canvas,
body.media-builder-mode .user-map-viewport > .map-canvas {
  position: absolute;
  z-index: 1 !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden;
  border-radius: var(--user-map-active-radius);
  clip-path: inset(0 round var(--user-map-active-radius)) !important;
  box-shadow: none;
}

body.user-site-mode .user-map-viewport > .map-canvas > .maplibre-basemap,
body.users-builder-mode .user-map-viewport > .map-canvas > .maplibre-basemap,
body.media-builder-mode .user-map-viewport > .map-canvas > .maplibre-basemap,
body.user-site-mode .user-map-viewport > .map-canvas > .maplibre-basemap .maplibregl-map,
body.users-builder-mode .user-map-viewport > .map-canvas > .maplibre-basemap .maplibregl-map,
body.media-builder-mode .user-map-viewport > .map-canvas > .maplibre-basemap .maplibregl-map,
body.user-site-mode .user-map-viewport > .map-canvas > .maplibre-basemap .maplibregl-canvas-container,
body.users-builder-mode .user-map-viewport > .map-canvas > .maplibre-basemap .maplibregl-canvas-container,
body.media-builder-mode .user-map-viewport > .map-canvas > .maplibre-basemap .maplibregl-canvas-container,
body.user-site-mode .user-map-viewport > .map-canvas > .maplibre-basemap .maplibregl-canvas,
body.users-builder-mode .user-map-viewport > .map-canvas > .maplibre-basemap .maplibregl-canvas,
body.media-builder-mode .user-map-viewport > .map-canvas > .maplibre-basemap .maplibregl-canvas {
  border-radius: var(--user-map-active-radius);
  clip-path: inset(0 round var(--user-map-active-radius));
}

.users-builder-admin-grid {
  display: none;
}

body.users-builder-mode .user-map-viewport > .users-builder-admin-grid:not([hidden]) {
  position: absolute;
  z-index: 10;
  inset: clamp(8px, 1.1vw, 18px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(8px, 1.1vw, 18px);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

body.users-builder-mode[data-user-device-preview="phone-portrait"] .user-map-viewport > .users-builder-admin-grid:not([hidden]) {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

body.users-builder-mode .users-builder-admin-grid > .users-appearance-admin-panel,
body.users-builder-mode .users-builder-admin-grid > .panel,
body.users-builder-mode .users-builder-admin-grid > .users-staging-admin-panel {
  position: relative !important;
  inset: auto !important;
  display: block;
  align-self: stretch;
  width: auto !important;
  min-width: 0;
  max-width: none !important;
  height: auto;
  min-height: 0;
  max-height: 100% !important;
  margin: 0;
  overflow: auto;
  transform: none !important;
  box-sizing: border-box;
}

body.user-site-mode .map-stage::after,
body.users-builder-mode .map-stage::after {
  content: none;
}

.user-map-viewport-resize-layer {
  position: absolute;
  z-index: 900;
  inset:
    calc(var(--user-device-preview-top, 0px) + var(--user-map-viewport-top))
    calc(var(--user-device-preview-right, 0px) + var(--user-map-viewport-right))
    calc(var(--user-device-preview-bottom, 0px) + var(--user-map-viewport-bottom))
    calc(var(--user-device-preview-left, 0px) + var(--user-map-viewport-left));
  display: none;
  pointer-events: none;
  border: 0;
  border-radius: 0;
}

.user-map-viewport-resize-layer[hidden] {
  display: none !important;
}

.user-map-viewport-resize-layer:not([hidden]) {
  display: block;
}


.tooltip-color-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 8px; align-items: end; }
.tooltip-color-row .checkbox-control { min-height: 34px; }
.tooltip-color-row.is-matching .text-control { opacity: .42; filter: grayscale(1); }

.user-map-resize-edge,
.user-map-resize-corner {
  position: absolute;
  z-index: 2;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  pointer-events: auto;
}

.user-map-move-handle {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 0.72);
  border-radius: 50%;
  color: #fff;
  background: rgb(37 49 61 / 0.76);
  box-shadow: 0 3px 10px rgb(0 0 0 / 0.38);
  opacity: 0.32;
  cursor: move;
  pointer-events: auto;
  transform: translate(-50%, -50%);
  transition: opacity 120ms ease, transform 120ms ease;
}

.user-map-move-handle:hover,
.user-map-move-handle:focus-visible,
body.is-moving-map-viewport .user-map-move-handle {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.08);
}

.user-map-resize-edge-top,
.user-map-resize-edge-bottom {
  left: calc(var(--user-map-corner-zone) + var(--user-map-corner-gap));
  right: calc(var(--user-map-corner-zone) + var(--user-map-corner-gap));
  height: var(--user-map-resize-zone);
  cursor: ns-resize;
}

.user-map-resize-edge-top { top: calc(var(--user-map-resize-zone) / -2); }
.user-map-resize-edge-bottom { bottom: calc(var(--user-map-resize-zone) / -2); }

.user-map-resize-edge-left,
.user-map-resize-edge-right {
  top: calc(var(--user-map-corner-zone) + var(--user-map-corner-gap));
  bottom: calc(var(--user-map-corner-zone) + var(--user-map-corner-gap));
  width: var(--user-map-resize-zone);
  cursor: ew-resize;
}

.user-map-resize-edge-left { left: calc(var(--user-map-resize-zone) / -2); }
.user-map-resize-edge-right { right: calc(var(--user-map-resize-zone) / -2); }

.user-map-resize-corner {
  width: var(--user-map-corner-zone);
  height: var(--user-map-corner-zone);
}

.user-map-resize-corner-top-left {
  top: calc(var(--user-map-corner-zone) / -2);
  left: calc(var(--user-map-corner-zone) / -2);
  cursor: nwse-resize;
}

.user-map-resize-corner-top-right {
  top: calc(var(--user-map-corner-zone) / -2);
  right: calc(var(--user-map-corner-zone) / -2);
  cursor: nesw-resize;
}

.user-map-resize-corner-bottom-right {
  right: calc(var(--user-map-corner-zone) / -2);
  bottom: calc(var(--user-map-corner-zone) / -2);
  cursor: nwse-resize;
}

.user-map-resize-corner-bottom-left {
  bottom: calc(var(--user-map-corner-zone) / -2);
  left: calc(var(--user-map-corner-zone) / -2);
  cursor: nesw-resize;
}

.user-map-viewport-resize-layer::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: -3px;
  border: 3px solid transparent;
  border-radius: 0;
  pointer-events: none;
  transition: border-color 100ms ease, box-shadow 100ms ease;
}

.user-map-viewport-resize-layer.is-map-viewport-limit-top::after {
  border-top-color: rgb(255 105 180 / 0.96);
  box-shadow: 0 -3px 10px rgb(255 105 180 / 0.48);
}

.user-map-viewport-resize-layer.is-map-viewport-limit-right::after {
  border-right-color: rgb(255 105 180 / 0.96);
  box-shadow: 3px 0 10px rgb(255 105 180 / 0.48);
}

.user-map-viewport-resize-layer.is-map-viewport-limit-bottom::after {
  border-bottom-color: rgb(255 105 180 / 0.96);
  box-shadow: 0 3px 10px rgb(255 105 180 / 0.48);
}

.user-map-viewport-resize-layer.is-map-viewport-limit-left::after {
  border-left-color: rgb(255 105 180 / 0.96);
  box-shadow: -3px 0 10px rgb(255 105 180 / 0.48);
}

body.is-resizing-map-viewport .user-map-viewport,
body.is-resizing-map-viewport .user-map-viewport-resize-layer {
  border-radius: 0;
}

body.is-resizing-map-viewport .user-map-viewport {
  --user-map-active-radius: 0px;
  clip-path: inset(0);
}

/* The bounds switch makes both guides directly editable on any editor tab.
   The inner white outline controls the map; the outer cyan outline controls
   the simulated device dimensions. */
.user-device-preview-resize-layer {
  position: absolute;
  z-index: 901;
  inset: var(--user-device-preview-top, 0px) var(--user-device-preview-right, 0px) var(--user-device-preview-bottom, 0px) var(--user-device-preview-left, 0px);
  display: none;
  pointer-events: none;
}

.user-device-preview-resize-layer:not([hidden]) { display: block; }

.user-device-resize-edge,
.user-device-resize-corner {
  position: absolute;
  z-index: 2;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  pointer-events: auto;
}

.user-device-resize-edge-top,
.user-device-resize-edge-bottom {
  left: calc(var(--user-map-corner-zone) + var(--user-map-corner-gap));
  right: calc(var(--user-map-corner-zone) + var(--user-map-corner-gap));
  height: var(--user-map-resize-zone);
  cursor: ns-resize;
}
.user-device-resize-edge-top { top: calc(var(--user-map-resize-zone) / -2); }
.user-device-resize-edge-bottom { bottom: calc(var(--user-map-resize-zone) / -2); }
.user-device-resize-edge-left,
.user-device-resize-edge-right {
  top: calc(var(--user-map-corner-zone) + var(--user-map-corner-gap));
  bottom: calc(var(--user-map-corner-zone) + var(--user-map-corner-gap));
  width: var(--user-map-resize-zone);
  cursor: ew-resize;
}
.user-device-resize-edge-left { left: calc(var(--user-map-resize-zone) / -2); }
.user-device-resize-edge-right { right: calc(var(--user-map-resize-zone) / -2); }
.user-device-resize-corner { width: var(--user-map-corner-zone); height: var(--user-map-corner-zone); }
.user-device-resize-corner-top-left { top: calc(var(--user-map-corner-zone) / -2); left: calc(var(--user-map-corner-zone) / -2); cursor: nwse-resize; }
.user-device-resize-corner-top-right { top: calc(var(--user-map-corner-zone) / -2); right: calc(var(--user-map-corner-zone) / -2); cursor: nesw-resize; }
.user-device-resize-corner-bottom-right { right: calc(var(--user-map-corner-zone) / -2); bottom: calc(var(--user-map-corner-zone) / -2); cursor: nwse-resize; }
.user-device-resize-corner-bottom-left { bottom: calc(var(--user-map-corner-zone) / -2); left: calc(var(--user-map-corner-zone) / -2); cursor: nesw-resize; }

.user-device-move-handle {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  border: 1px solid rgb(117 221 255 / .95);
  border-radius: 50%;
  color: #dff9ff;
  background: rgb(8 59 78 / .86);
  box-shadow: 0 3px 10px rgb(0 0 0 / .38);
  cursor: move;
  pointer-events: auto;
  transform: translate(-50%, -50%);
}
body.is-device-preview-unlocked .user-device-move-handle {
  top: calc(var(--user-map-viewport-top) + 22px);
  right: calc(var(--user-map-viewport-right) + 22px);
  bottom: calc(var(--user-map-viewport-bottom) + 22px);
  left: calc(var(--user-map-viewport-left) + 22px);
  width: auto;
  min-width: 0;
  height: auto;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: transparent;
  transform: none !important;
  cursor: move;
}
.user-device-move-handle:hover,
.user-device-move-handle:focus-visible,
body.is-moving-device-preview .user-device-move-handle { transform: translate(-50%, -50%) scale(1.08); }

body.users-builder-mode .users-builder-workspace {
  display: none !important;
}

/* Phase 2E.18-19: gesture-created, constrained User UI layout objects. */
.map-stage {
  --user-layout-frame-gap: 12px;
  --user-layout-section-gap: 12px;
  --user-layout-divider-gap: 8px;
  --user-layout-subsection-gap: 10px;
  --user-layout-setting-gap: 8px;
  --user-section-fill: #835f4f;
  --user-section-stroke: #fff8e8;
  --user-section-stroke-width-ui: 2px;
  --user-section-radius-ui: 10px;
  --user-section-opacity-ui: 1;
  --user-subsection-fill: #9a7b6c;
  --user-subsection-stroke: #fff8e8;
  --user-subsection-stroke-width-ui: 1px;
  --user-subsection-radius-ui: 10px;
  --user-subsection-opacity-ui: 1;
  --user-divider-color: #fff8e8;
  --user-divider-width: 3px;
  --user-divider-secondary-width: 1px;
  --user-divider-line-gap: 3px;
  --user-divider-dash-length: 10px;
  --user-divider-dash-gap: 7px;
  --user-divider-glow-size: 8px;
  --user-divider-opacity: 0.94;
  --user-slider-accent: #4772e0;
  --user-slider-track: #e4e2ea;
  --user-slider-thumb: #6d7080;
  --user-dropdown-fill: #fffdf8;
  --user-dropdown-stroke: #8e9299;
  --user-toggle-accent: #4772e0;
  --user-button-fill: #384653;
  --user-button-text: #fffdf8;
  --user-inlay-color: #30251f;
  --user-inlay-offset: 6px;
  --user-inlay-radius: 12px;
  --user-text-control-fill: #fffdf8;
  --user-text-control-stroke: #8e9299;
  --user-color-control-radius: 10px;
  --user-control-label-color: #25313d;
  --user-control-font-size: 16px;
  --user-material-surface-tint: #704631;
  --user-material-texture-image: url("assets/textures/transparent/dark-leather.png");
  --user-material-texture-opacity: 0.34;
  --user-material-texture-cover-percent: 76%;
  --user-material-texture-scale: 150px;
  --user-material-gloss: 0.16;
  --user-material-gloss-percent: 7%;
  --user-material-bevel-depth: 3px;
  --user-material-effective-bevel: 1.95px;
  --user-material-highlight-strength: 0.32;
  --user-material-highlight-percent: 17%;
  --user-material-edge-contrast: 0.52;
  --user-material-edge-percent: 33%;
  --user-material-shadow-strength: 0.72;
  --user-material-press-depth: 2px;
}

.users-appearance-sticky-tools {
  position: sticky;
  z-index: 12;
  top: 0;
  display: grid;
  gap: 6px;
  padding: 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--line), transparent 30%);
  background: color-mix(in srgb, var(--panel), #fff 4%);
  box-shadow: 0 5px 12px rgb(20 24 30 / 0.12);
}

.users-layout-preset-section {
  margin: 8px 10px 0;
}

.users-editor-twirl {
  min-width: 0;
}

.users-editor-twirl > summary {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
}

.users-editor-twirl[open] > summary {
  margin-bottom: 5px;
}

.users-alignment-tools {
  display: flex;
  justify-content: center;
  gap: 1px;
  overflow: hidden;
}

.users-alignment-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px;
}

.users-alignment-tools button {
  flex: 0 1 38px;
  width: 38px;
  min-width: 29px;
  min-height: 36px;
  aspect-ratio: 1;
  padding: 6px;
}

.users-alignment-row .users-history-actions {
  display: flex;
  gap: 2px;
  margin: 0;
  padding-left: 4px;
  border-left: 1px solid color-mix(in srgb, var(--line), transparent 25%);
}

.users-alignment-row .users-history-actions button {
  display: grid;
  place-items: center;
  width: 34px;
  min-width: 34px;
  min-height: 36px;
  padding: 3px;
}

.users-alignment-row .users-history-actions .material-symbols-rounded {
  font-size: 21px;
}

.users-alignment-tools svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.users-alignment-tools #usersArrangeGridButton svg path {
  fill: currentColor;
  stroke-width: 1.2;
}

.users-alignment-tools button:disabled {
  opacity: 0.38;
}

.users-layout-preset-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 6px;
  margin-top: 0;
}

.users-layout-preset-tools > .section-collapse-button { grid-column: 1 / -1; }
.users-layout-preset-tools > label { display: block; }
.users-layout-preset-tools > label > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.users-layout-preset-tools label {
  display: grid;
  gap: 2px;
  min-width: 0;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.users-layout-preset-tools select,
.users-layout-preset-tools button {
  min-width: 0;
  min-height: 34px;
}

.users-layout-preset-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}

.users-layout-preset-actions button {
  min-height: 29px;
  padding: 4px 6px;
  font-size: 0.72rem;
}

.users-arrange-popover {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 7px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 8px 18px rgb(20 24 30 / 0.16);
}

.users-arrange-popover[hidden] { display: none !important; }

.users-arrange-popover label {
  display: grid;
  gap: 3px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.users-arrange-popover input {
  width: 100%;
  min-width: 0;
}

.users-snap-menu {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.users-snap-menu button.is-active {
  color: #fff;
  background: #d53f89;
}

.users-geometry-fields {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  margin-top: 5px;
  padding: 5px;
  border: 1px solid color-mix(in srgb, var(--line), transparent 45%);
  border-radius: 7px;
  background: color-mix(in srgb, var(--surface), transparent 35%);
}

.users-selection-editor [data-users-editor-content] {
  min-width: 0;
}

.users-selection-editor [data-users-editor-content="control"] .users-control-inspector,
.users-selection-editor [data-users-editor-content="transform"] {
  margin-top: 5px;
  padding: 5px;
  border: 1px solid color-mix(in srgb, var(--line), transparent 45%);
  border-radius: 7px;
  background: color-mix(in srgb, var(--surface), transparent 35%);
}

.users-geometry-fields[hidden] { display: none !important; }

.users-geometry-fields label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 3px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 900;
}

.users-geometry-fields input {
  width: 100%;
  min-width: 0;
  padding: 4px 5px;
  text-align: center;
}

.users-geometry-fields .users-geometry-name {
  grid-column: span 3;
}

.users-geometry-fields .users-geometry-rotation {
  grid-column: span 1;
}

.users-geometry-fields .users-geometry-container {
  grid-column: 1 / -1;
}

.users-control-inspector {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
  align-items: end;
  gap: 5px;
  margin-top: 6px;
}

.users-control-inspector[hidden] {
  display: none !important;
}

.users-control-inspector-label {
  max-width: 190px;
}

.users-selection-editor {
  display: grid;
  gap: 5px;
  padding-top: 5px;
  border-top: 1px solid color-mix(in srgb, var(--line), transparent 35%);
}

.users-selection-editor-title {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

.users-editor-subsection-bar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
}

.users-editor-subsection-bar button {
  min-width: 0;
  min-height: 25px;
  padding: 2px 5px;
  border-radius: 5px;
  font-size: 0.66rem;
}

.users-editor-subsection-bar button[aria-selected="true"] {
  border-color: var(--control);
  background: var(--control);
  color: var(--control-text);
}

.users-transform-options {
  display: grid;
  gap: 4px;
}

.users-transform-options[hidden],
[data-users-editor-content][hidden] {
  display: none !important;
}

.users-free-transform-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 30px;
}

.users-free-transform-toggle[aria-pressed="true"] {
  border-color: #d53f89;
  background: color-mix(in srgb, #d53f89, var(--surface) 18%);
  color: #fff;
}

.users-free-transform-toggle kbd {
  min-width: 22px;
  padding: 2px 5px;
  border: 1px solid currentColor;
  border-radius: 4px;
  font: 800 0.68rem/1 var(--ui-font);
  text-align: center;
}

.users-transform-options small {
  color: var(--muted);
  font-size: 0.65rem;
  line-height: 1.25;
}

.users-control-inspector label {
  display: grid;
  gap: 3px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 900;
}

.users-control-inspector input,
.users-control-inspector select {
  min-width: 0;
  width: 100%;
  padding: 5px;
}

.users-control-inspector-toggle {
  grid-template-columns: auto auto;
  align-items: center;
  align-self: center;
}

.users-control-inspector-toggle input {
  width: auto;
}

.users-control-inspector-container {
  grid-column: 1 / -1;
}

.users-control-type-options {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  padding-top: 4px;
  border-top: 1px solid color-mix(in srgb, var(--line), transparent 35%);
}

.users-control-type-options:empty {
  display: none;
}

.users-control-type-options .users-control-options-list {
  grid-column: 1 / -1;
}

.users-control-type-options textarea {
  min-height: 76px;
  resize: vertical;
}

.users-geometry-fields input.is-invalid {
  border-color: #cf2f45;
  box-shadow: 0 0 0 2px rgb(207 47 69 / 0.17);
}

.users-geometry-error {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  right: 0;
  left: 0;
  padding: 7px 9px;
  border: 1px solid #d84357;
  border-radius: 8px;
  color: #b41730;
  background: #fff3f5;
  box-shadow: 0 7px 16px rgb(90 10 24 / 0.18);
  font-size: 0.76rem;
  font-weight: 850;
}

.users-appearance-sections {
  display: grid;
  gap: 8px;
  padding: 10px;
}

.users-appearance-context-heading {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--line), transparent 25%);
  border-radius: 9px;
  background: color-mix(in srgb, var(--surface), var(--accent) 5%);
}

.users-appearance-context-heading span {
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.users-appearance-context-heading strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.users-gizmo-style-picker {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  margin-top: 4px;
}

.users-gizmo-style-picker select {
  min-width: 0;
}

.users-material-preset-panel {
  box-shadow: 0 4px 12px rgb(20 24 30 / 0.1);
}

.users-material-preset-panel[data-section-color],
.users-appearance-group[data-section-color] {
  border-color: color-mix(in srgb, var(--section-accent), var(--ink) 14%);
  border-left-width: 5px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--section-accent), transparent 84%), transparent 48%),
    var(--section-tint);
}

.users-material-preset-body {
  display: grid;
  gap: 9px;
}

.users-material-preset-note {
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.35;
}

.users-material-preset-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.users-material-preset-controls label,
.users-material-samples label {
  display: grid;
  gap: 3px;
  min-width: 0;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.users-material-preset-controls select {
  width: 100%;
  min-width: 0;
}

.users-material-recommendations {
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--line), var(--control) 16%);
  border-radius: 9px;
  background: color-mix(in srgb, var(--panel), transparent 28%);
}

.users-material-recommendations-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
}

.users-material-recommendations-heading strong {
  min-width: 0;
  color: var(--ink);
  font-size: 0.72rem;
  line-height: 1.2;
}

.users-material-recommendations-heading button {
  min-height: 28px;
  padding: 3px 7px;
  font-size: 0.66rem;
}

.users-material-recommendation-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
}

.users-material-recommendation-row > span {
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 900;
  text-transform: uppercase;
}

.users-material-recommendation-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.users-material-recommendation-choices button {
  display: inline-grid;
  grid-template-columns: 15px auto;
  align-items: center;
  gap: 4px;
  min-height: 25px;
  padding: 2px 6px 2px 3px;
  border-color: color-mix(in srgb, var(--recommended-material-color), var(--line) 45%);
  background: color-mix(in srgb, var(--surface), var(--recommended-material-color) 12%);
  color: var(--ink);
  font-size: 0.64rem;
}

.users-material-recommendation-choices i {
  display: block;
  width: 15px;
  height: 15px;
  border: 1px solid color-mix(in srgb, var(--recommended-material-color), #fff 32%);
  border-radius: 50%;
  background: var(--recommended-material-color);
  box-shadow: inset 0 1px 1px rgb(255 255 255 / 0.28);
}

.users-material-samples {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: end;
  gap: 6px;
  padding-top: 2px;
}

.users-material-samples :where(button, input, select) {
  width: 100%;
  min-width: 0;
}

.users-appearance-group {
  min-width: 0;
}

.users-appearance-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding-top: 5px;
}

.users-appearance-field {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
}

.users-appearance-field input,
.users-appearance-field select {
  width: 100%;
  min-width: 0;
}

.users-divider-style-workbench {
  grid-column: 1 / -1;
  display: grid;
  gap: 7px;
  padding: 9px;
  border: 1px dashed color-mix(in srgb, var(--line), #e34f9b 30%);
  border-radius: 9px;
  background: color-mix(in srgb, var(--surface), #e34f9b 4%);
}

.users-divider-style-workbench[hidden] { display: none !important; }

.users-divider-style-workbench small { color: var(--muted); }

.users-divider-workbench-tools {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}

.users-divider-workbench-tools button.is-active {
  color: #fff;
  background: #d53f89;
}

.users-divider-style-canvas {
  display: block;
  width: 100%;
  height: 92px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--users-shell-leather-color), #000 12%);
  touch-action: none;
}

.users-layout-drawing-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.users-layout-drawing-actions button[aria-pressed="true"] {
  color: #fff;
  border-color: color-mix(in srgb, #e34f9b, #fff 18%);
  background: color-mix(in srgb, #d53f89, var(--control) 25%);
  box-shadow: 0 0 0 3px rgb(213 63 137 / 0.2);
}

.user-frame-layout-layer {
  position: absolute;
  z-index: 850;
  inset: 0;
  display: none;
  pointer-events: none;
  overflow: hidden;
}

.user-frame-layout-layer[hidden] {
  display: none !important;
}

body.users-builder-mode .user-frame-layout-layer:not([hidden]),
body.user-site-mode .user-frame-layout-layer:not([hidden]) {
  display: block;
}

body.user-site-mode .user-layout-object {
  pointer-events: none;
  touch-action: auto;
}

body.user-site-mode .user-layout-section-object,
body.user-site-mode .user-layout-divider-object {
  cursor: default;
}

body.user-site-mode .user-layout-section-content,
body.user-site-mode .user-layout-control-stack,
body.user-site-mode .user-layout-control-object,
body.user-site-mode .user-layout-placed-control,
body.user-site-mode .user-layout-placed-control :where(button, input, select, textarea, label) {
  pointer-events: auto;
  touch-action: manipulation;
}

body.user-site-mode .user-layout-placed-control :where(button, input, select, textarea):focus-visible {
  outline: 3px solid color-mix(in srgb, #63c7ff, #fff 30%);
  outline-offset: 2px;
}

body.user-site-mode .user-layout-handle,
body.user-site-mode .user-layout-control-remove {
  display: none !important;
}

.user-layout-region {
  position: absolute;
  box-sizing: border-box;
  overflow: hidden;
  pointer-events: none;
  touch-action: none;
}

body.users-builder-mode .user-layout-region {
  pointer-events: auto;
}

body.users-builder-mode .user-layout-region.is-user-builder-drop-target {
  box-shadow: inset 0 0 0 2px rgb(104 231 162 / 0.72);
  background: rgb(104 231 162 / 0.07);
}

body.is-user-layout-drawing .user-layout-region {
  pointer-events: auto;
  cursor: crosshair;
  background: rgb(255 255 255 / 0.025);
}

.user-layout-region-top {
  top: 0;
  right: 0;
  left: 0;
  height: var(--user-map-viewport-top);
}

.user-layout-region-bottom {
  right: 0;
  bottom: 0;
  left: 0;
  height: var(--user-map-viewport-bottom);
}

.user-layout-region-left {
  top: var(--user-map-viewport-top);
  bottom: var(--user-map-viewport-bottom);
  left: 0;
  width: var(--user-map-viewport-left);
}

.user-layout-region-right {
  top: var(--user-map-viewport-top);
  right: 0;
  bottom: var(--user-map-viewport-bottom);
  width: var(--user-map-viewport-right);
}

.user-layout-object {
  position: absolute;
  box-sizing: border-box;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
}

.user-layout-section-object {
  min-width: 64px;
  min-height: 44px;
  padding: var(--user-layout-subsection-gap);
  border: var(--user-section-stroke-width-ui) solid var(--user-section-stroke);
  border-radius: var(--user-section-radius-ui);
  background: var(--user-section-fill);
  opacity: var(--user-section-opacity-ui);
  box-shadow: 0 3px 10px rgb(0 0 0 / 0.28);
  cursor: move;
}

.user-layout-section-object::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  background-image: var(--user-material-texture-image);
  background-size: var(--user-material-texture-scale);
  background-repeat: repeat;
  mix-blend-mode: soft-light;
  opacity: var(--user-material-texture-opacity);
  pointer-events: none;
}

.user-layout-section-object[data-layout-depth="1"] {
  border-width: var(--user-subsection-stroke-width-ui);
  border-style: dashed;
  border-color: var(--user-subsection-stroke);
  border-radius: var(--user-subsection-radius-ui);
  background: var(--user-subsection-fill);
  opacity: var(--user-subsection-opacity-ui);
}

.user-layout-section-label {
  position: absolute;
  z-index: 2;
  top: 4px;
  left: 8px;
  max-width: calc(100% - 16px);
  overflow: hidden;
  color: #fff8e8;
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.65);
  white-space: nowrap;
  pointer-events: none;
}

.user-layout-section-content {
  position: absolute;
  z-index: 1;
  inset: calc(var(--user-layout-subsection-gap) + 8px) var(--user-layout-subsection-gap) var(--user-layout-subsection-gap);
  overflow: hidden;
  pointer-events: none;
}

.user-layout-section-object.is-user-runtime-compact {
  padding: max(4px, calc(var(--user-layout-subsection-gap) * 0.65));
}

.user-layout-section-object.is-user-runtime-compact > .user-layout-section-label {
  top: 3px;
  left: 5px;
  max-width: calc(100% - 10px);
  font-size: 0.61rem;
}

.user-layout-section-object.is-user-runtime-compact > .user-layout-section-content {
  inset: max(15px, calc(var(--user-layout-subsection-gap) + 5px)) max(4px, calc(var(--user-layout-subsection-gap) * 0.65)) max(4px, calc(var(--user-layout-subsection-gap) * 0.65));
}

.user-layout-section-object.is-user-runtime-micro > .user-layout-section-label {
  font-size: 0.56rem;
}

.user-layout-section-object.is-user-runtime-micro > .user-layout-section-content {
  top: 13px;
}

body.is-user-layout-drawing .user-layout-section-content {
  pointer-events: auto;
  cursor: crosshair;
}

.user-layout-divider-object {
  z-index: 2;
  height: 20px;
  transform-origin: 0 50%;
  cursor: move;
}

.user-layout-divider-object::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 50%;
  right: 0;
  left: 0;
  height: var(--user-divider-width);
  border-radius: 999px;
  background: var(--user-divider-color);
  opacity: var(--user-divider-opacity);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.5);
  transform: translateY(-50%);
}

.user-layout-divider-object::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 50%;
  right: calc(var(--user-inlay-offset) * -1);
  left: calc(var(--user-inlay-offset) * -1);
  display: none;
  height: calc(var(--user-divider-width) + var(--user-inlay-offset) * 2);
  border-radius: var(--user-inlay-radius);
  background: var(--user-inlay-color);
  transform: translateY(-50%);
  pointer-events: none;
}

.map-stage:is([data-user-inlay-targets="dividers"], [data-user-inlay-targets="both"]) .user-layout-divider-object::after,
.user-layout-divider-object[data-divider-style="inlay"]::after {
  display: block;
}

.user-layout-divider-object[data-divider-style="inlay"]::before {
  opacity: 0;
  box-shadow: none;
}

.user-layout-divider-object[data-divider-style="dashed"]::before {
  background: repeating-linear-gradient(to right, var(--user-divider-color) 0 var(--user-divider-dash-length), transparent var(--user-divider-dash-length) calc(var(--user-divider-dash-length) + var(--user-divider-dash-gap)));
}

.user-layout-divider-object[data-divider-style="dotted"]::before {
  background: radial-gradient(circle, var(--user-divider-color) 0 48%, transparent 53%) 0 50% / calc(var(--user-divider-width) + var(--user-divider-dash-gap)) 100% repeat-x;
}

.user-layout-divider-object[data-divider-style="double"]::before,
.user-layout-divider-object[data-divider-style="thick-thin"]::before,
.user-layout-divider-object[data-divider-style="thin-thick"]::before {
  height: calc(var(--user-divider-width) + var(--user-divider-line-gap) + var(--user-divider-secondary-width));
  border-radius: 0;
  background: linear-gradient(to bottom,
    var(--user-divider-color) 0 var(--user-divider-width),
    transparent var(--user-divider-width) calc(var(--user-divider-width) + var(--user-divider-line-gap)),
    var(--user-divider-color) calc(var(--user-divider-width) + var(--user-divider-line-gap)) 100%);
}

.user-layout-divider-object[data-divider-style="thin-thick"]::before {
  background: linear-gradient(to bottom,
    var(--user-divider-color) 0 var(--user-divider-secondary-width),
    transparent var(--user-divider-secondary-width) calc(var(--user-divider-secondary-width) + var(--user-divider-line-gap)),
    var(--user-divider-color) calc(var(--user-divider-secondary-width) + var(--user-divider-line-gap)) 100%);
}

.user-layout-divider-object[data-divider-style="double"]::before {
  background: linear-gradient(to bottom,
    var(--user-divider-color) 0 var(--user-divider-secondary-width),
    transparent var(--user-divider-secondary-width) calc(var(--user-divider-secondary-width) + var(--user-divider-line-gap)),
    var(--user-divider-color) calc(var(--user-divider-secondary-width) + var(--user-divider-line-gap)) 100%);
}

.user-layout-divider-object[data-divider-style="glow"]::before {
  box-shadow: 0 0 var(--user-divider-glow-size) color-mix(in srgb, var(--user-divider-color), transparent 16%), 0 1px 3px rgb(0 0 0 / 0.4);
}

.user-layout-divider-object[data-divider-style="custom"]::before {
  background: repeating-linear-gradient(105deg, var(--user-divider-color) 0 8px, color-mix(in srgb, var(--user-divider-color), #e34f9b 45%) 8px 13px);
}

.user-layout-object.is-selected {
  outline: 2px solid transparent;
  outline-offset: 3px;
}

body.users-builder-mode .user-layout-region:hover .user-layout-object.is-selected {
  outline-color: #ff6fc4;
}

.user-layout-object.is-selected.is-selection-muted {
  outline-color: rgb(255 111 196 / 0.38);
}

.user-layout-divider-object.is-selected {
  outline: 0;
}

.user-layout-divider-object.is-selected::before {
  filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 4px #ff82cb);
}

.user-layout-divider-object.is-selected.is-selection-muted::before {
  filter: drop-shadow(0 0 2px rgb(255 130 203 / 0.3));
}

.user-layout-object.is-layout-blocked {
  filter: drop-shadow(0 0 5px rgb(255 92 145 / 0.95));
}

.user-layout-handle {
  position: absolute;
  z-index: 3;
  display: none;
  width: 13px;
  height: 13px;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #e34f9b;
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.45);
}

body.users-builder-mode .user-layout-region:hover .user-layout-object.is-selected > .user-layout-handle {
  display: block;
}

.user-layout-object.is-selected.is-selection-muted > .user-layout-handle {
  opacity: 0.38;
}

.user-layout-handle-nw { top: -7px; left: -7px; cursor: nwse-resize; }
.user-layout-handle-ne { top: -7px; right: -7px; cursor: nesw-resize; }
.user-layout-handle-se { right: -7px; bottom: -7px; cursor: nwse-resize; }
.user-layout-handle-sw { bottom: -7px; left: -7px; cursor: nesw-resize; }
.user-layout-section-object > .user-layout-handle-n,
.user-layout-section-object > .user-layout-handle-s {
  left: 14px;
  width: calc(100% - 28px);
  height: 10px;
  border-width: 1px;
  border-radius: 999px;
}
.user-layout-section-object > .user-layout-handle-n { top: -5px; cursor: ns-resize; }
.user-layout-section-object > .user-layout-handle-s { bottom: -5px; cursor: ns-resize; }
.user-layout-section-object > .user-layout-handle-e,
.user-layout-section-object > .user-layout-handle-w {
  top: 14px;
  width: 10px;
  height: calc(100% - 28px);
  border-width: 1px;
  border-radius: 999px;
}
.user-layout-section-object > .user-layout-handle-e { right: -5px; cursor: ew-resize; }
.user-layout-section-object > .user-layout-handle-w { left: -5px; cursor: ew-resize; }
.user-layout-handle-start { top: 3px; left: -6px; cursor: crosshair; }
.user-layout-handle-end { top: 3px; right: -6px; cursor: crosshair; }

.user-layout-sketch {
  position: absolute;
  z-index: 20;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.user-layout-sketch polyline {
  fill: none;
  stroke: #ff78c5;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.6));
}

.user-layout-sketch.is-box-preview polyline {
  fill: rgb(255 120 197 / 0.12);
}

body.is-resizing-map-viewport .user-frame-layout-layer {
  opacity: 0.72;
}

.users-gizmo-category-label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin: 4px 0 8px;
}

.users-gizmo-category-label span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.users-gizmo-category-label select {
  min-width: 0;
}

.users-gizmo-curation-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(2, auto);
  gap: 5px;
  align-items: end;
  margin: 0 0 8px;
}

.users-gizmo-curation-toolbar label {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.users-gizmo-curation-toolbar label span {
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.users-gizmo-curation-toolbar select,
.users-gizmo-curation-toolbar button {
  min-width: 0;
  min-height: 31px;
  padding: 4px 7px;
  font-size: 0.68rem;
}

.users-gizmo-curation-toolbar #usersGizmoExportSelection {
  grid-column: span 2;
}

.users-gizmo-curation-toolbar output {
  align-self: center;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  text-align: right;
}

.users-gizmo-library,
.users-gizmo-category-description {
  margin: 0;
}

.users-gizmo-category-description {
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.25;
}

.users-gizmo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  grid-auto-flow: dense;
  gap: 7px;
}

.users-gizmo-card[data-gizmo-size="wide"] {
  grid-column: span 2;
}

.users-gizmo-card {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(62px, 1fr);
  gap: 4px;
  min-width: 0;
  padding: 7px;
  border: 1px solid color-mix(in srgb, var(--line), transparent 18%);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface), var(--user-panel-surface-color) 12%);
  overflow: hidden;
}

.users-gizmo-card.is-curation-selected {
  border-color: color-mix(in srgb, var(--accent), #fff 16%);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent), transparent 38%), 0 0 12px color-mix(in srgb, var(--accent), transparent 72%);
}

.users-gizmo-card-badges {
  position: absolute;
  z-index: 6;
  top: 4px;
  right: 4px;
  display: flex;
  gap: 3px;
  align-items: center;
}

.users-gizmo-recommended-badge {
  padding: 2px 5px;
  border-radius: 999px;
  color: #18301d;
  background: #bfe8bd;
  font-size: 0.55rem;
  font-weight: 950;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.users-gizmo-selection-toggle {
  display: grid;
  place-items: center;
  width: 23px;
  min-width: 23px;
  height: 23px;
  min-height: 23px;
  padding: 0;
  border-radius: 50%;
  font-weight: 950;
}

.users-gizmo-selection-toggle[hidden] {
  display: none;
}

.users-gizmo-card > strong {
  padding-right: 70px;
  overflow: hidden;
  font-size: 0.69rem;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.users-gizmo-card.is-gizmo-drag-surface {
  cursor: grab;
  user-select: none;
}

.users-gizmo-card.is-gizmo-drag-surface:active {
  cursor: grabbing;
}

.users-gizmo-card.is-gizmo-drag-surface :where(button, input, select, textarea, label) {
  cursor: auto;
}

.user-gizmo-face {
  --gizmo-face: color-mix(in srgb, var(--user-button-fill), #d4d0cc 72%);
  --gizmo-dark: color-mix(in srgb, var(--user-button-fill), #050505 62%);
  --gizmo-light: color-mix(in srgb, var(--gizmo-face), #fff 45%);
  --gizmo-accent: var(--user-slider-accent);
  --gizmo-motion-duration: 140ms;
  --gizmo-press-depth: 3px;
  --gizmo-toggle-travel: 36px;
  --gizmo-position: 58%;
  --gizmo-turn: 0deg;
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 42px;
  box-sizing: border-box;
}

.user-gizmo-face[data-gizmo-motion="press"] .user-gizmo-button {
  transition: transform var(--gizmo-motion-duration) ease, box-shadow var(--gizmo-motion-duration) ease;
}

.user-gizmo-face[data-gizmo-motion="press"]:not(.user-gizmo-style-analog):not(.user-gizmo-style-analog-record) .user-gizmo-button:active {
  transform: translateY(var(--gizmo-press-depth));
}

.user-gizmo-face :where(button, input, select) {
  box-sizing: border-box;
  max-width: 100%;
}

.user-gizmo-button {
  width: min(76px, 78%);
  height: min(58px, 78%);
  min-width: 42px;
  min-height: 38px;
  border: 0;
  font-size: clamp(0.58rem, 1.8vw, 0.76rem);
  font-weight: 850;
  letter-spacing: 0.07em;
}

.user-gizmo-face[data-gizmo-shape="circle"] .user-gizmo-button {
  width: min(62px, 78%);
  aspect-ratio: 1;
  height: auto;
  border-radius: 50%;
}

.user-gizmo-face[data-gizmo-shape="wide"] .user-gizmo-button {
  width: min(150px, 94%);
  height: min(48px, 72%);
}

/* Adapted from Praashoo7's MIT-licensed EP-133 K.O. II button on Uiverse.
   The backing plate belongs only to button faces. Keeping the kind selector
   here prevents it from covering analog sliders, selects, displays, and
   other controls that share the same material style. */
.user-gizmo-face.user-gizmo-button.user-gizmo-style-analog::before,
.user-gizmo-face.user-gizmo-button.user-gizmo-style-analog-record::before {
  content: "";
  position: absolute;
  width: min(70px, 74%);
  height: min(56px, 74%);
  border-radius: 7px;
  background: #171717;
  transform: translate(-3px, 3px);
}

.user-gizmo-face.user-gizmo-button[data-gizmo-shape="circle"]::before {
  width: min(62px, 78%);
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
}

.user-gizmo-face.user-gizmo-button[data-gizmo-shape="wide"]::before {
  width: min(150px, 94%);
  height: min(48px, 72%);
}

.user-gizmo-style-analog .user-gizmo-button,
.user-gizmo-style-analog-record .user-gizmo-button {
  position: relative;
  z-index: 1;
  border-radius: 9px;
  color: #4f4d4b;
  background: var(--gizmo-face);
  box-shadow: 7px 7px 7px rgb(0 0 0 / 0.38), 1.5px 1.5px 2px rgb(255 255 255 / 0.82) inset, -3px -3px 7px color-mix(in srgb, var(--gizmo-face), #111 16%) inset;
  --gizmo-motion-duration: 90ms;
  transition: transform var(--gizmo-motion-duration) ease, box-shadow var(--gizmo-motion-duration) ease;
}

.user-gizmo-style-analog-record .user-gizmo-button {
  color: white;
  background: #d82b09;
  box-shadow: 7px 7px 7px rgb(0 0 0 / 0.38), 2px 2px 8px #ff7440 inset, -4px -4px 2px #9f1b02 inset;
}

.user-gizmo-style-analog .user-gizmo-button:active,
.user-gizmo-style-analog-record .user-gizmo-button:active {
  box-shadow: 0 0 0 rgb(0 0 0 / 0), 0.5px 0.5px 4px #000 inset, -3px -3px 7px rgb(0 0 0 / 0.18) inset;
  transform: translate(var(--gizmo-press-depth), var(--gizmo-press-depth)) scale(0.98);
}

.user-gizmo-toggle label {
  position: relative;
  display: block;
  width: min(72px, 82%);
  height: 34px;
  cursor: pointer;
}

.user-gizmo-toggle input {
  position: absolute;
  opacity: 0;
}

.user-gizmo-toggle span {
  position: absolute;
  inset: 0;
  border: 3px solid var(--gizmo-dark);
  border-radius: 999px;
  background: color-mix(in srgb, var(--gizmo-dark), #777 28%);
  box-shadow: inset 0 3px 7px rgb(0 0 0 / 0.62), 0 1px 1px rgb(255 255 255 / 0.24);
}

.user-gizmo-toggle span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--gizmo-face);
  box-shadow: 2px 3px 5px rgb(0 0 0 / 0.5), 1px 1px 2px rgb(255 255 255 / 0.7) inset;
  transition: transform var(--gizmo-motion-duration) ease, background var(--gizmo-motion-duration) ease;
}

.user-gizmo-toggle input:checked + span::after {
  background: color-mix(in srgb, var(--gizmo-accent), #fff 12%);
  transform: translateX(var(--gizmo-toggle-travel));
}

.user-gizmo-style-rocker label {
  width: 48px;
  height: 38px;
}

.user-gizmo-style-rocker span {
  border-radius: 6px;
}

.user-gizmo-style-rocker span::after {
  inset: 3px;
  width: auto;
  height: auto;
  border-radius: 3px;
  transform-origin: 50% 100%;
}

.user-gizmo-style-rocker input:checked + span::after {
  transform: perspective(40px) rotateX(-11deg);
}

.user-gizmo-range input[type="range"] {
  width: 86%;
  accent-color: var(--gizmo-accent);
}

.user-gizmo-range[data-gizmo-orientation="vertical"] input[type="range"] {
  width: 54px;
  height: 78px;
  writing-mode: vertical-lr;
  direction: rtl;
}

.user-gizmo-style-analog.user-gizmo-range input[type="range"],
.user-gizmo-style-metal.user-gizmo-range input[type="range"] {
  height: 9px;
  border: 2px solid var(--gizmo-dark);
  border-radius: 999px;
  background: #181817;
  box-shadow: inset 0 2px 4px #000, 0 1px 1px rgb(255 255 255 / 0.25);
}

.user-gizmo-knob input[type="range"] {
  width: 54px;
  height: 54px;
  appearance: none;
  border: 5px solid var(--gizmo-dark);
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, var(--gizmo-light), var(--gizmo-face) 42%, var(--gizmo-dark) 100%);
  box-shadow: 4px 5px 7px rgb(0 0 0 / 0.48), 1px 1px 2px rgb(255 255 255 / 0.42) inset;
  transform: rotate(var(--gizmo-turn));
}

.user-gizmo-knob input[type="range"]::-webkit-slider-thumb {
  width: 4px;
  height: 20px;
  margin-top: -27px;
  appearance: none;
  border-radius: 999px;
  background: var(--gizmo-accent);
}

.user-gizmo-style-glow {
  --gizmo-accent: #4772e0;
}

.user-gizmo-style-glow .user-gizmo-button {
  border: 3px solid #08090b;
  border-radius: 50%;
  color: var(--gizmo-accent);
  background: #29292c;
  box-shadow: 0 0 0 2px #56585e, inset 2px 2px 3px rgb(255 255 255 / 0.12), inset -3px -4px 6px #08090b, 0 0 20px rgb(71 114 224 / 0.22);
}

.user-gizmo-style-glow .user-gizmo-button:active {
  box-shadow: 0 0 0 2px #31343d, inset 3px 4px 8px #07080b, 0 0 24px rgb(71 114 224 / 0.52);
}

.user-gizmo-icon-truck {
  width: 62%;
  height: 62%;
  background: currentColor;
  -webkit-mask: url("assets/Source Files/Truck and RV Outline simplified.svg") center / contain no-repeat;
  mask: url("assets/Source Files/Truck and RV Outline simplified.svg") center / contain no-repeat;
}

.user-gizmo-style-soft .user-gizmo-button,
.user-gizmo-style-soft select {
  border: 1px solid color-mix(in srgb, var(--gizmo-face), #111 28%);
  border-radius: 999px;
  color: var(--user-button-text);
  background: color-mix(in srgb, var(--gizmo-face), var(--user-panel-surface-color) 22%);
  box-shadow: 3px 4px 8px rgb(0 0 0 / 0.22), -2px -2px 5px rgb(255 255 255 / 0.24);
}

.user-gizmo-select select {
  width: 88%;
  min-height: 32px;
}

.user-gizmo-text input,
.user-gizmo-search input,
.user-gizmo-date input,
.user-gizmo-color input {
  width: 88%;
  min-height: 32px;
  border: 2px solid var(--gizmo-dark);
  border-radius: 6px;
  background: var(--gizmo-face);
  box-shadow: inset 0 2px 5px rgb(0 0 0 / 0.28), 0 1px 1px rgb(255 255 255 / 0.28);
}

.user-gizmo-color input {
  padding: 3px;
}

.user-gizmo-style-glow.user-gizmo-text input,
.user-gizmo-style-glow.user-gizmo-search input,
.user-gizmo-style-glow.user-gizmo-date input,
.user-gizmo-style-glow.user-gizmo-color input {
  color: #dfe7ff;
  background: #171a21;
  box-shadow: inset 0 0 10px #000, 0 0 12px rgb(71 114 224 / 0.32);
}

.user-gizmo-style-metal.user-gizmo-text input,
.user-gizmo-style-metal.user-gizmo-search input,
.user-gizmo-style-metal.user-gizmo-date input,
.user-gizmo-style-metal.user-gizmo-color input {
  background: linear-gradient(135deg, #e6e8e7, var(--gizmo-face) 55%, #74797b);
}

.user-gizmo-style-analog.user-gizmo-select select,
.user-gizmo-style-metal.user-gizmo-select select,
.user-gizmo-style-glow.user-gizmo-select select {
  min-height: 34px;
  border: 2px solid var(--gizmo-dark);
  border-radius: 6px;
  color: var(--user-button-text);
  background: linear-gradient(180deg, var(--gizmo-light), var(--gizmo-face));
  box-shadow: inset 0 1px 1px rgb(255 255 255 / 0.48), 3px 4px 6px rgb(0 0 0 / 0.28);
}

.user-gizmo-style-glow.user-gizmo-select select {
  color: #dfe7ff;
  background: #25282f;
  box-shadow: inset 0 0 12px rgb(0 0 0 / 0.65), 0 0 12px rgb(71 114 224 / 0.3);
}

.user-gizmo-style-soft-wide.user-gizmo-select select {
  width: 96%;
  min-height: 38px;
  border: 1px solid color-mix(in srgb, var(--gizmo-face), #111 28%);
  border-radius: 12px;
  background: color-mix(in srgb, var(--gizmo-face), var(--user-panel-surface-color) 22%);
}

.user-gizmo-display,
.user-gizmo-display-panel {
  padding: 8px;
}

.user-gizmo-display-value {
  display: grid;
  place-items: center;
  width: min(100%, 150px);
  min-height: 38px;
  padding: 5px 10px;
  border: 3px solid var(--gizmo-dark);
  border-radius: 5px;
  color: #271f13;
  background: #b7ad82;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: clamp(0.68rem, 2vw, 1rem);
  font-weight: 850;
  letter-spacing: 0.08em;
  box-shadow: inset 0 3px 8px rgb(0 0 0 / 0.42), 0 1px 1px rgb(255 255 255 / 0.32);
}

.user-gizmo-meter-track {
  position: relative;
  width: min(92%, 150px);
  height: 38px;
  overflow: hidden;
  border: 3px solid var(--gizmo-dark);
  border-radius: 6px;
  background: #161817;
  box-shadow: inset 0 3px 7px #000;
}

.user-gizmo-meter-track > span {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--gizmo-position, 72%);
  background: linear-gradient(90deg, color-mix(in srgb, var(--gizmo-accent), #1b7028 45%), var(--gizmo-accent));
  box-shadow: 0 0 10px var(--gizmo-accent);
}

.user-gizmo-meter-value {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  height: 100%;
  color: #fff;
  font: 850 0.72rem/1 ui-monospace, Consolas, monospace;
  text-shadow: 0 1px 3px #000;
}

.user-gizmo-style-glow .user-gizmo-display-value {
  color: #7f9cff;
  background: #11141b;
  text-shadow: 0 0 8px currentColor;
  box-shadow: inset 0 0 14px #000, 0 0 14px rgb(71 114 224 / 0.28);
}

.user-gizmo-style-soft .user-gizmo-display-value {
  border-width: 1px;
  border-radius: 12px;
  color: var(--user-button-text);
  background: color-mix(in srgb, var(--gizmo-face), #fff 12%);
  font-family: inherit;
  letter-spacing: 0.03em;
}

.user-gizmo-light-control {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
}

.user-gizmo-light-control input {
  position: absolute;
  opacity: 0;
}

.user-gizmo-light-control span {
  width: 22px;
  height: 22px;
  border: 4px solid var(--gizmo-dark);
  border-radius: 50%;
  background: #68271f;
  box-shadow: inset 0 2px 4px rgb(0 0 0 / 0.55), 0 2px 4px rgb(0 0 0 / 0.35);
}

.user-gizmo-light-control input:checked + span {
  background: var(--gizmo-accent);
  box-shadow: inset 0 1px 3px rgb(255 255 255 / 0.48), 0 0 16px var(--gizmo-accent);
}

.user-gizmo-stepper-control,
.user-gizmo-segmented-control,
.user-gizmo-transport-control,
.user-gizmo-direction-control {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(30px, 1fr);
  width: min(94%, 160px);
  min-height: 34px;
  overflow: hidden;
  border: 2px solid var(--gizmo-dark);
  border-radius: 7px;
  background: var(--gizmo-dark);
  box-shadow: 3px 4px 7px rgb(0 0 0 / 0.34);
}

.user-gizmo-stepper-control button,
.user-gizmo-segmented-control button,
.user-gizmo-transport-control button,
.user-gizmo-direction-control button,
.user-gizmo-stepper-control output {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 32px;
  padding: 3px 6px;
  border: 0;
  border-radius: 0;
  color: var(--user-button-text);
  background: var(--gizmo-face);
  font-size: 0.68rem;
  font-weight: 900;
}

.user-gizmo-stepper-control > * + *,
.user-gizmo-segmented-control > * + *,
.user-gizmo-transport-control > * + *,
.user-gizmo-direction-control > * + * {
  border-left: 1px solid color-mix(in srgb, var(--gizmo-dark), #fff 18%);
}

.user-gizmo-segmented-control button[aria-pressed="true"] {
  color: #fff;
  background: var(--gizmo-accent);
  box-shadow: inset 0 2px 5px rgb(0 0 0 / 0.35);
}

.user-gizmo-style-glow :where(.user-gizmo-stepper-control, .user-gizmo-segmented-control, .user-gizmo-transport-control, .user-gizmo-direction-control) button,
.user-gizmo-style-glow .user-gizmo-stepper-control output {
  color: #a8baff;
  background: #24272e;
}

.user-gizmo-decal {
  display: grid;
  place-items: center;
  width: min(88%, 120px);
  min-height: 30px;
  color: color-mix(in srgb, var(--user-control-label-color), var(--user-panel-surface-color) 20%);
  font-size: clamp(0.62rem, 2vw, 0.88rem);
  font-weight: 950;
  letter-spacing: 0.16em;
  text-shadow: 0 1px rgb(255 255 255 / 0.28);
}

.user-gizmo-decal .user-gizmo-icon {
  width: 46px;
  height: 34px;
}

.user-gizmo-style-glow .user-gizmo-decal {
  color: var(--gizmo-accent);
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--gizmo-accent), transparent 28%));
}

.user-gizmo-style-metal {
  --gizmo-face: color-mix(in srgb, var(--user-panel-surface-color), #aeb4b6 68%);
  --gizmo-dark: #242729;
}

.user-gizmo-style-metal .user-gizmo-button {
  border: 2px solid #26292b;
  border-radius: 6px;
  color: #17191a;
  background: linear-gradient(135deg, #f0f2f1, var(--gizmo-face) 42%, #686d70);
  box-shadow: 4px 5px 7px rgb(0 0 0 / 0.42), 1px 1px 1px white inset;
}

.user-layout-gizmo-control,
.user-layout-gizmo-control > .user-gizmo-face {
  width: 100%;
  height: 100%;
  min-height: 0;
}

.user-layout-gizmo-control > .user-gizmo-face .user-gizmo-button {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
}

.user-layout-gizmo-control > .user-gizmo-face :where(label, input, select, textarea, output, .user-gizmo-display-value, .user-gizmo-decal, .user-gizmo-stepper-control, .user-gizmo-segmented-control, .user-gizmo-transport-control, .user-gizmo-direction-control) {
  width: 100%;
  max-width: none;
  min-width: 0;
}

.user-layout-gizmo-control > .user-gizmo-face :where(label, select, textarea, .user-gizmo-display-value, .user-gizmo-decal) {
  height: 100%;
  max-height: none;
  min-height: 0;
}

.user-layout-gizmo-control > .user-gizmo-face.user-gizmo-knob input,
.user-layout-gizmo-control > .user-gizmo-face[data-gizmo-shape="circle"] .user-gizmo-button {
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
}

.user-layout-gizmo-control > .user-gizmo-face::before {
  width: 100%;
  height: 100%;
}

.user-layout-gizmo-control {
  position: relative;
  display: block;
}

.user-layout-gizmo-control > .user-gizmo-face {
  position: absolute;
  inset: 0;
}

body.users-builder-mode .user-layout-control-object.is-gizmo-style-replace-target {
  box-shadow: 0 0 0 3px rgb(103 229 142 / 0.9), 0 0 18px rgb(103 229 142 / 0.7);
}

body.users-builder-mode .user-layout-control-object.is-gizmo-style-replace-rejected {
  box-shadow: 0 0 0 3px rgb(218 58 58 / 0.88);
}

.users-compact-control-list,
.users-compact-control-stack {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 4px;
}

.users-compact-control-card {
  position: relative;
  display: grid;
  gap: 2px;
  min-height: 58px;
  padding: 4px 5px;
  border: 1px solid color-mix(in srgb, var(--line), var(--surface) 18%);
  border-radius: 10px;
  background: var(--surface);
}

.users-compact-control-card[draggable="true"] {
  cursor: grab;
}

.users-compact-control-card.is-user-builder-dragging {
  opacity: 0.45;
}

.users-control-drag-ghost {
  position: fixed;
  z-index: 7000;
  max-width: 230px;
  padding: 7px 10px;
  border: 1px solid rgb(255 255 255 / 0.82);
  border-radius: 9px;
  color: #fff;
  background: color-mix(in srgb, var(--control), #e34f9b 22%);
  box-shadow: 0 8px 20px rgb(0 0 0 / 0.32);
  font-size: 0.78rem;
  font-weight: 900;
  pointer-events: none;
}

body.is-user-builder-dragging-control .user-layout-section-content {
  pointer-events: auto;
}

.user-layout-section-content.is-user-builder-drop-target {
  overflow: visible;
  border-radius: 8px;
  background: rgb(255 255 255 / 0.13);
  box-shadow: inset 0 0 0 2px #ff6fc4, 0 0 0 3px rgb(255 111 196 / 0.18);
}

.user-layout-section-content.is-direct-transform-drop-target {
  overflow: visible;
  background: rgb(255 255 255 / .14);
  box-shadow: inset 0 0 0 3px #ff6fc4, 0 0 18px rgb(255 111 196 / .35);
}

.user-layout-control-stack {
  position: absolute;
  z-index: 5;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

body.users-builder-mode .user-layout-control-stack {
  overflow: visible;
}

body.users-builder-mode,
body.users-builder-mode * {
  user-select: none;
  -webkit-user-select: none;
}

:where(#usersBuilderAdminGrid, #usersAppearanceAdminPanel, #usersStagingAdminPanel, .panel, .users-admin-panel) :where(textarea, [contenteditable="true"], input[type="text"], input[type="search"], input[type="url"], input[type="email"], input[type="tel"], input[type="number"], input:not([type])):focus {
  user-select: text;
  -webkit-user-select: text;
}

.user-layout-control-object {
  position: absolute;
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  padding: 0;
  pointer-events: auto;
}

.user-layout-section-object.is-user-frame-control-host {
  z-index: 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: none;
}

.user-layout-section-object.is-user-frame-control-host > .user-layout-section-content {
  position: absolute;
  inset: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
  pointer-events: none;
}

.user-layout-section-object.is-user-frame-control-host .user-layout-control-object {
  pointer-events: auto;
}

body.users-builder-mode .user-layout-control-object,
body.users-builder-mode .user-layout-placed-control {
  touch-action: none;
}

.journey-delete-actions { display: flex; align-items: end; flex-wrap: wrap; gap: 6px; }
.journey-delete-actions label { display: grid; gap: 2px; flex: 1 1 180px; font-size: .7rem; font-weight: 850; }
.stop-day-sequence-toggle { align-self: end; white-space: nowrap; }
.stop-landmark-day-label {
  position: relative;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 4px;
  border: 1px solid rgb(255 255 255 / .84);
  border-radius: 999px;
  color: #fffdf8;
  background: rgb(25 38 49 / .86);
  box-shadow: 0 2px 5px rgb(0 0 0 / .3);
  font: 850 calc(.66rem * var(--day-label-scale, 1))/1 Arial, sans-serif;
  white-space: nowrap;
  pointer-events: auto;
}
.stop-day-label-marker { border: 0; background: transparent; }
.stop-landmark-day-label button {
  display: grid;
  place-items: center;
  width: 16px;
  min-width: 16px;
  height: 16px;
  min-height: 16px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: rgb(255 255 255 / .18);
  font: 900 1rem/1 Arial, sans-serif;
  opacity: 1;
  pointer-events: auto;
  transition: background 120ms ease;
}
.route-endpoint-marker:hover .stop-landmark-day-label button,
.stop-landmark-day-label:hover button,
.stop-landmark-day-label:focus-within button { background: rgb(255 255 255 / .32); }
.stop-landmark-day-label button:disabled { color: rgb(255 255 255 / .35); cursor: default; }

/* A dragged gizmo remains above the map and is not clipped by its source cell. */
body.is-transforming-user-gizmo .user-frame-layout-layer {
  z-index: 1800;
  overflow: visible;
}
body.is-transforming-user-gizmo .user-layout-region {
  overflow: visible;
}

/* Legacy story buttons are only a live User-site surface; the builder uses
   the authored gizmos in the device shell instead. */
body.users-builder-mode #userStoryDock {
  display: none !important;
  pointer-events: none !important;
}

body.users-builder-mode .user-layout-placed-control :where(button, input, select, textarea, label) {
  pointer-events: none;
}

body.users-builder-mode [data-user-builder-card="true"] {
  touch-action: none;
}

body.users-builder-mode [data-user-builder-card="true"] :where(button, input, select, textarea, label) {
  pointer-events: none;
}

body.users-builder-mode [data-user-builder-card="true"] .users-compact-control-remove {
  pointer-events: auto;
}

.user-layout-control-object.is-user-builder-dragging {
  opacity: 0.38;
  filter: saturate(0.45);
}

.users-compact-control-card.is-user-builder-bouncing,
.user-layout-control-object.is-user-builder-bouncing {
  animation: user-builder-control-bounce 400ms cubic-bezier(0.22, 0.9, 0.35, 1.18);
}

@keyframes user-builder-control-bounce {
  0% { transform: translate3d(0, 0, 0); }
  38% { transform: translate3d(-9px, 0, 0); }
  70% { transform: translate3d(4px, 0, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

.user-layout-control-object.is-selected {
  outline: 2px solid transparent;
  outline-offset: -2px;
  cursor: move;
}

body.users-builder-mode .user-layout-region:hover .user-layout-control-object.is-selected {
  outline-color: #ff6fc4;
}

.user-layout-control-object.is-gizmo-binding-compatible {
  filter: drop-shadow(0 0 5px rgb(104 231 162 / 0.74));
}

.user-layout-control-object.is-gizmo-binding-incompatible {
  opacity: 0.34;
  filter: grayscale(0.82);
}

.user-layout-control-object.is-gizmo-binding-hover {
  opacity: 1;
  outline: 3px solid #72dfa2;
  outline-offset: 3px;
  filter: drop-shadow(0 0 10px rgb(104 231 162 / 0.9));
}

.user-layout-control-object.is-gizmo-binding-rejected {
  opacity: 0.58;
  outline: 3px solid #ff5f68;
  outline-offset: 3px;
}

.user-layout-control-object.is-gizmo-binding-rejected::after {
  content: "nah";
  position: absolute;
  z-index: 30;
  top: 50%;
  left: 50%;
  padding: 4px 7px;
  border-radius: 999px;
  color: white;
  background: #b7182e;
  box-shadow: 0 2px 7px rgb(0 0 0 / 0.45);
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.user-layout-control-object.is-transforming {
  z-index: 40;
  cursor: grabbing;
  will-change: left, top, width, height;
}

body.users-builder-mode .user-layout-region:hover .user-layout-control-object.is-selected > .user-layout-handle {
  display: block;
}

.user-layout-control-object > .user-layout-handle-n,
.user-layout-control-object > .user-layout-handle-s {
  left: 18px;
  width: calc(100% - 36px);
  height: 8px;
  border-width: 1px;
  border-radius: 999px;
}

.user-layout-control-object > .user-layout-handle-n { top: -4px; cursor: ns-resize; }
.user-layout-control-object > .user-layout-handle-s { bottom: -4px; cursor: ns-resize; }

.user-layout-control-object > .user-layout-handle-e,
.user-layout-control-object > .user-layout-handle-w {
  top: 18px;
  width: 8px;
  height: calc(100% - 36px);
  border-width: 1px;
  border-radius: 999px;
}

.user-layout-control-object > .user-layout-handle-e { right: -4px; cursor: ew-resize; }
.user-layout-control-object > .user-layout-handle-w { left: -4px; cursor: ew-resize; }


.user-layout-placed-control {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

.user-layout-placed-control .users-compact-control-card,
.user-layout-placed-control.user-site-setting-row {
  width: 100%;
  height: 100%;
  min-width: 0;
  margin: 0;
}

.user-layout-control-object > .users-compact-control-card,
.user-layout-control-object > .user-layout-builtin-control,
.user-layout-control-object > .user-site-setting-row {
  align-content: start;
  grid-auto-rows: max-content;
  overflow: hidden;
  gap: 1px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.user-layout-control-object > .user-layout-builtin-control:not(.user-layout-gizmo-control) {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.user-layout-control-object > .user-layout-builtin-control:not(.user-layout-gizmo-control) > button {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
}

.user-layout-control-object .users-registry-control-preview {
  display: grid;
  align-items: stretch;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.user-layout-control-object .users-compact-control-name,
.user-layout-control-object .user-layout-builtin-control strong {
  position: absolute;
  z-index: 4;
  bottom: calc(100% + 2px);
  left: 0;
  max-width: 100%;
  padding: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}

.user-layout-control-remove {
  position: absolute;
  z-index: 12;
  top: 4px;
  left: 4px;
  right: auto;
  display: none;
  box-sizing: border-box;
  width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 18px;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 0.78);
  border-radius: 50%;
  color: #fff;
  background: #35424d;
  box-shadow: 0 2px 5px rgb(0 0 0 / 0.32);
  font-size: 14px;
  line-height: 14px;
  text-align: center;
}

.user-gizmo-assignment-state {
  position: absolute;
  z-index: 13;
  top: 4px;
  right: 4px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1px solid rgb(255 255 255 / 0.72);
  border-radius: 50%;
  color: #ffcc5c;
  background: rgb(30 35 40 / 0.88);
  box-shadow: 0 2px 5px rgb(0 0 0 / 0.32);
  font-size: 12px;
  line-height: 1;
  padding: 0;
  pointer-events: auto;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 100ms ease;
}

.user-gizmo-assignment-state.is-assigned {
  color: #73d69a;
}

.user-layout-control-object:hover > .user-gizmo-assignment-state,
.user-layout-control-object:focus-within > .user-gizmo-assignment-state {
  opacity: 1;
  visibility: visible;
}

.users-gizmo-quick-tools {
  position: fixed;
  z-index: 10030;
  display: grid;
  grid-template-columns: repeat(2, minmax(110px, 1fr));
  gap: 7px;
  width: min(360px, calc(100vw - 16px));
  padding: 10px;
  border: 2px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 12px 34px rgb(0 0 0 / 0.36);
  max-height: calc(100vh - 16px);
  overflow: auto;
}

.users-gizmo-quick-tools > strong,
.users-gizmo-quick-tools > .users-gizmo-quick-actions,
.users-gizmo-quick-tools > .users-gizmo-preset-row { grid-column: 1 / -1; }
.users-gizmo-quick-tools label { display: grid; gap: 3px; font-size: 0.68rem; font-weight: 850; }
.users-gizmo-quick-tools input,
.users-gizmo-quick-tools select,
.users-gizmo-quick-tools button { min-width: 0; }
.users-gizmo-quick-actions { display: flex; gap: 6px; }
.users-gizmo-quick-actions > * { flex: 1 1 0; }
.users-gizmo-preset-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }

.users-gizmo-preset-preview-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(82px, 1fr));
  gap: 5px;
  max-height: min(48vh, 360px);
  overflow: auto;
}

.users-gizmo-preset-preview-grid > button {
  display: grid;
  grid-template-rows: minmax(42px, auto) auto;
  place-items: center;
  gap: 3px;
  padding: 5px;
  font-size: 0.64rem;
}

.users-gizmo-preset-preview-grid .user-gizmo-face {
  max-width: 78px;
  transform: scale(0.82);
}

.users-gizmo-style-lock {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
}

@media (orientation: portrait) {
  .users-gizmo-preset-preview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

body.is-painting-user-gizmo-styles .user-layout-control-object { cursor: copy; }

.user-layout-control-object,
.user-layout-control-object :where(button, input, select, textarea, label, strong) {
  font-family: var(--user-control-font-family, inherit);
}

.users-registry-control-value {
  justify-self: end;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 850;
}

.user-control-inlay {
  position: absolute;
  z-index: 0;
  inset: calc(var(--user-inlay-offset) * -1);
  border-radius: var(--user-inlay-radius);
  background: var(--user-inlay-color);
  pointer-events: none;
}

.user-layout-control-object[data-button-shape="pill"] > .user-control-inlay {
  border-radius: 999px;
}

.user-layout-control-object[data-button-shape="circle"] > .user-control-inlay {
  border-radius: 50%;
}

.user-layout-control-object[data-button-shape="square"] > .user-control-inlay {
  border-radius: 0;
}

.user-layout-divider-object[data-divider-style="inlay"].is-selected::after {
  filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 4px #ff82cb);
}

.user-layout-control-object[data-button-shape="rounded"] > .user-layout-placed-control button {
  border-radius: var(--user-button-radius, 8px);
}

.user-layout-control-object[data-button-shape] > .user-layout-placed-control button {
  width: 100%;
  height: 100%;
}

.user-layout-control-object[data-button-shape="pill"] > .user-layout-placed-control button {
  border-radius: 999px;
}

.user-layout-control-object[data-button-shape="square"] > .user-layout-placed-control button {
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  border-radius: 0;
}

.user-layout-control-object[data-button-shape="circle"] > .user-layout-placed-control button {
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
}

.user-layout-control-object:is(:hover, :focus-within) > .user-layout-control-remove {
  display: block;
}

.user-layout-control-object.is-user-style-paint-compatible {
  opacity: 1;
  filter: drop-shadow(0 0 7px rgb(104 231 162 / 0.82));
}

.user-layout-control-object.is-user-style-paint-incompatible {
  opacity: 0.3;
  filter: grayscale(0.88);
}

.user-layout-control-object.is-user-style-paint-incompatible:hover::after {
  content: "nah";
  position: absolute;
  z-index: 30;
  top: 50%;
  left: 50%;
  padding: 4px 7px;
  border-radius: 999px;
  color: #fff;
  background: #b7182e;
  font-size: 0.68rem;
  font-weight: 950;
  text-transform: uppercase;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.user-layout-builtin-control {
  position: relative;
  display: grid;
  align-content: start;
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.user-layout-builtin-control strong {
  padding-right: 22px;
  color: var(--user-control-label-color);
  font-size: 0.78rem;
}

.user-layout-builtin-control button {
  width: 100%;
  height: 100%;
  min-width: 0;
  border-radius: var(--user-button-radius, 8px);
  color: var(--user-button-text);
  background: var(--user-button-fill);
}

.users-control-placement-menu {
  position: fixed;
  z-index: 6500;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  width: min(330px, calc(100vw - 16px));
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: 0 16px 36px rgb(0 0 0 / 0.32);
}

.users-gizmo-replace-menu {
  position: fixed;
  z-index: 7600;
  top: 50%;
  left: 50%;
  display: grid;
  gap: 8px;
  width: min(360px, calc(100vw - 24px));
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--text);
  background: var(--surface);
  box-shadow: 0 18px 50px rgb(0 0 0 / 0.44);
  transform: translate(-50%, -50%);
}

.users-gizmo-replace-menu p {
  margin: 0;
  color: var(--muted);
  line-height: 1.35;
}

.users-gizmo-replace-menu > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.users-control-placement-menu > strong {
  grid-column: 1 / -1;
  color: var(--ink);
}

.users-control-placement-menu button {
  min-width: 0;
  min-height: 36px;
  padding: 6px 8px;
}

.users-compact-control-name {
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 950;
}

.users-compact-control-card .users-registry-control-preview {
  margin: 0;
  padding: 2px 3px;
}

.user-layout-control-object .users-compact-control-card .users-registry-control-preview {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.user-layout-control-object .users-compact-control-name,
.user-layout-control-object .user-layout-builtin-control strong {
  line-height: 1.05;
}

.user-control-drop-preview {
  position: absolute;
  z-index: 40;
  display: grid;
  align-content: start;
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  padding: calc(var(--user-layout-setting-gap, 8px) * 0.35);
  border: 2px dashed #ff6fc4;
  border-radius: 6px;
  color: var(--user-control-label-color);
  background: color-mix(in srgb, var(--user-panel-surface, #76503e), transparent 12%);
  box-shadow: 0 0 0 2px rgb(255 255 255 / 0.35);
  font-size: 0.7rem;
  font-weight: 950;
  text-align: left;
  pointer-events: none;
  opacity: 0.86;
}

.user-control-drop-preview > strong {
  display: block;
  padding: 0 2px;
  font-size: 0.74rem;
  line-height: 1.05;
}

.user-control-drop-preview[data-button-shape] {
  padding: 0;
}

.user-control-drop-preview[data-button-shape] > strong {
  position: absolute;
  bottom: calc(100% + 2px);
  left: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-control-drop-preview[data-button-shape] button {
  width: 100%;
  height: 100%;
}

.user-control-drop-preview[data-button-shape="circle"],
.user-control-drop-preview[data-button-shape="circle"] button {
  border-radius: 50%;
}

.user-control-drop-preview[data-button-shape="pill"],
.user-control-drop-preview[data-button-shape="pill"] button {
  border-radius: 999px;
}

.user-control-drop-preview[data-button-shape="square"],
.user-control-drop-preview[data-button-shape="square"] button {
  border-radius: 0;
}

.user-control-drop-preview .users-registry-control-preview {
  margin: 0;
  padding: 1px 2px;
  border: 0;
  background: transparent;
}

.users-layout-preset-dialog {
  position: fixed;
  z-index: 9000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgb(13 18 24 / 0.58);
}

.users-layout-preset-card {
  display: grid;
  gap: 12px;
  width: min(360px, calc(100vw - 32px));
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: 0 18px 44px rgb(0 0 0 / 0.36);
}

.users-layout-preset-card label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-weight: 850;
}

.users-layout-preset-card input {
  width: 100%;
}

.users-layout-preset-card > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.users-layout-preset-card .is-destructive {
  border-color: #a52a2a;
  color: #fff;
  background: #a52a2a;
}

.users-registry-control-preview input[type="range"],
.user-site-setting-row input[type="range"],
.users-material-samples input[type="range"] {
  accent-color: var(--user-slider-accent);
  appearance: none;
  height: 18px;
  padding: 0;
  border: 0;
  background: transparent;
}

.users-registry-control-preview select,
.user-site-setting-row select,
.users-material-samples select {
  border-color: var(--user-dropdown-stroke);
  border-radius: var(--user-dropdown-radius, 8px);
  color: color-mix(in srgb, var(--user-dropdown-fill), #000 78%);
  background-color: var(--user-dropdown-fill);
  background-image:
    linear-gradient(color-mix(in srgb, var(--user-dropdown-fill) var(--user-material-texture-cover-percent), transparent), color-mix(in srgb, var(--user-dropdown-fill) var(--user-material-texture-cover-percent), transparent)),
    linear-gradient(180deg, color-mix(in srgb, #fff var(--user-material-gloss-percent), transparent), transparent 48%),
    var(--user-material-texture-image);
  background-size: auto, auto, var(--user-material-texture-scale);
  background-blend-mode: normal, screen, soft-light;
  box-shadow:
    inset 0 var(--user-material-effective-bevel) color-mix(in srgb, #fff var(--user-material-highlight-percent), transparent),
    inset 0 calc(var(--user-material-effective-bevel) * -1) color-mix(in srgb, #000 var(--user-material-edge-percent), transparent),
    0 calc(var(--user-material-effective-bevel) * 0.45) calc(var(--user-material-effective-bevel) * 1.4) rgb(0 0 0 / calc(0.1 * var(--user-material-shadow-strength)));
}

.users-registry-control-preview input[type="checkbox"],
.user-site-setting-row input[type="checkbox"] {
  width: var(--user-toggle-size, 20px);
  height: var(--user-toggle-size, 20px);
  accent-color: var(--user-toggle-accent);
}

.users-registry-control-preview button,
.user-site-setting-row button,
.users-compact-control-card button:not(.users-compact-control-remove),
.user-layout-builtin-control button,
.users-material-samples button {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: var(--user-button-edge-width, max(1px, calc(var(--user-material-effective-bevel) * 0.5))) solid var(--user-button-edge-color, color-mix(in srgb, var(--user-button-fill), #000 var(--user-material-edge-percent)));
  border-top-color: color-mix(in srgb, var(--user-button-fill), #fff var(--user-material-edge-percent));
  border-left-color: color-mix(in srgb, var(--user-button-fill), #fff calc(var(--user-material-edge-percent) * 0.72));
  border-radius: var(--user-button-radius, 8px);
  color: var(--user-button-text);
  background-color: var(--user-button-fill);
  background-image: linear-gradient(180deg, color-mix(in srgb, #fff var(--user-material-gloss-percent), transparent), transparent 48%, color-mix(in srgb, #000 calc(var(--user-material-gloss-percent) * 0.45), transparent));
  box-shadow:
    inset 0 var(--user-material-effective-bevel) color-mix(in srgb, #fff var(--user-material-highlight-percent), transparent),
    inset 0 calc(var(--user-material-effective-bevel) * -1) color-mix(in srgb, #000 var(--user-material-edge-percent), transparent),
    0 calc(var(--user-material-effective-bevel) * 0.7) calc(var(--user-material-effective-bevel) * 1.8) rgb(0 0 0 / calc(0.16 * var(--user-material-shadow-strength)));
  text-shadow: 0 1px 1px rgb(0 0 0 / 0.38);
  transition: transform 90ms ease, box-shadow 90ms ease, filter 120ms ease;
}

.user-layout-control-object[data-user-button-edge-style="none"] button {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.user-layout-control-object[data-user-button-edge-style="solid"] button {
  border-style: solid;
  border-color: var(--user-button-edge-color);
  outline: 0 !important;
}

.user-layout-control-object[data-user-button-edge-style="inset"] button { border-style: inset; outline: 0 !important; }
.user-layout-control-object[data-user-button-edge-style="outset"] button { border-style: outset; outline: 0 !important; }
.user-layout-control-object[data-user-button-edge-style="stitched"] button {
  outline: max(1px, calc(var(--user-button-edge-width) / 2)) dashed var(--user-button-edge-color);
  outline-offset: calc((var(--user-button-edge-width) + 2px) * -1);
}

.users-registry-control-preview button::before,
.user-site-setting-row button::before,
.users-compact-control-card button:not(.users-compact-control-remove)::before,
.user-layout-builtin-control button::before,
.users-material-samples button::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: var(--user-material-texture-image);
  background-size: var(--user-material-texture-scale);
  background-repeat: repeat;
  mix-blend-mode: soft-light;
  opacity: var(--user-material-texture-opacity);
  pointer-events: none;
}

.users-registry-control-preview button:not(:disabled):active,
.user-site-setting-row button:not(:disabled):active,
.users-compact-control-card button:not(.users-compact-control-remove):not(:disabled):active,
.user-layout-builtin-control button:not(:disabled):active,
.users-material-samples button:not(:disabled):active {
  transform: translateY(var(--user-material-press-depth));
  box-shadow:
    inset 0 calc(var(--user-material-effective-bevel) * 1.2) color-mix(in srgb, #000 var(--user-material-edge-percent), transparent),
    inset 0 calc(var(--user-material-effective-bevel) * -0.35) color-mix(in srgb, #fff var(--user-material-highlight-percent), transparent);
}

.map-stage[data-user-construction="flat"] :where(.users-registry-control-preview, .user-site-setting-row, .user-layout-builtin-control, .users-material-samples) button,
.map-stage[data-user-construction="flat"] :where(.users-registry-control-preview, .user-site-setting-row, .users-material-samples) select {
  border-width: 1px;
  box-shadow: none;
}

.map-stage[data-user-construction="recessed"] :where(.users-registry-control-preview, .user-site-setting-row, .user-layout-builtin-control, .users-material-samples) button,
.map-stage[data-user-construction="inset"] :where(.users-registry-control-preview, .user-site-setting-row, .user-layout-builtin-control, .users-material-samples) button {
  border-top-color: color-mix(in srgb, var(--user-button-fill), #000 var(--user-material-edge-percent));
  border-bottom-color: color-mix(in srgb, var(--user-button-fill), #fff var(--user-material-edge-percent));
  box-shadow:
    inset 0 calc(var(--user-material-effective-bevel) * 1.2) color-mix(in srgb, #000 var(--user-material-edge-percent), transparent),
    inset 0 calc(var(--user-material-effective-bevel) * -0.5) color-mix(in srgb, #fff var(--user-material-highlight-percent), transparent);
}

.map-stage[data-user-construction="stitched"] :where(.users-registry-control-preview, .user-site-setting-row, .user-layout-builtin-control, .users-material-samples) button {
  outline: 1px dashed color-mix(in srgb, var(--user-button-text), transparent 45%);
  outline-offset: -4px;
}

.map-stage[data-user-construction="hardware"] :where(.users-registry-control-preview, .user-site-setting-row, .user-layout-builtin-control, .users-material-samples) button {
  text-shadow: 0 1px 0 rgb(255 255 255 / 0.32);
}

.users-registry-control-preview input[type="text"],
.users-registry-control-preview textarea,
.user-site-setting-row input[type="text"],
.user-site-setting-row textarea {
  border-color: var(--user-text-control-stroke);
  border-radius: var(--user-text-control-radius, 8px);
  background-color: var(--user-text-control-fill);
  background-image:
    linear-gradient(color-mix(in srgb, var(--user-text-control-fill) var(--user-material-texture-cover-percent), transparent), color-mix(in srgb, var(--user-text-control-fill) var(--user-material-texture-cover-percent), transparent)),
    var(--user-material-texture-image);
  background-size: auto, var(--user-material-texture-scale);
  background-blend-mode: normal, soft-light;
  box-shadow: inset 0 calc(var(--user-material-effective-bevel) * 0.8) calc(var(--user-material-effective-bevel) * 1.8) rgb(0 0 0 / calc(0.14 * var(--user-material-shadow-strength)));
}

.users-registry-control-preview input[type="range"]::-webkit-slider-runnable-track,
.user-site-setting-row input[type="range"]::-webkit-slider-runnable-track,
.users-material-samples input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border: 1px solid color-mix(in srgb, var(--user-slider-track), #000 var(--user-material-edge-percent));
  border-radius: 999px;
  background: var(--user-slider-track);
  box-shadow: inset 0 2px 3px rgb(0 0 0 / 0.42), 0 1px color-mix(in srgb, #fff var(--user-material-highlight-percent), transparent);
}

.users-registry-control-preview input[type="range"]::-webkit-slider-thumb,
.user-site-setting-row input[type="range"]::-webkit-slider-thumb,
.users-material-samples input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -7px;
  border: 2px solid color-mix(in srgb, var(--user-slider-thumb), #000 var(--user-material-edge-percent));
  border-top-color: color-mix(in srgb, var(--user-slider-thumb), #fff var(--user-material-edge-percent));
  border-radius: 50%;
  background-color: var(--user-slider-thumb);
  background-image: var(--user-material-texture-image);
  background-size: var(--user-material-texture-scale);
  box-shadow: 0 2px 5px rgb(0 0 0 / 0.42), inset 0 2px color-mix(in srgb, #fff var(--user-material-highlight-percent), transparent);
}

.users-registry-control-preview input[type="range"]::-moz-range-track,
.user-site-setting-row input[type="range"]::-moz-range-track,
.users-material-samples input[type="range"]::-moz-range-track {
  height: 6px;
  border: 1px solid color-mix(in srgb, var(--user-slider-track), #000 var(--user-material-edge-percent));
  border-radius: 999px;
  background: var(--user-slider-track);
  box-shadow: inset 0 2px 3px rgb(0 0 0 / 0.42);
}

.users-registry-control-preview input[type="range"]::-moz-range-thumb,
.user-site-setting-row input[type="range"]::-moz-range-thumb,
.users-material-samples input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 2px solid color-mix(in srgb, var(--user-slider-thumb), #000 var(--user-material-edge-percent));
  border-radius: 50%;
  background: var(--user-slider-thumb);
  box-shadow: 0 2px 5px rgb(0 0 0 / 0.42);
}

.users-registry-control-preview input[type="color"],
.user-site-setting-row input[type="color"] {
  min-height: var(--user-color-control-height, 42px);
  border-radius: var(--user-color-control-radius);
}

.users-compact-control-card,
.user-site-setting-row {
  color: var(--user-control-label-color);
  font-size: var(--user-control-font-size);
  font-weight: var(--user-control-font-weight, 800);
}

.users-compact-control-remove {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 24px;
  min-height: 24px;
  padding: 0;
  border-radius: 50%;
}

.users-viewport-resize-dialog {
  position: fixed;
  z-index: 6000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgb(16 20 26 / 0.58);
}

.users-viewport-resize-dialog[hidden] { display: none !important; }

.users-viewport-resize-card {
  width: min(420px, 100%);
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: 0 20px 46px rgb(0 0 0 / 0.32);
}

.users-viewport-resize-card div {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

body.users-builder-mode {
  --users-admin-gap: clamp(8px, 1.1vw, 18px);
  --users-admin-top: calc(var(--user-map-viewport-top) + var(--users-admin-gap));
  --users-admin-right: calc(var(--user-map-viewport-right) + var(--users-admin-gap));
  --users-admin-bottom: calc(var(--user-map-viewport-bottom) + var(--users-admin-gap));
  --users-admin-left: calc(var(--user-map-viewport-left) + var(--users-admin-gap));
  --users-admin-column-width: calc(
    (100vw - var(--user-map-viewport-left) - var(--user-map-viewport-right) - (var(--users-admin-gap) * 4)) / 3
  );
}

body.users-builder-mode .users-appearance-admin-panel,
body.users-builder-mode .users-staging-admin-panel,
body.users-builder-mode .map-shell > .panel {
  top: var(--users-admin-top);
  bottom: var(--users-admin-bottom);
  width: var(--users-admin-column-width);
  min-width: 0;
  max-width: none;
  max-height: none;
  overflow: auto;
  box-sizing: border-box;
}

body.users-builder-mode .users-appearance-admin-panel {
  left: var(--users-admin-left);
  right: auto;
}

body.users-builder-mode .map-shell > .panel {
  left: calc(var(--users-admin-left) + var(--users-admin-column-width) + var(--users-admin-gap));
}

body.users-builder-mode .users-staging-admin-panel {
  left: calc(var(--users-admin-left) + (var(--users-admin-column-width) + var(--users-admin-gap)) * 2);
  right: auto;
}

/* Device previews size the complete material shell; runtime geometry supplies
   its device inset variables. */

body.user-site-mode .user-device-frame,
body.users-builder-mode .user-device-frame {
  inset:
    var(--user-device-preview-top)
    var(--user-device-preview-right)
    var(--user-device-preview-bottom)
    var(--user-device-preview-left) !important;
  display: block !important;
  overflow: hidden;
  border: 3px solid color-mix(in srgb, var(--users-shell-leather-color, var(--leather-color)), #fff 48%) !important;
  border-radius: var(--user-device-radius) !important;
  opacity: 1;
  background-color: var(--users-shell-leather-color, var(--leather-color)) !important;
  background-image: url("assets/textures/pebbled-leather-gray.png"), url("assets/backgrounds/leather.png") !important;
  background-repeat: repeat !important;
  background-size: var(--leather-texture-size), 420px 420px !important;
  background-blend-mode: var(--leather-blend-mode), multiply !important;
  box-shadow:
    0 0 0 2px rgb(20 18 17 / 0.82),
    0 0 0 7px rgb(255 255 255 / 0.12),
    inset 0 2px 0 rgb(255 255 255 / 0.15),
    inset 0 -10px 24px rgb(0 0 0 / 0.28),
    0 20px 44px rgb(0 0 0 / 0.38) !important;
}

body.users-builder-mode[data-user-device-preview^="tablet"] .user-device-frame {
  --user-device-radius: 32px;
}

body.users-builder-mode[data-user-device-preview^="phone"] .user-device-frame {
  --user-device-radius: 44px;
  border-width: 4px !important;
  box-shadow:
    0 0 0 3px rgb(20 18 17 / 0.88),
    0 0 0 8px rgb(255 255 255 / 0.14),
    inset 0 2px 0 rgb(255 255 255 / 0.15),
    inset 0 -10px 24px rgb(0 0 0 / 0.28),
    0 20px 44px rgb(0 0 0 / 0.38) !important;
}

body.user-site-mode .user-frame-layout-layer,
body.users-builder-mode .user-frame-layout-layer {
  inset:
    var(--user-device-preview-top)
    var(--user-device-preview-right)
    var(--user-device-preview-bottom)
    var(--user-device-preview-left);
}

body.users-builder-mode .user-map-viewport-resize-layer {
  inset:
    calc(var(--user-device-preview-top) + var(--user-map-viewport-top))
    calc(var(--user-device-preview-right) + var(--user-map-viewport-right))
    calc(var(--user-device-preview-bottom) + var(--user-map-viewport-bottom))
    calc(var(--user-device-preview-left) + var(--user-map-viewport-left));
  z-index: 1900;
}

body.users-builder-mode .map-stage > .users-builder-admin-grid:not([hidden]) {
  position: absolute;
  z-index: 1810;
  inset:
    calc(var(--user-device-preview-top) + var(--user-map-viewport-top) + 10px)
    calc(var(--user-device-preview-right) + var(--user-map-viewport-right) + 10px)
    calc(var(--user-device-preview-bottom) + var(--user-map-viewport-bottom) + 10px)
    calc(var(--user-device-preview-left) + var(--user-map-viewport-left) + 10px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(8px, 1.1vw, 18px);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

body.users-builder-mode .map-stage > .users-builder-admin-grid > .users-appearance-admin-panel,
body.users-builder-mode .map-stage > .users-builder-admin-grid > .panel {
  position: relative !important;
  inset: auto !important;
  display: block;
  align-self: stretch;
  width: auto !important;
  min-width: 0;
  max-width: none !important;
  height: auto;
  min-height: 0;
  max-height: 100% !important;
  margin: 0;
  overflow: auto;
  transform: none !important;
  box-sizing: border-box;
  pointer-events: auto;
}

/* Keep the Users tabs, device preview, and current theme outside the one
   scrolling region when the admin panels are moved into the device frame. */
body.users-builder-mode .map-stage > .users-builder-admin-grid > .panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

body.users-builder-mode .map-stage > .users-builder-admin-grid > .panel > .panel-tabs,
body.users-builder-mode .map-stage > .users-builder-admin-grid > .panel > .users-device-preview-toolbar,
body.users-builder-mode .map-stage > .users-builder-admin-grid > .panel > .panel-footer-theme {
  flex: 0 0 auto;
}

body.users-builder-mode .map-stage > .users-builder-admin-grid > .panel > .panel-tab-panels {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* Media presentation editor */
.youtube-media-entry,
.media-style-heading-row,
.media-fullscreen-row,
.media-layout-edit-grid,
.media-layout-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 6px;
}

.youtube-media-entry button,
.media-style-heading-row > label:first-child {
  min-width: 0;
}

.media-use-default-toggle,
.media-fullscreen-row > label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  white-space: nowrap;
}

.media-style-control-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 7px;
}

.media-type-picker {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  margin: 5px 0 7px;
}

.media-type-picker button {
  min-width: 0;
  min-height: 34px;
  padding: 3px;
  font-size: 1rem;
}

.media-type-picker button.is-selected {
  border-color: var(--control);
  background: var(--control);
  color: var(--control-text);
}

.media-style-control-grid label,
.media-layout-edit-grid label {
  display: grid;
  gap: 3px;
  min-width: 0;
  color: var(--muted);
  font-size: .68rem;
  font-weight: 850;
}

.media-style-control-grid input,
.media-style-control-grid select,
.media-layout-edit-grid input {
  min-width: 0;
  width: 100%;
}

.media-layout-preset-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 6px 0;
}

.media-layout-preset-card {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 4px;
  min-width: 0;
  padding: 4px;
  aspect-ratio: 4 / 3;
}
.media-layout-preset-name { overflow: hidden; color: var(--ink); font-size: .56rem; font-weight: 850; line-height: 1.1; text-align: center; text-overflow: ellipsis; white-space: nowrap; }

.media-layout-preset-card.is-selected {
  border-color: var(--control);
  box-shadow: inset 0 0 0 1px var(--control);
}

.media-layout-mini-preview {
  display: block;
  width: 100%;
  height: 100%;
  padding: 3px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--ink), transparent 86%);
}

.media-layout-edit-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.media-layout-slot-editor { display: grid; gap: 6px; margin-top: 7px; padding-top: 7px; border-top: 1px solid color-mix(in srgb, var(--line), transparent 28%); }
.media-layout-slot-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .74rem; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; }
.media-layout-slot-heading button { min-height: 27px; padding: 3px 8px; font-size: .65rem; }
.media-layout-slot-list { display: grid; gap: 5px; }
.media-layout-slot-row { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 5px; }
.media-layout-slot-row :is(select, input, button) { min-height: 29px; min-width: 0; }

.media-layout-frame-toggle {
  display: flex !important;
  flex-direction: row;
  align-items: center;
  align-self: end;
  min-height: 31px;
}

.media-combo-preview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: var(--media-combo-gap, 7px);
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: var(--media-combo-padding, 10px);
  overflow: hidden;
  border-radius: var(--media-combo-radius, 12px);
}

.media-combo-preview.has-containing-frame {
  border: 1px solid color-mix(in srgb, currentColor, transparent 48%);
  background: color-mix(in srgb, currentColor, transparent 92%);
  box-shadow: inset 0 1px 2px rgb(255 255 255 / .18), 0 4px 13px rgb(0 0 0 / .18);
}

.media-combo-slot {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, currentColor, transparent 60%);
  border-radius: max(3px, calc(var(--media-combo-radius, 12px) * .45));
  background: color-mix(in srgb, currentColor, transparent 86%);
}

.media-combo-slot-image {
  background:
    radial-gradient(circle at 70% 28%, #f5d477 0 8%, transparent 9%),
    linear-gradient(145deg, transparent 42%, #708f73 43% 62%, transparent 63%),
    linear-gradient(35deg, #466d72 0 45%, #aac8be 46%);
}

.media-combo-slot-text {
  align-content: center;
  justify-items: stretch;
  gap: 7%;
  padding: 9%;
  background: color-mix(in srgb, var(--media-style-background, #fff), #fff 14%);
}

.media-combo-slot-text i {
  display: block;
  width: 100%;
  height: 9%;
  min-height: 2px;
  border-radius: 99px;
  background: currentColor;
  opacity: .56;
  font-size: clamp(.45rem, 1vw, .72rem);
  font-style: normal;
}

.media-combo-slot-text i:first-child { height: auto; background: none; opacity: .9; font-weight: 850; }
.media-combo-slot-video { background: linear-gradient(145deg, #1b2632, #4b6577); color: #fff; font-size: 1.35em; }
.media-combo-slot-audio { grid-auto-flow: column; gap: 5px; padding: 8%; background: linear-gradient(145deg, #302850, #745c96); color: #fff; }
.media-combo-slot-audio i { font-style: normal; letter-spacing: .08em; }
.media-combo-story { grid-template-columns: 1fr; grid-template-rows: 3fr 1fr; }
.media-combo-split { grid-template-columns: 1.45fr 1fr; grid-template-rows: 1fr; }
.media-combo-postcard { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.media-combo-postcard .media-combo-slot { grid-area: 1 / 1; }
.media-combo-postcard .media-combo-slot-text { align-self: end; z-index: 2; height: 36%; margin: 5%; color: #fff; background: rgb(15 25 35 / .74); }
.media-combo-journal { grid-template-columns: repeat(2, 1fr); grid-template-rows: 1.3fr .7fr; }
.media-combo-journal .media-combo-slot-text { grid-column: 1 / -1; }
.media-combo-gallery { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr .45fr; }
.media-combo-gallery .media-combo-slot-text { grid-column: 1 / -1; }
.media-combo-feature { grid-template-columns: 1.65fr 1fr; grid-template-rows: repeat(2, 1fr); }
.media-combo-feature .media-combo-slot-image { grid-row: 1 / -1; }
.media-combo-video-note, .media-combo-audio-story { grid-template-columns: 1.5fr 1fr; grid-template-rows: 1fr; }
.media-combo-audio-story { grid-template-rows: 1fr .55fr; }
.media-combo-audio-story .media-combo-slot-image { grid-row: 1 / -1; }

.media-layout-mini-preview .media-combo-preview {
  --media-combo-gap: 2px !important;
  --media-combo-padding: 3px !important;
  --media-combo-radius: 4px !important;
}

.media-layout-mini-preview .media-combo-slot-text { gap: 2px; padding: 3px; }
.media-layout-mini-preview .media-combo-slot-text i:first-child { font-size: 0; }
.media-layout-mini-preview .media-combo-slot-video { font-size: .8rem; }

.media-layout-actions {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
}

.media-layout-actions button { min-width: 0; padding-inline: 4px; }

.media-style-preview {
  position: absolute;
  inset: 0;
  z-index: 1450;
  overflow: visible;
  pointer-events: none;
}

.media-style-preview[hidden] { display: none; }

.splash-media-preview { position: absolute; z-index: 1500; inset: 0; display: grid; place-items: center; padding: clamp(18px, 3vw, 48px); background: #111d22; pointer-events: auto; isolation: isolate; }
.splash-media-preview[hidden] { display: none; }
.splash-media-preview[data-pattern="dots"] { background-image: none; }
.splash-media-preview[data-pattern="grid"] { background-image: none; }
.splash-media-device { position: relative; width: min(100%, 1180px); height: min(100%, 760px); aspect-ratio: 16 / 9; overflow: hidden; border: 2px solid rgb(255 255 255 / .75); border-radius: 24px; background-color: var(--welcome-background, #16333c); background-image: var(--welcome-background-image, none); background-position: center; background-size: cover; box-shadow: 0 18px 55px rgb(0 0 0 / .48); color: #fffaf0; text-wrap: balance; }
.splash-media-preview[data-material="leather"] .splash-media-device { background-image: url("assets/textures/pebbled-leather-gray.png"); background-blend-mode: multiply; background-size: var(--leather-texture-size); }
.splash-media-preview[data-material="paper"] .splash-media-device { background-image: url("assets/textures/transparent/natural-paper.png"); background-blend-mode: multiply; background-size: 440px 440px; }
.splash-media-preview[data-pattern="dots"] .splash-media-device { background-image: radial-gradient(rgb(255 255 255 / .22) 1px, transparent 1px); background-size: 17px 17px; }
.splash-media-preview[data-pattern="grid"] .splash-media-device { background-image: linear-gradient(rgb(255 255 255 / .15) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .15) 1px, transparent 1px); background-size: 28px 28px; }
.splash-media-dimensions { position: absolute; top: 10px; left: 12px; font-size: .66rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; color: #fff9; }
.splash-media-device .welcome-editor-item { position: absolute; display: grid; place-items: center; transform-origin: center; cursor: move; }
.splash-media-device .welcome-editor-item.welcome-editor-heading { align-items: center; color: #fffaf0; font-size: clamp(1.8rem, 5vw, 5.8rem); font-weight: 900; line-height: .94; }
.splash-media-device .welcome-editor-item.welcome-editor-eyebrow { color: #ffd77a; font-size: clamp(.65rem, 1.2vw, 1rem); font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.splash-media-device .welcome-editor-item.welcome-editor-text { color: #fffaf0; font-size: clamp(.85rem, 1.4vw, 1.3rem); line-height: 1.45; text-align: center; }
.splash-media-device .welcome-editor-item.welcome-editor-section { overflow: hidden; border: 2px solid rgb(255 255 255 / .5); background: rgb(4 18 24 / .68); box-shadow: inset 0 1px rgb(255 255 255 / .16); }
.splash-media-device .welcome-editor-item img, .splash-media-device .welcome-editor-item video { width: 100%; height: 100%; object-fit: cover; }
.splash-media-device .welcome-editor-item .welcome-preview-section { width: 100%; height: 100%; display: grid; place-items: center; }
.splash-media-device .welcome-editor-item .welcome-preview-section strong { position: relative; z-index: 1; padding: .5rem; }
.splash-media-device .welcome-preview-button { padding: .65em 1.2em; border: 1px solid rgb(255 255 255 / .65); border-radius: .55em; background: #253d4b; color: #fff; font-weight: 850; }
.welcome-rotate-handle { position: absolute; top: -18px; left: 50%; width: 12px; height: 12px; border: 2px solid #fff; border-radius: 50%; background: #ff64ae; box-shadow: 0 1px 3px #0008; cursor: grab; transform: translateX(-50%); }

.media-style-placeholder {
  position: absolute;
  box-sizing: border-box;
  min-width: 70px;
  min-height: 55px;
  padding: var(--media-style-padding);
  overflow: visible;
  border: var(--media-style-border-width) solid var(--media-style-border);
  border-radius: var(--media-style-radius);
  background: var(--media-style-background);
  box-shadow: 0 calc(9px * var(--media-style-shadow)) calc(35px * var(--media-style-shadow)) rgb(0 0 0 / calc(.45 * var(--media-style-shadow)));
  color: var(--media-style-text);
  cursor: move;
  pointer-events: auto;
  touch-action: none;
}

.media-style-placeholder-badge {
  position: absolute;
  bottom: calc(100% + 3px);
  left: 0;
  padding: 2px 6px;
  border-radius: 4px;
  background: #fffaf0;
  color: #18222e;
  font-size: .68rem;
  font-weight: 900;
  white-space: nowrap;
}

.media-style-placeholder-content {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: max(0px, calc(var(--media-style-radius) - var(--media-style-padding)));
  text-align: center;
}

.media-style-placeholder-content p { margin: 0; max-width: 34ch; }
.media-placeholder-play { font-size: clamp(1.7rem, 5vw, 4rem); color: #ff2a34; text-shadow: 0 2px 8px #0008; }
.media-placeholder-wave { font-size: clamp(1rem, 3vw, 2.4rem); letter-spacing: .12em; }

.media-style-handle {
  position: absolute;
  z-index: 4;
  width: 12px;
  height: 12px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #d83f8d;
  box-shadow: 0 1px 4px #0008;
}
.media-style-handle-n { top: -7px; left: calc(50% - 6px); cursor: ns-resize; }
.media-style-handle-ne { top: -7px; right: -7px; cursor: nesw-resize; }
.media-style-handle-e { top: calc(50% - 6px); right: -7px; cursor: ew-resize; }
.media-style-handle-se { right: -7px; bottom: -7px; cursor: nwse-resize; }
.media-style-handle-s { bottom: -7px; left: calc(50% - 6px); cursor: ns-resize; }
.media-style-handle-sw { bottom: -7px; left: -7px; cursor: nesw-resize; }
.media-style-handle-w { top: calc(50% - 6px); left: -7px; cursor: ew-resize; }
.media-style-handle-nw { top: -7px; left: -7px; cursor: nwse-resize; }

.media-viewer-frame {
  border-width: var(--media-style-border-width, 1px);
  border-color: var(--media-style-border, var(--line));
  border-radius: var(--media-style-radius, 12px);
  background: var(--media-style-background, #111827);
  color: var(--media-style-text, #fff);
  box-shadow: 0 18px calc(54px * var(--media-style-shadow, .48)) rgb(0 0 0 / .48);
}

.media-viewer-content {
  padding: var(--media-style-padding, 12px);
  background: var(--media-style-background, #090d14);
  color: var(--media-style-text, #fff);
}

.media-viewer-content img,
.media-viewer-content video,
.media-viewer-content iframe {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  border: 0;
  object-fit: var(--media-style-fit, contain);
}

.trip-media-preview iframe {
  width: 100%;
  min-height: 240px;
  border: 0;
  border-radius: 8px;
}

.map-stage.media-map-treatment-active #userMapViewport {
  opacity: var(--media-map-opacity, .62);
  filter: blur(var(--media-map-blur, 2px));
  mix-blend-mode: var(--media-map-blend, normal);
  transition: opacity 180ms ease, filter 180ms ease;
}

.user-layout-control-object input[type="color"] {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 2px;
}

.user-layout-control-object :where(.users-compact-control-name, label, strong) {
  color: var(--user-control-label-color, #18222e);
}

body.users-builder-mode:is(
  [data-user-device-preview^="phone"],
  [data-user-device-preview^="tablet"]
) .map-stage > .users-builder-admin-grid:not([hidden]) {
  inset: 0;
  display: block;
  overflow: visible;
  pointer-events: none;
}

/* On compact canvases the two editor panels occupy the stage, rather than
   overflowing past the map viewport. They remain ordinary editor chrome and
   are never part of the public USER rendering. */
@media (max-width: 980px) {
  body.users-builder-mode .map-stage > .users-builder-admin-grid:not([hidden]) {
    inset: 12px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(2, minmax(260px, 1fr));
    overflow: auto;
    pointer-events: auto;
  }
  body.users-builder-mode .map-stage > .users-builder-admin-grid > :is(.users-appearance-admin-panel, .panel) {
    min-height: 260px;
    max-height: none !important;
  }
}

body.users-builder-mode:is(
  [data-user-device-preview^="phone"],
  [data-user-device-preview^="tablet"]
) .map-stage > .users-builder-admin-grid > .users-appearance-admin-panel,
body.users-builder-mode:is(
  [data-user-device-preview^="phone"],
  [data-user-device-preview^="tablet"]
) .map-stage > .users-builder-admin-grid > .panel {
  position: absolute !important;
  top: max(14px, var(--user-device-preview-top)) !important;
  bottom: max(14px, var(--user-device-preview-bottom)) !important;
  width: clamp(220px, calc(var(--user-device-preview-left) - 28px), 380px) !important;
  max-height: none !important;
}

body.users-builder-mode:is(
  [data-user-device-preview^="phone"],
  [data-user-device-preview^="tablet"]
) .map-stage > .users-builder-admin-grid > .users-appearance-admin-panel {
  right: auto !important;
  left: 14px !important;
}

body.users-builder-mode:is(
  [data-user-device-preview^="phone"],
  [data-user-device-preview^="tablet"]
) .map-stage > .users-builder-admin-grid > .panel {
  right: 14px !important;
  left: auto !important;
}

/* UI canvas: authored gizmos only. Editor controls remain outside the map and
   legacy public controls disappear once an authored layout exists. */
body.users-builder-mode #usersBuilderAdminGrid:not([hidden]) {
  display: grid !important;
}
/* UI mode reserves a right work panel and a bottom appearance panel, leaving
   the remaining canvas unobstructed for authored device/view bounds. */
body.users-builder-mode .map-stage > .users-builder-admin-grid:not([hidden]) {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 38%);
  grid-template-rows: minmax(0, 1fr) minmax(210px, 36%);
}
body.users-builder-mode .map-stage > .users-builder-admin-grid > .users-appearance-admin-panel {
  grid-column: 1;
  grid-row: 2;
}
body.users-builder-mode .map-stage > .users-builder-admin-grid > .panel {
  grid-column: 2;
  grid-row: 1 / 3;
}
@media (max-width: 980px) {
  body.users-builder-mode .map-stage > .users-builder-admin-grid:not([hidden]) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(2, minmax(230px, 1fr));
  }
  body.users-builder-mode .map-stage > .users-builder-admin-grid > :is(.users-appearance-admin-panel, .panel) {
    grid-column: 1;
    grid-row: auto;
  }
}
/* UI is a layout canvas. Keep authoring panels and the shared disabled wheel,
   but hide map-facing utility UI until it has an intentional UI-tab home. */
body.users-builder-mode .map-top-utility-bar,
body.users-builder-mode #toggleSelectionShortcutDock {
  display: none !important;
}
body.users-builder-mode .map-stage :is(.user-map-viewport, .user-frame-layout-layer, .user-device-frame, .map-bounds-overlay, .device-bounds-overlay, .user-map-viewport-resize-layer, .user-device-preview-resize-layer) {
  transform: scale(var(--ui-canvas-safe-scale, 1));
  transform-origin: center;
}
body.user-site-mode.has-authored-user-layout #userStoryDock,
body.user-site-mode.has-authored-user-layout .user-site-controls,
body.user-site-mode.has-authored-user-layout .playback-panel,
body.user-site-mode.has-authored-user-layout .day-edge-control {
  display: none !important;
}

/* Final palette pass: clear separation and readable text in dark UI. */
.dark-ui-theme .panel-section[data-section-color] { background: linear-gradient(90deg, color-mix(in srgb, var(--section-accent), transparent 74%), transparent 52%), color-mix(in srgb, #080d12 90%, var(--section-accent) 10%) !important; color: #f8fbfd !important; }
.dark-ui-theme .panel-section[data-section-color] :is(.section-collapse-button, .section-collapse-title, .section-collapse-arrow, .style-helper, .compact-section-note, p, small, label, output) { color: #f8fbfd !important; }
.panel-footer-theme { min-height: 40px; align-content: center; background: color-mix(in srgb, var(--pinned-tools-accent, var(--control)), #101719 68%) !important; }
.panel-footer-tools { width: 100%; }
.dark-ui-theme .panel-footer-theme { background: color-mix(in srgb, var(--pinned-tools-accent, var(--control)), #fff 72%) !important; color: #14212a !important; }
.dark-ui-theme .panel-footer-theme :is(span, label, small, button) { color: #14212a !important; text-shadow: none; }
.dark-ui-theme .panel-footer-theme .pinned-footer-title { background: color-mix(in srgb, var(--pinned-tools-accent, var(--control)), #fff 34%) !important; color: #15212a !important; }

/* Keep the compact Tools strip on one row even after the device-preview
   layout rules declared earlier in this sheet. */
.panel-footer-theme .users-device-preview-toolbar { grid-template-columns: auto minmax(92px, 1fr) !important; gap: 5px !important; padding: 0 8px; border-inline: 1px solid color-mix(in srgb, currentColor, transparent 68%); }
.panel-footer-theme .users-device-preview-toolbar > span { display: block !important; color: inherit !important; }
.panel-footer-theme .users-device-preview-toolbar select { grid-column: auto !important; min-width: 92px; }

/* The pinned rows carry the color themselves; their shared containers stay
   transparent so no white card or synchronized outline flashes through. */
.pinned-journey-section,
.panel-footer-theme {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.pinned-subsection { padding: 0 !important; border: 0 !important; }

/* Rebuilt Tools: it is the same details/summary primitive as the three upper
   pinned rows. Its one deliberate difference is a mirrored open direction. */
.pinned-tools-section {
  display: grid !important;
  margin: 0 !important;
  overflow: visible !important;
}
.pinned-tools-details { width: 100%; }
.pinned-tools-details > summary {
  margin-inline: -3px;
  padding: 3px 5px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--pinned-tools-accent, var(--control)), #101719 64%) !important;
  box-shadow: inset 3px 0 0 var(--pinned-tools-accent, var(--control)) !important;
  color: #f7fbfc !important;
}
.dark-ui-theme .pinned-tools-details > summary {
  background: color-mix(in srgb, var(--pinned-tools-accent, var(--control)), #fff 34%) !important;
  color: #15212a !important;
}
.pinned-tools-details > summary::before { transform: rotate(-90deg); }
.pinned-tools-details[open] { display: flex; flex-direction: column-reverse; }
.pinned-tools-details[open] > summary::before { transform: rotate(0deg); }
.pinned-tools-details > summary { grid-template-columns: auto minmax(116px, 1fr) auto auto auto; column-gap: 3px; }
.pinned-tools-details .users-device-preview-toolbar { display: grid !important; grid-template-columns: auto minmax(92px, 1fr) !important; gap: 5px !important; padding: 0 8px; border-inline: 1px solid color-mix(in srgb, currentColor, transparent 68%); }
.pinned-tools-details .users-device-preview-toolbar > span { display: block !important; color: inherit !important; font-size: .64rem; font-weight: 900; text-transform: uppercase; }
.pinned-tools-details .users-device-preview-toolbar select { grid-column: auto !important; min-width: 92px; min-height: 30px; }
.pinned-tools-details .show-map-bounds-toggle { display: flex; align-items: center; gap: 3px; min-height: 30px; padding: 0 6px; color: inherit; font-size: .58rem; font-weight: 800; line-height: 1; text-transform: uppercase; }
.pinned-tools-autofit { min-height: 28px; padding: 3px 6px; border: 1px solid color-mix(in srgb, currentColor, transparent 45%); border-radius: 3px; background: transparent; color: inherit; font: 800 .6rem/1 var(--font, inherit); text-transform: uppercase; cursor: pointer; }

/* The device choices are short; keep the entire Tools strip on one line. */
.pinned-tools-details > summary,
.pinned-tools-details[open] > summary {
  display: grid !important;
  grid-template-columns: auto auto minmax(150px, 190px) auto auto auto !important;
  grid-template-rows: 30px;
  column-gap: 3px;
  white-space: nowrap;
}
.pinned-tools-details > summary::before { grid-column: 1; grid-row: 1; align-self: center; }
.pinned-tools-details > summary > span { display: block !important; grid-column: 2 !important; grid-row: 1; align-self: center; }
.pinned-tools-details > summary > .users-device-preview-toolbar {
  grid-template-columns: auto minmax(0, 1fr) !important;
  grid-column: 3 !important;
  grid-row: 1;
  width: 100%;
  min-width: 0;
}
.pinned-tools-details > summary > .users-device-preview-toolbar select { min-width: 0 !important; width: 100%; }
.pinned-tools-details > summary > .show-map-bounds-toggle { grid-row: 1; padding-inline: 4px; }
.pinned-tools-details > summary > .show-map-bounds-toggle:nth-of-type(1) { grid-column: 4; }
.pinned-tools-details > summary > .show-map-bounds-toggle:nth-of-type(2) { grid-column: 5; }
.pinned-tools-details > summary > .pinned-tools-autofit { grid-column: 6; grid-row: 1; }
.pinned-tools-content { padding: 6px 7px; border-bottom: 1px solid color-mix(in srgb, var(--pinned-tools-accent, var(--control)), #101719 42%); background: color-mix(in srgb, var(--pinned-tools-accent, var(--control)), #101719 82%); color: #f7fbfc; }
.pinned-tools-content .project-export-status { position: static !important; inset: auto !important; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 5px; width: auto !important; max-width: none !important; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: inherit; }
.pinned-tools-content .project-export-status > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .68rem; font-weight: 850; }
.pinned-tools-content .project-export-status button { min-height: 30px; padding: 4px 7px; font-size: .68rem; font-weight: 900; }
.dark-ui-theme .pinned-tools-content { background: color-mix(in srgb, var(--pinned-tools-accent, var(--control)), #fff 76%); border-bottom-color: color-mix(in srgb, var(--pinned-tools-accent, var(--control)), #fff 38%); color: #15212a; }

/* Tools is a pinned section, not a map overlay. Its open details remain
   directly beneath the compact row, just like the top pinned sections. */
.panel-footer-theme .panel-footer-details {
  position: static !important;
  inset: auto !important;
  width: auto !important;
  max-width: none !important;
  grid-column: 1 / -1;
}
.panel-footer-theme.is-tools-open .panel-footer-details { display: grid !important; }
.panel-footer-theme .project-export-status { border-radius: 0; background: transparent; box-shadow: none; }

/* Make the compact Tools row read as one more pinned subsection. */
.panel-footer-theme {
  min-height: 0 !important;
  gap: 3px;
  padding: 3px 4px;
  border-radius: 4px;
  box-shadow: inset 3px 0 0 var(--pinned-tools-accent, var(--control));
}
.panel-footer-tools { min-height: 34px; }

/* Users has no active journey/map context, but its device selector must remain
   available in the same bottom-pinned Tools strip. */
body.users-builder-mode .pinned-tools-section {
  position: sticky;
  bottom: 0;
  z-index: 100;
  display: grid !important;
}

/* Compact, fixed rail slots: details can grow without their tabs growing or
   colliding. The accent variables are assigned by Section Styles. */
.pinned-side-tab {
  height: 28px !important;
  min-height: 28px !important;
  padding: 3px 4px !important;
  background: color-mix(in srgb, var(--pinned-tab-accent, var(--control)), #101719 64%) !important;
  border-color: var(--pinned-tab-accent, var(--control)) !important;
  color: #f7fbfc !important;
}
.pinned-side-tab[data-pinned-section-toggle="trip"] { --pinned-tab-accent: var(--pinned-trip-accent, var(--control)); }
.pinned-side-tab[data-pinned-section-toggle="journey"] { --pinned-tab-accent: var(--pinned-journey-accent, var(--control)); }
.pinned-side-tab[data-pinned-section-toggle="stop-day"] { --pinned-tab-accent: var(--pinned-stop-day-accent, var(--control)); }
.pinned-side-tab[data-pinned-section-toggle="route"] { --pinned-tab-accent: var(--pinned-route-accent, var(--control)); }
.pinned-side-tab:not(.is-active) { opacity: .58; }
.pinned-trip-details > summary {
  background: color-mix(in srgb, var(--pinned-trip-accent, var(--control)), #101719 64%) !important;
  color: #f7fbfc !important;
  box-shadow: inset 3px 0 0 var(--pinned-trip-accent, var(--control)) !important;
}
.dark-ui-theme .pinned-trip-details > summary { background: color-mix(in srgb, var(--pinned-trip-accent, var(--control)), #fff 34%) !important; color: #15212a !important; }

/* The primary navigation shows both the direction and the destination. */
.playback-panel > #reverseRoute,
.playback-panel > #playRoute {
  min-height: 48px;
  flex-direction: column;
  gap: 1px;
  line-height: 1.05;
}
.playback-panel > #reverseRoute .material-symbols-rounded,
.playback-panel > #playRoute .material-symbols-rounded { position: absolute; }
.playback-panel > #reverseRoute .material-symbols-rounded { left: 9px; }
.playback-panel > #playRoute .material-symbols-rounded { right: 9px; }
.playback-panel .playback-command { font-size: .7rem; font-weight: 900; text-transform: uppercase; }
.playback-panel .playback-target { max-width: 100%; overflow: hidden; font-size: .76rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }

/* Device replaces the generic Tools title. Its picker takes the reclaimed
   row width, separated from the title by the existing single divider. */
.pinned-footer-tab {
  --pinned-tab-accent: var(--pinned-tools-accent, var(--control));
  background: color-mix(in srgb, var(--pinned-tab-accent), #101719 64%) !important;
  border-color: var(--pinned-tab-accent) !important;
}
.pinned-tools-details > summary,
.pinned-tools-details[open] > summary { grid-template-columns: auto auto minmax(0, 1fr) auto auto auto !important; }
.pinned-tools-details > summary > .users-device-preview-toolbar {
  grid-template-columns: minmax(0, 1fr) !important;
  border-left: 1px solid color-mix(in srgb, currentColor, transparent 68%);
  border-right: 0 !important;
}
.pinned-tools-details > summary > .users-device-preview-toolbar > span { display: none !important; }

/* Every pinned selector uses the same label and picker tracks. This keeps the
   dropdown edges straight while leaving a little breathing room after each
   heading. */
.pinned-subsection > summary,
.pinned-subsection[open] > summary,
.pinned-subsection:not([open]) > summary {
  grid-template-columns: 14px 76px minmax(0, 1fr) auto !important;
  column-gap: 6px !important;
}
.pinned-subsection > summary > span,
.pinned-subsection[open] > summary > span,
.pinned-subsection:not([open]) > summary > span { grid-column: 2 !important; }
.pinned-subsection > summary .pinned-summary-picker,
.pinned-subsection[open] > summary .pinned-summary-picker { grid-column: 3 !important; min-width: 0; }
.pinned-route-details > summary { position: relative; }
.pinned-route-details > summary .pinned-summary-picker { grid-column: 3 / 5 !important; padding-right: 52px; }
.pinned-route-details > summary .pinned-gps-toggle {
  position: absolute;
  right: 4px;
  top: 50%;
  z-index: 1;
  transform: translateY(-50%);
  min-height: 24px;
  padding-left: 5px;
  background: inherit;
}

/* Dark editor surfaces always pair light text with a genuinely dark control
   fill; this prevents palette accents from producing low-contrast labels. */
.dark-ui-theme .panel-section { color: #f7fbfc !important; }
.dark-ui-theme .panel-section :is(label, legend, output, strong, em, small, p, .style-helper, .compact-section-note, .section-collapse-button, .section-collapse-title) { color: #f7fbfc !important; text-shadow: 0 1px 1px rgb(0 0 0 / .48); }
.dark-ui-theme .panel-section :is(input:not([type="range"]):not([type="color"]), select, textarea) {
  background: #101a22 !important;
  border-color: #9db2bd !important;
  color: #f8fbfd !important;
}
.dark-ui-theme .panel-section :is(input, textarea)::placeholder { color: #c6d4da !important; opacity: 1; }
.dark-ui-theme .panel-section button:not(.section-collapse-button):not(.section-drag-handle):not(.color-swatch) {
  background-color: #172630 !important;
  border-color: #9db2bd !important;
  color: #f8fbfd !important;
}

/* The public map must occupy the authored inner viewport, never the entire
   outer device bounds. This deliberately wins over the legacy full-surface
   user-site rule declared earlier in the stylesheet. */
body.user-site-mode .user-map-viewport {
  inset:
    calc(var(--user-device-preview-top, 0px) + var(--user-map-viewport-top))
    calc(var(--user-device-preview-right, 0px) + var(--user-map-viewport-right))
    calc(var(--user-device-preview-bottom, 0px) + var(--user-map-viewport-bottom))
    calc(var(--user-device-preview-left, 0px) + var(--user-map-viewport-left)) !important;
  border-radius: var(--user-map-viewport-radius) !important;
}

/* Page-edit modes reserve the center for the actual public page. The editor
   panels deliberately live beside that device boundary, never on top of it. */
body.users-builder-mode.welcome-page-edit-mode .map-stage {
  --user-device-preview-left: clamp(265px, 22vw, 390px) !important;
  --user-device-preview-right: clamp(265px, 22vw, 390px) !important;
  --user-device-preview-top: clamp(28px, 5vh, 58px) !important;
  --user-device-preview-bottom: clamp(54px, 9vh, 92px) !important;
}

body.users-builder-mode.welcome-page-edit-mode .map-stage > .users-builder-admin-grid:not([hidden]) {
  inset: 14px !important;
  display: block !important;
  overflow: visible;
  pointer-events: none;
}

body.users-builder-mode.welcome-page-edit-mode .map-stage > .users-builder-admin-grid > .users-appearance-admin-panel,
body.users-builder-mode.welcome-page-edit-mode .map-stage > .users-builder-admin-grid > .panel {
  position: absolute !important;
  top: 14px !important;
  bottom: 14px !important;
  width: clamp(230px, calc(var(--user-device-preview-left) - 28px), 365px) !important;
  max-height: none !important;
  pointer-events: auto;
  transition: transform 180ms ease, opacity 180ms ease;
}

/* A global bounds check uses the same viewport geometry that the Users tab
   saves for the selected device, without turning the map into the active UI. */
.map-bounds-overlay {
  position: absolute;
  z-index: 790;
  inset:
    calc(var(--user-device-preview-top, 0px) + var(--user-map-viewport-top))
    calc(var(--user-device-preview-right, 0px) + var(--user-map-viewport-right))
    calc(var(--user-device-preview-bottom, 0px) + var(--user-map-viewport-bottom))
    calc(var(--user-device-preview-left, 0px) + var(--user-map-viewport-left));
  pointer-events: none;
  border: 3px solid rgb(255 255 255 / .92);
  border-radius: var(--user-map-viewport-radius);
  box-shadow: 0 0 0 1px rgb(10 31 40 / .72), 0 6px 20px rgb(0 0 0 / .26);
}
.map-bounds-overlay::before {
  content: attr(data-device);
  position: absolute;
  top: -1.75rem;
  left: 0;
  padding: .2rem .5rem;
  border-radius: .35rem;
  background: rgb(10 31 40 / .9);
  color: #fff;
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .05em;
  text-transform: uppercase;
}
body[data-user-device-preview^="desktop"] .map-bounds-overlay { border-radius: 4px; }
body[data-user-device-preview^="tablet"] .map-bounds-overlay { border-radius: 22px; }
body[data-user-device-preview^="phone"] .map-bounds-overlay { border-radius: 34px; }

/* Preview guides describe separate rectangles: outer device shell and inner map. */
.device-bounds-overlay {
  position: absolute;
  z-index: 789;
  inset: var(--user-device-preview-top, 0px) var(--user-device-preview-right, 0px) var(--user-device-preview-bottom, 0px) var(--user-device-preview-left, 0px);
  pointer-events: none;
  border: 2px dashed rgb(117 221 255 / .92);
  border-radius: var(--user-device-radius);
  box-shadow: 0 0 0 1px rgb(10 31 40 / .72);
}
.device-bounds-overlay::before {
  content: attr(data-device);
  position: absolute;
  top: -1.75rem;
  left: 0;
  padding: .2rem .5rem;
  border-radius: .35rem;
  background: rgb(10 31 40 / .92);
  color: #fff;
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.device-bounds-overlay.is-device-aligned-x,
.device-bounds-overlay.is-device-aligned-y { border-color: #42df85; box-shadow: 0 0 0 2px rgb(66 223 133 / .34), 0 0 12px rgb(66 223 133 / .5); }

/* A self-contained editor copy of the Users device/viewport composition.
   It is not part of the live map frame and only ever scales uniformly. */
.editor-preview-guide {
  position: absolute;
  z-index: 790;
  box-sizing: border-box;
  border: 2px dashed rgb(117 221 255 / .92);
  border-radius: 6px;
  box-shadow: 0 0 0 1px rgb(10 31 40 / .72);
  transform-origin: center;
  pointer-events: none;
}
.editor-preview-guide-viewport {
  position: absolute;
  box-sizing: border-box;
  border: 3px solid rgb(255 255 255 / .94);
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgb(10 31 40 / .72), 0 5px 16px rgb(0 0 0 / .24);
  pointer-events: none;
}
.editor-preview-guide-label {
  position: absolute;
  top: -1.75rem;
  left: 0;
  max-width: min(32rem, 100vw - 2rem);
  padding: .2rem .5rem;
  overflow: hidden;
  border-radius: .35rem;
  background: rgb(10 31 40 / .92);
  color: #fff;
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .05em;
  line-height: 1.15;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.editor-preview-guide-handle {
  position: absolute;
  z-index: 3;
  display: none;
  box-sizing: border-box;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: grab;
}
.editor-preview-guide-scale { --guide-hit-area: 12px; }
.editor-preview-guide-scale-top { top: calc(var(--guide-hit-area) / -2); right: 0; left: 0; height: var(--guide-hit-area); cursor: ns-resize; }
.editor-preview-guide-scale-right { top: 0; right: calc(var(--guide-hit-area) / -2); bottom: 0; width: var(--guide-hit-area); cursor: ew-resize; }
.editor-preview-guide-scale-bottom { right: 0; bottom: calc(var(--guide-hit-area) / -2); left: 0; height: var(--guide-hit-area); cursor: ns-resize; }
.editor-preview-guide-scale-left { top: 0; bottom: 0; left: calc(var(--guide-hit-area) / -2); width: var(--guide-hit-area); cursor: ew-resize; }
.editor-preview-guide-viewport-scale-top { top: -6px; right: 0; left: 0; height: 12px; cursor: ns-resize; }
.editor-preview-guide-viewport-scale-right { top: 0; right: -6px; bottom: 0; width: 12px; cursor: ew-resize; }
.editor-preview-guide-viewport-scale-bottom { right: 0; bottom: -6px; left: 0; height: 12px; cursor: ns-resize; }
.editor-preview-guide-viewport-scale-left { top: 0; bottom: 0; left: -6px; width: 12px; cursor: ew-resize; }
.editor-preview-guide-move { top: 50%; left: 50%; display: none; width: 26px; height: 26px; border: 1px solid rgb(255 255 255 / .85); border-radius: 50%; background: rgb(10 31 40 / .9); font: 800 .8rem/1 system-ui, sans-serif; transform: translate(-50%, -50%); }
body.show-map-bounds:not(.users-builder-mode).is-device-preview-unlocked .editor-preview-guide-scale { display: block; pointer-events: auto; }
body.show-map-bounds:not(.users-builder-mode).is-device-preview-unlocked .editor-preview-guide-move { display: grid; place-items: center; pointer-events: auto; }
/* Editor guides are free preview compositions; do not clip their outer device
   rectangle to the map stage when it is moved or uniformly scaled. */
body.show-map-bounds:not(.users-builder-mode) .map-stage { overflow: visible; }
.user-device-preview-resize-layer.is-device-aligned-x::before,
.user-device-preview-resize-layer.is-device-aligned-y::after { content: ""; position: absolute; z-index: 3; pointer-events: none; background: #42df85; box-shadow: 0 0 7px #42df85; }
.user-device-preview-resize-layer.is-device-aligned-x::before { top: -12px; bottom: -12px; left: 50%; width: 2px; }
.user-device-preview-resize-layer.is-device-aligned-y::after { left: -12px; right: -12px; top: 50%; height: 2px; }
body[data-user-device-preview^="desktop"] .device-bounds-overlay { border-radius: 6px; }
body[data-user-device-preview^="tablet"] .device-bounds-overlay { border-radius: 26px; }
body[data-user-device-preview^="phone"] .device-bounds-overlay { border-radius: 44px; }

body.users-builder-mode.welcome-page-edit-mode .map-stage > .users-builder-admin-grid > .users-appearance-admin-panel {
  left: 14px !important;
  right: auto !important;
}

body.users-builder-mode.welcome-page-edit-mode .map-stage > .users-builder-admin-grid > .panel {
  left: auto !important;
  right: 14px !important;
}

@media (max-width: 940px) {
  body.users-builder-mode.welcome-page-edit-mode .map-stage {
    --user-device-preview-left: clamp(210px, 24vw, 265px) !important;
    --user-device-preview-right: clamp(210px, 24vw, 265px) !important;
  }
  body.users-builder-mode.welcome-page-edit-mode .map-stage > .users-builder-admin-grid > .users-appearance-admin-panel,
  body.users-builder-mode.welcome-page-edit-mode .map-stage > .users-builder-admin-grid > .panel {
    width: calc(var(--user-device-preview-left) - 22px) !important;
  }
}

/* Final runtime override: the public map follows the saved device geometry. */
body.user-site-mode .user-map-viewport {
  inset:
    calc(var(--user-device-preview-top, 0px) + var(--user-map-viewport-top))
    calc(var(--user-device-preview-right, 0px) + var(--user-map-viewport-right))
    calc(var(--user-device-preview-bottom, 0px) + var(--user-map-viewport-bottom))
    calc(var(--user-device-preview-left, 0px) + var(--user-map-viewport-left)) !important;
  border-radius: 18px;
}
body.user-site-mode #siteModeToggle {
  top: 35px;
  right: 42px;
  bottom: auto;
  left: auto;
  width: 48px;
  min-height: 58px;
  padding: 4px 6px 9px;
  transform: translateY(-62%);
  border-radius: 0 0 16px 16px;
  font-size: .58rem;
  line-height: 1;
  opacity: .38;
}
body.user-site-mode #siteModeToggle:hover,
body.user-site-mode #siteModeToggle:focus-visible {
  transform: translateY(-14%);
  opacity: .96;
}

/* Override the older builder-wide hide rule: this is the real USER-theme
   trigger and its popup stays inside the authored map viewport. */
body.users-builder-mode .map-stage #userMaterialControls {
  display: flex !important;
  position: absolute;
  z-index: 1201;
  top: calc(var(--user-device-preview-top, 0px) + var(--user-map-viewport-top, 0px) + 16px);
  right: calc(var(--user-device-preview-right, 0px) + var(--user-map-viewport-right, 0px) + 16px);
}
body.users-builder-mode .map-stage #userThemePanel {
  display: block !important;
  z-index: 1202;
  top: calc(var(--user-device-preview-top, 0px) + var(--user-map-viewport-top, 0px) + 14px);
  right: calc(var(--user-device-preview-right, 0px) + var(--user-map-viewport-right, 0px) + 14px);
  bottom: calc(var(--user-device-preview-bottom, 0px) + var(--user-map-viewport-bottom, 0px) + 14px);
  left: calc(var(--user-device-preview-left, 0px) + var(--user-map-viewport-left, 0px) + 14px);
  width: auto;
}
body.users-builder-mode .map-stage #userThemePanel[hidden] { display: none !important; }

/* Keep the bottom dock genuinely one row. Extra story/trip controls belong in
   their dedicated views, not beneath a fixed-height navigation panel. */
.playback-panel .story-navigation,
.playback-panel .trip-animation-launch {
  display: none !important;
}
.playback-panel {
  display: flex !important;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  min-height: 0;
  max-height: var(--playback-dock-height);
  overflow: hidden !important;
}
.playback-panel > #reverseRoute,
.playback-panel > #playRoute { flex: 0 1 160px; }
.playback-panel > .journey-progress { flex: 0 1 220px; min-width: 0; }