/* NaviMTL ---------------------------------------------------------------
   Brand: deep teal ink #073D4A, with sky #00B8E4, green #63CB36 and yellow #FFD23F
   reserved for the logo. The interface stays in teal-tinted neutrals so the colors
   that carry meaning (route plates, metro lines, live status) remain the loudest. */

:root {
  --paper: #edf3f4;
  --surface: #ffffff;
  --raised: #f3f8f9;
  --ink: #0b2730;
  --muted: #53676e;
  --rule: #dce6e8;
  --brand: #073d4a;
  --brand-ink: #ffffff;
  --brand-soft: #e1eef0;
  --sky: #00b8e4;
  --live: #0e8a55;
  --warn: #c2410c;
  --stop-line: #24414a;
  --alert-mark: #ffffff;
  --elevation: 0 10px 30px rgba(7, 61, 74, 0.16), 0 1px 3px rgba(7, 61, 74, 0.08);
  --lift: 0 1px 3px rgba(7, 61, 74, 0.14);

  --font: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --step--1: 0.8125rem;
  --step-0: 0.9375rem;
  --step-1: 1.0625rem;
  --step-2: 1.375rem;
  --step-3: 1.75rem;
  --step-4: 2.5rem;

  --gutter: 12px;
  --panel-width: 400px;
  --top-height: 112px;

  color-scheme: light;
}

/* Dark follows the system unless Settings says otherwise (data-theme on <html>, see applyTheme in
   main.js); the two blocks hold the same values. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #061a20;
    --surface: #0d242b;
    --raised: #133039;
    --ink: #e5f0f2;
    --muted: #92a9af;
    --rule: #1d3942;
    --brand: #36c5ea;
    --brand-ink: #04222a;
    --brand-soft: #0f3440;
    --map-ctrl-filter: invert(1) brightness(1.4);
    --live: #3fcb8b;
    --warn: #fb8a4c;
    --stop-line: #c3d6da;
    --alert-mark: #0d242b;
    --elevation: 0 10px 30px rgba(0, 0, 0, 0.55);
    --lift: 0 1px 3px rgba(0, 0, 0, 0.5);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --paper: #061a20;
  --surface: #0d242b;
  --raised: #133039;
  --ink: #e5f0f2;
  --muted: #92a9af;
  --rule: #1d3942;
  --brand: #36c5ea;
  --brand-ink: #04222a;
  --brand-soft: #0f3440;
  --map-ctrl-filter: invert(1) brightness(1.4);
  --live: #3fcb8b;
  --warn: #fb8a4c;
  --stop-line: #c3d6da;
  --alert-mark: #0d242b;
  --elevation: 0 10px 30px rgba(0, 0, 0, 0.55);
  --lift: 0 1px 3px rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}

/* Base -------------------------------------------------------------------- */

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

html,
body {
  height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--step-0) / 1.4 var(--font);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

button,
input {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}

/* a screen's title takes focus when the screen opens (see render() in main.js); it isn't a control */
h2[tabindex="-1"]:focus {
  outline: none;
}

h2,
h3,
p,
ul,
ol {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
}

svg {
  display: block;
}

.map {
  position: fixed;
  inset: 0;
}

/* Top bar ------------------------------------------------------------------- */

.top {
  position: fixed;
  z-index: 3;
  top: 0;
  left: 0;
  right: 0;
  padding: calc(env(safe-area-inset-top, 0px) + var(--gutter)) var(--gutter) 0;
  pointer-events: none;
}

.top > * {
  pointer-events: auto;
}

.top-row {
  display: flex;
  gap: 8px;
}

.search {
  position: relative;
  flex: 1;
  min-width: 0;
}

.search-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}

.search input {
  width: 100%;
  height: 48px;
  padding: 0 14px 0 45px;
  border: 0;
  border-radius: 24px;
  background: var(--surface);
  box-shadow: var(--elevation);
  font-size: 1rem; /* 16px keeps iOS from zooming on focus */
}

.search input::placeholder {
  color: var(--muted);
}

.search input::-webkit-search-cancel-button {
  display: none;
}

.icon-button {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--elevation);
  color: var(--brand);
}

.weather {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
  height: 48px;
  padding: 0 14px 0 10px;
  border: 0;
  border-radius: 24px;
  background: var(--surface);
  box-shadow: var(--elevation);
  color: var(--ink);
  font-size: var(--step-0);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.weather[hidden] {
  display: none;
}

.weather svg {
  width: 26px;
  height: 26px;
}

/* phones: the map tools sit in the top row with the menu; wide screens float them over the map (below) */
.top-tools {
  display: contents;
}

.icon-button svg {
  width: 22px;
  height: 22px;
}

.icon-button[aria-busy="true"] svg {
  opacity: 0.4;
}

.lang {
  color: var(--ink);
  font-size: var(--step--1);
  font-weight: 700;
}

.results {
  position: absolute;
  z-index: 1;
  top: calc(env(safe-area-inset-top, 0px) + var(--gutter) + 56px);
  left: var(--gutter);
  right: var(--gutter);
  max-height: min(60vh, 440px);
  overflow-y: auto;
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--elevation);
}

.result {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 58px;
  padding: 10px 16px;
  border: 0;
  border-bottom: 1px solid var(--rule);
  background: none;
  text-align: left;
}

.results li:last-child .result {
  border-bottom: 0;
}

.result-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.result-sub {
  color: var(--muted);
  font-size: var(--step--1);
}

.result-dist {
  flex: none;
  color: var(--muted);
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
}

.result-empty {
  padding: 16px;
  color: var(--muted);
}

/* The metro ribbon: one segment per line, in the line’s own color. */

.metro {
  display: flex;
  gap: 3px;
  margin-top: 10px;
  padding: 3px;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--elevation);
}

.metro:empty {
  display: none;
}

.line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex: 1;
  min-width: 0;
  height: 34px;
  padding: 0 6px;
  border: 0;
  border-radius: 11px;
  background: var(--cs, var(--c));
  color: var(--t);
  font-size: var(--step--1);
  font-weight: 700;
  --alert-mark: var(--c);
}

.line span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.line svg {
  flex: none;
  width: 15px;
  height: 15px;
}

.line[data-state="unknown"] {
  opacity: 0.8;
}

