:root {
  /* colors */
  /* --color-1: #3381F0; */
  --color-1: #007BFF;
  --color-2: #f0ffff;
  --color-2_rgb: 240, 255, 255;
  /* #f0ffff */
  --color-3: #0013F7;
  --color-4: #3193fc;
  --bg-color: white;

  /* spacings */
  --spacing-0: 48px;
  --spacing-1: 24px;
  --spacing-2: 12px;
  --spacing-3: 6px;
  --spacing-4: 4px;

  /* sizes */
  --column: 238px;

  /* font sizes */
  --font-title: 18px;
  --line-height-title: 25.5px;
  --font-txt: 14px;
  --line-height-txt: 20px
}

.body {
  margin: 0;
  padding: 0;
  color: var(--color-1);
  font-family: Atlas Grotesk, Arial, sans-serif;
  font-weight: 400;
  font-size: var(--font-txt);
  line-height: var(--line-height-txt);
  background-color: var(--color-2);
}

/* texts */

.txt-title {
  font-size: var(--font-title);
  font-weight: 600;
  line-height: var(--line-height-title);
  text-transform: uppercase;
}

.txt-subtitle {
  font-size: var(--font-txt);
  font-weight: 400;
  /* text-transform: uppercase; */
}

/* .txt-title:hover {
  color: black;
} */

.txt-body {
  width: 100%;
  max-width: 36ch;
  overflow: hidden;
}

.txt-menu {
  color: var(--color-1);
  font-weight: 500;
  text-transform: uppercase;
}

.txt-label {
  font-size: inherit;
  font-weight: 500;
  text-transform: uppercase;
  /* color: #3267a9; */
}

.txt-value {
  font-size: var(--font-txt);
  font-weight: 400;
  display: block;
  margin-bottom: var(--spacing-3);
  /* color: #3267a9; */
}

.txt-legend {
  max-width: 36ch;
  margin-bottom: 0;
  font-weight: 400;
  /* overflow: scroll; */
}

.txt-link {
  /* text-decoration: underline; */
  display: block;
  color: inherit;
}

.txt-body a {
  color: inherit;
  text-decoration: underline;
}

.txt-link:hover {
  font-weight: 500;
  /* color: black; */
}

.txt-arrow {
  font-family: Fakt Mono, sans-serif;
  font-size: 22px;
  font-weight: 200;
  color: var(--color-1);
  line-height: 1;
  text-decoration: none;
}

.txt-arrow:hover {
  color: var(--color-1);
  font-weight: 500;
  text-decoration: none;
}



/* sections */

.content-container {  
  z-index: 99;
  position: fixed;
  top: var(--spacing-1);
  left: var(--spacing-1);
  height: calc(100vh - (var(--spacing-1) * 2));
  width: auto;
  display: grid;
  column-gap: var(--spacing-1);
  row-gap: var(--spacing-1);
  grid-template-columns: var(--column) var(--column);
  grid-template-rows: max-content 1fr;
  place-content: start;
  align-items: start;
  background-color: none;
  pointer-events: none;
}

.map-container {
  z-index: 1;
  position: fixed;
  height: 100%;
  width: 100%;
  display: block;
  background-color: var(--color-2);
}


/* boxes */

/* positions */
#box-1 {
  grid-column: 1;
  grid-row: 1 / span 1;
  max-height: calc(100vh - (var(--spacing-1) * 2));
  overflow-y: auto;
}

#box-2 {
  z-index: 100 !important;
  position: relative;
  grid-column: 1;
  grid-row: 2;
}

#box-2.menu-open {
  z-index: 400 !important;
}

#box-3 {
  z-index: 200;
  position: relative;
  grid-column: 2;
  grid-row: 1 / span 2;
}

.box-container {
  z-index: 10;
  position: relative;
  height: auto;
  max-height: max-content;
  display: flex;
  flex-flow: column;
  gap: 0;
  isolation: isolate;
  background-color: var(--color-2);
  outline: 1px solid var(--color-1);
  box-shadow: var(--spacing-3) var(--spacing-3) 0 var(--color-1);
  pointer-events: auto;
  transition: transform 160ms ease;
}

