:root {
  --color-bg-0: oklch(0.1 0.05 265.55);
  --color-bg-1: oklch(from var(--color-bg-0) 0.2 c h);
  --color-bg-btn-highlight: oklch(from var(--color-bg-1) 0.3 c h);
  --color-bg-row-highlight: oklch(from var(--color-bg-1) 0.4 c h);
  --color-text: #eee;

  --color-bg-alert-orange: oklch(0.7 0.15 64);
  --color-text-alert-orange: black;

  --bullet-size: 1.5em;

  --nav-padding: 0.5em;
  --nav-height: calc(var(--nav-padding) * 2 + 1lh);
}

a {
  color: lightblue;
}

html,
body {
  background-color: var(--color-bg-0);
  color: var(--color-text);
  font-family: system-ui;
  color-scheme: dark;
  margin-bottom: var(--nav-height);
}

#navbar {
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1000;

  display: flex;
  justify-content: space-around;
  align-items: center;

  height: var(--nav-height);
  padding: var(--nav-padding);
  margin: calc(var(--nav-padding) * 2 / 3);
  border-radius: var(--nav-height);
  box-sizing: border-box;

  background-color: oklch(from var(--color-bg-1) l c h / var(--bg-alpha, 1));
  box-shadow: 0.1em 0.1em 1em black;
  border: 1px solid oklch(from var(--color-bg-1) calc(l + 0.1) c h);

  @supports (backdrop-filter: blur(0)) {
    --bg-alpha: 0.85;
    backdrop-filter: blur(0.5em);
  }
}
/* Firefox doesn't support this :[[ */
@media (prefers-reduced-transparency: reduce) {
  #navbar {
    --bg-alpha: 1;
  }
}

.arrival-list,
.stops-list,
.stops-nearby-list,
.favorite-stops-list {
  list-style: none;
  padding: 0;

  li a {
    display: flex;
    justify-content: space-between;
    align-items: baseline;

    /*
     * The animation always runs. When the flash is not actually happening, the
     * alternate color is set to the same as the normal color.
     * The animation sets the variables --li-color-{bg,text}.
     */
    --li-normal-color-bg: var(--color-bg-1);
    --li-normal-color-text: var(--color-text);
    animation-name: alternate-color-flash;
    animation-duration: 0.5s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-fill-mode: both;

    color: var(--li-color-text);
    text-decoration: none;

    background-color: var(--li-color-bg);
    &.highlight {
      --li-normal-color-bg: var(--color-bg-row-highlight);
    }

    box-sizing: border-box;
    /* height: calc(var(--bullet-size) + var(--padding)); */

    --padding: 0.5em;
    --margin: calc(var(--padding) * 2 / 3);

    padding: var(--padding);
    &:has(> .route-bullet:first-child) {
      /* The route bullet will take care of adding its own padding */
      padding-left: 0;
    }
    .route-bullet {
      margin-top: calc(var(--padding) / -2);
      margin-left: calc(var(--padding) / 2);
      flex-shrink: 0;

      /* Don't let the bg color from arrival times go above */
      position: relative;
      z-index: 100;
    }

    margin: var(--margin) 0;
    border-radius: calc(var(--bullet-size) / sqrt(2));

    * {
      line-height: 1;
      min-width: 0;
    }
  }
}

.arrival-list li a > div {
  display: flex;
  justify-content: space-between;
  flex: 1;
  align-items: baseline;
  gap: var(--margin);
  padding-left: var(--margin);

  position: relative;

  .headsign {
    flex: 1 1 0%;

    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;

    color: oklch(from var(--li-color-text) calc((l + 0.5) / 2) c h);
  }

  .arrival-time {
    position: absolute;
    top: 0;
    right: 0;

    --fade-distance: 2em;

    padding-left: var(--fade-distance);
    background: linear-gradient(
      to right,
      transparent,
      var(--li-color-bg, var(--color-bg-1)) var(--fade-distance),
      var(--li-color-bg, var(--color-bg-1))
    );
  }
}

