@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,500;0,600;0,700;1,500&family=Barlow:wght@400;500;600;700&family=Newsreader:ital,wght@1,400;1,500&display=swap");

:root {
  --dc-bg: #151516;
  --dc-bg-deep: #101011;
  --dc-surface: #1d1d1f;
  --dc-surface-raised: #232326;
  --dc-surface-soft: #19191b;
  --dc-border: rgba(255, 255, 255, 0.1);
  --dc-border-strong: rgba(255, 255, 255, 0.18);
  --dc-text: #f2f2f2;
  --dc-muted: #a7a7af;
  --dc-muted-strong: #c4c4ca;
  --dc-blue: #4169e1;
  --dc-blue-bright: #8eacff;
  --dc-blue-soft: rgba(65, 105, 225, 0.14);
  --dc-red: #ff3b4d;
  --dc-red-soft: rgba(255, 59, 77, 0.13);
  --dc-green: #4ad17e;
  --dc-amber: #e5ca7e;
  --dc-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  --dc-rail-width: 64px;
  --dc-rail-expanded: 208px;
  --dc-mobile-nav-height: 66px;
  --dc-topbar-height: 58px;
  --dc-radius-sm: 6px;
  --dc-radius-md: 10px;
  --dc-radius-lg: 14px;
  --dc-font-body: "Barlow", "Segoe UI", system-ui, sans-serif;
  --dc-font-display: "Barlow Condensed", Impact, sans-serif;
  --dc-font-editorial: "Newsreader", Georgia, serif;

  --clone-page-bg: var(--dc-bg);
  --clone-map-bg: var(--dc-bg-deep);
  --clone-map-border: var(--dc-border);
  --clone-panel-bg: var(--dc-surface);
  --clone-panel-border: var(--dc-border);
  --clone-card-bg: var(--dc-surface-raised);
  --clone-card-border: var(--dc-border);
  --clone-input-bg: #161618;
  --clone-input-border: var(--dc-border-strong);
  --clone-primary: var(--dc-blue);
  --clone-primary-hover: #3f67dc;
  --clone-primary-dim: var(--dc-blue-soft);
  --clone-primary-glow: rgba(65, 105, 225, 0.22);
  --clone-accent-2: var(--dc-amber);
  --clone-secondary: var(--dc-surface-soft);
  --clone-secondary-border: var(--dc-border);
  --clone-text: var(--dc-text);
  --clone-muted-text: var(--dc-muted);
  --clone-ready: var(--dc-green);
  --clone-warn: var(--dc-amber);
  --clone-error: var(--dc-red);
  --clone-target-marker: var(--dc-blue-bright);
  --clone-deploy-marker: var(--dc-amber);
  --clone-bus-marker: #ffb45b;
  --clone-jump-marker: var(--dc-green);
  --r-sm: var(--dc-radius-sm);
  --r-md: var(--dc-radius-md);
  --r-lg: var(--dc-radius-lg);
  --site-nav-height: var(--dc-topbar-height);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  scrollbar-width: thin;
  scrollbar-color: #45454c #171719;
}

html {
  color-scheme: dark;
  background: var(--dc-bg);
}

body {
  margin: 0;
  color: var(--dc-text);
  background:
    radial-gradient(70% 55% at 92% -10%, rgba(229, 202, 126, 0.08), transparent 58%),
    radial-gradient(70% 60% at -8% 108%, rgba(65, 105, 225, 0.08), transparent 60%),
    var(--dc-bg);
  font-family: var(--dc-font-body);
  font-size: 16px;
  line-height: 1.5;
}

body::before {
  inset: 0;
  width: auto;
  height: auto;
  border-radius: 0;
  background:
    linear-gradient(132deg, transparent 0 66%, rgba(229, 202, 126, 0.035) 66% 72%, transparent 72%),
    repeating-linear-gradient(132deg, transparent 0 94px, rgba(255, 255, 255, 0.025) 95px, transparent 96px);
  filter: none;
  opacity: 1;
}

body::after {
  left: -120px;
  bottom: -180px;
  width: 620px;
  height: 540px;
  border-radius: 0;
  background: linear-gradient(140deg, rgba(65, 105, 225, 0.08), transparent 66%);
  filter: none;
  clip-path: polygon(0 28%, 43% 46%, 61% 0, 100% 48%, 72% 100%, 17% 78%);
}

body.map-page::before,
body.map-page::after {
  display: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
[role="button"],
a {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

button,
.link-button,
.account-link-button,
.context-action,
.err-btn {
  transition:
    color 160ms ease,
    background-color 160ms ease,
    border-color 160ms ease,
    opacity 160ms ease,
    transform 160ms ease;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--dc-blue-bright);
  outline-offset: 3px;
}

button:not(:disabled),
a[href],
select,
input[type="checkbox"],
input[type="radio"] {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
}

h1,
h2,
h3,
.site-nav-logo,
.page-context-title,
.account-kicker,
.account-card-label,
.compact-result-kicker,
.bus-route-import-kicker,
.map-source-panel h2,
.route-options-panel h2,
.loc-section h2 {
  font-family: var(--dc-font-display);
}

h1,
h2,
h3 {
  color: var(--dc-text);
  background: none;
  background-clip: border-box;
  -webkit-background-clip: border-box;
  -webkit-text-fill-color: currentColor;
}

.skip-link {
  position: fixed;
  top: 8px;
  left: calc(var(--dc-rail-width) + 8px);
  z-index: 3000;
  padding: 10px 14px;
  color: var(--dc-text);
  background: var(--dc-surface-raised);
  border: 1px solid var(--dc-border-strong);
  border-radius: var(--dc-radius-sm);
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: translateY(0);
}

/* Shared left rail ------------------------------------------------------- */

.site-nav {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 1400;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  width: var(--dc-rail-width);
  min-height: 0;
  padding: 0;
  background: rgba(28, 28, 30, 0.97);
  border: 0;
  border-right: 1px solid var(--dc-border);
  box-shadow: var(--dc-shadow);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.site-nav-brand {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: var(--dc-topbar-height);
  padding: 0;
  color: var(--dc-text);
  border-bottom: 1px solid var(--dc-border);
}

.site-nav-logo {
  display: block;
  width: 36px;
  height: 36px;
  object-fit: contain;
  flex: 0 0 auto;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

.site-nav-title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.site-nav-links {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 10px;
}

.site-nav-link {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  color: var(--dc-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--dc-radius-md);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}

.site-nav-link:hover {
  color: var(--dc-text);
  background: rgba(255, 255, 255, 0.055);
  border-color: var(--dc-border);
}

.site-nav-link.is-active {
  color: var(--dc-blue-bright);
  background: var(--dc-blue-soft);
  border-color: transparent;
}

.site-nav-link.is-active::before {
  content: "";
  position: absolute;
  top: 9px;
  bottom: 9px;
  left: -11px;
  width: 3px;
  background: var(--dc-blue);
  border-radius: 0 3px 3px 0;
}

.site-nav-icon,
.site-nav-icon svg {
  display: block;
  width: 20px;
  height: 20px;
}

.site-nav-icon svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.site-nav-label {
  position: absolute;
  left: 52px;
  top: 50%;
  z-index: 2;
  width: max-content;
  max-width: 180px;
  padding: 6px 9px;
  color: var(--dc-text);
  background: var(--dc-surface-raised);
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-sm);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.34);
  font-size: 12px;
  opacity: 0;
  pointer-events: none;
  transform: translate(4px, -50%);
  transition: opacity 140ms ease, transform 140ms ease;
}

.site-nav-link:hover .site-nav-label,
.site-nav-link:focus-visible .site-nav-label {
  opacity: 1;
  transform: translate(0, -50%);
}

/* Account control structure ----------------------------------------------
   css/embenco-clone.css defines the account button and its menu for the map
   page, and everything below was written as a restyle of that base. Pages that
   do not load the map stylesheet — home.html — were therefore inheriting only
   half the control: an unpositioned menu laid out as inline text, and a name
   label that leaked out next to the avatar. These are the structural rules the
   restyle assumes, so the shared layer no longer depends on a page-specific
   stylesheet. Visual treatment stays in the blocks that follow. */
.auth-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  cursor: pointer;
  white-space: nowrap;
}

.auth-entry-btn.is-auth-loading {
  visibility: hidden;
  opacity: 0;
  box-shadow: none;
  pointer-events: none;
}

.auth-btn .auth-avatar {
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
}

.site-nav .auth-btn.is-signed-in .auth-avatar-fallback {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--dc-blue-soft);
  color: var(--dc-blue-bright);
  font-weight: 800;
}

/* The avatar carries the identity while the rail is collapsed, so the name is
   screen-reader-only here. The hover-expanded rail below takes it back out. */
.site-nav .auth-btn.is-signed-in .auth-btn-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.auth-dropdown {
  position: absolute;
  z-index: 1400;
  display: grid;
}

.auth-dropdown[hidden] {
  display: none;
}

.auth-dropdown-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  text-align: left;
  text-decoration: none;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.site-nav-auth,
.site-nav-footer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 64px;
  padding: 10px;
  margin: auto 0 0;
  border-top: 1px solid var(--dc-border);
}

.site-nav-footer {
  color: var(--dc-muted);
}

.site-nav .auth-btn {
  display: grid;
  place-items: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  color: var(--dc-text);
  background: transparent;
  border: 1px solid var(--dc-border);
  border-radius: 50%;
  box-shadow: none;
  backdrop-filter: none;
}

.site-nav .auth-entry-btn:not(.is-signed-in) {
  min-height: 44px;
  padding: 0;
  color: var(--dc-blue-bright);
  background: var(--dc-blue-soft);
  border-color: rgba(65, 105, 225, 0.35);
  box-shadow: none;
}

.site-nav .auth-btn-label {
  max-width: 34px;
  overflow: hidden;
  font-size: 0;
}

.site-nav .auth-btn-label::before {
  content: "↗";
  font-family: var(--dc-font-display);
  font-size: 18px;
  font-weight: 700;
}

.site-nav .auth-btn.is-signed-in {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border-color: var(--dc-border-strong);
}

.site-nav .auth-btn.is-signed-in .auth-avatar,
.site-nav .auth-btn.is-signed-in .auth-avatar-fallback {
  width: 36px;
  height: 36px;
}

.auth-dropdown {
  top: auto;
  right: auto;
  bottom: 10px;
  left: calc(100% + 10px);
  min-width: 180px;
  padding: 7px;
  background: var(--dc-surface-raised);
  border: 1px solid var(--dc-border-strong);
  border-radius: var(--dc-radius-md);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.45);
  backdrop-filter: none;
}

.auth-dropdown-item {
  min-height: 44px;
  color: var(--dc-text);
  border-radius: var(--dc-radius-sm);
  font-weight: 600;
}

/* `.auth-dropdown-item { display: flex }` outranks the user-agent
   `[hidden] { display: none }` rule, so the Admin entry stayed on screen for
   every signed-in user even though the script had hidden it (UX-002). */
.auth-dropdown-item[hidden] {
  display: none;
}

.auth-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.07);
}

.auth-dropdown-item.danger {
  color: #ff9da8;
}

/* Hover-expanded rail -----------------------------------------------------
   Pointer devices only — below 760px the rail becomes a bottom bar with its
   own layout, and (hover: hover) keeps touch screens off the sticky-hover
   path. Only the panel's own width animates: every page offsets its content by
   --dc-rail-width, which never changes, so the expansion floats over the page
   instead of reflowing it. Each row is laid out as
   [icon column as wide as the collapsed rail] + [label], so no icon moves when
   the panel opens. */

@media (min-width: 761px) and (hover: hover) {
  .site-nav {
    transition: width 180ms ease, box-shadow 180ms ease;
  }

  .site-nav:hover,
  .site-nav:focus-within {
    width: var(--dc-rail-expanded);
    box-shadow: 0 20px 54px rgba(0, 0, 0, 0.45);
  }

  .site-nav-brand {
    grid-template-columns: var(--dc-rail-width) minmax(0, 1fr);
    align-items: center;
    justify-items: start;
    padding-right: 14px;
  }

  .site-nav-logo {
    justify-self: center;
  }

  /* Unhide the wordmark that is screen-reader-only while collapsed. */
  .site-nav-title {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    color: var(--dc-muted-strong);
    font-family: var(--dc-font-display);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0;
    transition: opacity 140ms ease;
  }

  .site-nav-links {
    align-items: stretch;
  }

  .site-nav-link {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 10px;
    width: 100%;
    min-width: 0;
    justify-items: start;
  }

  .site-nav-icon {
    justify-self: center;
  }

  /* Collapsed, the label is a hover tooltip floating beside the rail. Expanded,
     it is an inline row label — so the tooltip chrome comes off here. */
  .site-nav-label {
    position: static;
    max-width: none;
    padding: 0;
    color: inherit;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-family: var(--dc-font-display);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0;
    transform: none;
    transition: opacity 140ms ease;
  }

  .site-nav-link:hover .site-nav-label,
  .site-nav-link:focus-visible .site-nav-label {
    transform: none;
  }

  .site-nav:hover .site-nav-title,
  .site-nav:focus-within .site-nav-title,
  .site-nav:hover .site-nav-label,
  .site-nav:focus-within .site-nav-label {
    opacity: 1;
  }

  .site-nav-auth,
  .site-nav-footer {
    justify-content: flex-start;
  }

  .site-nav .auth-btn {
    transition: width 180ms ease, border-radius 180ms ease;
  }

  .site-nav:hover .auth-btn,
  .site-nav:focus-within .auth-btn {
    width: 100%;
    border-radius: var(--dc-radius-md);
  }

  /* Signed in: avatar keeps the icon column, name fills the rest. The name is
     screen-reader-only while the rail is collapsed, so it has to be taken back
     out of the sr-only box here. */
  .site-nav:hover .auth-btn.is-signed-in,
  .site-nav:focus-within .auth-btn.is-signed-in {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 10px;
    padding: 2px 10px 2px 0;
  }

  .site-nav:hover .auth-btn.is-signed-in .auth-btn-label,
  .site-nav:focus-within .auth-btn.is-signed-in .auth-btn-label {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    justify-self: start;
  }

  .site-nav:hover .auth-btn-label,
  .site-nav:focus-within .auth-btn-label {
    max-width: none;
    overflow: visible;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
  }

  .site-nav:hover .auth-btn-label::before,
  .site-nav:focus-within .auth-btn-label::before {
    content: none;
  }
}

/* Shared context header -------------------------------------------------- */

.page-topbar {
  position: fixed;
  top: 0;
  right: 0;
  left: var(--dc-rail-width);
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: var(--dc-topbar-height);
  padding: 6px clamp(16px, 3vw, 32px);
  color: var(--dc-text);
  background: rgba(29, 29, 31, 0.92);
  border-bottom: 1px solid var(--dc-border);
}

.page-topbar-copy {
  min-width: 0;
}

.page-eyebrow,
.page-context-title {
  display: block;
  margin: 0;
}

