/* The GeoAnim player: title, picture (as large as the window allows, in the shape of the view), step description,
   control bar. */
html, body {
  height: 100%;
  margin: 0;
}

body {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #eceef2;
  color: #222;
  font-family: 'STIX Two Text', 'Times New Roman', serif;
  overflow: hidden;
}

header {
  padding: 10px 52px 0;
  text-align: center;
}

/* step description, picture and explanations directly below the title; spare height (a tall window) stays below */
#content {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 0;
}

/* title, description and info grow with the picture (the player sets the sizes, with a minimum) */
h1 {
  margin: 0;
  font-size: var(--title-size, 24px);
  font-weight: 700;
}

/* until an animation is there, the stage fills the space; then it gets the height of the picture */
#stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  margin: 4px 16px 0;
}

#scene {
  position: absolute;
  inset: 0;
  margin: auto;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  user-select: none;
}

#scene text {
  font-family: 'STIX Two Text', 'Times New Roman', serif;
}

#message {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  pointer-events: none;
}

#message:empty {
  display: none;
}

#error {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100% - 32px);
  padding: 8px 14px;
  border-radius: 6px;
  background: #b71c1c;
  color: #fff;
  font-family: Consolas, 'Cascadia Mono', monospace;
  font-size: 14px;
  white-space: pre-wrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

#error[hidden] {
  display: none;
}

/* the message lets the mouse through (coordinates, Shift+click) and fades while the mouse is over the picture */
#error {
  pointer-events: none;
  transition: opacity 0.15s;
}

#stage:hover #error {
  opacity: 0.3;
}

#caption a,
h1 a {
  color: #1565c0;
}

#caption .step-number {
  color: #8a909c;
}

#caption code {
  padding: 0 0.2em;
  border-radius: 3px;
  background: #e2e5ea;
  font-family: Consolas, 'Cascadia Mono', monospace;
  font-size: 0.85em;
}

/* below the picture: description, info and next page, never squeezed; their height is measured and the picture gets the rest */
#texts {
  flex: none;
  box-sizing: border-box;
}

/* the explanation of a step: left-aligned in a column that stays easy to read */
#info {
  box-sizing: border-box;
  max-width: 44em;
  margin: 0 auto;
  padding: 8px 16px 10px;
  color: #333;
  font-size: var(--info-size, 17px);
  line-height: 1.45;
  text-align: left;
}

#info[hidden] {
  display: none;
}

#info a {
  color: #1565c0;
}

#info code {
  padding: 0 0.2em;
  border-radius: 3px;
  background: #e2e5ea;
  font-family: Consolas, 'Cascadia Mono', monospace;
  font-size: 0.85em;
}

/* above the picture: the numbered step description, close to the picture (its height is reserved for the longest) */
#caption-box {
  display: flex;
  flex: none;
  flex-direction: column;
  justify-content: flex-end;
  box-sizing: border-box;
}

#caption {
  box-sizing: border-box;
  min-height: 1.4em;
  padding: 4px 16px 8px;
  font-size: var(--caption-size, 20px);
  line-height: 1.4;
  text-align: center;
}

/* the list of steps, opened with the button at the top left */
#menu-button {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 21;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.85);
  color: #4a5160;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}

#menu-button:hover:not(:disabled),
#menu-button[aria-expanded="true"] {
  background: #fff;
  color: #000;
}

#menu-button:disabled {
  opacity: 0.35;
  cursor: default;
}

#menu-button svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

#menu {
  position: absolute;
  top: 0;
  bottom: 47px;
  left: 0;
  z-index: 20;
  box-sizing: border-box;
  width: min(400px, 88vw);
  padding: 52px 0 12px;
  overflow-y: auto;
  background: #fff;
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.2);
}

#menu[hidden] {
  display: none;
}

/* the way through an exported book, above the steps */
#book {
  margin: 0 0 8px;
  padding: 0 0 8px;
  border-bottom: 1px solid #e3e6eb;
}

#book[hidden] {
  display: none;
}

#book a {
  display: flex;
  gap: 10px;
  padding: 7px 16px;
  color: #1565c0;
  font-size: 17px;
  line-height: 1.35;
  text-decoration: none;
}

#book a:hover {
  background: #eceef2;
}

#book .arrow {
  min-width: 1.6em;
  color: #6b7280;
  text-align: right;
}

/* the footer of a book (imprint, privacy) at the end of the menu */
#menu-footer {
  margin: 12px 0 0;
  padding: 10px 16px 0;
  border-top: 1px solid #e3e6eb;
  color: #6b7280;
  font-size: 14px;
  line-height: 1.4;
}