.line[data-state="disrupted"] {
  background: repeating-linear-gradient(-45deg, var(--cs, var(--c)) 0 7px, color-mix(in srgb, var(--cs, var(--c)) 72%, #000) 7px 14px);
}

/* Panel: bottom sheet on phones ------------------------------------------- */

.panel {
  --y: 0px;
  position: fixed;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(100dvh - var(--top-height) - 8px);
  display: flex;
  flex-direction: column;
  border-radius: 22px 22px 0 0;
  background: var(--surface);
  box-shadow: var(--elevation);
  transform: translateY(var(--y));
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}

.panel.is-dragging {
  transition: none;
}

.handle {
  flex: none;
  display: grid;
  place-items: center;
  width: 100%;
  height: 26px;
  padding: 0;
  border: 0;
  background: none;
  touch-action: none;
}

.handle span {
  width: 40px;
  height: 5px;
  border-radius: 3px;
  background: var(--rule);
}

.panel-body {
  position: relative; /* so steps measure their offset from here */
  flex: 1;
  overflow-y: auto;
  /* no rubber band: on iPhones it pulled the content away from the panel's edge (and a line's colour band
     away from the handle); pulling down at the top moves the panel instead (see sheet.js) */
  overscroll-behavior: none;
  padding: 0 18px calc(env(safe-area-inset-bottom, 0px) + 24px);
}

/* "Where to?" on the panel's edge (phones, home screen) ---------------------- */

.dock-search {
  display: none;
}

@media (max-width: 899px) {
  .dock-search {
    position: absolute;
    z-index: 1;
    top: -28px;
    left: 16px;
    right: 16px;
    align-items: center;
    gap: 12px;
    height: 56px;
    padding: 0 20px;
    border: 0;
    border-radius: 28px;
    background: var(--brand);
    color: var(--brand-ink);
    box-shadow: var(--elevation);
    font-size: 1.15rem;
    font-weight: 700;
    text-align: left;
  }

  .dock-search svg {
    flex: none;
    width: 24px;
    height: 24px;
  }

  body.is-home .dock-search {
    display: flex;
  }

  body.is-home .panel {
    height: calc(100dvh - var(--top-height) - 44px);
  }

  /* a line's colour band reaches up under the handle while it is at the top, as on Transit */
  .handle {
    border-radius: 22px 22px 0 0;
    transition: background-color 0.15s;
  }

  .panel.has-hero:not(.is-scrolled) .handle {
    background: var(--hero);
  }

  .panel.has-hero:not(.is-scrolled) .handle span {
    background: rgb(255 255 255 / 0.45);
  }

  /* on phones the search lives in the panel (the pill, then its own page), never at the top */
  .top .search,
  .top .results {
    display: none;
  }

  /* the menu and the weather on the left, location and language on the right */
  #locate {
    margin-left: auto;
  }

  /* the handle moves just under the pill, so the panel can still be dragged */
  body.is-home .handle {
    margin-top: 28px;
  }

  /* The search page covers the whole screen, like a page of its own */
  .top {
    transition: opacity 0.2s;
  }

  body.is-search .top {
    opacity: 0;
    pointer-events: none;
  }

  body.is-search .top > * {
    pointer-events: none;
  }

  body.is-search .panel {
    height: 100dvh;
    padding-top: env(safe-area-inset-top, 0px);
    transition:
      transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
      border-radius 0.3s;
  }

  body.is-search .panel[data-state="full"] {
    border-radius: 0;
    box-shadow: none;
  }

  body.is-search .handle {
    visibility: hidden;
    height: 10px;
  }
}

/* The search page in the panel: a back arrow and a box, then suggestions and results */
.search-head {
  position: sticky;
  z-index: 1;
  top: 0;
  padding-bottom: 6px;
  background: var(--surface);
}

.search-box {
  position: relative;
}

.search-box svg {
  position: absolute;
  top: 50%;
  left: 14px;
  width: 20px;
  height: 20px;
  color: var(--muted);
  transform: translateY(-50%);
  pointer-events: none;
}

.pick-input.search-box input {
  height: 50px;
  padding-left: 44px;
  border-radius: 25px;
  font-size: 1.05rem;
}

/* Home ---------------------------------------------------------------------- */

.home-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 2px 0 6px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
}

.brand-mark {
  width: 28px;
  height: 28px;
}

.wordmark {
  color: var(--ink);
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.home-head h2,
.head h2 {
  font-size: var(--step-2);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
}


.group h3,
.section h3 {
  margin: 10px 0 2px;
  color: var(--muted);
  font-size: var(--step--1);
  font-weight: 700;
}

/* Line cards: the heart of the app. Route, where it goes, where to catch it, when. */

.card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 72px;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--rule);
  background: none;
  text-align: left;
}

.cards li:last-child .card {
  border-bottom: 0;
}

.card-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.card-title {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--step-1);
  font-weight: 700;
  line-height: 1.2;
}

.card-arrow svg {
  width: 14px;
  height: 14px;
  color: var(--muted);
}

.card-sub {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--muted);
  font-size: var(--step--1);
}

.card-stop {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.walk {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex: none;
  color: var(--ink);
  font-weight: 700;
}

.walk svg {
  width: 14px;
  height: 14px;
}

.card-times {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  min-width: 64px;
  text-align: right;
}

.t-next {
  display: flex;
  align-items: baseline;
  gap: 3px;
  font-variant-numeric: tabular-nums;
}

.t-next b {
  font-size: var(--step-3);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}

.t-next b.t-clock {
  font-size: var(--step-1);
}

.t-next small,
.board-list small {
  color: var(--muted);
  font-size: var(--step--1);
}

.t-next.is-live {
  color: var(--live);
}

.t-next .live-icon {
  align-self: flex-start;
  width: 13px;
  height: 13px;
}

.t-then {
  color: var(--muted);
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.times-loading {
  color: var(--rule);
}

.times-none {
  max-width: 96px;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.25;
}

.metro-state {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--live);
  font-size: var(--step--1);
  font-weight: 700;
  white-space: nowrap;
}

.metro-state[data-state="disrupted"] {
  color: var(--warn);
  --alert-mark: var(--surface);
}

.metro-state svg {
  width: 14px;
  height: 14px;
}

/* Route cards: one per route, filled with the route’s color like a sign at the stop.
   The number and name stay put; directions are slides you swipe between. */

.group .group-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0 10px;
  color: var(--ink);
  font-size: var(--step-1);
  font-weight: 700;
}

.group-title svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}

.group + .group {
  margin-top: 22px;
}

.cards {
  display: flex;
  flex-direction: column;
  /* bands of line colour, edge to edge across the panel */
  margin: 0 -18px;
}

.rcard {
  position: relative;
  overflow: hidden;
  /* a touch deeper than the sign color, so white text reads well */
  background: var(--cs, color-mix(in srgb, var(--c) 86%, #000));
  color: var(--t);
  border-top: 1px solid color-mix(in srgb, var(--c) 70%, #000);
}

.rcard:first-child {
  border-top: 0;
}

.rcard-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 14px 18px 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
}

.rcard-id {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
}

.rcard-id svg {
  width: 26px;
  height: 26px;
}

.rcard-id b {
  font-size: 2.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.02em;
}

.rcard-name {
  min-width: 0;
  overflow: hidden;
  padding: 3px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--t) 18%, transparent);
  font-size: var(--step--1);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rcard-name:empty {
  display: none;
}

.rcard-dots {
  margin-left: auto;
}

.rcard-dots {
  display: flex;
  gap: 5px;
  flex: none;
}

.rcard-dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.35;
  transition: opacity 0.2s;
}

.rcard-dots i.is-on {
  opacity: 1;
}

