/* Melo v0.2 — scene-local geometry. No clock, timing or blanket scaling. */

/* A selected tick has a coloured stroke; a selected glyph has a coloured fill.
   The old shared rule gave 10px glyphs an additional 3px blue contour. */
#step-5 .transfer-angle-map .transfer-angle-label,
#step-5 .transfer-angle-map [data-map-angle].is-selected .transfer-angle-label,
#step-5 .transfer-angle-map [data-map-angle].is-probing .transfer-angle-label {
  stroke: none;
  stroke-width: 0;
  paint-order: normal;
  font-size: 14px;
  transition: fill 160ms ease;
}
#step-5 .transfer-angle-map [data-map-angle].is-selected .transfer-angle-label,
#step-5 .transfer-angle-map [data-map-angle].is-probing .transfer-angle-label { font-size: 16px; }
@media (max-width: 720px) {
  #step-5 .transfer-angle-map .transfer-angle-label { font-size: 16px; }
  #step-5 .transfer-angle-map [data-map-angle].is-selected .transfer-angle-label,
  #step-5 .transfer-angle-map [data-map-angle].is-probing .transfer-angle-label { font-size: 20px; }
}

/* The point must occlude both candidate lines. Their z-index is 1. */
#step-1 .coordinate-point { z-index: 4; }

/* The stage owns the only outer frame. Keep this wrapper opaque: it also masks
   the preceding angle drawing. Match the stage colour without a second rim. */
#step-3 .radian-derivation-visual {
  background: var(--apple-canvas);
  box-shadow: none;
}

/* Axes remain the stable reference for all four quadrants, including when
   narration highlights another object. Keep them weaker than the white rays. */
#step-5 .transfer-stage #transfer-circle-map > .transfer-axis {
  stroke: #77777d;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  filter: none !important;
}

/* Degree/radian blocks live outside the quarter arc, not on its stroke.
   Positions are fixed; opacity remains owned by the semantic renderer. */
#angle-memory-stage .memory-angle-label {
  transform: translate(-50%, -50%);
}
#angle-memory-stage .memory-angle-label-30 { left: 85%; top: 62%; }
#angle-memory-stage .memory-angle-label-45 { left: 73%; top: 35%; }
#angle-memory-stage .memory-angle-label-60 { left: 57%; top: 20%; }

/* KaTeX fraction glyphs are smaller than their surrounding font. A 14px
   annotation gives their numerator/denominator about 11.9 CSS px. Permanent
   angle labels remain readable when attention moves to the numeric values. */
#angle-memory-stage[data-visual-attention] .memory-angle-label { filter: none; }
#angle-memory-stage .memory-angle-label small { color: #c7c7cc; }
#angle-memory-stage .memory-angle-label small:has(.mfrac) { font-size: 14px; }

/* Full-circle annotations use one readable HTML layer at every width. Long
   equations have their own row instead of crossing the 210° and 330° rays. */
#step-5 .transfer-stage[data-melo-clip="full-circle-bridge"] {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: start;
  gap: 0.65rem;
}
#step-5 .transfer-stage[data-melo-clip="full-circle-bridge"] > #transfer-circle-map,
#step-5 .transfer-stage[data-melo-clip="full-circle-bridge"] > .transfer-mobile-annotations {
  grid-area: 1 / 1;
  width: min(100%, calc(var(--melo-stage-height, 27rem) - 1.5rem));
  max-width: none;
  aspect-ratio: 1;
  justify-self: center;
  transform: none !important;
}
#step-5 .transfer-stage[data-melo-clip="full-circle-bridge"] .transfer-bridge-full :is(.transfer-reference-label, .transfer-reference-equation),
#step-5 .transfer-stage[data-melo-clip="full-circle-bridge"] .transfer-sign-label {
  display: none;
}
#step-5 .transfer-stage[data-melo-clip="full-circle-bridge"] > .transfer-mobile-annotations {
  position: relative;
  z-index: 2;
  display: block;
  pointer-events: none;
  color: #d1d1d6;
  font: 650 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.transfer-mobile-angles,
