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

  :where(a:link, a:visited) {
    color: inherit;
    text-decoration: inherit;
  }

  :where(button) {
    color: inherit;
    font: inherit;
    background-color: transparent;
    border: 0 solid;
    padding: 0;
  }
}

:root {
  --app-width:             480px;
  --color-hairline:        #e0e0e0; /* dividers */
  --color-hover-bg:        rgba(0, 0, 0, 0.07);
  --color-muted:           #888; /* secondary text + control borders */
  --color-page-bg:         #e0e0e0; /* same value as hairline, different semantics */
  --color-panel:           #f5f5f5;
  --color-bus:             #ffc72c;
  --color-green-line:      #00843d;
  --color-red-line:        #da291c;
  --color-orange-line:     #ed8b00;
  --color-blue-line:       #003da5;
  --color-silver-line:     #7c878e;
  --color-commuter-rail:   #80276c;
  --color-mattapan:        #da291c;
  --color-ferry:           #008eaa;
  --chip-opacity-min:      0.6;
  --radius:                4px;
}

#progress-bar {
  height: 2px;
  left: 50%;
  max-width: var(--app-width);
  overflow: hidden;
  position: fixed;
  top: 0;
  transform: translateX(-50%);
  width: 100%;
  z-index: 1000;
}

#progress-bar.loading::after {
  animation: progress-slide 1.2s ease-in-out infinite;
  background: var(--color-bus);
  content: "";
  height: 100%;
  position: absolute;
  top: 0;
  width: 40%;
}

@keyframes progress-slide {
  0%   { left: -40%; }
  100% { left: 100%; }
}

.overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  backdrop-filter: blur(6px) grayscale(80%);
  -webkit-backdrop-filter: blur(6px) grayscale(80%);
  background: rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
}

