* {
  box-sizing: border-box;
}

:root {
  font-family: Inter, sans-serif;
  font-feature-settings: 'liga' 1, 'calt' 1, 'tnum' 1, 'ss02' 1;
}
@supports (font-variation-settings: normal) {
  :root { font-family: InterVariable, sans-serif; }
}

:root {
  --l1: 5.5rem;
  --hl1: calc(var(--l1) / 2);
  --l2: 0.8rem;
  --hl2: calc(var(--l2) / 2);
  --margin: var(--refl2);
  --grid-size: calc((var(--l1) + 2 * var(--l2)) / 2);
  /* -- Colors -- */
  --colorem: #3397fc;
  --green: #d9f1dd;
  --green-em: #1db139;
  --blue: #d8f4f9;
  --blue-em: #2bc9e2;
  --red: #ffd1e3;
  --red-em: #fb005d;
  --grey: #ccc;
  --icon-size: 1.4em;
  --radius: 0.7em;
  --radius-in: 0.5em;
  --color-ambient: #e4e6e6;
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  background-color: var(--color-ambient);
}

#main {
  display: grid;
  grid-template-columns: repeat(20, var(--grid-size));
  grid-template-rows: repeat(10, var(--grid-size));
  justify-content: center;
  font-size: 1.1rem;
}

#ifpen {
  grid-column: 9 / span 6;
  grid-row: 1 / span 4;
}

#calendar {
  grid-column: 1 / span 8;
  grid-row: 1 / span 9;
  margin-bottom: 0;
}

#search {
  grid-column: 9 / span 16;
  grid-row: 5 / span 1;
}

#lip {
  grid-column: 9 / span 6;
  grid-row: 6 / span 3;
}

#dashboard {
  grid-column: 9 / span 6;
  grid-row: 10 / span 2;
}

#woup {
  grid-column: 15 / span 6;
  grid-row: 8 / span 4;
}

#rss {
  grid-column: 15 / span 6;
  grid-row: 1 / span 2;
}

#ledger {
  grid-column: 15 / span 6;
  grid-row: 3 / span 2;
}

#backup {
  grid-column: 15 / span 6;
  grid-row: 6 / span 2;
}

.buttoncard {
  border-top: 4px solid var(--grey);
  display: flex;
  flex-direction: column;
  padding-bottom: 4px;
  width: var(--l1);
  height: var(--l1);
  margin: var(--l2);
  border-radius: 0 0.2rem 0.2rem 0;
  background-color: #fff;

  svg {
    width: 2.5em;
    height: 2.5em;
    margin: auto;
    color: var(--grey);
  }
  span {
    font-size: 0.8em;
    text-align: center;
  }
}

.buttoncard.buttoncard-on {
  border-color: var(--colorem);
  svg {
    color: var(--colorem);
  }
}

.card, h2, section:has(.solo-card) {
  border-left: 4px solid var(--grey);
}

section:has(.status_success) {
  border-color: #1aaa55;
}

section:has(.status_warning), section:has(.status_emphasize) {
  border-color: #fc9403;
}

section:has(.status_error) {
  border-color: #db3b21;
}

/*
  width: 1.5em;
  vertical-align: baseline;
  transform: translateY(calc((1.5em - 0.689em)/2));
 */

h2 {
  text-transform: uppercase;
  padding-left: 1.5em;
  margin: 0;
  font-size: 0.8em;
  font-weight: normal;
  height: calc(var(--hl1));
  align-content: center;
}
section {
  margin: var(--l2);
  border-radius: 0 0.2rem 0.2rem 0;
  background-color: #fff;
}

a {
  text-decoration: none;
}

#shortcuts {
  padding: 0;
  margin: 0;
}
.card {
  display: block;
  font-size: 1em;
  height: calc(var(--hl1) + var(--l2));
  align-content: center;
}

.card:nth-last-child(1):not(:first-child), .card:nth-last-child(2) {
  height: calc((var(--l1) + var(--l2))/ 2);
}
.card:hover {
  background-color: var(--color-ambient);
  border-color: var(--colorem);
}
.card a {
  color: black;
  text-decoration: none;
  display: flex;
  align-items: center;
  padding: 0em 2em;
}
.card img {
  width: 1.5em;
  margin-right: 1.5em;
}
.card::marker {
  content: "";
}