.transfer-mobile-signs { position: absolute; inset: 0; }
.transfer-mobile-angles { opacity: var(--melo-transfer-full-reference, 0); }
.transfer-mobile-annotations span { position: absolute; white-space: nowrap; }
.transfer-mobile-angle-known { right: 3%; top: 25%; opacity: var(--melo-transfer-full-known, 0); }
.transfer-mobile-angle-left { left: 14%; top: 74%; transform: translateX(-50%); opacity: var(--melo-transfer-full-left, 0); }
.transfer-mobile-angle-right { right: 14%; top: 74%; transform: translateX(50%); opacity: var(--melo-transfer-full-right, 0); }
.transfer-mobile-signs { opacity: max(var(--melo-transfer-sign-guide, 0), var(--melo-transfer-negative-cue, 0)); }
.transfer-mobile-signs span {
  opacity: var(--melo-transfer-sign-guide, 0);
  padding-inline: 0.15rem;
  background: #09090b;
}
.transfer-mobile-sign-x-negative { left: 0; top: 50%; transform: translateY(-50%); }
.transfer-mobile-sign-x-positive { right: 0; top: 50%; transform: translateY(-50%); }
.transfer-mobile-sign-y-positive { left: 50%; top: 4%; transform: translateX(-50%); }
.transfer-mobile-signs .transfer-mobile-sign-y-negative { left: 50%; bottom: 4%; transform: translateX(-50%); opacity: max(var(--melo-transfer-sign-guide, 0), var(--melo-transfer-negative-cue, 0)); }
#step-5 .transfer-stage[data-melo-clip="full-circle-bridge"] > .transfer-mobile-equations {
  grid-area: 2 / 1;
  display: grid;
  width: min(100%, calc(var(--melo-stage-height, 27rem) - 1.5rem));
  justify-self: center;
  gap: 0.35rem;
  padding-top: 0.65rem;
  border-top: 1px solid #ffffff20;
  color: var(--apple-orange, #ff9f0a);
  font-size: 16px;
  line-height: 1.5;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
  opacity: var(--melo-transfer-full-reference, 0);
}
.transfer-mobile-equations p { margin: 0; white-space: nowrap; }
.transfer-mobile-equations [data-full-equation="left"] { opacity: var(--melo-transfer-full-left, 0); }
.transfer-mobile-equations [data-full-equation="right"] { opacity: var(--melo-transfer-full-right, 0); }
@media (max-width: 359px) {
  #step-5 .transfer-stage[data-melo-clip="full-circle-bridge"] > .transfer-mobile-annotations { font-size: 12px; }
}

/* In a compact intersection drawing the value is already shown in the linked
   control directly above. Its duplicate point callout covered the lower angle.
   Preserve the actual control/readout and both intersection-angle labels. */
@media (max-width: 720px), (max-height: 800px) {
  #step-2 .intersection-coordinate-tag { display: none; }
}

/* The clip ID records the last narration, not the active teaching mode.
   After the bridge, its captions must neither linger nor reserve grid rows. */
#step-5 .transfer-stage[data-melo-clip="full-circle-bridge"]:not(.is-circle-bridge) > :is(.transfer-mobile-annotations, .transfer-mobile-equations) {
  display: none;
}
#step-5 .transfer-stage[data-melo-clip="full-circle-bridge"]:not(.is-circle-bridge):not(.is-memory-mode) {
  grid-template-rows: 1fr;
  align-content: center;
  gap: 0;
  height: var(--melo-stage-height);
  min-height: var(--melo-stage-height);
}
#step-5 .transfer-stage[data-melo-clip="full-circle-bridge"]:not(.is-circle-bridge):not(.is-memory-mode) > #transfer-circle-map {
  width: min(calc(100% - 1rem), calc(var(--melo-stage-height) - 5rem));
  transform: translateY(1.7rem) !important;
}

/* A chosen-angle readout is explanatory content, not an overlay. Keep the
   existing diagram width (and readable SVG type); let extra text add height. */
#step-5 .transfer-stage.has-probe:not(.is-memory-mode):has(> .transfer-probe-readout:not([hidden])) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  align-content: start;
  align-items: center;
  height: auto;
  min-height: var(--melo-stage-height);
  padding: 0.75rem 0.5rem;
  gap: 0.75rem;
}
#step-5 .transfer-stage.has-probe:not(.is-memory-mode):has(> .transfer-probe-readout:not([hidden])) > .transfer-brief {
  position: relative;
  grid-area: 1 / 1;
  justify-self: center;
  top: auto;
  left: auto;
  min-width: 0;
  max-width: 100%;
  transform: none !important;
}
#step-5 .transfer-stage.has-probe:not(.is-memory-mode):has(> .transfer-probe-readout:not([hidden])) > #transfer-circle-map {
  grid-area: 2 / 1;
  justify-self: center;
  transform: none !important;
}
#step-5 .transfer-stage.has-probe:not(.is-memory-mode):has(> .transfer-probe-readout:not([hidden])) > .transfer-probe-readout {
  position: relative;
  grid-area: 3 / 1;
  justify-self: center;
  top: auto;
  left: auto;
  bottom: auto;
  width: min(100%, 22rem);
  max-width: 100%;
  min-width: 0;
  margin: 0;
  transform: none !important;
}