/* The Movement section: the map as the page (DESIGN 5.3). The first line is
   along the top with the controls under it, folded away or shown; the
   playback bar is one row along the bottom; the canvas takes everything
   between. The legend, the cell card and the zoom buttons sit over the
   canvas's corners.

   The map comes first at every width: the stage is never under 45 % of the
   window's height, nor under 320 px, unless the section has less than that
   under its first line and over the bar (a phone on its side, a short
   window): then the stage has what there is, so the first line, the map and
   the bar are all on screen with the controls folded. It never has less
   than its least, though (120 px, or the floors' box at Fit when that is
   less but never under what the zoom buttons need, and no more than the
   section has over the bar; SV2-55, SV2-57): with less
   than that, and where the controls are shown and the window cannot hold
   the stage, the section scrolls inside itself (.mov), the stage keeps its
   height, the bar stays at the section's foot, and the zoom buttons and the
   legend's card stand above the bar where it lies over the stage.

   index.html links this sheet (data-sheet="movement"); the plan map
   (ui/surface/plan-map.js), whose .mov-* rules these are for every section
   that mounts it, adds it to a page that does not. The section's place in the shell (the map
   edge to edge, where Getting started and the messages go) is ui/app.css's. */

/* ---------- The section ---------- */

.mov {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  /* what the focus brings into view lands above the bar, which is sticky at
     the section's foot (--mov-bar, ui/surface/plan-map.js) */
  scroll-padding-bottom: var(--mov-bar, 0px);
  background: var(--paper);
}

/* until this sheet has loaded the map has no size worth drawing at */
.mov[data-styled="false"] {
  visibility: hidden;
}

.mov-map {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.mov-map > * {
  flex: none;
}

.mov-map[hidden],
.mov-empty[hidden] {
  display: none;
}

/* ---------- The first line and the controls ---------- */

.mov-top {
  padding: var(--s-3) var(--s-4);
  background: var(--card);
  border-bottom: var(--border);
}

/* the screen's first line: a sentence at the size of the text, not of a
   headline, ending in what it offers (Show me, Change) */
.mov-line.intro__first {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--s-4);
  margin: 0;
  max-width: none;
  font-size: var(--t-md);
  line-height: var(--lh-md);
  font-weight: var(--w-medium);
}

.mov-line__words {
  flex: 1 1 14rem;
  min-width: 0;
}

.mov-line .mov-link[hidden] {
  display: none;
}

/* the disclosure: an arrow that points down while the controls are away */
.mov-change::after {
  content: "";
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  margin-left: 0.4em;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: translateY(-0.2em) rotate(45deg);
}

.mov-change[aria-expanded="true"]::after {
  transform: translateY(0.05em) rotate(-135deg);
}

.mov-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font-weight: var(--w-semibold);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.mov-link:hover {
  text-decoration-thickness: 2px;
}

.mov-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--s-3) var(--s-5);
  margin-top: var(--s-3);
}

.mov-controls[hidden] {
  display: none;
}

.mov-ctl {
  display: grid;
  gap: var(--s-1);
  min-width: 0;
}

.mov-ctl__label {
  font-size: var(--t-xs);
  line-height: var(--lh-xs);
  font-weight: var(--w-semibold);
  color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.mov-ctl__select {
  width: auto;
  min-width: 8rem;
}

.mov-ctl__more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-1);
}

.mov-ctl__more[hidden] {
  display: none;
}

.mov-ctl__more--groups .picker {
  width: 11rem;
}

.mov-ctl__reason {
  flex-basis: 100%;
  max-width: 30rem;
  font-size: var(--t-sm);
  line-height: var(--lh-sm);
  color: var(--ink-2);
}

