/* The figure rules of a page document (CR-17 #1671, slice 3) — ONE source
   for both audiences. The renderer (`cms/render.py`) builds the markup
   `figure.prose-figure.prose-figure--<placement>`, the editor
   (`document-editor.js`) builds the same inside her surface, so the author
   sees what the visitor gets — the parity #1230 guarded for Trix sizes,
   now for the document's placements. Hand-written and NOT generated:
   build-css.sh scans templates, and markup a renderer or script builds
   must not depend on a class that happens to be generated. Both shells
   define the same tokens (--ink, --ink-soft, --line), so this file rides
   on them; the site links her in `site_base.html`, the editor pages get
   her from the `ui.document_editor` macro (never the admin shell: the
   pages without an editor carry nothing of the editor's, B4).

   The look is the prose rule of CR-17 §C4.8: the public card radius
   (14 px) and the one soft card shadow of CR-11 beslissing 01 — from the
   prose rules, never from the file, so every figure on the site wears
   the same face. */

.prose-raak figure.prose-figure {
  margin: 1rem 0;
}

.prose-raak figure.prose-figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
}

/* The caption the author wrote in the dialog: a small line under the
   picture, soft ink — the visitor reads her as a caption and not as body
   text. */
.prose-raak figure.prose-figure figcaption {
  margin-top: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.375rem;
  color: var(--ink-soft);
}

/* The placements (schema.py's FIGURE_PLACEMENTS — the gate
   test_figure_placements_1671.py keeps this file and that tuple from
   drifting apart). `full` is the default: width of the text column, the
   same as a figure without a placement, so a converted figure (no
   placement, slice 1's migration) renders like a full one. */
.prose-raak figure.prose-figure--full {
  max-width: 100%;
}

/* A picture beside the text: half the column, floating, with the text
   flowing along her side — the layout the walkthrough names ("the text
   flows left of the picture"). */
.prose-raak figure.prose-figure--left {
  float: left;
  max-width: 50%;
  margin: 0.25rem 1rem 0.5rem 0;
}

.prose-raak figure.prose-figure--right {
  float: right;
  max-width: 50%;
  margin: 0.25rem 0 0.5rem 1rem;
}

/* A small picture: a third of the column, standing free in the middle —
   a portrait between two paragraphs, not a picture glued to a text
   line. */
.prose-raak figure.prose-figure--small {
  float: none;
  max-width: 33%;
  margin-left: auto;
  margin-right: auto;
}

/* Under 640 px the placements fall away, as #1207 decided for the Trix
   sizes: the column is 358 px on a 390 px screen, so a floated half is
   179 px wide and unreadable with text beside her. A full-width picture
   beats an unreadable one; floats also break the reading order on a
   phone. */
@media (max-width: 640px) {
  .prose-raak figure.prose-figure--left,
  .prose-raak figure.prose-figure--right,
  .prose-raak figure.prose-figure--small {
    float: none;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

/* A video of the library (CR-64 phase 7, concept 10a): the browser's own
   player over the full width of the reading column, with the figure's
   radius and shadow, and the duration as a small line under it. The
   editor builds the same markup, so the author sees the visitor's block. */
.prose-raak figure.prose-video {
  clear: both;
  margin: 1rem 0;
}

.prose-raak figure.prose-video video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--line);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
}

.prose-raak figure.prose-video figcaption {
  margin-top: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.375rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

/* Own code in its frame (CR-68 C4.1, C4.2): the full width of its section, as a full figure
   and a cards block (#2661; `build-css.sh` keeps it out of the 768 px cap), no border, 320 px until the frame reports the height of its
   content (`frame-height.js` sets it, between 120 and 4 000 px). The same
   in the hero, where the frame takes the picture's place. */
figure.prose-code-frame {
  clear: both;
  margin: 1rem 0;
}

figure.prose-code-frame iframe {
  display: block;
  width: 100%;
  height: 320px;
  border: 0;
}

/* The editor's placeholder of *Eigen code* (CR-68 C4.1): the block's name with what it shows,
   and the code as text. The editor never runs the code; the preview shows it in its frame. */
figure.prose-code-placeholder {
  clear: both;
  margin: 1rem 0;
  padding: 12px 16px;
  border: 1px dashed var(--line);
  border-radius: 14px;
  cursor: pointer;
}

figure.prose-code-placeholder .prose-code-placeholder-name {
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
}

figure.prose-code-placeholder .prose-code-placeholder-code {
  margin: 0;
  max-height: 10rem;
  overflow: hidden;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-all;
  color: var(--ink-soft);
}