.rcard-slides {
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.rcard-slides::-webkit-scrollbar {
  display: none;
}

.rcard-slide {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  flex: 0 0 100%;
  min-height: 72px;
  padding: 8px 18px 16px;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.rcard-slide:active {
  background: rgba(0, 0, 0, 0.08);
}

.rcard-slide:focus-visible,
.rcard-head:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: -5px;
  border-radius: 14px;
}

.rcard-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.rcard-dir {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.2;
}

/* the direction arrow in a disc of the text colour */
.rcard-dir svg {
  flex: none;
  width: 22px;
  height: 22px;
  padding: 4px;
  border-radius: 50%;
  background: var(--t);
  color: var(--cs, color-mix(in srgb, var(--c) 86%, #000));
}

.rcard-dir span,
.rcard-stop > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rcard-stop {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: var(--step-0);
  opacity: 0.9;
}

.rcard .walk {
  color: inherit;
}

.rcard-times {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 64px;
  text-align: center;
}

/* one big count, the live signal at its shoulder, the unit underneath */
.rcard .t-next {
  position: relative;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.rcard .t-next b {
  font-size: 3rem;
  letter-spacing: -0.04em;
}

.rcard .t-next b.t-clock {
  font-size: var(--step-2);
}

.rcard .t-next .live-icon {
  position: absolute;
  top: -8px;
  right: -16px;
  width: 16px;
  height: 16px;
}

.rcard .t-next small {
  color: inherit;
  font-weight: 700;
  opacity: 0.9;
}

/* later times live in the line view; a card says one thing */
.rcard .t-then {
  display: none;
}

.rcard .t-next.is-live {
  color: inherit;
}

.rcard .times-loading {
  color: inherit;
  opacity: 0.3;
}

.rcard .times-none {
  max-width: 90px;
  color: inherit;
  font-size: var(--step--1);
  font-weight: 700;
  opacity: 0.85;
}

.rcard .metro-state,
.rcard .metro-state[data-state="disrupted"] {
  color: inherit;
  --alert-mark: var(--c);
}

/* Lines with nothing soon sink under a heading, quiet and compact. */

.cards-idle-head {
  order: 1;
  margin-top: 6px;
  color: var(--muted);
  font-size: var(--step--1);
  font-weight: 700;
}

.rcard[data-idle] {
  order: 2;
  background: var(--raised);
  color: var(--muted);
  box-shadow: none;
}

.rcard[data-idle] .rcard-head {
  padding-top: 10px;
}

.rcard[data-idle] .rcard-id {
  padding: 3px 8px;
  border-radius: 8px;
  background: var(--c);
  color: var(--t);
}

.rcard[data-idle] .rcard-id b {
  font-size: var(--step-1);
}

.rcard[data-idle] .rcard-id svg {
  width: 14px;
  height: 14px;
}

.rcard[data-idle] .rcard-slide {
  min-height: 0;
  padding-bottom: 10px;
}

.rcard[data-idle] .rcard-dir {
  font-size: var(--step-0);
}

/* Live indicator: two arcs that breathe, like a signal. */

@keyframes live-arc {
  0%,
  100% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
}

.live-icon .arc1 {
  animation: live-arc 1.8s ease-in-out infinite;
}

.live-icon .arc2 {
  animation: live-arc 1.8s ease-in-out 0.35s infinite;
}

/* Route plates: the number in the route’s color, like the sign on a stop pole. */

.plate {
  display: inline-grid;
  place-items: center;
  flex: none;
  min-width: 2.3em;
  height: 1.75em;
  padding: 0 0.4em;
  border-radius: 6px;
  background: var(--cs, var(--c, var(--brand)));
  color: var(--t, #fff);
  font-size: var(--step--1);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.plate--metro {
  min-width: 1.75em;
  padding: 0;
  border-radius: 50%;
}

.plate--more {
  background: var(--raised);
  color: var(--muted);
}

.plate--card {
  min-width: 52px;
  height: 40px;
  border-radius: 10px;
  font-size: var(--step-1);
}

.plate--card.plate--metro {
  min-width: 40px;
  width: 40px;
  margin-inline: 6px;
  border-radius: 50%;
}

.plate--large {
  min-width: 52px;
  height: 44px;
  border-radius: 11px;
  font-size: var(--step-2);
}

.plate--large.plate--metro {
  min-width: 44px;
  border-radius: 50%;
}

.plates {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
}

.plates--small .plate {
  min-width: 2em;
  height: 1.55em;
  font-size: 0.6875rem;
}

.plates--small .plate--metro {
  min-width: 1.55em;
}

/* Detail views --------------------------------------------------------------- */

.head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 2px 0 14px;
}

.head-text {
  flex: 1;
  min-width: 0;
}

.sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin-top: 3px;
  color: var(--muted);
}

.back,
.fav {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
}

.back {
  margin-left: -10px;
}

.back svg {
  width: 24px;
  height: 24px;
}

.fav {
  margin-right: -8px;
  color: var(--muted);
}

.fav svg {
  width: 26px;
  height: 26px;
  fill: none;
}

.fav[aria-pressed="true"] {
  color: var(--brand);
}

.fav[aria-pressed="true"] svg {
  fill: currentColor;
}

.back:hover,
.fav:hover {
  background: var(--raised);
}

/* Direction switch */

.segmented {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 4px;
  padding: 4px;
  border-radius: 14px;
  background: var(--raised);
}

.segmented button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  min-height: 42px;
  padding: 6px 10px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--muted);
  font-weight: 700;
  line-height: 1.2;
}

.segmented button span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.segmented svg {
  flex: none;
  width: 14px;
  height: 14px;
}

.segmented [aria-pressed="true"] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--lift);
}

/* Line page header: the route’s color, its number and name, and the direction switch. */

.line-hero {
  /* a band of the line's colour across the top of the panel, like its card on the home page */
  margin: -4px -18px 0;
  padding: 6px 14px 16px;
  background: var(--cs, color-mix(in srgb, var(--c) 86%, #000));
  color: var(--t);
}

.line-hero .rcard-id svg {
  width: 24px;
  height: 24px;
}

.line-hero-dir {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 6px 4px 0;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.2;
}

/* where the line goes is the page's title: it wraps onto a second line rather than losing its end */
.line-hero-dir span {
  min-width: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.line-hero-dir svg {
  flex: none;
  margin-top: 1px;
  width: 24px;
  height: 24px;
  padding: 4px;
  border-radius: 50%;
  background: var(--t);
  color: var(--cs, color-mix(in srgb, var(--c) 86%, #000));
}

.line-hero-top {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
}

.line-hero .rcard-id b {
  font-size: 2.5rem;
}

.line-hero .fav {
  margin-left: auto;
}

.line-hero .back {
  margin-left: -4px;
}

.line-hero .back,
.line-hero .fav,
.line-hero .fav[aria-pressed="true"] {
  margin-right: -4px;
  color: inherit;
}

.line-hero .back:hover,
.line-hero .fav:hover {
  background: color-mix(in srgb, currentColor 14%, transparent);
}

.line-hero .segmented {
  margin-top: 12px;
  background: color-mix(in srgb, currentColor 16%, transparent);
}

.line-hero .segmented button {
  color: inherit;
  opacity: 0.85;
}

.line-hero .segmented [aria-pressed="true"] {
  background: var(--t);
  color: var(--cs, color-mix(in srgb, var(--c) 86%, #000));
  opacity: 1;
}

/* Placeholder cards while the map and network load */

.sk-card {
  height: 104px;
  margin-bottom: 10px;
  border-radius: 18px;
  background: var(--raised);
  animation: sk-pulse 1.1s ease-in-out infinite alternate;
}

.skeleton {
  padding-top: 34px;
}

@keyframes sk-pulse {
  to {
    opacity: 0.45;
  }
}

/* The board: next departures at your stop, big enough to read at arm’s length. */

.board {
  margin-top: 14px;
  padding: 16px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--c, var(--brand)) 7%, var(--raised));
}

/* Departure tiles: the next one in the line's colour, the ones after in white, side by side */
.tiles {
  display: flex;
  gap: 10px;
  margin: 12px -16px 0;
  padding: 2px 16px 6px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.tiles::-webkit-scrollbar {
  display: none;
}

.tile {
  position: relative;
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 96px;
  min-height: 112px;
  padding: 14px 12px 12px;
  border-radius: 20px;
  background: var(--surface);
  color: var(--cs, color-mix(in srgb, var(--c) 86%, #000));
  box-shadow: var(--lift);
  scroll-snap-align: start;
}

.tile.is-first {
  min-width: 112px;
  background: var(--cs, color-mix(in srgb, var(--c) 86%, #000));
  color: var(--t, #fff);
}

.tile .board-value {
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.tile .board-value b {
  font-size: 2.6rem;
  letter-spacing: -0.04em;
}

.tile.is-first .board-value b {
  font-size: 3.2rem;
}

.tile .board-value b.t-clock {
  font-size: var(--step-1);
}

.tile .board-value small {
  color: inherit;
  font-weight: 700;
}

.tile-live {
  position: absolute;
  top: 10px;
  right: 12px;
}

.tile-live svg {
  width: 15px;
  height: 15px;
}

.tiles.is-loading .tile {
  color: transparent;
  animation: sk-pulse 1.1s ease-in-out infinite alternate;
}

/* How full: three dots, filled up to the bus's crowding */
.crowd {
  display: inline-flex;
  gap: 3px;
  padding: 3px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 14%, transparent);
}

.crowd i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.3;
}

.crowd i.is-on {
  opacity: 1;
}

.board-stop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  color: var(--muted);
  font-weight: 700;
}

.board-list {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px 22px;
  margin-top: 10px;
}

.board-list li {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.board-list li.is-first {
  flex-basis: 100%;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
}

.board-value {
  display: flex;
  align-items: baseline;
  gap: 3px;
  font-variant-numeric: tabular-nums;
}

.board-value b {
  font-size: var(--step-2);
  font-weight: 700;
  line-height: 1;
}

.board-list .is-first .board-value b {
  font-size: var(--step-4);
  letter-spacing: -0.03em;
}

.board-value b.t-clock,
.board-list .is-first .board-value b.t-clock {
  font-size: var(--step-2);
}

.board-list .is-live {
  color: var(--live);
}

.board-value .live-icon {
  align-self: flex-start;
  width: 14px;
  height: 14px;
}

.board-occ {
  color: var(--muted);
  font-size: var(--step--1);
}

.board-meta {
  margin-top: 12px;
  color: var(--muted);
  font-size: var(--step--1);
}

.board .empty {
  padding: 10px 0 0;
}

.board .note {
  margin-top: 10px;
}

/* Notices on a line: what the STM says, in white cards with a warning mark */
.alerts h3 {
  margin-bottom: 10px;
}

.alert-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  margin-top: 10px;
  padding: 14px 16px;
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--lift);
  border: 1px solid var(--rule);
}

.alert-icon {
  color: #e8a10c;
  --alert-mark: var(--surface);
}

.alert-icon svg {
  width: 24px;
  height: 24px;
}

.alert-body h4 {
  margin: 0;
  line-height: 24px; /* level with the icon */
  color: #b7790a;
  font-size: var(--step-0);
  font-weight: 700;
}

.alert-card--stop .alert-body h4 {
  color: var(--warn);
}

.alert-card--stop .alert-icon {
  color: var(--warn);
}

.alert-body p {
  margin-top: 4px;
  font-weight: 700;
  line-height: 1.35;
}

.alert-body .alert-meta {
  color: var(--muted);
  font-size: var(--step--1);
  font-weight: 400;
}

.d-alert {
  display: inline-flex;
  margin-left: 6px;
  color: #e8a10c;
  vertical-align: -2px;
  --alert-mark: var(--surface);
}

.d-alert svg {
  width: 15px;
  height: 15px;
}

/* Tracking one bus ----------------------------------------------------------- */

.track-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  margin-top: 12px;
  padding: 8px 14px;
  border: 0;
  border-radius: 12px;
  background: color-mix(in srgb, var(--live) 14%, var(--surface));
  color: var(--live);
  font-weight: 700;
}

.track-button svg {
  width: 16px;
}

.track-link {
  margin-left: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--live);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.track-eta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  margin-top: 6px;
}

.track-eta b {
  font-size: var(--step-4);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.track-eta b.t-clock {
  font-size: var(--step-2);
}

.track-eta small {
  font-weight: 700;
}

.track-eta-label {
  flex-basis: 100%;
  color: var(--muted);
  font-size: var(--step--1);
  font-weight: 700;
}

.track-where {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-weight: 700;
}

.track-where .live svg {
  width: 14px;
}

.track-follow {
  margin-top: 12px;
}

.track-follow svg {
  width: 16px;
  height: 16px;
}

.track-note {
  margin: 12px 0 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--raised);
  color: var(--muted);
  font-size: var(--step--1);
  line-height: 1.45;
}

.vehicle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  margin-top: 12px;
  color: var(--muted);
  font-size: var(--step--1);
}

.vehicle:empty {
  display: none;
}

.live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--live);
  font-weight: 700;
}

.live svg {
  width: 14px;
  height: 14px;
}

#vehicle-card:empty {
  display: none;
}

/* Stop diagram: the line drawn as a rail, with buses riding on it. */

.section {
  margin-top: 18px;
}

.diagram {
  margin-top: 4px;
}

.d-stop {
  position: relative;
}

.d-button {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
}

.d-rail {
  position: relative;
  align-self: stretch;
}

.d-rail::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 14px;
  width: 4px;
  background: var(--c);
}

.d-stop.is-first .d-rail::before {
  top: 50%;
}

.d-stop.is-last .d-rail::before {
  bottom: 50%;
}

.d-dot {
  position: absolute;
  top: 50%;
  left: 16px;
  width: 14px;
  height: 14px;
  border: 3px solid var(--c);
  border-radius: 50%;
  background: var(--surface);
  transform: translate(-50%, -50%);
}

.d-name {
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* the stop's name, with the other lines you can change to just under it, as Transit does */
.d-label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
  min-width: 0;
}

.d-label .plates {
  justify-content: flex-start;
}

/* when the next bus from your stop should get to each stop further on */
.d-time {
  flex: none;
  color: var(--muted);
  font-size: var(--step--1);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.d-stop.is-last .d-name {
  border-bottom: 0;
}

.d-stop.is-anchor .d-name {
  font-weight: 700;
}

.d-stop.is-anchor .d-dot {
  width: 22px;
  height: 22px;
  border-width: 4px;
  background: var(--c);
  box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--brand);
}

.d-slot {
  position: absolute;
  top: 0;
  left: 4px;
  pointer-events: none;
}

.d-bus {
  position: absolute;
  top: -12px;
  left: 0;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: var(--c);
  color: #ffffff;
  box-shadow: var(--lift);
}

.d-bus.is-stopped {
  top: 12px;
}

.d-bus.is-selected {
  box-shadow: 0 0 0 3px var(--brand);
}

.d-bus svg {
  width: 14px;
  height: 14px;
}

.d-more button {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--brand);
  font-weight: 700;
  text-align: left;
  align-items: center;
}

.d-more .d-rail::before {
  background: repeating-linear-gradient(var(--c) 0 4px, transparent 4px 9px);
}

.d-slot--more .d-bus {
  top: 10px;
}

.d-slot--more .d-bus + .d-bus {
  top: 22px;
}

/* Status and messages */

.status-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--live);
  font-weight: 700;
}

.status[data-state="disrupted"] .status-state {
  color: var(--warn);
  --alert-mark: var(--raised);
}

.status-state svg {
  width: 16px;
  height: 16px;
}

.status-message {
  margin-top: 8px;
  max-width: 60ch;
}

.empty,
.note {
  color: var(--muted);
}

.empty {
  padding: 20px 0;
}

/* An empty state that offers the way out: the question, then the buttons that answer it */
.empty--cta p {
  color: var(--ink);
  font-weight: 700;
}

.empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.empty-actions .chip {
  color: var(--ink);
}

.empty-actions .chip svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--brand);
}

.note {
  margin-top: 14px;
  font-size: var(--step--1);
}

.notice {
  margin: 8px 0;
  padding: 12px 14px;
  border-left: 4px solid var(--warn);
  border-radius: 6px;
  background: color-mix(in srgb, var(--warn) 10%, var(--surface));
}

.credits {
  margin-top: 28px;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.5;
}

/* Status chips for occupancy */

.occ {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.occ-bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
}

.occ-bars i {
  width: 4px;
  border-radius: 1px;
  background: var(--rule);
}

.occ-bars i:nth-child(1) {
  height: 6px;
}

.occ-bars i:nth-child(2) {
  height: 9px;
}

.occ-bars i:nth-child(3) {
  height: 12px;
}

.occ[data-bars="1"] i:nth-child(-n + 1),
.occ[data-bars="2"] i:nth-child(-n + 2),
.occ[data-bars="3"] i:nth-child(-n + 3) {
  background: currentColor;
}

.occ[data-full="true"] {
  color: var(--warn);
}

/* Map extras */

.user-marker {
  --heading: 0deg;
  position: relative;
  width: 18px;
  height: 18px;
}

.user-dot {
  position: absolute;
  inset: 0;
  width: 18px;
  height: 18px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #1a73e8;
  box-shadow: 0 0 0 6px rgba(26, 115, 232, 0.2);
}

/* The beam showing which way you face, like a flashlight from your dot */
.user-cone {
  position: absolute;
  left: 50%;
  bottom: 50%;
  width: 76px;
  height: 64px;
  margin-left: -38px;
  background: radial-gradient(ellipse at 50% 100%, rgba(26, 115, 232, 0.55), rgba(26, 115, 232, 0) 70%);
  clip-path: polygon(50% 100%, 6% 0, 94% 0);
  transform: rotate(var(--heading));
  transform-origin: 50% 100%;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}

.user-marker.has-heading .user-cone {
  opacity: 1;
}

.toast {
  position: fixed;
  z-index: 4;
  left: 50%;
  top: calc(var(--top-height) + 12px);
  max-width: min(92vw, 420px);
  padding: 12px 18px;
  border-radius: 14px;
  background: var(--ink);
  color: var(--surface);
  font-weight: 700;
  transform: translateX(-50%);
  box-shadow: var(--elevation);
}

.toast[hidden] {
  display: none;
}

/* Trip planning ------------------------------------------------------------- */

.primary-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  margin: 2px 0 8px;
  padding: 10px 16px;
  border: 0;
  border-radius: 14px;
  background: var(--brand);
  color: var(--brand-ink);
  font-weight: 700;
  --surface: var(--brand);
}

.primary-button svg {
  width: 20px;
  height: 20px;
}

.text-button {
  margin-top: 6px;
  padding: 6px 0;
  border: 0;
  background: none;
  color: var(--brand);
  font-weight: 700;
}

.muted {
  color: var(--muted);
}

/* Start and destination, joined by a dotted line, with a swap button */

.od {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 4px 56px 4px 0;
  border-radius: 16px;
  background: var(--raised);
}

.od::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 34px;
  bottom: 34px;
  border-left: 3px dotted var(--muted);
}

.od-field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 56px;
  padding: 6px 14px;
  border: 0;
  background: none;
  text-align: left;
}

.od-field + .od-field::before {
  content: "";
  position: absolute;
  top: 0;
  left: 44px;
  right: 0;
  border-top: 1px solid var(--rule);
}

.od-dot {
  position: relative;
  z-index: 1;
  flex: none;
  width: 16px;
  height: 16px;
  border: 3.5px solid var(--ink);
  border-radius: 50%;
  background: var(--surface);
}

.od-dot--to {
  border-color: var(--surface);
  background: var(--brand);
  box-shadow: 0 0 0 1.5px var(--brand);
}

.od-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.od-label {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
}

.od-value {
  overflow: hidden;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.od-value.is-empty {
  color: var(--muted);
  font-weight: 400;
}

.od-swap {
  position: absolute;
  top: 50%;
  right: 8px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--lift);
  color: var(--ink);
  transform: translateY(-50%);
}

.od-swap svg {
  width: 22px;
  height: 22px;
}

/* Leave now / leave at */

.when {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border: 1.5px solid var(--rule);
  border-radius: 20px;
  background: var(--surface);
  color: var(--muted);
  font-weight: 700;
}

.chip[aria-pressed="true"],
.chip[data-active="true"] {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--ink);
}

.chip--time input {
  min-width: 0;
  padding: 2px 0;
  border: 0;
  background: none;
  color: inherit;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Trip options */

#plan-results {
  margin-top: 12px;
}

.planning {
  animation: pulse 1.4s ease-in-out infinite;
}

@keyframes pulse {
  50% {
    opacity: 0.45;
  }
}

/* Trip options on one shared clock: a ruler of times, faint lines down through every option */
.timeline {
  --tl-pad: 16px;
  position: relative;
  margin-top: 14px;
}

.tl-axis {
  position: relative;
  height: 22px;
  margin: 0 var(--tl-pad);
  border-bottom: 1px solid var(--rule);
}

.tl-mark {
  position: absolute;
  top: 0;
  bottom: -9999px; /* the line runs down the whole list; .timeline clips it */
  width: 0;
  border-left: 1px dashed color-mix(in srgb, var(--rule) 80%, transparent);
  pointer-events: none;
}

.tl-mark span {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(-50%);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.timeline {
  overflow: hidden;
}

.options {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-top: 4px;
}

.option {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  padding: 14px var(--tl-pad, 16px);
  border: 0;
  border-bottom: 1px solid var(--rule);
  background: none;
  text-align: left;
}

.options li:last-child .option {
  border-bottom: 0;
}

.opt-track {
  display: block;
}

.opt-track .opt-bar {
  min-width: 96px;
}

.opt-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.opt-foot .opt-duration b {
  font-size: var(--step-1);
}

.opt-foot .opt-duration {
  flex: none;
  white-space: nowrap;
}

.opt-foot .opt-clock {
  margin-left: 6px;
  font-size: var(--step--1);
}

/* "Fastest", on the quickest of several options */
.opt-badge {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 700;
  vertical-align: 2px;
}

.option:active {
  background: color-mix(in srgb, var(--brand-soft) 70%, transparent);
}

/* The trip to scale */

.opt-bar {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 30px;
}

.opt-bar > span {
  flex-basis: 0;
  min-width: 6px;
}

.bar-walk {
  height: 4px;
  background: radial-gradient(circle, var(--muted) 1.6px, transparent 2px) 0 50% / 7px 4px repeat-x;
}

.bar-wait {
  height: 4px;
  border-radius: 2px;
  background: var(--rule);
}

.bar-ride {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 52px !important;
  height: 30px;
  padding: 0 8px;
  overflow: hidden;
  border-radius: 9px;
  background: var(--cs, var(--c));
  color: var(--t);
  font-size: var(--step--1);
  white-space: nowrap;
}

.bar-ride svg {
  flex: none;
  width: 13px;
  height: 13px;
}

.opt-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.opt-duration {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.opt-duration b {
  color: var(--ink);
  font-size: var(--step-3);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.opt-clock {
  color: var(--muted);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.opt-legs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.opt-legs--summary {
  margin-bottom: 8px;
}

.leg {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  color: var(--muted);
  font-size: var(--step--1);
  font-weight: 700;
}

.leg svg {
  width: 15px;
  height: 15px;
}

.leg-sep svg {
  width: 12px;
  height: 12px;
  color: var(--rule);
}

.opt-leave {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  font-size: var(--step--1);
}

.opt-when {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 700;
}

.opt-when.is-live {
  color: var(--live);
}

.opt-when svg {
  width: 14px;
  height: 14px;
}

.opt-later {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* Step-by-step: a timeline with times on the left */

.steps {
  margin-top: 6px;
}

.step {
  display: grid;
  grid-template-columns: 70px 26px minmax(0, 1fr);
  gap: 0 10px;
}

.step-time {
  padding-top: 12px;
  font-size: var(--step--1);
  white-space: nowrap;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.step-rail {
  position: relative;
}

.step-rail::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 11px;
  width: 4px;
}

.step--walk .step-rail::before {
  left: 12px;
  width: 0;
  border-left: 3px dotted var(--muted);
}

.step--board .step-rail::before {
  top: 20px;
  background: var(--c);
}

.step--alight .step-rail::before {
  bottom: calc(100% - 20px);
  background: var(--c);
}

.step-dot,
.step-pin {
  position: absolute;
  top: 20px;
  left: 13px;
  width: 16px;
  height: 16px;
  border: 3.5px solid var(--c, var(--ink));
  border-radius: 50%;
  background: var(--surface);
  transform: translate(-50%, -50%);
}

.step--to .step-pin {
  border-color: var(--surface);
  background: var(--brand);
  box-shadow: 0 0 0 1.5px var(--brand);
}

.step-body {
  min-width: 0;
  padding: 10px 0 16px;
}

.step-label {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
}

.step-title {
  font-weight: 700;
}

.walk-line {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  color: var(--muted);
}

.walk-line svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
}

.ride-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  font-size: var(--step-1);
  font-weight: 700;
}

.ride-live {
  margin-top: 2px;
  font-size: var(--step--1);
}

.ride-live:empty {
  display: none;
}

.ride-stops {
  margin-top: 8px;
  color: var(--muted);
  font-size: var(--step--1);
}

.ride-stops summary {
  cursor: pointer;
  font-weight: 700;
}

.ride-stops ol {
  margin-top: 6px;
  padding-left: 2px;
}

.ride-stops li {
  padding: 3px 0;
}

/* Place picker */

.pick-input {
  flex: 1;
}

.pick-input input {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border: 1.5px solid var(--rule);
  border-radius: 14px;
  background: var(--raised);
  font-size: 1rem;
}

.pick-input input:focus {
  border-color: var(--brand);
  outline: none;
}

.results-inline .result {
  padding-inline: 0;
}

.result-heading {
  padding: 12px 16px 4px;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
}

.results-inline .result-heading {
  padding-inline: 0;
}

.result-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--raised);
  color: var(--muted);
}

.result-icon--brand {
  color: var(--brand);
}

.result-icon svg {
  width: 20px;
  height: 20px;
}

.pick-near {
  margin: 4px 0 12px;
  font-weight: 700;
}

/* The pin you place on the map */

.crosshair {
  position: fixed;
  z-index: 1;
  width: 0;
  height: 0;
  pointer-events: none;
}

.crosshair span {
  position: absolute;
  left: -14px;
  bottom: 6px; /* the rotated tip lands on the point */
  width: 28px;
  height: 28px;
  border-radius: 50% 50% 50% 0;
  background: var(--brand);
  box-shadow: var(--elevation);
  transform: rotate(-45deg);
  transform-origin: 50% 50%;
}

.crosshair span::after {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background: var(--brand-ink);
}

.crosshair[hidden] {
  display: none;
}

/* Go mode: turn-by-turn guidance ------------------------------------------- */

body.is-going .top {
  display: none;
}

.go-banner {
  position: fixed;
  z-index: 3;
  top: 0;
  left: 0;
  right: 0;
  padding: calc(env(safe-area-inset-top, 0px) + var(--gutter)) var(--gutter) 0;
  pointer-events: none;
  --go-bg: #073d4a;
  --go-ink: #ffffff;
  --go-soft: rgba(255, 255, 255, 0.72);
}

.go-banner[hidden] {
  display: none;
}

.go-banner > * {
  pointer-events: auto;
}

.go-banner[data-tone="hurry"] {
  --go-bg: #c2410c;
}

.go-banner[data-tone="live"] {
  --go-bg: #0b6e45;
}

.go-banner[data-tone="alert"] {
  --go-bg: #00718c;
}

.go-banner[data-tone="arrive"] {
  --go-bg: #0b6e45;
}

.go-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 16px 16px 16px 14px;
  border-radius: 22px;
  background: var(--go-bg);
  color: var(--go-ink);
  box-shadow: var(--elevation);
  transition: background-color 0.4s ease;
}