.mov-chips {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mov-chips[hidden] {
  display: none;
}

.mov-swatch {
  display: inline-block;
  flex: none;
  width: 0.75rem;
  height: 0.75rem;
  margin-right: var(--s-1);
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  vertical-align: -1px;
}

/* the transition strip: one segment a transition, its passing time under its name */
.mov-strip {
  display: inline-flex;
  flex-wrap: wrap;
  row-gap: var(--s-1);
}

.mov-strip__item {
  display: grid;
  justify-items: center;
  align-content: center;
  min-width: 3rem;
  min-height: 38px;
  margin-left: calc(var(--border-width) * -1);
  padding: 2px var(--s-2);
  border: var(--border-width) solid var(--line-strong);
  background: var(--card);
  color: var(--ink);
  line-height: 1.15;
}

.mov-strip__item:first-child {
  margin-left: 0;
  border-radius: var(--r-1) 0 0 var(--r-1);
}

.mov-strip__item:last-child {
  border-radius: 0 var(--r-1) var(--r-1) 0;
}

.mov-strip__item:hover {
  background: var(--accent-soft);
}

.mov-strip__item[aria-checked="true"] {
  position: relative;
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.mov-strip__item:focus-visible {
  position: relative;
  z-index: 1;
}

.mov-strip__name {
  font-weight: var(--w-semibold);
  font-variant-numeric: tabular-nums;
}

.mov-strip__time {
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.mov-ctl--options {
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: var(--s-4);
}

.mov-ctl--options .mov-ctl__label {
  grid-column: 1 / 3;
}

.mov-ctl__checks {
  display: grid;
  gap: 2px;
}

.mov-check {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-sm);
  line-height: var(--lh-sm);
}

.mov-check input {
  width: 1rem;
  height: 1rem;
  accent-color: var(--accent);
}

/* ---------- The map ---------- */

/* the map's floor: 45 % of the window's height and 320 px at the least, and
   whatever the first line and the bar leave above that; but never more than
   the section has under its first line (folded) and over what is docked
   under the map, --mov-room, which ui/surface/plan-map.js measures, and
   which is never under the stage's least (120 px, or the floors' box at Fit
   when that is less, never under the zoom box's need: stageLeast in
   ui/surface/plan-layout.js) */
.mov-map > .mov-stage {
  position: relative;
  flex: 1 0 max(45vh, 320px);
  flex-basis: min(max(45vh, 320px), var(--mov-room, 100vh));
  flex-basis: min(max(45dvh, 320px), var(--mov-room, 100dvh));
  min-height: 0;
  overflow: hidden;
}

.mov-plan {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* the marks' canvas (playback's markers, the hotspot rings and their pulse,
   the keyboard cursor): over the map's, the same box, letting every pointer
   through to it */
.mov-marks {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.mov-plan[data-panning="true"] {
  cursor: grabbing;
}

.mov-plan:focus-visible {
  outline: var(--focus-width) solid var(--focus);
  outline-offset: calc(var(--focus-width) * -1);
}

/* The map as the last answer after a derive that failed (.mov[data-stale]):
   the picture is muted, and a band along its top says what it is. The first
   line of the screen says why, in words. */
.mov[data-stale="true"] .mov-plan,
.mov[data-stale="true"] .mov-marks {
  filter: grayscale(0.85) opacity(0.6);
}

.mov-stale {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 4;
  margin: 0;
  padding: var(--s-1) var(--s-4);
  background: var(--card);
  border-bottom: 3px solid var(--warning);
  color: var(--ink);
  font-size: var(--t-sm);
  line-height: var(--lh-sm);
  font-weight: var(--w-semibold);
  pointer-events: none;
}

.mov-stale[hidden] {
  display: none;
}

.mov-stale-note {
  padding-left: var(--s-3);
  border-left: 3px solid var(--warning);
  color: var(--ink);
}

.mov-stale-note[hidden] {
  display: none;
}

.mov-health__both {
  color: var(--ink-2);
  font-size: var(--t-sm);
  line-height: var(--lh-sm);
}

/* ---------- The legend ---------- */

.mov-legend {
  position: absolute;
  right: var(--s-3);
  bottom: calc(var(--s-3) + var(--mov-under, 0px));
  width: 16.5rem;
  max-width: calc(100% - var(--s-5));
  max-height: calc(100% - var(--s-5));
  overflow: auto;
  padding: var(--s-3);
  background: var(--card);
  border: var(--border);
  border-radius: var(--r-2);
  font-size: var(--t-sm);
  line-height: var(--lh-sm);
}

.mov-legend[hidden],
.mov-legend__body[hidden],
.mov-legend__row[hidden] {
  display: none;
}

/* Docked (it would lie on a floor, or the window is a phone's): the card is
   away, laid out and unseen so the room it needs can still be measured, and
   one line under the map stands for it. "Scale" on that line brings the card
   out over the map until its own button puts it away. */
.mov-legend[data-docked="true"] {
  z-index: 6;
  visibility: hidden;
  box-shadow: var(--shadow);
}

.mov-legend[data-docked="true"][data-open="true"] {
  visibility: visible;
}

.mov-legend-line {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s-3);
  padding: var(--s-1) var(--s-4);
  background: var(--card);
  border-top: var(--border);
  font-size: var(--t-sm);
  line-height: var(--lh-sm);
  font-variant-numeric: tabular-nums;
}

.mov-legend-line[hidden] {
  display: none;
}

.mov-legend__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
}

.mov-legend__toggle {
  font-size: var(--t-xs);
}

.mov-legend[data-folded="true"] {
  width: auto;
}

.mov-legend[data-folded="true"] .mov-legend__body,
.mov-legend[data-folded="true"] > .mov-legend__what {
  display: none;
}

.mov-legend__title {
  font-size: var(--t-xs);
  line-height: var(--lh-xs);
  font-weight: var(--w-semibold);
  color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.mov-legend__what {
  margin-top: var(--s-1);
}

.mov-legend__bands {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 2px;
  margin: var(--s-2) 0 0;
  padding: 0;
  list-style: none;
}

.mov-legend__band {
  display: grid;
  gap: 2px;
  justify-items: center;
  font-family: var(--font-plan);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* the band's number is its partner for a reader who cannot tell the colours apart */
.mov-legend__swatch {
  display: grid;
  place-items: center;
  width: 100%;
  height: 1.25rem;
  border: 1px solid var(--line-strong);
  color: #1f2328;
  font-size: var(--t-xs);
  font-weight: var(--w-semibold);
}

.mov-legend__band[data-band="5"] .mov-legend__swatch {
  color: #ffffff;
}

.mov-legend__note {
  color: var(--ink-2);
  font-size: var(--t-xs);
  line-height: 1.3;
}

.mov-legend__row {
  margin-top: var(--s-2);
}

.mov-legend__row .seg__label {
  min-height: 28px;
  padding: 0 var(--s-2);
  font-size: var(--t-xs);
}

.mov-legend__note {
  margin-top: var(--s-1);
}

.mov-legend__what {
  font-size: var(--t-xs);
  line-height: 1.3;
}

/* ---------- The cell card ---------- */

.mov-card {
  position: absolute;
  z-index: 5;
  width: max-content;
  max-width: 17rem;
  padding: var(--s-2) var(--s-3);
  background: var(--card);
  border: var(--border-width) solid var(--line-strong);
  border-radius: var(--r-2);
  box-shadow: var(--shadow);
  font-size: var(--t-sm);
  line-height: var(--lh-sm);
  pointer-events: none;
}

.mov-card[hidden],
.mov-card__groups[hidden] {
  display: none;
}

.mov-card__place {
  font-weight: var(--w-semibold);
}

.mov-card__floor,
.mov-card__zone,
.mov-card__more,
.mov-card__times {
  color: var(--ink-2);
  font-weight: var(--w-regular, 400);
}

.mov-card__groups {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px var(--s-3);
  margin: var(--s-1) 0 0;
  padding: var(--s-1) 0 0;
  border-top: var(--border);
  list-style: none;
}

.mov-card__times {
  margin-left: var(--s-1);
}

.mov-card__extra:empty {
  display: none;
}

/* ---------- Zoom ---------- */

/* lifted over the bar where the bar lies on the stage's foot (--mov-under,
   ui/surface/plan-map.js) */
.mov-zoom {
  position: absolute;
  left: var(--s-3);
  bottom: calc(var(--s-3) + var(--mov-under, 0px));
  display: flex;
  align-items: center;
  background: var(--card);
  border: var(--border-width) solid var(--line-strong);
  border-radius: var(--r-1);
}

.mov-zoom__btn {
  min-width: 36px;
  height: 36px;
  padding: 0 var(--s-2);
  border: 0;
  background: none;
  color: var(--ink);
  font-weight: var(--w-semibold);
}

.mov-zoom__btn:hover {
  background: var(--accent-soft);
}

.mov-zoom__btn--fit {
  border-left: var(--border);
}

.mov-zoom__text {
  min-width: 3rem;
  text-align: center;
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}

/* ---------- The playback bar ---------- */

/* at the section's foot whatever is scrolled: with the controls shown in a
   short window the bar lies over the map's lower edge until the section is
   scrolled to its end, and is never under the window's */
.mov-bar {
  position: sticky;
  bottom: 0;
  z-index: 7;
  padding: var(--s-2) var(--s-4);
  background: var(--card);
  border-top: var(--border);
}

.mov-pb {
  display: grid;
  gap: var(--s-2);
}

/* one row, whatever the width: the scrubber takes what the rest leave */
.mov-pb__row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--s-3);
  min-width: 0;
}

.mov-pb__row > * {
  flex: none;
}

.mov-pb__steps {
  display: inline-flex;
  gap: var(--s-1);
}

.mov-pb__play {
  min-width: 5rem;
}

.mov-pb__step {
  min-width: 36px;
  padding: 0;
}

.mov-pb__step--back .icon {
  transform: scaleX(-1);
}

.mov-pb__row > .mov-pb__scrub {
  flex: 1 1 0;
  min-width: 3.5rem;
  height: 36px;
  margin: 0;
  accent-color: var(--accent);
}

.mov-pb__scrub:disabled {
  opacity: 0.5;
}

.mov-pb__time {
  display: grid;
  min-width: 9.5rem;
  font-variant-numeric: var(--numeric);
}

.mov-pb__clock {
  font-family: var(--font-plan);
  font-size: var(--t-lg);
  font-weight: var(--w-semibold);
  line-height: 1.1;
}

.mov-pb__countdown {
  font-size: var(--t-xs);
  line-height: var(--lh-xs);
  color: var(--ink-2);
}

.mov-pb__countdown[data-late="true"] {
  color: var(--problem);
  font-weight: var(--w-semibold);
}

.mov-pb__pick {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-size: var(--t-sm);
}

.mov-pb__select {
  width: auto;
  height: 36px;
  padding: 0 var(--s-2);
  border: var(--border-width) solid var(--line-strong);
  border-radius: var(--r-1);
  background: var(--card);
}

/* More opens up over the map's foot (the bar is at the section's foot): it
   never takes more than 40 % of the window, nor more than the map and the
   legend's line have (--mov-more, ui/surface/plan-map.js), so the first line
   stays on screen and a message has room above the bar; it scrolls inside
   itself past that, and is never under 6rem */
.mov-pb__more {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--s-2) var(--s-5);
  max-height: max(6rem, min(40vh, var(--mov-more, 40vh)));
  max-height: max(6rem, min(40dvh, var(--mov-more, 40dvh)));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-top: var(--s-2);
  border-top: var(--border);
}