.wrapper {
  position: relative;
  display: block;
  margin: 0;
  padding: var(--spacing-3);
  height: auto;
  max-height: max-content;
  font-weight: 400;
  text-align: left;
}

.line {
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 1px;
  background-color: var(--color-1);
}


/* box 1 */

.link-wrapper {
  display: flex;
  max-width: 100%;
  color: inherit;
  margin-bottom: var(--spacing-3);
}

.wrapper-learn_more {
  width: 100%;
  display: grid;
  grid-column: 2;
  grid-row: 1;
  grid-template-columns: auto max-content;
  justify-content: space-between;
  margin: 4px 0 0 2px;
  background-color: none;
}

.dropdown-icon {
  display: flex;
  width: 100%;
  align-items: start;
  background: none;
  border-color: transparent;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  user-select: none;
  padding: 0;
}

.dropdown-icon.collapsed {
  margin-top: 0;
  margin-bottom: 4px;
  /* align-self: center; */
}

/* info block */
.wrapper-about-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* padding-right: var(--spacing-2); */
  padding: var(--spacing-4) var(--spacing-4) var(--spacing-4) 0;
}
.wrapper-about-row .dropdown-icon {
  width: auto;
  flex-shrink: 0;
}

.about-block {
  display: flex;
  flex-direction: column;
}

.txt-body about {
  padding: 0 0 0 var(--spacing-2);
}

.about-subtitle-line {
  height: 1px;
  background-color: var(--color-1);
  margin: 0 var(--spacing-2);
}

.about-subtitle-row {
  display: flex;
  flex-direction: column;
  padding: 0 0 0 var(--spacing-3);
}

.about-subtitle-wrapper {
  cursor: pointer;
  user-select: none;
}
.about-subtitle-wrapper .txt-menu {
  font-weight: 400;
}

.about-subtitle-content {
  display: none;
}

.about-subtitle-row.is-open .about-subtitle-content {
  display: block;
}

#box-1 .box1-expanded {
  overflow: hidden;
  transition: max-height 220ms ease, opacity 160ms ease;
}
#box-1 .txt-body {
  width: 96%;
}

#about-label {
  cursor: pointer;
  flex: 1;
}


/* collapse behavior */
#box-1 .learnmore-collapse {
  overflow: hidden;
  max-height: 420px;
  opacity: 1;
  transition: max-height 220ms ease, opacity 160ms ease;
}

/* collapsed state */
#box-1.is-collapsed .learnmore-collapse {
  /* min-height: var(--spacing-1); */
  /* max-height: var(--spacing-1); */
  opacity: 0;
  transition: max-height 220ms ease, opacity 160ms ease;
}

/* remove the padding so the space really collapses */
#box-1.is-collapsed .learnmore-collapse.wrapper {
  padding-top: 0;
  padding-bottom: 0;
  transition: max-height 220ms ease, opacity 160ms ease;
}

#box-1 .wrapper:last-child {
  /* padding-top: var(--spacing-2); */
  padding-top: 4px;
}


/* box 2 */

.dropdown-selected {
  width: 100%;
  border: none;
  padding: 8px var(--spacing-3) var(--spacing-3) var(--spacing-3);
  display: flex;
  flex-flow: row;
  justify-content: space-between;
  text-align: bottom;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  user-select: none;
  background: none;
}

.picto {
  width: 18px;
  height: 18px;
}

.dropdown-selected .picto {
  transition: transform 160ms ease;
}

.dropdown-selected.open .picto {
  transform: rotate(180deg);
}

.dropdown-menu {
  width: 100%;
  display: flex;
  flex-flow: column;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 360ms ease, opacity 160ms ease;
}

/* visible state */
.dropdown-menu.open {
  max-height: 300px;
  opacity: 1;
  margin-top: -1px;
}

#box-2.menu-open .search-cell {
  border-bottom: 1px solid var(--color-1);
}


.dropdown-link {
  padding: 4px var(--spacing-3);
  display: block;
  color: var(--color-1);
  flex: none;
  text-align: left;
  text-decoration: none;
  text-transform: uppercase;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
}

.dropdown-link:hover {
  /* outline: 1px solid var(--color-1); */
  border-top: 1px solid var(--color-1);
  border-bottom: 1px solid var(--color-1);
  font-weight: 500;
}