.go-banner.is-flash .go-card {
  animation: go-flash 0.9s ease;
}

@keyframes go-flash {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.025);
  }
  100% {
    transform: scale(1);
  }
}

.go-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.14);
}

.go-icon > svg {
  width: 28px;
  height: 28px;
}

.plate--go {
  min-width: 44px;
  height: 36px;
  border-radius: 9px;
  font-size: var(--step-1);
}

.plate--go.plate--metro {
  min-width: 36px;
}

.go-title {
  font-size: var(--step-1);
  font-weight: 700;
  line-height: 1.2;
}

.go-sub {
  margin-top: 3px;
  color: var(--go-soft);
  font-size: var(--step--1);
}

.go-hint {
  margin-top: 2px;
  font-size: var(--step--1);
  font-weight: 700;
}

.go-count {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-variant-numeric: tabular-nums;
}

.go-count-value {
  display: flex;
  align-items: baseline;
  gap: 2px;
}

.go-count b {
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
}

.go-count small,
.go-count-label {
  color: var(--go-soft);
  font-size: 0.75rem;
}

.go-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}

.go-actions:empty {
  display: none;
}

.go-badge,
.go-recenter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--elevation);
  color: var(--ink);
  font-size: var(--step--1);
  font-weight: 700;
}

.go-badge {
  color: var(--muted);
}

.go-recenter svg {
  width: 18px;
  height: 18px;
  color: var(--brand);
}

/* Over the map in Go mode: a pill with your line and when you get there */
.go-pill {
  display: inline-flex;
  grid-template-columns: none;
  align-items: center;
  gap: 10px;
  margin: 0 auto;
  padding: 8px 16px 8px 8px;
  border-radius: 999px;
}

.go-banner {
  text-align: center;
}

.go-pill .go-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}

.go-pill .go-icon > svg {
  width: 22px;
  height: 22px;
}

.go-pill-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.1;
}

.go-pill-text small {
  color: var(--go-soft);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.go-pill-text b {
  font-size: var(--step-2);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.go-pill-live svg {
  width: 15px;
  height: 15px;
}

/* In the panel: what to do now */
.go-now {
  margin: 2px 0 14px;
}

.go-now:empty {
  display: none;
}

.go-now-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.go-now-title {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.go-now-sub {
  margin-top: 4px;
  color: var(--muted);
  font-size: var(--step-0);
}

.go-now-hint {
  margin-top: 4px;
  color: var(--live);
  font-weight: 700;
}

.go-now .go-count b {
  font-size: 2.6rem;
}

.go-now .go-count small,
.go-now .go-count-label {
  color: var(--muted);
}

/* the whole trip, and where you are on it */
.go-progress {
  position: relative;
  margin: 16px 0 6px;
  padding: 0 4px;
}

.go-progress .opt-bar {
  height: 14px;
}

.go-progress .bar-ride {
  height: 14px;
  min-width: 22px !important;
  padding: 0;
  font-size: 0;
}

.go-progress .bar-ride svg {
  display: none;
}

.go-progress-you {
  position: absolute;
  top: 50%;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--elevation);
  color: var(--brand);
  transform: translate(-50%, -50%);
  transition: left 1s linear;
}

.go-progress-you svg {
  width: 18px;
  height: 18px;
}

/* the line you are on, or waiting for, in its colour */
.go-line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding: 16px;
  border-radius: 22px;
  background: var(--cs, color-mix(in srgb, var(--c) 86%, #000));
  color: var(--t);
  box-shadow: var(--lift);
}

.go-line .plate {
  background: var(--t);
  color: var(--cs, color-mix(in srgb, var(--c) 86%, #000));
}

.go-line-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.go-line-text small {
  font-size: var(--step--1);
  font-weight: 700;
  opacity: 0.85;
}

.go-line-text b {
  overflow: hidden;
  font-size: var(--step-1);
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.go-line-time {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.go-tiles .tiles {
  margin: 12px 0 0;
  padding: 2px 0 6px;
}

.go-start {
  margin: 4px 0 14px;
}

.go-head {
  position: sticky;
  z-index: 1;
  top: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 2px 0 10px;
  background: var(--surface);
}

.go-head h2 {
  font-size: var(--step-1);
  font-weight: 700;
}

.go-end {
  flex: none;
  min-height: 40px;
  padding: 0 18px;
  border: 0;
  border-radius: 20px;
  background: var(--raised);
  color: var(--warn);
  font-weight: 700;
}

.go-steps {
  margin-top: 4px;
}

.go-step {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 6px 10px;
  border-radius: 12px;
  color: var(--muted);
}

.go-step.is-current {
  background: var(--brand-soft);
  color: var(--ink);
  font-weight: 700;
}

.go-step.is-done .go-step-text {
  text-decoration: line-through;
  text-decoration-color: var(--rule);
}

.go-step.is-done .go-step-icon {
  opacity: 0.45;
}

.go-step-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
}

.go-step-icon > svg {
  width: 20px;
  height: 20px;
}

.go-controls {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.go-controls .chip {
  flex: 1;
  justify-content: center;
}

.chip:disabled {
  opacity: 0.4;
}

/* Motion polish ------------------------------------------------------------- */

@keyframes enter-forward {
  from {
    opacity: 0;
    transform: translateX(28px);
  }
}

@keyframes enter-back {
  from {
    opacity: 0;
    transform: translateX(-28px);
  }
}

.panel-body.enter-forward > * {
  animation: enter-forward 0.26s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.panel-body.enter-back > * {
  animation: enter-back 0.26s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/* countdown numbers roll up when they change */
@keyframes tick {
  from {
    opacity: 0.2;
    transform: translateY(45%);
  }
}

.is-ticking {
  display: inline-block;
  animation: tick 0.42s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* loading countdowns shimmer instead of showing a dash */
@keyframes shimmer {
  to {
    background-position: -200% 0;
  }
}

.times-loading .t-next b,
.board-list.is-loading b {
  color: transparent;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--raised) 25%, var(--rule) 50%, var(--raised) 75%) 0 0 / 200% 100%;
  animation: shimmer 1.3s linear infinite;
}

.times-loading small,
.board-list.is-loading small {
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .panel-body.enter-forward > *,
  .panel-body.enter-back > *,
  .is-ticking,
  .go-banner.is-flash .go-card,
  .times-loading .t-next b {
    animation: none;
  }
}

@media (min-width: 900px) {
  .go-banner {
    right: auto;
    width: calc(var(--panel-width) + 32px);
    padding: calc(env(safe-area-inset-top, 0px) + 16px) 16px 0;
  }
}

/* Install and offline ---------------------------------------------------- */

/* "Get the app": a slim strip on the home screen of phones not using the installed app */

.app-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0 0 14px;
  padding: 8px 10px 8px 8px;
  border: 1px solid color-mix(in srgb, var(--sky) 30%, var(--rule));
  border-radius: 14px;
  background: color-mix(in srgb, var(--sky) 8%, var(--surface));
  color: var(--ink);
  text-align: left;
}

.app-strip:active {
  background: color-mix(in srgb, var(--sky) 16%, var(--surface));
}

.app-strip-icon {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 8px;
}

.app-strip-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  font-size: var(--step--1);
  line-height: 1.3;
}

.app-strip-text span {
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-strip-cta {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: none;
  color: var(--brand);
  font-size: var(--step--1);
  font-weight: 700;
}

.app-strip-cta svg {
  width: 14px;
  height: 14px;
}

/* The install guide */

.guide-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.guide-icon {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 15px;
  box-shadow: var(--lift);
}

.guide-benefits {
  display: grid;
  gap: 8px;
  margin-bottom: 18px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--raised);
}

.guide-benefits li {
  display: flex;
  gap: 10px;
  font-size: var(--step--1);
  line-height: 1.35;
}

.guide-benefits svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  color: var(--live);
}

.guide-os {
  margin-bottom: 16px;
}

.guide-browser {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: var(--step--1);
  font-weight: 700;
}

.guide-lead {
  margin: 0 0 10px;
  font-size: var(--step--1);
}

.guide-lead + .primary-button {
  margin-bottom: 16px;
}

.guide-steps {
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
}

.guide-steps li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.guide-steps p {
  padding-top: 3px;
  line-height: 1.45;
}

.guide-num {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--brand-ink);
  font-size: var(--step--1);
  font-weight: 700;
}

.guide-steps .inline-icon {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  margin: 0 2px;
  padding: 2px;
  border-radius: 5px;
  background: var(--raised);
  vertical-align: -0.3em;
}

.guide-steps--small {
  gap: 8px;
  margin-bottom: 12px;
  font-size: var(--step--1);
}

.guide-steps--small .guide-num {
  width: 22px;
  height: 22px;
  font-size: 0.75rem;
}

.guide-more {
  margin-bottom: 16px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--raised);
}

.guide-more summary {
  font-weight: 700;
  cursor: pointer;
}

.guide-more[open] summary {
  margin-bottom: 10px;
}

.guide-warning {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  padding: 12px 14px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--warn) 14%, var(--surface));
  font-size: var(--step--1);
  line-height: 1.4;
  --alert-mark: var(--surface);
}

.guide-warning svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--warn);
}

