/* Quill 2 inside the design system's .rte paper. Loaded after vendor/quill/quill.core.css.
   The container is .rte__area (Quill adds .ql-container); the writing surface is .ql-editor. */
.rte__area.ql-container { height: auto; font-family: var(--font-content); font-size: var(--fs-md); line-height: var(--lh-loose); }
.rte__area .ql-editor { padding: 0; min-height: 340px; overflow: visible; color: #241f1a; white-space: pre-wrap; }
.rte__area .ql-editor p + p, .rte__area .ql-editor p + h3, .rte__area .ql-editor h3 + p,
.rte__area .ql-editor p + blockquote, .rte__area .ql-editor blockquote + p,
.rte__area .ql-editor p + ol, .rte__area .ql-editor ol + p, .rte__area .ql-editor p + ul, .rte__area .ql-editor ul + p { margin-top: var(--sp-4); }
.rte__area .ql-editor h3 { font-family: var(--font-content); font-weight: var(--fw-semibold, 600); font-size: 1.15em; line-height: 1.3; }
.rte__area .ql-editor blockquote { margin: 0; padding-left: var(--sp-4); border-left: 3px solid var(--amber-500); color: #4a443d; font-style: italic; }
.rte__area .ql-editor a { color: var(--amber-700); text-decoration: underline; }
.rte__area .ql-editor img { max-width: 100%; height: auto; display: block; margin: var(--sp-3) 0; }
/* A YouTube video (js/editor.js registerVideo): its thumbnail with a play mark, the way the site shows it before a tap. */
.rte__area .ql-editor .article-video { position: relative; max-width: 560px; margin: var(--sp-3) 0; aspect-ratio: 16 / 9; background: #131110; border-radius: var(--r-md); overflow: hidden; }
.rte__area .ql-editor .article-video a { pointer-events: none; }
.rte__area .ql-editor .article-video img { width: 100%; height: 100%; margin: 0; object-fit: cover; }
.rte__area .ql-editor .article-video::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 56px; height: 40px; margin: -20px 0 0 -28px; border-radius: 10px;
  background: rgba(19, 17, 16, 0.82) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / 22px no-repeat;
}
/* A picture (js/editor.js registerFigure): the photo with its caption and credit, as the site shows it; a click opens the
   picture dialog (js/pictures.js). A tall photo stops at 420 px here - the site holds it to the screen's height. */
.rte__area .ql-editor .article-figure { margin: var(--sp-3) 0; cursor: pointer; border-radius: var(--r-md); outline: 2px solid transparent; outline-offset: 4px; transition: outline-color .12s; }
.rte__area .ql-editor .article-figure:hover { outline-color: var(--amber-500); }
.rte__area .ql-editor .article-figure img { width: auto; max-width: 100%; max-height: 420px; margin: 0; }
.rte__area .ql-editor .article-figure figcaption { margin-top: 6px; font-family: var(--font-ui); font-size: var(--fs-xs); line-height: 1.5; font-style: italic; color: #5c554d; white-space: normal; }
.rte__area .ql-editor .article-figure-credit { font-style: normal; color: #7a7269; }
.rte__area .ql-editor.ql-blank::before { color: #8a847c; font-style: italic; left: 0; right: 0; }
.rte__area .ql-editor ol, .rte__area .ql-editor ul { padding-left: 1.5em; }
.rte__area .ql-editor li { padding-left: 0.25em; }
.rte__area .ql-editor li > .ql-ui { left: -1.5em; }

/* ---- Lead image: focal point picker (js/media.js) -------------------------- */
.dropzone.is-compact { min-height: 0; padding: var(--sp-2) var(--sp-3); flex-direction: row; gap: var(--sp-2); font-size: var(--fs-xs); }
.dropzone.is-compact .dropzone__prompt { flex-direction: row; gap: var(--sp-2); align-items: center; }
.dropzone.is-compact .dropzone__prompt .icon--lg { width: 18px; height: 18px; }
.dropzone.is-compact .dropzone__prompt .field__hint { display: none; }
.focal { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-3); }
.focal__stage { position: relative; width: 100%; aspect-ratio: 3 / 2; background: var(--surface-sunken); border-radius: var(--r-md); overflow: hidden; cursor: crosshair; }
.focal__stage img { width: 100%; height: 100%; object-fit: contain; display: block; }
.focal__dot { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; border: 2px solid #fff; background: var(--amber-500);
  box-shadow: 0 0 0 2px rgba(0,0,0,.45), 0 0 0 6px rgba(255,255,255,.15); pointer-events: none; }
.focal__previews { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--sp-2); }
.focal__preview { margin: 0; width: 100%; overflow: hidden; border-radius: var(--r-sm); background: var(--surface-sunken); position: relative; }
.focal__preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.focal__preview figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 6px; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: rgba(0,0,0,.45); }
.focal__status { font-size: var(--fs-xs); color: var(--text-3); min-height: 1.2em; }
.focal__status[data-tone="ok"] { color: var(--success-fg); }
.focal__status[data-tone="busy"] { color: var(--amber-300); }
.focal__status[data-tone="error"] { color: var(--danger-fg); }
.focal__status[data-tone="info"] { color: var(--text-2); }

/* ---- The body's picture dialog (js/pictures.js) ------------------------------ */
.picture-dialog { width: min(760px, calc(100vw - 32px)); }
.picture-pick { display: flex; flex-direction: column; gap: var(--sp-3); }
.picture-pick__bar { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.picture-pick__bar .input { flex: 1 1 180px; width: auto; min-width: 0; }
.picture-pick__bar .select { flex: 0 0 auto; width: auto; }
.picture-pick__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-height: 26px; }
.picture-pick__foot .field__hint[data-tone="error"], .picture-details .field__hint[data-tone="error"] { color: var(--danger-fg); }
.picture-details .field__hint[data-tone="ok"] { color: var(--success-fg); }
.picture-details .field__hint[data-tone="busy"], .picture-pick__foot .field__hint[data-tone="busy"] { color: var(--amber-300); }
.picture-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-2); max-height: 52vh; overflow-y: auto; padding: 2px; }
.picture-tile { display: flex; flex-direction: column; gap: 4px; padding: 0 0 6px; text-align: left; cursor: pointer; overflow: hidden;
  background: var(--surface-raised); border: 1px solid var(--rule); border-radius: var(--r-md); color: var(--text-2); font: inherit; }