.page-eyebrow {
  color: var(--dc-muted);
  font-family: var(--dc-font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  line-height: 1.1;
  text-transform: uppercase;
}

.page-context-title {
  margin-top: 2px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
}

.context-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 14px;
  color: var(--dc-text);
  background: transparent;
  border: 1px solid var(--dc-border-strong);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.context-action:hover {
  color: var(--dc-blue-bright);
  background: var(--dc-blue-soft);
  border-color: rgba(65, 105, 225, 0.4);
}

.context-action svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Calculator workspace -------------------------------------------------- */

body.map-page {
  font-family: var(--dc-font-body);
}

.map-page .embenco-shell {
  height: 100dvh;
}

.map-page .map-wrap {
  inset: 0 0 0 var(--dc-rail-width);
  background: var(--dc-bg-deep);
}

.map-page .embenco-map {
  background: var(--dc-bg-deep);
}

.map-page .map-topbar {
  top: 0;
  right: 0;
  left: var(--dc-rail-width);
  z-index: 950;
  align-items: center;
  min-height: var(--dc-topbar-height);
  padding: 4px 14px 4px 22px;
  background: rgba(29, 29, 31, 0.93);
  border-bottom: 1px solid var(--dc-border);
}

.map-page .map-status-chip {
  display: grid;
  gap: 0;
  min-width: 230px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
}

.map-page .map-status-chip strong {
  font-family: var(--dc-font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.map-page .map-status-chip span,
.map-page .map-status-chip small {
  font-size: 11px;
  line-height: 1.25;
}

.map-page .map-status-chip small {
  display: none;
}

.map-page .overlay-mode-toggle {
  gap: 3px;
  padding: 3px;
  background: var(--dc-surface-soft);
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-md);
  box-shadow: none;
  backdrop-filter: none;
}

.map-page .overlay-mode-toggle button {
  min-height: 44px;
  padding: 7px 11px;
  color: var(--dc-muted);
  border: 0;
  border-radius: var(--dc-radius-sm);
  font-size: 12px;
  font-weight: 600;
}

.map-page .overlay-mode-toggle button:hover {
  color: var(--dc-text);
  background: rgba(255, 255, 255, 0.06);
}

.map-page .overlay-mode-toggle button.active {
  color: var(--dc-text);
  background: var(--dc-blue-soft);
  box-shadow: inset 0 0 0 1px rgba(65, 105, 225, 0.42);
}

.map-page .drawer-toggle-btn {
  min-height: 44px;
  margin-left: auto;
  padding: 7px 14px;
  color: var(--dc-text);
  background: transparent;
  border: 1px solid var(--dc-border-strong);
  border-radius: var(--dc-radius-md);
  box-shadow: none;
}

.map-page .drawer-toggle-btn:hover {
  color: var(--dc-blue-bright);
  background: var(--dc-blue-soft);
  border-color: rgba(65, 105, 225, 0.42);
}

.map-page .map-action-stack {
  top: calc(var(--dc-topbar-height) + 14px);
  left: calc(var(--dc-rail-width) + 62px);
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
  width: 124px;
}

.map-page .map-action-btn {
  min-height: 44px;
  padding: 8px 12px;
  color: var(--dc-text);
  background: rgba(29, 29, 31, 0.94);
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-md);
  box-shadow: var(--dc-shadow);
  backdrop-filter: none;
}

.map-page .map-action-btn:hover {
  color: var(--dc-blue-bright);
  background: var(--dc-surface-raised);
  border-color: rgba(65, 105, 225, 0.4);
  transform: none;
}

.map-page .bus-route-import-btn {
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  width: 204px;
  min-height: 62px;
  color: var(--dc-text);
  background: var(--dc-surface);
  border-color: var(--dc-border-strong);
  box-shadow: var(--dc-shadow);
}

.map-page .bus-route-import-btn:hover {
  background: var(--dc-surface-raised);
  border-color: rgba(65, 105, 225, 0.44);
  box-shadow: var(--dc-shadow);
}

.map-page .bus-route-import-icon {
  color: var(--dc-blue-bright);
}

.map-page .bus-route-import-copy strong {
  font-family: var(--dc-font-display);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.map-page .bus-route-import-copy small {
  color: var(--dc-muted);
  font-size: 10px;
}

.map-page .compact-result-panel {
  right: 16px;
  bottom: 16px;
  width: min(360px, calc(100vw - var(--dc-rail-width) - 32px));
  padding: 16px;
  color: var(--dc-text);
  background: rgba(29, 29, 31, 0.96);
  border: 1px solid var(--dc-border-strong);
  border-radius: var(--dc-radius-lg);
  box-shadow: 0 14px 42px rgba(0, 0, 0, 0.34);
  backdrop-filter: none;
}

.map-page .compact-result-kicker {
  color: var(--dc-blue-bright);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
}

.map-page .compact-result-panel h2 {
  font-size: 26px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.map-page .compact-result-panel p {
  color: var(--dc-muted);
}

.map-page .compact-result-details {
  border-top-color: var(--dc-border);
}

.map-page .compact-result-details > div {
  border-bottom-color: var(--dc-border);
}

.map-page .embenco-panel {
  width: min(420px, calc(100vw - 18px));
  padding: 20px;
  color: var(--dc-text);
  background: #19191b;
  border-left: 1px solid var(--dc-border-strong);
  box-shadow: -18px 0 48px rgba(0, 0, 0, 0.35);
  backdrop-filter: none;
}

.map-page .embenco-panel h1 {
  margin-top: 24px;
  color: var(--dc-text);
  background: none;
  background-clip: border-box;
  -webkit-background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.map-page .embenco-panel .subtitle {
  color: var(--dc-muted);
}

.map-page .drawer-close-btn {
  float: none;
  min-height: 44px;
  margin: 0 0 14px auto;
}

.map-page .status,
.map-page .flow-hint,
.map-page .field,
.map-page .summary,
.map-page .map-source-panel,
.map-page .route-options-panel,
.map-page .loc-section,
.map-page .panel-section,
.map-page .capture-panel,
.map-page .dev-mode-panel {
  background: transparent;
  border-color: var(--dc-border);
  box-shadow: none;
}

.map-page .status {
  border-left: 3px solid var(--dc-blue);
}

.map-page .mode-toggle,
.map-page .height-mode-toggle {
  background: var(--dc-surface-soft);
  border-color: var(--dc-border);
  box-shadow: none;
}

.map-page input,
.map-page select,
.map-page textarea,
.account-page input,
.account-page select,
.account-page textarea,
.admin-page input,
.admin-page select,
.admin-page textarea {
  min-height: 44px;
  color: var(--dc-text);
  background: #161618;
  border-color: var(--dc-border-strong);
  border-radius: var(--dc-radius-sm);
}

.map-page input::placeholder,
.map-page textarea::placeholder,
.account-page input::placeholder,
.account-page textarea::placeholder,
.admin-page input::placeholder,
.admin-page textarea::placeholder {
  color: #76767f;
  opacity: 1;
}

/* The .loc-popup-* exclusions below work like the .notification-control and
   .drawer-scrim ones already here: these blanket rules are page-level defaults,
   and a component that ships its own full button treatment has to be able to
   opt out. Without the carve-out this rule wins on specificity — one class plus
   five :not() classes — and repaints every popup button primary blue, which is
   what made the popup's Share and Close buttons look identical to its primary
   action regardless of what locations.css asked for. */
.map-page button:not(.notification-control):not(.drawer-scrim):not(.loc-popup-close),
.account-page button:not(.notification-control),
.admin-page button:not(.notification-control) {
  min-height: 44px;
  border-radius: var(--dc-radius-sm);
}

.map-page button:not(.notification-control):not(.secondary):not(.drawer-scrim):not(.leaflet-control-zoom-in):not(.leaflet-control-zoom-out):not(.loc-popup-btn):not(.loc-popup-close),
.account-page button:not(.notification-control):not(.secondary),
.admin-page button:not(.notification-control):not(.secondary) {
  color: #fff;
  background: var(--dc-blue);
  border-color: var(--dc-blue);
  box-shadow: none;
}

.map-page button:not(.notification-control):not(.secondary):not(.drawer-scrim):not(.loc-popup-btn):not(.loc-popup-close):hover,
.account-page button:not(.notification-control):not(.secondary):hover,
.admin-page button:not(.notification-control):not(.secondary):hover {
  background: #3f67dc;
  border-color: #3f67dc;
  box-shadow: none;
  transform: none;
}

.map-page button.secondary,
.account-page button.secondary,
.admin-page button.secondary,
.map-page .link-button,
.account-page .account-link-button {
  color: var(--dc-text);
  background: transparent;
  border-color: var(--dc-border-strong);
  box-shadow: none;
}

.map-page button.secondary:hover,
.account-page button.secondary:hover,
.admin-page button.secondary:hover,
.map-page .link-button:hover,
.account-page .account-link-button:hover {
  color: var(--dc-blue-bright);
  background: var(--dc-blue-soft);
  border-color: rgba(65, 105, 225, 0.42);
  transform: none;
}

.map-page #mapClearBtn,
.map-page #mapFitBtn,
.map-page #squadToggleBtn {
  color: var(--dc-text);
  background: rgba(29, 29, 31, 0.94);
  border-color: var(--dc-border-strong);
}

.map-page #mapClearBtn:hover,
.map-page #mapFitBtn:hover,
.map-page #squadToggleBtn:hover {
  color: var(--dc-blue-bright);
  background: var(--dc-surface-raised);
  border-color: rgba(65, 105, 225, 0.42);
}

/* "Back to Map" rides in the action stack like the buttons above it, just with
   an amber accent so leaving calculator mode reads as the odd one out. Needs
   the id to outrank the generic `.map-page button.secondary` styling. */
.map-page #backToMapBtn {
  color: var(--dc-amber);
  background: rgba(29, 29, 31, 0.94);
  border: 1px solid rgba(229, 202, 126, 0.45);
  border-radius: var(--dc-radius-md);
  box-shadow: var(--dc-shadow);
  letter-spacing: normal;
}

.map-page #backToMapBtn:hover {
  color: var(--dc-bg-deep);
  background: var(--dc-amber);
  border-color: var(--dc-amber);
}