.mov-pb__more[hidden],
.mov-pb__line[hidden] {
  display: none;
}

.mov-pb__set {
  display: grid;
  gap: var(--s-1);
  min-width: 0;
}

.mov-pb__label {
  font-size: var(--t-xs);
  line-height: var(--lh-xs);
  font-weight: var(--w-semibold);
  color: var(--ink-2);
}

.mov-pb__line {
  margin: 0;
  font-size: var(--t-sm);
  line-height: var(--lh-sm);
  color: var(--ink-2);
}

.mov-pb__line--late {
  color: var(--problem);
  font-weight: var(--w-semibold);
}

/* who is at the cell now, in the cell card */
.mov-card__now {
  margin: var(--s-1) 0 0;
  padding-top: var(--s-1);
  border-top: var(--border);
  font-size: var(--t-sm);
  line-height: var(--lh-sm);
}

.mov-card__late {
  color: var(--problem);
  font-weight: var(--w-semibold);
}

/* A phone: the row is Play, the two steps, the scrubber, the clock and More,
   and the countdown's words go under it at the row's full width. */
@media (max-width: 640px) {
  .mov-bar {
    padding: var(--s-2) var(--s-3);
  }

  .mov-pb__row {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto auto;
    gap: var(--s-1) var(--s-2);
  }

  .mov-pb__row > .mov-pb__scrub {
    min-width: 0;
  }

  .mov-pb__time {
    display: contents;
  }

  .mov-pb__countdown {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .mov-pb__countdown:empty {
    display: none;
  }

  /* as wide for "Pause" as for "Play", so the scrubber keeps its width when
     playback starts (at 390 px it lost 8 px to "Pause", to 51) */
  .mov-pb__play {
    min-width: 3.5rem;
    padding-left: var(--s-1);
    padding-right: var(--s-1);
  }
}

/* Under 360 px (a 320 px phone) the row cannot hold the clock as well: it
   joins the countdown's line under the row, and the row is Play, the two
   steps, the scrubber and More, closer together, so the scrubber keeps a
   width a thumb can use (SV2-52). */
@media (max-width: 359.98px) {
  .mov-pb__row {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    column-gap: var(--s-1);
  }

  .mov-pb__time {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--s-2);
    grid-column: 1 / -1;
    grid-row: 2;
    min-width: 0;
  }

  .mov-pb__time:has(> .mov-pb__clock:empty):has(> .mov-pb__countdown:empty) {
    display: none;
  }

  .mov-pb__clock:empty {
    display: none;
  }
}

