/* Project explanations share Giro's scene; only their controls take input. */
.scene-annotation-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  container: annotations / size;
}
.scene-annotation-layer[hidden],
.scene-annotation-card[hidden],
.scene-annotation-scroll[hidden],
.scene-annotation-marker[hidden],
.scene-annotation-camera-label[hidden],
.scene-annotation-distance-label[hidden],
.scene-annotation-baseline-label[hidden],
.scene-annotation-angle-label[hidden],
.scene-annotation-candidate[hidden],
.scene-annotation-figure[hidden],
.scene-annotation-photos[hidden],
.scene-annotation-photo-point[hidden],
.scene-annotation-depth-point[hidden],
.scene-annotation-depth-control[hidden],
.scene-annotation-depth-status[hidden],
.scene-annotation-photo-status[hidden],
.scene-annotation-copy[hidden],
.scene-annotation-actions[hidden],
.scene-annotation-action[hidden],
.scene-annotation-back[hidden],
.scene-annotation-progress[hidden],
.scene-annotation-caption[hidden],
.scene-capture-feedback [hidden],
.scene-capture-feedback[hidden],
.scene-annotation-description[hidden] { display: none !important; }
.scene-annotation-marker {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: none;
  color: #263535;
  font: 12px/1.4 system-ui, sans-serif;
  white-space: nowrap;
  cursor: pointer;
  pointer-events: auto;
  touch-action: none;
}
.scene-annotation-marker-label {
  position: absolute;
  left: 50%;
  bottom: calc(50% + 10px);
  transform: translateX(-50%);
  padding: 8px 12px;
  background: #fcfcfbe6;
  opacity: var(--label-reveal, 0);
  pointer-events: var(--label-input, none);
}
.scene-annotation-marker-label::after {
  content: '\2197';
  display: inline-block;
  flex: 0 0 auto;
  margin-inline-start: .4em;
  text-decoration: none;
}
.scene-annotation-marker:focus-visible .scene-annotation-marker-label { opacity: 1; pointer-events: auto; }
.scene-annotation-marker::after {
  content: '';
  box-sizing: border-box;
  position: absolute;
  top: calc(50% - 4px);
  left: calc(50% - 4px);
  width: 8px;
  height: 8px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #315e6e;
}
.scene-annotation-marker:not(.scene-annotation-callout)[aria-expanded='true'] .scene-annotation-marker-label { display: none; }
.scene-annotation-marker:not(.scene-annotation-callout)[aria-expanded='true']::after {
  top: calc(50% - 9px);
  left: calc(50% - 9px);
  width: 18px;
  height: 18px;
  background: transparent;
  box-shadow: 0 0 0 1px #315e6e;
}
/* Discovery and opacity are separate. A sudden zoom or angle change still
   fades from the currently painted opacity, without an extra render loop. */