.map-page .passcode-card,
.map-page .bus-route-import-card {
  color: var(--dc-text);
  background: var(--dc-surface);
  border-color: var(--dc-border-strong);
  border-radius: var(--dc-radius-lg);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.52);
}

.map-page .passcode-modal {
  background: rgba(5, 5, 6, 0.74);
  backdrop-filter: none;
}

.map-page .squad-panel {
  color: var(--dc-text);
  background: var(--dc-surface);
  border-color: var(--dc-border-strong);
  box-shadow: 0 16px 46px rgba(0, 0, 0, 0.38);
  backdrop-filter: none;
}

.map-page .leaflet-control-zoom a,
.map-page .leaflet-control-layers-toggle {
  color: var(--dc-text);
  background-color: var(--dc-surface);
  border-color: var(--dc-border);
}

/* Account, login, and admin --------------------------------------------- */

.account-document,
.account-document body {
  min-height: 100%;
  overflow: auto;
}

.account-page,
.admin-page {
  min-height: 100vh;
  padding: calc(var(--dc-topbar-height) + 26px) 26px 64px calc(var(--dc-rail-width) + 26px);
  color: var(--dc-text);
  background: var(--dc-bg);
  font-family: var(--dc-font-body);
}

.account-shell,
.admin-shell {
  width: min(1120px, 100%);
  max-width: none;
  margin: 0 auto;
  padding: 0;
}

.account-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  padding: 0 0 22px;
  border-bottom: 1px solid var(--dc-border);
}

.account-kicker,
.account-card-label {
  margin: 0;
  color: var(--dc-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.account-hero h1 {
  margin: 2px 0 0;
  font-size: clamp(34px, 6vw, 58px);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 0.96;
  text-transform: uppercase;
}

.account-hero p:last-child,
.account-muted {
  color: var(--dc-muted);
}

.account-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.account-card {
  padding: 20px;
  color: var(--dc-text);
  background: var(--dc-surface);
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-lg);
  box-shadow: var(--dc-shadow);
}

.account-card h2 {
  margin: 4px 0 8px;
  font-size: 25px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.account-card h3 {
  font-size: 17px;
  font-weight: 600;
}

.account-profile-header {
  align-items: center;
}

.account-avatar,
.account-discord-avatar {
  color: var(--dc-blue-bright);
  background: var(--dc-blue-soft);
  border-color: rgba(65, 105, 225, 0.35);
  box-shadow: none;
}

.account-details {
  margin-top: 20px;
}

.account-details div {
  padding: 12px 0;
  border-top: 1px solid var(--dc-border);
}

/* css/embenco-clone.css sets `.account-details div { display: grid }`, which
   outranks the user-agent `[hidden] { display: none }` rule — so a row hidden
   by script stayed on screen. Restore it for any conditionally shown row. */
.account-details div[hidden] {
  display: none;
}

.account-details div:last-child {
  border-bottom: 1px solid var(--dc-border);
}

.account-details dt {
  color: var(--dc-muted);
}

.account-details dd {
  color: var(--dc-text);
}

.account-actions {
  gap: 9px;
}

.account-link-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 13px;
  border: 1px solid var(--dc-border-strong);
  border-radius: var(--dc-radius-sm);
  font-weight: 600;
}

.account-actions .danger,
.account-page button.danger,
.admin-page button.danger {
  color: #ff9da8;
  background: transparent;
  border-color: rgba(255, 59, 77, 0.38);
}

.account-data-card {
  grid-column: 1 / -1;
}

.account-data-list {
  color: var(--dc-muted);
}

.account-team-card {
  grid-column: 1 / -1;
}

.account-team-card [hidden] {
  display: none !important;
}

.account-team-heading,
.account-team-person,
.account-team-incoming {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.account-team-heading h2,
.account-team-card h3 {
  margin-bottom: 0;
}

.account-team-badge {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 10px;
  flex: 0 0 auto;
  color: var(--dc-muted);
  background: var(--dc-surface-soft);
  border: 1px solid var(--dc-border-strong);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}

.account-team-badge[data-state="active"] {
  color: #a8f0be;
  background: rgba(43, 164, 91, 0.12);
  border-color: rgba(80, 210, 129, 0.34);
}

.account-team-badge[data-state="locked"] {
  color: #f1cd7b;
  background: rgba(229, 202, 126, 0.1);
  border-color: rgba(229, 202, 126, 0.3);
}

.account-team-review,
.account-team-location,
.account-team-pending,
.account-team-incoming,
.account-team-empty,
.account-team-person {
  margin-top: 18px;
  padding: 16px;
  background: var(--dc-surface-soft);
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-md);
}

.account-team-review {
  border-color: rgba(65, 105, 225, 0.42);
  box-shadow: inset 3px 0 0 var(--dc-blue);
}

.account-team-location {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.85fr);
  align-items: end;
  gap: 16px;
}