.arrival-list.expanded .headsign {
  color: var(--color-text);
}

.arrival-list-wrapper {
  display: flex;
  & > * {
    flex: 1 1;
    min-width: 0;
  }
  gap: 0.5em;
}

.arrival-list li:has(.arriving-now) * {
  --li-alternate-color-bg: var(--color-bg-alert-orange);
  --li-alternate-color-text: var(--color-text-alert-orange);
}
@keyframes alternate-color-flash {
  from {
    --li-color-bg: var(--li-normal-color-bg);
    --li-color-text: var(--li-normal-color-text);
  }
  to {
    --li-color-bg: var(--li-alternate-color-bg, var(--li-normal-color-bg));
    --li-color-text: var(
      --li-alternate-color-text,
      var(--li-normal-color-text)
    );
  }
}
.arriving-very-soon .arrival-time .relative-time {
  font-weight: bold;
  text-decoration: underline;
}
.arriving-soon .arrival-time .relative-time {
  font-weight: bold;
}

.route-bullet {
  color: var(--color-bullet-text);
  position: relative;
  &::before {
    position: absolute;
    background-color: var(--color-bullet-bg);
    content: "";
    z-index: -1;
    border-radius: 100%;
    /* Have a variable b/c the diamond bullet has a different value for this */
    --size: var(--bullet-size);

    width: var(--size);
    height: var(--size);
    top: calc((1lh - var(--size)) / 2);
    left: calc((var(--bullet-size) - var(--size)) / 2);
  }
  &.bullet-diamond::before {
    border-radius: 0;
    transform: rotate(45deg);
    --size: calc(var(--bullet-size) / sqrt(2));
  }
  z-index: 0;

  display: inline-block;
  box-sizing: border-box;
  /* TODO: removing this breaks firefox desktop (and maybe safari desktop) but
  *        fixes safari mobile?? unclear how safari desktop behaves */
  padding-top: 0.1em;
  width: var(--bullet-size);
  height: 1lh;

  text-align: center;
  vertical-align: baseline;

  font-family: "Helvetica", sans-serif;
  font-weight: normal;
  text-decoration: none;
  line-height: var(--bullet-size);
}

.bullet-group {
  display: inline flex;
  align-items: center;
  gap: 0.1em;

  background-color: var(--color-bg-1);
  text-decoration: none;

  box-sizing: border-box;
  --height: calc(2 * var(--padding) + var(--bullet-size));
  height: var(--height);

  --padding: 0.25em;
  padding: 0 var(--padding);
  margin: 0 calc(var(--padding) / 2);
  border-radius: var(--height);

  &:is(a) {
    &:hover,
    &:focus-visible {
      background-color: var(--color-bg-btn-highlight);
    }
  }
}

.arrival-time {
  display: flex;
  flex-direction: row;
  gap: 0.5em;
  height: 100%;
  align-items: baseline;

  white-space: pre;
  font-family: monospace;
  /* TODO: proper way to make it same size as Helvetica */
  font-size: 1.1em;

  * {
    margin: 0;
    padding: 0;
  }
}

.alerts {
  display: flex;
  flex-direction: column;

  padding: 0;
  gap: 1em;

  .alert {
    --hue-yellow: 107.22;
    background-color: oklch(from var(--color-bg-1) l c var(--hue-yellow));
    border: 1px solid oklch(0.66 0.16 var(--hue-yellow));

    padding: 0.5em;
    border-radius: 0.5em;

    summary {
      font-weight: bold;
    }

    p {
      margin: 0;
      min-height: 0 !important;
    }

    .alert-last-updated {
      font-style: italic;
      color: oklch(from var(--color-text) 0.7 c h);
    }

    .alert-id {
      color: oklch(from var(--color-text) 0.7 c h);
      font-size: small;
    }

    & > *:not(summary),
    p:has(strong:only-child) {
      margin-top: 0.75em;
      margin-bottom: 0.25em;
    }
  }
}