.dropdown-link:last-child:hover {
  border-bottom: 1px solid transparent;
}

/* city + search row */
.city-search-row {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
}

.city-search-row #dropdown-selected-city {
  width: calc(var(--column) - 36px - 1px);
  flex-shrink: 0;
  z-index: 2;
}

.city-search-divider {
  width: 1px;
  background-color: var(--color-1);
  flex-shrink: 0;
}

/* search cell — fixed width in closed state */
.search-cell {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 36px;
  min-width: 36px;
  transition: width 200ms ease;
  background-color: var(--color-2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 1;
}
/* #search-cell {
  width: 30px;
  min-width: 32px;
} */

/* hover expands leftward */
.search-cell:hover,
.search-cell.is-open {
  width: 100%;
  z-index: 3;
}

/* magnifier button */
.search-open-btn {
  position: absolute;
  left: calc(100% - 36px);
  top: 0;
  bottom: 0;
  background: none;
  border: none;
  padding: 0 var(--spacing-3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: left 200ms ease;
}

/* input wrap — hidden until open */
.search-input-wrap {
  display: none;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-3);
  width: 100%;
}

.search-cell:hover .search-open-btn,
.search-cell.is-open .search-open-btn {
  left: 0;
  /* slides to left edge */
}


.search-cell.is-open .search-input-wrap {
  display: flex;
}

.search-input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: inherit;
  color: var(--color-1);
  outline: none;
  text-transform: uppercase;
}

.search-input::placeholder {
  color: var(--color-1);
  opacity: 0.4;
  font-weight: 400;
}

/* close button — hidden until typing */
.search-close-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--color-1);
  font-size: 18px;
  line-height: 1;
  display: none;
  flex-shrink: 0;
}

.search-cell.has-input .search-close-btn {
  display: flex;
}

.search-result-link.is-active {
  border-top: 1px solid var(--color-1);
  border-bottom: 1px solid var(--color-1);
  font-weight: 500;
}

.search-result-link:first-of-type:hover {
  border-top: 1px solid transparent;
}


/* boundaries */

/* hide checkbox */
.on_off input {
  display: none;
}

/* container */
.boundaries-wrapper {
  padding: var(--spacing-3);
  display: flex;
  align-items: left;
  justify-content: space-between;
  gap: var(--spacing-2);
}

.on_off {
  display: flex;
  gap: var(--spacing-3);
}

/* buttons */
.on_off .btn {
  text-align: left;
  color: var(--color-1);
  cursor: pointer;
  transition: all 0.15s ease;
}

/* default = on */
.on_off .on {
  background: none;
  color: var(--color-1);
  font-weight: 500;
}

/* inactive */
.on_off .off {
  background: none;
  color: var(--color-1);
  opacity: 1;
  font-weight: 200;
}

/* when off active */
.on_off input:not(:checked)+.on {
  background: none;
  color: var(--color-1);
  opacity: 1;
  font-weight: 200;
}

.on_off input:not(:checked)+.on+.off {
  background: none;
  color: var(--color-1);
  opacity: 1;
  font-weight: 500;
}

/* data period */
.wrapper-period {
  padding: var(--spacing-3);
  display: flex;
  align-items: left;
  justify-content: space-between;
  gap: 0;
}



/* box 3 */

#box-3 {
  max-height: calc(100vh - (var(--spacing-1) * 2));
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow:
    var(--spacing-3) var(--spacing-3) 0 0 rgba(var(--color-2_rgb), 0.85),
    var(--spacing-3) var(--spacing-3) 0 1px var(--color-1);
  background-color: rgba(var(--color-2_rgb), 0.85);
  /* background-color: color-mix(in srgb, var(--color-2) 85%, transparent); */
}

#box-3>.line {
  background-color: var(--color-1);
  opacity: 1;
  flex-shrink: 0;
}

#box-3.has-data {
  box-shadow: var(--spacing-3) var(--spacing-3) 0 var(--color-1);
  background-color: rgba(var(--color-2_rgb), 1)
}

#details-body .txt-subtitle {
  display: block;
  margin-top: var(--spacing-2);
  /* margin-bottom: var(--spacing-3); */
}

#details-body .wrapper {
  padding: var(--spacing-4) var(--spacing-3);
}

