/*
 * The map is the picture, and the interface a caption laid over it, on soft shades rather than
 * in boxes. The look and its tokens are theme.css's; js/map.js uses the same colours on the map.
 */

:root {
  --index: 460px;
  /* The index's shade fades out past its text, over this much */
  --index-fade: 120px;
  --timeline: 180px;
}

html,
body {
  height: 100%;
}

/* Small tracked capitals: every label, every control */
.wordmark,
.section-title,
.tile-label,
.tile-note,
.hero-sub,
.seg button,
.seg span,
.actions button,
.train-status {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* The clock, figures and names: ultra-light */
.hero-value,
.compact-clock,
.qty,
.train-title {
  font-weight: var(--display-weight);
  font-variant-numeric: tabular-nums lining-nums;
}

#app {
  position: relative;
  height: 100dvh;
  overflow: hidden;
  /* Nor scrolled, as a browser will to show a button you tap */
  overflow: clip;
}

/* ---------- The map, and what's laid over it ---------- */

#map {
  position: absolute;
  inset: 0;
  background: var(--bg);
}

/* A soft shade at the top, so the wordmark and controls read over the map */
#app::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  z-index: 1;
  height: 140px;
  background: linear-gradient(rgb(8 8 8 / 0.6), rgb(8 8 8 / 0));
  pointer-events: none;
  transition: opacity var(--fade);
}

/* Hidden, all but the button to show it again, and the shades with the rest */
.topbar,
.index,
.timeline-bar > :not(.chrome-toggle),
.day-chart,
.map-buttons {
  transition:
    opacity var(--fade),
    visibility var(--fade);
}

#app.chrome-hidden
  :is(.topbar, .index, .timeline-bar > :not(.chrome-toggle), .day-chart, .map-buttons) {
  opacity: 0;
  visibility: hidden;
}

#app.chrome-hidden::before,
#app.chrome-hidden .timeline::before {
  opacity: 0;
}

.topbar {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  padding: 30px var(--gutter) 0;
}

/* Find a station: a hairline field under the wordmark */
.station-search {
  position: relative;
  width: 220px;
  margin-top: 16px;
}

.station-search input {
  width: 100%;
  padding: 2px 0 6px;
  border: 0;
  border-bottom: 1px solid var(--ink-4);
  border-radius: 0;
  background: none;
  font-size: 15px;
  font-weight: 300;
  text-shadow: var(--lift-text);
}

.station-search input::placeholder {
  color: var(--ink-3);
  font-size: var(--caps-size);
  font-weight: 400;
  letter-spacing: var(--caps-tracking);
  text-transform: uppercase;
}

.station-search input:focus {
  border-bottom-color: var(--ink);
  outline: none;
}

.station-search .station-options {
  right: auto;
  width: 300px;
}

.wordmark {
  font-weight: 500;
  letter-spacing: 0.32em;
  text-shadow: var(--lift-text);
}

.seg {
  display: flex;
  align-items: baseline;
  gap: 16px;
}

.seg button,
.actions button {
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--ink-3);
  text-decoration: none;
  text-shadow: var(--lift-text);
  transition: color 0.2s;
}

.seg button:hover:not(:disabled),
.actions button:hover,
.seg button[aria-pressed='true'],
.actions button[aria-pressed='true'] {
  color: var(--ink);
}

.seg button[aria-pressed='true'],
.actions button[aria-pressed='true']:not(.play) {
  text-decoration: underline;
  text-decoration-thickness: 0.5px;
  text-underline-offset: 6px;
}

.seg button:disabled {
  opacity: 0.35;
  cursor: default;
}

.day-nav button {
  font-size: 13px;
  letter-spacing: 0;
}

.day-nav span {
  min-width: 6.5em;
  color: var(--ink);
  text-align: center;
  text-shadow: var(--lift-text);
}

/* Where am I, and zoom in and out: hairline squares, bottom right above the timeline */
.map-buttons {
  position: absolute;
  right: var(--gutter);
  bottom: calc(var(--timeline) + 40px);
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.zoom {
  display: flex;
  flex-direction: column;
}

.map-buttons button {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--ink-4);
  background: rgb(8 8 8 / 0.8);
  color: var(--ink-2);
  transition:
    color 0.2s,
    border-color 0.2s;
}

.zoom button + button {
  border-top: 0;
}

