:root {
  color-scheme: light;
  --ink: #17191d;
  --muted: #616773;
  --blue: #202329;
  --line: #20252b14;
  --pale: #eaedf0;
  --shadow: 0 18px 60px #10141b26, 0 2px 10px #10141b14;
  --sheet-height: 390px;
  font:
    14px -apple-system,
    BlinkMacSystemFont,
    SF Pro Text,
    system-ui,
    sans-serif;
  -webkit-font-smoothing: antialiased;
}
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
}
body {
  color: var(--ink);
  background: #7ca5b3;
}
button,
input,
select {
  font: inherit;
  color: inherit;
}
button {
  border: 0;
  background: none;
  cursor: pointer;
  touch-action: manipulation;
  transition:
    background 0.15s,
    box-shadow 0.15s;
}
button:disabled {
  opacity: 0.4;
  cursor: default;
}
button:active:not(:disabled) {
  filter: brightness(0.93);
}
button:focus:not(:focus-visible),
.leaflet-container:focus {
  outline: none;
}
:focus-visible {
  outline: 2px solid #343a42;
  outline-offset: 3px;
}
a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
h1,
h2,
h3,
p {
  margin: 0;
}
h1,
h2,
h3 {
  letter-spacing: -0.04em;
}
h1 {
  font-size: 22px;
  font-weight: 740;
  white-space: nowrap;
}
h2 {
  font-size: 20px;
  line-height: 1.2;
}
h3 {
  font-size: 15px;
  margin: 18px 0 7px;
}
svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
[hidden] {
  display: none !important;
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  clip-path: inset(50%);
}
.muted,
.brand p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}
.brand p {
  margin-top: 3px;
}
.text,
.back {
  font-weight: 640;
  padding: 8px 3px;
  min-height: 34px;
}
.back {
  margin-bottom: 5px;
}
.danger {
  color: #9a3030;
}
.links {
  font-size: 12px;
  line-height: 1.65;
  margin: 9px 0;
}
.glass,
#panel,
dialog {
  background: #f7f8faee;
  border: 1px solid #ffffffb8;
  box-shadow: var(--shadow);
}
@supports (backdrop-filter: blur(10px)) {
  .glass,
  #panel,
  dialog {
    background: linear-gradient(140deg, #ffffffdc, #edf0f4e8);
    backdrop-filter: blur(24px) saturate(130%);
    -webkit-backdrop-filter: blur(24px) saturate(130%);
  }
}
#map,
#apple-map {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #9cb8bf;
  touch-action: none;
  font-family: inherit;
}
#apple-map {
  z-index: 1;
}
body.apple-active #map {
  visibility: hidden;
}
#map.vector-base {
  background: #eaeee9;
}
.leaflet-tile-pane {
  transition: opacity 0.15s;
}
.map-surface {
  pointer-events: none;
  position: absolute;
}
.leaflet-container {
  outline: none;
}
.leaflet-tooltip {
  border: 1px solid #ffffffaa;
  border-radius: 8px;
  padding: 5px 8px;
  box-shadow: 0 3px 12px #152a4133;
  font:
    600 12px -apple-system,
    system-ui,
    sans-serif;
  color: #222;
  background: #f9fafbf5;
}
.leaflet-control-scale {
  margin: 0 !important;
  position: fixed;
  left: 442px;
  bottom: 25px;
  pointer-events: none;
}
.leaflet-control-scale-line {
  background: #f9fafbee;
  border: 1px solid #fff;
  border-bottom: 2px solid #252931;
  border-radius: 5px;
  padding: 3px 7px;
  color: #171a1f;
  text-shadow: none;
  font-size: 11px;
  box-shadow: 0 2px 8px #10141b22;
}
#panel {
  position: absolute;
  z-index: 8;
  left: 20px;
  top: 20px;
  bottom: 24px;
  width: 390px;
  border-radius: 28px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
}
.handle {
  display: grid;
  place-items: center;
  height: 23px;
  width: 100%;
  flex: none;
  padding: 0;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.handle span {
  width: 36px;
  height: 4px;
  border-radius: 10px;
  background: #9ca1a87d;
}
.sheet-expand {
  position: absolute;
  right: 14px;
  top: 0;
  min-width: 38px;
  height: 23px;
  color: #656b73;
  font-size: 18px;
}
.sheet-expand:hover {
  color: #111;
}
header {
  display: flex;
  gap: 11px;
  align-items: center;
  padding: 1px 18px 15px;
  flex: none;
}
.brand {
  flex: 1;
  min-width: 0;
}
.brand-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  background: #20242b;
  color: #fff;
  border-radius: 14px;
  box-shadow: 0 3px 10px #12192130;
  overflow: hidden;
}
.brand-icon svg {
  width: 24px;
  height: 24px;
}
.brand-icon:after {
  content: "";
  position: absolute;
  inset: auto 7px 4px;
  height: 2px;
  border-radius: 3px;
  background: linear-gradient(
    90deg,
    #ef5350,
    #febf52,
    #48be85,
    #49a8e5,
    #9965d5
  );
}
.square {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  padding: 0;
  flex: none;
}
.square:hover {
  background: #e4e7ec;
}
.pale {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #dce1e577;
  color: #373c43;
}
.square[aria-pressed="true"] {
  color: #fff;
  background: #272c34;
}
.segments {
  display: flex;
  gap: 3px;
  padding: 4px;
  border-radius: 16px;
  background: #d9dfe57a;
}
.segments button {
  min-height: 39px;
  min-width: 0;
  padding: 0 12px;
  border-radius: 12px;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 660;
  white-space: nowrap;
}
.segments button[aria-pressed="true"] {
  background: #fffffff5;
  box-shadow: 0 2px 7px #1c24351c;
  color: #15191f;
}
.segments svg {
  width: 18px;
  height: 18px;
}
nav {
  margin: 0 16px 12px;
  flex: none;
}
.body {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 17px 20px;
  scroll-behavior: smooth;
}
.body,
dialog,
html,
body {
  scrollbar-width: none;
}
.body::-webkit-scrollbar,
dialog::-webkit-scrollbar,
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
}
.body > section > h2 {
  margin: 3px 0 12px;
}
#panel.collapsed {
  bottom: auto;
  height: 89px;
}
#panel.collapsed nav,
#panel.collapsed .body,
#panel.collapsed footer {
  display: none;
}
.search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #e4e8edaf;
  border: 1px solid #d8dde466;
  border-radius: 15px;
  padding: 0 12px;
  color: #686e76;
}
.search input {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 9px 0;
  border: 0;
  outline: none;
  background: none;
  color: var(--ink);
}
.search input::placeholder {
  color: #757b83;
}
.search:focus-within {
  border-color: #838b96;
  box-shadow: 0 0 0 2px #838b9618;
}
.filters {
  display: flex;
  gap: 6px;
  margin: 13px 0;
}
.filters button {
  min-height: 34px;
  padding: 6px 12px;
  border-radius: 18px;
  font-size: 12px;
  font-weight: 650;
  color: #454c55;
  background: #e1e6eb88;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.filters button[aria-pressed="true"] {
  background: #262b32;
  color: #fff;
}
.filters svg {
  width: 17px;
  height: 17px;
}
#filters {
  flex-wrap: wrap;
  gap: 5px;
}
#show-stops {
  margin-left: auto;
  font-size: 11px;
}
#line-types {
  margin: 5px 0 8px;
}
#line-coverage {
  margin-bottom: 12px;
}
.operator {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  margin: 9px 0 12px;
}
.operator select {
  min-width: 0;
  flex: 1;
  min-height: 39px;
  padding: 7px 9px;
  border: 1px solid #d9dde2;
  background: #fcfdfe;
  border-radius: 11px;
}
.list-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 7px 0;
}
.list-title span {
  font-size: 11px;
  color: var(--muted);
}
.rows {
  list-style: none;
  margin: 0;
  padding: 0;
}
.row {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 62px;
  text-align: left;
  padding: 10px 1px;
  border-bottom: 1px solid var(--line);
}
.row:hover {
  background: #e1e5e96b;
}
.row-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: #e3e7ec;
  color: #252b34;
  font-size: 12px;
  font-weight: 750;
  flex: none;
}
.row-main {
  flex: 1;
  min-width: 0;
}
.row-title,
.row-sub {
  display: block;
}
.row-title {
  font-weight: 650;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.row-sub {
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--muted);
}
.row > svg {
  width: 13px;
  color: #7e8791;
}
.more {
  width: 100%;
  min-height: 42px;
  padding: 10px;
  margin-top: 12px;
  border: 1px solid #d1d6dc;
  border-radius: 13px;
  font-weight: 630;
  background: #fff6;
}
.stop-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  margin: -3px 0 10px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--line);
}
.stop-tools button {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
}
.stop-tools svg {
  width: 16px;
  height: 16px;
}
footer {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  border-top: 1px solid var(--line);
  background: #e6eaef94;
  font-size: 10px;
  color: #646b76;
  padding: 10px 16px;
}
footer button {
  font-size: inherit;
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
  padding: 0;
  white-space: nowrap;
}
footer i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #939ca5;
}
footer i.online {
  background: #348159;
}
.layer-box {
  position: absolute;
  z-index: 5;
  right: 18px;
  top: 18px;
  display: grid;
  justify-items: end;
  gap: 7px;
  pointer-events: none;
  max-width: calc(100vw - 445px);
}
.layer-box > * {
  pointer-events: auto;
}
.layer-box .segments {
  border-radius: 19px;
}
.layer-box .segments button {
  padding-inline: 15px;
}
.caption {
  padding: 6px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 560;
  color: #fff;
  background: #222831de;
  box-shadow: 0 2px 10px #10141b14;
  max-width: 100%;
  line-height: 1.3;
}
.date-tools {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 6px;
  border-radius: 16px;
  font-size: 12px;
}
.date-tools .square {
  width: 32px;
  height: 32px;
}
.date-label {
  min-height: 34px;
  padding: 5px 10px;
  font-weight: 650;
}
.tools {
  position: absolute;
  z-index: 5;
  right: 20px;
  bottom: 52px;
  display: grid;
  gap: 10px;
}
.group {
  display: grid;
  padding: 3px;
  border-radius: 18px;
}
.group button + button {
  border-top: 1px solid #aeb7c31f;
}
.blue {
  color: #fff;
  background: #20242b;
  border-radius: 14px;
  padding: 11px 15px;
  font-weight: 680;
}
.blue:hover:not(:disabled) {
  background: #393f48;
}
.square.blue {
  width: 49px;
  height: 49px;
  border-radius: 18px;
  box-shadow: 0 5px 18px #10141b40;
}
.wide {
  width: 100%;
  min-height: 45px;
}
.floating {
  position: absolute;
  z-index: 10;
  left: calc(50% + 180px);
  top: 115px;
  transform: translate(-50%);
  padding: 10px 13px;
  border-radius: 16px;
  max-width: min(380px, 85vw);
  font-size: 13px;
  font-weight: 610;
  display: flex;
  align-items: center;
  gap: 10px;
}
#notice {
  top: 170px;
  background: #222831ed;
  color: #fff;
  font-size: 12px;
  line-height: 1.5;
}
.picking #map {
  cursor: crosshair;
}
.attribution {
  font-size: 10px;
  line-height: 1.5;
  padding-top: 5px;
}
.endpoints {
  background: #e6eaefa6;
  border: 1px solid #ffffff96;
  border-radius: 16px;
  overflow: hidden;
  margin: 5px 0 9px;
}
.endpoints button {
  width: 100%;
  min-height: 48px;
  padding: 9px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  font-size: 13px;
}
.endpoints span {
  overflow-wrap: anywhere;
}
.endpoints button + button {
  border-top: 1px solid var(--line);
}
.endpoints i {
  display: block;
  width: 11px;
  height: 11px;
  border: 2px solid #464e58;
  border-radius: 50%;
  flex: none;
}
.endpoints #end i {
  background: #2e343d;
  border-radius: 3px;
}
.directions-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: #56606c;
}
.directions-toolbar button {
  padding: 5px 7px;
  min-height: 30px;
  font-weight: 600;
}
.travel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 10px 0 12px;
}
.travel button {
  font-size: 11px;
  min-height: 41px;
  padding: 5px 3px;
  border-radius: 14px;
}
.transit-options {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 8px;
}
.transit-options label {
  margin: 0 0 12px;
}
.plan-controls {
  display: flex;
  gap: 10px;
  align-items: center;
}
#trip {
  margin-top: 14px;
}
.summary {
  font-size: 24px;
  font-weight: 740;
  letter-spacing: -0.04em;
  margin-bottom: 4px;
}
.steps {
  padding-left: 23px;
  margin: 10px 0;
}
.steps li {
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  line-height: 1.45;
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 12px 0;
}
.actions button,
.actions a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 9px 11px;
  background: #e5e9ef;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 650;
  text-decoration: none;
}
.actions button:hover {
  background: #d8dfe6;
}
.actions svg {
  width: 17px;
  height: 17px;
}
.note {
  padding: 12px;
  border: 1px solid #dce1e8;
  border-radius: 14px;
  background: #e9edf1c9;
  color: #4a525e;
  font-size: 12px;
  line-height: 1.55;
  margin: 12px 0;
}
.note strong {
  color: #262b32;
}
.journey-legs {
  list-style: none;
  padding: 0;
  margin: 13px 0;
  display: grid;
  gap: 8px;
}
.journey-legs li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border-radius: 14px;
  background: #e8ecf0bf;
  font-size: 13px;
}
.journey-legs span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-top: 4px;
  line-height: 1.5;
}
.journey-legs svg {
  margin-top: 1px;
}
.home-card {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid #dce1e6;
  background: #f7f8fa;
  border-radius: 16px;
  padding: 13px;
}
.home-card > svg {
  width: 25px;
  height: 25px;
}
.home-actions {
  margin: 9px 0 18px;
}
.fare-card {
  background: #edf0f4;
  border: 1px solid #dde2e8;
  border-radius: 17px;
  padding: 13px;
  margin: 13px 0;
}
.fare-card h3 {
  margin: 0 0 12px;
}
.fare-card label {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  margin-bottom: 8px;
}
.fare-card select {
  min-width: 0;
  min-height: 38px;
  border: 1px solid #d6dce3;
  border-radius: 10px;
  background: #fff;
  padding: 5px;
  font: inherit;
}
.fare-card output {
  display: block;
  font-size: 23px;
  font-weight: 750;
  margin: 12px 0 5px;
}
.trip-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 12px;
  margin: 8px 0;
}
.trip-table td,
.trip-table th {
  text-align: left;
  border-bottom: 1px solid var(--line);
  padding: 6px 4px;
  vertical-align: top;
  font-variant-numeric: tabular-nums;
}
.trip-table td:last-child {
  text-align: right;
}
details {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #dce1e8;
  border-radius: 12px;
}
summary {
  cursor: pointer;
  font-weight: 650;
}
dialog {
  width: min(470px, calc(100vw - 24px));
  max-height: 85dvh;
  border-radius: 26px;
  padding: 20px;
  color: var(--ink);
  overflow-y: auto;
}
dialog::backdrop {
  background: #0b101a55;
  backdrop-filter: blur(3px);
}
.pin-field {
  display: grid;
  gap: 8px;
  margin: 13px 0;
  font-weight: 650;
  font-size: 13px;
}
.pin-field input {
  width: 100%;
  min-width: 0;
  padding: 11px;
  border: 1px solid #d6dde5;
  border-radius: 12px;
  background: #f6f8fb;
  font-size: 16px;
}
.coordinate-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
.check {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 12px;
  min-height: 36px;
}
.check input {
  width: 18px;
  height: 18px;
  accent-color: #262b32;
}
.edit-buttons {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0;
}
.hidden-row {
  display: flex;
  gap: 10px;
  align-items: center;
  min-height: 52px;
  border-bottom: 1px solid var(--line);
}
#point-dialog .search {
  margin-top: 12px;
}
#point-message {
  margin-top: 9px;
}
.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 20px 0 10px;
}
.calendar-header button {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #e6eaf0;
  font-size: 22px;
}
.calendar-week,
.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  gap: 4px;
}
.calendar-week {
  font-size: 11px;
  color: #717985;
  margin-bottom: 9px;
}
.calendar-days button {
  aspect-ratio: 1;
  border-radius: 50%;
  font-size: 13px;
}
.calendar-days button[aria-pressed="true"] {
  background: #252b34;
  color: #fff;
}
.calendar-days button:not(:disabled):hover {
  box-shadow: inset 0 0 0 1px #727c89;
}
.marker {
  background: none;
  border: 0;
}
.marker > span {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  border: 2px solid white;
  border-radius: 50%;
  background: #2b313a;
  color: #fff;
  box-shadow: 0 3px 8px #10141b55;
}
.marker span svg {
  width: 17px;
  height: 17px;
}
.marker .saved {
  background: #3c4350;
}
.marker .edit {
  box-shadow:
    0 0 0 5px #ffffff8c,
    0 4px 10px #10141b66;
  cursor: grab;
}
.stop-marker > span {
  width: 26px;
  height: 26px;
  border-radius: 9px;
  background: #fafbfdf5;
  color: #222a33;
  border: 1px solid white;
  box-shadow: 0 2px 7px #10141b40;
}
.stop-marker svg {
  width: 16px !important;
  height: 16px !important;
}
.stop-marker.terminal > span {
  background: #252b34;
  color: #fff;
}
.stop-marker.small > span {
  width: 22px;
  height: 22px;
  border-radius: 7px;
}
.stop-marker.small svg {
  width: 14px !important;
  height: 14px !important;
}
.stop-marker:before {
  content: "";
  position: absolute;
  inset: -6px;
}
.stop-marker .cluster-count {
  position: absolute;
  right: -6px;
  top: -7px;
  min-width: 16px;
  padding: 2px 4px;
  border-radius: 9px;
  background: #252b34;
  color: #fff;
  border: 1px solid #fff;
  font:
    700 9px -apple-system,
    BlinkMacSystemFont,
    SF Pro Text,
    system-ui,
    sans-serif;
  text-align: center;
}
.stop-marker[aria-selected="true"] > span {
  box-shadow:
    0 0 0 3px #fffa,
    0 2px 8px #10141b66;
}
@media (max-width: 720px) {
  :root {
    font-size: 14px;
  }
  #panel {
    left: 8px;
    right: 8px;
    top: auto;
    bottom: max(10px, env(safe-area-inset-bottom));
    width: auto;
    height: min(52dvh, 470px);
    border-radius: 27px;
  }
  #panel.expanded {
    height: calc(100dvh - 125px);
    max-height: 850px;
  }
  #panel.collapsed {
    height: 86px;
    bottom: max(10px, env(safe-area-inset-bottom));
  }
  .handle {
    height: 23px;
    min-height: 23px;
  }
  header {
    padding: 0 14px 13px;
  }
  .brand-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
  }
  .brand-icon svg {
    width: 22px;
    height: 22px;
  }
  h1 {
    font-size: 20px;
  }
  .brand p {
    font-size: 10px;
  }
  nav {
    margin: 0 13px 11px;
  }
  .segments button {
    font-size: 12px;
    padding-inline: 8px;
    min-height: 39px;
  }
  .body {
    padding: 0 14px 17px;
    touch-action: pan-y;
  }
  .search input {
    font-size: 16px;
  }
  .row {
    min-height: 59px;
  }
  .row-title {
    font-size: 13px;
  }
  .row-sub {
    font-size: 11px;
  }
  .layer-box {
    left: 9px;
    right: 9px;
    top: max(9px, env(safe-area-inset-top));
    max-width: none;
    gap: 6px;
  }
  .layer-box .segments button {
    font-size: 11px;
    min-height: 36px;
    padding-inline: 11px;
  }
  .layer-box .segments {
    border-radius: 17px;
  }
  .caption {
    font-size: 10px;
    padding: 5px 9px;
    max-width: calc(100vw - 20px);
  }
  .tools {
    right: 10px;
    bottom: calc(var(--sheet-height) + 21px);
    gap: 8px;
  }
  .tools .square {
    width: 39px;
    height: 39px;
  }
  .tools .square.blue {
    width: 44px;
    height: 44px;
    border-radius: 15px;
  }
  .tools .group {
    border-radius: 16px;
  }
  .tools .zoom {
    display: none;
  }
  body:has(#panel.expanded) .tools {
    top: 100px;
    bottom: auto;
    display: flex;
    right: 10px;
  }
  body:has(#panel.expanded) .tools .group {
    display: flex;
  }
  body:has(#panel.expanded) .tools .group button + button {
    border-top: 0;
  }
  .floating {
    left: 50%;
    top: 112px;
    max-width: calc(100vw - 20px);
    width: max-content;
  }
  #notice {
    top: 158px;
    max-width: calc(100vw - 32px);
  }
  .leaflet-control-scale {
    left: 14px;
    bottom: calc(var(--sheet-height) + 22px);
  }
  footer {
    font-size: 9px;
    padding: 9px 13px;
  }
  .travel {
    gap: 5px;
  }
  .travel button {
    min-height: 40px;
  }
  .travel svg {
    width: 17px;
    height: 17px;
  }
  .transit-options {
    gap: 7px;
  }
  .operator select {
    font-size: 12px;
  }
  .operator {
    font-size: 11px;
  }
  .endpoints button {
    min-height: 47px;
  }
  .directions-toolbar {
    position: static;
  }
  .square {
    flex: none;
  }
}
@media (max-width: 360px) {
  h1 {
    font-size: 18px;
  }
  .brand p {
    font-size: 9px;
  }
  .segments button {
    font-size: 11px;
    padding-inline: 6px;
  }
  .filters button {
    padding-inline: 9px;
  }
  footer {
    font-size: 8px;
  }
  .layer-box .segments button {
    padding-inline: 9px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }
}
.sheet-expand svg {
  width: 15px;
  height: 15px;
  transform: rotate(-90deg);
}
#panel.expanded .sheet-expand svg {
  transform: rotate(90deg);
}
#directions.has-result > .endpoints,
#directions.has-result > .directions-toolbar,
#directions.has-result > .travel,
#directions.has-result > .transit-options,
#directions.has-result > .plan-controls {
  display: none;
}
#directions.has-result #trip {
  margin-top: 8px;
}
@media (min-width: 721px) {
  #expand-sheet {
    display: none;
  }
}
@media (max-width: 720px) {
  body:has(#panel.expanded) .tools {
    display: none;
  }
  body:has(#panel.expanded) .leaflet-control-scale {
    bottom: auto;
    top: 91px;
  }
}
:root {
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    SF Pro Text,
    SF Pro,
    system-ui,
    sans-serif;
  --ink: #191c20;
  --spring: linear(0, 0.42 16%, 0.82 34%, 1.035 55%, 1.02 71%, 1);
  --shadow: 0 18px 58px #0e17242b, 0 1px 8px #10203117;
}
.glass,
#panel,
dialog {
  background: linear-gradient(145deg, #fffffff0, #e8edf1e6);
}
@supports (backdrop-filter: blur(9px)) {
  .glass,
  #panel,
  dialog {
    backdrop-filter: blur(9px) saturate(125%);
  }
}
#panel {
  transform-origin: bottom left;
  contain: layout paint;
}
#panel > .body {
  contain: layout style;
  scroll-behavior: auto;
}
.body > section {
  min-width: 0;
}
.brand-icon {
  background: #fff8;
  color: #20252a;
  box-shadow: inset 0 1px #fff;
}
.brand-icon:after {
  background: linear-gradient(
    90deg,
    #66b94e,
    #f5c942,
    #f69739,
    #ed515c,
    #9b65ac,
    #57a7dc
  );
}
#tabs {
  gap: 2px;
}
#tabs button {
  min-height: 42px;
  padding-inline: 4px;
}
#tabs svg {
  width: 16px;
  height: 16px;
}
button {
  transition:
    transform 0.32s var(--spring),
    opacity 0.18s;
}
button:active:not(:disabled) {
  transform: scale(0.96);
  filter: none;
}
dialog::backdrop {
  background: #131a214d;
  backdrop-filter: none;
}
dialog[open] {
  animation: sheet-in 0.35s var(--spring) both;
}
@keyframes sheet-in {
  0% {
    transform: translateY(14px) scale(0.98);
    opacity: 0.4;
  }
}
.layer-box .segments {
  background: #f7f8faea;
}
.layer-box .segments button {
  flex: 0 1 auto;
  padding-inline: 12px;
}
.field {
  min-width: 0;
  display: grid;
  gap: 5px;
  margin: 8px 0 12px;
}
.field label {
  color: #525c65;
  font-size: 12px;
  font-weight: 650;
}
.choice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
  min-height: 42px;
  padding: 8px 11px;
  text-align: left;
  font-weight: 600;
  border: 1px solid #d9dfe5;
  border-radius: 11px;
  background: #ffffffc9;
}
.choice svg {
  width: 13px;
  height: 13px;
}
.choice-options {
  display: grid;
  margin-top: 9px;
}
.choice-options button {
  min-height: 44px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-weight: 600;
}
.choice-options button[aria-pressed="true"] {
  border-radius: 8px;
  background: #dbe4eb;
}
.choice-options button[aria-pressed="true"]:after {
  content: "\2713";
  float: right;
  margin-left: 8px;
}
#choice-dialog .search {
  margin-top: 10px;
}
.fare-card .field label {
  display: block;
  margin: 0;
}
.fare-card output {
  min-height: 28px;
}
.fare-modes {
  margin-top: 10px;
}
.stop-marker.rail > span {
  border: 1.5px solid #fff;
  border-radius: 50%;
  background: #3e3355;
  color: #fff;
}
.stop-marker.interchange > span {
  outline: 2px solid #d5a2ff;
}
.marker .vehicle-estimate {
  background: #64467c;
  border-style: dashed;
}
.marker .destination {
  background: #272d38;
}
.map-surface {
  transform-origin: 0 0;
}
.leaflet-tile-pane {
  transition: none;
}
@media (max-width: 720px) {
  #panel {
    transform-origin: bottom center;
  }
  #tabs button {
    font-size: 11px;
  }
  .layer-box .segments button {
    padding-inline: 8px;
    font-size: 11px;
  }
  .leaflet-control-scale {
    bottom: calc(var(--sheet-height) + 29px);
  }
}
@media (max-width: 370px) {
  #tabs button {
    gap: 4px;
  }
  #tabs svg {
    width: 14px;
    height: 14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  button,
  dialog[open] {
    animation: none;
    transition: none;
  }
}
.layer-box {
  left: 420px;
  right: 18px;
  justify-items: center;
  max-width: none;
}
.layer-box .segments {
  max-width: 100%;
}
.layer-box .segments button {
  white-space: nowrap;
}
.map-status {
  position: absolute;
  z-index: 4;
  bottom: 11px;
  left: 425px;
  right: 78px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 6px 12px;
  pointer-events: none;
}
#map-scale .leaflet-control-scale {
  position: static;
  inset: auto;
  float: none;
  margin: 0 !important;
}
#map-scale .leaflet-control-scale-line {
  text-align: center;
  line-height: 1.1;
  border-bottom: 2px solid #252931;
}
#credits {
  margin-right: -5px;
}
.imagery-licence {
  display: block;
  flex: none;
  margin: -5px 14px 8px;
  color: #46515d;
  font-size: 9px;
  line-height: 1.25;
}
#panel.collapsed:has(.imagery-licence:not([hidden])) {
  height: 115px;
}
.credits-list {
  margin: 12px 0 0;
}
.credits-list dt {
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-weight: 650;
}
.credits-list dd {
  margin: 5px 0 12px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.credits-list dd:last-child {
  margin-bottom: 0;
}
.location-dot {
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 3px solid #fff;
  background: #1675dc;
  box-shadow:
    0 0 0 1px #133e6566,
    0 2px 8px #111b3150;
}
.tools .square {
  place-items: center;
  padding: 0;
}
.tools svg {
  display: block;
  margin: auto;
}
#locate[aria-busy="true"] svg {
  opacity: 0.45;
}
#settings-dialog [aria-pressed="true"] {
  background: #232933;
  color: #fff;
}
#stop-checked {
  padding: 0;
  text-align: left;
}
.check-mark {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  flex: none;
  border: 1px solid #747c87;
  border-radius: 5px;
  background: #fff;
}
.check-mark svg {
  visibility: hidden;
  width: 15px;
  height: 15px;
}
#stop-checked[aria-checked="true"] .check-mark {
  background: #262b32;
  border-color: #262b32;
  color: #fff;
}
#stop-checked[aria-checked="true"] svg {
  visibility: visible;
}
#cache-progress {
  white-space: nowrap;
  margin-left: auto;
}
#choice-options button:focus:not(:focus-visible) {
  outline: 0;
}
.picking .stop-marker,
.picking .leaflet-marker-pane .marker {
  pointer-events: none;
}
.picking .leaflet-tooltip-pane {
  visibility: hidden;
}
.leaflet-map-pane .map-surface {
  transition: none;
}
.leaflet-zoom-anim .map-surface.leaflet-zoom-animated {
  transition: transform 0.25s cubic-bezier(0, 0, 0.25, 1);
}
.map-moving .glass,
.map-moving #panel {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
@media (max-width: 720px) {
  #panel[data-height="small"] {
    height: 86px;
  }
  #panel[data-height="medium"] {
    height: clamp(275px, 49dvh, 470px);
  }
  #panel[data-height="large"] {
    height: calc(100dvh - max(117px, env(safe-area-inset-top) + 96px));
  }
  .layer-box {
    left: 9px;
    right: 9px;
  }
  .map-status {
    left: 11px;
    right: 63px;
    bottom: calc(var(--sheet-height) + 9px);
    gap: 4px 8px;
  }
  body:has(#panel[data-height="large"]) .tools {
    display: none;
  }
  body:has(#panel[data-height="large"]) .map-status {
    max-width: calc(100vw - 22px);
  }
  body:has(#panel[data-height="large"]) .layer-box {
    gap: 3px;
  }
  .picking .tools,
  .picking .map-status {
    z-index: 4;
  }
  #prompt {
    top: max(58px, env(safe-area-inset-top) + 54px);
  }
}