body {
  font-family: 'Inter', system-ui, sans-serif;
  margin: 0;
  background: var(--color-page-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.panel {
  background: var(--color-panel);
  display: flex;
  flex-direction: column;
  max-width: var(--app-width);
  min-height: 100dvh;
  width: 100%;
}

.app-footer {
  color: #aaa;
  font-size: 0.7rem;
  margin-top: auto;
  padding: 1rem 0.75rem;
  text-align: center;
}

.app-footer a {
  border-bottom: 1px solid var(--color-hairline);
  color: #999;
  text-decoration: none;
}

.app-footer a:hover {
  color: #777;
}

#toast {
  width: 100%;
  max-width: var(--app-width);
  background: #fde8e8;
  color: #7f1d1d;
  border-bottom: 1px solid #fca5a5;
  padding: 0.6rem 0.75rem;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

#toast[hidden] { display: none; }

#dismiss-toast {
  align-items: center;
  color: #991b1b;
  display: flex;
  height: 1rem;
  flex-shrink: 0;
  padding-left: 1rem;
}

.error { color: red; margin: 1rem; }

.app-header {
  align-items: center;
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem 0.75rem 0.5rem;
}

.app-title {
  flex-shrink: 0;
  margin: 0;
}

.app-title, .overlay-label {
  background: white;
  border-radius: 8px;
  border: 1px solid black;
  cursor: pointer;
  font-size: 1.2rem;
  font-weight: 800;
  padding: 0 0.35rem;
}

.app-info {
  font-size: 0.7rem;
  color: var(--color-muted);
}

.icon {
  height: 1em;
  width: 1em;
}

.routes-page {
  display: flex;
  flex-direction: column;
  margin-bottom: 4rem;
}

.route-cards {
  display: flex;
  flex-direction: column;
  transition: opacity 0.2s ease;

  &.stale {
    opacity: 0.5;
  }
}

.destination-control {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.25rem 0.75rem;
}

.destination-input-row {
  align-items: center;
  border: 1px solid var(--color-muted);
  border-radius: var(--radius);
  display: flex;
  gap: 0.5rem;
  padding: 0.25rem 0.5rem;

  /* Lift to white while the user is actually typing; quiet panel grey otherwise */
  &:focus-within {
    background: white;
  }
}

.destination-input {
  background: transparent;
  border: none;
  flex-grow: 1;
  font-size: 16px; /* anything smaller and iOS Safari zooms on focus */
  outline: none;
  padding: 0;
}

.destination-input-spinner {
  animation: spinner-rotate 0.8s linear infinite;
  border: 2px solid var(--color-muted);
  border-radius: 50%;
  border-top-color: transparent;
  flex-shrink: 0;
  height: 0.7rem;
  width: 0.7rem;

  &[data-hidden] {
    visibility: hidden;
  }
}

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

.destination-input-clear {
  color: var(--color-muted);
  cursor: pointer;
  line-height: 1;

  &[data-hidden] {
    visibility: hidden;
  }
}

.destination-suggestions {
  background: white;
  border: 1px solid var(--color-muted);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.destination-suggestion {
  cursor: pointer;
  padding: 0.25rem 0.5rem;

  & + .destination-suggestion {
    border-top: 1px solid var(--color-hairline);
  }
}

.destination-suggestion-name {
  font-size: 0.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.destination-suggestion-detail {
  color: var(--color-muted);
  font-size: 0.7rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.destination-chip {
  align-items: center;
  border: 1px solid var(--color-muted);
  border-radius: var(--radius);
  cursor: pointer;
  display: flex;
  font-size: 0.8rem;
  gap: 0.5rem;
  padding: 0.25rem 0.5rem;
}

.destination-chip::after {
  color: var(--color-muted);
  content: "×";
}

.destination-chip-label {
  flex-grow: 1;
  /* let the name/detail lines inside ellipsize */
  min-width: 0;
}

.bucket-header {
  align-items: center;
  color: var(--color-muted);
  display: flex;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 0.2rem 0.75rem;
}

.route-card + .bucket-header {
  margin-top: 0.5rem;
}

.route-card + .route-card {
  margin-top: 0.5rem;
}

.route-card {
  border: 1px solid black;
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  margin: 0 0.75rem;
  overflow: hidden;
}

.route-card-cols {
  background: color-mix(in srgb, var(--line-bg-color) 20%, white);
  display: flex;
}

.route-card-col {
  display: flex;
  flex-basis: 0;
  flex-direction: column;
  flex-grow: 1;
  min-width: 0;

  & + .route-card-col {
    border-left: 1px solid var(--line-bg-color);
  }
}

.route-card-id {
  align-items: center;
  background: var(--line-bg-color);
  color: var(--line-fg-color);
  display: flex;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.05rem 0.25rem;
}

/* data-class carries the transit-line color wherever it appears (route cards, destination rows) */
[data-class="blue-line"]        { --line-bg-color: var(--color-blue-line);     --line-fg-color: #ffffff; }
[data-class="bus"]              { --line-bg-color: var(--color-bus);           --line-fg-color: #000000; }
[data-class="commuter-rail"]    { --line-bg-color: var(--color-commuter-rail); --line-fg-color: #ffffff; }
[data-class="ferry"]            { --line-bg-color: var(--color-ferry);         --line-fg-color: #ffffff; }
[data-class="green-line"]       { --line-bg-color: var(--color-green-line);    --line-fg-color: #ffffff; }
[data-class="mattapan-trolley"] { --line-bg-color: var(--color-mattapan);      --line-fg-color: #ffffff; }
[data-class="orange-line"]      { --line-bg-color: var(--color-orange-line);   --line-fg-color: #ffffff; }
[data-class="red-line"]         { --line-bg-color: var(--color-red-line);      --line-fg-color: #ffffff; }
[data-class="silver-line"]      { --line-bg-color: var(--color-silver-line);   --line-fg-color: #ffffff; }

/* A segmented control of icon-only sort options (map pin = arrive soonest, walking man = least walking, clock =
   buffer ahead of the bus); tapping a segment selects it. Each segment's text name lives in its title/aria-label.
   First child of .route-cards in destination mode; its margins keep the page's 0.5rem rhythm against the control
   above and the table below. */
.destination-sort {
  align-items: center;
  display: flex;
  /* Wrap to a second line on very narrow screens rather than overflow, now that each button carries a word. */
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0.25rem 0.75rem 0.5rem 0.75rem;
}

/* "Sort" caption leading the icon buttons, so the row isn't all icons. */
.destination-sort-label {
  color: var(--color-muted);
  font-size: 0.8rem;
  margin-right: 0.15rem;
}

.destination-sort-button {
  align-items: center;
  border: 1px solid var(--color-muted);
  border-radius: var(--radius);
  color: var(--color-muted);
  cursor: pointer;
  display: inline-flex;
  font-size: 0.9rem;
  /* Space the icon from its word. */
  gap: 0.2rem;
  padding: 0.2rem 0.4rem;
}

/* The button's word label, a touch smaller than the icon. */
.destination-sort-text {
  font-size: 0.8rem;
}

.destination-sort-button:hover {
  background: var(--color-hover-bg);
  color: #111;
}

/* The selected segment reads as pressed: filled, dark text, solid border. */
.destination-sort-button.active {
  background: var(--color-muted);
  border-color: var(--color-muted);
  color: #fff;
}

/* One shared grid for the whole table, so the metric columns size to content and line up down the page (even
   across the separated cards). The three sortable metric columns are auto (sized to their widest value); identity
   grows. row-gap matches the 0.5rem spacing between route cards on the non-destination page. */
.destination-table {
  column-gap: 0.25rem;
  display: grid;
  /* Departure chip, ETA, then the flexible id/chevron column. Walk used to be a third metric column but now lives
     in the group header (it's constant across a group). */
  grid-template-columns: auto auto minmax(0, 1fr);
  margin: 0 0.75rem;
  /* Header strips and rows touch by default; a margin separates runs (see .destination-group-id). */
  row-gap: 0;
}

/* Each run opens with a full-width route-colored header strip, mirroring a route card's .route-card-id: solid line
   color with the route name, rounded top corners, and the card's black top/side edges (the run's rows draw the
   sides and bottom). A margin sets runs apart; the first run needs no leading space. */
/* The header strip: route line(s), then the journey's walk time right after them (not pinned to the far edge, so it
   stays near the route it describes). */
.destination-group-id {
  align-items: center;
  background: var(--line-bg-color);
  border: 1px solid black;
  border-bottom: none;
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
  color: var(--line-fg-color);
  display: flex;
  font-size: 0.8rem;
  /* Separates the route block from the walk figure. */
  gap: 0.25rem;
  grid-column: 1 / -1;
  letter-spacing: 0.04em;
  /* Vertical padding only; the side inset lives on the lines, so each line spans the full lines column and its
     divider reaches the edges. */
  padding: 0.05rem 0;
}

.destination-group-id:not(:first-child) {
  margin-top: 0.5rem;
}

/* The route lines stack vertically, sized to their content (so the walk figure sits right after, not at the far
   edge). min-width:0 lets a long headsign ellipsize rather than shove the walk off. A small row-gap separates
   multiple routes (no divider line - it would collide with the walk figure centered alongside). */
.destination-group-lines {
  display: flex;
  flex-direction: column;
  min-width: 0;
  row-gap: 0.15rem;
}

/* The journey's walk time, shown once for the whole group (it's constant across the group), centered against the
   route line(s). */
.destination-group-walk {
  align-items: center;
  display: inline-flex;
  flex-shrink: 0;
  white-space: nowrap;
}

/* One route's line: its id, then its headsign(s). The gap spaces the two spans (a flex gap is reliable where a
   whitespace text node isn't). */
.destination-group-line {
  align-items: center;
  display: flex;
  gap: 0.3rem;
  min-width: 0;
  padding-inline: 0.25rem;
}

/* The route id leads in bold; the headsign stays regular weight (the line's default). */
.destination-group-route {
  font-weight: 600;
}

/* A run's rows: washed the same light shade of its route color as .route-row, drawing the run's left/right card
   edges (the header draws the top, the run's last row the bottom). A subgrid spanning all four columns, so cells
   align with every other row's across the whole table. */
.destination-row {
  align-items: center;
  background: color-mix(in srgb, var(--line-bg-color) 20%, white);
  border-left: 1px solid black;
  border-right: 1px solid black;
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  /* The card's left/right edge inset. Inter-column spacing is the grid's column-gap; cells carry only vertical
     padding - so edges, column gaps, and (with the cells' padding-block) every side are one uniform 0.25rem,
     matching .route-row's 0.25rem all-around padding. */
  padding-inline: 0.25rem;
}

/* Rows within a run are divided by a route-colored hairline (like .route-card-col's column separator). Only a row
   that follows another row gets it; a run's first row follows the header strip instead, so it sits flush. */
.destination-row + .destination-row {
  border-top: 1px solid var(--line-bg-color);
}

/* A run's last row - the final row overall, or one immediately followed by the next run's header - draws the card's
   black bottom edge + rounded bottom corners. */
.destination-row:last-child,
.destination-row:has(+ .destination-group-id) {
  border-bottom: 1px solid black;
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}

/* Metric cells take only their column's width, content centered */
.destination-cell {
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  padding-block: 0.25rem;
  text-align: center;
  white-space: nowrap;
}

/* Stretch the departure chip to fill its column (the column is sized to the widest chip, e.g. "-4:50"), so narrow
   countdowns like "7" don't float in a wide cell. The departure chip is the only .chip inside a .destination-cell. */
.destination-cell .chip {
  width: 100%;
}

/* The row's last column: an optional identity label (shown only in mixed groups) pushed left, and the chevron that
   toggles the trip timeline pushed right. */
.destination-id-cell {
  align-items: center;
  display: flex;
  gap: 0.3rem;
  justify-content: space-between;
  min-width: 0;
  padding-block: 0.25rem;
}

/* The re-shown route/headsign label for a mixed group. */
.destination-row-id {
  align-items: center;
  display: flex;
  font-size: 0.8rem;
  gap: 0.3rem;
  min-width: 0;
}

/* The route as a small colored badge (its own route color via data-class), like the route-card id badge. */
.destination-row-route {
  background: var(--line-bg-color);
  border-radius: var(--radius);
  color: var(--line-fg-color);
  font-weight: 600;
  padding: 0 0.25rem;
  white-space: nowrap;
}

/* The headsign as plain text; ellipsizes if the row is tight. */
.destination-row-headsign {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The chevron toggle. Its ::before overlay (the .row-toggle rule) makes the whole row the tap target. Reset the
   native button chrome. */
.destination-expand {
  align-items: center;
  background: none;
  border: 0;
  color: var(--color-muted);
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  /* No vertical padding - the cell's padding-block already sets the row height; the button's own block padding would
     stack on top and make this column taller than the metric cells. Keep a little side padding for the chevron. */
  padding-block: 0;
  padding-inline: 0.25rem;
}

/* Flip the chevron to point up when the row's timeline is open. */
.destination-row:has([aria-expanded="true"]) .destination-expand .icon {
  transform: rotate(180deg);
}

/* Expanded trip flow. Spans the full row under the cells; only shown when expanded. A vertical list alternating
   leg durations (walk/ride) with stop and destination names. Two columns: a clock-time gutter (blank on duration
   rows) and the main content. */
.destination-timeline {
  display: none;
  grid-column: 1 / -1;
}

.destination-row:has([aria-expanded="true"]) .destination-timeline {
  align-items: center;
  border-top: 1px solid var(--line0-bg-color);
  column-gap: 0.5rem;
  display: grid;
  /* Time gutter (auto, sized to a stable "HH:MM") then the main column. The spine rail lives at the *start* of the
     main column, so it sits at a constant x regardless of name lengths; minmax min of 0 lets long names ellipsize. */
  grid-template-columns: auto minmax(0, 1fr);
  padding: 0.35rem 0;
  row-gap: 0.05rem;
}

.tl-time {
  color: var(--color-muted);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.tl-main {
  align-items: center;
  display: flex;
  font-size: 0.8rem;
  min-width: 0;
}

/* Fixed-width spine rail: every row centers its marker/bar here, so the spine is a vertical line at a constant x. */
.tl-rail {
  align-items: center;
  display: flex;
  flex: none;
  justify-content: center;
  width: 1rem;
}

/* Node marker (circleIcon is 1em, so font-size sets its diameter). */
.tl-node {
  display: flex;
  font-size: 0.6rem;
}

/* The gap from the rail to the label lives on the label, because it depends on the marker's width: a name must
   clear the fatter circle, while a duration can tuck right up against the thin bar. */
.tl-main > .tl-name {
  margin-left: 0.4rem;
}

.tl-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The stop count trails the ride's icon+minutes in a smaller font. */
.tl-stops {
  font-size: 0.7rem;
  padding-left: 0.3rem;
  white-space: nowrap;
}

/* Connector bars on the spine: route-colored around the ride, muted around the walk legs. The height spans taller
   than a node marker so the spine reads as one continuous line between node names. */
.tl-bar {
  border-radius: 1px;
  height: 3rem;
  width: 2px;
}

.tl-bar--route {
  background: var(--line-bg-color);
}

.tl-bar--muted {
  background: radial-gradient(var(--color-muted) 60%, transparent 65%);
  background-size: 100% 0.2rem; /* one dot every 0.2rem of height */
  background-repeat: repeat-y;
}

.route-row {
  align-items: center;
  background: color-mix(in srgb, var(--line-bg-color) 20%, white);
  display: flex;
  flex-direction: row;
  flex-grow: 0;
  gap: 0.3rem;
  padding: 0.25rem;

  &:has([aria-expanded="true"]) {
    align-items: stretch;
    flex-direction: column;

    & .headsign {
      white-space: normal;
    }
  }

  & + .route-row {
    border-top: 1px solid var(--line-bg-color);
  }
}

.headsign {
  /* same height as chip */
  border-bottom-color: transparent;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-top-color: transparent;
  border-top-style: solid;
  border-top-width: 1px;
  font-size: 0.8rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: start;
}

/* The "pseudo-content" trick for expanding a row's tap target to the whole row while keeping the button's accessible
   name. The toggle button carries .row-toggle - the headsign on route cards, the chevron on destination rows. See:
   https://inclusive-components.design/cards/#thepseudocontenttrick
   */
:where(.route-row, .destination-row):has(button.row-toggle) {
  /* We need child's position to be relative to the parent row */
  position: relative;

  button.row-toggle {
    /* Expand the clickable target to fill the parent */
    &::before {
      position: absolute;
      content: '';
      inset: 0;
      cursor: pointer;
    }
  }

  /* "Lift" chip links above the pseudo-element so they're clickable. z-index (not just paint order) is required
     because the chip can sit *before* the toggle button in the DOM - as it does in the destination table, where
     it's its own metric column. */
  a.chip {
    position: relative;
    z-index: 1;
  }
}


.route-stop {
  color: var(--color-muted);
  display: none;
  font-size: 0.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.route-row:has([aria-expanded="true"]) .route-stop {
  display: block;
  white-space: normal;

  & .route-stop-name {
    vertical-align: middle;
  }

  & .walk-time {
    vertical-align: middle;
  }
}

.route-alight {
  color: var(--color-muted);
  display: none;
  font-size: 0.8rem;

  & .route-alight-name {
    vertical-align: middle;
  }

  & .walk-time {
    vertical-align: middle;
  }
}

.route-row:has([aria-expanded="true"]) .route-alight {
  display: block;
}

.route-times {
  display: contents;
}

.route-times > .chip {
  order: 1;
}

.chips-extra {
  display: flex;
  flex: 1 0 0;
  gap: 0.3rem;
  mask-image: linear-gradient(to right, black calc(100% - 2rem), transparent 100%);
  order: 2;
  overflow: hidden;
}

.route-row:has([aria-expanded="true"]) .route-times {
  display: flex;
  flex-wrap: wrap;
  flex: 0 0 auto;
  gap: 0.3rem;
  margin-top: 0.15rem;
  overflow: visible;
}

.route-row:has([aria-expanded="true"]) .route-times > .chip {
  order: 0;
}

.route-row:has([aria-expanded="true"]) .chips-extra {
  display: contents;
}

.chip {
  align-items: center;
  background: color-mix(in srgb, var(--line-bg-color) 10%, white);
  border-radius: var(--radius);
  border: 1px solid var(--color-muted);
  display: inline-flex;
  flex-shrink: 0;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  justify-content: center;
  min-width: 3ch;
  padding: 0 0.15rem;
  white-space: nowrap;

  &[data-state="urgent"] .chip-relative {
    font-weight: 300;
  }
}

.chip-absolute {
  display: none;
}

.route-row:has([aria-expanded="true"]) .chip-absolute {
  display: inline;
}

.route-row:has([aria-expanded="true"]) .chip-absolute,
.trip-stop-time {
  color: #999;
  font-size: 0.8em;
}

.route-row:has([aria-expanded="true"]) .chip {
  gap: 0.25rem;
}

.trip-page {
  transition: opacity 0.2s ease;

  &.stale {
    opacity: 0.5;
  }
}

.trip-stops {
  display: grid;
  grid-template-columns: 1fr auto auto;
  margin: 0.5rem 0.75rem 4rem 0.75rem;
}

.trip-stop {
  align-items: center;
  border-bottom: 1px solid var(--color-hairline);
  column-gap: 0.5rem;
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  padding: 0.25rem;
}

.trip-stop--past {
  opacity: 0.35;
}

.trip-stop--mine {
  & .trip-stop-name, & .trip-stop-wait {
    font-weight: 600;
  }
}

.trip-stop-left {
  align-items: center;
  display: flex;
  gap: 0.25rem;
  min-width: 0;
}

.trip-stop-name {
  flex: 0 1 auto;
  font-size: 0.9rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trip-stop-expander {
  border-bottom: 1px solid var(--color-hairline);
  color: #aaa;
  cursor: pointer;
  font-size: 0.8rem;
  grid-column: 1 / -1;
  padding: 0.35rem 0.25rem;
  text-align: center;
}

.trip-stop-expander:hover {
  background: var(--color-hover-bg);
  color: #111;
}

.trip-stop-wait {
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.trip-stop-time {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.walk-speed-control {
  align-items: center;
  color: var(--color-muted);
  display: flex;
  font-size: 0.7rem;
  gap: 0.25rem;
  margin-left: auto;
}

.walk-speed-btn {
  cursor: pointer;
  display: flex;
  font-size: 1rem;
  user-select: none;
  border: 1px solid var(--color-muted);
  width: 1.4rem;
  height: 1.4rem;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
}

.walk-speed-btn:hover:not(.walk-speed-btn--disabled) {
  background: var(--color-hover-bg);
  color: #111;
}

.walk-speed-btn--disabled {
  color: #ccc;
  cursor: default;
}

.walk-speed-value {
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.walk-time {
  align-items: center;
  color: var(--color-muted);
  display: inline-flex;
  font-size: 0.8rem;
  vertical-align: middle;
  white-space: nowrap;
}

.cursor-pointer {
  cursor: pointer;
}

.display-none {
  display: none;
}

.invisible {
  visibility: hidden;
}