.map-buttons button:hover {
  border-color: var(--ink-3);
  color: var(--ink);
}

.map-buttons svg {
  width: 14px;
  height: 14px;
}

/* Found: the middle filled in. Looking: it breathes */
.locate[aria-pressed='true'] {
  color: var(--ink);
}

.locate[aria-pressed='true'] circle {
  fill: currentColor;
}

.locate[aria-busy='true'] svg {
  animation: locating 1s ease-in-out infinite alternate;
}

@keyframes locating {
  to {
    opacity: 0.25;
  }
}

/* Why it couldn't find you, beside the button */
.locate-note {
  position: absolute;
  top: 0;
  right: calc(100% + 12px);
  margin: 0;
  font-size: var(--caps-size);
  font-weight: 400;
  line-height: 32px;
  letter-spacing: var(--caps-tracking);
  text-shadow: var(--lift-text);
  text-transform: uppercase;
  white-space: nowrap;
}

.maplibregl-ctrl-bottom-right {
  bottom: calc(var(--timeline) - 24px);
  z-index: 3;
}

.maplibregl-ctrl-attrib {
  background: rgb(8 8 8 / 0.8) !important;
  color: var(--ink-3);
  font: 300 10px/1.6 var(--font);
}

.maplibregl-ctrl-attrib.maplibregl-compact {
  border-radius: 0 !important;
}

.maplibregl-ctrl-attrib a {
  color: var(--ink-2) !important;
}

.maplibregl-ctrl-attrib-button {
  filter: invert(1);
  opacity: 0.5;
}

