/* The worked-examples page puts source and JSON side by side, so the default
   reading width leaves both columns too narrow to see a node's shape. */
.md-grid { max-width: 100rem; }

/* Those tabs hold code, not prose. Code is scanned for shape rather than read
   line by line, so it takes a smaller size than body text without costing
   legibility, and a node that fits on one line is worth more than a larger
   glyph. */
.md-typeset .tabbed-set pre > code,
.md-typeset .tabbed-set > code { font-size: 0.54rem; line-height: 1.3; }
.md-typeset .tabbed-labels > label { font-size: 0.56rem; }

/* Two columns of code need the gap kept tight. */
.md-typeset .grid { gap: 0.4rem; }

/* A diagram, and the control that opens it full screen. The button lives on a
   wrapper rather than on the fence, because mermaid replaces the fence's
   contents with the SVG it renders and would take any child of it with them. */
.awl-diagram {
  position: relative;
}

.awl-diagram__full {
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 3px;
  background: var(--md-default-bg-color);
  color: var(--md-default-fg-color--light);
  font: 600 0.62rem/1.6 var(--md-text-font-family);
  cursor: pointer;
  /* Out of the way until the diagram is wanted, and never invisible to the
     keyboard: a control reachable only by hovering is unreachable by tab. */
  opacity: 0;
  transition: opacity 125ms;
}

.awl-diagram:hover .awl-diagram__full,
.awl-diagram__full:focus-visible {
  opacity: 1;
}

.awl-diagram--open,
.awl-diagram--filling {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--md-default-bg-color);
}

/* Filling is the fallback for a browser that refused the fullscreen request,
   so it has to take the viewport itself rather than rely on the API. */
.awl-diagram--filling {
  position: fixed;
  inset: 0;
  z-index: 10;
}

/* Mermaid caps the SVG at the width it measured at render time, which is the
   column it was rendered in. Full screen has to lift that cap or the diagram
   opens at its original size in the middle of an empty page. */
.awl-diagram--open svg,
.awl-diagram--filling svg {
  width: 96vw !important;
  max-width: 96vw !important;
  height: 92vh !important;
  max-height: 92vh !important;
}

.awl-diagram--open .awl-diagram__full,
.awl-diagram--filling .awl-diagram__full {
  opacity: 1;
}

/* The explainer, stepped through one beat at a time. Class names and control
   layout follow tutorial-player's in OO-LD/oold-schema, so the two read the
   same; the video half is absent because this cut has stills and no render. */
.awl-shot {
  margin: 2rem 0 3rem;
}

.awl-shot__slide {
  display: block;
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
}

/* Until the manifest arrives there is no slide to show, so the fallback column
   carries the page and the controls stay out of the way. A control that does
   nothing is worse than no control. */
.awl-shot__stage,
.awl-shot__controls {
  display: none;
}

.awl-shot--ready .awl-shot__stage,
.awl-shot--ready .awl-shot__controls {
  display: block;
}

.awl-shot--ready .awl-shot__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 0.6rem;
}

.awl-shot--ready .awl-shot__fallback {
  display: none;
}

.awl-shot__controls button {
  padding: 0.2rem 0.7rem;
  font-size: 0.95rem;
  background: transparent;
  border: 1px solid var(--md-default-fg-color--lighter);
  border-radius: 6px;
  cursor: pointer;
  color: inherit;
}

.awl-shot__controls button:hover {
  border-color: var(--md-primary-fg-color);
}

.awl-shot__scene {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--md-primary-fg-color);
}

.awl-shot__caption {
  font-size: 0.8rem;
  color: var(--md-default-fg-color--light);
  font-variant-numeric: tabular-nums;
}

.awl-shot__fallback img {
  width: 100%;
  margin: 0 0 1.2rem;
  border-radius: 10px;
}