/* Mobile simplification and sheet/dialog polish */
#fit,
#drop,
#lock-browser,
#lock-status {
  display: none !important;
}
#map-scale .leaflet-control-scale-line {
  border: 1px solid rgba(28, 36, 44, 0.12) !important;
  border-radius: 999px !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.11) !important;
  background: rgba(252, 253, 255, 0.88) !important;
  backdrop-filter: blur(12px);
  color: #252a30 !important;
  font-size: 12px !important;
  font-weight: 620;
  padding: 6px 12px !important;
  line-height: 1.1 !important;
  text-shadow: none !important;
  min-width: 74px;
  text-align: center;
}
dialog .list-title {
  position: sticky;
  top: -1px;
  z-index: 20;
  background: rgba(248, 250, 252, 0.97);
  backdrop-filter: blur(18px);
  padding: 9px 0;
  margin-top: -9px;
  border-bottom: 1px solid rgba(16, 32, 48, 0.08);
}
dialog [data-close] {
  position: relative;
  z-index: 21;
}
@media (max-width: 720px) {
  #map-scale .leaflet-control-scale-line {
    font-size: 11px !important;
    padding: 5px 10px !important;
  }
  #panel.expanded {
    height: calc(100dvh - 102px);
    max-height: none;
  }
  #panel .handle {
    cursor: pointer;
  }
}

.map-attribution {
  font-size: 9px;
  line-height: 1.3;
  color: #253a35;
  background: #ffffffd9;
  border-radius: 4px;
  padding: 2px 4px;
  max-width: 250px;
  pointer-events: auto;
}
.map-attribution:empty {
  display: none;
}
.map-attribution a {
  color: inherit;
}
.map-status {
  max-width: calc(100vw - 90px);
}
#map {
  background: #c4dce2;
}
#map.vector-base {
  background: #eceee9;
}

.location-heading {
  position: absolute;
  inset: -9px;
  transform-origin: center;
  pointer-events: none;
}
.location-heading::before {
  content: "";
  position: absolute;
  left: 8px;
  top: -6px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 17px solid #2c70bc;
  filter: drop-shadow(0 0 2px #fff);
}