#menu-footer[hidden] {
  display: none;
}

#menu-footer a {
  color: #1565c0;
}

/* below the last step: the next page of the book */
#next-page {
  box-sizing: border-box;
  max-width: 44em;
  margin: 0 auto;
  padding: 8px 16px 10px;
  font-size: var(--info-size, 17px);
  text-align: right;
}

#next-page[hidden] {
  display: none;
}

#next-page a {
  color: #1565c0;
  text-decoration: none;
}

#next-page a:hover {
  text-decoration: underline;
}

#menu-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

#menu-list li {
  display: flex;
  gap: 10px;
  padding: 8px 16px;
  font-size: 17px;
  line-height: 1.35;
  cursor: pointer;
}

#menu-list li:hover {
  background: #eceef2;
}

#menu-list li.current {
  background: #e1eaf7;
}

#menu-list .number {
  min-width: 1.6em;
  color: #6b7280;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

#menu-list li.current .number {
  color: #1565c0;
  font-weight: 700;
}

#menu-list a {
  color: #1565c0;
}

#controls {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 46px;
  padding: 0 12px;
  background: #fff;
  border-top: 1px solid #d5d8de;
  user-select: none;
  /* never wider than the window: a wider bar would make a phone zoom out, and the page would end in the middle */
  /* (clip, not hidden: the speed menu opens above the bar) */
  min-width: 0;
  overflow-x: clip;
}

#controls button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 4px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #4a5160;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

#controls button:hover:not(:disabled) {
  background: #eceef2;
  color: #000;
}

#controls button:disabled {
  opacity: 0.35;
  cursor: default;
}

#controls svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* play / pause stands out: larger, round, filled */
#controls #play {
  width: 40px;
  min-width: 40px;
  height: 40px;
  margin: 0 6px;
  border-radius: 50%;
  background: #1565c0;
  color: #fff;
}

#controls #play:hover:not(:disabled) {
  background: #0d47a1;
  color: #fff;
}

#controls #play svg {
  width: 22px;
  height: 22px;
}

#controls #replay {
  margin-left: 6px;
}

#play .pause,
#play.playing .play {
  display: none;
}

#play.playing .pause {
  display: block;
}

#stops[aria-pressed="true"] {
  color: #1565c0;
}

#timeline-box {
  position: relative;
  flex: 1;
  min-width: 60px;
  margin: 0 10px;
}

#timeline {
  width: 100%;
  margin: 0;
  accent-color: #1565c0;
}

/* the ends of the steps on the timeline */
#marks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#marks span {
  position: absolute;
  top: 50%;
  width: 2px;
  height: 12px;
  margin: -6px 0 0 -1px;
  background: #9aa1ad;
}

/* "geoanim serve": the coordinates under the mouse */
#coords {
  min-width: 150px;
  margin-right: 12px;
  color: #4a5160;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  white-space: pre;
}

#coords[hidden] {
  display: none;
}

body.live #scene {
  cursor: crosshair;
}

#counter {
  min-width: 56px;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

#speed-box {
  position: relative;
}

#controls #speed {
  min-width: 48px;
  font-variant-numeric: tabular-nums;
}

#controls #speed[aria-expanded="true"] {
  background: #eceef2;
}

/* narrow windows (phones): fewer buttons, less space; to the start and the end via the list of steps */
@media (max-width: 520px) {
  #controls {
    padding: 0 4px;
  }

  #controls #first,
  #controls #last {
    display: none;
  }

  #controls #play {
    margin: 0 2px;
  }

  #controls #replay {
    margin-left: 0;
  }

  #timeline-box {
    min-width: 40px;
    margin: 0 4px;
  }

  #counter {
    min-width: 40px;
  }
}

@media (max-width: 380px) {
  #controls #replay {
    display: none;
  }

  #controls #speed {
    min-width: 40px;
  }
}

/* the choice of speeds, opening upwards above the button */
#speed-menu {
  position: absolute;
  right: 0;
  bottom: 40px;
  display: flex;
  flex-direction: column;
  padding: 4px;
  border: 1px solid #d5d8de;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

#speed-menu[hidden] {
  display: none;
}

#controls #speed-menu button {
  justify-content: flex-end;
  min-width: 64px;
  height: 28px;
  padding: 0 10px;
  font-variant-numeric: tabular-nums;
}

#controls #speed-menu button[aria-checked="true"] {
  color: #1565c0;
  font-weight: 700;
}