.picture-tile:hover, .picture-tile:focus-visible { border-color: var(--amber-500); color: var(--text); }
.picture-tile img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--surface-sunken); }
.picture-tile__text { padding: 0 6px; font-size: var(--fs-xs); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.picture-details { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
.picture-details__preview { background: var(--surface-sunken); border-radius: var(--r-md); overflow: hidden; display: flex; justify-content: center; }
.picture-details__preview img { display: block; max-width: 100%; max-height: 340px; object-fit: contain; }
.picture-details__fields { display: flex; flex-direction: column; gap: var(--sp-3); }
.picture-details__back { align-self: flex-start; }
@media (max-width: 560px) { .picture-details { grid-template-columns: 1fr; } }
/* The video dialog (29 Oct 2026, js/videos.js): the picture readers see first, 16:9 like the page's; the file's fields only for a file. */
.video-dialog__preview { aspect-ratio: 16 / 9; align-items: center; }
.video-dialog__preview img { width: 100%; height: 100%; max-height: none; object-fit: cover; }
.video-dialog__file { display: flex; flex-direction: column; gap: var(--sp-3); }
.video-dialog .field__hint[data-tone="error"] { color: var(--danger-fg); }
.video-dialog .field__hint[data-tone="ok"] { color: var(--success-fg); }

/* ---- Fact boxes and the Series card (21 Oct 2026, TODO B.46: Claude Design "Editor with Fact box and Series") ---- */

/* Fact box in the text (js/editor.js registerFactbox): one block, the way .article-figure is. Both. */
.rte__area .ql-editor .article-factbox { display: flex; flex-direction: column; gap: 4px; margin: var(--sp-3) 0;
  padding: var(--sp-3) var(--sp-4); background: #eceae4; border: 1px solid var(--paper-rule); border-radius: var(--r-md);
  font-family: var(--font-ui); white-space: normal; cursor: pointer; user-select: none;
  outline: 2px solid transparent; outline-offset: 4px; transition: outline-color .12s; }
.rte__area .ql-editor .article-factbox:hover,
.rte__area .ql-editor .article-factbox:focus-visible { outline-color: var(--amber-500); }
.rte__area .ql-editor .article-factbox__kicker { font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-kicker);
  text-transform: uppercase; color: #6b655d; }
.rte__area .ql-editor .article-factbox__title { font-family: var(--font-content); font-size: var(--fs-lg); font-weight: var(--fw-semi);
  line-height: var(--lh-snug); color: #131110; }
.rte__area .ql-editor .article-factbox__preview { font-size: var(--fs-sm); line-height: var(--lh-snug); color: var(--text-inverse-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* The fact box dialog (js/factbox.js). Both. */
.factbox-dialog { width: min(760px, calc(100vw - 32px)); }
.factbox-dialog__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-3); align-items: end; }
.factbox-dialog__rows { display: flex; flex-direction: column; gap: var(--sp-2); }
.factbox-dialog__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sp-2); align-items: start;
  padding: var(--sp-3); background: var(--surface-raised); border: 1px solid var(--rule); border-radius: var(--r-md); }
.factbox-dialog__row[data-focus="true"] { border-color: var(--amber-600); }
.factbox-dialog__row.is-dragging { opacity: .5; }
.factbox-dialog__row-main { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.factbox-dialog__text { min-height: 56px; outline: none; }
.factbox-dialog__text:empty::before { content: attr(data-placeholder); color: var(--text-3); }
.factbox-dialog__grip .btn { cursor: grab; }
.factbox-dialog__format { display: flex; gap: var(--sp-1); }
.factbox-dialog__add { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
/* Phone (560 px and below, as .picture-details): Title above Kind. */
@media (max-width: 560px) { .factbox-dialog__head { grid-template-columns: 1fr; } }

/* The Series rail card's story list: .rows flush with the card's edges, headlines on up to two lines. Both. */
.series { margin: 0 calc(-1 * var(--sp-4)); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.series .row { padding: var(--sp-2) var(--sp-4); align-items: flex-start; }
.series .row:last-child { border-bottom: 0; }
.series .row__title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }