.layers-disclosure {
  --hatch-accent: var(--material-signal-teal);
}

.layers-disclosure[data-hatch-state="closed"] .layers-button {
  min-width: 146px;
  padding-inline: 11px 9px;
  border-color: rgba(17, 16, 14, 0.3);
  background:
    linear-gradient(90deg, rgba(17, 16, 14, 0.06) 0 1px, transparent 1px 100%) 0 0 / 18px 100% repeat-x,
    linear-gradient(180deg, rgba(250, 246, 236, 0.94), rgba(221, 214, 198, 0.84));
  box-shadow:
    inset 0 1px 0 rgba(255, 253, 247, 0.72),
    inset 0 -1px 0 rgba(17, 16, 14, 0.14);
}

.layers-disclosure[data-hatch-state="open"] .layers-button {
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, 0.5),
    0 1px 0 rgba(255, 253, 247, 0.28);
}

.layers-disclosure[data-hatch-state="open"] .layers-chevron {
  transform: rotate(180deg);
}

.layers-panel[data-hatch-state="open"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 7px;
  border-radius: 3px;
  background:
    linear-gradient(90deg, rgba(17, 16, 14, 0.03) 1px, transparent 1px),
    linear-gradient(180deg, rgba(246, 240, 228, 0.98), rgba(218, 209, 192, 0.96));
  background-size: 24px 24px, auto;
}

.layers-panel[data-hatch-state="open"]::before {
  content: "";
  display: block;
  height: 9px;
  margin: 0 2px 1px;
  border: 1px solid rgba(17, 16, 14, 0.5);
  background:
    linear-gradient(90deg, rgba(255, 253, 247, 0.1), transparent 28%, rgba(255, 253, 247, 0.08)),
    var(--material-slot);
  box-shadow:
    inset 0 1px 0 rgba(255, 253, 247, 0.12),
    0 1px 0 rgba(255, 253, 247, 0.36);
}

.layers-panel[data-hatch-state="open"] .layers-panel-kicker {
  order: -1;
  min-height: 22px;
  padding-bottom: 6px;
}

.layers-hatch-section {
  --bay-accent: var(--material-signal-teal);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: rgba(17, 16, 14, 0.22);
  background-size: 18px 18px, auto;
}

.layers-hatch-section::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  z-index: -1;
  width: 4px;
  background: var(--bay-accent);
  opacity: 0.86;
}

.layers-hatch-section::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 6px;
  height: 6px;
  border: 1px solid rgba(17, 16, 14, 0.22);
  border-radius: 50%;
  background: rgba(17, 16, 14, 0.24);
  box-shadow: inset 0 1px 0 rgba(255, 253, 247, 0.36);
}

.layers-section-title {
  padding-right: 18px;
}

.layers-hatch-section .toggle-control,
.layers-hatch-section .select-control {
  border-radius: 2px;
}

.layers-hatch-section select {
  min-height: 32px;
}

.layers-button {
  width: 100%;
  min-height: 36px;
  padding-inline: 11px;
  box-shadow: var(--material-inset);
}

.layers-panel {
  right: 0;
}

.layers-panel::before {
  height: 0;
}

.layers-panel .toggle-control,
.layers-panel .select-control {
  margin: 0;
  border: 0;
  border-bottom: 1px solid rgba(17, 16, 14, 0.12);
  background: transparent;
  box-shadow: none;
}

.layers-panel .toggle-control:has(input:checked)::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--material-led-ready);
  margin-left: auto;
}

.layers-disclosure {
  position: relative;
}

.layers-panel {
  border-color: var(--instrument-hairline-strong);
}

.layers-panel .layers-panel-kicker {
  margin-bottom: 5px;
  color: rgba(17, 16, 14, 0.56);
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.1em;
}

.layers-panel .toggle-control,
.layers-panel .select-control {
  min-height: 30px;
  padding: 0 2px;
  font-size: 0.62rem;
}

.layers-panel .select-control {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
}

.layers-panel .select-control select {
  min-width: 0;
  min-height: 28px;
  font-size: 0.72rem;
}

.layers-disclosure {
  isolation: isolate;
}

.layers-button {
  position: relative;
  justify-content: space-between;
  overflow: hidden;
  border-color: rgba(17, 16, 14, 0.38);
  background:
    linear-gradient(90deg, rgba(255, 253, 247, 0.26) 0 1px, transparent 1px 100%),
    linear-gradient(180deg, rgba(242, 237, 224, 0.92), rgba(207, 198, 180, 0.74));
  background-size: 14px 100%, auto;
}

.layers-disclosure[data-hatch-state="open"] .layers-button,
.layers-button.is-active {
  border-bottom-color: rgba(17, 16, 14, 0.74);
  background:
    linear-gradient(90deg, rgba(255, 253, 247, 0.1) 0 1px, transparent 1px 100%),
    var(--material-black-key);
  color: var(--material-black-key-text);
}

.layers-panel {
  min-width: 274px;
  max-width: min(318px, calc(100vw - 28px));
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(17, 16, 14, 0.52);
  background:
    linear-gradient(90deg, rgba(17, 16, 14, 0.026) 1px, transparent 1px),
    linear-gradient(180deg, #f7f1e6, #ded5c3);
  background-size: 28px 28px, auto;
  box-shadow:
    inset 0 3px 0 var(--material-slot),
    inset 0 0 0 1px rgba(255, 253, 247, 0.38),
    0 18px 34px rgba(17, 16, 14, 0.16);
}

.layers-panel-kicker {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 2px 2px 7px;
  border-bottom: 1px solid rgba(17, 16, 14, 0.24);
}

.layers-panel-kicker::after {
  content: "ACCESS";
  padding: 3px 6px;
  border: 1px solid rgba(17, 16, 14, 0.36);
  background: var(--material-led);
  color: var(--material-led-dim);
  font-family: var(--font-mono);
  font-size: 0.48rem;
  letter-spacing: 0.12em;
}

.layers-hatch-section {
  display: grid;
  gap: 5px;
  padding: 8px;
  border: 1px solid rgba(17, 16, 14, 0.16);
  background: rgba(255, 253, 247, 0.32);
  box-shadow: inset 0 1px 0 rgba(255, 253, 247, 0.46);
}

.layers-section-title {
  display: block;
  color: rgba(17, 16, 14, 0.52);
  font-family: var(--font-mono);
  font-size: 0.54rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}

.layers-hatch-section .toggle-control,
.layers-hatch-section .select-control {
  min-height: 32px;
  padding: 0 6px;
  border: 0;
  border-top: 1px solid rgba(17, 16, 14, 0.12);
  background: transparent;
}

.layers-hatch-section .toggle-control:first-of-type,
.layers-hatch-section .select-control:first-of-type {
  border-top: 0;
}

.layers-hatch-section .toggle-control > span,
.layers-hatch-section .select-control > span {
  color: rgba(17, 16, 14, 0.66);
}

.layers-hatch-section .surface-control > span::before {
  display: none;
  content: none;
}

.layers-hatch-section .toggle-control:has(input:checked)::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(17, 16, 14, 0.18);
}

.layers-hatch-section .is-disabled,
.layers-hatch-section .is-mode-hidden {
  opacity: 0.48;
}

.layers-hatch-section select {
  border: 1px solid rgba(17, 16, 14, 0.24);
  background:
    linear-gradient(180deg, rgba(255, 253, 247, 0.76), rgba(232, 224, 209, 0.66));
}

.layers-panel[data-hatch-state="open"]::before {
  order: -2;
}

.layers-hatch-model {
  --bay-accent: var(--material-signal-red);
}

.layers-hatch-section .toggle-control:has(input:checked)::after {
  background: var(--bay-accent);
}

.layers-hatch-section .toggle-control:focus-within,
.layers-hatch-section .select-control:focus-within {
  border-color: rgba(201, 53, 43, 0.58);
  box-shadow:
    inset 0 0 0 1px rgba(201, 53, 43, 0.2),
    0 0 0 2px rgba(201, 53, 43, 0.1);
}

@media (prefers-reduced-motion: no-preference) {
  .layers-disclosure[data-hatch-state="open"] .layers-panel {
    animation: hatch-door-open var(--motion-duration-base) var(--motion-ease-enter) both;
    transform-origin: top right;
  }

  .layers-disclosure[data-hatch-state="open"] .layers-hatch-section {
    animation: hatch-bay-rise var(--motion-duration-base) var(--motion-ease-enter) both;
  }
}

@keyframes hatch-door-open {
  from {
    opacity: 0;
    transform: translateY(-5px) scaleY(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes hatch-bay-rise {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .layers-disclosure[data-hatch-state="open"] .layers-panel,
  .layers-disclosure[data-hatch-state="open"] .layers-hatch-section {
    animation: none;
  }
}

body.is-map-active .panel-header {
  border-bottom: 1px solid rgba(17, 16, 14, 0.54);
  box-shadow: var(--material-inset);
}

body.is-map-active .panel-title-block {
  align-self: stretch;
  display: grid;
  align-content: center;
  border: 1px solid rgba(17, 16, 14, 0.26);
}

body.is-map-active .panel-header p {
  color: rgba(17, 16, 14, 0.52);
  font-family: var(--font-mono);
  font-style: normal;
  font-weight: 650;
  text-transform: uppercase;
}

body.is-map-active .panel-header .map-origin-search {
  align-self: stretch;
  border: 1px solid rgba(17, 16, 14, 0.34);
  box-shadow: var(--material-inset-deep);
}

@media (min-width: 981px), (min-width: 761px) and (max-width: 980px) and (min-height: 600px) and (orientation: landscape) {
  body.is-map-active .panel-controls {
    grid-template-areas: "modes surface layers range";
    align-self: stretch;
    justify-content: stretch;
    border: 1px solid rgba(17, 16, 14, 0.34);
    box-shadow: var(--material-inset-deep);
  }

  body.is-map-active .panel-controls > .mode-control-lenses {
    grid-area: modes;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }

  body.is-map-active .panel-controls > .surface-story-toggle {
    grid-area: surface;
    width: 100%;
  }

  body.is-map-active .panel-controls > .layers-disclosure {
    grid-area: layers;
    justify-self: stretch;
  }
}

body.is-map-active.is-reach-mode .panel-controls > .surface-story-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
}

body.is-map-active .panel-header {
  border-bottom-color: var(--instrument-hairline-strong);
  background:
    linear-gradient(90deg, rgba(17, 16, 14, 0.014) 1px, transparent 1px),
    var(--material-molded);
  background-size: 54px 54px, auto;
}

body.is-map-active .panel-title-block {
  min-height: var(--instrument-console-height);
  padding: 5px 7px 5px 9px;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

body.is-map-active .panel-header h2 {
  max-width: 16ch;
  font-size: 0.58rem;
  letter-spacing: 0.085em;
  line-height: 1.15;
}

body.is-map-active .panel-header p {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 3px;
  font-size: 0.49rem;
  letter-spacing: 0.055em;
  line-height: 1.12;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body.is-map-active .panel-header .map-origin-search {
  min-height: var(--instrument-console-height);
  grid-template-columns: auto minmax(160px, 1fr) auto;
  gap: 5px;
  padding: 5px;
  border-color: var(--instrument-hairline-strong);
  background:
    linear-gradient(90deg, rgba(17, 16, 14, 0.055) 0 1px, transparent 1px 100%) left top / 12px 100% repeat-x,
    linear-gradient(180deg, rgba(214, 207, 190, 0.76), rgba(235, 230, 218, 0.54));
}

body.is-map-active .panel-header .map-origin-search .search-card-top {
  gap: 6px;
}

body.is-map-active .panel-header .map-origin-search .search-row {
  grid-template-columns: minmax(0, 1fr) 74px;
  gap: 5px;
}

body.is-map-active .panel-header .map-origin-search .search-row button,
body.is-map-active .panel-header .map-origin-search .text-button,
body.is-map-active .panel-header .map-origin-search .search-row input {
  min-height: 32px;
}

@media (min-width: 981px), (min-width: 761px) and (max-width: 980px) and (min-height: 600px) and (orientation: landscape) {
  body.is-map-active .panel-controls {
    grid-template-columns: minmax(246px, 1fr) minmax(104px, 0.34fr) minmax(108px, 0.28fr) minmax(246px, 0.62fr);
    gap: 4px;
    min-height: var(--instrument-console-height);
    padding: 5px;
    border-color: var(--instrument-hairline-strong);
    background:
      linear-gradient(90deg, rgba(255, 253, 247, 0.2) 0 1px, transparent 1px 100%) left top / 20px 100% repeat-x,
      var(--material-ticket-bay);
  }

  body.is-map-active:not(.is-reach-mode) .panel-header {
    grid-template-columns: minmax(104px, 0.12fr) minmax(380px, 0.42fr) minmax(460px, 1fr);
  }

  body.is-map-active:not(.is-reach-mode) .panel-controls {
    grid-template-columns: minmax(360px, 1fr) minmax(126px, auto);
    grid-template-areas: "modes layers";
  }
}

@media (min-width: 981px) and (max-width: 1320px), (min-width: 761px) and (max-width: 980px) and (min-height: 600px) and (orientation: landscape) {
  body.is-map-active .panel-header {
    grid-template-columns: minmax(96px, 0.14fr) minmax(320px, 0.38fr);
  }

  body.is-map-active .panel-controls {
    grid-column: 1 / -1;
    grid-template-columns: minmax(84px, auto) minmax(96px, auto) minmax(220px, 1fr);
    grid-template-areas:
      "modes modes modes"
      "surface layers range";
  }

  body.is-map-active:not(.is-reach-mode) .panel-controls {
    grid-template-columns: minmax(0, 1fr) minmax(122px, auto);
    grid-template-areas:
      "modes modes"
      "layers layers";
  }
}

@media (max-width: 1180px) and (min-width: 981px), (min-width: 761px) and (max-width: 980px) and (min-height: 600px) and (orientation: landscape) {

  body.is-map-active .panel-controls {
    grid-column: 1 / -1;
    grid-template-columns: minmax(84px, auto) minmax(96px, auto) minmax(220px, 1fr);
    grid-template-areas:
      "modes modes modes"
      "surface layers range";
  }

  body.is-map-active:not(.is-reach-mode) .panel-controls {
    grid-template-columns: minmax(0, 1fr) minmax(122px, auto);
    grid-template-areas:
      "modes modes"
      "layers layers";
  }
}

@media (max-width: 1560px) and (min-width: 981px), (min-width: 761px) and (max-width: 980px) and (min-height: 600px) and (orientation: landscape) {
  body.is-map-active .panel-header {
    grid-template-columns: minmax(96px, 0.16fr) minmax(320px, 1fr);
  }

  body.is-map-active .panel-controls {
    grid-column: 1 / -1;
    grid-template-columns: minmax(88px, auto) minmax(106px, auto) minmax(220px, 1fr);
    grid-template-areas:
      "modes modes modes"
      "surface layers range";
  }

  body.is-map-active:not(.is-reach-mode) .panel-controls {
    grid-template-columns: minmax(0, 1fr) minmax(124px, auto);
    grid-template-areas:
      "modes modes"
      "layers layers";
  }
}

body.is-map-active .panel-controls .mode-control-lenses,
body.is-map-active .panel-controls .surface-story-toggle,
body.is-map-active .panel-controls .layers-button {
  border-color: rgba(17, 16, 14, 0.2);
}

body.is-map-active .panel-controls .surface-story-toggle,
body.is-map-active .panel-controls .layers-button {
  background: var(--instrument-quiet-fill);
  box-shadow: inset 0 1px 0 rgba(255, 253, 247, 0.45);
}

body.is-map-active .panel-controls .surface-story-button:not(.is-active),
body.is-map-active .panel-controls .mode-button:not(.is-active) {
  color: rgba(17, 16, 14, 0.58);
  background: transparent;
}

body.is-map-active .panel-controls .mode-button em {
  opacity: 0.54;
}

body.is-map-active .panel-controls .surface-story-button,
body.is-map-active .panel-controls .mode-button,
body.is-map-active .panel-controls .layers-button {
  min-height: 34px;
  padding-inline: 8px;
  font-size: 0.58rem;
}

body.is-map-active .panel-controls .mode-control-lenses .mode-button strong {
  font-size: 0.62rem;
}

body.is-map-active .panel-header {
  display: grid;
  align-items: center;
  padding: 7px 8px;
}

body.is-map-active .panel-controls {
  display: contents;
}

body.is-map-active .panel-header .map-origin-search {
  position: relative;
  z-index: 300;
}

body.is-map-active .panel-header .map-origin-search:focus-within,
body.is-map-active .panel-header .map-origin-search:has(.search-results:not(:empty)) {
  z-index: 1200;
}

body.is-map-active .panel-header .map-origin-search .search-results {
  z-index: 1201;
}

body.is-map-active .range-control {
  min-width: 0;
}

body:not(.is-map-active) #shareButton {
  display: none;
}

body.is-map-active .mode-control-lenses .mode-button {
  min-width: 104px;
}

body.is-map-active .range-control input {
  width: 100%;
}

@media (max-width: 1180px) and (min-width: 981px), (min-width: 761px) and (max-width: 980px) and (min-height: 600px) and (orientation: landscape) {

body.is-map-active .mode-control-lenses .mode-button {
    min-width: auto;
    padding-inline: 8px;
  }
}

@media (max-width: 980px) {
body.is-map-active .panel-header {
    display: none;
  }
}

body.is-map-active .panel-header {
  grid-template-areas:
    "mode time time"
    "search view settings";
  gap: 7px 8px;
}

body.is-map-active .map-origin-search {
  grid-template-columns: auto minmax(320px, 1fr) auto;
}

body.is-map-active .map-origin-search .search-row {
  grid-template-columns: minmax(9rem, 1fr) minmax(68px, auto);
}

body.is-map-active .panel-header .map-origin-search .text-button {
  max-width: clamp(76px, 12vw, 136px);
  overflow: hidden;
  text-overflow: ellipsis;
}

body.is-map-active .range-control {
  max-width: none;
}

body.is-map-active .range-control input {
  min-width: 128px;
}

@media (max-width: 1180px) and (min-width: 981px), (min-width: 761px) and (max-width: 980px) and (min-height: 600px) and (orientation: landscape) {

body.is-map-active .range-control input {
    min-width: 104px;
  }
}

body.is-map-active .panel-header {
  grid-template-columns:
    minmax(320px, 1fr)
    minmax(258px, 0.5fr)
    minmax(148px, 0.32fr);
}

@media (max-width: 1180px) and (min-width: 981px), (min-width: 761px) and (max-width: 980px) and (min-height: 600px) and (orientation: landscape) {
body.is-map-active .panel-header {
    grid-template-columns:
      minmax(320px, 1fr)
      minmax(214px, 0.42fr)
      minmax(138px, 0.3fr);
  }
}

@media (prefers-reduced-motion: reduce) {
body.is-map-active .panel-controls .mode-control-lenses::after {
    transition: none;
  }
}

.command-mast,
.command-sentence {
  display: contents;
}

.living-radius-control {
  display: none;
}

.mast-language-toggle,
.mast-brand {
  display: none;
}

.map-surface-rail {
  display: none;
}

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

@media (min-width: 981px), (min-width: 761px) and (max-width: 980px) and (min-height: 600px) and (orientation: landscape) {
  body.is-map-active {
    --chrome-card-bg: rgba(255, 253, 247, 0.94);
    --chrome-card-border: rgba(17, 16, 14, 0.14);
    --chrome-card-border-strong: rgba(17, 16, 14, 0.22);
    --chrome-card-radius: 9px;
    --chrome-card-shadow:
      0 1px 2px rgba(17, 16, 14, 0.06),
      0 4px 10px rgba(48, 42, 32, 0.07);
    --chrome-ink: #16140f;
    --chrome-cream: rgba(255, 253, 247, 0.96);
    --chrome-red: #c9352b;
    --chrome-radius: var(--control-radius);
    --chrome-radius-inner: var(--control-radius);
    --map-control-gap: 8px;
    --map-control-inset: 14px;
    --map-spatial-control-width: 258px;
  }

  body.is-map-active .page-shell {
    width: calc(100vw - 28px);
    max-width: none;
    padding: 14px 0 18px;
  }

  body.is-map-active .workspace {
    gap: 14px;
  }

  body.is-map-active .map-panel {
    border: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
  }

  body.is-map-active .map-panel::before {
    content: none;
  }

  body.is-map-active .map-frame {
    margin: 0;
    border: 1px solid var(--chrome-card-border-strong);
    border-radius: 16px;
    background: var(--water);
    box-shadow:
      inset 0 0 0 1px rgba(247, 245, 236, 0.4),
      0 1px 2px rgba(17, 16, 14, 0.05),
      0 18px 44px rgba(48, 42, 32, 0.11);
  }

  body.is-map-active .panel-header {
    position: relative;
    z-index: 40;
    display: grid;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: visible;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    grid-template-areas:
      "mast"
      "sentence";
    gap: 10px;
    align-items: stretch;
    margin-bottom: 12px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  body.is-map-active .map-panel > .panel-header {
    grid-template-columns: minmax(0, 1fr);
  }

  body.is-map-active .panel-header .command-mast {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
    min-width: 0;
  }

  body.is-map-active .panel-header .command-sentence {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    min-width: 0;
  }

  body.is-map-active .panel-controls {
    display: contents;
  }

  body.is-map-active .panel-title-block {
    display: none;
  }

  body.is-map-active .command-mast {
    grid-area: mast;
    display: flex;
    gap: 8px;
    align-items: stretch;
    height: 58px;
  }

  body.is-map-active .command-mast .mast-brand {
    display: inline-flex;
    flex: 0 0 auto;
    gap: 10px;
    align-items: center;
    padding: 0 10px 0 2px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
  }

  body.is-map-active .command-mast .mast-brand:hover {
    background: rgba(179, 42, 32, 0.055);
  }

  body.is-map-active .command-mast .mast-brand:focus-visible {
    outline: 2px solid rgba(179, 42, 32, 0.72);
    outline-offset: 2px;
  }

  body.is-map-active .command-mast .mast-brand-seal {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
  }

  body.is-map-active .command-mast .mast-brand-seal svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  body.is-map-active .command-mast .mast-brand-copy {
    display: grid;
    gap: 3px;
  }

  body.is-map-active .command-mast .mast-brand-copy strong {
    color: var(--chrome-ink);
    font-family: var(--font-serif);
    font-size: 0.98rem;
    font-weight: 680;
    letter-spacing: 0.035em;
    line-height: 1;
    white-space: nowrap;
  }

  body.is-map-active .command-mast .mast-brand-copy em {
    color: rgba(22, 20, 15, 0.52);
    font-family: var(--font-ui);
    font-size: 0.66rem;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0.03em;
    line-height: 1;
    white-space: nowrap;
  }

  body.is-map-active .command-mast .mast-brand-copy small {
    color: rgba(22, 20, 15, 0.46);
    font-family: var(--font-ui);
    font-size: 0.58rem;
    font-weight: 650;
    letter-spacing: 0.11em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
  }

  @media (max-width: 1480px) {
    body.is-map-active .command-mast .mast-brand {
      gap: 7px;
      padding-right: 4px;
    }

    body.is-map-active .command-mast .mast-brand-seal {
      width: 23px;
      height: 23px;
    }

    body.is-map-active .command-mast .mast-brand-copy {
      gap: 2px;
    }

    body.is-map-active .command-mast .mast-brand-copy strong {
      font-size: 0.82rem;
    }

    body.is-map-active .command-mast .mast-brand-copy em {
      font-size: 0.54rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    body.is-map-active .command-mast .mast-brand-copy small {
      font-size: 0.5rem;
      letter-spacing: 0.08em;
    }

    body.is-map-active .command-mast .mode-control-lenses {
      min-width: 300px;
    }

    body.is-map-active .command-mast .share-button,
    body.is-map-active .command-mast .layers-button {
      padding: 0 13px 0 34px;
      background-position: left 12px center;
      font-size: var(--type-micro);
    }

    body.is-map-active .command-sentence {
      grid-template-columns: minmax(0, 1.25fr) minmax(330px, 1fr);
    }
  }

  @media (max-width: 1320px) {
    body.is-map-active .command-mast .mast-brand {
      display: none;
    }
  }

  body.is-map-active .command-mast .mode-control-lenses {
    flex: 1 1 480px;
    min-width: 390px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 5px;
    border: 1px solid var(--chrome-card-border);
    border-radius: var(--chrome-radius);
    background:
      linear-gradient(rgba(17, 16, 14, 0.34), rgba(17, 16, 14, 0.34)) left 2px center / calc(100% - 4px) 2px no-repeat,
      var(--chrome-card-bg);
    box-shadow: var(--chrome-card-shadow);
    overflow: visible;
  }

  body.is-map-active .command-mast .mode-control-lenses::before,
  body.is-map-active .command-mast .mode-control-lenses::after {
    content: none;
  }

  body.is-map-active .command-mast .mode-control-lenses .mode-button {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    min-height: 0;
    height: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 4px 9px 4px 34px;
    border: 0;
    border-radius: var(--chrome-radius-inner);
    background:
      no-repeat left 12px center / 16px 16px
      var(--mode-icon, none),
      #fffdf7;
    box-shadow: none;
    text-align: left;
    overflow: hidden;
  }

  body.is-map-active .command-mast .mode-control-lenses .mode-button:not(.is-active):hover {
    background:
      no-repeat left 12px center / 16px 16px
      var(--mode-icon, none),
      #f6f1e6;
  }

  body.is-map-active .command-mast .mode-control-lenses .mode-button::before,
  body.is-map-active .command-mast .mode-control-lenses .mode-button::after {
    content: none;
  }

  body.is-map-active .command-mast .mode-control-lenses .mode-button[data-mode="reach"] {
    --mode-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='4.2' fill='%2316140f' opacity='0.62'/%3E%3Ccircle cx='12' cy='12' r='8.6' fill='none' stroke='%2316140f' stroke-width='1.6' opacity='0.4'/%3E%3C/svg%3E");
  }

  body.is-map-active .command-mast .mode-control-lenses .mode-button[data-mode="route"] {
    --mode-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316140f' stroke-opacity='0.58' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='5.5' cy='18.5' r='2.3'/%3E%3Ccircle cx='18.5' cy='5.5' r='2.3'/%3E%3Cpath d='M7.5 16.5C10 14 14 10 16.5 7.5' stroke-dasharray='0.5 3.4'/%3E%3C/svg%3E");
  }

  body.is-map-active .command-mast .mode-control-lenses .mode-button[data-mode="inspect"] {
    --mode-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316140f' stroke-opacity='0.58' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.4'/%3E%3Cpath d='m14.8 9.2-2 4.4-3.6 1.2 2-4.4z'/%3E%3C/svg%3E");
  }

  body.is-map-active .command-mast .mode-control-lenses .mode-button[data-mode="index"] {
    --mode-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316140f' stroke-opacity='0.6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.8' y='5.2' width='14.4' height='13.6' rx='1.7'/%3E%3Cpath d='M8 9h8M8 12h8M8 15h5M4.8 9h14.4'/%3E%3C/svg%3E");
  }

  body.is-map-active .command-mast .mode-control-lenses .mode-button.is-active {
    background:
      no-repeat left 12px center / 16px 16px
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='5.4' fill='%23c9352b' stroke='%23fffdf7' stroke-width='2'/%3E%3C/svg%3E"),
      var(--chrome-ink);
    box-shadow: none;
  }

  body.is-map-active .command-mast .mode-control-lenses .mode-button[data-mode="index"].is-active {
    background:
      no-repeat left 12px center / 16px 16px
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4.2' y='5' width='15.6' height='14' rx='2' fill='%23c9352b'/%3E%3Cpath d='M7.2 9h9.6M7.2 12h9.6M7.2 15h6M4.2 9h15.6' fill='none' stroke='%23fffdf7' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
      var(--chrome-ink);
  }

  body.is-map-active .command-mast .mode-control-lenses .mode-button strong {
    display: block;
    color: rgba(22, 20, 15, 0.78);
    font-family: var(--font-rail-label);
    font-size: var(--type-label);
    font-weight: 820;
    letter-spacing: 0.11em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
  }


  @media (max-width: 1560px) {
    body.is-map-active .command-mast .mode-control-lenses .mode-button strong[data-compact-en] {
      font-size: 0;
      letter-spacing: 0;
    }

    body.is-map-active .command-mast .mode-control-lenses .mode-button strong[data-compact-en]::after {
      content: attr(data-compact-en);
      font-size: var(--type-label);
      font-weight: 820;
      letter-spacing: 0.11em;
    }


    body.is-map-active .command-mast .mode-control-lenses .mode-button em[data-compact] {
      font-size: 0;
      letter-spacing: 0;
    }

    body.is-map-active .command-mast .mode-control-lenses .mode-button em[data-compact]::after {
      content: attr(data-compact);
      font-size: var(--type-micro);
      font-weight: 600;
      letter-spacing: 0.14em;
    }
  }

  body.is-map-active .command-mast .mode-control-lenses .mode-button em {
    display: block;
    color: var(--ink-tertiary);
    font-family: var(--font-ui-ja);
    font-size: var(--type-micro);
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0.14em;
    line-height: 1;
    white-space: nowrap;
  }

  body.is-map-active .command-mast .mode-control-lenses .mode-button:hover strong {
    color: var(--chrome-ink);
  }

  body.is-map-active .command-mast .mode-control-lenses .mode-button.is-active strong {
    color: var(--chrome-cream);
  }

body.is-map-active .command-mast .mode-control-lenses .mode-button.is-active em {
    color: rgba(255, 253, 247, 0.62);
  }

  body.is-map-active .command-mast .spatial-view-guide {
    display: none;
  }

  body.is-map-active .command-mast .share-button {
    margin-left: auto;
  }

  body.is-map-active .command-mast .share-button,
  body.is-map-active .command-mast .layers-button {
    height: 100%;
    min-height: 0;
    width: auto;
    min-width: 0;
    max-width: none;
    box-sizing: border-box;
    padding: 0 10px 0 34px;
    border: 1px solid transparent;
    border-radius: var(--chrome-radius);
    position: relative;
    overflow: hidden;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: left 11px center;
    background-size: 15px 15px;
    color: rgba(22, 20, 15, 0.6);
    font-family: var(--font-rail-label);
    font-size: var(--type-micro);
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: none;
    transition: border-color var(--motion-duration-fast) var(--motion-ease-standard),
      background-color var(--motion-duration-fast) var(--motion-ease-standard),
      box-shadow var(--motion-duration-fast) var(--motion-ease-standard),
      color var(--motion-duration-fast) var(--motion-ease-standard),
      transform var(--motion-duration-fast) var(--motion-ease-standard);
  }

  body.is-map-active .command-mast .share-button {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: 136px;
    max-width: 136px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2' y='2' width='20' height='20' rx='4.5' fill='%2314120e'/%3E%3Crect x='6.8' y='4.4' width='10.4' height='15.2' fill='%23fffdf7'/%3E%3Cpolygon points='8.6,15.6 12,10.4 15.4,15.6' fill='%2314120e'/%3E%3Ccircle cx='14.9' cy='7.5' r='1.15' fill='%2314120e'/%3E%3Crect x='13.9' y='16.6' width='2.1' height='2.1' fill='%23c9352b'/%3E%3C/svg%3E");
    color: rgba(22, 20, 15, 0.62);
    line-height: 0.96;
    text-align: left;
    white-space: nowrap;
  }

  body.is-map-active .command-mast .share-button[data-share-state="ready"] {
    font-weight: 780;
    letter-spacing: 0.02em;
    line-height: 1.05;
    color: rgba(22, 20, 15, 0.86);
    gap: 0;
  }

  body.is-map-active .command-mast .share-button::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    background:
      linear-gradient(
        115deg,
        rgba(184, 70, 54, 0),
        rgba(184, 70, 54, 0.48) 18%,
        rgba(216, 137, 44, 0.36) 34%,
        rgba(184, 70, 54, 0) 48%,
        rgba(184, 70, 54, 0.38) 68%,
        rgba(184, 70, 54, 0)
      ) 0 0 / 230% 230% no-repeat;
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    mask-composite: exclude;
    opacity: 0.34;
    pointer-events: none;
    transition: opacity var(--motion-duration-fast) var(--motion-ease-standard), background-position var(--motion-duration-scene) var(--motion-ease-standard);
    animation: none;
  }

  @keyframes posterCtaEdgeTrace {
    0%,
    100% {
      background-position: 0% 50%;
    }

    50% {
      background-position: 100% 50%;
    }
  }

  @supports not ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
    body.is-map-active .command-mast .share-button::before {
      inset: 5px;
      padding: 0;
      border: 1px solid rgba(184, 70, 54, 0.34);
      background: transparent;
      opacity: 1;
      animation: none;
    }
  }

  body.is-map-active .command-mast .share-button:hover::before,
  body.is-map-active .command-mast .share-button:focus-visible::before {
    opacity: 0.82;
    background-position: 100% 50%;
  }

  body.is-map-active .command-mast .share-button.is-context-ready::before {
    animation: posterCtaEdgeTrace 1100ms cubic-bezier(0.16, 1, 0.3, 1) 1 both;
  }

  body.is-map-active .command-mast .share-button.is-context-ready {
    border-color: rgba(184, 70, 54, 0.32);
    background-color: rgba(255, 253, 247, 0.74);
    box-shadow:
      0 1px 2px rgba(17, 16, 14, 0.05),
      0 9px 24px rgba(48, 42, 32, 0.08);
    animation: posterCtaInvitation 720ms cubic-bezier(0.16, 1, 0.3, 1) 1 both;
  }

  @keyframes posterCtaInvitation {
    0% {
      box-shadow: 0 0 0 rgba(184, 70, 54, 0);
      transform: translateY(0);
    }
    38% {
      box-shadow: 0 0 0 3px rgba(184, 70, 54, 0.12), 0 12px 26px rgba(48, 42, 32, 0.12);
      transform: translateY(-1px);
    }
    100% {
      box-shadow: 0 1px 2px rgba(17, 16, 14, 0.05), 0 9px 24px rgba(48, 42, 32, 0.08);
      transform: translateY(0);
    }
  }

  body.is-map-active .command-mast .share-button:active::before {
    opacity: 0.68;
  }

  @media (prefers-reduced-motion: reduce) {
    body.is-map-active .command-mast .share-button::before,
    body.is-map-active .command-mast .share-button.is-context-ready::before {
      background:
        linear-gradient(
          115deg,
          rgba(184, 70, 54, 0.08),
          rgba(184, 70, 54, 0.42),
          rgba(216, 137, 44, 0.28),
          rgba(184, 70, 54, 0.08)
        );
      animation: none;
      opacity: 0.56;
    }

    body.is-map-active .command-mast .share-button.is-context-ready {
      animation: none;
    }
  }

  body.is-map-active .command-mast .layers-button {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316140f' stroke-opacity='0.6' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 7.5h9M17.5 7.5H20M4 16.5h2.5M11 16.5h9'/%3E%3Ccircle cx='15.2' cy='7.5' r='2.2'/%3E%3Ccircle cx='8.8' cy='16.5' r='2.2'/%3E%3C/svg%3E");
  }

  body.is-map-active .command-mast .layers-disclosure > .layers-button {
    min-width: 112px;
    border-radius: var(--chrome-radius) 0 0 var(--chrome-radius);
    font-size: var(--type-label);
    letter-spacing: 0.06em;
  }

  body.is-map-active .command-mast .share-button:hover,
  body.is-map-active .command-mast .layers-button:hover,
  body.is-map-active .command-mast .share-button:focus-visible,
  body.is-map-active .command-mast .layers-button:focus-visible {
    border-color: var(--chrome-card-border-strong);
    background-color: #fffdf7;
    color: var(--chrome-ink);
    box-shadow: var(--chrome-card-shadow);
  }

  body.is-map-active .command-mast .share-button:hover,
  body.is-map-active .command-mast .share-button:focus-visible {
    border-color: rgba(184, 70, 54, 0.5);
    background-color: #fffdf7;
    color: var(--chrome-ink);
    box-shadow:
      0 1px 2px rgba(17, 16, 14, 0.06),
      0 14px 30px rgba(48, 42, 32, 0.13);
    transform: translateY(-1px);
  }

  body.is-map-active .command-mast .share-button:focus-visible {
    outline: 2px solid rgba(184, 70, 54, 0.34);
    outline-offset: 2px;
  }

  body.is-map-active .command-mast .share-button:active {
    box-shadow:
      0 1px 2px rgba(17, 16, 14, 0.07),
      0 8px 18px rgba(89, 64, 36, 0.13);
    transform: translateY(0);
  }

  body.is-map-active .command-mast .share-button[aria-busy="true"] {
    cursor: wait;
    opacity: 0.78;
    transform: none;
  }

  body.is-map-active .command-mast .share-button:disabled {
    cursor: not-allowed;
    opacity: 0.56;
    transform: none;
  }

  body.is-map-active .command-mast .share-button.is-context-muted:disabled {
    border-color: rgba(17, 16, 14, 0.1);
    background-color: rgba(255, 253, 247, 0.3);
    color: rgba(22, 20, 15, 0.46);
    box-shadow: none;
  }

  body.is-map-active .command-mast .share-button.is-context-muted:disabled::before {
    opacity: 0.12;
    animation: none;
  }

  body.is-map-active .command-mast .layers-disclosure {
    position: relative;
    z-index: 5000;
    flex: 0 0 auto;
    width: max-content;
    min-width: 0;
    height: 100%;
    justify-self: auto;
  }

  body.is-map-active .command-mast .layers-disclosure .layers-button {
    width: 100%;
  }

  body.is-map-active .command-mast .share-button {
    flex: 0 0 136px;
  }

  body.is-map-active .command-mast .layers-panel,
  body.is-map-active .command-mast .layers-panel[data-hatch-state="open"] {
    z-index: 6000;
    right: 0;
    top: calc(100% + 8px);
    width: min(340px, calc(100vw - 32px));
    max-width: min(340px, calc(100vw - 32px));
    border-radius: 12px;
    border: 1px solid var(--chrome-card-border-strong);
    box-shadow: var(--chrome-card-shadow);
  }

  body.is-map-active .command-mast .mast-language-toggle {
    display: grid;
    grid-template-columns: auto auto;
    gap: 2px;
    align-items: stretch;
    height: 100%;
    min-height: 0;
    margin: 0 0 0 -8px;
    padding: 5px 4px;
    border: 1px solid var(--chrome-card-border);
    border-left-color: rgba(17, 16, 14, 0.08);
    border-radius: 0 var(--chrome-radius) var(--chrome-radius) 0;
    background: var(--chrome-card-bg);
    box-shadow: var(--chrome-card-shadow);
  }



  body.is-map-active .mobile-map-control-rail .spatial-view-button::after,
  body.is-map-active .mobile-map-control-rail .spatial-view-button.is-active::after {
    content: none;
  }

  body.is-map-active .command-sentence {
    grid-area: sentence;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(210px, 0.52fr) minmax(360px, 1fr);
    grid-template-areas: "from line time";
    align-items: stretch;
    gap: 10px;
    height: 60px;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  body.is-map-active .panel-header .map-origin-search {
    grid-area: from;
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 10px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  body.is-map-active .map-origin-search .search-card-top,
  body.is-map-active .panel-header .map-origin-search .search-card-top {
    display: contents;
  }

  body.is-map-active .map-origin-search .search-card-top label {
    position: absolute;
    top: 9px;
    left: 42px;
    z-index: 2;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    clip-path: none;
    color: rgba(22, 20, 15, 0.62);
    font-family: var(--font-rail-label);
    font-size: var(--type-micro);
    font-weight: 820;
    letter-spacing: 0.14em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
  }

  body.is-map-active .map-origin-search .search-language-toggle {
    display: none;
  }

  body.is-map-active .map-origin-search .search-row {
    display: contents;
  }

  body.is-map-active .map-origin-search .search-row input {
    flex: 1 1 auto;
    order: 1;
    width: auto;
    height: auto;
    min-height: 0;
    min-width: 0;
    padding: 15px 16px 0 42px;
    border: 1px solid var(--chrome-card-border);
    border-radius: var(--chrome-radius);
    background:
      no-repeat left 15px center / 16px 16px
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316140f' stroke-opacity='0.55' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.8' cy='10.8' r='6.2'/%3E%3Cpath d='m19.6 19.6-4.4-4.4'/%3E%3C/svg%3E"),
      var(--chrome-card-bg);
    background-color: var(--chrome-card-bg);
    box-shadow: var(--chrome-card-shadow);
    color: var(--ink);
    font-family: var(--font-rail-label);
    font-size: 0.95rem;
    font-weight: 640;
    letter-spacing: 0.01em;
  }

  body.is-map-active .map-origin-search .search-row input:focus-visible {
    outline: none;
    border-color: rgba(201, 53, 43, 0.55);
    box-shadow:
      var(--chrome-card-shadow),
      0 0 0 3px rgba(201, 53, 43, 0.14);
  }

  body.is-map-active .map-origin-search .search-row input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    margin-right: 2px;
    background:
      no-repeat center / 12px 12px
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316140f' stroke-opacity='0.5' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
    cursor: pointer;
  }

  body.is-map-active .map-origin-search .search-row button,
  body.is-map-active .panel-header .map-origin-search .search-row button {
    order: 2;
    flex: 0 0 auto;
    height: auto;
    min-height: 0;
    padding: 0 18px 0 38px;
    border: 1px solid rgba(146, 36, 28, 0.85);
    border-radius: var(--chrome-radius);
    background:
      no-repeat left 14px center / 15px 15px
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='4' fill='%23fffdf7'/%3E%3Ccircle cx='12' cy='12' r='8.4' fill='none' stroke='%23fffdf7' stroke-width='1.8' opacity='0.85'/%3E%3C/svg%3E"),
      linear-gradient(180deg, #cd4033, #bd2f24);
    color: var(--chrome-cream);
    font-family: var(--font-rail-label);
    font-size: var(--type-label);
    font-weight: 820;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow:
      0 1px 2px rgba(17, 16, 14, 0.08),
      0 8px 20px rgba(160, 42, 32, 0.3);
  }

  body.is-map-active .map-origin-search .search-row button:hover {
    background:
      no-repeat left 14px center / 15px 15px
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='4' fill='%23fffdf7'/%3E%3Ccircle cx='12' cy='12' r='8.4' fill='none' stroke='%23fffdf7' stroke-width='1.8' opacity='0.85'/%3E%3C/svg%3E"),
      linear-gradient(180deg, #d64a3c, #c2352a);
  }

  body.is-map-active .map-origin-search .text-button,
  body.is-map-active .panel-header .map-origin-search .text-button {
    order: 3;
    flex: 0 0 auto;
    align-self: stretch;
    height: auto;
    min-height: 0;
    margin: 0;
    max-width: none;
    padding: 0 16px 0 38px;
    border: 1px solid var(--chrome-card-border);
    border-radius: var(--chrome-radius);
    background:
      no-repeat left 14px center / 14px 14px
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316140f' stroke-opacity='0.58' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M20.5 3.5 4 11.2l7 2 2.2 7z'/%3E%3C/svg%3E"),
      var(--chrome-card-bg);
    color: rgba(22, 20, 15, 0.72);
    font-family: var(--font-rail-label);
    font-size: var(--type-label);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: var(--chrome-card-shadow);
  }

  body.is-map-active .map-origin-search .text-button:hover {
    border-color: var(--chrome-card-border-strong);
    color: var(--chrome-ink);
  }

  body.is-map-active .panel-header .map-origin-search .search-results {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    z-index: 7000;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--chrome-card-shadow);
  }

  body.is-map-active .command-sentence .range-control {
    grid-area: time;
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "eyebrow eyebrow-ja readout"
      "ruler ruler readout"
      "scale scale readout";
    align-items: center;
    gap: 0 10px;
    min-width: 0;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 8px 16px 7px 14px;
    border: 1px solid var(--chrome-card-border);
    border-radius: var(--chrome-radius);
    background: var(--chrome-card-bg);
    box-shadow: var(--chrome-card-shadow);
  }

  body.is-map-active .command-sentence .range-control::before,
  body.is-map-active .command-sentence .range-control::after {
    content: none;
  }

  body.is-map-active .command-sentence .range-control > span {
    grid-area: eyebrow;
    width: auto;
    color: rgba(22, 20, 15, 0.62);
    font-family: var(--font-rail-label);
    font-size: var(--type-micro);
    font-weight: 820;
    letter-spacing: 0.1em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
  }

  body.is-map-active .command-sentence .range-control .range-kicker-ja {
    grid-area: eyebrow-ja;
    justify-self: start;
    overflow: hidden;
    color: var(--ink-tertiary);
    font-family: var(--font-ui-ja);
    font-size: var(--type-micro);
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.1;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  body.is-map-active .command-sentence .range-control input {
    grid-area: ruler;
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    min-width: 0;
    height: 24px;
    margin: 0;
    padding: 0;
    background:
      linear-gradient(90deg, rgba(17, 16, 14, 0.14) 1px, transparent 1px) left 8px bottom 2px / calc((100% - 16px) / 17) 3px repeat-x,
      linear-gradient(90deg, rgba(17, 16, 14, 0.26) 1px, transparent 1px) left 8px bottom 2px / calc((100% - 16px) / 3.4) 6px repeat-x,
      transparent;
    border: 0;
    box-shadow: none;
    cursor: pointer;
    touch-action: pan-y pinch-zoom;
  }

  body.is-map-active .command-sentence .range-control input:focus-visible {
    outline: none;
  }

  @media (prefers-reduced-motion: no-preference) {
  }

  body.is-map-active .command-sentence .range-control strong {
    grid-area: readout;
    align-self: center;
    width: auto;
    min-width: 58px;
    padding: 0 0 0 10px;
    border: 0;
    border-left: 1px solid rgba(17, 16, 14, 0.09);
    background: transparent;
    color: var(--chrome-ink);
    font-family: var(--font-metric, var(--font-mono));
    font-size: 1.35rem;
    font-weight: 730;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    line-height: 1;
    text-align: right;
    box-shadow: none;
  }

  body.is-map-active .command-sentence .range-control strong b {
    display: block;
    font-size: inherit;
    font-weight: inherit;
    line-height: 0.95;
  }

  body.is-map-active .command-sentence .range-control strong i {
    display: block;
    margin-top: 2px;
    color: rgba(22, 20, 15, 0.44);
    font-size: 0.475rem;
    font-style: normal;
    font-weight: 740;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  body.is-map-active.is-inspect-mode .command-sentence .daily-life-radius-button strong {
    color: inherit;
    font-size: 0.68rem;
    font-weight: 820;
    line-height: 1.05;
  }

  body.is-map-active.is-inspect-mode .command-sentence .daily-life-radius-button small {
    margin-top: 4px;
    color: rgba(17, 16, 14, 0.48);
    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: 760;
    line-height: 1;
  }

  body.is-map-active .mobile-map-control-rail {
    position: absolute;
    top: var(--map-control-inset);
    left: var(--map-control-inset);
    right: auto;
    z-index: 6;
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    width: auto;
    pointer-events: auto;
  }

  body.is-map-active .mobile-map-control-rail .language-toggle {
    display: none;
  }

  body.is-map-active .mobile-map-control-rail .spatial-view-toggle {
    display: grid;
    grid-template-columns: auto auto;
    gap: 3px;
    min-height: 48px;
    padding: 3px;
    border: 1px solid rgba(22, 20, 15, 0.2);
    border-radius: var(--control-radius);
    background: rgba(255, 253, 247, 0.9);
    box-shadow: 0 3px 10px rgba(30, 25, 18, 0.08);
  }

  body.is-map-active .mobile-map-control-rail .spatial-view-guide {
    display: block;
    min-width: var(--map-spatial-control-width);
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
  }

  body.is-map-active .mobile-map-control-rail .spatial-view-button[disabled],
  body.is-map-active .mobile-map-control-rail .spatial-view-button[aria-disabled="true"] {
    opacity: 0.42;
    cursor: default;
  }

  body.is-map-active .mobile-map-control-rail .spatial-view-eyebrow,
  body.is-map-active .mobile-map-control-rail .spatial-view-button em {
    display: none;
  }

  body.is-map-active .mobile-map-control-rail .spatial-view-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 12px;
    border: 0;
    border-radius: var(--control-radius);
    background: transparent;
    color: rgba(22, 20, 15, 0.55);
    font-family: var(--font-rail-label);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  body.is-map-active .mobile-map-control-rail .spatial-view-icon {
    width: 13px;
    height: 13px;
  }

  body.is-map-active .mobile-map-control-rail .spatial-view-button:not(.is-active):not(:disabled):hover {
    background: rgba(47, 127, 137, 0.11);
  }

  body.is-map-active .map-surface-rail {
    position: absolute;
    top: var(--map-control-inset);
    left: calc(var(--map-control-inset) + var(--map-spatial-control-width) + var(--map-control-gap));
    right: auto;
    z-index: 6;
    display: block;
    pointer-events: auto;
  }

  body.is-route-mode .map-surface-rail,
  body.is-inspect-mode .map-surface-rail {
    display: none;
  }

  body.is-map-active .map-surface-rail .surface-story-toggle {
    display: grid;
    grid-template-columns: repeat(4, minmax(78px, auto));
    gap: 3px;
    min-height: 48px;
    padding: 3px;
    border: 1px solid rgba(22, 20, 15, 0.2);
    border-radius: var(--control-radius);
    background: rgba(255, 253, 247, 0.9);
    box-shadow: 0 3px 10px rgba(30, 25, 18, 0.08);
  }

  body.is-map-active .map-surface-rail .surface-story-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    height: auto;
    min-width: 0;
    padding: 0 12px 0 30px;
    border: 0;
    border-radius: var(--control-radius-inset);
    background:
      no-repeat left 10px center / 14px 14px
      var(--surface-icon, none),
      transparent;
    color: rgba(22, 20, 15, 0.55);
    font-family: var(--font-rail-label);
    font-size: max(var(--type-micro), 0.75rem);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: none;
    cursor: pointer;
  }

  body.is-map-active .map-surface-rail .surface-story-button::before,
  body.is-map-active .map-surface-rail .surface-story-button::after {
    content: none;
  }

  body.is-map-active .map-surface-rail .surface-story-button:hover {
    color: var(--chrome-ink);
  }

  body.is-map-active .map-surface-rail .surface-story-button:not(.is-active) {
    width: auto;
    min-width: 78px;
    justify-content: flex-start;
    padding: 0 12px 0 30px;
    background-position: left 10px center;
    font-size: max(var(--type-micro), 0.75rem);
    letter-spacing: 0.08em;
  }

  body.is-map-active .map-surface-rail .surface-story-button[disabled] {
    opacity: 0.42;
    cursor: default;
  }

  body.is-map-active .map-hub-tray {
    top: 62px;
    border-radius: 11px;
    border-color: var(--chrome-card-border);
    background: rgba(255, 253, 247, 0.92);
    box-shadow: var(--chrome-card-shadow);
  }

  body.is-map-active .map-state-pill {
    left: 14px;
    top: 62px;
    display: flex;
    gap: 7px;
    align-items: baseline;
    box-sizing: border-box;
    width: auto;
    max-width: min(300px, calc(100vw - 58px));
    min-height: 28px;
    padding: 6px 11px;
    overflow: hidden;
    border-radius: 9px;
    border-color: var(--chrome-card-border);
    background: rgba(255, 253, 247, 0.88);
    box-shadow:
      inset 3px 0 0 var(--accent-2),
      var(--chrome-card-shadow);
  }

  body.is-map-active .map-state-pill .state-pill-mode {
    flex: 0 0 auto;
    min-width: 0;
    max-width: 78px;
    overflow: hidden;
    font-size: var(--type-micro);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.is-map-active .map-state-pill .state-pill-place {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    font-size: 0.62rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.is-map-active .map-state-pill .state-pill-detail {
    display: none;
  }

  body.is-map-active .map-state-pill::after {
    content: none;
  }

  body.is-map-active.is-reach-mode .map-state-pill {
    width: 1px;
    height: 1px;
    max-width: none;
    min-height: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    background: transparent;
    box-shadow: none;
  }

  body.is-map-active .map-hub-tray {
    display: none;
  }

  body.is-map-active .map-corner-actions .icon-button,
  body.is-map-active .map-zoom-controls .icon-button {
    border: 1px solid var(--chrome-card-border);
    background: var(--chrome-card-bg);
    color: var(--chrome-ink);
    box-shadow: var(--chrome-card-shadow);
  }

  body.is-map-active .map-zoom-controls {
    left: auto;
    right: 14px;
    bottom: auto;
    top: 64px;
    display: grid;
    gap: 6px;
  }

  body.is-map-active .map-zoom-controls .icon-button {
    border-radius: var(--chrome-card-radius);
  }

  body.is-map-active .map-corner-actions {
    top: 14px;
    right: 14px;
  }

  body.is-map-active .map-corner-actions .icon-button {
    border-radius: var(--chrome-card-radius);
  }

  body.is-map-active .distance-legend {
    left: 14px;
    right: auto;
    bottom: 18px;
    border-radius: var(--chrome-card-radius);
    border-color: var(--chrome-card-border);
    background: rgba(255, 253, 247, 0.9);
    box-shadow: var(--chrome-card-shadow);
  }

  body.is-map-active .distance-legend::after {
    content: none;
  }

  body.is-map-active .legend {
    border-radius: var(--chrome-card-radius);
    border: 1px solid var(--chrome-card-border);
    background: rgba(255, 253, 247, 0.93);
    box-shadow: var(--chrome-card-shadow);
    padding: 11px 14px 10px;
  }

  body.is-map-active .legend::after {
    content: none;
  }

  body.is-map-active .legend .legend-kicker {
    color: rgba(22, 20, 15, 0.72);
    font-family: var(--font-rail-label);
    font-size: var(--type-micro);
    font-weight: 820;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  body.is-map-active .legend .legend-foot {
    color: rgba(22, 20, 15, 0.7);
    font-family: var(--font-mono);
    font-size: var(--type-micro);
    font-weight: 720;
    letter-spacing: 0.06em;
  }

  body.is-map-active .legend .legend-gradient {
    box-sizing: border-box;
    min-height: 30px;
    height: auto;
    padding: 0;
    align-items: end;
    background-clip: border-box;
    background-position: top left;
    background-repeat: no-repeat;
    background-size: 100% 12px;
    overflow: visible;
  }

  body.is-map-active .legend .legend-gradient span {
    margin-bottom: 0;
    color: rgba(22, 20, 15, 0.7);
    font-size: 0.625rem;
    font-weight: 740;
    line-height: 1;
    text-shadow: none;
  }

  body.is-map-active .legend .legend-gradient-time span {
    grid-row: 2;
    align-self: end;
  }

  body.is-map-active .legend .legend-foot {
    display: block;
    line-height: 1.25;
    white-space: normal;
  }

  body.is-map-active .legend .legend-bands {
    height: auto;
    min-height: 30px;
    overflow: visible;
  }

  body.is-map-active .legend.is-comparison {
    max-width: min(296px, calc(100% - 28px));
  }

  body.is-map-active .legend.is-comparison .legend-bands {
    display: grid;
    gap: 6px;
    height: auto;
    min-height: 36px;
    overflow: visible;
  }

  body.is-map-active .legend.is-comparison .legend-gradient-compare {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 5px;
    height: auto;
    min-height: 36px;
    padding: 0;
    overflow: visible;
    border: 0;
    background: transparent;
    background-clip: border-box;
    box-shadow: none;
  }

  body.is-map-active .legend.is-comparison .legend-gradient-compare::after {
    content: none;
    display: none;
  }

  body.is-map-active .legend.is-comparison .legend-gradient-compare span {
    display: grid;
    grid-template-rows: 5px auto;
    gap: 5px;
    min-width: 0;
    min-height: 36px;
    margin-bottom: 0;
    padding: 5px 5px 4px;
    overflow: hidden;
    border: 1px solid rgba(17, 16, 14, 0.22);
    background: rgba(255, 253, 247, 0.72);
    color: rgba(17, 16, 14, 0.76);
    font-size: 0.48rem;
    font-weight: 820;
    letter-spacing: 0.035em;
    line-height: 1.05;
    text-align: left;
    text-shadow: none;
    text-overflow: clip;
    white-space: normal;
  }

  body.is-map-active .legend.is-comparison .legend-gradient-compare span::before {
    content: "";
    display: block;
    width: 100%;
    height: 5px;
    border-radius: 999px;
    background: var(--compare-chip-color, rgba(17, 16, 14, 0.32));
  }

  body.is-map-active .legend.is-comparison .legend-gradient-compare span:nth-child(1) {
    --compare-chip-color: #c64a2d;
  }

  body.is-map-active .legend.is-comparison .legend-gradient-compare span:nth-child(2) {
    --compare-chip-color: rgba(72, 92, 122, 0.82);
  }

  body.is-map-active .legend.is-comparison .legend-gradient-compare span:nth-child(3) {
    --compare-chip-color: #2f7f89;
  }

  body.is-map-active .legend.is-comparison .legend-foot {
    display: block;
    overflow: visible;
    font-size: 0.56rem;
    letter-spacing: 0.035em;
    line-height: 1.25;
    text-transform: none;
    white-space: normal;
  }

  body.is-map-active .layers-panel {
    display: grid;
    gap: 12px;
    padding: 14px 14px 12px;
    background: rgba(255, 253, 247, 0.98);
  }

  body.is-map-active .layers-panel[hidden] {
    display: none;
  }

  body.is-map-active .layers-panel::before,
  body.is-map-active .layers-panel::after {
    content: none;
  }

  body.is-map-active .layers-panel .layers-panel-kicker {
    display: block;
    margin: 0;
    padding: 0 0 8px;
    border: 0;
    border-bottom: 1px solid rgba(17, 16, 14, 0.1);
    background: transparent;
    color: rgba(22, 20, 15, 0.62);
    font-family: var(--font-rail-label);
    font-size: 0.58rem;
    font-weight: 820;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    box-shadow: none;
  }

  body.is-map-active .layers-panel .layers-panel-kicker::before,
  body.is-map-active .layers-panel .layers-panel-kicker::after {
    content: none;
  }

  body.is-map-active .layers-panel .layers-hatch-section {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  body.is-map-active .layers-panel .layers-hatch-section::before,
  body.is-map-active .layers-panel .layers-hatch-section::after,
  body.is-map-active .layers-panel .layers-section-title::before,
  body.is-map-active .layers-panel .layers-section-title::after,
  body.is-map-active .layers-panel .select-control::before,
  body.is-map-active .layers-panel .select-control::after {
    content: none;
  }

  body.is-map-active .layers-panel .layers-section-title {
    margin: 0 0 4px;
    padding: 0;
    border: 0;
    background: transparent;
    color: rgba(22, 20, 15, 0.48);
    font-family: var(--font-rail-label);
    font-size: 0.54rem;
    font-weight: 820;
    letter-spacing: 0.13em;
    text-transform: uppercase;
  }

  body.is-map-active .layers-panel .toggle-control {
    display: flex;
    gap: 10px;
    align-items: center;
    min-height: 0;
    margin: 0 -6px;
    padding: 6px 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    box-shadow: none;
    color: var(--chrome-ink);
    font-family: var(--font-rail-label);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    cursor: pointer;
  }

  body.is-map-active .layers-panel .toggle-control:hover {
    background: rgba(17, 16, 14, 0.045);
  }

  body.is-map-active .layers-panel .toggle-control::before,
  body.is-map-active .layers-panel .toggle-control::after {
    content: none;
  }

  body.is-map-active .layers-panel .toggle-control span {
    order: 1;
    flex: 1 1 auto;
    padding: 0;
    border: 0;
    background: transparent;
    font-family: var(--font-rail-label);
    font-size: 0.68rem;
    font-weight: 700;
  }

  body.is-map-active .layers-panel .toggle-control input[type="checkbox"] {
    order: 2;
    -webkit-appearance: none;
    appearance: none;
    flex: 0 0 auto;
    width: 30px;
    height: 18px;
    margin: 0;
    border: 1px solid rgba(17, 16, 14, 0.18);
    border-radius: 999px;
    background: rgba(17, 16, 14, 0.14);
    box-shadow: none;
    position: relative;
    cursor: pointer;
    transition: background var(--motion-duration-fast, var(--motion-duration-fast)) var(--motion-ease-standard);
  }

  body.is-map-active .layers-panel .toggle-control input[type="checkbox"]::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 50%;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fffdf7;
    box-shadow: 0 1px 2px rgba(17, 16, 14, 0.3);
    transform: translateY(-50%);
    transition: transform var(--motion-duration-fast, var(--motion-duration-fast)) var(--motion-ease-standard);
  }

  body.is-map-active .layers-panel .toggle-control input[type="checkbox"]:checked {
    border-color: var(--chrome-ink);
    background: var(--chrome-ink);
  }

  body.is-map-active .layers-panel .toggle-control input[type="checkbox"]:checked::before {
    transform: translateY(-50%) translateX(12px);
  }

  body.is-map-active .layers-panel .toggle-control input[type="checkbox"]:focus-visible {
    outline: 2px solid rgba(201, 53, 43, 0.55);
    outline-offset: 2px;
  }

  body.is-map-active .layers-panel .select-control {
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  body.is-map-active .layers-panel .select-control > span {
    flex: 1 1 auto;
    color: var(--chrome-ink);
    font-family: var(--font-rail-label);
    font-size: 0.68rem;
    font-weight: 700;
  }

  body.is-map-active .layers-panel .select-control select {
    flex: 0 0 auto;
    /* Size to the options; the hatch panel default of 100% overflows here. */
    width: auto;
    min-height: 30px;
    padding: 4px 26px 4px 10px;
    border: 1px solid var(--chrome-card-border);
    border-radius: 9px;
    background:
      no-repeat right 9px center / 10px 10px
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316140f' stroke-opacity='0.55' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 9 7 7 7-7'/%3E%3C/svg%3E"),
      #fffdf7;
    color: var(--chrome-ink);
    font-family: var(--font-rail-label);
    font-size: 0.66rem;
    font-weight: 700;
    box-shadow: 0 1px 2px rgba(17, 16, 14, 0.04);
  }

  body.is-map-active:not(.has-origin) .map-panel {
    grid-auto-rows: 0;
    grid-template-rows: auto minmax(0, 1fr);
  }
}

.explore-line-picker-host { grid-area:line;position:relative;min-width:0 }
.mobile-control-grid > .explore-line-picker-host { grid-area:auto; grid-column:1/-1; }
body.is-map-active:not(.is-reach-mode) .explore-line-picker-host{display:none}
.explore-line-picker{height:100%}
.explore-line-picker summary{box-sizing:border-box;display:grid;grid-template-columns:28px minmax(0,1fr);gap:8px;align-items:center;height:100%;min-height:44px;padding:8px 12px;border:1px solid rgba(17,16,14,.14);border-radius:var(--control-radius);background:var(--panel-paper-fine);color:var(--ink);box-shadow:var(--shadow-contact);font-family:var(--font-rail-label);list-style:none;cursor:pointer}
.explore-line-picker summary>span{min-width:0}.explore-line-picker summary small{color:rgba(22,20,15,.62);font-size:var(--type-micro);font-weight:820;letter-spacing:.12em;line-height:1;text-transform:uppercase}.explore-line-picker summary strong{display:block;overflow:hidden;color:var(--ink);font-size:.95rem;font-weight:640;letter-spacing:.01em;line-height:1.15;text-overflow:ellipsis;white-space:nowrap}.explore-line-picker summary:focus-visible{outline:2px solid rgba(201,53,43,.55);outline-offset:2px}
.explore-line-picker summary .route-logo-mark{--route-logo-size:24px}/* All lines: a small network of three line inks crossing at an interchange,
   on a paper key so it sits with the line badges it stands for. */
.line-picker-network-mark{display:grid;place-items:center;box-sizing:border-box;width:26px;height:26px;border-radius:7px;background:var(--relief-control-paper-bright,#fffdf7);box-shadow:var(--relief-contact,0 0 0 1px rgba(55,45,31,.14))}
.line-picker-network-mark svg{display:block;width:20px;height:20px;overflow:visible}
.line-picker-network-line{fill:none;stroke-width:2.4;stroke-linecap:round}
.line-picker-network-line.is-a{stroke:#c9352b}.line-picker-network-line.is-b{stroke:#2f6fae}.line-picker-network-line.is-c{stroke:#d99a22}
.line-picker-network-stop{fill:#fffdf7;stroke:var(--ink,#11100e);stroke-width:1.6}
.explore-line-picker-popover{position:absolute;z-index:8000;top:calc(100% + 7px);right:0;display:grid;grid-template-rows:auto auto minmax(0,1fr);width:min(390px,calc(100vw - 28px));height:min(620px,62vh);padding:8px;overflow:hidden;border:1px solid rgba(17,16,14,.14);border-radius:var(--control-radius);background:var(--panel-paper-fine);box-shadow:var(--shadow-contact)}
.explore-line-picker-popover>input{width:100%;min-height:44px;margin:5px 0}
.explore-line-picker summary { position: relative; padding-right: 28px; }
.explore-line-picker summary::after { content: ""; position: absolute; right: 13px; top: calc(50% - 4px); width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.explore-line-picker[open] summary::after { transform: rotate(225deg); }
.explore-line-picker[open] summary { border-bottom-color: var(--accent); }
.explore-line-picker-options button[aria-selected="true"] { background: #e8e4d9; box-shadow: inset 3px 0 var(--accent); }
.explore-line-picker-options button[aria-selected="true"] strong::after { content: " ✓"; color: #285e54; }
.explore-line-picker-options button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.explore-line-picker-options { min-height:0;overflow-y:auto }
.explore-line-picker-options button{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:6px;align-items:center;width:100%;min-height:44px;border:0;background:transparent;text-align:left}
.explore-line-picker-options button[hidden],.explore-line-picker-empty[hidden]{display:none}
.explore-line-picker-group>h3{font:.58rem var(--font-mono)}
@media (max-width:760px),(max-width:980px) and (orientation:portrait),(max-width:980px) and (max-height:599px) {
  body.is-map-active .command-sentence>.explore-line-picker-host { display: none; }
  body.is-map-active .mobile-sheet-context-rail>.explore-line-picker-host { display: block; grid-column: 1/-1; order: 2; }
  .explore-line-picker summary{height:48px}
  .explore-line-picker-popover{position:relative;top:5px;width:100%;height:48dvh}
}
.advanced-surface-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid rgba(17, 16, 14, 0.16);
  border-radius: 3px;
  background: rgba(17, 16, 14, 0.12);
}

.advanced-surface-toggle .surface-story-button {
  min-width: 0;
  min-height: 31px;
  border: 0;
  border-radius: 0;
  background: rgba(255, 253, 247, 0.92);
  font-size: 0.6rem;
}

@media (min-width: 981px) and (max-width: 1240px), (min-width: 761px) and (max-width: 980px) and (min-height: 600px) and (orientation: landscape) {
  body.is-map-active .command-mast {
    display: grid;
    grid-template-columns: minmax(430px, 1fr) 120px minmax(112px, auto);
    gap: 8px;
    height: auto;
    min-height: 52px;
  }

  body.is-map-active .command-mast .mode-control-lenses {
    min-width: 0;
    width: 100%;
  }

  body.is-map-active .command-mast .mast-language-toggle {
    display: none;
  }

  body.is-map-active .command-mast .share-button,
  body.is-map-active .command-mast .layers-button {
    min-width: 0;
    width: 100%;
    padding-inline: 34px 10px;
    font-size: 0.58rem;
    letter-spacing: 0.08em;
  }

  body.is-map-active .command-sentence {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "from"
      "time";
    gap: 8px;
    height: auto;
  }

  body.is-map-active .panel-header .map-origin-search {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) minmax(112px, auto) minmax(112px, auto);
    grid-template-areas: "search set-origin locate";
    align-items: stretch;
    gap: 8px;
    height: 52px;
    overflow: visible;
  }

  body.is-map-active .panel-header .map-origin-search .search-card-top,
  body.is-map-active .panel-header .map-origin-search .search-row {
    display: contents;
    grid-area: auto;
    grid-column: auto;
  }

  body.is-map-active .map-origin-search .search-card-top label {
    top: 8px;
    left: 42px;
  }

  body.is-map-active .map-origin-search .search-row input,
  body.is-map-active .map-origin-search .search-row button,
  body.is-map-active .map-origin-search .text-button {
    height: 52px;
    min-height: 52px;
  }

  body.is-map-active .map-origin-search .search-row input {
    grid-area: search;
    width: 100%;
    min-width: 320px;
  }

  body.is-map-active .panel-header .map-origin-search .search-row button {
    grid-area: set-origin;
  }

  body.is-map-active .panel-header .map-origin-search .text-button {
    grid-area: locate;
    grid-column: locate;
    max-width: none;
  }

  body.is-map-active .panel-header .map-origin-search .search-row button,
  body.is-map-active .panel-header .map-origin-search .text-button {
    justify-content: center;
    min-width: 0;
    padding-inline: 34px 12px;
  }

  body.is-map-active .command-sentence .range-control {
    min-height: 52px;
    padding-block: 7px 6px;
  }

  body.is-map-active .map-surface-rail {
    top: calc(var(--map-control-inset) + 48px + var(--map-control-gap));
    left: var(--map-control-inset);
    right: auto;
    transform: none;
  }


  body.is-map-active .mobile-map-control-rail .reach-isochrone-control {
    top: 0;
    left: calc(100% + var(--map-control-gap));
  }

  body.is-map-active .map-surface-rail .surface-story-toggle {
    grid-template-columns: repeat(4, minmax(0, auto));
    max-width: calc(100% - 28px);
  }

  body.is-map-active .map-surface-rail .surface-story-button.is-active {
    padding-inline: 28px 10px;
    font-size: var(--type-micro);
  }

  body.is-map-active .map-state-pill,
  body.is-map-active .map-hub-tray{
    top: 126px;
  }
}

@media (min-width: 981px) and (max-width: 1080px), (min-width: 761px) and (max-width: 980px) and (min-height: 600px) and (orientation: landscape) {
  body.is-map-active .command-mast {
    grid-template-columns: minmax(390px, 1fr) 108px minmax(104px, auto);
  }

  body.is-map-active .command-mast .share-button {
    width: 108px;
    min-width: 108px;
    max-width: 108px;
    padding: 0 8px 0 31px;
    background-position: left 9px center;
    font-size: 0.52rem;
  }

  body.is-map-active .command-mast .layers-disclosure > .layers-button {
    padding-inline: 34px 10px;
    font-size: 0.54rem;
  }

  body.is-map-active .panel-header .map-origin-search {
    grid-template-columns: minmax(0, 1fr) minmax(104px, auto) minmax(104px, auto);
  }

  body.is-map-active .panel-header .map-origin-search .search-row button,
  body.is-map-active .panel-header .map-origin-search .text-button {
    padding-inline: 30px 10px;
    font-size: 0.56rem;
    letter-spacing: 0.06em;
  }

  body.is-map-active .map-surface-rail .surface-story-button.is-active {
    padding-inline: 24px 8px;
    font-size: var(--type-micro);
  }
}

@media (min-width: 761px) and (max-width: 980px) and (min-height: 600px) and (orientation: landscape) {
  body.is-map-active .command-mast {
    grid-template-columns: minmax(0, 1fr) 102px minmax(98px, auto);
  }

  body.is-map-active .command-mast .mode-control-lenses {
    min-width: 0;
  }

  body.is-map-active .command-mast .mode-control-lenses .mode-button em {
    display: none;
  }

  body.is-map-active .command-mast .share-button {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: 102px;
    min-width: 102px;
    max-width: 102px;
    padding: 0 7px 0 29px;
    background-position: left 9px center;
    font-size: 0.5rem;
    line-height: 0.96;
    text-align: left;
    white-space: nowrap;
  }

  body.is-map-active .command-mast .layers-disclosure > .layers-button {
    min-width: 98px;
    padding-inline: 30px 8px;
    background-position: left 9px center;
    font-size: 0.56rem;
  }
}

@media (min-width: 761px) {
  body.is-map-active .panel-header .map-origin-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(104px, auto);
    grid-template-areas: "search locate";
    gap: 8px;
  }

  body.is-map-active .panel-header .map-origin-search .search-card-top,
  body.is-map-active .panel-header .map-origin-search .search-row {
    display: contents;
  }

  body.is-map-active .panel-header .map-origin-search .search-row input {
    grid-area: search;
    width: 100%;
    min-width: 0;
  }

  body.is-map-active .panel-header .map-origin-search .text-button {
    grid-area: locate;
    grid-column: locate;
    max-width: none;
  }

  body.is-map-active.has-origin .panel-header .map-origin-search .search-row input {
    border-left-color: rgba(201, 53, 43, 0.72);
    box-shadow:
      inset 3px 0 0 rgba(201, 53, 43, 0.78),
      var(--chrome-card-shadow);
  }

  body.is-map-active.has-origin .panel-header .map-origin-search .search-row input:focus-visible {
    box-shadow:
      inset 3px 0 0 rgba(201, 53, 43, 0.88),
      var(--chrome-card-shadow),
      0 0 0 3px rgba(201, 53, 43, 0.14);
  }
}

.map-origin-search.is-origin-resolved .search-row input,
.mobile-search-form.is-origin-resolved .mobile-search-row input,
.mobile-map-search-form.is-origin-resolved .mobile-map-search-row input {
  animation: origin-search-resolved 780ms cubic-bezier(0.16, 1, 0.3, 1) 1 both;
}

@keyframes origin-search-resolved {
  0% {
    box-shadow: inset 3px 0 0 rgba(201, 53, 43, 0.95), 0 0 0 0 rgba(201, 53, 43, 0.26);
  }
  42% {
    box-shadow: inset 3px 0 0 rgba(201, 53, 43, 0.9), 0 0 0 4px rgba(201, 53, 43, 0.12);
  }
  100% {
    box-shadow: inset 3px 0 0 rgba(201, 53, 43, 0.78), var(--chrome-card-shadow);
  }
}

@media (prefers-reduced-motion: reduce) {
  .map-origin-search.is-origin-resolved .search-row input,
  .mobile-search-form.is-origin-resolved .mobile-search-row input,
  .mobile-map-search-form.is-origin-resolved .mobile-map-search-row input {
    animation: none;
  }
}

@media (min-width: 761px) and (max-width: 900px) and (min-height: 600px) and (orientation: landscape) {
  body.is-map-active .command-mast .mode-control-lenses .mode-button,
  body.is-map-active .command-mast .mode-control-lenses .mode-button.is-active {
    align-items: center;
    padding: 4px 2px;
    background-image: none;
    text-align: center;
  }

  body.is-map-active .command-mast .mode-control-lenses .mode-button strong {
    max-width: 100%;
    overflow: hidden;
    font-family: var(--font-main);
    font-size: 0.6875rem;
    font-weight: 720;
    letter-spacing: 0;
    line-height: 1.1;
    text-overflow: ellipsis;
    text-transform: none;
  }

  body.is-map-active .command-mast .mode-control-lenses .mode-button em {
    display: none;
  }
}

@media (min-width: 981px) and (max-width: 1120px), (min-width: 761px) and (max-width: 980px) and (min-height: 600px) and (orientation: landscape) {
  body.is-map-active .map-surface-rail .surface-story-toggle {
    grid-template-columns: repeat(4, minmax(78px, auto));
    width: max-content;
    max-width: calc(100vw - 58px);
    overflow: visible;
  }

  body.is-map-active .map-surface-rail .surface-story-button,
  body.is-map-active .map-surface-rail .surface-story-button.is-active {
    width: auto;
    min-width: 78px;
    justify-content: flex-start;
    padding: 0 12px 0 30px;
    overflow: visible;
    background-position: left 10px center;
    font-size: var(--type-micro);
    letter-spacing: 0.04em;
    text-indent: 0;
  }
}

.spatial-view-guide {
  position: relative;
  display: grid;
  gap: 3px;
  min-width: 258px;
  padding: 5px;
  border: 1px solid rgba(17, 16, 14, 0.46);
  background:
    linear-gradient(90deg, rgba(47, 127, 137, 0.16), transparent 10px),
    rgba(255, 253, 247, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 253, 247, 0.7);
}

.spatial-view-eyebrow{
  min-width: 0;
  overflow: hidden;
  font-family: var(--font-mono);
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.spatial-view-eyebrow {
  color: rgba(17, 16, 14, 0.58);
  font-size: 0.55rem;
  font-weight: 900;
  letter-spacing: 0.11em;
}

.spatial-view-guide .spatial-view-toggle {
  display: grid;
  grid-area: auto;
  grid-auto-flow: initial;
  grid-template-columns: minmax(88px, 0.82fr) minmax(132px, 1.18fr);
  width: 100%;
  min-height: 46px;
  border-color: rgba(17, 16, 14, 0.48);
  background: rgba(255, 253, 247, 0.68);
}

@media (max-width: 980px) {
  body.is-map-active .mobile-map-control-rail .mobile-map-spatial-view-toggle {
    min-height: 29px;
  }
}

.spatial-view-button {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  min-width: 0;
  min-height: 44px;
  padding: 5px 9px;
  text-align: left;
}

.spatial-view-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.spatial-view-text,
.spatial-view-button em {
  min-width: 0;
  overflow: hidden;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.spatial-view-text {
  font-family: var(--font-main);
  font-size: var(--type-micro);
  font-weight: 900;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.spatial-view-button em {
  color: rgba(17, 16, 14, 0.54);
  font-family: var(--font-serif);
  font-size: 0.62rem;
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.spatial-view-icon {
  position: relative;
  width: 18px;
  height: 18px;
  color: currentColor;
  opacity: 0.82;
}

.spatial-view-icon-map {
  border: 1px solid currentColor;
  background:
    linear-gradient(90deg, transparent 45%, currentColor 46% 54%, transparent 55%),
    linear-gradient(180deg, transparent 45%, currentColor 46% 54%, transparent 55%);
}

.spatial-view-icon-map::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 8px;
  width: 12px;
  height: 2px;
  background: currentColor;
  transform: rotate(-22deg);
  transform-origin: center;
}

.spatial-view-icon-rings {
  border-radius: 50%;
  background:
    radial-gradient(circle, currentColor 0 2px, transparent 2.5px 5px, currentColor 5.5px 6.5px, transparent 7px 9px, currentColor 9.5px 10.5px, transparent 11px);
}

.spatial-view-button:not(.is-active):not(:disabled):hover {
  background: rgba(47, 127, 137, 0.11);
}

body:not(.is-reach-mode) .spatial-view-guide {
  display: none;
}

@media (max-width: 1180px) and (min-width: 981px), (min-width: 761px) and (max-width: 980px) and (min-height: 600px) and (orientation: landscape) {
  body.is-map-active .spatial-view-button em{
    display: none;
  }

}

@media (max-width: 980px) {
  .spatial-view-guide {
    min-width: 0;
  }
}

body.is-map-active .spatial-view-guide .spatial-view-toggle {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
}

body.is-map-active .spatial-view-button {
  min-width: 0;
}

@media (max-width: 1180px) and (min-width: 981px), (min-width: 761px) and (max-width: 980px) and (min-height: 600px) and (orientation: landscape) {
  body.is-map-active .spatial-view-guide .spatial-view-toggle {
    min-height: 34px;
  }

  body.is-map-active .spatial-view-button {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    min-height: 32px;
    padding-inline: 6px;
    text-align: center;
  }

  body.is-map-active .spatial-view-icon,
  body.is-map-active .spatial-view-button em {
    display: none;
  }

  body.is-map-active .spatial-view-text {
    font-size: var(--type-micro);
  }
}

body.is-map-active .layers-panel .layers-hatch-section.layers-hatch-model {
  padding: 11px 12px 10px 14px;
  background:
    linear-gradient(90deg, rgba(17, 16, 14, 0.018) 1px, transparent 1px),
    rgba(255, 253, 247, 0.48);
  background-size: 18px 18px, auto;
  box-shadow: inset 3px 0 0 var(--bay-accent);
}

.layers-hatch-model::before {
  display: none;
}

.layers-hatch-model::after {
  opacity: 0.58;
}

.layers-hatch-section .select-control {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.layers-hatch-section .select-control:hover,
.layers-hatch-section .select-control:focus-within {
  background: transparent;
  box-shadow: none;
}

.layers-hatch-section .select-control > span {
  padding-left: 4px;
  color: rgba(17, 16, 14, 0.66);
  line-height: 1;
}

.layers-hatch-section .select-control select {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  min-height: 34px;
  padding: 0 30px 0 12px;
  border: 1px solid rgba(17, 16, 14, 0.24);
  background: linear-gradient(180deg, rgba(255, 253, 247, 0.74), rgba(232, 225, 211, 0.58));
  box-shadow: none;
  text-align: left;
}

.layers-hatch-section .select-control::after {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-65%) rotate(45deg);
}

.layers-hatch-section .select-control:focus-within select {
  border-color: rgba(201, 53, 43, 0.58);
  box-shadow: 0 0 0 2px rgba(201, 53, 43, 0.1);
}

body.is-map-active .panel-title-block {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (min-width: 981px), (min-width: 761px) and (max-width: 980px) and (min-height: 600px) and (orientation: landscape) {
  body.is-map-active.is-route-mode .command-sentence {
    display: none;
  }
}

body.is-map-active.is-inspect-mode .command-sentence > .range-control {
  display: none;
}

body.is-map-active.is-inspect-mode #livingRadiusControl.living-radius-control {
  grid-area: time;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: auto repeat(6, minmax(0, 1fr));
  gap: 7px;
  align-items: stretch;
  min-width: 0;
  min-height: 58px;
  padding: 8px;
  border: 1px solid var(--chrome-card-border);
  border-radius: var(--chrome-radius);
  background: var(--chrome-card-bg);
  box-shadow: var(--chrome-card-shadow);
}

body.is-map-active.is-inspect-mode #livingRadiusControl > span {
  align-self: center;
  min-width: 74px;
  color: rgba(22, 20, 15, 0.62);
  font-family: var(--font-rail-label);
  font-size: 0.56rem;
  font-weight: 820;
  letter-spacing: 0.12em;
  line-height: 1.15;
  text-transform: uppercase;
}

body.is-map-active.is-inspect-mode #livingRadiusControl .daily-life-radius-button {
  min-width: 0;
  min-height: 42px;
  padding: 7px 8px;
  border: 1px solid rgba(17, 16, 14, 0.14);
  border-radius: 9px;
  background: rgba(255, 253, 247, 0.58);
  color: rgba(17, 16, 14, 0.68);
  box-shadow: none;
  cursor: pointer;
  font-family: var(--font-main);
  text-align: left;
}

body.is-map-active.is-inspect-mode #livingRadiusControl .daily-life-radius-button.is-active {
  border-color: rgba(146, 36, 28, 0.86);
  background:
    linear-gradient(180deg, rgba(216, 71, 58, 0.98), rgba(184, 43, 34, 0.98));
  color: var(--chrome-cream);
  box-shadow:
    inset 0 1px 0 rgba(255, 253, 247, 0.24),
    0 8px 18px rgba(146, 36, 28, 0.18);
}

body.is-map-active.is-inspect-mode #livingRadiusControl .daily-life-radius-button strong,
body.is-map-active.is-inspect-mode #livingRadiusControl .daily-life-radius-button small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.is-map-active.is-inspect-mode #livingRadiusControl .daily-life-radius-button.is-active small {
  color: rgba(255, 253, 247, 0.78);
}

@media (min-width: 761px) and (max-width: 980px) and (min-height: 600px) and (orientation: landscape) {
  body.is-map-active.is-inspect-mode #livingRadiusControl.living-radius-control {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: minmax(42px, auto);
  }

  body.is-map-active.is-inspect-mode #livingRadiusControl > span {
    grid-column: 1 / -1;
    min-width: 0;
  }
}

@media (min-width: 1241px) {
  body.is-map-active.is-inspect-mode .command-sentence {
    grid-template-columns: minmax(0, 1.25fr) minmax(min(580px, 62%), 1fr);
  }
}

@media (min-width: 1241px) and (max-width: 1369px) {
  body.is-map-active.is-inspect-mode #livingRadiusControl.living-radius-control {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  body.is-map-active.is-inspect-mode #livingRadiusControl > span {
    display: none;
  }

  body.is-map-active.is-inspect-mode #livingRadiusControl .daily-life-radius-button {
    padding-inline: 7px;
  }
}

.flap-value {
  display: inline-flex;
  justify-content: flex-end;
  line-height: 1;
}

body.is-map-active .command-sentence .range-control strong b.flap-value {
  display: flex;
  justify-content: flex-end;
  line-height: 1;
}


@media (min-width: 981px) and (max-width: 1120px) {
  html body.is-map-active {
    --tablet-dossier-width: clamp(310px, 32vw, 340px);
  }

  html body.is-map-active .workspace {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
  }

  body.is-map-active .map-panel {
    grid-column: 1;
    min-width: 0;
  }

  body.is-map-active.has-origin .workspace > .side-panel {
    position: absolute;
    top: 122px;
    right: 0;
    bottom: 0;
    z-index: 34;
    width: var(--tablet-dossier-width);
    height: auto;
    min-height: 0;
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid rgba(17, 16, 14, 0.24);
    border-radius: 12px;
    box-shadow:
      0 1px 2px rgba(17, 16, 14, 0.08),
      -12px 18px 36px rgba(35, 29, 20, 0.16);
    overscroll-behavior: contain;
  }

  /* Explore uses a two-row origin/time sentence at this width. Align the
     overlay dossier to the map frame instead of the now-taller command stack,
     keeping the full travel-time ruler visible and the panel edge registered
     with the map. */
  body.is-map-active.is-reach-mode.has-origin .workspace > .side-panel {
    top: 192px;
  }

  body.is-map-active.has-origin .command-sentence {
    grid-template-columns: minmax(330px, 0.9fr) minmax(420px, 1.1fr);
    grid-template-areas: "from time";
    gap: 8px;
  }

  body.is-map-active.is-inspect-mode.has-origin .command-sentence {
    grid-template-columns: minmax(320px, 0.82fr) minmax(520px, 1.18fr);
  }

  body.is-map-active.has-origin .panel-header .map-origin-search,
  body.is-map-active.has-origin .command-sentence .range-control,
  body.is-map-active.is-inspect-mode.has-origin #livingRadiusControl.living-radius-control {
    min-height: 52px;
    height: 52px;
  }
}


@media (min-width: 981px) and (max-width: 1240px) {
  body.is-map-active .command-mast {
    grid-template-columns: minmax(0, 1fr) 136px minmax(112px, auto);
  }

  body.is-map-active .command-mast .share-button {
    width: 136px;
    min-width: 136px;
    max-width: 136px;
    padding-inline: 34px 10px;
    font-size: 0.58rem;
    letter-spacing: 0.07em;
  }
}

/* With the origin dossier alongside the map, the three-part question bar
   becomes narrower than its search and location controls before the mast
   itself reaches the compact breakpoint. Stack the time instrument at that
   intermediate width instead of letting the search row overflow its grid. */
@media (min-width: 1241px) and (max-width: 1320px) {
  body.is-map-active.has-origin .command-sentence {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "from"
      "time";
    height: auto;
  }
}

.flap-digit {
  position: relative;
  display: inline-block;
  height: 1em;
  overflow: hidden;
  vertical-align: top;
}

.flap-digit::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 5%;
  left: 5%;
  height: 1px;
  background: rgba(17, 16, 14, 0.08);
  pointer-events: none;
}

.flap-digit-roll {
  display: block;
  transform: translateY(calc(var(--flap-index, 0) * -1em));
  transition: transform var(--motion-duration-slow, 320ms) var(--motion-ease-emphasized, cubic-bezier(0.2, 0.8, 0.2, 1));
  will-change: transform;
}

.flap-digit-roll em {
  display: block;
  height: 1em;
  font-style: normal;
  line-height: 1;
}


.layers-hatch-section .is-disabled {
  opacity: 0.48;
}

.layers-hatch-section .is-mode-hidden,
.mobile-control-section .is-mode-hidden,
.share-button[hidden],
.mobile-share-button[hidden] {
  display: none;
}

.layers-hatch-section:not(:has(.toggle-control:not(.is-mode-hidden):not([hidden]), .select-control:not(.is-mode-hidden):not([hidden]), .range-control:not(.is-mode-hidden):not([hidden]), .method-link)),
.mobile-control-section:not(:has(.toggle-control:not(.is-mode-hidden):not([hidden]), .select-control:not(.is-mode-hidden):not([hidden]), .language-toggle, .method-link)) {
  display: none;
}

@media (min-width: 761px) and (min-height: 600px) {
  body.is-map-active .command-mast .share-button[hidden] + .command-utility-tray {
    margin-left: auto;
  }

}

/* Settings and language are one quiet utility instrument in the masthead.
 * This deliberately overrides the retired hatch/key styling above: depth is
 * reserved for the open state, while the closed tray matches adjacent chrome. */
@media (min-width: 981px), (min-width: 761px) and (max-width: 980px) and (min-height: 600px) and (orientation: landscape) {
  html body.is-map-active .command-mast .command-utility-tray {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(116px, auto) auto;
    align-items: stretch;
    flex: 0 0 auto;
    min-width: 0;
    height: 100%;
    padding: 4px;
    border: 1px solid var(--chrome-card-border);
    border-radius: var(--chrome-radius);
    background: var(--chrome-card-bg);
    box-shadow: var(--chrome-card-shadow);
  }

  /* This tray is an isolated stacking context. Lift the context while its
     popover is open so Settings clears the later search/time-control row. */
  html body.is-map-active .command-mast .command-utility-tray[data-hatch-state="open"] {
    z-index: 7000;
  }

  html body.is-map-active .command-mast .command-utility-tray .layers-disclosure {
    position: static;
    z-index: auto;
    display: grid;
    width: auto;
    min-width: 0;
    height: auto;
  }

  html body.is-map-active .command-mast .command-utility-tray .layers-disclosure > .layers-button {
    display: grid;
    grid-template-columns: 17px minmax(0, 1fr) 12px;
    gap: 8px;
    align-items: center;
    justify-content: initial;
    width: 100%;
    min-width: 116px;
    height: 100%;
    min-height: 0;
    padding: 0 11px;
    overflow: visible;
    border: 0;
    border-right: 1px solid rgba(17, 16, 14, 0.11);
    border-radius: var(--chrome-radius-inner) 0 0 var(--chrome-radius-inner);
    background: transparent;
    background-image: none;
    color: rgba(22, 20, 15, 0.72);
    font-family: var(--font-rail-label);
    font-size: var(--type-label);
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1;
    text-align: left;
    text-transform: uppercase;
    box-shadow: none;
    transition:
      background-color var(--motion-duration-fast) var(--motion-ease-standard),
      box-shadow var(--motion-duration-fast) var(--motion-ease-standard),
      color var(--motion-duration-fast) var(--motion-ease-standard);
  }

  html body.is-map-active .command-mast .layers-settings-icon,
  html body.is-map-active .command-mast .layers-chevron {
    display: block;
    width: 100%;
    color: currentColor;
  }

  html body.is-map-active .command-mast .layers-settings-icon {
    height: 17px;
  }

  html body.is-map-active .command-mast .layers-settings-icon svg {
    display: block;
    width: 17px;
    height: 17px;
    overflow: visible;
    fill: #fffdf7;
    stroke: currentColor;
    stroke-width: 1.45;
    stroke-linecap: round;
  }

  html body.is-map-active .command-mast .command-utility-tray .layers-chevron {
    width: 12px;
    height: 12px;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    transform: none;
    animation: none;
    transition: transform 180ms var(--motion-ease-standard);
  }

  html body.is-map-active .command-mast .command-utility-tray[data-hatch-state="open"] .layers-disclosure > .layers-button {
    border-right-color: rgba(17, 16, 14, 0.14);
    background: rgba(17, 16, 14, 0.07);
    color: var(--chrome-ink);
    box-shadow:
      inset 0 2px 5px rgba(17, 16, 14, 0.14),
      inset 0 0 0 1px rgba(17, 16, 14, 0.06);
  }

  html body.is-map-active .command-mast .command-utility-tray[data-hatch-state="open"] .layers-chevron {
    transform: rotate(180deg);
  }

  html body.is-map-active .command-mast .command-utility-tray .layers-button:is(:hover, :focus-visible) {
    border-color: transparent;
    border-right-color: rgba(17, 16, 14, 0.14);
    background-color: rgba(255, 253, 247, 0.7);
    color: var(--chrome-ink);
    box-shadow: none;
    transform: none;
  }

  html body.is-map-active .command-mast .command-utility-tray .layers-button:focus-visible {
    outline: 2px solid rgba(179, 42, 32, 0.34);
    outline-offset: 1px;
  }

  html body.is-map-active .command-mast .command-utility-tray .mast-language-toggle {
    display: grid;
    grid-template-columns: repeat(2, minmax(34px, auto));
    gap: 2px;
    align-items: stretch;
    width: auto;
    min-width: 0;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 0 0 0 4px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }



  html body.is-map-active .command-mast .command-utility-tray .layers-panel,
  html body.is-map-active .command-mast .command-utility-tray .layers-panel[data-hatch-state="open"] {
    right: 0;
  }
}

@media (min-width: 981px) and (max-width: 1240px), (min-width: 761px) and (max-width: 980px) and (min-height: 600px) and (orientation: landscape) {
  html body.is-map-active .command-mast .command-utility-tray {
    grid-template-columns: minmax(104px, 1fr) auto;
    width: 100%;
    padding: 4px;
    border-radius: var(--chrome-radius);
  }

  html body.is-map-active .command-mast .command-utility-tray .mast-language-toggle {
    display: none;
  }

  html body.is-map-active .command-mast .command-utility-tray .layers-disclosure > .layers-button {
    grid-template-columns: 16px minmax(0, 1fr) 10px;
    gap: 5px;
    min-width: 0;
    padding: 0 8px;
    border-right: 1px solid rgba(17, 16, 14, 0.11);
    border-radius: var(--chrome-radius-inner) 0 0 var(--chrome-radius-inner);
    font-size: 0.56rem;
    letter-spacing: 0.05em;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body.is-map-active .command-mast .command-utility-tray .layers-chevron {
    transition: none;
  }
}


.spatial-view-button.is-active,
body.is-map-active .mobile-map-control-rail .spatial-view-button.is-active,
body.is-map-active .map-surface-rail .surface-story-button.is-active {
  border-color: rgba(17, 16, 14, 0.3);
  background-color: rgba(17, 16, 14, 0.075);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(17, 16, 14, 0.18);
}

.spatial-view-button.is-active em,
body.is-map-active .mobile-map-control-rail .spatial-view-button.is-active .spatial-view-text {
  color: rgba(17, 16, 14, 0.66);
}

.spatial-view-button.is-active::after {
  content: none;
}

@media (min-width: 761px) and (max-width: 1240px) {
  body.is-map-active .command-sentence {
    grid-template-columns: minmax(0, 1fr) minmax(190px, 0.32fr);
    grid-template-areas:
      "from line"
      "time time";
  }
}

/* Explore asks one question: from [origin] on [line] within [travel time]
   on [schedule]. Its clauses share one well (atlas-controls.css), so they sit
   edge to edge. Below 1321px, where the dossier leaves the row too narrow for
   a 240px origin and a 300px ruler, the ruler takes its own row. */
@media (min-width: 981px), (min-width: 761px) and (max-width: 980px) and (min-height: 600px) and (orientation: landscape) {
  html body.is-map-active.is-reach-mode .panel-header .command-sentence {
    gap: 0;
    height: 52px;
  }

  html body.is-map-active.is-reach-mode:not(.has-origin) .panel-header .command-sentence {
    grid-template-columns: minmax(240px, 1fr) minmax(150px, 200px) minmax(168px, 200px);
    grid-template-areas: "from line when";
  }

  html body.is-map-active.is-reach-mode.has-origin .panel-header .command-sentence {
    grid-template-columns: minmax(240px, 1fr) minmax(150px, 170px) minmax(300px, 340px) minmax(168px, 184px);
    grid-template-areas: "from line time when";
  }

  /* With an origin the Ctrl K hint is gone; leave room for the clear key only. */
  html body.is-map-active.is-reach-mode.has-origin .panel-header .map-origin-search .search-row input {
    padding-right: 46px;
  }

  body.is-map-active .panel-header .command-sentence > .sf-schedule-controls {
    grid-area: when;
  }

  body.is-map-active .command-sentence > .sf-schedule-controls > form {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 60;
    width: 360px;
    max-height: min(65vh, calc(100vh - 170px));
    margin: 0;
  }

  /* Home Finder's weekday schedule belongs to Find a Home, as in Data. */
  body.is-map-active .command-sentence > .sf-schedule-controls fieldset:last-of-type {
    display: none;
  }
}

@media (min-width: 761px) and (max-width: 1320px) {
  html body.is-map-active.is-reach-mode.has-origin .panel-header .command-sentence {
    grid-template-columns: minmax(0, 1fr) minmax(150px, 190px) minmax(168px, 196px);
    grid-template-areas:
      "from line when"
      "time time time";
    gap: 0;
    height: auto;
  }
}