.solo-card {
  padding: 0 1em;
}

.solo-card, .solo-card > * {
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: black;
}
.solo-card > * {
  display: flex;
  align-items: center;
}
.solo-card img {
  height: 2.5em;
  margin-right: 1em;
}

#search {
  border-left: 4px solid var(--grey);
  display: flex;
  margin: 0 var(--l2);
  padding: var(--l2) 0;
  position: relative;
}
#search img {
  width: 2em;
  padding: 0 0.3em;
}
#search form {
  width: 100%;
}

#search input {
  width: 100%;
  height: 100%;
  font-size: 1em;
  border: 0;
  padding: 0;
}

#search input:focus-visible {
  outline: 0;
}

#search:has(input:focus-visible) {
  border-color: var(--colorem);
}

#search .ca-card img {
  width: 1.5em;
  margin: 0 0.25em;
}

#suggestions {
  display: block;
  position: absolute;
  width: calc(100% + 0px);
  padding: 0;
  margin: 0;
  top: var(--grid-size);
  left: 0;
  background: white;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

#suggestions li {
  list-style-type: none;
  height: var(--hl1);
  align-content: center;
  display: flex;
}

#suggestions span {
  align-content: center;
}

#suggestions .ac-abbr {
  margin-left: 1em;
  color: #999;
}

#suggestions .ca-card:not(:has(> img)) .ac-name {
  margin-left: 2em;
}

.homeButtons {
  display: flex;
}


.transit {
  --primaryColor: var(--lineColor);
  --onPrimaryColor: var(--lineTextColor);
  border-left: 4px solid var(--primaryColor);
  max-width: 25em;
  border-radius: 1rem;
}

.transit_ornment {
  position: relative;
  display: flex;
}

.transit_dot {
  width: var(--radius);
  height: var(--radius);
  background-color: var(--primaryColor);
  border-radius: 100%;
  position: absolute;
  top: var(--radius);
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  z-index: 1;

  div {
    width: var(--radius-in);
    height: var(--radius-in);
    background-color: white;
    border-radius: 100%;
    position: relative;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    z-index: 2;
  }
}

.transit_details svg {
  height: 1.3em;
  color: var(--primaryColor);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  z-index: 1;
  background-color: white;
}

.transit_bar {
  width: 0.3rem;
  background-color: var(--primaryColor);
}

.transit h2 {
  display: flex;
  align-items: center;
  border: 0;
  border-radius: 1rem 1rem 0 0;
  height: 2.5rem;
}
.transit_icon {
  height: 1.5rem;
}

.transit_line {
  background-color: var(--primaryColor);
  border-radius: 5px;
  border: 1px solid var(--primaryColor);
  font-size: 1.1rem;
  width: 1.5rem;
  height: 1.5rem;
  font-family: monospace, monospace;
  font-weight: bold;
  display: flex;
  align-items: center;
  span {
    flex-grow: 1;
    text-align: center;
  }
}

.transit_station {
  margin-left: 1em;
}

.transit_reload {
  border: 0;
  border-radius: 50%;
  background-color: var(--color-ambient);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  margin-left: auto;
  margin-right: 0.5em;
  img {
    height: 1.1em;
  }
}

.transit_button {
  display: flex;
  justify-content: center;
  height: 1em;
  img {
    height: 1em;
  }
}

.transit_next {
  margin: 0;
  font-size: 0.9rem;
  padding: 0;
  height: 11em;
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  --bgColor: #f4f4f4;
  --shadowColor: #f4f4f4;

  > ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: var(--bgColor);
  }

  .transit_past {
    display: none;
  }

  input:checked + .transit_past {
    display: block;
  }

  input {
    display: none;
  }

  label {
    padding: 0.1em 0 0.1em 0.5rem;
    display: flex;
    align-items: center;
    font-size: 1rem;
    border-radius: 0.5em;
    box-shadow: 1px 2px 7px var(--shadowColor);
    background-color: var(--bgColor);
    position: relative;
    height: 100%;
  }

  li {
    height: 2.2em;
    scroll-snap-align: center;
    scroll-snap-stop: normal;
    margin: 0 0.2em;
  }
}

label:has(+ .transit_next input:checked) img {
  display: none;
}