.account-team-location label {
  color: var(--dc-text);
  font-size: 13px;
  font-weight: 700;
}

.account-team-location .account-muted {
  margin: 6px 0 0;
}

.account-team-location-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.account-team-location select {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 0 38px 0 12px;
  color: var(--dc-text);
  background: var(--dc-surface);
  border: 1px solid var(--dc-border-strong);
  border-radius: var(--dc-radius-sm);
}

.account-team-review h3,
.account-team-pending h3,
.account-team-incoming h3,
.account-team-person h3 {
  margin: 4px 0 6px;
}

.account-team-empty {
  display: grid;
  gap: 7px;
}

.account-team-empty > span {
  color: var(--dc-muted);
  line-height: 1.5;
}

.account-team-empty > button {
  width: fit-content;
  margin-top: 5px;
}

.account-team-person {
  align-items: center;
}

.account-team-avatar {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  color: var(--dc-blue-bright);
  background: var(--dc-blue-soft);
  border: 1px solid rgba(65, 105, 225, 0.38);
  border-radius: 50%;
  font-size: 20px;
  font-weight: 800;
}

.account-team-person-copy {
  min-width: 0;
  flex: 1 1 auto;
}

.account-team-person-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.account-team-pending {
  display: grid;
  gap: 14px;
}

.account-team-pending > button {
  width: fit-content;
}

.account-team-invite-row {
  display: grid;
  gap: 7px;
}

.account-team-invite-row > label {
  color: var(--dc-text);
  font-size: 13px;
  font-weight: 700;
}

.account-team-invite-row > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.account-team-invite-row input {
  width: 100%;
  min-width: 0;
  padding: 0 12px;
}

.account-team-invite-row small {
  color: var(--dc-muted);
  line-height: 1.45;
}

.account-team-incoming {
  align-items: center;
  border-color: rgba(80, 210, 129, 0.28);
}

.account-team-incoming > div {
  min-width: 0;
  flex: 1 1 auto;
}

.account-team-status {
  min-height: 1.5em;
  margin: 14px 0 0;
}

.account-team-status[data-kind="error"] {
  color: #ff9da8;
}

.account-team-status[data-kind="success"] {
  color: #a8f0be;
}

.account-team-card button:disabled,
.account-team-card input:disabled,
.account-team-card select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.login-shell {
  width: min(760px, 100%);
}

.login-hero {
  text-align: left;
}

.login-card {
  width: min(540px, 100%);
  max-width: none;
  margin: 18px 0 0;
}

/* Full-width provider actions. Selectors are scoped to `.login-page` to
   outrank the generic `.account-page button:not(.secondary)` fill above. */
.login-page .login-provider-btn {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 64px;
  padding: 12px 16px;
  color: var(--dc-text);
  background: transparent;
  border: 1px solid var(--dc-border-strong);
  border-radius: var(--dc-radius-md);
  text-align: left;
  transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.login-page .login-provider-btn.discord {
  --discord-blurple: #5865f2;
  color: #fff;
  background: var(--discord-blurple);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 10px 24px rgba(88, 101, 242, 0.28);
}

.login-page .login-provider-btn.discord:hover {
  color: #fff;
  background: #4752c4;
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 12px 28px rgba(88, 101, 242, 0.34);
  transform: translateY(-1px);
}

.login-page .login-provider-btn.discord:active {
  background: #3c45a5;
  box-shadow: 0 4px 14px rgba(88, 101, 242, 0.24);
  transform: translateY(0);
}

.login-page .login-provider-btn.discord:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.login-page .login-provider-btn.google {
  color: #202124;
  background: #fff;
  border-color: #dadce0;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
}

.login-page .login-provider-btn.google:hover {
  color: #202124;
  background: #f8faff;
  border-color: #aeb4bd;
  box-shadow: 0 11px 26px rgba(0, 0, 0, 0.28);
  transform: translateY(-1px);
}

.login-page .login-provider-btn.google:active {
  background: #eef2f8;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
  transform: translateY(0);
}

.login-page .login-provider-btn.google:focus-visible {
  outline: 2px solid #8eb1ff;
  outline-offset: 3px;
}

.login-page .login-provider-btn.google .login-provider-icon {
  background: #fff;
}

.login-page .login-provider-btn.google .login-provider-sub {
  color: #5f6368;
}

.login-page .login-provider-btn.google.is-busy .login-provider-arrow::after {
  border-color: rgba(32, 33, 36, 0.25);
  border-top-color: #202124;
}

.login-provider-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  border: 0;
  border-radius: 11px;
}

.login-provider-icon svg {
  width: 22px;
  height: auto;
  fill: currentColor;
}

.login-provider-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.login-provider-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.login-provider-sub {
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
}

.login-provider-arrow svg {
  display: block;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.75;
  transition: transform 140ms ease, opacity 140ms ease;
}

.login-page .login-provider-btn:hover .login-provider-arrow svg {
  opacity: 1;
  transform: translateX(3px);
}

/* Redirect is in flight: freeze the button and swap the arrow for a spinner. */
.login-page .login-provider-btn.is-busy,
.login-page .login-provider-btn[disabled] {
  cursor: progress;
  transform: none;
  opacity: 0.72;
  pointer-events: none;
}