.scene-annotation-marker.scene-annotation-callout {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 190px;
  height: auto;
  min-height: 44px;
  font-size: 12px;
  white-space: normal;
  text-align: center;
  opacity: var(--callout-opacity, 0);
  visibility: hidden;
  pointer-events: none;
  transition: opacity 280ms ease, visibility 0s linear 280ms;
}
.scene-annotation-callout[data-visible='true'] {
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
.scene-annotation-callout::after { content: none; }
.scene-annotation-callout .scene-annotation-marker-label {
  position: relative;
  left: auto;
  bottom: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  transform: none;
  opacity: 1;
  pointer-events: inherit;
}
@media (prefers-reduced-motion: reduce) {
  .scene-annotation-marker.scene-annotation-callout { transition: none; }
}
.scene-annotation-camera-label,
.scene-annotation-baseline-label,
.scene-annotation-angle-label,
.scene-annotation-distance-label {
  padding: 1px 5px;
  border-radius: 2px;
  background: #fffffff0;
  font: 12px/1.4 ui-monospace, monospace;
  pointer-events: none;
}
.scene-annotation-distance-label { margin-top: -5px; color: #315e6e; }
/* Keep text clear of the camera symbol even when its world-space offset
   projects to less than a pixel. Framing includes this screen-space gap. */
.scene-annotation-camera-label { margin-top: -4px; }
.scene-annotation-baseline-label { color: #58625d; white-space: nowrap; }
.scene-annotation-card {
  position: absolute;
  right: var(--inset-right);
  bottom: calc(var(--bottom-inset) + var(--footer-controls) + 12px);
  /* Width and height both constrain the card, including landscape phones. */
  width: min(calc(100% - var(--inset-left) - var(--inset-right)), clamp(350px, min(calc(var(--viewport-width) * .44), calc(var(--viewport-height) * .92)), 900px));
  --panel-space: calc(100cqh - var(--header-top) - var(--bottom-inset) - var(--header-controls) - var(--footer-controls) - 24px);
  display: flex;
  flex-direction: column;
  container: lesson-panel / inline-size;
  max-height: var(--panel-space);
  overflow: hidden;
  padding: 12px 16px;
  border: 0;
  border-radius: 0;
  background: #fcfcfb;
  color: #414847;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  pointer-events: auto;
  touch-action: pan-y pinch-zoom;
}
.scene-annotation-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px 44px;
  align-items: start;
  flex: none;
  margin-bottom: 6px;
}
.scene-annotation-scroll {
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  touch-action: pan-y pinch-zoom;
  overflow-wrap: anywhere;
}
.scene-annotation-scroll:focus-visible { outline: 1px solid #68726c; outline-offset: -1px; }
.scene-annotation-title {
  color: #202726;
  font-size: 1.125em;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.015em;
  padding-top: 9px;
  overflow-wrap: anywhere;
}
.scene-annotation-close,
.scene-annotation-toggle {
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: #626967;
  font-size: 0;
  cursor: pointer;
}
.scene-annotation-toggle::before {
  content: '';
  position: absolute;
  left: 17px;
  top: 16px;
  width: 9px;
  height: 9px;
  border-right: 1.25px solid currentColor;
  border-bottom: 1.25px solid currentColor;
  transform: rotate(45deg);
}
.scene-annotation-toggle[aria-expanded='false']::before { top: 20px; transform: rotate(225deg); }
.scene-annotation-toggle:hover { color: #202726; background: #20282808; }
.scene-annotation-toggle:focus-visible { outline-offset: -2px; }
.scene-annotation-close::before,
.scene-annotation-close::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 1.25px;
  background: currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}
.scene-annotation-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.scene-annotation-close:hover { color: #202726; background: #20282808; }
.scene-annotation-close:focus-visible { outline-offset: 0; }
.scene-annotation-figure { position: relative; min-width: 0; margin: 0; }
.scene-annotation-photo { position: relative; display: block; overflow: hidden; cursor: zoom-in; background: #eef0ec; }
.scene-annotation-photo-plane { position: absolute; inset: 0; }
.scene-annotation-image { position: absolute; display: block; max-width: none; height: auto; }
.scene-annotation-photo-point {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid white;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #315e6e;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.scene-annotation-depth-point,
.scene-annotation-candidate {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c45c23;
  box-shadow: 0 0 0 1px #fff;
  pointer-events: none;
}
.scene-annotation-depth-point { position: absolute; transform: translate(-50%, -50%); }
.scene-annotation-candidate { width: 10px; height: 10px; box-shadow: 0 0 0 2px #fff; }
.scene-annotation-photo-status { position: absolute; inset: 0; display: grid; align-content: center; padding: 8px; font-size: 12px; text-align: center; }
.scene-annotation-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 4px 0 8px; }
.scene-annotation-caption { position: absolute; left: 5px; top: 5px; padding: 1px 4px; border-left: 2px solid var(--sightline-color); background: #fffffff0; color: var(--sightline-color); font-size: max(12px, .85em); line-height: 1.5; pointer-events: none; }
/* Keep the adjustable value with its label, beside the control. Both
   explanations use this layout at every width, with a full touch target. */
.scene-annotation-depth-control,
.fill-level-control {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  column-gap: 16px;
  min-height: 48px;
}
.scene-annotation-depth-control { margin-top: 8px; --range-color: #b95120; }
.fill-level-control { margin-bottom: 8px; --range-color: #876648; }
.scene-annotation-depth-heading,
.fill-control-heading { display: grid; min-width: 7ch; }
.scene-annotation-distance,
.fill-level-value { font-variant-numeric: tabular-nums; color: var(--range-color); white-space: nowrap; }
/* Keep the native range interaction, with the same visible control in Safari,
   Chromium and Firefox. Vendor pseudo-elements need separate rules. */
:is(.scene-annotation-depth, .fill-level) {
  display: block;
  min-width: 0;
  width: 100%;
  height: 44px;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  --range-thumb-size: 24px;
  --range-progress: 0%;
  --range-track: #858f89;
  --range-fill: linear-gradient(to right, var(--range-color) var(--range-progress), var(--range-track) var(--range-progress));
  touch-action: pan-y pinch-zoom;
  cursor: ew-resize;
}
:is(.scene-annotation-depth, .fill-level)::-webkit-slider-runnable-track {
  height: 2px;
  border: 0;
  border-radius: 0;
  /* Native thumb centres travel from half a thumb-width inside each edge.
     Paint only that interval, so the handle reaches both visible endpoints. */
  background: var(--range-fill) center / calc(100% - var(--range-thumb-size)) 100% no-repeat;
  box-shadow: none;
}
:is(.scene-annotation-depth, .fill-level)::-moz-range-track {
  height: 2px;
  border: 0;
  border-radius: 0;
  background: var(--range-fill) center / calc(100% - var(--range-thumb-size)) 100% no-repeat;
  box-shadow: none;
}
:is(.scene-annotation-depth, .fill-level)::-moz-range-progress {
  height: 2px;
  border: 0;
  background: transparent;
}
/* Paint a 6 × 18 px handle inside a 24 px draggable thumb. */
:is(.scene-annotation-depth, .fill-level)::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: var(--range-thumb-size);
  height: var(--range-thumb-size);
  margin-top: -11px;
  padding: 3px 9px;
  border: 0;
  border-radius: 0;
  background: var(--range-color);
  background-clip: content-box;
  box-shadow: none;
}
:is(.scene-annotation-depth, .fill-level)::-moz-range-thumb {
  box-sizing: border-box;
  width: var(--range-thumb-size);
  height: var(--range-thumb-size);
  padding: 3px 9px;
  border: 0;
  border-radius: 0;
  background: var(--range-color);
  background-clip: content-box;
  box-shadow: none;
}
:is(.scene-annotation-depth, .fill-level):focus-visible {
  outline: 2px solid var(--range-color);
  outline-offset: 2px;
}
@media (forced-colors: active) {
  input:is(.scene-annotation-depth, .fill-level) {
    --range-color: ButtonText;
    --range-track: CanvasText;
  }
  :is(.scene-annotation-depth, .fill-level)::-webkit-slider-thumb { forced-color-adjust: none; }
  :is(.scene-annotation-depth, .fill-level)::-moz-range-thumb { forced-color-adjust: none; }
  :is(.scene-annotation-depth, .fill-level)::-webkit-slider-runnable-track { forced-color-adjust: none; }
  :is(.scene-annotation-depth, .fill-level)::-moz-range-track { forced-color-adjust: none; }
}
.scene-annotation-depth-status { margin-top: 6px; }
.scene-annotation-card[data-aligned='true'] .scene-annotation-depth-status { color: #315e6e; }
.scene-annotation-actions { display: flex; flex: none; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 16px; margin-top: 8px; }
.scene-annotation-action,
.scene-annotation-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: #263d3a;
  font: inherit;
  font-size: .92em;
  font-weight: 500;
  text-underline-offset: 4px;
  cursor: pointer;
}
.scene-annotation-action { margin-left: auto; max-width: 100%; }
.scene-annotation-action::after,
.scene-annotation-back::before {
  content: '';
  flex: 0 0 5px;
  width: 5px;
  height: 5px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}
.scene-annotation-back::before { transform: rotate(-135deg); }
.scene-annotation-action:hover,
.scene-annotation-back:hover { text-decoration: underline; }
.scene-annotation-progress { margin-right: auto; color: #68726c; font-size: max(12px, .8em); font-variant-numeric: tabular-nums; }
.scene-annotation-copy p + p { margin-top: .65em; }
.scene-annotation-body { min-width: 0; }
.scene-annotation-description p + p { margin-top: 8px; }
.scene-annotation-card[data-kind='note'] { max-width: 390px; }

/* Both photos remain visible: matching positions can be compared while the
   point moves. Landscape places the controls alongside the pair. */
.scene-annotation-card[data-kind='lesson'] {
  width: min(calc(100% - var(--inset-left) - var(--inset-right)), clamp(420px, 44cqw, 650px));
}
/* Introduce each full photograph with its own sightline before pairing the
   details. Bound the image by the available height as well as its width. */
.scene-annotation-card[data-stage^='photo-'] .scene-annotation-photos { grid-template-columns: minmax(0, 1fr); }
.scene-annotation-card[data-stage^='photo-'] .scene-annotation-figure {
  width: min(100%, calc(33cqh * var(--photo-aspect)));
  margin-inline: auto;
}
@container annotations (max-height: 600px) and (min-width: 600px) {
  .scene-annotation-card[data-kind='note'] {
    width: min(calc(100% - var(--inset-left) - var(--inset-right)), 390px);
  }
  .scene-annotation-card[data-kind='lesson'] {
    width: min(calc(100% - var(--inset-left) - var(--inset-right)), 66cqw, 560px);
    padding: 10px 14px;
  }
  .scene-annotation-card[data-kind='lesson'] .scene-annotation-scroll {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 7.5em), 1fr));
    gap: 0 12px;
  }
  .scene-annotation-card[data-kind='lesson'] .scene-annotation-photos,
  .scene-annotation-card[data-kind='lesson'] .scene-annotation-body { grid-column: auto; grid-row: auto; }
  .scene-annotation-card[data-kind='lesson'] .scene-annotation-figure {
    width: min(100%, calc(27cqh * var(--photo-aspect)));
    justify-self: center;
  }
  .scene-annotation-card[data-kind='lesson'][data-stage='capture'] {
    max-width: none;
  }
  .scene-annotation-card:is([data-stage='capture'], [data-stage='triangulation']) .scene-annotation-scroll { display: block; }
}
/* Keep each introductory photograph beside its explanation, without a
   trailing line wrapping underneath. Paired details stay side by side. */
@container annotations (max-width: 600px) {
  .scene-annotation-card {
    padding: 8px 14px;
    /* Reserve a useful scene above the panel. At extreme magnification allow
       enough room for its fixed controls and a few lines of readable content. */
    max-height: min(var(--panel-space), max(48cqh, 12rem));
  }
  .scene-annotation-heading { margin-bottom: 6px; }
  .scene-annotation-card[data-stage^='photo-'] .scene-annotation-scroll {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 7.5em), 1fr));
    column-gap: 12px;
  }
  .scene-annotation-card[data-stage^='photo-'] .scene-annotation-photos {
    align-self: start;
    margin: 0;
  }
  .scene-annotation-card[data-stage^='photo-'] .scene-annotation-figure { width: 100%; }
  .scene-annotation-card:is([data-stage='matching'], [data-stage='compare']) .scene-annotation-figure {
    width: min(100%, calc(14cqh * var(--photo-aspect)));
    justify-self: center;
  }
  .scene-annotation-card:is([data-kind='lesson'], .fill-lesson) .scene-annotation-actions {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    gap: 8px;
  }
  .scene-annotation-card:is([data-kind='lesson'], .fill-lesson) .scene-annotation-back { grid-column: 1; }
  .scene-annotation-card:is([data-kind='lesson'], .fill-lesson) .scene-annotation-progress { grid-column: 2; }
  .scene-annotation-card:is([data-kind='lesson'], .fill-lesson) .scene-annotation-action { grid-column: 3; justify-self: end; text-align: right; }
  .scene-annotation-depth-control { margin-top: 4px; }
}
.scene-annotation-card[data-stage='triangulation'] { max-width: 44ch; }
.scene-annotation-card[data-stage='capture'] { max-width: 44ch; }
.scene-capture-feedback { margin-top: 10px; }
.scene-capture-retry { min-width: 44px; min-height: 44px; padding: 0; border: 0; background: none; color: #263d3a; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* Use the available width on short portrait screens. */
@container annotations (max-width: 600px) and (max-height: 700px) {
  .scene-annotation-card:is([data-kind='lesson'], [data-kind='note']) {
    right: max(12px, env(safe-area-inset-right));
    width: calc(100% - max(12px, env(safe-area-inset-left)) - max(12px, env(safe-area-inset-right)));
    padding-inline: 12px;
  }
}
@media (max-width: 600px) {
  .scene-annotation-marker { max-width: 220px; }
}

/* Each fill panel has one main action and a short explanation. */
.fill-lesson { width: min(calc(100% - var(--inset-left) - var(--inset-right)), 430px); font-family: inherit; line-height: 1.5; }
.fill-lesson :is(.scene-annotation-action, .scene-annotation-back, .scene-annotation-progress) { font-size: inherit; }
.fill-lesson [hidden] { display: none !important; }
.fill-lesson :is(button, input):disabled { opacity: .45; cursor: default; }
.fill-copy { margin-bottom: 16px; }
.fill-status { padding-block: 4px 12px; }
.fill-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.fill-metrics { margin-block: 0 12px; }
.fill-volume, .fill-compacted, .fill-delivered { font-variant-numeric: tabular-nums; font-weight: 500; color: #263d3a; white-space: nowrap; }
.fill-focus-patch, .fill-retry {
  padding: 0; min-height: 44px; border: 0; background: none; color: inherit;
  font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.fill-delivery-note { margin-block: 6px 10px; }
.fill-delivery-details summary { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; list-style: none; }
.fill-delivery-details summary::before { content: '+'; width: 1ch; }
.fill-delivery-details[open] summary::before { content: '−'; }
.fill-delivery-details summary:focus-visible { outline: 2px solid #263d3a; outline-offset: 2px; }
.fill-delivery-source { color: inherit; text-underline-offset: 3px; }
.fill-materials { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 0; margin: 0 0 8px; border: 0; min-width: 0; }
.fill-material-legend, .fill-material {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.fill-material-option { display: flex; position: relative; min-height: 44px; align-items: stretch; cursor: pointer; }
.fill-material-option span { display: flex; align-items: center; justify-content: center; flex: 1; border-bottom: 2px solid transparent; }
.fill-material:checked + span { color: #263d3a; border-bottom: 2px solid currentColor; font-weight: 500; }
.fill-material:focus-visible + span { outline: 2px solid #263d3a; outline-offset: 3px; }
.fill-material:disabled + span { opacity: .45; cursor: default; }
.fill-delivery-results { margin-bottom: 8px; }
.fill-delivery-results .fill-total { flex-wrap: wrap; gap: 0 12px; }
.fill-delivery-results output { margin-left: auto; }
.fill-compacted { font-weight: 400; color: inherit; }
.fill-factor { font-variant-numeric: tabular-nums; white-space: nowrap; }
.fill-surface-controls { display: flex; gap: 24px; margin-block: 0 6px; }
.fill-surface-controls button {
  min-height: 44px; padding: 0; border: 0; background: none; color: #555e5b;
  font: inherit; text-decoration: underline; text-underline-offset: 4px; cursor: pointer;
}
.fill-surface-controls button[aria-pressed='true'] { color: #263d3a; text-decoration-thickness: 2px; }
.fill-actions { margin-top: 4px; }
.fill-delivery-total { margin-top: 4px; padding-top: 4px; border-top: 1px solid #b9c0bd; }
.fill-dimensions { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; color: #683b1e; }
.fill-dimensions[data-visible='true'] { opacity: 1; transition: opacity var(--dimension-fade-duration, 180ms) ease-out; }
.fill-dimension path { fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; }
.fill-dimension text { fill: currentColor; stroke: #fcfcfb; stroke-width: 2px; paint-order: stroke fill; font: 16px/1.5 system-ui, sans-serif; }
@container annotations (max-width: 360px) {
  .fill-lesson { padding: 10px 14px; }
  .fill-copy { margin-bottom: 10px; }
  .fill-metrics { margin-bottom: 8px; }
  .fill-lesson .scene-annotation-actions { gap: 8px; }
}
@container annotations (max-height: 600px) and (min-width: 600px) {
  .fill-lesson { width: min(58cqw, 480px); padding: 10px 14px; }
  .fill-lesson .scene-annotation-heading { min-height: 20px; margin-bottom: 4px; }
  .fill-contents {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px;
    grid-template-areas: 'copy copy' 'control detail' 'metrics detail';
  }
  .fill-copy { grid-area: copy; margin-bottom: 8px; }
  .fill-level-control, .fill-surface-controls { grid-area: control; }
  .fill-metrics { grid-area: metrics; margin-block: 4px; }
  .fill-measure-controls { grid-area: detail; }
  .fill-measure-controls { min-width: 0; }
  /* Leave the canvas centre clear for the upright column and its base labels. */
  .fill-lesson[data-stage='measure'] { width: min(480px, calc(50cqw - 80px)); }
  .fill-lesson[data-stage='measure'] .fill-contents {
    grid-template-areas: 'copy copy' 'control control' 'detail detail';
  }
  .fill-lesson[data-stage='whole'] .fill-contents {
    grid-template-areas: 'copy control' 'copy metrics';
  }
  .fill-lesson[data-stage='quantity'] .fill-contents {
    grid-template-areas: 'copy copy' 'control detail' 'materials detail' 'note note';
  }
  .fill-lesson[data-stage='quantity'] .fill-copy { margin-bottom: 4px; }
  .fill-lesson[data-stage='quantity'] .fill-metrics { margin-bottom: 4px; }
  .fill-delivery { display: contents; }
  .fill-materials { grid-area: materials; gap: 8px; margin-bottom: 8px; }
  .fill-delivery-results { grid-area: detail; align-self: center; margin-bottom: 8px; }
  .fill-delivery-details { grid-area: note; }
  .fill-delivery-note { margin: 0; }
}

@container annotations (max-width: 600px) {
  .fill-lesson { padding: 10px 14px; }
  .fill-copy { margin-bottom: 10px; }
  .fill-lesson[data-stage='quantity'] .fill-contents {
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 12px;
    grid-template-areas: 'copy copy' 'control control' 'materials materials' 'detail detail' 'note note';
  }
  .fill-lesson[data-stage='quantity'] .fill-copy { grid-area: copy; }
  .fill-lesson[data-stage='quantity'] .fill-level-control { grid-area: control; }
  .fill-lesson[data-stage='quantity'] .fill-delivery { display: contents; }
  .fill-lesson[data-stage='quantity'] .fill-materials { grid-area: materials; margin-bottom: 4px; }
  .fill-lesson[data-stage='quantity'] .fill-delivery-results { grid-area: detail; margin-bottom: 4px; }
  .fill-lesson[data-stage='quantity'] .fill-delivery-details { grid-area: note; }
}

/* React to the panel's width relative to its text, including enlarged browser
   fonts. Stacking fields keeps usable sliders rather than a few pixels of track. */
@container lesson-panel (max-width: 20em) {
  .scene-annotation-depth-control, .fill-level-control { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .scene-annotation-depth-heading, .fill-control-heading { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 12px; }
  .fill-contents, .fill-lesson[data-stage] .fill-contents { display: block; }
  .fill-delivery { display: block; }
  .fill-total { flex-wrap: wrap; gap: 0 12px; }
  .fill-total output { margin-left: auto; }
  .scene-annotation-card:is([data-kind], .fill-lesson) .scene-annotation-actions { display: flex; gap: 0 12px; }
}