/* The frame (a short's canvas) and the caption presets. Captions are the
   user's output, drawn over footage, so they use the footage's own black
   and white rather than theme tokens. */

.frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 9 / 16;
  /* dobase-allow: DOB-DESIGN-RAW-COLOR the frame is the footage's own black, not a theme surface */
  background: black;
  border-radius: 10px;
  container-type: inline-size;
}
.frame-4x5 { aspect-ratio: 4 / 5 }
.frame-1x1 { aspect-ratio: 1 / 1 }
/* A clip file or a still fills the 9:16 frame from its center. */
.frame-still, .frame-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }

.caption {
  position: absolute;
  left: 7%;
  right: 7%;
  display: flex;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}
.caption-at-top { top: 11% }
.caption-at-middle { top: 50%; transform: translateY(-50%) }
.caption-at-bottom { bottom: 15% }
.caption p { margin: 0; line-height: 1.12; overflow-wrap: break-word }
.caption span { display: inline-block; margin: 0 0.12em }

/* Highlighter: heavy caps, the spoken word on the highlighter. */
/* dobase-allow: DOB-DESIGN-RAW-COLOR caption text is white over footage, as in the exported short */
.caption-highlighter { font-weight: 900; font-size: 9cqi; text-transform: uppercase; color: white; letter-spacing: -0.01em }
.caption-highlighter span { text-shadow: 0 0.05em 0 #000, 0 0 0.18em rgb(0 0 0 / 0.55) }
.caption-highlighter .now {
  background: var(--app-field);
  color: var(--app-field-ink);
  text-shadow: none;
  padding: 0 0.12em;
  border-radius: 0.1em;
}
/* Bold white: heavy caps with a hard shadow, the spoken word yellow. */
/* dobase-allow: DOB-DESIGN-RAW-COLOR caption text is white over footage, as in the exported short */
.caption-bold { font-weight: 900; font-size: 9.5cqi; text-transform: uppercase; color: white }
.caption-bold span { text-shadow: 0.05em 0.05em 0 #000, -0.03em -0.03em 0 #000, 0.03em -0.03em 0 #000, -0.03em 0.03em 0 #000 }
.caption-bold .now { color: var(--app-field) }
/* Boxed: sentence case on a black box, unspoken words dimmed. */
.caption-boxed { font-weight: 700; font-size: 7cqi }
.caption-boxed p { padding: 0.18em 0.4em; border-radius: 0.2em; background: rgb(0 0 0 / 0.8); color: rgb(255 255 255 / 0.62) }
/* dobase-allow: DOB-DESIGN-RAW-COLOR caption text is white over footage, as in the exported short */
.caption-boxed .now, .caption-boxed .said { color: white }
/* Quiet: small, light, for talk that should not shout. */
/* dobase-allow: DOB-DESIGN-RAW-COLOR caption text is white over footage, as in the exported short */
.caption-quiet { font-weight: 500; font-size: 6cqi; color: rgb(255 255 255 / 0.55) }
.caption-quiet span { text-shadow: 0 0.06em 0.2em rgb(0 0 0 / 0.7) }
/* dobase-allow: DOB-DESIGN-RAW-COLOR caption text is white over footage, as in the exported short */
.caption-quiet .now { color: white }