.chip--primary {
  border-color: var(--brand);
  background: var(--brand);
  color: var(--brand-ink);
}

.inline-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin: 0 1px -3px;
  color: var(--brand);
}

.notice--offline {
  border-left-color: var(--muted);
  background: var(--raised);
}

.toast {
  display: flex;
  align-items: center;
  gap: 12px;
}

.toast-action {
  flex: none;
  min-height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 18px;
  background: var(--brand);
  color: var(--brand-ink);
  font-weight: 700;
}

/* Live data status: one quiet pill, tap for the explanation -------------- */

.live-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  min-height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--elevation);
  color: var(--muted);
  font-size: var(--step--1);
  font-weight: 700;
}

.live-status[hidden] {
  display: none;
}

.live-status svg {
  width: 15px;
  height: 15px;
}

.live-status[data-mode="offline"] {
  color: var(--warn);
}

.board-planned {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  color: var(--muted);
  font-size: var(--step--1);
  font-weight: 700;
}

.board-planned svg {
  width: 14px;
  height: 14px;
}

.toast {
  width: max-content;
  max-width: min(92vw, 440px);
  font-weight: 400;
  line-height: 1.4;
  white-space: pre-line;
}

/* Wide screens: side panel ------------------------------------------------- */

@media (min-width: 900px) {
  .top {
    right: auto;
    width: calc(var(--panel-width) + 32px);
    padding: calc(env(safe-area-inset-top, 0px) + 16px) 16px 0;
  }

  .results {
    top: calc(env(safe-area-inset-top, 0px) + 72px);
    left: 16px;
    right: 16px;
  }

  .panel {
    top: calc(var(--top-height) + 10px);
    left: 16px;
    right: auto;
    bottom: 16px;
    width: var(--panel-width);
    height: auto;
    border-radius: 22px;
    transform: none;
    transition: none;
  }

  .handle {
    display: none;
  }

  .panel-body {
    padding-top: 18px;
  }

  .toast {
    left: calc(var(--panel-width) / 2 + 32px);
  }

  .card,
  .d-button {
    border-radius: 12px;
  }

  .card {
    width: calc(100% + 20px);
    margin: 0 -10px;
    padding-inline: 10px;
  }

  .option {
    width: calc(100% + 20px);
    margin: 0 -10px;
    padding-inline: 10px;
    border-radius: 12px;
  }

  .card:hover,
  .d-button:hover,
  .option:hover,
  .result:hover {
    background: color-mix(in srgb, var(--brand) 6%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .planning {
    animation: none;
  }

  .panel {
    transition: none;
  }

  .live-icon path {
    animation: none;
  }
}

/* Intro ----------------------------------------------------------------------
   The ring turns into place as it draws (sky, then green), the stop settles in, the name is wiped
   on as its letters close up, and the mark recedes softly to reveal the app. About one second. */

.intro {
  position: fixed;
  z-index: 10;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(60% 45% at 50% 47%, color-mix(in srgb, var(--sky) 9%, transparent), transparent 70%),
    var(--paper);
  transition: opacity 0.42s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.42s;
}

.intro.is-done {
  opacity: 0;
  visibility: hidden;
}

.intro-logo {
  display: flex;
  align-items: center;
  gap: 16px;
  transition: transform 0.42s cubic-bezier(0.4, 0, 0.2, 1), filter 0.42s cubic-bezier(0.4, 0, 0.2, 1);
}

.intro.is-done .intro-logo {
  transform: scale(0.94);
  filter: blur(6px);
}

.intro-mark {
  width: 58px;
  height: 58px;
  overflow: visible;
  transform: rotate(-110deg);
  animation: intro-turn 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.intro-arc {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: intro-draw 0.56s cubic-bezier(0.33, 0, 0.15, 1) forwards;
}

.intro-arc--green {
  animation-delay: 0.1s;
}

.intro-dot {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.4);
  animation: intro-settle 0.32s cubic-bezier(0.16, 1, 0.3, 1) 0.42s forwards;
}

/* the logo's own typeface, so nothing swaps mid-animation while the app's font loads */
.intro-word {
  color: var(--ink);
  font: 700 1.9rem / 1 "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: 0.04em;
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  animation: intro-wipe 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.36s forwards;
}

@keyframes intro-turn {
  to {
    transform: none;
  }
}

@keyframes intro-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes intro-settle {
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes intro-wipe {
  to {
    opacity: 1;
    clip-path: inset(0 -4% 0 0);
    letter-spacing: -0.035em;
  }
}

/* "All times" under the departure tiles ----------------------------------- */

.board-more {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-top: 8px;
  padding: 6px 12px 6px 14px;
  border: 0;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--lift);
  color: var(--brand);
  font-size: var(--step--1);
  font-weight: 700;
}

.board-more svg {
  width: 14px;
  height: 14px;
}

/* A stop's timetable: an hour to a row, the minutes after it, like the sign at the stop */
.times {
  margin-top: 10px;
}

.times-hour {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: baseline;
  gap: 8px;
  padding: 9px 0;
  border-bottom: 1px solid var(--rule);
}

.times-hour:last-child {
  border-bottom: 0;
}

.times-hour > b {
  color: var(--muted);
  font-size: var(--step--1);
  white-space: nowrap;
}

.times-mins {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
}

.tm {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-width: 2.4em;
  padding: 3px 7px;
  border-radius: 8px;
  font-size: var(--step-0);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.tm.is-past {
  color: var(--muted);
  font-weight: 400;
  opacity: 0.55;
}

.tm.is-live {
  color: var(--live);
}

.tm .live-icon {
  width: 11px;
  height: 11px;
}

.tm.is-next {
  background: var(--cs, color-mix(in srgb, var(--c) 86%, #000));
  color: var(--t, #fff);
}

/* About ------------------------------------------------------------------- */

.about-hero {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 18px 0 6px;
  text-align: center;
}

.about-hero .brand-mark {
  width: 56px;
  height: 56px;
}

.about-hero .brand {
  flex-direction: column;
}

.about-hero .wordmark {
  font-size: var(--step-3);
}

.about-hero p {
  color: var(--muted);
}

.about-values {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.about-values li {
  display: grid;
  gap: 2px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--raised);
}

.about-values span {
  color: var(--muted);
  font-size: var(--step--1);
}

.about-maker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}

.about-maker > span:last-child {
  display: grid;
}

.about-maker small {
  color: var(--muted);
  font-size: var(--step--1);
}

.about-avatar {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--brand-ink);
  font-weight: 700;
}

.about-support {
  margin-top: 18px;
  padding: 16px;
  border-radius: 16px;
  background: color-mix(in srgb, #ff5e5b 9%, var(--raised));
}

.about-support h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.about-support h3 svg,
.kofi-button svg {
  width: 20px;
  height: 20px;
  color: #ff5e5b;
}

.about-support p {
  margin-top: 6px;
  color: var(--muted);
  font-size: var(--step--1);
}

.kofi-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 48px;
  margin-top: 12px;
  border: 0;
  border-radius: 24px;
  background: var(--brand);
  color: var(--brand-ink);
  font-weight: 700;
}

.kofi-button[hidden] {
  display: none;
}

.kofi-button svg {
  color: #ff7a78;
}

.kofi-frame {
  margin-top: 12px;
  overflow: hidden;
  border-radius: 14px;
  background: #f9f9f9;
}

.kofi-frame iframe {
  display: block;
  width: 100%;
  height: 650px;
  border: 0;
}

.kofi-link {
  display: block;
  margin-top: 10px;
  color: var(--muted);
  font-size: var(--step--1);
  text-align: center;
}

.about-install {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 18px;
  padding: 14px 16px;
  border: 0;
  border-radius: 14px;
  background: var(--raised);
  color: var(--ink);
  font-weight: 700;
}

.about-install svg {
  width: 16px;
  height: 16px;
}

/* Settings: language and appearance, each a segmented choice on a raised card */
/* last in the menu, set apart from the credits above */
.settings {
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}

.setting {
  display: grid;
  gap: 8px;
  margin-top: 8px;
  padding: 12px 14px 14px;
  border-radius: 14px;
  background: var(--raised);
}

.setting-label {
  font-weight: 700;
}

.setting .segmented {
  background: color-mix(in srgb, var(--ink) 7%, transparent);
}

.setting .segmented [aria-pressed="true"] {
  background: var(--brand);
  color: var(--brand-ink);
}

/* Computers ------------------------------------------------------------------ */

/* the other direction of a card, for a mouse (fingers swipe); hidden on touch screens */
.rcard-flip {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  button:not(:disabled),
  [role="button"] {
    cursor: pointer;
  }

  .rcard-flip {
    position: absolute;
    top: 12px;
    right: 12px;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgb(255 255 255 / 0.16);
    color: var(--t);
  }

  .rcard-flip:hover {
    background: rgb(255 255 255 / 0.3);
  }

  .rcard-flip svg {
    width: 18px;
    height: 18px;
    transform: rotate(90deg);
  }

  /* the flip button takes the dots' place */
  .rcard:has(.rcard-flip) .rcard-dots {
    margin-right: 34px;
  }

  .rcard-slide:hover {
    background: rgb(255 255 255 / 0.07);
  }

  .rcard-head:hover .rcard-id b {
    text-decoration: underline;
    text-decoration-thickness: 3px;
    text-underline-offset: 5px;
  }

  .tiles,
  .rcard-slides {
    cursor: grab;
  }

  .tiles.is-grabbing,
  .rcard-slides.is-grabbing {
    cursor: grabbing;
    user-select: none;
  }

  .tiles.is-grabbing *,
  .rcard-slides.is-grabbing * {
    pointer-events: none;
  }

  .board-more:hover,
  .about-install:hover {
    background: var(--brand-soft);
  }

  .kofi-button:hover {
    filter: brightness(1.15);
  }

  .weather:hover,
  .icon-button:hover {
    background: var(--raised);
  }
}

/* + and − for the map: only on wide screens, where people use a mouse */
.maplibregl-ctrl-bottom-right {
  display: none;
}

@media (min-width: 900px) {
  /* the weather, locate and language float over the map's top right; the search gets the column */
  .top-tools {
    position: fixed;
    z-index: 3;
    top: calc(env(safe-area-inset-top, 0px) + 16px);
    right: 16px;
    display: flex;
    gap: 8px;
  }

  /* a line's colour band starts at the very top of the panel */
  .panel-body > .line-hero:first-child {
    margin-top: -18px;
    padding-top: 14px;
  }

  .maplibregl-ctrl-bottom-right {
    display: block;
    right: 6px;
    bottom: 6px;
  }

  .maplibregl-ctrl-group:not(:empty) {
    overflow: hidden;
    border-radius: 14px;
    background: var(--surface);
    box-shadow: var(--elevation);
  }

  .maplibregl-ctrl-group button {
    width: 40px;
    height: 40px;
  }

  .maplibregl-ctrl-group button + button {
    border-top: 1px solid var(--rule);
  }

  .maplibregl-ctrl-group button .maplibregl-ctrl-icon {
    filter: var(--map-ctrl-filter, none);
  }
}

/* big screens: a roomier panel */
@media (min-width: 1280px) {
  :root {
    --panel-width: 440px;
  }
}

/* The label by a stop or bus under the mouse */
.map-tip .maplibregl-popup-content {
  display: grid;
  gap: 5px;
  padding: 8px 11px;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--elevation);
  color: var(--ink);
  font: inherit;
  font-size: var(--step--1);
  pointer-events: none;
}

.map-tip .maplibregl-popup-tip {
  display: none;
}

.map-tip .plates {
  justify-content: flex-start;
}

.map-tip-line {
  display: flex;
  align-items: center;
  gap: 8px;
}

.map-tip {
  pointer-events: none;
}

/* a slim scrollbar in the panel on computers */
@media (min-width: 900px) {
  .panel-body {
    scrollbar-color: var(--rule) transparent;
    scrollbar-width: thin;
  }
}

/* The Discord community card in About, in Discord's own blurple */
.about-community {
  position: relative;
  overflow: hidden;
  margin-top: 18px;
  padding: 18px 16px 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, #5865f2, #4752c4);
  color: #fff;
}

.about-community-logo svg {
  position: absolute;
  top: -14px;
  right: -12px;
  width: 112px;
  height: 112px;
  opacity: 0.16;
  transform: rotate(-12deg);
}

.about-community h3 {
  position: relative;
  margin: 0;
  color: #fff;
}

.about-community p {
  position: relative;
  margin-top: 6px;
  color: rgb(255 255 255 / 0.88);
  font-size: var(--step--1);
}

.discord-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  margin-top: 14px;
  border-radius: 24px;
  background: #fff;
  color: #4752c4;
  font-weight: 700;
  text-decoration: none;
}

.discord-button svg {
  width: 22px;
  height: 22px;
}

@media (hover: hover) and (pointer: fine) {
  .discord-button:hover {
    background: #eef0ff;
  }
}