/* a finger's targets on the bar (DESIGN 5.3) */
@media (max-width: 640px), (pointer: coarse) {
  .mov-pb .btn,
  .mov-pb__select,
  .mov-pb__row > .mov-pb__scrub {
    min-height: 44px;
    height: auto;
  }

  .mov-pb__select,
  .mov-pb__row > .mov-pb__scrub {
    height: 44px;
  }

  .mov-pb__step {
    min-width: 44px;
  }

  .mov-pb .seg__label {
    min-height: 44px;
  }
}

/* ---------- The top bar's second row ---------- */

.mov-floors {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  min-height: 36px;
  padding: 0 var(--s-4);
}

.mov-floors__label {
  font-size: var(--t-xs);
  font-weight: var(--w-semibold);
  color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.mov-floors .seg__label {
  min-height: 28px;
  padding: 0 var(--s-2);
  font-size: var(--t-sm);
}

.mov-floors .seg[hidden] {
  display: none;
}

/* ---------- The inspector ---------- */

.mov-inspector {
  flex: 1 1 100%;
  min-width: 0;
  padding: var(--s-3);
}

/* the four tabs are one row in the 320 px panel: at the shell's own size
   Hotspots and Travel time filled a row, and Summary and Export made a second */
.mov-inspector .tabs__list {
  flex-wrap: nowrap;
}

.mov-inspector .tabs__tab {
  flex: 1 1 auto;
  padding: 0 var(--s-1);
  font-size: var(--t-sm);
  white-space: nowrap;
}

.mov-panel__title {
  font-size: var(--t-lg);
  line-height: var(--lh-lg);
  font-weight: var(--w-semibold);
}

.mov-panel__sub {
  margin-top: var(--s-5);
  font-size: var(--t-md);
  line-height: var(--lh-md);
  font-weight: var(--w-semibold);
}

.mov-panel__sub[hidden] {
  display: none;
}

.mov-panel p {
  margin-top: var(--s-2);
}

.mov-panel__note {
  color: var(--ink-2);
  font-size: var(--t-sm);
  line-height: var(--lh-sm);
}

.mov-figures {
  display: grid;
  gap: var(--s-3);
  margin: var(--s-3) 0 0;
}

.mov-figure dt {
  font-size: var(--t-xs);
  line-height: var(--lh-xs);
  font-weight: var(--w-semibold);
  color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.mov-figure dd {
  margin: 0;
}

.mov-figure__value {
  display: block;
  font-family: var(--font-plan);
  font-size: var(--t-xl);
  line-height: var(--lh-xl);
  font-weight: var(--w-semibold);
  font-variant-numeric: tabular-nums;
}

.mov-figure__more {
  display: block;
  font-size: var(--t-sm);
  line-height: var(--lh-sm);
  color: var(--ink-2);
}

.mov-groups {
  margin-top: var(--s-2);
  overflow-x: auto;
}

.mov-groups__table {
  font-size: var(--t-sm);
  line-height: var(--lh-sm);
}

.mov-groups__table th,
.mov-groups__table td {
  padding: var(--s-1) var(--s-2) var(--s-1) 0;
  white-space: nowrap;
}

.mov-groups__table tbody th {
  color: var(--ink);
  font-size: inherit;
  font-weight: var(--w-medium);
  letter-spacing: 0;
  text-transform: none;
}

.mov-groups__table thead th {
  white-space: normal;
  vertical-align: bottom;
}

.mov-groups__late,
.mov-groups__failed {
  display: block;
  font-weight: var(--w-medium);
  white-space: normal;
}

.mov-groups__late {
  color: var(--warning);
}

.mov-groups__failed {
  color: var(--problem);
}

.mov-health {
  display: grid;
  gap: var(--s-3);
  margin: var(--s-2) 0 0;
  padding: 0;
  list-style: none;
}

.mov-health[hidden] {
  display: none;
}

.mov-health__item {
  padding-left: var(--s-3);
  border-left: 3px solid var(--problem);
}

.mov-health__item p {
  margin: 0;
}

@media (max-width: 640px) {
  .mov-legend {
    width: 14rem;
  }

  .mov-top {
    padding: var(--s-2) var(--s-3);
  }
}

/* ---------- A finger's targets (DESIGN 5.3) ----------

   Under 640 px, or with a coarse pointer, every control of the movement
   surface is at least 44 px in its smaller dimension: the floors and the
   arrangement in the top bar's second row, Change and the other links, the
   who and transition choices, the two Show boxes (the row is the target),
   Clear, the legend's choices and its button, the zoom buttons. The playback
   bar's are with the bar, above. */
@media (max-width: 640px), (pointer: coarse) {
  .mov-floors .seg__label,
  .mov .seg__label,
  .mov-legend__row .seg__label {
    min-height: 44px;
    min-width: 44px;
  }

  .mov-floors {
    padding-top: var(--s-1);
    padding-bottom: var(--s-1);
  }

  .mov .mov-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }

  .mov-strip__item {
    min-width: 44px;
    min-height: 44px;
  }

  .mov-check {
    min-height: 44px;
    padding-right: var(--s-2);
  }

  .mov-ctl__checks {
    gap: 0;
  }

  .mov-check input {
    width: 1.25rem;
    height: 1.25rem;
  }

  .mov .btn,
  .mov .field__input,
  .mov-ctl__select {
    min-height: 44px;
  }

  .mov .field__input,
  .mov-ctl__select {
    height: 44px;
  }

  .mov .chip__remove {
    width: 44px;
    height: 44px;
  }

  .mov-zoom__btn {
    min-width: 44px;
    height: 44px;
  }

  .mov-legend-line {
    padding-top: 0;
    padding-bottom: 0;
  }

  /* the inspector's panels too, its sheet on a phone (SV2-52): the tabs, the
     Hotspots rows' names and "Show its N cells", "Show all floors", the
     links to fix a route, the Export buttons and choices */
  .mov-inspector .tabs__tab,
  .mov-inspector .btn,
  .mov-inspector .field__input,
  .mov-inspector .mov-ctl__select {
    min-height: 44px;
  }

  .mov-inspector .mov-link {
    display: inline-flex;
    align-items: center;
    min-width: 44px;
    min-height: 44px;
  }

  .mov-inspector .seg__label {
    min-height: 44px;
    min-width: 44px;
  }
}

/* ---------- SV2-18: hotspots, tables, export ---------- */

.mov-hot,
.mov-travel {
  margin-top: var(--s-2);
  overflow-x: auto;
}

.mov-hot[hidden],
.mov-travel__tables[hidden] {
  display: none;
}

.mov-hot__table th,
.mov-hot__table td {
  padding: var(--s-2) var(--s-2) var(--s-2) 0;
}

.mov-hot__table tbody th {
  color: var(--ink);
  font-size: var(--t-sm);
  line-height: var(--lh-sm);
  font-weight: var(--w-regular);
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
  border-top: var(--border);
}

.mov-hot__table td {
  white-space: nowrap;
}

.mov-hot__row {
  cursor: pointer;
}

.mov-hot__row:hover,
.mov-hot__row[aria-current="true"] {
  background: var(--accent-soft);
}

.mov-hot__place {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  gap: var(--s-1);
}

.mov-hot__rank {
  font-family: var(--font-plan);
  font-weight: var(--w-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}

.mov-hot__name {
  text-align: left;
  font-weight: var(--w-semibold);
}

.mov-hot__when,
.mov-hot__groups,
.mov-hot__more {
  display: block;
}

.mov-hot__when,
.mov-hot__groups,
.mov-travel__rooms,
.mov-travel__fits {
  color: var(--ink-2);
}

.mov-hot__more {
  color: var(--accent);
  font-weight: var(--w-medium);
}

.mov-hot__band {
  display: inline-block;
  min-width: 1.25rem;
  margin-right: var(--s-1);
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  font-family: var(--font-plan);
  font-weight: var(--w-semibold);
  text-align: center;
  color: #1f2328;
}

.mov-hot__band[data-band="1"] { background: var(--load-1); }
.mov-hot__band[data-band="2"] { background: var(--load-2); }
.mov-hot__band[data-band="3"] { background: var(--load-3); }
.mov-hot__band[data-band="4"] { background: var(--load-4); }

.mov-hot__band[data-band="5"] {
  background: var(--load-5);
  color: #ffffff;
}

.mov-hot__cells[hidden] {
  display: none;
}

.mov-hot__cells td {
  white-space: normal;
  border-top: 0;
  padding-top: 0;
}

.mov-hot__cell-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: var(--s-1) var(--s-3);
  margin: 0;
  padding: 0 0 0 1.5rem;
  list-style: none;
  font-variant-numeric: tabular-nums;
}

.mov-hot__all {
  margin-top: var(--s-2);
}

.mov-hot__all[hidden] {
  display: none;
}

.mov-travel__choose,
.mov-export__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-2);
}

.mov-travel__table th,
.mov-travel__table td {
  padding: var(--s-1) var(--s-2) var(--s-1) 0;
}

.mov-travel__table thead th {
  width: 33.3%;
  text-align: right;
}

.mov-hot__table thead .table__num {
  text-align: right;
}

.mov-travel__table tbody th {
  padding-top: var(--s-2);
  border-top: var(--border);
  color: var(--ink);
  font-size: var(--t-sm);
  line-height: var(--lh-sm);
  font-weight: var(--w-regular);
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
}

.mov-travel__table td {
  border-top: 0;
  padding-bottom: var(--s-2);
  white-space: nowrap;
}

.mov-travel__name {
  font-weight: var(--w-semibold);
}

.mov-travel__table .mov-travel__rooms,
.mov-travel__table .mov-travel__fits,
.mov-travel__table .mov-groups__late {
  display: inline;
  margin-left: var(--s-2);
}

.mov-export__parts {
  display: grid;
  gap: var(--s-1);
  margin: var(--s-3) 0 0;
  padding: 0;
  border: 0;
}

.mov-export__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-3);
}

.mov-export__status:empty {
  display: none;
}

/* the canvas an exported picture is drawn on: in the page for its colours, never seen */
.mov-export-host {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}