.transit_note {
  background-color: var(--primaryColor);
  border-radius: 3px 3px 3px 0;
  border: 4px solid var(--primaryColor);
  font-family: monospace, monospace;
  font-weight: bold;
  margin: 0;
}

.transportmode-rail > .lineicon-rail {
    display: none;
}

.lineicon-rail_suburbanRailway, .lineicon-rail_local {
  background-color: var(--lineColor);
  border: 0;
  border-radius: 3px 3px 3px 3px;
  font-family: monospace, monospace;
  color: var(--lineTextColor);
  width: var(--icon-size);
  height: var(--icon-size);
  font-weight: bold;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.transit_stations_connections :nth-child(1 of .lineicon-rail_suburbanRailway),
.transit_stations_connections :nth-child(1 of .lineicon-rail_local),
.transit_stations_connections :nth-child(1 of .lineicon-metro),
.transit_stations_connections :nth-child(1 of .lineicon-tram) {
  margin-left: 2em;
}
.transit_stations_connections :nth-child(1 of .lineicon-rail_suburbanRailway)::before {
  content: url('/static/figures/transilien.svg');
  width: var(--icon-size);
  position: absolute;
  left: -1.5em;
  top: 0;
}

.transit_stations_connections :nth-child(1 of .lineicon-rail_local)::before {
  content: url('/static/figures/rer.svg');
  width: var(--icon-size);
  position: absolute;
  left: -1.5em;
  top: 0;
}

.transportmode-metro .transit_name, .lineicon-metro {
  border-radius: 100%;
  background-color: var(--lineColor);
  border: 4px solid var(--lineColor);
  color: var(--lineTextColor);
  font-family: monospace, monospace;
  width: var(--icon-size);
  height: var(--icon-size);
  font-weight: bold;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.transit_stations_connections :nth-child(1 of .lineicon-metro)::before {
  content: url('/static/figures/metro.svg');
  width: var(--icon-size);
  height: var(--icon-size);
  position: absolute;
  left: -1.9em;
}

.transportmode-metro {
  .transit_details {
    padding-left: 4.7rem;
  }
  .transit_stations_time {
    width: 4.7rem;
    padding-right: 1.7rem;
  }
}

.transportmode-tram > .transit_name, .lineicon-tram {
  display: inline-flex;
  justify-content: center;
  border: 2px solid var(--lineColor);
  border-left: 0;
  border-right: 0;
  font-family: monospace, monospace;
  text-align: center;
  font-weight: bold;
  max-width: 2em;
  width: var(--icon-size);
  position: relative;
  align-items: center;
}

.transit_stations_connections :nth-child(1 of .lineicon-tram)::before {
  content: url('/static/figures/tram.svg');
  width: var(--icon-size);
  position: absolute;
  left: -1.5em;
  top: -0.2em;
  zoom: 0.9;
}
.lineicon-tram > span {
  font-size: 0.8em;
}

.transit_destination {
  font-size: 0.7rem;
}

.transit_time {
  width: 4em;
  padding-right: 1em;
  text-align: end;
}

.transit-cancelled .transit_time, .transit-cancelled .transit_destination {
  text-decoration: line-through;
  color: #aaa;
}

.transit_delay {
  margin-left: 0.2rem;
  color: #aaa;
  width: 2rem;
}

.transit_plus {
  flex-grow: 2;
  text-align: end;
  color: #555;
  font-size: 0.9em;
  margin-right: 1rem;
  text-wrap: nowrap;
}

.transit_follow {
  display: flex;
  margin: 0;
  img { width: 1rem; }
}

.transit_info {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin: 0.5em 0.5rem 0.5em 10%;
}

.transit_info_more {
  padding-left: 1em;

  pre {
    margin: 0;
  }
}

.transit_details {
  margin-left: 1rem;
}

.transit_details {
  display: flex;
  padding-left: 4rem;

  .transit_bar {
    height:50%;
    margin-bottom: 50%;
  }
}

.transit_platform > span {
  border: 1px solid black;
  border-radius: 3px;
  text-align: center;
  padding: 2px;
  display: inline-block;
  min-width: 1.5rem;
}

.transit_timeAtStation {
  display: flex;
  align-items: center;
  img {
    height: 1rem;
  }
}

.transit_features {
  display: flex;
  align-items: center;
}

.transit_break {
  display: flex;
  padding-left: 4rem;

  hr {
    border: none;
    border-top: 1px solid #ddd;
    overflow: visible;
    text-align: center;
    width: 70%;
    margin: 0 auto 0.5em auto;
  }
}

.transit_stations {
  box-shadow: inset 0 14px 11px -15px #aaa;
  padding-left: 1rem;
}

.transit_stations ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 1rem;
}
.transit_next li:last-child .transit_stations {
  margin-bottom: 0.5rem;
}

/* Make transit dot looks like bar for first and last stop */
.transit_stations > ul > li:last-child, .transit_stations_previous > ul > li:first-child {
  .transit_dot {
    border-radius: 0;
    width: calc(2*var(--radius));
    height: calc(0.5*var(--radius));
  }
  .transit_dot > div {
    display: none;
  }
}
.transit_stations_previous > ul > li:first-child {
  .transit_bar {
    height: calc(100% - var(--radius));
    position: relative;
    top: var(--radius);
  }
}

.transit_stations li {
  display: flex;
  margin: 0;
}

.transit_stations_time {
  font-size: 0.9em;
  width: 4rem;
  margin: 0;
  padding-right: 1rem;
  text-align: end;
  flex-shrink: 0;
}

.transit_stations_info {
  margin-left: 1em;
  padding-left: 0.5em;
  padding-bottom: 0.5em;
  margin-right: 1em;
  flex-grow: 1;

  .transit_stations_connections {
    margin: 0;
    margin-left: 1em;
    font-size: 0.7em;
    display: flex;
  }
}

.transit_stations_info > div {
  padding-bottom: 0.3em;
}

.transit_stations > ul li:last-child .transit_bar {
  height: var(--radius);
}

.transit_stations_previous > ul > li:first-child {
  padding-top: 0.5em;
}

.transit_stations_previous {
  --primaryColor: #aaa;
  ul {
    margin-bottom: 0;
    width: 100%;
  }

  li:has(.transit_stations_previous_menu) .transit_bar {
    height: 100%;
  }

  ul li:last-child {
    font-weight: bold;
    .transit_bar::after {
      width: 0.3rem;
      background-color: var(--lineColor);
      content: "";
      position: absolute;
      height: 100%;
      top: 0;
    }
  }

}

.transit_stations_previous[open] {
  summary {
    display: none;
  }

  ul li:last-child {
    .transit_bar::after {
      height: calc(100% - var(--radius));
      top: var(--radius);
    }
  }
}

.transit_stations_previous_menu {
    position:relative;
    display:inline-block;
    flex-grow: 1;
    text-align: center;
    font-size: 0.8em;
    --padding-top: 0.5em;
    padding-top: var(--padding-top);
    font-weight: normal;

    img {
      width: 1.1em;
      display: inline-block;
      position: relative;
      top: 0.25em;
    }
}
.transit_stations_previous_menu::before, .transit_stations_previous_menu::after {
    content:' ';
    display:block;
    position:absolute;
    top: calc(50% + var(--padding-top) / 2);
    left: 2em;
    width: 20%;
    border-bottom:1px solid #ddd;
}

.transit_stations_previous_menu::after {
    left:auto;
    right: 2em;
}

.transit_lineicon > a {
  color: inherit;
  width: 100%;
  justify-content: center;
  display: flex;
}

.transit_lines-list {
  display: flex;
  flex-wrap: wrap;
  font-size: 3em;
  max-width: 20em;
  gap: 0.2em;
}

.toggle-checkbox {
  display: none;
}

#toggle-filter:checked ~ #menu-filter {
    display: block;
}
#menu-filter {
  display: none
}

.transit_menu {
  padding: 0 1em;
  display: flex;
  font-size: 0.8rem;
  height: 1.6rem;
  gap: 0.2em;
  width: 100%;

  .transit_lineicon {
    font-size: var(--icon-size);
  }
}

.pill-button {
  padding: 0.2em 1em;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
  border-radius: 1000em;
  /*background-color: var(--color-ambient);*/
  background-color: white;
  display: flex;
  align-items: center;
}

.transit_journey {
  padding: 0;
  margin: 0;

  summary::marker {
    content: "";
  }

  input {
    display: none;
  }
  .transit_stations {
    display: none;
  }
  .transit_stations:has(input:checked) {
    display: block;
  }

  /* .transit_station_previous { */
  /*   display: none; */
  /* } */
}