/* index legend */
.legend-label-wrapper {
  display: flex;
  flex-flow: column;
  gap: var(--spacing-5);
  align-items: left;
}

#legend-index-input {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  align-self: start;
}

#legend-text-gent {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
}

#legend-text-sd {
  grid-column: 2;
  grid-row: 2;
  display: block;
  margin: 0;
}

.legend-wrapper {
  width: 100%;
  position: relative;
  margin-top: var(--spacing-2);
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  gap: 0;
  overflow: visible
}

/* gradient scale */
.legend-gradient {
  margin-bottom: var(--spacing-3);
  width: calc(100% - (var(--spacing-1)));
  height: var(--spacing-1);
  align-self: center;
  background-color: #BFCFF3;
  /* fallback */

  background: linear-gradient(
      /* fallback for JS */
      to right,
      #F5BFE1 0%,
      /* -4 */
      #F5BFE1 9.09%,
      /* -3 */
      #E2BFF3 18.18%,
      /* -2 */
      #CCBFF3 27.27%,
      /* -1 */
      #BFCFF3 36.36%,
      /* 0 */
      #3381F0 45.45%,
      /* 1 */
      #3267A9 54.54%,
      /* 2 */
      #314A80 63.63%,
      /* 3 */
      #314A80 100%
      /* 7 */
    );
}

.legend-ticks-wrap {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.legend-ticks {
  width: var(--spacing-1);
  height: var(--spacing-1);
  text-align: center;
}

.legend-ticks:first-child,
.legend-ticks:last-child {
  /* width: auto; */
}

.legend-label {
  font-size: var(--font-txt);
  font-weight: 400;
}


/* marker */
#legend_wrap {
  position: relative;
  /* background-color: #E2BFF3; */
}

.legend-marker {
  position: absolute;
  top: -24px;
  left: 0;
  /* defined in js */
  pointer-events: none;
  display: none;
  /* hidden until hover */
  z-index: 5;
  transition: left 140ms ease;
}

/* number above the line */
.legend-marker-value {
  font-size: var(--font-txt);
  line-height: 1;
  font-weight: 500;
  /* margin-bottom: var(--spacing-5); */
  color: var(--color-1);
  text-align: center;
  white-space: nowrap;
}

/* vertical line */
.legend-marker-line {
  width: 2px;
  height: 40px;
  background: var(--color-1);
}

#detail-metro {
  min-height: 2lh;
}


/* filter handles */
.filter-handle {
  position: absolute;
  top: -5px;
  width: auto;
  height: auto;
  font-size: 36px;
  line-height: 1;
  color: var(--color-1);
  font-weight: 200;
  cursor: ew-resize;
  touch-action: none;
  z-index: 6;
  transform: translateX(-50%);
  user-select: none;
}

.filter-toggle-row {
  display: flex;
  align-items: left;
  justify-content: space-between;
  gap: var(--spacing-2);
}

.filter-line {
  flex-shrink: 0;
}

.filter-mask {
  position: absolute;
  top: 0;
  height: 24px;
  /* match gradient bar height */
  background-color: var(--color-2);
  opacity: 0.7;
  /* makes underlying gradient appear at 30% */
  pointer-events: none;
  z-index: 4;
  /* below handles (z-index 6) */
}


/* colapse details */

.legend-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-2);
}

.toggle-details-btn {
  background: none;
  border: none;
  padding: 0;
  margin-top: 4px;
  margin-right: 4px;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: flex-start;
}


.details-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-2);
}

.details-header-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.toggle-details-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: flex-start;
}

.details-body {
  padding-top: var(--spacing-3);
  overflow-y: auto;
  overflow-x: hidden;
  opacity: 1;
  flex: 1 1 auto;
  min-height: 0;
  transition: opacity 160ms ease;
}

.details-box.is-collapsed .details-body {
  display: none;
  opacity: 0;
}

.details-box.is-collapsed .filter-line {
  display: none;
}




/* map */

.box-map-container {
  width: 100%;
  height: 100%;
}

.mapboxgl-canvas {
  cursor: default;
}

/* popup */