/* deck.gl's tooltip */
.deck-tooltip .tooltip-meta {
  margin-top: 2px;
  color: var(--ink-3);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.map-error {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 10;
  margin: 0;
  font-size: 15px;
  transform: translate(-50%, -50%);
}

/* ---------- The index: the clock and figures, or the train you picked ---------- */

.index {
  position: absolute;
  top: 0;
  left: 0;
  bottom: var(--timeline);
  z-index: 2;
  width: var(--index);
  padding: 104px var(--index-fade) 32px var(--gutter);
  overflow-y: auto;
  /* Dark under all of the text, so the map's names don't show through it, and fading out after */
  background: linear-gradient(
    90deg,
    rgb(8 8 8 / 0.94) 0%,
    rgb(8 8 8 / 0.92) calc(100% - var(--index-fade)),
    rgb(8 8 8 / 0) 100%
  );
  scrollbar-width: none;
  overscroll-behavior: contain;
  /* Fade out into the timeline below, rather than stop at an edge */
  -webkit-mask-image: linear-gradient(#000 calc(100% - 48px), transparent);
  mask-image: linear-gradient(#000 calc(100% - 48px), transparent);
}

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

.section-title {
  margin: 0 0 18px;
  color: var(--ink-3);
}

.hero-value {
  margin: 0 0 10px;
  font-size: 88px;
  line-height: 0.9;
  letter-spacing: var(--display-tracking);
  white-space: nowrap;
}

.hero-value .qty-u {
  font-size: 22px;
  letter-spacing: 0;
}

.hero-sub {
  margin: 0 0 36px;
  color: var(--ink-2);
  line-height: 1.8;
}

.qty {
  white-space: nowrap;
}

.qty-u {
  margin-left: 6px;
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.04em;
}

.figures {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px 24px;
}

.tile {
  display: block;
  min-width: 0;
}

.tile-button {
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
}

.tile-label {
  display: block;
  color: var(--ink-3);
}

.tile .qty {
  display: block;
  margin-top: 6px;
  font-size: 28px;
  line-height: 1;
}

.tile-note {
  display: block;
  margin-top: 8px;
  overflow: hidden;
  color: var(--ink-3);
  font-size: 9px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tile-button:hover .tile-note {
  color: var(--ink-2);
  text-decoration: underline;
  text-decoration-thickness: 0.5px;
  text-underline-offset: 4px;
}

.operators {
  margin-top: 56px;
}

.operator-bars {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.operator-bars button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px 36px;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 5px 0;
  border: 0;
  background: none;
  color: var(--ink-2);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  text-align: left;
}

.operator-name {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.operator-bars button:hover .operator-name {
  color: var(--ink);
}

.operator-bars button[aria-pressed='false'] {
  opacity: 0.35;
}

.operator-bars button[aria-pressed='false'] .operator-name {
  text-decoration: line-through;
  text-decoration-thickness: 0.5px;
}

.key {
  display: inline-block;
  flex: none;
  width: 14px;
  height: 1.5px;
}

.bar-track {
  height: 1px;
  background: var(--ink-4);
}

.bar {
  display: block;
  width: var(--w);
  min-width: 1px;
  height: 100%;
  background: var(--ink);
}

.bar-value {
  text-align: right;
}

/* The train you picked, or the station you opened: its heading stays put, and its stops (or
   its board) scroll beneath */
.index:is(.has-train, .has-station) {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

:is(#train, #station) {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.train-title {
  margin: 0 0 12px;
  font-size: 48px;
  line-height: 1;
  letter-spacing: var(--display-tracking);
}

/* A station's name has no eyebrow over it: level with a train's all the same */
#station-title {
  margin-top: 30px;
}

.train-status {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: -12px 0 24px;
  color: var(--ink);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 22px;
}

:is(#train, #station) .actions {
  margin-bottom: 28px;
}

:is(#train, #station) .actions .seg {
  margin-right: auto;
}

.train-calls,
.board {
  flex: 1;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
  scrollbar-width: none;
  overscroll-behavior: contain;
}

.train-calls::-webkit-scrollbar,
.board::-webkit-scrollbar {
  display: none;
}

.train-calls li {
  display: grid;
  grid-template-columns: 52px 1fr;
  align-items: baseline;
  gap: 12px;
  padding: 6px 0;
  font-size: 13px;
}

.train-calls time {
  color: var(--ink-3);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.train-calls .passed {
  color: var(--ink-3);
}

.train-calls .next {
  position: relative;
  color: var(--ink);
}

.train-calls .next time {
  color: var(--neon);
}

/* Live: when a late train is expected, under when it's timetabled */
.train-calls .expected {
  display: block;
  color: var(--ink-2);
}

.train-calls .next .expected {
  color: var(--neon);
}

/* Live: stops it won't make after all */
.train-calls .cancelled {
  color: var(--ink-3);
  text-decoration: line-through;
  text-decoration-thickness: 0.5px;
}

.call-station {
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
}

.train-calls .next .call-station,
.call-station:hover {
  text-decoration: underline;
  text-decoration-thickness: 0.5px;
  text-underline-offset: 5px;
}

.call-station:hover {
  color: var(--ink);
}

/* A station's board: departures or arrivals, the next to go in neon */
.board-tabs {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ink-4);
}

.board button {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 4px 12px;
  width: 100%;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--ink-5);
  background: none;
  color: var(--ink);
  text-align: left;
}

.board time {
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.board .next time {
  color: var(--neon);
}

.board-place {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  font-size: 14px;
  white-space: nowrap;
}

.board-place span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* How long the train takes to get there */
.board-journey {
  flex: none;
  color: var(--ink-3);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.board button:hover .board-place span:first-child {
  text-decoration: underline;
  text-decoration-thickness: 0.5px;
  text-underline-offset: 4px;
}

.board-status,
.board-meta,
.board-platform {
  color: var(--ink-3);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: var(--caps-tracking);
  text-transform: uppercase;
  white-space: nowrap;
}

.board-status,
.board-platform {
  justify-self: end;
}

.board-status {
  color: var(--ink-2);
}

.board-meta {
  display: flex;
  grid-column: 2;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.board-meta span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Live: when a late train is expected, under when it's timetabled */
.board-expected {
  grid-row: 2;
  grid-column: 1;
  color: var(--ink-2);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

/* Live: a cancelled train, struck through */
.board .cancelled time {
  color: var(--ink-3);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.board .cancelled .board-place {
  color: var(--ink-3);
}

.board-empty {
  padding: 14px 0;
  color: var(--ink-3);
}

/* ---------- The day along the bottom: the trains running, and now ---------- */

.timeline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  height: var(--timeline);
  padding: 40px var(--gutter) 16px;
  pointer-events: none;
}

/* Its shade, apart, to fade out on its own when the interface is hidden */
.timeline::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    0deg,
    rgb(8 8 8 / 0.94) 0%,
    rgb(8 8 8 / 0.88) 55%,
    rgb(8 8 8 / 0.6) 75%,
    rgb(8 8 8 / 0) 100%
  );
  transition: opacity var(--fade);
}

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

/* The time and the day, how it's playing, and Hide at the far end. Kept as tall as the clock,
   and down at the bottom, so nothing moves when the clock comes and goes */
.timeline-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  align-content: flex-end;
  gap: 8px 40px;
  min-height: 40px;
  margin-bottom: 10px;
}

.when {
  display: flex;
  align-items: baseline;
  gap: 24px;
}

/* The time, big, beside the day: on a phone always, and on a wide screen once the index's own
   clock gives way to a station or a train */
.compact-clock {
  display: none;
  margin: 0;
  font-size: 36px;
  line-height: 1;
  letter-spacing: var(--display-tracking);
  white-space: nowrap;
  text-shadow: var(--lift-text);
}

.compact-clock .qty-u {
  font-size: 13px;
}

#app:has(.index:is(.has-train, .has-station)) .compact-clock {
  display: block;
}

/* Hide, at the end of the bar: an eye struck through and its word, in a hairline frame like the
   map's buttons. Hidden, the one thing left on the map, in the same place: an eye and "Show", in a
   brighter frame */
.chrome-toggle {
  display: flex;
  /* Hung from the bottom of the row, and overhanging it, so it doesn't make the row taller */
  align-self: flex-end;
  align-items: center;
  gap: 10px;
  height: 32px;
  margin: -4px 0 -4px auto;
  padding: 0 14px 0 12px;
  border: 1px solid var(--ink-4);
  background: rgb(8 8 8 / 0.8);
  color: var(--ink-2);
  font-size: var(--caps-size);
  letter-spacing: var(--caps-tracking);
  text-transform: uppercase;
  transition:
    color 0.2s,
    border-color 0.2s;
}

.chrome-toggle:hover {
  border-color: var(--ink-3);
  color: var(--ink);
}

.chrome-toggle svg {
  width: 14px;
  height: 14px;
}

.chrome-toggle[aria-pressed='true'] {
  border-color: var(--ink-2);
  color: var(--ink);
}

.chrome-toggle[aria-pressed='true']:hover {
  border-color: var(--ink);
}

.chrome-toggle[aria-pressed='true'] .slash {
  display: none;
}

/* Play is the one action that matters, so it alone carries the neon: a triangle, or two bars
   while playing */
.actions .play {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  color: var(--ink);
}

.play .glyph {
  align-self: center;
  width: 9px;
  height: 11px;
  background: var(--neon);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  transition: transform 0.2s;
}

.play[aria-pressed='true'] .glyph {
  background: linear-gradient(90deg, var(--neon) 0 3px, transparent 3px 6px, var(--neon) 6px);
  clip-path: none;
}

.play:hover .glyph {
  transform: scale(1.25);
}

.actions .live {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.live .neon-dot {
  background: transparent;
  border-color: var(--ink-3);
  box-shadow: none;
}

.live[aria-pressed='true'] .neon-dot {
  background: var(--neon);
  border-color: #000;
  box-shadow:
    0 0 0 3px var(--neon-glow),
    0 0 10px var(--neon-glow);
  animation: live 2s ease-in-out infinite;
}

@keyframes live {
  50% {
    box-shadow: 0 0 0 1px var(--neon-glow);
  }
}

@media (prefers-reduced-motion: reduce) {
  .live[aria-pressed='true'] .neon-dot {
    animation: none;
  }
}

.day-chart {
  position: relative;
  height: 74px;
}

.day-chart svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.day-chart text {
  fill: var(--ink-3);
  font: 300 10px var(--font);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
}

.day-chart .refs line {
  stroke: var(--ink-4);
  stroke-width: 1;
  stroke-dasharray: 1 4;
  shape-rendering: crispEdges;
}

.day-chart .line {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.25;
  stroke-linejoin: round;
}

.day-chart .past {
  fill: rgb(243 241 236 / 0.06);
  stroke: none;
}

.day-chart .now line {
  stroke: var(--neon);
  stroke-width: 1;
  shape-rendering: crispEdges;
}

.day-chart .now circle {
  fill: var(--neon);
  stroke: var(--bg);
  stroke-width: 1.5;
}

.day-chart .now text {
  fill: var(--ink);
}

/* The slider lies invisibly over the chart: drag along the day, or use the arrow keys */
.time-input {
  position: absolute;
  inset: 0 0 16px;
  width: 100%;
  height: auto;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}

.time-input:focus-visible + svg,
.day-chart:has(.time-input:focus-visible) {
  outline: 1px solid var(--ink-3);
  outline-offset: 6px;
}

/* ---------- Narrow screens ---------- */

@media (max-width: 1180px) {
  :root {
    --index: 392px;
    --index-fade: 80px;
  }

  .hero-value {
    font-size: 72px;
  }
}

/* On a phone the map fills the screen, the time sits along the bottom with the clock, and the
   train you pick (or the station) rests on it in a sheet. The index's figures are for bigger
   screens. Clear of the notch and the home bar, and a finger's width to tap. */
@media (max-width: 860px) {
  :root {
    --gutter: max(20px, env(safe-area-inset-left), env(safe-area-inset-right));
    --timeline: calc(170px + env(safe-area-inset-bottom));
    --sheet: 50dvh;
  }

  .seg button,
  .actions button {
    padding: 8px 0;
  }

  /* The wordmark and the field along the top, on a deeper shade */
  #app::before {
    height: 100px;
    background: linear-gradient(rgb(8 8 8 / 0.92) 48px, rgb(8 8 8 / 0));
  }

  .topbar {
    right: 0;
    display: flex;
    align-items: baseline;
    gap: 24px;
    padding: calc(14px + env(safe-area-inset-top)) var(--gutter) 0;
    pointer-events: none;
  }

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

  .wordmark {
    display: inline-block;
    padding: 8px 0;
  }

  /* The field takes the rest of the row, and its list the width of the screen */
  .station-search {
    position: static;
    flex: 1;
    width: auto;
    margin-top: 0;
  }

  .station-search .station-options {
    left: var(--gutter);
    right: var(--gutter);
    width: auto;
  }

  .compact-clock {
    display: block;
    font-size: 28px;
  }

  .timeline {
    padding: 16px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  }

  /* The time, the day and Hide, and how it's playing under them */
  .timeline-bar {
    gap: 4px 24px;
    min-height: 0;
    margin-bottom: 6px;
  }

  .timeline-bar > .actions {
    order: 1;
    flex-basis: 100%;
  }

  /* Hide is the eye alone; Show keeps its word */
  .chrome-toggle:not([aria-pressed='true']) {
    width: 32px;
    padding: 0;
    justify-content: center;
  }

  .chrome-toggle:not([aria-pressed='true']) .chrome-toggle-label {
    display: none;
  }

  .day-chart {
    height: 64px;
  }

  .index {
    display: none;
  }

  /* The sheet: solid, so the map doesn't show through the board, and on down behind the
     timeline, so nothing shows between them */
  .index:is(.has-train, .has-station) {
    display: flex;
    top: auto;
    right: 0;
    bottom: 0;
    width: auto;
    height: calc(var(--sheet) + var(--timeline));
    padding: 40px var(--gutter) var(--timeline);
    background: linear-gradient(rgb(8 8 8 / 0), var(--bg) 40px);
    -webkit-mask-image: none;
    mask-image: none;
  }

  /* Its stops, or its board, fade out into the timeline */
  .train-calls,
  .board {
    -webkit-mask-image: linear-gradient(#000 calc(100% - 32px), transparent);
    mask-image: linear-gradient(#000 calc(100% - 32px), transparent);
  }

  .train-title,
  #station-title {
    margin: 0 0 8px;
    font-size: 32px;
  }

  /* A sheet is half the screen: its heading kept short, so the stops or the board show */
  .index .hero-sub {
    margin-bottom: 8px;
  }

  .train-status {
    margin: 0 0 8px;
  }

  :is(#train, #station) .actions {
    margin-bottom: 4px;
  }

  .board-tabs {
    padding-bottom: 4px;
  }

  /* With a sheet open, the map's buttons rest above it, and the credits under them */
  #app:has(.index:is(.has-train, .has-station)) .map-buttons {
    bottom: calc(var(--timeline) + var(--sheet) + 36px);
  }

  #app:has(.index:is(.has-train, .has-station)) .maplibregl-ctrl-bottom-right {
    bottom: calc(var(--timeline) + var(--sheet) - 4px);
  }
}

/* Fingers pinch to zoom */
@media (pointer: coarse) {
  .zoom {
    display: none;
  }
}