/* Shared frame geometry; legends are fitted as a complete sheet. */
html.legend-document, .legend-document body {
  margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden;
  background: transparent;
}
.legend-document .apple-sheet {
  position: absolute; top: 0; left: 0; margin: 0;
  width: 1200px; max-width: none; padding: 16px; box-sizing: border-box;
  transform-origin: top left; box-shadow: none;
  background: transparent;
  border: 0;
  border-radius: 24px;
}
.legend-document .desc-text, .legend-document .iframe-box,
.legend-document .formula, .legend-document .block {
  box-sizing: border-box; width: 100%; max-width: none;
}
.legend-document .wrap, .legend-document .stack {
  box-sizing: border-box; width: 100%; max-width: none;
}
.legend-document .desc-text { margin-bottom: 12px; }
.legend-document .desc-text h2 { font-size: 32px; margin-bottom: 8px; }
.legend-document .desc-text p,
.legend-document .desc-text li {
  font-size: 18px;
  line-height: 1.35;
}
.legend-document .desc-text p { margin-bottom: 7px; }
.legend-document .desc-text li { margin-bottom: 3px; }
.legend-document .block p { font-size: 18px; line-height: 1.35; }
.legend-document .block h3 { font-size: 20px; }
.legend-document .caption { font-size: 15px; }
.legend-document .iframe-box { padding: 12px; }
.legend-document .iframe-box iframe {
  display: block; width: 100%; height: 300px; border: 0;
}
.legend-document .formula { font-size: 22px; }
.legend-document math { font-size: 26px; vertical-align: middle; }
.legend-document .coef-chip, .legend-document .num-chip { width: auto; min-width: 15px; }
.legend-document .grid { transform: none; margin: 8px auto 0; }
.legend-document .block { padding: 12px 14px; }
.legend-document .desc-text { padding: 14px; }

/* Board and Formula contain more material than the other legends. A wide,
   two-column composition keeps their 18px text from being scaled down. */
.legend-board .apple-sheet {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: stretch;
  gap: 14px;
}
.legend-board .desc-text { margin: 0; }
.legend-board .iframe-box { display: flex; min-height: 420px; }
.legend-board .iframe-box iframe { flex: 1; height: auto; }

@media (max-width: 620px) {
  html.legend-board,
  html.legend-board body {
    height: auto;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .legend-board .apple-sheet {
    position: relative;
    top: auto;
    left: auto;
    display: flex;
    width: 100%;
    min-height: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 8px;
    transform: none;
  }

  .legend-board .desc-text {
    width: 100%;
    margin: 0;
    padding: 14px;
  }

  .legend-board .desc-text h2 {
    font-size: 25px;
  }

  .legend-board .desc-text p,
  .legend-board .desc-text li {
    font-size: 16px;
    line-height: 1.42;
  }

  .legend-board .iframe-box {
    display: block;
    width: 100%;
    min-height: 330px;
    padding: 8px;
  }

  .legend-board .iframe-box iframe {
    width: 100%;
    height: 314px;
    min-height: 314px;
  }
}

/* Phone stories: text first, live illustration below.  Keep only the
   illustration's own surface so the field does not look double-framed. */
@media (max-width: 620px) {
  html.legend-story,
  html.legend-story body {
    height: auto;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .legend-story .apple-sheet {
    position: relative;
    inset: auto;
    display: flex;
    width: 100%;
    min-height: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 8px;
    transform: none;
  }

  .legend-story .desc-text {
    width: 100%;
    margin: 0;
    padding: 14px;
  }

  .legend-story .desc-text h2 { font-size: 25px; }
  .legend-story .desc-text p,
  .legend-story .desc-text li {
    font-size: 16px;
    line-height: 1.42;
  }

  .legend-story .iframe-box {
    display: block;
    width: 100%;
    min-height: 330px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    overflow: hidden;
  }

  .legend-story .iframe-box iframe {
    display: block;
    width: 100%;
    height: 330px;
    min-height: 330px;
    border-radius: 12px;
  }
}

.legend-formula .wrap {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: stretch;
  gap: 14px;
}
.legend-formula .formula-left {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 8px;
}
.legend-formula .desc-text,
.legend-formula .formula { margin: 0; }
.legend-formula .stack { gap: 8px; }
.legend-formula .desc-text p,
.legend-formula .desc-text li,
.legend-formula .block p { font-size: 20px; }
.legend-formula .desc-text p,
.legend-formula .desc-text li { line-height: 1.55; }
.legend-formula .desc-text h2 { font-size: 36px; }
.legend-formula .formula {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}
.legend-formula .formula-content {
  width: 100%;
  text-align: center;
}
.legend-formula math { font-size: 38px; }
/* The original unit allowed a 48-unit board to overflow a 50-unit viewport
   after padding. Keep enough space for the entire board and side panel. */
html.demo-document { --u: min(calc(100vw / 140), calc(100vh / 64)); }
html.demo-document.field-demo { --u: min(calc(100vw / 260), calc(100vh / 120)); }
.demo-document .scene { box-shadow: none; }
.demo-document .wrapper {
  display: flex;
  justify-content: center;
  gap: calc(var(--u) * 20);
}
.demo-document .board { margin-left: 0; }
.demo-document .side {
  position: static;
}
.legend-board_iframe_test .wrapper {
  align-items: center;
}

/* Larger status controls in Analysis: score, percent and pause. */
.legend-analysis_animation .panel { gap: calc(var(--u) * 2.5); }
.legend-analysis_animation .btn {
  width: calc(var(--u) * 18);
  height: calc(var(--u) * 15);
  font-size: calc(var(--u) * 8.5);
}
.legend-analysis_animation #score { width: calc(var(--u) * 20); }
.legend-analysis_animation #pct { width: calc(var(--u) * 18); }
.legend-analysis_animation .btn.pause {
  width: calc(var(--u) * 14);
  font-size: calc(var(--u) * 7);
}