.mapboxgl-popup.popup-override {
  width: max-content;
  height: max-content;
  font-family: Atlas Grotesk, Arial, sans-serif;
  font-size: var(--font-txt);
  pointer-events: none;
  outline: 1px solid var(--color-1);
  transition: transform 160ms ease, opacity 120ms ease;
}

.mapboxgl-popup-tip {
  display: none;
}

.popup-wrapper {
  display: grid;
  grid-template-columns: max-content max-content;
  grid-template-rows: max-content max-content;
  column-gap: var(--spacing-3);
  row-gap: 0;
}

.mapboxgl-popup-content {
  padding: var(--spacing-4);
  display: flex;
  flex-direction: column;
  border-radius: 0;
  background-color: rgba(var(--color-2_rgb), 1);
}

/* popup selected */
.mapboxgl-popup.popup-selected {
  width: max-content;
  height: max-content;
  font-family: Atlas Grotesk, Arial, sans-serif;
  font-size: var(--font-txt);
  pointer-events: none;
  outline: 1px solid var(--color-1);
  box-shadow: var(--spacing-3) var(--spacing-3) 0 var(--color-1);
  transform: translate(-6px, -6px);
}

.txt-popup {
  display: inline;
  margin-bottom: 0;
}



/* mobile */

@media (max-width: 620px) {
  :root {
    --spacing-1: 16px;
    --spacing-2: 12px;
    --spacing-3: 8px;
    --spacing-4: 4px;
    --font-title: 15px;
    --line-height-title: 19px;
    --font-txt: 11px;
    --line-height-txt: 15px
  }

  .body {
    margin: 0;
    padding: 0;
  }

  .content-container {
    right: var(--spacing-1);
    height: auto;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    gap: var(--spacing-3);
    z-index: 999;
  }

  #box-1 {
    grid-column: 1 / span 3;
    max-height: none;
    height: calc((var(--line-height-txt) + var(--spacing-3) * 2) * 3 + 2px);
    display: grid;
    grid-template-rows: calc((var(--line-height-txt) + var(--spacing-3) * 2) * 2 + 1px) 1px auto;
    gap: 0;
  }

  #box-1.is-open {
    height: auto;
  }

  #box-2 {
    grid-column: 4 / span 3;
    grid-row: 1;
  }

  .box-container {
    /* align-items: stretch; */
    box-shadow: var(--spacing-4) var(--spacing-4) 0 var(--color-1);
  }

  .content-container>.box-container {
    pointer-events: auto;
  }

  .picto {
    width: 15px;
    height: auto;
  }

  #line-bottom {
    display: none;
  }

  #box-1 #learn-more-closed {
    /* padding-top: var(--spacing-3); */
    grid-row: 3;
  }

  .wrapper-learn_more {
    width: 100%;
    display: grid;
    grid-column: 2;
    grid-row: 1;
    grid-template-columns: auto max-content;
    justify-content: space-between;
    margin: 0;
    background-color: none;
  }

  .link-wrapper {
    display: flex;
    align-items: flex-end;
    max-width: 100%;
    color: inherit;
    margin-bottom: 0;
  }

  .dropdown-icon.collapsed {
    margin-top: 0;
    margin-bottom: 0;
  }

  .city-search-row #dropdown-selected-city {
    width: calc(100% - 37px);
    flex-shrink: 0;
    flex: none;
  }



  /* box-3: collapsed by default on mobile */

  #box-3 {
    display: flex;
    grid-column: 2;
    /* grid-row: 2; */
    align-self: end;
    position: fixed;
    bottom: var(--spacing-1);
    right: var(--spacing-1);
    width: calc(50% - var(--spacing-1) - var(--spacing-1) / 2);
    box-shadow: none;
  }
  #box-3.has-data {
  box-shadow: var(--spacing-4) var(--spacing-4) 0 var(--color-1);
}

  #box-3 .details-body {
    display: none;
  }

  #box-3 .toggle-details-btn {
    display: none;
  }

  #box-3 .filter-line {
    display: none;
  }

  .dropdown-menu {
    max-width: none;
    width: 100%;
  }

  .mapboxgl-popup {
    display: none;
  }

  .filter-handle {
    top: -8px;
  }

  .legend-wrapper {
    margin-top: var(--spacing-2);
  }

  .legend-gradient {
    margin-bottom: var(--spacing-2);
    height: 18px;
  }

}