.login-page .login-provider-btn.is-busy .login-provider-arrow svg {
  display: none;
}

.login-page .login-provider-btn.is-busy .login-provider-arrow::after {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: login-spin 700ms linear infinite;
}

@keyframes login-spin {
  to { transform: rotate(360deg); }
}

.login-status {
  margin: 14px 0 0;
  font-size: 13px;
}

.login-status.is-error {
  color: #ff9da8;
}

.login-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--dc-border);
}

.login-footer .login-back {
  min-height: 40px;
  padding: 8px 16px;
}

.login-legal {
  margin: 0;
  color: var(--dc-muted);
  font-size: 12px;
}

.login-legal a {
  color: var(--dc-muted-strong);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.login-legal a:hover {
  color: var(--dc-text);
}

@media (prefers-reduced-motion: reduce) {
  .login-provider-btn,
  .login-provider-arrow svg {
    transition: none;
  }

  .login-provider-btn:hover {
    transform: none;
  }

  .login-page .login-provider-btn.is-busy .login-provider-arrow::after {
    animation: none;
  }
}

@media (max-width: 520px) {
  .login-provider-btn {
    gap: 12px;
    padding: 12px 14px;
  }

  .login-footer {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
}

.admin-shell .account-card {
  margin-bottom: 14px;
}

.admin-badge {
  border-color: var(--dc-border);
  background: var(--dc-surface-soft);
  color: var(--dc-muted);
}

.admin-badge.is-admin,
.admin-badge.is-access {
  color: var(--dc-blue-bright);
  background: var(--dc-blue-soft);
  border-color: rgba(65, 105, 225, 0.36);
}

.admin-user-row,
.admin-location-list,
.admin-audit-row {
  background: var(--dc-surface-soft);
  border-color: var(--dc-border);
  border-radius: var(--dc-radius-md);
}

.admin-user-row.is-selected {
  border-color: var(--dc-blue);
  box-shadow: 0 0 0 1px var(--dc-blue-soft);
}

.admin-radio {
  min-height: 44px;
  background: var(--dc-surface-soft);
  border-color: var(--dc-border);
  border-radius: var(--dc-radius-sm);
}

.admin-radio input,
.admin-location-item input {
  accent-color: var(--dc-blue);
}

/* Legal --------------------------------------------------------------- */

.legal-page {
  min-height: 100vh;
  padding: calc(var(--dc-topbar-height) + 26px) 24px 80px calc(var(--dc-rail-width) + 24px);
  color: var(--dc-text);
  background-color: var(--dc-bg);
  font-family: var(--dc-font-body);
}

.legal-page .legal-wrap {
  width: min(900px, 100%);
  max-width: none;
  margin: 0 auto;
  padding: 0;
}

.legal-page .legal-wrap h1 {
  margin: 0 0 6px;
  font-family: var(--dc-font-display);
  font-size: clamp(38px, 7vw, 68px);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 0.95;
  text-transform: uppercase;
}

.legal-page .legal-updated {
  color: var(--dc-muted);
}

.legal-page .legal-wrap h2 {
  padding-top: 24px;
  color: var(--dc-text);
  border-top-color: var(--dc-border);
  font-family: var(--dc-font-display);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.legal-page .legal-wrap h3 {
  color: var(--dc-text);
  font-family: var(--dc-font-display);
  font-size: 19px;
  font-weight: 600;
  text-transform: uppercase;
}

.legal-page .legal-wrap p,
.legal-page .legal-wrap li,
.legal-page .legal-table td,
.legal-page .legal-footer {
  color: var(--dc-muted-strong);
}

.legal-page .legal-wrap strong,
.legal-page .legal-table th {
  color: var(--dc-text);
}

.legal-page .legal-wrap a {
  color: var(--dc-blue-bright);
}

.legal-page .legal-draft {
  background: var(--dc-red-soft);
  border-color: rgba(255, 59, 77, 0.36);
  border-radius: var(--dc-radius-md);
}

.legal-page .legal-table {
  border-top: 1px solid var(--dc-border);
}

.legal-page .legal-table th,
.legal-page .legal-table td {
  border-bottom-color: var(--dc-border);
}

.legal-page .legal-footer {
  border-top-color: var(--dc-border);
}

/* Error --------------------------------------------------------------- */

.error-page {
  display: grid;
  align-items: center;
  justify-items: stretch;
  min-height: 100vh;
  padding: calc(var(--dc-topbar-height) + 38px) 30px calc(var(--dc-mobile-nav-height) + 38px) calc(var(--dc-rail-width) + 30px);
  color: var(--dc-text);
  background-color: var(--dc-bg);
  font-family: var(--dc-font-body);
  text-align: left;
}

.error-page .err-wrap {
  width: min(760px, 100%);
  max-width: none;
  margin: 0 auto;
}

.error-page .err-logo {
  display: none;
}

.error-page .err-code {
  margin: 0;
  color: var(--dc-blue-bright);
  background: none;
  font-family: var(--dc-font-display);
  font-size: clamp(88px, 20vw, 180px);
  font-weight: 700;
  letter-spacing: 0;
  -webkit-text-fill-color: currentColor;
}

.error-page .err-title {
  margin: 0 0 10px;
  font-family: var(--dc-font-display);
  font-size: clamp(30px, 6vw, 50px);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.error-page .err-msg {
  max-width: 590px;
  color: var(--dc-muted);
}

.error-page .err-actions {
  justify-content: flex-start;
}

.error-page .err-btn {
  min-height: 44px;
  padding: 10px 18px;
  border-radius: var(--dc-radius-sm);
}

.error-page .err-btn-primary {
  color: #fff;
  background: var(--dc-blue);
}

.error-page .err-btn-ghost {
  color: var(--dc-text);
  border-color: var(--dc-border-strong);
}

@media (max-width: 880px) {
  .map-page .map-status-chip {
    min-width: 170px;
  }

  .map-page .overlay-mode-toggle {
    overflow-x: auto;
  }

  .account-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .account-data-card {
    grid-column: auto;
  }
}

@media (max-width: 760px) {
  :root {
    --site-nav-height: var(--dc-topbar-height);
  }

  body {
    padding-left: 0;
  }

  .skip-link {
    left: 8px;
  }

  .site-nav {
    inset: auto 0 0;
    flex-direction: row;
    align-items: center;
    width: auto;
    height: var(--dc-mobile-nav-height);
    min-height: var(--dc-mobile-nav-height);
    background: rgba(28, 28, 30, 0.98);
    border-top: 1px solid var(--dc-border);
    border-right: 0;
  }

  .site-nav-brand {
    width: 48px;
    min-width: 48px;
    min-height: var(--dc-mobile-nav-height);
    border-right: 1px solid var(--dc-border);
    border-bottom: 0;
  }

  .site-nav-logo {
    width: 32px;
    height: 32px;
  }

  .site-nav-links {
    display: grid;
    flex: 1 1 auto;
    grid-auto-flow: column;
    grid-auto-columns: minmax(48px, 1fr);
    align-items: stretch;
    gap: 0;
    width: auto;
    height: 100%;
    padding: 0;
  }

  .site-nav-link {
    grid-template-rows: 24px auto;
    gap: 3px;
    width: 100%;
    height: 100%;
    min-height: var(--dc-mobile-nav-height);
    padding: 7px 4px 5px;
    border: 0;
    border-radius: 0;
  }

  .site-nav-link.is-active::before {
    inset: 0 18% auto;
    width: auto;
    height: 3px;
    border-radius: 0 0 3px 3px;
  }

  .site-nav-label {
    position: static;
    width: auto;
    max-width: none;
    padding: 0;
    overflow: visible;
    color: inherit;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-size: 10px;
    line-height: 1;
    opacity: 1;
    transform: none;
  }

  .site-nav-link:hover .site-nav-label,
  .site-nav-link:focus-visible .site-nav-label {
    transform: none;
  }

  .site-nav-auth,
  .site-nav-footer {
    width: 54px;
    min-width: 54px;
    min-height: var(--dc-mobile-nav-height);
    padding: 7px;
    margin: 0;
    border-top: 0;
    border-left: 1px solid var(--dc-border);
  }

  .site-nav .auth-btn {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
  }

  .auth-dropdown {
    right: 6px;
    bottom: calc(100% + 9px);
    left: auto;
  }

  .page-topbar {
    left: 0;
    padding-inline: 16px;
  }

  .page-eyebrow {
    display: none;
  }

  .page-context-title {
    margin: 0;
  }

  .context-action {
    min-height: 44px;
    padding: 7px 11px;
    font-size: 12px;
  }

  .map-page .map-wrap {
    inset: 0 0 var(--dc-mobile-nav-height);
  }

  .map-page .map-topbar {
    right: 0;
    left: 0;
    flex-wrap: nowrap;
    min-height: var(--dc-topbar-height);
    padding: 4px 9px;
  }

  .map-page .map-status-chip {
    order: 0;
    flex: 1 1 auto;
    min-width: 0;
  }

  .map-page .map-status-chip strong {
    font-size: 14px;
  }

  .map-page .map-status-chip span {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .map-page .overlay-mode-toggle {
    max-width: 43vw;
  }

  .map-page .overlay-mode-toggle button {
    min-height: 44px;
    white-space: nowrap;
  }

  .map-page .drawer-toggle-btn {
    min-width: 44px;
    padding-inline: 10px;
  }

  .map-page .map-action-stack {
    top: calc(var(--dc-topbar-height) + 10px);
    bottom: auto;
    left: 60px;
  }

  .map-page .compact-result-panel {
    right: 10px;
    bottom: calc(var(--dc-mobile-nav-height) + 10px);
    width: min(340px, calc(100vw - 20px));
  }

  .map-page .embenco-panel {
    top: 0;
    bottom: var(--dc-mobile-nav-height);
    height: auto;
    width: min(420px, 100vw);
  }

  .account-page,
  .admin-page,
  .legal-page {
    padding: calc(var(--dc-topbar-height) + 20px) 16px calc(var(--dc-mobile-nav-height) + 34px);
  }

  .error-page {
    padding: calc(var(--dc-topbar-height) + 30px) 20px calc(var(--dc-mobile-nav-height) + 30px);
  }

  .legal-page .legal-table-wrap {
    margin-right: -16px;
    margin-left: -16px;
    padding: 0 16px;
  }
}

@media (max-width: 360px) {
  .site-nav-brand {
    display: none;
  }
}

@media (max-width: 540px) {
  .site-nav-brand {
    display: none;
  }

  .site-nav-links {
    grid-auto-columns: minmax(48px, 1fr);
  }

  .site-nav-auth,
  .site-nav-footer {
    width: 54px;
    min-width: 54px;
  }

  .map-page .overlay-mode-toggle {
    display: none;
  }

  .map-page .map-status-chip span {
    max-width: 190px;
  }

  .account-page,
  .admin-page {
    padding-right: 12px;
    padding-left: 12px;
  }

  .account-card {
    padding: 16px;
  }

  .account-profile-header {
    align-items: flex-start;
  }

  .account-actions {
    align-items: stretch;
  }

  .account-actions > * {
    width: 100%;
  }

  .account-team-heading,
  .account-team-person,
  .account-team-incoming {
    align-items: stretch;
    flex-direction: column;
  }

  .account-team-badge {
    width: fit-content;
  }

  .account-team-person-actions {
    width: 100%;
    justify-content: stretch;
  }

  .account-team-person-actions > *,
  .account-team-incoming > .account-link-button,
  .account-team-incoming > button,
  .account-team-empty > button,
  .account-team-pending > button {
    width: 100%;
  }

  .account-team-location,
  .account-team-location-controls {
    grid-template-columns: 1fr;
  }

  .account-team-location-controls > * {
    width: 100%;
  }

  .account-team-invite-row > div {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}